@chelone/vue 0.5.0 → 0.6.0

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

@@ -0,0 +1,122 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeStyle, createTextVNode } from "vue";
+import { cn } from "../../../lib/utils.js";
+import { useChart } from "./utils.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "font-medium"
+};
+const _hoisted_2 = { class: "grid gap-1.5" };
+const _hoisted_3 = { class: "grid gap-1.5" };
+const _hoisted_4 = {
+  key: 0,
+  class: "font-medium"
+};
+const _hoisted_5 = { class: "text-muted-foreground" };
+const _hoisted_6 = {
+  key: 0,
+  class: "font-mono font-medium text-foreground tabular-nums"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "chart-tooltip-content",
+  props: {
+    class: {},
+    hideLabel: { type: Boolean },
+    hideIndicator: { type: Boolean },
+    indicator: { default: "dot" },
+    nameKey: {},
+    labelKey: {},
+    labelFormatter: {},
+    color: {},
+    payload: { default: () => ({}) },
+    x: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { config } = useChart();
+    const label = computed(() => {
+      if (props.hideLabel) return null;
+      if (props.labelKey && props.payload[props.labelKey] != null) {
+        return String(props.payload[props.labelKey]);
+      }
+      if (props.x === void 0) return null;
+      if (props.labelFormatter) return String(props.labelFormatter(props.x));
+      return props.x instanceof Date ? props.x.toISOString() : String(props.x);
+    });
+    const rows = computed(
+      () => Object.entries(props.payload).filter(([key]) => Object.hasOwn(config.value, key) && key !== props.labelKey).map(([key, value]) => {
+        const item = config.value[key];
+        const named = props.nameKey ? props.payload[props.nameKey] : void 0;
+        return {
+          key,
+          item,
+          name: item?.label ?? (named != null ? String(named) : key),
+          value: value == null ? null : typeof value === "number" ? value.toLocaleString() : String(value),
+          color: props.color ?? item?.color ?? `var(--color-${key})`
+        };
+      })
+    );
+    const nestLabel = computed(
+      () => rows.value.length === 1 && props.indicator !== "dot"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(
+          unref(cn)(
+            "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+            props.class
+          )
+        )
+      }, [
+        label.value && !nestLabel.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(label.value), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+            return openBlock(), createElementBlock("div", {
+              key: row.key,
+              class: normalizeClass(
+                unref(cn)(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  props.indicator === "dot" && "items-center"
+                )
+              )
+            }, [
+              row.item?.icon ? (openBlock(), createBlock(resolveDynamicComponent(row.item?.icon), { key: 0 })) : !props.hideIndicator ? (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: normalizeClass(
+                  unref(cn)(
+                    "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                    props.indicator === "dot" && "h-2.5 w-2.5",
+                    props.indicator === "line" && "w-1",
+                    props.indicator === "dashed" && "w-0 border-[1.5px] border-dashed bg-transparent",
+                    nestLabel.value && props.indicator === "dashed" && "my-0.5"
+                  )
+                ),
+                style: normalizeStyle({ "--color-bg": row.color, "--color-border": row.color })
+              }, null, 6)) : createCommentVNode("", true),
+              createElementVNode("div", {
+                class: normalizeClass(
+                  unref(cn)(
+                    "flex flex-1 justify-between leading-none",
+                    nestLabel.value ? "items-end" : "items-center"
+                  )
+                )
+              }, [
+                createElementVNode("div", _hoisted_3, [
+                  nestLabel.value && label.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(label.value), 1)) : createCommentVNode("", true),
+                  createElementVNode("span", _hoisted_5, [
+                    typeof row.name !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(row.name), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(toDisplayString(row.name), 1)
+                    ], 64))
+                  ])
+                ]),
+                row.value !== null ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(row.value), 1)) : createCommentVNode("", true)
+              ], 2)
+            ], 2);
+          }), 128))
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

package/dist/components/ui/chart/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The dependency-free `chart` family barrel — the Vue analog of shadcn-vue's
+ * `ui/chart`, without its UI-primitive and utility dependencies. shadcn-vue's
+ * re-export of the tooltip and crosshair from the chart library is left out so
+ * nothing here imports one; the charts import those themselves.
+ */
+export { default as ChartContainer } from "./chart-container.vue.js";
+export { default as ChartLegendContent } from "./chart-legend-content.vue.js";
+export { default as ChartStyle } from "./chart-style.vue.js";
+export { default as ChartTooltipContent } from "./chart-tooltip-content.vue.js";
+export { type ChartConfig, type ChartContextProps, type ChartDatum, type ChartDatumValue, type ChartTooltipOptions, type ChartTooltipRenderProps, componentToString, provideChartContext, THEMES, useChart, } from "./utils.js";

package/dist/components/ui/chart/utils.d.ts

@@ -0,0 +1,81 @@
+/**
+ * The non-component core of the dependency-free `chart` family: the config
+ * type, the theme map, the `useChart` context and `componentToString`.
+ *
+ * Ported from shadcn-vue's `ui/chart` without its context, id and client-check
+ * helper packages: the context is a typed `InjectionKey` as in
+ * `dropdown-menu/context.ts`, ids come from a module counter (Vue's peer range
+ * starts before Vue's own `useId`), and the client check is a `typeof window`
+ * test.
+ */
+import { type Component, type Ref } from "vue";
+/** Format: `{ THEME_NAME: CSS_SELECTOR }`. */
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [key in string]: {
+        label?: string | Component;
+        icon?: string | Component;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+/** A value a tooltip can show; the datum's other fields are never read. */
+export type ChartDatumValue = string | number | boolean | Date | null | undefined;
+/** One hovered datum: field name to value. */
+export type ChartDatum = Record<string, ChartDatumValue>;
+/** unovis hands a tooltip either the datum or a node holding it as `data`. */
+type ChartTooltipTarget = ChartDatum | {
+    data: ChartDatum;
+};
+/** What `componentToString` adds to the props it is given. */
+export interface ChartTooltipRenderProps {
+    payload?: ChartDatum;
+    /** The hovered x value. */
+    x?: number | Date;
+}
+/** The props of `<ChartTooltipContent>` a caller sets. */
+export interface ChartTooltipOptions {
+    class?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    /** Payload key whose value names each row; defaults to the key itself. */
+    nameKey?: string;
+    /** Payload key shown as the heading in place of `x`. */
+    labelKey?: string;
+    labelFormatter?: (x: number | Date) => string | number;
+    color?: string;
+}
+/** The contract `<ChartContainer>` provides to the chart parts. */
+export interface ChartContextProps {
+    id: string;
+    config: Ref<ChartConfig>;
+}
+/** Provide the chart context (called by `<ChartContainer>` in `setup`). */
+export declare function provideChartContext(ctx: ChartContextProps): void;
+/** Read the ambient chart context. Throws outside a `<ChartContainer>`. */
+export declare function useChart(): ChartContextProps;
+/**
+ * A page-unique id, safe to put in a selector. Inside a component it is Vue's
+ * own `useId` where the installed Vue has one (3.5+), which is per app and so
+ * matches between server render and hydration. Vue's peer range starts at 3.4,
+ * and `componentToString` calls this outside a component; both fall back to a
+ * module counter, which a server that renders several requests in one process
+ * does not reset, so on Vue 3.4 pass `id` to `<ChartContainer>` for SSR.
+ */
+export declare function useId(): string;
+/**
+ * Turn a tooltip component into a `(data, x?) => html` function, the shape
+ * unovis' tooltip `triggers` take. Returns nothing on the server, where
+ * there is no DOM to render into. The HTML comes from Vue's renderer, so text
+ * in the payload is escaped.
+ */
+export declare function componentToString(config: ChartConfig, component: Component, props?: ChartTooltipOptions): ((data: ChartTooltipTarget, x?: number | Date) => string) | undefined;
+export {};

package/dist/components/ui/chart/utils.js

@@ -0,0 +1,52 @@
+import * as Vue from "vue";
+import { getCurrentInstance, provide, inject, defineComponent, ref, h, createApp } from "vue";
+const THEMES = { light: "", dark: ".dark" };
+const ChartKey = /* @__PURE__ */ Symbol("chelone-chart");
+function provideChartContext(ctx) {
+  provide(ChartKey, ctx);
+}
+function useChart() {
+  const ctx = inject(ChartKey, null);
+  if (!ctx) {
+    throw new Error("useChart: used outside a <ChartContainer> component.");
+  }
+  return ctx;
+}
+let idCounter = 0;
+function useId() {
+  const vueUseId = Vue.useId;
+  if (vueUseId && getCurrentInstance()) {
+    return vueUseId().replace(/[^\w-]/g, "");
+  }
+  idCounter += 1;
+  return `chelone-${idCounter}`;
+}
+function isWrapped(target) {
+  return "data" in target && typeof target.data === "object" && target.data !== null && !(target.data instanceof Date);
+}
+function componentToString(config, component, props) {
+  if (typeof window === "undefined") return void 0;
+  const id = useId();
+  return (data, x) => {
+    const payload = isWrapped(data) ? data.data : data;
+    const host = defineComponent({
+      setup() {
+        provideChartContext({ id, config: ref(config) });
+        return () => h(component, { ...props, payload, x });
+      }
+    });
+    const app = createApp(host);
+    const el = document.createElement("div");
+    app.mount(el);
+    const html = el.innerHTML;
+    app.unmount();
+    return html;
+  };
+}
+export {
+  THEMES,
+  componentToString,
+  provideChartContext,
+  useChart,
+  useId
+};

package/dist/components/ui/index.d.ts

@@ -4,6 +4,7 @@ export { Badge, type BadgeVariant } from "./badge.js";
 export { default as Button } from "./button.vue.js";
 export { type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, buttonVariants, } from "./button-variants.js";
 export { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "./card.js";
+export { type ChartConfig, ChartContainer, type ChartContextProps, ChartLegendContent, ChartStyle, ChartTooltipContent, componentToString, provideChartContext, THEMES, useChart, } from "./chart/index.js";
 export { default as Checkbox } from "./checkbox.vue.js";
 export type { CommandContext, CommandDialogProps, CommandFilter, CommandItemEntry, CommandProps, } from "./command/index.js";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandKey, CommandList, CommandSeparator, CommandShortcut, defaultCommandFilter, provideCommand, useCommand, } from "./command/index.js";

package/dist/data/create-chelone-hooks.d.ts

@@ -7,6 +7,7 @@
  */
 import type { GetListParams, GetManyParams, GetManyReferenceParams, GetOneParams, MutationModeOptions, ResourceMap } from "@chelone/core";
 import type { MaybeRefOrGetter } from "vue";
+import { type ListQueryOptions } from "./queries.js";
 type QueryOptions = {
     enabled?: MaybeRefOrGetter<boolean>;
 };
@@ -16,7 +17,7 @@ type QueryOptions = {
  *   hooks.useGetList('posts')  // data: Post[]; 'nope' rejects
  */
 export declare function createCheloneHooks<TResources extends ResourceMap>(): {
-    useGetList: <TName extends keyof TResources & string>(resource: TName, params?: MaybeRefOrGetter<GetListParams>, options?: QueryOptions) => import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").GetListResult<import("@chelone/core").RecordOf<TResources, TName>>, Error>;
+    useGetList: <TName extends keyof TResources & string>(resource: TName, params?: MaybeRefOrGetter<GetListParams>, options?: ListQueryOptions) => import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").GetListResult<import("@chelone/core").RecordOf<TResources, TName>>, Error>;
     useGetOne: <TName extends keyof TResources & string>(resource: TName, params: MaybeRefOrGetter<GetOneParams>, options?: QueryOptions) => import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").RecordOf<TResources, TName>, Error>;
     useGetMany: <TName extends keyof TResources & string>(resource: TName, params: MaybeRefOrGetter<GetManyParams>, options?: QueryOptions) => import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").RecordOf<TResources, TName>[], Error>;
     useGetManyAggregate: <TName extends keyof TResources & string>(resource: TName, params: MaybeRefOrGetter<GetManyParams>, options?: QueryOptions) => import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").RecordOf<TResources, TName>[], Error>;

package/dist/data/queries.d.ts

@@ -36,13 +36,16 @@ export declare function useGetMany<TResources extends ResourceMap = ResourceMap,
 export declare function useGetManyAggregate<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(resource: TName, params: MaybeRefOrGetter<GetManyParams>, options?: {
     enabled?: MaybeRefOrGetter<boolean>;
 }): import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").RecordOf<TResources, TName>[], Error>;
+/** `refetchInterval` is in ms; `0`, a negative number or `false` turns polling off. */
+export type ListQueryOptions = {
+    enabled?: MaybeRefOrGetter<boolean>;
+    refetchInterval?: MaybeRefOrGetter<number | false>;
+};
 /**
  * Fetch a page of records, reactively. `resource` may be a ref or getter, so a
  * changing resource re-keys the query.
  */
-export declare function useGetList<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(resource: MaybeRefOrGetter<TName>, params?: MaybeRefOrGetter<GetListParams>, options?: {
-    enabled?: MaybeRefOrGetter<boolean>;
-}): import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").GetListResult<import("@chelone/core").RecordOf<TResources, TName>>, Error>;
+export declare function useGetList<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(resource: MaybeRefOrGetter<TName>, params?: MaybeRefOrGetter<GetListParams>, options?: ListQueryOptions): import("@tanstack/vue-query").UseQueryReturnType<import("@chelone/core").GetListResult<import("@chelone/core").RecordOf<TResources, TName>>, Error>;
 /** Fetch the records whose `target` field equals `id`, reactively. */
 export declare function useGetManyReference<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(resource: TName, params: MaybeRefOrGetter<GetManyReferenceParams>, options?: {
     enabled?: MaybeRefOrGetter<boolean>;

package/dist/data/queries.js

@@ -32,10 +32,14 @@ function useGetManyAggregate(resource, params, options = {}) {
 function useGetList(resource, params = {}, options = {}) {
   const ctx = useCheloneContext();
   return useQuery(
-    computed(() => ({
-      ...getListOptions(ctx, toValue(resource), toValue(params)),
-      enabled: options.enabled === void 0 ? true : toValue(options.enabled)
-    }))
+    computed(() => {
+      const interval = toValue(options.refetchInterval);
+      return {
+        ...getListOptions(ctx, toValue(resource), toValue(params)),
+        enabled: options.enabled === void 0 ? true : toValue(options.enabled),
+        refetchInterval: typeof interval === "number" && interval > 0 ? interval : false
+      };
+    })
   );
 }
 function useGetManyReference(resource, params, options = {}) {