vft 0.0.47 → 0.0.50

package/es/packages/components/search/search.vue2.js

@@ -0,0 +1,205 @@
+import { defineComponent as C, ref as s, computed as v, watch as N, resolveDirective as I, openBlock as a, createElementBlock as h, Fragment as E, withDirectives as F, normalizeClass as y, unref as r, createVNode as P, mergeProps as b, createSlots as x, withCtx as p, renderSlot as l, createBlock as A, createElementVNode as T, createCommentVNode as z } from "vue";
+import { useRouterHelper as D } from "@vft/router";
+import { generateCssVars as H, addUnit as k } from "@vft/utils";
+import "../divider/index.js";
+import "../icon/index.js";
+import "../avatar/index.js";
+import "../empty/index.js";
+import "../result/index.js";
+import "../tabs/index.js";
+import "../popper/index.js";
+import "../collapse-transition/index.js";
+import "../tooltip/index.js";
+import { VftPopover as L } from "../popover/index.js";
+import "../menu/index.js";
+import "@vft/use";
+import "../multiple-tabs/multiple-tabs.vue2.js";
+import "@vft/store";
+import "vue-router";
+import "../header-layout/index.js";
+import "../footer-layout/index.js";
+import "../iframe-layout/index.js";
+import "../router-view-content/index.js";
+import "../logo/index.js";
+import "../back-top/index.js";
+import "../config-provider/index.js";
+import "../descriptions/index.js";
+import "../full-screen/index.js";
+import "../icon-text/index.js";
+import "../image/index.js";
+import { VftInput as O } from "../input/index.js";
+import "../link/index.js";
+import "../pagination/index.js";
+import "../tag/index.js";
+import "../side-menu/index.js";
+import "../qrcode/index.js";
+import "../overlay/index.js";
+import "../clamp/index.js";
+import "../clamp-toggle/index.js";
+import "../page-wrapper/index.js";
+import "../exception/index.js";
+import "./index.js";
+import "../form/index.js";
+import "../button/index.js";
+import "../checkbox/index.js";
+import "../radio/index.js";
+import "../switch/index.js";
+import "../color-picker/index.js";
+import "../scrollbar/index.js";
+import "../dropdown/index.js";
+import "../virtual-list/components/fixed-size-list.js";
+import "../virtual-list/components/dynamic-size-list.js";
+import "../virtual-list/components/fixed-size-grid.js";
+import "../virtual-list/components/dynamic-size-grid.js";
+import "../virtual-list/props.js";
+import "../select-v2/index.js";
+import "../verify-code/index.js";
+import "../table/index.js";
+import "../md-container/index.js";
+import "../md-comment/index.js";
+import "../md-tabs/index.js";
+import "../md-vue-playground/index.js";
+import "../md-code-demo/index.js";
+import "../md-code-tabs/index.js";
+import "../message/index.js";
+import { useNamespace as W } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import { useTimeoutFn as M } from "@vueuse/core";
+import "../../utils/ns-cover.js";
+const u = (
+  /* hoist-static*/
+  W("search")
+), U = C({
+  name: u.b()
+}), lo = /* @__PURE__ */ C({
+  ...U,
+  props: {
+    modelValue: { default: "" },
+    placeholder: null,
+    clearable: { type: Boolean, default: !0 },
+    suffixIcon: { default: { icon: "vico-search", color: "#8B8C8C", cursor: !0 } },
+    prefixIcon: null,
+    clearIcon: null,
+    width: { default: 200 },
+    focusWidth: null,
+    hasPopover: { type: Boolean, default: !0 },
+    popoverCfg: null,
+    visible: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:visible", "focus", "enter", "clear"],
+  setup(o, { emit: i }) {
+    const f = s(), c = s(), m = s(), g = () => {
+      console.log(o.modelValue);
+    };
+    D();
+    const w = () => {
+      i("update:visible", !0), i("focus");
+    }, S = v(() => ({
+      "show-arrow": !1,
+      transition: "vft-zoom-in-top",
+      placement: "bottom-start",
+      "hide-after": 100,
+      offset: 3,
+      width: 500,
+      ...o.popoverCfg
+    })), V = v(() => {
+      function e(t) {
+        return H(
+          {
+            width: k(t),
+            "focus-width": k(t)
+          },
+          "input"
+        );
+      }
+      return o.visible ? e(o.focusWidth ?? o.width) : e(o.width);
+    }), $ = (e) => {
+      i("update:modelValue", e);
+    }, d = u.e("content"), R = (e) => {
+      var t, n;
+      Array.from(e.target.classList).includes(d) || ((n = (t = r(f).popperRef) == null ? void 0 : t.delayHide) == null || n.call(t), i("update:visible", !1));
+    }, B = () => {
+      i("update:visible", !1), M(() => {
+        var e;
+        return (e = m.value) == null ? void 0 : e.blur();
+      }, 100), i("clear");
+    };
+    return N(() => o.visible, (e) => {
+      e ? m.value.focus() : m.value.blur();
+    }), (e, t) => {
+      const n = I("click-outside");
+      return a(), h(E, null, [
+        F((a(), h("div", {
+          ref_key: "searchRef",
+          ref: c,
+          class: y([r(u).b()])
+        }, [
+          P(r(O), b({
+            ref_key: "inputRef",
+            ref: m
+          }, e.$props, {
+            inputStyle: r(V),
+            onInput: $,
+            onSuffixclick: g,
+            onFocus: w,
+            onClear: B
+          }), x({ _: 2 }, [
+            e.$slots.prefix ? {
+              name: "prefix",
+              fn: p(() => [
+                l(e.$slots, "prefix")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.suffix ? {
+              name: "suffix",
+              fn: p(() => [
+                l(e.$slots, "suffix")
+              ]),
+              key: "1"
+            } : void 0,
+            e.$slots.prepend ? {
+              name: "prepend",
+              fn: p(() => [
+                l(e.$slots, "prepend")
+              ]),
+              key: "2"
+            } : void 0,
+            e.$slots.append ? {
+              name: "append",
+              fn: p(() => [
+                l(e.$slots, "append")
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1040, ["inputStyle"])
+        ], 2)), [
+          [n, R]
+        ]),
+        o.hasPopover ? (a(), A(r(L), b({
+          key: 0,
+          ref_key: "popoverRef",
+          ref: f
+        }, r(S), {
+          "virtual-ref": c.value,
+          visible: o.visible,
+          "virtual-triggering": ""
+        }), {
+          default: p(() => [
+            T("div", {
+              class: y(r(d))
+            }, [
+              l(e.$slots, "default")
+            ], 2)
+          ]),
+          _: 3
+        }, 16, ["virtual-ref", "visible"])) : z("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  lo as default
+};

package/es/packages/components/select-v2/defaults.js

@@ -0,0 +1,121 @@
+import { placements as e } from "@popperjs/core";
+import "@vft/utils";
+import "vue";
+import { definePropType as t } from "../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import "lodash";
+const d = {
+  allowCreate: Boolean,
+  autocomplete: {
+    type: String,
+    default: "none"
+  },
+  automaticDropdown: Boolean,
+  clearable: Boolean,
+  clearIcon: {
+    type: [String, Object]
+  },
+  effect: {
+    type: String,
+    default: "light"
+  },
+  collapseTags: Boolean,
+  collapseTagsTooltip: {
+    type: Boolean,
+    default: !1
+  },
+  maxCollapseTags: {
+    type: Number,
+    default: 1
+  },
+  defaultFirstOption: Boolean,
+  disabled: Boolean,
+  estimatedOptionHeight: {
+    type: Number,
+    default: void 0
+  },
+  filterable: Boolean,
+  filterMethod: Function,
+  height: {
+    type: Number,
+    default: 170
+    // 5 items by default
+  },
+  itemHeight: {
+    type: Number,
+    default: 34
+  },
+  id: String,
+  loading: Boolean,
+  loadingText: String,
+  label: String,
+  modelValue: [Array, String, Number, Boolean, Object],
+  multiple: Boolean,
+  multipleLimit: {
+    type: Number,
+    default: 0
+  },
+  name: String,
+  noDataText: String,
+  noMatchText: String,
+  remoteMethod: Function,
+  reserveKeyword: {
+    type: Boolean,
+    default: !0
+  },
+  options: {
+    type: Array,
+    required: !0
+  },
+  placeholder: {
+    type: String
+  },
+  teleported: String,
+  persistent: {
+    type: Boolean,
+    default: !0
+  },
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  popperOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  remote: Boolean,
+  size: {
+    type: String
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  scrollbarAlwaysOn: {
+    type: Boolean,
+    default: !1
+  },
+  validateEvent: {
+    type: Boolean,
+    default: !0
+  },
+  placement: {
+    type: t(String),
+    values: e,
+    default: "bottom-start"
+  }
+}, u = {
+  data: Array,
+  disabled: Boolean,
+  hovering: Boolean,
+  item: Object,
+  index: Number,
+  style: Object,
+  selected: Boolean,
+  created: Boolean
+};
+export {
+  u as OptionProps,
+  d as SelectProps
+};

package/es/packages/components/select-v2/group-item.vue.js

@@ -0,0 +1,23 @@
+import r from "./group-item.vue2.js";
+import { openBlock as l, createElementBlock as o, normalizeClass as s, normalizeStyle as t, toDisplayString as i, createElementVNode as p } from "vue";
+import n from "../../../_virtual/_plugin-vue_export-helper.js";
+function a(e, m, u, y, d, f) {
+  return e.item.isTitle ? (l(), o("div", {
+    key: 0,
+    class: s(e.ns.be("group", "title")),
+    style: t([e.style, { lineHeight: `${e.height}px` }])
+  }, i(e.item.label), 7)) : (l(), o("div", {
+    key: 1,
+    class: s(e.ns.be("group", "split")),
+    style: t(e.style)
+  }, [
+    p("span", {
+      class: s(e.ns.be("group", "split-dash")),
+      style: t({ top: `${e.height / 2}px` })
+    }, null, 6)
+  ], 6));
+}
+const $ = /* @__PURE__ */ n(r, [["render", a]]);
+export {
+  $ as default
+};

package/es/packages/components/select-v2/group-item.vue2.js

@@ -0,0 +1,26 @@
+import { defineComponent as t } from "vue";
+import { useNamespace as e } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+const a = t({
+  props: {
+    item: {
+      type: Object,
+      required: !0
+    },
+    style: Object,
+    height: Number
+  },
+  setup() {
+    return {
+      ns: e("select")
+    };
+  }
+});
+export {
+  a as default
+};

package/es/packages/components/select-v2/index.js

@@ -0,0 +1,11 @@
+import e from "./select.vue.js";
+import { selectV2InjectionKey as r } from "./token.js";
+e.install = (t) => {
+  t.component(e.name, e);
+};
+const o = e, n = o;
+export {
+  n as VftSelectV2,
+  o as default,
+  r as selectV2InjectionKey
+};

package/es/packages/components/select-v2/option-item.vue.js

@@ -0,0 +1,31 @@
+import i from "./option-item.vue2.js";
+import { openBlock as l, createElementBlock as n, normalizeStyle as r, normalizeClass as t, withModifiers as d, renderSlot as a, createElementVNode as m, toDisplayString as p } from "vue";
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = ["aria-selected"];
+function b(e, s, k, $, v, y) {
+  return l(), n("li", {
+    "aria-selected": e.selected,
+    style: r(e.style),
+    class: t([
+      e.ns.be("dropdown", "option-item"),
+      e.ns.is("selected", e.selected),
+      e.ns.is("disabled", e.disabled),
+      e.ns.is("created", e.created),
+      { hover: e.hovering }
+    ]),
+    onMouseenter: s[0] || (s[0] = (...o) => e.hoverItem && e.hoverItem(...o)),
+    onClick: s[1] || (s[1] = d((...o) => e.selectOptionClick && e.selectOptionClick(...o), ["stop"]))
+  }, [
+    a(e.$slots, "default", {
+      item: e.item,
+      index: e.index,
+      disabled: e.disabled
+    }, () => [
+      m("span", null, p(e.item.label), 1)
+    ])
+  ], 46, u);
+}
+const O = /* @__PURE__ */ f(i, [["render", b]]);
+export {
+  O as default
+};

package/es/packages/components/select-v2/option-item.vue2.js

@@ -0,0 +1,25 @@
+import { defineComponent as m } from "vue";
+import { useNamespace as i } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import { useOption as s } from "./useOption.js";
+import { OptionProps as n } from "./defaults.js";
+const _ = m({
+  props: n,
+  emits: ["select", "hover"],
+  setup(o, { emit: t }) {
+    const e = i("select"), { hoverItem: r, selectOptionClick: p } = s(o, { emit: t });
+    return {
+      ns: e,
+      hoverItem: r,
+      selectOptionClick: p
+    };
+  }
+});
+export {
+  _ as default
+};

package/es/packages/components/select-v2/select-dropdown.js

@@ -0,0 +1,197 @@
+import { defineComponent as U, inject as _, ref as O, computed as w, watch as $, createVNode as c, unref as b, mergeProps as T } from "vue";
+import { get as p } from "lodash";
+import { isUndefined as J, isObject as x } from "@vft/utils";
+import Q from "../virtual-list/components/fixed-size-list.js";
+import W from "../virtual-list/components/dynamic-size-list.js";
+import "../virtual-list/components/fixed-size-grid.js";
+import "../virtual-list/components/dynamic-size-grid.js";
+import "../virtual-list/props.js";
+import { useNamespace as X } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import { EVENT_CODE as Y } from "../../constants/aria.js";
+import Z from "./group-item.vue.js";
+import ee from "./option-item.vue.js";
+import { selectV2InjectionKey as te } from "./token.js";
+const ge = /* @__PURE__ */ U({
+  name: "VftSelectDropdown",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    hoveringIndex: Number,
+    width: Number
+  },
+  setup(v, {
+    slots: a,
+    expose: N
+  }) {
+    const r = _(te), m = X("select"), k = O([]), u = O(), D = w(() => v.data.length);
+    $(() => D.value, () => {
+      var e, t;
+      (t = (e = r.popper.value).updatePopper) == null || t.call(e);
+    });
+    const f = w(() => J(r.props.estimatedOptionHeight)), y = w(() => f.value ? {
+      itemSize: r.props.itemHeight
+    } : {
+      estimatedSize: r.props.estimatedOptionHeight,
+      itemSize: (e) => k.value[e]
+    }), E = (e = [], t) => {
+      const {
+        props: {
+          valueKey: o
+        }
+      } = r;
+      return x(t) ? e && e.some((n) => p(n, o) === p(t, o)) : e.includes(t);
+    }, L = (e, t) => {
+      if (x(t)) {
+        const {
+          valueKey: o
+        } = r.props;
+        return p(e, o) === p(t, o);
+      } else
+        return e === t;
+    }, S = (e, t) => {
+      const {
+        valueKey: o
+      } = r.props;
+      return r.props.multiple ? E(e, p(t, o)) : L(e, p(t, o));
+    }, g = (e, t) => {
+      const {
+        disabled: o,
+        multiple: n,
+        multipleLimit: i
+      } = r.props;
+      return o || !t && (n ? i > 0 && e.length >= i : !1);
+    }, I = (e) => v.hoveringIndex === e;
+    N({
+      listRef: u,
+      isSized: f,
+      isItemDisabled: g,
+      isItemHovering: I,
+      isItemSelected: S,
+      scrollToItem: (e) => {
+        const t = u.value;
+        t && t.scrollToItem(e);
+      },
+      resetScrollTop: () => {
+        const e = u.value;
+        e && e.resetScrollTop();
+      }
+    });
+    const V = (e) => {
+      const {
+        index: t,
+        data: o,
+        style: n
+      } = e, i = b(f), {
+        itemSize: d,
+        estimatedSize: l
+      } = b(y), {
+        modelValue: h
+      } = r.props, {
+        onSelect: F,
+        onHover: G
+      } = r, s = o[t];
+      if (s.type === "Group")
+        return c(Z, {
+          item: s,
+          style: n,
+          height: i ? d : l
+        }, null);
+      const H = S(h, s), B = g(h, H), M = I(t);
+      return c(ee, T(e, {
+        selected: H,
+        disabled: s.disabled || B,
+        created: !!s.created,
+        hovering: M,
+        item: s,
+        onSelect: F,
+        onHover: G
+      }), {
+        default: (R) => {
+          var K;
+          return ((K = a.default) == null ? void 0 : K.call(a, R)) || c("span", null, [s.label]);
+        }
+      });
+    }, {
+      onKeyboardNavigate: z,
+      onKeyboardSelect: j
+    } = r, A = () => {
+      z("forward");
+    }, P = () => {
+      z("backward");
+    }, q = () => {
+      r.expanded = !1;
+    }, C = (e) => {
+      const {
+        code: t
+      } = e, {
+        tab: o,
+        esc: n,
+        down: i,
+        up: d,
+        enter: l
+      } = Y;
+      switch (t !== o && (e.preventDefault(), e.stopPropagation()), t) {
+        case o:
+        case n: {
+          q();
+          break;
+        }
+        case i: {
+          A();
+          break;
+        }
+        case d: {
+          P();
+          break;
+        }
+        case l: {
+          j();
+          break;
+        }
+      }
+    };
+    return () => {
+      var l;
+      const {
+        data: e,
+        width: t
+      } = v, {
+        height: o,
+        multiple: n,
+        scrollbarAlwaysOn: i
+      } = r.props;
+      if (e.length === 0)
+        return c("div", {
+          class: m.b("dropdown"),
+          style: {
+            width: `${t}px`
+          }
+        }, [(l = a.empty) == null ? void 0 : l.call(a)]);
+      const d = b(f) ? Q : W;
+      return c("div", {
+        class: [m.b("dropdown"), m.is("multiple", n)]
+      }, [c(d, T({
+        ref: u
+      }, b(y), {
+        className: m.be("dropdown", "list"),
+        scrollbarAlwaysOn: i,
+        data: e,
+        height: o,
+        width: t,
+        total: e.length,
+        onKeydown: C
+      }), {
+        default: (h) => c(V, h, null)
+      })]);
+    };
+  }
+});
+export {
+  ge as default
+};