sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseLoadingCover.vue

@@ -1,101 +1,101 @@
-<template>
-  <Transition
-    :enter-active-class="'transition ease-out ' + duration"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    :leave-active-class="'transition ease-in ' + duration"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-if="showSpinner"
-      class="absolute inset-0 flex h-full w-full items-center justify-center"
-    >
-      <div :class="twMerge('absolute h-full w-full bg-white', twBackdrop)" />
-
-      <BaseSpinnerSmall
-        v-if="size == 'sm'"
-        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
-      />
-      <BaseSpinnerLarge
-        v-else-if="size == 'lg'"
-        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
-      />
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { twMerge } from 'tailwind-merge';
-import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
-import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
-
-const props = defineProps({
-  /**
-   * Show/Hide the loading cover
-   */
-  modelValue: {
-    default: true,
-    type: Boolean,
-  },
-  /**
-   * Classes added to the backdrop
-   */
-  twBackdrop: {
-    default: '',
-    type: String,
-  },
-  /**
-   * Classes added to the spinner icon
-   */
-  twIcon: {
-    default: '',
-    type: String,
-  },
-  /**
-   * Change the type of spinner. 'sm' for a small spinner. 'lg' for a large spinner.
-   */
-  size: {
-    default: 'sm',
-    type: String as PropType<'sm' | 'lg'>,
-  },
-  /**
-   * Transition duration class.
-   */
-  duration: {
-    default: 'duration-300',
-    type: String,
-  },
-  /**
-   * Delay before showing the loading cover. This delay is used to avoid unnecessary showing the spinner for a fraction of second when the loading time is too short.
-   */
-  delay: {
-    default: 0,
-    type: Number,
-  },
-});
-
-let timeoutId = null as number | null;
-
-const showSpinner = ref(false);
-
-watch(
-  () => props.modelValue,
-  (newValue: boolean) => {
-    if (newValue) {
-      timeoutId = setTimeout(() => {
-        showSpinner.value = true;
-      }, props.delay);
-    } else {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      showSpinner.value = false;
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
+<template>
+  <Transition
+    :enter-active-class="'transition ease-out ' + duration"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    :leave-active-class="'transition ease-in ' + duration"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="showSpinner"
+      class="absolute inset-0 flex h-full w-full items-center justify-center"
+    >
+      <div :class="twMerge('absolute h-full w-full bg-white', twBackdrop)" />
+
+      <BaseSpinnerSmall
+        v-if="size == 'sm'"
+        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+      />
+      <BaseSpinnerLarge
+        v-else-if="size == 'lg'"
+        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+      />
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
+import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
+
+const props = defineProps({
+  /**
+   * Show/Hide the loading cover
+   */
+  modelValue: {
+    default: true,
+    type: Boolean,
+  },
+  /**
+   * Classes added to the backdrop
+   */
+  twBackdrop: {
+    default: '',
+    type: String,
+  },
+  /**
+   * Classes added to the spinner icon
+   */
+  twIcon: {
+    default: '',
+    type: String,
+  },
+  /**
+   * Change the type of spinner. 'sm' for a small spinner. 'lg' for a large spinner.
+   */
+  size: {
+    default: 'sm',
+    type: String as PropType<'sm' | 'lg'>,
+  },
+  /**
+   * Transition duration class.
+   */
+  duration: {
+    default: 'duration-300',
+    type: String,
+  },
+  /**
+   * Delay before showing the loading cover. This delay is used to avoid unnecessary showing the spinner for a fraction of second when the loading time is too short.
+   */
+  delay: {
+    default: 0,
+    type: Number,
+  },
+});
+
+let timeoutId = null as number | null;
+
+const showSpinner = ref(false);
+
+watch(
+  () => props.modelValue,
+  (newValue: boolean) => {
+    if (newValue) {
+      timeoutId = setTimeout(() => {
+        showSpinner.value = true;
+      }, props.delay);
+    } else {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      showSpinner.value = false;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>

package/src/components/BaseMediaGallery.vue

@@ -1,96 +1,96 @@
-<template>
-  <div ref="itemsRef">
-    <BaseDraggable
-      :model-value="modelValue"
-      item-key="id"
-      :disabled="disabled"
-      class="-m-1 flex flex-wrap"
-      handle=".handle"
-      @update:model-value="onDragUpdate"
-    >
-      <template #item="{ element, index }">
-        <div
-          :style="{ width: itemWidth }"
-          class="p-1"
-        >
-          <BaseMediaGalleryItem
-            :media="element"
-            :show-remove="!disabled"
-            :disabled="disabled"
-            :draggable="draggable"
-            @remove="$emit('remove', index)"
-          >
-            {{ element.file_name }}
-          </BaseMediaGalleryItem>
-        </div>
-      </template>
-    </BaseDraggable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Media } from '@/types/Media';
-import { UploadedFile } from '@/types/UploadedFile';
-import { useElementSize } from '@vueuse/core';
-import { PropType } from 'vue';
-import BaseDraggable from './BaseDraggable.vue';
-import BaseMediaGalleryItem from './BaseMediaGalleryItem.vue';
-
-const props = defineProps({
-  modelValue: {
-    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,
-  },
-  itemMaxWidth: {
-    default: 220,
-    type: Number,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'remove']);
-
-// Item width
-
-const itemsRef = ref<HTMLElement | null>(null);
-const itemWidth = ref('220px');
-
-const itemsRefSize = useElementSize(itemsRef);
-
-watch(
-  () => itemsRefSize.width.value,
-  (width) => {
-    if (width <= 300) {
-      itemWidth.value = '100%';
-      return;
-    }
-
-    const numberOfItems = Math.floor(width / props.itemMaxWidth);
-
-    itemWidth.value = `${100 / numberOfItems}%`;
-  }
-);
-
-function onDragUpdate(value: (Media | UploadedFile)[]) {
-  if (props.disabled) {
-    return;
-  }
-
-  emit('update:modelValue', value);
-}
-</script>
+<template>
+  <div ref="itemsRef">
+    <BaseDraggable
+      :model-value="modelValue"
+      item-key="id"
+      :disabled="disabled"
+      class="-m-1 flex flex-wrap"
+      handle=".handle"
+      @update:model-value="onDragUpdate"
+    >
+      <template #item="{ element, index }">
+        <div
+          :style="{ width: itemWidth }"
+          class="p-1"
+        >
+          <BaseMediaGalleryItem
+            :media="element"
+            :show-remove="!disabled"
+            :disabled="disabled"
+            :draggable="draggable"
+            @remove="$emit('remove', index)"
+          >
+            {{ element.file_name }}
+          </BaseMediaGalleryItem>
+        </div>
+      </template>
+    </BaseDraggable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { useElementSize } from '@vueuse/core';
+import { PropType } from 'vue';
+import BaseDraggable from './BaseDraggable.vue';
+import BaseMediaGalleryItem from './BaseMediaGalleryItem.vue';
+
+const props = defineProps({
+  modelValue: {
+    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,
+  },
+  itemMaxWidth: {
+    default: 220,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'remove']);
+
+// Item width
+
+const itemsRef = ref<HTMLElement | null>(null);
+const itemWidth = ref('220px');
+
+const itemsRefSize = useElementSize(itemsRef);
+
+watch(
+  () => itemsRefSize.width.value,
+  (width) => {
+    if (width <= 300) {
+      itemWidth.value = '100%';
+      return;
+    }
+
+    const numberOfItems = Math.floor(width / props.itemMaxWidth);
+
+    itemWidth.value = `${100 / numberOfItems}%`;
+  }
+);
+
+function onDragUpdate(value: (Media | UploadedFile)[]) {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('update:modelValue', value);
+}
+</script>

package/src/components/BaseMediaGalleryItem.vue

@@ -1,101 +1,101 @@
-<template>
-  <div
-    class="relative overflow-hidden rounded bg-white shadow ring-1 ring-black ring-opacity-10"
-  >
-    <div
-      class="flex"
-      :class="{
-        'pr-4': draggable,
-      }"
-    >
-      <div
-        v-if="draggable && !disabled"
-        class="handle flex shrink-0 cursor-move items-center justify-center border-r border-slate-300 bg-slate-200 px-1"
-      >
-        <BaseIcon icon="mdi:drag" />
-      </div>
-      <div class="shrink-0">
-        <BaseMediaPreview
-          class="h-12 w-12"
-          :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">
-            {{ fileSize }}
-          </p>
-        </div>
-      </component>
-    </div>
-    <div
-      v-if="showRemove"
-      class="absolute top-px right-px"
-    >
-      <button
-        type="button"
-        class="rounded-full bg-white p-1 text-slate-500 hover:bg-slate-100"
-        @click="$emit('remove')"
-      >
-        <BaseIcon
-          icon="heroicons:x-mark-20-solid"
-          class="h-5 w-5"
-        />
-      </button>
-    </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,
-  },
-  draggable: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const name = computed(() => {
-  return props.media.file_name;
-});
-
-const fileSize = computed(() => {
-  return fileSizeFormat(props.media.size);
-});
-
-const url = computed(() => {
-  if ('url' in props.media) {
-    return props.media.url;
-  }
-
-  return null;
-});
-</script>
+<template>
+  <div
+    class="relative overflow-hidden rounded bg-white shadow ring-1 ring-black ring-opacity-10"
+  >
+    <div
+      class="flex"
+      :class="{
+        'pr-4': draggable,
+      }"
+    >
+      <div
+        v-if="draggable && !disabled"
+        class="handle flex shrink-0 cursor-move items-center justify-center border-r border-slate-300 bg-slate-200 px-1"
+      >
+        <BaseIcon icon="mdi:drag" />
+      </div>
+      <div class="shrink-0">
+        <BaseMediaPreview
+          class="h-12 w-12"
+          :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">
+            {{ fileSize }}
+          </p>
+        </div>
+      </component>
+    </div>
+    <div
+      v-if="showRemove"
+      class="absolute top-px right-px"
+    >
+      <button
+        type="button"
+        class="rounded-full bg-white p-1 text-slate-500 hover:bg-slate-100"
+        @click="$emit('remove')"
+      >
+        <BaseIcon
+          icon="heroicons:x-mark-20-solid"
+          class="h-5 w-5"
+        />
+      </button>
+    </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,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const name = computed(() => {
+  return props.media.file_name;
+});
+
+const fileSize = computed(() => {
+  return fileSizeFormat(props.media.size);
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+</script>

package/src/components/BaseMediaItem.stories.js

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