feat(hooks): add @sa/hooks

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.1",
+    "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
     "@vueuse/core": "10.5.0",

packages/hooks/package.json

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

packages/hooks/src/index.ts

@@ -0,0 +1,5 @@
+import useBoolean from './use-boolean';
+import useLoading from './use-loading';
+import useContext from './use-context';
+
+export { useBoolean, useLoading, useContext };

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,108 @@
+import { inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+
+type ContextFn<T> = () => T;
+
+/**
+ * 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>(contextName: string, fn: ContextFn<T>) {
+  const { useProvide, useInject } = createContext<T>(contextName);
+
+  const context = fn();
+
+  /**
+   * setup store in the parent component
+   */
+  function setupStore() {
+    return useProvide(context);
+  }
+
+  /**
+   * use store in the child component
+   */
+  function useStore() {
+    return useInject();
+  }
+
+  return {
+    setupStore,
+    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/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"]
+}

src/router/elegant/imports.ts

@@ -22,6 +22,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   home: () => import("@/views/home/index.vue"),
   "multi-menu_first_child": () => import("@/views/multi-menu/first_child/index.vue"),
   "multi-menu_second_child_home": () => import("@/views/multi-menu/second_child_home/index.vue"),
+  "user-center": () => import("@/views/user-center/index.vue"),
   user_detail: () => import("@/views/user/detail/[id].vue"),
   user_list: () => import("@/views/user/list/index.vue"),
 };

src/router/elegant/routes.ts

@@ -161,5 +161,19 @@ export const autoRoutes: ElegantRoute[] = [
         }
       }
     ]
+  },
+  {
+    path: '/user-center',
+    component: 'layout.base',
+    children: [
+      {
+        name: 'user-center',
+        path: '',
+        component: 'view.user-center',
+        meta: {
+          title: 'user-center'
+        }
+      }
+    ]
   }
 ];

src/typings/elegant-router.d.ts

@@ -31,6 +31,7 @@ declare module "@elegant-router/types" {
     "user": "/user";
     "user_detail": "/user/detail/:id";
     "user_list": "/user/list";
+    "user-center": "/user-center";
   };
 
   /**
@@ -64,6 +65,7 @@ declare module "@elegant-router/types" {
     | "login"
     | "multi-menu"
     | "user"
+    | "user-center"
   >;
 
   /**
@@ -78,6 +80,7 @@ declare module "@elegant-router/types" {
     | "home"
     | "multi-menu_first_child"
     | "multi-menu_second_child_home"
+    | "user-center"
     | "user_detail"
     | "user_list"
   >;

src/views/user-center/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <LookForward />
+</template>
+
+<style scoped></style>