sprintify-ui 0.0.183 → 0.0.184

package/src/components/BaseCropper.stories.js

@@ -0,0 +1,113 @@
+import BaseCropper from '@/components/BaseCropper.vue';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Form/BaseCropper',
+  component: BaseCropper,
+  args: {
+    source:
+      'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCropper,
+    BaseIcon,
+    BaseLoadingCover,
+    BaseAppNotifications,
+  },
+  setup() {
+    const cropperRef = ref(null);
+
+    function saveAsCanvas() {
+      cropperRef.value.save({
+        type: 'canvas',
+        size: 'original',
+      });
+    }
+
+    return { args, saveAsCanvas, cropperRef };
+  },
+  template: `
+    <BaseCropper ref="cropperRef" v-bind="args">
+      <template #footer="{cancelCrop, initializing, rotateLeft, rotateRight}">
+        <div class="mt-1 flex flex-wrap gap-2">
+          <button
+            type="button"
+            :disabled="initializing"
+            class="btn btn-sm"
+            @click="rotateLeft()"
+          >
+            Rotate Left
+          </button>
+
+          <button
+            type="button"
+            :disabled="initializing"
+            class="btn btn-sm"
+            @click="rotateRight()"
+          >
+            Rotate Right
+          </button>
+
+          <button
+            type="button"
+            :disabled="!initializing"
+            class="btn btn-sm"
+            @click="cancelCrop()"
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            :disabled="initializing"
+            class="btn btn-sm"
+            @click="saveAsCanvas()"
+          >
+            Save as Canvas
+          </button>
+        </div>
+      </template>
+    </BaseCropper>
+
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  config: {
+    height: 200,
+    width: 200,
+    viewport: {
+      width: 200,
+      height: 200,
+      type: 'rectangle',
+    },
+    boundary: {
+      width: 200,
+      height: 200,
+    },
+  },
+};
+
+export const Avatar = Template.bind({});
+
+Avatar.args = {
+  preset: 'avatar',
+};
+
+export const Cover = Template.bind({});
+
+Cover.args = {
+  preset: 'cover',
+  presetOptions: {
+    size: 400,
+    ratio: 16 / 9,
+  },
+};

package/src/components/BaseCropper.vue

@@ -0,0 +1,451 @@
+<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';
+
+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() {
+  console.log('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> {
+  console.log('resizeImage');
+
+  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,
+    };
+
+  console.log(resultConfig);
+
+  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>

package/src/components/BaseCropperModal.stories.js

@@ -0,0 +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,
+    },
+  },
+};