sveltacular 0.0.45 → 0.0.47
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.
- package/dist/forms/phone-box/phone-box.svelte +178 -0
- package/dist/forms/phone-box/phone-box.svelte.d.ts +22 -0
- package/dist/forms/phone-box/phone-number.d.ts +0 -0
- package/dist/forms/phone-box/phone-number.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/tables/data-grid.svelte +24 -9
- package/dist/tables/table-cell.svelte +7 -6
- package/dist/tables/table-footer-cell.svelte +0 -1
- package/dist/tables/table-header-cell.svelte +7 -4
- package/package.json +1 -1
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
<script>import { uniqueId } from "../../index.js";
|
|
2
|
+
import { createEventDispatcher } from "svelte";
|
|
3
|
+
import FormField from "../form-field.svelte";
|
|
4
|
+
import FormLabel from "../form-label.svelte";
|
|
5
|
+
export let value;
|
|
6
|
+
export let size = "md";
|
|
7
|
+
const id = uniqueId();
|
|
8
|
+
const dispatch = createEventDispatcher();
|
|
9
|
+
let areaCode;
|
|
10
|
+
let localExt;
|
|
11
|
+
let lastFour;
|
|
12
|
+
const getTargetProperties = (event) => {
|
|
13
|
+
const target = event.target;
|
|
14
|
+
const name = target.getAttribute("name");
|
|
15
|
+
const nextId = name == "areaCode" ? "localExt" : name == "localExt" ? "lastFour" : "areaCode";
|
|
16
|
+
const prevId = name == "areaCode" ? "lastFour" : name == "localExt" ? "areaCode" : "localExt";
|
|
17
|
+
return {
|
|
18
|
+
target,
|
|
19
|
+
name,
|
|
20
|
+
value: target.value,
|
|
21
|
+
maxLength: Number(target.getAttribute("data-maxlength")),
|
|
22
|
+
nextInput: document.getElementById(`${id}-${nextId}`),
|
|
23
|
+
prevId: document.getElementById(`${id}-${prevId}`)
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
const cleanValue = (value2) => {
|
|
27
|
+
return value2.replace(/[^0-9]/g, "").slice(0, 10);
|
|
28
|
+
};
|
|
29
|
+
const publishChange = () => {
|
|
30
|
+
value = cleanValue(`${areaCode}${localExt}${lastFour}`);
|
|
31
|
+
dispatch("change", value);
|
|
32
|
+
return value;
|
|
33
|
+
};
|
|
34
|
+
const setValue = (value2) => {
|
|
35
|
+
const newValue = cleanValue(value2);
|
|
36
|
+
if (newValue.length == 7) {
|
|
37
|
+
areaCode = "";
|
|
38
|
+
localExt = newValue.slice(0, 3);
|
|
39
|
+
lastFour = newValue.slice(3, 7);
|
|
40
|
+
} else {
|
|
41
|
+
areaCode = newValue.slice(0, 3);
|
|
42
|
+
localExt = newValue.slice(3, 6);
|
|
43
|
+
lastFour = newValue.slice(6, 10);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const valueChanged = (event) => {
|
|
47
|
+
const props = getTargetProperties(event);
|
|
48
|
+
const newValue = cleanValue(props.value);
|
|
49
|
+
if (newValue.length >= 10)
|
|
50
|
+
return setValue(newValue);
|
|
51
|
+
if (props.name == "localExt" && newValue.length >= 7) {
|
|
52
|
+
return setValue(`${areaCode}${newValue}`);
|
|
53
|
+
}
|
|
54
|
+
props.target.value = newValue.slice(0, props.maxLength);
|
|
55
|
+
if (newValue.length >= props.maxLength) {
|
|
56
|
+
if (props.nextInput)
|
|
57
|
+
props.nextInput.focus();
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
const keyDown = (event) => {
|
|
61
|
+
const props = getTargetProperties(event);
|
|
62
|
+
const isDelete = event.key === "Delete" || event.key === "Backspace";
|
|
63
|
+
const isNumeric = !isNaN(Number(event.key));
|
|
64
|
+
const isCursorHighlighting = props.target.selectionStart !== props.target.selectionEnd;
|
|
65
|
+
const isAcceptable = isNumeric || isDelete;
|
|
66
|
+
if (!isAcceptable)
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
const newValue = (() => {
|
|
69
|
+
if (isCursorHighlighting) {
|
|
70
|
+
const start = props.target.selectionStart || 0;
|
|
71
|
+
const end = props.target.selectionEnd || 0;
|
|
72
|
+
return isDelete ? props.value.slice(0, start) + props.value.slice(end) : props.value.slice(0, start) + event.key + props.value.slice(end);
|
|
73
|
+
}
|
|
74
|
+
return isDelete ? props.value.slice(0, -1) : props.value + event.key;
|
|
75
|
+
})();
|
|
76
|
+
if (newValue.length >= props.maxLength) {
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
props.target.value = newValue.slice(0, props.maxLength);
|
|
79
|
+
if (props.nextInput)
|
|
80
|
+
props.nextInput.focus();
|
|
81
|
+
}
|
|
82
|
+
if (isDelete && newValue.length === 0 && props.prevId)
|
|
83
|
+
props.prevId.focus();
|
|
84
|
+
};
|
|
85
|
+
setValue(value);
|
|
86
|
+
$:
|
|
87
|
+
areaCode || localExt || lastFour ? publishChange() : null;
|
|
88
|
+
</script>
|
|
89
|
+
|
|
90
|
+
<FormField {size}>
|
|
91
|
+
{#if $$slots.default}
|
|
92
|
+
<FormLabel id="{id}-areaCode"><slot /></FormLabel>
|
|
93
|
+
{/if}
|
|
94
|
+
<div class="input">
|
|
95
|
+
<span class="areaCode segment">
|
|
96
|
+
<span>(</span>
|
|
97
|
+
<input
|
|
98
|
+
id="{id}-areaCode"
|
|
99
|
+
type="text"
|
|
100
|
+
on:input={valueChanged}
|
|
101
|
+
on:change={valueChanged}
|
|
102
|
+
on:keypress={keyDown}
|
|
103
|
+
bind:value={areaCode}
|
|
104
|
+
name="areaCode"
|
|
105
|
+
data-maxlength="3"
|
|
106
|
+
/>
|
|
107
|
+
<span>)</span>
|
|
108
|
+
</span>
|
|
109
|
+
<span class="localExt segment">
|
|
110
|
+
<input
|
|
111
|
+
id="{id}-localExt"
|
|
112
|
+
type="text"
|
|
113
|
+
on:input={valueChanged}
|
|
114
|
+
on:change={valueChanged}
|
|
115
|
+
on:keypress={keyDown}
|
|
116
|
+
bind:value={localExt}
|
|
117
|
+
name="localExt"
|
|
118
|
+
data-maxlength="3"
|
|
119
|
+
/>
|
|
120
|
+
</span>
|
|
121
|
+
<span class="lastFour segment">
|
|
122
|
+
<span>-</span>
|
|
123
|
+
<input
|
|
124
|
+
id="{id}-lastFour"
|
|
125
|
+
type="text"
|
|
126
|
+
on:input={valueChanged}
|
|
127
|
+
on:change={valueChanged}
|
|
128
|
+
on:keypress={keyDown}
|
|
129
|
+
bind:value={lastFour}
|
|
130
|
+
name="lastFour"
|
|
131
|
+
data-maxlength="4"
|
|
132
|
+
/></span
|
|
133
|
+
>
|
|
134
|
+
</div>
|
|
135
|
+
</FormField>
|
|
136
|
+
|
|
137
|
+
<style>.input {
|
|
138
|
+
background-color: var(--form-input-bg, #fff);
|
|
139
|
+
color: var(--form-input-fg, #000);
|
|
140
|
+
font-size: 1rem;
|
|
141
|
+
width: 100%;
|
|
142
|
+
padding-left: 0.5rem;
|
|
143
|
+
border: solid 1px var(--form-input-border, black);
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: flex-start;
|
|
147
|
+
gap: 0.5rem;
|
|
148
|
+
}
|
|
149
|
+
.input .segment {
|
|
150
|
+
position: relative;
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
justify-content: center;
|
|
154
|
+
}
|
|
155
|
+
.input .areaCode {
|
|
156
|
+
flex-basis: 100px;
|
|
157
|
+
}
|
|
158
|
+
.input .localExt {
|
|
159
|
+
flex-basis: 80px;
|
|
160
|
+
}
|
|
161
|
+
.input .lastFour {
|
|
162
|
+
flex-basis: 140px;
|
|
163
|
+
}
|
|
164
|
+
.input input {
|
|
165
|
+
line-height: 2rem;
|
|
166
|
+
flex-grow: 1;
|
|
167
|
+
font-size: 1rem;
|
|
168
|
+
border: none;
|
|
169
|
+
background-color: transparent;
|
|
170
|
+
color: inherit;
|
|
171
|
+
padding: 0;
|
|
172
|
+
margin: 0;
|
|
173
|
+
text-align: center;
|
|
174
|
+
width: 100%;
|
|
175
|
+
}
|
|
176
|
+
.input input:focus {
|
|
177
|
+
outline: none;
|
|
178
|
+
}</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { type FormFieldSizeOptions } from '../../index.js';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
value: string;
|
|
6
|
+
size?: FormFieldSizeOptions | undefined;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
change: CustomEvent<string>;
|
|
10
|
+
} & {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {
|
|
14
|
+
default: {};
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export type PhoneBoxProps = typeof __propDef.props;
|
|
18
|
+
export type PhoneBoxEvents = typeof __propDef.events;
|
|
19
|
+
export type PhoneBoxSlots = typeof __propDef.slots;
|
|
20
|
+
export default class PhoneBox extends SvelteComponent<PhoneBoxProps, PhoneBoxEvents, PhoneBoxSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
package/dist/index.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export { default as FormSection } from './forms/form-section.svelte';
|
|
|
21
21
|
export { default as InfoBox } from './forms/info-box/info-box.svelte';
|
|
22
22
|
export { default as UrlBox } from './forms/url-box/url-box.svelte';
|
|
23
23
|
export { default as NewOrExistingCombo } from './forms/combo/new-or-existing-combo.svelte';
|
|
24
|
+
export { default as PhoneBox } from './forms/phone-box/phone-box.svelte';
|
|
24
25
|
export { default as Card } from './generic/card/card.svelte';
|
|
25
26
|
export { default as CardContainer } from './generic/card/card-container.svelte';
|
|
26
27
|
export { default as Divider } from './generic/divider/divider.svelte';
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { default as FormSection } from './forms/form-section.svelte';
|
|
|
22
22
|
export { default as InfoBox } from './forms/info-box/info-box.svelte';
|
|
23
23
|
export { default as UrlBox } from './forms/url-box/url-box.svelte';
|
|
24
24
|
export { default as NewOrExistingCombo } from './forms/combo/new-or-existing-combo.svelte';
|
|
25
|
+
export { default as PhoneBox } from './forms/phone-box/phone-box.svelte';
|
|
25
26
|
// Generic
|
|
26
27
|
export { default as Card } from './generic/card/card.svelte';
|
|
27
28
|
export { default as CardContainer } from './generic/card/card-container.svelte';
|
|
@@ -153,12 +153,27 @@ $:
|
|
|
153
153
|
{/if}
|
|
154
154
|
</Table>
|
|
155
155
|
|
|
156
|
-
<style
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
156
|
+
<style>.empty {
|
|
157
|
+
padding: 2rem;
|
|
158
|
+
text-transform: uppercase;
|
|
159
|
+
letter-spacing: 0.2rem;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
a {
|
|
163
|
+
color: var(--table-link-fg, #00f);
|
|
164
|
+
text-decoration: none;
|
|
165
|
+
}
|
|
166
|
+
a:hover {
|
|
167
|
+
text-decoration: underline;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
button {
|
|
171
|
+
background: none;
|
|
172
|
+
border: none;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
color: var(--table-link-fg, #00f);
|
|
175
|
+
text-decoration: none;
|
|
176
|
+
}
|
|
177
|
+
button:hover {
|
|
178
|
+
text-decoration: underline;
|
|
179
|
+
}</style>
|
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
export let type = void 0;
|
|
3
3
|
export let width = void 0;
|
|
4
4
|
$:
|
|
5
|
-
styleProperties = [
|
|
6
|
-
`text-align: ${type === "currency" || type === "number" ? "right" : type === "boolean" ? "center" : "left"}`,
|
|
7
|
-
`width: ${width ? width : "auto"}`
|
|
8
|
-
];
|
|
5
|
+
styleProperties = [`width: ${width ? width : "auto"}`];
|
|
9
6
|
</script>
|
|
10
7
|
|
|
11
8
|
<td {colspan} class={type} style={styleProperties.join('; ')}>
|
|
@@ -13,8 +10,9 @@ $:
|
|
|
13
10
|
</td>
|
|
14
11
|
|
|
15
12
|
<style>td {
|
|
16
|
-
padding: 0.
|
|
17
|
-
font-size:
|
|
13
|
+
padding-left: 0.5rem;
|
|
14
|
+
font-size: 0.9rem;
|
|
15
|
+
line-height: 1.5rem;
|
|
18
16
|
}
|
|
19
17
|
td.currency, td.number {
|
|
20
18
|
text-align: right;
|
|
@@ -25,4 +23,7 @@ td.boolean {
|
|
|
25
23
|
}
|
|
26
24
|
td.actions {
|
|
27
25
|
text-align: right;
|
|
26
|
+
}
|
|
27
|
+
td:last-child {
|
|
28
|
+
padding-right: 0.5rem;
|
|
28
29
|
}</style>
|
|
@@ -15,12 +15,12 @@ $:
|
|
|
15
15
|
</th>
|
|
16
16
|
|
|
17
17
|
<style>th {
|
|
18
|
-
|
|
19
|
-
padding: 0.5rem 0.75rem;
|
|
20
|
-
font-weight: 500;
|
|
18
|
+
padding-left: 0.5rem;
|
|
21
19
|
font-size: 0.8rem;
|
|
20
|
+
font-weight: 500;
|
|
22
21
|
font-family: sans-serif;
|
|
23
|
-
line-height: 1.
|
|
22
|
+
line-height: 1.5rem;
|
|
23
|
+
text-align: left;
|
|
24
24
|
letter-spacing: 0.015em;
|
|
25
25
|
text-transform: uppercase;
|
|
26
26
|
text-shadow: 1px 1px 1px black;
|
|
@@ -30,4 +30,7 @@ th.currency, th.number {
|
|
|
30
30
|
}
|
|
31
31
|
th.boolean {
|
|
32
32
|
text-align: center;
|
|
33
|
+
}
|
|
34
|
+
th:last-child {
|
|
35
|
+
padding-right: 0.5rem;
|
|
33
36
|
}</style>
|