@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-WLKOJFOC.mjs

@@ -0,0 +1,120 @@
+import { defineComponent, ref, computed, watch, onBeforeUnmount, h } from 'vue';
+import { classNames, coerceClassValue, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses, extractMentionQuery } from '@expcat/tigercat-core';
+
+// src/components/Mentions.ts
+var Mentions = defineComponent({
+  name: "TigerMentions",
+  props: {
+    modelValue: { type: String, default: "" },
+    prefix: { type: String, default: "@" },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    rows: { type: Number, default: 3 }
+  },
+  emits: ["update:modelValue", "change", "select"],
+  setup(props, { emit, attrs }) {
+    const isOpen = ref(false);
+    const activeIndex = ref(0);
+    const mentionStartPos = ref(-1);
+    const query = ref("");
+    const textareaRef = ref(null);
+    const containerRef = ref(null);
+    const filteredOptions = computed(() => {
+      if (!query.value) return props.options || [];
+      const q = query.value.toLowerCase();
+      return (props.options || []).filter((o) => !o.disabled && o.label.toLowerCase().includes(q));
+    });
+    function handleInput(e) {
+      const target = e.target;
+      const value = target.value;
+      emit("update:modelValue", value);
+      emit("change", value);
+      const cursorPos = target.selectionStart ?? value.length;
+      const result = extractMentionQuery(value, cursorPos, props.prefix);
+      if (result && filteredOptions.value.length > 0) {
+        query.value = result.query;
+        mentionStartPos.value = result.startPos;
+        isOpen.value = true;
+        activeIndex.value = 0;
+      } else {
+        isOpen.value = false;
+      }
+    }
+    function selectOption(option) {
+      if (option.disabled) return;
+      const val = props.modelValue || "";
+      const before = val.slice(0, mentionStartPos.value);
+      const after = val.slice(textareaRef.value?.selectionStart ?? val.length);
+      const newValue = `${before}${props.prefix}${option.value} ${after}`;
+      emit("update:modelValue", newValue);
+      emit("change", newValue);
+      emit("select", option);
+      isOpen.value = false;
+    }
+    function handleKeydown(e) {
+      if (!isOpen.value) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        activeIndex.value = (activeIndex.value + 1) % filteredOptions.value.length;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        activeIndex.value = (activeIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length;
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = filteredOptions.value[activeIndex.value];
+        if (opt) selectOption(opt);
+      } else if (e.key === "Escape") {
+        isOpen.value = false;
+      }
+    }
+    function onClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        isOpen.value = false;
+      }
+    }
+    watch(isOpen, (val) => {
+      if (val) document.addEventListener("mousedown", onClickOutside);
+      else document.removeEventListener("mousedown", onClickOutside);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onClickOutside);
+    });
+    return () => {
+      const wrapperClass = classNames("relative", coerceClassValue(attrs.class));
+      return h("div", { ref: containerRef, class: wrapperClass }, [
+        h("textarea", {
+          ref: textareaRef,
+          value: props.modelValue,
+          class: getMentionsInputClasses(props.size, props.disabled),
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          rows: props.rows,
+          onInput: handleInput,
+          onKeydown: handleKeydown
+        }),
+        isOpen.value && filteredOptions.value.length > 0 ? h(
+          "div",
+          { class: mentionsDropdownClasses, role: "listbox" },
+          filteredOptions.value.map(
+            (opt, i) => h(
+              "div",
+              {
+                key: opt.value,
+                class: getMentionsOptionClasses(i === activeIndex.value, !!opt.disabled),
+                role: "option",
+                "aria-selected": i === activeIndex.value,
+                onClick: () => selectOption(opt)
+              },
+              opt.label
+            )
+          )
+        ) : null
+      ]);
+    };
+  }
+});
+var Mentions_default = Mentions;
+
+export { Mentions, Mentions_default };

package/dist/{chunk-5XY7MXWC.mjs → chunk-WNF7XUX4.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, reactive, computed, provide, h } from 'vue';
-import { classNames, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
+import { defineComponent, reactive, ref, computed, provide, h } from 'vue';
+import { createFormHistory, canUndo, canRedo, classNames, getDependentFields, pushFormHistory, redoFormHistory, undoFormHistory, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
 
 // src/components/Form.ts
 var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
@@ -73,6 +73,27 @@ var Form = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Whether the form is in a loading state (prevents submit)
+     * @default false
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // v0.6.0 props
+    fieldDependencies: {
+      type: Object,
+      default: void 0
+    },
+    undoable: {
+      type: Boolean,
+      default: false
+    },
+    maxHistorySize: {
+      type: Number,
+      default: 50
     }
   },
   emits: {
@@ -88,6 +109,9 @@ var Form = defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = reactive([]);
     const fieldRules = reactive({});
+    const history = ref(
+      createFormHistory(props.model ?? {}, props.maxHistorySize)
+    );
     const registerFieldRules = (fieldName, rules) => {
       if (!fieldName) {
         return;
@@ -118,24 +142,29 @@ var Form = defineComponent({
     };
     const validateField$1 = async (fieldName, rulesOverride, trigger) => {
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
-      if (!effectiveFieldRules) {
-        return;
-      }
-      const error = await runFieldValidation(fieldName, rulesOverride, trigger);
-      const existingIndex = errors.findIndex((e) => e.field === fieldName);
-      const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
-      if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
-        if (existingIndex !== -1) {
-          errors.splice(existingIndex, 1);
+      if (effectiveFieldRules) {
+        const error = await runFieldValidation(fieldName, rulesOverride, trigger);
+        const existingIndex = errors.findIndex((e) => e.field === fieldName);
+        const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
+        if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
+          if (existingIndex !== -1) {
+            errors.splice(existingIndex, 1);
+          }
+          if (error) {
+            errors.push({
+              field: fieldName,
+              message: error
+            });
+          }
         }
-        if (error) {
-          errors.push({
-            field: fieldName,
-            message: error
-          });
+        emit("validate", fieldName, !error, error || void 0);
+      }
+      if (props.fieldDependencies) {
+        const dependents = getDependentFields(fieldName, props.fieldDependencies);
+        for (const dep of dependents) {
+          await validateField$1(dep);
         }
       }
-      emit("validate", fieldName, !error, error || void 0);
     };
     const validate = async () => {
       errors.splice(0, errors.length);
@@ -189,8 +218,44 @@ var Form = defineComponent({
     const resetFields = () => {
       clearValidate();
     };
+    const addField = (fieldName, defaultValue) => {
+      if (props.model && fieldName) {
+        props.model[fieldName] = defaultValue ?? null;
+      }
+    };
+    const removeField = (fieldName) => {
+      if (props.model && fieldName) {
+        delete props.model[fieldName];
+        clearValidate(fieldName);
+      }
+    };
+    const snapshotHistory = () => {
+      if (!props.undoable || !props.model) return;
+      history.value = pushFormHistory(history.value, props.model);
+    };
+    const undo = () => {
+      if (!props.undoable) return;
+      const result = undoFormHistory(history.value);
+      if (result && props.model) {
+        history.value = result;
+        Object.keys(props.model).forEach((k) => delete props.model[k]);
+        Object.assign(props.model, { ...result.present });
+      }
+    };
+    const redo = () => {
+      if (!props.undoable) return;
+      const result = redoFormHistory(history.value);
+      if (result && props.model) {
+        history.value = result;
+        Object.keys(props.model).forEach((k) => delete props.model[k]);
+        Object.assign(props.model, { ...result.present });
+      }
+    };
+    const canUndoNow = computed(() => props.undoable && canUndo(history.value));
+    const canRedoNow = computed(() => props.undoable && canRedo(history.value));
     const handleSubmit = async (event) => {
       event.preventDefault();
+      if (props.loading) return;
       const valid = await validate();
       emit("submit", { valid, values: props.model, errors });
     };
@@ -204,6 +269,7 @@ var Form = defineComponent({
       inlineMessage: props.inlineMessage,
       showRequiredAsterisk: props.showRequiredAsterisk,
       disabled: props.disabled,
+      loading: props.loading,
       errors,
       registerFieldRules,
       validateField: validateField$1,
@@ -215,13 +281,21 @@ var Form = defineComponent({
       validateFields,
       validateField: validateField$1,
       clearValidate,
-      resetFields
+      resetFields,
+      addField,
+      removeField,
+      undo,
+      redo,
+      snapshotHistory,
+      canUndo: canUndoNow,
+      canRedo: canRedoNow
     });
     const formClasses = computed(() => {
       return classNames(
         "tiger-form",
         `tiger-form--label-${props.labelPosition}`,
-        props.disabled && "tiger-form--disabled"
+        props.disabled && "tiger-form--disabled",
+        props.loading && "tiger-form--loading"
       );
     });
     return () => {

package/dist/{chunk-HFBRO2IF.mjs → chunk-XA5QMUZX.mjs}

@@ -1,4 +1,4 @@
-import { useTigerConfig } from './chunk-TRDG56CB.mjs';
+import { useTigerConfig } from './chunk-XP5M2GK7.mjs';
 import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
 import { mergeTigerLocale, getTaskBoardLabels, classNames, taskBoardBaseClasses, coerceClassValue, mergeStyleValues, resolveLocaleText, createTouchDragTracker, isWipExceeded, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardWipExceededClasses, taskBoardColumnHeaderClasses, taskBoardDropIndicatorClasses, taskBoardEmptyClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, getColumnDropIndex, setDragData, createColumnDragData, taskBoardCardClasses, taskBoardCardDraggingClasses, parseDragData, getDropIndex, reorderColumns, findColumnFromPoint, createCardDragData, moveCard } from '@expcat/tigercat-core';
 

package/dist/chunk-XFZZWZ6Q.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Resizable.ts
+var Resizable = vue.defineComponent({
+  name: "TigerResizable",
+  props: {
+    defaultWidth: { type: Number, default: void 0 },
+    defaultHeight: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 },
+    maxWidth: { type: Number, default: void 0 },
+    maxHeight: { type: Number, default: void 0 },
+    handles: {
+      type: Array,
+      default: () => [...tigercatCore.defaultResizeHandles]
+    },
+    axis: {
+      type: String,
+      default: "both"
+    },
+    disabled: { type: Boolean, default: false },
+    lockAspectRatio: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const width = vue.ref(props.defaultWidth);
+    const height = vue.ref(props.defaultHeight);
+    const draggingHandle = vue.ref(null);
+    const startMouseX = vue.ref(0);
+    const startMouseY = vue.ref(0);
+    const startWidth = vue.ref(0);
+    const startHeight = vue.ref(0);
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.resizableBaseClasses,
+        "group/resizable",
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = vue.computed(() => {
+      const s = {};
+      if (width.value != null) s.width = `${width.value}px`;
+      if (height.value != null) s.height = `${height.value}px`;
+      return s;
+    });
+    const onMouseDown = (handle, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingHandle.value = handle;
+      startMouseX.value = e.clientX;
+      startMouseY.value = e.clientY;
+      startWidth.value = width.value ?? 0;
+      startHeight.value = height.value ?? 0;
+      emit("resize-start", {
+        width: startWidth.value,
+        height: startHeight.value,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (!draggingHandle.value) return;
+      const mouseDeltaX = e.clientX - startMouseX.value;
+      const mouseDeltaY = e.clientY - startMouseY.value;
+      const { deltaWidth, deltaHeight } = tigercatCore.calculateResizeDelta(
+        draggingHandle.value,
+        mouseDeltaX,
+        mouseDeltaY,
+        props.axis
+      );
+      let newW = startWidth.value + deltaWidth;
+      let newH = startHeight.value + deltaHeight;
+      if (props.lockAspectRatio) {
+        const ar = tigercatCore.applyAspectRatio(newW, newH, startWidth.value, startHeight.value);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = tigercatCore.clampDimensions(
+        newW,
+        newH,
+        props.minWidth,
+        props.minHeight,
+        props.maxWidth,
+        props.maxHeight
+      );
+      width.value = clamped.width;
+      height.value = clamped.height;
+      emit("resize", {
+        width: clamped.width,
+        height: clamped.height,
+        handle: draggingHandle.value,
+        deltaX: clamped.width - startWidth.value,
+        deltaY: clamped.height - startHeight.value
+      });
+    };
+    const onMouseUp = () => {
+      if (draggingHandle.value) {
+        emit("resize-end", {
+          width: width.value ?? 0,
+          height: height.value ?? 0,
+          handle: draggingHandle.value,
+          deltaX: (width.value ?? 0) - startWidth.value,
+          deltaY: (height.value ?? 0) - startHeight.value
+        });
+      }
+      draggingHandle.value = null;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const handleNodes = props.handles.map(
+        (pos) => vue.h("div", {
+          class: tigercatCore.getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
+          "data-handle": pos,
+          onMousedown: (e) => onMouseDown(pos, e)
+        })
+      );
+      return vue.h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-resizable": ""
+        },
+        [...slots.default?.() || [], ...handleNodes]
+      );
+    };
+  }
+});
+var Resizable_default = Resizable;
+
+exports.Resizable = Resizable;
+exports.Resizable_default = Resizable_default;

package/dist/{chunk-HBZHIEDV.js → chunk-XGJWUZWS.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkNUFSJMVC_js = require('./chunk-NUFSJMVC.js');
-var chunkHNQZ5JRB_js = require('./chunk-HNQZ5JRB.js');
+var chunkTT5LWQIZ_js = require('./chunk-TT5LWQIZ.js');
+var chunkPBWSBNDS_js = require('./chunk-PBWSBNDS.js');
 var chunkAGAJJYP2_js = require('./chunk-AGAJJYP2.js');
-var chunkWC4B72TZ_js = require('./chunk-WC4B72TZ.js');
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkBYNMOQBB_js = require('./chunk-BYNMOQBB.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -106,13 +106,13 @@ var DataTableWithToolbar = vue.defineComponent({
     }
   },
   emits: {
-    "search-change": (value) => true,
-    search: (value) => true,
-    "filters-change": (filters) => true,
-    "bulk-action": (action, keys) => true,
-    "selection-change": (keys) => true,
-    "page-change": (current, pageSize) => true,
-    "page-size-change": (current, pageSize) => true
+    "search-change": (_value) => true,
+    search: (_value) => true,
+    "filters-change": (_filters) => true,
+    "bulk-action": (_action, _keys) => true,
+    "selection-change": (_keys) => true,
+    "page-change": (_current, _pageSize) => true,
+    "page-size-change": (_current, _pageSize) => true
   },
   setup(props, { attrs, emit }) {
     const internalSearch = vue.ref(props.toolbar?.defaultSearchValue ?? "");
@@ -212,7 +212,7 @@ var DataTableWithToolbar = vue.defineComponent({
             "div",
             { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]" },
             [
-              vue.h(chunkWC4B72TZ_js.Input, {
+              vue.h(chunkBYNMOQBB_js.Input, {
                 type: "search",
                 size: "sm",
                 modelValue: searchValue.value,
@@ -225,7 +225,7 @@ var DataTableWithToolbar = vue.defineComponent({
                 }
               }),
               showButton ? vue.h(
-                chunkDELTFEEJ_js.Button,
+                chunkU7CCKZAG_js.Button,
                 {
                   size: "sm",
                   variant: "primary",
@@ -245,7 +245,7 @@ var DataTableWithToolbar = vue.defineComponent({
           const clearable = filter.clearable !== false;
           leftNodes.push(
             vue.h("div", { class: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]" }, [
-              vue.h(chunkHNQZ5JRB_js.Select, {
+              vue.h(chunkPBWSBNDS_js.Select, {
                 size: "sm",
                 options: filter.options.map((opt) => ({
                   label: opt.label,
@@ -276,7 +276,7 @@ var DataTableWithToolbar = vue.defineComponent({
         (props.toolbar?.bulkActions ?? []).forEach((action) => {
           bulkChildren.push(
             vue.h(
-              chunkDELTFEEJ_js.Button,
+              chunkU7CCKZAG_js.Button,
               {
                 key: action.key,
                 size: "sm",
@@ -338,7 +338,8 @@ var DataTableWithToolbar = vue.defineComponent({
         },
         [
           renderToolbar(),
-          vue.h(chunkNUFSJMVC_js.Table, tableProps),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          vue.h(chunkTT5LWQIZ_js.Table, tableProps),
           showPagination ? vue.h(chunkAGAJJYP2_js.Pagination, {
             ...props.pagination,
             onChange: (current, pageSize) => emit("page-change", current, pageSize),

package/dist/{chunk-WEFQCJAG.js → chunk-XGXGAK27.js}

@@ -32,6 +32,14 @@ var Card = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Card layout direction
+     * @default 'vertical'
+     */
+    direction: {
+      type: String,
+      default: "vertical"
+    },
     /**
      * Cover image URL
      */
@@ -65,9 +73,11 @@ var Card = vue.defineComponent({
     const cardClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.getCardClasses(props.variant, props.hoverable),
+        tigercatCore.cardDirectionClasses[props.direction],
         !props.cover && tigercatCore.cardSizeClasses[props.size]
       )
     );
+    const isHorizontal = vue.computed(() => props.direction === "horizontal");
     const sectionSizeClass = vue.computed(() => props.cover ? tigercatCore.cardSizeClasses[props.size] : void 0);
     const getSectionClasses = (baseClasses) => tigercatCore.classNames(baseClasses, sectionSizeClass.value);
     return () => {
@@ -86,19 +96,27 @@ var Card = vue.defineComponent({
             vue.h("img", {
               src: props.cover,
               alt: props.coverAlt,
-              class: tigercatCore.cardCoverClasses
+              class: tigercatCore.classNames(
+                tigercatCore.cardCoverClasses,
+                isHorizontal.value && "h-full w-48 object-cover"
+              )
             })
           ]) : null,
-          slots.header ? vue.h("div", { class: getSectionClasses(tigercatCore.cardHeaderClasses) }, slots.header()) : null,
-          slots.default ? vue.h("div", { class: sectionSizeClass.value }, slots.default()) : null,
-          slots.footer ? vue.h("div", { class: getSectionClasses(tigercatCore.cardFooterClasses) }, slots.footer()) : null,
-          slots.actions ? vue.h(
-            "div",
-            {
-              class: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses))
-            },
-            slots.actions()
-          ) : null
+          (() => {
+            const bodyChildren = [
+              slots.header ? vue.h("div", { class: getSectionClasses(tigercatCore.cardHeaderClasses) }, slots.header()) : null,
+              slots.default ? vue.h("div", { class: sectionSizeClass.value }, slots.default()) : null,
+              slots.footer ? vue.h("div", { class: getSectionClasses(tigercatCore.cardFooterClasses) }, slots.footer()) : null,
+              slots.actions ? vue.h(
+                "div",
+                {
+                  class: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses))
+                },
+                slots.actions()
+              ) : null
+            ];
+            return isHorizontal.value ? vue.h("div", { class: tigercatCore.cardHorizontalBodyClasses }, bodyChildren) : bodyChildren;
+          })()
         ]
       );
     };

package/dist/{chunk-EVOLGCGW.mjs → chunk-XNORTTVQ.mjs}

@@ -108,9 +108,16 @@ var List = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Whether list items are draggable for reorder
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["item-click", "page-change"],
+  emits: ["item-click", "page-change", "reorder"],
   setup(props, { emit, slots, attrs }) {
     const instance = getCurrentInstance();
     const hasItemClickListener = computed(() => {
@@ -124,6 +131,28 @@ var List = defineComponent({
     const currentPageSize = ref(
       props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize || 10 : 10
     );
+    const dragIndex = ref(null);
+    function handleDragStart(index) {
+      dragIndex.value = index;
+    }
+    function handleDragOver(e) {
+      e.preventDefault();
+    }
+    function handleDrop(index) {
+      if (dragIndex.value === null || dragIndex.value === index) {
+        dragIndex.value = null;
+        return;
+      }
+      const from = dragIndex.value;
+      dragIndex.value = null;
+      const items = [...props.dataSource];
+      const [moved] = items.splice(from, 1);
+      items.splice(index, 0, moved);
+      emit("reorder", items, from, index);
+    }
+    function handleDragEnd() {
+      dragIndex.value = null;
+    }
     const paginatedData = computed(() => {
       if (props.pagination === false) {
         return props.dataSource;
@@ -200,9 +229,20 @@ var List = defineComponent({
     function getItemAttrs(item, index, itemClasses) {
       const key = getItemKey(item, index);
       const clickable = hasItemClickListener.value;
+      const draggableAttrs = props.draggable ? {
+        draggable: true,
+        onDragstart: () => handleDragStart(index),
+        onDragover: handleDragOver,
+        onDrop: () => handleDrop(index),
+        onDragend: handleDragEnd
+      } : {};
       return {
         key,
-        class: classNames(itemClasses, clickable && "cursor-pointer"),
+        class: classNames(
+          itemClasses,
+          clickable && "cursor-pointer",
+          props.draggable && "cursor-grab"
+        ),
         role: "listitem",
         tabindex: clickable ? 0 : void 0,
         onClick: () => handleItemClick(item, index),
@@ -211,7 +251,8 @@ var List = defineComponent({
             e.preventDefault();
             handleItemClick(item, index);
           }
-        } : void 0
+        } : void 0,
+        ...draggableAttrs
       };
     }
     function renderListItem(item, index) {