@ims360/svelte-ivory 0.3.5 → 0.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -40,11 +40,11 @@
40
40
  let {
41
41
  class: clazz,
42
42
  style: externalStyle,
43
- target,
44
43
  placement = 'bottom-start',
45
- children,
46
- autoplacement,
44
+ autoplacement = true,
47
45
  popover = 'auto',
46
+ target,
47
+ children,
48
48
  ...rest
49
49
  }: PopoverProps = $props();
50
50
 
@@ -173,8 +173,12 @@
173
173
  }
174
174
  </script>
175
175
 
176
- <div bind:this={popoverEl} {style} {popover} class="bg-transparent">
177
- <div class={twMerge(clsx(theme.current.popover?.class, clazz))} style={externalStyle} {...rest}>
178
- {@render children?.()}
179
- </div>
176
+ <div
177
+ bind:this={popoverEl}
178
+ style="{style} {externalStyle}"
179
+ {popover}
180
+ class={twMerge(clsx('bg-transparent', theme.current.popover?.class, clazz))}
181
+ {...rest}
182
+ >
183
+ {@render children?.()}
180
184
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
@@ -1,5 +1,4 @@
1
1
  <script lang="ts" module>
2
- import { merge } from '../../../utils/functions';
3
2
  import type { Snippet } from 'svelte';
4
3
  import type { ClassValue, MouseEventHandler } from 'svelte/elements';
5
4
  import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
@@ -42,7 +41,6 @@
42
41
  }: TooltipProps = $props();
43
42
 
44
43
  let target = $state<HTMLElement>();
45
-
46
44
  let popover = $state<Popover>();
47
45
 
48
46
  let currentTimeout: number;
@@ -79,15 +77,7 @@
79
77
  {@render children?.()}
80
78
  </svelte:element>
81
79
 
82
- <Popover
83
- bind:this={popover}
84
- {target}
85
- {placement}
86
- class={merge(
87
- 'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
88
- tooltipClass
89
- )}
90
- >
80
+ <Popover bind:this={popover} {target} {placement} class={tooltipClass}>
91
81
  {#if typeof tooltip === 'string'}
92
82
  {tooltip}
93
83
  {:else}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAuDL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAmDL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
@@ -54,7 +54,7 @@
54
54
 
55
55
  // this must be separate to the above effect, since otherwise the width would be reset on every scroll
56
56
  $effect(() => {
57
- if (!resizable && typeof width !== 'undefined') column.width = width;
57
+ if (!resizable && typeof width !== 'undefined') column.resize(width);
58
58
  });
59
59
 
60
60
  const widthStyle = $derived(
@@ -27,7 +27,7 @@ export class ColumnController {
27
27
  this.minWidth = conf.minWidth;
28
28
  }
29
29
  else {
30
- this.minWidth = this.width * MINIMAL_WIDTH_MULTIPLIER;
30
+ this.minWidth = (conf.width ?? DEFAULT_WIDTH) * MINIMAL_WIDTH_MULTIPLIER;
31
31
  }
32
32
  const newResizable = conf.resizable ?? false;
33
33
  if (newResizable !== this.resizable) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ims360/svelte-ivory",
3
- "version": "0.3.5",
3
+ "version": "0.3.11",
4
4
  "keywords": [
5
5
  "svelte"
6
6
  ],
@@ -9,6 +9,14 @@
9
9
  "**/*.css"
10
10
  ],
11
11
  "type": "module",
12
+ "publishConfig": {
13
+ "access": "public",
14
+ "provenance": true
15
+ },
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "git+https://github.com/ims360ca/svelte-ivory.git"
19
+ },
12
20
  "exports": {
13
21
  ".": {
14
22
  "types": "./dist/index.d.ts",
@@ -40,11 +40,11 @@
40
40
  let {
41
41
  class: clazz,
42
42
  style: externalStyle,
43
- target,
44
43
  placement = 'bottom-start',
45
- children,
46
- autoplacement,
44
+ autoplacement = true,
47
45
  popover = 'auto',
46
+ target,
47
+ children,
48
48
  ...rest
49
49
  }: PopoverProps = $props();
50
50
 
@@ -173,8 +173,12 @@
173
173
  }
174
174
  </script>
175
175
 
176
- <div bind:this={popoverEl} {style} {popover} class="bg-transparent">
177
- <div class={twMerge(clsx(theme.current.popover?.class, clazz))} style={externalStyle} {...rest}>
178
- {@render children?.()}
179
- </div>
176
+ <div
177
+ bind:this={popoverEl}
178
+ style="{style} {externalStyle}"
179
+ {popover}
180
+ class={twMerge(clsx('bg-transparent', theme.current.popover?.class, clazz))}
181
+ {...rest}
182
+ >
183
+ {@render children?.()}
180
184
  </div>
@@ -1,5 +1,4 @@
1
1
  <script lang="ts" module>
2
- import { merge } from '$lib/utils/functions';
3
2
  import type { Snippet } from 'svelte';
4
3
  import type { ClassValue, MouseEventHandler } from 'svelte/elements';
5
4
  import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
@@ -42,7 +41,6 @@
42
41
  }: TooltipProps = $props();
43
42
 
44
43
  let target = $state<HTMLElement>();
45
-
46
44
  let popover = $state<Popover>();
47
45
 
48
46
  let currentTimeout: number;
@@ -79,15 +77,7 @@
79
77
  {@render children?.()}
80
78
  </svelte:element>
81
79
 
82
- <Popover
83
- bind:this={popover}
84
- {target}
85
- {placement}
86
- class={merge(
87
- 'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
88
- tooltipClass
89
- )}
90
- >
80
+ <Popover bind:this={popover} {target} {placement} class={tooltipClass}>
91
81
  {#if typeof tooltip === 'string'}
92
82
  {tooltip}
93
83
  {:else}
@@ -54,7 +54,7 @@
54
54
 
55
55
  // this must be separate to the above effect, since otherwise the width would be reset on every scroll
56
56
  $effect(() => {
57
- if (!resizable && typeof width !== 'undefined') column.width = width;
57
+ if (!resizable && typeof width !== 'undefined') column.resize(width);
58
58
  });
59
59
 
60
60
  const widthStyle = $derived(
@@ -40,7 +40,7 @@ export class ColumnController {
40
40
  if (typeof conf.minWidth !== 'undefined') {
41
41
  this.minWidth = conf.minWidth;
42
42
  } else {
43
- this.minWidth = this.width * MINIMAL_WIDTH_MULTIPLIER;
43
+ this.minWidth = (conf.width ?? DEFAULT_WIDTH) * MINIMAL_WIDTH_MULTIPLIER;
44
44
  }
45
45
  const newResizable = conf.resizable ?? false;
46
46
  if (newResizable !== this.resizable) {