@humandialog/forms.svelte 1.4.3 → 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 +17 -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
@@ -40,7 +40,7 @@ function update(...args) {
40
40
  }
41
41
  });
42
42
  leftOperations = [...AOperations, ...BOperations];
43
- rightOperations = [...COperations];
43
+ rightOperations = COperations.toReversed();
44
44
  } else if (opVer == 2) {
45
45
  if (operationsRoot && operationsRoot.tbr) {
46
46
  let allFlatOperations = [];
@@ -114,7 +114,7 @@ function update(...args) {
114
114
  });
115
115
  });
116
116
  leftOperations = [...AOperations, ...BOperations];
117
- rightOperations = [...COperations];
117
+ rightOperations = COperations.toReversed();
118
118
  } else {
119
119
  leftOperations = operations.filter((o) => !o.right);
120
120
  rightOperations = operations.filter((o) => o.right == true);
@@ -158,18 +158,18 @@ function isOperationActivated(operation) {
158
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">
159
159
  <div class="flex flex-row"
160
160
  class:flex-row-reverse={mobile}>
161
-
161
+
162
162
  {#each leftOperations as operation}
163
163
  {#if !operation.separator}
164
164
  {@const isActive=isOperationActivated(operation)}
165
165
  {#if operation.toolbox}
166
166
  {#each operation.toolbox as operation}
167
- <button type="button"
168
- class="py-2.5 px-4
169
- text-sm font-thin
167
+ <button type="button"
168
+ class="py-2.5 px-4
169
+ text-xs font-thin
170
170
  text-stone-800 hover:bg-stone-700 active:bg-stone-300 border-stone-200
171
171
  dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
172
- focus:outline-none
172
+ focus:outline-none
173
173
  inline-flex items-center"
174
174
  class:bg-stone-700={isActive}
175
175
  class:dark:bg-stone-800={isActive}
@@ -184,13 +184,13 @@ function isOperationActivated(operation) {
184
184
  </button>
185
185
  {/each}
186
186
  {:else}
187
-
188
- <button type="button"
187
+
188
+ <button type="button"
189
189
  class="py-2.5 px-4
190
- text-sm font-thin
190
+ text-xs font-thin
191
191
  text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
192
192
  dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
193
- focus:outline-none
193
+ focus:outline-none
194
194
  inline-flex items-center"
195
195
  class:bg-stone-700={isActive}
196
196
  class:dark:bg-stone-800={isActive}
@@ -203,7 +203,7 @@ function isOperationActivated(operation) {
203
203
  <span class="ml-1">{operation.caption}</span>
204
204
  {/if}
205
205
  </button>
206
- {/if}
206
+ {/if}
207
207
  {:else}
208
208
  <!--div class="border-l my-2"></div-->
209
209
  {/if}
@@ -214,12 +214,12 @@ function isOperationActivated(operation) {
214
214
  {#each rightOperations as operation}
215
215
  {#if !operation.separator}
216
216
  {@const isActive=isOperationActivated(operation)}
217
- <button type="button"
218
- class="py-2.5 px-4
219
- text-sm font-thin
217
+ <button type="button"
218
+ class="py-2.5 px-4
219
+ text-xs font-thin
220
220
  text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
221
221
  dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
222
- focus:outline-none
222
+ focus:outline-none
223
223
  inline-flex items-center"
224
224
  class:bg-stone-700={isActive}
225
225
  class:dark:bg-stone-800={isActive}
@@ -231,7 +231,7 @@ function isOperationActivated(operation) {
231
231
  {#if operation.caption}
232
232
  <span class="ml-1">{operation.caption}</span>
233
233
  {/if}
234
- </button>
234
+ </button>
235
235
  {/if}
236
236
  {/each}
237
237
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "1.4.3",
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",