sprintify-ui 0.1.3 → 0.1.4

package/dist/types/src/components/BaseDraggable.vue.d.ts

@@ -0,0 +1,34 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    modelValue: any[];
+    itemKey: string;
+    handle: string;
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: any[];
+    itemKey: string;
+    handle: string;
+    disabled: boolean;
+}>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}>, {
+    item: (_: {
+        key: any;
+        element: any;
+        index: number;
+    }) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -32,11 +32,11 @@
     "object-to-formdata": "^4.4.2",
     "pinia": "^2.0.0",
     "qs": "^6.0.0",
+    "sortablejs": "^1.15.0",
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0",
-    "vue-router": "^4.0.0",
-    "vuedraggable": "^4.1.0"
+    "vue-router": "^4.0.0"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.9",
@@ -65,6 +65,7 @@
     "@types/object-hash": "^2.2.1",
     "@types/qs": "^6.9.7",
     "@types/scroll-lock": "^2.1.0",
+    "@types/sortablejs": "^1.15.1",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "@vitejs/plugin-vue": "^4.0.0",
@@ -100,6 +101,7 @@
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
+    "sortablejs": "^1.15.0",
     "standard-version": "^9.5.0",
     "storybook": "^6.5.16",
     "storybook-addon-mock": "^3.2.0",
@@ -112,8 +114,7 @@
     "vue-i18n": "^9.2.2",
     "vue-loader": "^17.0.1",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.24",
-    "vuedraggable": "^4.1.0"
+    "vue-tsc": "^1.0.24"
   },
   "files": [
     "src",

package/src/components/BaseDraggable.vue

@@ -0,0 +1,71 @@
+<template>
+  <div ref="elementsRef">
+    <slot
+      v-for="(element, index) in modelValue"
+      :key="element[itemKey]"
+      name="item"
+      :element="element"
+      :index="index"
+    ></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import Sortable from 'sortablejs';
+
+const props = defineProps<{
+  modelValue: any[];
+  itemKey: string;
+  handle: string;
+  disabled: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const elementsRef = ref<HTMLElement | null>(null);
+
+let sortable = null as Sortable | null;
+
+onMounted(() => {
+  if (!elementsRef.value) {
+    return;
+  }
+
+  sortable = Sortable.create(elementsRef.value, {
+    handle: props.handle,
+    disabled: props.disabled,
+    onEnd: (event) => {
+      if (event.oldIndex !== undefined && event.newIndex !== undefined) {
+        const modelValue = cloneDeep(props.modelValue);
+
+        const modelValueUpdated = arrayMove(
+          modelValue,
+          event.oldIndex,
+          event.newIndex
+        );
+
+        emit('update:modelValue', modelValueUpdated);
+      }
+    },
+  });
+});
+
+function arrayMove(array: any[], fromIndex: number, toIndex: number): any[] {
+  const element = array[fromIndex];
+  array.splice(fromIndex, 1);
+  array.splice(toIndex, 0, element);
+  return array;
+}
+
+onBeforeUnmount(() => {
+  sortable?.destroy();
+});
+
+watch(
+  () => props.disabled,
+  (disabled) => {
+    sortable?.option('disabled', disabled);
+  }
+);
+</script>

package/src/components/BaseMediaGallery.vue

@@ -1,10 +1,8 @@
 <template>
   <div ref="itemsRef">
-    <vuedraggable
+    <BaseDraggable
       :model-value="modelValue"
-      group="media"
       item-key="id"
-      tag="div"
       :disabled="disabled"
       class="-m-1 flex flex-wrap"
       handle=".handle"
@@ -23,7 +21,7 @@
           </BaseMediaGalleryItem>
         </div>
       </template>
-    </vuedraggable>
+    </BaseDraggable>
   </div>
 </template>
 
@@ -32,7 +30,7 @@ import { Media } from '@/types/Media';
 import { UploadedFile } from '@/types/UploadedFile';
 import { useElementSize } from '@vueuse/core';
 import { PropType } from 'vue';
-import vuedraggable from 'vuedraggable';
+import BaseDraggable from './BaseDraggable.vue';
 import BaseMediaGalleryItem from './BaseMediaGalleryItem.vue';
 
 const props = defineProps({

package/src/components/BaseMediaList.vue

@@ -1,9 +1,7 @@
 <template>
-  <vuedraggable
+  <BaseDraggable
     :model-value="modelValue"
-    group="media"
     item-key="id"
-    tag="div"
     class="border-t border-slate-200"
     handle=".handle"
     :disabled="disabled"
@@ -22,7 +20,7 @@
         ></BaseMediaListItem>
       </div>
     </template>
-  </vuedraggable>
+  </BaseDraggable>
 </template>
 
 <script lang="ts" setup>
@@ -30,7 +28,7 @@ import { Media } from '@/types/Media';
 import { UploadedFile } from '@/types/UploadedFile';
 import { cloneDeep } from 'lodash';
 import { PropType } from 'vue';
-import vuedraggable from 'vuedraggable';
+import BaseDraggable from './BaseDraggable.vue';
 import BaseMediaListItem from './BaseMediaListItem.vue';
 
 const props = defineProps({

package/src/components/BaseMediaPictures.vue

@@ -1,9 +1,7 @@
 <template>
-  <vuedraggable
+  <BaseDraggable
     :model-value="modelValue"
-    group="media"
     item-key="id"
-    tag="div"
     class="flex flex-wrap"
     handle=".handle"
     :disabled="disabled"
@@ -21,14 +19,14 @@
         ></BaseMediaPicturesItem>
       </div>
     </template>
-  </vuedraggable>
+  </BaseDraggable>
 </template>
 
 <script lang="ts" setup>
 import { Media } from '@/types/Media';
 import { UploadedFile } from '@/types/UploadedFile';
 import { PropType } from 'vue';
-import vuedraggable from 'vuedraggable';
+import BaseDraggable from './BaseDraggable.vue';
 import BaseMediaPicturesItem from './BaseMediaPicturesItem.vue';
 
 const props = defineProps({