@humandialog/forms.svelte 0.4.44 → 0.5.1

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 (116) hide show
  1. package/components/Fab.svelte +60 -48
  2. package/components/Floating_container.svelte +5 -4
  3. package/components/Floating_container.svelte.d.ts +2 -2
  4. package/components/Grid.menu.svelte +13 -9
  5. package/components/Grid.menu.svelte.d.ts +2 -2
  6. package/components/button.svelte +4 -4
  7. package/components/checkbox.svelte +12 -10
  8. package/components/checkbox.svelte.d.ts +1 -0
  9. package/components/combo/combo.d.ts +1 -1
  10. package/components/combo/combo.js +1 -1
  11. package/components/combo/combo.source.svelte +2 -2
  12. package/components/combo/combo.source.svelte.d.ts +1 -1
  13. package/components/combo/combo.svelte +94 -62
  14. package/components/combo/combo.svelte.d.ts +7 -4
  15. package/components/contextmenu.svelte +20 -19
  16. package/components/contextmenu.svelte.d.ts +5 -5
  17. package/components/date.svelte +165 -25
  18. package/components/date.svelte.d.ts +3 -2
  19. package/components/delayed.spinner.svelte +2 -2
  20. package/components/document/internal/palette.row.svelte +3 -3
  21. package/components/document/internal/palette.svelte +2 -2
  22. package/components/document/internal/palette.svelte.d.ts +1 -1
  23. package/components/document/rich.edit.svelte +307 -35
  24. package/components/document/rich.edit.svelte.d.ts +9 -0
  25. package/components/edit.field.svelte +17 -15
  26. package/components/edit.field.svelte.d.ts +2 -1
  27. package/components/file.loader.svelte +6 -6
  28. package/components/file.loader.svelte.d.ts +10 -10
  29. package/components/icon.svelte +2 -2
  30. package/components/icon.svelte.d.ts +3 -3
  31. package/components/input.text.svelte +3 -3
  32. package/components/inputbox.ltop.svelte +19 -17
  33. package/components/inputbox.ltop.svelte.d.ts +4 -2
  34. package/components/kanban/Kanban.d.ts +23 -0
  35. package/components/kanban/Kanban.js +23 -0
  36. package/components/kanban/internal/kanban.card.svelte +158 -0
  37. package/components/kanban/internal/kanban.card.svelte.d.ts +35 -0
  38. package/components/kanban/internal/kanban.column.svelte +181 -0
  39. package/components/kanban/internal/kanban.column.svelte.d.ts +51 -0
  40. package/components/kanban/internal/kanban.inserter.svelte +24 -0
  41. package/components/kanban/internal/kanban.inserter.svelte.d.ts +18 -0
  42. package/components/kanban/internal/kanban.move.menu.svelte +146 -0
  43. package/components/kanban/internal/kanban.move.menu.svelte.d.ts +19 -0
  44. package/components/kanban/kanban.callbacks.svelte +15 -0
  45. package/components/kanban/kanban.callbacks.svelte.d.ts +21 -0
  46. package/components/kanban/kanban.column.svelte +20 -0
  47. package/components/kanban/kanban.column.svelte.d.ts +21 -0
  48. package/components/kanban/kanban.summary.svelte +5 -0
  49. package/components/kanban/kanban.summary.svelte.d.ts +16 -0
  50. package/components/kanban/kanban.svelte +156 -0
  51. package/components/kanban/kanban.svelte.d.ts +43 -0
  52. package/components/kanban/kanban.title.svelte +8 -0
  53. package/components/kanban/kanban.title.svelte.d.ts +17 -0
  54. package/components/list/List.d.ts +4 -2
  55. package/components/list/List.js +4 -2
  56. package/components/list/internal/list.element.props.svelte +134 -0
  57. package/components/list/internal/list.element.props.svelte.d.ts +21 -0
  58. package/components/list/internal/list.element.summary.svelte +40 -0
  59. package/components/list/internal/list.element.summary.svelte.d.ts +24 -0
  60. package/components/list/internal/list.element.svelte +100 -173
  61. package/components/list/internal/list.element.svelte.d.ts +4 -4
  62. package/components/list/internal/list.inserter.svelte +9 -6
  63. package/components/list/internal/list.inserter.svelte.d.ts +1 -1
  64. package/components/list/list.combo.svelte +2 -2
  65. package/components/list/list.combo.svelte.d.ts +1 -1
  66. package/components/list/list.date.svelte +3 -3
  67. package/components/list/list.date.svelte.d.ts +1 -1
  68. package/components/list/list.inserter.svelte +1 -1
  69. package/components/list/list.summary.svelte +2 -2
  70. package/components/list/list.summary.svelte.d.ts +1 -1
  71. package/components/list/list.svelte +175 -37
  72. package/components/list/list.svelte.d.ts +27 -10
  73. package/components/list/list.title.svelte +6 -2
  74. package/components/list/list.title.svelte.d.ts +3 -1
  75. package/components/menu.d.ts +4 -4
  76. package/components/menu.js +15 -13
  77. package/components/radio.svelte +12 -10
  78. package/components/radio.svelte.d.ts +1 -0
  79. package/components/sidebar/sidebar.group.svelte +1 -13
  80. package/components/sidebar/sidebar.group.svelte.d.ts +0 -4
  81. package/components/sidebar/sidebar.item.svelte +13 -13
  82. package/components/sidebar/sidebar.list.svelte +68 -0
  83. package/components/sidebar/sidebar.list.svelte.d.ts +33 -0
  84. package/components/sidebar/sidebar.svelte +1 -1
  85. package/components/simple.table.svelte +15 -15
  86. package/components/simple.table.svelte.d.ts +2 -2
  87. package/components/table/_template.table.svelte +17 -17
  88. package/components/table/_template.table.svelte.d.ts +2 -2
  89. package/components/table/table.svelte +31 -31
  90. package/components/table/table.svelte.d.ts +8 -8
  91. package/components/textarea.ltop.svelte +4 -4
  92. package/components/tile.title.svelte +6 -6
  93. package/desk.svelte +13 -13
  94. package/form.box.svelte +2 -2
  95. package/horizontal.toolbar.svelte +25 -16
  96. package/horizontal.toolbar.svelte.d.ts +2 -2
  97. package/index.d.ts +14 -5
  98. package/index.js +14 -5
  99. package/modal.svelte +17 -17
  100. package/modal.svelte.d.ts +4 -4
  101. package/operations.svelte +42 -27
  102. package/package.json +14 -1
  103. package/page.svelte +115 -124
  104. package/page.svelte.d.ts +4 -4
  105. package/stores.d.ts +9 -7
  106. package/stores.js +17 -9
  107. package/tenant.members.svelte +44 -44
  108. package/tenant.members.svelte.d.ts +10 -10
  109. package/tile.svelte +3 -3
  110. package/tiles.vertical.row.svelte +1 -1
  111. package/updates.d.ts +3 -3
  112. package/updates.js +35 -3
  113. package/utils.d.ts +22 -13
  114. package/utils.js +201 -51
  115. package/vertical.toolbar.svelte +22 -13
  116. package/vertical.toolbar.svelte.d.ts +2 -2
package/desk.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  tools_visible_store,
10
10
  bottom_bar_visible_store,
11
11
  auto_hide_sidebar,
12
- has_selected_item,
12
+ hasSelectedItem,
13
13
  dark_mode_store,
14
14
  data_tick_store,
15
15
  set_default_tools_visible,
@@ -17,7 +17,7 @@
17
17
  sidebar_left_pos } from './stores.js'
18
18
 
19
19
  import { AuthorizedView} from '@humandialog/auth.svelte'
20
- import { handle_select, is_device_smaller_than } from './utils'
20
+ import { handleSelect, isDeviceSmallerThan } from './utils'
21
21
  import { afterUpdate, onMount } from 'svelte';
22
22
 
23
23
  export let layout;
@@ -53,7 +53,7 @@
53
53
  const media_break_2xl = 1536; //px
54
54
  let test = "ala\n ma\n\tkota"
55
55
 
56
- $: is_small = is_device_smaller_than("sm")
56
+ $: is_small = isDeviceSmallerThan("sm")
57
57
 
58
58
  let main_side_panel_visibility = "hidden"
59
59
  let lg_content_area_horizontal_dim = ""
@@ -107,7 +107,7 @@
107
107
  bottom_bar_visible = $bottom_bar_visible_store
108
108
  let dts = $data_tick_store;
109
109
 
110
- if(!has_selected_item())
110
+ if(!hasSelectedItem())
111
111
  bottom_bar_visible = false;
112
112
 
113
113
  if(tools_visible)
@@ -158,16 +158,16 @@
158
158
  <AuthorizedView>
159
159
  <!-- svelte-ignore a11y-click-events-have-key-events -->
160
160
  <div id="__hd_svelte_layout_root" class="{$dark_mode_store}"
161
- on:click={handle_select}
162
- on:contextmenu={handle_select}>
161
+ on:click={handleSelect}
162
+ on:contextmenu={handleSelect}>
163
163
 
164
- <div class="bg-white dark:bg-gray-900 dark:text-white min-h-screen h-screen">
164
+ <div class="bg-white dark:bg-stone-900 dark:text-white min-h-screen h-screen">
165
165
  <!--###########################################################-->
166
166
  <!--## HORIZONTAL TOOLBAR (FOR PHONES) ######################-->
167
167
  <!--###########################################################-->
168
- <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20 overflow-auto shadow shadow-slate-900/5 dark:shadow-none" >
169
- <div class=" flex flex-row justify-between h-full bg-slate-900 text-gray-100 ">
170
- <HorizontalToolbar app_config={layout}/>
168
+ <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20 overflow-auto shadow shadow-stone-900/5 dark:shadow-none" >
169
+ <div class=" flex flex-row justify-between h-full bg-stone-950 text-stone-100 ">
170
+ <HorizontalToolbar appConfig={layout}/>
171
171
  <div>
172
172
  </header>
173
173
 
@@ -177,8 +177,8 @@
177
177
  <!--## VERTICAL TOOLBAR ##################-->
178
178
  <!--#######################################################-->
179
179
  <div class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0 overflow-hidden">
180
- <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
181
- <VerticalToolbar app_config={layout}/>
180
+ <div class="sticky top-0 flex h-full w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
181
+ <VerticalToolbar appConfig={layout}/>
182
182
  </div>
183
183
  </div>
184
184
 
@@ -198,7 +198,7 @@
198
198
  {sidebar_small_width} sm:w-[320px]
199
199
  z-20 overflow-x-hidden">
200
200
 
201
- <div class=" bg-slate-50 w-full h-full dark:bg-slate-800 overflow-y-auto py-0 px-0">
201
+ <div class=" bg-stone-50 w-full h-full dark:bg-stone-800 overflow-y-auto py-0 px-0">
202
202
  <Configurable config={layout.sidebar[visible_sidebar]}>
203
203
  <div slot='alt'></div>
204
204
  </Configurable>
package/form.box.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { writable } from 'svelte/store';
3
- import {data_tick_store, context_items_store} from './stores.js'
3
+ import {data_tick_store, contextItemsStore} from './stores.js'
4
4
  import { setContext } from 'svelte';
5
5
 
6
6
  export let context = ""
@@ -14,7 +14,7 @@
14
14
  {
15
15
  setContext('ctx', context)
16
16
  if(self != null)
17
- context_items_store[context] = self
17
+ contextItemsStore[context] = self
18
18
  }
19
19
 
20
20
  let in_tile_flex_behaviour = fit ? "flex-1" : "flex-none"
@@ -10,7 +10,7 @@
10
10
  import FaBars from 'svelte-icons/fa/FaBars.svelte'
11
11
  import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
12
12
  import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
13
- import {show_menu} from './components/menu'
13
+ import {showMenu} from './components/menu'
14
14
  import {push} from 'svelte-spa-router'
15
15
  //import Menu from './components/contextmenu.svelte'
16
16
 
@@ -37,7 +37,7 @@
37
37
  import VerticalToolbar from './vertical.toolbar.svelte'
38
38
 
39
39
 
40
- export let app_config;
40
+ export let appConfig;
41
41
 
42
42
  let config = null;
43
43
  let has_selection_details = false;
@@ -52,19 +52,19 @@
52
52
 
53
53
  $:
54
54
  {
55
- config = app_config.mainToolbar;
56
- has_selection_details = app_config.selectionDetails;
55
+ config = appConfig.mainToolbar;
56
+ has_selection_details = appConfig.selectionDetails;
57
57
  is_logged_in = $session.is_active;
58
58
  show_sign_in_out_icons = config.signin ? true : false;
59
59
  sign_in_href = $signin_href;
60
60
  sign_out_href = $signout_href;
61
61
 
62
- tabs = Object.keys(app_config.sidebar);
62
+ tabs = Object.keys(appConfig.sidebar);
63
63
  if(tabs.length > 1)
64
64
  icon = FaBars;
65
65
  else
66
66
  {
67
- let first_tab = app_config.sidebar[tabs[0]];
67
+ let first_tab = appConfig.sidebar[tabs[0]];
68
68
  icon = first_tab.icon;
69
69
  }
70
70
  }
@@ -96,7 +96,7 @@
96
96
  if(sidebar == "*")
97
97
  {
98
98
  if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
99
- sidebar = Object.keys(app_config.sidebar)[0];
99
+ sidebar = Object.keys(appConfig.sidebar)[0];
100
100
  else
101
101
  sidebar = previously_visible_sidebar;
102
102
  }
@@ -191,26 +191,26 @@
191
191
  }
192
192
 
193
193
  let pt = new DOMPoint(rect.left, rect.bottom)
194
- show_menu(pt, options);
194
+ showMenu(pt, options);
195
195
  }
196
196
 
197
197
  </script>
198
198
 
199
- <div class="flex flex-row w-full">
199
+ <div class="print flex flex-row w-full">
200
200
  <div class="flex-none left-0 flex h-12 sm:h-10">
201
- <button class="w-12 sm:w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
201
+ <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={toggle_navigator}>
202
202
  <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
203
203
  </button>
204
204
  </div>
205
205
 
206
206
  <div class="grow">
207
207
 
208
- <div class="block sm:hidden mt-3 uppercase text-sm text-center">{@html title}</div>
208
+ <div class="block sm:hidden mt-4 sm:mt-3 uppercase text-sm text-center">{@html title}</div>
209
209
  </div>
210
210
 
211
211
  <div class="flex-none ml-auto flex h-12 sm:h-10">
212
212
  <button
213
- class="h-full w-12 sm:w-10 px-0 flex justify-center items-center text-slate-300 hover:text-slate-100"
213
+ class="h-full w-12 sm:w-10 px-0 flex justify-center items-center text-stone-300 hover:text-stone-100"
214
214
  on:click={show_options}>
215
215
 
216
216
  <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
@@ -220,11 +220,20 @@
220
220
  </div>
221
221
 
222
222
  {#if tabs.length > 1 && $main_sidebar_visible_store != "*"}
223
- <div class="flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0 overflow-hidden">
224
- <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
225
- <VerticalToolbar {app_config} mobile={true}/>
223
+ <div class="print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0 overflow-hidden">
224
+ <div class="sticky top-0 flex h-full w-10 bg-stone-900 flex-col items-center text-stone-100 shadow">
225
+ <VerticalToolbar {appConfig} mobile={true}/>
226
226
  </div>
227
227
  </div>
228
228
  {/if}
229
229
 
230
- <!--Menu bind:this={menu}/-->
230
+ <!--Menu bind:this={menu}/-->
231
+
232
+ <style>
233
+ @media print
234
+ {
235
+ .no-print, .no-print *{
236
+ display: none !important;
237
+ }
238
+ }
239
+ </style>
@@ -2,7 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} HorizontalEvents */
3
3
  /** @typedef {typeof __propDef.slots} HorizontalSlots */
4
4
  export default class Horizontal extends SvelteComponentTyped<{
5
- app_config: any;
5
+ appConfig: any;
6
6
  }, {
7
7
  [evt: string]: CustomEvent<any>;
8
8
  }, {}> {
@@ -13,7 +13,7 @@ export type HorizontalSlots = typeof __propDef.slots;
13
13
  import { SvelteComponentTyped } from "svelte";
14
14
  declare const __propDef: {
15
15
  props: {
16
- app_config: any;
16
+ appConfig: any;
17
17
  };
18
18
  events: {
19
19
  [evt: string]: CustomEvent<any>;
package/index.d.ts CHANGED
@@ -22,12 +22,13 @@ export { default as ComboSource } from './components/combo/combo.source.svelte';
22
22
  export { default as ComboItem } from './components/combo/combo.item.svelte';
23
23
  export { default as RichEdit } from './components/document/rich.edit.svelte';
24
24
  export { default as Spinner } from './components/delayed.spinner.svelte';
25
- export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
25
+ export { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';
26
26
  export { default as Fab } from './components/Fab.svelte';
27
27
  export { default as Sidebar } from './components/sidebar/sidebar.svelte';
28
28
  export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
29
29
  export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
30
30
  export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
31
+ export { default as SidebarList } from './components/sidebar/sidebar.list.svelte';
31
32
  export { default as List } from './components/list/list.svelte';
32
33
  export { default as ListTitle } from './components/list/list.title.svelte';
33
34
  export { default as ListSummary } from './components/list/list.summary.svelte';
@@ -37,7 +38,15 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
37
38
  export { default as ListStaticProperty } from './components/list/list.static.svelte';
38
39
  export { default as Modal } from './modal.svelte';
39
40
  export { default as MembersPage } from './tenant.members.svelte';
40
- export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
41
- export { data_tick_store, has_selected_item, has_data_item, set_navigator_title } from "./stores";
42
- export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores';
43
- export { inform_modification, inform_item, push_changes } from './updates';
41
+ export { default as Kanban } from './components/kanban/kanban.svelte';
42
+ export { default as KanbanColumn } from './components/kanban/kanban.column.svelte';
43
+ export { default as KanbanTitle } from './components/kanban/kanban.title.svelte';
44
+ export { default as KanbanSummary } from './components/kanban/kanban.summary.svelte';
45
+ export { default as KanbanCallckacks } from './components/kanban/kanban.callbacks.svelte';
46
+ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
47
+ export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect } from './utils';
48
+ export { mainViewReloader, reloadMainView } from './stores.js';
49
+ export { data_tick_store, // tmp
50
+ hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
51
+ export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
52
+ export { informModification, informItem, pushChanges } from './updates';
package/index.js CHANGED
@@ -28,12 +28,13 @@ export { default as ComboItem } from './components/combo/combo.item.svelte';
28
28
  export { default as RichEdit } from './components/document/rich.edit.svelte';
29
29
  export { default as Spinner } from './components/delayed.spinner.svelte';
30
30
  //export { default as Menu } from './components/contextmenu.svelte'
31
- export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
31
+ export { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';
32
32
  export { default as Fab } from './components/Fab.svelte';
33
33
  export { default as Sidebar } from './components/sidebar/sidebar.svelte';
34
34
  export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
35
35
  export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
36
36
  export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
37
+ export { default as SidebarList } from './components/sidebar/sidebar.list.svelte';
37
38
  export { default as List } from './components/list/list.svelte';
38
39
  export { default as ListTitle } from './components/list/list.title.svelte';
39
40
  export { default as ListSummary } from './components/list/list.summary.svelte';
@@ -43,7 +44,15 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
43
44
  export { default as ListStaticProperty } from './components/list/list.static.svelte';
44
45
  export { default as Modal } from './modal.svelte';
45
46
  export { default as MembersPage } from './tenant.members.svelte';
46
- export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
47
- export { data_tick_store, has_selected_item, has_data_item, set_navigator_title } from "./stores";
48
- export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores'; // tmp
49
- export { inform_modification, inform_item, push_changes } from './updates'; // tmp
47
+ export { default as Kanban } from './components/kanban/kanban.svelte';
48
+ export { default as KanbanColumn } from './components/kanban/kanban.column.svelte';
49
+ export { default as KanbanTitle } from './components/kanban/kanban.title.svelte';
50
+ export { default as KanbanSummary } from './components/kanban/kanban.summary.svelte';
51
+ export { default as KanbanCallckacks } from './components/kanban/kanban.callbacks.svelte';
52
+ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
53
+ export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect } from './utils';
54
+ export { mainViewReloader, reloadMainView } from './stores.js';
55
+ export { data_tick_store, // tmp
56
+ hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
57
+ export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
58
+ export { informModification, informItem, pushChanges } from './updates'; // tmp
package/modal.svelte CHANGED
@@ -8,10 +8,10 @@ export const OK = 0;
8
8
  export const OKCancel = 1;
9
9
  export const Custom = 2;
10
10
  export let mode = OKCancel;
11
- export let ok_caption = "OK";
12
- export let cancel_caption = "Cancel";
13
- export let on_ok_callback = void 0;
14
- export let on_cancel_callback = void 0;
11
+ export let okCaption = "OK";
12
+ export let cancelCaption = "Cancel";
13
+ export let onOkCallback = void 0;
14
+ export let onCancelCallback = void 0;
15
15
  export function show(on_close_callback = void 0) {
16
16
  open = true;
17
17
  close_callback = on_close_callback;
@@ -30,15 +30,15 @@ afterUpdate(
30
30
  );
31
31
  let close_callback = void 0;
32
32
  function on_ok(event) {
33
- if (on_ok_callback)
34
- on_ok_callback();
33
+ if (onOkCallback)
34
+ onOkCallback();
35
35
  if (close_callback)
36
36
  close_callback("OK");
37
37
  }
38
38
  function on_cancel(event) {
39
39
  open = false;
40
- if (on_cancel_callback)
41
- on_cancel_callback();
40
+ if (onCancelCallback)
41
+ onCancelCallback();
42
42
  if (close_callback)
43
43
  close_callback("Cancel");
44
44
  }
@@ -56,7 +56,7 @@ function on_cancel(event) {
56
56
  From: "opacity-100"
57
57
  To: "opacity-0"
58
58
  -->
59
- <div class="fixed w-screen h-screen inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
59
+ <div class="fixed w-screen h-screen inset-0 bg-stone-500 bg-opacity-75 transition-opacity"></div>
60
60
 
61
61
  <div class="fixed z-20 inset-0 w-screen overflow-y-auto">
62
62
  <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -76,14 +76,14 @@ function on_cancel(event) {
76
76
  <div class="sm:flex sm:items-start">
77
77
  <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
78
78
  {#if icon}
79
- <Icon component={icon} size={6} class="text-gray-700"/>
79
+ <Icon component={icon} size={6} class="text-stone-700"/>
80
80
  {/if}
81
81
  </div>
82
82
  <div class="grow mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
83
- <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">{title}</h3>
83
+ <h3 class="text-base font-semibold leading-6 text-stone-900" id="modal-title">{title}</h3>
84
84
  <div class="mt-2">
85
85
  {#if content}
86
- <p class="text-sm text-gray-500">{content}</p>
86
+ <p class="text-sm text-stone-500">{content}</p>
87
87
  {:else}
88
88
  <slot/>
89
89
  {/if}
@@ -91,18 +91,18 @@ function on_cancel(event) {
91
91
  </div>
92
92
  </div>
93
93
  </div>
94
- <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
94
+ <div class="bg-stone-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
95
95
  {#if mode == OK}
96
96
  <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
97
97
  on:click={on_ok}>
98
- {ok_caption}</button>
98
+ {okCaption}</button>
99
99
  {:else if mode == OKCancel}
100
100
  <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
101
101
  on:click={on_ok}>
102
- {ok_caption}</button>
103
- <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
102
+ {okCaption}</button>
103
+ <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 hover:bg-stone-50 sm:mt-0 sm:w-auto"
104
104
  on:click={on_cancel}>
105
- {cancel_caption}</button>
105
+ {cancelCaption}</button>
106
106
  {:else if mode == Custom}
107
107
  <slot name="footer"/>
108
108
  {/if}
package/modal.svelte.d.ts CHANGED
@@ -9,10 +9,10 @@ declare const __propDef: {
9
9
  OKCancel?: 1 | undefined;
10
10
  Custom?: 2 | undefined;
11
11
  mode?: number | undefined;
12
- ok_caption?: string | undefined;
13
- cancel_caption?: string | undefined;
14
- on_ok_callback?: Function | undefined;
15
- on_cancel_callback?: Function | undefined;
12
+ okCaption?: string | undefined;
13
+ cancelCaption?: string | undefined;
14
+ onOkCallback?: Function | undefined;
15
+ onCancelCallback?: Function | undefined;
16
16
  show?: ((on_close_callback?: Function | undefined) => void) | undefined;
17
17
  };
18
18
  events: {
package/operations.svelte CHANGED
@@ -1,22 +1,22 @@
1
- <script>import { show_floating_toolbar, show_menu, show_grid_menu } from "./components/menu.js";
2
- import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
1
+ <script>import { showFloatingToolbar, showMenu, showGridMenu } from "./components/menu.js";
2
+ import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "./stores.js";
3
3
  export let mobile = false;
4
4
  $:
5
- update($page_toolbar_operations, $context_toolbar_operations);
5
+ update($pageToolbarOperations, $contextToolbarOperations);
6
6
  let operations = [];
7
7
  function update(...args) {
8
- if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
9
- operations = $context_toolbar_operations;
8
+ if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
9
+ operations = $contextToolbarOperations;
10
10
  else
11
- operations = $page_toolbar_operations;
11
+ operations = $pageToolbarOperations;
12
12
  }
13
13
  function on_click(e, operation) {
14
14
  if (!operation)
15
15
  return;
16
16
  if (operation.action) {
17
17
  let focused_item = null;
18
- if ($context_items_store.focused)
19
- focused_item = $context_items_store[$context_items_store.focused];
18
+ if ($contextItemsStore.focused)
19
+ focused_item = $contextItemsStore[$contextItemsStore.focused];
20
20
  operation.action(focused_item);
21
21
  return;
22
22
  }
@@ -27,32 +27,47 @@ function on_click(e, operation) {
27
27
  return;
28
28
  let rect = owner.getBoundingClientRect();
29
29
  if (operation.menu)
30
- show_menu(rect, operation.menu);
30
+ showMenu(rect, operation.menu);
31
31
  else if (operation.toolbar)
32
- show_floating_toolbar(rect, operation.toolbar);
32
+ showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
33
33
  else if (operation.grid)
34
- show_grid_menu(rect, operation.grid);
34
+ showGridMenu(rect, operation.grid);
35
+ }
36
+ function mousedown(e) {
37
+ e.preventDefault();
35
38
  }
36
39
  </script>
37
40
 
38
- <div class="bg-slate-100 w-full h-10 dark:bg-slate-800 overflow-x-clip overflow-y-hidden py-0 text-xs flex flex-row"
41
+ <div class="no-print w-full h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs flex flex-row"
39
42
  class:flex-row-reverse={mobile}>
40
43
 
41
44
  {#each operations as operation}
42
- <button type="button"
43
- class="py-2.5 px-5
44
- text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
45
- bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
46
- border-gray-200 focus:outline-none dark:border-gray-600
47
- inline-flex items-center"
48
- class:border-r={!mobile}
49
- class:border-l={mobile}
50
- on:click={(e) => {on_click(e, operation)}}>
51
- <div class="w-3 h-3"><svelte:component this={operation.icon}/></div>
52
- <span class="ml-1">{operation.caption}</span>
53
- </button>
54
- {/each}
45
+ {#if !operation.separator}
55
46
 
56
-
47
+ <button type="button"
48
+ class="py-2.5 px-5
49
+ text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white
50
+ hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
51
+ border-stone-200 focus:outline-none dark:border-stone-600
52
+ inline-flex items-center"
53
+ on:click={(e) => {on_click(e, operation)}}
54
+ on:mousedown={mousedown}>
55
+ {#if operation.icon}
56
+ <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
57
+ {/if}
58
+ {#if operation.caption}
59
+ <span>{operation.caption}</span>
60
+ {/if}
61
+ </button>
62
+ {/if}
63
+ {/each}
64
+ </div>
57
65
 
58
- </div>
66
+ <style>
67
+ @media print
68
+ {
69
+ .no-print, .no-print *{
70
+ display: none !important;
71
+ }
72
+ }
73
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "0.4.44",
3
+ "version": "0.5.1",
4
4
  "description": "Basic Svelte UI components for Object Reef applications",
5
5
  "devDependencies": {
6
6
  "@playwright/test": "^1.28.1",
@@ -74,7 +74,19 @@
74
74
  "./components/icon.svelte": "./components/icon.svelte",
75
75
  "./components/input.text.svelte": "./components/input.text.svelte",
76
76
  "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
77
+ "./components/kanban/Kanban": "./components/kanban/Kanban.js",
78
+ "./components/kanban/internal/kanban.card.svelte": "./components/kanban/internal/kanban.card.svelte",
79
+ "./components/kanban/internal/kanban.column.svelte": "./components/kanban/internal/kanban.column.svelte",
80
+ "./components/kanban/internal/kanban.inserter.svelte": "./components/kanban/internal/kanban.inserter.svelte",
81
+ "./components/kanban/internal/kanban.move.menu.svelte": "./components/kanban/internal/kanban.move.menu.svelte",
82
+ "./components/kanban/kanban.callbacks.svelte": "./components/kanban/kanban.callbacks.svelte",
83
+ "./components/kanban/kanban.column.svelte": "./components/kanban/kanban.column.svelte",
84
+ "./components/kanban/kanban.summary.svelte": "./components/kanban/kanban.summary.svelte",
85
+ "./components/kanban/kanban.svelte": "./components/kanban/kanban.svelte",
86
+ "./components/kanban/kanban.title.svelte": "./components/kanban/kanban.title.svelte",
77
87
  "./components/list/List": "./components/list/List.js",
88
+ "./components/list/internal/list.element.props.svelte": "./components/list/internal/list.element.props.svelte",
89
+ "./components/list/internal/list.element.summary.svelte": "./components/list/internal/list.element.summary.svelte",
78
90
  "./components/list/internal/list.element.svelte": "./components/list/internal/list.element.svelte",
79
91
  "./components/list/internal/list.inserter.svelte": "./components/list/internal/list.inserter.svelte",
80
92
  "./components/list/list.combo.svelte": "./components/list/list.combo.svelte",
@@ -89,6 +101,7 @@
89
101
  "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
90
102
  "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",
91
103
  "./components/sidebar/sidebar.item.svelte": "./components/sidebar/sidebar.item.svelte",
104
+ "./components/sidebar/sidebar.list.svelte": "./components/sidebar/sidebar.list.svelte",
92
105
  "./components/sidebar/sidebar.svelte": "./components/sidebar/sidebar.svelte",
93
106
  "./components/simple.table.svelte": "./components/simple.table.svelte",
94
107
  "./components/table/column.svelte": "./components/table/column.svelte",