@hoci/components 0.4.3 → 0.5.1

package/dist/index.mjs

@@ -1,6 +1,8 @@
-import { defineComponent, h, renderSlot, capitalize } from 'vue';
-import { affixProps, useAffix, selectionProps, selectionEmits, useSelectionList, itemProps, useSelectionItem, iconProps, useIcon, switchProps, switchEmits, useSwitch } from '@hoci/core';
-import { capitalize as capitalize$1 } from 'tslx';
+import { defineComponent, h, renderSlot, reactive, computed, provide, inject, KeepAlive, watch, Teleport } from 'vue';
+import { affixProps, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
+import { capitalize, cls } from 'tslx';
+import { defineHookProps, valuePropType, classPropType, labelPropType, defineHookEmits, defineHookComponent, useSharedConfig, getFirstChilld } from '@hoci/shared';
+import { syncRef, toReactive, isDefined, tryOnScopeDispose } from '@vueuse/core';
 
 const HiAffix = defineComponent({
   name: "HiAffix",
@@ -27,15 +29,15 @@ const HiAffix = defineComponent({
 const HiSelection = defineComponent({
   name: "HiSelection",
   props: {
-    ...selectionProps,
+    ...selectionProps$1,
     as: {
       type: String,
       default: "div"
     }
   },
-  emits: selectionEmits,
+  emits: selectionEmits$1,
   setup(props, context) {
-    const { render } = useSelectionList(props, context);
+    const { render } = useSelectionList$1(props, context);
     return () => h(props.as, {}, render());
   }
 });
@@ -43,14 +45,14 @@ const HiSelection = defineComponent({
 const HiItem = defineComponent({
   name: "HiItem",
   props: {
-    ...itemProps,
+    ...itemProps$1,
     as: {
       type: String,
       default: "div"
     }
   },
   setup(props, context) {
-    const { render, activate, className, isDisabled, activateEvent } = useSelectionItem(
+    const { render, activate, className, isDisabled, activateEvent } = useSelectionItem$1(
       props,
       context
     );
@@ -102,7 +104,7 @@ const HiSwitch = defineComponent({
         props.as,
         {
           class: className.value,
-          [`on${capitalize$1(activateEvent.value)}`]: toggle
+          [`on${capitalize(activateEvent.value)}`]: toggle
         },
         renderSlot(slots, "default", {
           active: modelValue.value,
@@ -113,13 +115,430 @@ const HiSwitch = defineComponent({
   }
 });
 
+const HiConfigProvider = defineComponent({
+  props: {
+    ...configProviderProps,
+    as: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    provideSharedConfig(props);
+    return () => {
+      const content = renderSlot(context.slots, "default", void 0);
+      if (props.as) {
+        return h(props.as, content);
+      }
+      return content;
+    };
+  }
+});
+
+const selectionProps = defineHookProps({
+  modelValue: {
+    type: valuePropType,
+    default: () => null
+  },
+  /**
+   * 选中时的 class
+   */
+  activeClass: {
+    type: classPropType,
+    default: "active"
+  },
+  /**
+   *  每个选项的 class
+   */
+  itemClass: {
+    type: classPropType,
+    default: ""
+  },
+  disabledClass: {
+    type: classPropType,
+    default: "disabled"
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: ""
+  },
+  label: {
+    type: labelPropType
+  },
+  /**
+   *  多选模式
+   */
+  multiple: {
+    type: [Boolean, Number],
+    default: () => false
+  },
+  /**
+   * 可清除
+   */
+  clearable: {
+    type: Boolean
+  },
+  defaultValue: {
+    type: valuePropType,
+    default: () => null
+  },
+  activateEvent: {
+    type: String
+  }
+});
+const selectionEmits = defineHookEmits([
+  "update:modelValue",
+  "change",
+  "load",
+  "unload"
+]);
+const HiSelectionContextSymbol = Symbol("[hi-selection]context");
+function useSelectionContext() {
+  const sharedConfig = useSharedConfig();
+  return inject(HiSelectionContextSymbol, {
+    isActive: () => false,
+    changeActive: () => {
+    },
+    activeClass: "active",
+    unactiveClass: "unactive",
+    disabledClass: "disabled",
+    itemClass: "",
+    activateEvent: sharedConfig.activateEvent,
+    label: null,
+    multiple: false
+  });
+}
+const useSelectionList = defineHookComponent({
+  props: selectionProps,
+  emits: selectionEmits,
+  setup(props, { emit, slots }) {
+    const options = reactive([]);
+    function toArray(value) {
+      if (!isDefined(value)) {
+        return [];
+      }
+      if (props.multiple && Array.isArray(value)) {
+        return value.filter((v) => v != null || v !== void 0);
+      }
+      return [value];
+    }
+    const actives = reactive([
+      ...toArray(props.modelValue ?? props.defaultValue)
+    ]);
+    const currentValue = computed({
+      get() {
+        return props.multiple ? actives : actives[0];
+      },
+      set(val) {
+        actives.splice(0, actives.length, ...toArray(val));
+      }
+    });
+    const modelValue = computed({
+      get() {
+        return props.modelValue ?? props.defaultValue;
+      },
+      set(val) {
+        emit("update:modelValue", val);
+      }
+    });
+    syncRef(currentValue, modelValue, { immediate: true, deep: true });
+    const emitChange = () => emit("change", currentValue.value);
+    function isActive(value) {
+      return actives.includes(value);
+    }
+    function changeActive(value) {
+      if (isActive(value)) {
+        if (props.multiple || props.clearable) {
+          actives.splice(actives.indexOf(value), 1);
+          emitChange();
+        }
+      } else {
+        if (props.multiple) {
+          const limit = typeof props.multiple === "number" ? props.multiple : Number.POSITIVE_INFINITY;
+          if (actives.length < limit) {
+            actives.push(value);
+            emitChange();
+          }
+        } else {
+          actives.splice(0, actives.length, value);
+          emitChange();
+        }
+      }
+    }
+    const init = (option) => {
+      function remove() {
+        const index = options.findIndex((e) => e.id === option.id);
+        if (index > -1) {
+          options.splice(index, 1);
+          emit("unload", option);
+        }
+      }
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].value === option.value) {
+          options.splice(i, 1);
+          i--;
+        }
+      }
+      options.push(option);
+      emit("load", option);
+      return remove;
+    };
+    const sharedConfig = useSharedConfig();
+    provide(HiSelectionContextSymbol, toReactive({
+      activeClass: computed(() => cls(props.activeClass)),
+      unactiveClass: computed(() => cls(props.unactiveClass)),
+      disabledClass: computed(() => cls(props.disabledClass)),
+      itemClass: computed(() => cls(props.itemClass)),
+      label: computed(() => props.label),
+      multiple: computed(() => props.multiple),
+      clearable: computed(() => props.clearable),
+      defaultValue: computed(() => props.defaultValue),
+      activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
+      active: currentValue,
+      changeActive,
+      isActive,
+      init
+    }));
+    const renderItem = () => {
+      const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
+      return props.multiple ? children : getFirstChilld(children);
+    };
+    const slotData = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+    const render = () => {
+      return renderSlot(slots, "default", slotData);
+    };
+    return {
+      options,
+      actives,
+      isActive,
+      changeActive,
+      renderItem,
+      render
+    };
+  }
+});
+
+const HiTabs = defineComponent({
+  props: {
+    ...selectionProps,
+    headerClass: {
+      type: classPropType
+    },
+    as: {
+      type: String,
+      default: "div"
+    },
+    headerAs: {
+      type: String,
+      default: "div"
+    },
+    contentAs: {
+      type: String,
+      default: "div"
+    },
+    contentClass: {
+      type: classPropType
+    },
+    keepAlive: {
+      type: [Boolean, Object],
+      default: false
+    }
+  },
+  setup(props, context) {
+    const selection = useSelectionList(props, context);
+    return () => {
+      let component = selection.renderItem();
+      if (props.keepAlive) {
+        component = h(KeepAlive, {
+          ...typeof props.keepAlive == "object" ? props.keepAlive : {}
+        }, component);
+      }
+      if (context.slots.content) {
+        component = context.slots.content({
+          component
+        });
+      } else {
+        component = h(props.contentAs, {
+          class: props.contentClass
+        }, component);
+      }
+      return h(props.as, [
+        h(props.headerAs, {
+          class: props.headerClass
+        }, renderSlot(context.slots, "default")),
+        component
+      ]);
+    };
+  }
+});
+
+const itemProps = defineHookProps({
+  value: {
+    type: valuePropType,
+    default() {
+      return Math.random().toString(16).slice(2);
+    }
+  },
+  label: {
+    type: [Function, String]
+  },
+  keepAlive: {
+    type: Boolean,
+    default: () => true
+  },
+  key: {
+    type: [String, Number, Symbol]
+  },
+  activateEvent: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const useSelectionItem = defineHookComponent({
+  props: itemProps,
+  setup(props, { slots }) {
+    const context = useSelectionContext();
+    const activate = () => {
+      if (props.disabled) {
+        return;
+      }
+      context.changeActive(props.value);
+    };
+    const label = computed(() => {
+      let label2 = props.label ?? context.label;
+      if (label2 && typeof label2 == "function") {
+        label2 = label2(props.value);
+      }
+      return Array.isArray(label2) ? label2 : [label2];
+    });
+    function render() {
+      return slots.default?.({
+        active: context.isActive(props.value),
+        activate
+      }) ?? label.value.filter(Boolean);
+    }
+    let remove = () => {
+    };
+    const init = context.init;
+    if (init) {
+      watch(
+        () => props.value,
+        (value) => {
+          remove();
+          remove = init({
+            id: Math.random().toString(16).slice(2),
+            label: typeof props.label == "string" ? props.label : void 0,
+            value,
+            render
+          });
+        },
+        { immediate: true }
+      );
+      tryOnScopeDispose(remove);
+    }
+    const isActive = computed(() => context.isActive(props.value));
+    const isDisabled = computed(() => props.disabled);
+    const className = computed(() => {
+      const array = [context.itemClass];
+      if (!isDisabled.value) {
+        array.push(context.isActive(props.value) ? context.activeClass : context.unactiveClass);
+      } else {
+        array.push(context.disabledClass);
+      }
+      return cls(array);
+    });
+    const activateEvent = computed(() => props.activateEvent ?? context.activateEvent);
+    return {
+      activate,
+      render,
+      isActive,
+      isDisabled,
+      className,
+      activateEvent,
+      label
+    };
+  }
+});
+
+const HiTabPane = defineComponent({
+  props: {
+    ...itemProps
+  },
+  setup(props, context) {
+    const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
+    return () => {
+      return h(
+        "div",
+        {
+          class: className.value,
+          [`on${capitalize(activateEvent.value)}`]: activate,
+          disabled: isDisabled.value
+        },
+        label.value
+      );
+    };
+  }
+});
+
+const HiPopover = defineComponent({
+  name: "HiPopover",
+  props: {
+    ...popoverProps,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: popoverEmits,
+  setup(props, context) {
+    const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
+    return () => {
+      let content = h(
+        "div",
+        {
+          class: popupClass.value,
+          style: popupStyle.value,
+          ref: popupRef
+        },
+        renderSlot(context.slots, "popup")
+      );
+      if (props.teleport) {
+        content = h(
+          Teleport,
+          {
+            to: props.teleport === true ? "body" : props.teleport
+          },
+          content
+        );
+      }
+      return h(props.as, {
+        ref: triggerRef,
+        ...events
+      }, [
+        renderSlot(context.slots, "default"),
+        content
+      ]);
+    };
+  }
+});
+
 const components = {
   __proto__: null,
   HiAffix: HiAffix,
+  HiConfigProvider: HiConfigProvider,
   HiIcon: HiIcon,
   HiItem: HiItem,
+  HiPopover: HiPopover,
   HiSelection: HiSelection,
-  HiSwitch: HiSwitch
+  HiSwitch: HiSwitch,
+  HiTabPane: HiTabPane,
+  HiTabs: HiTabs
 };
 
 const install = (app) => {
@@ -128,4 +547,4 @@ const install = (app) => {
   }
 };
 
-export { HiAffix, HiIcon, HiItem, HiSelection, HiSwitch, install };
+export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/components",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "",
   "author": "chizuki",
   "license": "MIT",
@@ -25,14 +25,14 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@vueuse/core": ">=10",
-    "vue": "^3.3.4"
+    "vue": "^3.0.0-0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": ">=10.5.0",
     "maybe-types": "^0.1.0",
     "tslx": "^0.1.1",
-    "@hoci/core": "0.4.3"
+    "@hoci/shared": "0.5.1",
+    "@hoci/core": "0.5.1"
   },
   "scripts": {
     "build": "unbuild",