Merge pull request #10 from Namchee/unified-options

feat: Add unified options

README.md

@@ -93,6 +93,7 @@ Prop Name | Type | Default | Description
 `hideOnOut` | `boolean` | `false` | Determines if the custom cursor should be hidden when the cursor leaves the viewport
 `contentPosition` | `string` | `center` | Determines the position of `contents` slot relative to the cursor. Possible values are `center`, `bottom`, `right`
 `lerp` | `number` | `1` | [Linear Interpolation Value](https://codepen.io/ma77os/pen/KGIEh)
+`options` | `Object` | `{}` | All of other options in one single object. Will gracefully fallback if some values are not provided.
 
 ## Slots
 

package.json

@@ -1,13 +1,12 @@
 {
   "name": "@namchee/tetikus",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "description": "A custom cursor component for Vue 3 ✌️",
   "author": "Cristopher Namchee <[email protected]>",
   "scripts": {
     "lint": "eslint",
     "build": "rm -rf dist/ && rollup -c",
     "build:watch": "npm run build -- --watch",
-    "build:verbose": "npm run build -- --verbose",
     "test": "ava",
     "postuninstall": "npm prune"
   },

src/common/types.ts

@@ -1,22 +1,29 @@
+// Exception level to be thrown.
+// Internal usage
 export enum ExceptionLevel {
   WARNING = 1,
   ERROR = 2,
 }
 
+// Options to be passed on `app.use()` calls
 export interface ConstructorOptions {
   directiveName?: string;
   transitionSpeed?: number;
   easing?: string;
   delay?: number;
 }
 
+// Options to be passed on props change
+// Example: color: { value: black }, then tetikus background
+// will be changed to black
 export interface TransformOpts<T> {
   value: T;
   duration?: number;
   delay?: number;
   easing?: string;
 }
 
+// Options to be passed on click or hover events.
 export interface TransformProps {
   id?: string | string[];
   scale?: TransformOpts<number> | number;
@@ -26,16 +33,41 @@ export interface TransformProps {
   opacity?: TransformOpts<number> | number;
 }
 
+// Internal usage
 export interface CSSStyles {
   [key: string]: string | number;
 }
 
+// Internal usage
 export interface CSSAnimation {
   cssStyles: CSSStyles;
   transitionString: string;
 }
 
+// Expected behavior from domElement on hover interaction
 export interface HoverBehavior {
   domElement: HTMLElement;
   transformProps: TransformProps;
 }
+
+// Unified tetikus props
+// Useful to avoid apropcalypse
+export interface TetikusProps {
+  showDefaultCursor?: boolean;
+  throttleSpeed?: number;
+  borderWidth?: number;
+  color?: string;
+  borderColor?: string;
+  size?: number;
+  inverColor?: boolean;
+  buttonMap?: string[];
+  clickBehavior?: TransformProps;
+  showOnTouch?: boolean;
+  opacity?: number;
+  hideOnOut?: boolean;
+  contentPosition?: string;
+  lerp?: number;
+  defaultTransitionSpeed?: number;
+  defaultEasing?: string;
+  defaultDelay?: number;
+}

src/components/Tetikus/Tetikus.vue

@@ -14,7 +14,11 @@ import { throttle } from './../../util/throttle';
 import { lerp } from './../../util/math';
 import { generateCSSTransform } from './../../util/dom';
 import { hoverState } from './../../directives/hover';
-import { TransformProps, HoverBehavior } from './../../common/types';
+import {
+  TransformProps,
+  HoverBehavior,
+  TetikusProps,
+} from './../../common/types';
 import {
   defaultTransitionSpeed,
   defaultEasingFunction,
@@ -79,8 +83,10 @@ export default defineComponent({
     buttonMap: {
       type: Array,
       default: () => ['left'],
-      validator: (val: Array<string>) => {
-        return val.every((v) => ['left', 'middle', 'right'].includes(v));
+      validator: (values: string[]) => {
+        return values.every(
+          (value: string) => ['left', 'middle', 'right'].includes(value),
+        );
       },
     },
 
@@ -145,9 +151,20 @@ export default defineComponent({
       type: Number,
       default: defaultDelay.value,
     },
+
+    // Unified tetikus props
+    // Useful to avoid apropcalypse
+    options: {
+      type: Object as () => TetikusProps,
+      default: {},
+    },
   },
 
-  setup(props, { slots, emit }) {
+  setup(properties, { slots, emit }) {
+    // construct new props unified object from options
+    // any undefined values will fallback normally.
+    const props = { ...properties, ...properties.options };
+
     // wrapper element ref
     const wrapper: Ref<HTMLElement | null> = ref(null);
     // cursor element ref
@@ -164,7 +181,7 @@ export default defineComponent({
 
     // css styles for cursor wrapper element
     const wrapperStyle = computed(() => {
-      const baseStyles: Record<string, unknown> = {
+      const baseStyles: Record<string, string | number> = {
         'opacity': props.opacity,
         'mix-blend-mode': props.invertColor ? 'difference' : 'normal',
         'flex-direction': props.contentPosition === 'bottom' ?
@@ -199,7 +216,8 @@ export default defineComponent({
     const contentStyle = computed(() => {
       return {
         'position': props.contentPosition === 'center' ?
-          'absolute' : 'center',
+          'absolute' :
+          'center',
       };
     });
 
@@ -309,7 +327,9 @@ export default defineComponent({
 
     // apply transformation on mouse button press
     const handleMouseDown = (event: MouseEvent): void => {
-      if (!props.buttonMap.includes(buttonMap.get(event.button))) {
+      const button = buttonMap.get(event.button) as string;
+
+      if (!props.buttonMap.includes(button)) {
         return;
       }
 
@@ -334,7 +354,9 @@ export default defineComponent({
 
     // apply another transform on cursor when mouse button is lifted
     const handleMouseUp = (event: MouseEvent): void => {
-      if (!props.buttonMap.includes(buttonMap.get(event.button))) {
+      const button = buttonMap.get(event.button) as string;
+
+      if (!props.buttonMap.includes(button)) {
         return;
       }
 
@@ -384,6 +406,8 @@ export default defineComponent({
           ...defaultTransformStyle.value,
           ...transformProps,
         };
+        // prevent TetikusWarning error
+        delete transformTarget.id;
 
         applyTransform(defaultTransformStyle.value, transformTarget, false);
       }