@oneflowui/ui 0.4.3 → 0.5.0

package/dist/components/overlay/Modal.vue2.js

@@ -1,18 +1,19 @@
-import { defineComponent as C, ref as V, watch as x, nextTick as B, onUnmounted as _, openBlock as l, createBlock as g, Teleport as z, createVNode as b, Transition as L, withCtx as $, createElementBlock as n, withModifiers as D, normalizeStyle as h, createElementVNode as k, normalizeClass as S, renderSlot as f, toDisplayString as T, unref as A, createCommentVNode as d } from "vue";
-import { X as I } from "lucide-vue-next";
-const M = ["aria-label"], N = {
+import { defineComponent as b, watch as w, onUnmounted as p, openBlock as o, createBlock as C, Teleport as V, createVNode as r, Transition as B, withCtx as _, createElementBlock as l, withModifiers as z, normalizeStyle as c, createElementVNode as m, normalizeClass as E, renderSlot as s, toDisplayString as T, unref as $, createCommentVNode as a } from "vue";
+import { X as x } from "lucide-vue-next";
+import { useFocusTrap as I } from "../../composables/useFocusTrap.js";
+const L = ["aria-label"], M = {
   key: 0,
   class: "of-modal__header"
-}, K = {
+}, N = {
   key: 0,
   class: "of-modal__title"
 }, R = {
   key: 1,
   class: "of-modal__title-placeholder"
-}, q = { class: "of-modal__body" }, F = {
+}, S = { class: "of-modal__body" }, g = {
   key: 1,
   class: "of-modal__footer"
-}, X = /* @__PURE__ */ C({
+}, U = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "Modal",
   props: {
@@ -25,85 +26,68 @@ const M = ["aria-label"], N = {
     zIndex: { default: 1e3 }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: w }) {
-    const i = t, E = w, s = V(null);
-    let a = null;
-    function m() {
-      return s.value ? Array.from(
-        s.value.querySelectorAll(
-          'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), a[href]'
-        )
-      ).filter((e) => !e.closest('[aria-hidden="true"]')) : [];
+  setup(e, { emit: f }) {
+    const d = e, u = f, {
+      containerRef: y,
+      activate: h,
+      deactivate: k
+    } = I();
+    function n() {
+      u("update:modelValue", !1);
     }
-    function r(e) {
-      if (e.key !== "Tab") return;
-      const o = m();
-      if (o.length === 0) {
-        e.preventDefault();
-        return;
-      }
-      const y = o[0], v = o[o.length - 1];
-      e.shiftKey ? document.activeElement === y && (e.preventDefault(), v.focus()) : document.activeElement === v && (e.preventDefault(), y.focus());
-    }
-    function u() {
-      E("update:modelValue", !1);
-    }
-    function p() {
-      i.maskClosable && u();
+    function v() {
+      d.maskClosable && n();
     }
-    function c(e) {
-      e.key === "Escape" && i.modelValue && u();
+    function i(t) {
+      t.key === "Escape" && d.modelValue && n();
     }
-    return x(
-      () => i.modelValue,
-      (e) => {
-        typeof document > "u" || (e ? (document.body.style.overflow = "hidden", a = document.activeElement, document.addEventListener("keydown", c), B(() => {
-          const o = m();
-          o.length && o[0].focus(), document.addEventListener("keydown", r);
-        })) : (document.body.style.overflow = "", document.removeEventListener("keydown", c), document.removeEventListener("keydown", r), a == null || a.focus(), a = null));
+    return w(
+      () => d.modelValue,
+      (t) => {
+        typeof document > "u" || (t ? (document.body.style.overflow = "hidden", document.addEventListener("keydown", i), h()) : (document.body.style.overflow = "", document.removeEventListener("keydown", i), k()));
       }
-    ), _(() => {
-      typeof document > "u" || (document.body.style.overflow = "", document.removeEventListener("keydown", c), document.removeEventListener("keydown", r));
-    }), (e, o) => (l(), g(z, { to: "body" }, [
-      b(L, { name: "of-modal" }, {
-        default: $(() => [
-          t.modelValue ? (l(), n("div", {
+    ), p(() => {
+      typeof document > "u" || (document.body.style.overflow = "", document.removeEventListener("keydown", i));
+    }), (t, A) => (o(), C(V, { to: "body" }, [
+      r(B, { name: "of-modal" }, {
+        default: _(() => [
+          e.modelValue ? (o(), l("div", {
             key: 0,
             class: "of-modal-backdrop",
-            style: h({ zIndex: t.zIndex }),
-            onClick: D(p, ["self"])
+            style: c({ zIndex: e.zIndex }),
+            onClick: z(v, ["self"])
           }, [
-            k("div", {
+            m("div", {
               ref_key: "modalRef",
-              ref: s,
-              class: S(["of-modal", { "of-modal--centered": t.centered }]),
-              style: h({ width: t.width, maxWidth: "90vw" }),
+              ref: y,
+              class: E(["of-modal", { "of-modal--centered": e.centered }]),
+              style: c({ width: e.width, maxWidth: "90vw" }),
               role: "dialog",
               "aria-modal": "true",
-              "aria-label": t.title
+              "aria-label": e.title
             }, [
-              e.$slots.header || t.title || t.closable ? (l(), n("div", N, [
-                f(e.$slots, "header", {}, () => [
-                  t.title ? (l(), n("h3", K, T(t.title), 1)) : (l(), n("div", R))
+              t.$slots.header || e.title || e.closable ? (o(), l("div", M, [
+                s(t.$slots, "header", {}, () => [
+                  e.title ? (o(), l("h3", N, T(e.title), 1)) : (o(), l("div", R))
                 ], !0),
-                t.closable ? (l(), n("button", {
+                e.closable ? (o(), l("button", {
                   key: 0,
                   class: "of-modal__close",
-                  onClick: u,
+                  onClick: n,
                   "aria-label": "关闭",
                   type: "button"
                 }, [
-                  b(A(I), { size: 18 })
-                ])) : d("", !0)
-              ])) : d("", !0),
-              k("div", q, [
-                f(e.$slots, "default", {}, void 0, !0)
+                  r($(x), { size: 18 })
+                ])) : a("", !0)
+              ])) : a("", !0),
+              m("div", S, [
+                s(t.$slots, "default", {}, void 0, !0)
               ]),
-              e.$slots.footer ? (l(), n("div", F, [
-                f(e.$slots, "footer", {}, void 0, !0)
-              ])) : d("", !0)
-            ], 14, M)
-          ], 4)) : d("", !0)
+              t.$slots.footer ? (o(), l("div", g, [
+                s(t.$slots, "footer", {}, void 0, !0)
+              ])) : a("", !0)
+            ], 14, L)
+          ], 4)) : a("", !0)
         ]),
         _: 3
       })
@@ -111,5 +95,5 @@ const M = ["aria-label"], N = {
   }
 });
 export {
-  X as default
+  U as default
 };

package/dist/components/overlay/SidePanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./SidePanel.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a021fd10"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-45ffc40d"]]);
 export {
-  f as default
+  e as default
 };

package/dist/components/overlay/SidePanel.vue2.js

@@ -1,24 +1,25 @@
-import { defineComponent as g, computed as S, ref as $, onMounted as B, watch as D, nextTick as L, onBeforeUnmount as z, openBlock as l, createBlock as P, Teleport as N, createElementBlock as o, Fragment as R, normalizeStyle as b, renderSlot as i, toDisplayString as k, createVNode as w, unref as p, createCommentVNode as d, createElementVNode as E, withDirectives as T, vShow as A } from "vue";
-import { X as _ } from "lucide-vue-next";
-const F = ["aria-label"], K = {
+import { defineComponent as _, computed as V, onMounted as C, watch as $, onBeforeUnmount as B, openBlock as t, createBlock as S, Teleport as E, createElementBlock as l, Fragment as g, normalizeStyle as u, renderSlot as d, toDisplayString as f, createVNode as m, unref as y, createCommentVNode as a, createElementVNode as h, withDirectives as z, vShow as P } from "vue";
+import { X as k } from "lucide-vue-next";
+import { useFocusTrap as R } from "../../composables/useFocusTrap.js";
+const T = ["aria-label"], N = {
   key: 0,
   class: "of-side-panel__header"
-}, q = {
+}, D = {
   key: 0,
   class: "of-side-panel__title"
-}, x = {
+}, F = {
   key: 1,
   class: "of-side-panel__title-placeholder"
-}, M = { class: "of-side-panel__body" }, U = ["aria-label"], X = {
+}, L = { class: "of-side-panel__body" }, K = ["aria-label"], M = {
   key: 0,
   class: "of-side-panel__header"
-}, j = {
+}, U = {
   key: 0,
   class: "of-side-panel__title"
-}, G = {
+}, X = {
   key: 1,
   class: "of-side-panel__title-placeholder"
-}, H = { class: "of-side-panel__body" }, O = /* @__PURE__ */ g({
+}, j = { class: "of-side-panel__body" }, I = /* @__PURE__ */ _({
   __name: "SidePanel",
   props: {
     modelValue: { type: Boolean },
@@ -28,110 +29,93 @@ const F = ["aria-label"], K = {
     mode: { default: "persistent" }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: V }) {
-    const u = t, C = V, f = S(() => ({
-      width: `${u.width}px`
-    })), s = $(null);
-    let a = null;
-    function m() {
-      return s.value ? Array.from(
-        s.value.querySelectorAll(
-          'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), a[href]'
-        )
-      ).filter((e) => !e.closest('[aria-hidden="true"]')) : [];
+  setup(e, { emit: v }) {
+    const i = e, w = v, n = V(() => ({
+      width: `${i.width}px`
+    })), {
+      containerRef: r,
+      activate: b,
+      deactivate: p
+    } = R();
+    function c(o) {
+      o.key === "Escape" && i.modelValue && s();
     }
-    function r(e) {
-      if (e.key !== "Tab") return;
-      const n = m();
-      if (n.length === 0) {
-        e.preventDefault();
-        return;
+    C(() => {
+      typeof document > "u" || document.addEventListener("keydown", c);
+    }), $(
+      () => i.modelValue,
+      (o) => {
+        typeof document > "u" || (document.body.style.overflow = o ? "hidden" : "", o ? b() : p());
       }
-      const h = n[0], v = n[n.length - 1];
-      e.shiftKey ? document.activeElement === h && (e.preventDefault(), v.focus()) : document.activeElement === v && (e.preventDefault(), h.focus());
-    }
-    function y(e) {
-      e.key === "Escape" && u.modelValue && c();
-    }
-    B(() => {
-      typeof document > "u" || document.addEventListener("keydown", y);
-    }), D(
-      () => u.modelValue,
-      (e) => {
-        typeof document > "u" || (document.body.style.overflow = e ? "hidden" : "", e ? (a = document.activeElement, L(() => {
-          const n = m();
-          n.length && n[0].focus(), document.addEventListener("keydown", r);
-        })) : (document.removeEventListener("keydown", r), a == null || a.focus(), a = null));
-      }
-    ), z(() => {
-      typeof document > "u" || (document.removeEventListener("keydown", y), document.removeEventListener("keydown", r), document.body.style.overflow = "");
+    ), B(() => {
+      typeof document > "u" || (document.removeEventListener("keydown", c), document.body.style.overflow = "");
     });
-    function c() {
-      C("update:modelValue", !1);
+    function s() {
+      w("update:modelValue", !1);
     }
-    return (e, n) => (l(), P(N, { to: "body" }, [
-      t.mode === "lazy" ? (l(), o(R, { key: 0 }, [
-        t.modelValue ? (l(), o("aside", {
+    return (o, q) => (t(), S(E, { to: "body" }, [
+      e.mode === "lazy" ? (t(), l(g, { key: 0 }, [
+        e.modelValue ? (t(), l("aside", {
           key: 0,
           ref_key: "sidePanelRef",
-          ref: s,
+          ref: r,
           class: "of-side-panel",
-          style: b(f.value),
+          style: u(n.value),
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": t.title
+          "aria-label": e.title
         }, [
-          e.$slots.header || t.title || t.showClose ? (l(), o("div", K, [
-            i(e.$slots, "header", {}, () => [
-              t.title ? (l(), o("h3", q, k(t.title), 1)) : (l(), o("div", x))
+          o.$slots.header || e.title || e.showClose ? (t(), l("div", N, [
+            d(o.$slots, "header", {}, () => [
+              e.title ? (t(), l("h3", D, f(e.title), 1)) : (t(), l("div", F))
             ], !0),
-            t.showClose ? (l(), o("button", {
+            e.showClose ? (t(), l("button", {
               key: 0,
               class: "of-side-panel__close",
               type: "button",
               "aria-label": "关闭",
-              onClick: c
+              onClick: s
             }, [
-              w(p(_), { size: 18 })
-            ])) : d("", !0)
-          ])) : d("", !0),
-          E("div", M, [
-            i(e.$slots, "default", {}, void 0, !0)
+              m(y(k), { size: 18 })
+            ])) : a("", !0)
+          ])) : a("", !0),
+          h("div", L, [
+            d(o.$slots, "default", {}, void 0, !0)
           ])
-        ], 12, F)) : d("", !0)
-      ], 64)) : T((l(), o("aside", {
+        ], 12, T)) : a("", !0)
+      ], 64)) : z((t(), l("aside", {
         key: 1,
         ref_key: "sidePanelRef",
-        ref: s,
+        ref: r,
         class: "of-side-panel",
-        style: b(f.value),
+        style: u(n.value),
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": t.title
+        "aria-label": e.title
       }, [
-        e.$slots.header || t.title || t.showClose ? (l(), o("div", X, [
-          i(e.$slots, "header", {}, () => [
-            t.title ? (l(), o("h3", j, k(t.title), 1)) : (l(), o("div", G))
+        o.$slots.header || e.title || e.showClose ? (t(), l("div", M, [
+          d(o.$slots, "header", {}, () => [
+            e.title ? (t(), l("h3", U, f(e.title), 1)) : (t(), l("div", X))
           ], !0),
-          t.showClose ? (l(), o("button", {
+          e.showClose ? (t(), l("button", {
             key: 0,
             class: "of-side-panel__close",
             type: "button",
             "aria-label": "关闭",
-            onClick: c
+            onClick: s
           }, [
-            w(p(_), { size: 18 })
-          ])) : d("", !0)
-        ])) : d("", !0),
-        E("div", H, [
-          i(e.$slots, "default", {}, void 0, !0)
+            m(y(k), { size: 18 })
+          ])) : a("", !0)
+        ])) : a("", !0),
+        h("div", j, [
+          d(o.$slots, "default", {}, void 0, !0)
         ])
-      ], 12, U)), [
-        [A, t.modelValue]
+      ], 12, K)), [
+        [P, e.modelValue]
       ])
     ]));
   }
 });
 export {
-  O as default
+  I as default
 };

package/dist/components/table/ColumnHeaderMenu.vue.d.ts

@@ -0,0 +1,33 @@
+import { FieldType } from '../../types';
+type __VLS_Props = {
+    colKey: string;
+    colLabel: string;
+    fieldType?: FieldType;
+    sortOrder?: "asc" | "desc" | null;
+    visible: boolean;
+    x: number;
+    y: number;
+    deletable?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    sort: (colKey: string, direction: "asc" | "desc") => any;
+    delete: (colKey: string) => any;
+    close: () => any;
+    rename: (colKey: string, newName: string) => any;
+    "change-type": (colKey: string, newType: FieldType) => any;
+    hide: (colKey: string) => any;
+    duplicate: (colKey: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSort?: ((colKey: string, direction: "asc" | "desc") => any) | undefined;
+    onDelete?: ((colKey: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onRename?: ((colKey: string, newName: string) => any) | undefined;
+    "onChange-type"?: ((colKey: string, newType: FieldType) => any) | undefined;
+    onHide?: ((colKey: string) => any) | undefined;
+    onDuplicate?: ((colKey: string) => any) | undefined;
+}>, {
+    deletable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    renameInput: HTMLInputElement;
+}, any>;
+export default _default;

package/dist/components/table/ColumnHeaderMenu.vue.js

@@ -0,0 +1,7 @@
+import o from "./ColumnHeaderMenu.vue2.js";
+/* empty css                      */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f6210323"]]);
+export {
+  a as default
+};

package/dist/components/table/ColumnHeaderMenu.vue2.js

@@ -0,0 +1,153 @@
+import { defineComponent as $, ref as y, computed as p, onMounted as w, nextTick as z, openBlock as a, createBlock as B, Teleport as L, createElementBlock as d, withModifiers as E, createElementVNode as l, normalizeStyle as S, withKeys as v, toDisplayString as N, createVNode as u, createCommentVNode as c, unref as r, Fragment as A } from "vue";
+import { ArrowUp as D, ArrowDown as M, EyeOff as P, Copy as V, Trash2 as F } from "lucide-vue-next";
+import I from "./FieldTypePicker.vue.js";
+const O = { class: "of-col-menu__section" }, H = ["value"], R = { class: "of-col-menu__item-value" }, U = {
+  key: 0,
+  class: "of-col-menu__sub"
+}, G = /* @__PURE__ */ $({
+  __name: "ColumnHeaderMenu",
+  props: {
+    colKey: {},
+    colLabel: {},
+    fieldType: {},
+    sortOrder: {},
+    visible: { type: Boolean },
+    x: {},
+    y: {},
+    deletable: { type: Boolean, default: !0 }
+  },
+  emits: ["close", "rename", "change-type", "sort", "hide", "delete", "duplicate"],
+  setup(s, { emit: b }) {
+    const i = s, t = b, f = y(null), m = y(!1), k = {
+      text: "文本",
+      number: "数字",
+      select: "单选",
+      multi_select: "多选",
+      date: "日期",
+      datetime: "日期时间",
+      checkbox: "复选框",
+      url: "链接",
+      email: "邮箱",
+      phone: "电话",
+      rating: "评分",
+      currency: "货币",
+      richtext: "富文本",
+      auto_number: "自动编号",
+      creator: "创建者",
+      progress: "进度",
+      relation: "关联",
+      attachment: "附件",
+      formula: "公式",
+      user: "用户"
+    }, C = p(() => k[i.fieldType ?? ""] ?? i.fieldType ?? "");
+    w(() => z(() => {
+      var o;
+      return (o = f.value) == null ? void 0 : o.select();
+    }));
+    function T(o) {
+      const n = o.target.value.trim();
+      n && n !== i.colLabel && t("rename", i.colKey, n), t("close");
+    }
+    function x(o) {
+      t("change-type", i.colKey, o), m.value = !1, t("close");
+    }
+    function K() {
+      t("delete", i.colKey), t("close");
+    }
+    const g = p(() => {
+      const o = {};
+      return o.left = `${i.x}px`, o.top = `${i.y}px`, o;
+    });
+    return (o, e) => (a(), B(L, { to: "body" }, [
+      s.visible ? (a(), d("div", {
+        key: 0,
+        class: "of-col-menu-overlay",
+        onClick: e[6] || (e[6] = E((n) => t("close"), ["self"]))
+      }, [
+        l("div", {
+          class: "of-col-menu",
+          style: S(g.value)
+        }, [
+          l("div", O, [
+            l("input", {
+              ref_key: "renameInput",
+              ref: f,
+              class: "of-col-menu__rename-input",
+              value: s.colLabel,
+              placeholder: "字段名称",
+              onKeydown: [
+                v(T, ["enter"]),
+                e[0] || (e[0] = v((n) => t("close"), ["escape"]))
+              ]
+            }, null, 40, H)
+          ]),
+          e[14] || (e[14] = l("div", { class: "of-col-menu__divider" }, null, -1)),
+          l("button", {
+            class: "of-col-menu__item",
+            onClick: e[1] || (e[1] = (n) => m.value = !m.value)
+          }, [
+            e[7] || (e[7] = l("span", null, "字段类型", -1)),
+            l("span", R, N(C.value), 1)
+          ]),
+          m.value ? (a(), d("div", U, [
+            u(I, {
+              "current-type": s.fieldType,
+              onSelect: x
+            }, null, 8, ["current-type"])
+          ])) : c("", !0),
+          e[15] || (e[15] = l("div", { class: "of-col-menu__divider" }, null, -1)),
+          l("button", {
+            class: "of-col-menu__item",
+            onClick: e[2] || (e[2] = (n) => {
+              t("sort", s.colKey, "asc"), t("close");
+            })
+          }, [
+            u(r(D), { size: 14 }),
+            e[8] || (e[8] = l("span", null, "升序排序", -1))
+          ]),
+          l("button", {
+            class: "of-col-menu__item",
+            onClick: e[3] || (e[3] = (n) => {
+              t("sort", s.colKey, "desc"), t("close");
+            })
+          }, [
+            u(r(M), { size: 14 }),
+            e[9] || (e[9] = l("span", null, "降序排序", -1))
+          ]),
+          e[16] || (e[16] = l("div", { class: "of-col-menu__divider" }, null, -1)),
+          l("button", {
+            class: "of-col-menu__item",
+            onClick: e[4] || (e[4] = (n) => {
+              t("hide", s.colKey), t("close");
+            })
+          }, [
+            u(r(P), { size: 14 }),
+            e[10] || (e[10] = l("span", null, "隐藏列", -1))
+          ]),
+          l("button", {
+            class: "of-col-menu__item",
+            onClick: e[5] || (e[5] = (n) => {
+              t("duplicate", s.colKey), t("close");
+            })
+          }, [
+            u(r(V), { size: 14 }),
+            e[11] || (e[11] = l("span", null, "复制列", -1))
+          ]),
+          s.deletable ? (a(), d(A, { key: 1 }, [
+            e[13] || (e[13] = l("div", { class: "of-col-menu__divider" }, null, -1)),
+            l("button", {
+              class: "of-col-menu__item of-col-menu__item--danger",
+              onClick: K
+            }, [
+              u(r(F), { size: 14 }),
+              e[12] || (e[12] = l("span", null, "删除列", -1))
+            ])
+          ], 64)) : c("", !0)
+        ], 4)
+      ])) : c("", !0)
+    ]));
+  }
+});
+export {
+  G as default
+};