@gspa/ui 0.1.1 → 0.1.4

package/dist/components/charts/StackedBarChart.js

@@ -0,0 +1,348 @@
+import { ref as M, computed as c, onMounted as Z, onBeforeUnmount as _, createElementBlock as a, openBlock as s, createCommentVNode as v, createElementVNode as i, Fragment as b, renderList as x, normalizeStyle as z, toDisplayString as f, normalizeClass as $ } from "vue";
+const I = {
+  key: 0,
+  class: "absolute top-3 left-3 z-10 ui-surface border ui-border-strong rounded-md px-2.5 py-2"
+}, ee = { class: "flex items-center gap-3 flex-wrap" }, te = { class: "text-xs font-semibold ui-text" }, le = ["width", "height", "viewBox"], oe = { key: 0 }, ae = ["x1", "y1", "x2", "y2", "stroke"], se = ["id"], ne = ["stop-color"], re = ["stop-color"], ie = ["x", "y", "width", "height", "fill", "onMouseenter", "onClick"], ue = ["to", "begin"], de = ["from", "to", "begin"], ce = { key: 0 }, he = ["x", "y"], ge = { key: 1 }, fe = ["x", "y"], ye = { key: 2 }, ve = ["x", "y"], be = { key: 3 }, xe = ["x", "y"], me = { key: 4 }, pe = ["x", "y"], we = ["x1", "y1", "x2", "y2"], ke = ["x1", "y1", "x2", "y2"], Le = { class: "ui-surface ui-text px-4 py-3 rounded-lg shadow-2xl border ui-border-strong min-w-[180px]" }, $e = { class: "flex items-center gap-2 mb-2" }, Be = { class: "font-semibold text-sm" }, Se = { class: "ml-5" }, Ae = { class: "text-xs ui-text mb-1" }, Ce = { class: "text-2xl font-bold" }, Ve = {
+  __name: "StackedBarChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+      // Expected format: [{ complied: 60, uncomplied: 40 }, ...]
+    },
+    labels: {
+      type: Array,
+      default: () => []
+    },
+    colors: {
+      type: Array,
+      default: () => ["#f97316", "#10b981"]
+      // [complied color, uncomplied color]
+    },
+    groupKeys: {
+      type: Array,
+      default: () => ["complied", "uncomplied"]
+      // Left to right order
+    },
+    width: {
+      type: [Number, String],
+      default: "auto"
+    },
+    height: {
+      type: [Number, String],
+      default: "auto"
+    },
+    padding: {
+      type: Object,
+      default: () => ({ top: 20, right: 20, bottom: 60, left: 60 })
+    },
+    showGrid: {
+      type: Boolean,
+      default: !0
+    },
+    showXAxis: {
+      type: Boolean,
+      default: !0
+    },
+    showYAxis: {
+      type: Boolean,
+      default: !0
+    },
+    gridColor: {
+      type: String,
+      default: "#e5e7eb"
+    },
+    barClasses: {
+      type: String,
+      default: "transition-all duration-200 hover:opacity-90 cursor-pointer"
+    },
+    axisLabelClasses: {
+      type: String,
+      default: "fill-(--ui-text) text-xs font-medium"
+    },
+    maxValue: {
+      type: Number,
+      default: 100
+      // Default for percentages
+    },
+    xAxisLabel: {
+      type: String,
+      default: ""
+    },
+    yAxisLabel: {
+      type: String,
+      default: ""
+    },
+    showValues: {
+      type: Boolean,
+      default: !0
+    },
+    valueSuffix: {
+      type: String,
+      default: ""
+    },
+    showLegend: {
+      type: Boolean,
+      default: !0
+    },
+    legendLabels: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["bar-click", "bar-hover"],
+  setup(t, { emit: W }) {
+    const o = t, K = W, B = M(null), m = M({ width: 0, height: 0 });
+    let k = null;
+    const p = c(() => {
+      const e = Number(o.width);
+      return Number.isFinite(e) && e > 0 ? e : m.value.width > 0 ? m.value.width : 400;
+    }), h = c(() => {
+      const e = Number(o.height);
+      return Number.isFinite(e) && e > 0 ? e : m.value.height > 0 ? m.value.height : 300;
+    }), g = M({
+      visible: !1,
+      x: 0,
+      y: 0,
+      label: "",
+      barLabel: "",
+      value: 0,
+      color: ""
+    }), y = c(() => h.value - o.padding.top - o.padding.bottom), S = c(() => p.value - o.padding.left - o.padding.right), A = c(() => S.value / o.data.length * 0.8), X = c(() => S.value / o.data.length * 0.2), C = c(() => A.value / o.groupKeys.length), F = c(() => 0), G = c(() => {
+      const e = [];
+      for (let l = 0; l <= 5; l++) {
+        const r = o.padding.top + y.value / 5 * l;
+        e.push(r);
+      }
+      return e;
+    }), Y = (e) => o.padding.left + e * (A.value + X.value) + X.value / 2, E = (e, n) => Y(e) + n * (C.value + F.value), N = (e) => {
+      const n = y.value / o.maxValue;
+      return o.padding.top + y.value - e * n;
+    }, R = (e) => {
+      const n = y.value / o.maxValue;
+      return e * n;
+    }, L = (e) => o.colors[e % o.colors.length], H = (e) => (Number(e) || 0) <= 0 ? o.padding.top + y.value - 6 : Math.max(N(e) + 18, o.padding.top + 16), O = (e) => (Number(e) || 0) <= 0 ? "fill-(--ui-text) text-[10px] font-semibold" : "fill-white text-[10px] font-semibold", U = (e) => {
+      const n = (h.value - o.padding.bottom - e) / y.value * o.maxValue;
+      return V(Math.round(n));
+    }, T = (e) => e.charAt(0).toUpperCase() + e.slice(1), j = c(() => o.valueSuffix ? o.valueSuffix : String(o.yAxisLabel || "").includes("%") || o.maxValue === 100 ? "%" : ""), V = (e) => `${e}${j.value}`, q = c(() => o.groupKeys.map((e, n) => ({
+      key: e,
+      color: L(n),
+      label: o.legendLabels[n] || T(e)
+    }))), D = (e, n, l) => {
+      const r = o.data[n], d = o.groupKeys[l], u = r[d] || 0, w = o.labels[n] || `Item ${n + 1}`, Q = T(d);
+      g.value = {
+        visible: !0,
+        x: e.clientX,
+        y: e.clientY,
+        label: w,
+        barLabel: Q,
+        value: u,
+        color: L(l)
+      }, K("bar-hover", { dataIndex: n, barIndex: l, key: d, value: u, label: w });
+    }, J = () => {
+      g.value.visible = !1;
+    }, P = (e, n) => {
+      const l = o.data[e], r = o.groupKeys[n], d = l[r] || 0, u = o.labels[e] || `Item ${e + 1}`;
+      K("bar-click", { dataIndex: e, barIndex: n, key: r, value: d, label: u });
+    };
+    return Z(() => {
+      k = new ResizeObserver((e) => {
+        const n = e[0];
+        if (!n) return;
+        const { width: l, height: r } = n.contentRect;
+        m.value = {
+          width: Math.round(l),
+          height: Math.round(r)
+        };
+      }), B.value && k.observe(B.value);
+    }), _(() => {
+      k && k.disconnect();
+    }), (e, n) => (s(), a("div", {
+      ref_key: "containerRef",
+      ref: B,
+      class: "w-full h-full relative"
+    }, [
+      t.showLegend ? (s(), a("div", I, [
+        i("div", ee, [
+          (s(!0), a(b, null, x(q.value, (l) => (s(), a("div", {
+            key: `legend-${l.key}`,
+            class: "flex items-center gap-1.5"
+          }, [
+            i("span", {
+              class: "w-2.5 h-2.5 rounded-sm",
+              style: z({ backgroundColor: l.color })
+            }, null, 4),
+            i("span", te, f(l.label), 1)
+          ]))), 128))
+        ])
+      ])) : v("", !0),
+      (s(), a("svg", {
+        width: p.value,
+        height: h.value,
+        viewBox: `0 0 ${p.value} ${h.value}`,
+        class: "overflow-visible"
+      }, [
+        t.showGrid ? (s(), a("g", oe, [
+          (s(!0), a(b, null, x(G.value, (l) => (s(), a("line", {
+            key: `grid-${l}`,
+            x1: t.padding.left,
+            y1: l,
+            x2: p.value - t.padding.right,
+            y2: l,
+            stroke: t.gridColor,
+            "stroke-width": "1",
+            "stroke-dasharray": "4,4",
+            opacity: "0.3"
+          }, null, 8, ae))), 128))
+        ])) : v("", !0),
+        i("defs", null, [
+          (s(!0), a(b, null, x(t.groupKeys, (l, r) => (s(), a("linearGradient", {
+            id: `barGradient-${r}`,
+            key: `gradient-${r}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%"
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": L(r),
+              "stop-opacity": "0.95"
+            }, null, 8, ne),
+            i("stop", {
+              offset: "100%",
+              "stop-color": L(r),
+              "stop-opacity": "0.85"
+            }, null, 8, re)
+          ], 8, se))), 128))
+        ]),
+        i("g", null, [
+          (s(!0), a(b, null, x(t.data, (l, r) => (s(), a("g", {
+            key: `bar-group-${r}`
+          }, [
+            (s(!0), a(b, null, x(t.groupKeys, (d, u) => (s(), a("rect", {
+              key: `bar-${r}-${u}`,
+              x: E(r, u),
+              y: N(l[d] || 0),
+              width: C.value,
+              height: R(l[d] || 0),
+              fill: `url(#barGradient-${u})`,
+              class: $(t.barClasses),
+              rx: "4",
+              onMouseenter: (w) => D(w, r, u),
+              onMouseleave: J,
+              onClick: (w) => P(r, u)
+            }, [
+              i("animate", {
+                attributeName: "height",
+                from: 0,
+                to: R(l[d] || 0),
+                dur: "0.6s",
+                begin: `${u * 0.1}s`,
+                fill: "freeze"
+              }, null, 8, ue),
+              i("animate", {
+                attributeName: "y",
+                from: t.padding.top + y.value,
+                to: N(l[d] || 0),
+                dur: "0.6s",
+                begin: `${u * 0.1}s`,
+                fill: "freeze"
+              }, null, 8, de)
+            ], 42, ie))), 128)),
+            t.showValues ? (s(), a("g", ce, [
+              (s(!0), a(b, null, x(t.groupKeys, (d, u) => (s(), a("text", {
+                key: `bar-value-${r}-${u}`,
+                x: E(r, u) + C.value / 2,
+                y: H(l[d] || 0),
+                class: $(O(l[d] || 0)),
+                "text-anchor": "middle"
+              }, f(V(l[d] || 0)), 11, he))), 128))
+            ])) : v("", !0)
+          ]))), 128))
+        ]),
+        t.showXAxis ? (s(), a("g", ge, [
+          (s(!0), a(b, null, x(t.labels, (l, r) => (s(), a("text", {
+            key: `xlabel-${r}`,
+            x: Y(r) + A.value / 2,
+            y: h.value - t.padding.bottom + 20,
+            class: $(t.axisLabelClasses),
+            "text-anchor": "middle"
+          }, f(l), 11, fe))), 128))
+        ])) : v("", !0),
+        t.xAxisLabel ? (s(), a("g", ye, [
+          i("text", {
+            x: t.padding.left + S.value / 2,
+            y: h.value - 10,
+            class: "fill-(--ui-text) text-sm font-semibold",
+            "text-anchor": "middle"
+          }, f(t.xAxisLabel), 9, ve)
+        ])) : v("", !0),
+        t.showYAxis ? (s(), a("g", be, [
+          (s(!0), a(b, null, x(G.value, (l) => (s(), a("text", {
+            key: `ylabel-${l}`,
+            x: t.padding.left - 10,
+            y: l + 4,
+            class: $(t.axisLabelClasses),
+            "text-anchor": "end"
+          }, f(U(l)), 11, xe))), 128))
+        ])) : v("", !0),
+        t.yAxisLabel ? (s(), a("g", me, [
+          i("text", {
+            x: -(t.padding.top + y.value / 2),
+            y: t.padding.left - 40,
+            class: "fill-(--ui-text) text-sm font-semibold",
+            "text-anchor": "middle",
+            transform: "rotate(-90)"
+          }, f(t.yAxisLabel), 9, pe)
+        ])) : v("", !0),
+        i("line", {
+          x1: t.padding.left,
+          y1: t.padding.top,
+          x2: t.padding.left,
+          y2: h.value - t.padding.bottom,
+          stroke: "#cbd5e1",
+          "stroke-width": "2"
+        }, null, 8, we),
+        i("line", {
+          x1: t.padding.left,
+          y1: h.value - t.padding.bottom,
+          x2: p.value - t.padding.right,
+          y2: h.value - t.padding.bottom,
+          stroke: "#cbd5e1",
+          "stroke-width": "2"
+        }, null, 8, ke)
+      ], 8, le)),
+      g.value.visible ? (s(), a("div", {
+        key: 1,
+        style: z({
+          position: "fixed",
+          left: `${g.value.x}px`,
+          top: `${g.value.y}px`,
+          transform: "translate(-50%, -120%)",
+          pointerEvents: "none",
+          zIndex: 9999
+        }),
+        class: "animate-in fade-in duration-200"
+      }, [
+        i("div", Le, [
+          i("div", $e, [
+            i("div", {
+              style: z({ backgroundColor: g.value.color }),
+              class: "w-3 h-3 rounded shadow-sm"
+            }, null, 4),
+            i("p", Be, f(g.value.label), 1)
+          ]),
+          i("div", Se, [
+            i("p", Ae, f(g.value.barLabel), 1),
+            i("span", Ce, f(V(g.value.value)), 1)
+          ]),
+          n[0] || (n[0] = i("div", { class: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 ui-surface border-r border-b ui-border-strong" }, null, -1))
+        ])
+      ], 4)) : v("", !0)
+    ], 512));
+  }
+};
+export {
+  Ve as default
+};

package/dist/components/widgets/DashboardWidget.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h=require("../Icon.cjs"),O=require("../Loader.cjs"),L=require("../charts/BarChart.cjs"),_=require("../charts/LineChart.cjs"),C=require("../charts/PieChart.cjs"),P=require("../../utils/cn.cjs"),A={key:0,class:"flex bg-(--ui-surface) items-center justify-between px-6 py-4 border-b ui-border-strong shrink-0"},F={class:"flex items-center gap-3"},K={class:"font-semibold text-lg ui-text"},M={class:"flex items-center gap-2"},W=["disabled"],I={key:1,class:"absolute top-16 right-4 z-20 ui-surface rounded-lg shadow-xl border ui-border-strong p-4 min-w-[250px]"},X={class:"flex items-center justify-between mb-3"},Y={class:"space-y-3"},G=["for"],U=["id","onClick"],J={key:2,class:"absolute top-16 right-4 z-20 ui-surface rounded-lg shadow-xl border ui-border-strong p-4 min-w-[280px]"},Q={class:"flex items-center justify-between mb-3"},Z={class:"space-y-2"},ee={class:"ui-text"},te={class:"px-2 py-1 ui-surface-muted border ui-border-strong rounded text-xs font-mono"},ae={class:"relative flex-1 overflow-hidden"},oe={key:0,class:"absolute inset-0 bg-[color:color-mix(in oklab, var(--ui-surface), transparent 10%)] backdrop-blur-sm z-10 flex items-center justify-center"},ne={class:"w-full h-full flex items-center justify-center"},re={key:3,class:"border-t ui-border-strong px-6 py-3 ui-surface-muted shrink-0"},le={__name:"DashboardWidget",props:{id:{type:String,required:!0},title:{type:String,required:!0},icon:{type:String,default:null},requiredRoles:{type:Function,default:null},loading:{type:Boolean,default:!1},height:{type:String,default:"auto"},maxHeight:{type:String,default:"none"},minHeight:{type:String,default:"200px"},width:{type:String,default:"100%"},showRefresh:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},padding:{type:String,default:"normal"},hasRole:{type:Function,default:()=>()=>!1},chartType:{type:String,default:null},chartData:{type:Object,default:null},chartOptions:{type:Object,default:()=>({})},customizationOptions:{type:Array,default:()=>[]}},emits:["refresh","dragstart","dragend","customize","keypress"],setup(l,{emit:E}){const a=l,c=E,N=e.computed(()=>a.requiredRoles?a.requiredRoles(a.hasRole):!0),B=e.computed(()=>({width:a.width,height:a.height!=="auto"?a.height:void 0,maxHeight:a.maxHeight!=="none"?a.maxHeight:void 0,minHeight:a.minHeight})),y={none:"",small:"p-3",normal:"p-4",large:"p-6"},u=e.ref(!1),r=e.ref({});e.onMounted(()=>{a.customizationOptions.forEach(t=>{r.value[t.id]=t.default??!0})});const g=()=>{u.value=!u.value},V=(t,o)=>{r.value[t]=o,c("customize",{...r.value})},D=e.ref(null),m=e.ref(!1),b=t=>{if(!m.value)return;const o={r:()=>c("refresh"),R:()=>c("refresh"),c:()=>g(),C:()=>g(),Escape:()=>u.value=!1,h:()=>i.value=!i.value,H:()=>i.value=!i.value,"?":()=>i.value=!i.value};o[t.key]&&(t.preventDefault(),o[t.key](),c("keypress",t.key))},S=()=>{m.value=!0},z=()=>{m.value=!1},i=e.ref(!1),$=[{key:"R",description:"Refresh widget"},{key:"C",description:"Open customization"},{key:"Esc",description:"Close panels"},{key:"?",description:"Toggle help"}],p=e.ref(!1);let s=null;const R=t=>{if(!t.dataTransfer)return;p.value=!0,c("dragstart",a.id);const o=t.target.getBoundingClientRect();s=t.target.cloneNode(!0),Object.assign(s.style,{position:"fixed",width:`${o.width}px`,height:`${o.height}px`,pointerEvents:"none",opacity:"0.8",zIndex:"1000",left:`${t.clientX-o.width/2}px`,top:`${t.clientY-o.height/2}px`}),document.body.appendChild(s),t.dataTransfer.setDragImage(s,o.width/2,o.height/2),t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",a.id)},k=t=>{s&&t.clientX&&t.clientY&&(s.style.left=`${t.clientX-s.offsetWidth/2}px`,s.style.top=`${t.clientY-s.offsetHeight/2}px`)},H=()=>{p.value=!1,c("dragend",a.id),s&&(document.body.removeChild(s),s=null)},w=e.computed(()=>{if(!a.chartType||!a.chartData)return null;const t=a.chartData.datasets?.[0]?.data||a.chartData.data||[],o=a.chartData.labels||[],n=t.filter(f=>f!=null&&!isNaN(f));if(n.length===0)return null;const v=a.chartType==="pie"||a.chartType==="doughnut",j=v?450:400,q=v?450:400,d={data:n,labels:o.slice(0,n.length),width:j,height:q,seriesLabel:a.chartData.datasets?.[0]?.label||a.title,...a.chartOptions};if(r.value.legend!==void 0&&(d.showLegend=r.value.legend),r.value.grid!==void 0&&(d.showGrid=r.value.grid),r.value.values!==void 0&&(d.showValues=r.value.values),r.value.percentages!==void 0&&(d.showPercentages=r.value.percentages),r.value.points!==void 0&&(d.showPoints=r.value.points),r.value.fillArea!==void 0&&(d.fillArea=r.value.fillArea),a.chartData.datasets?.[0]?.backgroundColor){const f=a.chartData.datasets[0].backgroundColor;d.colors=Array.isArray(f)?f:[f]}return a.chartData.datasets?.[0]?.borderColor&&(d.lineColor=a.chartData.datasets[0].borderColor),d}),x=e.computed(()=>{switch(a.chartType){case"bar":return L.default;case"line":return _.default;case"pie":return C.default;case"doughnut":return C.default;default:return null}}),T=e.computed(()=>a.chartType==="doughnut");return e.onMounted(()=>{window.addEventListener("dragover",k),window.addEventListener("keydown",b)}),e.onUnmounted(()=>{window.removeEventListener("dragover",k),window.removeEventListener("keydown",b),s&&document.body.removeChild(s)}),(t,o)=>N.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"widgetRef",ref:D,draggable:"true",tabindex:"0",style:e.normalizeStyle(B.value),class:e.normalizeClass(e.unref(P.cn)(" rounded-xl border ui-border-strong overflow-hidden transition-all select-none flex flex-col relative","shadow-sm",p.value?"opacity-50 scale-95":"hover:shadow-lg cursor-move",m.value?"ring-2 ring-(--ui-primary) ring-offset-2":"")),onDragstart:R,onDragend:H,onFocus:S,onBlur:z},[l.showHeader?(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",F,[l.icon?(e.openBlock(),e.createBlock(h.default,{key:0,icon:l.icon,class:"w-5 h-5 ui-text"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("h3",K,e.toDisplayString(l.title),1)]),e.createElementVNode("div",M,[e.renderSlot(t.$slots,"header-actions"),e.createElementVNode("button",{class:"p-2 rounded-lg hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 20%)] transition-all duration-200 hover:scale-105 active:scale-95",title:"Keyboard shortcuts (?)",onClick:o[0]||(o[0]=n=>i.value=!i.value)},[e.createVNode(h.default,{icon:"circle-info",class:"w-4 h-4 ui-text"})]),l.customizationOptions.length>0?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["p-2 rounded-lg hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 20%)] transition-all duration-200 hover:scale-105 active:scale-95",{"ui-primary-soft":u.value}]),title:"Customize (C)",onClick:g},[e.createVNode(h.default,{icon:"gear",class:"w-4 h-4 ui-text"})],2)):e.createCommentVNode("",!0),l.showRefresh?(e.openBlock(),e.createElementBlock("button",{key:1,class:"p-2 rounded-lg hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 20%)] transition-all duration-200 hover:scale-105 active:scale-95",disabled:l.loading,title:"Refresh (R)",onClick:o[1]||(o[1]=n=>t.$emit("refresh"))},[e.createVNode(h.default,{icon:"refresh",class:e.normalizeClass(["w-4 h-4 ui-text transition-transform duration-500",{"animate-spin":l.loading}])},null,8,["class"])],8,W)):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),u.value?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("div",X,[o[4]||(o[4]=e.createElementVNode("h4",{class:"font-semibold text-sm ui-text"}," Customize Widget ",-1)),e.createElementVNode("button",{class:"p-1 rounded hover:bg-(--ui-surface)",onClick:o[2]||(o[2]=n=>u.value=!1)},[e.createVNode(h.default,{icon:"x",class:"w-4 h-4 ui-text"})])]),e.createElementVNode("div",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.customizationOptions,n=>(e.openBlock(),e.createElementBlock("div",{key:n.id,class:"flex items-center justify-between"},[e.createElementVNode("label",{for:`setting-${n.id}`,class:"text-sm ui-text cursor-pointer"},e.toDisplayString(n.label),9,G),e.createElementVNode("button",{id:`setting-${n.id}`,class:e.normalizeClass(["relative inline-flex h-6 w-11 items-center rounded-full transition-colors",r.value[n.id]?"ui-primary":"ui-surface"]),onClick:v=>V(n.id,!r.value[n.id])},[e.createElementVNode("span",{class:e.normalizeClass(["inline-block h-4 w-4 transform rounded-full ui-surface transition-transform",r.value[n.id]?"translate-x-6":"translate-x-1"])},null,2)],10,U)]))),128))])])):e.createCommentVNode("",!0),i.value?(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",Q,[o[5]||(o[5]=e.createElementVNode("h4",{class:"font-semibold text-sm ui-text"}," Keyboard Shortcuts ",-1)),e.createElementVNode("button",{class:"p-1 rounded hover:bg-(--ui-surface)",onClick:o[3]||(o[3]=n=>i.value=!1)},[e.createVNode(h.default,{icon:"x",class:"w-4 h-4 ui-text"})])]),e.createElementVNode("div",Z,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList($,n=>e.createElementVNode("div",{key:n.key,class:"flex items-center justify-between text-sm"},[e.createElementVNode("span",ee,e.toDisplayString(n.description),1),e.createElementVNode("kbd",te,e.toDisplayString(n.key),1)])),64))])])):e.createCommentVNode("",!0),e.createElementVNode("div",ae,[l.loading?(e.openBlock(),e.createElementBlock("div",oe,[e.createVNode(O.default,{type:"spin",size:"medium",color:"#3b82f6"})])):e.createCommentVNode("",!0),l.chartType&&l.chartData&&x.value&&w.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["w-full h-full flex items-center justify-center p-4",y[l.padding]])},[e.createElementVNode("div",ne,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x.value),e.mergeProps(w.value,{doughnut:T.value}),null,16,["doughnut"]))])],2)):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["overflow-auto h-full",y[l.padding]])},[e.renderSlot(t.$slots,"default")],2))]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",re,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],38)):e.createCommentVNode("",!0)}};exports.default=le;

package/dist/components/widgets/DashboardWidget.js

@@ -0,0 +1,309 @@
+import { computed as w, ref as p, onMounted as E, onUnmounted as U, createElementBlock as u, createCommentVNode as f, openBlock as o, normalizeClass as h, normalizeStyle as J, unref as Q, createElementVNode as n, createBlock as O, toDisplayString as k, renderSlot as z, createVNode as y, Fragment as B, renderList as L, resolveDynamicComponent as Z, mergeProps as ee } from "vue";
+import b from "../Icon.js";
+import te from "../Loader.js";
+import ae from "../charts/BarChart.js";
+import se from "../charts/LineChart.js";
+import _ from "../charts/PieChart.js";
+import { cn as ne } from "../../utils/cn.js";
+const re = {
+  key: 0,
+  class: "flex bg-(--ui-surface) items-center justify-between px-6 py-4 border-b ui-border-strong shrink-0"
+}, ie = { class: "flex items-center gap-3" }, oe = { class: "font-semibold text-lg ui-text" }, le = { class: "flex items-center gap-2" }, ue = ["disabled"], de = {
+  key: 1,
+  class: "absolute top-16 right-4 z-20 ui-surface rounded-lg shadow-xl border ui-border-strong p-4 min-w-[250px]"
+}, ce = { class: "flex items-center justify-between mb-3" }, fe = { class: "space-y-3" }, he = ["for"], ge = ["id", "onClick"], me = {
+  key: 2,
+  class: "absolute top-16 right-4 z-20 ui-surface rounded-lg shadow-xl border ui-border-strong p-4 min-w-[280px]"
+}, ve = { class: "flex items-center justify-between mb-3" }, pe = { class: "space-y-2" }, ye = { class: "ui-text" }, be = { class: "px-2 py-1 ui-surface-muted border ui-border-strong rounded text-xs font-mono" }, we = { class: "relative flex-1 overflow-hidden" }, xe = {
+  key: 0,
+  class: "absolute inset-0 bg-[color:color-mix(in oklab, var(--ui-surface), transparent 10%)] backdrop-blur-sm z-10 flex items-center justify-center"
+}, ke = { class: "w-full h-full flex items-center justify-center" }, Ce = {
+  key: 3,
+  class: "border-t ui-border-strong px-6 py-3 ui-surface-muted shrink-0"
+}, je = {
+  __name: "DashboardWidget",
+  props: {
+    id: { type: String, required: !0 },
+    title: { type: String, required: !0 },
+    icon: { type: String, default: null },
+    requiredRoles: { type: Function, default: null },
+    loading: { type: Boolean, default: !1 },
+    height: { type: String, default: "auto" },
+    maxHeight: { type: String, default: "none" },
+    minHeight: { type: String, default: "200px" },
+    width: { type: String, default: "100%" },
+    showRefresh: { type: Boolean, default: !0 },
+    showHeader: { type: Boolean, default: !0 },
+    padding: { type: String, default: "normal" },
+    hasRole: {
+      type: Function,
+      default: () => () => !1
+    },
+    chartType: { type: String, default: null },
+    chartData: { type: Object, default: null },
+    chartOptions: { type: Object, default: () => ({}) },
+    customizationOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["refresh", "dragstart", "dragend", "customize", "keypress"],
+  setup(i, { emit: A }) {
+    const t = i, g = A, F = w(() => t.requiredRoles ? t.requiredRoles(t.hasRole) : !0), N = w(() => ({
+      width: t.width,
+      height: t.height !== "auto" ? t.height : void 0,
+      maxHeight: t.maxHeight !== "none" ? t.maxHeight : void 0,
+      minHeight: t.minHeight
+    })), S = {
+      none: "",
+      small: "p-3",
+      normal: "p-4",
+      large: "p-6"
+    }, m = p(!1), r = p({});
+    E(() => {
+      t.customizationOptions.forEach((e) => {
+        r.value[e.id] = e.default ?? !0;
+      });
+    });
+    const C = () => {
+      m.value = !m.value;
+    }, P = (e, a) => {
+      r.value[e] = a, g("customize", { ...r.value });
+    }, q = p(null), x = p(!1), R = (e) => {
+      if (!x.value) return;
+      const a = {
+        r: () => g("refresh"),
+        R: () => g("refresh"),
+        c: () => C(),
+        C: () => C(),
+        Escape: () => m.value = !1,
+        h: () => d.value = !d.value,
+        H: () => d.value = !d.value,
+        "?": () => d.value = !d.value
+      };
+      a[e.key] && (e.preventDefault(), a[e.key](), g("keypress", e.key));
+    }, V = () => {
+      x.value = !0;
+    }, K = () => {
+      x.value = !1;
+    }, d = p(!1), W = [
+      { key: "R", description: "Refresh widget" },
+      { key: "C", description: "Open customization" },
+      { key: "Esc", description: "Close panels" },
+      { key: "?", description: "Toggle help" }
+    ], D = p(!1);
+    let l = null;
+    const X = (e) => {
+      if (!e.dataTransfer) return;
+      D.value = !0, g("dragstart", t.id);
+      const a = e.target.getBoundingClientRect();
+      l = e.target.cloneNode(!0), Object.assign(l.style, {
+        position: "fixed",
+        width: `${a.width}px`,
+        height: `${a.height}px`,
+        pointerEvents: "none",
+        opacity: "0.8",
+        zIndex: "1000",
+        left: `${e.clientX - a.width / 2}px`,
+        top: `${e.clientY - a.height / 2}px`
+      }), document.body.appendChild(l), e.dataTransfer.setDragImage(l, a.width / 2, a.height / 2), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t.id);
+    }, H = (e) => {
+      l && e.clientX && e.clientY && (l.style.left = `${e.clientX - l.offsetWidth / 2}px`, l.style.top = `${e.clientY - l.offsetHeight / 2}px`);
+    }, Y = () => {
+      D.value = !1, g("dragend", t.id), l && (document.body.removeChild(l), l = null);
+    }, T = w(() => {
+      if (!t.chartType || !t.chartData) return null;
+      const e = t.chartData.datasets?.[0]?.data || t.chartData.data || [], a = t.chartData.labels || [], s = e.filter((v) => v != null && !isNaN(v));
+      if (s.length === 0) return null;
+      const $ = t.chartType === "pie" || t.chartType === "doughnut", G = $ ? 450 : 400, M = $ ? 450 : 400, c = {
+        data: s,
+        labels: a.slice(0, s.length),
+        width: G,
+        height: M,
+        seriesLabel: t.chartData.datasets?.[0]?.label || t.title,
+        ...t.chartOptions
+      };
+      if (r.value.legend !== void 0 && (c.showLegend = r.value.legend), r.value.grid !== void 0 && (c.showGrid = r.value.grid), r.value.values !== void 0 && (c.showValues = r.value.values), r.value.percentages !== void 0 && (c.showPercentages = r.value.percentages), r.value.points !== void 0 && (c.showPoints = r.value.points), r.value.fillArea !== void 0 && (c.fillArea = r.value.fillArea), t.chartData.datasets?.[0]?.backgroundColor) {
+        const v = t.chartData.datasets[0].backgroundColor;
+        c.colors = Array.isArray(v) ? v : [v];
+      }
+      return t.chartData.datasets?.[0]?.borderColor && (c.lineColor = t.chartData.datasets[0].borderColor), c;
+    }), j = w(() => {
+      switch (t.chartType) {
+        case "bar":
+          return ae;
+        case "line":
+          return se;
+        case "pie":
+          return _;
+        case "doughnut":
+          return _;
+        default:
+          return null;
+      }
+    }), I = w(() => t.chartType === "doughnut");
+    return E(() => {
+      window.addEventListener("dragover", H), window.addEventListener("keydown", R);
+    }), U(() => {
+      window.removeEventListener("dragover", H), window.removeEventListener("keydown", R), l && document.body.removeChild(l);
+    }), (e, a) => F.value ? (o(), u("div", {
+      key: 0,
+      ref_key: "widgetRef",
+      ref: q,
+      draggable: "true",
+      tabindex: "0",
+      style: J(N.value),
+      class: h(Q(ne)(
+        " rounded-xl border ui-border-strong overflow-hidden transition-all select-none flex flex-col relative",
+        "shadow-sm",
+        D.value ? "opacity-50 scale-95" : "hover:shadow-lg cursor-move",
+        x.value ? "ring-2 ring-(--ui-primary) ring-offset-2" : ""
+      )),
+      onDragstart: X,
+      onDragend: Y,
+      onFocus: V,
+      onBlur: K
+    }, [
+      i.showHeader ? (o(), u("div", re, [
+        n("div", ie, [
+          i.icon ? (o(), O(b, {
+            key: 0,
+            icon: i.icon,
+            class: "w-5 h-5 ui-text"
+          }, null, 8, ["icon"])) : f("", !0),
+          n("h3", oe, k(i.title), 1)
+        ]),
+        n("div", le, [
+          z(e.$slots, "header-actions"),
+          n("button", {
+            class: "p-2 rounded-lg hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 20%)] transition-all duration-200 hover:scale-105 active:scale-95",
+            title: "Keyboard shortcuts (?)",
+            onClick: a[0] || (a[0] = (s) => d.value = !d.value)
+          }, [
+            y(b, {
+              icon: "circle-info",
+              class: "w-4 h-4 ui-text"
+            })
+          ]),
+          i.customizationOptions.length > 0 ? (o(), u("button", {
+            key: 0,
+            class: h(["p-2 rounded-lg hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 20%)] transition-all duration-200 hover:scale-105 active:scale-95", { "ui-primary-soft": m.value }]),
+            title: "Customize (C)",
+            onClick: C
+          }, [
+            y(b, {
+              icon: "gear",
+              class: "w-4 h-4 ui-text"
+            })
+          ], 2)) : f("", !0),
+          i.showRefresh ? (o(), u("button", {
+            key: 1,
+            class: "p-2 rounded-lg hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 20%)] transition-all duration-200 hover:scale-105 active:scale-95",
+            disabled: i.loading,
+            title: "Refresh (R)",
+            onClick: a[1] || (a[1] = (s) => e.$emit("refresh"))
+          }, [
+            y(b, {
+              icon: "refresh",
+              class: h([
+                "w-4 h-4 ui-text transition-transform duration-500",
+                { "animate-spin": i.loading }
+              ])
+            }, null, 8, ["class"])
+          ], 8, ue)) : f("", !0)
+        ])
+      ])) : f("", !0),
+      m.value ? (o(), u("div", de, [
+        n("div", ce, [
+          a[4] || (a[4] = n("h4", { class: "font-semibold text-sm ui-text" }, " Customize Widget ", -1)),
+          n("button", {
+            class: "p-1 rounded hover:bg-(--ui-surface)",
+            onClick: a[2] || (a[2] = (s) => m.value = !1)
+          }, [
+            y(b, {
+              icon: "x",
+              class: "w-4 h-4 ui-text"
+            })
+          ])
+        ]),
+        n("div", fe, [
+          (o(!0), u(B, null, L(i.customizationOptions, (s) => (o(), u("div", {
+            key: s.id,
+            class: "flex items-center justify-between"
+          }, [
+            n("label", {
+              for: `setting-${s.id}`,
+              class: "text-sm ui-text cursor-pointer"
+            }, k(s.label), 9, he),
+            n("button", {
+              id: `setting-${s.id}`,
+              class: h([
+                "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+                r.value[s.id] ? "ui-primary" : "ui-surface"
+              ]),
+              onClick: ($) => P(s.id, !r.value[s.id])
+            }, [
+              n("span", {
+                class: h([
+                  "inline-block h-4 w-4 transform rounded-full ui-surface transition-transform",
+                  r.value[s.id] ? "translate-x-6" : "translate-x-1"
+                ])
+              }, null, 2)
+            ], 10, ge)
+          ]))), 128))
+        ])
+      ])) : f("", !0),
+      d.value ? (o(), u("div", me, [
+        n("div", ve, [
+          a[5] || (a[5] = n("h4", { class: "font-semibold text-sm ui-text" }, " Keyboard Shortcuts ", -1)),
+          n("button", {
+            class: "p-1 rounded hover:bg-(--ui-surface)",
+            onClick: a[3] || (a[3] = (s) => d.value = !1)
+          }, [
+            y(b, {
+              icon: "x",
+              class: "w-4 h-4 ui-text"
+            })
+          ])
+        ]),
+        n("div", pe, [
+          (o(), u(B, null, L(W, (s) => n("div", {
+            key: s.key,
+            class: "flex items-center justify-between text-sm"
+          }, [
+            n("span", ye, k(s.description), 1),
+            n("kbd", be, k(s.key), 1)
+          ])), 64))
+        ])
+      ])) : f("", !0),
+      n("div", we, [
+        i.loading ? (o(), u("div", xe, [
+          y(te, {
+            type: "spin",
+            size: "medium",
+            color: "#3b82f6"
+          })
+        ])) : f("", !0),
+        i.chartType && i.chartData && j.value && T.value ? (o(), u("div", {
+          key: 1,
+          class: h(["w-full h-full flex items-center justify-center p-4", S[i.padding]])
+        }, [
+          n("div", ke, [
+            (o(), O(Z(j.value), ee(T.value, { doughnut: I.value }), null, 16, ["doughnut"]))
+          ])
+        ], 2)) : (o(), u("div", {
+          key: 2,
+          class: h(["overflow-auto h-full", S[i.padding]])
+        }, [
+          z(e.$slots, "default")
+        ], 2))
+      ]),
+      e.$slots.footer ? (o(), u("div", Ce, [
+        z(e.$slots, "footer")
+      ])) : f("", !0)
+    ], 38)) : f("", !0);
+  }
+};
+export {
+  je as default
+};