sprintify-ui 0.10.58 → 0.10.60

package/dist/types/utils/uuid.d.ts

@@ -0,0 +1 @@
+export declare function randomId(length: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.58",
+  "version": "0.10.60",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDraggable.stories.js

@@ -0,0 +1,34 @@
+import BaseDraggable from "./BaseDraggable.vue";
+import { options } from "../../.storybook/utils";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+
+export default {
+  title: "Components/BaseDraggable",
+  component: BaseDraggable,
+  args: {
+    itemKey: 'value',
+  }
+};
+
+const Template = (args) => ({
+  components: { BaseDraggable, ShowValue },
+  setup() {
+    const modelValue = ref(options.filter(v => v.value != null));
+    return { args, modelValue };
+  },
+  template: `
+  <div class="border">
+    <BaseDraggable v-bind="args" v-model="modelValue">
+      <template #item="{ element }">
+        <div class="handle border bg-white text-sm p-2 cursor-move">
+          {{ element.label }}
+        </div>
+      </template>
+    </BaseDraggable>
+
+    <ShowValue :value="modelValue" />
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});

package/src/components/BaseDraggable.vue

@@ -14,7 +14,8 @@
 </template>
 
 <script lang="ts" setup>
-import { uniqueId } from 'lodash';
+import { randomId } from '@/utils/uuid';
+import { debounce } from 'lodash';
 import Sortable from 'sortablejs';
 
 const props = withDefaults(defineProps<{
@@ -35,12 +36,40 @@ const emit = defineEmits(['update:modelValue']);
 const elementsRef = ref<HTMLElement | null>(null);
 
 function getKey(element: any) {
-  return element[props.itemKey] ?? uniqueId();
+  return element[props.itemKey] ?? randomId(32);
 }
 
 let sortable = null as Sortable | null;
 
 onMounted(() => {
+  initDebounced();
+});
+
+onBeforeUnmount(() => {
+  sortable?.destroy();
+});
+
+watch(
+  () => props.disabled,
+  (disabled) => {
+    sortable?.option('disabled', disabled);
+  }
+);
+
+watch(
+  () => props.modelValue,
+  () => {
+    sortable?.destroy();
+
+    nextTick(() => {
+      initDebounced();
+    });
+  }
+);
+
+const initDebounced = debounce(init, 100);
+
+function init() {
   if (!elementsRef.value) {
     return;
   }
@@ -67,7 +96,7 @@ onMounted(() => {
       });
     },
   });
-});
+}
 
 function arrayMove(array: any[], fromIndex: number, toIndex: number): any[] {
   // without mutating the original array
@@ -79,14 +108,4 @@ function arrayMove(array: any[], fromIndex: number, toIndex: number): any[] {
   return newArray;
 }
 
-onBeforeUnmount(() => {
-  sortable?.destroy();
-});
-
-watch(
-  () => props.disabled,
-  (disabled) => {
-    sortable?.option('disabled', disabled);
-  }
-);
 </script>

package/src/utils/uuid.ts

@@ -0,0 +1,8 @@
+export function randomId(length: number): string {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+}