yc-design-vue 1.0.1

package/es/Select/SelectVirtualList.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./SelectVirtualList.vue2.js";
+/* empty css                       */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const SelectVirtualList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79815f72"]]);
+export {
+  SelectVirtualList as default
+};

package/es/Select/SelectVirtualList.vue2.js

@@ -0,0 +1,61 @@
+import { defineComponent, toRefs, createElementBlock, openBlock, mergeProps, unref, createElementVNode, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent } from "vue";
+import { useVirtualList } from "../node_modules/@vueuse/core/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { getSlotFunction } from "../_shared/utils/vue-utils.js";
+import "../Empty/index.js";
+/* empty css                         */
+import useContext from "./hooks/useContext.js";
+import "./index.js";
+import Option from "./Option.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SelectVirtualList",
+  props: {
+    virtualListProps: {}
+  },
+  setup(__props) {
+    var _a, _b;
+    const props = __props;
+    const { virtualListProps } = toRefs(props);
+    const { fieldKey, renderOptions, slots, emits } = useContext().inject();
+    const { list, wrapperProps, containerProps } = useVirtualList(renderOptions, {
+      overscan: ((_a = virtualListProps.value) == null ? void 0 : _a.buffer) ?? 10,
+      itemHeight: ((_b = virtualListProps.value) == null ? void 0 : _b.itemHeight) || 36
+    });
+    const renderLabel = (option) => {
+      if (slots.option) {
+        return () => {
+          var _a2;
+          return ((_a2 = slots.option) == null ? void 0 : _a2.call(slots, {
+            data: option
+          })) || [];
+        };
+      }
+      const { render, label } = fieldKey.value;
+      return option[render] ? getSlotFunction(option[render]) : getSlotFunction(option[label]);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: "yc-select-dropdown-virtual-list" }, unref(containerProps)), [
+        createElementVNode("div", mergeProps({ class: "yc-select-dropdown-list" }, unref(wrapperProps)), [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), ({ data: v }) => {
+            return openBlock(), createBlock(unref(Option), {
+              key: v[unref(fieldKey).value],
+              value: v[unref(fieldKey).value],
+              disabled: v[unref(fieldKey).disabled],
+              "is-fallback-option": v[unref(fieldKey).isFallbackOption]
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(renderLabel(v))))
+              ]),
+              _: 2
+            }, 1032, ["value", "disabled", "is-fallback-option"]);
+          }), 128))
+        ], 16)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Select/hooks/useContext.d.ts

@@ -0,0 +1,81 @@
+import { Ref, Slots } from 'vue';
+import { SelectValue, SelectOptionData, SelectEmits } from '../type';
+import { InputInstance } from '../../Input';
+import { ObjectData, Props } from '../../_shared/type';
+type SelectContext = {
+    computedValue: Ref<SelectValue | SelectValue[] | undefined>;
+    computedInputValue: Ref<string>;
+    multiple: Ref<boolean>;
+    limit: Ref<number>;
+    curIndex: Ref<number>;
+    options: Ref<SelectOptionData[]>;
+    renderOptions: Ref<ObjectData[]>;
+    fieldKey: Ref<Record<string, string>>;
+    isEmpty: Ref<boolean>;
+    slots: Slots;
+    blur: () => void;
+    filterOption: (option: SelectOptionData) => boolean;
+    getValue: (value: SelectValue | ObjectData) => SelectValue;
+    collectOption: (props: Props, optionLabel: Ref<string>) => void;
+    emits: SelectEmits;
+};
+declare const _default: () => {
+    provide: (props: Props, emits: SelectEmits, inputRef: Ref<InputInstance | undefined>) => {
+        computedVisible: import('vue').WritableComputedRef<any, boolean>;
+        computedValue: import('vue').WritableComputedRef<any, SelectValue>;
+        computedInputValue: import('vue').WritableComputedRef<any, string>;
+        selectOptions: import('vue').ComputedRef<{
+            id: string;
+            label: SelectValue | undefined;
+            render?: import('../../_shared/type').RenderContent;
+            value?: SelectValue;
+            disabled?: boolean;
+            tagProps?: import('../..').TagProps;
+            isFallbackOption?: boolean;
+        }[]>;
+        createOptions: Ref<{
+            render?: string | import('vue').RenderFunction | ObjectData[] | undefined;
+            label?: string | undefined;
+            value?: string | number | boolean | ObjectData | (string | number | boolean | ObjectData)[] | undefined;
+            disabled?: boolean | undefined;
+            tagProps?: {
+                color?: string | undefined;
+                size?: import('../..').TagSize | undefined;
+                bordered?: boolean | undefined;
+                visible?: boolean | undefined;
+                defaultVisible?: boolean | undefined;
+                loading?: boolean | undefined;
+                closable?: boolean | undefined;
+                checkable?: boolean | undefined;
+                checked?: boolean | undefined;
+                defaultChecked?: boolean | undefined;
+                nowrap?: boolean | undefined;
+            } | undefined;
+            id?: string | undefined;
+            isFallbackOption?: boolean | undefined;
+        }[], SelectOptionData[] | {
+            render?: string | import('vue').RenderFunction | ObjectData[] | undefined;
+            label?: string | undefined;
+            value?: string | number | boolean | ObjectData | (string | number | boolean | ObjectData)[] | undefined;
+            disabled?: boolean | undefined;
+            tagProps?: {
+                color?: string | undefined;
+                size?: import('../..').TagSize | undefined;
+                bordered?: boolean | undefined;
+                visible?: boolean | undefined;
+                defaultVisible?: boolean | undefined;
+                loading?: boolean | undefined;
+                closable?: boolean | undefined;
+                checkable?: boolean | undefined;
+                checked?: boolean | undefined;
+                defaultChecked?: boolean | undefined;
+                nowrap?: boolean | undefined;
+            } | undefined;
+            id?: string | undefined;
+            isFallbackOption?: boolean | undefined;
+        }[]>;
+        options: import('vue').ComputedRef<ObjectData[]>;
+    };
+    inject: () => SelectContext;
+};
+export default _default;

package/es/Select/hooks/useContext.js

@@ -0,0 +1,196 @@
+import { toRefs, computed, provide, useSlots, inject, ref } from "vue";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../_shared/utils/dom.js";
+import { isBoolean, isFunction } from "../../_shared/utils/is.js";
+import "../../_shared/utils/time.js";
+import "../../Empty/index.js";
+/* empty css                            */
+import useControlValue from "../../_shared/utils/control.js";
+import useSelectOptions from "./useSelectOptions.js";
+import useSelectHotkeys from "./useSelectHotkeys.js";
+const SELECT_CONTEXT_KEY = "select-context";
+const useContext = () => {
+  const provide$1 = (props, emits, inputRef) => {
+    const {
+      popupVisible,
+      defaultPopupVisible,
+      modelValue,
+      defaultValue,
+      inputValue,
+      defaultInputValue,
+      multiple,
+      fieldNames,
+      limit,
+      allowSearch,
+      showExtraOptions,
+      valueKey,
+      hotkeys,
+      options: provideOptions,
+      showEmpty
+    } = toRefs(props);
+    const {
+      formatLabel,
+      fallbackOption,
+      filterOption: _filterOption
+    } = props;
+    const computedVisible = useControlValue(
+      popupVisible,
+      defaultPopupVisible.value,
+      (val) => {
+        emits("update:popupVisible", val);
+        emits("popup-visible-change", val);
+      }
+    );
+    const computedValue = useControlValue(
+      modelValue,
+      defaultValue.value ? defaultValue.value : multiple.value ? [] : "",
+      (val) => {
+        emits("change", val);
+        emits("update:modelValue", val);
+      },
+      (val) => {
+        if (multiple.value) {
+          return Array.isArray(val) ? val : [val];
+        }
+        return val;
+      }
+    );
+    const computedInputValue = useControlValue(
+      inputValue,
+      defaultInputValue.value,
+      (val) => {
+        emits("update:inputValue", val);
+      }
+    );
+    const fieldKey = computed(() => {
+      const keys = [
+        "id",
+        "label",
+        "value",
+        "disabled",
+        "tagProps",
+        "render",
+        "isFallbackOption"
+      ];
+      return Object.fromEntries(
+        keys.map((key) => {
+          return [key, fieldNames.value[key] ?? key];
+        })
+      );
+    });
+    const filterFn = (option) => {
+      var _a;
+      const label = option == null ? void 0 : option.label;
+      const keyword = (_a = computedInputValue.value.toLowerCase()) == null ? void 0 : _a.toLowerCase();
+      return !!(label == null ? void 0 : label.includes(keyword));
+    };
+    const filterOption = (option) => {
+      if (allowSearch.value) {
+        return isFunction(_filterOption) ? _filterOption(computedInputValue.value, option) : filterFn(option);
+      }
+      if (isBoolean(_filterOption) && !_filterOption) {
+        return true;
+      }
+      return isFunction(_filterOption) ? _filterOption(computedInputValue.value, option) : filterFn(option);
+    };
+    const {
+      options,
+      renderOptions,
+      createOptions,
+      selectOptions,
+      collectOption
+    } = useSelectOptions({
+      computedValue,
+      multiple,
+      showExtraOptions,
+      provideOptions,
+      getValue,
+      fallbackOption,
+      formatLabel
+    });
+    const isEmpty = computed(() => {
+      if (!showEmpty.value) {
+        return showEmpty.value;
+      }
+      if (!allowSearch.value || isBoolean(_filterOption) && !filterOption) {
+        return !options.value.length;
+      }
+      return options.value.every((item) => {
+        return !filterOption(item);
+      });
+    });
+    const { curIndex } = useSelectHotkeys({
+      computedValue,
+      computedVisible,
+      hotkeys,
+      limit,
+      multiple,
+      options,
+      blur,
+      emits
+    });
+    function getValue(value) {
+      return (value == null ? void 0 : value[valueKey.value]) ?? value;
+    }
+    function blur() {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    }
+    provide(SELECT_CONTEXT_KEY, {
+      computedValue,
+      computedInputValue,
+      limit,
+      multiple,
+      curIndex,
+      options,
+      isEmpty,
+      fieldKey,
+      renderOptions,
+      slots: useSlots(),
+      filterOption,
+      blur,
+      getValue,
+      emits,
+      collectOption
+    });
+    return {
+      computedVisible,
+      computedValue,
+      computedInputValue,
+      selectOptions,
+      createOptions,
+      options
+    };
+  };
+  const inject$1 = () => {
+    return inject(SELECT_CONTEXT_KEY, {
+      computedValue: ref(void 0),
+      computedInputValue: ref(""),
+      multiple: ref(false),
+      limit: ref(0),
+      curIndex: ref(-1),
+      options: ref([]),
+      renderOptions: ref([]),
+      isEmpty: ref(false),
+      fieldKey: ref({}),
+      slots: {},
+      emits: () => {
+      },
+      blur: () => {
+      },
+      filterOption: () => {
+        return true;
+      },
+      getValue: () => "",
+      collectOption: () => {
+      }
+    });
+  };
+  return {
+    provide: provide$1,
+    inject: inject$1
+  };
+};
+export {
+  useContext as default
+};

package/es/Select/hooks/useSelectHotkeys.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+import { SelectEmits, SelectOptionData, SelectValue } from '../type';
+declare const _default: (params: {
+    hotkeys: Ref<boolean>;
+    multiple: Ref<boolean>;
+    limit: Ref<number>;
+    computedVisible: Ref<boolean>;
+    computedValue: Ref<SelectValue>;
+    options: Ref<SelectOptionData[]>;
+    blur: () => void;
+    emits: SelectEmits;
+}) => {
+    curIndex: Ref<number, number>;
+};
+export default _default;

package/es/Select/hooks/useSelectHotkeys.js

@@ -0,0 +1,56 @@
+import { ref } from "vue";
+import { onKeyStroke } from "../../node_modules/@vueuse/core/index.js";
+const useSelectHotkeys = (params) => {
+  const {
+    computedValue,
+    computedVisible,
+    options,
+    hotkeys,
+    multiple,
+    limit,
+    blur,
+    emits
+  } = params;
+  const curIndex = ref(-1);
+  if (!hotkeys.value) {
+    return {
+      curIndex
+    };
+  }
+  onKeyStroke(["ArrowUp", "ArrowDown", "Enter"], (e) => {
+    if (!computedVisible.value || !options.value.length) return;
+    const { key } = e;
+    e.preventDefault();
+    if (key == "ArrowUp") {
+      curIndex.value--;
+      curIndex.value = curIndex.value < 0 ? options.value.length - 1 : curIndex.value;
+    } else if (key == "ArrowDown") {
+      curIndex.value++;
+      curIndex.value = curIndex.value >= options.value.length ? 0 : curIndex.value;
+    } else {
+      const value = options.value[curIndex.value].value;
+      if (multiple.value) {
+        const curValue = computedValue.value;
+        const index = curValue.findIndex((item) => item == value);
+        if (index == -1) {
+          if (limit.value > 0 && curValue.length == limit.value) {
+            return emits("exceedLimit", value);
+          }
+          computedValue.value = [...curValue, value];
+        } else {
+          computedValue.value = curValue.filter((item) => item != value);
+        }
+      } else {
+        computedValue.value = value;
+        blur();
+      }
+      emits("select", value);
+    }
+  });
+  return {
+    curIndex
+  };
+};
+export {
+  useSelectHotkeys as default
+};

package/es/Select/hooks/useSelectOptions.d.ts

@@ -0,0 +1,67 @@
+import { Ref } from 'vue';
+import { ObjectData, Props } from '../../_shared/type';
+import { SelectValue, SelectOptions, FallbackOption, FormatLabel, SelectOptionData } from '../index';
+declare const _default: (params: {
+    multiple: Ref<boolean>;
+    computedValue: Ref<SelectValue>;
+    provideOptions: Ref<SelectOptions>;
+    showExtraOptions: Ref<boolean>;
+    getValue: (value: string | ObjectData) => SelectValue;
+    fallbackOption?: FallbackOption;
+    formatLabel?: FormatLabel;
+}) => {
+    options: import('vue').ComputedRef<ObjectData[]>;
+    createOptions: Ref<{
+        render?: string | import('vue').RenderFunction | ObjectData[] | undefined;
+        label?: string | undefined;
+        value?: string | number | boolean | ObjectData | (string | number | boolean | ObjectData)[] | undefined;
+        disabled?: boolean | undefined;
+        tagProps?: {
+            color?: string | undefined;
+            size?: import('../..').TagSize | undefined;
+            bordered?: boolean | undefined;
+            visible?: boolean | undefined;
+            defaultVisible?: boolean | undefined;
+            loading?: boolean | undefined;
+            closable?: boolean | undefined;
+            checkable?: boolean | undefined;
+            checked?: boolean | undefined;
+            defaultChecked?: boolean | undefined;
+            nowrap?: boolean | undefined;
+        } | undefined;
+        id?: string | undefined;
+        isFallbackOption?: boolean | undefined;
+    }[], SelectOptionData[] | {
+        render?: string | import('vue').RenderFunction | ObjectData[] | undefined;
+        label?: string | undefined;
+        value?: string | number | boolean | ObjectData | (string | number | boolean | ObjectData)[] | undefined;
+        disabled?: boolean | undefined;
+        tagProps?: {
+            color?: string | undefined;
+            size?: import('../..').TagSize | undefined;
+            bordered?: boolean | undefined;
+            visible?: boolean | undefined;
+            defaultVisible?: boolean | undefined;
+            loading?: boolean | undefined;
+            closable?: boolean | undefined;
+            checkable?: boolean | undefined;
+            checked?: boolean | undefined;
+            defaultChecked?: boolean | undefined;
+            nowrap?: boolean | undefined;
+        } | undefined;
+        id?: string | undefined;
+        isFallbackOption?: boolean | undefined;
+    }[]>;
+    renderOptions: import('vue').ComputedRef<SelectOptions>;
+    selectOptions: import('vue').ComputedRef<{
+        id: string;
+        label: SelectValue | undefined;
+        render?: import('../../_shared/type').RenderContent;
+        value?: SelectValue;
+        disabled?: boolean;
+        tagProps?: import('../..').TagProps;
+        isFallbackOption?: boolean;
+    }[]>;
+    collectOption: (props: Props, optionLabel: Ref<string>) => void;
+};
+export default _default;

package/es/Select/hooks/useSelectOptions.js

@@ -0,0 +1,91 @@
+import { reactive, computed, ref, onMounted } from "vue";
+import { nanoid } from "../../node_modules/nanoid/index.browser.js";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../_shared/utils/dom.js";
+import { isUndefined, isNull, isString, isObject } from "../../_shared/utils/is.js";
+import "../../_shared/utils/time.js";
+import "../../Empty/index.js";
+/* empty css                            */
+const useSelectOptions = (params) => {
+  const {
+    computedValue,
+    multiple,
+    provideOptions,
+    showExtraOptions,
+    getValue,
+    fallbackOption,
+    formatLabel
+  } = params;
+  const optionMap = reactive(/* @__PURE__ */ new Map());
+  const options = computed(() => [...optionMap.values()]);
+  const createOptions = ref([]);
+  const fallbackOptions = computed(() => {
+    if (!fallbackOption) return [];
+    return selectValue.value.filter((v) => !options.value.find((item) => getValue(item.value) == v)).map((v) => {
+      const target = fallbackOption(v);
+      return {
+        ...target || {},
+        isFallbackOption: true
+      };
+    });
+  });
+  const renderOptions = computed(() => {
+    return [
+      ...provideOptions.value,
+      ...createOptions.value,
+      ...showExtraOptions.value ? fallbackOptions.value : []
+    ].map((item) => {
+      let option = item;
+      if (!isObject(item)) {
+        option = {
+          label: item,
+          value: item
+        };
+      }
+      return {
+        id: nanoid(),
+        ...option
+      };
+    });
+  });
+  const selectValue = computed(() => {
+    const value = multiple.value ? computedValue.value : [computedValue.value];
+    return value.map((item) => getValue(item)).filter((v) => !isEmpty(v));
+  });
+  const selectOptions = computed(() => {
+    const opts = [...options.value, ...fallbackOptions.value];
+    return selectValue.value.map((v) => {
+      const option = opts.find((item) => getValue(item.value) == v) || {};
+      return {
+        ...option,
+        id: `${v}`,
+        label: option ? (formatLabel == null ? void 0 : formatLabel(option)) ?? (option == null ? void 0 : option.label) : v
+      };
+    });
+  });
+  const isEmpty = (val) => {
+    return isUndefined(val) || isNull(val) || isString(val) && !val.length;
+  };
+  const collectOption = (props, optionLabel) => {
+    if (props.isFallbackOption) return;
+    const id = nanoid();
+    onMounted(() => {
+      const value = `${getValue(props.value)}`;
+      optionMap.set(id, {
+        ...props,
+        label: optionLabel.value,
+        value: value ? props.value : optionLabel.value
+      });
+    });
+  };
+  return {
+    options,
+    createOptions,
+    renderOptions,
+    selectOptions,
+    collectOption
+  };
+};
+export {
+  useSelectOptions as default
+};