@ims360/svelte-ivory 0.4.9 → 0.4.11

package/dist/colorTheme.svelte.js

@@ -47,14 +47,14 @@ class ThemeController {
     /** Add to hook sequence to enable correct prerendering ot the theme */
     handle = ({ event, resolve }) => {
         const theme = event.cookies.get(COOKIE_THEME_KEY);
-        let isDark = false;
+        let dark;
         if (theme !== undefined && theme !== 'system') {
-            isDark = theme === 'dark';
+            dark = theme === 'dark';
         }
         else {
-            isDark = event.request.headers.get('sec-ch-prefers-color-scheme') === 'dark';
+            dark = event.request.headers.get('sec-ch-prefers-color-scheme') === 'dark';
         }
-        if (!isDark)
+        if (!dark)
             return resolve(event);
         return resolve(event, {
             transformPageChunk: ({ html }) => html.replace('class="', 'class="dark ')

package/dist/components/basic/Textarea.svelte

@@ -21,6 +21,7 @@
     }
 
     $effect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         value;
         autoResize();
     });

package/dist/components/basic/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/Textarea.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,KAAM,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACvD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAqCL,QAAA,MAAM,QAAQ;;;WAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/Textarea.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,KAAM,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACvD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAsCL,QAAA,MAAM,QAAQ;;;WAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/basic/ThemeSelect.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class={merge('border-surface-300-700 grid grid-cols-3 rounded-full border', clazz)}>
-    {#each options as { value, icon: Icon, ariaLabel }}
+    {#each options as { value, icon: Icon, ariaLabel }, index (index)}
         {@const selected = value === ColorTheme.theme}
         <button
             type="button"

package/dist/components/inputs/TextareaInput.svelte

@@ -12,7 +12,7 @@
 
 <Input {...props}>
     {#snippet children(inputProps)}
-        {@const { name } = props.form.as?.('text')}
+        {@const { name } = props.form.as('text')}
         <TextArea
             {...inputProps}
             {name}

package/dist/components/layout/dialog/Dialog.svelte

@@ -58,7 +58,7 @@
     oncancel={requestClose}
     onclose={close}
     class={merge(
-        'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full bg-transparent',
+        'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full overflow-hidden bg-transparent',
         theme.current.dialog?.class,
         clazz
     )}

package/dist/components/layout/drawer/Drawer.svelte

@@ -58,17 +58,17 @@
         onclose={() => {
             if (closeOnOutsideClick) close();
         }}
+        class={[
+            'flex flex-row justify-start overflow-visible',
+            placement === 'left' && '',
+            placement === 'right' && 'justify-end'
+        ]}
     >
         <div
-            class={merge([
-                'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
-                placement === 'left' && 'left-0',
-                placement === 'right' && 'right-0',
-                clazz
-            ])}
+            class={merge(['bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz])}
             onclick={(e) => e.stopPropagation()}
-            in:inTransition
-            out:outTransition
+            in:inTransition|global
+            out:outTransition|global
             {...rest}
         >
             {#if inner}

package/dist/components/layout/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/table/columnController.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 export declare const MINIMAL_WIDTH_MULTIPLIER = 0.5;
 export interface ColumnConfig {
     id: string;

package/dist/components/table/columnController.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columnController.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/columnController.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,qBAAa,gBAAgB;IACzB,EAAE,SAAc;IAChB,MAAM,uBAAgC;IAGtC,KAAK,qBAAoB;IACzB,QAAQ,SAAyB;IACjC,QAAQ,UAAiB;IACzB,SAAS,UAAiB;IAC1B,QAAQ,UAAiB;gBAEb,IAAI,EAAE,YAAY;IAS9B,YAAY,CAAC,IAAI,EAAE,YAAY;IAmB/B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM;CAQ3B"}
+{"version":3,"file":"columnController.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/columnController.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,qBAAa,gBAAgB;IACzB,EAAE,SAAc;IAChB,MAAM,uBAAgC;IAGtC,KAAK,qBAAoB;IACzB,QAAQ,SAAyB;IACjC,QAAQ,UAAiB;IACzB,SAAS,UAAiB;IAC1B,QAAQ,UAAiB;gBAEb,IAAI,EAAE,YAAY;IAS9B,YAAY,CAAC,IAAI,EAAE,YAAY;IAmB/B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM;CAQ3B"}

package/dist/components/table/columnController.svelte.js

@@ -1,3 +1,4 @@
+import {} from 'svelte';
 const DEFAULT_WIDTH = 250;
 export const MINIMAL_WIDTH_MULTIPLIER = 0.5;
 export class ColumnController {
@@ -23,8 +24,8 @@ export class ColumnController {
             const newWidth = typeof conf.width === 'undefined' ? DEFAULT_WIDTH : conf.width;
             this.width = newWidth;
         }
-        else {
-            this.width = conf.width ?? this.width;
+        else if (!this.resizable) {
+            this.width = typeof conf.width === 'number' ? conf.width : this.width;
         }
         if (typeof conf.minWidth !== 'undefined') {
             this.minWidth = conf.minWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.4.9",
+    "version": "0.4.11",
     "keywords": [
         "svelte"
     ],
@@ -119,4 +119,4 @@
         "@sveltejs/kit": "^2.49.5",
         "svelte": "^5.46.4"
     }
-}
+}

package/src/lib/colorTheme.svelte.ts

@@ -50,14 +50,14 @@ class ThemeController {
     /** Add to hook sequence to enable correct prerendering ot the theme */
     handle: Handle = ({ event, resolve }) => {
         const theme = event.cookies.get(COOKIE_THEME_KEY);
-        let isDark = false;
+        let dark;
         if (theme !== undefined && (theme as ColorThemePreference) !== 'system') {
-            isDark = theme === 'dark';
+            dark = theme === 'dark';
         } else {
-            isDark = event.request.headers.get('sec-ch-prefers-color-scheme') === 'dark';
+            dark = event.request.headers.get('sec-ch-prefers-color-scheme') === 'dark';
         }
 
-        if (!isDark) return resolve(event);
+        if (!dark) return resolve(event);
 
         return resolve(event, {
             transformPageChunk: ({ html }) => html.replace('class="', 'class="dark ')

package/src/lib/components/basic/Textarea.svelte

@@ -21,6 +21,7 @@
     }
 
     $effect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         value;
         autoResize();
     });

package/src/lib/components/basic/ThemeSelect.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class={merge('border-surface-300-700 grid grid-cols-3 rounded-full border', clazz)}>
-    {#each options as { value, icon: Icon, ariaLabel }}
+    {#each options as { value, icon: Icon, ariaLabel }, index (index)}
         {@const selected = value === ColorTheme.theme}
         <button
             type="button"

package/src/lib/components/inputs/TextareaInput.svelte

@@ -12,7 +12,7 @@
 
 <Input {...props}>
     {#snippet children(inputProps)}
-        {@const { name } = props.form.as?.('text')}
+        {@const { name } = props.form.as('text')}
         <TextArea
             {...inputProps}
             {name}

package/src/lib/components/layout/dialog/Dialog.svelte

@@ -58,7 +58,7 @@
     oncancel={requestClose}
     onclose={close}
     class={merge(
-        'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full bg-transparent',
+        'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full overflow-hidden bg-transparent',
         theme.current.dialog?.class,
         clazz
     )}

package/src/lib/components/layout/drawer/Drawer.svelte

@@ -58,17 +58,17 @@
         onclose={() => {
             if (closeOnOutsideClick) close();
         }}
+        class={[
+            'flex flex-row justify-start overflow-visible',
+            placement === 'left' && '',
+            placement === 'right' && 'justify-end'
+        ]}
     >
         <div
-            class={merge([
-                'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
-                placement === 'left' && 'left-0',
-                placement === 'right' && 'right-0',
-                clazz
-            ])}
+            class={merge(['bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz])}
             onclick={(e) => e.stopPropagation()}
-            in:inTransition
-            out:outTransition
+            in:inTransition|global
+            out:outTransition|global
             {...rest}
         >
             {#if inner}

package/src/lib/components/table/columnController.svelte.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 
 const DEFAULT_WIDTH = 250;
 export const MINIMAL_WIDTH_MULTIPLIER = 0.5;
@@ -36,8 +36,8 @@ export class ColumnController {
         if (typeof this.width === 'undefined') {
             const newWidth = typeof conf.width === 'undefined' ? DEFAULT_WIDTH : conf.width;
             this.width = newWidth;
-        } else {
-            this.width = conf.width ?? this.width;
+        } else if (!this.resizable) {
+            this.width = typeof conf.width === 'number' ? conf.width : this.width;
         }
         if (typeof conf.minWidth !== 'undefined') {
             this.minWidth = conf.minWidth;