@humandialog/forms.svelte 1.8.13 → 1.8.15

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/console.svelte +12 -2
  2. package/package.json +1 -1
  3. package/stores.js +3 -3
  4. package/tenant.members.invite.svelte +174 -119
package/console.svelte CHANGED
@@ -1,7 +1,8 @@
1
1
  <script>
2
2
  import { reef, session } from "@humandialog/auth.svelte";
3
3
  import { afterUpdate } from "svelte";
4
- import { contextTypesStore, contextItemsStore} from './stores.js'
4
+ import { contextTypesStore, contextItemsStore, bottom_bar_visible_store} from './stores.js'
5
+ import Ricon from './components/r.icon.svelte'
5
6
 
6
7
  let prevLines = [];
7
8
  let prompt = '>'
@@ -169,15 +170,24 @@
169
170
  }
170
171
  }
171
172
 
173
+ function closeConsole()
174
+ {
175
+ $bottom_bar_visible_store = false
176
+ }
177
+
172
178
  </script>
173
179
 
174
180
  <div class="h-full overflow-y-auto overscroll-contain">
175
- <button class="fixed right-0 m-2 w-6 h-6 text-stone-200 {protoButtonBorderClass}" on:click={protoChange}>
181
+ <!--button class="fixed right-0 m-2 w-6 h-6 text-stone-200 {protoButtonBorderClass}" on:click={protoChange}>
176
182
  <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
177
183
  <path d="M16 4C14 4 11 5 11 9C11 13 11 15 11 18C11 21 6 23 6 23C6 23 11 25 11 28C11 31 11 35 11 39C11 43 14 44 16 44"/>
178
184
  <path d="M32 4C34 4 37 5 37 9C37 13 37 15 37 18C37 21 42 23 42 23C42 23 37 25 37 28C37 31 37 35 37 39C37 43 34 44 32 44"/>
179
185
  </svg>
186
+ </button-->
187
+ <button class="fixed right-0 m-2 w-6 h-6 text-stone-200 {protoButtonBorderClass}" on:click={closeConsole}>
188
+ <Ricon icon='x' />
180
189
  </button>
190
+
181
191
 
182
192
  <div class="p-2 w-full min-h-full
183
193
  bg-stone-800 border-l border-t border-black font-mono text-stone-200">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "1.8.13",
3
+ "version": "1.8.15",
4
4
  "description": "Basic Svelte UI components for Object Reef applications",
5
5
  "devDependencies": {
6
6
  "@playwright/test": "^1.28.1",
package/stores.js CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  import {writable, get, derived} from 'svelte/store';
3
3
  import {SCREEN_SIZES, randomString} from './utils.js'
4
- import {navGetKey, localStorageSave, localStorageRead, hasLocalStorage} from './utils.js'
4
+ import {navGetKey, localStorageSave, localStorageRead, hasLocalStorage, sessionStorageSave, sessionStorageRead} from './utils.js'
5
5
  import { location } from 'svelte-spa-router';
6
6
 
7
7
  export const data_tick_store = writable(1);
@@ -146,8 +146,8 @@ export function set_default_tools_visible(value, force)
146
146
  tools_visible_store.set(value)
147
147
  }
148
148
 
149
- export const bottom_bar_visible_store = writable( localStorageRead('bottom_bar_visible_store') == 'true');
150
- bottom_bar_visible_store.subscribe( (value) => { localStorageSave('bottom_bar_visible_store', (value ? 'true' : '')) } );
149
+ export const bottom_bar_visible_store = writable( sessionStorageRead('bottom_bar_visible_store') == 'true');
150
+ bottom_bar_visible_store.subscribe( (value) => { sessionStorageSave('bottom_bar_visible_store', (value ? 'true' : '')) } );
151
151
 
152
152
  export const right_sidebar_visible_store = writable(false)
153
153
  export const visible_property_tab_store = writable('');
package/tenant.members.invite.svelte CHANGED
@@ -9,6 +9,7 @@
9
9
  import { onErrorShowAlert } from './stores';
10
10
  import EditableParagraph from './components/prose.editable.p.svelte'
11
11
  import EditableSpan from './components/prose.editable.span.svelte'
12
+ import Ricon from './components/r.icon.svelte'
12
13
 
13
14
  export let nameAttrib = "Name";
14
15
  export let emailAttrib = "login";
@@ -350,105 +351,129 @@ Aby zaakceptować zaproszenie, kliknij poniższy link:`
350
351
  <!-- svelte-ignore a11y-no-noninteractive-tabindex-->
351
352
 
352
353
  <Dialog bind:this={rootDialog}>
353
- <menu bind:this={rootElement} on:click={clearSelection}
354
- class="w-full sm:min-w-[20rem] max-h-80 sm:max-h-none overflow-y-auto sm:overflow-y-hidden overflow-x-hidden overscroll-contain" >
354
+ <div bind:this={rootElement} on:click={clearSelection}
355
+ class="paper w-full
356
+ prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
357
+
358
+ m-0 pt-5 pb-5 px-1 sm:px-8
359
+ sm:rounded
360
+ bg-stone-200 dark:bg-stone-900
361
+ flex flex-col" >
362
+
363
+ <!-------------------------------------------------------------------->
364
+ <!-- POPUP HEADER ---------------------------------------------------->
365
+ <!-------------------------------------------------------------------->
366
+ <h3 class = "flex-none">
367
+ <div class="w-full flex flex-row justify-between">
368
+ <!--div class="py-1.5 flex flex-row justify-between">
369
+ <button class="mr-4 w-6
370
+ hover:bg-stone-200 hover:dark:bg-stone-700
371
+ hover:outline hover:outline-8
372
+ hover:outline-stone-200 hover:dark:outline-stone-700"
373
+ ><Ricon icon = 'arrow-up' />
374
+ </button>
375
+ <button class="mr-4 w-6
376
+ hover:bg-stone-200 hover:dark:bg-stone-700
377
+ hover:outline hover:outline-8
378
+ hover:outline-stone-200 hover:dark:outline-stone-700">
379
+ <Ricon icon = 'check-check' />
380
+ </button>
381
+ </div-->
382
+ <div class="grow ">
383
+ <span class="text-left">{i18n({ en: 'Invitation', es: 'Invitación', pl: 'Zaproszenie'})}</span>
384
+ </div>
385
+ <div class="py-1.5 flex flex-row justify-between">
386
+ <button class="ml-4 w-6
387
+ hover:bg-stone-200 hover:dark:bg-stone-700
388
+ hover:outline hover:outline-8
389
+ hover:outline-stone-200 hover:dark:outline-stone-700"
390
+ on:click={ closeDialog }>
391
+ <Ricon icon = 'x' />
392
+ </button>
393
+ </div>
394
+ </div>
395
+ </h3>
396
+
355
397
 
356
- {#if closeButtonPos}
357
- <button class=" text-stone-800 dark:text-stone-400
358
- fixed sm:relative
359
- w-6 h-6 flex items-center justify-center
360
- focus:outline-none font-medium text-sm text-center"
361
- style={closeButtonPos}
362
- on:click={ closeDialog }> <!-- rounded-full text-stone-500 bg-stone-200/70 hover:bg-stone-200 dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 -->
363
- <Icon component={FaTimes} s="md"/>
364
- </button>
365
- {/if}
366
-
367
- <article class="w-full prose prose-base prose-zinc dark:prose-invert mb-20 sm:my-5">
368
- <h3>{i18n({ en: 'Invitation', es: 'Invitación', pl: 'Zaproszenie'})}</h3>
369
-
370
- <h4>E-mail</h4>
371
- <EditableParagraph bind:this={emailElement}
372
- val={email}
373
- validation={isValidEmail}
374
- tooltip="E-mail"
375
- placeholder={i18n({
376
- en: 'Enter the email address',
377
- es: 'Introduce la dirección de correo electrónico',
378
- pl: 'Wprowadź adres e-mail zapraszanej osoby'
379
- })}
380
- />
381
-
382
- <h4>{i18n({en: 'Name', es: 'Nombre', pl: 'Imię'})}</h4>
383
- <EditableParagraph bind:this={nameElement}
384
- val={name}
385
- placeholder={i18n({
386
- en: 'Enter the name of the person you are inviting',
387
- es: 'Introduce el nombre de la persona invitada',
388
- pl: 'Wprowadź imię zapraszanej osoby'
389
- })}
390
- />
391
-
392
- <h4>{i18n({en: 'Inviting', es: 'Invitante', pl: 'Zapraszający'})}</h4>
393
- <p>{invitingIdentifier}</p>
394
-
395
- <h4>{i18n({en: 'Invitation subject', es: 'Asunto de la invitación', pl: 'Temat zaproszenia'})}</h4>
396
- <EditableParagraph bind:this={subjectElement}
397
- val={subject}
398
- required
399
- tooltip={i18n({
400
- en: 'Click to edit',
401
- es: 'Haga clic para editar',
402
- pl: 'Kliknij, aby edytować'
403
- })}
404
- />
405
-
406
398
 
407
- <h4>{i18n({en: 'Invitation content', es: 'Contenido de la invitación', pl: 'Treść zaproszenia'})}</h4>
408
- <p>
409
- <EditableSpan bind:this={contentElement}
410
- class="text-wrap break-words whitespace-pre-wrap"
411
- val={content}
412
- required
413
- multiline
414
- tooltip={i18n({
415
- en: 'Click to edit',
416
- es: 'Haga clic para editar',
417
- pl: 'Kliknij, aby edytować'
418
- })}/>
419
-
420
- <span class="uppercase text-sm text-zinc-600 dark:text-zinc-400">
421
- <br>
422
- &lt;{i18n({en: 'Unique invitation link', es: 'Enlace único de invitación', pl: 'Unikalny link zapraszający'})}&gt;
423
- </span>
424
- </p>
425
-
426
- <h4>{i18n({en: 'Permissions management', es: 'Gestión de permisos', pl: 'Zarządzanie uprawnieniami'})}</h4>
427
- <p class="flex flex-row">
428
- {#each authAccessKinds as kind}
429
- {@const isActive = selectedAccessKey == kind.key}
430
- <button class="text-sm px-2 mx-1
431
- text-stone-700 dark:text-stone-300 dark:hover:text-white
432
- hover:bg-stone-200 dark:hover:bg-stone-700
433
- border border-stone-300 focus:outline-none dark:border-stone-600
434
- flex items-center rounded"
435
- class:bg-stone-200={isActive}
436
- class:dark:bg-stone-700={isActive}
437
- class:dark:text-white={isActive}
438
- disabled={isActive}
439
- on:click={(e)=> selectedAccessKey=kind.key}>
440
- {kind.name}
441
- </button>
442
- {/each}
443
-
444
- </p>
399
+ <!-------------------------------------------------------------------->
400
+ <!-- POPUP CONTENT---------------------------------------------------->
401
+ <!-------------------------------------------------------------------->
402
+ <div class="grow max-h-[40dvh] sm:max-h-[75dvh] overflow-y-auto overscroll-contain">
403
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
404
+ <h4>E-mail</h4>
405
+ <EditableParagraph bind:this={emailElement}
406
+ val={email}
407
+ validation={isValidEmail}
408
+ tooltip="E-mail"
409
+ placeholder={i18n({
410
+ en: 'Enter the email address',
411
+ es: 'Introduce la dirección de correo electrónico',
412
+ pl: 'Wprowadź adres e-mail zapraszanej osoby'
413
+ })}
414
+ />
415
+ </div>
416
+
417
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
418
+ <h4>{i18n({en: 'Name', es: 'Nombre', pl: 'Imię'})}</h4>
419
+ <EditableParagraph bind:this={nameElement}
420
+ val={name}
421
+ placeholder={i18n({
422
+ en: 'Enter the name of the person you are inviting',
423
+ es: 'Introduce el nombre de la persona invitada',
424
+ pl: 'Wprowadź imię zapraszanej osoby'
425
+ })}
426
+ />
427
+ </div>
428
+
429
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
430
+ <h4><h4>{i18n({en: 'Inviting', es: 'Invitante', pl: 'Zapraszający'})}</h4></h4>
431
+ <p>{invitingIdentifier}</p>
432
+ </div>
433
+
434
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
435
+ <h4>{i18n({en: 'Invitation subject', es: 'Asunto de la invitación', pl: 'Temat zaproszenia'})}</h4>
436
+ <EditableParagraph bind:this={subjectElement}
437
+ val={subject}
438
+ required
439
+ tooltip={i18n({
440
+ en: 'Click to edit',
441
+ es: 'Haga clic para editar',
442
+ pl: 'Kliknij, aby edytować'
443
+ })}
444
+ />
445
+ </div>
446
+
447
+
448
+
449
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
450
+ <h4>{i18n({en: 'Invitation content', es: 'Contenido de la invitación', pl: 'Treść zaproszenia'})}</h4>
451
+ <p>
452
+ <EditableSpan bind:this={contentElement}
453
+ class="text-wrap break-words whitespace-pre-wrap"
454
+ val={content}
455
+ required
456
+ multiline
457
+ tooltip={i18n({
458
+ en: 'Click to edit',
459
+ es: 'Haga clic para editar',
460
+ pl: 'Kliknij, aby edytować'
461
+ })}/>
462
+
463
+ <span class="uppercase text-sm text-zinc-600 dark:text-zinc-400">
464
+ <br>
465
+ &lt;{i18n({en: 'Unique invitation link', es: 'Enlace único de invitación', pl: 'Unikalny link zapraszający'})}&gt;
466
+ </span>
467
+ </p>
468
+ </div>
445
469
 
446
470
 
447
- {#if showAccessRoles}
448
- <h4>{i18n({en: 'Role in the application', es: 'Papel en la aplicación', pl: 'Rola w aplikacji'})}</h4>
471
+
472
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
473
+ <h4>{i18n({en: 'Permissions management', es: 'Gestión de permisos', pl: 'Zarządzanie uprawnieniami'})}</h4>
449
474
  <p class="flex flex-row">
450
- {#each appRoles as role}
451
- {@const isActive = selectedAppRole == role.name}
475
+ {#each authAccessKinds as kind}
476
+ {@const isActive = selectedAccessKey == kind.key}
452
477
  <button class="text-sm px-2 mx-1
453
478
  text-stone-700 dark:text-stone-300 dark:hover:text-white
454
479
  hover:bg-stone-200 dark:hover:bg-stone-700
@@ -458,35 +483,65 @@ Aby zaakceptować zaproszenie, kliknij poniższy link:`
458
483
  class:dark:bg-stone-700={isActive}
459
484
  class:dark:text-white={isActive}
460
485
  disabled={isActive}
461
- on:click={(e)=> selectedAppRole=role.name}>
462
- {role.summary}
486
+ on:click={(e)=> selectedAccessKey=kind.key}>
487
+ {kind.name}
463
488
  </button>
464
489
  {/each}
465
490
  </p>
466
- {/if}
491
+ </div>
467
492
 
468
- <hr/>
469
- <section class="flex flex-row gap-1">
470
- <button class=" ms-auto
471
- py-2.5 px-4
472
- text-stone-700 dark:text-stone-300 dark:hover:text-white
473
- hover:bg-stone-200 dark:hover:bg-stone-700
474
- border border-stone-300 focus:outline-none dark:border-stone-600
475
- flex items-center rounded"
476
- on:click={invite}
477
- >
478
- {i18n({ en: 'Invite', es: 'Invitar', pl: 'Zaproś'})}
493
+ {#if showAccessRoles}
494
+ <div class="px-2 outline outline-4 bg-stone-100 outline-stone-100 dark:bg-stone-800 dark:outline-stone-800">
495
+ <h4>{i18n({en: 'Role in the application', es: 'Papel en la aplicación', pl: 'Rola w aplikacji'})}</h4>
496
+ <p class="flex flex-row">
497
+ {#each appRoles as role}
498
+ {@const isActive = selectedAppRole == role.name}
499
+ <button class="text-sm px-2 mx-1
500
+ text-stone-700 dark:text-stone-300 dark:hover:text-white
501
+ hover:bg-stone-200 dark:hover:bg-stone-700
502
+ border border-stone-300 focus:outline-none dark:border-stone-600
503
+ flex items-center rounded"
504
+ class:bg-stone-200={isActive}
505
+ class:dark:bg-stone-700={isActive}
506
+ class:dark:text-white={isActive}
507
+ disabled={isActive}
508
+ on:click={(e)=> selectedAppRole=role.name}>
509
+ {role.summary}
510
+ </button>
511
+ {/each}
512
+ </p>
513
+ </div>
514
+ {/if}
515
+ </div>
516
+
517
+
518
+ <!-------------------------------------------------------------------->
519
+ <!-- POPUP FOOTER----------------------------------------------------->
520
+ <!-------------------------------------------------------------------->
521
+ <h4 class = "flex-none">
522
+
523
+ <div class="flex flex-row justify-end gap-2">
524
+
525
+ <button class="px-4 mx-2
526
+ bg-stone-100 dark:bg-stone-700
527
+ outline outline-offset-2 outline-2
528
+ outline-stone-200 dark:outline-stone-500
529
+ hover:bg-stone-200 hover:dark:bg-stone-700"
530
+ on:click={invite}>
531
+ {i18n({ en: 'Invite', es: 'Invitar', pl: 'Zaproś'})}
479
532
  </button>
480
- <button class=" py-2.5 px-4
481
- text-stone-700 dark:text-stone-300 dark:hover:text-white
482
- hover:bg-stone-200 dark:hover:bg-stone-700
483
- border border-stone-300 focus:outline-none dark:border-stone-600
484
- flex items-center rounded"
485
- on:click={copyInvitation}
486
- >
533
+
534
+ <button class="px-4 mx-2
535
+ bg-stone-100 dark:bg-stone-700
536
+ outline outline-offset-2 outline-2
537
+ outline-stone-200 dark:outline-stone-500
538
+ hover:bg-stone-200 hover:dark:bg-stone-700"
539
+ on:click={copyInvitation}>
487
540
  {i18n({ en: 'Copy invitation', es: 'Copiar invitación', pl: 'Skopiuj zaproszenie'})}
488
- </button>
489
- </section>
490
- </article>
491
- </menu>
541
+ </button>
542
+ </div>
543
+ </h4>
544
+
545
+
546
+ </div>
492
547
  </Dialog>