sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseCropper.vue

@@ -1,446 +1,446 @@
-<template>
-  <div
-    class="relative"
-    :style="{
-      width: cropperConfiguration?.boundary?.width + 'px',
-    }"
-  >
-    <slot
-      name="header"
-      :saving="saving"
-      :initializing="initializing"
-      v-bind="shared"
-    />
-
-    <div ref="container" class="base-cropper-wrapper relative">
-      <div
-        :style="{
-          width: cropperConfiguration?.boundary?.width + 'px',
-          height: cropperConfiguration?.showZoomer
-            ? (cropperConfiguration?.boundary?.height ?? 0) +
-              ZOOMER_HEIGHT +
-              'px'
-            : cropperConfiguration?.boundary?.height + 'px',
-        }"
-      >
-        <div
-          ref="croppie"
-          :style="{
-            visibility: initializing ? 'hidden' : 'visible',
-          }"
-        />
-      </div>
-
-      <div
-        v-show="!initializing"
-        class="absolute left-0 z-[1] flex w-full items-center justify-center"
-        :style="{
-          bottom: cropperConfiguration?.showZoomer
-            ? ZOOMER_HEIGHT - 13 + 'px'
-            : 6 + 'px',
-        }"
-      >
-        <div class="flex overflow-hidden rounded-full shadow-md">
-          <button
-            type="button"
-            :disabled="disabled"
-            class="border-r border-slate-300 bg-white px-3 py-1.5 hover:bg-slate-100"
-            @click="rotateLeft"
-          >
-            <BaseIcon icon="mdi:rotate-left" class="h-4 w-4" />
-          </button>
-          <button
-            type="button"
-            :disabled="disabled"
-            class="bg-white px-3 py-1.5 hover:bg-slate-100"
-            @click="rotateRight"
-          >
-            <BaseIcon icon="mdi:rotate-right" class="h-4 w-4" />
-          </button>
-        </div>
-      </div>
-
-      <div
-        v-if="showDragHelp"
-        class="pointer-events-none absolute left-0 top-14 z-[1] flex w-full animate-pulse justify-center"
-      >
-        <div
-          class="flex items-center rounded-lg bg-black bg-opacity-75 px-3 py-1.5 text-center text-white"
-        >
-          <BaseIcon icon="ri:drag-move-2-fill" class="mr-1 h-5 w-5" />
-          <span>
-            {{ t('drag_to_reposition') }}
-          </span>
-        </div>
-      </div>
-
-      <BaseLoadingCover
-        :delay="40"
-        class="z-[1]"
-        :model-value="initializing"
-      ></BaseLoadingCover>
-    </div>
-
-    <slot
-      name="footer"
-      :saving="saving"
-      :initializing="initializing"
-      v-bind="shared"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, Ref } from 'vue';
-import Croppie, { CroppieOptions, CropType, ResultOptions } from 'croppie';
-import 'croppie/croppie.css';
-import { ref, onMounted } from 'vue';
-import { resizeImageFromURI } from '@/utils';
-import { cloneDeep, debounce } from 'lodash';
-import { CropperConfig } from '../types';
-import { BaseIcon, BaseLoadingCover } from '.';
-import { presets } from '@/utils/cropper/presets';
-import { t } from '@/i18n';
-
-const props = defineProps<{
-  source: string;
-  config?: CropperConfig;
-  preset?: 'avatar' | 'cover';
-  presetOptions?: Record<string, any>;
-  disabled?: boolean;
-  saveOptions?: ResultOptions;
-}>();
-
-const RESIZE_MAX_SIZE = 1000;
-const ZOOMER_HEIGHT = 44;
-
-const container = ref(null) as Ref<HTMLElement | null>;
-const croppie = ref(null) as Ref<HTMLElement | null>;
-
-let lastSource = null as string | null;
-let lastInitialResize = null as number | null;
-let lastSourceResized = null as string | null;
-
-let cropper = null as Croppie | null;
-
-// Croppie initialization
-const initializing = ref(false);
-
-// Croppie saving cropped image
-const saving = ref(false);
-
-const showDragHelp = ref(false);
-
-const sourceOriginalWidth = ref(0);
-const sourceOriginalHeight = ref(0);
-
-const resetViewPortDebounced = debounce(() => {
-  resetViewPort();
-}, 100);
-
-watch(
-  () =>
-    JSON.stringify({
-      ...(props.config ?? {}),
-      source: props.source,
-      preset: props.preset,
-      presetOptions: props.presetOptions,
-    }),
-  () => {
-    resetViewPortDebounced();
-  }
-);
-
-onMounted(() => {
-  init();
-});
-
-onBeforeUnmount(() => {
-  // Give time for animations to finish
-  setTimeout(() => {
-    destroy();
-  }, 400);
-});
-
-const cropperConfiguration = computed<CroppieOptions>(() => {
-  let config = cloneDeep(props.config ?? {});
-
-  if (props.preset) {
-    const preset = presets[props.preset] ?? null;
-
-    if (preset) {
-      const presetClass = new preset(config, props.presetOptions);
-      config = presetClass.handle();
-    }
-  }
-
-  // Put default values
-
-  config.width = config.width ?? 300;
-  config.height = config.height ?? 300;
-  config.maxWidth = config.maxWidth ?? undefined;
-  config.enableResize = config.enableResize ?? false;
-  config.enableZoom = config.enableZoom ?? true;
-  config.enableOrientation = config.enableOrientation ?? true;
-  config.showZoomer = config.showZoomer ?? true;
-  config.viewport = config.viewport ?? {
-    width: config.width,
-    height: config.height,
-    type: 'square' as CropType,
-  };
-  config.boundary = config.boundary ?? {
-    width: config.width,
-    height: config.height,
-  };
-
-  // Make sure values respect max width
-
-  if (config.maxWidth) {
-    const ratio = (config.width as number) / (config.height as number);
-    config.width = Math.min(config.width as number, config.maxWidth);
-    config.height = config.width / ratio;
-    config.boundary.width = Math.min(config.boundary.width, config.maxWidth);
-    config.boundary.height = config.boundary.width / ratio;
-    config.viewport.width = Math.min(config.viewport.width, config.maxWidth);
-    config.viewport.height = config.viewport.width / ratio;
-  }
-
-  return {
-    enableExif: true,
-    enableResize: config.enableResize,
-    enableZoom: config.enableZoom,
-    enableOrientation: config.enableOrientation,
-    showZoomer: config.showZoomer,
-    viewport: config.viewport,
-    boundary: config.boundary,
-  };
-});
-
-function init() {
-  if (initializing.value) {
-    return;
-  }
-
-  // Start the loading state...
-  initializing.value = true;
-
-  // ...Give time to the loading state to render before doing CPU intensive tasks
-  setTimeout(async () => {
-    try {
-      await initCropper();
-    } catch (error) {
-      console.error(error);
-    } finally {
-      initializing.value = false;
-    }
-  }, 10);
-}
-
-async function initCropper() {
-  if (croppie.value == null) {
-    throw new Error('Croppie element not found');
-  }
-
-  cropper = new Croppie(croppie.value, cropperConfiguration.value);
-
-  const sourceWasChanged = lastSource != props.source;
-  const initialResizeWasChanged =
-    lastInitialResize != props.config?.initialResize;
-
-  if (sourceWasChanged || initialResizeWasChanged) {
-    // Try to resize image to avoid using too much memory
-    lastSourceResized = await resizeImage(props.source);
-  }
-
-  lastSource = props.source;
-  lastInitialResize = props.config?.initialResize ?? null;
-
-  lastSourceResized = lastSourceResized ?? props.source;
-
-  await cropper.bind({
-    url: lastSourceResized,
-    zoom: 0,
-  });
-
-  showDragHelp.value = true;
-
-  croppie.value.addEventListener('update', (a) => {
-    if (initializing.value) {
-      return;
-    }
-
-    showDragHelp.value = false;
-  });
-}
-
-async function resizeImage(url: string): Promise<string> {
-  await getOriginalDimensions();
-
-  try {
-    const initialResize = getInitialResize();
-
-    if (!initialResize) {
-      return url;
-    }
-
-    return await resizeImageFromURI(
-      url,
-      initialResize.height,
-      initialResize.width
-    );
-  } catch (e: any) {
-    return url;
-  }
-}
-
-async function save(
-  result?: ResultOptions
-): Promise<HTMLCanvasElement | string | Blob | null> {
-  if (!cropper) {
-    return null;
-  }
-
-  saving.value = true;
-
-  const resultConfig = result ??
-    props.saveOptions ?? {
-      type: 'blob',
-      size: 'original',
-      circle: false,
-    };
-
-  const r = await cropper.result(resultConfig);
-
-  saving.value = false;
-
-  return r;
-}
-
-function resetViewPort() {
-  if (!initializing.value) {
-    destroy();
-    init();
-  }
-}
-
-function rotateLeft() {
-  cropper?.rotate(90);
-}
-
-function rotateRight() {
-  cropper?.rotate(-90);
-}
-
-const destroy = () => {
-  cropper?.destroy();
-};
-
-async function getOriginalDimensions() {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = props.source;
-    img.onload = () => {
-      sourceOriginalWidth.value = img.width;
-      sourceOriginalHeight.value = img.height;
-      resolve(true);
-    };
-  });
-}
-
-function getInitialResize() {
-  const resizeMax = props.config?.initialResize ?? RESIZE_MAX_SIZE;
-
-  const reducedWidth =
-    sourceOriginalWidth.value > resizeMax
-      ? resizeMax
-      : sourceOriginalWidth.value;
-
-  const reducedHeight =
-    sourceOriginalHeight.value > resizeMax
-      ? resizeMax
-      : sourceOriginalHeight.value;
-
-  const ratioWidth = reducedWidth / sourceOriginalWidth.value;
-  const ratioHeight = reducedHeight / sourceOriginalHeight.value;
-  const ratio = ratioWidth > ratioHeight ? ratioWidth : ratioHeight;
-
-  return {
-    width: sourceOriginalWidth.value * ratio,
-    height: sourceOriginalHeight.value * ratio,
-  };
-}
-
-const shared = {
-  save,
-  resetViewPort,
-  rotateLeft,
-  rotateRight,
-};
-
-defineExpose(shared);
-</script>
-
-<style lang="postcss">
-.base-cropper-wrapper {
-  .cr-slider-wrap {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:before {
-      content: '-';
-      flex-shrink: 0;
-      font-size: 20px;
-      font-weight: 400;
-      @apply text-slate-900;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 24px;
-    }
-
-    &:after {
-      content: '+';
-      flex-shrink: 0;
-      font-size: 20px;
-      font-weight: 400;
-      @apply text-slate-900;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 24px;
-    }
-  }
-  .cr-slider::-webkit-slider-runnable-track {
-    @apply bg-gray-300;
-    height: 5px;
-  }
-  .cr-slider::-moz-range-track {
-    @apply bg-gray-300;
-    height: 5px;
-  }
-  .cr-slider::-webkit-slider-thumb {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    position: relative;
-    top: -3px;
-    @apply bg-white;
-    @apply shadow-md;
-    @apply ring-0;
-  }
-  .cr-slider::-moz-range-thumb {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    position: relative;
-    top: -3px;
-    @apply bg-white;
-    @apply shadow-md;
-    @apply ring-0;
-  }
-}
-</style>
+<template>
+  <div
+    class="relative"
+    :style="{
+      width: cropperConfiguration?.boundary?.width + 'px',
+    }"
+  >
+    <slot
+      name="header"
+      :saving="saving"
+      :initializing="initializing"
+      v-bind="shared"
+    />
+
+    <div ref="container" class="base-cropper-wrapper relative">
+      <div
+        :style="{
+          width: cropperConfiguration?.boundary?.width + 'px',
+          height: cropperConfiguration?.showZoomer
+            ? (cropperConfiguration?.boundary?.height ?? 0) +
+              ZOOMER_HEIGHT +
+              'px'
+            : cropperConfiguration?.boundary?.height + 'px',
+        }"
+      >
+        <div
+          ref="croppie"
+          :style="{
+            visibility: initializing ? 'hidden' : 'visible',
+          }"
+        />
+      </div>
+
+      <div
+        v-show="!initializing"
+        class="absolute left-0 z-[1] flex w-full items-center justify-center"
+        :style="{
+          bottom: cropperConfiguration?.showZoomer
+            ? ZOOMER_HEIGHT - 13 + 'px'
+            : 6 + 'px',
+        }"
+      >
+        <div class="flex overflow-hidden rounded-full shadow-md">
+          <button
+            type="button"
+            :disabled="disabled"
+            class="border-r border-slate-300 bg-white px-3 py-1.5 hover:bg-slate-100"
+            @click="rotateLeft"
+          >
+            <BaseIcon icon="mdi:rotate-left" class="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            :disabled="disabled"
+            class="bg-white px-3 py-1.5 hover:bg-slate-100"
+            @click="rotateRight"
+          >
+            <BaseIcon icon="mdi:rotate-right" class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-if="showDragHelp"
+        class="pointer-events-none absolute left-0 top-14 z-[1] flex w-full animate-pulse justify-center"
+      >
+        <div
+          class="flex items-center rounded-lg bg-black bg-opacity-75 px-3 py-1.5 text-center text-white"
+        >
+          <BaseIcon icon="ri:drag-move-2-fill" class="mr-1 h-5 w-5" />
+          <span>
+            {{ t('drag_to_reposition') }}
+          </span>
+        </div>
+      </div>
+
+      <BaseLoadingCover
+        :delay="40"
+        class="z-[1]"
+        :model-value="initializing"
+      ></BaseLoadingCover>
+    </div>
+
+    <slot
+      name="footer"
+      :saving="saving"
+      :initializing="initializing"
+      v-bind="shared"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, Ref } from 'vue';
+import Croppie, { CroppieOptions, CropType, ResultOptions } from 'croppie';
+import 'croppie/croppie.css';
+import { ref, onMounted } from 'vue';
+import { resizeImageFromURI } from '@/utils';
+import { cloneDeep, debounce } from 'lodash';
+import { CropperConfig } from '../types';
+import { BaseIcon, BaseLoadingCover } from '.';
+import { presets } from '@/utils/cropper/presets';
+import { t } from '@/i18n';
+
+const props = defineProps<{
+  source: string;
+  config?: CropperConfig;
+  preset?: 'avatar' | 'cover';
+  presetOptions?: Record<string, any>;
+  disabled?: boolean;
+  saveOptions?: ResultOptions;
+}>();
+
+const RESIZE_MAX_SIZE = 1000;
+const ZOOMER_HEIGHT = 44;
+
+const container = ref(null) as Ref<HTMLElement | null>;
+const croppie = ref(null) as Ref<HTMLElement | null>;
+
+let lastSource = null as string | null;
+let lastInitialResize = null as number | null;
+let lastSourceResized = null as string | null;
+
+let cropper = null as Croppie | null;
+
+// Croppie initialization
+const initializing = ref(false);
+
+// Croppie saving cropped image
+const saving = ref(false);
+
+const showDragHelp = ref(false);
+
+const sourceOriginalWidth = ref(0);
+const sourceOriginalHeight = ref(0);
+
+const resetViewPortDebounced = debounce(() => {
+  resetViewPort();
+}, 100);
+
+watch(
+  () =>
+    JSON.stringify({
+      ...(props.config ?? {}),
+      source: props.source,
+      preset: props.preset,
+      presetOptions: props.presetOptions,
+    }),
+  () => {
+    resetViewPortDebounced();
+  }
+);
+
+onMounted(() => {
+  init();
+});
+
+onBeforeUnmount(() => {
+  // Give time for animations to finish
+  setTimeout(() => {
+    destroy();
+  }, 400);
+});
+
+const cropperConfiguration = computed<CroppieOptions>(() => {
+  let config = cloneDeep(props.config ?? {});
+
+  if (props.preset) {
+    const preset = presets[props.preset] ?? null;
+
+    if (preset) {
+      const presetClass = new preset(config, props.presetOptions);
+      config = presetClass.handle();
+    }
+  }
+
+  // Put default values
+
+  config.width = config.width ?? 300;
+  config.height = config.height ?? 300;
+  config.maxWidth = config.maxWidth ?? undefined;
+  config.enableResize = config.enableResize ?? false;
+  config.enableZoom = config.enableZoom ?? true;
+  config.enableOrientation = config.enableOrientation ?? true;
+  config.showZoomer = config.showZoomer ?? true;
+  config.viewport = config.viewport ?? {
+    width: config.width,
+    height: config.height,
+    type: 'square' as CropType,
+  };
+  config.boundary = config.boundary ?? {
+    width: config.width,
+    height: config.height,
+  };
+
+  // Make sure values respect max width
+
+  if (config.maxWidth) {
+    const ratio = (config.width as number) / (config.height as number);
+    config.width = Math.min(config.width as number, config.maxWidth);
+    config.height = config.width / ratio;
+    config.boundary.width = Math.min(config.boundary.width, config.maxWidth);
+    config.boundary.height = config.boundary.width / ratio;
+    config.viewport.width = Math.min(config.viewport.width, config.maxWidth);
+    config.viewport.height = config.viewport.width / ratio;
+  }
+
+  return {
+    enableExif: true,
+    enableResize: config.enableResize,
+    enableZoom: config.enableZoom,
+    enableOrientation: config.enableOrientation,
+    showZoomer: config.showZoomer,
+    viewport: config.viewport,
+    boundary: config.boundary,
+  };
+});
+
+function init() {
+  if (initializing.value) {
+    return;
+  }
+
+  // Start the loading state...
+  initializing.value = true;
+
+  // ...Give time to the loading state to render before doing CPU intensive tasks
+  setTimeout(async () => {
+    try {
+      await initCropper();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      initializing.value = false;
+    }
+  }, 10);
+}
+
+async function initCropper() {
+  if (croppie.value == null) {
+    throw new Error('Croppie element not found');
+  }
+
+  cropper = new Croppie(croppie.value, cropperConfiguration.value);
+
+  const sourceWasChanged = lastSource != props.source;
+  const initialResizeWasChanged =
+    lastInitialResize != props.config?.initialResize;
+
+  if (sourceWasChanged || initialResizeWasChanged) {
+    // Try to resize image to avoid using too much memory
+    lastSourceResized = await resizeImage(props.source);
+  }
+
+  lastSource = props.source;
+  lastInitialResize = props.config?.initialResize ?? null;
+
+  lastSourceResized = lastSourceResized ?? props.source;
+
+  await cropper.bind({
+    url: lastSourceResized,
+    zoom: 0,
+  });
+
+  showDragHelp.value = true;
+
+  croppie.value.addEventListener('update', (a) => {
+    if (initializing.value) {
+      return;
+    }
+
+    showDragHelp.value = false;
+  });
+}
+
+async function resizeImage(url: string): Promise<string> {
+  await getOriginalDimensions();
+
+  try {
+    const initialResize = getInitialResize();
+
+    if (!initialResize) {
+      return url;
+    }
+
+    return await resizeImageFromURI(
+      url,
+      initialResize.height,
+      initialResize.width
+    );
+  } catch (e: any) {
+    return url;
+  }
+}
+
+async function save(
+  result?: ResultOptions
+): Promise<HTMLCanvasElement | string | Blob | null> {
+  if (!cropper) {
+    return null;
+  }
+
+  saving.value = true;
+
+  const resultConfig = result ??
+    props.saveOptions ?? {
+      type: 'blob',
+      size: 'original',
+      circle: false,
+    };
+
+  const r = await cropper.result(resultConfig);
+
+  saving.value = false;
+
+  return r;
+}
+
+function resetViewPort() {
+  if (!initializing.value) {
+    destroy();
+    init();
+  }
+}
+
+function rotateLeft() {
+  cropper?.rotate(90);
+}
+
+function rotateRight() {
+  cropper?.rotate(-90);
+}
+
+const destroy = () => {
+  cropper?.destroy();
+};
+
+async function getOriginalDimensions() {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = props.source;
+    img.onload = () => {
+      sourceOriginalWidth.value = img.width;
+      sourceOriginalHeight.value = img.height;
+      resolve(true);
+    };
+  });
+}
+
+function getInitialResize() {
+  const resizeMax = props.config?.initialResize ?? RESIZE_MAX_SIZE;
+
+  const reducedWidth =
+    sourceOriginalWidth.value > resizeMax
+      ? resizeMax
+      : sourceOriginalWidth.value;
+
+  const reducedHeight =
+    sourceOriginalHeight.value > resizeMax
+      ? resizeMax
+      : sourceOriginalHeight.value;
+
+  const ratioWidth = reducedWidth / sourceOriginalWidth.value;
+  const ratioHeight = reducedHeight / sourceOriginalHeight.value;
+  const ratio = ratioWidth > ratioHeight ? ratioWidth : ratioHeight;
+
+  return {
+    width: sourceOriginalWidth.value * ratio,
+    height: sourceOriginalHeight.value * ratio,
+  };
+}
+
+const shared = {
+  save,
+  resetViewPort,
+  rotateLeft,
+  rotateRight,
+};
+
+defineExpose(shared);
+</script>
+
+<style lang="postcss">
+.base-cropper-wrapper {
+  .cr-slider-wrap {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:before {
+      content: '-';
+      flex-shrink: 0;
+      font-size: 20px;
+      font-weight: 400;
+      @apply text-slate-900;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 24px;
+    }
+
+    &:after {
+      content: '+';
+      flex-shrink: 0;
+      font-size: 20px;
+      font-weight: 400;
+      @apply text-slate-900;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 24px;
+    }
+  }
+  .cr-slider::-webkit-slider-runnable-track {
+    @apply bg-gray-300;
+    height: 5px;
+  }
+  .cr-slider::-moz-range-track {
+    @apply bg-gray-300;
+    height: 5px;
+  }
+  .cr-slider::-webkit-slider-thumb {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    position: relative;
+    top: -3px;
+    @apply bg-white;
+    @apply shadow-md;
+    @apply ring-0;
+  }
+  .cr-slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    position: relative;
+    top: -3px;
+    @apply bg-white;
+    @apply shadow-md;
+    @apply ring-0;
+  }
+}
+</style>