@getmicdrop/svelte-components 5.20.2 → 5.21.0

package/dist/recipes/CropImage/CropImage.svelte

@@ -1,241 +1,241 @@
-<script lang="ts">
-  import Cropper from 'svelte-easy-crop';
-  import { CloseOutline, MinusOutline, PlusOutline } from "../../primitives/Icons";
-  import Button from '../../primitives/Button/Button.svelte';
-  import { typography } from '../../tokens/typography';
-  import { createImage, supportsWebP } from '../../utils/imageOptimizer';
-
-  /**
-   * Default labels for user-visible strings in CropImage.
-   * Consumers can override via the `labels` prop.
-   */
-  const defaultLabels = {
-    cropImageTitle: 'Crop image',
-    loading: 'Loading...',
-    dragToPosition: 'Drag to position. Pinch or use slider to zoom.',
-    cancel: 'Cancel',
-    uploading: 'Uploading...',
-    save: 'Save',
-    closeModal: 'Close modal',
-    zoomOut: 'Zoom out',
-    zoomIn: 'Zoom in',
-    zoomLevel: 'Zoom level',
-  };
-
-  interface Props {
-    /** Whether to show the modal */
-    showModal?: boolean;
-    /** Image source to crop */
-    imageSrc?: string;
-    /** Callback when save is clicked with cropped image */
-    onSave?: (croppedImage: File) => void;
-    /** Callback when cancel is clicked */
-    onCancel?: () => void;
-    /** Whether image is currently uploading */
-    isUploadingImage?: boolean;
-    /** Override user-visible strings */
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    showModal = $bindable(false),
-    imageSrc = $bindable(''),
-    onSave = () => {},
-    onCancel = () => {},
-    isUploadingImage = false,
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let crop = $state({ x: 0, y: 0 });
-  let zoom = $state(1);
-  let croppedAreaPixels = $state<{ x: number; y: number; width: number; height: number } | null>(null);
-  let isLoading = $state(true);
-  let isSaving = $state(false);
-
-  $effect(() => {
-    if (showModal && imageSrc) {
-      crop = { x: 0, y: 0 };
-      zoom = 1;
-      croppedAreaPixels = null;
-      isLoading = true;
-      isSaving = false; // Reset saving state when modal opens with new image
-    }
-  });
-
-  function handleCropComplete(e: { pixels: { x: number; y: number; width: number; height: number } }) {
-    croppedAreaPixels = e.pixels;
-    isLoading = false;
-  }
-
-  async function handleSave() {
-    if (!croppedAreaPixels || isSaving) return;
-
-    isSaving = true;
-    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
-    onSave(croppedImage);
-  }
-
-  function closeModal() {
-    showModal = false;
-    imageSrc = '';
-    crop = { x: 0, y: 0 };
-    zoom = 1;
-    croppedAreaPixels = null;
-    isSaving = false;
-    onCancel();
-  }
-
-  async function getCroppedImg(imageSrc: string, pixelCrop: { x: number; y: number; width: number; height: number }): Promise<File> {
-    const image = await createImage(imageSrc);
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d')!;
-
-    const maxSize = 1000;
-    canvas.width = maxSize;
-    canvas.height = maxSize;
-
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = 'high';
-
-    ctx.drawImage(
-      image,
-      pixelCrop.x,
-      pixelCrop.y,
-      pixelCrop.width,
-      pixelCrop.height,
-      0,
-      0,
-      maxSize,
-      maxSize
-    );
-
-    const useWebP = supportsWebP();
-    const mimeType = useWebP ? 'image/webp' : 'image/jpeg';
-    const quality = useWebP ? 0.80 : 0.85;
-    const extension = useWebP ? 'webp' : 'jpg';
-
-    return new Promise((resolve) => {
-      canvas.toBlob(
-        (blob) => {
-          const file = new File([blob!], `cropped-image.${extension}`, {
-            type: mimeType,
-          });
-          resolve(file);
-        },
-        mimeType,
-        quality
-      );
-    });
-  }
-</script>
-
-{#if showModal}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900/50 dark:bg-gray-900/80 p-4"
-    onclick={(e) => { if (e.target === e.currentTarget) closeModal(); }}
-  >
-    <div class="relative w-full max-w-lg max-h-full">
-      <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
-        <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-          <h3 class={typography.h2}>
-            {labels.cropImageTitle}
-          </h3>
-          <Button
-            variant="icon"
-            size="sm"
-            onclick={closeModal}
-            aria-label={labels.closeModal}
-          >
-            <CloseOutline class="w-3 h-3" />
-          </Button>
-        </div>
-
-        <div class="p-4 md:p-6 space-y-4">
-          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
-            {#if isLoading}
-              <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
-                <span class={typography.smMuted}>{labels.loading}</span>
-              </div>
-            {/if}
-            <Cropper
-              image={imageSrc}
-              bind:crop
-              bind:zoom
-              aspect={1}
-              minZoom={1}
-              maxZoom={3}
-              showGrid={true}
-              oncropcomplete={handleCropComplete}
-            />
-          </div>
-
-          <p class={`${typography.smMuted} text-center`}>
-            {labels.dragToPosition}
-          </p>
-
-          <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
-            <Button
-              variant="outline"
-              size="sm"
-              class="rounded-full! w-9! h-9! p-0! shrink-0"
-              onclick={() => (zoom = Math.max(1, zoom - 0.2))}
-              aria-label={labels.zoomOut}
-            >
-              <MinusOutline class="w-4 h-4" />
-            </Button>
-
-            <input
-              type="range"
-              min="1"
-              max="3"
-              step="0.1"
-              bind:value={zoom}
-              class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
-              aria-label={labels.zoomLevel}
-            />
-
-            <Button
-              variant="outline"
-              size="sm"
-              class="rounded-full! w-9! h-9! p-0! shrink-0"
-              onclick={() => (zoom = Math.min(3, zoom + 0.2))}
-              aria-label={labels.zoomIn}
-            >
-              <PlusOutline class="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-
-        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b-lg dark:border-gray-600">
-          <Button
-            type="button"
-            variant="alternative"
-            size="md"
-            minWidth="sm"
-            onclick={closeModal}
-            disabled={isSaving || isUploadingImage}
-          >
-            {labels.cancel}
-          </Button>
-          <Button
-            type="button"
-            size="md"
-            minWidth="sm"
-            onclick={handleSave}
-            disabled={isLoading || isSaving || isUploadingImage}
-          >
-            {#if isSaving || isUploadingImage}
-              {labels.uploading}
-            {:else}
-              {labels.save}
-            {/if}
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import Cropper from 'svelte-easy-crop';
+  import { CloseOutline, MinusOutline, PlusOutline } from "../../primitives/Icons";
+  import Button from '../../primitives/Button/Button.svelte';
+  import { typography } from '../../tokens/typography';
+  import { createImage, supportsWebP } from '../../utils/imageOptimizer';
+
+  /**
+   * Default labels for user-visible strings in CropImage.
+   * Consumers can override via the `labels` prop.
+   */
+  const defaultLabels = {
+    cropImageTitle: 'Crop image',
+    loading: 'Loading...',
+    dragToPosition: 'Drag to position. Pinch or use slider to zoom.',
+    cancel: 'Cancel',
+    uploading: 'Uploading...',
+    save: 'Save',
+    closeModal: 'Close modal',
+    zoomOut: 'Zoom out',
+    zoomIn: 'Zoom in',
+    zoomLevel: 'Zoom level',
+  };
+
+  interface Props {
+    /** Whether to show the modal */
+    showModal?: boolean;
+    /** Image source to crop */
+    imageSrc?: string;
+    /** Callback when save is clicked with cropped image */
+    onSave?: (croppedImage: File) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Whether image is currently uploading */
+    isUploadingImage?: boolean;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    showModal = $bindable(false),
+    imageSrc = $bindable(''),
+    onSave = () => {},
+    onCancel = () => {},
+    isUploadingImage = false,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let crop = $state({ x: 0, y: 0 });
+  let zoom = $state(1);
+  let croppedAreaPixels = $state<{ x: number; y: number; width: number; height: number } | null>(null);
+  let isLoading = $state(true);
+  let isSaving = $state(false);
+
+  $effect(() => {
+    if (showModal && imageSrc) {
+      crop = { x: 0, y: 0 };
+      zoom = 1;
+      croppedAreaPixels = null;
+      isLoading = true;
+      isSaving = false; // Reset saving state when modal opens with new image
+    }
+  });
+
+  function handleCropComplete(e: { pixels: { x: number; y: number; width: number; height: number } }) {
+    croppedAreaPixels = e.pixels;
+    isLoading = false;
+  }
+
+  async function handleSave() {
+    if (!croppedAreaPixels || isSaving) return;
+
+    isSaving = true;
+    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
+    onSave(croppedImage);
+  }
+
+  function closeModal() {
+    showModal = false;
+    imageSrc = '';
+    crop = { x: 0, y: 0 };
+    zoom = 1;
+    croppedAreaPixels = null;
+    isSaving = false;
+    onCancel();
+  }
+
+  async function getCroppedImg(imageSrc: string, pixelCrop: { x: number; y: number; width: number; height: number }): Promise<File> {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d')!;
+
+    const maxSize = 1000;
+    canvas.width = maxSize;
+    canvas.height = maxSize;
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    ctx.drawImage(
+      image,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      maxSize,
+      maxSize
+    );
+
+    const useWebP = supportsWebP();
+    const mimeType = useWebP ? 'image/webp' : 'image/jpeg';
+    const quality = useWebP ? 0.80 : 0.85;
+    const extension = useWebP ? 'webp' : 'jpg';
+
+    return new Promise((resolve) => {
+      canvas.toBlob(
+        (blob) => {
+          const file = new File([blob!], `cropped-image.${extension}`, {
+            type: mimeType,
+          });
+          resolve(file);
+        },
+        mimeType,
+        quality
+      );
+    });
+  }
+</script>
+
+{#if showModal}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900/50 dark:bg-gray-900/80 p-4"
+    onclick={(e) => { if (e.target === e.currentTarget) closeModal(); }}
+  >
+    <div class="relative w-full max-w-lg max-h-full">
+      <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
+        <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+          <h3 class={typography.h2}>
+            {labels.cropImageTitle}
+          </h3>
+          <Button
+            variant="icon"
+            size="sm"
+            onclick={closeModal}
+            aria-label={labels.closeModal}
+          >
+            <CloseOutline class="w-3 h-3" />
+          </Button>
+        </div>
+
+        <div class="p-4 md:p-6 space-y-4">
+          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
+            {#if isLoading}
+              <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
+                <span class={typography.smMuted}>{labels.loading}</span>
+              </div>
+            {/if}
+            <Cropper
+              image={imageSrc}
+              bind:crop
+              bind:zoom
+              aspect={1}
+              minZoom={1}
+              maxZoom={3}
+              showGrid={true}
+              oncropcomplete={handleCropComplete}
+            />
+          </div>
+
+          <p class={`${typography.smMuted} text-center`}>
+            {labels.dragToPosition}
+          </p>
+
+          <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
+            <Button
+              variant="outline"
+              size="sm"
+              class="rounded-full! w-9! h-9! p-0! shrink-0"
+              onclick={() => (zoom = Math.max(1, zoom - 0.2))}
+              aria-label={labels.zoomOut}
+            >
+              <MinusOutline class="w-4 h-4" />
+            </Button>
+
+            <input
+              type="range"
+              min="1"
+              max="3"
+              step="0.1"
+              bind:value={zoom}
+              class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
+              aria-label={labels.zoomLevel}
+            />
+
+            <Button
+              variant="outline"
+              size="sm"
+              class="rounded-full! w-9! h-9! p-0! shrink-0"
+              onclick={() => (zoom = Math.min(3, zoom + 0.2))}
+              aria-label={labels.zoomIn}
+            >
+              <PlusOutline class="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b-lg dark:border-gray-600">
+          <Button
+            type="button"
+            variant="alternative"
+            size="md"
+            minWidth="sm"
+            onclick={closeModal}
+            disabled={isSaving || isUploadingImage}
+          >
+            {labels.cancel}
+          </Button>
+          <Button
+            type="button"
+            size="md"
+            minWidth="sm"
+            onclick={handleSave}
+            disabled={isLoading || isSaving || isUploadingImage}
+          >
+            {#if isSaving || isUploadingImage}
+              {labels.uploading}
+            {:else}
+              {labels.save}
+            {/if}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}