@humandialog/forms.svelte 0.4.1 → 0.4.2

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 (8) hide show
  1. package/components/inputbox.ltop.svelte.d.ts +2 -2
  2. package/components/tile.title.svelte.d.ts +2 -2
  3. package/horizontal.toolbar.svelte +132 -95
  4. package/package.json +1 -1
  5. package/stores.d.ts +1 -0
  6. package/stores.js +8 -4
  7. package/vertical.toolbar.svelte +103 -67
  8. package/vertical.toolbar.svelte.d.ts +2 -0
package/components/inputbox.ltop.svelte.d.ts CHANGED
@@ -4,11 +4,11 @@
4
4
  export default class Inputbox extends SvelteComponentTyped<{
5
5
  [x: string]: any;
6
6
  label?: string | undefined;
7
- a?: string | undefined;
8
7
  context?: string | undefined;
9
8
  self?: null | undefined;
10
9
  c?: string | undefined;
11
10
  typename?: string | undefined;
11
+ a?: string | undefined;
12
12
  s?: string | undefined;
13
13
  placeholder?: string | undefined;
14
14
  itype?: string | undefined;
@@ -26,11 +26,11 @@ declare const __propDef: {
26
26
  props: {
27
27
  [x: string]: any;
28
28
  label?: string | undefined;
29
- a?: string | undefined;
30
29
  context?: string | undefined;
31
30
  self?: null | undefined;
32
31
  c?: string | undefined;
33
32
  typename?: string | undefined;
33
+ a?: string | undefined;
34
34
  s?: string | undefined;
35
35
  placeholder?: string | undefined;
36
36
  itype?: string | undefined;
package/components/tile.title.svelte.d.ts CHANGED
@@ -4,8 +4,8 @@
4
4
  export default class Tile extends SvelteComponentTyped<{
5
5
  [x: string]: any;
6
6
  label?: string | undefined;
7
- a?: string | undefined;
8
7
  c?: string | undefined;
8
+ a?: string | undefined;
9
9
  }, {
10
10
  [evt: string]: CustomEvent<any>;
11
11
  }, {}> {
@@ -18,8 +18,8 @@ declare const __propDef: {
18
18
  props: {
19
19
  [x: string]: any;
20
20
  label?: string | undefined;
21
- a?: string | undefined;
22
21
  c?: string | undefined;
22
+ a?: string | undefined;
23
23
  };
24
24
  events: {
25
25
  [evt: string]: CustomEvent<any>;
package/horizontal.toolbar.svelte CHANGED
@@ -6,6 +6,10 @@
6
6
  import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
7
7
  import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
8
8
  import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
9
+ import FaBars from 'svelte-icons/fa/FaBars.svelte'
10
+ import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
11
+ import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
12
+ import Menu from './components/contextmenu.svelte'
9
13
 
10
14
  import {
11
15
  dark_mode_store,
@@ -14,137 +18,170 @@
14
18
  hide_sidebar,
15
19
  tools_visible_store,
16
20
  bottom_bar_visible_store,
17
- right_sidebar_visible_store,
21
+ previously_visible_sidebar,
18
22
  main_sidebar_visible_store
19
23
  } from "./stores.js";
20
24
  import Icon from './components/icon.svelte';
21
25
  import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
26
+
27
+ import VerticalToolbar from './vertical.toolbar.svelte'
22
28
 
23
29
 
24
30
  export let app_config;
25
31
 
26
- let tabs = new Array();
27
32
  let config = null;
28
33
  let has_selection_details = false;
29
- let has_horizontal_tools = false;
30
-
34
+
31
35
  let show_sign_in_out_icons = false;
32
36
  let is_logged_in = false;
33
37
  let sign_in_href = '';
34
38
  let sign_out_href = '';
35
39
 
40
+ let tabs = [];
41
+ let icon;
42
+
36
43
  $:
37
44
  {
38
45
  config = app_config.mainToolbar;
39
46
  has_selection_details = app_config.selectionDetails;
40
- has_horizontal_tools = app_config.horizontalTools;
41
47
  is_logged_in = $session.is_active;
42
- show_sign_in_out_icons = app_config.auth ? true : false;
48
+ show_sign_in_out_icons = config.signin ? true : false;
43
49
  sign_in_href = $signin_href;
44
50
  sign_out_href = $signout_href;
45
51
 
46
- tabs = new Array();
47
-
48
- Object.keys(app_config.sidebar).forEach( (key) =>
49
- {
50
- const ctab = app_config.sidebar[key];
51
- const can_show = (ctab.authorized && is_logged_in) || (!ctab.authorized)
52
- if(can_show)
53
- tabs.push({key: key, icon: ctab.icon});
54
- });
52
+ tabs = Object.keys(app_config.sidebar);
53
+ if(tabs.length > 1)
54
+ icon = FaBars;
55
+ else
56
+ {
57
+ let first_tab = app_config.sidebar[tabs[0]];
58
+ icon = first_tab.icon;
59
+ }
60
+ }
55
61
 
56
- // there is no current visible sidebar
57
- if($main_sidebar_visible_store != '*')
62
+ function toggle_navigator(e)
63
+ {
64
+ if(tabs.length == 1)
65
+ {
66
+ toggle_sidebar(tabs[0]);
67
+ }
68
+ else
58
69
  {
59
- if(tabs.every( (e) => e.key != $main_sidebar_visible_store))
70
+ let sidebar = $main_sidebar_visible_store;
71
+ if(sidebar == "*")
60
72
  {
61
- if(tabs.length)
62
- show_sidebar(tabs[0].key);
73
+ if(!previously_visible_sidebar)
74
+ sidebar = Object.keys(app_config.sidebar)[0];
75
+ else
76
+ sidebar = previously_visible_sidebar;
77
+ }
78
+
79
+ toggle_sidebar(sidebar)
80
+ }
81
+ }
82
+
83
+ let menu;
84
+ let options_owner;
85
+
86
+ function show_options()
87
+ {
88
+ let rect = options_owner.getBoundingClientRect();
89
+ let x = rect.left;
90
+ let y = rect.bottom;
91
+ let options = [];
92
+
93
+ if(show_sign_in_out_icons)
94
+ {
95
+ if(!is_logged_in)
96
+ {
97
+ options.push({
98
+ caption: 'Sign in',
99
+ icon: FaSignInAlt,
100
+ action: (focused) => { push(sign_in_href) }
101
+ });
102
+ }
63
103
  else
64
- hide_sidebar();
104
+ {
105
+ options.push({
106
+ caption: 'Sign out',
107
+ icon: FaSignOutAlt,
108
+ action: (focused) => { push(sign_out_href) }
109
+ });
110
+ }
111
+
112
+ options.push({separator: true})
113
+
114
+ }
115
+
116
+ if(!config || config.darkMode)
117
+ {
118
+ if($dark_mode_store == '')
119
+ {
120
+ options.push( {
121
+ caption: 'Dark mode',
122
+ icon: FaToggleOff,
123
+ action: (focused) => { $dark_mode_store = 'dark'; }
124
+ });
125
+ }
126
+ else
127
+ {
128
+ options.push( {
129
+ caption: 'Dark mode',
130
+ icon: FaToggleOn,
131
+ action: (focused) => { $dark_mode_store = ''; }
132
+ });
65
133
  }
66
134
  }
135
+
136
+ if(config && config.operations)
137
+ {
138
+ options.push( {
139
+ caption: 'Toolbar',
140
+ icon: $tools_visible_store ? FaToggleOn : FaToggleOff,
141
+ action: (focused) => { $tools_visible_store = !$tools_visible_store; }
142
+ });
143
+ }
144
+
145
+ if(has_selection_details)
146
+ {
147
+ options.push( {
148
+ caption: 'Properties',
149
+ icon: $bottom_bar_visible_store ? FaToggleOn : FaToggleOff,
150
+ action: (focused) => { $bottom_bar_visible_store = !$bottom_bar_visible_store }
151
+ });
152
+ }
153
+
154
+ menu.show(x, y, options);
67
155
  }
68
156
 
69
157
  </script>
70
158
 
71
159
  <div class="mr-0 flex h-10">
72
- {#each tabs as tab}
73
- <button type="button" class=" w-16 h-full flex justify-center items-center hover:bg-orange-500"
74
- class:text-blue-300={$main_sidebar_visible_store == tab.key}
75
- on:click={()=> (toggle_sidebar(tab.key))}>
76
-
77
- <Icon size={6} component={tab.icon}/>
78
- </button>
79
- {/each}
160
+ <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
161
+ <Icon size={6} component={icon}/>
162
+ </button>
80
163
  </div>
81
164
 
82
165
  <div class="ml-auto flex h-10">
166
+
167
+ <button
168
+ class="h-full w-16 px-0 flex justify-center items-center text-slate-300 hover:text-slate-100"
169
+ on:click={()=> {show_options()}}
170
+ bind:this={options_owner}>
171
+
172
+ <Icon size={6} component={FaEllipsisH} />
173
+ </button>
174
+
83
175
 
84
- {#if show_sign_in_out_icons }
85
- {#if !is_logged_in}
86
- <a href={sign_in_href} class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500">
87
- <Icon size={6} component={FaSignInAlt}/>
88
- </a>
89
- {:else}
90
- <a href={sign_out_href} class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500">
91
- <Icon size={6} component={FaSignOutAlt}/>
92
- </a>
93
- {/if}
94
- {/if}
95
-
96
- {#if has_horizontal_tools}
97
- <button
98
- class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500"
99
- class:text-blue-300={$tools_visible_store}
100
- on:click={()=> ($tools_visible_store = !$tools_visible_store)}
101
- >
102
- <Icon size={6} component={FaTools}/>
103
- </button>
104
- {/if}
105
-
106
- {#if !config || config.darkMode }
107
- {#if $dark_mode_store == ''}
108
- <button
109
- class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500"
110
- on:click={()=> ($dark_mode_store = 'dark')}
111
- >
112
- <div class="w-6 h-6">
113
- <FaMoon />
114
- </div>
115
- </button>
116
- {:else}
117
- <button
118
- class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500"
119
- on:click={()=> ($dark_mode_store = '')}
120
- >
121
- <div class="w-6 h-6">
122
- <FaSun />
123
- </div>
124
- </button>
125
- {/if}
126
- {/if}
127
-
128
- {#if !config || config.gotoRoot }
129
- <a href='#/'>
130
- <button
131
- class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500"
132
- >
133
- <Icon size={6} component={GoPrimitiveDot} />
134
- </button>
135
- </a>
136
- {/if}
137
-
138
- {#if has_selection_details}
139
- <button
140
- class="h-full w-16 px-0 flex justify-center items-center text-slate-100 hover:bg-orange-500"
141
- class:text-blue-300={$bottom_bar_visible_store}
142
- on:click={()=> ($bottom_bar_visible_store = !$bottom_bar_visible_store)}
143
- >
144
- <div class="w-6 h-6">
145
- <FaEllipsisH />
146
- </div>
147
- </button>
148
- {/if}
149
176
 
150
- </div>
177
+ </div>
178
+
179
+ {#if tabs.length > 1 && $main_sidebar_visible_store != "*"}
180
+ <div class="block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0 overflow-hidden">
181
+ <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
182
+ <VerticalToolbar {app_config} mobile={true}/>
183
+ </div>
184
+ </div>
185
+ {/if}
186
+
187
+ <Menu bind:this={menu}/>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humandialog/forms.svelte",
3
- "version": "0.4.1",
3
+ "version": "0.4.2",
4
4
  "description": "Basic Svelte UI components for Object Reef applications",
5
5
  "devDependencies": {
6
6
  "@playwright/test": "^1.28.1",
package/stores.d.ts CHANGED
@@ -24,6 +24,7 @@ export const context_toolbar_operations: import("svelte/store").Writable<never[]
24
24
  export const page_toolbar_operations: import("svelte/store").Writable<never[]>;
25
25
  export const dark_mode_store: import("svelte/store").Writable<any>;
26
26
  export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
27
+ export let previously_visible_sidebar: string;
27
28
  export const tools_visible_store: import("svelte/store").Writable<any>;
28
29
  export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
29
30
  export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
package/stores.js CHANGED
@@ -21,12 +21,14 @@ export function has_data_item()
21
21
  }
22
22
 
23
23
 
24
- export const dark_mode_store = writable( localStorage.dark_mode || '')
24
+ export const dark_mode_store = writable( (localStorage.dark_mode) || '')
25
25
  dark_mode_store.subscribe( (value) => { localStorage.dark_mode = value } );
26
26
 
27
- export const main_sidebar_visible_store = writable(sessionStorage.main_sidebar_visible_store || '*');
27
+ export const main_sidebar_visible_store = writable((sessionStorage.main_sidebar_visible_store) || '*');
28
28
  main_sidebar_visible_store.subscribe( (value) => { sessionStorage.main_sidebar_visible_store = value });
29
29
 
30
+ export let previously_visible_sidebar = "";
31
+
30
32
  export const tools_visible_store = writable ((sessionStorage.tools_visible_store && sessionStorage.tools_visible_store == 'true') || false);
31
33
  tools_visible_store.subscribe( (value) => { sessionStorage.tools_visible_store = (value ? 'true' : '') } );
32
34
 
@@ -47,7 +49,8 @@ export function restore_defults()
47
49
 
48
50
  export function toggle_sidebar(index)
49
51
  {
50
- //console.log("ts: " + index)
52
+ previously_visible_sidebar = get(main_sidebar_visible_store);
53
+
51
54
  if(get(main_sidebar_visible_store) == index)
52
55
  main_sidebar_visible_store.set('*')
53
56
  else
@@ -64,13 +67,14 @@ export function auto_hide_sidebar()
64
67
 
65
68
  export function hide_sidebar()
66
69
  {
70
+ previously_visible_sidebar = get(main_sidebar_visible_store);
67
71
  main_sidebar_visible_store.set('*')
68
72
  //console.log("auto_hide_sidebar:" + get(main_sidebar_visible_store))
69
73
  }
70
74
 
71
75
  export function show_sidebar(index)
72
76
  {
73
- //console.log('show_sidebar:', index);
77
+ previously_visible_sidebar = get(main_sidebar_visible_store);
74
78
  main_sidebar_visible_store.set(index)
75
79
  }
76
80
 
package/vertical.toolbar.svelte CHANGED
@@ -1,11 +1,12 @@
1
1
  <script>
2
- import FaMoon from 'svelte-icons/fa/FaMoon.svelte'
3
- import FaSun from 'svelte-icons/fa/FaSun.svelte'
2
+ import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
3
+ import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
4
4
  import FaEllipsisH from 'svelte-icons/fa/FaEllipsisH.svelte'
5
5
  import FaTools from 'svelte-icons/fa/FaTools.svelte'
6
6
  import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
7
7
  import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
8
8
  import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
9
+ import Menu from './components/contextmenu.svelte'
9
10
 
10
11
  import {dark_mode_store,
11
12
  toggle_sidebar,
@@ -17,8 +18,10 @@
17
18
  main_sidebar_visible_store} from "./stores.js";
18
19
  import Icon from './components/icon.svelte';
19
20
  import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
21
+ import { push } from 'svelte-spa-router';
20
22
 
21
23
  export let app_config;
24
+ export let mobile=false;
22
25
 
23
26
 
24
27
  let tabs = new Array();
@@ -34,7 +37,7 @@
34
37
  config = app_config.mainToolbar;
35
38
  has_selection_details = app_config.selectionDetails;
36
39
  is_logged_in = $session.is_active;
37
- show_sign_in_out_icons = app_config.auth ? true : false;
40
+ show_sign_in_out_icons = config.signin ? true : false;
38
41
  sign_in_href = $signin_href;
39
42
  sign_out_href = $signout_href;
40
43
 
@@ -62,85 +65,118 @@
62
65
 
63
66
  }
64
67
 
68
+ function on_tab_clicked(key)
69
+ {
70
+ if(!mobile)
71
+ toggle_sidebar(key);
72
+ else
73
+ show_sidebar(key);
74
+ }
75
+
76
+ let menu;
77
+ let options_owner;
78
+
79
+ function show_options()
80
+ {
81
+ let rect = options_owner.getBoundingClientRect();
82
+ let x = rect.right;
83
+ let y = rect.top;
84
+ let options = [];
85
+
86
+ if(show_sign_in_out_icons)
87
+ {
88
+ if(!is_logged_in)
89
+ {
90
+ options.push({
91
+ caption: 'Sign in',
92
+ icon: FaSignInAlt,
93
+ action: (focused) => { push(sign_in_href) }
94
+ });
95
+ }
96
+ else
97
+ {
98
+ options.push({
99
+ caption: 'Sign out',
100
+ icon: FaSignOutAlt,
101
+ action: (focused) => { push(sign_out_href) }
102
+ });
103
+ }
104
+
105
+ options.push({separator: true})
106
+
107
+ }
108
+
109
+ if(!config || config.darkMode)
110
+ {
111
+ if($dark_mode_store == '')
112
+ {
113
+ options.push( {
114
+ caption: 'Dark mode',
115
+ icon: FaToggleOff,
116
+ action: (focused) => { $dark_mode_store = 'dark'; }
117
+ });
118
+ }
119
+ else
120
+ {
121
+ options.push( {
122
+ caption: 'Dark mode',
123
+ icon: FaToggleOn,
124
+ action: (focused) => { $dark_mode_store = ''; }
125
+ });
126
+ }
127
+ }
128
+
129
+ if(config && config.operations)
130
+ {
131
+ options.push( {
132
+ caption: 'Toolbar',
133
+ icon: $tools_visible_store ? FaToggleOn : FaToggleOff,
134
+ action: (focused) => { $tools_visible_store = !$tools_visible_store; }
135
+ });
136
+ }
137
+
138
+ if(has_selection_details)
139
+ {
140
+ options.push( {
141
+ caption: 'Properties',
142
+ icon: $bottom_bar_visible_store ? FaToggleOn : FaToggleOff,
143
+ action: (focused) => { $bottom_bar_visible_store = !$bottom_bar_visible_store }
144
+ });
145
+ }
146
+
147
+ menu.show(x, y, options);
148
+ }
149
+
65
150
  </script>
66
151
 
67
152
 
68
153
  <div class="px-0 w-10">
69
154
  {#each tabs as tab}
155
+ {@const is_selected = $main_sidebar_visible_store == tab.key}
70
156
  <button
71
- class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
72
- class:text-blue-300={$main_sidebar_visible_store == tab.key}
73
- on:click={()=> (toggle_sidebar(tab.key))}>
157
+ class="h-16 px-0 flex justify-center items-center w-full text-slate-300 hover:text-slate-100"
158
+ class:bg-orange-500={is_selected}
159
+ on:click={()=> (on_tab_clicked(tab.key))}>
74
160
 
75
161
  <Icon size={6} component={tab.icon}/>
76
162
  </button>
77
163
  {/each}
78
164
  </div>
79
165
 
80
- <div class="mt-auto h-auto items-center w-full">
81
-
82
- {#if show_sign_in_out_icons }
83
- {#if !is_logged_in}
84
- <a href={sign_in_href} class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500">
85
- <Icon size={6} component={FaSignInAlt}/>
86
- </a>
87
- {:else}
88
- <a href={sign_out_href} class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500">
89
- <Icon size={6} component={FaSignOutAlt}/>
90
- </a>
91
- {/if}
92
- {/if}
93
-
94
- {#if config && config.operations}
95
- <button
96
- class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
97
- class:text-blue-300={$tools_visible_store}
98
- on:click={()=> ($tools_visible_store = !$tools_visible_store)}
99
- >
100
-
101
- <Icon size={6} component={FaTools}/>
102
- </button>
103
- {/if}
104
-
105
- {#if !config || config.darkMode }
106
- {#if $dark_mode_store == ''}
107
- <button
108
- class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
109
- on:click={()=> ($dark_mode_store = 'dark')}
110
- >
111
- <Icon size={6} component={FaMoon} />
112
- </button>
113
- {:else}
114
- <button
115
- class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
116
- on:click={()=> ($dark_mode_store = '')}
117
- >
118
- <Icon size={6} component={FaSun} />
119
-
120
- </button>
121
- {/if}
122
- {/if}
123
-
124
- {#if !config || config.gotoRoot }
125
- <a href='#/'>
126
- <button
127
- class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
128
- >
129
- <Icon size={6} component={GoPrimitiveDot} />
130
- </button>
131
- </a>
132
- {/if}
133
-
134
- {#if has_selection_details}
166
+ {#if !mobile}
167
+
168
+ <div class="mt-auto h-auto items-center w-full">
169
+
135
170
  <button
136
- class="h-16 px-0 flex justify-center items-center w-full text-slate-200 hover:bg-orange-500"
137
- class:text-blue-300={$bottom_bar_visible_store}
138
- on:click={()=> ($bottom_bar_visible_store = !$bottom_bar_visible_store)}
139
- >
171
+ class="h-16 px-0 flex justify-center items-center w-full text-slate-300 hover:text-slate-100"
172
+ on:click={()=> {show_options()}}
173
+ bind:this={options_owner}>
140
174
 
141
175
  <Icon size={6} component={FaEllipsisH} />
142
176
  </button>
143
- {/if}
144
177
 
145
- </div>
178
+ </div>
179
+ {/if} <!-- !mobile -->
180
+
146
181
 
182
+ <Menu bind:this={menu}/>
package/vertical.toolbar.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  /** @typedef {typeof __propDef.slots} VerticalSlots */
4
4
  export default class Vertical extends SvelteComponentTyped<{
5
5
  app_config: any;
6
+ mobile?: boolean | undefined;
6
7
  }, {
7
8
  [evt: string]: CustomEvent<any>;
8
9
  }, {}> {
@@ -14,6 +15,7 @@ import { SvelteComponentTyped } from "svelte";
14
15
  declare const __propDef: {
15
16
  props: {
16
17
  app_config: any;
18
+ mobile?: boolean | undefined;
17
19
  };
18
20
  events: {
19
21
  [evt: string]: CustomEvent<any>;