@humandialog/forms.svelte 1.4.2 → 1.4.4

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 (4) hide show
  1. package/components/Fab.svelte +20 -20
  2. package/components/contextmenu.svelte +8 -8
  3. package/operations.svelte +50 -17
  4. package/package.json +2 -2
package/components/Fab.svelte CHANGED
@@ -237,17 +237,17 @@ function operationVisible(operation) {
237
237
  {#if operationVisible(operation)}
238
238
  {@const position = calculatePosition(operation)}
239
239
  {#if position}
240
- <button
241
- class="text-white bg-blue-700/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
240
+ <button
241
+ class="text-white bg-blue-700/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
242
242
  font-medium rounded-full text-sm text-center shadow-md
243
- w-[35px] h-[35px]
244
- fixed m-0
243
+ w-[35px] h-[35px]
244
+ fixed m-0
245
245
  dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
246
246
  flex items-center justify-center
247
247
  disable-dbl-tap-zoom
248
248
  cursor-pointer z-40"
249
249
  style={position}
250
- on:click|stopPropagation={(e) => {on_click(e, operation)}}
250
+ on:click|stopPropagation={(e) => {on_click(e, operation)}}
251
251
  on:mousedown={mousedown} >
252
252
  <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
253
253
  </button>
@@ -261,34 +261,34 @@ function operationVisible(operation) {
261
261
  {@const topPosition = 350}
262
262
  {@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
263
263
  <button id="__hd_fab_mainOperation"
264
- class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
264
+ class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
265
265
  font-medium rounded-full text-sm text-center shadow-md
266
- w-[55px] h-[55px]
266
+ w-[55px] h-[55px]
267
267
  fixed m-0 bottom-0 right-[0px]
268
268
  dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
269
269
  flex items-center justify-center
270
270
  disable-dbl-tap-zoom"
271
271
  style={verticalPosition}
272
- on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
272
+ on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
273
273
  on:mousedown={mousedown} >
274
274
  <div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
275
275
  </button>
276
276
 
277
277
  {#if secondaryOperation || isExpandable}
278
-
278
+
279
279
  <!-- horizontal container -->
280
280
  <div class="flex flex-row m-0 fixed bottom-[10px] right-[60px]">
281
-
281
+
282
282
  {#if isExpandable}
283
283
  <!-- Expander -->
284
284
  <button class=" bg-transparent mr-2
285
- w-[55px] h-[55px]
285
+ w-[55px] h-[55px]
286
286
  flex items-center justify-center
287
287
  disable-dbl-tap-zoom"
288
288
  on:click|stopPropagation={toggleExpandToolboxH}
289
289
  on:mousedown={mousedown}>
290
290
  <div class=" w-10 h-10
291
- text-white bg-zinc-500 hover:bg-zinc-500
291
+ text-white bg-zinc-500 hover:bg-zinc-500
292
292
  font-medium rounded-full text-sm text-center shadow-md
293
293
  dark:bg-zinc-500 dark:hover:bg-zinc-500
294
294
  flex items-center justify-center">
@@ -305,13 +305,13 @@ function operationVisible(operation) {
305
305
  {#if hToolboxExpanded}
306
306
  {#if secondaryOperation}
307
307
  <button class=" bg-transparent
308
- mx-0 mr-2 w-[55px] h-[55px]
308
+ mx-0 mr-2 w-[55px] h-[55px]
309
309
  flex items-center justify-center
310
310
  disable-dbl-tap-zoom"
311
311
  on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
312
312
  on:mousedown={mousedown}>
313
313
  <div class=" w-10 h-10
314
- text-white bg-zinc-500 group-hover:bg-zinc-500
314
+ text-white bg-zinc-500 group-hover:bg-zinc-500
315
315
  dark:bg-zinc-500 dark:group-hover:bg-zinc-500
316
316
  font-medium rounded-full text-sm text-center shadow-md
317
317
  flex items-center justify-center">
@@ -324,13 +324,13 @@ function operationVisible(operation) {
324
324
  {#if !operation.separator}
325
325
  <!-- svelte-ignore a11y-click-events-have-key-events -->
326
326
  <button class=" bg-transparent
327
- mx-0 mr-2 w-[55px] h-[55px]
327
+ mx-0 mr-2 w-[55px] h-[55px]
328
328
  flex items-center justify-center
329
329
  disable-dbl-tap-zoom"
330
330
  on:click|stopPropagation={(e) => {on_click(e, operation)}}
331
331
  on:mousedown={mousedown}>
332
332
  <div class=" w-10 h-10
333
- text-white bg-zinc-500 group-hover:bg-zinc-500
333
+ text-white bg-zinc-500 group-hover:bg-zinc-500
334
334
  dark:bg-zinc-500 dark:group-hover:bg-zinc-500
335
335
  font-medium rounded-full text-sm text-center shadow-md
336
336
  flex items-center justify-center">
@@ -344,13 +344,13 @@ function operationVisible(operation) {
344
344
  {/if}
345
345
  {:else}
346
346
  <button class=" bg-transparent
347
- mx-0 mr-2 w-[55px] h-[55px]
347
+ mx-0 mr-2 w-[55px] h-[55px]
348
348
  flex items-center justify-center
349
349
  disable-dbl-tap-zoom"
350
350
  on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
351
351
  on:mousedown={mousedown}>
352
352
  <div class=" w-10 h-10
353
- text-white bg-zinc-500 group-hover:bg-zinc-500
353
+ text-white bg-zinc-500 group-hover:bg-zinc-500
354
354
  dark:bg-zinc-500 dark:group-hover:bg-zinc-500
355
355
  font-medium rounded-full text-sm text-center shadow-md
356
356
  flex items-center justify-center">
@@ -379,11 +379,11 @@ function operationVisible(operation) {
379
379
  </div>
380
380
  {/if}
381
381
  <button class=" bg-transparent
382
- mx-0 mb-2 w-[55px] h-[55px]
382
+ mx-0 mb-2 w-[55px] h-[55px]
383
383
  flex items-center justify-center
384
384
  disable-dbl-tap-zoom">
385
385
  <div class=" w-10 h-10
386
- text-white bg-zinc-500 group-hover:bg-zinc-500
386
+ text-white bg-zinc-500 group-hover:bg-zinc-500
387
387
  dark:bg-zinc-500 dark:group-hover:bg-zinc-500
388
388
  font-medium rounded-full text-sm text-center shadow-md
389
389
  flex items-center justify-center">
package/components/contextmenu.svelte CHANGED
@@ -306,11 +306,11 @@ function calculateBackground(is_highlighted, active) {
306
306
  }
307
307
  </script>
308
308
 
309
- <div id="__hd_svelte_contextmenu"
310
- class=" bg-white dark:bg-stone-800
311
- text-stone-800 dark:text-stone-400 rounded-lg border
312
- border-stone-200 dark:border-stone-700 shadow-md
313
- z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto"
309
+ <div id="__hd_svelte_contextmenu"
310
+ class=" bg-white dark:bg-stone-800
311
+ text-stone-800 dark:text-stone-400 rounded-lg border
312
+ border-stone-200 dark:border-stone-700 shadow-md
313
+ z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto"
314
314
  style={css_position}
315
315
  bind:this={menu_root}>
316
316
 
@@ -332,17 +332,17 @@ function calculateBackground(is_highlighted, active) {
332
332
  {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
333
333
  {@const active = calculateBackground(isFocused, false)}
334
334
  {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
335
-
335
+
336
336
  <button class="block w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none"
337
337
  id={menu_item_id}
338
338
  bind:this={menu_items[index]}
339
- on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
339
+ on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
340
340
  on:mouseenter = {(e) => {on_mouse_move(index)}}
341
341
  on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
342
342
  on:mousedown={mousedown}
343
343
  disabled={operation.disabled}
344
344
  class:opacity-60={operation.disabled}>
345
-
345
+
346
346
  <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
347
347
  {#if operation.icon}
348
348
  {@const cc = mobile ? 7 : 6}
package/operations.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script>import { showFloatingToolbar, showMenu, showGridMenu } from "./components/menu.js";
2
2
  import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "./stores.js";
3
+ import { FaEllipsisV } from "svelte-icons/fa";
3
4
  export let mobile = false;
4
5
  $:
5
6
  update($pageToolbarOperations, $contextToolbarOperations);
@@ -9,17 +10,20 @@ let rightOperations = [];
9
10
  let hasOperations = false;
10
11
  function update(...args) {
11
12
  let opVer = 0;
13
+ let operationsRoot = null;
12
14
  if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
13
15
  operations = $contextToolbarOperations;
14
16
  } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
15
17
  operations = $contextToolbarOperations.operations;
16
18
  opVer = $contextToolbarOperations.opver ?? 0;
19
+ operationsRoot = $contextToolbarOperations;
17
20
  } else {
18
21
  if (Array.isArray($pageToolbarOperations))
19
22
  operations = $pageToolbarOperations;
20
23
  else {
21
24
  operations = $pageToolbarOperations.operations;
22
25
  opVer = $pageToolbarOperations.opver ?? 0;
26
+ operationsRoot = $pageToolbarOperations;
23
27
  }
24
28
  }
25
29
  leftOperations = [];
@@ -36,8 +40,37 @@ function update(...args) {
36
40
  }
37
41
  });
38
42
  leftOperations = [...AOperations, ...BOperations];
39
- rightOperations = [...COperations];
43
+ rightOperations = COperations.toReversed();
40
44
  } else if (opVer == 2) {
45
+ if (operationsRoot && operationsRoot.tbr) {
46
+ let allFlatOperations = [];
47
+ operationsRoot.operations.forEach(
48
+ (g) => allFlatOperations = [
49
+ ...allFlatOperations,
50
+ {
51
+ separator: true
52
+ },
53
+ ...g.operations
54
+ ]
55
+ );
56
+ const allOperationsMenu = {
57
+ caption: operationsRoot.caption ?? "",
58
+ icon: operationsRoot.icon ?? FaEllipsisV,
59
+ menu: allFlatOperations,
60
+ tbr: operationsRoot.tbr
61
+ };
62
+ switch (operationsRoot.tbr) {
63
+ case "A":
64
+ AOperations.push(allOperationsMenu);
65
+ break;
66
+ case "B":
67
+ BOperations.push(allOperationsMenu);
68
+ break;
69
+ case "C":
70
+ COperations.push(allOperationsMenu);
71
+ break;
72
+ }
73
+ }
41
74
  operations.forEach((group) => {
42
75
  if (group.tbr) {
43
76
  const expandOperation = {
@@ -81,7 +114,7 @@ function update(...args) {
81
114
  });
82
115
  });
83
116
  leftOperations = [...AOperations, ...BOperations];
84
- rightOperations = [...COperations];
117
+ rightOperations = COperations.toReversed();
85
118
  } else {
86
119
  leftOperations = operations.filter((o) => !o.right);
87
120
  rightOperations = operations.filter((o) => o.right == true);
@@ -125,18 +158,18 @@ function isOperationActivated(operation) {
125
158
  <section class="flex flex-row no-print h-10 bg-stone-50 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
126
159
  <div class="flex flex-row"
127
160
  class:flex-row-reverse={mobile}>
128
-
161
+
129
162
  {#each leftOperations as operation}
130
163
  {#if !operation.separator}
131
164
  {@const isActive=isOperationActivated(operation)}
132
165
  {#if operation.toolbox}
133
166
  {#each operation.toolbox as operation}
134
- <button type="button"
135
- class="py-2.5 px-4
136
- text-sm font-thin
167
+ <button type="button"
168
+ class="py-2.5 px-4
169
+ text-xs font-thin
137
170
  text-stone-800 hover:bg-stone-700 active:bg-stone-300 border-stone-200
138
171
  dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
139
- focus:outline-none
172
+ focus:outline-none
140
173
  inline-flex items-center"
141
174
  class:bg-stone-700={isActive}
142
175
  class:dark:bg-stone-800={isActive}
@@ -151,13 +184,13 @@ function isOperationActivated(operation) {
151
184
  </button>
152
185
  {/each}
153
186
  {:else}
154
-
155
- <button type="button"
187
+
188
+ <button type="button"
156
189
  class="py-2.5 px-4
157
- text-sm font-thin
190
+ text-xs font-thin
158
191
  text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
159
192
  dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
160
- focus:outline-none
193
+ focus:outline-none
161
194
  inline-flex items-center"
162
195
  class:bg-stone-700={isActive}
163
196
  class:dark:bg-stone-800={isActive}
@@ -170,7 +203,7 @@ function isOperationActivated(operation) {
170
203
  <span class="ml-1">{operation.caption}</span>
171
204
  {/if}
172
205
  </button>
173
- {/if}
206
+ {/if}
174
207
  {:else}
175
208
  <!--div class="border-l my-2"></div-->
176
209
  {/if}
@@ -181,12 +214,12 @@ function isOperationActivated(operation) {
181
214
  {#each rightOperations as operation}
182
215
  {#if !operation.separator}
183
216
  {@const isActive=isOperationActivated(operation)}
184
- <button type="button"
185
- class="py-2.5 px-4
186
- text-sm font-thin
217
+ <button type="button"
218
+ class="py-2.5 px-4
219
+ text-xs font-thin
187
220
  text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
188
221
  dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
189
- focus:outline-none
222
+ focus:outline-none
190
223
  inline-flex items-center"
191
224
  class:bg-stone-700={isActive}
192
225
  class:dark:bg-stone-800={isActive}
@@ -198,7 +231,7 @@ function isOperationActivated(operation) {
198
231
  {#if operation.caption}
199
232
  <span class="ml-1">{operation.caption}</span>
200
233
  {/if}
201
- </button>
234
+ </button>
202
235
  {/if}
203
236
  {/each}
204
237
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "1.4.2",
3
+ "version": "1.4.4",
4
4
  "description": "Basic Svelte UI components for Object Reef applications",
5
5
  "devDependencies": {
6
6
  "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "type": "module",
28
28
  "dependencies": {
29
- "@humandialog/auth.svelte": "^1.8.8",
29
+ "@humandialog/auth.svelte": "^1.8.10",
30
30
  "@tiptap/core": "^2.11.0",
31
31
  "@tiptap/extension-bullet-list": "^2.11.5",
32
32
  "@tiptap/extension-code-block": "^2.11.5",