@chelone/vue 0.0.0-stage → 0.1.1

package/dist/components/admin/view/tabbed-show-layout.vue.d.ts

@@ -0,0 +1,81 @@
+/**
+ * `<TabbedShowLayout>` — groups a show view's fields into tabs, each field
+ * labeled from its `source`. The Vue twin of `@chelone/react`'s
+ * `views/tabbed-show-layout.tsx`. Tabs are the `<TabbedShowLayoutTab>` vnodes of
+ * the default slot, flattened through fragments (`v-for`), so this is a render
+ * function. Renders nothing until the record context has a record.
+ *
+ * With `syncWithLocation` (the default) the show route ends in a catch-all and
+ * each tab is a path under the show route: the pathname minus the catch-all's
+ * segments. A tab's segment is its `path`, else its index for every tab after
+ * the first, else `''` for the first. The active tab is the first whose path
+ * equals the pathname, else the first tab. The strip is native buttons: Vue
+ * ships no `ui/tabs`, as `TabbedFormHeader` is hand-rolled too.
+ */
+import { type Component, type SlotsType, type VNode } from "vue";
+/** Props for {@link TabbedShowLayout}. */
+export interface TabbedShowLayoutProps {
+    /** The gap between a tab's fields, in units of 4px. Defaults to 4. */
+    spacing?: number;
+    /**
+     * Follow the URL (default `true`): the active tab comes from the location
+     * under the show route and a change navigates there, keeping the query
+     * string. `false` keeps the active tab in local state.
+     */
+    syncWithLocation?: boolean;
+    /** The active tab's URL segment. Overrides both modes. */
+    value?: string;
+}
+/** What a tab list needs to draw one tab. */
+export interface TabbedShowLayoutTabDescriptor {
+    /** The tab's URL segment, also what `goToTab` takes. */
+    value: string;
+    label: string;
+    icon?: Component;
+    count?: number;
+}
+/** The scope of the `#tabs` slot. */
+export interface TabbedShowLayoutTabsSlotProps {
+    tabs: TabbedShowLayoutTabDescriptor[];
+    /** The active tab's URL segment. */
+    activeTab: string;
+    goToTab: (value: string) => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    spacing: {
+        type: NumberConstructor;
+        default: number;
+    };
+    syncWithLocation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    spacing: {
+        type: NumberConstructor;
+        default: number;
+    };
+    syncWithLocation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    value: string;
+    syncWithLocation: boolean;
+    spacing: number;
+}, SlotsType<{
+    default?: () => VNode[];
+    tabs?: (scope: TabbedShowLayoutTabsSlotProps) => VNode[];
+    divider?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/admin/view/tabbed-show-layout.vue.js

@@ -0,0 +1,129 @@
+import { defineComponent, inject, ref, provide, h, Fragment } from "vue";
+import { splatBase, decodePath } from "../../../form/splat-base.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useRouterAdapter } from "../../../router/adapter.js";
+import _sfc_main$1, { TabbedShowLayoutContextKey } from "./tabbed-show-layout-tab.vue.js";
+function collectTabs(nodes, out = []) {
+  for (const node of nodes) {
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      collectTabs(node.children, out);
+    } else if (node.type === _sfc_main$1) {
+      out.push(node);
+    }
+  }
+  return out;
+}
+const encodeSegment = (segment) => segment.split("/").map(encodeURIComponent).join("/");
+const samePath = (path) => path.replace(/\/+$/, "").toLowerCase();
+let nextId = 0;
+const _sfc_main = defineComponent({
+  name: "TabbedShowLayout",
+  props: {
+    spacing: { type: Number, default: 4 },
+    syncWithLocation: { type: Boolean, default: true },
+    value: { type: String, default: void 0 }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const adapter = useRouterAdapter();
+    const location = adapter.useLocation();
+    const params = adapter.useParams();
+    const navigate = adapter.useNavigate();
+    const translate = useTranslate();
+    const record = inject(RecordContextKey, null);
+    const local = ref();
+    const id = `chelone-show-tabs-${nextId++}`;
+    provide(TabbedShowLayoutContextKey, {
+      get spacing() {
+        return props.spacing;
+      },
+      divider: () => slots.divider?.()
+    });
+    return () => {
+      if (!record?.value) return null;
+      const tabNodes = collectTabs(slots.default?.() ?? []);
+      const segments = tabNodes.map(
+        (node, index) => node.props?.path != null ? String(node.props.path) : index > 0 ? String(index) : ""
+      );
+      const base = splatBase(
+        location.value.pathname,
+        params.value["*"] ?? ""
+      );
+      const segmentPath = (segment) => segment === "" ? base || "/" : `${base}/${encodeSegment(segment)}`;
+      const here = samePath(decodePath(location.value.pathname));
+      const requested = props.value ?? (props.syncWithLocation ? segments.find(
+        (segment) => samePath(decodePath(segmentPath(segment))) === here
+      ) : local.value);
+      const active = requested !== void 0 && segments.includes(requested) ? requested : segments[0] ?? "";
+      const goToTab = (next) => {
+        if (props.syncWithLocation) {
+          navigate(`${segmentPath(next)}${location.value.search}`);
+        } else {
+          local.value = next;
+        }
+      };
+      const descriptors = tabNodes.map(
+        (node, index) => ({
+          value: segments[index],
+          label: String(node.props?.label),
+          icon: node.props?.icon,
+          count: node.props?.count
+        })
+      );
+      const activeIndex = segments.indexOf(active);
+      const activeNode = tabNodes[activeIndex];
+      return h("div", { "data-slot": "tabbed-show-layout" }, [
+        slots.tabs ? slots.tabs({ tabs: descriptors, activeTab: active, goToTab }) : h(
+          "div",
+          {
+            role: "tablist",
+            class: "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground"
+          },
+          descriptors.map((tab, index) => {
+            const selected = tab.value === active;
+            return h(
+              "button",
+              {
+                key: tab.value,
+                type: "button",
+                role: "tab",
+                id: `${id}-tab-${index}`,
+                "aria-selected": selected,
+                "aria-controls": selected ? `${id}-panel` : void 0,
+                "data-state": selected ? "active" : "inactive",
+                class: cn(
+                  "inline-flex h-[calc(100%-1px)] items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0",
+                  selected && "bg-background text-foreground shadow-sm"
+                ),
+                onClick: () => goToTab(tab.value)
+              },
+              [
+                tab.icon ? h(tab.icon) : null,
+                h("span", [
+                  translate(tab.label, { _: tab.label }),
+                  tab.count != null ? ` (${tab.count})` : null
+                ])
+              ]
+            );
+          })
+        ),
+        activeNode ? h(
+          "div",
+          {
+            key: active,
+            role: "tabpanel",
+            id: `${id}-panel`,
+            "aria-labelledby": slots.tabs ? void 0 : `${id}-tab-${activeIndex}`,
+            class: "mt-2"
+          },
+          [activeNode]
+        ) : null
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/tabbed-show-layout2.vue.js

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

package/dist/components/admin/view/translatable-fields-tab-content.vue.d.ts

@@ -0,0 +1,41 @@
+import { type VNode } from "vue";
+/** Props for {@link TranslatableFieldsTabContent}. */
+export interface TranslatableFieldsTabContentProps {
+    locale: string;
+    /** Prefix that keeps the ids of two groups apart. Defaults to `""`. */
+    groupKey?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    locale: {
+        type: StringConstructor;
+        required: true;
+    };
+    groupKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    locale: {
+        type: StringConstructor;
+        required: true;
+    };
+    groupKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    groupKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/admin/view/translatable-fields-tab-content.vue.js

@@ -0,0 +1,64 @@
+import { getRecordForLocale, createLocaleSourceScope } from "@chelone/core";
+import { defineComponent, inject, computed, Text, h, Comment, Fragment } from "vue";
+import { provideSourceScope, useSourceScope } from "../../../form/form-context.js";
+import { useTranslatableContext } from "../../../i18n/use-translatable.js";
+import { cn } from "../../../lib/utils.js";
+import { RecordContextKey, provideRecordContext } from "../../../record/record-context.js";
+import _sfc_main$1 from "./labeled.vue.js";
+function flatNodes(nodes, out = []) {
+  for (const node of nodes) {
+    if (node.type === Comment) continue;
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      flatNodes(node.children, out);
+    } else {
+      out.push(node);
+    }
+  }
+  return out;
+}
+const _sfc_main = defineComponent({
+  name: "TranslatableFieldsTabContent",
+  props: {
+    locale: { type: String, required: true },
+    groupKey: { type: String, default: "" },
+    class: { type: String, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const translatable = useTranslatableContext();
+    const ambient = inject(RecordContextKey, void 0);
+    const hidden = computed(
+      () => translatable.selectedLocale.value !== props.locale
+    );
+    provideRecordContext(
+      computed(
+        () => getRecordForLocale(ambient?.value, props.locale, translatable.locales)
+      )
+    );
+    provideSourceScope(createLocaleSourceScope(useSourceScope(), props.locale));
+    return () => {
+      const nodes = flatNodes(slots.default?.() ?? []);
+      const labelEach = nodes.filter((node) => node.type !== Text).length > 1;
+      return h(
+        "div",
+        {
+          role: "tabpanel",
+          "data-slot": "translatable-fields-tab-content",
+          id: `translatable-content-${props.groupKey}${props.locale}`,
+          "aria-labelledby": `translatable-header-${props.groupKey}${props.locale}`,
+          hidden: hidden.value,
+          class: cn("flex-1 outline-none", props.class)
+        },
+        labelEach ? nodes.map(
+          (node, index) => node.type === Text ? node : h(
+            _sfc_main$1,
+            { key: node.key ?? index },
+            { default: () => node }
+          )
+        ) : nodes
+      );
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/translatable-fields-tab-content2.vue.js

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

package/dist/components/admin/view/translatable-fields-tab.vue.d.ts

@@ -0,0 +1,18 @@
+/** Props for {@link TranslatableFieldsTab}. */
+export interface TranslatableFieldsTabProps {
+    locale: string;
+    /** Prefix that keeps the ids of two groups apart. Defaults to `""`. */
+    groupKey?: string;
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TranslatableFieldsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TranslatableFieldsTabProps> & Readonly<{}>, {
+    groupKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/view/translatable-fields-tab.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent, computed, openBlock, createElementBlock, unref, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { useTranslatableContext } from "../../../i18n/use-translatable.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+const _hoisted_1 = ["id", "aria-selected", "aria-controls", "data-state"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "translatable-fields-tab",
+  props: {
+    locale: {},
+    groupKey: { default: "" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const translate = useTranslate();
+    const translatable = useTranslatableContext();
+    const selected = computed(
+      () => translatable.selectedLocale.value === props.locale
+    );
+    const label = computed(
+      () => translate(`ra.locales.${props.locale}`, {
+        _: props.locale.charAt(0).toUpperCase() + props.locale.slice(1)
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        role: "tab",
+        "data-slot": "translatable-fields-tab",
+        id: `translatable-header-${__props.groupKey}${__props.locale}`,
+        "aria-selected": selected.value,
+        "aria-controls": `translatable-content-${__props.groupKey}${__props.locale}`,
+        "data-state": selected.value ? "active" : "inactive",
+        class: normalizeClass(
+          unref(cn)(
+            "inline-flex items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+            props.class
+          )
+        ),
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(translatable).selectLocale(__props.locale))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(label.value), 1)
+        ])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/translatable-fields-tab2.vue.js

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

package/dist/components/admin/view/translatable-fields-tabs.vue.d.ts

@@ -0,0 +1,10 @@
+/** Props for {@link TranslatableFieldsTabs}. */
+export interface TranslatableFieldsTabsProps {
+    /** Prefix that keeps the ids of two groups apart. Defaults to `""`. */
+    groupKey?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<TranslatableFieldsTabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TranslatableFieldsTabsProps> & Readonly<{}>, {
+    groupKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/view/translatable-fields-tabs.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock } from "vue";
+import { useTranslatableContext } from "../../../i18n/use-translatable.js";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$1 from "./translatable-fields-tab.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "translatable-fields-tabs",
+  props: {
+    groupKey: { default: "" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const translatable = useTranslatableContext();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "tablist",
+        "data-slot": "translatable-fields-tabs",
+        class: normalizeClass(
+          unref(cn)(
+            "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
+            props.class
+          )
+        )
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(translatable).locales, (locale) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: locale,
+            locale,
+            "group-key": __props.groupKey
+          }, null, 8, ["locale", "group-key"]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/translatable-fields-tabs2.vue.js

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

package/dist/components/admin/view/translatable-fields.vue.d.ts

@@ -0,0 +1,30 @@
+/** Props for {@link TranslatableFields}. */
+export interface TranslatableFieldsProps {
+    /** The locales to show, one tab each. Must not be empty. */
+    locales: readonly string[];
+    /**
+     * The locale selected first. Ignored when it is not one of `locales`; without
+     * it the app locale is used when listed, else the first locale.
+     */
+    defaultLocale?: string;
+    /** Prefix that keeps the ids of two groups apart. Defaults to `""`. */
+    groupKey?: string;
+    /** The record to show. Defaults to the ambient record. */
+    record?: Record<string, unknown>;
+    /** The resource the fields belong to. Defaults to the ambient resource. */
+    resource?: string;
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TranslatableFieldsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TranslatableFieldsProps> & Readonly<{}>, {
+    groupKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    selector?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/view/translatable-fields.vue.js

@@ -0,0 +1,65 @@
+import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createVNode, Fragment, renderList, createBlock, withCtx } from "vue";
+import { useTranslatable, provideTranslatable } from "../../../i18n/use-translatable.js";
+import { cn } from "../../../lib/utils.js";
+import { RecordContextKey, provideRecordContext } from "../../../record/record-context.js";
+import { useResourceContext, provideResourceContext } from "../../../resource-context.js";
+import _sfc_main$2 from "./translatable-fields-tab-content.vue.js";
+import _sfc_main$1 from "./translatable-fields-tabs.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "translatable-fields",
+  props: {
+    locales: {},
+    defaultLocale: {},
+    groupKey: { default: "" },
+    record: {},
+    resource: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ambient = inject(RecordContextKey, void 0);
+    if (!props.record && !ambient) {
+      throw new Error(
+        "<TranslatableFields> needs a record: pass a record prop or render it inside a record context"
+      );
+    }
+    const resource = useResourceContext({ resource: props.resource });
+    if (!resource) {
+      throw new Error(
+        "<TranslatableFields> needs a resource: pass a resource prop or render it inside a resource context"
+      );
+    }
+    provideResourceContext(resource);
+    provideRecordContext(computed(() => props.record ?? ambient?.value));
+    const translatable = useTranslatable({
+      locales: () => props.locales,
+      defaultLocale: () => props.defaultLocale
+    });
+    provideTranslatable(translatable);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "translatable-fields",
+        class: normalizeClass(unref(cn)("flex flex-col gap-2", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "selector", {}, () => [
+          createVNode(_sfc_main$1, { "group-key": __props.groupKey }, null, 8, ["group-key"])
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(translatable).locales, (locale) => {
+          return openBlock(), createBlock(_sfc_main$2, {
+            key: locale,
+            locale,
+            "group-key": __props.groupKey
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["locale", "group-key"]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/translatable-fields2.vue.js

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