sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseMediaList.vue

@@ -1,67 +1,67 @@
-<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)"
-        />
-      </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']);
-
-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)"
+        />
+      </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']);
+
+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,212 +1,212 @@
-<template>
-  <li
-    ref="itemRef"
-    class="group flex h-10 items-center justify-between"
-    :class="[xs ? 'h-9' : 'h-10']"
-  >
-    <div
-      v-if="draggable && !disabled"
-      class="handle shrink-0 cursor-move pr-1"
-    >
-      <BaseIcon
-        icon="mdi:drag"
-        class="text-slate-400 w-5 h-5"
-      />
-    </div>
-    <div class="mr-2 shrink-0">
-      <BaseIcon
-        icon="heroicons-solid:paper-clip"
-        class="shrink-0 text-slate-400"
-        :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
-      />
-    </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"
-            :class="[xs ? 'text-sm' : 'text-sm']"
-          >{{ fileName }}</span>
-          <div
-            v-if="!disabled"
-            class="text-center opacity-0 group-hover:opacity-100"
-          >
-            <BaseIcon
-              icon="heroicons-solid:pencil"
-              class="shrink-0 text-slate-400"
-              :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
-            />
-          </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"
-          :class="[xs ? 'text-sm' : 'text-sm']"
-          type="text"
-          :value="name"
-          autofocus
-          @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-blue-600"
-            :class="[xs ? 'text-sm' : 'text-sm']"
-            @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')"
-        >
-          <BaseIcon
-            v-if="sm || xs"
-            icon="heroicons-solid:x"
-            class="shrink-0 text-slate-400"
-            :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
-          />
-          <span
-            v-else
-            class="inline"
-          >
-            {{ t('sui.delete') }}
-          </span>
-        </button>
-        <a
-          v-if="url"
-          :href="url"
-          class="shrink-0 text-sm text-blue-600"
-          target="_blank"
-        >
-          <BaseIcon
-            v-if="sm || xs"
-            icon="heroicons-solid:download"
-            class="shrink-0 text-slate-400"
-            :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
-          />
-          <span
-            v-else
-            class="inline"
-          >
-            {{ t('sui.download') }}
-          </span>
-          
-        </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';
-import { useResizeObserver } from '@vueuse/core';
-import breakpoints from '../../config/breakpoints.json';
-
-const emit = defineEmits(['remove', 'update']);
-
-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 width = ref(800);
-const itemRef = ref<HTMLLIElement | null>();
-
-useResizeObserver(itemRef, () => {
-  width.value = itemRef.value?.clientWidth ?? 800;
-});
-
-const xs = computed((): boolean => {
-  return width.value <= breakpoints.xs;
-});
-
-const sm = computed((): boolean => {
-  return breakpoints.sm >= width.value && width.value > breakpoints.xs;
-});
-
-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 saveName() {
-  const target = inputRef.value;
-  const media = cloneDeep(props.media);
-  media.name = (target?.value ?? '') as string;
-  const ext = media.file_name.split('.').pop();
-  media.file_name = media.name + '.' + ext;
-  viewMode.value = 'show';
-  emit('update', media);
-}
-</script>
+<template>
+  <li
+    ref="itemRef"
+    class="group flex h-10 items-center justify-between"
+    :class="[xs ? 'h-9' : 'h-10']"
+  >
+    <div
+      v-if="draggable && !disabled"
+      class="handle shrink-0 cursor-move pr-1"
+    >
+      <BaseIcon
+        icon="mdi:drag"
+        class="text-slate-400 w-5 h-5"
+      />
+    </div>
+    <div class="mr-2 shrink-0">
+      <BaseIcon
+        icon="heroicons-solid:paper-clip"
+        class="shrink-0 text-slate-400"
+        :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
+      />
+    </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"
+            :class="[xs ? 'text-sm' : 'text-sm']"
+          >{{ fileName }}</span>
+          <div
+            v-if="!disabled"
+            class="text-center opacity-0 group-hover:opacity-100"
+          >
+            <BaseIcon
+              icon="heroicons-solid:pencil"
+              class="shrink-0 text-slate-400"
+              :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
+            />
+          </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"
+          :class="[xs ? 'text-sm' : 'text-sm']"
+          type="text"
+          :value="name"
+          autofocus
+          @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-blue-600"
+            :class="[xs ? 'text-sm' : 'text-sm']"
+            @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')"
+        >
+          <BaseIcon
+            v-if="sm || xs"
+            icon="heroicons-solid:x"
+            class="shrink-0 text-slate-400"
+            :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
+          />
+          <span
+            v-else
+            class="inline"
+          >
+            {{ t('sui.delete') }}
+          </span>
+        </button>
+        <a
+          v-if="url"
+          :href="url"
+          class="shrink-0 text-sm text-blue-600"
+          target="_blank"
+        >
+          <BaseIcon
+            v-if="sm || xs"
+            icon="heroicons-solid:download"
+            class="shrink-0 text-slate-400"
+            :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
+          />
+          <span
+            v-else
+            class="inline"
+          >
+            {{ t('sui.download') }}
+          </span>
+          
+        </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';
+import { useResizeObserver } from '@vueuse/core';
+import breakpoints from '../../config/breakpoints.json';
+
+const emit = defineEmits(['remove', 'update']);
+
+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 width = ref(800);
+const itemRef = ref<HTMLLIElement | null>();
+
+useResizeObserver(itemRef, () => {
+  width.value = itemRef.value?.clientWidth ?? 800;
+});
+
+const xs = computed((): boolean => {
+  return width.value <= breakpoints.xs;
+});
+
+const sm = computed((): boolean => {
+  return breakpoints.sm >= width.value && width.value > breakpoints.xs;
+});
+
+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 saveName() {
+  const target = inputRef.value;
+  const media = cloneDeep(props.media);
+  media.name = (target?.value ?? '') as string;
+  const ext = media.file_name.split('.').pop();
+  media.file_name = media.name + '.' + ext;
+  viewMode.value = 'show';
+  emit('update', media);
+}
+</script>