@getmicdrop/svelte-components 2.8.1 → 3.0.0

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte

@@ -1,23 +1,34 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  export let existingImages = [];
-  export let readonly = false;
-  export let shape = "default";
-  export let label = "";
   import CancelIcon from "../../../../assets/svg/cancel.svg";
-
   import AddMain from "../../../../assets/svg/add-main-01.svg";
   import CloudUpload from "../../../../assets/svg/cloud-upload.svg";
 
-  let images = [];
-  let error = "";
-  let deleteModalOpen = false;
-  let uploadModalOpen = false;
-
-  let selectedIndex = null;
-  let fileType = null;
-
-  const dispatch = createEventDispatcher();
+  /**
+   * @type {{
+   *   existingImages?: string[],
+   *   readonly?: boolean,
+   *   shape?: string,
+   *   label?: string,
+   *   onupload?: (file: File) => void,
+   *   ondelete?: (detail: { index: number }) => void
+   * }}
+   */
+  let {
+    existingImages = [],
+    readonly = false,
+    shape = "default",
+    label = "",
+    onupload,
+    ondelete
+  } = $props();
+
+  let images = $state([]);
+  let error = $state("");
+  let deleteModalOpen = $state(false);
+  let uploadModalOpen = $state(false);
+  let selectedIndex = $state(null);
+  let fileType = $state(null);
+  let isDragOver = $state(false);
 
   const MAX_FILE_SIZE = 300 * 1024 * 1024; // 300 MB
   const ALLOWED_FILE_TYPES = [
@@ -27,7 +38,10 @@
     "image/gif",
   ];
 
-  $: images = existingImages;
+  // Sync images with existingImages prop
+  $effect(() => {
+    images = existingImages;
+  });
 
   function onDrop(event) {
     event.preventDefault();
@@ -54,7 +68,7 @@
         images = [...images, URL.createObjectURL(file)];
       }
       error = "";
-      dispatch("upload", file);
+      onupload?.(file);
       uploadModalOpen = false;
     }
     isDragOver = false;
@@ -62,7 +76,7 @@
 
   function handleDelete(index) {
     images = images.filter((_, i) => i !== index);
-    dispatch("delete", { index });
+    ondelete?.({ index });
   }
 
   function handleUpload() {
@@ -111,8 +125,6 @@
     }
   }
 
-  let isDragOver = false;
-
   function handleDragOver(event) {
     event.preventDefault();
     isDragOver = true;
@@ -138,7 +150,7 @@
 {#if images.length === 0}
   <input
     type="file"
-    on:change={onDrop}
+    onchange={onDrop}
     accept="image/*,video/mp4,application/pdf"
     class="hidden"
     aria-label="file-input"
@@ -154,7 +166,7 @@
     <div class="flex w-full">
       {#each images as image, index}
         <div class={`relative shadow ${shapeStyle(shape)}`}>
-          <!-- svelte-ignore a11y-img-redundant-alt -->
+          <!-- svelte-ignore a11y_img_redundant_alt -->
           <img
             src={image}
             alt="uploaded image"
@@ -163,7 +175,7 @@
           {#if !readonly}
             <button
               class={`${shapeClose(shape)} absolute bg-red-200 cursor-pointer`}
-              on:click|preventDefault={() => handleDelete(index, "image")}
+              onclick={(e) => { e.preventDefault(); handleDelete(index); }}
             >
               <img src={CancelIcon} alt="close button img" />
             </button>
@@ -174,7 +186,7 @@
       {#if !readonly && images.length === 0}
         <button
           class={`flex justify-center items-center border-dashed border-2 cursor-pointer border-brand-Primary border-opacity-50 bg-BG-Secondary ${shapeStyle(shape)}`}
-          on:click|preventDefault={handleUpload}
+          onclick={(e) => { e.preventDefault(); handleUpload(); }}
         >
           <img
             src={AddMain}
@@ -186,23 +198,24 @@
     </div>
 
     {#if uploadModalOpen}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         class="fixed inset-0 flex items-center justify-center gap-6 bg-gray-900 bg-opacity-50 z-50"
         role="presentation"
-        on:click|preventDefault={handeUploadModel}
+        onclick={(e) => { e.preventDefault(); handeUploadModel(); }}
       >
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <div
           class="bg-BG-Primary pb-6 px-6 rounded-2xl modal-box text-center flex w-[484px] flex-col max-sm:w-full"
           role="dialog"
-          on:click|preventDefault={(event) => event.stopPropagation()}
+          onclick={(event) => { event.preventDefault(); event.stopPropagation(); }}
         >
           <button
             class={`presentation dropzone w-full flex py-8 mt-6 flex-col rounded-lg justify-center items-center ${isDragOver ? "bg-blue-100 dark:bg-blue-900/30" : ""}`}
-            on:drop={onDrop}
-            on:dragover={handleDragOver}
-            on:dragleave={handleDragLeave}
+            ondrop={onDrop}
+            ondragover={handleDragOver}
+            ondragleave={handleDragLeave}
           >
             {#if !readonly}
               <img
@@ -222,7 +235,7 @@
           </div>
           <button
             class="p-3 mx-auto min-w-24 text-brand-Primary text-sm leading-3 font-medium rounded-lg flex justify-center items-center border border-stroke-Primary cursor-pointer bg-BG-Secondary/20"
-            on:click={openFileUploadModal}
+            onclick={openFileUploadModal}
           >
             Browse files
           </button>

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts

@@ -1,39 +1,25 @@
 export default CustomImageDropzone;
-type CustomImageDropzone = SvelteComponent<{
-    shape?: string | undefined;
-    label?: string | undefined;
-    readonly?: boolean | undefined;
-    existingImages?: any[] | undefined;
-}, {
-    upload: CustomEvent<any>;
-    delete: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type CustomImageDropzone = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        existingImages?: string[] | undefined;
+        readonly?: boolean | undefined;
+        shape?: string | undefined;
+        label?: string | undefined;
+        onupload?: ((file: File) => void) | undefined;
+        ondelete?: ((detail: {
+            index: number;
+        }) => void) | undefined;
+    }>): void;
 };
-declare const CustomImageDropzone: $$__sveltets_2_IsomorphicComponent<{
-    shape?: string | undefined;
-    label?: string | undefined;
-    readonly?: boolean | undefined;
-    existingImages?: any[] | undefined;
-}, {
-    upload: CustomEvent<any>;
-    delete: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const CustomImageDropzone: import("svelte").Component<{
+    existingImages?: string[];
+    readonly?: boolean;
+    shape?: string;
+    label?: string;
+    onupload?: (file: File) => void;
+    ondelete?: (detail: {
+        index: number;
+    }) => void;
+}, {}, "">;
 //# sourceMappingURL=CustomImageDropzone.svelte.d.ts.map

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomImageDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/pages/settings/tabs/CustomImageDropzone.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA8NA;;;;;;;;;;mBAA8K;6CATjI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CustomImageDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/pages/settings/tabs/CustomImageDropzone.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAyOA;qBARwB,MAAM,EAAE;eACd,OAAO;YACV,MAAM;YACN,MAAM;eACH,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;eACpB,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;WAGa"}

package/dist/components/pages/shows/TabNavigation.svelte

@@ -1,25 +1,33 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   import Badge from "../../Badges/Badge.svelte";
 
-  export let tabs = [];
-  export let activeTab;
-
-  const dispatch = createEventDispatcher();
+  /**
+   * @type {{
+   *   tabs?: Array<{ key: string, label: string, badge?: () => boolean }>,
+   *   activeTab?: string,
+   *   ontabchange?: (tab: string) => void
+   * }}
+   */
+  let {
+    tabs = [],
+    activeTab,
+    ontabchange
+  } = $props();
 
   const handleTabClick = (tab) => {
-    dispatch("tabChange", tab);
+    ontabchange?.(tab);
   };
 </script>
 
 <div class="flex flex-row">
   {#each tabs as { key, label, badge }}
+    <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
     <div
       role="tab"
       tabindex="0"
       class="tab {activeTab === key ? 'active' : ''}"
-      on:click={() => handleTabClick(key)}
-      on:keydown={(e) => e.key === "Enter" && handleTabClick(key)}
+      onclick={() => handleTabClick(key)}
+      onkeydown={(e) => e.key === "Enter" && handleTabClick(key)}
     >
       {label}
       {#if key === "invitations" && badge && badge()}

package/dist/components/pages/shows/TabNavigation.svelte.d.ts

@@ -1,33 +1,23 @@
 export default TabNavigation;
-type TabNavigation = SvelteComponent<{
-    activeTab: any;
-    tabs?: any[] | undefined;
-}, {
-    tabChange: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type TabNavigation = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        tabs?: {
+            key: string;
+            label: string;
+            badge?: (() => boolean) | undefined;
+        }[] | undefined;
+        activeTab?: string | undefined;
+        ontabchange?: ((tab: string) => void) | undefined;
+    }>): void;
 };
-declare const TabNavigation: $$__sveltets_2_IsomorphicComponent<{
-    activeTab: any;
-    tabs?: any[] | undefined;
-}, {
-    tabChange: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const TabNavigation: import("svelte").Component<{
+    tabs?: Array<{
+        key: string;
+        label: string;
+        badge?: () => boolean;
+    }>;
+    activeTab?: string;
+    ontabchange?: (tab: string) => void;
+}, {}, "">;
 //# sourceMappingURL=TabNavigation.svelte.d.ts.map

package/dist/components/pages/shows/TabNavigation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabNavigation.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AA4CA;;;;;;;mBAAmI;6CATtF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabNavigation.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAgDA;WALc,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;gBACvD,MAAM;kBACJ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;WAGkB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "2.8.1",
+  "version": "3.0.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",