@vc-shell/framework 1.2.4-beta.3 → 1.2.4-beta.4

package/dist/vendor-unovis-vue-C_K1g5KH.js

@@ -0,0 +1,446 @@
+import { getCurrentInstance as N, computed as h, camelize as A, defineComponent as v, toRefs as C, ref as d, reactive as T, watch as c, watchEffect as w, toRaw as f, onMounted as b, onUnmounted as y, provide as p, openBlock as m, createElementBlock as g, renderSlot as _, inject as F, nextTick as S } from "vue";
+import { i as z, X as E, S as R, A as W, C as P, G as $, L as K, D as O, T as H } from "./vendor-unovis-ts-Bue71Kwt.js";
+const k = Symbol("componentAccessorKey"), B = Symbol("tooltipAccessorKey"), M = Symbol("crosshairAccessorKey"), L = Symbol("axisAccessorKey"), j = Symbol("annotationsAccessorKey");
+function D(s, u) {
+  return z(s, u);
+}
+function x(s) {
+  const u = N(), i = u.attrs;
+  return h(() => {
+    const o = {}, l = u?.vnode.props ?? {};
+    return Object.keys(l).forEach((a) => {
+      o[A(a)] = s[A(a)];
+    }), { ...o, ...i };
+  });
+}
+const Z = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    components: {},
+    xScale: { type: [Object, Function] },
+    xDomain: {},
+    xDomainMinConstraint: {},
+    xDomainMaxConstraint: {},
+    xRange: {},
+    yScale: { type: [Object, Function] },
+    yDomain: {},
+    yDomainMinConstraint: {},
+    yDomainMaxConstraint: {},
+    yRange: {},
+    yDirection: {},
+    xAxis: {},
+    yAxis: {},
+    autoMargin: { type: Boolean },
+    tooltip: {},
+    crosshair: {},
+    preventEmptyDomain: { type: [Boolean, null] },
+    scaleByDomain: { type: Boolean },
+    annotations: {},
+    clipPathExtend: {},
+    duration: {},
+    margin: {},
+    padding: {},
+    sizing: {},
+    width: {},
+    height: {},
+    svgDefs: {},
+    ariaLabel: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = s, { data: o } = C(i), l = x(i), a = d(), t = T({
+      components: [],
+      annotations: void 0,
+      crosshair: void 0,
+      tooltip: void 0,
+      xAxis: void 0,
+      yAxis: void 0
+    }), e = d();
+    return c(o, () => {
+      a.value && a.value.setData(o.value, !0);
+    }), w(() => {
+      var n;
+      t.components.map((r) => r.config), (n = a.value) == null || n.updateContainer({ ...f(l.value), ...f(t) });
+    }), b(() => {
+      e.value && (a.value = new E(e.value, { ...f(t) }, o.value));
+    }), y(() => {
+      var n;
+      return (n = a.value) == null ? void 0 : n.destroy();
+    }), p(k, {
+      data: o,
+      update: (n) => t.components = [...t.components, n],
+      destroy: () => {
+        var n;
+        return t.components = (n = t.components) == null ? void 0 : n.filter((r) => !r.isDestroyed());
+      }
+    }), p(L, {
+      data: o,
+      update: (n) => t[`${n.config.type}Axis`] = n,
+      destroy: (n) => {
+        t[`${n}Axis`] = void 0;
+      }
+    }), p(M, {
+      data: o,
+      update: (n) => t.crosshair = n,
+      destroy: () => {
+        t.crosshair = void 0;
+      }
+    }), p(B, {
+      data: o,
+      update: (n) => t.tooltip = n,
+      destroy: () => {
+        t.tooltip = void 0;
+      }
+    }), p(j, {
+      data: o,
+      update: (n) => t.annotations = n,
+      destroy: () => {
+        t.annotations = void 0;
+      }
+    }), u({
+      component: a
+    }), (n, r) => (m(), g("div", {
+      "data-vis-xy-container": "",
+      ref_key: "elRef",
+      ref: e,
+      class: "unovis-xy-container"
+    }, [
+      _(n.$slots, "default")
+    ], 512));
+  }
+}), ee = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    component: {},
+    tooltip: {},
+    annotations: {},
+    duration: {},
+    margin: {},
+    padding: {},
+    sizing: {},
+    width: {},
+    height: {},
+    svgDefs: {},
+    ariaLabel: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = s, { data: o } = C(i), l = x(i);
+    let a;
+    const t = T({
+      component: void 0,
+      tooltip: void 0,
+      annotations: void 0
+    }), e = d(), n = () => {
+      a || e.value && t.component && (a = new R(e.value, { ...f(t) }, o.value));
+    };
+    return w(() => {
+      var r;
+      n(), (r = t.component) == null || r.config, a?.updateContainer({ ...f(l.value), ...f(t) });
+    }), c(o, () => {
+      a ? a.setData(o.value, !0) : n();
+    }), y(() => a?.destroy()), p(k, {
+      data: o,
+      update: (r) => t.component = r,
+      destroy: () => t.component = void 0
+    }), p(B, {
+      data: o,
+      update: (r) => t.tooltip = r,
+      destroy: () => {
+        t.tooltip = void 0;
+      }
+    }), p(j, {
+      data: o,
+      update: (r) => t.annotations = r,
+      destroy: () => {
+        t.annotations = void 0;
+      }
+    }), u({
+      component: a
+    }), (r, U) => (m(), g("div", {
+      "data-vis-single-container": "",
+      ref_key: "elRef",
+      ref: e,
+      class: "unovis-single-container"
+    }, [
+      _(r.$slots, "default")
+    ], 512));
+  }
+}), G = { "data-vis-axis": "" }, te = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    position: {},
+    type: {},
+    fullSize: { type: Boolean },
+    label: {},
+    labelFontSize: {},
+    labelMargin: {},
+    labelTextFitMode: {},
+    labelTextTrimType: {},
+    labelColor: {},
+    gridLine: { type: Boolean },
+    tickLine: { type: Boolean },
+    domainLine: { type: Boolean },
+    minMaxTicksOnly: { type: Boolean },
+    minMaxTicksOnlyShowGridLines: { type: Boolean },
+    minMaxTicksOnlyWhenWidthIsLess: {},
+    tickFormat: { type: Function },
+    tickValues: {},
+    numTicks: {},
+    tickTextFitMode: {},
+    tickTextWidth: {},
+    tickTextSeparator: {},
+    tickTextForceWordBreak: { type: Boolean },
+    tickTextTrimType: {},
+    tickTextFontSize: {},
+    tickTextAlign: {},
+    tickTextColor: {},
+    tickTextAngle: {},
+    tickTextHideOverlapping: { type: Boolean },
+    tickPadding: {},
+    x: { type: [Function, Number, null] },
+    y: { type: [Function, Number, null, Array] },
+    id: { type: Function },
+    color: { type: [Function, String, Array, null] },
+    xScale: { type: [Object, Function] },
+    yScale: { type: [Object, Function] },
+    excludeFromDomainCalculation: { type: Boolean },
+    duration: {},
+    events: {},
+    attributes: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = F(L), o = s, l = h(() => i.data.value ?? o.data), a = x(o), t = d();
+    return b(() => {
+      S(() => {
+        var e;
+        t.value = new W(a.value), (e = t.value) == null || e.setData(l.value), i.update(t.value);
+      });
+    }), y(() => {
+      var e;
+      (e = t.value) == null || e.destroy(), i.destroy(o.type);
+    }), c(a, (e, n) => {
+      var r;
+      D(e, n) || (r = t.value) == null || r.setConfig(a.value);
+    }), c(l, () => {
+      var e;
+      (e = t.value) == null || e.setData(l.value);
+    }), u({
+      component: t
+    }), (e, n) => (m(), g("div", G));
+  }
+}), X = { "data-vis-crosshair": "" }, ae = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = F(M), o = s, l = h(() => i.data.value ?? o.data), a = x(o), t = d();
+    return b(() => {
+      S(() => {
+        var e;
+        t.value = new P(a.value), (e = t.value) == null || e.setData(l.value), i.update(t.value);
+      });
+    }), y(() => {
+      var e;
+      (e = t.value) == null || e.destroy(), i.destroy();
+    }), c(a, (e, n) => {
+      var r;
+      D(e, n) || (r = t.value) == null || r.setConfig(a.value);
+    }), c(l, () => {
+      var e;
+      (e = t.value) == null || e.setData(l.value);
+    }), u({
+      component: t
+    }), (e, n) => (m(), g("div", X));
+  }
+}), I = { "data-vis-component": "" }, ne = $.selectors, oe = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    color: { type: [Function, String, Array, null] },
+    groupWidth: {},
+    groupMaxWidth: {},
+    dataStep: {},
+    groupPadding: {},
+    barPadding: {},
+    roundedCorners: { type: [Number, Boolean] },
+    barMinHeight: {},
+    cursor: { type: [Function, String, null] },
+    orientation: {},
+    x: { type: [Function, Number, null] },
+    y: { type: [Function, Number, null, Array] },
+    id: { type: Function },
+    xScale: { type: [Object, Function] },
+    yScale: { type: [Object, Function] },
+    excludeFromDomainCalculation: { type: Boolean },
+    duration: {},
+    events: {},
+    attributes: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = F(k), o = s, l = h(() => i.data.value ?? o.data), a = x(o), t = d();
+    return b(() => {
+      S(() => {
+        var e;
+        t.value = new $(a.value), (e = t.value) == null || e.setData(l.value), i.update(t.value);
+      });
+    }), y(() => {
+      var e;
+      (e = t.value) == null || e.destroy(), i.destroy();
+    }), c(a, (e, n) => {
+      var r;
+      D(e, n) || (r = t.value) == null || r.setConfig(a.value);
+    }), c(l, () => {
+      var e;
+      (e = t.value) == null || e.setData(l.value);
+    }), u({
+      component: t
+    }), (e, n) => (m(), g("div", I));
+  }
+}), V = { "data-vis-component": "" }, le = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    color: { type: [Function, String, Array, null] },
+    curveType: {},
+    lineWidth: {},
+    lineDashArray: { type: [Function, Array, null] },
+    fallbackValue: {},
+    highlightOnHover: { type: Boolean },
+    cursor: { type: [Function, String, null] },
+    interpolateMissingData: { type: Boolean },
+    x: { type: [Function, Number, null] },
+    y: { type: [Function, Number, null, Array] },
+    id: { type: Function },
+    xScale: { type: [Object, Function] },
+    yScale: { type: [Object, Function] },
+    excludeFromDomainCalculation: { type: Boolean },
+    duration: {},
+    events: {},
+    attributes: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = F(k), o = s, l = h(() => i.data.value ?? o.data), a = x(o), t = d();
+    return b(() => {
+      S(() => {
+        var e;
+        t.value = new K(a.value), (e = t.value) == null || e.setData(l.value), i.update(t.value);
+      });
+    }), y(() => {
+      var e;
+      (e = t.value) == null || e.destroy(), i.destroy();
+    }), c(a, (e, n) => {
+      var r;
+      D(e, n) || (r = t.value) == null || r.setConfig(a.value);
+    }), c(l, () => {
+      var e;
+      (e = t.value) == null || e.setData(l.value);
+    }), u({
+      component: t
+    }), (e, n) => (m(), g("div", V));
+  }
+}), Y = { "data-vis-component": "" }, ie = O.selectors, re = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    id: { type: Function },
+    value: { type: [Function, Number, null] },
+    angleRange: {},
+    padAngle: {},
+    sortFunction: { type: Function },
+    cornerRadius: {},
+    color: { type: [Function, String, Array, null] },
+    radius: {},
+    arcWidth: {},
+    centralLabel: {},
+    centralSubLabel: {},
+    centralSubLabelWrap: { type: Boolean },
+    showEmptySegments: { type: Boolean },
+    emptySegmentAngle: {},
+    showBackground: { type: Boolean },
+    backgroundAngleRange: {},
+    centralLabelOffsetX: {},
+    centralLabelOffsetY: {},
+    duration: {},
+    events: {},
+    attributes: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = F(k), o = s, l = h(() => i.data.value ?? o.data), a = x(o), t = d();
+    return b(() => {
+      S(() => {
+        var e;
+        t.value = new O(a.value), (e = t.value) == null || e.setData(l.value), i.update(t.value);
+      });
+    }), y(() => {
+      var e;
+      (e = t.value) == null || e.destroy(), i.destroy();
+    }), c(a, (e, n) => {
+      var r;
+      D(e, n) || (r = t.value) == null || r.setConfig(a.value);
+    }), c(l, () => {
+      var e;
+      (e = t.value) == null || e.setData(l.value);
+    }), u({
+      component: t
+    }), (e, n) => (m(), g("div", Y));
+  }
+}), q = { "data-vis-tooltip": "" }, ue = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    components: {},
+    container: {},
+    followCursor: { type: Boolean },
+    allowHover: { type: Boolean },
+    horizontalPlacement: {},
+    horizontalShift: {},
+    verticalPlacement: {},
+    verticalShift: {},
+    triggers: {},
+    attributes: {},
+    className: {},
+    hideDelay: {},
+    showDelay: {},
+    data: {}
+  },
+  setup(s, { expose: u }) {
+    const i = F(B), o = x(s), l = d();
+    return b(() => {
+      S(() => {
+        l.value = new H(o.value), i.update(l.value);
+      });
+    }), y(() => {
+      var a;
+      (a = l.value) == null || a.destroy(), i.destroy();
+    }), c(o, (a, t) => {
+      var e;
+      D(a, t) || (e = l.value) == null || e.setConfig(o.value);
+    }), u({
+      component: l
+    }), (a, t) => (m(), g("div", q));
+  }
+});
+(function() {
+  try {
+    if (typeof document < "u") {
+      var s = document.createElement("style");
+      s.appendChild(document.createTextNode(".unovis-xy-container,.unovis-single-container{display:block;position:relative;width:100%}[data-vis-leaflet-map],[data-vis-leaflet-flow-map]{display:block;position:relative}[data-vis-bullet-legend],[data-vis-flow-legend],[data-vis-rolling-pin-legend]{display:block}")), document.head.appendChild(s);
+    }
+  } catch (u) {
+    console.error("vite-plugin-css-injected-by-js", u);
+  }
+})();
+export {
+  ae as A,
+  le as C,
+  ie as D,
+  re as E,
+  Z as S,
+  te as a,
+  oe as b,
+  ee as c,
+  ne as w,
+  ue as z
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.2.4-beta.3",
+  "version": "1.2.4-beta.4",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   "scripts": {
     "build": "shx rm -rf ./dist && tsx scripts/build.mts",
     "build:lib": "vite build",
-    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist && tsc-alias -p tsconfig.json --outDir dist",
     "type-check": "vue-tsc --noEmit",
     "check-locales": "tsx scripts/check-locales.mts",
     "test": "vitest run",
@@ -61,6 +61,8 @@
     "@tiptap/pm": "^3.4.2",
     "@tiptap/starter-kit": "^3.4.2",
     "@tiptap/vue-3": "^3.4.2",
+    "@unovis/ts": "^1.6.4",
+    "@unovis/vue": "^1.6.4",
     "@vee-validate/i18n": "^4.12.4",
     "@vee-validate/rules": "^4.12.4",
     "@vuepic/vue-datepicker": "^11.0.2",
@@ -92,7 +94,7 @@
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
     "@vc-shell/api-client-generator": "1.2.4-beta.3",
-    "@vc-shell/config-generator": "1.2.4-beta.3",
+    "@vc-shell/config-generator": "1.2.4-beta.4",
     "@vc-shell/ts-config": "1.2.4-beta.3",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
@@ -113,5 +115,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d42e7a822a2b2c7a5f89bf83d97babc2e4b3fa07"
+  "gitHead": "55336ccab2cfd7e697fd64e962262359ac9eb37f"
 }

package/shared/components/dashboard-charts/ChartContainer.vue

@@ -0,0 +1,54 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<template>
+  <div
+    ref="containerRef"
+    class="dashboard-chart-container"
+    :style="cssVars"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ChartConfig } from "./types";
+
+export interface Props {
+  config: ChartConfig;
+}
+
+const props = defineProps<Props>();
+
+const containerRef = ref<HTMLElement>();
+
+const cssVars = computed(() => {
+  const vars: Record<string, string> = {};
+  const keys = Object.keys(props.config);
+  keys.forEach((key, index) => {
+    const item = props.config[key];
+    if (item.color) {
+      vars[`--vis-color${index}`] = item.color;
+    }
+  });
+  return vars;
+});
+
+defineSlots<{
+  default: (props: any) => any;
+}>();
+</script>
+
+<style lang="scss">
+@use "./chart-theme";
+
+.dashboard-chart-container {
+  @apply tw-w-full tw-h-full tw-min-h-0;
+
+  // Force Unovis host tooltip container to stay transparent.
+  --vis-tooltip-padding: 0;
+  --vis-tooltip-border-color: transparent;
+  --vis-tooltip-background-color: transparent;
+  --vis-tooltip-box-shadow: none;
+  --vis-tooltip-backdrop-filter: none;
+}
+</style>

package/shared/components/dashboard-charts/ChartLegend.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="dashboard-chart-legend">
+    <div
+      v-for="(item, key) in config"
+      :key="key"
+      class="dashboard-chart-legend__item"
+    >
+      <span
+        class="dashboard-chart-legend__indicator"
+        :style="{ background: item.color }"
+      />
+      <span class="dashboard-chart-legend__label">{{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartConfig } from "./types";
+
+export interface Props {
+  config: ChartConfig;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+.dashboard-chart-legend {
+  @apply tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-gap-x-4 tw-gap-y-1 tw-px-3 tw-py-2;
+
+  &__item {
+    @apply tw-flex tw-items-center tw-gap-1.5 tw-text-xs;
+    color: var(--neutrals-600);
+  }
+
+  &__indicator {
+    @apply tw-w-2 tw-h-2 tw-rounded-full tw-flex-shrink-0;
+  }
+}
+</style>

package/shared/components/dashboard-charts/ChartTooltip.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="dashboard-chart-tooltip">
+    <div
+      v-if="title"
+      class="dashboard-chart-tooltip__title"
+    >
+      {{ title }}
+    </div>
+    <div class="dashboard-chart-tooltip__items">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="dashboard-chart-tooltip__item"
+      >
+        <span
+          class="dashboard-chart-tooltip__indicator"
+          :style="{ background: item.color }"
+        />
+        <span class="dashboard-chart-tooltip__label">{{ item.label }}</span>
+        <span class="dashboard-chart-tooltip__value">{{ item.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface TooltipItem {
+  label: string;
+  value: string | number;
+  color: string;
+}
+
+export interface Props {
+  title?: string;
+  items: TooltipItem[];
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+@use "./chart-tooltip";
+</style>