@chelone/vue 0.4.0 → 0.6.0

package/dist/kanban.d.ts

@@ -0,0 +1 @@
+export { default as KanbanBoard, type KanbanBoardProps, } from "./components/kanban/kanban-board.vue.js";

package/dist/kanban.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./components/kanban/kanban-board.vue.js";
+export {
+  default2 as KanbanBoard
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chelone/vue",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,6 +25,10 @@
       "types": "./dist/monaco.d.ts",
       "default": "./dist/monaco.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban.d.ts",
+      "default": "./dist/kanban.js"
+    },
     "./supabase": {
       "types": "./dist/supabase.d.ts",
       "default": "./dist/supabase.js"
@@ -57,9 +61,11 @@
   "dependencies": {
     "cronstrue": "^3.24.0",
     "libphonenumber-js": "^1.13.8",
-    "@chelone/core": "0.4.0"
+    "@chelone/core": "0.6.0"
   },
   "peerDependencies": {
+    "@dnd-kit/dom": "^0.5.3",
+    "@dnd-kit/vue": "^0.5.3",
     "@guolao/vue-monaco-editor": "^1.6.0",
     "@milkdown/crepe": "^7.23.0",
     "@milkdown/kit": "^7.23.0",
@@ -76,12 +82,18 @@
     "terra-draw-maplibre-gl-adapter": "^1.5.0",
     "vue": "^3.4.0",
     "vue-router": "^4.0.0",
-    "@chelone/supabase": "0.4.0"
+    "@chelone/supabase": "0.6.0"
   },
   "peerDependenciesMeta": {
     "@chelone/supabase": {
       "optional": true
     },
+    "@dnd-kit/dom": {
+      "optional": true
+    },
+    "@dnd-kit/vue": {
+      "optional": true
+    },
     "@guolao/vue-monaco-editor": {
       "optional": true
     },
@@ -124,6 +136,8 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.0",
+    "@dnd-kit/dom": "^0.5.3",
+    "@dnd-kit/vue": "^0.5.3",
     "@guolao/vue-monaco-editor": "^1.6.0",
     "@milkdown/crepe": "^7.23.0",
     "@milkdown/kit": "^7.23.0",
@@ -150,7 +164,7 @@
     "vue-router": "^4.0.0",
     "vue-tsc": "^2.0.0",
     "zod": "^3.24.0",
-    "@chelone/supabase": "0.4.0"
+    "@chelone/supabase": "0.6.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json && node ../../scripts/strip-dts-css-imports.mjs dist && node ../../scripts/dts-extensions.mjs dist",

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

@@ -1,275 +0,0 @@
-import { defineComponent, computed, getCurrentInstance, shallowRef, ref, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode, renderSlot, withModifiers, createVNode, withCtx, createBlock, createTextVNode } from "vue";
-import { buildKanbanBuckets, planKanbanMove, getAtPath } from "@chelone/core";
-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$3 from "../../ui/button.vue.js";
-import { useMenuAccess } from "../layout/use-menu-access.js";
-import { ArrowRightLeftIcon } from "./list-icons.js";
-import { useNavigate, useCreatePath } from "../../../router/nav-composables.js";
-import _sfc_main$1 from "../../ui/dropdown-menu/dropdown-menu.vue.js";
-import _sfc_main$2 from "../../ui/dropdown-menu/dropdown-menu-trigger.vue.js";
-import _sfc_main$4 from "../../ui/dropdown-menu/dropdown-menu-content.vue.js";
-import _sfc_main$5 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 = ["data-over", "onDragover", "onDragleave", "onDrop"];
-const _hoisted_5 = {
-  key: 0,
-  "data-slot": "kanban-empty",
-  class: "px-1 py-2 text-sm text-muted-foreground"
-};
-const _hoisted_6 = ["data-record-id", "data-dragging", "draggable", "onClick", "onKeydown", "onDragstart"];
-const _hoisted_7 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-const _hoisted_8 = {
-  "data-slot": "kanban-card-title",
-  class: "font-medium"
-};
-const _hoisted_9 = {
-  key: 0,
-  "data-slot": "kanban-card-description",
-  class: "text-muted-foreground"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __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 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)
-    );
-    const grabbed = shallowRef(null);
-    const draggingId = ref();
-    const overColumn = ref();
-    function clearDrag() {
-      grabbed.value = null;
-      draggingId.value = void 0;
-      overColumn.value = void 0;
-    }
-    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 onDragStart(event, record) {
-      if (!draggable.value || !event.dataTransfer) return;
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", String(record.id));
-      grabbed.value = record;
-      draggingId.value = String(record.id);
-    }
-    function onDragOver(event, columnId) {
-      if (!grabbed.value) return;
-      event.preventDefault();
-      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-      overColumn.value = columnId;
-    }
-    function onDragLeave(event, columnId) {
-      const into = event.relatedTarget;
-      const area = event.currentTarget;
-      if (into instanceof Node && area?.contains(into)) return;
-      if (overColumn.value === columnId) overColumn.value = void 0;
-    }
-    function onDrop(event, columnId) {
-      const record = grabbed.value;
-      if (!record || !draggable.value) return;
-      event.preventDefault();
-      clearDrag();
-      move(record, columnId);
-    }
-    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(), createElementBlock("div", {
-        "data-slot": "kanban-board",
-        class: normalizeClass(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)
-            ]),
-            createElementVNode("div", {
-              "data-slot": "kanban-column-cards",
-              "data-over": overColumn.value === column.id ? "" : void 0,
-              class: "flex min-h-16 flex-col gap-2 rounded-md data-[over]:bg-accent",
-              onDragover: ($event) => onDragOver($event, column.id),
-              onDragleave: ($event) => onDragLeave($event, column.id),
-              onDrop: ($event) => onDrop($event, column.id)
-            }, [
-              records.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(emptyLabel.value), 1)) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(records, (record) => {
-                return openBlock(), createElementBlock("div", {
-                  key: record.id,
-                  role: "button",
-                  tabindex: "0",
-                  "data-slot": "kanban-card",
-                  "data-record-id": String(record.id),
-                  "data-dragging": draggingId.value === String(record.id) ? "" : void 0,
-                  draggable: draggable.value,
-                  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),
-                  onDragstart: ($event) => onDragStart($event, record),
-                  onDragend: clearDrag
-                }, [
-                  createElementVNode("div", _hoisted_7, [
-                    _ctx.$slots.card ? renderSlot(_ctx.$slots, "card", {
-                      key: 0,
-                      record
-                    }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      createElementVNode("span", _hoisted_8, toDisplayString(titleOf(record)), 1),
-                      !isEmpty(textOf(record, props.descriptionSource)) ? (openBlock(), createElementBlock("span", _hoisted_9, 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$1), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(_sfc_main$2), null, {
-                          default: withCtx(() => [
-                            createVNode(_sfc_main$3, {
-                              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$4), { align: "end" }, {
-                          default: withCtx(() => [
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(othersOf(column.id), (other) => {
-                              return openBlock(), createBlock(unref(_sfc_main$5), {
-                                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)
-                ], 40, _hoisted_6);
-              }), 128))
-            ], 40, _hoisted_4)
-          ], 10, _hoisted_1);
-        }), 128))
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};