@hoci/components 0.4.3 → 0.5.0

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,371 @@ const HiSwitch = vue.defineComponent({
   }
 });
 
+const HiConfigProvider = vue.defineComponent({
+  props: {
+    icon: {
+      type: Object
+    },
+    activateEvent: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    core.provideSharedConfig(props);
+    return () => {
+      return vue.renderSlot(context.slots, "default", void 0);
+    };
+  }
+});
+
+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 : children[0];
+    };
+    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
+    },
+    contentClass: {
+      type: shared.classPropType
+    },
+    as: {
+      type: String,
+      default: "div"
+    },
+    headerAs: {
+      type: String,
+      default: "div"
+    },
+    contentAs: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(props, context) {
+    const selection = useSelectionList(props, context);
+    return () => {
+      const content = selection.renderItem();
+      return vue.h(props.as, [
+        vue.h(props.headerAs, {
+          class: props.headerClass
+        }, vue.renderSlot(context.slots, "default")),
+        vue.h(props.contentAs, {
+          class: props.contentClass
+        }, content)
+      ]);
+    };
+  }
+});
+
+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 vue.renderSlot(slots, "default", {
+        active: context.isActive(props.value),
+        activate
+      }, () => {
+        return label.value;
+      });
+    }
+    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 components = {
   __proto__: null,
   HiAffix: HiAffix,
+  HiConfigProvider: HiConfigProvider,
   HiIcon: HiIcon,
   HiItem: HiItem,
   HiSelection: HiSelection,
-  HiSwitch: HiSwitch
+  HiSwitch: HiSwitch,
+  HiTabPane: HiTabPane,
+  HiTabs: HiTabs
 };
 
 const install = (app) => {
@@ -131,8 +491,11 @@ const install = (app) => {
 };
 
 exports.HiAffix = HiAffix;
+exports.HiConfigProvider = HiConfigProvider;
 exports.HiIcon = HiIcon;
 exports.HiItem = HiItem;
 exports.HiSelection = HiSelection;
 exports.HiSwitch = HiSwitch;
+exports.HiTabPane = HiTabPane;
+exports.HiTabs = HiTabs;
 exports.install = install;

package/dist/index.d.cts

@@ -1,6 +1,8 @@
 import * as vue from 'vue';
-import { App } from 'vue';
+import { PropType, App } from 'vue';
 import * as _hoci_core from '@hoci/core';
+import * as _hoci_shared from '@hoci/shared';
+import { ElementLike, ActivateEvent } from '@hoci/shared';
 
 declare const HiAffix: vue.DefineComponent<{
     as: {
@@ -15,7 +17,7 @@ declare const HiAffix: vue.DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    position: {
         type: vue.PropType<"top" | "bottom">;
         default: string;
     };
@@ -41,7 +43,7 @@ declare const HiAffix: vue.DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    position: {
         type: vue.PropType<"top" | "bottom">;
         default: string;
     };
@@ -55,7 +57,7 @@ declare const HiAffix: vue.DefineComponent<{
 }>>, {
     fixedClass: string;
     offset: number;
-    offsetType: "top" | "bottom";
+    position: "top" | "bottom";
     zIndex: number;
     as: string;
 }, {}>;
@@ -362,6 +364,210 @@ declare const HiSwitch: vue.DefineComponent<{
     as: string;
 }, {}>;
 
+declare const HiConfigProvider: vue.DefineComponent<{
+    icon: {
+        type: PropType<Partial<{
+            size: number | undefined;
+            sizeUnit: string | undefined;
+        }>>;
+    };
+    activateEvent: {
+        type: PropType<Partial<_hoci_core.ActivateEvent>>;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    icon: {
+        type: PropType<Partial<{
+            size: number | undefined;
+            sizeUnit: string | undefined;
+        }>>;
+    };
+    activateEvent: {
+        type: PropType<Partial<_hoci_core.ActivateEvent>>;
+    };
+}>>, {}, {}>;
+
+declare const HiTabs: vue.DefineComponent<{
+    headerClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+    };
+    contentClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    headerAs: {
+        type: StringConstructor;
+        default: string;
+    };
+    contentAs: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activeClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    itemClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    disabledClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    unactiveClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    label: {
+        type: vue.PropType<string | ((val?: any) => string) | null>;
+    };
+    multiple: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: () => false;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    defaultValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_shared.ActivateEvent>;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    headerClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+    };
+    contentClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    headerAs: {
+        type: StringConstructor;
+        default: string;
+    };
+    contentAs: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activeClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    itemClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    disabledClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    unactiveClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    label: {
+        type: vue.PropType<string | ((val?: any) => string) | null>;
+    };
+    multiple: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: () => false;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    defaultValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_shared.ActivateEvent>;
+    };
+}>>, {
+    multiple: number | boolean;
+    modelValue: any;
+    activeClass: string | string[] | Record<string, boolean>;
+    itemClass: string | string[] | Record<string, boolean>;
+    disabledClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
+    clearable: boolean;
+    defaultValue: any;
+    as: string;
+    headerAs: string;
+    contentAs: string;
+}, {}>;
+
+declare const HiTabPane: vue.DefineComponent<{
+    value: {
+        type: vue.PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: vue.PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: vue.PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: vue.PropType<ActivateEvent>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: vue.PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: vue.PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: vue.PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: vue.PropType<ActivateEvent>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    value: any;
+    disabled: boolean;
+    keepAlive: boolean;
+}, {}>;
+
 declare const install: (app: App) => void;
 
-export { HiAffix, HiIcon, HiItem, HiSelection, HiSwitch, install };
+export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch, HiTabPane, HiTabs, install };