vft 0.0.428 → 0.0.430

package/es/components/descriptions/description.vue2.js

@@ -0,0 +1,85 @@
+import { defineComponent as g, useSlots as x, getCurrentInstance as B, provide as E, computed as w, createElementBlock as u, openBlock as p, normalizeClass as i, createCommentVNode as z, createElementVNode as m, unref as a, renderSlot as b, createTextVNode as v, toDisplayString as y, Fragment as V, renderList as D, createBlock as I } from "vue";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import { flattedChildren as K } from "../../utils/vue/vnode.js";
+import "../form/index.js";
+import { useNamespace as F } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import L from "./descriptions-row.vue2.js";
+import { descriptionsKey as R } from "./token.js";
+const T = g({
+  name: "vft-descriptions"
+}), Y = /* @__PURE__ */ g({
+  ...T,
+  props: {
+    border: { type: Boolean, default: !1 },
+    column: { default: 3 },
+    direction: { default: "horizontal" },
+    size: {},
+    title: {},
+    extra: {}
+  },
+  setup(s) {
+    const o = F("descriptions"), k = x(), C = B();
+    E(R, C.props);
+    const N = w(() => [o.b(), o.m("small")]), d = (t, l, e, r = !1) => (t.props || (t.props = {}), l > e && (t.props.span = e), r && (t.props.span = l), t), S = () => {
+      const t = K(k.default?.()).filter(
+        (n) => n?.type?.name === "ElDescriptionsItem"
+      ), l = [];
+      let e = [], r = s.column, f = 0;
+      return t.forEach((n, h) => {
+        const c = n?.props?.span || 1;
+        if (h < t.length - 1 && (f += c > r ? r : c), h === t.length - 1) {
+          const $ = s.column - f % s.column;
+          e.push(d(n, $, r, !0)), l.push(e);
+          return;
+        }
+        c < r ? (r -= c, e.push(n)) : (e.push(d(n, c, r)), l.push(e), r = s.column, e = []);
+      }), l;
+    };
+    return (t, l) => (p(), u("div", {
+      class: i(N.value)
+    }, [
+      s.title || s.extra || t.$slots.title || t.$slots.extra ? (p(), u("div", {
+        key: 0,
+        class: i(a(o).e("header"))
+      }, [
+        m("div", {
+          class: i(a(o).e("title"))
+        }, [
+          b(t.$slots, "title", {}, () => [
+            v(y(s.title), 1)
+          ])
+        ], 2),
+        m("div", {
+          class: i(a(o).e("extra"))
+        }, [
+          b(t.$slots, "extra", {}, () => [
+            v(y(s.extra), 1)
+          ])
+        ], 2)
+      ], 2)) : z("", !0),
+      m("div", {
+        class: i(a(o).e("body"))
+      }, [
+        m("table", {
+          class: i([a(o).e("table"), a(o).is("bordered", s.border)])
+        }, [
+          m("tbody", null, [
+            (p(!0), u(V, null, D(S(), (e, r) => (p(), I(L, {
+              key: r,
+              row: e
+            }, null, 8, ["row"]))), 128))
+          ])
+        ], 2)
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  Y as default
+};

package/es/components/descriptions/descriptions-row.vue2.js

@@ -0,0 +1,57 @@
+import { defineComponent as y, inject as m, createElementBlock as r, unref as l, openBlock as e, Fragment as n, createElementVNode as s, renderList as a, createBlock as i, createVNode as p } from "vue";
+import c from "./descriptions-cell.js";
+import { descriptionsKey as f } from "./token.js";
+const k = { key: 1 }, g = y({
+  name: "vft-descriptions-row"
+}), $ = /* @__PURE__ */ y({
+  ...g,
+  props: {
+    row: { default: () => [] }
+  },
+  setup(u) {
+    const d = m(f, {});
+    return (_, w) => l(d).direction === "vertical" ? (e(), r(n, { key: 0 }, [
+      s("tr", null, [
+        (e(!0), r(n, null, a(u.row, (t, o) => (e(), i(l(c), {
+          key: `tr1-${o}`,
+          cell: t,
+          tag: "th",
+          type: "label"
+        }, null, 8, ["cell"]))), 128))
+      ]),
+      s("tr", null, [
+        (e(!0), r(n, null, a(u.row, (t, o) => (e(), i(l(c), {
+          key: `tr2-${o}`,
+          cell: t,
+          tag: "td",
+          type: "content"
+        }, null, 8, ["cell"]))), 128))
+      ])
+    ], 64)) : (e(), r("tr", k, [
+      (e(!0), r(n, null, a(u.row, (t, o) => (e(), r(n, {
+        key: `tr3-${o}`
+      }, [
+        l(d).border ? (e(), r(n, { key: 0 }, [
+          p(l(c), {
+            cell: t,
+            tag: "td",
+            type: "label"
+          }, null, 8, ["cell"]),
+          p(l(c), {
+            cell: t,
+            tag: "td",
+            type: "content"
+          }, null, 8, ["cell"])
+        ], 64)) : (e(), i(l(c), {
+          key: 1,
+          cell: t,
+          tag: "td",
+          type: "both"
+        }, null, 8, ["cell"]))
+      ], 64))), 128))
+    ]));
+  }
+});
+export {
+  $ as default
+};

package/es/components/dialog/dialog-content.vue2.js

@@ -0,0 +1,97 @@
+import { defineComponent as C, inject as u, computed as a, createElementBlock as g, openBlock as r, normalizeStyle as E, normalizeClass as s, unref as t, createElementVNode as n, createCommentVNode as y, renderSlot as i, createBlock as N, toDisplayString as P, mergeProps as S } from "vue";
+import { singleAttrToObj as T } from "@vft/utils";
+import { VftIcon as j } from "../icon/index.js";
+import "../focus-trap/focus-trap.vue2.js";
+import { FOCUS_TRAP_INJECTION_KEY as z } from "../focus-trap/tokens.js";
+import "../focus-trap/utils.js";
+import "@vueuse/core";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import { composeRefs as K } from "../../utils/vue/refs.js";
+import "../form/index.js";
+import { useDraggable as O } from "../../hooks/use-draggable/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { dialogInjectionKey as V } from "./constants.js";
+const A = ["id"], F = C({
+  name: "vft-dialog-content"
+}), le = /* @__PURE__ */ C({
+  ...F,
+  props: {
+    center: { type: Boolean, default: !1 },
+    alignCenter: { type: Boolean, default: !1 },
+    closeIcon: {},
+    customClass: {},
+    draggable: { type: Boolean, default: !1 },
+    fullscreen: { type: Boolean, default: !1 },
+    showClose: { type: Boolean, default: !0 },
+    title: { default: "" },
+    overflow: { type: Boolean },
+    headerClass: {},
+    bodyClass: {},
+    footerClass: {}
+  },
+  emits: ["close"],
+  setup(e, { expose: p }) {
+    const { dialogRef: c, headerRef: f, bodyId: b, ns: o, style: h } = u(V), { focusTrapRef: v } = u(z), B = K(v, c), d = a(() => e.draggable), I = a(() => e.overflow), { resetPosition: k, updatePosition: w, isDragging: R } = O(
+      c,
+      f,
+      d,
+      I
+    ), $ = a(() => [
+      o.b(),
+      o.is("fullscreen", e.fullscreen),
+      o.is("draggable", d.value),
+      o.is("dragging", R.value),
+      o.is("align-center", e.alignCenter),
+      { [o.m("center")]: e.center }
+    ]), D = a(() => T(e.closeIcon, "icon", {
+      icon: "icon-close",
+      pointer: !0,
+      size: 16
+    }));
+    return p({
+      resetPosition: k,
+      updatePosition: w
+    }), (l, m) => (r(), g("div", {
+      ref: t(B),
+      class: s($.value),
+      style: E(t(h)),
+      tabindex: "-1"
+    }, [
+      n("header", {
+        ref_key: "headerRef",
+        ref: f,
+        class: s([t(o).e("header"), e.headerClass, { "show-close": e.showClose }])
+      }, [
+        i(l.$slots, "header", {}, () => [
+          n("span", {
+            role: "heading",
+            class: s(t(o).e("title"))
+          }, P(e.title), 3)
+        ]),
+        e.showClose ? (r(), N(t(j), S({
+          key: 0,
+          class: [t(o).e("headerbtn")],
+          onClick: m[0] || (m[0] = (J) => l.$emit("close"))
+        }, D.value), null, 16, ["class"])) : y("", !0)
+      ], 2),
+      n("div", {
+        id: t(b),
+        class: s([t(o).e("body"), e.bodyClass])
+      }, [
+        i(l.$slots, "default")
+      ], 10, A),
+      l.$slots.footer ? (r(), g("footer", {
+        key: 0,
+        class: s([t(o).e("footer"), e.footerClass])
+      }, [
+        i(l.$slots, "footer")
+      ], 2)) : y("", !0)
+    ], 6));
+  }
+});
+export {
+  le as default
+};

package/es/components/dialog/dialog.vue2.js

@@ -0,0 +1,204 @@
+import { defineComponent as B, ref as c, getCurrentInstance as O, provide as N, computed as q, createBlock as b, openBlock as g, unref as e, withCtx as t, createVNode as m, Transition as j, normalizeProps as x, guardReactiveProps as K, withDirectives as L, createElementVNode as U, normalizeStyle as G, normalizeClass as H, createCommentVNode as J, mergeProps as Q, createSlots as W, renderSlot as d, vShow as X } from "vue";
+import Y from "../focus-trap/focus-trap.vue.js";
+import "../focus-trap/utils.js";
+import { VftOverlay as Z } from "../overlay/index.js";
+import { VftTeleport as _ } from "../teleport/index.js";
+import { UPDATE_MODEL_EVENT as ee } from "../../constants/event.js";
+import "@vueuse/core";
+import { isBoolean as oe } from "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as le } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import { useSameTarget as te } from "../../hooks/use-same-target/index.js";
+import "../../hooks/use-z-index/index.js";
+import { dialogInjectionKey as ae } from "./constants.js";
+import se from "./dialog-content.vue2.js";
+import { useDialog as ne } from "./use-dialog.js";
+const re = ["aria-label", "aria-labelledby", "aria-describedby"], de = B({
+  name: "vft-dialog",
+  inheritAttrs: !1
+}), $e = /* @__PURE__ */ B({
+  ...de,
+  props: {
+    appendToBody: { type: Boolean, default: !1 },
+    appendTo: { default: "body" },
+    beforeClose: {},
+    destroyOnClose: { type: Boolean, default: !1 },
+    closeOnClickModal: { type: Boolean, default: !0 },
+    closeOnPressEscape: { type: Boolean, default: !0 },
+    lockScroll: { type: Boolean, default: !0 },
+    modal: { type: Boolean, default: !0 },
+    openDelay: { default: 0 },
+    closeDelay: { default: 0 },
+    top: {},
+    modalPenetrable: { type: Boolean },
+    modelValue: { type: Boolean, default: !1 },
+    modalClass: {},
+    width: {},
+    zIndex: {},
+    trapFocus: { type: Boolean, default: !1 },
+    overflow: { type: Boolean },
+    transition: {},
+    center: { type: Boolean, default: !1 },
+    alignCenter: { type: Boolean, default: !1 },
+    closeIcon: {},
+    customClass: { default: "" },
+    draggable: { type: Boolean, default: !1 },
+    fullscreen: { type: Boolean, default: !1 },
+    showClose: { type: Boolean, default: !0 },
+    title: { default: "" },
+    headerClass: {},
+    bodyClass: {},
+    footerClass: {}
+  },
+  emits: {
+    [ee]: (o) => oe(o),
+    open: () => !0,
+    opened: () => !0,
+    close: () => !0,
+    closed: () => !0,
+    openAutoFocus: () => !0,
+    closeAutoFocus: () => !0
+  },
+  setup(o, { expose: k }) {
+    const n = le("dialog"), p = c(), w = c(), i = c(), h = O(), {
+      visible: u,
+      titleId: y,
+      bodyId: C,
+      style: F,
+      overlayDialogStyle: P,
+      rendered: v,
+      transitionConfig: T,
+      zIndex: R,
+      _draggable: A,
+      _alignCenter: $,
+      _overflow: I,
+      handleClose: f,
+      onModalClick: M,
+      onOpenAutoFocus: V,
+      onCloseAutoFocus: z,
+      onCloseRequested: D,
+      onFocusoutPrevented: E
+    } = ne(h.props, p);
+    N(ae, {
+      dialogRef: p,
+      headerRef: w,
+      bodyId: C,
+      ns: n,
+      rendered: v,
+      style: F
+    });
+    const a = te(M), S = q(() => o.modalPenetrable && !o.modal && !o.fullscreen);
+    return k({
+      /** @description whether the dialog is visible */
+      visible: u,
+      dialogContentRef: i,
+      resetPosition: () => {
+        i.value?.resetPosition();
+      },
+      handleClose: f
+    }), (l, s) => (g(), b(e(_), {
+      to: o.appendTo,
+      disabled: o.appendTo !== "body" ? !1 : !o.appendToBody
+    }, {
+      default: t(() => [
+        m(j, x(K(e(T))), {
+          default: t(() => [
+            L(m(e(Z), {
+              "custom-mask-event": "",
+              mask: o.modal,
+              "overlay-class": [
+                o.modalClass ?? "",
+                `${e(n).namespace.value}-modal-dialog`,
+                e(n).is("penetrable", S.value)
+              ],
+              "z-index": e(R)
+            }, {
+              default: t(() => [
+                U("div", {
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-label": o.title || void 0,
+                  "aria-labelledby": o.title ? void 0 : e(y),
+                  "aria-describedby": e(C),
+                  class: H(`${e(n).namespace.value}-overlay-dialog`),
+                  style: G(e(P)),
+                  onClick: s[0] || (s[0] = //@ts-ignore
+                  (...r) => e(a).onClick && e(a).onClick(...r)),
+                  onMousedown: s[1] || (s[1] = //@ts-ignore
+                  (...r) => e(a).onMousedown && e(a).onMousedown(...r)),
+                  onMouseup: s[2] || (s[2] = //@ts-ignore
+                  (...r) => e(a).onMouseup && e(a).onMouseup(...r))
+                }, [
+                  m(e(Y), {
+                    loop: "",
+                    trapped: e(u),
+                    "focus-start-el": "container",
+                    onFocusAfterTrapped: e(V),
+                    onFocusAfterReleased: e(z),
+                    onFocusoutPrevented: e(E),
+                    onReleaseRequested: e(D)
+                  }, {
+                    default: t(() => [
+                      e(v) ? (g(), b(se, Q({
+                        key: 0,
+                        ref_key: "dialogContentRef",
+                        ref: i
+                      }, l.$attrs, {
+                        center: o.center,
+                        "align-center": e($),
+                        "close-icon": o.closeIcon,
+                        draggable: e(A),
+                        overflow: e(I),
+                        fullscreen: o.fullscreen,
+                        "header-class": o.headerClass,
+                        "body-class": o.bodyClass,
+                        "footer-class": o.footerClass,
+                        "show-close": o.showClose,
+                        title: o.title,
+                        onClose: e(f)
+                      }), W({
+                        header: t(() => [
+                          l.$slots.title ? d(l.$slots, "title", { key: 1 }) : d(l.$slots, "header", {
+                            key: 0,
+                            close: e(f),
+                            titleId: e(y),
+                            titleClass: e(n).e("title")
+                          })
+                        ]),
+                        default: t(() => [
+                          d(l.$slots, "default")
+                        ]),
+                        _: 2
+                      }, [
+                        l.$slots.footer ? {
+                          name: "footer",
+                          fn: t(() => [
+                            d(l.$slots, "footer")
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "onClose"])) : J("", !0)
+                    ]),
+                    _: 3
+                  }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
+                ], 46, re)
+              ]),
+              _: 3
+            }, 8, ["mask", "overlay-class", "z-index"]), [
+              [X, e(u)]
+            ])
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 8, ["to", "disabled"]));
+  }
+});
+export {
+  $e as default
+};

package/es/components/divider/divider.vue2.js

@@ -0,0 +1,48 @@
+import { defineComponent as a, computed as m, createElementBlock as i, openBlock as n, normalizeStyle as c, normalizeClass as l, unref as r, createCommentVNode as s, renderSlot as u } from "vue";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as f } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const v = a({
+  name: "vft-divider"
+}), N = /* @__PURE__ */ a({
+  ...v,
+  props: {
+    direction: { default: "horizontal" },
+    contentPosition: { default: "center" },
+    borderStyle: { default: "solid" },
+    borderColor: {},
+    marginY: {},
+    marginX: {}
+  },
+  setup(e) {
+    const t = f("divider"), d = m(() => ({
+      ...t.cssVarBlock({
+        "border-style": e.borderStyle,
+        "border-color": e.borderColor,
+        "margin-y": e.marginY,
+        "margin-x": e.marginX
+      })
+    }));
+    return (o, y) => (n(), i("div", {
+      class: l([r(t).b(), r(t).m(e.direction)]),
+      style: c(d.value),
+      role: "separator"
+    }, [
+      o.$slots.default && e.direction !== "vertical" ? (n(), i("div", {
+        key: 0,
+        class: l([r(t).e("text"), r(t).is(e.contentPosition)])
+      }, [
+        u(o.$slots, "default")
+      ], 2)) : s("", !0)
+    ], 6));
+  }
+});
+export {
+  N as default
+};