@cloudparker/moldex.js 0.0.65 → 0.0.67

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 (94) hide show
  1. package/dist/services/dialog/dialog-service.d.ts +11 -11
  2. package/dist/services/navigation/navigation-service.d.ts +17 -0
  3. package/dist/services/navigation/navigation-service.js +38 -0
  4. package/dist/services/utils/melody-service.d.ts +5 -0
  5. package/dist/services/utils/melody-service.js +41 -0
  6. package/dist/tailwind.css +1 -1
  7. package/dist/views/core/button/components/button/button.svelte +84 -133
  8. package/dist/views/core/button/components/button/button.svelte.d.ts +8 -7
  9. package/dist/views/core/button/components/button-back/button-back.svelte +16 -29
  10. package/dist/views/core/button/components/button-close/button-close.svelte +2 -4
  11. package/dist/views/core/button/components/button-close/button-close.svelte.d.ts +2 -2
  12. package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte +16 -30
  13. package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte +86 -0
  14. package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte.d.ts +38 -0
  15. package/dist/views/core/button/components/button-list-item/button-list-item.svelte +65 -132
  16. package/dist/views/core/button/components/button-list-item/button-list-item.svelte.d.ts +22 -31
  17. package/dist/views/core/button/components/button-menu/button-menu.svelte +72 -235
  18. package/dist/views/core/button/components/button-menu/button-menu.svelte.d.ts +23 -43
  19. package/dist/views/core/button/components/button-ok/button-ok.svelte +2 -4
  20. package/dist/views/core/button/components/button-ok/button-ok.svelte.d.ts +2 -2
  21. package/dist/views/core/button/components/button-search/button-search.svelte +39 -0
  22. package/dist/views/core/button/components/button-search/button-search.svelte.d.ts +31 -0
  23. package/dist/views/core/button/index.d.ts +8 -5
  24. package/dist/views/core/button/index.js +4 -2
  25. package/dist/views/core/content-area/components/content-area.svelte +27 -40
  26. package/dist/views/core/dialog/components/cropper-dialog/cropper-dialog.svelte +33 -49
  27. package/dist/views/core/dialog/components/dialog/dialog.svelte +164 -263
  28. package/dist/views/core/dialog/components/dialog/dialog.svelte.d.ts +12 -12
  29. package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte +112 -158
  30. package/dist/views/core/dialog/components/loading-dialog/loading-dialog.svelte +18 -30
  31. package/dist/views/core/dialog/components/msg-dialog/msg-dialog.svelte +13 -22
  32. package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte +35 -41
  33. package/dist/views/core/dialog/components/text-field-dialog/text-field-dialog.svelte.d.ts +2 -2
  34. package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte +25 -40
  35. package/dist/views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte.d.ts +2 -2
  36. package/dist/views/core/dialog/index.d.ts +2 -2
  37. package/dist/views/core/drawer/components/drawer/drawer.svelte +35 -57
  38. package/dist/views/core/icon/components/icon/icon.svelte +14 -26
  39. package/dist/views/core/icon/services/icon-path-service.d.ts +1 -0
  40. package/dist/views/core/icon/services/icon-path-service.js +1 -0
  41. package/dist/views/core/input/components/checkbox-field/checkbox-field.svelte +25 -44
  42. package/dist/views/core/input/components/color-field/color-field.svelte +69 -81
  43. package/dist/views/core/input/components/color-field/color-field.svelte.d.ts +2 -2
  44. package/dist/views/core/input/components/combobox-field/combobox-field.svelte +256 -331
  45. package/dist/views/core/input/components/combobox-field/combobox-field.svelte.d.ts +18 -17
  46. package/dist/views/core/input/components/date-field/date-field.svelte +30 -39
  47. package/dist/views/core/input/components/date-field/date-field.svelte.d.ts +2 -2
  48. package/dist/views/core/input/components/datetime-field/datetime-field.svelte +12 -18
  49. package/dist/views/core/input/components/datetime-field/datetime-field.svelte.d.ts +2 -2
  50. package/dist/views/core/input/components/email-field/email-field.svelte +12 -17
  51. package/dist/views/core/input/components/email-field/email-field.svelte.d.ts +2 -2
  52. package/dist/views/core/input/components/file-field/file-field.svelte +64 -78
  53. package/dist/views/core/input/components/file-field/file-field.svelte.d.ts +2 -2
  54. package/dist/views/core/input/components/input-field/input-field.svelte +159 -261
  55. package/dist/views/core/input/components/input-field/input-field.svelte.d.ts +8 -8
  56. package/dist/views/core/input/components/label/label.svelte +10 -24
  57. package/dist/views/core/input/components/number-field/number-field.svelte +12 -18
  58. package/dist/views/core/input/components/number-field/number-field.svelte.d.ts +2 -2
  59. package/dist/views/core/input/components/password-field/password-field.svelte +57 -70
  60. package/dist/views/core/input/components/password-field/password-field.svelte.d.ts +2 -2
  61. package/dist/views/core/input/components/phone-field/phone-field.svelte +118 -172
  62. package/dist/views/core/input/components/phone-field/phone-field.svelte.d.ts +2 -2
  63. package/dist/views/core/input/components/radio-field/radio-field.svelte +53 -84
  64. package/dist/views/core/input/components/radio-field/radio-field.svelte.d.ts +7 -7
  65. package/dist/views/core/input/components/range-field/range-field.svelte +42 -66
  66. package/dist/views/core/input/components/range-field/range-field.svelte.d.ts +2 -2
  67. package/dist/views/core/input/components/search-field/search-field.svelte +45 -62
  68. package/dist/views/core/input/components/search-field/search-field.svelte.d.ts +2 -2
  69. package/dist/views/core/input/components/text-field/text-field.svelte +16 -21
  70. package/dist/views/core/input/components/text-field/text-field.svelte.d.ts +2 -2
  71. package/dist/views/core/input/components/textarea-field/textarea-field.svelte +12 -17
  72. package/dist/views/core/input/components/textarea-field/textarea-field.svelte.d.ts +2 -2
  73. package/dist/views/core/input/components/time-field/time-field.svelte +12 -17
  74. package/dist/views/core/input/components/time-field/time-field.svelte.d.ts +2 -2
  75. package/dist/views/core/input/index.d.ts +4 -3
  76. package/dist/views/core/navbar/components/navbar/navbar.svelte +39 -77
  77. package/dist/views/core/no-data/components/no-data/no-data.svelte +20 -37
  78. package/dist/views/core/pagination/components/pagination/pagination.svelte +73 -102
  79. package/dist/views/core/progressbar/components/progressbar/progressbar.svelte +23 -37
  80. package/dist/views/core/ruler/components/vertical-ruler/verticcal-ruler.svelte +2 -6
  81. package/dist/views/core/screen-detector/components/screen-detector.svelte +9 -13
  82. package/dist/views/core/sidebar/components/sidebar.svelte +23 -36
  83. package/dist/views/core/spinner/components/spinner/spinner.svelte +2 -7
  84. package/dist/views/core/text/components/text-await/text-await.svelte +2 -8
  85. package/dist/views/core/text/components/text-copy/text-copy.svelte +17 -28
  86. package/dist/views/core/text/components/text-country/text-country.svelte +29 -41
  87. package/dist/views/core/text/components/text-country-state/text-country-state.svelte +29 -37
  88. package/dist/views/core/text/components/text-currency/text-currency.svelte +10 -21
  89. package/dist/views/core/text/components/text-date/text-date.svelte +21 -33
  90. package/dist/views/core/text/components/text-email/text-email.svelte +4 -13
  91. package/dist/views/core/text/components/text-html/text-html.svelte +2 -3
  92. package/dist/views/core/text/components/text-phone/text-phone.svelte +4 -13
  93. package/dist/views/core/toast/components/toast/toast.svelte +21 -44
  94. package/package.json +1 -1
@@ -1,29 +1,17 @@
1
- <script lang="ts">
2
- import ColorField from '../../../input/components/color-field/color-field.svelte';
3
- import '../../../../../tailwind.css';
4
- type IconPropsType = {
5
- path: string;
6
- className?: string;
7
- sizeClassName?: string;
8
- size?: number;
9
- fill?: string;
10
- viewBox?: string;
11
- color?: string;
12
- };
13
-
14
- let {
15
- path,
16
- className = '',
17
- size = 24,
18
- fill = 'currentColor',
19
- viewBox = '',
20
- color,
21
- sizeClassName = 'w-6 h-6'
22
- }: IconPropsType = $props();
23
-
24
- $effect(() => {
25
- viewBox = viewBox || `0 0 ${size} ${size}`;
26
- });
1
+ <script lang="ts">import ColorField from "../../../input/components/color-field/color-field.svelte";
2
+ import "../../../../../tailwind.css";
3
+ let {
4
+ path,
5
+ className = "",
6
+ size = 24,
7
+ fill = "currentColor",
8
+ viewBox = "",
9
+ color,
10
+ sizeClassName = "w-6 h-6"
11
+ } = $props();
12
+ $effect(() => {
13
+ viewBox = viewBox || `0 0 ${size} ${size}`;
14
+ });
27
15
  </script>
28
16
 
29
17
  <svg class="align-middle {sizeClassName} {className}" {viewBox} fill={color || fill}>
@@ -20,3 +20,4 @@ export declare const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L
20
20
  export declare const mdiSquare = "M3,3V21H21V3";
21
21
  export declare const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
22
22
  export declare const mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";
23
+ export declare const mdiDotsHorizontal = "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z";
@@ -21,3 +21,4 @@ export const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15
21
21
  export const mdiSquare = "M3,3V21H21V3";
22
22
  export const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
23
23
  export const mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";
24
+ export const mdiDotsHorizontal = "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z";
@@ -1,47 +1,28 @@
1
- <script lang="ts">
2
- type CheckboxPropsType = {
3
- className?: string;
4
- containerClassName?: string;
5
- desc?: string;
6
- descClassName?: string;
7
- id?: string;
8
- label?: string;
9
- labelClassName?: string;
10
- name?: string;
11
- onChange?: (value: boolean) => void;
12
- position?: 'left' | 'right';
13
- value?: boolean;
14
- };
15
-
16
- let {
17
- className,
18
- containerClassName,
19
- desc,
20
- descClassName,
21
- id,
22
- label,
23
- labelClassName,
24
- name,
25
- onChange,
26
- position = 'left',
27
- value = $bindable(false)
28
- }: CheckboxPropsType = $props();
29
-
30
- let inputRef: HTMLInputElement | null = $state(null);
31
-
32
- export function getElement() {
33
- return inputRef;
34
- }
35
-
36
- export function select() {
37
- return inputRef && (inputRef as HTMLInputElement).select();
38
- }
39
-
40
- function handleChange(ev: Event) {
41
- if (onChange) {
42
- onChange(value);
43
- }
44
- }
1
+ <script lang="ts">let {
2
+ className,
3
+ containerClassName,
4
+ desc,
5
+ descClassName,
6
+ id,
7
+ label,
8
+ labelClassName,
9
+ name,
10
+ onChange,
11
+ position = "left",
12
+ value = $bindable(false)
13
+ } = $props();
14
+ let inputRef = $state(null);
15
+ export function getElement() {
16
+ return inputRef;
17
+ }
18
+ export function select() {
19
+ return inputRef && inputRef.select();
20
+ }
21
+ function handleChange(ev) {
22
+ if (onChange) {
23
+ onChange(value);
24
+ }
25
+ }
45
26
  </script>
46
27
 
47
28
  {#snippet labelSnippet()}
@@ -1,84 +1,72 @@
1
- <script lang="ts">
2
- import { ripple } from '../../../../../actions';
3
- import { colorToHex, isValidHexColor } from '../../../../../services';
4
- import { mdiSquare } from '../../../icon';
5
- import Icon from '../../../icon/components/icon/icon.svelte';
6
- import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
7
-
8
- let {
9
- id,
10
- name,
11
- size,
12
- appearance,
13
- value = $bindable('#000000'),
14
- ...props
15
- }: InputFieldPropsType & { value?: string } = $props();
16
-
17
- let colorRef: HTMLInputElement;
18
- let btnIconSizeClassName: string = $state('');
19
- let btnRoundedClassName: string = $state('');
20
- let colorValue: string = $state('#000000');
21
-
22
- let inputRef: any | null = $state(null);
23
-
24
- export function focus() {
25
- inputRef?.focus();
26
- }
27
-
28
- export function getElement() {
29
- return inputRef;
30
- }
31
-
32
- export function select() {
33
- return inputRef && inputRef.select();
34
- }
35
-
36
- function handleColorBtnClick() {
37
- if (colorRef) {
38
- colorRef.click();
39
- }
40
- }
41
-
42
- function handleColorPickerChange(ev: any) {
43
- let input: HTMLInputElement = ev?.target;
44
- if (input) {
45
- value = input.value;
46
- }
47
- }
48
-
49
- $effect(() => {
50
- if (isValidHexColor(value)) {
51
- colorValue = value;
52
- if (colorRef) {
53
- colorRef.value = colorToHex(value);
54
- }
55
- }
56
- });
57
-
58
- $effect(() => {
59
- if (size) {
60
- switch (size) {
61
- case 'lg':
62
- btnIconSizeClassName = '!h-7 !w-7';
63
- break;
64
- case 'md':
65
- btnIconSizeClassName = '!h-6 !w-6';
66
- break;
67
- case 'sm':
68
- btnIconSizeClassName = '!h-5 !w-5';
69
- break;
70
- case 'xs':
71
- btnIconSizeClassName = '!h-4 !w-4';
72
- break;
73
- }
74
- }
75
- });
76
-
77
- $effect(() => {
78
- if (!appearance || appearance == 'normal') {
79
- btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
80
- }
81
- });
1
+ <script lang="ts">import { ripple } from "../../../../../actions";
2
+ import { colorToHex, isValidHexColor } from "../../../../../services";
3
+ import { mdiSquare } from "../../../icon";
4
+ import Icon from "../../../icon/components/icon/icon.svelte";
5
+ import InputField, {} from "../input-field/input-field.svelte";
6
+ let {
7
+ id,
8
+ name,
9
+ size,
10
+ appearance,
11
+ value = $bindable("#000000"),
12
+ ...props
13
+ } = $props();
14
+ let colorRef;
15
+ let btnIconSizeClassName = $state("");
16
+ let btnRoundedClassName = $state("");
17
+ let colorValue = $state("#000000");
18
+ let inputRef = $state(null);
19
+ export function focus() {
20
+ inputRef?.focus();
21
+ }
22
+ export function getElement() {
23
+ return inputRef;
24
+ }
25
+ export function select() {
26
+ return inputRef && inputRef.select();
27
+ }
28
+ function handleColorBtnClick() {
29
+ if (colorRef) {
30
+ colorRef.click();
31
+ }
32
+ }
33
+ function handleColorPickerChange(ev) {
34
+ let input = ev?.target;
35
+ if (input) {
36
+ value = input.value;
37
+ }
38
+ }
39
+ $effect(() => {
40
+ if (isValidHexColor(value)) {
41
+ colorValue = value;
42
+ if (colorRef) {
43
+ colorRef.value = colorToHex(value);
44
+ }
45
+ }
46
+ });
47
+ $effect(() => {
48
+ if (size) {
49
+ switch (size) {
50
+ case "lg":
51
+ btnIconSizeClassName = "!h-7 !w-7";
52
+ break;
53
+ case "md":
54
+ btnIconSizeClassName = "!h-6 !w-6";
55
+ break;
56
+ case "sm":
57
+ btnIconSizeClassName = "!h-5 !w-5";
58
+ break;
59
+ case "xs":
60
+ btnIconSizeClassName = "!h-4 !w-4";
61
+ break;
62
+ }
63
+ }
64
+ });
65
+ $effect(() => {
66
+ if (!appearance || appearance == "normal") {
67
+ btnRoundedClassName = "rounded-tr-lg rounded-br-lg";
68
+ }
69
+ });
82
70
  </script>
83
71
 
84
72
  {#snippet colorButton()}
@@ -1,4 +1,4 @@
1
- import { type InputFieldPropsType } from '../input-field/input-field.svelte';
1
+ import { type InputFieldProps } from '../input-field/input-field.svelte';
2
2
  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> {
3
3
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
4
  $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
12
12
  };
13
13
  z_$$bindings?: Bindings;
14
14
  }
15
- declare const ColorField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
15
+ declare const ColorField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & {
16
16
  value?: string;
17
17
  }, {
18
18
  [evt: string]: CustomEvent<any>;