sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseMediaLibrary.vue

@@ -1,313 +1,313 @@
-<template>
-  <div>
-    <BaseFileUploader
-      :component="pickerComponent"
-      :max-size="maxSize"
-      :disabled="disabled"
-      class="w-full"
-      button-class="w-full"
-      :accept="accept"
-      :accepted-extensions="acceptedExtensions"
-      :url="uploadUrl"
-      :cropper="pickerComponent == 'BaseFilePickerCrop' ? cropper : undefined"
-      @upload:start="onUploadStart"
-      @upload:end="onUploadEnd"
-      @upload:fail="$emit('upload:fail', $event)"
-      @upload:success="onUploadSuccess"
-    >
-      <template #default="baseFileUploaderProps">
-        <slot
-          name="default"
-          v-bind="baseFileUploaderProps"
-          :max-size="maxSize"
-          :max="normalizedMax"
-        >
-          <div
-            class="rounded border border-dashed p-6 duration-150"
-            :class="[
-              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-white',
-              baseFileUploaderProps.disabled
-                ? 'cursor-not-allowed border-slate-300'
-                : 'border-slate-300 hover:bg-slate-100',
-            ]"
-          >
-            <div :class="[baseFileUploaderProps.disabled ? 'opacity-30' : '']">
-              <BaseIcon
-                icon="heroicons:arrow-up-on-square"
-                class="mx-auto mb-3 h-6 w-6 text-slate-500"
-              />
-              <div class="text-center">
-                <p class="mb-0 text-sm font-medium leading-tight">
-                  {{ t('sui.drop_or_click_to_upload') }}
-                </p>
-
-                <div class="mt-1 text-xs leading-tight text-slate-500">
-                  <p v-if="maxFileText">{{ maxFileText }}</p>
-                  <p>{{ maxFileSize }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </slot>
-      </template>
-    </BaseFileUploader>
-
-    <div v-if="normalizedModelValue.length" class="mt-5">
-      <slot
-        :model-value="normalizedModelValue"
-        name="list"
-        :disabled="disabled"
-        :draggable="draggable"
-        :remove="promptRemove"
-        @update:model-value="sync"
-      >
-        <BaseMediaPictures
-          v-if="layout == 'images'"
-          v-bind="listProps"
-          :model-value="normalizedModelValue"
-          :disabled="disabled"
-          :draggable="draggable"
-          @update:model-value="sync"
-          @remove="promptRemove($event)"
-        ></BaseMediaPictures>
-
-        <BaseMediaList
-          v-else-if="layout == 'list'"
-          v-bind="listProps"
-          :model-value="normalizedModelValue"
-          :disabled="disabled"
-          :draggable="draggable"
-          @update:model-value="sync"
-          @remove="promptRemove($event)"
-        ></BaseMediaList>
-
-        <BaseMediaGallery
-          v-else-if="layout == 'gallery'"
-          v-bind="listProps"
-          :model-value="normalizedModelValue"
-          :disabled="disabled"
-          :draggable="draggable"
-          @update:model-value="sync"
-          @remove="promptRemove($event)"
-        ></BaseMediaGallery>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { cloneDeep, isArray, capitalize } from 'lodash';
-import { UploadedFile } from '@/types/UploadedFile';
-import { Media } from '@/types/Media';
-import { BaseCropperConfig, MediaLibraryPayload } from '@/types';
-import { fileSizeFormat } from '@/utils';
-import { useDialogsStore } from '@/stores/dialogs';
-import { useNotificationsStore } from '@/stores/notifications';
-import BaseFileUploader from './BaseFileUploader.vue';
-import { useField } from '@/composables/field';
-import { BaseIcon } from '.';
-import BaseMediaList from './BaseMediaList.vue';
-import BaseMediaPictures from './BaseMediaPictures.vue';
-import BaseMediaGallery from './BaseMediaGallery.vue';
-import { t } from '@/i18n';
-
-const dialogs = useDialogsStore();
-const notifications = useNotificationsStore();
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: Object as PropType<MediaLibraryPayload>,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  min: {
-    type: Number,
-    default: undefined,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  maxSize: {
-    default: 20 * 1024 * 1024,
-    type: Number,
-  },
-  accept: {
-    default: undefined,
-    type: String,
-  },
-  acceptedExtensions: {
-    default: undefined,
-    type: Array as PropType<string[]>,
-  },
-  currentMedia: {
-    default() {
-      return [];
-    },
-    type: Array as PropType<Media[]>,
-  },
-  uploadUrl: {
-    default: undefined,
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  pickerComponent: {
-    default: 'BaseFilePicker',
-    type: String as PropType<'BaseFilePicker' | 'BaseFilePickerCrop'>,
-  },
-  cropper: {
-    default: undefined,
-    type: Object as PropType<BaseCropperConfig | boolean | null>,
-  },
-  draggable: {
-    default: false,
-    type: Boolean,
-  },
-  listProps: {
-    default: undefined,
-    type: Object as PropType<Record<string, unknown>>,
-  },
-  layout: {
-    default: 'gallery',
-    type: String as PropType<'list' | 'images' | 'gallery'>,
-  },
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'upload:start',
-  'upload:success',
-  'upload:fail',
-  'upload:end',
-]);
-
-const { emitUpdate, enableForm, disableForm } = useField({
-  name: computed(() => props.name),
-  required: computed(() => false),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-  errorType: 'alert',
-});
-
-// Model value normalization
-
-const normalizedModelValue = computed(() => {
-  if (!isArray(props.modelValue)) {
-    return [];
-  }
-
-  return props.modelValue;
-});
-
-sync(normalizedModelValue.value);
-
-const numberOfFiles = computed((): number => {
-  return normalizedModelValue.value.length;
-});
-
-// Validations
-
-const normalizedMax = computed(() => {
-  if (props.max == null) {
-    return 100;
-  }
-
-  return props.max;
-});
-
-const maxFileText = computed(() => {
-  return t('sui.you_can_upload_up_to_n_files', {
-    count: normalizedMax.value,
-  });
-});
-
-const maxFileSize = computed(() => {
-  return capitalize(t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) }));
-});
-
-// Upload
-
-function onUploadSuccess(file: UploadedFile) {
-  if (file == null) {
-    return;
-  }
-
-  if (
-    normalizedMax.value &&
-    numberOfFiles.value >= normalizedMax.value &&
-    normalizedMax.value > 1
-  ) {
-    notifications.push({
-      title: t('sui.whoops'),
-      text: t('sui.you_can_upload_up_to_n_files', {
-        count: normalizedMax.value,
-      }),
-      color: 'danger',
-    });
-    return;
-  }
-
-  let modelValue = cloneDeep(normalizedModelValue.value);
-
-  if (normalizedMax.value == 1) {
-    // Remove everything...
-    modelValue = [];
-  }
-
-  modelValue.push(file);
-
-  sync(modelValue);
-
-  emit('upload:success', file);
-}
-
-// Remove
-
-function promptRemove(index: number, length = 1) {
-  dialogs.push({
-    title: t('sui.remove_file'),
-    message: t('sui.remove_file_description'),
-    color: 'warning',
-    onConfirm() {
-      removeByIndex(index, length);
-    },
-  });
-}
-
-function removeByIndex(index: number, length = 1) {
-  const modelValue = cloneDeep(normalizedModelValue.value);
-
-  modelValue.splice(index, length);
-
-  sync(modelValue);
-}
-
-// Sync
-
-function sync(modelValue: MediaLibraryPayload) {
-  emitUpdate(modelValue);
-}
-
-// Events
-
-function onUploadStart(event: any) {
-  emit('upload:start', event);
-  disableForm();
-}
-
-function onUploadEnd(event: any) {
-  emit('upload:end', event);
-  enableForm();
-}
-</script>
+<template>
+  <div>
+    <BaseFileUploader
+      :component="pickerComponent"
+      :max-size="maxSize"
+      :disabled="disabled"
+      class="w-full"
+      tw-button="w-full"
+      :accept="accept"
+      :accepted-extensions="acceptedExtensions"
+      :url="uploadUrl"
+      :cropper="pickerComponent == 'BaseFilePickerCrop' ? cropper : undefined"
+      @upload:start="onUploadStart"
+      @upload:end="onUploadEnd"
+      @upload:fail="$emit('upload:fail', $event)"
+      @upload:success="onUploadSuccess"
+    >
+      <template #default="baseFileUploaderProps">
+        <slot
+          name="default"
+          v-bind="baseFileUploaderProps"
+          :max-size="maxSize"
+          :max="normalizedMax"
+        >
+          <div
+            class="rounded border border-dashed p-6 duration-150"
+            :class="[
+              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-white',
+              baseFileUploaderProps.disabled
+                ? 'cursor-not-allowed border-slate-300'
+                : 'border-slate-300 hover:bg-slate-100',
+            ]"
+          >
+            <div :class="[baseFileUploaderProps.disabled ? 'opacity-30' : '']">
+              <BaseIcon
+                icon="heroicons:arrow-up-on-square"
+                class="mx-auto mb-3 h-6 w-6 text-slate-500"
+              />
+              <div class="text-center">
+                <p class="mb-0 text-sm font-medium leading-tight">
+                  {{ t('sui.drop_or_click_to_upload') }}
+                </p>
+
+                <div class="mt-1 text-xs leading-tight text-slate-500">
+                  <p v-if="maxFileText">{{ maxFileText }}</p>
+                  <p>{{ maxFileSize }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </template>
+    </BaseFileUploader>
+
+    <div v-if="normalizedModelValue.length" class="mt-5">
+      <slot
+        :model-value="normalizedModelValue"
+        name="list"
+        :disabled="disabled"
+        :draggable="draggable"
+        :remove="promptRemove"
+        @update:model-value="sync"
+      >
+        <BaseMediaPictures
+          v-if="layout == 'images'"
+          v-bind="listProps"
+          :model-value="normalizedModelValue"
+          :disabled="disabled"
+          :draggable="draggable"
+          @update:model-value="sync"
+          @remove="promptRemove($event)"
+        ></BaseMediaPictures>
+
+        <BaseMediaList
+          v-else-if="layout == 'list'"
+          v-bind="listProps"
+          :model-value="normalizedModelValue"
+          :disabled="disabled"
+          :draggable="draggable"
+          @update:model-value="sync"
+          @remove="promptRemove($event)"
+        ></BaseMediaList>
+
+        <BaseMediaGallery
+          v-else-if="layout == 'gallery'"
+          v-bind="listProps"
+          :model-value="normalizedModelValue"
+          :disabled="disabled"
+          :draggable="draggable"
+          @update:model-value="sync"
+          @remove="promptRemove($event)"
+        ></BaseMediaGallery>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { cloneDeep, isArray, capitalize } from 'lodash';
+import { UploadedFile } from '@/types/UploadedFile';
+import { Media } from '@/types/Media';
+import { BaseCropperConfig, MediaLibraryPayload } from '@/types';
+import { fileSizeFormat } from '@/utils';
+import { useDialogsStore } from '@/stores/dialogs';
+import { useNotificationsStore } from '@/stores/notifications';
+import BaseFileUploader from './BaseFileUploader.vue';
+import { useField } from '@/composables/field';
+import { BaseIcon } from '.';
+import BaseMediaList from './BaseMediaList.vue';
+import BaseMediaPictures from './BaseMediaPictures.vue';
+import BaseMediaGallery from './BaseMediaGallery.vue';
+import { t } from '@/i18n';
+
+const dialogs = useDialogsStore();
+const notifications = useNotificationsStore();
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: Object as PropType<MediaLibraryPayload>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  min: {
+    type: Number,
+    default: undefined,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  maxSize: {
+    default: 20 * 1024 * 1024,
+    type: Number,
+  },
+  accept: {
+    default: undefined,
+    type: String,
+  },
+  acceptedExtensions: {
+    default: undefined,
+    type: Array as PropType<string[]>,
+  },
+  currentMedia: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Media[]>,
+  },
+  uploadUrl: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  pickerComponent: {
+    default: 'BaseFilePicker',
+    type: String as PropType<'BaseFilePicker' | 'BaseFilePickerCrop'>,
+  },
+  cropper: {
+    default: undefined,
+    type: Object as PropType<BaseCropperConfig | boolean | null>,
+  },
+  draggable: {
+    default: false,
+    type: Boolean,
+  },
+  listProps: {
+    default: undefined,
+    type: Object as PropType<Record<string, unknown>>,
+  },
+  layout: {
+    default: 'gallery',
+    type: String as PropType<'list' | 'images' | 'gallery'>,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'upload:start',
+  'upload:success',
+  'upload:fail',
+  'upload:end',
+]);
+
+const { emitUpdate, enableForm, disableForm } = useField({
+  name: computed(() => props.name),
+  required: computed(() => false),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+  errorType: 'alert',
+});
+
+// Model value normalization
+
+const normalizedModelValue = computed(() => {
+  if (!isArray(props.modelValue)) {
+    return [];
+  }
+
+  return props.modelValue;
+});
+
+sync(normalizedModelValue.value);
+
+const numberOfFiles = computed((): number => {
+  return normalizedModelValue.value.length;
+});
+
+// Validations
+
+const normalizedMax = computed(() => {
+  if (props.max == null) {
+    return 100;
+  }
+
+  return props.max;
+});
+
+const maxFileText = computed(() => {
+  return t('sui.you_can_upload_up_to_n_files', {
+    count: normalizedMax.value,
+  });
+});
+
+const maxFileSize = computed(() => {
+  return capitalize(t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) }));
+});
+
+// Upload
+
+function onUploadSuccess(file: UploadedFile) {
+  if (file == null) {
+    return;
+  }
+
+  if (
+    normalizedMax.value &&
+    numberOfFiles.value >= normalizedMax.value &&
+    normalizedMax.value > 1
+  ) {
+    notifications.push({
+      title: t('sui.whoops'),
+      text: t('sui.you_can_upload_up_to_n_files', {
+        count: normalizedMax.value,
+      }),
+      color: 'danger',
+    });
+    return;
+  }
+
+  let modelValue = cloneDeep(normalizedModelValue.value);
+
+  if (normalizedMax.value == 1) {
+    // Remove everything...
+    modelValue = [];
+  }
+
+  modelValue.push(file);
+
+  sync(modelValue);
+
+  emit('upload:success', file);
+}
+
+// Remove
+
+function promptRemove(index: number, length = 1) {
+  dialogs.push({
+    title: t('sui.remove_file'),
+    message: t('sui.remove_file_description'),
+    color: 'warning',
+    onConfirm() {
+      removeByIndex(index, length);
+    },
+  });
+}
+
+function removeByIndex(index: number, length = 1) {
+  const modelValue = cloneDeep(normalizedModelValue.value);
+
+  modelValue.splice(index, length);
+
+  sync(modelValue);
+}
+
+// Sync
+
+function sync(modelValue: MediaLibraryPayload) {
+  emitUpdate(modelValue);
+}
+
+// Events
+
+function onUploadStart(event: any) {
+  emit('upload:start', event);
+  disableForm();
+}
+
+function onUploadEnd(event: any) {
+  emit('upload:end', event);
+  enableForm();
+}
+</script>