vft 0.0.361 → 0.0.363

package/es/components/segmented/segmented.vue2.js

@@ -1,121 +1,178 @@
-import { defineComponent as _, ref as A, reactive as B, computed as c, watch as E, createElementBlock as b, createCommentVNode as R, openBlock as h, unref as a, normalizeClass as r, createElementVNode as d, normalizeStyle as q, Fragment as H, renderList as W, renderSlot as j, createTextVNode as G, toDisplayString as M } from "vue";
-import { useActiveElement as U, useResizeObserver as J } from "@vueuse/core";
-import { isObject as g } from "@vft/utils";
-import { debugWarn as K } from "../../utils/error.js";
-import "../config-provider/hooks/use-global-config.js";
-import { UPDATE_MODEL_EVENT as Q, CHANGE_EVENT as Z } from "../../constants/event.js";
-import "lodash-es";
-import { useId as ee } from "../../hooks/use-id/index.js";
-import { useNamespace as te } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-import "../form/index.js";
-import { segmentedEmits as se, segmentedProps as le, defaultProps as oe } from "./segmented.js";
-import { useFormSize as ae, useFormDisabled as ne } from "../form/hooks/use-form-common-props.js";
-import { useFormItem as re, useFormItemInputId as ie } from "../form/hooks/use-form-item.js";
-const ce = ["id", "aria-label", "aria-labelledby"], de = ["name", "disabled", "checked", "onChange"], me = _({
+import { defineComponent, ref, reactive, computed, watch, createElementBlock, createCommentVNode, openBlock, unref, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { useActiveElement, useResizeObserver } from "@vueuse/core";
+import { isObject } from "@vft/utils";
+import { segmentedEmits, segmentedProps, defaultProps } from "./segmented.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { useId } from "../../hooks/use-id/index.js";
+import { useFormSize, useFormDisabled } from "../form/hooks/use-form-common-props.js";
+import { useFormItem, useFormItemInputId } from "../form/hooks/use-form-item.js";
+import { debugWarn } from "../../utils/error.js";
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from "../../constants/event.js";
+const _hoisted_1 = ["id", "aria-label", "aria-labelledby"];
+const _hoisted_2 = ["name", "disabled", "checked", "onChange"];
+const __default__ = defineComponent({
   name: "VftSegmented"
-}), Fe = /* @__PURE__ */ _({
-  ...me,
-  props: le,
-  emits: se,
-  setup(C, { emit: S }) {
-    const s = C, I = S, l = te("segmented"), k = ee(), N = ae(), w = ne(), { formItem: m } = re(), { inputId: F, isLabeledByFormItem: y } = ie(s, {
-      formItemContext: m
-    }), i = A(null), L = U(), t = B({
-      isInit: !1,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: segmentedProps,
+  emits: segmentedEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const ns = useNamespace("segmented");
+    const segmentedId = useId();
+    const segmentedSize = useFormSize();
+    const _disabled = useFormDisabled();
+    const { formItem } = useFormItem();
+    const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const segmentedRef = ref(null);
+    const activeElement = useActiveElement();
+    const state = reactive({
+      isInit: false,
       width: 0,
       height: 0,
       translateX: 0,
       translateY: 0,
-      focusVisible: !1
-    }), $ = (e) => {
-      const o = p(e);
-      I(Q, o), I(Z, o);
-    }, u = c(() => ({ ...oe, ...s.props })), p = (e) => g(e) ? e[u.value.value] : e, z = (e) => g(e) ? e[u.value.label] : e, f = (e) => !!(w.value || g(e) && e[u.value.disabled]), V = (e) => s.modelValue === p(e), D = (e) => s.options.find((o) => p(o) === e), T = (e) => [
-      l.e("item"),
-      l.is("selected", V(e)),
-      l.is("disabled", f(e))
-    ], v = () => {
-      if (!i.value) return;
-      const e = i.value.querySelector(
+      focusVisible: false
+    });
+    const handleChange = (item) => {
+      const value = getValue(item);
+      emit(UPDATE_MODEL_EVENT, value);
+      emit(CHANGE_EVENT, value);
+    };
+    const aliasProps = computed(() => ({ ...defaultProps, ...props.props }));
+    const getValue = (item) => {
+      return isObject(item) ? item[aliasProps.value.value] : item;
+    };
+    const getLabel = (item) => {
+      return isObject(item) ? item[aliasProps.value.label] : item;
+    };
+    const getDisabled = (item) => {
+      return !!(_disabled.value || (isObject(item) ? item[aliasProps.value.disabled] : false));
+    };
+    const getSelected = (item) => {
+      return props.modelValue === getValue(item);
+    };
+    const getOption = (value) => {
+      return props.options.find((item) => getValue(item) === value);
+    };
+    const getItemCls = (item) => {
+      return [
+        ns.e("item"),
+        ns.is("selected", getSelected(item)),
+        ns.is("disabled", getDisabled(item))
+      ];
+    };
+    const updateSelect = () => {
+      if (!segmentedRef.value) return;
+      const selectedItem = segmentedRef.value.querySelector(
         ".is-selected"
-      ), o = i.value.querySelector(
+      );
+      const selectedItemInput = segmentedRef.value.querySelector(
         ".is-selected input"
       );
-      if (!e || !o) {
-        t.width = 0, t.height = 0, t.translateX = 0, t.translateY = 0, t.focusVisible = !1;
+      if (!selectedItem || !selectedItemInput) {
+        state.width = 0;
+        state.height = 0;
+        state.translateX = 0;
+        state.translateY = 0;
+        state.focusVisible = false;
         return;
       }
-      t.isInit = !0, s.direction === "vertical" ? (t.height = e.offsetHeight, t.translateY = e.offsetTop) : (t.width = e.offsetWidth, t.translateX = e.offsetLeft);
+      state.isInit = true;
+      if (props.direction === "vertical") {
+        state.height = selectedItem.offsetHeight;
+        state.translateY = selectedItem.offsetTop;
+      } else {
+        state.width = selectedItem.offsetWidth;
+        state.translateX = selectedItem.offsetLeft;
+      }
       try {
-        t.focusVisible = o.matches(":focus-visible");
+        state.focusVisible = selectedItemInput.matches(":focus-visible");
       } catch {
       }
-    }, X = c(() => [
-      l.b(),
-      l.m(N.value),
-      l.is("block", s.block)
-    ]), Y = c(() => ({
-      width: s.direction === "vertical" ? "100%" : `${t.width}px`,
-      height: s.direction === "vertical" ? `${t.height}px` : "100%",
-      transform: s.direction === "vertical" ? `translateY(${t.translateY}px)` : `translateX(${t.translateX}px)`,
-      display: t.isInit ? "block" : "none"
-    })), x = c(() => [
-      l.e("item-selected"),
-      l.is("disabled", f(D(s.modelValue))),
-      l.is("focus-visible", t.focusVisible)
-    ]), O = c(() => s.name || k.value);
-    return J(i, v), E(L, v), E(
-      () => s.modelValue,
+    };
+    const segmentedCls = computed(() => [
+      ns.b(),
+      ns.m(segmentedSize.value),
+      ns.is("block", props.block)
+    ]);
+    const selectedStyle = computed(() => ({
+      width: props.direction === "vertical" ? "100%" : `${state.width}px`,
+      height: props.direction === "vertical" ? `${state.height}px` : "100%",
+      transform: props.direction === "vertical" ? `translateY(${state.translateY}px)` : `translateX(${state.translateX}px)`,
+      display: state.isInit ? "block" : "none"
+    }));
+    const selectedCls = computed(() => [
+      ns.e("item-selected"),
+      ns.is("disabled", getDisabled(getOption(props.modelValue))),
+      ns.is("focus-visible", state.focusVisible)
+    ]);
+    const name = computed(() => {
+      return props.name || segmentedId.value;
+    });
+    useResizeObserver(segmentedRef, updateSelect);
+    watch(activeElement, updateSelect);
+    watch(
+      () => props.modelValue,
       () => {
-        v(), s.validateEvent && m?.validate?.("change").catch((e) => K(e));
+        updateSelect();
+        if (props.validateEvent) {
+          formItem?.validate?.("change").catch((err) => debugWarn(err));
+        }
       },
       {
         flush: "post"
       }
-    ), (e, o) => e.options.length ? (h(), b("div", {
-      key: 0,
-      id: a(F),
-      ref_key: "segmentedRef",
-      ref: i,
-      class: r(X.value),
-      role: "radiogroup",
-      "aria-label": a(y) ? void 0 : e.ariaLabel || "segmented",
-      "aria-labelledby": a(y) ? a(m).labelId : void 0
-    }, [
-      d("div", {
-        class: r([a(l).e("group"), a(l).m(s.direction)])
+    );
+    return (_ctx, _cache) => {
+      return _ctx.options.length ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        id: unref(inputId),
+        ref_key: "segmentedRef",
+        ref: segmentedRef,
+        class: normalizeClass(segmentedCls.value),
+        role: "radiogroup",
+        "aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "segmented" : void 0,
+        "aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem).labelId : void 0
       }, [
-        d("div", {
-          style: q(Y.value),
-          class: r(x.value)
-        }, null, 6),
-        (h(!0), b(H, null, W(e.options, (n, P) => (h(), b("label", {
-          key: P,
-          class: r(T(n))
+        createElementVNode("div", {
+          class: normalizeClass([unref(ns).e("group"), unref(ns).m(props.direction)])
         }, [
-          d("input", {
-            class: r(a(l).e("item-input")),
-            type: "radio",
-            name: O.value,
-            disabled: f(n),
-            checked: V(n),
-            onChange: (ue) => $(n)
-          }, null, 42, de),
-          d("div", {
-            class: r(a(l).e("item-label"))
-          }, [
-            j(e.$slots, "default", { item: n }, () => [
-              G(M(z(n)), 1)
-            ])
-          ], 2)
-        ], 2))), 128))
-      ], 2)
-    ], 10, ce)) : R("", !0);
+          createElementVNode("div", {
+            style: normalizeStyle(selectedStyle.value),
+            class: normalizeClass(selectedCls.value)
+          }, null, 6),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item, index) => {
+            return openBlock(), createElementBlock("label", {
+              key: index,
+              class: normalizeClass(getItemCls(item))
+            }, [
+              createElementVNode("input", {
+                class: normalizeClass(unref(ns).e("item-input")),
+                type: "radio",
+                name: name.value,
+                disabled: getDisabled(item),
+                checked: getSelected(item),
+                onChange: ($event) => handleChange(item)
+              }, null, 42, _hoisted_2),
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("item-label"))
+              }, [
+                renderSlot(_ctx.$slots, "default", { item }, () => [
+                  createTextVNode(toDisplayString(getLabel(item)), 1)
+                ])
+              ], 2)
+            ], 2);
+          }), 128))
+        ], 2)
+      ], 10, _hoisted_1)) : createCommentVNode("", true);
+    };
   }
 });
 export {
-  Fe as default
+  _sfc_main as default
 };

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

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

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

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

package/es/components/select/defaults.js

@@ -1,13 +1,9 @@
-import { placements as a } from "@popperjs/core";
-import { CHANGE_EVENT as l, UPDATE_MODEL_EVENT as r } from "../../constants/event.js";
-import "@vueuse/core";
-import { isNumber as o, isBoolean as n, isFunction as i } from "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "vue";
-import { buildProps as p, definePropType as t } from "../../utils/vue/props/runtime.js";
-import "./select.vue2.js";
-import { defaultProps as u } from "./useProps.js";
-const S = {
+import { placements } from "@popperjs/core";
+import { isBoolean, isNumber, isFunction } from "@vft/utils";
+import { defaultProps } from "./useProps.js";
+import { buildProps, definePropType } from "../../utils/vue/props/runtime.js";
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../constants/event.js";
+const selectV2Props = {
   allowCreate: Boolean,
   autocomplete: {
     type: String,
@@ -26,7 +22,7 @@ const S = {
   collapseTags: Boolean,
   collapseTagsTooltip: {
     type: Boolean,
-    default: !1
+    default: false
   },
   maxCollapseTags: {
     type: Number,
@@ -55,7 +51,7 @@ const S = {
   label: String,
   modelValue: {
     // eslint-disable-next-line prettier/prettier
-    type: t([Array, String, Number, Boolean, Object])
+    type: definePropType([Array, String, Number, Boolean, Object])
   },
   multiple: Boolean,
   multipleLimit: {
@@ -68,22 +64,22 @@ const S = {
   remoteMethod: Function,
   reserveKeyword: {
     type: Boolean,
-    default: !0
+    default: true
   },
   options: {
-    type: t(Array),
-    required: !0
+    type: definePropType(Array),
+    required: true
   },
   placeholder: {
     type: String
   },
   teleported: {
     type: Boolean,
-    default: !0
+    default: true
   },
   persistent: {
     type: Boolean,
-    default: !0
+    default: true
   },
   popperClass: {
     type: String,
@@ -98,8 +94,8 @@ const S = {
     type: String
   },
   props: {
-    type: t(Object),
-    default: () => u
+    type: definePropType(Object),
+    default: () => defaultProps
   },
   valueKey: {
     type: String,
@@ -107,11 +103,11 @@ const S = {
   },
   scrollbarAlwaysOn: {
     type: Boolean,
-    default: !1
+    default: false
   },
   validateEvent: {
     type: Boolean,
-    default: !0
+    default: true
   },
   tabindex: {
     type: [String, Number],
@@ -128,8 +124,8 @@ const S = {
     default: "light"
   },
   placement: {
-    type: t(String),
-    values: a,
+    type: definePropType(String),
+    values: placements,
     default: "bottom-start"
   },
   offset: {
@@ -139,10 +135,10 @@ const S = {
   ariaLabel: String,
   showArrow: {
     type: Boolean,
-    default: !0
+    default: true
   },
   fallbackPlacements: {
-    type: t(Array),
+    type: definePropType(Array),
     default: ["bottom-start", "top-start", "right", "left"]
   },
   appendTo: {
@@ -158,42 +154,45 @@ const S = {
   valueOnClear: {
     type: [String, Number, Boolean, Function],
     default: void 0,
-    validator: (e) => i(e) ? !e() : !e
+    validator: (val) => isFunction(val) ? !val() : !val
   },
   fitInputWidth: {
     type: [Boolean, Number],
-    default: !0,
-    validator(e) {
-      return n(e) || o(e);
+    default: true,
+    validator(val) {
+      return isBoolean(val) || isNumber(val);
     }
   }
-}, h = p({
+};
+const optionV2Props = buildProps({
   data: Array,
   disabled: Boolean,
   hovering: Boolean,
   item: {
-    type: t(Object),
-    required: !0
+    type: definePropType(Object),
+    required: true
   },
   index: Number,
   style: Object,
   selected: Boolean,
   created: Boolean
-}), N = {
-  [r]: (e) => !0,
-  [l]: (e) => !0,
-  "remove-tag": (e) => !0,
-  "visible-change": (e) => !0,
-  focus: (e) => e instanceof FocusEvent,
-  blur: (e) => e instanceof FocusEvent,
-  clear: () => !0
-}, E = {
-  hover: (e) => o(e),
-  select: (e, d) => !0
+});
+const selectV2Emits = {
+  [UPDATE_MODEL_EVENT]: (val) => true,
+  [CHANGE_EVENT]: (val) => true,
+  "remove-tag": (val) => true,
+  "visible-change": (visible) => true,
+  focus: (evt) => evt instanceof FocusEvent,
+  blur: (evt) => evt instanceof FocusEvent,
+  clear: () => true
+};
+const optionV2Emits = {
+  hover: (index) => isNumber(index),
+  select: (val, index) => true
 };
 export {
-  E as optionV2Emits,
-  h as optionV2Props,
-  N as selectV2Emits,
-  S as selectV2Props
+  optionV2Emits,
+  optionV2Props,
+  selectV2Emits,
+  selectV2Props
 };

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

@@ -1,13 +1,13 @@
-import t from "./group-item.vue2.js";
-import { createElementBlock as o, openBlock as r, normalizeStyle as i, normalizeClass as l, toDisplayString as s } from "vue";
-import n from "../../_virtual/_plugin-vue_export-helper.js";
-function p(e, a, m, c, f, u) {
-  return r(), o("div", {
-    class: l(e.ns.be("group", "title")),
-    style: i({ ...e.style, lineHeight: `${e.height}px` })
-  }, s(e.item.label), 7);
+import _sfc_main from "./group-item.vue2.js";
+import { createElementBlock, openBlock, normalizeStyle, normalizeClass, toDisplayString } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.ns.be("group", "title")),
+    style: normalizeStyle({ ..._ctx.style, lineHeight: `${_ctx.height}px` })
+  }, toDisplayString(_ctx.item.label), 7);
 }
-const h = /* @__PURE__ */ n(t, [["render", p]]);
+const GroupItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  h as default
+  GroupItem as default
 };

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

@@ -1,17 +1,10 @@
-import { defineComponent as t } from "vue";
-import "@vueuse/core";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "lodash-es";
-import { useNamespace as e } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-const f = t({
+import { defineComponent } from "vue";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+const _sfc_main = defineComponent({
   props: {
     item: {
       type: Object,
-      required: !0
+      required: true
     },
     style: {
       type: Object
@@ -19,11 +12,12 @@ const f = t({
     height: Number
   },
   setup() {
+    const ns = useNamespace("select");
     return {
-      ns: e("select")
+      ns
     };
   }
 });
 export {
-  f as default
+  _sfc_main as default
 };

package/es/components/select/index.js

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

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

@@ -1,31 +1,31 @@
-import o from "./option-item.vue2.js";
-import { createElementBlock as l, openBlock as n, withModifiers as r, normalizeClass as d, normalizeStyle as t, 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, $, g) {
-  return n(), l("li", {
-    "aria-selected": e.selected,
-    style: t(e.style),
-    class: d([
-      e.ns.be("dropdown", "item"),
-      e.ns.is("selected", e.selected),
-      e.ns.is("disabled", e.disabled),
-      e.ns.is("created", e.created),
-      e.ns.is("hovering", e.hovering)
+import _sfc_main from "./option-item.vue2.js";
+import { createElementBlock, openBlock, withModifiers, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["aria-selected"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    "aria-selected": _ctx.selected,
+    style: normalizeStyle(_ctx.style),
+    class: normalizeClass([
+      _ctx.ns.be("dropdown", "item"),
+      _ctx.ns.is("selected", _ctx.selected),
+      _ctx.ns.is("disabled", _ctx.disabled),
+      _ctx.ns.is("created", _ctx.created),
+      _ctx.ns.is("hovering", _ctx.hovering)
     ]),
-    onMousemove: s[0] || (s[0] = (...i) => e.hoverItem && e.hoverItem(...i)),
-    onClick: s[1] || (s[1] = r((...i) => e.selectOptionClick && e.selectOptionClick(...i), ["stop"]))
+    onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
+    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
   }, [
-    a(e.$slots, "default", {
-      item: e.item,
-      index: e.index,
-      disabled: e.disabled
+    renderSlot(_ctx.$slots, "default", {
+      item: _ctx.item,
+      index: _ctx.index,
+      disabled: _ctx.disabled
     }, () => [
-      m("span", null, p(e.getLabel(e.item)), 1)
+      createElementVNode("span", null, toDisplayString(_ctx.getLabel(_ctx.item)), 1)
     ])
-  ], 46, u);
+  ], 46, _hoisted_1);
 }
-const I = /* @__PURE__ */ f(o, [["render", b]]);
+const OptionItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  I as default
+  OptionItem as default
 };