sprintify-ui 0.2.16 → 0.2.18

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 rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10"
-      >
-        <BaseIcon
-          class="h-4 w-4"
-          icon="mdi:download"
-        />
-      </a>
-      <button
-        v-if="showRemove"
-        type="button"
-        :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"
-        />
-      </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 rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10"
+      >
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:download"
+        />
+      </a>
+      <button
+        v-if="showRemove"
+        type="button"
+        :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"
+        />
+      </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: 'Components/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: 'Components/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,
+  },
+};

package/src/components/BaseMediaPreview.vue

@@ -1,106 +1,106 @@
-<template>
-  <component
-    :is="url ? 'a' : 'div'"
-    ref="baseMediaPreviewRef"
-    :href="url"
-    target="_blank"
-    class="relative flex items-center justify-center overflow-hidden"
-    :class="[url ? 'duration-100 hover:bg-slate-100' : 'bg-white']"
-  >
-    <img
-      v-if="type == 'image' && url && previewImage"
-      :src="url"
-      class="h-full w-full bg-black object-contain object-center"
-      :alt="name"
-    >
-    <img
-      v-else-if="type == 'image' && 'data_url' in media && previewImage"
-      :src="media.data_url"
-      class="h-full w-full bg-black object-contain object-center"
-      :alt="name"
-    >
-    <div
-      v-else
-      class="flex h-full w-full items-center justify-center bg-slate-100"
-    >
-      <BaseIcon
-        v-if="extension == 'pdf'"
-        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
-        icon="heroicons-solid:document-text"
-      />
-      <BaseIcon
-        v-else-if="type == 'image'"
-        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
-        icon="heroicons-solid:photograph"
-      />
-      <BaseIcon
-        v-else-if="type == 'audio'"
-        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
-        icon="heroicons-solid:music-note"
-      />
-      <span
-        v-else-if="elementWidth > 50"
-        class="text-xs font-semibold uppercase leading-tight text-slate-600"
-      >
-        {{ extension }}
-      </span>
-      <BaseIcon
-        v-else
-        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
-        icon="heroicons-solid:paper-clip"
-      />
-    </div>
-  </component>
-</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 { useElementSize } from '@vueuse/core';
-
-defineEmits(['delete']);
-
-const props = defineProps({
-  media: {
-    required: true,
-    type: Object as PropType<Media | UploadedFile>,
-  },
-  showRemove: {
-    default: true,
-    type: Boolean,
-  },
-  previewImage: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const name = computed(() => {
-  return props.media.file_name;
-});
-
-const type = computed(() => {
-  const parts = props.media.mime_type.split('/');
-  return parts[0];
-});
-
-const extension = computed(() => {
-  const parts = props.media.mime_type.split('/');
-  return parts[parts.length - 1];
-});
-
-const url = computed(() => {
-  if ('url' in props.media) {
-    return props.media.url;
-  }
-
-  return null;
-});
-
-const baseMediaPreviewRef = ref<HTMLElement | null>(null);
-
-const elementSize = useElementSize(baseMediaPreviewRef);
-const elementWidth = computed(() => elementSize.width.value);
-</script>
+<template>
+  <component
+    :is="url ? 'a' : 'div'"
+    ref="baseMediaPreviewRef"
+    :href="url"
+    target="_blank"
+    class="relative flex items-center justify-center overflow-hidden"
+    :class="[url ? 'duration-100 hover:bg-slate-100' : 'bg-white']"
+  >
+    <img
+      v-if="type == 'image' && url && previewImage"
+      :src="url"
+      class="h-full w-full bg-black object-contain object-center"
+      :alt="name"
+    >
+    <img
+      v-else-if="type == 'image' && 'data_url' in media && previewImage"
+      :src="media.data_url"
+      class="h-full w-full bg-black object-contain object-center"
+      :alt="name"
+    >
+    <div
+      v-else
+      class="flex h-full w-full items-center justify-center bg-slate-100"
+    >
+      <BaseIcon
+        v-if="extension == 'pdf'"
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="heroicons-solid:document-text"
+      />
+      <BaseIcon
+        v-else-if="type == 'image'"
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="heroicons-solid:photograph"
+      />
+      <BaseIcon
+        v-else-if="type == 'audio'"
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="heroicons-solid:music-note"
+      />
+      <span
+        v-else-if="elementWidth > 50"
+        class="text-xs font-semibold uppercase leading-tight text-slate-600"
+      >
+        {{ extension }}
+      </span>
+      <BaseIcon
+        v-else
+        class="max-w-8 h-1/2 max-h-8 w-1/2 text-slate-600"
+        icon="heroicons-solid:paper-clip"
+      />
+    </div>
+  </component>
+</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 { useElementSize } from '@vueuse/core';
+
+defineEmits(['delete']);
+
+const props = defineProps({
+  media: {
+    required: true,
+    type: Object as PropType<Media | UploadedFile>,
+  },
+  showRemove: {
+    default: true,
+    type: Boolean,
+  },
+  previewImage: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const name = computed(() => {
+  return props.media.file_name;
+});
+
+const type = computed(() => {
+  const parts = props.media.mime_type.split('/');
+  return parts[0];
+});
+
+const extension = computed(() => {
+  const parts = props.media.mime_type.split('/');
+  return parts[parts.length - 1];
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+
+const baseMediaPreviewRef = ref<HTMLElement | null>(null);
+
+const elementSize = useElementSize(baseMediaPreviewRef);
+const elementWidth = computed(() => elementSize.width.value);
+</script>