sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseCropperModal.stories.js

@@ -1,54 +1,54 @@
-import BaseCropperModal from '@/components/BaseCropperModal.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
-
-const source =
-  'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80';
-
-export default {
-  title: 'Form/BaseCropperModal',
-  component: BaseCropperModal,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseCropperModal,
-    BaseAppNotifications,
-  },
-  setup() {
-    const value = ref(true);
-    return { args, value };
-  },
-  template: `
-    <BaseCropperModal v-bind="args" v-model="value"></BaseCropperModal>
-    <BaseAppNotifications></BaseAppNotifications>
-  `,
-});
-
-export const Avatar = Template.bind({});
-Avatar.args = {
-  cropper: {
-    source: source,
-    config: {
-      maxWidth: 300,
-    },
-    preset: 'avatar',
-    presetOptions: {
-      size: 300,
-    },
-  },
-};
-
-export const Cover = Template.bind({});
-Cover.args = {
-  cropper: {
-    source: source,
-    config: {
-      maxWidth: 600,
-    },
-    preset: 'cover',
-    presetOptions: {
-      size: 600,
-    },
-  },
-};
+import BaseCropperModal from '@/components/BaseCropperModal.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+
+const source =
+  'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80';
+
+export default {
+  title: 'Form/BaseCropperModal',
+  component: BaseCropperModal,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCropperModal,
+    BaseAppNotifications,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value };
+  },
+  template: `
+    <BaseCropperModal v-bind="args" v-model="value"></BaseCropperModal>
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Avatar = Template.bind({});
+Avatar.args = {
+  cropper: {
+    source: source,
+    config: {
+      maxWidth: 300,
+    },
+    preset: 'avatar',
+    presetOptions: {
+      size: 300,
+    },
+  },
+};
+
+export const Cover = Template.bind({});
+Cover.args = {
+  cropper: {
+    source: source,
+    config: {
+      maxWidth: 600,
+    },
+    preset: 'cover',
+    presetOptions: {
+      size: 600,
+    },
+  },
+};

package/src/components/BaseCropperModal.vue

@@ -1,140 +1,140 @@
-<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 '.';
-import { t } from '@/i18n';
-
-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>
+<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 '.';
+import { t } from '@/i18n';
+
+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>