sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseMediaList.vue

@@ -1,68 +1,68 @@
-<template>
-  <BaseDraggable
-    :model-value="modelValue"
-    item-key="id"
-    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>
-  </BaseDraggable>
-</template>
-
-<script lang="ts" setup>
-import { Media } from '@/types/Media';
-import { UploadedFile } from '@/types/UploadedFile';
-import { cloneDeep } from 'lodash';
-import { PropType } from 'vue';
-import BaseDraggable from './BaseDraggable.vue';
-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>
+<template>
+  <BaseDraggable
+    :model-value="modelValue"
+    item-key="id"
+    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>
+  </BaseDraggable>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { cloneDeep } from 'lodash';
+import { PropType } from 'vue';
+import BaseDraggable from './BaseDraggable.vue';
+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

@@ -1,171 +1,172 @@
-<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>
+<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';
+import { t } from '@/i18n';
+
+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

@@ -1,64 +1,64 @@
-<template>
-  <BaseDraggable
-    :model-value="modelValue"
-    item-key="id"
-    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>
-  </BaseDraggable>
-</template>
-
-<script lang="ts" setup>
-import { Media } from '@/types/Media';
-import { UploadedFile } from '@/types/UploadedFile';
-import { PropType } from 'vue';
-import BaseDraggable from './BaseDraggable.vue';
-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>
+<template>
+  <BaseDraggable
+    :model-value="modelValue"
+    item-key="id"
+    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>
+  </BaseDraggable>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import BaseDraggable from './BaseDraggable.vue';
+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>