@chelone/vue 0.4.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/admin/admin-shell.vue.js

@@ -4,7 +4,7 @@ import { useRoute, useRouter, START_LOCATION } from "vue-router";
 import _sfc_main$6 from "../components/admin/layout/layout.vue.js";
 import _sfc_main$1 from "../components/admin/layout/theme-provider.vue.js";
 import _sfc_main$4 from "../components/admin/auth/login-page.vue.js";
-import _sfc_main$3 from "../components/ui/spinner.vue.js";
+import _sfc_main$3 from "../components/ui/spinner2.vue.js";
 import { useBasename } from "../router/adapter.js";
 import { useWatchDataErrors } from "../auth/permissions-hooks.js";
 import { useAuthGate } from "./auth-gate.js";

package/dist/components/admin/auth/auth-callback.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, unref, openBlock, createBlock, createElementBlock, createVNode } from "vue";
 import { useHandleAuthCallback } from "../../../admin/auth-gate.js";
-import _sfc_main$2 from "../../ui/spinner.vue.js";
+import _sfc_main$2 from "../../ui/spinner2.vue.js";
 import _sfc_main$1 from "./auth-error.vue.js";
 const _hoisted_1 = {
   key: 1,

package/dist/components/admin/auth/login-form.vue.js

@@ -6,7 +6,7 @@ import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import { useLogin } from "../../../auth/auth-hooks.js";
 import _sfc_main$2 from "../../ui/button.vue.js";
-import _sfc_main$3 from "../../ui/spinner.vue.js";
+import _sfc_main$3 from "../../ui/spinner2.vue.js";
 import _sfc_main$1 from "../inputs/text-input.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "login-form",

package/dist/components/admin/auth/login-with-email.vue.js

@@ -6,7 +6,7 @@ import { useForm } from "../../../form/use-form.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import _sfc_main$3 from "../../ui/button.vue.js";
-import _sfc_main$4 from "../../ui/spinner.vue.js";
+import _sfc_main$4 from "../../ui/spinner2.vue.js";
 import _sfc_main$2 from "../inputs/password-input.vue.js";
 import _sfc_main$1 from "../inputs/text-input.vue.js";
 import { LogInIcon } from "./icons.js";

package/dist/components/admin/feedback/loading-indicator.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, computed, openBlock, createElementBlock, normalizeClas
 import { useLoading, useRefresh } from "../../../data/use-refresh.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
-import _sfc_main$2 from "../../ui/spinner.vue.js";
+import _sfc_main$2 from "../../ui/spinner2.vue.js";
 import { RotateCwIcon } from "../buttons/icons.js";
 import _sfc_main$1 from "../common/icon-button-with-tooltip.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/admin/feedback/spinner.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, normalizeClass, createCommentVNode } from "vue";
 import { cn } from "../../../lib/utils.js";
-import _sfc_main$1 from "../../ui/spinner.vue.js";
+import _sfc_main$1 from "../../ui/spinner2.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "spinner",
   props: {

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/admin/fields/select-field.vue.d.ts

@@ -1,20 +1,31 @@
-import type { LooseRecord, SourceProp } from "@chelone/core";
+import type { LooseRecord, SourcePath, SourceProp } from "@chelone/core";
 import type { ChoiceRecord, OptionText } from "../../../choices/use-choices.js";
 /** Props for {@link SelectField}. */
-export interface SelectFieldProps {
+export interface SelectFieldProps<TChoice extends ChoiceRecord = ChoiceRecord> {
     source: SourceProp;
     record?: LooseRecord;
     defaultValue?: unknown;
     empty?: string;
     /** The list of choices to map the value against. */
-    choices?: readonly ChoiceRecord[];
+    choices?: readonly TChoice[];
     /** The value path on a choice. Default `'id'`. */
-    optionValue?: string;
+    optionValue?: SourcePath<TChoice>;
     /** The display path or a formatter. Default `'name'`. */
-    optionText?: OptionText;
+    optionText?: OptionText<TChoice>;
     /** Translate a string-path text through the catalog. Default `true`. */
     translateChoice?: boolean;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<SelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SelectFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: <TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & SelectFieldProps<TChoice> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/admin/fields/select-field.vue.js

@@ -11,7 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     empty: {},
     choices: {},
     optionValue: {},
-    optionText: {},
+    optionText: { type: Function },
     translateChoice: { type: Boolean },
     class: {}
   },

package/dist/components/admin/inputs/checkbox-group-input.vue.d.ts

@@ -1,13 +1,20 @@
+import type { ChoiceRecord } from "../../../choices/use-choices.js";
 import type { ChoiceInputBaseProps } from "./choice-input-props.js";
 /** Props for {@link CheckboxGroupInput}. */
-export interface CheckboxGroupInputProps extends ChoiceInputBaseProps {
+export interface CheckboxGroupInputProps<TChoice extends ChoiceRecord = ChoiceRecord> extends ChoiceInputBaseProps<TChoice> {
     /** Lay the checkboxes out horizontally instead of stacked. */
     row?: boolean;
 }
-declare const _default: import("vue").DefineComponent<CheckboxGroupInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxGroupInputProps> & Readonly<{}>, {
-    label: string | false;
-    optionValue: string;
-    row: boolean;
-    disableValue: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: <TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & CheckboxGroupInputProps<TChoice> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/admin/inputs/checkbox-group-input.vue.js

@@ -19,8 +19,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     source: {},
     choices: {},
     optionText: {},
-    optionValue: { default: "id" },
-    disableValue: { default: "disabled" },
+    optionValue: {},
+    disableValue: {},
     translateChoice: { type: Boolean },
     label: { type: [String, Boolean], default: void 0 },
     helperText: {},

package/dist/components/admin/inputs/datagrid-input.vue.d.ts

@@ -1,10 +1,25 @@
+import type { ChoiceRecord } from "../../../choices/use-choices.js";
 import type { ChoiceInputBaseProps } from "./choice-input-props.js";
-/** Props for {@link DatagridInput}. */
-export interface DatagridInputProps extends ChoiceInputBaseProps {
+/**
+ * Props for {@link DatagridInput}.
+ *
+ * `disableValue` comes in through the shared base and is unused: a datagrid row
+ * is never disabled. The React twin has no `disableValue` prop at all.
+ */
+export interface DatagridInputProps<TChoice extends ChoiceRecord = ChoiceRecord> extends ChoiceInputBaseProps<TChoice> {
     /** Column header for the choice column. Default empty. */
     optionLabel?: string;
 }
-declare const _default: import("vue").DefineComponent<DatagridInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DatagridInputProps> & Readonly<{}>, {
-    optionValue: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: <TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DatagridInputProps<TChoice> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/admin/inputs/datagrid-input.vue.js

@@ -12,14 +12,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     optionLabel: {},
     source: {},
     choices: {},
-    optionText: {},
-    optionValue: { default: "id" },
+    optionText: { type: Function },
+    optionValue: {},
     disableValue: {},
     translateChoice: { type: Boolean },
     label: { type: [String, Boolean] },
     helperText: {},
     defaultValue: {},
-    validate: {},
+    validate: { type: [Function, Array] },
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     class: {}
@@ -32,6 +32,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       componentName: "DatagridInput",
       choices: props.choices,
       source: props.source,
+      // The React twin defaults `optionText` to `"name"` in its own destructuring,
+      // so a `<DatagridInput>` under a reference wrapper labels the `name` field
+      // rather than the record representation. The literal has to be cast: a
+      // `SourcePath<TChoice>` is deferred while `TChoice` is open.
       optionText: props.optionText ?? "name",
       optionValue: props.optionValue,
       disableValue: props.disableValue,

package/dist/components/admin/inputs/radio-button-group-input.vue.d.ts

@@ -1,13 +1,20 @@
+import type { ChoiceRecord } from "../../../choices/use-choices.js";
 import type { ChoiceInputBaseProps } from "./choice-input-props.js";
 /** Props for {@link RadioButtonGroupInput}. */
-export interface RadioButtonGroupInputProps extends ChoiceInputBaseProps {
+export interface RadioButtonGroupInputProps<TChoice extends ChoiceRecord = ChoiceRecord> extends ChoiceInputBaseProps<TChoice> {
     /** Lay the radios out horizontally instead of stacked. */
     row?: boolean;
 }
-declare const _default: import("vue").DefineComponent<RadioButtonGroupInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RadioButtonGroupInputProps> & Readonly<{}>, {
-    label: string | false;
-    optionValue: string;
-    row: boolean;
-    disableValue: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: <TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & RadioButtonGroupInputProps<TChoice> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/admin/inputs/radio-button-group-input.vue.js

@@ -19,8 +19,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     source: {},
     choices: {},
     optionText: {},
-    optionValue: { default: "id" },
-    disableValue: { default: "disabled" },
+    optionValue: {},
+    disableValue: {},
     translateChoice: { type: Boolean },
     label: { type: [String, Boolean], default: void 0 },
     helperText: {},

package/dist/components/admin/list/count-spinner.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, unref, openBlock, createBlock, normalizeClass, createCommentVNode } from "vue";
-import _sfc_main$1 from "../../ui/spinner.vue.js";
+import _sfc_main$1 from "../../ui/spinner2.vue.js";
 import { useTimeout } from "../feedback/use-timeout.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "count-spinner",

package/dist/components/admin/supabase/forgot-password-form.vue.js

@@ -6,7 +6,7 @@ import { useForm } from "../../../form/use-form.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import _sfc_main$2 from "../../ui/button.vue.js";
-import _sfc_main$3 from "../../ui/spinner.vue.js";
+import _sfc_main$3 from "../../ui/spinner2.vue.js";
 import _sfc_main$1 from "../inputs/text-input.vue.js";
 import { useResetPassword } from "./use-password-recovery.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/admin/supabase/set-password-form.vue.js

@@ -6,7 +6,7 @@ import { useForm } from "../../../form/use-form.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import _sfc_main$2 from "../../ui/button.vue.js";
-import _sfc_main$3 from "../../ui/spinner.vue.js";
+import _sfc_main$3 from "../../ui/spinner2.vue.js";
 import _sfc_main$1 from "../inputs/password-input.vue.js";
 import { useSupabaseUrlTokens, useSetPassword } from "./use-password-recovery.js";
 const _hoisted_1 = {

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;
+    };
+};