@medyll/idae-slotui-svelte 0.120.0 → 0.122.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 +46 -47
  119. package/dist/index.js +46 -47
  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 +288 -288
  128. package/dist/slotui-css/slotui-min-css.css +288 -288
  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
@@ -1,4 +1,5 @@
1
1
  export * from './componentCite.js';
2
+ export * from './csss/csss.js';
2
3
  export * as windowMinCss from './slotui-css/window.min.css';
3
4
  export * as windowCss from './slotui-css/window.css';
4
5
  export * as treeMinCss from './slotui-css/tree.min.css';
@@ -107,7 +108,6 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
107
108
  export * as autoCompleteCss from './slotui-css/auto-complete.css';
108
109
  export * as alertMinCss from './slotui-css/alert.min.css';
109
110
  export * as alertCss from './slotui-css/alert.css';
110
- export * from './csss/csss.js';
111
111
  export * from './utils/uses/toggler.js';
112
112
  export * from './utils/uses/positioner.js';
113
113
  export * from './utils/uses/navigation.js';
@@ -117,9 +117,6 @@ 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';
123
120
  export * from './utils/engine/wactions.utils.js';
124
121
  export * from './utils/engine/utils.js';
125
122
  export * from './utils/engine/stator.js';
@@ -127,72 +124,70 @@ export * from './utils/engine/site.utils.js';
127
124
  export * from './utils/engine/presets.js';
128
125
  export * from './utils/engine/engine.js';
129
126
  export * from './utils/engine/elem.js';
130
- export * from './utils/effects/transitions.js';
131
127
  export { default as Css } from './utils/css/Css.svelte';
128
+ 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';
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';
135
136
  export * from './ui/window/types.js';
136
137
  export * from './ui/window/store.js';
137
138
  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/toolBar/types.js';
143
- export { default as ToolBar } from './ui/toolBar/ToolBar.svelte';
144
142
  export * from './ui/toggleBar/types.js';
145
143
  export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
144
+ export * from './ui/toolBar/types.js';
145
+ 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';
146
151
  export * from './ui/toast/types.js';
147
- export * from './ui/toast/store.js';
148
152
  export { default as Toaster } from './ui/toast/Toaster.svelte';
149
153
  export { default as Toast } from './ui/toast/Toast.svelte';
154
+ export * from './ui/toast/store.js';
150
155
  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';
158
157
  export * from './ui/popper/usePopper.js';
159
158
  export * from './ui/popper/types.js';
160
- export * from './ui/popper/actions.js';
161
159
  export { default as Popper } from './ui/popper/Popper.svelte';
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';
162
167
  export * from './ui/panel/types.js';
163
- export { default as Paneler } from './ui/panel/Paneler.svelte';
164
168
  export { default as PanelSlide } from './ui/panel/PanelSlide.svelte';
165
169
  export { default as PanelGrid } from './ui/panel/PanelGrid.svelte';
170
+ export { default as Paneler } from './ui/panel/Paneler.svelte';
166
171
  export { default as Panel } from './ui/panel/Panel.svelte';
167
172
  export * from './ui/menuList/types.js';
168
173
  export { default as MenuListTitle } from './ui/menuList/MenuListTitle.svelte';
169
174
  export { default as MenuListItem } from './ui/menuList/MenuListItem.svelte';
170
175
  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';
177
176
  export * from './ui/login/types.js';
178
177
  export * from './ui/login/store.js';
179
178
  export { default as Login } from './ui/login/Login.svelte';
180
179
  export * from './ui/frame/types.js';
181
180
  export { default as Frame } from './ui/frame/Frame.svelte';
182
181
  export * from './ui/chromeFrame/types.js';
183
- export * from './ui/chromeFrame/chromeFrame.utils.js';
184
- export * from './ui/chromeFrame/chromeFrame.store.js';
185
182
  export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.svelte';
186
183
  export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
184
+ export * from './ui/chromeFrame/chromeFrame.utils.js';
187
185
  export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
186
+ export * from './ui/chromeFrame/chromeFrame.store.js';
188
187
  export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
189
188
  export * from './styles/slotuisheet/utils.js';
190
189
  export * from './styles/slotuisheet/types.js';
191
190
  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';
196
191
  export * from './data/sorter/types.js';
197
192
  export { default as Sorterer } from './data/sorter/Sorterer.svelte';
198
193
  export { default as Sorter } from './data/sorter/Sorter.svelte';
@@ -203,8 +198,6 @@ export { default as ListItem } from './data/list/ListItem.svelte';
203
198
  export { default as List } from './data/list/List.svelte';
204
199
  export * from './data/jsoner/types.js';
205
200
  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';
208
201
  export * from './data/finder/types.js';
209
202
  export { default as Finder } from './data/finder/Finder.svelte';
210
203
  export * from './data/dataList/types.js';
@@ -212,25 +205,27 @@ export { default as DataListRow } from './data/dataList/DataListRow.svelte';
212
205
  export { default as DataListHead } from './data/dataList/DataListHead.svelte';
213
206
  export { default as DataListCell } from './data/dataList/DataListCell.svelte';
214
207
  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';
215
210
  export * from './controls/textfield/types.js';
216
211
  export { default as TextField } from './controls/textfield/TextField.svelte';
217
- export * from './controls/switch/types.js';
218
- export { default as Switch } from './controls/switch/Switch.svelte';
219
212
  export * from './controls/stepper/types.js';
220
213
  export { default as Stepper } from './controls/stepper/Stepper.svelte';
221
214
  export * from './controls/slider/types.js';
222
215
  export { default as Slider } from './controls/slider/Slider.svelte';
223
- export { default as Select } from './controls/select/Select.svelte';
224
- export * from './controls/rating/types.js';
225
- export { default as Rating } from './controls/rating/Rating.svelte';
226
216
  export * from './controls/progress/types.js';
227
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';
228
220
  export * from './controls/inplaceedit/types.js';
229
221
  export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
230
222
  export * from './controls/confirm/types.js';
231
223
  export { default as Confirm } from './controls/confirm/Confirm.svelte';
224
+ export { default as Select } from './controls/select/Select.svelte';
232
225
  export * from './controls/checkbox/types.js';
233
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';
234
229
  export * from './controls/button/types.js';
235
230
  export { default as IconButton } from './controls/button/IconButton.svelte';
236
231
  export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
@@ -238,24 +233,24 @@ export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
238
233
  export { default as Button } from './controls/button/Button.svelte';
239
234
  export * from './controls/autocomplete/types.js';
240
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';
241
240
  export * from './base/titleBar/types.js';
242
241
  export { default as TitleBar } from './base/titleBar/TitleBar.svelte';
243
242
  export * from './base/paper/type.js';
244
243
  export { default as Paper } from './base/paper/Paper.svelte';
245
- export * from './base/icon/types.js';
246
- export { default as Icon } from './base/icon/Icon.svelte';
247
244
  export * from './base/divider/types.js';
248
245
  export { default as Divider } from './base/divider/Divider.svelte';
249
246
  export * from './base/demoer/types.js';
250
- export * from './base/demoer/demoer.utils.js';
247
+ export { default as DemoPage } from './base/demoer/DemoPage.svelte';
251
248
  export { default as DemoerComponent } from './base/demoer/DemoerComponent.svelte';
252
249
  export { default as DemoerCode } from './base/demoer/DemoerCode.svelte';
250
+ export * from './base/demoer/demoer.utils.js';
253
251
  export { default as Demoer } from './base/demoer/Demoer.svelte';
254
- export { default as DemoPage } from './base/demoer/DemoPage.svelte';
255
- export { default as Debug } from './base/debug/Debug.svelte';
256
- export * from './base/contentSwitcher/useContentSwitcher.js';
257
- export * from './base/contentSwitcher/types.js';
258
- export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
252
+ export * from './base/icon/types.js';
253
+ export { default as Icon } from './base/icon/Icon.svelte';
259
254
  export * from './base/columner/types.js';
260
255
  export { default as Columner } from './base/columner/Columner.svelte';
261
256
  export { default as Column } from './base/columner/Column.svelte';
@@ -263,8 +258,12 @@ export * from './base/chipper/types.js';
263
258
  export { default as Chipper } from './base/chipper/Chipper.svelte';
264
259
  export * from './base/cartouche/types.js';
265
260
  export { default as Cartouche } from './base/cartouche/Cartouche.svelte';
261
+ export { default as Debug } from './base/debug/Debug.svelte';
266
262
  export * from './base/breadCrumb/types.js';
267
263
  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';
268
267
  export * from './base/box/types.js';
269
268
  export { default as Box } from './base/box/Box.svelte';
270
269
  export * from './base/badge/types.js';
@@ -272,13 +271,13 @@ export { default as Badge } from './base/badge/Badge.svelte';
272
271
  export * from './base/backdrop/useBackDrop.js';
273
272
  export * from './base/backdrop/types.js';
274
273
  export { default as Backdrop } from './base/backdrop/Backdrop.svelte';
275
- export * from './base/avatar/types.js';
276
- export { default as Avatar } from './base/avatar/Avatar.svelte';
277
274
  export * from './base/alert/types.js';
278
275
  export { default as Alert } from './base/alert/Alert.svelte';
276
+ export * from './base/avatar/types.js';
277
+ export { default as Avatar } from './base/avatar/Avatar.svelte';
279
278
  export * from './utils/uses/sx4u/sx4uPreprocess.js';
280
279
  export * from './utils/uses/sx4u/sx4u.js';
281
280
  export * from './utils/uses/stickTo/stickTo.js';
282
281
  export * from './utils/uses/resizer/resizer.js';
283
- export * from './utils/uses/clickAway/clickAway.js';
284
282
  export * from './utils/uses/autofocus/autofocus.js';
283
+ export * from './utils/uses/clickAway/clickAway.js';