sprintify-ui 0.0.204 → 0.1.0

package/src/components/BaseMediaLibrary.vue

@@ -52,56 +52,64 @@
       </template>
     </BaseFileUploader>
 
-    <div
-      v-if="filteredCurrentMedia.length + normalizedModelValue.to_add.length"
-      class="mt-5"
-    >
-      <div class="-m-1 flex flex-wrap">
-        <div
-          v-for="(media, index) in filteredCurrentMedia"
-          :key="media.id"
-          class="min-w-[220px] flex-1 p-1"
-        >
-          <BaseMediaItem
-            :media="media"
-            :show-remove="!disabled"
-            @remove="promptRemoveMedia(index)"
-          >
-            {{ media.file_name }}
-          </BaseMediaItem>
-        </div>
-
-        <div
-          v-for="(file, index) in normalizedModelValue.to_add"
-          :key="file.id"
-          class="min-w-[220px] flex-1 p-1"
-        >
-          <BaseMediaItem
-            :media="file"
-            :show-remove="!disabled"
-            @remove="promptRemoveUploadedFile(index)"
-          >
-            {{ file.file_name }}
-          </BaseMediaItem>
-        </div>
-      </div>
+    <div v-if="normalizedModelValue.length" class="mt-5">
+      <slot
+        :model-value="normalizedModelValue"
+        name="list"
+        :disabled="disabled"
+        :draggable="draggable"
+        :remove="promptRemove"
+        @update:model-value="sync"
+      >
+        <BaseMediaPictures
+          v-if="layout == 'images'"
+          v-bind="listProps"
+          :model-value="normalizedModelValue"
+          :disabled="disabled"
+          :draggable="draggable"
+          @update:model-value="sync"
+          @remove="promptRemove($event)"
+        ></BaseMediaPictures>
+
+        <BaseMediaList
+          v-else-if="layout == 'list'"
+          v-bind="listProps"
+          :model-value="normalizedModelValue"
+          :disabled="disabled"
+          :draggable="draggable"
+          @update:model-value="sync"
+          @remove="promptRemove($event)"
+        ></BaseMediaList>
+
+        <BaseMediaGallery
+          v-else-if="layout == 'gallery'"
+          v-bind="listProps"
+          :model-value="normalizedModelValue"
+          :disabled="disabled"
+          :draggable="draggable"
+          @update:model-value="sync"
+          @remove="promptRemove($event)"
+        ></BaseMediaGallery>
+      </slot>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { cloneDeep, isArray, isObject, capitalize } from 'lodash';
+import { cloneDeep, isArray, capitalize, uniqueId } from 'lodash';
 import { UploadedFile } from '@/types/UploadedFile';
 import { Media } from '@/types/Media';
 import { BaseCropperConfig, MediaLibraryPayload } from '@/types';
 import { fileSizeFormat } from '@/utils';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useNotificationsStore } from '@/stores/notifications';
-import BaseMediaItem from '@/components/BaseMediaItem.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import { useField } from '@/composables/field';
 import { BaseIcon } from '.';
+import BaseMediaList from './BaseMediaList.vue';
+import BaseMediaPictures from './BaseMediaPictures.vue';
+import BaseMediaGallery from './BaseMediaGallery.vue';
 
 const i18n = useI18n();
 
@@ -111,7 +119,7 @@ const notifications = useNotificationsStore();
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: Object as PropType<MediaLibraryPayload | null | undefined>,
+    type: Object as PropType<MediaLibraryPayload>,
   },
   name: {
     default: undefined,
@@ -163,6 +171,18 @@ const props = defineProps({
     default: undefined,
     type: Object as PropType<BaseCropperConfig | boolean | null>,
   },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  listProps: {
+    default: undefined,
+    type: Object as PropType<Record<string, unknown>>,
+  },
+  layout: {
+    default: 'gallery',
+    type: String as PropType<'list' | 'images' | 'gallery'>,
+  },
 });
 
 const emit = defineEmits([
@@ -173,12 +193,6 @@ const emit = defineEmits([
   'upload:end',
 ]);
 
-const filteredCurrentMedia = computed(() => {
-  return props.currentMedia.filter((media) => {
-    return !normalizedModelValue.value.to_remove.includes(media.id);
-  });
-});
-
 const { emitUpdate, enableForm, disableForm } = useField({
   name: computed(() => props.name),
   required: computed(() => false),
@@ -187,6 +201,24 @@ const { emitUpdate, enableForm, disableForm } = useField({
   errorType: 'alert',
 });
 
+// Model value normalization
+
+const normalizedModelValue = computed(() => {
+  if (!isArray(props.modelValue)) {
+    return [];
+  }
+
+  return props.modelValue;
+});
+
+sync(normalizedModelValue.value);
+
+const numberOfFiles = computed((): number => {
+  return normalizedModelValue.value.length;
+});
+
+// Validations
+
 const normalizedMax = computed(() => {
   if (props.max == null) {
     return 100;
@@ -195,31 +227,19 @@ const normalizedMax = computed(() => {
   return props.max;
 });
 
-const normalizedModelValue = computed(() => {
-  if (
-    props.modelValue &&
-    isObject(props.modelValue) &&
-    isArray(props.modelValue.to_add) &&
-    isArray(props.modelValue.to_remove)
-  ) {
-    return props.modelValue;
-  }
-
-  return {
-    to_add: [],
-    to_remove: [],
-  };
+const maxFileText = computed(() => {
+  return i18n.t('sui.you_can_upload_up_to_n_files', {
+    count: normalizedMax.value,
+  });
 });
 
-const numberOfFiles = computed((): number => {
-  return (
-    props.currentMedia.length +
-    (props.modelValue?.to_add.length ?? 0) -
-    (props.modelValue?.to_remove.length ?? 0)
+const maxFileSize = computed(() => {
+  return capitalize(
+    i18n.t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) })
   );
 });
 
-sync(normalizedModelValue.value);
+// Upload
 
 function onUploadSuccess(file: UploadedFile) {
   if (file == null) {
@@ -241,78 +261,50 @@ function onUploadSuccess(file: UploadedFile) {
     return;
   }
 
-  const modelValue = cloneDeep(normalizedModelValue.value);
+  let modelValue = cloneDeep(normalizedModelValue.value);
 
   if (normalizedMax.value == 1) {
     // Remove everything...
-    modelValue.to_remove.push(...props.currentMedia.map((m) => m.id));
-    modelValue.to_add = [];
+    modelValue = [];
   }
 
-  modelValue.to_add.push(file);
+  file.id = 'new' + uniqueId();
+
+  modelValue.push(file);
 
   sync(modelValue);
 
   emit('upload:success', file);
 }
 
-function promptRemoveUploadedFile(index: number, length = 1) {
-  dialogs.push({
-    title: i18n.t('sui.remove_file'),
-    message: i18n.t('sui.remove_file_description'),
-    color: 'warning',
-    onConfirm() {
-      removeUploadedFile(index, length);
-    },
-  });
-}
+// Remove
 
-function promptRemoveMedia(index: number) {
+function promptRemove(index: number, length = 1) {
   dialogs.push({
     title: i18n.t('sui.remove_file'),
     message: i18n.t('sui.remove_file_description'),
     color: 'warning',
     onConfirm() {
-      removeMedia(index);
+      removeByIndex(index, length);
     },
   });
 }
 
-function removeUploadedFile(index: number, length = 1) {
+function removeByIndex(index: number, length = 1) {
   const modelValue = cloneDeep(normalizedModelValue.value);
 
-  modelValue?.to_add.splice(index, length);
+  modelValue.splice(index, length);
 
   sync(modelValue);
 }
 
-function removeMedia(index: number) {
-  const media = props.currentMedia[index];
-
-  if (media) {
-    const modelValue = cloneDeep(normalizedModelValue.value);
-
-    modelValue.to_remove.push(media.id);
-
-    sync(modelValue);
-  }
-}
+// Sync
 
 function sync(modelValue: MediaLibraryPayload) {
   emitUpdate(modelValue);
 }
 
-const maxFileText = computed(() => {
-  return i18n.t('sui.you_can_upload_up_to_n_files', {
-    count: normalizedMax.value,
-  });
-});
-
-const maxFileSize = computed(() => {
-  return capitalize(
-    i18n.t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) })
-  );
-});
+// Events
 
 function onUploadStart(event: any) {
   emit('upload:start', event);

package/src/components/BaseMediaList.vue

@@ -0,0 +1,70 @@
+<template>
+  <vuedraggable
+    :model-value="modelValue"
+    group="media"
+    item-key="id"
+    tag="div"
+    class="border-t border-slate-200"
+    handle=".handle"
+    :disabled="disabled"
+    @update:model-value="onDragUpdate"
+  >
+    <template #item="{ element, index }">
+      <div class="border-b border-slate-200">
+        <BaseMediaListItem
+          :media="element"
+          :show-remove="showRemove"
+          :draggable="draggable"
+          :disabled="disabled"
+          @update="onItemUpdate(index, $event)"
+          @remove="$emit('remove', index)"
+          @save:name="$emit('save:name', index, $event)"
+        ></BaseMediaListItem>
+      </div>
+    </template>
+  </vuedraggable>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { cloneDeep } from 'lodash';
+import { PropType } from 'vue';
+import vuedraggable from 'vuedraggable';
+import BaseMediaListItem from './BaseMediaListItem.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Object as PropType<(Media | UploadedFile)[]>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'remove', 'save:name']);
+
+function onItemUpdate(index: number, media: Media | UploadedFile) {
+  const modelValue = cloneDeep(props.modelValue);
+  modelValue[index] = media;
+  emit('update:modelValue', modelValue);
+}
+
+function onDragUpdate(value: (Media | UploadedFile)[]) {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('update:modelValue', value);
+}
+</script>

package/src/components/BaseMediaListItem.vue

@@ -0,0 +1,171 @@
+<template>
+  <li
+    class="group flex h-10 items-center justify-between"
+    :class="[draggable ? 'pr-2' : 'px-2']"
+  >
+    <div v-if="draggable && !disabled" class="handle shrink-0 cursor-move px-1">
+      <BaseIcon icon="mdi:drag" class="h-5 w-5 text-slate-400"></BaseIcon>
+    </div>
+    <div class="mr-2 shrink-0">
+      <BaseIcon
+        icon="heroicons-solid:paper-clip"
+        class="h-5 w-5 shrink-0 text-slate-400"
+      ></BaseIcon>
+    </div>
+    <div class="flex grow items-center gap-3 overflow-hidden">
+      <div
+        v-if="viewMode == 'show'"
+        class="flex grow items-center overflow-hidden"
+      >
+        <button
+          type="button"
+          :disabled="disabled"
+          class="flex h-10 items-center overflow-hidden"
+          @click="editName()"
+        >
+          <span class="mr-2 truncate text-sm">{{ fileName }}</span>
+          <div
+            v-if="!disabled"
+            class="text-center opacity-0 group-hover:opacity-100"
+          >
+            <BaseIcon
+              icon="heroicons-solid:pencil"
+              class="h-5 w-5 shrink-0 text-slate-400"
+            ></BaseIcon>
+          </div>
+        </button>
+      </div>
+
+      <div v-else class="flex grow items-center py-1">
+        <input
+          ref="inputRef"
+          class="h-8 w-full max-w-md rounded border border-slate-300 px-2 py-0 focus:ring-0"
+          type="text"
+          :value="name"
+          autofocus
+          @input="onNameChange"
+          @keydown.enter.prevent="saveName"
+          @keydown.escape.prevent="viewMode = 'show'"
+        />
+
+        <div class="flex shrink-0 items-center">
+          <button
+            type="button"
+            class="h-10 shrink-0 pr-2 pl-3 text-sm text-blue-600"
+            @click="saveName"
+          >
+            {{ $t('sui.save') }}
+          </button>
+        </div>
+      </div>
+
+      <div class="flex shrink-0 gap-2">
+        <button
+          v-if="showRemove"
+          type="button"
+          :disabled="disabled"
+          class="shrink-0 text-sm disabled:opacity-50"
+          @click="$emit('remove')"
+        >
+          <span class="hidden sm:inline">
+            {{ $t('sui.delete') }}
+          </span>
+          <BaseIcon
+            icon="heroicons-solid:x"
+            class="h-5 w-5 shrink-0 text-slate-400 sm:hidden"
+          />
+        </button>
+        <a
+          v-if="url"
+          :href="url"
+          class="shrink-0 text-sm text-blue-600"
+          target="_blank"
+        >
+          <span class="hidden sm:inline">
+            {{ $t('sui.download') }}
+          </span>
+          <BaseIcon
+            icon="heroicons-solid:download"
+            class="h-5 w-5 shrink-0 text-slate-400 sm:hidden"
+          />
+        </a>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { cloneDeep } from 'lodash';
+
+const emit = defineEmits(['remove', 'update', 'save:name']);
+
+const props = defineProps({
+  media: {
+    required: true,
+    type: Object as PropType<Media | UploadedFile>,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const viewMode = ref<'show' | 'edit'>('show');
+
+const name = computed(() => {
+  return props.media.name;
+});
+
+const fileName = computed(() => {
+  return props.media.file_name;
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+
+const inputRef = ref<HTMLInputElement | null>();
+
+function editName() {
+  if (props.disabled) {
+    return;
+  }
+
+  viewMode.value = 'edit';
+
+  setTimeout(() => {
+    inputRef.value?.focus();
+    inputRef.value?.select();
+  }, 100);
+}
+
+function onNameChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const media = cloneDeep(props.media);
+  media.name = (target.value ?? '') as string;
+  const ext = media.file_name.split('.').pop();
+  media.file_name = media.name + '.' + ext;
+  emit('update', media);
+}
+
+function saveName() {
+  viewMode.value = 'show';
+  emit('save:name');
+}
+</script>

package/src/components/BaseMediaPictures.vue

@@ -0,0 +1,66 @@
+<template>
+  <vuedraggable
+    :model-value="modelValue"
+    group="media"
+    item-key="id"
+    tag="div"
+    class="flex flex-wrap"
+    handle=".handle"
+    :disabled="disabled"
+    @update:model-value="onDragUpdate"
+  >
+    <template #item="{ element, index }">
+      <div>
+        <BaseMediaPicturesItem
+          :media="element"
+          :show-remove="showRemove"
+          :draggable="draggable"
+          :size="size"
+          :disabled="disabled"
+          @remove="$emit('remove', index)"
+        ></BaseMediaPicturesItem>
+      </div>
+    </template>
+  </vuedraggable>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import vuedraggable from 'vuedraggable';
+import BaseMediaPicturesItem from './BaseMediaPicturesItem.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Object as PropType<(Media | UploadedFile)[]>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 140,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'remove']);
+
+function onDragUpdate(value: (Media | UploadedFile)[]) {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('update:modelValue', value);
+}
+</script>

package/src/components/BaseMediaPicturesItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="relative mr-4 mb-4 flex flex-col items-center rounded-lg bg-slate-200 shadow-md ring-1 ring-black ring-opacity-10"
+    :class="[draggable && !disabled ? 'handle cursor-move' : 'cursor-default']"
+    :style="{
+      width: size + 'px',
+      height: size + 'px',
+      marginRight: spacing,
+      marginBottom: spacing,
+    }"
+  >
+    <img
+      :src="src"
+      :style="{
+        width: size + 'px',
+        height: size + 'px',
+      }"
+      class="overflow-hidden rounded-lg object-cover"
+    />
+    <div class="absolute -top-2 -right-2 flex gap-1">
+      <a
+        v-if="url"
+        :href="url"
+        target="_blank"
+        class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10"
+      >
+        <BaseIcon class="h-4 w-4" icon="mdi:download"></BaseIcon>
+      </a>
+      <button
+        v-if="showRemove"
+        :disabled="disabled"
+        class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10 disabled:bg-white disabled:opacity-70"
+        @click="$emit('remove')"
+      >
+        <BaseIcon class="h-4 w-4" icon="mdi:close"></BaseIcon>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+defineEmits(['remove']);
+
+const props = defineProps({
+  media: {
+    required: true,
+    type: Object as PropType<Media | UploadedFile>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 140,
+    type: Number,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const src = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return props.media.data_url;
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+
+const spacing = computed(() => {
+  const MAX_SPACING = 18;
+  const value = Math.min(MAX_SPACING, 0.15 * props.size);
+  return value + 'px';
+});
+</script>