@humandialog/forms.svelte 1.7.17 → 1.7.19

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.
@@ -0,0 +1,55 @@
1
+ <script>
2
+ import EditableSpan from './prose.editable.span.svelte'
3
+
4
+ export let tooltip = ''
5
+ export let val = ''
6
+ export let invalid = false
7
+ export let placeholder = ''
8
+ export let required = false;
9
+ export let readonly = false;
10
+ export let multiline = false;
11
+ export let validation = undefined;
12
+
13
+ let userClass = $$restProps.class ?? '';
14
+
15
+ let spanElement;
16
+
17
+ export function setValue(v)
18
+ {
19
+ spanElement.setValue(v)
20
+ }
21
+
22
+ export function getValue()
23
+ {
24
+ return spanElement.getValue()
25
+ }
26
+
27
+ export function validate()
28
+ {
29
+ return spanElement.validate()
30
+ }
31
+
32
+ function onClick(e)
33
+ {
34
+ spanElement.runEditing(e)
35
+ }
36
+
37
+ </script>
38
+
39
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
40
+ <!-- svelte-ignore a11y-no-noninteractive-interactions -->
41
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex-->
42
+
43
+ <p class="cursor-text {userClass}"
44
+ on:click={onClick}>
45
+ <EditableSpan bind:this={spanElement}
46
+ {tooltip}
47
+ {val}
48
+ {invalid}
49
+ {placeholder}
50
+ {required}
51
+ {readonly}
52
+ {multiline}
53
+ {validation}
54
+ />
55
+ </p>
@@ -0,0 +1,48 @@
1
+ /** @typedef {typeof __propDef.props} ProseProps */
2
+ /** @typedef {typeof __propDef.events} ProseEvents */
3
+ /** @typedef {typeof __propDef.slots} ProseSlots */
4
+ export default class Prose extends SvelteComponentTyped<{
5
+ [x: string]: any;
6
+ invalid?: boolean | undefined;
7
+ placeholder?: string | undefined;
8
+ val?: string | undefined;
9
+ required?: boolean | undefined;
10
+ readonly?: boolean | undefined;
11
+ validation?: any;
12
+ validate?: (() => any) | undefined;
13
+ tooltip?: string | undefined;
14
+ multiline?: boolean | undefined;
15
+ setValue?: ((v: any) => void) | undefined;
16
+ getValue?: (() => any) | undefined;
17
+ }, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}> {
20
+ get setValue(): (v: any) => void;
21
+ get getValue(): () => any;
22
+ get validate(): () => any;
23
+ }
24
+ export type ProseProps = typeof __propDef.props;
25
+ export type ProseEvents = typeof __propDef.events;
26
+ export type ProseSlots = typeof __propDef.slots;
27
+ import { SvelteComponentTyped } from "svelte";
28
+ declare const __propDef: {
29
+ props: {
30
+ [x: string]: any;
31
+ invalid?: boolean | undefined;
32
+ placeholder?: string | undefined;
33
+ val?: string | undefined;
34
+ required?: boolean | undefined;
35
+ readonly?: boolean | undefined;
36
+ validation?: any;
37
+ validate?: (() => any) | undefined;
38
+ tooltip?: string | undefined;
39
+ multiline?: boolean | undefined;
40
+ setValue?: ((v: any) => void) | undefined;
41
+ getValue?: (() => any) | undefined;
42
+ };
43
+ events: {
44
+ [evt: string]: CustomEvent<any>;
45
+ };
46
+ slots: {};
47
+ };
48
+ export {};
@@ -0,0 +1,114 @@
1
+ <script>
2
+ import {tick} from 'svelte'
3
+ import {startEditing, editable} from '../utils'
4
+
5
+ export let tooltip = ''
6
+ export let val = ''
7
+ export let invalid = false
8
+ export let placeholder = ''
9
+ export let required = false;
10
+ export let readonly = false;
11
+ export let multiline = false;
12
+ export let validation = undefined;
13
+
14
+ let userClass = $$restProps.class ?? '';
15
+
16
+ export function setValue(v)
17
+ {
18
+ val = v;
19
+ }
20
+
21
+ export function getValue()
22
+ {
23
+ return val;
24
+ }
25
+
26
+ export function validate()
27
+ {
28
+ if(!validation)
29
+ {
30
+ if(required)
31
+ {
32
+ invalid = !val;
33
+ return !invalid;
34
+ }
35
+ else
36
+ {
37
+ invalid = false;
38
+ return true;
39
+ }
40
+ }
41
+
42
+ invalid = !validation(val);
43
+ return !invalid;
44
+ }
45
+
46
+ let fieldElement
47
+ let fieldPlaceholder = false
48
+ export async function runEditing(e)
49
+ {
50
+ if(fieldElement)
51
+ startEditing(fieldElement, () => fieldPlaceholder=false)
52
+ else
53
+ {
54
+ fieldPlaceholder = true;
55
+ await tick();
56
+ startEditing(fieldElement, () => fieldPlaceholder=false)
57
+ }
58
+ }
59
+
60
+ async function onFieldChanged(text)
61
+ {
62
+ if(text.startsWith('\u200B'))
63
+ text = text.substring(1)
64
+
65
+ val = text
66
+ validate()
67
+ }
68
+
69
+ function onSingleChange(text)
70
+ {
71
+ if(!text)
72
+ text = '\u200B'
73
+ else if(text.startsWith('\u200B'))
74
+ text = text.substring(1)
75
+
76
+ val = text
77
+ if(invalid)
78
+ validate();
79
+ }
80
+
81
+ </script>
82
+
83
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
84
+ <!-- svelte-ignore a11y-no-noninteractive-interactions -->
85
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex-->
86
+
87
+ <span class="{userClass}"
88
+ on:click={runEditing}
89
+ title={tooltip}
90
+ tabindex="0">
91
+ {#if val || fieldPlaceholder}
92
+ <span class:text-red-500={invalid}
93
+ bind:this={fieldElement}
94
+ use:editable={{
95
+ action: (text) => onFieldChanged(text),
96
+ active: false,
97
+ onSingleChange: onSingleChange,
98
+ enterAsNewLine: multiline,
99
+ readonly: readonly}}>
100
+ {#if val}
101
+ {val}
102
+ {:else}
103
+ &ZeroWidthSpace;
104
+ {/if}
105
+ </span>
106
+ {:else if placeholder}
107
+ <span class="text-zinc-600 dark:text-zinc-400"
108
+ class:dark:!text-red-400={invalid}
109
+ class:!text-red-600={invalid}>
110
+ {placeholder}
111
+ </span>
112
+ {/if}
113
+ </span>
114
+
@@ -0,0 +1,51 @@
1
+ /** @typedef {typeof __propDef.props} ProseProps */
2
+ /** @typedef {typeof __propDef.events} ProseEvents */
3
+ /** @typedef {typeof __propDef.slots} ProseSlots */
4
+ export default class Prose extends SvelteComponentTyped<{
5
+ [x: string]: any;
6
+ invalid?: boolean | undefined;
7
+ placeholder?: string | undefined;
8
+ val?: string | undefined;
9
+ required?: boolean | undefined;
10
+ readonly?: boolean | undefined;
11
+ validation?: any;
12
+ validate?: (() => boolean) | undefined;
13
+ tooltip?: string | undefined;
14
+ multiline?: boolean | undefined;
15
+ setValue?: ((v: any) => void) | undefined;
16
+ getValue?: (() => string) | undefined;
17
+ runEditing?: ((e: any) => Promise<void>) | undefined;
18
+ }, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}> {
21
+ get setValue(): (v: any) => void;
22
+ get getValue(): () => string;
23
+ get validate(): () => boolean;
24
+ get runEditing(): (e: any) => Promise<void>;
25
+ }
26
+ export type ProseProps = typeof __propDef.props;
27
+ export type ProseEvents = typeof __propDef.events;
28
+ export type ProseSlots = typeof __propDef.slots;
29
+ import { SvelteComponentTyped } from "svelte";
30
+ declare const __propDef: {
31
+ props: {
32
+ [x: string]: any;
33
+ invalid?: boolean | undefined;
34
+ placeholder?: string | undefined;
35
+ val?: string | undefined;
36
+ required?: boolean | undefined;
37
+ readonly?: boolean | undefined;
38
+ validation?: any;
39
+ validate?: (() => boolean) | undefined;
40
+ tooltip?: string | undefined;
41
+ multiline?: boolean | undefined;
42
+ setValue?: ((v: any) => void) | undefined;
43
+ getValue?: (() => string) | undefined;
44
+ runEditing?: ((e: any) => Promise<void>) | undefined;
45
+ };
46
+ events: {
47
+ [evt: string]: CustomEvent<any>;
48
+ };
49
+ slots: {};
50
+ };
51
+ export {};
@@ -174,8 +174,9 @@
174
174
 
175
175
  function onNewTagColorSelected(color)
176
176
  {
177
+ const label = inputText.trim()
177
178
  if(inputText && onNewTag)
178
- onNewTag(inputText, inputText, color)
179
+ onNewTag(label, label, color)
179
180
 
180
181
  inputText = ''
181
182
 
package/console.svelte CHANGED
@@ -24,6 +24,7 @@
24
24
  {
25
25
  prevLines = [...prevLines, `${prompt} ${input}`];
26
26
 
27
+ const orgInput = input
27
28
  if(input.startsWith('self'))
28
29
  {
29
30
  let navItem = getNav('props');
@@ -37,12 +38,14 @@
37
38
  const req = input;
38
39
  input = "";
39
40
 
41
+ // console.log('console', req)
42
+
40
43
  const apiVer = $session.configuration.api_version;
41
44
  const result = await reef.fetch(`/${protocol}/${apiVer}/${req}`)
42
45
  const res = await result.text();
43
46
  prevLines = [...prevLines, res]
44
47
 
45
- updateHistory(req)
48
+ updateHistory(orgInput)
46
49
  }
47
50
  else if(e.key == 'Esc' || e.key == 'Escape')
48
51
  {
package/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export { default as Tile } from "./tile.svelte";
3
3
  export { default as Row } from "./tiles.row.svelte";
4
4
  export { default as Box } from "./form.box.svelte";
5
5
  export { default as Operations } from './operations.svelte';
6
+ export { default as Paper } from './paper.svelte';
6
7
  export { default as Layout } from './desk.svelte';
7
8
  export { default as VerticalToolbar } from './vertical.toolbar.svelte';
8
9
  export { default as HorizontalToolbar } from './horizontal.toolbar.svelte';
@@ -61,7 +62,9 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
61
62
  export { default as Paginator } from './components/paginator.svelte';
62
63
  export { default as Breadcrumb } from './components/breadcrumb.svelte';
63
64
  export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
64
- export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
65
+ export { default as EditableSpan } from './components/prose.editable.span.svelte';
66
+ export { default as EditableParagraph } from './components/prose.editable.p.svelte';
67
+ export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, isValidEmail } from './utils';
65
68
  export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
66
69
  export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
67
70
  export { data_tick_store, // tmp
package/index.js CHANGED
@@ -7,6 +7,7 @@ export { default as Row } from "./tiles.row.svelte";
7
7
  export { default as Box } from "./form.box.svelte";
8
8
  //export { default as TilesVerticalRow } from "./tiles.vertical.row.svelte";
9
9
  export { default as Operations } from './operations.svelte';
10
+ export { default as Paper } from './paper.svelte';
10
11
  export { default as Layout } from './desk.svelte';
11
12
  export { default as VerticalToolbar } from './vertical.toolbar.svelte';
12
13
  export { default as HorizontalToolbar } from './horizontal.toolbar.svelte';
@@ -67,7 +68,9 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
67
68
  export { default as Paginator } from './components/paginator.svelte';
68
69
  export { default as Breadcrumb } from './components/breadcrumb.svelte';
69
70
  export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
70
- export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
71
+ export { default as EditableSpan } from './components/prose.editable.span.svelte';
72
+ export { default as EditableParagraph } from './components/prose.editable.p.svelte';
73
+ export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, isValidEmail } from './utils';
71
74
  export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
72
75
  export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
73
76
  export { data_tick_store, // tmp
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "1.7.17",
3
+ "version": "1.7.19",
4
4
  "description": "Basic Svelte UI components for Object Reef applications",
5
5
  "devDependencies": {
6
6
  "@playwright/test": "^1.28.1",
@@ -137,6 +137,8 @@
137
137
  "./components/list/List": "./components/list/List.js",
138
138
  "./components/menu": "./components/menu.js",
139
139
  "./components/paginator.svelte": "./components/paginator.svelte",
140
+ "./components/prose.editable.p.svelte": "./components/prose.editable.p.svelte",
141
+ "./components/prose.editable.span.svelte": "./components/prose.editable.span.svelte",
140
142
  "./components/radio.svelte": "./components/radio.svelte",
141
143
  "./components/react-aria/chain": "./components/react-aria/chain.js",
142
144
  "./components/react-aria/getScrollParent": "./components/react-aria/getScrollParent.js",
@@ -175,7 +177,9 @@
175
177
  "./operations.svelte": "./operations.svelte",
176
178
  "./page.row.svelte": "./page.row.svelte",
177
179
  "./page.svelte": "./page.svelte",
180
+ "./paper.svelte": "./paper.svelte",
178
181
  "./stores": "./stores.js",
182
+ "./tenant.members.invite.svelte": "./tenant.members.invite.svelte",
179
183
  "./tenant.members.svelte": "./tenant.members.svelte",
180
184
  "./tile.svelte": "./tile.svelte",
181
185
  "./tiles.row.svelte": "./tiles.row.svelte",
package/page.svelte CHANGED
@@ -24,6 +24,7 @@
24
24
  export let toolbarOperations = undefined;
25
25
  export let clearsContext = '';
26
26
  export let title = '';
27
+ export let paper=false
27
28
 
28
29
  switch (c) {
29
30
  case 'main':
package/page.svelte.d.ts CHANGED
@@ -13,6 +13,7 @@ export default class Page extends SvelteComponentTyped<{
13
13
  focused_only?: boolean | undefined;
14
14
  inContext?: string | undefined;
15
15
  toolbarOperations?: any;
16
+ paper?: boolean | undefined;
16
17
  }, {
17
18
  [evt: string]: CustomEvent<any>;
18
19
  }, {
@@ -36,6 +37,7 @@ declare const __propDef: {
36
37
  focused_only?: boolean | undefined;
37
38
  inContext?: string | undefined;
38
39
  toolbarOperations?: any;
40
+ paper?: boolean | undefined;
39
41
  };
40
42
  events: {
41
43
  [evt: string]: CustomEvent<any>;
package/paper.svelte ADDED
@@ -0,0 +1,11 @@
1
+ <script>
2
+ let additionalClass = $$props.class ?? ''
3
+ </script>
4
+
5
+ <section class="w-full flex flex-col items-center
6
+ sm:bg-white sm:dark:bg-stone-800/40 sm:shadow-slate-700/10 sm:dark:shadow-black/10
7
+ sm:mt-6 sm:px-6 sm:py-12 sm:shadow-xl md:mx-auto sm:max-w-3xl sm:min-h-[32rem] sm:rounded
8
+ sm:ring-1 sm:ring-stone-900/5 sm:dark:ring-stone-950/20
9
+ {additionalClass}">
10
+ <slot/>
11
+ </section>
@@ -0,0 +1,27 @@
1
+ /** @typedef {typeof __propDef.props} PaperProps */
2
+ /** @typedef {typeof __propDef.events} PaperEvents */
3
+ /** @typedef {typeof __propDef.slots} PaperSlots */
4
+ export default class Paper extends SvelteComponentTyped<{
5
+ [x: string]: any;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {
9
+ default: {};
10
+ }> {
11
+ }
12
+ export type PaperProps = typeof __propDef.props;
13
+ export type PaperEvents = typeof __propDef.events;
14
+ export type PaperSlots = typeof __propDef.slots;
15
+ import { SvelteComponentTyped } from "svelte";
16
+ declare const __propDef: {
17
+ props: {
18
+ [x: string]: any;
19
+ };
20
+ events: {
21
+ [evt: string]: CustomEvent<any>;
22
+ };
23
+ slots: {
24
+ default: {};
25
+ };
26
+ };
27
+ export {};