tera-system-ui 0.0.24 → 0.0.26

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 (82) hide show
  1. package/dist/components/avatar/Avatar.svelte +43 -43
  2. package/dist/components/brand-logo/BrandLogo.svelte +31 -31
  3. package/dist/components/button/Button.svelte +49 -49
  4. package/dist/components/combobox/Combobox.svelte +8 -8
  5. package/dist/components/command/command.scss +72 -72
  6. package/dist/components/command/components/Command.svelte +120 -120
  7. package/dist/components/command/components/Command.svelte.d.ts +1 -1
  8. package/dist/components/command/components/CommandEmpty.svelte +30 -30
  9. package/dist/components/command/components/CommandEmpty.svelte.d.ts +1 -1
  10. package/dist/components/command/components/CommandGroup.svelte +110 -110
  11. package/dist/components/command/components/CommandGroup.svelte.d.ts +1 -1
  12. package/dist/components/command/components/CommandInput.svelte +92 -92
  13. package/dist/components/command/components/CommandInput.svelte.d.ts +1 -1
  14. package/dist/components/command/components/CommandItem.svelte +110 -110
  15. package/dist/components/command/components/CommandItem.svelte.d.ts +1 -1
  16. package/dist/components/command/components/CommandList.svelte +56 -56
  17. package/dist/components/command/components/CommandLoading.svelte +28 -28
  18. package/dist/components/command/components/CommandLoading.svelte.d.ts +1 -1
  19. package/dist/components/command/components/CommandSeparator.svelte +21 -21
  20. package/dist/components/command/components/CommandSeparator.svelte.d.ts +1 -1
  21. package/dist/components/dialog/Dialog.astro +64 -64
  22. package/dist/components/dialog/Dialog.svelte +109 -109
  23. package/dist/components/dialog/dialog.scss +115 -115
  24. package/dist/components/dropdown-menu/components/DropdownMenu.svelte +33 -33
  25. package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte +11 -11
  26. package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte +11 -11
  27. package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte +30 -30
  28. package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte +10 -10
  29. package/dist/components/header/Header.svelte +36 -36
  30. package/dist/components/header/header.scss +19 -19
  31. package/dist/components/icons/IconArrowBigRightFilled.svelte +10 -10
  32. package/dist/components/icons/IconBook.svelte +10 -10
  33. package/dist/components/icons/IconBookmarkPlus.svelte +10 -10
  34. package/dist/components/icons/IconCalculator.svelte +10 -10
  35. package/dist/components/icons/IconCheck.svelte +10 -10
  36. package/dist/components/icons/IconChevronDown.svelte +10 -10
  37. package/dist/components/icons/IconCopy.svelte +10 -10
  38. package/dist/components/icons/IconCopyCheckFilled.svelte +10 -10
  39. package/dist/components/icons/IconHamburger.svelte +10 -10
  40. package/dist/components/icons/IconLanguage.svelte +10 -10
  41. package/dist/components/icons/IconLoader2.svelte +10 -10
  42. package/dist/components/icons/IconLogout.svelte +10 -10
  43. package/dist/components/icons/IconMoon.svelte +10 -10
  44. package/dist/components/icons/IconPointFilled.svelte +10 -10
  45. package/dist/components/icons/IconSearch.svelte +10 -10
  46. package/dist/components/icons/IconSettings.svelte +10 -10
  47. package/dist/components/icons/IconSun.svelte +10 -10
  48. package/dist/components/icons/IconSwitchHorizontal.svelte +10 -10
  49. package/dist/components/icons/IconSwitchVertical.svelte +10 -10
  50. package/dist/components/icons/IconTransform.svelte +10 -10
  51. package/dist/components/icons/IconX.svelte +10 -10
  52. package/dist/components/input/Input.svelte +24 -24
  53. package/dist/components/language-picker-button/LanguagePickerButton.svelte +109 -109
  54. package/dist/components/light-dark-toggle/LightDarkToggle.svelte +36 -36
  55. package/dist/components/popover/Popover.svelte +159 -159
  56. package/dist/components/popover-responsive/PopoverResponsive.svelte +87 -87
  57. package/dist/components/side-navigation/SideNavigation.svelte +114 -114
  58. package/dist/components/side-navigation/SideNavigationItem.svelte +17 -17
  59. package/dist/components/side-navigation/SideNavigationLayout.svelte +19 -19
  60. package/dist/components/side-navigation/sidenav.scss +149 -149
  61. package/dist/components/slider/Slider.svelte +181 -181
  62. package/dist/components/star-rating/StarRating.d.ts +52 -0
  63. package/dist/components/star-rating/StarRating.js +15 -0
  64. package/dist/components/star-rating/StarRating.svelte +101 -0
  65. package/dist/components/star-rating/StarRating.svelte.d.ts +3 -0
  66. package/dist/components/star-rating/index.d.ts +1 -0
  67. package/dist/components/star-rating/index.js +1 -0
  68. package/dist/components/tabs/components/Tabs.svelte +47 -47
  69. package/dist/components/tabs/components/TabsContent.svelte +34 -34
  70. package/dist/components/tabs/components/TabsItem.svelte +29 -29
  71. package/dist/components/tabs/components/TabsList.svelte +41 -41
  72. package/dist/components/tera-ui-context/TeraUiContext.svelte +28 -28
  73. package/dist/components/text-area/TextArea.svelte +88 -88
  74. package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte +67 -67
  75. package/dist/index.d.ts +1 -0
  76. package/dist/index.js +1 -0
  77. package/dist/themes/scrollbar.scss +37 -37
  78. package/dist/themes/tera-ui-base.css +208 -208
  79. package/dist/themes/tw-preset.cjs +153 -153
  80. package/package.json +98 -98
  81. package/scripts/add-component-template.js +120 -120
  82. package/scripts/generate-ts-index.js +138 -138
@@ -1,120 +1,120 @@
1
- <script lang="ts">
2
- import {addEventListener, executeCallbacks, srOnlyStyles, styleToString} from '../../../internal';
3
-
4
- import {createCommand} from '../command.js';
5
- import type {CommandProps} from '../types.js';
6
-
7
- let {
8
- children,
9
- childrenWithProps,
10
- label = undefined,
11
- shouldFilter = true,
12
- filter = undefined,
13
- value = undefined,
14
- onValueChange = undefined,
15
- loop = undefined,
16
- onKeydown = undefined,
17
- state: commandState = undefined,
18
- ids = undefined,
19
- asChild = false,
20
- onRequestCloseCommand,
21
- ...restProps
22
- }: CommandProps = $props();
23
-
24
-
25
- const {
26
- commandEl,
27
- handleRootKeydown,
28
- ids: commandIds,
29
- state: stateStore
30
- } = createCommand({
31
- label,
32
- shouldFilter,
33
- filter,
34
- value,
35
- onValueChange: (next) => {
36
- if (next !== value) {
37
- value = next;
38
- onValueChange?.(next);
39
- }
40
- },
41
- loop,
42
- state: commandState,
43
- ids,
44
- onRequestCloseCommand
45
- });
46
-
47
- let slotProps = $state()
48
-
49
- function syncValueAndState(value: string | undefined) {
50
- if (value && value !== $stateStore.value) {
51
- $stateStore.value = value;
52
- }
53
- }
54
-
55
-
56
-
57
-
58
- function rootAction(node: HTMLDivElement) {
59
- commandEl.set(node);
60
-
61
- const unsubEvents = executeCallbacks(addEventListener(node, 'keydown', handleKeydown));
62
-
63
- return {
64
- destroy: unsubEvents
65
- };
66
- }
67
-
68
- const rootAttrs = {
69
- role: 'application',
70
- id: commandIds.root,
71
- 'data-cmdk-root': ''
72
- };
73
-
74
- const labelAttrs = {
75
- 'data-cmdk-label': '',
76
- for: commandIds.input,
77
- id: commandIds.label,
78
- style: styleToString(srOnlyStyles)
79
- };
80
-
81
- function handleKeydown(e: KeyboardEvent) {
82
- onKeydown?.(e);
83
- if (e.defaultPrevented) return;
84
- handleRootKeydown(e);
85
- }
86
-
87
- const root = {
88
- action: rootAction,
89
- attrs: rootAttrs
90
- };
91
-
92
-
93
-
94
-
95
- $effect(() => {
96
- syncValueAndState(value);
97
-
98
- slotProps = {
99
- root,
100
- label: {attrs: labelAttrs},
101
- stateStore,
102
- state: $stateStore
103
- };
104
- })
105
- </script>
106
-
107
- {#if asChild}
108
- {@render childrenWithProps?.(slotProps)}
109
- {:else}
110
- <div use:rootAction {...rootAttrs} {...restProps}>
111
- <!-- svelte-ignore a11y_label_has_associated_control applied in attrs -->
112
- <label {...labelAttrs}>
113
- {label ?? ''}
114
- </label>
115
- <!--{@render childrenWithProps?.(slotProps)}-->
116
- {@render children?.()}
117
- <!-- <slot {...slotProps}/>-->
118
- </div>
119
- {/if}
120
-
1
+ <script lang="ts">
2
+ import {addEventListener, executeCallbacks, srOnlyStyles, styleToString} from '../../../internal';
3
+
4
+ import {createCommand} from '../command';
5
+ import type {CommandProps} from '../types';
6
+
7
+ let {
8
+ children,
9
+ childrenWithProps,
10
+ label = undefined,
11
+ shouldFilter = true,
12
+ filter = undefined,
13
+ value = undefined,
14
+ onValueChange = undefined,
15
+ loop = undefined,
16
+ onKeydown = undefined,
17
+ state: commandState = undefined,
18
+ ids = undefined,
19
+ asChild = false,
20
+ onRequestCloseCommand,
21
+ ...restProps
22
+ }: CommandProps = $props();
23
+
24
+
25
+ const {
26
+ commandEl,
27
+ handleRootKeydown,
28
+ ids: commandIds,
29
+ state: stateStore
30
+ } = createCommand({
31
+ label,
32
+ shouldFilter,
33
+ filter,
34
+ value,
35
+ onValueChange: (next) => {
36
+ if (next !== value) {
37
+ value = next;
38
+ onValueChange?.(next);
39
+ }
40
+ },
41
+ loop,
42
+ state: commandState,
43
+ ids,
44
+ onRequestCloseCommand
45
+ });
46
+
47
+ let slotProps = $state()
48
+
49
+ function syncValueAndState(value: string | undefined) {
50
+ if (value && value !== $stateStore.value) {
51
+ $stateStore.value = value;
52
+ }
53
+ }
54
+
55
+
56
+
57
+
58
+ function rootAction(node: HTMLDivElement) {
59
+ commandEl.set(node);
60
+
61
+ const unsubEvents = executeCallbacks(addEventListener(node, 'keydown', handleKeydown));
62
+
63
+ return {
64
+ destroy: unsubEvents
65
+ };
66
+ }
67
+
68
+ const rootAttrs = {
69
+ role: 'application',
70
+ id: commandIds.root,
71
+ 'data-cmdk-root': ''
72
+ };
73
+
74
+ const labelAttrs = {
75
+ 'data-cmdk-label': '',
76
+ for: commandIds.input,
77
+ id: commandIds.label,
78
+ style: styleToString(srOnlyStyles)
79
+ };
80
+
81
+ function handleKeydown(e: KeyboardEvent) {
82
+ onKeydown?.(e);
83
+ if (e.defaultPrevented) return;
84
+ handleRootKeydown(e);
85
+ }
86
+
87
+ const root = {
88
+ action: rootAction,
89
+ attrs: rootAttrs
90
+ };
91
+
92
+
93
+
94
+
95
+ $effect(() => {
96
+ syncValueAndState(value);
97
+
98
+ slotProps = {
99
+ root,
100
+ label: {attrs: labelAttrs},
101
+ stateStore,
102
+ state: $stateStore
103
+ };
104
+ })
105
+ </script>
106
+
107
+ {#if asChild}
108
+ {@render childrenWithProps?.(slotProps)}
109
+ {:else}
110
+ <div use:rootAction {...rootAttrs} {...restProps}>
111
+ <!-- svelte-ignore a11y_label_has_associated_control applied in attrs -->
112
+ <label {...labelAttrs}>
113
+ {label ?? ''}
114
+ </label>
115
+ <!--{@render childrenWithProps?.(slotProps)}-->
116
+ {@render children?.()}
117
+ <!-- <slot {...slotProps}/>-->
118
+ </div>
119
+ {/if}
120
+
@@ -1,3 +1,3 @@
1
- import type { CommandProps } from '../types.js';
1
+ import type { CommandProps } from '../types';
2
2
  declare const Command: import("svelte").Component<CommandProps, {}, "">;
3
3
  export default Command;
@@ -1,30 +1,30 @@
1
- <script lang="ts">
2
- import {getState} from '../command.js';
3
- import type {EmptyProps} from '../types.js';
4
- import {derived} from "svelte/store";
5
- import {onMount} from "svelte";
6
-
7
- type $$Props = EmptyProps;
8
-
9
- let {children, ...restProps}: $$Props = $props()
10
-
11
- let isFirstRender = $state(true);
12
- const commandState = getState();
13
-
14
- let render = derived(commandState, ($commandState) => ($commandState.filtered.count === 0))
15
-
16
- onMount(() => {
17
- isFirstRender = false;
18
- });
19
-
20
- const attrs = {
21
- 'data-cmdk-empty': '',
22
- role: 'presentation'
23
- };
24
- </script>
25
-
26
- {#if !isFirstRender && $render}
27
- <div {...attrs} {...restProps}>
28
- {@render children?.()}
29
- </div>
30
- {/if}
1
+ <script lang="ts">
2
+ import {getState} from '../command';
3
+ import type {EmptyProps} from '../types';
4
+ import {derived} from "svelte/store";
5
+ import {onMount} from "svelte";
6
+
7
+ type $$Props = EmptyProps;
8
+
9
+ let {children, ...restProps}: $$Props = $props()
10
+
11
+ let isFirstRender = $state(true);
12
+ const commandState = getState();
13
+
14
+ let render = derived(commandState, ($commandState) => ($commandState.filtered.count === 0))
15
+
16
+ onMount(() => {
17
+ isFirstRender = false;
18
+ });
19
+
20
+ const attrs = {
21
+ 'data-cmdk-empty': '',
22
+ role: 'presentation'
23
+ };
24
+ </script>
25
+
26
+ {#if !isFirstRender && $render}
27
+ <div {...attrs} {...restProps}>
28
+ {@render children?.()}
29
+ </div>
30
+ {/if}
@@ -1,3 +1,3 @@
1
- import type { EmptyProps } from '../types.js';
1
+ import type { EmptyProps } from '../types';
2
2
  declare const CommandEmpty: import("svelte").Component<EmptyProps, {}, "">;
3
3
  export default CommandEmpty;
@@ -1,110 +1,110 @@
1
- <script lang="ts">
2
- import {generateId} from '../../../internal/index.js';
3
- import {derived} from 'svelte/store';
4
- import {createGroup, getCtx, getState, VALUE_ATTR} from '../command.js';
5
- import type {GroupProps} from '../types.js';
6
- import {onMount} from 'svelte';
7
-
8
- type $$Props = GroupProps;
9
-
10
- let {
11
- children,
12
- heading,
13
- value = '',
14
- alwaysRender = false,
15
- ...restProps
16
- }: $$Props = $props()
17
-
18
- const {id} = createGroup(alwaysRender);
19
-
20
- const context = getCtx();
21
- const commandState = getState();
22
- const headingId = generateId();
23
-
24
- const render = derived(commandState, ($state) => {
25
- if (alwaysRender) return true;
26
- if (context.filter() === false) return true;
27
- if (!$commandState.search) return true;
28
- return $commandState.filtered.groups.has(id);
29
- });
30
-
31
-
32
- onMount(() => {
33
- const unsubGroup = context.group(id);
34
- return unsubGroup;
35
- });
36
-
37
-
38
- function containerAction(node: HTMLElement) {
39
-
40
- if (value) {
41
- context.value(id, value);
42
- node.setAttribute(VALUE_ATTR, value);
43
- return;
44
- }
45
-
46
- if (heading) {
47
- value = heading.trim().toLowerCase();
48
- } else if (node.textContent) {
49
- value = node.textContent.trim().toLowerCase();
50
- }
51
-
52
- context.value(id, value);
53
- node.setAttribute(VALUE_ATTR, value);
54
- }
55
-
56
- let containerAttrs = $state()
57
-
58
- $effect(() => {
59
- containerAttrs = {
60
- 'data-cmdk-group': '',
61
- role: 'presentation',
62
- hidden: $render ? undefined : true,
63
- 'data-value': value
64
- }
65
- })
66
-
67
-
68
- const headingAttrs = {
69
- 'data-cmdk-group-heading': '',
70
- 'aria-hidden': true,
71
- id: headingId
72
- };
73
-
74
- let groupAttrs = $state()
75
- $effect(() => {
76
- groupAttrs = {
77
- 'data-cmdk-group-items': '',
78
- role: 'group',
79
- 'aria-labelledby': heading ? headingId : undefined
80
- };
81
- })
82
-
83
- let container = $state()
84
- $effect(() => {
85
- container = {
86
- action: containerAction,
87
- attrs: containerAttrs
88
- };
89
- })
90
-
91
-
92
- let group = $state()
93
- $effect(() => {
94
- group = {
95
- attrs: groupAttrs
96
- };
97
- })
98
- </script>
99
-
100
- <div use:containerAction {...containerAttrs} {...restProps}>
101
- {#if heading}
102
- <div {...headingAttrs}>
103
- {heading}
104
- </div>
105
- {/if}
106
- <div {...groupAttrs}>
107
- <!-- <slot {container} {group} heading={{ attrs: headingAttrs }}/>-->
108
- {@render children?.()}
109
- </div>
110
- </div>
1
+ <script lang="ts">
2
+ import {generateId} from '../../../internal';
3
+ import {derived} from 'svelte/store';
4
+ import {createGroup, getCtx, getState, VALUE_ATTR} from '../command';
5
+ import type {GroupProps} from '../types';
6
+ import {onMount} from 'svelte';
7
+
8
+ type $$Props = GroupProps;
9
+
10
+ let {
11
+ children,
12
+ heading,
13
+ value = '',
14
+ alwaysRender = false,
15
+ ...restProps
16
+ }: $$Props = $props()
17
+
18
+ const {id} = createGroup(alwaysRender);
19
+
20
+ const context = getCtx();
21
+ const commandState = getState();
22
+ const headingId = generateId();
23
+
24
+ const render = derived(commandState, ($state) => {
25
+ if (alwaysRender) return true;
26
+ if (context.filter() === false) return true;
27
+ if (!$commandState.search) return true;
28
+ return $commandState.filtered.groups.has(id);
29
+ });
30
+
31
+
32
+ onMount(() => {
33
+ const unsubGroup = context.group(id);
34
+ return unsubGroup;
35
+ });
36
+
37
+
38
+ function containerAction(node: HTMLElement) {
39
+
40
+ if (value) {
41
+ context.value(id, value);
42
+ node.setAttribute(VALUE_ATTR, value);
43
+ return;
44
+ }
45
+
46
+ if (heading) {
47
+ value = heading.trim().toLowerCase();
48
+ } else if (node.textContent) {
49
+ value = node.textContent.trim().toLowerCase();
50
+ }
51
+
52
+ context.value(id, value);
53
+ node.setAttribute(VALUE_ATTR, value);
54
+ }
55
+
56
+ let containerAttrs = $state()
57
+
58
+ $effect(() => {
59
+ containerAttrs = {
60
+ 'data-cmdk-group': '',
61
+ role: 'presentation',
62
+ hidden: $render ? undefined : true,
63
+ 'data-value': value
64
+ }
65
+ })
66
+
67
+
68
+ const headingAttrs = {
69
+ 'data-cmdk-group-heading': '',
70
+ 'aria-hidden': true,
71
+ id: headingId
72
+ };
73
+
74
+ let groupAttrs = $state()
75
+ $effect(() => {
76
+ groupAttrs = {
77
+ 'data-cmdk-group-items': '',
78
+ role: 'group',
79
+ 'aria-labelledby': heading ? headingId : undefined
80
+ };
81
+ })
82
+
83
+ let container = $state()
84
+ $effect(() => {
85
+ container = {
86
+ action: containerAction,
87
+ attrs: containerAttrs
88
+ };
89
+ })
90
+
91
+
92
+ let group = $state()
93
+ $effect(() => {
94
+ group = {
95
+ attrs: groupAttrs
96
+ };
97
+ })
98
+ </script>
99
+
100
+ <div use:containerAction {...containerAttrs} {...restProps}>
101
+ {#if heading}
102
+ <div {...headingAttrs}>
103
+ {heading}
104
+ </div>
105
+ {/if}
106
+ <div {...groupAttrs}>
107
+ <!-- <slot {container} {group} heading={{ attrs: headingAttrs }}/>-->
108
+ {@render children?.()}
109
+ </div>
110
+ </div>
@@ -1,3 +1,3 @@
1
- import type { GroupProps } from '../types.js';
1
+ import type { GroupProps } from '../types';
2
2
  declare const CommandGroup: import("svelte").Component<GroupProps, {}, "">;
3
3
  export default CommandGroup;