@oneflowui/ui 0.4.1 → 0.4.3

package/dist/composables/useTable.js

@@ -0,0 +1,115 @@
+import { shallowRef as U, ref as f, computed as d, readonly as v, triggerRef as z } from "vue";
+let b = !1;
+function j(u = {}) {
+  const i = U(u.data ?? []), g = f(!1), S = f(null), n = f(/* @__PURE__ */ new Set()), l = f({ field: null, order: null }), a = f({
+    page: 1,
+    pageSize: u.pageSize ?? 20,
+    total: (u.data ?? []).length
+  });
+  function D(e) {
+    l.value.field === e ? (l.value.order = l.value.order === "asc" ? "desc" : l.value.order === "desc" ? null : "asc", l.value.order === null && (l.value.field = null)) : (l.value.field = e, l.value.order = "asc"), a.value.page = 1, n.value.clear(), u.serverSide && o();
+  }
+  function R(e, t) {
+    l.value = { field: e, order: t }, a.value.page = 1, n.value.clear(), u.serverSide && o();
+  }
+  function M(e) {
+    if (!l.value.field || !l.value.order) return e;
+    const t = l.value.field, r = l.value.order;
+    return [...e].sort((K, O) => {
+      const s = K[t], c = O[t];
+      if (s == null && c == null) return 0;
+      if (s == null) return 1;
+      if (c == null) return -1;
+      if (typeof s == "number" && typeof c == "number")
+        return r === "asc" ? s - c : c - s;
+      const m = String(s), y = String(c);
+      return r === "asc" ? m.localeCompare(y) : y.localeCompare(m);
+    });
+  }
+  function P(e) {
+    a.value.page = Math.max(1, Math.min(e, w.value)), u.serverSide && o();
+  }
+  function x(e) {
+    a.value.pageSize = e, a.value.page = 1, u.serverSide && o();
+  }
+  const w = d(
+    () => Math.max(1, Math.ceil(a.value.total / a.value.pageSize))
+  ), h = d(() => {
+    if (u.serverSide) return i.value;
+    const e = M(i.value);
+    a.value.total = e.length;
+    const { page: t, pageSize: r } = a.value;
+    return e.slice((t - 1) * r, t * r);
+  });
+  function p(e, t) {
+    const r = e.id;
+    return r == null && !b && (b = !0, console.warn(
+      "[OneUI] DataTable: row is missing an `id` field. Row selection may behave incorrectly after sorting or filtering. Please ensure each row has a unique `id` property."
+    )), r ?? t;
+  }
+  function C(e, t) {
+    const r = p(e, t);
+    n.value.has(r) ? n.value.delete(r) : n.value.add(r);
+  }
+  function A(e) {
+    n.value.size === e.length ? n.value.clear() : e.forEach((t, r) => n.value.add(p(t, r)));
+  }
+  function F(e, t) {
+    return n.value.has(p(e, t));
+  }
+  function I() {
+    n.value.clear();
+  }
+  const T = d(() => n.value.size), k = d(
+    () => h.value.length > 0 && n.value.size === h.value.length
+  );
+  async function o() {
+    if (u.onFetch) {
+      g.value = !0, S.value = null;
+      try {
+        const e = await u.onFetch({
+          page: a.value.page,
+          pageSize: a.value.pageSize,
+          sort: l.value
+        });
+        i.value = e.data, z(i), a.value.total = e.total;
+      } catch (e) {
+        S.value = e;
+      } finally {
+        g.value = !1;
+      }
+    }
+  }
+  function q() {
+    u.serverSide ? o() : a.value.page = 1;
+  }
+  function E(e) {
+    i.value = e, z(i), a.value.page = 1, u.serverSide || (a.value.total = e.length);
+  }
+  return {
+    data: h,
+    rawData: v(i),
+    loading: v(g),
+    error: v(S),
+    sort: v(l),
+    pagination: v(a),
+    totalPages: w,
+    selectedRows: v(n),
+    selectedCount: T,
+    isAllSelected: k,
+    toggleSort: D,
+    setSort: R,
+    setPage: P,
+    setPageSize: x,
+    toggleRowSelection: C,
+    toggleSelectAll: A,
+    isRowSelected: F,
+    clearSelection: I,
+    refresh: q,
+    fetchData: o,
+    setData: E
+  };
+}
+export {
+  j as useTable
+};

package/dist/composables/useTableColumns.js

@@ -0,0 +1,24 @@
+import { computed as c } from "vue";
+import { DEFAULT_TABLE_COLUMNS as v } from "../constants/table.js";
+function d(e) {
+  return e.type === "number" || e.type === "date" ? e.type : e.type === "select" ? "status" : "string";
+}
+function f(e) {
+  return {
+    key: e.id,
+    label: e.name,
+    width: e.width,
+    type: d(e)
+  };
+}
+function T(e) {
+  return { columns: c(() => {
+    var u, t, i, n, r, s, m, a;
+    return (t = (u = e.columns) == null ? void 0 : u.value) != null && t.length ? e.columns.value : (r = (n = (i = e.schema) == null ? void 0 : i.value) == null ? void 0 : n.fields) != null && r.length ? ((a = (m = (s = e.view) == null ? void 0 : s.value) == null ? void 0 : m.visibleFields) != null && a.length ? e.schema.value.fields.filter(
+      (l) => e.view.value.visibleFields.includes(l.id)
+    ) : e.schema.value.fields).filter((l) => !l.hidden).map(f) : v;
+  }) };
+}
+export {
+  T as useTableColumns
+};

package/dist/composables/useTableData.js

@@ -0,0 +1,16 @@
+import { computed as d } from "vue";
+function n(t) {
+  return { rows: d(() => {
+    var a, r, u;
+    return (r = (a = t.records) == null ? void 0 : a.value) != null && r.length ? t.records.value.map((e) => ({
+      id: e.id,
+      ...e.fields,
+      createdAt: e.createdAt,
+      updatedAt: e.updatedAt,
+      __record: e
+    })) : ((u = t.tasks) == null ? void 0 : u.value) ?? [];
+  }) };
+}
+export {
+  n as useTableData
+};

package/dist/composables/useTableFilter.js

@@ -0,0 +1,97 @@
+import { shallowRef as m, ref as _, computed as p, readonly as g, triggerRef as o } from "vue";
+const h = [
+  { value: "contains", label: "包含" },
+  { value: "not_contains", label: "不包含" },
+  { value: "equals", label: "等于" },
+  { value: "not_equals", label: "不等于" },
+  { value: "starts_with", label: "开头是" },
+  { value: "ends_with", label: "结尾是" },
+  { value: "is_empty", label: "为空" },
+  { value: "is_not_empty", label: "不为空" }
+], y = [
+  { value: "equals", label: "等于" },
+  { value: "not_equals", label: "不等于" },
+  { value: "gt", label: "大于" },
+  { value: "gte", label: "大于等于" },
+  { value: "lt", label: "小于" },
+  { value: "lte", label: "小于等于" },
+  { value: "is_empty", label: "为空" },
+  { value: "is_not_empty", label: "不为空" }
+];
+function N() {
+  return Math.random().toString(36).slice(2, 8);
+}
+function w(n, e) {
+  const t = String(n ?? "").toLowerCase(), r = e.value.toLowerCase();
+  switch (e.operator) {
+    case "equals":
+      return t === r;
+    case "not_equals":
+      return t !== r;
+    case "contains":
+      return t.includes(r);
+    case "not_contains":
+      return !t.includes(r);
+    case "starts_with":
+      return t.startsWith(r);
+    case "ends_with":
+      return t.endsWith(r);
+    case "is_empty":
+      return t === "" || n == null;
+    case "is_not_empty":
+      return t !== "" && n != null;
+    case "gt":
+      return Number(n) > Number(e.value);
+    case "gte":
+      return Number(n) >= Number(e.value);
+    case "lt":
+      return Number(n) < Number(e.value);
+    case "lte":
+      return Number(n) <= Number(e.value);
+    default:
+      return !0;
+  }
+}
+function C(n = {}) {
+  const e = m([]), t = _("and"), r = p(() => e.value.length > 0);
+  function i(l) {
+    var u, a;
+    e.value.push({
+      id: N(),
+      field: l ?? ((a = (u = n.columns) == null ? void 0 : u[0]) == null ? void 0 : a.key) ?? "",
+      operator: "contains",
+      value: ""
+    }), o(e);
+  }
+  function c(l) {
+    e.value = e.value.filter((u) => u.id !== l), o(e);
+  }
+  function v(l, u) {
+    const a = e.value.findIndex((s) => s.id === l);
+    a !== -1 && (e.value[a] = { ...e.value[a], ...u }, o(e));
+  }
+  function b() {
+    e.value = [], o(e);
+  }
+  function d(l) {
+    return e.value.length ? l.filter((u) => {
+      const a = e.value.map((s) => s.field ? w(u[s.field], s) : !0);
+      return t.value === "and" ? a.every(Boolean) : a.some(Boolean);
+    }) : l;
+  }
+  const f = (l) => l === "number" ? y : h;
+  return {
+    conditions: g(e),
+    logic: t,
+    isActive: r,
+    addCondition: i,
+    removeCondition: c,
+    updateCondition: v,
+    clearConditions: b,
+    filterData: d,
+    operatorsFor: f
+  };
+}
+export {
+  C as useTableFilter
+};

package/dist/composables/useTableGroup.js

@@ -0,0 +1,46 @@
+import { ref as g, watch as w, computed as h } from "vue";
+function y(a) {
+  const u = g(/* @__PURE__ */ new Set());
+  function l(e) {
+    const t = new Set(u.value);
+    t.has(e) ? t.delete(e) : t.add(e), u.value = t;
+  }
+  w(a.groupBy, () => {
+    u.value = /* @__PURE__ */ new Set();
+  });
+  const d = h(() => {
+    const e = a.data.value, t = a.groupBy.value;
+    if (!t)
+      return e.map((o) => ({ ...o, __type: "data-row" }));
+    const c = [], s = /* @__PURE__ */ new Map();
+    for (const o of e) {
+      const n = o[t], r = n != null ? String(n) : "";
+      s.has(r) || (c.push(r), s.set(r, [])), s.get(r).push(o);
+    }
+    const p = [], _ = u.value;
+    for (const o of c) {
+      const n = s.get(o);
+      if (p.push({
+        __type: "group-header",
+        __groupKey: o,
+        __groupCount: n.length,
+        id: `__group__${o}`
+      }), !_.has(o))
+        for (const r of n)
+          p.push({ ...r, __type: "data-row" });
+    }
+    return p;
+  });
+  function f(e) {
+    return e && e.__type === "group-header";
+  }
+  return {
+    groupedItems: d,
+    collapsedGroups: u,
+    toggleGroup: l,
+    isGroupHeader: f
+  };
+}
+export {
+  y as useTableGroup
+};

package/dist/composables/useToast.js

@@ -0,0 +1,38 @@
+import { reactive as d } from "vue";
+const n = d([]);
+let s = 0;
+function u(t, e, r) {
+  const a = `toast-${Date.now()}-${s++}`, i = {
+    id: a,
+    type: t,
+    message: e,
+    title: r == null ? void 0 : r.title,
+    duration: (r == null ? void 0 : r.duration) ?? 3e3
+  };
+  return n.push(i), i.duration && i.duration > 0 && setTimeout(() => c(a), i.duration), a;
+}
+function c(t) {
+  const e = n.findIndex((r) => r.id === t);
+  e !== -1 && n.splice(e, 1);
+}
+function o() {
+  return {
+    /** 响应式 toast 列表 */
+    toasts: n,
+    /** 显示 info 类型通知 */
+    info: (t, e) => u("info", t, e),
+    /** 显示 success 类型通知 */
+    success: (t, e) => u("success", t, e),
+    /** 显示 warning 类型通知 */
+    warning: (t, e) => u("warning", t, e),
+    /** 显示 error 类型通知 */
+    error: (t, e) => u("error", t, e),
+    /** 移除指定 id 的 toast */
+    remove: c,
+    /** 清除所有 toast */
+    clear: () => n.splice(0, n.length)
+  };
+}
+export {
+  o as useToast
+};

package/dist/composables/useTypewriter.js

@@ -0,0 +1,56 @@
+import { ref as h, readonly as g } from "vue";
+function U(e = {}) {
+  const a = h(""), u = h(!1);
+  let f = "", r = 0, t = null, c = null;
+  const v = e.speed ?? 20;
+  function m() {
+    t !== null && (cancelAnimationFrame(t), t = null), c !== null && (clearTimeout(c), c = null);
+  }
+  function i() {
+    var l, n;
+    if (r >= f.length) {
+      u.value = !1, c = null, (l = e.onComplete) == null || l.call(e);
+      return;
+    }
+    a.value = f.slice(0, ++r), (n = e.onUpdate) == null || n.call(e, a.value), u.value && (c = setTimeout(i, v));
+  }
+  function x() {
+    if (typeof document < "u" && document.hidden) {
+      i();
+      return;
+    }
+    let l = 0;
+    function n(d) {
+      var T, y;
+      if (l || (l = d), d - l >= v) {
+        if (l = d, r >= f.length) {
+          u.value = !1, t = null, (T = e.onComplete) == null || T.call(e);
+          return;
+        }
+        a.value = f.slice(0, ++r), (y = e.onUpdate) == null || y.call(e, a.value);
+      }
+      u.value && (t = requestAnimationFrame(n));
+    }
+    t = requestAnimationFrame(n);
+  }
+  function A(l) {
+    f += l, u.value || (u.value = !0, x());
+  }
+  function C() {
+    m(), f = "", r = 0, a.value = "", u.value = !1;
+  }
+  function F() {
+    var l, n;
+    m(), a.value = f, r = f.length, u.value = !1, (l = e.onUpdate) == null || l.call(e, a.value), (n = e.onComplete) == null || n.call(e);
+  }
+  return {
+    displayText: g(a),
+    isTyping: g(u),
+    append: A,
+    reset: C,
+    flush: F
+  };
+}
+export {
+  U as useTypewriter
+};

package/dist/composables/useVirtualList.js

@@ -0,0 +1,117 @@
+import { ref as O, computed as f, watch as y, onUnmounted as U } from "vue";
+function j({
+  items: l,
+  itemHeight: i,
+  overscan: E = 5,
+  containerRef: F
+}) {
+  const o = O(0), s = O(0), h = typeof i == "number", v = Math.max(0, E);
+  let c = null, a = null;
+  const d = f(() => {
+    if (h) return [];
+    const t = new Array(l.value.length + 1).fill(0), n = i;
+    for (let e = 0; e < l.value.length; e += 1)
+      t[e + 1] = t[e] + Math.max(0, n(e));
+    return t;
+  }), M = f(() => h ? l.value.length * i : d.value[l.value.length] ?? 0);
+  function m(t) {
+    const n = Math.max(0, Math.min(t, l.value.length));
+    return h ? n * i : d.value[n] ?? 0;
+  }
+  function p(t) {
+    if (l.value.length === 0) return 0;
+    if (h) {
+      const u = i;
+      return Math.max(
+        0,
+        Math.min(l.value.length - 1, Math.floor(Math.max(0, t) / u))
+      );
+    }
+    const n = d.value;
+    let e = 0, r = l.value.length;
+    for (; e < r; ) {
+      const u = Math.floor((e + r) / 2);
+      n[u + 1] <= t ? e = u + 1 : r = u;
+    }
+    return Math.max(0, Math.min(e, l.value.length - 1));
+  }
+  const b = f(() => {
+    const t = l.value.length;
+    if (t === 0)
+      return { start: 0, end: 0 };
+    if (s.value <= 0)
+      return { start: 0, end: Math.min(t, v * 2 + 1) };
+    if (h) {
+      const x = i, C = Math.floor(o.value / x), B = Math.ceil(s.value / x), H = Math.max(0, C - v), A = Math.min(t, C + B + v);
+      return { start: H, end: A };
+    }
+    const n = Math.max(0, o.value), e = n + s.value, r = p(n), u = Math.min(t - 1, p(e));
+    return {
+      start: Math.max(0, r - v),
+      end: Math.min(t, u + v + 1)
+    };
+  }), L = f(() => m(b.value.start)), R = f(() => {
+    const { start: t, end: n } = b.value;
+    return l.value.slice(t, n).map((e, r) => ({
+      data: e,
+      index: t + r
+    }));
+  });
+  function g(t) {
+    if (!t) {
+      o.value = 0, s.value = 0;
+      return;
+    }
+    o.value = t.scrollTop, s.value = t.clientHeight;
+  }
+  function T() {
+    a && (o.value = a.scrollTop);
+  }
+  function w() {
+    c == null || c.disconnect(), c = null;
+  }
+  function I(t) {
+    t && t.removeEventListener("scroll", T);
+  }
+  function S(t) {
+    if (!t) {
+      a = null, g(null);
+      return;
+    }
+    a = t, t.addEventListener("scroll", T, { passive: !0 }), g(t), typeof ResizeObserver < "u" && (c = new ResizeObserver(() => {
+      g(t);
+    }), c.observe(t));
+  }
+  y(
+    F,
+    (t, n) => {
+      I(n), w(), S(t);
+    },
+    { immediate: !0 }
+  ), y(l, () => {
+    const t = Math.max(0, M.value - s.value);
+    o.value > t && (o.value = t, a && (a.scrollTop = t));
+  });
+  function V(t) {
+    if (!a || l.value.length === 0) return;
+    const n = Math.max(0, Math.min(t, l.value.length - 1)), e = m(n);
+    a.scrollTop = e, o.value = e;
+  }
+  function z() {
+    if (!a) return;
+    const t = Math.max(0, M.value - a.clientHeight);
+    a.scrollTop = t, o.value = t;
+  }
+  return U(() => {
+    I(a), w(), a = null;
+  }), {
+    visibleItems: R,
+    totalHeight: M,
+    offsetY: L,
+    scrollToIndex: V,
+    scrollToBottom: z
+  };
+}
+export {
+  j as useVirtualList
+};

package/dist/constants/table.js

@@ -0,0 +1,11 @@
+const l = [
+  { key: "id", label: "任务ID", width: 100, align: "left" },
+  { key: "title", label: "标题", width: "fill", minWidth: 220, align: "left" },
+  { key: "status", label: "状态", width: 90, align: "left" },
+  { key: "role", label: "负责角色", width: 90, align: "left" },
+  { key: "priority", label: "优先级", width: 70, align: "left" },
+  { key: "updatedAt", label: "更新时间", width: 100, align: "left" }
+];
+export {
+  l as DEFAULT_TABLE_COLUMNS
+};