@cloudparker/moldex.js 0.0.108 → 0.0.110

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.
@@ -25,6 +25,10 @@ export declare const registerBackPress: (state: BackStateType) => void;
25
25
  export declare const addBackKeyListener: (callback: (event?: PopStateEvent) => boolean) => ((event: PopStateEvent) => void) | undefined;
26
26
  export declare const removeBackKeyListener: (listener: () => boolean) => void;
27
27
  export declare function goBack(): void;
28
+ /**
29
+ * Jump back to the first history entry in this tab (i.e. “home”).
30
+ * Falls back to a hard redirect if history is too shallow or cross‑origin.
31
+ */
28
32
  export declare function goHome(): void;
29
33
  export declare function createRedirectUrl(): string | null;
30
34
  /**
@@ -41,10 +41,22 @@ export const removeBackKeyListener = (listener) => {
41
41
  export function goBack() {
42
42
  history.back();
43
43
  }
44
+ /**
45
+ * Jump back to the first history entry in this tab (i.e. “home”).
46
+ * Falls back to a hard redirect if history is too shallow or cross‑origin.
47
+ */
44
48
  export function goHome() {
45
- history.back();
49
+ // number of steps back to the first entry
50
+ const stepsBack = -(window.history.length - 1);
51
+ // if we have at least one previous entry, navigate there
52
+ if (stepsBack < 0) {
53
+ window.history.go(stepsBack);
54
+ }
55
+ else {
56
+ // no history to go back to — just load your root
57
+ window.location.replace('/');
58
+ }
46
59
  }
47
- ;
48
60
  export function createRedirectUrl() {
49
61
  let pathname = window.location.pathname;
50
62
  let redirectUrl = pathname + window.location.search || '';
@@ -23,7 +23,7 @@ let {
23
23
  dropdownCloseClassName = "",
24
24
  dropdownOpenClassName = "",
25
25
  disabled = false,
26
- popup = false,
26
+ dropUp = false,
27
27
  ...others
28
28
  } = $props();
29
29
  let placement = $state(false);
@@ -47,7 +47,7 @@ function adjustDropdownPosition() {
47
47
  const viewportHeight = window.innerHeight;
48
48
  const spaceBelow = viewportHeight - rect.bottom;
49
49
  const dropdownHeight = 200;
50
- if (popup || spaceBelow < dropdownHeight) {
50
+ if (dropUp || spaceBelow < dropdownHeight) {
51
51
  openUpward = rect.top > dropdownHeight;
52
52
  } else {
53
53
  openUpward = false;
@@ -1,6 +1,6 @@
1
1
  import { type ButtonAppearance, type ButtonSize, type ButtonType } from '../button/button.svelte';
2
2
  import { type Snippet } from 'svelte';
3
- type ButtonDropdownProps = {
3
+ export type ButtonDropdownProps = {
4
4
  appearance?: ButtonAppearance;
5
5
  size?: ButtonSize;
6
6
  label?: string;
@@ -15,7 +15,7 @@ type ButtonDropdownProps = {
15
15
  dropdownCloseClassName?: string;
16
16
  dropdownOpenClassName?: string;
17
17
  disabled?: boolean;
18
- popup?: boolean;
18
+ dropUp?: boolean;
19
19
  };
20
20
  declare const ButtonDropdown: import("svelte").Component<ButtonDropdownProps, {
21
21
  toggleDropdown: (ev: MouseEvent | TouchEvent) => void;
@@ -3,7 +3,8 @@
3
3
  <script lang="ts">import {
4
4
  mdiDotsHorizontal
5
5
  } from "../../../../..";
6
- import ButtonDropdown from "../button-dropdown/button-dropdown.svelte";
6
+ import ButtonDropdown, {
7
+ } from "../button-dropdown/button-dropdown.svelte";
7
8
  import Icon from "../../../icon/components/icon/icon.svelte";
8
9
  import ButtonListItem from "../button-list-item/button-list-item.svelte";
9
10
  let {
@@ -10,6 +10,7 @@ export type Menu = {
10
10
  isChecked?: boolean;
11
11
  };
12
12
  import { type ButtonAppearance, type ButtonProps, type ButtonSize } from '../../../../..';
13
+ import { type ButtonDropdownProps } from '../button-dropdown/button-dropdown.svelte';
13
14
  import type { Snippet } from 'svelte';
14
15
  type Props = {
15
16
  label?: string;
@@ -25,7 +26,7 @@ type Props = {
25
26
  menuIconClassName?: string;
26
27
  disabled?: boolean;
27
28
  };
28
- type $$ComponentProps = ButtonProps & Props;
29
+ type $$ComponentProps = ButtonDropdownProps & ButtonProps & Props;
29
30
  declare const ButtonMenu: import("svelte").Component<$$ComponentProps, {}, "">;
30
31
  type ButtonMenu = ReturnType<typeof ButtonMenu>;
31
32
  export default ButtonMenu;
@@ -64,6 +64,7 @@ let {
64
64
  checkboxIconClassName = "",
65
65
  uncheckboxIconClassName = "",
66
66
  checkboxClassName = "",
67
+ dropUp,
67
68
  itemTileSnippet,
68
69
  onChange,
69
70
  ...props
@@ -76,6 +77,7 @@ let windowScrollY = $state(0);
76
77
  let isUpward = $derived.by(() => {
77
78
  windowScrollY;
78
79
  if (!isPlaced) return false;
80
+ if (dropUp) return true;
79
81
  const rect = inputFieldRef.getBoundingClientRect();
80
82
  const spaceBelow = window.innerHeight - rect.bottom;
81
83
  const spaceAbove = rect.top;
@@ -411,7 +413,7 @@ function handleItemClick(ev, item, index) {
411
413
  label={createButtonLabel}
412
414
  className="px-3 py-1 {createButtonClassName}"
413
415
  onClick={onCreateButtonClick}
414
- ></Button>
416
+ />
415
417
  {/if}
416
418
  </div>
417
419
  {/if}
@@ -43,6 +43,7 @@ export type ComboboxFieldProps = {
43
43
  checkboxIconClassName?: string;
44
44
  uncheckboxIconClassName?: string;
45
45
  checkboxClassName?: string;
46
+ dropUp?: boolean;
46
47
  itemTileSnippet?: Snippet<[item: any, index: any]>;
47
48
  };
48
49
  import type { Snippet } from 'svelte';
@@ -1,7 +1,7 @@
1
1
  <script module lang="ts"></script>
2
2
 
3
3
  <script lang="ts">import { ripple } from "../../../../../actions";
4
- import { getDialogSize, openPickerDialog } from "../../../../../services";
4
+ import { openPickerDialog } from "../../../../../services";
5
5
  import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
6
6
  import InputField, {} from "../input-field/input-field.svelte";
7
7
  let {
@@ -20,30 +20,38 @@ let {
20
20
  let EasyCountryData;
21
21
  let LibPhonenumber = $state(null);
22
22
  let inputFieldRef = $state(null);
23
- let _dailCode = $state("");
24
- let _phoneNumber = $state("");
25
- $effect(() => {
26
- if (!_dailCode && !_phoneNumber && LibPhonenumber) {
27
- try {
28
- if (dialCode) {
29
- _dailCode = formatDialCode(dialCode);
30
- }
31
- if (value) {
32
- let parsed = LibPhonenumber?.parsePhoneNumber(value);
33
- if (parsed && parsed.isValid()) {
34
- _phoneNumber = parsed.nationalNumber || "";
35
- _dailCode = formatDialCode(parsed.countryCallingCode);
36
- }
37
- }
38
- } catch (error) {
39
- }
23
+ let dailCodeValue = $derived.by(() => {
24
+ if (value && LibPhonenumber) {
25
+ let { dialCode: dialCode2 } = validatePhoneNumber(value);
26
+ return dialCode2;
40
27
  }
28
+ return formatDialCode(dialCode);
29
+ });
30
+ let phoneNumberValue = $derived.by(() => {
31
+ if (value && LibPhonenumber) {
32
+ let { phoneNumber } = validatePhoneNumber(value);
33
+ return phoneNumber;
34
+ }
35
+ return "";
41
36
  });
42
37
  let btnRoundedClassName = $derived.by(() => {
43
38
  if (!appearance || appearance == "normal") {
44
39
  return "rounded-tl-lg rounded-bl-lg";
45
40
  }
46
41
  });
42
+ function validatePhoneNumber(number) {
43
+ try {
44
+ let parsed = LibPhonenumber?.parsePhoneNumber(number);
45
+ if (parsed && parsed.isValid()) {
46
+ return {
47
+ phoneNumber: parsed.nationalNumber || "",
48
+ dialCode: formatDialCode(parsed.countryCallingCode)
49
+ };
50
+ }
51
+ } catch (error) {
52
+ }
53
+ return {};
54
+ }
47
55
  export function focus() {
48
56
  inputFieldRef?.focus();
49
57
  }
@@ -55,26 +63,22 @@ export function select() {
55
63
  }
56
64
  function formatDialCode(dialcode) {
57
65
  dialcode = `${dialCode}`.trim();
58
- if (!dialCode.startsWith("+")) {
59
- dialcode = `+${dialCode}`;
60
- }
61
- return dialcode;
66
+ return dialCode.startsWith("+") ? dialcode : `+${dialCode}`;
62
67
  }
63
68
  async function handleDialCodePicker() {
64
69
  if (EasyCountryData) {
65
70
  let items = EasyCountryData.getCountries();
66
- let size2 = getDialogSize();
67
71
  let res = await openPickerDialog({
68
72
  value: dialCode,
69
73
  items,
70
74
  identityFieldName: "dialCode",
71
75
  itemTileSnippet: dialCodePickerItemTile
72
76
  });
73
- console.log(res);
74
77
  if (res) {
75
- _dailCode = res;
76
- dialCode = _dailCode;
77
- updatePhonenumber(_dailCode, _phoneNumber);
78
+ dialCode = res;
79
+ if (dialCode && phoneNumberValue) {
80
+ value = `${dialCode}${phoneNumberValue}`;
81
+ }
78
82
  inputFieldRef && inputFieldRef.focus();
79
83
  }
80
84
  }
@@ -87,25 +91,10 @@ function handleLibphonenumberScriptLoad(lib) {
87
91
  }
88
92
  function handleNumberInput(ev) {
89
93
  let target = ev.target;
90
- let _phoneNumber2 = target?.value || "";
91
- updatePhonenumber(_dailCode, _phoneNumber2);
92
- }
93
- function updatePhonenumber(_dialCode, _phoneNumber2) {
94
- if (LibPhonenumber) {
95
- if (_phoneNumber2) {
96
- _dialCode = formatDialCode(_dialCode);
97
- try {
98
- let parsed = LibPhonenumber.parsePhoneNumber(_dialCode + _phoneNumber2);
99
- if (parsed && parsed.isValid()) {
100
- dialCode = _dialCode;
101
- value = _dialCode + _phoneNumber2;
102
- } else {
103
- value = "";
104
- }
105
- } catch (error) {
106
- value = "";
107
- }
108
- }
94
+ let text = target?.value || "";
95
+ let { phoneNumber } = validatePhoneNumber(`${dialCode}${text}`);
96
+ if (phoneNumber) {
97
+ value = `${dialCode}${phoneNumber}`;
109
98
  }
110
99
  }
111
100
  function handleNumberKeyDown(ev) {
@@ -132,7 +121,7 @@ function handleNumberKeyDown(ev) {
132
121
  use:ripple
133
122
  onclick={handleDialCodePicker}
134
123
  >
135
- {_dailCode}
124
+ {dailCodeValue}
136
125
  </button>
137
126
  {/snippet}
138
127
 
@@ -151,7 +140,7 @@ function handleNumberKeyDown(ev) {
151
140
  <InputField
152
141
  {...props}
153
142
  bind:this={inputFieldRef}
154
- value={_phoneNumber}
143
+ value={phoneNumberValue}
155
144
  type="tel"
156
145
  {id}
157
146
  {name}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudparker/moldex.js",
3
- "version": "0.0.108",
3
+ "version": "0.0.110",
4
4
  "author": "cloudparker.com",
5
5
  "license": "MIT",
6
6
  "keywords": [