sprintify-ui 0.0.182 → 0.0.184

package/src/components/BaseCropperModal.vue

@@ -0,0 +1,139 @@
+<template>
+  <BaseModalCenter
+    :model-value="modelValue"
+    clipped
+    :max-width="cropperSize + 'px'"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div v-if="ready" class="flex items-center justify-center">
+      <BaseCropper
+        v-if="cropperInternal.source"
+        ref="baseCropperRef"
+        :disabled="loading"
+        v-bind="cropperInternal"
+      >
+        <template #footer="{ initializing }">
+          <div class="mt-5 px-4 pb-5">
+            <div class="flex justify-center space-x-2">
+              <button
+                type="button"
+                class="btn btn-lg btn-white"
+                :disabled="initializing"
+                @click="close()"
+              >
+                {{ $t('cancel') }}
+              </button>
+              <BaseButton
+                type="button"
+                class="btn btn-lg btn-primary"
+                :loading="loading"
+                :disabled="initializing"
+                @click="save()"
+              >
+                {{ $t('save') }}
+              </BaseButton>
+            </div>
+          </div>
+        </template>
+      </BaseCropper>
+    </div>
+  </BaseModalCenter>
+</template>
+
+<script lang="ts" setup>
+import BaseModalCenter from './BaseModalCenter.vue';
+import BaseCropper from './BaseCropper.vue';
+import { BaseCropperConfig } from '@/types';
+import { debounce } from 'lodash';
+import { BaseButton } from '.';
+
+const props = defineProps<{
+  modelValue?: boolean;
+  cropper: BaseCropperConfig;
+}>();
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void;
+  (event: 'cropped', value: HTMLCanvasElement | string | Blob): void;
+}>();
+
+const ready = ref(false);
+const loading = ref(false);
+const baseCropperRef = ref<InstanceType<typeof BaseCropper> | null>(null);
+
+const maxWidth = computed(() => {
+  if (props.cropper.config?.maxWidth) {
+    return props.cropper.config.maxWidth;
+  }
+  return 384;
+});
+
+const cropperSize = ref(maxWidth.value);
+
+const onResizeDebounced = debounce(() => {
+  onResize();
+}, 100);
+
+function onResize() {
+  cropperSize.value = Math.min(window.innerWidth, maxWidth.value);
+}
+
+const cropperInternal = computed(() => {
+  return {
+    ...props.cropper,
+    config: {
+      ...props.cropper.config,
+      maxWidth: cropperSize.value,
+    },
+  };
+});
+
+onMounted(() => {
+  onResize();
+
+  // To avoid the cropper to be initialized with a wrong size
+  ready.value = true;
+
+  window.addEventListener('resize', onResizeDebounced);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResizeDebounced);
+});
+
+async function save() {
+  if (!baseCropperRef.value) {
+    return null;
+  }
+
+  loading.value = true;
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      baseCropperRef.value
+        ?.save()
+        .then((result) => {
+          resolve(result);
+          if (result) {
+            emits('cropped', result);
+          }
+          close();
+        })
+        .catch((error) => {
+          reject(error);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }, 50);
+  });
+}
+
+function close() {
+  emits('update:modelValue', false);
+}
+
+defineExpose({
+  save,
+});
+</script>

package/src/components/BaseFilePicker.stories.js

@@ -1,18 +1,27 @@
 import BaseFilePicker from './BaseFilePicker.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
 
 export default {
   title: 'Form/BaseFilePicker',
   component: BaseFilePicker,
+  args: {},
 };
 
 const Template = (args) => ({
-  components: { BaseFilePicker, BaseIcon },
+  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppNotifications },
   setup() {
-    return { args };
+    const file = ref(null);
+
+    function onSelect(f) {
+      file.value = f;
+    }
+
+    return { args, file, onSelect };
   },
   template: `
-    <BaseFilePicker v-bind="args">
+    <BaseFilePicker v-bind="args" @select="onSelect">
       <template #default="{ dragging, disabled }">
         <div
           class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
@@ -35,16 +44,34 @@ const Template = (args) => ({
             >
               {{ $t("sui.drop_or_click_to_upload") }}
             </p>
+            <div class="mt-1">
+              <p v-if="args.maxSize" class="text-sm text-slate-500">Max {{ args.maxSize }} bytes</p>
+              <p v-if="args.acceptedExtensions" class="text-sm text-slate-500">{{ args.acceptedExtensions?.join(', ') }}</p>
+            </div>
           </div>
         </div>
       </template>
     </BaseFilePicker>
+
+    <ShowValue :value="file" />
+
+    <BaseAppNotifications></BaseAppNotifications>
   `,
 });
 
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const MaxSize = Template.bind({});
+MaxSize.args = {
+  maxSize: 1024 * 10, // 10kb
+};
+
+export const FileExtension = Template.bind({});
+FileExtension.args = {
+  acceptedExtensions: ['xlsx', 'xls'],
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

package/src/components/BaseFilePicker.vue

@@ -23,79 +23,111 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
-    buttonClass: {
-      default: '',
-      type: String,
-    },
-    accept: {
-      default: undefined,
-      type: String,
-    },
-  },
-  emits: ['select'],
-  data() {
-    return {
-      selecting: false,
-      dragging: false,
-    };
-  },
-  computed: {
-    inputElement(): HTMLInputElement | undefined {
-      return this.$refs.input as HTMLInputElement | undefined;
-    },
-  },
-  methods: {
-    async pickFile() {
-      if (this.disabled) {
-        return;
-      }
-
-      (this.$refs.input as HTMLElement | undefined)?.click();
-    },
-    onInputChange() {
-      const files = (this.inputElement?.files ?? []) as File[];
-      this.select(files);
-    },
-    handleDrop(e: any) {
-      if (this.disabled) {
-        return;
-      }
-
-      const files = e?.dataTransfer?.files ?? [];
-
-      this.select(files);
-    },
-    async select(files: File[]) {
-      if (this.disabled) {
-        return;
-      }
-
-      if (!files || files.length == 0 || !(files[0] instanceof File)) {
-        return;
-      }
-
-      this.selecting = true;
-
-      try {
-        const file = files[0];
-
-        this.$emit('select', file);
-      } finally {
-        if (this.inputElement) {
-          this.inputElement.value = '';
-        }
-        this.selecting = false;
-      }
-    },
-  },
-});
+<script lang="ts" setup>
+import { useNotificationsStore } from '@/stores/notifications';
+import { fileSizeFormat, toHumanList } from '@/utils';
+import { maxSize, validExtension } from '@/utils/fileValidations';
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    buttonClass?: string;
+    maxSize?: number;
+    accept?: string;
+    acceptedExtensions?: string[];
+  }>(),
+  {
+    disabled: false,
+    buttonClass: '',
+    maxSize: 1024 * 1024 * 20, // 20 MB,
+    accept: undefined,
+    acceptedExtensions: undefined,
+  }
+);
+
+const emit = defineEmits(['select']);
+
+const notifications = useNotificationsStore();
+
+const i18n = useI18n();
+
+const selecting = ref(false);
+const dragging = ref(false);
+const input = ref<HTMLInputElement | undefined>();
+
+async function pickFile() {
+  if (props.disabled) {
+    return;
+  }
+
+  input.value?.click();
+}
+
+function onInputChange() {
+  const files = (input.value?.files ?? []) as File[];
+  select(files);
+}
+
+function handleDrop(e: any) {
+  if (props.disabled) {
+    return;
+  }
+
+  const files = e?.dataTransfer?.files ?? [];
+
+  select(files);
+}
+
+async function select(files: File[]) {
+  if (props.disabled) {
+    return;
+  }
+
+  if (!files || files.length == 0 || !(files[0] instanceof File)) {
+    return;
+  }
+
+  selecting.value = true;
+
+  try {
+    const file = files[0];
+
+    if (!maxSize(file, props.maxSize)) {
+      notifications.push({
+        color: 'danger',
+        title: i18n.t('sui.error'),
+        text: i18n.t('sui.the_file_size_must_not_exceed_x', {
+          x: fileSizeFormat(props.maxSize),
+        }),
+      });
+
+      selecting.value = false;
+      return;
+    }
+
+    if (!validExtension(file, props.acceptedExtensions)) {
+      notifications.push({
+        color: 'danger',
+        title: i18n.t('sui.error'),
+        text:
+          i18n.t('sui.the_file_type_is_invalid') +
+          ' ' +
+          i18n.t('sui.file_must_be_of_type') +
+          ' ' +
+          toHumanList(props.acceptedExtensions as string[], i18n.t('sui.or')) +
+          '.',
+      });
+
+      selecting.value = false;
+      return;
+    }
+
+    emit('select', file);
+  } finally {
+    if (input.value) {
+      input.value.value = '';
+    }
+    selecting.value = false;
+  }
+}
 </script>

package/src/components/BaseFilePickerCrop.stories.js

@@ -0,0 +1,134 @@
+import BaseFilePickerCrop from '@/components/BaseFilePickerCrop.vue';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseCropper from '@/components/BaseCropper.vue';
+import BaseModalCenter from '@/components/BaseModalCenter.vue';
+import BaseButton from '@/components/BaseButton.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseFilePickerCrop',
+  component: BaseFilePickerCrop,
+  args: {
+    buttonClass: 'w-full',
+    acceptedExtensions: ['jpg', 'jpeg', 'png'],
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseFilePickerCrop,
+    BaseIcon,
+    BaseLoadingCover,
+    BaseAppNotifications,
+    BaseCropper,
+    BaseModalCenter,
+    BaseButton,
+    ShowValue,
+  },
+  setup() {
+    const file = ref(null);
+
+    function onSelect(f) {
+      file.value = f;
+    }
+
+    return { args, file, onSelect };
+  },
+  template: `
+    <BaseFilePickerCrop v-bind="args" @select="onSelect">
+      <template #default="{ dragging, disabled, uploading, selecting }">
+        <div
+          class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
+          :class="[
+            dragging ? 'bg-slate-100' : 'bg-white',
+            disabled ? 'bg-slate-100 cursor-not-allowed' : 'hover:bg-slate-50',
+          ]"
+        >
+          <div class="rounded-full bg-slate-200 p-2">
+            <BaseIcon
+              icon="heroicons:arrow-up-on-square"
+              class="h-6 w-6"
+              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
+            />
+          </div>
+          <div class="text-left" :class="[disabled ? 'opacity-50' : '']">
+            <p class="mb-0 text-sm font-medium leading-tight">
+              {{ $t("sui.drop_or_click_to_upload") }}
+            </p>
+            <div class="mt-1">
+              <p v-if="args.maxSize" class="text-sm text-slate-500">Max {{ args.maxSize }} bytes</p>
+              <p v-if="args.acceptedExtensions" class="text-sm text-slate-500">{{ args.acceptedExtensions?.join(', ') }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #loading="{ dragging, disabled, uploading, selecting }">
+        <BaseLoadingCover
+          :model-value="args.loading || uploading || selecting"
+          :delay="0"
+          icon-class="text-primary-600 w-6 h-6"
+          backdrop-class="bg-white opacity-60"
+        />
+      </template>
+    </BaseFilePickerCrop>
+
+    <ShowValue :value="file" />
+
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Avatar = Template.bind({});
+Avatar.args = {
+  cropper: {
+    preset: 'avatar',
+    presetOptions: {
+      size: 300,
+    },
+    config: {
+      maxWidth: 300,
+    },
+  },
+};
+
+export const Cover = Template.bind({});
+Cover.args = {
+  cropper: {
+    preset: 'cover',
+    presetOptions: {
+      size: 600,
+    },
+    config: {
+      maxWidth: 600,
+    },
+  },
+};
+
+export const Resize = Template.bind({});
+Resize.args = {
+  cropper: {
+    maxSize: 600,
+    config: {
+      initialResize: 100,
+    },
+    preset: 'cover',
+    presetOptions: {
+      size: 600,
+    },
+  },
+};
+
+export const MaxSize = Template.bind({});
+MaxSize.args = {
+  maxSize: 10 * 1024,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

package/src/components/BaseFilePickerCrop.vue

@@ -0,0 +1,116 @@
+<template>
+  <BaseFilePicker
+    :button-class="buttonClass"
+    :disabled="disabled"
+    accept="image/*"
+    :max-size="maxSize"
+    :accepted-extensions="acceptedExtensions"
+    @select="launchCropper"
+  >
+    <template #default="slotProps">
+      <slot name="default" v-bind="slotProps" />
+
+      <BaseCropperModal
+        v-if="cropperInternal"
+        ref="baseCropperModalRef"
+        v-model="showCropperModal"
+        :cropper="cropperInternal"
+        @cropped="onCropped"
+      />
+    </template>
+  </BaseFilePicker>
+</template>
+
+<script lang="ts" setup>
+import BaseFilePicker from '@/components/BaseFilePicker.vue';
+import BaseCropperModal from '@/components/BaseCropperModal.vue';
+import { blobToBase64 } from '@/utils';
+import { BaseCropperConfig } from '@/types';
+import { isObject, reject } from 'lodash';
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    buttonClass?: string;
+    maxSize?: number;
+    acceptedExtensions?: string[];
+    cropper: BaseCropperConfig | null;
+  }>(),
+  {
+    disabled: false,
+    buttonClass: '',
+    maxSize: 1024 * 1024 * 20, // 20 MB
+    acceptedExtensions: undefined,
+  }
+);
+
+const baseCropperModalRef = ref<InstanceType<typeof BaseCropperModal> | null>(
+  null
+);
+
+const emit = defineEmits(['select']);
+
+const showCropperModal = ref(false);
+const cropperSource = ref('');
+
+const cropperInternal = computed<BaseCropperConfig | null>(() => {
+  if (!cropperSource.value) {
+    return null;
+  }
+
+  if (isObject(props.cropper)) {
+    return {
+      ...props.cropper,
+      source: cropperSource.value,
+    };
+  }
+
+  return {
+    source: cropperSource.value,
+  };
+});
+
+async function launchCropper(file: File) {
+  if (!file) {
+    return;
+  }
+
+  showCropperModal.value = false;
+  cropperSource.value = await blobToBase64(file);
+
+  if (!cropperSource.value) {
+    return;
+  }
+
+  showCropperModal.value = true;
+}
+
+async function onCropped(cropped: HTMLCanvasElement | string | Blob) {
+  if (cropped instanceof Blob) {
+    emit('select', cropped);
+    return;
+  }
+
+  if (cropped instanceof HTMLCanvasElement) {
+    const blob = await new Promise<Blob>((resolve) => {
+      cropped.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error('Failed to convert canvas to blob'));
+        }
+      });
+    });
+
+    emit('select', blob);
+
+    return;
+  }
+
+  if (typeof cropped === 'string') {
+    const blob = await fetch(cropped).then((r) => r.blob());
+    emit('select', blob);
+    return;
+  }
+}
+</script>

package/src/components/BaseFileUploader.stories.js

@@ -31,21 +31,17 @@ const Template = (args) => ({
           class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
           :class="[
             dragging ? 'bg-slate-100' : 'bg-white',
-            disabled ? 'bg-slate-100 cursor-not-allowed' : 'hover:bg-slate-50',
+            disabled ? 'bg-slate-100 cursor-not-allowed opacity-50' : 'hover:bg-slate-50',
           ]"
         >
           <div class="rounded-full bg-slate-200 p-2">
             <BaseIcon
               icon="heroicons:arrow-up-on-square"
               class="h-6 w-6"
-              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
             />
           </div>
           <div class="text-left">
-            <p 
-              class="mb-0 text-sm font-medium leading-tight" 
-              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
-            >
+            <p class="mb-0 text-sm font-medium leading-tight">
               {{ $t("sui.drop_or_click_to_upload") }}
             </p>
             <p class="text-sm text-slate-500 mt-1">Max 200kb</p>
@@ -57,7 +53,7 @@ const Template = (args) => ({
         <BaseLoadingCover
           :model-value="args.loading || uploading || selecting"
           :delay="0"
-          icon-class="text-primary-600 w-6 h-6"
+          icon-class="text-red-600 w-6 h-6"
           backdrop-class="bg-white opacity-60"
         />
       </template>
@@ -69,6 +65,14 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const ImagePicker = Template.bind({});
+ImagePicker.args = {
+  component: 'BaseFilePickerCrop',
+  cropper: {
+    preset: 'avatar',
+  },
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,