feat: add config-provider component

chizukicn · Nov 10, 2023 · 8c1f0be · 8c1f0be
1 parent bc009cf
commit 8c1f0be
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 42 deletions.
diff --git a/packages/components/components.ts b/packages/components/components.ts
@@ -3,3 +3,4 @@ export * from "../core/src/selection/component";
 export * from "../core/src/item/component";
 export * from "../core/src/icon/component";
 export * from "../core/src/switch/component";
+export * from "../core/src/config-provider/component";
diff --git a/packages/core/src/config-provider/component.ts b/packages/core/src/config-provider/component.ts
@@ -0,0 +1,20 @@
+import type { PropType } from "vue";
+import { defineComponent, renderSlot } from "vue";
+import type { SharedConfig } from "@hoci/core";
+import { provideSharedConfig } from "@hoci/core";
+export const HiConfigProvider = defineComponent({
+  props: {
+    icon: {
+      type: Object as PropType<SharedConfig["icon"]>
+    },
+    activateEvent: {
+      type: String as PropType<SharedConfig["activateEvent"]>
+    }
+  },
+  setup(props, context) {
+    provideSharedConfig(props);
+    return () => {
+      return renderSlot(context.slots, "default", undefined);
+    };
+  }
+});
diff --git a/packages/core/src/config-provider/index.ts b/packages/core/src/config-provider/index.ts
@@ -0,0 +1,26 @@
+import { defineHookProps } from "@hoci/shared";
+import type { PropType } from "vue";
+
+export const configProviderProps = defineHookProps({
+  src: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: [Number, String]
+  },
+  width: {
+    type: [Number, String]
+  },
+  height: {
+    type: [Number, String]
+  },
+  color: {
+    type: String,
+    default: "currentColor"
+  },
+  mask: {
+    type: [Boolean, String] as PropType<boolean | "auto">,
+    default: () => "auto"
+  }
+});
diff --git a/playground/src/app.vue b/playground/src/app.vue
@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, reactive, ref } from "vue";
-import { HiAffix, HiIcon, HiItem, HiSelection, HiSwitch, provideSharedConfig } from "hoci";
+import { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch } from "hoci";
 import hociSvg from "./assets/hoci.svg";
 
 export default defineComponent(() => {
@@ -33,52 +33,46 @@ export default defineComponent(() => {
     logs.value.length = 0;
   }
 
-  provideSharedConfig({
-    icon: {
-      size: 96
-    }
-  });
-
-
 
   return () => {
     return <div class="w-full p-4">
-      <hi-icon class="text-green rounded w-12 h-12" src={hociSvg}/>
-      <HiIcon size={0} class="text-green rounded w-12 h-12" src={hociSvg}/>
-
-      <HiAffix class="my-1" as="div" offset={30}>
-        <div class="inline-block  p-4 bg-blue-200" >
+      <HiConfigProvider icon={{ size: 96 }}>
+        <hi-icon class="text-green rounded w-12 h-12" src={hociSvg}/>
+        <HiIcon size={0} class="text-green rounded w-12 h-12" src={hociSvg}/>
+        <HiAffix class="my-1" as="div" offset={30}>
+          <div class="inline-block  p-4 bg-blue-200" >
           Offset Top 30px
+          </div>
+        </HiAffix>
+        <HiSelection {...selectionState}
+          onChange={handleChange}
+          v-model={selectedIndex.value}
+          as="div"
+          itemClass="duration-300 cursor-pointer px-2 py-1"
+          class="flex space-x-4 items-center"
+          activeClass="text-white bg-hex-f00"
+          disabledClass="bg-gray-200 cursor-not-allowed line-through text-gray-500"
+        >
+          <HiItem value={1}>Item 1</HiItem>
+          <HiItem value={2}>Item 2</HiItem>
+          <HiItem disabled value={3}>Item 3</HiItem>
+          <HiItem value={4}>Item 4</HiItem>
+          <HiItem value={5}>Item 5</HiItem>
+        </HiSelection>
+        <div class="flex space-x-4 items-center">
+          <HiSwitch as="span" v-model={selectionState.multiple} class="cursor-pointer mt-4 duration-200 select-none" activeClass="text-hex-f00">Multiple</HiSwitch>
+          <HiSwitch as="span" v-model={selectionState.clearable} class="cursor-pointer mt-4 duration-200 select-none" activeClass="text-hex-f00">Clearable</HiSwitch>
+        </div>
+        <div>Selected:{JSON.stringify(selectedIndex.value)}</div>
+        <div class="mt-4"></div>
+        <div class="flex justify-between items-center">
+          <div>Console: </div>
+          <button onClick={clearLog} class="border-solid border-1 border-gray-50">Clear</button>
+        </div>
+        <div class="bg-gray-500 h-200 mt-2 text-white px-4 overflow-y-auto">
+          {logs.value.map((log, index) => <div class="h-5 leading-5" key={index}>{log}</div>)}
         </div>
-      </HiAffix>
-      <HiSelection {...selectionState}
-        onChange={handleChange}
-        v-model={selectedIndex.value}
-        as="div"
-        itemClass="duration-300 cursor-pointer px-2 py-1"
-        class="flex space-x-4 items-center"
-        activeClass="text-white bg-hex-f00"
-        disabledClass="bg-gray-200 cursor-not-allowed line-through text-gray-500"
-      >
-        <HiItem value={1}>Item 1</HiItem>
-        <HiItem value={2}>Item 2</HiItem>
-        <HiItem disabled value={3}>Item 3</HiItem>
-        <HiItem value={4}>Item 4</HiItem>
-        <HiItem value={5}>Item 5</HiItem>
-      </HiSelection>
-      <div class="flex space-x-4 items-center">
-        <HiSwitch as="span" v-model={selectionState.multiple} class="cursor-pointer mt-4 duration-200 select-none" activeClass="text-hex-f00">Multiple</HiSwitch>
-        <HiSwitch as="span" v-model={selectionState.clearable} class="cursor-pointer mt-4 duration-200 select-none" activeClass="text-hex-f00">Clearable</HiSwitch>
-      </div>
-      <div>Selected:{JSON.stringify(selectedIndex.value)}</div>
-      <div class="mt-4"></div>
-      <div class="flex justify-between items-center">
-        <div>Console: </div>
-        <button onClick={clearLog} class="border-solid border-1 border-gray-50">Clear</button>
-      </div>
-      <div class="bg-gray-500 h-200 mt-2 text-white px-4 overflow-y-auto">
-        {logs.value.map((log, index) => <div class="h-5 leading-5" key={index}>{log}</div>)}
-      </div>
+      </HiConfigProvider>
     </div>;
   };
 });