@medyll/idae-slotui-svelte 0.122.0 → 0.123.0

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 (208) hide show
  1. package/README.md +47 -47
  2. package/dist/base/alert/Alert.demo.svelte +62 -62
  3. package/dist/base/alert/Alert.svelte +121 -121
  4. package/dist/base/alert/alert.scss +93 -93
  5. package/dist/base/avatar/Avatar.demo.svelte +41 -41
  6. package/dist/base/avatar/Avatar.preview.svelte +6 -6
  7. package/dist/base/avatar/Avatar.svelte +65 -65
  8. package/dist/base/avatar/avatar.scss +17 -17
  9. package/dist/base/backdrop/Backdrop.demo.svelte +49 -49
  10. package/dist/base/backdrop/Backdrop.svelte +78 -78
  11. package/dist/base/backdrop/backdrop.scss +34 -34
  12. package/dist/base/badge/Badge.svelte +31 -31
  13. package/dist/base/badge/badge.scss +19 -19
  14. package/dist/base/box/Box.demo.svelte +54 -54
  15. package/dist/base/box/Box.svelte +72 -72
  16. package/dist/base/box/box.scss +33 -33
  17. package/dist/base/breadCrumb/BreadCrumb.svelte +23 -23
  18. package/dist/base/breadCrumb/breadcrumb.scss +11 -11
  19. package/dist/base/cartouche/Cartouche.demo.svelte +108 -108
  20. package/dist/base/cartouche/Cartouche.svelte +114 -114
  21. package/dist/base/cartouche/cartouche.scss +114 -114
  22. package/dist/base/chipper/Chipper.demo.svelte +45 -45
  23. package/dist/base/chipper/Chipper.svelte +36 -36
  24. package/dist/base/chipper/chipper.scss +65 -65
  25. package/dist/base/columner/Column.svelte +62 -62
  26. package/dist/base/columner/Columner.demo.svelte +15 -15
  27. package/dist/base/columner/Columner.svelte +21 -21
  28. package/dist/base/contentSwitcher/ContentSwitcher.demo.svelte +45 -45
  29. package/dist/base/contentSwitcher/ContentSwitcher.svelte +63 -63
  30. package/dist/base/contentSwitcher/content-switcher.scss +22 -22
  31. package/dist/base/debug/Debug.svelte +21 -21
  32. package/dist/base/demoer/DemoPage.svelte +40 -40
  33. package/dist/base/demoer/Demoer.svelte +170 -170
  34. package/dist/base/demoer/DemoerCode.svelte +45 -45
  35. package/dist/base/demoer/DemoerComponent.svelte +50 -50
  36. package/dist/base/divider/Divider.demo.svelte +34 -34
  37. package/dist/base/divider/Divider.svelte +68 -68
  38. package/dist/base/divider/divider.scss +19 -19
  39. package/dist/base/icon/Icon.demo.svelte +24 -24
  40. package/dist/base/icon/Icon.svelte +117 -117
  41. package/dist/base/icon/Icon.svelte.d.ts +1 -1
  42. package/dist/base/icon/icon.scss +17 -17
  43. package/dist/base/paper/Paper.demo.svelte +31 -31
  44. package/dist/base/paper/Paper.svelte +20 -20
  45. package/dist/base/paper/paper.scss +15 -15
  46. package/dist/base/titleBar/TitleBar.demo.svelte +30 -30
  47. package/dist/base/titleBar/TitleBar.svelte +40 -40
  48. package/dist/base/titleBar/title-bar.scss +29 -29
  49. package/dist/controls/autocomplete/AutoComplete.demo.svelte +88 -88
  50. package/dist/controls/autocomplete/AutoComplete.svelte +152 -152
  51. package/dist/controls/autocomplete/auto-complete.scss +15 -15
  52. package/dist/controls/button/Button.demo.svelte +165 -165
  53. package/dist/controls/button/Button.svelte +95 -95
  54. package/dist/controls/button/Button.svelte.d.ts +1 -1
  55. package/dist/controls/button/ButtonAction.svelte +55 -55
  56. package/dist/controls/button/ButtonMenu.svelte +55 -55
  57. package/dist/controls/button/IconButton.svelte +45 -45
  58. package/dist/controls/button/button-action.scss +8 -8
  59. package/dist/controls/button/button-menu.scss +36 -36
  60. package/dist/controls/button/button.scss +293 -293
  61. package/dist/controls/checkbox/Checkbox.demo.svelte +29 -29
  62. package/dist/controls/checkbox/Checkbox.svelte +59 -59
  63. package/dist/controls/checkbox/checkbox.scss +115 -115
  64. package/dist/controls/confirm/Confirm.demo.svelte +60 -60
  65. package/dist/controls/confirm/Confirm.preview.svelte +14 -14
  66. package/dist/controls/confirm/Confirm.svelte +156 -156
  67. package/dist/controls/confirm/confirm.scss +12 -12
  68. package/dist/controls/inplaceedit/InPlaceEdit.demo.svelte +41 -41
  69. package/dist/controls/inplaceedit/InPlaceEdit.svelte +109 -109
  70. package/dist/controls/progress/Progress.demo.svelte +30 -30
  71. package/dist/controls/progress/Progress.svelte +26 -26
  72. package/dist/controls/progress/progress.scss +23 -23
  73. package/dist/controls/rating/Rating.demo.svelte +45 -45
  74. package/dist/controls/rating/Rating.svelte +44 -44
  75. package/dist/controls/rating/Rating.svelte.d.ts +1 -1
  76. package/dist/controls/rating/rating.scss +9 -9
  77. package/dist/controls/select/Select.demo.svelte +101 -101
  78. package/dist/controls/select/Select.svelte +125 -125
  79. package/dist/controls/select/select.scss +13 -13
  80. package/dist/controls/slider/Slider.demo.svelte +34 -34
  81. package/dist/controls/slider/Slider.svelte +153 -153
  82. package/dist/controls/slider/slider.scss +51 -51
  83. package/dist/controls/stepper/Stepper.demo.svelte +32 -32
  84. package/dist/controls/stepper/Stepper.svelte +30 -30
  85. package/dist/controls/stepper/stepper.scss +23 -23
  86. package/dist/controls/switch/Switch.demo.svelte +61 -61
  87. package/dist/controls/switch/Switch.svelte +45 -45
  88. package/dist/controls/switch/switch.scss +73 -73
  89. package/dist/controls/textfield/TextField.demo.svelte +79 -79
  90. package/dist/controls/textfield/TextField.svelte +86 -86
  91. package/dist/controls/textfield/TextField.svelte.d.ts +1 -1
  92. package/dist/controls/textfield/textfield.scss +68 -68
  93. package/dist/csss/csss.scss +10 -10
  94. package/dist/data/dataList/DataList.demo.svelte +151 -151
  95. package/dist/data/dataList/DataList.preview.svelte +23 -23
  96. package/dist/data/dataList/DataList.svelte +233 -233
  97. package/dist/data/dataList/DataListCell.svelte +212 -212
  98. package/dist/data/dataList/DataListHead.svelte +75 -75
  99. package/dist/data/dataList/DataListRow.svelte +93 -93
  100. package/dist/data/dataList/datalist.scss +157 -157
  101. package/dist/data/finder/Finder.demo.svelte +55 -55
  102. package/dist/data/finder/Finder.svelte +166 -166
  103. package/dist/data/finder/finder.scss +14 -14
  104. package/dist/data/grouper/Grouper.demo.svelte +36 -36
  105. package/dist/data/grouper/Grouper.svelte +85 -85
  106. package/dist/data/jsoner/Jsoner.svelte +40 -40
  107. package/dist/data/list/List.svelte +16 -16
  108. package/dist/data/list/ListItem.svelte +10 -10
  109. package/dist/data/list/ListTitle.svelte +8 -8
  110. package/dist/data/loader/Loader.demo.svelte +95 -95
  111. package/dist/data/loader/Loader.preview.svelte +7 -7
  112. package/dist/data/loader/Loader.svelte +99 -99
  113. package/dist/data/loader/loader.scss +50 -50
  114. package/dist/data/sorter/Sorter.demo.svelte +62 -62
  115. package/dist/data/sorter/Sorter.svelte +80 -80
  116. package/dist/data/sorter/Sorterer.svelte +27 -27
  117. package/dist/data/sorter/sorterer.scss +11 -11
  118. package/dist/index.d.ts +67 -66
  119. package/dist/index.js +67 -66
  120. package/dist/navigation/drawer/Drawer.demo.svelte +52 -52
  121. package/dist/navigation/drawer/Drawer.svelte +163 -163
  122. package/dist/navigation/drawer/drawer.scss +69 -69
  123. package/dist/navigation/tabs/Tabs.demo.svelte +83 -83
  124. package/dist/navigation/tabs/Tabs.preview.svelte +22 -22
  125. package/dist/navigation/tabs/Tabs.svelte +158 -158
  126. package/dist/navigation/tabs/tabs.scss +92 -92
  127. package/dist/slotui-css/slotui-css.css +229 -229
  128. package/dist/slotui-css/slotui-min-css.css +229 -229
  129. package/dist/styles/slotui-mixins.scss +168 -168
  130. package/dist/styles/slotui-presets.scss +56 -56
  131. package/dist/styles/slotuisheet/SlotuiSheet.svelte +36 -36
  132. package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte +28 -28
  133. package/dist/styles/slotuisheet/sheetConfig.scss +7 -7
  134. package/dist/styles/slotuisheet/slotui-sheet.scss +192 -192
  135. package/dist/styles/slotuisheet/stylesheet-container.scss +147 -147
  136. package/dist/styles/slotuisheet/stylesheet.scss +156 -156
  137. package/dist/types/slotui-ambient.d.ts +27 -27
  138. package/dist/ui/bootstrapp/BootStrApp.svelte +92 -92
  139. package/dist/ui/chromeFrame/ChromeFrame.svelte +43 -43
  140. package/dist/ui/chromeFrame/ChromeFrameButtonList.svelte +33 -33
  141. package/dist/ui/chromeFrame/ChromeFrameList.svelte +106 -106
  142. package/dist/ui/chromeFrame/chrome-frame.scss +34 -34
  143. package/dist/ui/frame/Frame.demo.svelte +48 -48
  144. package/dist/ui/frame/Frame.svelte +90 -90
  145. package/dist/ui/frame/frame.scss +46 -46
  146. package/dist/ui/login/Login.demo.svelte +62 -62
  147. package/dist/ui/login/Login.svelte +102 -102
  148. package/dist/ui/marquee/Marquee.demo.svelte +33 -33
  149. package/dist/ui/marquee/Marquee.svelte +97 -97
  150. package/dist/ui/marquee/marquee.scss +34 -34
  151. package/dist/ui/menu/Menu.svelte +9 -9
  152. package/dist/ui/menu/MenuItem.svelte +9 -9
  153. package/dist/ui/menu/MenuTitle.svelte +10 -10
  154. package/dist/ui/menu/menu.scss +61 -61
  155. package/dist/ui/menuList/MenuList.demo.svelte +73 -73
  156. package/dist/ui/menuList/MenuList.svelte +143 -143
  157. package/dist/ui/menuList/MenuListItem.svelte +134 -134
  158. package/dist/ui/menuList/MenuListTitle.svelte +10 -10
  159. package/dist/ui/menuList/menu-list.scss +120 -120
  160. package/dist/ui/panel/Panel.demo.svelte +169 -169
  161. package/dist/ui/panel/Panel.svelte +96 -96
  162. package/dist/ui/panel/PanelGrid.svelte +62 -62
  163. package/dist/ui/panel/PanelSlide.svelte +156 -156
  164. package/dist/ui/panel/Paneler.svelte +63 -63
  165. package/dist/ui/panel/panel.scss +32 -32
  166. package/dist/ui/popper/Popper.demo.svelte +92 -92
  167. package/dist/ui/popper/Popper.svelte +160 -160
  168. package/dist/ui/popper/popper.scss +108 -108
  169. package/dist/ui/preview/Preview.svelte +41 -41
  170. package/dist/ui/serviceBox/ServiceBox.svelte +24 -24
  171. package/dist/ui/startMenu/BootMenu.svelte +102 -102
  172. package/dist/ui/startMenu/boot-menu.scss +86 -86
  173. package/dist/ui/taskbar/TaskBarContent.svelte +20 -20
  174. package/dist/ui/taskbar/Taskbar.svelte +26 -26
  175. package/dist/ui/taskbar/taskbar.scss +28 -28
  176. package/dist/ui/themeswitcher/ThemeSwitcher.svelte +18 -18
  177. package/dist/ui/toast/Toast.demo.svelte +19 -19
  178. package/dist/ui/toast/Toast.svelte +60 -60
  179. package/dist/ui/toast/Toaster.svelte +18 -18
  180. package/dist/ui/toggleBar/ToggleBar.demo.svelte +114 -114
  181. package/dist/ui/toggleBar/ToggleBar.svelte +58 -58
  182. package/dist/ui/toggleBar/ToggleBar.svelte.d.ts +1 -1
  183. package/dist/ui/toggleBar/toggle-bar.scss +45 -45
  184. package/dist/ui/toolBar/ToolBar.demo.svelte +98 -98
  185. package/dist/ui/toolBar/ToolBar.svelte +30 -30
  186. package/dist/ui/toolBar/toolbar.scss +32 -32
  187. package/dist/ui/tree/Tree.demo.svelte +84 -84
  188. package/dist/ui/tree/Tree.preview.svelte +19 -19
  189. package/dist/ui/tree/Tree.svelte +182 -182
  190. package/dist/ui/tree/tree.scss +38 -38
  191. package/dist/ui/window/Window.demo.svelte +111 -111
  192. package/dist/ui/window/Window.svelte +177 -177
  193. package/dist/ui/window/window.scss +66 -66
  194. package/dist/utils/content/Content.svelte +78 -78
  195. package/dist/utils/contextRooter/ContextRooter.demo.svelte +33 -33
  196. package/dist/utils/contextRooter/ContextRooter.svelte +6 -6
  197. package/dist/utils/css/Css.demo.svelte +5 -5
  198. package/dist/utils/css/Css.svelte +64 -64
  199. package/dist/utils/effects/transitions.js +6 -6
  200. package/dist/utils/looper/Looper.demo.svelte +36 -36
  201. package/dist/utils/looper/Looper.svelte +47 -47
  202. package/dist/utils/slotted/Slotted.svelte +21 -21
  203. package/dist/utils/stylesheet/StyleSheet.demo.svelte +28 -28
  204. package/dist/utils/stylesheet/StyleSheet.svelte +30 -30
  205. package/dist/utils/stylesheet/containerConfig.scss +7 -7
  206. package/dist/utils/stylesheet/stylesheet.scss +147 -147
  207. package/dist/utils/uses/sx4u/sx4uPreprocess.js +34 -34
  208. package/package.json +4 -4
@@ -1,62 +1,62 @@
1
- <script lang="ts">
2
- import Divider from '../../base/divider/Divider.svelte';
3
- import List from '../list/List.svelte';
4
- import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
5
- import Sorter from './Sorter.svelte';
6
- import Sorterer from './Sorterer.svelte';
7
-
8
- const data = [...Array(5)].map((r, i) => {
9
- return {
10
- id: i,
11
- name: 'surname ' + i,
12
- directory: ((prop: any) => 'dir-' + (i % 4) + prop)(i),
13
- nestedData: {
14
- uuid: crypto?.randomUUID() ?? i
15
- }
16
- };
17
- });
18
-
19
- let sortedData: any[] = [];
20
- let activeCommonSortField = '';
21
- </script>
22
-
23
- <ComponentDemo
24
- component="Sorter"
25
- cite="Then, what was before became the after.<br /> R. Hakran, 824"
26
- >
27
- <h5>Button mode</h5>
28
- <div class="flex-h gap-small">
29
- <div>
30
- <div class="flex-h gap-small">
31
- <Sorter
32
- sortByOrder="asc"
33
- sortByField="id"
34
- bind:sortedData
35
- bind:activeCommonSortField
36
- {data}
37
- />
38
- <Sorter sortByField="name" bind:sortedData bind:activeCommonSortField {data} />
39
- <Sorter sortByField="directory" bind:sortedData bind:activeCommonSortField {data} />
40
- <Sorter sortByField="nestedData.uuid" bind:sortedData bind:activeCommonSortField {data} />
41
- </div>
42
- <Divider shadowed />
43
- <List selectorField="id" data={[...sortedData]} />
44
- </div>
45
- <div class="flex-h gap-small">
46
- <div class="pad">
47
- <h6>Code</h6>
48
- single field<br />
49
- mutiple field <br />
50
- nested field <br />
51
- </div>
52
- </div>
53
- </div>
54
- <h5>{'<Sorterer />'}</h5>
55
- <div>
56
- <Sorterer
57
- bind:sortedData
58
- fields={[{ sortByField: 'name' }, { sortByField: 'directory' }]}
59
- {data}>With a title :</Sorterer
60
- >
61
- </div>
62
- </ComponentDemo>
1
+ <script lang="ts">
2
+ import Divider from '../../base/divider/Divider.svelte';
3
+ import List from '../list/List.svelte';
4
+ import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
5
+ import Sorter from './Sorter.svelte';
6
+ import Sorterer from './Sorterer.svelte';
7
+
8
+ const data = [...Array(5)].map((r, i) => {
9
+ return {
10
+ id: i,
11
+ name: 'surname ' + i,
12
+ directory: ((prop: any) => 'dir-' + (i % 4) + prop)(i),
13
+ nestedData: {
14
+ uuid: crypto?.randomUUID() ?? i
15
+ }
16
+ };
17
+ });
18
+
19
+ let sortedData: any[] = [];
20
+ let activeCommonSortField = '';
21
+ </script>
22
+
23
+ <ComponentDemo
24
+ component="Sorter"
25
+ cite="Then, what was before became the after.<br /> R. Hakran, 824"
26
+ >
27
+ <h5>Button mode</h5>
28
+ <div class="flex-h gap-small">
29
+ <div>
30
+ <div class="flex-h gap-small">
31
+ <Sorter
32
+ sortByOrder="asc"
33
+ sortByField="id"
34
+ bind:sortedData
35
+ bind:activeCommonSortField
36
+ {data}
37
+ />
38
+ <Sorter sortByField="name" bind:sortedData bind:activeCommonSortField {data} />
39
+ <Sorter sortByField="directory" bind:sortedData bind:activeCommonSortField {data} />
40
+ <Sorter sortByField="nestedData.uuid" bind:sortedData bind:activeCommonSortField {data} />
41
+ </div>
42
+ <Divider shadowed />
43
+ <List selectorField="id" data={[...sortedData]} />
44
+ </div>
45
+ <div class="flex-h gap-small">
46
+ <div class="pad">
47
+ <h6>Code</h6>
48
+ single field<br />
49
+ mutiple field <br />
50
+ nested field <br />
51
+ </div>
52
+ </div>
53
+ </div>
54
+ <h5>{'<Sorterer />'}</h5>
55
+ <div>
56
+ <Sorterer
57
+ bind:sortedData
58
+ fields={[{ sortByField: 'name' }, { sortByField: 'directory' }]}
59
+ {data}>With a title :</Sorterer
60
+ >
61
+ </div>
62
+ </ComponentDemo>
@@ -1,80 +1,80 @@
1
- <script lang="ts">
2
- import Button from '../../controls/button/Button.svelte';
3
- import type { ExpandProps } from '../../types/index.js';
4
- import { dataOp } from '../../utils/engine/utils.js';
5
- import Slotted from '../../utils/slotted/Slotted.svelte';
6
- import type { SorterProps } from './types.js';
7
-
8
- const sortState: string[] = ['none', 'asc', 'desc'];
9
- const icons = {
10
- default: ['dots-horizontal', 'sort-bool-ascending', 'sort-bool-descending']
11
- };
12
-
13
- let {
14
- data = [],
15
- sortedData = $bindable(data),
16
- sortByField,
17
- sortByTitleField,
18
- sortByOrder = 'none',
19
- activeCommonSortField = $bindable(''),
20
- sorterMode = 'button',
21
- children,
22
- sortListItems,
23
- ...rest
24
- }: ExpandProps<SorterProps> = $props();
25
-
26
- $effect(() => {
27
- if (Boolean(activeCommonSortField) && activeCommonSortField !== sortByField) {
28
- sortByOrder = 'none';
29
- }
30
- });
31
-
32
- function doSort(field: string, order: 'asc' | 'desc' | 'none' | string) {
33
- activeCommonSortField = field;
34
- sortByOrder = order;
35
- if (order === 'none') {
36
- sortedData = data;
37
- } else {
38
- sortedData = dataOp.sortBy(data, field, order);
39
- }
40
- }
41
- </script>
42
-
43
- <div {...rest}>
44
- {#if sorterMode === 'button'}
45
- <Button
46
- onclick={() => {
47
- const next = sortState.indexOf(sortByOrder) + 1;
48
- let toggleOrder = sortState?.[next] ? sortState[next] : sortState[0];
49
- if (sortByField) doSort(sortByField, toggleOrder);
50
- }}
51
- value={sortByTitleField ?? sortByField}
52
- icon={'mdi' + icons.default[sortState.indexOf(sortByOrder)]}
53
- variant="naked"
54
- selected={sortByOrder !== 'none' && activeCommonSortField === sortByField}
55
- width="auto"
56
- showChip={sortByOrder !== 'none' && activeCommonSortField === sortByField}
57
- />
58
- {/if}
59
- {#if sorterMode === 'menu'}
60
- <Button
61
- onclick={() => {
62
- if (sortByField) doSort(sortByField, 'desc');
63
- }}
64
- icon="mdi:sort-bool-descending"
65
- />
66
- {/if}
67
- <!-- // button name + asc/desc -->
68
- <!-- // button menu with all data minus objects + asc/desc -->
69
- <Slotted
70
- child={children}
71
- slotArgs={{
72
- primary: sortByTitleField ?? sortByField,
73
- icon: 'mdi:' + icons.default[sortState.indexOf(sortByOrder)],
74
- naked: true,
75
- selected: sortByOrder !== 'none' && activeCommonSortField === sortByField,
76
- size: 'auto',
77
- showChip: sortByOrder !== 'none' && activeCommonSortField === sortByField
78
- }}
79
- ></Slotted>
80
- </div>
1
+ <script lang="ts">
2
+ import Button from '../../controls/button/Button.svelte';
3
+ import type { ExpandProps } from '../../types/index.js';
4
+ import { dataOp } from '../../utils/engine/utils.js';
5
+ import Slotted from '../../utils/slotted/Slotted.svelte';
6
+ import type { SorterProps } from './types.js';
7
+
8
+ const sortState: string[] = ['none', 'asc', 'desc'];
9
+ const icons = {
10
+ default: ['dots-horizontal', 'sort-bool-ascending', 'sort-bool-descending']
11
+ };
12
+
13
+ let {
14
+ data = [],
15
+ sortedData = $bindable(data),
16
+ sortByField,
17
+ sortByTitleField,
18
+ sortByOrder = 'none',
19
+ activeCommonSortField = $bindable(''),
20
+ sorterMode = 'button',
21
+ children,
22
+ sortListItems,
23
+ ...rest
24
+ }: ExpandProps<SorterProps> = $props();
25
+
26
+ $effect(() => {
27
+ if (Boolean(activeCommonSortField) && activeCommonSortField !== sortByField) {
28
+ sortByOrder = 'none';
29
+ }
30
+ });
31
+
32
+ function doSort(field: string, order: 'asc' | 'desc' | 'none' | string) {
33
+ activeCommonSortField = field;
34
+ sortByOrder = order;
35
+ if (order === 'none') {
36
+ sortedData = data;
37
+ } else {
38
+ sortedData = dataOp.sortBy(data, field, order);
39
+ }
40
+ }
41
+ </script>
42
+
43
+ <div {...rest}>
44
+ {#if sorterMode === 'button'}
45
+ <Button
46
+ onclick={() => {
47
+ const next = sortState.indexOf(sortByOrder) + 1;
48
+ let toggleOrder = sortState?.[next] ? sortState[next] : sortState[0];
49
+ if (sortByField) doSort(sortByField, toggleOrder);
50
+ }}
51
+ value={sortByTitleField ?? sortByField}
52
+ icon={'mdi' + icons.default[sortState.indexOf(sortByOrder)]}
53
+ variant="naked"
54
+ selected={sortByOrder !== 'none' && activeCommonSortField === sortByField}
55
+ width="auto"
56
+ showChip={sortByOrder !== 'none' && activeCommonSortField === sortByField}
57
+ />
58
+ {/if}
59
+ {#if sorterMode === 'menu'}
60
+ <Button
61
+ onclick={() => {
62
+ if (sortByField) doSort(sortByField, 'desc');
63
+ }}
64
+ icon="mdi:sort-bool-descending"
65
+ />
66
+ {/if}
67
+ <!-- // button name + asc/desc -->
68
+ <!-- // button menu with all data minus objects + asc/desc -->
69
+ <Slotted
70
+ child={children}
71
+ slotArgs={{
72
+ primary: sortByTitleField ?? sortByField,
73
+ icon: 'mdi:' + icons.default[sortState.indexOf(sortByOrder)],
74
+ naked: true,
75
+ selected: sortByOrder !== 'none' && activeCommonSortField === sortByField,
76
+ size: 'auto',
77
+ showChip: sortByOrder !== 'none' && activeCommonSortField === sortByField
78
+ }}
79
+ ></Slotted>
80
+ </div>
@@ -1,29 +1,29 @@
1
- <script lang="ts">
2
- import Slotted from '../../utils/slotted/Slotted.svelte';
3
- import Sorter from './Sorter.svelte';
4
- import type { SortererProps } from './types.js';
5
-
6
- let {
7
- class: className = '',
8
- element = $bindable(),
9
- style = '',
10
- data = [],
11
- sortedData = $bindable(data),
12
- onSort = () => {},
13
- fields = [],
14
- activeCommonSortField = '',
15
- children,
16
- ...rest
17
- }: SortererProps = $props();
18
- </script>
19
-
20
- <div bind:this={element} class="sorterer {className}" {...rest}>
21
- <Slotted child={children}></Slotted>
22
- {#each fields as field}
23
- <Sorter {...field} bind:sortedData bind:activeCommonSortField {data} />
24
- {/each}
25
- </div>
26
-
1
+ <script lang="ts">
2
+ import Slotted from '../../utils/slotted/Slotted.svelte';
3
+ import Sorter from './Sorter.svelte';
4
+ import type { SortererProps } from './types.js';
5
+
6
+ let {
7
+ class: className = '',
8
+ element = $bindable(),
9
+ style = '',
10
+ data = [],
11
+ sortedData = $bindable(data),
12
+ onSort = () => {},
13
+ fields = [],
14
+ activeCommonSortField = '',
15
+ children,
16
+ ...rest
17
+ }: SortererProps = $props();
18
+ </script>
19
+
20
+ <div bind:this={element} class="sorterer {className}" {...rest}>
21
+ <Slotted child={children}></Slotted>
22
+ {#each fields as field}
23
+ <Sorter {...field} bind:sortedData bind:activeCommonSortField {data} />
24
+ {/each}
25
+ </div>
26
+
27
27
  <style>:root {
28
28
  --sorterer-gap: var(--sld-gap-tiny);
29
29
  }
@@ -34,4 +34,4 @@
34
34
  flex-direction: row;
35
35
  align-items: center;
36
36
  gap: var(--sorterer-gap);
37
- }</style>
37
+ }</style>
@@ -1,11 +1,11 @@
1
- @use "../../styles/slotui-mixins.scss";
2
-
3
- :root {
4
- --sorterer-gap: var(--sld-gap-tiny);
5
- }
6
-
7
- .sorterer {
8
- cursor: pointer;
9
- @include slotui-mixins.flex(row, center);
10
- gap: var(--sorterer-gap);
11
- }
1
+ @use "../../styles/slotui-mixins.scss";
2
+
3
+ :root {
4
+ --sorterer-gap: var(--sld-gap-tiny);
5
+ }
6
+
7
+ .sorterer {
8
+ cursor: pointer;
9
+ @include slotui-mixins.flex(row, center);
10
+ gap: var(--sorterer-gap);
11
+ }
package/dist/index.d.ts CHANGED
@@ -117,6 +117,9 @@ export * from './utils/uses/draggabler.js';
117
117
  export * from './utils/stylesheet/utils.js';
118
118
  export * from './utils/stylesheet/types.js';
119
119
  export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
120
+ export { default as Slotted } from './utils/slotted/Slotted.svelte';
121
+ export * from './utils/looper/types.js';
122
+ export { default as Looper } from './utils/looper/Looper.svelte';
120
123
  export * from './utils/engine/wactions.utils.js';
121
124
  export * from './utils/engine/utils.js';
122
125
  export * from './utils/engine/stator.js';
@@ -124,70 +127,72 @@ export * from './utils/engine/site.utils.js';
124
127
  export * from './utils/engine/presets.js';
125
128
  export * from './utils/engine/engine.js';
126
129
  export * from './utils/engine/elem.js';
127
- export { default as Css } from './utils/css/Css.svelte';
128
130
  export * from './utils/effects/transitions.js';
129
- export { default as Slotted } from './utils/slotted/Slotted.svelte';
130
- export * from './utils/looper/types.js';
131
- export { default as Looper } from './utils/looper/Looper.svelte';
131
+ export { default as Css } from './utils/css/Css.svelte';
132
132
  export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
133
133
  export * from './utils/content/types.js';
134
134
  export { default as Content } from './utils/content/Content.svelte';
135
- export { default as Window } from './ui/window/Window.svelte';
136
135
  export * from './ui/window/types.js';
137
136
  export * from './ui/window/store.js';
138
137
  export * from './ui/window/actions.svelte.js';
138
+ export { default as Window } from './ui/window/Window.svelte';
139
139
  export * from './ui/tree/types.js';
140
140
  export * from './ui/tree/tree.utils.js';
141
141
  export { default as Tree } from './ui/tree/Tree.svelte';
142
- export * from './ui/toggleBar/types.js';
143
- export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
144
142
  export * from './ui/toolBar/types.js';
145
143
  export { default as ToolBar } from './ui/toolBar/ToolBar.svelte';
146
- export * from './ui/taskbar/types.js';
147
- export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
148
- export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
149
- export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
150
- export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
144
+ export * from './ui/toggleBar/types.js';
145
+ export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
151
146
  export * from './ui/toast/types.js';
147
+ export * from './ui/toast/store.js';
152
148
  export { default as Toaster } from './ui/toast/Toaster.svelte';
153
149
  export { default as Toast } from './ui/toast/Toast.svelte';
154
- export * from './ui/toast/store.js';
155
150
  export { default as ThemeSwitcher } from './ui/themeswitcher/ThemeSwitcher.svelte';
151
+ export * from './ui/taskbar/types.js';
152
+ export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
153
+ export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
154
+ export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
155
+ export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
156
156
  export * from './ui/preview/types.js';
157
+ export { default as Preview } from './ui/preview/Preview.svelte';
157
158
  export * from './ui/popper/usePopper.js';
158
159
  export * from './ui/popper/types.js';
159
- export { default as Popper } from './ui/popper/Popper.svelte';
160
160
  export * from './ui/popper/actions.js';
161
- export * from './ui/menu/types.js';
162
- export { default as MenuTitle } from './ui/menu/MenuTitle.svelte';
163
- export { default as MenuItem } from './ui/menu/MenuItem.svelte';
164
- export { default as Menu } from './ui/menu/Menu.svelte';
165
- export * from './ui/marquee/types.js';
166
- export { default as Marquee } from './ui/marquee/Marquee.svelte';
161
+ export { default as Popper } from './ui/popper/Popper.svelte';
167
162
  export * from './ui/panel/types.js';
163
+ export { default as Paneler } from './ui/panel/Paneler.svelte';
168
164
  export { default as PanelSlide } from './ui/panel/PanelSlide.svelte';
169
165
  export { default as PanelGrid } from './ui/panel/PanelGrid.svelte';
170
- export { default as Paneler } from './ui/panel/Paneler.svelte';
171
166
  export { default as Panel } from './ui/panel/Panel.svelte';
172
167
  export * from './ui/menuList/types.js';
173
168
  export { default as MenuListTitle } from './ui/menuList/MenuListTitle.svelte';
174
169
  export { default as MenuListItem } from './ui/menuList/MenuListItem.svelte';
175
170
  export { default as MenuList } from './ui/menuList/MenuList.svelte';
171
+ export * from './ui/menu/types.js';
172
+ export { default as MenuTitle } from './ui/menu/MenuTitle.svelte';
173
+ export { default as MenuItem } from './ui/menu/MenuItem.svelte';
174
+ export { default as Menu } from './ui/menu/Menu.svelte';
175
+ export * from './ui/marquee/types.js';
176
+ export { default as Marquee } from './ui/marquee/Marquee.svelte';
176
177
  export * from './ui/login/types.js';
177
178
  export * from './ui/login/store.js';
178
179
  export { default as Login } from './ui/login/Login.svelte';
179
180
  export * from './ui/frame/types.js';
180
181
  export { default as Frame } from './ui/frame/Frame.svelte';
181
182
  export * from './ui/chromeFrame/types.js';
183
+ export * from './ui/chromeFrame/chromeFrame.utils.js';
184
+ export * from './ui/chromeFrame/chromeFrame.store.js';
182
185
  export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.svelte';
183
186
  export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
184
- export * from './ui/chromeFrame/chromeFrame.utils.js';
185
187
  export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
186
- export * from './ui/chromeFrame/chromeFrame.store.js';
187
188
  export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
188
189
  export * from './styles/slotuisheet/utils.js';
189
190
  export * from './styles/slotuisheet/types.js';
190
191
  export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
192
+ export * from './navigation/tabs/types.js';
193
+ export { default as Tabs } from './navigation/tabs/Tabs.svelte';
194
+ export * from './navigation/drawer/types.js';
195
+ export { default as Drawer } from './navigation/drawer/Drawer.svelte';
191
196
  export * from './data/sorter/types.js';
192
197
  export { default as Sorterer } from './data/sorter/Sorterer.svelte';
193
198
  export { default as Sorter } from './data/sorter/Sorter.svelte';
@@ -198,6 +203,8 @@ export { default as ListItem } from './data/list/ListItem.svelte';
198
203
  export { default as List } from './data/list/List.svelte';
199
204
  export * from './data/jsoner/types.js';
200
205
  export { default as Jsoner } from './data/jsoner/Jsoner.svelte';
206
+ export * from './data/grouper/types.js';
207
+ export { default as Grouper } from './data/grouper/Grouper.svelte';
201
208
  export * from './data/finder/types.js';
202
209
  export { default as Finder } from './data/finder/Finder.svelte';
203
210
  export * from './data/dataList/types.js';
@@ -205,52 +212,24 @@ export { default as DataListRow } from './data/dataList/DataListRow.svelte';
205
212
  export { default as DataListHead } from './data/dataList/DataListHead.svelte';
206
213
  export { default as DataListCell } from './data/dataList/DataListCell.svelte';
207
214
  export { default as DataList } from './data/dataList/DataList.svelte';
208
- export * from './data/grouper/types.js';
209
- export { default as Grouper } from './data/grouper/Grouper.svelte';
210
- export * from './controls/textfield/types.js';
211
- export { default as TextField } from './controls/textfield/TextField.svelte';
212
- export * from './controls/stepper/types.js';
213
- export { default as Stepper } from './controls/stepper/Stepper.svelte';
214
- export * from './controls/slider/types.js';
215
- export { default as Slider } from './controls/slider/Slider.svelte';
216
- export * from './controls/progress/types.js';
217
- export { default as Progress } from './controls/progress/Progress.svelte';
218
- export * from './controls/switch/types.js';
219
- export { default as Switch } from './controls/switch/Switch.svelte';
220
- export * from './controls/inplaceedit/types.js';
221
- export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
222
- export * from './controls/confirm/types.js';
223
- export { default as Confirm } from './controls/confirm/Confirm.svelte';
224
- export { default as Select } from './controls/select/Select.svelte';
225
- export * from './controls/checkbox/types.js';
226
- export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
227
- export * from './controls/rating/types.js';
228
- export { default as Rating } from './controls/rating/Rating.svelte';
229
- export * from './controls/button/types.js';
230
- export { default as IconButton } from './controls/button/IconButton.svelte';
231
- export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
232
- export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
233
- export { default as Button } from './controls/button/Button.svelte';
234
- export * from './controls/autocomplete/types.js';
235
- export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
236
- export * from './navigation/tabs/types.js';
237
- export { default as Tabs } from './navigation/tabs/Tabs.svelte';
238
- export * from './navigation/drawer/types.js';
239
- export { default as Drawer } from './navigation/drawer/Drawer.svelte';
240
215
  export * from './base/titleBar/types.js';
241
216
  export { default as TitleBar } from './base/titleBar/TitleBar.svelte';
242
217
  export * from './base/paper/type.js';
243
218
  export { default as Paper } from './base/paper/Paper.svelte';
219
+ export * from './base/icon/types.js';
220
+ export { default as Icon } from './base/icon/Icon.svelte';
244
221
  export * from './base/divider/types.js';
245
222
  export { default as Divider } from './base/divider/Divider.svelte';
246
223
  export * from './base/demoer/types.js';
247
- export { default as DemoPage } from './base/demoer/DemoPage.svelte';
224
+ export * from './base/demoer/demoer.utils.js';
248
225
  export { default as DemoerComponent } from './base/demoer/DemoerComponent.svelte';
249
226
  export { default as DemoerCode } from './base/demoer/DemoerCode.svelte';
250
- export * from './base/demoer/demoer.utils.js';
251
227
  export { default as Demoer } from './base/demoer/Demoer.svelte';
252
- export * from './base/icon/types.js';
253
- export { default as Icon } from './base/icon/Icon.svelte';
228
+ export { default as DemoPage } from './base/demoer/DemoPage.svelte';
229
+ export { default as Debug } from './base/debug/Debug.svelte';
230
+ export * from './base/contentSwitcher/useContentSwitcher.js';
231
+ export * from './base/contentSwitcher/types.js';
232
+ export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
254
233
  export * from './base/columner/types.js';
255
234
  export { default as Columner } from './base/columner/Columner.svelte';
256
235
  export { default as Column } from './base/columner/Column.svelte';
@@ -258,12 +237,8 @@ export * from './base/chipper/types.js';
258
237
  export { default as Chipper } from './base/chipper/Chipper.svelte';
259
238
  export * from './base/cartouche/types.js';
260
239
  export { default as Cartouche } from './base/cartouche/Cartouche.svelte';
261
- export { default as Debug } from './base/debug/Debug.svelte';
262
240
  export * from './base/breadCrumb/types.js';
263
241
  export { default as BreadCrumb } from './base/breadCrumb/BreadCrumb.svelte';
264
- export * from './base/contentSwitcher/useContentSwitcher.js';
265
- export * from './base/contentSwitcher/types.js';
266
- export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
267
242
  export * from './base/box/types.js';
268
243
  export { default as Box } from './base/box/Box.svelte';
269
244
  export * from './base/badge/types.js';
@@ -271,13 +246,39 @@ export { default as Badge } from './base/badge/Badge.svelte';
271
246
  export * from './base/backdrop/useBackDrop.js';
272
247
  export * from './base/backdrop/types.js';
273
248
  export { default as Backdrop } from './base/backdrop/Backdrop.svelte';
274
- export * from './base/alert/types.js';
275
- export { default as Alert } from './base/alert/Alert.svelte';
276
249
  export * from './base/avatar/types.js';
277
250
  export { default as Avatar } from './base/avatar/Avatar.svelte';
251
+ export * from './base/alert/types.js';
252
+ export { default as Alert } from './base/alert/Alert.svelte';
253
+ export * from './controls/switch/types.js';
254
+ export { default as Switch } from './controls/switch/Switch.svelte';
255
+ export * from './controls/textfield/types.js';
256
+ export { default as TextField } from './controls/textfield/TextField.svelte';
257
+ export * from './controls/stepper/types.js';
258
+ export { default as Stepper } from './controls/stepper/Stepper.svelte';
259
+ export * from './controls/slider/types.js';
260
+ export { default as Slider } from './controls/slider/Slider.svelte';
261
+ export { default as Select } from './controls/select/Select.svelte';
262
+ export * from './controls/rating/types.js';
263
+ export { default as Rating } from './controls/rating/Rating.svelte';
264
+ export * from './controls/progress/types.js';
265
+ export { default as Progress } from './controls/progress/Progress.svelte';
266
+ export * from './controls/inplaceedit/types.js';
267
+ export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
268
+ export * from './controls/confirm/types.js';
269
+ export { default as Confirm } from './controls/confirm/Confirm.svelte';
270
+ export * from './controls/checkbox/types.js';
271
+ export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
272
+ export * from './controls/button/types.js';
273
+ export { default as IconButton } from './controls/button/IconButton.svelte';
274
+ export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
275
+ export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
276
+ export { default as Button } from './controls/button/Button.svelte';
277
+ export * from './controls/autocomplete/types.js';
278
+ export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
278
279
  export * from './utils/uses/sx4u/sx4uPreprocess.js';
279
280
  export * from './utils/uses/sx4u/sx4u.js';
280
281
  export * from './utils/uses/stickTo/stickTo.js';
281
282
  export * from './utils/uses/resizer/resizer.js';
282
- export * from './utils/uses/autofocus/autofocus.js';
283
283
  export * from './utils/uses/clickAway/clickAway.js';
284
+ export * from './utils/uses/autofocus/autofocus.js';