@chelone/vue 0.5.0 → 0.6.0

package/README.md

@@ -13,6 +13,7 @@ Each entry below needs the peer dependencies listed beside it, and only that ent
 | Entry | Optional peers |
 | --- | --- |
 | `@chelone/vue/monaco` | `monaco-editor`, `@guolao/vue-monaco-editor` |
+| `@chelone/vue/kanban` | `@dnd-kit/vue`, `@dnd-kit/dom` (needs Vue 3.5) |
 | `@chelone/vue/mdx-editor` | `@milkdown/crepe`, `@milkdown/kit` |
 | `@chelone/vue/csv-import` | `papaparse` |
 | `@chelone/vue/maps` | `maplibre-gl` |

package/dist/components/admin/fields/api-key-field.vue.d.ts

@@ -1,4 +1,4 @@
-import type { LooseRecord, SourceKey, SourceProp } from "@chelone/core";
+import { type LooseRecord, type SourceKey, type SourceProp } from "@chelone/core";
 /** Props for {@link ApiKeyField}. */
 export interface ApiKeyFieldProps<RecordType extends LooseRecord = LooseRecord> {
     source: SourceProp;

package/dist/components/admin/fields/api-key-field.vue.js

@@ -3,6 +3,7 @@ import { cn } from "../../../lib/utils.js";
 import _sfc_main$1 from "../../ui/button.vue.js";
 import { RecordContextKey } from "../../../record/record-context.js";
 import { useFieldValue } from "../../../record/use-field-value.js";
+import { formatRelativeTime } from "@chelone/core";
 const _hoisted_1 = { class: "inline-flex items-center gap-2" };
 const _hoisted_2 = {
   "data-api-key": "",
@@ -82,17 +83,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!props.lastUsedSource || !rec) return void 0;
       return rec[props.lastUsedSource];
     });
-    function formatRelative(iso) {
-      if (!iso) return "Never";
-      const delta = (new Date(iso).getTime() - Date.now()) / 1e3;
-      const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
-      const abs = Math.abs(delta);
-      if (abs < 60) return rtf.format(Math.round(delta), "second");
-      if (abs < 3600) return rtf.format(Math.round(delta / 60), "minute");
-      if (abs < 86400) return rtf.format(Math.round(delta / 3600), "hour");
-      if (abs < 86400 * 30) return rtf.format(Math.round(delta / 86400), "day");
-      return rtf.format(Math.round(delta / (86400 * 30)), "month");
-    }
     async function handleCopy() {
       try {
         await navigator.clipboard.writeText(key.value ?? "");
@@ -182,7 +172,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, toDisplayString(s), 1);
           }), 128))
         ])) : createCommentVNode("", true),
-        __props.lastUsedSource ? (openBlock(), createElementBlock("span", _hoisted_7, "Last used: " + toDisplayString(formatRelative(lastUsed.value)), 1)) : createCommentVNode("", true)
+        __props.lastUsedSource ? (openBlock(), createElementBlock("span", _hoisted_7, "Last used: " + toDisplayString(lastUsed.value ? unref(formatRelativeTime)(new Date(lastUsed.value), /* @__PURE__ */ new Date()) : "Never"), 1)) : createCommentVNode("", true)
       ], 2)) : createCommentVNode("", true);
     };
   }

package/dist/components/index.d.ts

@@ -326,8 +326,6 @@ export type { FilterLiveSearchProps } from "./admin/list/filter-live-search.vue.
 export { default as FilterLiveSearch } from "./admin/list/filter-live-search.vue.js";
 export type { InfinitePaginationProps } from "./admin/list/infinite-pagination.vue.js";
 export { default as InfinitePagination } from "./admin/list/infinite-pagination.vue.js";
-export type { KanbanBoardProps } from "./admin/list/kanban-board.vue.js";
-export { default as KanbanBoard } from "./admin/list/kanban-board.vue.js";
 export type { ListActionsProps } from "./admin/list/list-actions.vue.js";
 export { default as ListActions } from "./admin/list/list-actions.vue.js";
 export type { ListNoResultsProps } from "./admin/list/list-no-results.vue.js";

package/dist/components/kanban/kanban-board.vue.js

@@ -0,0 +1,260 @@
+import { defineComponent, computed, getCurrentInstance, openBlock, createBlock, unref, withCtx, createElementVNode, mergeProps, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createVNode, createCommentVNode, renderSlot, withModifiers, createTextVNode } from "vue";
+import { buildKanbanBuckets, planKanbanMove, getAtPath } from "@chelone/core";
+import { PointerSensor } from "@dnd-kit/dom";
+import { DragDropProvider } from "@dnd-kit/vue";
+import { useResourceDefinition } from "../../admin/resource-registry.js";
+import { useCheloneNotifications } from "../../context.js";
+import { useUpdate } from "../../data/mutations.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { useGetRecordRepresentation } from "../../label/use-get-record-representation.js";
+import { cn } from "../../lib/utils.js";
+import { useListContext } from "../../list/list-context.js";
+import { useResourceContext } from "../../resource-context.js";
+import _sfc_main$5 from "../ui/button.vue.js";
+import { useMenuAccess } from "../admin/layout/use-menu-access.js";
+import { ArrowRightLeftIcon } from "../admin/list/list-icons.js";
+import _sfc_main$2 from "./kanban-draggable-card.vue.js";
+import _sfc_main$1 from "./kanban-drop-area.vue.js";
+import { useNavigate, useCreatePath } from "../../router/nav-composables.js";
+import _sfc_main$3 from "../ui/dropdown-menu/dropdown-menu.vue.js";
+import _sfc_main$4 from "../ui/dropdown-menu/dropdown-menu-trigger.vue.js";
+import _sfc_main$6 from "../ui/dropdown-menu/dropdown-menu-content.vue.js";
+import _sfc_main$7 from "../ui/dropdown-menu/dropdown-menu-item.vue.js";
+const _hoisted_1 = ["aria-label", "data-column-id"];
+const _hoisted_2 = { class: "flex items-center justify-between px-1 text-sm font-medium" };
+const _hoisted_3 = {
+  "data-slot": "kanban-column-count",
+  class: "text-muted-foreground"
+};
+const _hoisted_4 = {
+  key: 0,
+  "data-slot": "kanban-empty",
+  class: "px-1 py-2 text-sm text-muted-foreground"
+};
+const _hoisted_5 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
+const _hoisted_6 = {
+  "data-slot": "kanban-card-title",
+  class: "font-medium"
+};
+const _hoisted_7 = {
+  key: 0,
+  "data-slot": "kanban-card-description",
+  class: "text-muted-foreground"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "kanban-board",
+  props: {
+    groupSource: {},
+    columns: {},
+    titleSource: { default: void 0 },
+    descriptionSource: { default: void 0 },
+    linkType: { type: [String, Boolean], default: void 0 },
+    class: {}
+  },
+  emits: ["select-card"],
+  setup(__props, { emit: __emit }) {
+    const sensors = [PointerSensor];
+    const props = __props;
+    const emit = __emit;
+    const list = useListContext();
+    const resource = useResourceContext();
+    const translate = useTranslate();
+    const getRepresentation = useGetRecordRepresentation(resource);
+    const navigate = useNavigate();
+    const createPath = useCreatePath();
+    const definition = useResourceDefinition(() => ({ resource }));
+    const notifications = useCheloneNotifications();
+    const { canAccess, isPending: isAccessPending } = useMenuAccess(
+      computed(() => ({
+        action: "edit",
+        resource: resource ?? ""
+      }))
+    );
+    const update = useUpdate(resource ?? "", { mutationMode: "optimistic" });
+    const draggable = computed(
+      () => !!resource && canAccess.value && !isAccessPending.value
+    );
+    const instance = getCurrentInstance();
+    const hasListener = () => {
+      const listeners = instance?.vnode.props;
+      return !!(listeners?.onSelectCard || listeners?.onSelectCardOnce);
+    };
+    const buckets = computed(
+      () => buildKanbanBuckets(list.data ?? [], props.groupSource, props.columns)
+    );
+    function move(record, targetColumnId) {
+      const plan = planKanbanMove(
+        record,
+        props.groupSource,
+        props.columns,
+        targetColumnId
+      );
+      if (!plan) return;
+      update.mutateAsync(plan).catch(() => {
+        notifications?.notify("chelone.notification.http_error", {
+          type: "error"
+        });
+      });
+    }
+    const type = computed(
+      () => props.linkType ?? (definition.value.hasEdit ? "edit" : definition.value.hasShow ? "show" : false)
+    );
+    const linkTo = (record) => resource && type.value ? createPath({ resource, id: record.id, type: type.value }) : void 0;
+    const selectable = computed(
+      () => hasListener() || !!resource && type.value !== false
+    );
+    function select(record) {
+      if (!selectable.value) return;
+      if (hasListener()) return emit("select-card", record);
+      const to = linkTo(record);
+      if (to) navigate(to);
+    }
+    function onCardKeydown(event, record) {
+      if (event.target !== event.currentTarget) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      select(record);
+    }
+    function onDragEnd(event) {
+      const { source, target } = event.operation;
+      if (event.canceled || !source || !target || !draggable.value) return;
+      const record = buckets.value.flatMap((bucket) => bucket.records).find((candidate) => String(candidate.id) === String(source.id));
+      if (record) move(record, String(target.id));
+    }
+    const isEmpty = (value) => value == null || value === "";
+    const textOf = (record, source) => source ? getAtPath(record, source) : void 0;
+    const titleOf = (record) => {
+      const value = textOf(record, props.titleSource);
+      return value == null ? getRepresentation(record) : String(value);
+    };
+    const othersOf = (columnId) => props.columns.filter((other) => other.id !== columnId);
+    const moveLabel = (record) => translate("chelone.kanban_board.move", {
+      title: titleOf(record),
+      _: "Move {title}"
+    });
+    const emptyLabel = computed(
+      () => translate("chelone.kanban_board.empty", { _: "No items" })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DragDropProvider), {
+        sensors,
+        onDragEnd
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", mergeProps(_ctx.$attrs, {
+            "data-slot": "kanban-board",
+            class: unref(cn)("flex items-start gap-4 overflow-x-auto pb-2", props.class)
+          }), [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(buckets.value, ({ column, records }) => {
+              return openBlock(), createElementBlock("div", {
+                key: column.id,
+                role: "group",
+                "aria-label": column.label,
+                "data-slot": "kanban-column",
+                "data-column-id": column.id,
+                class: normalizeClass(
+                  unref(cn)(
+                    "flex w-72 shrink-0 flex-col gap-2 rounded-lg bg-muted/50 p-2",
+                    column.className
+                  )
+                )
+              }, [
+                createElementVNode("div", _hoisted_2, [
+                  createElementVNode("span", null, toDisplayString(column.label), 1),
+                  createElementVNode("span", _hoisted_3, toDisplayString(records.length), 1)
+                ]),
+                createVNode(_sfc_main$1, {
+                  "column-id": column.id,
+                  "data-slot": "kanban-column-cards",
+                  class: "flex min-h-16 flex-col gap-2 rounded-md data-[over]:bg-accent"
+                }, {
+                  default: withCtx(() => [
+                    records.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(emptyLabel.value), 1)) : createCommentVNode("", true),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(records, (record) => {
+                      return openBlock(), createBlock(_sfc_main$2, {
+                        key: record.id,
+                        id: String(record.id),
+                        draggable: draggable.value,
+                        role: "button",
+                        tabindex: "0",
+                        "data-slot": "kanban-card",
+                        "data-record-id": String(record.id),
+                        class: "flex cursor-pointer items-start gap-2 rounded-md border bg-card p-3 text-sm shadow-xs data-[dragging]:opacity-50",
+                        onClick: ($event) => select(record),
+                        onKeydown: ($event) => onCardKeydown($event, record)
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("div", _hoisted_5, [
+                            _ctx.$slots.card ? renderSlot(_ctx.$slots, "card", {
+                              key: 0,
+                              record
+                            }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                              createElementVNode("span", _hoisted_6, toDisplayString(titleOf(record)), 1),
+                              !isEmpty(textOf(record, props.descriptionSource)) ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(String(textOf(record, props.descriptionSource))), 1)) : createCommentVNode("", true)
+                            ], 64))
+                          ]),
+                          draggable.value ? (openBlock(), createElementBlock("div", {
+                            key: 0,
+                            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, [
+                            createVNode(unref(_sfc_main$3), null, {
+                              default: withCtx(() => [
+                                createVNode(unref(_sfc_main$4), null, {
+                                  default: withCtx(() => [
+                                    createVNode(_sfc_main$5, {
+                                      type: "button",
+                                      variant: "ghost",
+                                      size: "icon",
+                                      "data-slot": "kanban-card-move",
+                                      class: "size-6",
+                                      "aria-label": moveLabel(record)
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(unref(ArrowRightLeftIcon))
+                                      ]),
+                                      _: 1
+                                    }, 8, ["aria-label"])
+                                  ]),
+                                  _: 2
+                                }, 1024),
+                                createVNode(unref(_sfc_main$6), { align: "end" }, {
+                                  default: withCtx(() => [
+                                    (openBlock(true), createElementBlock(Fragment, null, renderList(othersOf(column.id), (other) => {
+                                      return openBlock(), createBlock(unref(_sfc_main$7), {
+                                        key: other.id,
+                                        onSelect: ($event) => move(record, other.id)
+                                      }, {
+                                        default: withCtx(() => [
+                                          createTextVNode(toDisplayString(other.label), 1)
+                                        ]),
+                                        _: 2
+                                      }, 1032, ["onSelect"]);
+                                    }), 128))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ])) : createCommentVNode("", true)
+                        ]),
+                        _: 2
+                      }, 1032, ["id", "draggable", "data-record-id", "onClick", "onKeydown"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["column-id"])
+              ], 10, _hoisted_1);
+            }), 128))
+          ], 16)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/kanban/kanban-draggable-card.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    /** The record id; the drag's source id. */
+    id: string;
+    /** False when the user may not edit: the card is no drag source then. */
+    draggable: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/kanban/kanban-draggable-card.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent, ref, openBlock, createElementBlock, unref, renderSlot } from "vue";
+import { useDraggable } from "@dnd-kit/vue";
+const _hoisted_1 = ["data-dragging", "data-draggable"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "kanban-draggable-card",
+  props: {
+    id: {},
+    draggable: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const element = ref();
+    const { isDragging } = useDraggable({
+      id: () => props.id,
+      element,
+      disabled: () => !props.draggable
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        "data-dragging": unref(isDragging) ? "" : void 0,
+        "data-draggable": __props.draggable ? "" : void 0
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/kanban/kanban-draggable-card2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./kanban-draggable-card.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/kanban/kanban-drop-area.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    columnId: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/kanban/kanban-drop-area.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent, ref, openBlock, createElementBlock, unref, renderSlot } from "vue";
+import { useDroppable } from "@dnd-kit/vue";
+const _hoisted_1 = ["data-over"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "kanban-drop-area",
+  props: {
+    columnId: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const element = ref();
+    const { isDropTarget } = useDroppable({
+      id: () => props.columnId,
+      element
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        "data-over": unref(isDropTarget) ? "" : void 0
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/kanban/kanban-drop-area2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./kanban-drop-area.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-container.vue.d.ts

@@ -0,0 +1,18 @@
+import { type ChartConfig } from "./utils.js";
+type __VLS_Props = {
+    id?: string;
+    class?: string;
+    config: ChartConfig;
+};
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/chart/chart-container.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, unref, createVNode, renderSlot } from "vue";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$1 from "./chart-style.vue.js";
+import { useId, provideChartContext } from "./utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "chart-container",
+  props: {
+    id: {},
+    class: {},
+    config: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { config } = toRefs(props);
+    const uniqueId = useId();
+    const chartId = `chart-${props.id || uniqueId}`;
+    provideChartContext({ id: uniqueId, config });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "chart",
+        "data-chart": chartId,
+        class: normalizeClass(
+          unref(cn)(
+            "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+            props.class
+          )
+        )
+      }, [
+        createVNode(_sfc_main$1, {
+          id: chartId,
+          config: unref(config)
+        }, null, 8, ["config"]),
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-container2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./chart-container.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-legend-content.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    class?: string;
+    hideIcon?: boolean;
+    verticalAlign?: "top" | "bottom";
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    verticalAlign: "top" | "bottom";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/chart/chart-legend-content.vue.js

@@ -0,0 +1,56 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeStyle, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { cn } from "../../../lib/utils.js";
+import { useChart } from "./utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "chart-legend-content",
+  props: {
+    class: {},
+    hideIcon: { type: Boolean },
+    verticalAlign: { default: "bottom" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { config } = useChart();
+    const items = computed(
+      () => Object.entries(config.value).map(([key, item]) => ({
+        key,
+        item,
+        // A themed entry has no single color; `ChartStyle` defines the variable.
+        color: item.color ?? `var(--color-${key})`,
+        label: item.label ?? key
+      }))
+    );
+    return (_ctx, _cache) => {
+      return items.value.length ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(
+          unref(cn)(
+            "flex items-center justify-center gap-4",
+            props.verticalAlign === "top" ? "pb-3" : "pt-3",
+            props.class
+          )
+        )
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (entry) => {
+          return openBlock(), createElementBlock("div", {
+            key: entry.key,
+            "data-slot": "chart-legend-item",
+            class: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+          }, [
+            entry.item.icon && !props.hideIcon ? (openBlock(), createBlock(resolveDynamicComponent(entry.item.icon), { key: 0 })) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: "h-2 w-2 shrink-0 rounded-[2px]",
+              style: normalizeStyle({ backgroundColor: entry.color })
+            }, null, 4)),
+            typeof entry.label !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(entry.label), { key: 2 })) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+              createTextVNode(toDisplayString(entry.label), 1)
+            ], 64))
+          ]);
+        }), 128))
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-legend-content2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./chart-legend-content.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-style.vue.d.ts

@@ -0,0 +1,7 @@
+import { type ChartConfig } from "./utils.js";
+type __VLS_Props = {
+    id: string;
+    config: ChartConfig;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/chart/chart-style.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { THEMES } from "./utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "chart-style",
+  props: {
+    id: {},
+    config: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const THEME_NAMES = ["light", "dark"];
+    const SAFE_TOKEN = /^[\w-]+$/;
+    const SAFE_COLOR = /^[^<>{};]+$/;
+    const css = computed(() => {
+      if (!SAFE_TOKEN.test(props.id)) return "";
+      const colored = Object.entries(props.config).filter(
+        ([key, item]) => SAFE_TOKEN.test(key) && (item.theme || item.color)
+      );
+      if (!colored.length) return "";
+      return THEME_NAMES.map((theme) => {
+        const prefix = THEMES[theme];
+        const lines = colored.flatMap(([key, item]) => {
+          const color = item.theme?.[theme] ?? item.color;
+          return color && SAFE_COLOR.test(color) ? [`  --color-${key}: ${color};`] : [];
+        });
+        return `${prefix} [data-chart=${props.id}] {
+${lines.join("\n")}
+}`;
+      }).join("\n");
+    });
+    return (_ctx, _cache) => {
+      return css.value ? (openBlock(), createBlock(resolveDynamicComponent("style"), { key: 0 }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(css.value), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-style2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./chart-style.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/chart/chart-tooltip-content.vue.d.ts

@@ -0,0 +1,7 @@
+import { type ChartTooltipOptions, type ChartTooltipRenderProps } from "./utils.js";
+type __VLS_Props = ChartTooltipOptions & ChartTooltipRenderProps;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    payload: import("./utils.js").ChartDatum;
+    indicator: "line" | "dot" | "dashed";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;