sprintify-ui 0.10.64 → 0.10.65

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)"
-        />
-      </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)"
+        />
+      </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>

package/src/components/BaseMediaPicturesItem.vue

@@ -1,100 +1,100 @@
-<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 btn-sm rounded-full aspect-1 p-0 shadow-sm ring-1 ring-black ring-opacity-[0.15]"
-      >
-        <BaseIcon
-          class="h-4 w-4"
-          icon="mdi:download"
-        />
-      </a>
-      <button
-        v-if="showRemove"
-        type="button"
-        :disabled="disabled"
-        class="btn btn-white btn-sm rounded-full aspect-1 p-0 shadow-sm ring-1 ring-black ring-opacity-[0.15] disabled:bg-white disabled:opacity-70"
-        @click="$emit('remove')"
-      >
-        <BaseIcon
-          class="h-4 w-4"
-          icon="mdi:close"
-        />
-      </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>
+<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 btn-sm rounded-full aspect-1 p-0 shadow-sm ring-1 ring-black ring-opacity-[0.15]"
+      >
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:download"
+        />
+      </a>
+      <button
+        v-if="showRemove"
+        type="button"
+        :disabled="disabled"
+        class="btn btn-white btn-sm rounded-full aspect-1 p-0 shadow-sm ring-1 ring-black ring-opacity-[0.15] disabled:bg-white disabled:opacity-70"
+        @click="$emit('remove')"
+      >
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:close"
+        />
+      </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>

package/src/components/BaseMediaPreview.stories.js

@@ -1,72 +1,72 @@
-import BaseMediaPreview from "./BaseMediaPreview.vue";
-
-export default {
-  title: "Media/BaseMediaPreview",
-  component: BaseMediaPreview,
-};
-
-const Template = (args) => ({
-  components: {
-    BaseMediaPreview,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseMediaPreview v-bind="args" class="w-20 h-20" />
-  `,
-});
-
-export const Image = Template.bind({});
-Image.args = {
-  media: {
-    id: "xxxxxxxxxxx",
-    file_name: "picture.jpg",
-    mime_type: "image/jpg",
-    size: 430 * 1024,
-  },
-};
-
-export const ImageUrl = Template.bind({});
-ImageUrl.args = {
-  media: {
-    id: "xxxxxxxxxxx",
-    file_name: "picture.jpg",
-    mime_type: "image/jpg",
-    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
-    size: 430 * 1024,
-  },
-};
-
-export const PDF = Template.bind({});
-PDF.args = {
-  media: {
-    id: "xxxxxxxxxxx",
-    file_name: "picture.pdf",
-    mime_type: "application/pdf",
-    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
-    size: 430 * 1024,
-  },
-};
-
-export const Music = Template.bind({});
-Music.args = {
-  media: {
-    id: "xxxxxxxxxxx",
-    file_name: "picture.mp3",
-    mime_type: "audio/mpeg",
-    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
-    size: 430 * 1024,
-  },
-};
-
-export const Other = Template.bind({});
-Other.args = {
-  media: {
-    id: "xxxxxxxxxxx",
-    file_name: "picture.mp3",
-    mime_type: "application/excel",
-    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
-    size: 430 * 1024,
-  },
-};
+import BaseMediaPreview from "./BaseMediaPreview.vue";
+
+export default {
+  title: "Media/BaseMediaPreview",
+  component: BaseMediaPreview,
+};
+
+const Template = (args) => ({
+  components: {
+    BaseMediaPreview,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseMediaPreview v-bind="args" class="w-20 h-20" />
+  `,
+});
+
+export const Image = Template.bind({});
+Image.args = {
+  media: {
+    id: "xxxxxxxxxxx",
+    file_name: "picture.jpg",
+    mime_type: "image/jpg",
+    size: 430 * 1024,
+  },
+};
+
+export const ImageUrl = Template.bind({});
+ImageUrl.args = {
+  media: {
+    id: "xxxxxxxxxxx",
+    file_name: "picture.jpg",
+    mime_type: "image/jpg",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
+    size: 430 * 1024,
+  },
+};
+
+export const PDF = Template.bind({});
+PDF.args = {
+  media: {
+    id: "xxxxxxxxxxx",
+    file_name: "picture.pdf",
+    mime_type: "application/pdf",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
+    size: 430 * 1024,
+  },
+};
+
+export const Music = Template.bind({});
+Music.args = {
+  media: {
+    id: "xxxxxxxxxxx",
+    file_name: "picture.mp3",
+    mime_type: "audio/mpeg",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
+    size: 430 * 1024,
+  },
+};
+
+export const Other = Template.bind({});
+Other.args = {
+  media: {
+    id: "xxxxxxxxxxx",
+    file_name: "picture.mp3",
+    mime_type: "application/excel",
+    url: "https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=800&h=800&q=80",
+    size: 430 * 1024,
+  },
+};