sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseFilePickerCrop.vue

@@ -1,127 +1,127 @@
-<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('');
-let filename = '';
-
-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;
-  }
-
-  filename = file.name;
-
-  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) {
-    emitUpdate(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'));
-        }
-      });
-    });
-
-    emitUpdate(blob);
-
-    return;
-  }
-
-  if (typeof cropped === 'string') {
-    const blob = await fetch(cropped).then((r) => r.blob());
-    emitUpdate(blob);
-    return;
-  }
-}
-
-function emitUpdate(blob: Blob) {
-  const file = new File([blob], filename, {
-    type: blob.type,
-  });
-
-  emit('select', file);
-}
-</script>
+<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('');
+let filename = '';
+
+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;
+  }
+
+  filename = file.name;
+
+  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) {
+    emitUpdate(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'));
+        }
+      });
+    });
+
+    emitUpdate(blob);
+
+    return;
+  }
+
+  if (typeof cropped === 'string') {
+    const blob = await fetch(cropped).then((r) => r.blob());
+    emitUpdate(blob);
+    return;
+  }
+}
+
+function emitUpdate(blob: Blob) {
+  const file = new File([blob], filename, {
+    type: blob.type,
+  });
+
+  emit('select', file);
+}
+</script>

package/src/components/BaseFileUploader.stories.js

@@ -1,84 +1,84 @@
-import BaseFileUploader from '@/components/BaseFileUploader.vue';
-import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-export default {
-  title: 'Form/BaseFileUploader',
-  component: BaseFileUploader,
-  args: {
-    buttonClass: 'w-full',
-    acceptedExtensions: ['jpg', 'png'],
-    maxSize: 1024 * 200, // 200kb
-    url: 'https://dummyjson.com/posts/add',
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseFileUploader,
-    BaseIcon,
-    BaseLoadingCover,
-    BaseAppNotifications,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseFileUploader v-bind="args">
-      <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 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"
-            />
-          </div>
-          <div class="text-left">
-            <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>
-            <p class="text-sm text-slate-500">.jpg, .png</p>
-          </div>
-        </div>
-      </template>
-      <template #loading="{ dragging, disabled, uploading, selecting }">
-        <BaseLoadingCover
-          :model-value="args.loading || uploading || selecting"
-          :delay="0"
-          icon-class="text-red-600 w-6 h-6"
-          backdrop-class="bg-white opacity-60"
-        />
-      </template>
-    </BaseFileUploader>
-    <BaseAppNotifications></BaseAppNotifications>
-  `,
-});
-
-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,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  loading: true,
-};
+import BaseFileUploader from '@/components/BaseFileUploader.vue';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Form/BaseFileUploader',
+  component: BaseFileUploader,
+  args: {
+    buttonClass: 'w-full',
+    acceptedExtensions: ['jpg', 'png'],
+    maxSize: 1024 * 200, // 200kb
+    url: 'https://dummyjson.com/posts/add',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseFileUploader,
+    BaseIcon,
+    BaseLoadingCover,
+    BaseAppNotifications,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseFileUploader v-bind="args">
+      <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 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"
+            />
+          </div>
+          <div class="text-left">
+            <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>
+            <p class="text-sm text-slate-500">.jpg, .png</p>
+          </div>
+        </div>
+      </template>
+      <template #loading="{ dragging, disabled, uploading, selecting }">
+        <BaseLoadingCover
+          :model-value="args.loading || uploading || selecting"
+          :delay="0"
+          icon-class="text-red-600 w-6 h-6"
+          backdrop-class="bg-white opacity-60"
+        />
+      </template>
+    </BaseFileUploader>
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+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,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};