vft 0.0.48 → 0.0.50

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

@@ -0,0 +1,145 @@
+import { defineComponent as L, ref as a, computed as w, watch as E, nextTick as N, provide as D, reactive as G, onMounted as X, onUpdated as Y, openBlock as g, createElementBlock as q, normalizeClass as b, unref as m, createElementVNode as F, normalizeStyle as R, createBlock as B, resolveDynamicComponent as I, withCtx as J, renderSlot as Q, createCommentVNode as Z } from "vue";
+import { useResizeObserver as ee, useEventListener as te } from "@vueuse/core";
+import { addUnit as W, isObject as le, isNumber as v } from "@vft/utils";
+import { debugWarn as M } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import { useNamespace as oe } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { GAP as h } from "./util.js";
+import ae from "./bar.vue2.js";
+import { scrollbarContextKey as re } from "./constants.js";
+const S = "VftScrollbar", ie = L({
+  name: S
+}), ge = /* @__PURE__ */ L({
+  ...ie,
+  props: {
+    height: null,
+    maxHeight: null,
+    native: { type: Boolean },
+    wrapStyle: null,
+    wrapClass: null,
+    viewClass: null,
+    viewStyle: null,
+    noresize: { type: Boolean },
+    tag: { default: "div" },
+    always: { type: Boolean },
+    minSize: { default: 20 }
+  },
+  emits: ["scroll"],
+  setup(i, { expose: $, emit: K }) {
+    const l = i, s = oe("scrollbar");
+    let n, c;
+    const x = a(), t = a(), z = a(), C = a("0"), H = a("0"), d = a(), k = a(1), T = a(1), O = w(() => {
+      const e = {};
+      return l.height && (e.height = W(l.height)), l.maxHeight && (e.maxHeight = W(l.maxHeight)), [l.wrapStyle, e];
+    }), V = w(() => [
+      l.wrapClass,
+      s.e("wrap"),
+      { [s.em("wrap", "hidden-default")]: !l.native }
+    ]), A = w(() => [s.e("view"), l.viewClass]), _ = () => {
+      var e;
+      t.value && ((e = d.value) == null || e.handleScroll(t.value), K("scroll", {
+        scrollTop: t.value.scrollTop,
+        scrollLeft: t.value.scrollLeft
+      }));
+    };
+    function P(e, o) {
+      le(e) ? t.value.scrollTo(e) : v(e) && v(o) && t.value.scrollTo(e, o);
+    }
+    const U = (e) => {
+      if (!v(e)) {
+        M(S, "value must be a number");
+        return;
+      }
+      t.value.scrollTop = e;
+    }, j = (e) => {
+      if (!v(e)) {
+        M(S, "value must be a number");
+        return;
+      }
+      t.value.scrollLeft = e;
+    }, r = () => {
+      if (!t.value)
+        return;
+      const e = t.value.offsetHeight - h, o = t.value.offsetWidth - h, p = e ** 2 / t.value.scrollHeight, y = o ** 2 / t.value.scrollWidth, u = Math.max(p, l.minSize), f = Math.max(y, l.minSize);
+      k.value = p / (e - p) / (u / (e - u)), T.value = y / (o - y) / (f / (o - f)), H.value = u + h < e ? `${u}px` : "", C.value = f + h < o ? `${f}px` : "";
+    };
+    return E(
+      () => l.noresize,
+      (e) => {
+        e ? (n == null || n(), c == null || c()) : ({ stop: n } = ee(z, r), c = te("resize", r));
+      },
+      { immediate: !0 }
+    ), E(
+      () => [l.maxHeight, l.height],
+      () => {
+        l.native || N(() => {
+          var e;
+          r(), t.value && ((e = d.value) == null || e.handleScroll(t.value));
+        });
+      }
+    ), D(
+      re,
+      G({
+        scrollbarElement: x,
+        wrapElement: t
+      })
+    ), X(() => {
+      l.native || N(() => {
+        r();
+      });
+    }), Y(() => r()), $({
+      /** @description scrollbar wrap ref */
+      wrapRef: t,
+      /** @description update scrollbar state manually */
+      update: r,
+      /** @description scrolls to a particular set of coordinates */
+      scrollTo: P,
+      /** @description set distance to scroll top */
+      setScrollTop: U,
+      /** @description set distance to scroll left */
+      setScrollLeft: j,
+      /** @description handle scroll event */
+      handleScroll: _
+    }), (e, o) => (g(), q("div", {
+      ref_key: "scrollbarRef",
+      ref: x,
+      class: b(m(s).b())
+    }, [
+      F("div", {
+        ref_key: "wrapRef",
+        ref: t,
+        class: b(m(V)),
+        style: R(m(O)),
+        onScroll: _
+      }, [
+        (g(), B(I(i.tag), {
+          ref_key: "resizeRef",
+          ref: z,
+          class: b(m(A)),
+          style: R(i.viewStyle)
+        }, {
+          default: J(() => [
+            Q(e.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["class", "style"]))
+      ], 38),
+      i.native ? Z("", !0) : (g(), B(ae, {
+        key: 0,
+        ref_key: "barRef",
+        ref: d,
+        height: H.value,
+        width: C.value,
+        always: i.always,
+        "ratio-x": T.value,
+        "ratio-y": k.value
+      }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"]))
+    ], 2));
+  }
+});
+export {
+  ge as default
+};

package/es/packages/components/scrollbar/style/css.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-scrollbar.css";

package/es/packages/components/scrollbar/style/index.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/scrollbar.scss";

package/es/packages/components/scrollbar/thumb.vue.js

@@ -0,0 +1,4 @@
+import f from "./thumb.vue2.js";
+export {
+  f as default
+};

package/es/packages/components/scrollbar/thumb.vue2.js

@@ -0,0 +1,111 @@
+import { defineComponent as T, inject as D, ref as v, computed as E, onBeforeUnmount as N, toRef as z, openBlock as A, createBlock as O, Transition as j, unref as s, withCtx as K, withDirectives as U, createElementVNode as C, normalizeClass as P, normalizeStyle as I, vShow as V } from "vue";
+import { useEventListener as k, isClient as q } from "@vueuse/core";
+import "@vft/utils";
+import { throwError as F } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import { useNamespace as G } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { scrollbarContextKey as J } from "./constants.js";
+import { BAR_MAP as Q, renderThumbStyle as W } from "./util.js";
+const X = "Thumb", ue = /* @__PURE__ */ T({
+  __name: "thumb",
+  props: {
+    vertical: { type: Boolean },
+    size: null,
+    move: null,
+    ratio: null,
+    always: { type: Boolean }
+  },
+  setup(g) {
+    const u = g, o = D(J), c = G("scrollbar");
+    o || F(X, "can not inject scrollbar context");
+    const l = v(), a = v(), f = v({}), i = v(!1);
+    let m = !1, d = !1, p = q ? document.onselectstart : null;
+    const e = E(() => Q[u.vertical ? "vertical" : "horizontal"]), B = E(
+      () => W({
+        size: u.size,
+        move: u.move,
+        bar: e.value
+      })
+    ), w = E(
+      () => (
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        l.value[e.value.offset] ** 2 / o.wrapElement[e.value.scrollSize] / u.ratio / a.value[e.value.offset]
+      )
+    ), _ = (t) => {
+      var r;
+      if (t.stopPropagation(), t.ctrlKey || [1, 2].includes(t.button))
+        return;
+      (r = window.getSelection()) == null || r.removeAllRanges(), L(t);
+      const n = t.currentTarget;
+      n && (f.value[e.value.axis] = n[e.value.offset] - (t[e.value.client] - n.getBoundingClientRect()[e.value.direction]));
+    }, x = (t) => {
+      if (!a.value || !l.value || !o.wrapElement)
+        return;
+      const n = Math.abs(
+        t.target.getBoundingClientRect()[e.value.direction] - t[e.value.client]
+      ), r = a.value[e.value.offset] / 2, h = (n - r) * 100 * w.value / l.value[e.value.offset];
+      o.wrapElement[e.value.scroll] = h * o.wrapElement[e.value.scrollSize] / 100;
+    }, L = (t) => {
+      t.stopImmediatePropagation(), m = !0, document.addEventListener("mousemove", y), document.addEventListener("mouseup", b), p = document.onselectstart, document.onselectstart = () => !1;
+    }, y = (t) => {
+      if (!l.value || !a.value || m === !1)
+        return;
+      const n = f.value[e.value.axis];
+      if (!n)
+        return;
+      const r = (l.value.getBoundingClientRect()[e.value.direction] - t[e.value.client]) * -1, h = a.value[e.value.offset] - n, R = (r - h) * 100 * w.value / l.value[e.value.offset];
+      o.wrapElement[e.value.scroll] = R * o.wrapElement[e.value.scrollSize] / 100;
+    }, b = () => {
+      m = !1, f.value[e.value.axis] = 0, document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", b), S(), d && (i.value = !1);
+    }, M = () => {
+      d = !1, i.value = !!u.size;
+    }, H = () => {
+      d = !0, i.value = m;
+    };
+    N(() => {
+      S(), document.removeEventListener("mouseup", b);
+    });
+    const S = () => {
+      document.onselectstart !== p && (document.onselectstart = p);
+    };
+    return k(
+      z(o, "scrollbarElement"),
+      "mousemove",
+      M
+    ), k(
+      z(o, "scrollbarElement"),
+      "mouseleave",
+      H
+    ), (t, n) => (A(), O(j, {
+      name: s(c).b("fade")
+    }, {
+      default: K(() => [
+        U(C("div", {
+          ref_key: "instance",
+          ref: l,
+          class: P([s(c).e("bar"), s(c).is(s(e).key)]),
+          onMousedown: x
+        }, [
+          C("div", {
+            ref_key: "thumb",
+            ref: a,
+            class: P(s(c).e("thumb")),
+            style: I(s(B)),
+            onMousedown: _
+          }, null, 38)
+        ], 34), [
+          [V, g.always || i.value]
+        ])
+      ]),
+      _: 1
+    }, 8, ["name"]));
+  }
+});
+export {
+  ue as default
+};

package/es/packages/components/scrollbar/util.js

@@ -0,0 +1,34 @@
+const i = 4, o = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+}, s = ({
+  move: e,
+  size: l,
+  bar: t
+}) => ({
+  [t.size]: l,
+  transform: `translate${t.axis}(${e}%)`
+});
+export {
+  o as BAR_MAP,
+  i as GAP,
+  s as renderThumbStyle
+};

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

@@ -0,0 +1,12 @@
+import { withInstall as t } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import o from "./search.vue2.js";
+const c = t(o);
+export {
+  c as VftSearch,
+  c as default
+};

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
+};