vft 0.0.74 → 0.0.77

package/es/components/select/select.vue2.js

@@ -0,0 +1,348 @@
+import { defineComponent as Le, toRefs as We, computed as s, unref as n, provide as ze, reactive as Fe, onMounted as Pe, nextTick as _e } from "vue";
+import { useResizeObserver as De, isIOS as Ke } from "@vueuse/core";
+import { placements as He } from "@popperjs/core";
+import { ClickOutside as $e } from "@vft/directives";
+import { useNamespace as B } from "../../hooks/use-namespace/index.js";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vft/utils";
+import { isValidComponentSize as ke } from "../../utils/helper.js";
+import "../../utils/ns-cover.js";
+import { useFocus as qe } from "../../hooks/use-focus/index.js";
+import { VftInput as je } from "../input/index.js";
+import { VftScrollbar as Qe } from "../scrollbar/index.js";
+import { VftTooltip as Ge } from "../tooltip/index.js";
+import { VftTag as Ue } from "../tag/index.js";
+import { VftIcon as Je } from "../icon/index.js";
+import { UPDATE_MODEL_EVENT as c, CHANGE_EVENT as Xe } from "../../constants/event.js";
+import Ye from "./option.vue.js";
+import Ze from "./select-dropdown.vue.js";
+import { useSelectStates as et, useSelect as tt } from "./useSelect.js";
+import { selectKey as ot } from "./token.js";
+import lt from "./options.js";
+const x = "VftSelect", wt = Le({
+  name: x,
+  componentName: x,
+  components: {
+    VftInput: je,
+    SelectMenu: Ze,
+    VftOption: Ye,
+    Options: lt,
+    VftTag: Ue,
+    VftScrollbar: Qe,
+    VftTooltip: Ge,
+    VftIcon: Je
+  },
+  directives: { ClickOutside: $e },
+  props: {
+    name: String,
+    id: String,
+    modelValue: {
+      type: [Array, String, Number, Boolean, Object],
+      default: void 0
+    },
+    autocomplete: {
+      type: String,
+      default: "off"
+    },
+    automaticDropdown: Boolean,
+    size: {
+      type: String,
+      validator: ke
+    },
+    effect: {
+      type: String,
+      default: "light"
+    },
+    disabled: Boolean,
+    clearable: Boolean,
+    filterable: Boolean,
+    allowCreate: Boolean,
+    loading: Boolean,
+    popperClass: {
+      type: String,
+      default: ""
+    },
+    popperOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    remote: Boolean,
+    loadingText: String,
+    noMatchText: String,
+    noDataText: String,
+    remoteMethod: Function,
+    filterMethod: Function,
+    multiple: Boolean,
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    placeholder: {
+      type: String
+    },
+    defaultFirstOption: Boolean,
+    reserveKeyword: {
+      type: Boolean,
+      default: !0
+    },
+    valueKey: {
+      type: String,
+      default: "value"
+    },
+    collapseTags: Boolean,
+    collapseTagsTooltip: {
+      type: Boolean,
+      default: !1
+    },
+    maxCollapseTags: {
+      type: Number,
+      default: 1
+    },
+    teleported: {
+      type: Boolean,
+      default: !0
+    },
+    persistent: {
+      type: Boolean,
+      default: !0
+    },
+    clearIcon: {
+      type: String,
+      default: "ico-ep:circle-close"
+    },
+    fitInputWidth: {
+      type: Boolean,
+      default: !1
+    },
+    suffixIcon: {
+      type: String,
+      default: "ico-ep:arrow-down"
+    },
+    // eslint-disable-next-line vue/require-prop-types
+    tagType: {
+      type: String,
+      default: "info"
+    },
+    validateEvent: {
+      type: Boolean,
+      default: !0
+    },
+    remoteShowSuffix: {
+      type: Boolean,
+      default: !1
+    },
+    suffixTransition: {
+      type: Boolean,
+      default: !0
+    },
+    placement: {
+      type: String,
+      values: He,
+      default: "bottom-start"
+    }
+  },
+  emits: [
+    c,
+    Xe,
+    "remove-tag",
+    "clear",
+    "visible-change",
+    "focus",
+    "blur"
+  ],
+  setup(e, i) {
+    const a = B("select"), V = B("input"), u = et(e), {
+      optionList: w,
+      optionsArray: M,
+      selectSize: m,
+      readonly: E,
+      handleResize: f,
+      collapseTagSize: I,
+      debouncedOnInputChange: N,
+      debouncedQueryChange: R,
+      deletePrevTag: A,
+      deleteTag: L,
+      deleteSelected: W,
+      handleOptionSelect: g,
+      scrollToOption: z,
+      setSelected: h,
+      resetInputHeight: y,
+      managePlaceholder: F,
+      showClose: P,
+      selectDisabled: _,
+      iconComponent: D,
+      iconReverse: K,
+      showNewOption: H,
+      emptyText: $,
+      toggleLastOptionHitState: k,
+      resetInputState: q,
+      handleComposition: j,
+      onOptionCreate: Q,
+      onOptionDestroy: G,
+      handleMenuEnter: U,
+      handleFocus: J,
+      blur: X,
+      handleBlur: Y,
+      handleClearClick: Z,
+      handleClose: ee,
+      handleKeydownEscape: te,
+      toggleMenu: oe,
+      selectOption: le,
+      getValueKey: ne,
+      navigateOptions: ie,
+      dropMenuVisible: ae,
+      reference: r,
+      input: re,
+      iOSInput: se,
+      tooltipRef: S,
+      tags: ue,
+      selectWrapper: p,
+      scrollbar: pe,
+      queryChange: de,
+      groupQueryChange: ce,
+      handleMouseEnter: me,
+      handleMouseLeave: fe,
+      showTagList: ge,
+      collapseTagList: he
+    } = tt(e, u, i), { focus: ye } = qe(r), {
+      inputWidth: l,
+      selected: v,
+      inputLength: Se,
+      filteredOptionsCount: O,
+      visible: ve,
+      softFocus: Oe,
+      selectedLabel: be,
+      hoverIndex: b,
+      query: Te,
+      inputHovering: Ce,
+      currentPlaceholder: d,
+      menuVisibleOnFocus: Be,
+      isOnComposition: xe,
+      isSilentBlur: Ve,
+      options: T,
+      cachedOptions: we,
+      optionsCount: Me,
+      prefixWidth: C,
+      tagInMultiLine: Ee
+    } = We(u), Ie = s(() => {
+      const t = [a.b()], o = n(m);
+      return o && t.push(a.m(o)), e.disabled && t.push(a.m("disabled")), t;
+    }), Ne = s(() => ({
+      maxWidth: `${n(l) - 32}px`,
+      width: "100%"
+    })), Re = s(() => ({ maxWidth: `${n(l) > 123 ? n(l) - 123 : n(l) - 75}px` }));
+    ze(
+      ot,
+      Fe({
+        props: e,
+        options: T,
+        optionsArray: M,
+        cachedOptions: we,
+        optionsCount: Me,
+        filteredOptionsCount: O,
+        hoverIndex: b,
+        handleOptionSelect: g,
+        onOptionCreate: Q,
+        onOptionDestroy: G,
+        selectWrapper: p,
+        selected: v,
+        setSelected: h,
+        queryChange: de,
+        groupQueryChange: ce
+      })
+    ), Pe(() => {
+      u.cachedPlaceHolder = d.value = e.placeholder || "请选择", e.multiple && Array.isArray(e.modelValue) && e.modelValue.length > 0 && (d.value = ""), De(p, f), e.remote && e.multiple && y(), _e(() => {
+        const t = r.value && r.value.$el;
+        if (t && (l.value = t.getBoundingClientRect().width, i.slots.prefix)) {
+          const o = t.querySelector(`.${V.e("prefix")}`);
+          C.value = Math.max(
+            o.getBoundingClientRect().width + 5,
+            30
+          );
+        }
+      }), h();
+    }), e.multiple && !Array.isArray(e.modelValue) && i.emit(c, []), !e.multiple && Array.isArray(e.modelValue) && i.emit(c, "");
+    const Ae = s(() => {
+      var t, o;
+      return (o = (t = S.value) == null ? void 0 : t.popperRef) == null ? void 0 : o.contentRef;
+    });
+    return {
+      isIOS: Ke,
+      onOptionsRendered: (t) => {
+        w.value = t;
+      },
+      tagInMultiLine: Ee,
+      prefixWidth: C,
+      selectSize: m,
+      readonly: E,
+      handleResize: f,
+      collapseTagSize: I,
+      debouncedOnInputChange: N,
+      debouncedQueryChange: R,
+      deletePrevTag: A,
+      deleteTag: L,
+      deleteSelected: W,
+      handleOptionSelect: g,
+      scrollToOption: z,
+      inputWidth: l,
+      selected: v,
+      inputLength: Se,
+      filteredOptionsCount: O,
+      visible: ve,
+      softFocus: Oe,
+      selectedLabel: be,
+      hoverIndex: b,
+      query: Te,
+      inputHovering: Ce,
+      currentPlaceholder: d,
+      menuVisibleOnFocus: Be,
+      isOnComposition: xe,
+      isSilentBlur: Ve,
+      options: T,
+      resetInputHeight: y,
+      managePlaceholder: F,
+      showClose: P,
+      selectDisabled: _,
+      iconComponent: D,
+      iconReverse: K,
+      showNewOption: H,
+      emptyText: $,
+      toggleLastOptionHitState: k,
+      resetInputState: q,
+      handleComposition: j,
+      handleMenuEnter: U,
+      handleFocus: J,
+      blur: X,
+      handleBlur: Y,
+      handleClearClick: Z,
+      handleClose: ee,
+      handleKeydownEscape: te,
+      toggleMenu: oe,
+      selectOption: le,
+      getValueKey: ne,
+      navigateOptions: ie,
+      dropMenuVisible: ae,
+      focus: ye,
+      reference: r,
+      input: re,
+      iOSInput: se,
+      tooltipRef: S,
+      popperPaneRef: Ae,
+      tags: ue,
+      selectWrapper: p,
+      scrollbar: pe,
+      wrapperKls: Ie,
+      selectTagsStyle: Ne,
+      nsSelect: a,
+      tagTextStyle: Re,
+      handleMouseEnter: me,
+      handleMouseLeave: fe,
+      showTagList: ge,
+      collapseTagList: he
+    };
+  }
+});
+export {
+  wt as default
+};

package/es/components/select/style/css.js

@@ -0,0 +1,8 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-input.css";
+import "vft/theme-style/vft-tag.css";
+import "vft/theme-style/el-option.css";
+import "vft/theme-style/el-option-group.css";
+import "vft/theme-style/vft-scrollbar.css";
+import "vft/theme-style/vft-popper.css";
+import "vft/theme-style/el-select.css";

package/es/components/select/style/index.js

@@ -0,0 +1,8 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/input.scss";
+import "vft/theme-style/src/tag.scss";
+import "vft/theme-style/src/option.scss";
+import "vft/theme-style/src/option-group.scss";
+import "vft/theme-style/src/scrollbar.scss";
+import "vft/theme-style/src/popper.scss";
+import "vft/theme-style/src/select.scss";

package/es/components/select/token.js

@@ -0,0 +1,5 @@
+const e = Symbol("VftSelectGroup"), t = Symbol("VftSelect");
+export {
+  e as selectGroupKey,
+  t as selectKey
+};

package/es/components/select/useOption.js

@@ -0,0 +1,71 @@
+import { inject as b, computed as n, getCurrentInstance as C, toRaw as v, watch as s, unref as S } from "vue";
+import { get as c } from "lodash";
+import "@vft/utils";
+import "@vueuse/core";
+import { escapeStringRegexp as w } from "../../utils/vue/data-helper.js";
+import "../../utils/ns-cover.js";
+import { selectKey as D, selectGroupKey as L } from "./token.js";
+function k(r, u) {
+  const e = b(D), a = b(L, { disabled: !1 }), m = n(() => Object.prototype.toString.call(r.value).toLowerCase() === "[object object]"), f = n(() => e.props.multiple ? j(e.props.modelValue, r.value) : O(r.value, e.props.modelValue)), y = n(() => {
+    if (e.props.multiple) {
+      const t = e.props.modelValue || [];
+      return !f.value && t.length >= e.props.multipleLimit && e.props.multipleLimit > 0;
+    } else
+      return !1;
+  }), p = n(() => r.label || (m.value ? "" : r.value)), g = n(() => r.value || r.label || ""), x = n(() => r.disabled || u.groupDisabled || y.value), d = C(), j = (t = [], o) => {
+    if (m.value) {
+      const i = e.props.valueKey;
+      return t && t.some((l) => v(c(l, i)) === c(o, i));
+    } else
+      return t && t.includes(o);
+  }, O = (t, o) => {
+    if (m.value) {
+      const { valueKey: i } = e.props;
+      return c(t, i) === c(o, i);
+    } else
+      return t === o;
+  }, h = () => {
+    !r.disabled && !a.disabled && (e.hoverIndex = e.optionsArray.indexOf(d.proxy));
+  };
+  s(
+    () => p.value,
+    () => {
+      !r.created && !e.props.remote && e.setSelected();
+    }
+  ), s(
+    () => r.value,
+    (t, o) => {
+      const { remote: i, valueKey: l } = e.props;
+      if (Object.is(t, o) || (e.onOptionDestroy(o, d.proxy), e.onOptionCreate(d.proxy)), !r.created && !i) {
+        if (l && typeof t == "object" && typeof o == "object" && t[l] === o[l])
+          return;
+        e.setSelected();
+      }
+    }
+  ), s(
+    () => a.disabled,
+    () => {
+      u.groupDisabled = a.disabled;
+    },
+    { immediate: !0 }
+  );
+  const { queryChange: K } = v(e);
+  return s(
+    K,
+    (t) => {
+      const { query: o } = S(t), i = new RegExp(w(o), "i");
+      u.visible = i.test(p.value) || r.created, u.visible || e.filteredOptionsCount--;
+    },
+    { immediate: !0 }
+  ), {
+    select: e,
+    currentLabel: p,
+    currentValue: g,
+    itemSelected: f,
+    isDisabled: x,
+    hoverItem: h
+  };
+}
+export {
+  k as useOption
+};