sprintify-ui 0.2.16 → 0.2.18

package/src/components/BaseMediaItem.vue

@@ -1,80 +1,80 @@
-<template>
-  <div class="rounded bg-white shadow">
-    <div class="relative flex">
-      <div class="shrink-0">
-        <BaseMediaPreview
-          class="h-12 w-12 rounded-l"
-          :media="media"
-        />
-      </div>
-      <component
-        :is="url ? 'a' : 'p'"
-        :href="url"
-        target="_blank"
-        class="flex grow items-center overflow-hidden px-3"
-      >
-        <div class="overflow-hidden text-left leading-tight">
-          <p class="mb-px grow truncate text-[13px] font-medium">
-            {{ name }}
-          </p>
-          <p class="shrink-0 text-[10px] text-slate-400">
-            {{ size }}
-          </p>
-        </div>
-      </component>
-      <div
-        v-if="showRemove"
-        class="shrink-0 p-0.5"
-      >
-        <button
-          type="button"
-          class="rounded-full bg-white p-1 text-slate-400 hover:bg-slate-100"
-          @click="$emit('remove')"
-        >
-          <BaseIcon
-            icon="heroicons:x-mark-20-solid"
-            class="h-4 w-4"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Media } from '@/types/Media';
-import { UploadedFile } from '@/types/UploadedFile';
-import { PropType } from 'vue';
-import { fileSizeFormat } from '@/utils';
-import BaseMediaPreview from './BaseMediaPreview.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,
-  },
-});
-
-const name = computed(() => {
-  return props.media.file_name;
-});
-
-const size = computed(() => {
-  return fileSizeFormat(props.media.size);
-});
-
-const url = computed(() => {
-  if ('url' in props.media) {
-    return props.media.url;
-  }
-
-  return null;
-});
-</script>
+<template>
+  <div class="rounded bg-white shadow">
+    <div class="relative flex">
+      <div class="shrink-0">
+        <BaseMediaPreview
+          class="h-12 w-12 rounded-l"
+          :media="media"
+        />
+      </div>
+      <component
+        :is="url ? 'a' : 'p'"
+        :href="url"
+        target="_blank"
+        class="flex grow items-center overflow-hidden px-3"
+      >
+        <div class="overflow-hidden text-left leading-tight">
+          <p class="mb-px grow truncate text-[13px] font-medium">
+            {{ name }}
+          </p>
+          <p class="shrink-0 text-[10px] text-slate-400">
+            {{ size }}
+          </p>
+        </div>
+      </component>
+      <div
+        v-if="showRemove"
+        class="shrink-0 p-0.5"
+      >
+        <button
+          type="button"
+          class="rounded-full bg-white p-1 text-slate-400 hover:bg-slate-100"
+          @click="$emit('remove')"
+        >
+          <BaseIcon
+            icon="heroicons:x-mark-20-solid"
+            class="h-4 w-4"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import { fileSizeFormat } from '@/utils';
+import BaseMediaPreview from './BaseMediaPreview.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,
+  },
+});
+
+const name = computed(() => {
+  return props.media.file_name;
+});
+
+const size = computed(() => {
+  return fileSizeFormat(props.media.size);
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+</script>

package/src/components/BaseMediaLibrary.stories.js

@@ -1,262 +1,262 @@
-import BaseApp from './BaseApp.vue';
-import BaseMediaLibrary from './BaseMediaLibrary.vue';
-import { BaseIcon } from '../components';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-
-const mediaModel = {
-  id: 'xxxxx',
-  name: 'picture0-1-2dfjjje-23refg-45t',
-  file_name: 'picture0-1-2dfjjje-23refg-45t.jpg',
-  mime_type: 'image/jpg',
-  url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=1200&h=800&q=80',
-  size: 430 * 1024,
-};
-
-const mediaModel2 = {
-  id: 'yyyyy',
-  name: 'photo-1678729465418-ee8127e8c5cd',
-  file_name: 'photo-1678729465418-ee8127e8c5cd.jpg',
-  mime_type: 'image/jpg',
-  url: 'https://images.unsplash.com/photo-1678729465418-ee8127e8c5cd?auto=format&fit=crop&w=800&q=80',
-  size: 430 * 1024,
-};
-
-export default {
-  title: 'Form/BaseMediaLibrary',
-  component: BaseMediaLibrary,
-  args: {
-    max: null,
-    min: 2,
-    acceptedExtensions: ['jpg', 'jpeg', 'png', 'webp'],
-    uploadUrl: 'https://faker.witify.io/api/todos/upload',
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseApp,
-    BaseMediaLibrary,
-    ShowValue,
-  },
-  setup() {
-    const value = ref([
-      mediaModel,
-      mediaModel2,
-      {
-        id: '1',
-        url: '',
-        mime_type: 'application/pdf',
-        name: 'document',
-        file_name: 'document.pdf',
-        size: 40012,
-      },
-      {
-        id: '2',
-        url: '',
-        mime_type: 'application/excel',
-        name: 'finance-2022',
-        file_name: 'finance-2022.xlsx',
-        size: 5461,
-      },
-      {
-        id: '3',
-        url: '',
-        mime_type: 'image/png',
-        name: '34345-1',
-        file_name: '34345-1.png',
-        size: 40012,
-      },
-      {
-        id: '4',
-        url: '',
-        mime_type: 'audio/mp3',
-        name: 'test',
-        file_name: 'test.mp3',
-        size: 792834,
-      },
-    ]);
-    return { args, value };
-  },
-  template: `
-    <BaseMediaLibrary v-model="value" v-bind="args" />
-    <ShowValue :value="value" />
-    <BaseApp></BaseApp>
-  `,
-});
-
-// Layout - Gallery
-
-export const LayoutGallery = Template.bind({});
-LayoutGallery.args = {
-  layout: 'gallery',
-};
-
-export const LayoutGalleryDisabled = Template.bind({});
-LayoutGalleryDisabled.args = {
-  layout: 'gallery',
-  disabled: true,
-};
-
-export const LayoutGalleryDraggable = Template.bind({});
-LayoutGalleryDraggable.args = {
-  layout: 'gallery',
-  draggable: true,
-};
-
-export const LayoutGalleryDraggableDisabled = Template.bind({});
-LayoutGalleryDraggableDisabled.args = {
-  layout: 'gallery',
-  disabled: true,
-  draggable: true,
-};
-
-// Layout - List
-
-export const LayoutList = Template.bind({});
-LayoutList.args = {
-  layout: 'list',
-};
-
-export const LayoutListDisabled = Template.bind({});
-LayoutListDisabled.args = {
-  layout: 'list',
-  disabled: true,
-};
-
-export const LayoutListDraggable = Template.bind({});
-LayoutListDraggable.args = {
-  layout: 'list',
-  draggable: true,
-};
-
-export const LayoutListDraggableDisabled = Template.bind({});
-LayoutListDraggableDisabled.args = {
-  layout: 'list',
-  disabled: true,
-  draggable: true,
-};
-
-// Layout - Images
-
-export const LayoutImages = Template.bind({});
-LayoutImages.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
-};
-
-export const LayoutImagesDisabled = Template.bind({});
-LayoutImagesDisabled.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
-  disabled: true,
-};
-
-export const LayoutImagesDraggable = Template.bind({});
-LayoutImagesDraggable.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
-  draggable: true,
-};
-
-export const LayoutImagesDraggableDisabled = Template.bind({});
-LayoutImagesDraggableDisabled.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  layout: 'images',
-  disabled: true,
-  draggable: true,
-};
-
-export const Crop = Template.bind({});
-Crop.args = {
-  pickerComponent: 'BaseFilePickerCrop',
-  cropper: {
-    config: {
-      maxWidth: 300,
-    },
-    preset: 'avatar',
-    presetOptions: {
-      size: 300,
-    },
-  },
-};
-
-export const MaxSize = Template.bind({});
-MaxSize.args = {
-  maxSize: 10 * 1024,
-};
-
-export const Field = createFieldStory({
-  component: BaseMediaLibrary,
-  componentName: 'BaseMediaLibrary',
-});
-
-// Slots
-
-const SlotDefaultTemplate = (args) => ({
-  components: {
-    BaseApp,
-    BaseMediaLibrary,
-    ShowValue,
-  },
-  setup() {
-    const value = ref([mediaModel, mediaModel2]);
-    return { args, value };
-  },
-  template: `
-    <BaseMediaLibrary v-model="value" v-bind="args">
-      <template #default>
-        <div class="btn btn-lg w-full">
-          Upload!
-        </div>
-      </template>
-    </BaseMediaLibrary>
-
-    <ShowValue :value="value" />
-    <BaseApp></BaseApp>
-  `,
-});
-
-export const SlotDefault = SlotDefaultTemplate.bind({});
-SlotDefault.args = {};
-
-const SlotListTemplate = (args) => ({
-  components: {
-    BaseApp,
-    BaseMediaLibrary,
-    ShowValue,
-  },
-  setup() {
-    const value = ref([mediaModel, mediaModel2]);
-    return { args, value };
-  },
-  template: `
-    <BaseMediaLibrary v-model="value" v-bind="args">
-      <template #list="{ modelValue, remove }">
-        <div v-for="(item, i) in modelValue" :key="item.id" class="mb-3">
-          <div class="flex items-center">
-            <div class="w-12 h-12 mr-4">
-              <img :src="item.url" class="w-full h-full object-cover" />
-            </div>  
-            <div class="flex-1">
-              <div class="text-sm font-semibold">{{ item.name }}</div>
-              <div class="text-xs text-gray-500">{{ item.file_name }}</div>
-            </div>
-            <div class="flex items-center">
-              <div class="text-xs text-gray-500 mr-2">{{ item.size }}</div>
-              <div class="text-xs text-gray-500 mr-2">{{ item.mime_type }}</div>
-            </div>  
-          </div>
-
-          <button type="button" @click="remove(i)" class="text-xs text-red-500">Remove</button> 
-        </div>
-      </template>
-    </BaseMediaLibrary>
-
-    <ShowValue :value="value" />
-    <BaseApp></BaseApp>
-  `,
-});
-
-export const SlotList = SlotListTemplate.bind({});
-SlotList.args = {};
+import BaseApp from './BaseApp.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import { BaseIcon } from '../components';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+
+const mediaModel = {
+  id: 'xxxxx',
+  name: 'picture0-1-2dfjjje-23refg-45t',
+  file_name: 'picture0-1-2dfjjje-23refg-45t.jpg',
+  mime_type: 'image/jpg',
+  url: 'https://images.unsplash.com/photo-1670139018938-af8bf748a1bc?auto=format&fit=crop&w=1200&h=800&q=80',
+  size: 430 * 1024,
+};
+
+const mediaModel2 = {
+  id: 'yyyyy',
+  name: 'photo-1678729465418-ee8127e8c5cd',
+  file_name: 'photo-1678729465418-ee8127e8c5cd.jpg',
+  mime_type: 'image/jpg',
+  url: 'https://images.unsplash.com/photo-1678729465418-ee8127e8c5cd?auto=format&fit=crop&w=800&q=80',
+  size: 430 * 1024,
+};
+
+export default {
+  title: 'Form/BaseMediaLibrary',
+  component: BaseMediaLibrary,
+  args: {
+    max: null,
+    min: 2,
+    acceptedExtensions: ['jpg', 'jpeg', 'png', 'webp'],
+    uploadUrl: 'https://faker.witify.io/api/todos/upload',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+    ShowValue,
+  },
+  setup() {
+    const value = ref([
+      mediaModel,
+      mediaModel2,
+      {
+        id: '1',
+        url: '',
+        mime_type: 'application/pdf',
+        name: 'document',
+        file_name: 'document.pdf',
+        size: 40012,
+      },
+      {
+        id: '2',
+        url: '',
+        mime_type: 'application/excel',
+        name: 'finance-2022',
+        file_name: 'finance-2022.xlsx',
+        size: 5461,
+      },
+      {
+        id: '3',
+        url: '',
+        mime_type: 'image/png',
+        name: '34345-1',
+        file_name: '34345-1.png',
+        size: 40012,
+      },
+      {
+        id: '4',
+        url: '',
+        mime_type: 'audio/mp3',
+        name: 'test',
+        file_name: 'test.mp3',
+        size: 792834,
+      },
+    ]);
+    return { args, value };
+  },
+  template: `
+    <BaseMediaLibrary v-model="value" v-bind="args" />
+    <ShowValue :value="value" />
+    <BaseApp></BaseApp>
+  `,
+});
+
+// Layout - Gallery
+
+export const LayoutGallery = Template.bind({});
+LayoutGallery.args = {
+  layout: 'gallery',
+};
+
+export const LayoutGalleryDisabled = Template.bind({});
+LayoutGalleryDisabled.args = {
+  layout: 'gallery',
+  disabled: true,
+};
+
+export const LayoutGalleryDraggable = Template.bind({});
+LayoutGalleryDraggable.args = {
+  layout: 'gallery',
+  draggable: true,
+};
+
+export const LayoutGalleryDraggableDisabled = Template.bind({});
+LayoutGalleryDraggableDisabled.args = {
+  layout: 'gallery',
+  disabled: true,
+  draggable: true,
+};
+
+// Layout - List
+
+export const LayoutList = Template.bind({});
+LayoutList.args = {
+  layout: 'list',
+};
+
+export const LayoutListDisabled = Template.bind({});
+LayoutListDisabled.args = {
+  layout: 'list',
+  disabled: true,
+};
+
+export const LayoutListDraggable = Template.bind({});
+LayoutListDraggable.args = {
+  layout: 'list',
+  draggable: true,
+};
+
+export const LayoutListDraggableDisabled = Template.bind({});
+LayoutListDraggableDisabled.args = {
+  layout: 'list',
+  disabled: true,
+  draggable: true,
+};
+
+// Layout - Images
+
+export const LayoutImages = Template.bind({});
+LayoutImages.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+};
+
+export const LayoutImagesDisabled = Template.bind({});
+LayoutImagesDisabled.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+  disabled: true,
+};
+
+export const LayoutImagesDraggable = Template.bind({});
+LayoutImagesDraggable.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+  draggable: true,
+};
+
+export const LayoutImagesDraggableDisabled = Template.bind({});
+LayoutImagesDraggableDisabled.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  layout: 'images',
+  disabled: true,
+  draggable: true,
+};
+
+export const Crop = Template.bind({});
+Crop.args = {
+  pickerComponent: 'BaseFilePickerCrop',
+  cropper: {
+    config: {
+      maxWidth: 300,
+    },
+    preset: 'avatar',
+    presetOptions: {
+      size: 300,
+    },
+  },
+};
+
+export const MaxSize = Template.bind({});
+MaxSize.args = {
+  maxSize: 10 * 1024,
+};
+
+export const Field = createFieldStory({
+  component: BaseMediaLibrary,
+  componentName: 'BaseMediaLibrary',
+});
+
+// Slots
+
+const SlotDefaultTemplate = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+    ShowValue,
+  },
+  setup() {
+    const value = ref([mediaModel, mediaModel2]);
+    return { args, value };
+  },
+  template: `
+    <BaseMediaLibrary v-model="value" v-bind="args">
+      <template #default>
+        <div class="btn btn-lg w-full">
+          Upload!
+        </div>
+      </template>
+    </BaseMediaLibrary>
+
+    <ShowValue :value="value" />
+    <BaseApp></BaseApp>
+  `,
+});
+
+export const SlotDefault = SlotDefaultTemplate.bind({});
+SlotDefault.args = {};
+
+const SlotListTemplate = (args) => ({
+  components: {
+    BaseApp,
+    BaseMediaLibrary,
+    ShowValue,
+  },
+  setup() {
+    const value = ref([mediaModel, mediaModel2]);
+    return { args, value };
+  },
+  template: `
+    <BaseMediaLibrary v-model="value" v-bind="args">
+      <template #list="{ modelValue, remove }">
+        <div v-for="(item, i) in modelValue" :key="item.id" class="mb-3">
+          <div class="flex items-center">
+            <div class="w-12 h-12 mr-4">
+              <img :src="item.url" class="w-full h-full object-cover" />
+            </div>  
+            <div class="flex-1">
+              <div class="text-sm font-semibold">{{ item.name }}</div>
+              <div class="text-xs text-gray-500">{{ item.file_name }}</div>
+            </div>
+            <div class="flex items-center">
+              <div class="text-xs text-gray-500 mr-2">{{ item.size }}</div>
+              <div class="text-xs text-gray-500 mr-2">{{ item.mime_type }}</div>
+            </div>  
+          </div>
+
+          <button type="button" @click="remove(i)" class="text-xs text-red-500">Remove</button> 
+        </div>
+      </template>
+    </BaseMediaLibrary>
+
+    <ShowValue :value="value" />
+    <BaseApp></BaseApp>
+  `,
+});
+
+export const SlotList = SlotListTemplate.bind({});
+SlotList.args = {};