vft 0.0.48 → 0.0.51

package/es/components/select-v2/select.vue.js

@@ -0,0 +1,330 @@
+import B from "./select.vue2.js";
+import { resolveComponent as S, resolveDirective as z, withDirectives as g, openBlock as n, createElementBlock as a, normalizeClass as s, withModifiers as i, createVNode as f, withCtx as p, createElementVNode as t, renderSlot as k, createCommentVNode as u, Fragment as y, renderList as w, normalizeStyle as m, toDisplayString as d, createBlock as v, withKeys as r, vShow as K, normalizeProps as M, guardReactiveProps as E } from "vue";
+import W from "../../_virtual/_plugin-vue_export-helper.js";
+const R = { key: 0 }, D = ["id", "autocomplete", "aria-expanded", "aria-labelledby", "disabled", "readonly", "name", "unselectable"], U = ["textContent"], F = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"], N = ["textContent"];
+function L(e, o, O, H, P, A) {
+  const V = S("vft-tag"), h = S("vft-tooltip"), C = S("vft-icon"), $ = S("select-menu"), I = z("model-text"), T = z("click-outside");
+  return g((n(), a("div", {
+    ref: "selectRef",
+    class: s([e.nsSelectV2.b(), e.nsSelectV2.m(e.selectSize)]),
+    onClick: o[24] || (o[24] = i((...l) => e.toggleMenu && e.toggleMenu(...l), ["stop"])),
+    onMouseenter: o[25] || (o[25] = (l) => e.states.comboBoxHovering = !0),
+    onMouseleave: o[26] || (o[26] = (l) => e.states.comboBoxHovering = !1)
+  }, [
+    f(h, {
+      ref: "popper",
+      visible: e.dropdownMenuVisible,
+      teleported: e.teleported,
+      "popper-class": [e.nsSelectV2.e("popper"), e.popperClass],
+      "gpu-acceleration": !1,
+      "stop-popper-mouse-event": !1,
+      "popper-options": e.popperOptions,
+      "fallback-placements": ["bottom-start", "top-start", "right", "left"],
+      effect: e.effect,
+      placement: e.placement,
+      pure: "",
+      transition: `${e.nsSelectV2.namespace.value}-zoom-in-top`,
+      trigger: "click",
+      persistent: e.persistent,
+      onBeforeShow: e.handleMenuEnter,
+      onHide: o[23] || (o[23] = (l) => e.states.inputValue = e.states.displayInputValue)
+    }, {
+      default: p(() => [
+        t("div", {
+          ref: "selectionRef",
+          class: s([
+            e.nsSelectV2.e("wrapper"),
+            e.nsSelectV2.is("focused", e.states.isComposing || e.expanded),
+            e.nsSelectV2.is("hovering", e.states.comboBoxHovering),
+            e.nsSelectV2.is("filterable", e.filterable),
+            e.nsSelectV2.is("disabled", e.selectDisabled)
+          ])
+        }, [
+          e.$slots.prefix ? (n(), a("div", R, [
+            k(e.$slots, "prefix")
+          ])) : u("", !0),
+          e.multiple ? (n(), a("div", {
+            key: 1,
+            class: s(e.nsSelectV2.e("selection"))
+          }, [
+            e.collapseTags && e.modelValue.length > 0 ? (n(), a(y, { key: 0 }, [
+              (n(!0), a(y, null, w(e.showTagList, (l) => (n(), a("div", {
+                key: e.getValueKey(l),
+                class: s(e.nsSelectV2.e("selected-item"))
+              }, [
+                f(V, {
+                  closable: !e.selectDisabled && !(l != null && l.disable),
+                  size: e.collapseTagSize,
+                  type: "info",
+                  "disable-transitions": "",
+                  onClose: (b) => e.deleteTag(b, l)
+                }, {
+                  default: p(() => [
+                    t("span", {
+                      class: s(e.nsSelectV2.e("tags-text")),
+                      style: m({
+                        maxWidth: `${e.tagMaxWidth}px`
+                      })
+                    }, d(l == null ? void 0 : l.label), 7)
+                  ]),
+                  _: 2
+                }, 1032, ["closable", "size", "onClose"])
+              ], 2))), 128)),
+              t("div", {
+                class: s(e.nsSelectV2.e("selected-item"))
+              }, [
+                e.modelValue.length > e.maxCollapseTags ? (n(), v(V, {
+                  key: 0,
+                  closable: !1,
+                  size: e.collapseTagSize,
+                  type: "info",
+                  "disable-transitions": ""
+                }, {
+                  default: p(() => [
+                    e.collapseTagsTooltip ? (n(), v(h, {
+                      key: 0,
+                      disabled: e.dropdownMenuVisible,
+                      "fallback-placements": ["bottom", "top", "right", "left"],
+                      effect: e.effect,
+                      placement: "bottom",
+                      teleported: !1
+                    }, {
+                      default: p(() => [
+                        t("span", {
+                          class: s(e.nsSelectV2.e("tags-text")),
+                          style: m({
+                            maxWidth: `${e.tagMaxWidth}px`
+                          })
+                        }, "+ " + d(e.modelValue.length - e.maxCollapseTags), 7)
+                      ]),
+                      content: p(() => [
+                        t("div", {
+                          class: s(e.nsSelectV2.e("selection"))
+                        }, [
+                          (n(!0), a(y, null, w(e.collapseTagList, (l) => (n(), a("div", {
+                            key: e.getValueKey(l),
+                            class: s(e.nsSelectV2.e("selected-item"))
+                          }, [
+                            f(V, {
+                              closable: !e.selectDisabled && !l.disabled,
+                              size: e.collapseTagSize,
+                              class: "in-tooltip",
+                              type: "info",
+                              "disable-transitions": "",
+                              onClose: (b) => e.deleteTag(b, l)
+                            }, {
+                              default: p(() => [
+                                t("span", {
+                                  class: s(e.nsSelectV2.e("tags-text")),
+                                  style: m({
+                                    maxWidth: `${e.tagMaxWidth}px`
+                                  })
+                                }, d(e.getLabel(l)), 7)
+                              ]),
+                              _: 2
+                            }, 1032, ["closable", "size", "onClose"])
+                          ], 2))), 128))
+                        ], 2)
+                      ]),
+                      _: 1
+                    }, 8, ["disabled", "effect"])) : (n(), a("span", {
+                      key: 1,
+                      class: s(e.nsSelectV2.e("tags-text")),
+                      style: m({
+                        maxWidth: `${e.tagMaxWidth}px`
+                      })
+                    }, "+ " + d(e.modelValue.length - e.maxCollapseTags), 7))
+                  ]),
+                  _: 1
+                }, 8, ["size"])) : u("", !0)
+              ], 2)
+            ], 64)) : (n(!0), a(y, { key: 1 }, w(e.states.cachedOptions, (l) => (n(), a("div", {
+              key: e.getValueKey(l),
+              class: s(e.nsSelectV2.e("selected-item"))
+            }, [
+              f(V, {
+                closable: !e.selectDisabled && !l.disabled,
+                size: e.collapseTagSize,
+                type: "info",
+                "disable-transitions": "",
+                onClose: (b) => e.deleteTag(b, l)
+              }, {
+                default: p(() => [
+                  t("span", {
+                    class: s(e.nsSelectV2.e("tags-text")),
+                    style: m({
+                      maxWidth: `${e.tagMaxWidth}px`
+                    })
+                  }, d(e.getLabel(l)), 7)
+                ]),
+                _: 2
+              }, 1032, ["closable", "size", "onClose"])
+            ], 2))), 128)),
+            t("div", {
+              class: s([
+                e.nsSelectV2.e("selected-item"),
+                e.nsSelectV2.e("input-wrapper")
+              ]),
+              style: m(e.inputWrapperStyle)
+            }, [
+              g(t("input", {
+                id: e.id,
+                ref: "inputRef",
+                autocomplete: e.autocomplete,
+                "aria-autocomplete": "list",
+                "aria-haspopup": "listbox",
+                autocapitalize: "off",
+                "aria-expanded": e.expanded,
+                "aria-labelledby": e.label,
+                class: s([
+                  e.nsSelectV2.is(e.selectSize),
+                  e.nsSelectV2.e("combobox-input")
+                ]),
+                disabled: e.disabled,
+                role: "combobox",
+                readonly: !e.filterable,
+                spellcheck: "false",
+                type: "text",
+                name: e.name,
+                unselectable: e.expanded ? "on" : void 0,
+                "on:update:modelValue": o[0] || (o[0] = (...l) => e.onUpdateInputValue && e.onUpdateInputValue(...l)),
+                onFocus: o[1] || (o[1] = (...l) => e.handleFocus && e.handleFocus(...l)),
+                onBlur: o[2] || (o[2] = (...l) => e.handleBlur && e.handleBlur(...l)),
+                onInput: o[3] || (o[3] = (...l) => e.onInput && e.onInput(...l)),
+                onCompositionstart: o[4] || (o[4] = (...l) => e.handleCompositionStart && e.handleCompositionStart(...l)),
+                onCompositionupdate: o[5] || (o[5] = (...l) => e.handleCompositionUpdate && e.handleCompositionUpdate(...l)),
+                onCompositionend: o[6] || (o[6] = (...l) => e.handleCompositionEnd && e.handleCompositionEnd(...l)),
+                onKeydown: [
+                  o[7] || (o[7] = r(i((l) => e.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
+                  o[8] || (o[8] = r(i((l) => e.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
+                  o[9] || (o[9] = r(i((...l) => e.onKeyboardSelect && e.onKeyboardSelect(...l), ["stop", "prevent"]), ["enter"])),
+                  o[10] || (o[10] = r(i((...l) => e.handleEsc && e.handleEsc(...l), ["stop", "prevent"]), ["esc"])),
+                  o[11] || (o[11] = r(i((...l) => e.handleDel && e.handleDel(...l), ["stop"]), ["delete"]))
+                ]
+              }, null, 42, D), [
+                [I, e.states.displayInputValue]
+              ]),
+              e.filterable ? (n(), a("span", {
+                key: 0,
+                ref: "calculatorRef",
+                "aria-hidden": "true",
+                class: s(e.nsSelectV2.e("input-calculator")),
+                textContent: d(e.states.displayInputValue)
+              }, null, 10, U)) : u("", !0)
+            ], 6)
+          ], 2)) : (n(), a(y, { key: 2 }, [
+            t("div", {
+              class: s([
+                e.nsSelectV2.e("selected-item"),
+                e.nsSelectV2.e("input-wrapper")
+              ])
+            }, [
+              g(t("input", {
+                id: e.id,
+                ref: "inputRef",
+                "aria-autocomplete": "list",
+                "aria-haspopup": "listbox",
+                "aria-labelledby": e.label,
+                "aria-expanded": e.expanded,
+                autocapitalize: "off",
+                autocomplete: e.autocomplete,
+                class: s(e.nsSelectV2.e("combobox-input")),
+                disabled: e.disabled,
+                name: e.name,
+                role: "combobox",
+                readonly: !e.filterable,
+                spellcheck: "false",
+                type: "text",
+                unselectable: e.expanded ? "on" : void 0,
+                onCompositionstart: o[12] || (o[12] = (...l) => e.handleCompositionStart && e.handleCompositionStart(...l)),
+                onCompositionupdate: o[13] || (o[13] = (...l) => e.handleCompositionUpdate && e.handleCompositionUpdate(...l)),
+                onCompositionend: o[14] || (o[14] = (...l) => e.handleCompositionEnd && e.handleCompositionEnd(...l)),
+                onFocus: o[15] || (o[15] = (...l) => e.handleFocus && e.handleFocus(...l)),
+                onBlur: o[16] || (o[16] = (...l) => e.handleBlur && e.handleBlur(...l)),
+                onInput: o[17] || (o[17] = (...l) => e.onInput && e.onInput(...l)),
+                onKeydown: [
+                  o[18] || (o[18] = r(i((l) => e.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
+                  o[19] || (o[19] = r(i((l) => e.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
+                  o[20] || (o[20] = r(i((...l) => e.onKeyboardSelect && e.onKeyboardSelect(...l), ["stop", "prevent"]), ["enter"])),
+                  o[21] || (o[21] = r(i((...l) => e.handleEsc && e.handleEsc(...l), ["stop", "prevent"]), ["esc"]))
+                ],
+                "on:update:modelValue": o[22] || (o[22] = (...l) => e.onUpdateInputValue && e.onUpdateInputValue(...l))
+              }, null, 42, F), [
+                [I, e.states.displayInputValue]
+              ])
+            ], 2),
+            e.filterable ? (n(), a("span", {
+              key: 0,
+              ref: "calculatorRef",
+              "aria-hidden": "true",
+              class: s([
+                e.nsSelectV2.e("selected-item"),
+                e.nsSelectV2.e("input-calculator")
+              ]),
+              textContent: d(e.states.displayInputValue)
+            }, null, 10, N)) : u("", !0)
+          ], 64)),
+          e.shouldShowPlaceholder ? (n(), a("span", {
+            key: 3,
+            class: s([
+              e.nsSelectV2.e("placeholder"),
+              e.nsSelectV2.is(
+                "transparent",
+                e.multiple ? e.modelValue.length === 0 : !e.hasModelValue
+              )
+            ])
+          }, d(e.currentPlaceholder), 3)) : u("", !0),
+          t("span", {
+            class: s(e.nsSelectV2.e("suffix"))
+          }, [
+            e.iconComponent ? g((n(), v(C, {
+              key: 0,
+              icon: e.iconComponent,
+              class: s([e.nsSelectV2.e("caret"), e.nsInput.e("icon"), e.iconReverse])
+            }, null, 8, ["icon", "class"])), [
+              [K, !e.showClearBtn]
+            ]) : u("", !0),
+            e.showClearBtn ? (n(), v(C, {
+              key: 1,
+              icon: "ico-ep:circle-close",
+              class: s([e.nsSelectV2.e("caret"), e.nsInput.e("icon")]),
+              onClick: i(e.handleClear, ["prevent", "stop"])
+            }, null, 8, ["class", "onClick"])) : u("", !0),
+            e.validateState && e.validateIcon ? (n(), v(C, {
+              key: 2,
+              class: s([e.nsInput.e("icon"), e.nsInput.e("validateIcon")])
+            }, null, 8, ["class"])) : u("", !0)
+          ], 2)
+        ], 2)
+      ]),
+      content: p(() => [
+        f($, {
+          ref: "menuRef",
+          data: e.filteredOptions,
+          width: e.popperSize,
+          "hovering-index": e.states.hoveringIndex,
+          "scrollbar-always-on": e.scrollbarAlwaysOn
+        }, {
+          default: p((l) => [
+            k(e.$slots, "default", M(E(l)))
+          ]),
+          empty: p(() => [
+            k(e.$slots, "empty", {}, () => [
+              t("p", {
+                class: s(e.nsSelectV2.e("empty"))
+              }, d(e.emptyText ? e.emptyText : ""), 3)
+            ])
+          ]),
+          _: 3
+        }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"])
+      ]),
+      _: 3
+    }, 8, ["visible", "teleported", "popper-class", "popper-options", "effect", "placement", "transition", "persistent", "onBeforeShow"])
+  ], 34)), [
+    [T, e.handleClickOutside, e.popperRef]
+  ]);
+}
+const J = /* @__PURE__ */ W(B, [["render", L]]);
+export {
+  J as default
+};

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

@@ -0,0 +1,61 @@
+import { defineComponent as c, vModelText as a, computed as f, reactive as p, toRefs as n, provide as s } from "vue";
+import { isArray as d } from "@vft/utils";
+import { ClickOutside as u } from "@vft/directives";
+import { VftTooltip as v } from "../tooltip/index.js";
+import { VftTag as V } from "../tag/index.js";
+import { VftIcon as S } from "../icon/index.js";
+import { UPDATE_MODEL_EVENT as b, CHANGE_EVENT as g } from "../../constants/event.js";
+import E from "./select-dropdown.js";
+import T from "./useSelect.js";
+import { selectV2InjectionKey as y } from "./token.js";
+import { SelectProps as K } from "./defaults.js";
+const D = c({
+  name: "VftSelectV2",
+  components: {
+    SelectMenu: E,
+    VftTag: V,
+    VftTooltip: v,
+    VftIcon: S
+  },
+  directives: { ClickOutside: u, ModelText: a },
+  props: K,
+  emits: [
+    b,
+    g,
+    "remove-tag",
+    "clear",
+    "visible-change",
+    "focus",
+    "blur"
+  ],
+  setup(o, { emit: l }) {
+    const t = f(() => {
+      const { modelValue: r, multiple: i } = o, m = i ? [] : void 0;
+      return d(r) ? i ? r : m : i ? m : r;
+    }), e = T(
+      p({
+        ...n(o),
+        modelValue: t
+      }),
+      l
+    );
+    return s(y, {
+      props: p({
+        ...n(o),
+        height: e.popupHeight,
+        modelValue: t
+      }),
+      popper: e.popper,
+      onSelect: e.onSelect,
+      onHover: e.onHover,
+      onKeyboardNavigate: e.onKeyboardNavigate,
+      onKeyboardSelect: e.onKeyboardSelect
+    }), {
+      ...e,
+      modelValue: t
+    };
+  }
+});
+export {
+  D as default
+};

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

@@ -0,0 +1,7 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-input.css";
+import "vft/theme-style/vft-tag.css";
+import "vft/theme-style/vft-scrollbar.css";
+import "vft/theme-style/vft-popper.css";
+import "vft/theme-style/vft-virtual-list.css";
+import "vft/theme-style/vft-select-v2.css";

package/es/components/select-v2/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/scrollbar.scss";
+import "vft/theme-style/src/popper.scss";
+import "vft/theme-style/src/virtual-list.scss";
+import "vft/theme-style/src/select-v2.scss";
+import "vft/theme-style/src/select.scss";

package/es/components/select-v2/token.d.ts

@@ -0,0 +1,16 @@
+import type { OptionProps, SelectProps } from './defaults';
+import type { ExtractPropTypes, InjectionKey, Ref } from 'vue';
+import type { Option } from './select.types';
+import type { TooltipInstance } from 'vft/es/components/tooltip';
+export interface SelectV2Context {
+    props: ExtractPropTypes<typeof SelectProps>;
+    expanded: boolean;
+    popper: Ref<TooltipInstance>;
+    onSelect: (option: Option<any>, index: number, byClick?: boolean) => void;
+    onHover: (idx: number) => void;
+    onKeyboardNavigate: (direction: 'forward' | 'backward') => void;
+    onKeyboardSelect: () => void;
+}
+export declare const selectV2InjectionKey: InjectionKey<SelectV2Context>;
+export type IOptionProps = ExtractPropTypes<typeof OptionProps>;
+export type ISelectProps = ExtractPropTypes<typeof SelectProps>;

package/es/components/select-v2/token.js

@@ -0,0 +1,6 @@
+const e = Symbol(
+  "ElSelectV2Injection"
+);
+export {
+  e as selectV2InjectionKey
+};

package/es/components/select-v2/useAllowCreate.d.ts

@@ -0,0 +1,8 @@
+import type { ISelectProps } from './token';
+import type { Option } from './select.types';
+export declare function useAllowCreate(props: ISelectProps, states: any): {
+    createNewOption: (query: string) => void;
+    removeNewOption: (option: Option) => void;
+    selectNewOption: (option: Option) => void;
+    clearAllNewOption: () => void;
+};

package/es/components/select-v2/useAllowCreate.js

@@ -0,0 +1,48 @@
+import { ref as o, computed as p } from "vue";
+function h(t, n) {
+  const i = o(0), u = o(null), a = p(() => t.allowCreate && t.filterable);
+  function r(e) {
+    const l = (c) => c.value === e;
+    return t.options && t.options.some(l) || n.createdOptions.some(l);
+  }
+  function d(e) {
+    a.value && (t.multiple && e.created ? i.value++ : u.value = e);
+  }
+  function f(e) {
+    if (a.value)
+      if (e && e.length > 0 && !r(e)) {
+        const l = {
+          value: e,
+          label: e,
+          created: !0,
+          disabled: !1
+        };
+        n.createdOptions.length >= i.value ? n.createdOptions[i.value] = l : n.createdOptions.push(l);
+      } else if (t.multiple)
+        n.createdOptions.length = i.value;
+      else {
+        const l = u.value;
+        n.createdOptions.length = 0, l && l.created && n.createdOptions.push(l);
+      }
+  }
+  function O(e) {
+    if (!a.value || !e || !e.created || e.created && t.reserveKeyword && n.inputValue === e.label)
+      return;
+    const l = n.createdOptions.findIndex(
+      (c) => c.value === e.value
+    );
+    ~l && (n.createdOptions.splice(l, 1), i.value--);
+  }
+  function v() {
+    a.value && (n.createdOptions.length = 0, i.value = 0);
+  }
+  return {
+    createNewOption: f,
+    removeNewOption: O,
+    selectNewOption: d,
+    clearAllNewOption: v
+  };
+}
+export {
+  h as useAllowCreate
+};

package/es/components/select-v2/useInput.d.ts

@@ -0,0 +1,5 @@
+export declare function useInput(handleInput: (event: InputEvent) => void): {
+    handleCompositionStart: () => void;
+    handleCompositionUpdate: (event: any) => void;
+    handleCompositionEnd: (event: any) => void;
+};

package/es/components/select-v2/useInput.js

@@ -0,0 +1,21 @@
+import { ref as a } from "vue";
+import { isFunction as s } from "@vue/shared";
+import { isKorean as r } from "@vft/utils";
+function f(n) {
+  const o = a(!1);
+  return {
+    handleCompositionStart: () => {
+      o.value = !0;
+    },
+    handleCompositionUpdate: (t) => {
+      const e = t.target.value, i = e[e.length - 1] || "";
+      o.value = !r(i);
+    },
+    handleCompositionEnd: (t) => {
+      o.value && (o.value = !1, s(n) && n(t));
+    }
+  };
+}
+export {
+  f as useInput
+};

package/es/components/select-v2/useOption.d.ts

@@ -0,0 +1,7 @@
+import type { IOptionProps } from './token';
+export declare function useOption(props: IOptionProps, { emit }: {
+    emit: any;
+}): {
+    hoverItem: () => void;
+    selectOptionClick: () => void;
+};

package/es/components/select-v2/useOption.js

@@ -0,0 +1,13 @@
+function t(e, { emit: i }) {
+  return {
+    hoverItem: () => {
+      e.disabled || i("hover", e.index);
+    },
+    selectOptionClick: () => {
+      e.disabled || i("select", e.item, e.index);
+    }
+  };
+}
+export {
+  t as useOption
+};