@hoci/components 0.4.3 → 0.5.1

package/dist/index.cjs

@@ -3,6 +3,8 @@
 const vue = require('vue');
 const core = require('@hoci/core');
 const tslx = require('tslx');
+const shared = require('@hoci/shared');
+const core$1 = require('@vueuse/core');
 
 const HiAffix = vue.defineComponent({
   name: "HiAffix",
@@ -60,7 +62,7 @@ const HiItem = vue.defineComponent({
       props.as,
       {
         class: className.value,
-        [`on${vue.capitalize(activateEvent.value)}`]: activate,
+        [`on${tslx.capitalize(activateEvent.value)}`]: activate,
         disabled: isDisabled.value
       },
       render()
@@ -115,13 +117,430 @@ const HiSwitch = vue.defineComponent({
   }
 });
 
+const HiConfigProvider = vue.defineComponent({
+  props: {
+    ...core.configProviderProps,
+    as: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    core.provideSharedConfig(props);
+    return () => {
+      const content = vue.renderSlot(context.slots, "default", void 0);
+      if (props.as) {
+        return vue.h(props.as, content);
+      }
+      return content;
+    };
+  }
+});
+
+const selectionProps = shared.defineHookProps({
+  modelValue: {
+    type: shared.valuePropType,
+    default: () => null
+  },
+  /**
+   * 选中时的 class
+   */
+  activeClass: {
+    type: shared.classPropType,
+    default: "active"
+  },
+  /**
+   *  每个选项的 class
+   */
+  itemClass: {
+    type: shared.classPropType,
+    default: ""
+  },
+  disabledClass: {
+    type: shared.classPropType,
+    default: "disabled"
+  },
+  unactiveClass: {
+    type: shared.classPropType,
+    default: ""
+  },
+  label: {
+    type: shared.labelPropType
+  },
+  /**
+   *  多选模式
+   */
+  multiple: {
+    type: [Boolean, Number],
+    default: () => false
+  },
+  /**
+   * 可清除
+   */
+  clearable: {
+    type: Boolean
+  },
+  defaultValue: {
+    type: shared.valuePropType,
+    default: () => null
+  },
+  activateEvent: {
+    type: String
+  }
+});
+const selectionEmits = shared.defineHookEmits([
+  "update:modelValue",
+  "change",
+  "load",
+  "unload"
+]);
+const HiSelectionContextSymbol = Symbol("[hi-selection]context");
+function useSelectionContext() {
+  const sharedConfig = shared.useSharedConfig();
+  return vue.inject(HiSelectionContextSymbol, {
+    isActive: () => false,
+    changeActive: () => {
+    },
+    activeClass: "active",
+    unactiveClass: "unactive",
+    disabledClass: "disabled",
+    itemClass: "",
+    activateEvent: sharedConfig.activateEvent,
+    label: null,
+    multiple: false
+  });
+}
+const useSelectionList = shared.defineHookComponent({
+  props: selectionProps,
+  emits: selectionEmits,
+  setup(props, { emit, slots }) {
+    const options = vue.reactive([]);
+    function toArray(value) {
+      if (!core$1.isDefined(value)) {
+        return [];
+      }
+      if (props.multiple && Array.isArray(value)) {
+        return value.filter((v) => v != null || v !== void 0);
+      }
+      return [value];
+    }
+    const actives = vue.reactive([
+      ...toArray(props.modelValue ?? props.defaultValue)
+    ]);
+    const currentValue = vue.computed({
+      get() {
+        return props.multiple ? actives : actives[0];
+      },
+      set(val) {
+        actives.splice(0, actives.length, ...toArray(val));
+      }
+    });
+    const modelValue = vue.computed({
+      get() {
+        return props.modelValue ?? props.defaultValue;
+      },
+      set(val) {
+        emit("update:modelValue", val);
+      }
+    });
+    core$1.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 = shared.useSharedConfig();
+    vue.provide(HiSelectionContextSymbol, core$1.toReactive({
+      activeClass: vue.computed(() => tslx.cls(props.activeClass)),
+      unactiveClass: vue.computed(() => tslx.cls(props.unactiveClass)),
+      disabledClass: vue.computed(() => tslx.cls(props.disabledClass)),
+      itemClass: vue.computed(() => tslx.cls(props.itemClass)),
+      label: vue.computed(() => props.label),
+      multiple: vue.computed(() => props.multiple),
+      clearable: vue.computed(() => props.clearable),
+      defaultValue: vue.computed(() => props.defaultValue),
+      activateEvent: vue.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 : shared.getFirstChilld(children);
+    };
+    const slotData = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+    const render = () => {
+      return vue.renderSlot(slots, "default", slotData);
+    };
+    return {
+      options,
+      actives,
+      isActive,
+      changeActive,
+      renderItem,
+      render
+    };
+  }
+});
+
+const HiTabs = vue.defineComponent({
+  props: {
+    ...selectionProps,
+    headerClass: {
+      type: shared.classPropType
+    },
+    as: {
+      type: String,
+      default: "div"
+    },
+    headerAs: {
+      type: String,
+      default: "div"
+    },
+    contentAs: {
+      type: String,
+      default: "div"
+    },
+    contentClass: {
+      type: shared.classPropType
+    },
+    keepAlive: {
+      type: [Boolean, Object],
+      default: false
+    }
+  },
+  setup(props, context) {
+    const selection = useSelectionList(props, context);
+    return () => {
+      let component = selection.renderItem();
+      if (props.keepAlive) {
+        component = vue.h(vue.KeepAlive, {
+          ...typeof props.keepAlive == "object" ? props.keepAlive : {}
+        }, component);
+      }
+      if (context.slots.content) {
+        component = context.slots.content({
+          component
+        });
+      } else {
+        component = vue.h(props.contentAs, {
+          class: props.contentClass
+        }, component);
+      }
+      return vue.h(props.as, [
+        vue.h(props.headerAs, {
+          class: props.headerClass
+        }, vue.renderSlot(context.slots, "default")),
+        component
+      ]);
+    };
+  }
+});
+
+const itemProps = shared.defineHookProps({
+  value: {
+    type: shared.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 = shared.defineHookComponent({
+  props: itemProps,
+  setup(props, { slots }) {
+    const context = useSelectionContext();
+    const activate = () => {
+      if (props.disabled) {
+        return;
+      }
+      context.changeActive(props.value);
+    };
+    const label = vue.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) {
+      vue.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 }
+      );
+      core$1.tryOnScopeDispose(remove);
+    }
+    const isActive = vue.computed(() => context.isActive(props.value));
+    const isDisabled = vue.computed(() => props.disabled);
+    const className = vue.computed(() => {
+      const array = [context.itemClass];
+      if (!isDisabled.value) {
+        array.push(context.isActive(props.value) ? context.activeClass : context.unactiveClass);
+      } else {
+        array.push(context.disabledClass);
+      }
+      return tslx.cls(array);
+    });
+    const activateEvent = vue.computed(() => props.activateEvent ?? context.activateEvent);
+    return {
+      activate,
+      render,
+      isActive,
+      isDisabled,
+      className,
+      activateEvent,
+      label
+    };
+  }
+});
+
+const HiTabPane = vue.defineComponent({
+  props: {
+    ...itemProps
+  },
+  setup(props, context) {
+    const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
+    return () => {
+      return vue.h(
+        "div",
+        {
+          class: className.value,
+          [`on${tslx.capitalize(activateEvent.value)}`]: activate,
+          disabled: isDisabled.value
+        },
+        label.value
+      );
+    };
+  }
+});
+
+const HiPopover = vue.defineComponent({
+  name: "HiPopover",
+  props: {
+    ...core.popoverProps,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: core.popoverEmits,
+  setup(props, context) {
+    const { triggerRef, popupClass, events, popupRef, popupStyle } = core.usePopover(props, context);
+    return () => {
+      let content = vue.h(
+        "div",
+        {
+          class: popupClass.value,
+          style: popupStyle.value,
+          ref: popupRef
+        },
+        vue.renderSlot(context.slots, "popup")
+      );
+      if (props.teleport) {
+        content = vue.h(
+          vue.Teleport,
+          {
+            to: props.teleport === true ? "body" : props.teleport
+          },
+          content
+        );
+      }
+      return vue.h(props.as, {
+        ref: triggerRef,
+        ...events
+      }, [
+        vue.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) => {
@@ -131,8 +550,12 @@ const install = (app) => {
 };
 
 exports.HiAffix = HiAffix;
+exports.HiConfigProvider = HiConfigProvider;
 exports.HiIcon = HiIcon;
 exports.HiItem = HiItem;
+exports.HiPopover = HiPopover;
 exports.HiSelection = HiSelection;
 exports.HiSwitch = HiSwitch;
+exports.HiTabPane = HiTabPane;
+exports.HiTabs = HiTabs;
 exports.install = install;