@cloudparker/moldex.js 0.0.28 → 0.0.29

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 (77) hide show
  1. package/dist/services/dialog/dialog-service.d.ts +16 -0
  2. package/dist/services/dialog/dialog-service.js +23 -1
  3. package/dist/services/utils/utils-service.d.ts +3 -0
  4. package/dist/services/utils/utils-service.js +26 -0
  5. package/dist/tailwind.css +1 -1
  6. package/dist/views/core/button/components/button/button.svelte +5 -3
  7. package/dist/views/core/button/components/button/button.svelte.d.ts +19 -18
  8. package/dist/views/core/button/components/button-back/button-back.svelte +32 -0
  9. package/dist/views/core/button/components/button-back/button-back.svelte.d.ts +24 -0
  10. package/dist/views/core/button/components/button-close/button-close.svelte +5 -0
  11. package/dist/views/core/button/components/button-close/button-close.svelte.d.ts +19 -0
  12. package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte +33 -0
  13. package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte.d.ts +25 -0
  14. package/dist/views/core/button/components/button-list-item/button-list-item.svelte +28 -24
  15. package/dist/views/core/button/components/button-list-item/button-list-item.svelte.d.ts +11 -11
  16. package/dist/views/core/button/components/button-menu/button-menu.svelte +19 -20
  17. package/dist/views/core/button/components/button-menu/button-menu.svelte.d.ts +7 -7
  18. package/dist/views/core/button/components/button-ok/button-ok.svelte +5 -0
  19. package/dist/views/core/button/components/button-ok/button-ok.svelte.d.ts +19 -0
  20. package/dist/views/core/button/index.d.ts +5 -1
  21. package/dist/views/core/button/index.js +10 -1
  22. package/dist/views/core/dialog/components/dialog/dialog.svelte +94 -84
  23. package/dist/views/core/dialog/components/dialog/dialog.svelte.d.ts +4 -3
  24. package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte +145 -0
  25. package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte.d.ts +41 -0
  26. package/dist/views/core/icon/components/icon/icon.svelte +5 -3
  27. package/dist/views/core/icon/components/icon/icon.svelte.d.ts +1 -0
  28. package/dist/views/core/icon/services/icon-path-service.d.ts +6 -0
  29. package/dist/views/core/icon/services/icon-path-service.js +6 -0
  30. package/dist/views/core/index.d.ts +2 -0
  31. package/dist/views/core/index.js +2 -0
  32. package/dist/views/core/input/components/color-field/color-field.svelte +104 -0
  33. package/dist/views/core/input/components/color-field/color-field.svelte.d.ts +23 -0
  34. package/dist/views/core/input/components/combobox-field/combobox-field.svelte +385 -0
  35. package/dist/views/core/input/components/combobox-field/combobox-field.svelte.d.ts +63 -0
  36. package/dist/views/core/input/components/date-field/date-field.svelte +9 -0
  37. package/dist/views/core/input/components/date-field/date-field.svelte.d.ts +21 -0
  38. package/dist/views/core/input/components/datetime-field/datetime-field.svelte +9 -0
  39. package/dist/views/core/input/components/datetime-field/datetime-field.svelte.d.ts +21 -0
  40. package/dist/views/core/input/components/email-field/email-field.svelte +9 -0
  41. package/dist/views/core/input/components/email-field/email-field.svelte.d.ts +21 -0
  42. package/dist/views/core/input/components/file-field/file-field.svelte +80 -0
  43. package/dist/views/core/input/components/file-field/file-field.svelte.d.ts +25 -0
  44. package/dist/views/core/{form → input}/components/input-field/input-field.svelte +162 -113
  45. package/dist/views/core/{form → input}/components/input-field/input-field.svelte.d.ts +51 -35
  46. package/dist/views/core/input/components/number-field/number-field.svelte +9 -0
  47. package/dist/views/core/input/components/number-field/number-field.svelte.d.ts +21 -0
  48. package/dist/views/core/input/components/password-field/password-field.svelte +72 -0
  49. package/dist/views/core/input/components/password-field/password-field.svelte.d.ts +24 -0
  50. package/dist/views/core/input/components/phone-field/phone-field.svelte +76 -0
  51. package/dist/views/core/input/components/phone-field/phone-field.svelte.d.ts +24 -0
  52. package/dist/views/core/input/components/range-field/range-field.svelte +53 -0
  53. package/dist/views/core/input/components/range-field/range-field.svelte.d.ts +31 -0
  54. package/dist/views/core/input/components/search-field/search-field.svelte +53 -0
  55. package/dist/views/core/input/components/search-field/search-field.svelte.d.ts +24 -0
  56. package/dist/views/core/input/components/text-field/text-field.svelte +9 -0
  57. package/dist/views/core/input/components/text-field/text-field.svelte.d.ts +21 -0
  58. package/dist/views/core/input/components/textarea-field/textarea-field.svelte +9 -0
  59. package/dist/views/core/input/components/textarea-field/textarea-field.svelte.d.ts +21 -0
  60. package/dist/views/core/input/components/time-field/time-field.svelte +9 -0
  61. package/dist/views/core/input/components/time-field/time-field.svelte.d.ts +21 -0
  62. package/dist/views/core/input/index.d.ts +19 -0
  63. package/dist/views/core/input/index.js +19 -0
  64. package/dist/views/core/navbar/components/navbar/navbar.svelte +11 -11
  65. package/dist/views/core/navbar/components/navbar/navbar.svelte.d.ts +3 -3
  66. package/dist/views/core/no-data/components/no-data/no-data.svelte +34 -0
  67. package/dist/views/core/no-data/components/no-data/no-data.svelte.d.ts +27 -0
  68. package/dist/views/core/no-data/index.d.ts +2 -0
  69. package/dist/views/core/no-data/index.js +2 -0
  70. package/dist/views/core/text/components/text-country/text-country.svelte +2 -1
  71. package/dist/views/core/text/components/text-country-state/text-country-state.svelte +1 -1
  72. package/dist/views/core/toast/components/toast/toast.svelte +1 -1
  73. package/package.json +2 -2
  74. package/dist/views/core/form/index.d.ts +0 -3
  75. package/dist/views/core/form/index.js +0 -3
  76. /package/dist/views/core/{form → input}/components/label/label.svelte +0 -0
  77. /package/dist/views/core/{form → input}/components/label/label.svelte.d.ts +0 -0
@@ -0,0 +1,24 @@
1
+ import { type InputFieldPropsType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const PasswordField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
16
+ buttonClassName?: string;
17
+ iconClassName?: string;
18
+ }, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {
21
+ focus: () => void;
22
+ }, "">;
23
+ type PasswordField = InstanceType<typeof PasswordField>;
24
+ export default PasswordField;
@@ -0,0 +1,76 @@
1
+ <script lang="ts">import { ripple } from "../../../../../actions";
2
+ import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
3
+ import InputField, {} from "../input-field/input-field.svelte";
4
+ import { isMobileScreen, openListPickerDialog } from "../../../../../services";
5
+ import { DialogSizeEnum } from "../../../dialog";
6
+ let {
7
+ value,
8
+ size,
9
+ appearance,
10
+ buttonClassName,
11
+ className,
12
+ dialCode = $bindable("+1"),
13
+ ...props
14
+ } = $props();
15
+ let btnRoundedClassName = $state("");
16
+ let EasyCountryData;
17
+ let inputFieldRef = $state(null);
18
+ export function focus() {
19
+ inputFieldRef?.focus();
20
+ }
21
+ async function hanleDialCodePicker() {
22
+ if (EasyCountryData) {
23
+ let items = EasyCountryData.getCountries();
24
+ let size2 = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM;
25
+ let res = await openListPickerDialog({
26
+ items,
27
+ itemTitle: "dialCode",
28
+ itemSubtitle: "name",
29
+ size: size2,
30
+ hasCheck: true,
31
+ identity: "dialCode"
32
+ });
33
+ console.log(res);
34
+ if (res) {
35
+ dialCode = res;
36
+ inputFieldRef && inputFieldRef.focus();
37
+ }
38
+ }
39
+ }
40
+ function handleScriptLoad(lib) {
41
+ console.log(lib);
42
+ EasyCountryData = lib;
43
+ }
44
+ $effect(() => {
45
+ if (!appearance || appearance == "normal") {
46
+ btnRoundedClassName = "rounded-tl-lg rounded-bl-lg";
47
+ }
48
+ });
49
+ </script>
50
+
51
+ {#snippet showPasswordButton()}
52
+ <button
53
+ class="w-16 h-full hover:bg-gray-100 font-bold text-gray-400 {btnRoundedClassName} {buttonClassName}"
54
+ use:ripple
55
+ onclick={hanleDialCodePicker}
56
+ >
57
+ {dialCode}
58
+ </button>
59
+ {/snippet}
60
+
61
+ <EasyScriptLoader
62
+ scriptName="EasyCountryData"
63
+ scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
64
+ onLoad={handleScriptLoad}
65
+ />
66
+
67
+ <InputField
68
+ bind:this={inputFieldRef}
69
+ {...props}
70
+ type="tel"
71
+ maxlength={props?.maxlength || 12}
72
+ leftSnippet={showPasswordButton}
73
+ {size}
74
+ {appearance}
75
+ className="pl-16 {className}"
76
+ />
@@ -0,0 +1,24 @@
1
+ import { type InputFieldPropsType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const PhoneField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
16
+ buttonClassName?: string;
17
+ dialCode?: string;
18
+ }, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {
21
+ focus: () => void;
22
+ }, "dialCode">;
23
+ type PhoneField = InstanceType<typeof PhoneField>;
24
+ export default PhoneField;
@@ -0,0 +1,53 @@
1
+ <script lang="ts">import InputField, {
2
+ } from "../input-field/input-field.svelte";
3
+ let {
4
+ id,
5
+ value = $bindable(50),
6
+ size = "md",
7
+ min = 0,
8
+ max = 100,
9
+ name,
10
+ step,
11
+ className,
12
+ oninput,
13
+ onblur,
14
+ onfocus
15
+ } = $props();
16
+ let rangeSizeClassName = $state("");
17
+ $effect(() => {
18
+ switch (size) {
19
+ case "lg":
20
+ rangeSizeClassName = "h-3 ";
21
+ break;
22
+ case "md":
23
+ rangeSizeClassName = "h-2 ";
24
+ break;
25
+ case "sm":
26
+ rangeSizeClassName = "h-1 ";
27
+ break;
28
+ case "xs":
29
+ rangeSizeClassName = "h-2-px ";
30
+ break;
31
+ }
32
+ });
33
+ </script>
34
+
35
+ <input
36
+ {id}
37
+ {name}
38
+ type="range"
39
+ class=" w-full bg-gray-200 appearance-none cursor-pointer dark:bg-gray-700 rounded-lg range-lg outline-none focus:outline-none {rangeSizeClassName} {className}"
40
+ {min}
41
+ {max}
42
+ {step}
43
+ bind:value
44
+ {oninput}
45
+ {onfocus}
46
+ {onblur}
47
+ />
48
+
49
+ <style>
50
+ .h-2-px {
51
+ height: 2px;
52
+ }
53
+ </style>
@@ -0,0 +1,31 @@
1
+ import { type InputFieldSizeType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const RangeField: $$__sveltets_2_IsomorphicComponent<{
16
+ id?: string;
17
+ name?: string;
18
+ className?: string;
19
+ size?: InputFieldSizeType;
20
+ value?: number;
21
+ min?: number;
22
+ max?: number;
23
+ step?: number;
24
+ oninput?: (ev: any) => void;
25
+ onfocus?: (ev: any) => void;
26
+ onblur?: (ev: any) => void;
27
+ }, {
28
+ [evt: string]: CustomEvent<any>;
29
+ }, {}, {}, "value">;
30
+ type RangeField = InstanceType<typeof RangeField>;
31
+ export default RangeField;
@@ -0,0 +1,53 @@
1
+ <script lang="ts">import { mdiMagnify } from "../../../icon";
2
+ import Icon from "../../../icon/components/icon/icon.svelte";
3
+ import InputField, {} from "../input-field/input-field.svelte";
4
+ let {
5
+ className,
6
+ placeholder,
7
+ iconClassName,
8
+ onSearch,
9
+ ...props
10
+ } = $props();
11
+ const debouncedSearch = debounce(search, 300);
12
+ let lastQuery;
13
+ let inputFieldRef = $state(null);
14
+ export function focus() {
15
+ inputFieldRef?.focus();
16
+ }
17
+ function handleInput(ev) {
18
+ let input = ev?.target;
19
+ if (input) {
20
+ let searchText = (input.value || "").toLowerCase().trim();
21
+ debouncedSearch(searchText);
22
+ }
23
+ }
24
+ function search(query) {
25
+ if (lastQuery != query) {
26
+ onSearch && onSearch(query);
27
+ lastQuery = query;
28
+ }
29
+ }
30
+ function debounce(func, wait) {
31
+ let timeout;
32
+ return function(...args) {
33
+ clearTimeout(timeout);
34
+ timeout = setTimeout(() => {
35
+ func(...args);
36
+ }, wait);
37
+ };
38
+ }
39
+ </script>
40
+
41
+ {#snippet searchIcon()}
42
+ <Icon path={mdiMagnify} className="mx-3 text-gray-400 {iconClassName}"></Icon>
43
+ {/snippet}
44
+ <InputField
45
+ bind:this={inputFieldRef}
46
+ {...props}
47
+ type="search"
48
+ maxlength={props?.maxlength || 200}
49
+ leftSnippet={searchIcon}
50
+ className=" pl-12 {className}"
51
+ {placeholder}
52
+ oninput={handleInput}
53
+ />
@@ -0,0 +1,24 @@
1
+ import { type InputFieldPropsType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const SearchField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
16
+ iconClassName?: string;
17
+ onSearch?: (value: string) => void;
18
+ }, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {
21
+ focus: () => void;
22
+ }, "">;
23
+ type SearchField = InstanceType<typeof SearchField>;
24
+ export default SearchField;
@@ -0,0 +1,9 @@
1
+ <script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
2
+ let { maxlength, ...props } = $props();
3
+ let inputFieldRef = $state(null);
4
+ export function focus() {
5
+ inputFieldRef?.focus();
6
+ }
7
+ </script>
8
+
9
+ <InputField bind:this={inputFieldRef} {...props} type="text" maxlength={maxlength || 200} />
@@ -0,0 +1,21 @@
1
+ import { type InputFieldPropsType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const TextField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {
18
+ focus: () => void;
19
+ }, "">;
20
+ type TextField = InstanceType<typeof TextField>;
21
+ export default TextField;
@@ -0,0 +1,9 @@
1
+ <script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
2
+ let props = $props();
3
+ let inputFieldRef = $state(null);
4
+ export function focus() {
5
+ inputFieldRef?.focus();
6
+ }
7
+ </script>
8
+
9
+ <InputField bind:this={inputFieldRef} {...props} type="textarea" maxlength={props?.maxlength || 200} />
@@ -0,0 +1,21 @@
1
+ import { type InputFieldPropsType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const TextareaField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {
18
+ focus: () => void;
19
+ }, "">;
20
+ type TextareaField = InstanceType<typeof TextareaField>;
21
+ export default TextareaField;
@@ -0,0 +1,9 @@
1
+ <script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
2
+ let props = $props();
3
+ let inputFieldRef = $state(null);
4
+ export function focus() {
5
+ inputFieldRef?.focus();
6
+ }
7
+ </script>
8
+
9
+ <InputField bind:this={inputFieldRef} {...props} type="time" />
@@ -0,0 +1,21 @@
1
+ import { type InputFieldPropsType } from '../input-field/input-field.svelte';
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
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const TimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {
18
+ focus: () => void;
19
+ }, "">;
20
+ type TimeField = InstanceType<typeof TimeField>;
21
+ export default TimeField;
@@ -0,0 +1,19 @@
1
+ import { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType } from "./components/input-field/input-field.svelte";
2
+ import ColorField from "./components/color-field/color-field.svelte";
3
+ import ComboboxField from "./components/combobox-field/combobox-field.svelte";
4
+ import DateField from "./components/date-field/date-field.svelte";
5
+ import DatetimeField from "./components/datetime-field/datetime-field.svelte";
6
+ import EmailField from "./components/email-field/email-field.svelte";
7
+ import FileField from "./components/file-field/file-field.svelte";
8
+ import InputField from "./components/input-field/input-field.svelte";
9
+ import Label from "./components/label/label.svelte";
10
+ import NumberField from "./components/number-field/number-field.svelte";
11
+ import PasswordField from "./components/password-field/password-field.svelte";
12
+ import PhoneField from "./components/phone-field/phone-field.svelte";
13
+ import RangeField from "./components/range-field/range-field.svelte";
14
+ import SearchField from "./components/search-field/search-field.svelte";
15
+ import TextField from "./components/text-field/text-field.svelte";
16
+ import TextareaField from "./components/textarea-field/textarea-field.svelte";
17
+ import TimeField from "./components/time-field/time-field.svelte";
18
+ export { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType };
19
+ export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RangeField, SearchField, TextareaField, TextField, TimeField };
@@ -0,0 +1,19 @@
1
+ import {} from "./components/input-field/input-field.svelte";
2
+ import ColorField from "./components/color-field/color-field.svelte";
3
+ import ComboboxField from "./components/combobox-field/combobox-field.svelte";
4
+ import DateField from "./components/date-field/date-field.svelte";
5
+ import DatetimeField from "./components/datetime-field/datetime-field.svelte";
6
+ import EmailField from "./components/email-field/email-field.svelte";
7
+ import FileField from "./components/file-field/file-field.svelte";
8
+ import InputField from "./components/input-field/input-field.svelte";
9
+ import Label from "./components/label/label.svelte";
10
+ import NumberField from "./components/number-field/number-field.svelte";
11
+ import PasswordField from "./components/password-field/password-field.svelte";
12
+ import PhoneField from "./components/phone-field/phone-field.svelte";
13
+ import RangeField from "./components/range-field/range-field.svelte";
14
+ import SearchField from "./components/search-field/search-field.svelte";
15
+ import TextField from "./components/text-field/text-field.svelte";
16
+ import TextareaField from "./components/textarea-field/textarea-field.svelte";
17
+ import TimeField from "./components/time-field/time-field.svelte";
18
+ export {};
19
+ export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RangeField, SearchField, TextareaField, TextField, TimeField };
@@ -4,9 +4,9 @@ import { Icon, mdiMenu } from "../../../icon";
4
4
  let {
5
5
  id = "",
6
6
  children,
7
- leftChildren,
8
- centerChildren,
9
- rightChildren,
7
+ leftSnippet,
8
+ centerSnippet,
9
+ rightSnippet,
10
10
  className = "",
11
11
  drawerIconPath = mdiMenu,
12
12
  drawerButtonClassName = "",
@@ -42,11 +42,11 @@ let {
42
42
  className="h-full px-2 text-gray-500 hover:text-gray-600 {drawerButtonClassName}"
43
43
  iconPath={drawerIconPath}
44
44
  disabled={!ondrawer}
45
- onclick={ondrawer}
45
+ onClick={ondrawer}
46
46
  ></Button>
47
47
  {/if}
48
48
  {#if hasLogo}
49
- <Button className="h-full px-2 {logoButtonClassName}" disabled={!onlogo} onclick={onlogo}>
49
+ <Button className="h-full px-2 {logoButtonClassName}" disabled={!onlogo} onClick={onlogo}>
50
50
  {#if logoIconPath}
51
51
  <Icon path={logoIconPath} className="h-10 w-10 {logoIconClassName}" />
52
52
  {/if}
@@ -65,18 +65,18 @@ let {
65
65
  {/if}
66
66
  </div>
67
67
  <div class={leftContainerClassName}>
68
- {#if leftChildren}
69
- {@render leftChildren()}
68
+ {#if leftSnippet}
69
+ {@render leftSnippet()}
70
70
  {/if}
71
71
  </div>
72
72
  <div class="flex-grow flex justify-center {centerContainerClassName}">
73
- {#if centerChildren}
74
- {@render centerChildren()}
73
+ {#if centerSnippet}
74
+ {@render centerSnippet()}
75
75
  {/if}
76
76
  </div>
77
77
  <div class={rightContainerClassName}>
78
- {#if rightChildren}
79
- {@render rightChildren()}
78
+ {#if rightSnippet}
79
+ {@render rightSnippet()}
80
80
  {/if}
81
81
  </div>
82
82
  </div>
@@ -35,9 +35,9 @@ declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
35
35
  hasTitle?: boolean;
36
36
  hasSubtitle?: boolean;
37
37
  children?: Snippet;
38
- leftChildren?: Snippet;
39
- centerChildren?: Snippet;
40
- rightChildren?: Snippet;
38
+ leftSnippet?: Snippet;
39
+ centerSnippet?: Snippet;
40
+ rightSnippet?: Snippet;
41
41
  ondrawer?: () => void;
42
42
  onlogo?: () => void;
43
43
  }, {
@@ -0,0 +1,34 @@
1
+ <script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
2
+ import "../../../../../tailwind.css";
3
+ let {
4
+ message = "No data found!",
5
+ className = "",
6
+ iconPath = "",
7
+ iconClassName = "",
8
+ iconPlacement = "top",
9
+ children
10
+ } = $props();
11
+ const iconPlacementClassNameMap = {
12
+ top: "flex-col",
13
+ bottom: "flex-col-reverse",
14
+ left: "flex-row",
15
+ right: "flex-row-reverse"
16
+ };
17
+ let iconPlacementClassName = $state("");
18
+ $effect(() => {
19
+ iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
20
+ });
21
+ </script>
22
+
23
+ <div
24
+ class="flex items-center justify-center gap-3 text-gray-500 p-4 {iconPlacementClassName} {className}"
25
+ >
26
+ {#if children}
27
+ {@render children()}
28
+ {:else}
29
+ {#if iconPath}
30
+ <Icon path={iconPath} className="w-6 h-6 {iconClassName}" />
31
+ {/if}
32
+ <div>{@html message}</div>
33
+ {/if}
34
+ </div>
@@ -0,0 +1,27 @@
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 NoData: $$__sveltets_2_IsomorphicComponent<{
17
+ message?: string;
18
+ className?: string;
19
+ iconPath?: string;
20
+ iconClassName?: string;
21
+ iconPlacement?: "top" | "bottom" | "left" | "right";
22
+ children?: Snippet;
23
+ }, {
24
+ [evt: string]: CustomEvent<any>;
25
+ }, {}, {}, "">;
26
+ type NoData = InstanceType<typeof NoData>;
27
+ export default NoData;
@@ -0,0 +1,2 @@
1
+ import NoData from "./components/no-data/no-data.svelte";
2
+ export { NoData };
@@ -0,0 +1,2 @@
1
+ import NoData from "./components/no-data/no-data.svelte";
2
+ export { NoData };
@@ -12,6 +12,7 @@ async function init() {
12
12
  }
13
13
  function handleScriptLoad(lib) {
14
14
  EasyCountryData = lib;
15
+ console.log("EasyCountryData", EasyCountryData);
15
16
  init();
16
17
  }
17
18
  async function prepare(..._) {
@@ -31,7 +32,7 @@ $effect(() => {
31
32
  <EasyScriptLoader
32
33
  scriptName="EasyCountryData"
33
34
  scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
34
- onload={handleScriptLoad}
35
+ onLoad={handleScriptLoad}
35
36
  />
36
37
  {#if country}
37
38
  <span> {country?.name || ''} </span>
@@ -32,7 +32,7 @@ $effect(() => {
32
32
  <EasyScriptLoader
33
33
  scriptName="EasyCountryStateData"
34
34
  scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-country-state-data@main/dist/index.js"
35
- on:load={handleScriptLoad}
35
+ onLoad={handleScriptLoad}
36
36
  />
37
37
 
38
38
  {#if state}
@@ -1,4 +1,4 @@
1
- <script context="module" lang="ts"></script>
1
+ <script module lang="ts"></script>
2
2
 
3
3
  <script lang="ts">import "../../../../../tailwind.css";
4
4
  let isPlaced = $state(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudparker/moldex.js",
3
- "version": "0.0.28",
3
+ "version": "0.0.29",
4
4
  "author": "cloudparker.com",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -27,7 +27,7 @@
27
27
  "repository": "https://github.com/paramanandapradhan/moldex.js",
28
28
  "homepage": "https://cloudparker.com",
29
29
  "devDependencies": {
30
- "@cloudparker/easy-script-loader-svelte": "^3.0.3",
30
+ "@cloudparker/easy-script-loader-svelte": "^4.0.0",
31
31
  "esm-env": "^1.0.0",
32
32
  "moment": "^2.30.1"
33
33
  },
@@ -1,3 +0,0 @@
1
- import InputField, { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType, type InputFieldTypesType } from "./components/input-field/input-field.svelte";
2
- import Label from "./components/label/label.svelte";
3
- export { InputField, Label, type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType, type InputFieldTypesType };
@@ -1,3 +0,0 @@
1
- import InputField, {} from "./components/input-field/input-field.svelte";
2
- import Label from "./components/label/label.svelte";
3
- export { InputField, Label };