@cloudparker/moldex.js 0.0.60 → 0.0.62

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.
@@ -43,7 +43,7 @@ export declare function openLoadingDialog({ msg, loadingDialogContainerClassName
43
43
  openDialog: () => void;
44
44
  closeDialog: (value?: any) => Promise<any>;
45
45
  setResult: (value: any) => void;
46
- setOkDisabled: (value: boolean) => void;
46
+ setOkEnabled: (value: boolean) => void;
47
47
  setOkSpinner: (value: boolean) => void;
48
48
  setOnData: (listener: (data: any) => void) => void;
49
49
  setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: import("../../views").DialogExportsType) => void) => void;
@@ -106,7 +106,7 @@ export async function openTextFieldDialog({ title, value, label, name, maxlength
106
106
  hasFooterCloseButton: true,
107
107
  hasFooterOkButton: true,
108
108
  footerOkButtonType: 'submit',
109
- submitButtonFormId: 'text-field-dialog-form'
109
+ targetFormId: 'text-field-dialog-form'
110
110
  });
111
111
  }
112
112
  export async function openTextareaFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
@@ -124,7 +124,7 @@ export async function openTextareaFieldDialog({ title, value, label, name, maxle
124
124
  hasFooterCloseButton: true,
125
125
  hasFooterOkButton: true,
126
126
  footerOkButtonType: 'submit',
127
- submitButtonFormId: 'textarea-field-dialog-form'
127
+ targetFormId: 'textarea-field-dialog-form'
128
128
  });
129
129
  }
130
130
  export async function openLoadingDialog({ msg = "Please wait...", loadingDialogContainerClassName, loadingDialogClassName, loadingDialogSpinnerClassName, loadingDialogMsgClassName, ...params } = {}) {
@@ -1,28 +1,6 @@
1
1
  <script lang="ts" module>
2
- </script>
3
-
4
- <script lang="ts">
5
- import '../../../../../tailwind.css';
6
-
7
- import { ripple } from '../../../../../actions/ripple.js';
8
-
9
- import {
10
- Icon,
11
- mdiCheckCircle,
12
- mdiCheckCircleOutline,
13
- mdiChevronDown
14
- } from '../../../icon';
15
- import type { Snippet } from 'svelte';
16
- import type { ListItemType } from '../button-list-item/button-list-item.svelte';
17
- import ButtonListItem from '../button-list-item/button-list-item.svelte';
18
- import Button from '../button/button.svelte';
19
-
20
- class MenuStateEnum {
21
- static OPENED = 'OPENED';
22
- static CLOSED = 'CLOSED';
23
- }
24
-
25
- type PropsType = {
2
+ export type ButtonMenuProps = {
3
+ innerClassName?: string;
26
4
  backgropClassName?: string;
27
5
  buttonSnippet?: Snippet;
28
6
  checkClassName?: string;
@@ -54,7 +32,7 @@
54
32
  menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
55
33
  menuItemSnippet?: Snippet<[ListItemType, number]>;
56
34
  menus?: string[] | ListItemType[];
57
- omMenu?: (ev: MouseEvent, item: string | ListItemType, index?: number) => void;
35
+ onMenu?: (ev: MouseEvent, item: string | ListItemType, index?: number) => void;
58
36
  rightIconClassName?: string;
59
37
  rightIconPath?: string;
60
38
  screenOnlyDesc?: string;
@@ -64,6 +42,28 @@
64
42
  uncheckIconClassName?: string;
65
43
  uncheckIconPath?: string;
66
44
  };
45
+ </script>
46
+
47
+ <script lang="ts">
48
+ import '../../../../../tailwind.css';
49
+
50
+ import { ripple } from '../../../../../actions/ripple.js';
51
+
52
+ import {
53
+ Icon,
54
+ mdiCheckCircle,
55
+ mdiCheckCircleOutline,
56
+ mdiChevronDown
57
+ } from '../../../icon';
58
+ import type { Snippet } from 'svelte';
59
+ import type { ListItemType } from '../button-list-item/button-list-item.svelte';
60
+ import ButtonListItem from '../button-list-item/button-list-item.svelte';
61
+ import Button from '../button/button.svelte';
62
+
63
+ class MenuStateEnum {
64
+ static OPENED = 'OPENED';
65
+ static CLOSED = 'CLOSED';
66
+ }
67
67
 
68
68
  let {
69
69
  backgropClassName = '',
@@ -73,6 +73,7 @@
73
73
  checkIconPath = mdiCheckCircle,
74
74
  children,
75
75
  className = '',
76
+ innerClassName = '',
76
77
  containerClassName = '',
77
78
  dividerClassName = '',
78
79
  dropdownClassName = '',
@@ -96,7 +97,7 @@
96
97
  menuItemInnerSnippet,
97
98
  menuItemSnippet,
98
99
  menus = [],
99
- omMenu = (ev: MouseEvent, item: string | ListItemType, index?: number) => {},
100
+ onMenu = (ev: MouseEvent, item: string | ListItemType, index?: number) => {},
100
101
  rightIconClassName = '',
101
102
  rightIconPath = '',
102
103
  screenOnlyDesc = 'Menu',
@@ -105,7 +106,7 @@
105
106
  titleClassName = '',
106
107
  uncheckIconClassName = '',
107
108
  uncheckIconPath = mdiCheckCircleOutline
108
- }: PropsType = $props();
109
+ }: ButtonMenuProps = $props();
109
110
 
110
111
  let expanded = $state(false);
111
112
  let dropdownState: MenuStateEnum = $state(MenuStateEnum.CLOSED);
@@ -141,11 +142,11 @@
141
142
 
142
143
  function handlemenuItemClick(ev: MouseEvent, menu: ListItemType, index: number) {
143
144
  hendleToggleDropdown(ev);
144
- if (omMenu) {
145
+ if (onMenu) {
145
146
  let item = menus[index];
146
147
 
147
148
  if (item) {
148
- omMenu(ev, item, index);
149
+ onMenu(ev, item, index);
149
150
  }
150
151
  selectedMenu = menu;
151
152
  }
@@ -160,7 +161,7 @@
160
161
  onClick={hendleToggleDropdown}
161
162
  >
162
163
  <span class="sr-only">{screenOnlyDesc}</span>
163
- <div class="flex items-center flex-nowrap gap-2">
164
+ <div class="flex items-center flex-nowrap {innerClassName}">
164
165
  {#if buttonSnippet}
165
166
  {@render buttonSnippet()}
166
167
  {:else}
@@ -186,6 +187,7 @@
186
187
  </Button>
187
188
  {#if dropdownState == MenuStateEnum.OPENED}
188
189
  <button
190
+ aria-label="backdrop"
189
191
  type="button"
190
192
  id="{id}-menu-backdrop"
191
193
  class="cursor-auto fixed inset-0 z-10 {backgropClassName}"
@@ -1,20 +1,5 @@
1
- import '../../../../../tailwind.css';
2
- import type { Snippet } from 'svelte';
3
- import type { ListItemType } from '../button-list-item/button-list-item.svelte';
4
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
- $$bindings?: Bindings;
7
- } & Exports;
8
- (internal: unknown, props: Props & {
9
- $$events?: Events;
10
- $$slots?: Slots;
11
- }): Exports & {
12
- $set?: any;
13
- $on?: any;
14
- };
15
- z_$$bindings?: Bindings;
16
- }
17
- declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
1
+ export type ButtonMenuProps = {
2
+ innerClassName?: string;
18
3
  backgropClassName?: string;
19
4
  buttonSnippet?: Snippet;
20
5
  checkClassName?: string;
@@ -46,7 +31,7 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
46
31
  menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
47
32
  menuItemSnippet?: Snippet<[ListItemType, number]>;
48
33
  menus?: string[] | ListItemType[];
49
- omMenu?: (ev: MouseEvent, item: string | ListItemType, index?: number) => void;
34
+ onMenu?: (ev: MouseEvent, item: string | ListItemType, index?: number) => void;
50
35
  rightIconClassName?: string;
51
36
  rightIconPath?: string;
52
37
  screenOnlyDesc?: string;
@@ -54,7 +39,24 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
54
39
  titleClassName?: string;
55
40
  uncheckIconClassName?: string;
56
41
  uncheckIconPath?: string;
57
- }, {
42
+ };
43
+ import '../../../../../tailwind.css';
44
+ import type { Snippet } from 'svelte';
45
+ import type { ListItemType } from '../button-list-item/button-list-item.svelte';
46
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
47
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
48
+ $$bindings?: Bindings;
49
+ } & Exports;
50
+ (internal: unknown, props: Props & {
51
+ $$events?: Events;
52
+ $$slots?: Slots;
53
+ }): Exports & {
54
+ $set?: any;
55
+ $on?: any;
56
+ };
57
+ z_$$bindings?: Bindings;
58
+ }
59
+ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<ButtonMenuProps, {
58
60
  [evt: string]: CustomEvent<any>;
59
61
  }, {}, {}, "">;
60
62
  type ButtonMenu = InstanceType<typeof ButtonMenu>;
@@ -1,8 +1,11 @@
1
- import Button from './components/button/button.svelte';
2
1
  import ButtonBack from './components/button-back/button-back.svelte';
3
- import ButtonClose from './components/button-close/button-close.svelte';
4
2
  import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
3
+ import ButtonClose from './components/button-close/button-close.svelte';
5
4
  import ButtonListItem from './components/button-list-item/button-list-item.svelte';
6
5
  import ButtonMenu from './components/button-menu/button-menu.svelte';
7
6
  import ButtonOk from './components/button-ok/button-ok.svelte';
7
+ import Button from './components/button/button.svelte';
8
+ import type { ListItemType } from './components/button-list-item/button-list-item.svelte';
9
+ import type { ButtonMenuProps } from './components/button-menu/button-menu.svelte';
10
+ export type { ListItemType, ButtonMenuProps };
8
11
  export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonMenu, ButtonOk };
@@ -5,14 +5,4 @@ import ButtonListItem from './components/button-list-item/button-list-item.svelt
5
5
  import ButtonMenu from './components/button-menu/button-menu.svelte';
6
6
  import ButtonOk from './components/button-ok/button-ok.svelte';
7
7
  import Button from './components/button/button.svelte';
8
-
9
- export {
10
- Button,
11
- ButtonBack,
12
- ButtonClose,
13
- ButtonCloseIcon,
14
- ButtonListItem,
15
- ButtonMenu,
16
- ButtonOk
17
- };
18
-
8
+ export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonMenu, ButtonOk };
@@ -25,7 +25,7 @@
25
25
  footerCloseButtonClassName?: string;
26
26
  footerCloseButtonLabel?: string;
27
27
  footerOkButtonClassName?: string;
28
- footerOkButtonDisabled?: boolean;
28
+ footerOkButtonEnabled?: boolean;
29
29
  footerOkButtonSpinner?: boolean;
30
30
  footerOkButtonType?: 'button' | 'submit' | 'reset';
31
31
  footerOkButtonLable?: string;
@@ -56,7 +56,7 @@
56
56
  onData?: (data: any) => void;
57
57
  props?: any;
58
58
  size?: DialogSizeType;
59
- submitButtonFormId?: string;
59
+ targetFormId?: string;
60
60
  subtitle?: string;
61
61
  subtitleClassName?: string;
62
62
  title?: string;
@@ -67,7 +67,7 @@
67
67
  closeDialog: () => void;
68
68
  setResult: (value: any) => void;
69
69
  setOkSpinner: (value: boolean) => void;
70
- setOkDisabled: (value: boolean) => void;
70
+ setOkEnabled: (value: boolean) => void;
71
71
  setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
72
72
  setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
73
73
  setOnData: (listener: (data: any) => void) => void;
@@ -79,6 +79,7 @@
79
79
  import { type Component as ComponetType, type Snippet } from 'svelte';
80
80
  import '../../../../../tailwind.css';
81
81
  import { mdiArrowLeft, mdiClose } from '../../../icon';
82
+ import { isMobileScreen } from '../../../../../services';
82
83
 
83
84
  let {
84
85
  backdropClassName = '',
@@ -94,7 +95,7 @@
94
95
  footerCloseButtonClassName = '',
95
96
  footerCloseButtonLabel = 'Close',
96
97
  footerOkButtonClassName = '',
97
- footerOkButtonDisabled = false,
98
+ footerOkButtonEnabled = false,
98
99
  footerOkButtonSpinner = false,
99
100
  footerOkButtonType = 'button',
100
101
  footerOkButtonLable = 'Save',
@@ -104,8 +105,7 @@
104
105
  hasFooterOkButton = false,
105
106
  hasFooterShadow = false,
106
107
  hasHeader = false,
107
- hasHeaderBack = false,
108
- hasHeaderClose = false,
108
+
109
109
  hasHeaderShadow = false,
110
110
  hasSubtitle = false,
111
111
  hasTitle = false,
@@ -116,6 +116,9 @@
116
116
  headerCloseButtonClassName = '',
117
117
  headerCloseIconClassName = '',
118
118
  headerCloseIconPath = mdiClose,
119
+ hasHeaderBack = isMobileScreen(),
120
+ hasHeaderClose = !isMobileScreen(),
121
+ size = isMobileScreen() ? 'full' : 'sm',
119
122
  headerSnippet,
120
123
  id = '',
121
124
  onClose,
@@ -124,8 +127,7 @@
124
127
  onResult,
125
128
  onData,
126
129
  props = {},
127
- size = 'sm',
128
- submitButtonFormId = undefined,
130
+ targetFormId = undefined,
129
131
  subtitle = '',
130
132
  subtitleClassName = '',
131
133
  title = '',
@@ -136,7 +138,7 @@
136
138
  closeDialog,
137
139
  setResult,
138
140
  setOkSpinner,
139
- setOkDisabled,
141
+ setOkEnabled,
140
142
  setOnCloseClick,
141
143
  setOnOkClick,
142
144
  setOnData
@@ -198,8 +200,8 @@
198
200
  result = value;
199
201
  }
200
202
 
201
- export function setOkDisabled(value: boolean) {
202
- footerOkButtonDisabled = value;
203
+ export function setOkEnabled(value: boolean) {
204
+ footerOkButtonEnabled = value;
203
205
  }
204
206
 
205
207
  export function setOkSpinner(value: boolean) {
@@ -298,10 +300,14 @@
298
300
  </div>
299
301
  <div class="py-2">
300
302
  {#if hasTitle}
301
- <div class="text-xl text-base-800 dark:text-base-300 {titleClassName}">{title || ''}</div>
303
+ <div class="text-xl text-base-800 dark:text-base-300 {titleClassName}">
304
+ {title || ''}
305
+ </div>
302
306
  {/if}
303
307
  {#if hasSubtitle}
304
- <div class="text-sm text-gray-500 dark:text-base-500 {subtitleClassName}">{subtitle || ''}</div>
308
+ <div class="text-sm text-gray-500 dark:text-base-500 {subtitleClassName}">
309
+ {subtitle || ''}
310
+ </div>
305
311
  {/if}
306
312
  </div>
307
313
  <div class="flex-grow">
@@ -346,12 +352,12 @@
346
352
  {#if hasFooterOkButton}
347
353
  <Button
348
354
  id="btn-ok"
349
- form={submitButtonFormId}
350
- type={submitButtonFormId ? 'submit' : footerOkButtonType}
355
+ form={targetFormId}
356
+ type={targetFormId ? 'submit' : footerOkButtonType}
351
357
  appearance="primary"
352
358
  className=" {footerOkButtonClassName}"
353
359
  label={footerOkButtonLable}
354
- disabled={footerOkButtonDisabled}
360
+ disabled={!footerOkButtonEnabled}
355
361
  spinner={footerOkButtonSpinner}
356
362
  spinnerClassName="text-white w-4 h-4"
357
363
  onClick={handleOkClick}
@@ -19,7 +19,7 @@ export type DialogPropsType = {
19
19
  footerCloseButtonClassName?: string;
20
20
  footerCloseButtonLabel?: string;
21
21
  footerOkButtonClassName?: string;
22
- footerOkButtonDisabled?: boolean;
22
+ footerOkButtonEnabled?: boolean;
23
23
  footerOkButtonSpinner?: boolean;
24
24
  footerOkButtonType?: 'button' | 'submit' | 'reset';
25
25
  footerOkButtonLable?: string;
@@ -50,7 +50,7 @@ export type DialogPropsType = {
50
50
  onData?: (data: any) => void;
51
51
  props?: any;
52
52
  size?: DialogSizeType;
53
- submitButtonFormId?: string;
53
+ targetFormId?: string;
54
54
  subtitle?: string;
55
55
  subtitleClassName?: string;
56
56
  title?: string;
@@ -60,7 +60,7 @@ export type DialogExportsType = {
60
60
  closeDialog: () => void;
61
61
  setResult: (value: any) => void;
62
62
  setOkSpinner: (value: boolean) => void;
63
- setOkDisabled: (value: boolean) => void;
63
+ setOkEnabled: (value: boolean) => void;
64
64
  setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
65
65
  setOnCloseClick: (onclick: DialogCloseButtonClickType) => void;
66
66
  setOnData: (listener: (data: any) => void) => void;
@@ -87,7 +87,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogPropsType, {
87
87
  openDialog: () => void;
88
88
  closeDialog: (value?: any) => Promise<any>;
89
89
  setResult: (value: any) => void;
90
- setOkDisabled: (value: boolean) => void;
90
+ setOkEnabled: (value: boolean) => void;
91
91
  setOkSpinner: (value: boolean) => void;
92
92
  setOnData: (listener: (data: any) => void) => void;
93
93
  setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: DialogExportsType) => void) => void;
@@ -1,11 +1,5 @@
1
- <script lang="ts">
2
- import ButtonBack from '../../../button/components/button-back/button-back.svelte';
3
- import Button from '../../../button/components/button/button.svelte';
4
- import { Icon, mdiMenu } from '../../../icon';
5
- import type { Snippet } from 'svelte';
6
- import '../../../../../tailwind.css';
7
-
8
- type PropsType = {
1
+ <script module lang="ts">
2
+ export type NavbarProps = {
9
3
  disabledLogo?: boolean;
10
4
  backIconPath?: string;
11
5
  backButtonClassName?: string;
@@ -39,6 +33,14 @@
39
33
  title?: string;
40
34
  titleClassName?: string;
41
35
  };
36
+ </script>
37
+
38
+ <script lang="ts">
39
+ import ButtonBack from '../../../button/components/button-back/button-back.svelte';
40
+ import Button from '../../../button/components/button/button.svelte';
41
+ import { Icon, mdiMenu } from '../../../icon';
42
+ import type { Snippet } from 'svelte';
43
+ import '../../../../../tailwind.css';
42
44
 
43
45
  let {
44
46
  disabledLogo,
@@ -73,7 +75,7 @@
73
75
  subtitleClassName = '',
74
76
  title = '',
75
77
  titleClassName = ''
76
- }: PropsType = $props();
78
+ }: NavbarProps = $props();
77
79
  </script>
78
80
 
79
81
  <nav
@@ -1,19 +1,4 @@
1
- import type { Snippet } from 'svelte';
2
- import '../../../../../tailwind.css';
3
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
4
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
5
- $$bindings?: Bindings;
6
- } & Exports;
7
- (internal: unknown, props: Props & {
8
- $$events?: Events;
9
- $$slots?: Slots;
10
- }): Exports & {
11
- $set?: any;
12
- $on?: any;
13
- };
14
- z_$$bindings?: Bindings;
15
- }
16
- declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
1
+ export type NavbarProps = {
17
2
  disabledLogo?: boolean;
18
3
  backIconPath?: string;
19
4
  backButtonClassName?: string;
@@ -36,7 +21,7 @@ declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
36
21
  logoImgClassName?: string;
37
22
  logoImgSrc?: string;
38
23
  moreIconPath?: string;
39
- morePosition?: "left" | "right";
24
+ morePosition?: 'left' | 'right';
40
25
  onLogo?: () => void;
41
26
  onMore?: () => void;
42
27
  onBack?: () => void;
@@ -46,7 +31,23 @@ declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
46
31
  subtitleClassName?: string;
47
32
  title?: string;
48
33
  titleClassName?: string;
49
- }, {
34
+ };
35
+ import type { Snippet } from 'svelte';
36
+ import '../../../../../tailwind.css';
37
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
38
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
39
+ $$bindings?: Bindings;
40
+ } & Exports;
41
+ (internal: unknown, props: Props & {
42
+ $$events?: Events;
43
+ $$slots?: Slots;
44
+ }): Exports & {
45
+ $set?: any;
46
+ $on?: any;
47
+ };
48
+ z_$$bindings?: Bindings;
49
+ }
50
+ declare const Navbar: $$__sveltets_2_IsomorphicComponent<NavbarProps, {
50
51
  [evt: string]: CustomEvent<any>;
51
52
  }, {}, {}, "">;
52
53
  type Navbar = InstanceType<typeof Navbar>;
@@ -1,2 +1,4 @@
1
1
  import Navbar from "./components/navbar/navbar.svelte";
2
+ import { type NavbarProps } from "./components/navbar/navbar.svelte";
3
+ export type { NavbarProps, };
2
4
  export { Navbar };
@@ -1,2 +1,3 @@
1
1
  import Navbar from "./components/navbar/navbar.svelte";
2
+ import {} from "./components/navbar/navbar.svelte";
2
3
  export { Navbar };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudparker/moldex.js",
3
- "version": "0.0.60",
3
+ "version": "0.0.62",
4
4
  "author": "cloudparker.com",
5
5
  "license": "MIT",
6
6
  "keywords": [