@functionalcms/svelte-components 3.5.0 → 3.5.2

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/dist/components/Spacer.svelte +17 -16
  2. package/dist/components/Spacer.svelte.d.ts +1 -5
  3. package/dist/components/agnostic/Disclose/Disclose.svelte +111 -103
  4. package/dist/components/agnostic/Disclose/Disclose.svelte.d.ts +2 -9
  5. package/dist/components/agnostic/Table/Table.svelte +518 -562
  6. package/package.json +1 -1
package/dist/components/Spacer.svelte CHANGED
@@ -1,21 +1,22 @@
1
- <style>
2
- div {
3
- display: block;
4
- height: 100%;
5
- }
6
- </style>
1
+ <script lang="ts">
2
+ import { mergedClasses } from './CssHelper';
3
+ import { Sizes } from './Styling';
7
4
 
8
- <script lang='ts'>
9
- import { Sizes } from "./Styling";
5
+ interface Props {
6
+ width: Sizes;
7
+ height: Sizes;
8
+ }
10
9
 
11
- export let width: Sizes = Sizes.V0
12
- export let height: Sizes = Sizes.V0
10
+ let { width = Sizes.V0, height = Sizes.V0 } = $props();
13
11
 
14
- const klasses = [
15
- width ? `w${width}`: '',
16
- height ? `h${height}`: ''
17
- ].filter(c => c).join(' ')
12
+ const klasses = mergedClasses(width ? `w${width}` : '', height ? `h${height}` : '');
18
13
  </script>
19
- <div class={klasses}>
20
14
 
21
- </div>
15
+ <div class={klasses}></div>
16
+
17
+ <style>
18
+ div {
19
+ display: block;
20
+ height: 100%;
21
+ }
22
+ </style>
package/dist/components/Spacer.svelte.d.ts CHANGED
@@ -1,10 +1,6 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import { Sizes } from "./Styling";
3
2
  declare const __propDef: {
4
- props: {
5
- width?: Sizes;
6
- height?: Sizes;
7
- };
3
+ props: Record<string, never>;
8
4
  events: {
9
5
  [evt: string]: CustomEvent<any>;
10
6
  };
package/dist/components/agnostic/Disclose/Disclose.svelte CHANGED
@@ -1,108 +1,116 @@
1
- <style>
2
- .disclose {
3
- margin-block-end: var(--fluid-4);
4
-
5
- /* When this element is a direct child of a flex container with
6
- flex-direction: column it collapses similar to an inline element even though
7
- it's block. This helps prevent that. */
8
- width: 100%;
9
- }
10
-
11
- .disclose-title {
12
- display: block;
13
- cursor: pointer;
14
- font-weight: 600;
15
- padding: var(--fluid-8) var(--fluid-12);
16
-
17
- /* Required to position the icon absolutely */
18
- position: relative;
19
- color: inherit;
20
- transition: color var(--functional-timing-slow);
21
- }
22
-
23
- .disclose-panel {
24
- font-weight: 400;
25
- padding: var(--fluid-16);
26
- }
27
-
28
- .disclose-title,
29
- .disclose-panel {
30
- margin: 0;
31
- }
32
-
33
- /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
34
- .disclose-title::webkit-details-marker {
35
- display: none;
36
- }
37
-
38
- .disclose-bordered .disclose-title {
39
- border: 1px solid var(--functional-gray-light);
40
- }
41
-
42
- .disclose-bg .disclose-title {
43
- background-color: var(--functional-gray-light);
44
- }
45
-
46
- .disclose-title:focus {
47
- box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
48
-
49
- /* Needed for High Contrast mode */
50
- outline:
51
- var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
52
- var(--functional-focus-ring-outline-color);
53
- transition: box-shadow var(--functional-timing-fast) ease-out;
54
- }
55
-
56
- .disclose-title::after {
57
- color: var(--functional-gray-dark);
58
- content: "\203A";
59
- position: absolute;
60
- right: var(--fluid-12);
61
- top: 0;
62
- bottom: 0;
63
-
64
- /* Chevron thinning :) */
65
- font-size: var(--fluid-32);
66
- line-height: 1;
67
- font-weight: 100;
68
- transition: transform var(--functional-timing-slow);
69
- transform: rotate(0);
70
- }
71
-
72
- @media (prefers-reduced-motion), (update: slow) {
73
- .disclose-title,
74
- .disclose-title:focus,
75
- .disclose-title::after {
76
- transition: none;
77
- }
78
- }
79
-
80
- .disclose[open] > .disclose-title::after {
81
- transform: rotate(90deg);
82
- }
83
-
84
- </style>
85
-
86
1
  <script lang="ts">
87
- export let title = "";
88
- // The <details> open attribute indicates whether the details content will be
89
- // displayed on page load or not.
90
- export let isOpen = false;
91
- export let isBackground = false;
92
- export let isBordered = false;
93
-
94
- const discloseClasses = [
95
- "disclose",
96
- isBackground ? "disclose-bg" : "",
97
- isBordered ? "disclose-bordered" : ""
98
- ]
99
- .filter((c) => c)
100
- .join(" ");
2
+ import { mergedClasses } from '../../CssHelper';
3
+ import type { Snippet } from 'svelte';
4
+
5
+ interface Props {
6
+ children: Snippet;
7
+ title?: string;
8
+ isOpen?: boolean;
9
+ isBackground?: boolean;
10
+ isBordered?: boolean;
11
+ }
12
+
13
+ let {
14
+ children,
15
+ title = '',
16
+ isOpen = false,
17
+ isBackground = false,
18
+ isBordered = false
19
+ }: Props = $props();
20
+
21
+ const discloseClasses = mergedClasses(
22
+ 'disclose',
23
+ isBackground ? 'disclose-bg' : '',
24
+ isBordered ? 'disclose-bordered' : ''
25
+ );
101
26
  </script>
102
27
 
103
28
  <details class={discloseClasses} bind:open={isOpen}>
104
- <summary class="disclose-title">{title}</summary>
105
- <div class="disclose-panel">
106
- <slot />
107
- </div>
29
+ <summary class="disclose-title">{title}</summary>
30
+ <div class="disclose-panel">
31
+ {@render children()}
32
+ </div>
108
33
  </details>
34
+
35
+ <style>
36
+ .disclose {
37
+ margin-block-end: var(--fluid-4);
38
+
39
+ /* When this element is a direct child of a flex container with
40
+ flex-direction: column it collapses similar to an inline element even though
41
+ it's block. This helps prevent that. */
42
+ width: 100%;
43
+ }
44
+
45
+ .disclose-title {
46
+ display: block;
47
+ cursor: pointer;
48
+ font-weight: 600;
49
+ padding: var(--fluid-8) var(--fluid-12);
50
+
51
+ /* Required to position the icon absolutely */
52
+ position: relative;
53
+ color: inherit;
54
+ transition: color var(--functional-timing-slow);
55
+ }
56
+
57
+ .disclose-panel {
58
+ font-weight: 400;
59
+ padding: var(--fluid-16);
60
+ }
61
+
62
+ .disclose-title,
63
+ .disclose-panel {
64
+ margin: 0;
65
+ }
66
+
67
+ /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
68
+ .disclose-title::webkit-details-marker {
69
+ display: none;
70
+ }
71
+
72
+ .disclose-bordered .disclose-title {
73
+ border: 1px solid var(--functional-gray-light);
74
+ }
75
+
76
+ .disclose-bg .disclose-title {
77
+ background-color: var(--functional-gray-light);
78
+ }
79
+
80
+ .disclose-title:focus {
81
+ box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
82
+
83
+ /* Needed for High Contrast mode */
84
+ outline: var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
85
+ var(--functional-focus-ring-outline-color);
86
+ transition: box-shadow var(--functional-timing-fast) ease-out;
87
+ }
88
+
89
+ .disclose-title::after {
90
+ color: var(--functional-gray-dark);
91
+ content: '\203A';
92
+ position: absolute;
93
+ right: var(--fluid-12);
94
+ top: 0;
95
+ bottom: 0;
96
+
97
+ /* Chevron thinning :) */
98
+ font-size: var(--fluid-32);
99
+ line-height: 1;
100
+ font-weight: 100;
101
+ transition: transform var(--functional-timing-slow);
102
+ transform: rotate(0);
103
+ }
104
+
105
+ @media (prefers-reduced-motion), (update: slow) {
106
+ .disclose-title,
107
+ .disclose-title:focus,
108
+ .disclose-title::after {
109
+ transition: none;
110
+ }
111
+ }
112
+
113
+ .disclose[open] > .disclose-title::after {
114
+ transform: rotate(90deg);
115
+ }
116
+ </style>
package/dist/components/agnostic/Disclose/Disclose.svelte.d.ts CHANGED
@@ -1,17 +1,10 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
- props: {
4
- title?: string;
5
- isOpen?: boolean;
6
- isBackground?: boolean;
7
- isBordered?: boolean;
8
- };
3
+ props: Record<string, never>;
9
4
  events: {
10
5
  [evt: string]: CustomEvent<any>;
11
6
  };
12
- slots: {
13
- default: {};
14
- };
7
+ slots: {};
15
8
  };
16
9
  export type DiscloseProps = typeof __propDef.props;
17
10
  export type DiscloseEvents = typeof __propDef.events;