@oneflowui/ui 0.6.0 → 0.8.0

package/dist/components/Dashboard/index.vue.d.ts

@@ -20,5 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     columns: number;
     gap: number;
     widgets: DashboardWidget[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dashboardRef: HTMLElement;
+}, HTMLElement>;
 export default _default;

package/dist/components/Dashboard/index.vue.js

@@ -1,7 +1,7 @@
 import o from "./index.vue2.js";
 /* empty css           */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-16196679"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-eff3b1be"]]);
 export {
-  _ as default
+  m as default
 };

package/dist/components/Dashboard/index.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as m, defineAsyncComponent as t, computed as s, openBlock as o, createElementBlock as r, createElementVNode as n, toDisplayString as u, normalizeStyle as i, Fragment as f, renderList as b, createBlock as y, resolveDynamicComponent as _, mergeProps as h } from "vue";
-const g = { class: "of-dashboard" }, S = { class: "of-dashboard__header" }, v = { class: "of-dashboard__title" }, C = /* @__PURE__ */ m({
+import { defineComponent as M, defineAsyncComponent as o, ref as h, computed as s, onMounted as k, onBeforeUnmount as w, openBlock as d, createElementBlock as u, createElementVNode as c, toDisplayString as D, normalizeStyle as b, Fragment as R, renderList as x, createBlock as C, resolveDynamicComponent as B, mergeProps as E } from "vue";
+const F = { class: "of-dashboard__header" }, T = { class: "of-dashboard__title" }, I = /* @__PURE__ */ M({
   __name: "index",
   props: {
     title: { default: "Dashboard" },
@@ -7,17 +7,45 @@ const g = { class: "of-dashboard" }, S = { class: "of-dashboard__header" }, v =
     columns: { default: 4 },
     gap: { default: 16 }
   },
-  setup(l) {
-    const a = l, d = {
-      bar: t(() => import("./charts/BarChart.vue.js")),
-      pie: t(() => import("./charts/PieChart.vue.js")),
-      doughnut: t(() => import("./charts/DoughnutChart.vue2.js")),
-      "number-card": t(() => import("./charts/NumberCard.vue.js")),
-      table: t(() => import("./charts/TableChart.vue.js"))
-    }, c = s(() => ({
-      gridTemplateColumns: `repeat(${a.columns}, minmax(0, 1fr))`,
-      gap: `${a.gap}px`
-    })), p = s(() => a.widgets.length > 0 ? a.widgets : [
+  setup(p) {
+    const r = p, v = {
+      bar: o(() => import("./charts/BarChart.vue.js")),
+      pie: o(() => import("./charts/PieChart.vue.js")),
+      doughnut: o(() => import("./charts/DoughnutChart.vue2.js")),
+      "number-card": o(() => import("./charts/NumberCard.vue.js")),
+      table: o(() => import("./charts/TableChart.vue.js"))
+    }, l = h(null), i = h(0);
+    let a = null;
+    const y = s(() => Math.max(1, Math.floor(r.columns))), m = s(() => {
+      const e = i.value, t = y.value;
+      return e ? e < 560 ? 1 : e < 840 ? Math.min(t, 2) : e < 1120 ? Math.min(t, 3) : t : t;
+    }), g = s(() => ({
+      "--dashboard-columns": String(m.value),
+      gap: `${r.gap}px`
+    }));
+    function f(e) {
+      var t;
+      if (e) {
+        i.value = Math.round(e.contentRect.width);
+        return;
+      }
+      i.value = Math.round(((t = l.value) == null ? void 0 : t.getBoundingClientRect().width) ?? 0);
+    }
+    k(() => {
+      f(), !(typeof ResizeObserver > "u" || !l.value) && (a = new ResizeObserver((e) => {
+        e[0] && f(e[0]);
+      }), a.observe(l.value));
+    }), w(() => {
+      a == null || a.disconnect(), a = null;
+    });
+    function _(e) {
+      const t = m.value;
+      return {
+        gridColumn: `span ${Math.min(e.colSpan ?? 1, t)}`,
+        gridRow: `span ${e.rowSpan ?? 1}`
+      };
+    }
+    const S = s(() => r.widgets.length > 0 ? r.widgets : [
       {
         id: "metric-1",
         type: "number-card",
@@ -69,31 +97,32 @@ const g = { class: "of-dashboard" }, S = { class: "of-dashboard__header" }, v =
         colSpan: 4
       }
     ]);
-    return (k, D) => (o(), r("section", g, [
-      n("header", S, [
-        n("h3", v, u(l.title), 1)
+    return (e, t) => (d(), u("section", {
+      ref_key: "dashboardRef",
+      ref: l,
+      class: "of-dashboard"
+    }, [
+      c("header", F, [
+        c("h3", T, D(p.title), 1)
       ]),
-      n("div", {
+      c("div", {
         class: "of-dashboard__grid",
-        style: i(c.value)
+        style: b(g.value)
       }, [
-        (o(!0), r(f, null, b(p.value, (e) => (o(), r("article", {
-          key: e.id,
+        (d(!0), u(R, null, x(S.value, (n) => (d(), u("article", {
+          key: n.id,
           class: "of-dashboard__item",
-          style: i({
-            gridColumn: `span ${e.colSpan ?? 1}`,
-            gridRow: `span ${e.rowSpan ?? 1}`
-          })
+          style: b(_(n))
         }, [
-          (o(), y(_(d[e.type]), h({
-            title: e.title,
-            data: e.data
-          }, { ref_for: !0 }, e.config ?? {}), null, 16, ["title", "data"]))
+          (d(), C(B(v[n.type]), E({
+            title: n.title,
+            data: n.data
+          }, { ref_for: !0 }, n.config ?? {}), null, 16, ["title", "data"]))
         ], 4))), 128))
       ], 4)
-    ]));
+    ], 512));
   }
 });
 export {
-  C as default
+  I as default
 };

package/dist/components/database/DatabaseView.vue.js

@@ -1,7 +1,7 @@
-import a from "./DatabaseView.vue2.js";
+import o from "./DatabaseView.vue2.js";
 /* empty css                  */
-import o from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ o(a, [["__scopeId", "data-v-da61dfa4"]]);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1e404627"]]);
 export {
-  f as default
+  m as default
 };