@likable-hair/svelte 3.3.24 → 3.3.26

package/dist/components/simple/forms/FileInputList.svelte

@@ -1,55 +1,41 @@
-<script lang="ts">
-  import "../../../css/main.css";
-  import "./FileInputList.css";
-  import Button from "../buttons/Button.svelte";
-  import FileInput from "./FileInput.svelte";
-  import Icon from "../media/Icon.svelte";
-    import { createEventDispatcher } from "svelte";
-
-  let clazz: string = "";
-  export { clazz as class };
-
-  let dispatch = createEventDispatcher<{
-    fileChange: {
-      files: File[]
-    }
-  }>()
-
-  export let files: File[] = [],
-    persistOverUpload: boolean = true,
-    dropAreaActive: boolean = true,
-    icon: string = "mdi-file-document",
-    message: string = "Drop file here or click to upload",
-    disabled: boolean = false,
-    maxFiles: number | undefined = undefined;
-
-  let fileActive: File | null = null;
-
-  function handleFileMouseEnter(file: File) {
-    dropAreaActive = false;
-    fileActive = file;
-  }
-  function handleFileMouseLeave() {
-    dropAreaActive = true;
-    fileActive = null;
-  }
-  function handleFileClick(file: File) {
-    alert(file.name);
-  }
-  function handleRemove(file: File) {
-    files = files.filter((elem) => {
-      return elem != file;
-    });
-    dispatch("fileChange", { files })
-  }
-
-  function handleFileDrop() {
-    dispatch("fileChange", { files })
-  }
-
-  function handleFileSelect() {
-    dispatch("fileChange", { files })
+<script>import "../../../css/main.css";
+import "./FileInputList.css";
+import Button from "../buttons/Button.svelte";
+import FileInput from "./FileInput.svelte";
+import Icon from "../media/Icon.svelte";
+import { createEventDispatcher } from "svelte";
+let clazz = "";
+export { clazz as class };
+const dispatch = createEventDispatcher();
+export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", message = "Drop file here or click to upload", disabled = false, maxFiles = void 0, previewFiles = false;
+let fileActive = null;
+function isImageFile(file) {
+  if (file.type.startsWith("image/") && (file.type.endsWith("/jpg") || file.type.endsWith("/png") || file.type.endsWith("/jpeg") || file.type.endsWith("/webp"))) {
+    return true;
   }
+  return false;
+}
+function handleFileMouseEnter(file) {
+  dropAreaActive = false;
+  fileActive = file;
+}
+function handleFileMouseLeave() {
+  dropAreaActive = true;
+  fileActive = null;
+}
+function handleFileClick(file) {
+  alert(file.name);
+}
+function handleRemove(file) {
+  files = files.filter((elem) => elem !== file);
+  dispatch("fileChange", { files });
+}
+function handleFileDrop() {
+  dispatch("fileChange", { files });
+}
+function handleFileSelect() {
+  dispatch("fileChange", { files });
+}
 </script>
 
 <div class="card-container {clazz}">
@@ -64,9 +50,7 @@
     --file-input-width="var(--file-input-list-width,var(--file-input-list-default-width))"
     on:change
     on:fileDrop={handleFileDrop}
-    on:fileDrop
     on:fileSelect={handleFileSelect}
-    on:fileSelect
     {maxFiles}
   >
     <span
@@ -77,49 +61,88 @@
       let:active={dropAreaActive}
     >
       <div class="body-container" class:active={dropAreaActive}>
-        {#if files.length == 0}
-          <slot name="message">
-            <span>{message}</span>
+        {#if files.length === 0}
+          <slot name="message" class="message-slot">
+            <span class="message-text">{message}</span>
           </slot>
         {:else}
-          <slot name="file-list" {files}>
-            <table class="file-list">
-              {#each files as file}
-                <tr
-                  on:click|stopPropagation={() => {
-                    handleFileClick(file);
-                  }}
-                  on:mouseenter|stopPropagation={() => {
-                    handleFileMouseEnter(file);
-                  }}
-                  on:mouseleave|stopPropagation={() => {
-                    handleFileMouseLeave();
-                  }}
-                  class:file-active={fileActive == file}
-                >
-                  <td>
-                    <Icon name={icon} />
-                  </td>
-                  <td class="file-name">
-                    {file.name}
-                  </td>
-                  <td>
-                    {file.size}
-                  </td>
-                  <td style:width="10%" style:margin-right="10px">
-                    <Button
-                      buttonType="text"
-                      icon="mdi-close"
-                      on:click={(e) => {
-                        e.detail.nativeEvent.stopPropagation();
-                        handleRemove(file);
+          <div class="file-container {previewFiles ? 'grid-mode' : ''}">
+            <slot name="file-list" class="file-slot" {files}>
+              {#if previewFiles}
+                <div class="preview-grid">
+                  {#each files as file (file.name)}
+                    <div
+                      class="preview-item"
+                      role="button"
+                      tabindex="0"
+                      draggable="false"
+                      on:dragstart|preventDefault
+                      on:click|stopPropagation={() => handleFileClick(file)}
+                      on:keydown|stopPropagation={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') handleFileClick(file);
                       }}
-                    />
-                  </td>
-                </tr>
-              {/each}
-            </table>
-          </slot>
+                      on:mouseenter|stopPropagation={() => handleFileMouseEnter(file)}
+                      on:mouseleave|stopPropagation={handleFileMouseLeave}
+                      class:file-active={fileActive === file}
+                    >
+                      {#if isImageFile(file)}
+                        <img
+                          src={URL.createObjectURL(file)}
+                          alt={file.name}
+                          class="preview-img"
+                          draggable="false"
+                        />
+                      {:else}
+                        <div class="preview-file">
+                          <Icon name={icon} />
+                          {#if file.name.length > 40}
+                            <span class="file-name-preview">{file.name.slice(0, 40)}...</span>
+                          {:else}
+                            <span class="file-name-preview">{file.name}</span>
+                          {/if}
+                        </div>
+                      {/if}
+                      <button
+                        type="button"
+                        class="preview-remove"
+                        on:click|stopPropagation={() => handleRemove(file)}
+                        aria-label="Rimuovi {file.name}"
+                        style:height="24px"
+                        style:width="24px"
+                      >
+                        <Icon name="mdi-close" --icon-container-height="16px" --icon-container-width="16px" />
+                      </button>
+                    </div>
+                  {/each}
+                </div>
+              {:else}
+                <table class="file-list">
+                  {#each files as file}
+                    <tr
+                      on:click|stopPropagation={() => handleFileClick(file)}
+                      on:mouseenter|stopPropagation={() => handleFileMouseEnter(file)}
+                      on:mouseleave|stopPropagation={handleFileMouseLeave}
+                      class:file-active={fileActive === file}
+                    >
+                      <td><Icon name={icon} /></td>
+                      <td class="file-name">{file.name}</td>
+                      <td>{file.size}</td>
+                      <td style="width: 10%; margin-right: 10px;">
+                        <Button
+                          buttonType="text"
+                          icon="mdi-close"
+                          on:click={(e) => {
+                            e.detail.nativeEvent.stopPropagation();
+                            handleRemove(file);
+                          }}
+                        />
+                      </td>
+                    </tr>
+                  {/each}
+                </table>
+              {/if}
+            </slot>
+          </div>
         {/if}
       </div>
     </span>
@@ -127,11 +150,6 @@
 </div>
 
 <style>
-  .body-span {
-    height: 100px;
-    width: 100%;
-    display: flex;
-  }
   .card-container {
     display: flex;
     justify-content: center;
@@ -143,8 +161,11 @@
       --file-input-list-border-color,
       var(--file-input-list-default-border-color)
     );
-    height: var(--file-input-list-height,var(--file-input-list-default-height));
-    width: var(--file-input-list-background-width,var(--file-input-list-default-width));
+    height: var(--file-input-list-height, var(--file-input-list-default-height));
+    width: var(
+      --file-input-list-width,
+      var(--file-input-list-default-width)
+    );
   }
 
   .card-container:hover {
@@ -176,7 +197,7 @@
     overflow-y: auto;
   }
 
-  .active {
+  .body-container.active {
     border-color: var(
       --file-input-list-selected-row-background,
       var(--file-input-list-default-selected-row-background)
@@ -186,7 +207,25 @@
       var(--file-input-list-default-selected-row-color)
     );
   }
-  .file-active {
+
+  .file-container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .file-container:not(.grid-mode) .file-list {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+
+  .file-container:not(.grid-mode) .file-list tr {
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  .file-container:not(.grid-mode) .file-list tr.file-active {
     color: var(
       --file-input-list-selected-row-color,
       var(--file-input-list-default-selected-row-color)
@@ -196,16 +235,109 @@
       var(--file-input-list-default-selected-row-background)
     );
   }
-  .file-list {
-    width: 100%;
-    table-layout: fixed;
-    position: absolute;
-    top: 0;
-    right: 0;
-    border-collapse: collapse;
-  }
+
   .file-name {
     width: 40%;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-container.grid-mode {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    overflow-y: auto;
+  }
+
+  .file-container .file-slot {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .preview-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .preview-item {
+    position: relative;
+    cursor: pointer;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: transform 0.2s, box-shadow 0.2s;
+    outline: none;
+  }
+  .preview-item:hover,
+  .preview-item:focus,
+  .preview-item.file-active {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .preview-img {
+    display: block;
+    width: 100%;
+    height: 120px;
+    object-fit: cover;
+  }
+
+  .preview-file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+    padding: 0.5rem;
+    background: rgb(var(--global-color-background-600));
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .file-name-preview {
+    font-size: 0.75rem;
+    text-align: center;
+    word-break: break-word;
+    margin-top: 0.5rem;
+    line-height: 1.2;
+    max-height: 2.4rem;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .preview-remove {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: rgba(51, 51, 51, 0.6);
+    border: none;
+    border-radius: 50%;
+    padding: 4px;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .preview-remove:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .message-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .message-text {
+    text-align: center;
+    font-size: 1rem;
   }
 </style>

package/dist/components/simple/forms/FileInputList.svelte.d.ts

@@ -1,47 +1,40 @@
+import { SvelteComponent } from "svelte";
 import "../../../css/main.css";
 import "./FileInputList.css";
-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;
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        files?: File[] | undefined;
+        persistOverUpload?: boolean | undefined;
+        dropAreaActive?: boolean | undefined;
+        icon?: string | undefined;
+        message?: string | undefined;
+        disabled?: boolean | undefined;
+        maxFiles?: number | undefined;
+        previewFiles?: boolean | undefined;
     };
-    z_$$bindings?: Bindings;
-}
-declare const FileInputList: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    files?: File[];
-    persistOverUpload?: boolean;
-    dropAreaActive?: boolean;
-    icon?: string;
-    message?: string;
-    disabled?: boolean;
-    maxFiles?: number | undefined;
-}, {
-    change: Event;
-    fileDrop: CustomEvent<{
-        nativeEvent: DragEvent;
-        files: File[];
-    }>;
-    fileSelect: CustomEvent<{
-        nativeEvent: Event;
-        files: File[];
-    }>;
-    fileChange: CustomEvent<{
-        files: File[];
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    message: {};
-    'file-list': {
-        files: File[];
+    events: {
+        change: Event;
+        dragstart: DragEvent;
+        fileChange: CustomEvent<{
+            files: File[];
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        message: {
+            class: string;
+        };
+        'file-list': {
+            class: string;
+            files: File[];
+        };
     };
-}, {}, string>;
-type FileInputList = InstanceType<typeof FileInputList>;
-export default FileInputList;
+};
+export type FileInputListProps = typeof __propDef.props;
+export type FileInputListEvents = typeof __propDef.events;
+export type FileInputListSlots = typeof __propDef.slots;
+export default class FileInputList extends SvelteComponent<FileInputListProps, FileInputListEvents, FileInputListSlots> {
+}
+export {};

package/dist/components/simple/forms/RadioButton.svelte

@@ -1,14 +1,6 @@
-<script lang="ts">
-  import './RadioButton.css'
-  import "../../../css/main.css";
-
-  export let name: string,
-    value: string,
-    id: string | undefined = undefined,
-    checked = false,
-    label: string | undefined = undefined,
-    disabled = false;
-
+<script>import "./RadioButton.css";
+import "../../../css/main.css";
+export let name, value, id = void 0, checked = false, label = void 0, disabled = false;
 </script>
 
 <input

package/dist/components/simple/forms/RadioButton.svelte.d.ts

@@ -1,35 +1,31 @@
+import { SvelteComponent } from "svelte";
 import './RadioButton.css';
 import "../../../css/main.css";
-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;
+declare const __propDef: {
+    props: {
+        name: string;
+        value: string;
+        id?: string | undefined;
+        checked?: boolean | undefined;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }
-declare const RadioButton: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    value: string;
-    id?: string | undefined;
-    checked?: boolean;
-    label?: string | undefined;
-    disabled?: boolean;
-}, {
-    change: Event;
-    input: Event;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keypress: KeyboardEvent;
-    keyup: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RadioButton = InstanceType<typeof RadioButton>;
-export default RadioButton;
+export {};

package/dist/components/simple/forms/Select.svelte

@@ -1,21 +1,8 @@
-<script lang="ts" context="module">
-	import './Select.css'
-	export type Option = {
-		icon?: string
-		value: string | number | undefined
-		text: string
-	}
+<script context="module">import "./Select.css";
 </script>
 
-<script lang="ts">
-    import { Icon } from "../../..";
-
-
-	export let options: Option[],
-		name: string | undefined = undefined,
-		value: string | number | undefined = undefined,
-		disabled: boolean = false,
-		placeholder: string | undefined = undefined
+<script>import { Icon } from "../../..";
+export let options, name = void 0, value = void 0, disabled = false, placeholder = void 0;
 </script>
 
 <select

package/dist/components/simple/forms/Select.svelte.d.ts

@@ -1,32 +1,28 @@
+import { SvelteComponent } from "svelte";
 import './Select.css';
 export type Option = {
     icon?: string;
     value: string | number | undefined;
     text: 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;
+declare const __propDef: {
+    props: {
+        options: Option[];
+        name?: string | undefined;
+        value?: string | number | undefined;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
     };
-    z_$$bindings?: Bindings;
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
 }
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    options: Option[];
-    name?: string | undefined;
-    value?: string | number | undefined;
-    disabled?: boolean;
-    placeholder?: string | undefined;
-}, {
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Select = InstanceType<typeof Select>;
-export default Select;
+export {};