intelliwaketssveltekitv25 0.1.80 → 0.1.82

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.
@@ -1,3 +1,5 @@
1
+ import type { HTMLInputAttributes } from 'svelte/elements';
2
+ import type { ActionArray } from './useActions';
1
3
  export declare const KEY_UP_ARROW = 38;
2
4
  export declare const KEY_DOWN_ARROW = 40;
3
5
  export declare const KEY_LEFT_ARROW = 37;
@@ -29,7 +31,7 @@ export declare const IsProd: () => boolean;
29
31
  *
30
32
  * @param el
31
33
  */
32
- export declare function autoFocus(el: HTMLElement | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): void;
34
+ export declare function autoFocus(el: HTMLElement | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | never): void;
33
35
  /**
34
36
  * A Svelte "Use Action" that scrolls the current component to the bottom when it is added to the DOM
35
37
  * Usage: <div use:scrollToBottom />
@@ -145,7 +147,7 @@ export declare const ErrorMessageStack: (e: any) => TErrorMessageStack;
145
147
  *
146
148
  * @param el
147
149
  */
148
- export declare function selectOnFocus(el: HTMLInputElement | HTMLTextAreaElement): {
150
+ export declare function selectOnFocus(el: HTMLInputElement | HTMLTextAreaElement | never): {
149
151
  destroy(): void;
150
152
  };
151
153
  /**
@@ -190,3 +192,16 @@ export declare function IsMobileOrTablet(): boolean;
190
192
  */
191
193
  export declare function DownloadString(filename: string, text: string): void;
192
194
  export declare function HandleKeyDownNumerics(event: KeyboardEvent, allowDecimals?: boolean): void;
195
+ export type TInputNumberAttributes = HTMLInputAttributes & {
196
+ value: number | null;
197
+ onchange?: (value: number | null) => void;
198
+ inputClass?: string;
199
+ decimals?: number;
200
+ decimalsMax?: number;
201
+ min?: number | null;
202
+ max?: number | null;
203
+ prefix?: string;
204
+ suffix?: string;
205
+ shiftDigits?: number;
206
+ use?: ActionArray;
207
+ };
@@ -1,53 +1,17 @@
1
1
  <script lang="ts">
2
2
  import InputNumber from './InputNumber.svelte'
3
+ import type { TInputNumberAttributes } from './Functions'
3
4
 
4
5
  let {
5
6
  value = $bindable(),
6
- class: clazz = '',
7
- inputClass = '',
8
- id,
9
- name,
10
- placeholder,
11
- title,
12
- onchange,
13
7
  decimals = 2,
14
- min = null,
15
- max = null,
16
- readonly,
17
- disabled,
18
- required
19
- }: {
20
- value: number | null,
21
- class?: string,
22
- inputClass?: string,
23
- id?: string,
24
- name?: string
25
- placeholder?: string
26
- title?: string
27
- onchange?: (value: number | null) => void
28
- decimals?: number
29
- min?: number | null
30
- max?: number | null
31
- readonly?: boolean
32
- disabled?: boolean
33
- required?: boolean
34
- } = $props()
8
+ ...otherProps
9
+ }: TInputNumberAttributes = $props()
35
10
 
36
11
  </script>
37
12
 
38
13
  <InputNumber bind:value
39
- class={clazz}
40
- {inputClass}
41
- {id}
42
- {name}
43
- {placeholder}
44
- {title}
45
- {onchange}
46
14
  {decimals}
47
- {min}
48
- {max}
49
- {readonly}
50
- {disabled}
51
- {required}
15
+ {...otherProps}
52
16
  prefix="$"
53
17
  />
@@ -1,19 +1,4 @@
1
- type $$ComponentProps = {
2
- value: number | null;
3
- class?: string;
4
- inputClass?: string;
5
- id?: string;
6
- name?: string;
7
- placeholder?: string;
8
- title?: string;
9
- onchange?: (value: number | null) => void;
10
- decimals?: number;
11
- min?: number | null;
12
- max?: number | null;
13
- readonly?: boolean;
14
- disabled?: boolean;
15
- required?: boolean;
16
- };
17
- declare const InputCurrency: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import type { TInputNumberAttributes } from './Functions';
2
+ declare const InputCurrency: import("svelte").Component<TInputNumberAttributes, {}, "value">;
18
3
  type InputCurrency = ReturnType<typeof InputCurrency>;
19
4
  export default InputCurrency;
@@ -1,47 +1,22 @@
1
1
  <script lang="ts">
2
2
  import { CleanNumber, CleanNumberNull, CleanNumbers } from '@solidbasisventures/intelliwaketsfoundation'
3
3
  import { tick } from 'svelte'
4
- import { HandleKeyDownNumerics } from './Functions'
4
+ import { HandleKeyDownNumerics, type TInputNumberAttributes } from './Functions'
5
5
 
6
6
  let {
7
7
  value = $bindable(),
8
8
  class: clazz = '',
9
9
  inputClass = '',
10
- id,
11
- name,
12
- placeholder,
13
- title,
14
10
  onchange,
15
11
  decimals,
16
12
  decimalsMax,
17
13
  min = null,
18
14
  max = null,
19
- readonly,
20
- disabled,
21
- required,
22
15
  prefix,
23
16
  suffix,
24
- shiftDigits = 0
25
- }: {
26
- value: number | null,
27
- class?: string,
28
- inputClass?: string,
29
- id?: string,
30
- name?: string
31
- placeholder?: string,
32
- title?: string,
33
- onchange?: (value: number | null) => void
34
- decimals?: number
35
- decimalsMax?: number
36
- min?: number | null
37
- max?: number | null
38
- readonly?: boolean
39
- disabled?: boolean
40
- required?: boolean
41
- prefix?: string
42
- suffix?: string
43
- shiftDigits?: number
44
- } = $props()
17
+ shiftDigits = 0,
18
+ ...otherProps
19
+ }: TInputNumberAttributes = $props()
45
20
 
46
21
  let displayValue = $state('')
47
22
  let isFocused = $state(false)
@@ -53,7 +28,7 @@
53
28
  if (!isFocused) {
54
29
  tick()
55
30
  .then(() => {
56
- let newDisplayValue = useValue != null ? CleanNumber(useValue * displayMultiplier, constrainDecimals).toFixed(constrainDecimals) : !!required ? '0' : ''
31
+ let newDisplayValue = useValue != null ? CleanNumber(useValue * displayMultiplier, constrainDecimals).toFixed(constrainDecimals) : !!otherProps.required ? '0' : ''
57
32
  if (!!decimalsMax && newDisplayValue.includes('.')) {
58
33
  newDisplayValue = newDisplayValue.replace(/\.?0+$/, '')
59
34
  }
@@ -75,7 +50,7 @@
75
50
 
76
51
  let numericValue = CleanNumberNull(cleanValue, constrainDecimals)
77
52
  if (numericValue === null) {
78
- value = !!required ? 0 : null
53
+ value = !!otherProps.required ? 0 : null
79
54
  if (onchange) onchange(numericValue)
80
55
  } else if (!isNaN(numericValue)) {
81
56
  numericValue /= displayMultiplier
@@ -98,19 +73,22 @@
98
73
  type="text"
99
74
  inputmode={!!constrainDecimals ? "decimal" : "numeric"}
100
75
  pattern={!!constrainDecimals ? "[0-9]*[.,]?[0-9]+" : "[0-9]*"}
101
- class="text-right {inputClass}"
102
76
  style={inputStyle}
103
- {id}
104
- {name}
105
- {placeholder}
106
- {title}
107
- {readonly}
108
- {disabled}
109
- {required}
77
+ {...otherProps}
78
+ class="text-right {inputClass}"
110
79
  value={displayValue}
111
- oninput={handleInput}
112
- onkeydown={e => HandleKeyDownNumerics(e, !!constrainDecimals)}
113
- onblur={() => refreshDisplayValue(value)}
80
+ oninput={e => {
81
+ handleInput(e)
82
+ if (otherProps.oninput) otherProps.oninput(e)
83
+ }}
84
+ onkeydown={e => {
85
+ HandleKeyDownNumerics(e, !!constrainDecimals)
86
+ if (otherProps.onkeydown) otherProps.onkeydown(e)
87
+ }}
88
+ onblur={e => {
89
+ refreshDisplayValue(value)
90
+ if (otherProps.onblur) otherProps.onblur(e)
91
+ }}
114
92
  bind:focused={isFocused}
115
93
  />
116
94
  {#if prefix}
@@ -1,23 +1,4 @@
1
- type $$ComponentProps = {
2
- value: number | null;
3
- class?: string;
4
- inputClass?: string;
5
- id?: string;
6
- name?: string;
7
- placeholder?: string;
8
- title?: string;
9
- onchange?: (value: number | null) => void;
10
- decimals?: number;
11
- decimalsMax?: number;
12
- min?: number | null;
13
- max?: number | null;
14
- readonly?: boolean;
15
- disabled?: boolean;
16
- required?: boolean;
17
- prefix?: string;
18
- suffix?: string;
19
- shiftDigits?: number;
20
- };
21
- declare const InputNumber: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import { type TInputNumberAttributes } from './Functions';
2
+ declare const InputNumber: import("svelte").Component<TInputNumberAttributes, {}, "value">;
22
3
  type InputNumber = ReturnType<typeof InputNumber>;
23
4
  export default InputNumber;
@@ -1,54 +1,18 @@
1
1
  <script lang="ts">
2
2
  import InputNumber from './InputNumber.svelte'
3
+ import type { TInputNumberAttributes } from './Functions'
3
4
 
4
5
  let {
5
6
  value = $bindable(),
6
- class: clazz = '',
7
- inputClass = '',
8
- id,
9
- name,
10
- placeholder,
11
- title,
12
- onchange,
13
7
  decimals = 0,
14
- min = null,
15
- max = null,
16
- readonly,
17
- disabled,
18
- required
19
- }: {
20
- value: number | null,
21
- class?: string,
22
- inputClass?: string,
23
- id?: string,
24
- name?: string
25
- placeholder?: string
26
- title?: string
27
- onchange?: (value: number | null) => void
28
- decimals?: number
29
- min?: number | null
30
- max?: number | null
31
- readonly?: boolean
32
- disabled?: boolean
33
- required?: boolean
34
- } = $props()
8
+ ...otherProps
9
+ }: TInputNumberAttributes = $props()
35
10
 
36
11
  </script>
37
12
 
38
13
  <InputNumber bind:value
39
- class={clazz}
40
- {inputClass}
41
- {id}
42
- {name}
43
- {placeholder}
44
- {title}
45
- {onchange}
46
14
  {decimals}
47
- {min}
48
- {max}
49
- {readonly}
50
- {disabled}
51
- {required}
15
+ {...otherProps}
52
16
  shiftDigits={2}
53
17
  suffix="%"
54
18
  />
@@ -1,19 +1,4 @@
1
- type $$ComponentProps = {
2
- value: number | null;
3
- class?: string;
4
- inputClass?: string;
5
- id?: string;
6
- name?: string;
7
- placeholder?: string;
8
- title?: string;
9
- onchange?: (value: number | null) => void;
10
- decimals?: number;
11
- min?: number | null;
12
- max?: number | null;
13
- readonly?: boolean;
14
- disabled?: boolean;
15
- required?: boolean;
16
- };
17
- declare const InputPercent: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import type { TInputNumberAttributes } from './Functions';
2
+ declare const InputPercent: import("svelte").Component<TInputNumberAttributes, {}, "value">;
18
3
  type InputPercent = ReturnType<typeof InputPercent>;
19
4
  export default InputPercent;
@@ -8,7 +8,7 @@ export type HTMLActionArray = HTMLActionEntry[];
8
8
  export type SvelteSVGActionType<P> = (node: SVGElement, params?: P) => SvelteActionReturnType<P>;
9
9
  export type SVGActionEntry<P extends any = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
10
10
  export type SVGActionArray = SVGActionEntry[];
11
- export type ActionArray = HTMLActionArray | SVGActionArray;
11
+ export type ActionArray = HTMLActionArray | SVGActionArray | unknown[];
12
12
  export declare function useActions(node: HTMLElement | SVGElement, actions: ActionArray): {
13
13
  update(actions: ActionArray): void;
14
14
  destroy(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelliwaketssveltekitv25",
3
- "version": "0.1.80",
3
+ "version": "0.1.82",
4
4
  "exports": {
5
5
  ".": {
6
6
  "types": "./dist/index.d.ts",