@humandialog/forms.svelte 1.2.5 → 1.3.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 (24) hide show
  1. package/components/Fab.svelte +8 -1
  2. package/components/Fab.svelte.d.ts +4 -1
  3. package/components/contextmenu.svelte +3 -11
  4. package/components/document/editor.svelte +166 -99
  5. package/components/document/internal/Document_command.d.ts +2 -0
  6. package/components/document/internal/Document_command.js +2 -0
  7. package/components/document/internal/palette.row.svelte +25 -3
  8. package/components/document/internal/palette.row.svelte.d.ts +9 -0
  9. package/components/document/internal/palette.svelte +104 -44
  10. package/components/inputbox.ltop.svelte.d.ts +6 -6
  11. package/components/simple.table.svelte.d.ts +2 -2
  12. package/components/table/_template.table.svelte.d.ts +2 -2
  13. package/components/tile.title.svelte.d.ts +2 -2
  14. package/desk.svelte +65 -13
  15. package/index.d.ts +1 -1
  16. package/index.js +1 -1
  17. package/modal.svelte +2 -0
  18. package/operations.svelte +27 -12
  19. package/package.json +3 -1
  20. package/page.svelte.d.ts +2 -2
  21. package/tenant.members.svelte +17 -5
  22. package/updates.js +9 -13
  23. package/utils.d.ts +7 -0
  24. package/utils.js +104 -3
package/components/document/internal/palette.svelte CHANGED
@@ -27,7 +27,7 @@ export function showAsToolbox(rect) {
27
27
  toolboxX = margin;
28
28
  toolboxY = rect.bottom + margin;
29
29
  toolboxY += window.scrollY;
30
- css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
30
+ css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
31
31
  dispatch("palette_shown");
32
32
  }
33
33
  let paletteElement;
@@ -84,14 +84,16 @@ export function filter(key) {
84
84
  let was_any_items_before = filtered_commands.length > 0;
85
85
  filtered_commands = [];
86
86
  commands.forEach((cmd) => {
87
- if (cmd.caption.toLowerCase().includes(key.toLowerCase()))
87
+ if (cmd.separator)
88
+ filtered_commands.push(cmd);
89
+ else if (cmd.caption.toLowerCase().includes(key.toLowerCase()))
88
90
  filtered_commands.push(cmd);
89
91
  else if (cmd.tags && cmd.tags.toLowerCase().includes(key.toLowerCase()))
90
92
  filtered_commands.push(cmd);
91
93
  });
92
94
  if (!current_command || filtered_commands.every((v) => v != current_command)) {
93
95
  if (filtered_commands.length)
94
- current_command = filtered_commands[0];
96
+ current_command = get_operation_or_next_valid(0);
95
97
  else
96
98
  current_command = null;
97
99
  }
@@ -102,25 +104,59 @@ export function filter(key) {
102
104
  export function get_filtered_commands() {
103
105
  return filtered_commands;
104
106
  }
107
+ function get_operation_or_next_valid(idx) {
108
+ let op = filtered_commands[idx];
109
+ while (op.separator && idx < filtered_commands.length - 1) {
110
+ idx++;
111
+ op = filtered_commands[idx];
112
+ }
113
+ if (op.separator)
114
+ return null;
115
+ else
116
+ return op;
117
+ }
118
+ function get_operation_or_prev_valid(idx) {
119
+ let op = filtered_commands[idx];
120
+ while (op.separator && idx > 0) {
121
+ idx--;
122
+ op = filtered_commands[idx];
123
+ }
124
+ if (op.separator)
125
+ return null;
126
+ else
127
+ return op;
128
+ }
105
129
  export function navigate_up() {
106
130
  if (!current_command) {
107
- if (filtered_commands.length > 0)
108
- update_current_command(filtered_commands[filtered_commands.length - 1]);
131
+ if (filtered_commands.length > 0) {
132
+ let op = get_operation_or_prev_valid(filtered_commands.length - 1);
133
+ if (op)
134
+ update_current_command(op);
135
+ }
109
136
  return;
110
137
  }
111
138
  let idx = filtered_commands.findIndex((c) => c == current_command);
112
- if (idx > 0)
113
- update_current_command(filtered_commands[idx - 1]);
139
+ if (idx > 0) {
140
+ let op = get_operation_or_prev_valid(idx - 1);
141
+ if (op)
142
+ update_current_command(op);
143
+ }
114
144
  }
115
145
  export function navigate_down() {
116
146
  if (!current_command) {
117
- if (filtered_commands.length > 0)
118
- update_current_command(filtered_commands[0]);
147
+ if (filtered_commands.length > 0) {
148
+ let op = get_operation_or_next_valid(0);
149
+ if (op)
150
+ update_current_command(op);
151
+ }
119
152
  return;
120
153
  }
121
154
  let idx = filtered_commands.findIndex((c) => c == current_command);
122
- if (idx < filtered_commands.length - 1)
123
- update_current_command(filtered_commands[idx + 1]);
155
+ if (idx < filtered_commands.length - 1) {
156
+ let op = get_operation_or_next_valid(idx + 1);
157
+ if (op)
158
+ update_current_command(op);
159
+ }
124
160
  }
125
161
  async function execute_mouse_click(on_choice) {
126
162
  if (!visible)
@@ -136,9 +172,12 @@ let rows = [];
136
172
  function update_current_command(cmd) {
137
173
  let prev_current = current_command;
138
174
  if (prev_current)
139
- rows.find((r) => r.cmd == prev_current).is_highlighted = false;
140
- if (cmd)
141
- rows.find((r) => r.cmd == cmd).is_highlighted = true;
175
+ rows.find((r) => !!r && r.cmd == prev_current).is_highlighted = false;
176
+ if (cmd) {
177
+ const row = rows.find((r) => !!r && r.cmd == cmd);
178
+ row.is_highlighted = true;
179
+ row?.scrollToView();
180
+ }
142
181
  current_command = cmd;
143
182
  }
144
183
  function buttonMousedown(e) {
@@ -163,7 +202,7 @@ function mousemove(e) {
163
202
  const touch = e.touches.item(0);
164
203
  const trackDelta = new DOMPoint(touch.clientX - beforeTrackingClient.x, touch.clientY - beforeTrackingClient.y);
165
204
  toolboxX = beforeTrackingPos.x + trackDelta.x;
166
- css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
205
+ css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
167
206
  e.stopPropagation();
168
207
  }
169
208
  }
@@ -172,6 +211,12 @@ function mouseup(e) {
172
211
  beforeTrackingClient = null;
173
212
  beforeTrackingPos = null;
174
213
  }
214
+ function isRowActive(cmd) {
215
+ if (cmd.is_active)
216
+ return cmd.is_active();
217
+ else
218
+ return false;
219
+ }
175
220
  </script>
176
221
 
177
222
  {#if isToolbox}
@@ -186,47 +231,62 @@ function mouseup(e) {
186
231
  bind:this={paletteElement}>
187
232
  {#if filtered_commands && filtered_commands.length}
188
233
  {#each filtered_commands as cmd, idx (cmd.caption)}
189
- {@const id = "cpi_" + idx}
190
- {@const mobile = isDeviceSmallerThan("sm")}
191
- {@const icon_placeholder_size = mobile ? 12 : 10}
192
- <button class="font-medium m-0 py-2 pr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu focus:outline-none"
193
- {id}
194
- bind:this={rows[idx]}
195
- on:click={ () => { execute_mouse_click(cmd.on_choice); }}
196
- on:mousedown={buttonMousedown}>
197
-
198
- <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
199
- {#if cmd.icon}
200
- {@const cc = mobile ? 7 : 6}
201
- {@const default_icon_size = icon_placeholder_size - cc}
202
- {@const icon_size = cmd.icon_size ? cmd.icon_size : default_icon_size}
203
- <Icon size={icon_size} component={cmd.icon}/>
204
- {/if}
205
- </div>
206
- </button>
234
+ {#if !cmd.separator}
235
+ {@const id = "cpi_" + idx}
236
+ {@const mobile = isDeviceSmallerThan("sm")}
237
+ {@const icon_placeholder_size = mobile ? 12 : 10}
238
+ {@const active=isRowActive(cmd)}
239
+ <button class="font-medium m-0 py-2 mr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu focus:outline-none"
240
+ class:dark:bg-stone-700={active}
241
+ class:bg-stone-300={active}
242
+ {id}
243
+ bind:this={rows[idx]}
244
+ on:click={ () => { execute_mouse_click(cmd.on_choice); }}
245
+ on:mousedown={buttonMousedown}>
246
+
247
+ <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
248
+ {#if cmd.icon}
249
+ {@const cc = mobile ? 7 : 6}
250
+ {@const default_icon_size = icon_placeholder_size - cc}
251
+ {@const icon_size = cmd.icon_size ? cmd.icon_size : default_icon_size}
252
+ <Icon size={icon_size} component={cmd.icon}/>
253
+ {/if}
254
+ </div>
255
+ </button>
256
+ {/if}
207
257
  {/each}
208
258
  {/if}
209
259
  </menu>
210
260
  {:else}
211
- <div class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30"
261
+ <div id="__hd_FormattingPalette"
262
+ class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto"
212
263
  hidden={!visible}
213
264
  style={css_style}
214
265
  bind:this={paletteElement}>
215
266
  {#if filtered_commands && filtered_commands.length}
216
267
  {#each filtered_commands as cmd, idx (cmd.caption)}
217
- {@const id = "cpi_" + idx}
218
- <Pallete_row {id}
219
- cmd={cmd}
220
- is_highlighted={cmd == current_command}
221
- on:click={ () => { execute_mouse_click(cmd.on_choice); }}
222
- on:mousemove={ () => { on_mouse_over(cmd); }}
223
- on:mousedown={buttonMousedown}
224
- bind:this={rows[idx]}
225
- />
268
+ {#if cmd.separator}
269
+ {#if idx>0 && idx<filtered_commands.length-1} <!-- not first or last place -->
270
+ <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>
271
+ {/if}
272
+ {:else}
273
+ {@const id = "cpi_" + idx}
274
+ {@const active=isRowActive(cmd)}
275
+ <Pallete_row {id}
276
+ cmd={cmd}
277
+ is_highlighted={cmd == current_command}
278
+ on:click={ () => { execute_mouse_click(cmd.on_choice); }}
279
+ on:mousemove={ () => { on_mouse_over(cmd); }}
280
+ on:mousedown={buttonMousedown}
281
+ bind:this={rows[idx]}
282
+ {active}
283
+ />
284
+ {/if}
226
285
  {/each}
227
286
  {:else}
228
287
  <p class="text-sm text-stone-500">No results</p>
229
288
  {/if}
230
289
 
231
290
  </div>
232
- {/if}
291
+ {/if}
292
+
package/components/inputbox.ltop.svelte.d.ts CHANGED
@@ -3,11 +3,11 @@
3
3
  /** @typedef {typeof __propDef.slots} InputboxSlots */
4
4
  export default class Inputbox extends SvelteComponentTyped<{
5
5
  [x: string]: any;
6
- self?: null | undefined;
7
- invalid?: boolean | undefined;
8
- label?: string | undefined;
9
6
  a?: string | undefined;
7
+ label?: string | undefined;
10
8
  s?: string | undefined;
9
+ self?: null | undefined;
10
+ invalid?: boolean | undefined;
11
11
  placeholder?: string | undefined;
12
12
  context?: string | undefined;
13
13
  typename?: string | undefined;
@@ -30,11 +30,11 @@ import { SvelteComponentTyped } from "svelte";
30
30
  declare const __propDef: {
31
31
  props: {
32
32
  [x: string]: any;
33
- self?: null | undefined;
34
- invalid?: boolean | undefined;
35
- label?: string | undefined;
36
33
  a?: string | undefined;
34
+ label?: string | undefined;
37
35
  s?: string | undefined;
36
+ self?: null | undefined;
37
+ invalid?: boolean | undefined;
38
38
  placeholder?: string | undefined;
39
39
  context?: string | undefined;
40
40
  typename?: string | undefined;
package/components/simple.table.svelte.d.ts CHANGED
@@ -4,8 +4,8 @@
4
4
  export default class Simple extends SvelteComponentTyped<{
5
5
  focus?: boolean | undefined;
6
6
  select?: string | undefined;
7
- self?: null | undefined;
8
7
  nav?: boolean | undefined;
8
+ self?: null | undefined;
9
9
  context?: string | undefined;
10
10
  collection?: string | undefined;
11
11
  objects?: null | undefined;
@@ -24,8 +24,8 @@ declare const __propDef: {
24
24
  props: {
25
25
  focus?: boolean | undefined;
26
26
  select?: string | undefined;
27
- self?: null | undefined;
28
27
  nav?: boolean | undefined;
28
+ self?: null | undefined;
29
29
  context?: string | undefined;
30
30
  collection?: string | undefined;
31
31
  objects?: null | undefined;
package/components/table/_template.table.svelte.d.ts CHANGED
@@ -4,8 +4,8 @@
4
4
  export default class Template extends SvelteComponentTyped<{
5
5
  focus?: boolean | undefined;
6
6
  select?: string | undefined;
7
- self?: null | undefined;
8
7
  nav?: boolean | undefined;
8
+ self?: null | undefined;
9
9
  context?: string | undefined;
10
10
  collection?: string | undefined;
11
11
  objects?: null | undefined;
@@ -32,8 +32,8 @@ declare const __propDef: {
32
32
  props: {
33
33
  focus?: boolean | undefined;
34
34
  select?: string | undefined;
35
- self?: null | undefined;
36
35
  nav?: boolean | undefined;
36
+ self?: null | undefined;
37
37
  context?: string | undefined;
38
38
  collection?: string | undefined;
39
39
  objects?: null | undefined;
package/components/tile.title.svelte.d.ts CHANGED
@@ -3,8 +3,8 @@
3
3
  /** @typedef {typeof __propDef.slots} TileSlots */
4
4
  export default class Tile extends SvelteComponentTyped<{
5
5
  [x: string]: any;
6
- label?: string | undefined;
7
6
  a?: string | undefined;
7
+ label?: string | undefined;
8
8
  c?: string | undefined;
9
9
  }, {
10
10
  [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ import { SvelteComponentTyped } from "svelte";
17
17
  declare const __propDef: {
18
18
  props: {
19
19
  [x: string]: any;
20
- label?: string | undefined;
21
20
  a?: string | undefined;
21
+ label?: string | undefined;
22
22
  c?: string | undefined;
23
23
  };
24
24
  events: {
package/desk.svelte CHANGED
@@ -20,7 +20,7 @@
20
20
  alerts } from './stores.js'
21
21
 
22
22
  //import { AuthorizedView} from '@humandialog/auth.svelte'
23
- import { handleSelect, isDeviceSmallerThan, removeAt } from './utils'
23
+ import { handleSelect, isDeviceSmallerThan, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
24
24
  import { afterUpdate, onMount } from 'svelte';
25
25
 
26
26
  export let layout;
@@ -92,7 +92,8 @@
92
92
  let bottom_bar_visibility = "hidden"
93
93
  let bottom_bar_visible = false
94
94
  let lg_main_sidebar_height = ""
95
- let fab_visibility = "hidden"
95
+ let fab_base_visibility = "hidden"
96
+ let fab_visibility = fab_base_visibility;
96
97
  let fab_bottom = "bottom-0"
97
98
 
98
99
  let content_top = ""
@@ -108,14 +109,14 @@
108
109
  if(tools_visible)
109
110
  {
110
111
  tools_visibility = "hidden sm:block sm:fixed"
111
- fab_visibility = "fixed sm:hidden"
112
+ fab_base_visibility = "fixed sm:hidden"
112
113
 
113
114
  content_top = 'top-[50px] sm:top-[40px]'
114
115
 
115
116
  if(bottom_bar_visible)
116
- content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`
117
+ content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`
117
118
  else
118
- content_height = `h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]`
119
+ content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]`
119
120
 
120
121
  }
121
122
  else
@@ -123,9 +124,9 @@
123
124
  tools_visibility = "hidden"
124
125
  content_top = `top-[50px] sm:top-0`
125
126
  if(bottom_bar_visible)
126
- content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`
127
+ content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`
127
128
  else
128
- content_height = `h-[calc(100vh-50px)] sm:h-screen`
129
+ content_height = `min-h-[calc(100vh-50px)] sm:h-screen`
129
130
  }
130
131
 
131
132
 
@@ -143,6 +144,7 @@
143
144
  fab_bottom = "bottom-0"
144
145
  }
145
146
 
147
+ fab_visibility = fab_base_visibility;
146
148
  }
147
149
 
148
150
  //$: screen.width = innerWidth;
@@ -155,7 +157,14 @@
155
157
 
156
158
  onMount( () => {
157
159
  window.addEventListener('resize', on_resize)
160
+
161
+ const vp = window.visualViewport;
162
+
163
+ vp?.addEventListener('resize', onViewportResize)
164
+ setViewportHeight(vp)
165
+
158
166
  return () => {
167
+ vp?.removeEventListener('resize', onViewportResize)
159
168
  window.removeEventListener('resize', on_resize)
160
169
 
161
170
  // remove dark class form body element when we leave Layout view
@@ -169,6 +178,48 @@
169
178
  auto_hide_sidebar();
170
179
  }
171
180
 
181
+ let minViewportHeight = 0;
182
+ let maxViewportHeight = 0;
183
+ function setViewportHeight(vp)
184
+ {
185
+ if(!vp)
186
+ return;
187
+
188
+ const h = vp.height
189
+ if(!minViewportHeight) {
190
+ minViewportHeight = h }
191
+ else if(minViewportHeight > h) {
192
+ minViewportHeight = h }
193
+
194
+ if(!maxViewportHeight) {
195
+ maxViewportHeight = h; }
196
+ else if(maxViewportHeight < h) {
197
+ maxViewportHeight = h }
198
+ }
199
+
200
+ function onViewportResize(e)
201
+ {
202
+ const vp = window.visualViewport;
203
+ setViewportHeight(vp)
204
+
205
+ if(isOnScreenKeyboardVisible())
206
+ {
207
+ fab_visibility = 'hidden'
208
+ }
209
+ else
210
+ {
211
+ fab_visibility = fab_base_visibility;
212
+ }
213
+ }
214
+
215
+ let operationsComponent
216
+ let fabComponent;
217
+ afterUpdate( () =>
218
+ {
219
+ UI.operations = operationsComponent
220
+ UI.fab = fabComponent;
221
+ })
222
+
172
223
  </script>
173
224
 
174
225
  <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
@@ -183,7 +234,8 @@
183
234
  on:click={handleSelect}
184
235
  on:contextmenu={handleSelect}>
185
236
 
186
- <div class="bg-white dark:bg-stone-900 dark:text-white overflow-x-clip overflow-y-clip h-screen">
237
+ <div class="bg-white dark:bg-stone-900 dark:text-white overflow-x-clip
238
+ sm:overflow-y-clip min-h-screen sm:h-screen">
187
239
  <!--###########################################################-->
188
240
  <!--## HORIZONTAL TOOLBAR (FOR PHONES) ######################-->
189
241
  <!--###########################################################-->
@@ -246,11 +298,11 @@
246
298
  {lg_content_area_horizontal_dim}
247
299
  z-10 overflow-hidden " >
248
300
 
249
- <Operations/>
301
+ <Operations bind:this={operationsComponent} />
250
302
  </div>
251
303
 
252
304
  <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
253
- <Fab/>
305
+ <Fab bind:this={fabComponent}/>
254
306
  </div>
255
307
 
256
308
  <!--#######################################################-->
@@ -261,9 +313,9 @@
261
313
  class="relative left-0 w-screen
262
314
  sm:left-[40px] sm:w-[calc(100vw-40px)]
263
315
  {content_top}
264
- {content_height}
265
316
  {lg_content_area_horizontal_dim}
266
- z-0 overflow-x-hidden overflow-y-auto"
317
+ z-0 overflow-x-hidden
318
+ {content_height} sm:overflow-y-auto"
267
319
  >
268
320
  <Configurable config={layout.mainContent} min_h_class="min-h-full">
269
321
  <div slot='alt'></div>
@@ -287,7 +339,7 @@
287
339
  <!--##########################################################-->
288
340
  <!--## ALERTS ###############################################-->
289
341
  <!--##########################################################-->
290
- <section class="absolute left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
342
+ <section class="fixed left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
291
343
  {#if $alerts && $alerts.length > 0}
292
344
  {#each $alerts as alert, idx}
293
345
  <Alert class="bg-red-900/40 shadow-lg shadow-stone-400 dark:shadow-black flex flex-row">
package/index.d.ts CHANGED
@@ -53,7 +53,7 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
53
53
  export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
54
54
  export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
55
55
  export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
56
- export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
56
+ export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
57
57
  export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
58
58
  export { data_tick_store, // tmp
59
59
  hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
package/index.js CHANGED
@@ -59,7 +59,7 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
59
59
  export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
60
60
  export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
61
61
  export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
62
- export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
62
+ export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
63
63
  export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
64
64
  export { data_tick_store, // tmp
65
65
  hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
package/modal.svelte CHANGED
@@ -112,7 +112,9 @@ function on_cancel(event) {
112
112
  on:click={on_cancel}>
113
113
  {cancelCaption}</button>
114
114
  {:else if mode == Custom}
115
+ {#if $$slots.footer}
115
116
  <slot name="footer"/>
117
+ {/if}
116
118
  {/if}
117
119
  </div>
118
120
  </div>
package/operations.svelte CHANGED
@@ -40,26 +40,35 @@ function on_click(e, operation) {
40
40
  function mousedown(e) {
41
41
  e.preventDefault();
42
42
  }
43
+ function isOperationActivated(operation) {
44
+ if (operation.activeFunc)
45
+ return operation.activeFunc();
46
+ else
47
+ return operation.active ?? false;
48
+ }
43
49
  </script>
44
50
 
45
- <section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs ">
51
+ <section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
46
52
  <div class="flex flex-row"
47
53
  class:flex-row-reverse={mobile}>
48
54
 
49
55
  {#each leftOperations as operation}
50
56
  {#if !operation.separator}
57
+ {@const isActive=isOperationActivated(operation)}
51
58
  {#if operation.toolbox}
52
59
  {#each operation.toolbox as operation}
53
60
  <button type="button"
54
- class="py-2.5 px-5
55
- text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white
61
+ class="py-2.5 px-4
62
+ text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white
56
63
  hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
57
64
  border-stone-200 focus:outline-none dark:border-stone-600
58
65
  inline-flex items-center"
66
+ class:bg-stone-700={isActive}
67
+ class:dark:bg-stone-800={isActive}
59
68
  on:click={(e) => {on_click(e, operation)}}
60
69
  on:mousedown={mousedown}>
61
70
  {#if operation.icon}
62
- <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
71
+ <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
63
72
  {/if}
64
73
  {#if operation.caption}
65
74
  <span>{operation.caption}</span>
@@ -69,21 +78,25 @@ function mousedown(e) {
69
78
  {:else}
70
79
 
71
80
  <button type="button"
72
- class="py-2.5 px-5
73
- text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white
81
+ class="py-2.5 px-4
82
+ text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white
74
83
  hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
75
84
  border-stone-200 focus:outline-none dark:border-stone-600
76
85
  inline-flex items-center"
86
+ class:bg-stone-700={isActive}
87
+ class:dark:bg-stone-800={isActive}
77
88
  on:click={(e) => {on_click(e, operation)}}
78
89
  on:mousedown={mousedown}>
79
90
  {#if operation.icon}
80
- <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
91
+ <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
81
92
  {/if}
82
93
  {#if operation.caption}
83
94
  <span>{operation.caption}</span>
84
95
  {/if}
85
96
  </button>
86
- {/if}
97
+ {/if}
98
+ {:else}
99
+ <!--div class="border-l my-2"></div-->
87
100
  {/if}
88
101
  {/each}
89
102
  </div>
@@ -91,17 +104,19 @@ function mousedown(e) {
91
104
  <div class="ml-auto flex flex-row">
92
105
  {#each rightOperations as operation}
93
106
  {#if !operation.separator}
94
-
107
+ {@const isActive=isOperationActivated(operation)}
95
108
  <button type="button"
96
- class="py-2.5 px-5
97
- text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white
109
+ class="py-2.5 px-4
110
+ text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white
98
111
  hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
99
112
  border-stone-200 focus:outline-none dark:border-stone-600
100
113
  inline-flex items-center"
114
+ class:bg-stone-700={isActive}
115
+ class:dark:bg-stone-800={isActive}
101
116
  on:click={(e) => {on_click(e, operation)}}
102
117
  on:mousedown={mousedown}>
103
118
  {#if operation.icon}
104
- <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
119
+ <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
105
120
  {/if}
106
121
  {#if operation.caption}
107
122
  <span>{operation.caption}</span>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "1.2.5",
3
+ "version": "1.3.1",
4
4
  "description": "Basic Svelte UI components for Object Reef applications",
5
5
  "devDependencies": {
6
6
  "@playwright/test": "^1.28.1",
@@ -29,6 +29,8 @@
29
29
  "@humandialog/auth.svelte": "^1.8.3",
30
30
  "@tiptap/core": "^2.11.0",
31
31
  "@tiptap/extension-image": "^2.11.0",
32
+ "@tiptap/extension-link": "^2.11.3",
33
+ "@tiptap/extension-underline": "^2.11.3",
32
34
  "@tiptap/pm": "^2.11.0",
33
35
  "@tiptap/starter-kit": "^2.11.0",
34
36
  "@tiptap/suggestion": "^2.11.0",
package/page.svelte.d.ts CHANGED
@@ -3,8 +3,8 @@
3
3
  /** @typedef {typeof __propDef.slots} PageSlots */
4
4
  export default class Page extends SvelteComponentTyped<{
5
5
  [x: string]: any;
6
- self?: null | undefined;
7
6
  title?: string | undefined;
7
+ self?: null | undefined;
8
8
  context?: string | undefined;
9
9
  typename?: string | undefined;
10
10
  c?: string | undefined;
@@ -26,8 +26,8 @@ import { SvelteComponentTyped } from "svelte";
26
26
  declare const __propDef: {
27
27
  props: {
28
28
  [x: string]: any;
29
- self?: null | undefined;
30
29
  title?: string | undefined;
30
+ self?: null | undefined;
31
31
  context?: string | undefined;
32
32
  typename?: string | undefined;
33
33
  c?: string | undefined;