feat(projects): 1.0 beta

packages/hooks/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@sa/hooks",
+  "version": "1.0.0",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./src/*"
+      ]
+    }
+  }
+}

packages/hooks/src/index.ts

@@ -0,0 +1,6 @@
+import useBoolean from './use-boolean';
+import useLoading from './use-loading';
+import useContext from './use-context';
+import useSvgIconRender from './use-svg-icon-render';
+
+export { useBoolean, useLoading, useContext, useSvgIconRender };

packages/hooks/src/use-boolean.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+
+/**
+ * boolean
+ * @param initValue init value
+ */
+export default function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}

packages/hooks/src/use-context.ts

@@ -0,0 +1,103 @@
+import { inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+
+/**
+ * use context
+ * @param contextName context name
+ * @param fn context function
+ * @example
+ * ```ts
+ * // there are three vue files: A.vue, B.vue, C.vue, and A.vue is the parent component of B.vue and C.vue
+ *
+ * // context.ts
+ * import { ref } from 'vue';
+ * import { useContext } from '@sa/hooks';
+ *
+ * export const { setupStore, useStore } = useContext('demo', () => {
+ *   const count = ref(0);
+ *
+ *   function increment() {
+ *     count.value++;
+ *   }
+ *
+ *   function decrement() {
+ *     count.value--;
+ *   }
+ *
+ *   return {
+ *     count,
+ *     increment,
+ *     decrement
+ *   };
+ * })
+ * ```
+ *
+ * // A.vue
+ * ```vue
+ * <template>
+ *   <div>A</div>
+ * </template>
+ * <script setup lang="ts">
+ * import { setupStore } from './context';
+ *
+ * setupStore();
+ * // const { increment } = setupStore(); // also can control the store in the parent component
+ * </script>
+ * ```
+ * // B.vue
+ * ```vue
+ * <template>
+ *  <div>B</div>
+ * </template>
+ * <script setup lang="ts">
+ * import { useStore } from './context';
+ *
+ * const { count, increment } = useStore();
+ * </script>
+ * ```
+ *
+ * // C.vue is same as B.vue
+ */
+export default function useContext<T extends (...args: any[]) => any>(contextName: string, fn: T) {
+  type Context = ReturnType<T>;
+
+  const { useProvide, useInject: useStore } = createContext<Context>(contextName);
+
+  function setupStore(...args: Parameters<T>) {
+    const context: Context = fn(...args);
+    return useProvide(context);
+  }
+
+  return {
+    /**
+     * setup store in the parent component
+     */
+    setupStore,
+    /**
+     * use store in the child component
+     */
+    useStore
+  };
+}
+
+/**
+ * create context
+ */
+function createContext<T>(contextName: string) {
+  const injectKey: InjectionKey<T> = Symbol(contextName);
+
+  function useProvide(context: T) {
+    provide(injectKey, context);
+
+    return context;
+  }
+
+  function useInject() {
+    return inject(injectKey) as T;
+  }
+
+  return {
+    useProvide,
+    useInject
+  };
+}

packages/hooks/src/use-loading.ts

@@ -0,0 +1,15 @@
+import useBoolean from './use-boolean';
+
+/**
+ * loading
+ * @param initValue init value
+ */
+export default function useLoading(initValue = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
+
+  return {
+    loading,
+    startLoading,
+    endLoading
+  };
+}

packages/hooks/src/use-svg-icon-render.ts

@@ -0,0 +1,56 @@
+import { h } from 'vue';
+import type { Component } from 'vue';
+
+/**
+ * svg icon render hook
+ * @param SvgIcon svg icon component
+ */
+export default function useSvgIconRender(SvgIcon: Component) {
+  interface IconConfig {
+    /**
+     * iconify icon name
+     */
+    icon?: string;
+    /**
+     * local icon name
+     */
+    localIcon?: string;
+    /**
+     * icon color
+     */
+    color?: string;
+    /**
+     * icon size
+     */
+    fontSize?: number;
+  }
+
+  type IconStyle = Partial<Pick<CSSStyleDeclaration, 'color' | 'fontSize'>>;
+
+  /**
+   * svg icon VNode
+   * @param config
+   */
+  const SvgIconVNode = (config: IconConfig) => {
+    const { color, fontSize, icon, localIcon } = config;
+
+    const style: IconStyle = {};
+
+    if (color) {
+      style.color = color;
+    }
+    if (fontSize) {
+      style.fontSize = `${fontSize}px`;
+    }
+
+    if (!icon && !localIcon) {
+      return undefined;
+    }
+
+    return () => h(SvgIcon, { icon, localIcon, style });
+  };
+
+  return {
+    SvgIconVNode
+  };
+}

packages/hooks/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}