@sveltia/ui 0.15.1 → 0.15.3

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.
Files changed (6) hide show
  1. package/package/components/grid/grid-body.svelte +1 -1
  2. package/package/components/table/table-body.svelte +1 -1
  3. package/package/components/util/popup.svelte +2 -1
  4. package/package/services/popup.d.ts +4 -2
  5. package/package/services/popup.js +12 -3
  6. package/package.json +10 -10
package/package/components/grid/grid-body.svelte CHANGED
@@ -33,7 +33,7 @@
33
33
  {#if label}
34
34
  <div role="row" class="row-group-caption">
35
35
  <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
36
- <svelte:element this="th" role="rowheader" id="{id}-label" colspan="9999">
36
+ <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
37
37
  {label}
38
38
  </svelte:element>
39
39
  </div>
package/package/components/table/table-body.svelte CHANGED
@@ -33,7 +33,7 @@
33
33
  {#if label}
34
34
  <div role="row" class="row-group-caption">
35
35
  <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
36
- <svelte:element this="th" role="rowheader" id="{id}-label" colspan="9999">
36
+ <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
37
37
  {label}
38
38
  </svelte:element>
39
39
  </div>
package/package/components/util/popup.svelte CHANGED
@@ -137,8 +137,8 @@
137
137
  class:touch
138
138
  style:inset={$style.inset}
139
139
  style:z-index={$style.zIndex}
140
- style:width={$style.width}
141
140
  style:min-width={$style.minWidth}
141
+ style:max-width={$style.maxWidth}
142
142
  style:max-height={$style.height}
143
143
  style:visibility={$style.inset ? undefined : 'hidden'}
144
144
  bind:this={content}
@@ -151,6 +151,7 @@
151
151
  position: absolute;
152
152
  overflow-y: auto;
153
153
  outline-width: 0 !important;
154
+ width: auto;
154
155
  color: var(--sui-primary-foreground-color);
155
156
  background-color: var(--sui-secondary-background-color-translucent);
156
157
  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
package/package/services/popup.d.ts CHANGED
@@ -18,14 +18,16 @@ declare class Popup {
18
18
  * @type {import('svelte/store').Writable<{
19
19
  * inset: string | undefined,
20
20
  * zIndex: number | undefined,
21
- * width: string | undefined,
21
+ * minWidth: string | undefined,
22
+ * maxWidth: string | undefined,
22
23
  * height: string | undefined,
23
24
  * }>}
24
25
  */
25
26
  style: import('svelte/store').Writable<{
26
27
  inset: string | undefined;
27
28
  zIndex: number | undefined;
28
- width: string | undefined;
29
+ minWidth: string | undefined;
30
+ maxWidth: string | undefined;
29
31
  height: string | undefined;
30
32
  }>;
31
33
  observer: IntersectionObserver;
package/package/services/popup.js CHANGED
@@ -14,11 +14,18 @@ class Popup {
14
14
  * @type {import('svelte/store').Writable<{
15
15
  * inset: string | undefined,
16
16
  * zIndex: number | undefined,
17
- * width: string | undefined,
17
+ * minWidth: string | undefined,
18
+ * maxWidth: string | undefined,
18
19
  * height: string | undefined,
19
20
  * }>}
20
21
  */
21
- style = writable({ inset: undefined, zIndex: undefined, width: undefined, height: undefined });
22
+ style = writable({
23
+ inset: undefined,
24
+ zIndex: undefined,
25
+ minWidth: undefined,
26
+ maxWidth: undefined,
27
+ height: undefined,
28
+ });
22
29
 
23
30
  observer = new IntersectionObserver((entries) => {
24
31
  entries.forEach(({ intersectionRect, rootBounds }) => {
@@ -77,8 +84,10 @@ class Popup {
77
84
  const style = {
78
85
  inset: [top, right, bottom, left].join(' '),
79
86
  zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
80
- width: content.matches('.menu') ? 'auto' : `${Math.round(intersectionRect.width)}px`,
81
87
  minWidth: `${Math.round(intersectionRect.width)}px`,
88
+ maxWidth: position.endsWith('-left')
89
+ ? `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`
90
+ : `${Math.round(intersectionRect.right - 8)}px`,
82
91
  height: height ? `${Math.round(height)}px` : 'auto',
83
92
  };
84
93
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.15.1",
3
+ "version": "0.15.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -32,30 +32,30 @@
32
32
  "@lexical/selection": "^0.15.0",
33
33
  "@lexical/table": "^0.15.0",
34
34
  "@lexical/utils": "^0.15.0",
35
- "@sveltia/utils": "^0.2.0",
35
+ "@sveltia/utils": "^0.3.0",
36
36
  "lexical": "^0.15.0",
37
- "svelte": "^4.2.16"
37
+ "svelte": "^4.2.17"
38
38
  },
39
39
  "devDependencies": {
40
- "@playwright/test": "^1.44.0",
41
- "@sveltejs/adapter-auto": "^3.2.0",
42
- "@sveltejs/kit": "^2.5.7",
40
+ "@playwright/test": "^1.44.1",
41
+ "@sveltejs/adapter-auto": "^3.2.1",
42
+ "@sveltejs/kit": "^2.5.10",
43
43
  "@sveltejs/package": "^2.3.1",
44
44
  "@sveltejs/vite-plugin-svelte": "^3.1.0",
45
- "cspell": "^8.8.1",
45
+ "cspell": "^8.8.3",
46
46
  "eslint": "^8.57.0",
47
47
  "eslint-config-airbnb-base": "^15.0.0",
48
48
  "eslint-config-prettier": "^9.1.0",
49
49
  "eslint-plugin-import": "^2.29.1",
50
- "eslint-plugin-jsdoc": "^48.2.4",
50
+ "eslint-plugin-jsdoc": "^48.2.6",
51
51
  "eslint-plugin-svelte": "^2.39.0",
52
52
  "npm-run-all": "^4.1.5",
53
53
  "postcss": "^8.4.38",
54
54
  "postcss-html": "^1.7.0",
55
55
  "prettier": "^3.2.5",
56
56
  "prettier-plugin-svelte": "^3.2.3",
57
- "sass": "^1.77.1",
58
- "stylelint": "^16.5.0",
57
+ "sass": "^1.77.2",
58
+ "stylelint": "^16.6.0",
59
59
  "stylelint-config-recommended-scss": "^14.0.0",
60
60
  "stylelint-scss": "^6.3.0",
61
61
  "svelte-check": "^3.7.1",