Skip to content

Commit f293cf3

Browse files
hperrinhperrin
committed
feat: add getElement method to all components
1 parent 695b996 commit f293cf3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+334
-46
lines changed

‎packages/button/Button.svelte

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<svelte:component
22
this={component}
3+
bind:this={element}
34
use={[
45
[
56
Ripple,
@@ -90,11 +91,12 @@
9091
let defaultAction = false;
9192
export { defaultAction as default };
9293
93-
export let component = href == null ? Button : A;
94-
94+
let element;
9595
let internalClasses = {};
9696
let context = getContext('SMUI:button:context');
9797
98+
export let component = href == null ? Button : A;
99+
98100
$: dialogExcludes = context === 'dialog:action' ? ['action', 'default'] : [];
99101
100102
$: actionProp =
@@ -117,4 +119,8 @@
117119
delete internalClasses[className];
118120
internalClasses = internalClasses;
119121
}
122+
123+
export function getElement() {
124+
return element.getElement();
125+
}
120126
</script>

‎packages/button/Group.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div
2+
bind:this={element}
23
use:useActions={use}
34
use:forwardEvents
45
class="
@@ -27,4 +28,10 @@
2728
let className = '';
2829
export { className as class };
2930
export let variant = 'text';
31+
32+
let element;
33+
34+
export function getElement() {
35+
return element;
36+
}
3037
</script>

‎packages/card/Actions.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div
2+
bind:this={element}
23
use:useActions={use}
34
use:forwardEvents
45
class="
@@ -29,6 +30,12 @@
2930
export { className as class };
3031
export let fullBleed = false;
3132
33+
let element;
34+
3235
setContext('SMUI:button:context', 'card:action');
3336
setContext('SMUI:icon-button:context', 'card:action');
37+
38+
export function getElement() {
39+
return element;
40+
}
3441
</script>

‎packages/card/Card.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div
2+
bind:this={element}
23
use:useActions={use}
34
use:forwardEvents
45
class="
@@ -29,4 +30,10 @@
2930
export { className as class };
3031
export let variant = 'raised';
3132
export let padded = false;
33+
34+
let element;
35+
36+
export function getElement() {
37+
return element;
38+
}
3239
</script>

‎packages/card/Media.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div
2+
bind:this={element}
23
use:useActions={use}
34
use:forwardEvents
45
class="
@@ -28,4 +29,10 @@
2829
let className = '';
2930
export { className as class };
3031
export let aspectRatio = null;
32+
33+
let element;
34+
35+
export function getElement() {
36+
return element;
37+
}
3138
</script>

‎packages/card/PrimaryAction.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div
2+
bind:this={element}
23
use:useActions={use}
34
use:forwardEvents
45
class="
@@ -40,4 +41,10 @@
4041
export let color = null;
4142
export let padded = false;
4243
export let tabindex = '0';
44+
45+
let element;
46+
47+
export function getElement() {
48+
return element;
49+
}
4350
</script>

‎packages/checkbox/Checkbox.svelte

+13-9
Original file line numberDiff line numberDiff line change
@@ -169,15 +169,15 @@
169169
if (instantiate !== false) {
170170
checkbox = new MDCCheckbox(element);
171171
} else {
172-
if (context === 'data-table') {
173-
if (dataTableHeader) {
174-
checkbox = await getInstance(true);
175-
} else {
176-
checkbox = (await getInstance(false))[getDataTableRowIndex()];
177-
}
178-
} else {
179-
checkbox = await getInstance();
180-
}
172+
// if (context === 'data-table') {
173+
// if (dataTableHeader) {
174+
// checkbox = await getInstance(true);
175+
// } else {
176+
// checkbox = (await getInstance(false))[getDataTableRowIndex()];
177+
// }
178+
// } else {
179+
// checkbox = await getInstance();
180+
// }
181181
}
182182
});
183183
@@ -203,4 +203,8 @@
203203
export function getId() {
204204
return inputProps && inputProps.id;
205205
}
206+
207+
export function getElement() {
208+
return element;
209+
}
206210
</script>

‎packages/chips/Checkmark.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<span
2+
bind:this={element}
23
use:useActions={use}
34
class="mdc-chip__checkmark {className}"
45
{...exclude($$props, ['use', 'class'])}
@@ -19,4 +20,10 @@
1920
export let use = [];
2021
let className = '';
2122
export { className as class };
23+
24+
let element;
25+
26+
export function getElement() {
27+
return element;
28+
}
2229
</script>

‎packages/chips/Chip.svelte

+9-4
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,16 @@
5555
export let use = [];
5656
let className = '';
5757
export { className as class };
58-
export let component = Div;
5958
export let ripple = true;
6059
export let touch = false;
6160
export let selected = false;
6261
export let shouldRemoveOnTrailingIconClick = true;
6362
63+
let element;
64+
let chip;
65+
66+
export let component = Div;
67+
6468
const shouldRemoveOnTrailingIconClickStore = writable(
6569
shouldRemoveOnTrailingIconClick
6670
);
@@ -73,9 +77,6 @@
7377
$: $isSelectedStore = selected;
7478
setContext('SMUI:chip:isSelected', isSelectedStore);
7579
76-
let element;
77-
let chip;
78-
7980
const selectedStore = getContext('SMUI:chip:selected');
8081
let previousSelected = selected;
8182
$: if (chip && ($selectedStore || previousSelected !== selected)) {
@@ -113,4 +114,8 @@
113114
function handleSelection(e) {
114115
selected = e.detail.selected;
115116
}
117+
118+
export function getElement() {
119+
return element.getElement();
120+
}
116121
</script>

‎packages/chips/Icon.svelte

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{#if leading}
22
<i
3-
bind:this={icon}
3+
bind:this={element}
44
use:useActions={use}
55
use:forwardEvents
66
class="
@@ -12,11 +12,15 @@
1212
? 'mdc-chip__icon--leading-hidden'
1313
: ''}
1414
"
15-
{...exclude($$props, ['use', 'class', 'leading', 'leadingHidden'])}
16-
><slot /></i
15+
{...exclude($$props, ['use', 'class', 'leading'])}><slot /></i
1716
>
1817
{:else}
19-
<span use:useActions={use} use:forwardEvents role="gridcell">
18+
<span
19+
bind:this={element}
20+
use:useActions={use}
21+
use:forwardEvents
22+
role="gridcell"
23+
>
2024
<i
2125
bind:this={icon}
2226
class="
@@ -28,8 +32,7 @@
2832
: ''}
2933
"
3034
{...$shouldRemoveOnTrailingIconClick ? { role: 'button' } : {}}
31-
{...exclude($$props, ['use', 'class', 'leading', 'leadingHidden'])}
32-
><slot /></i
35+
{...exclude($$props, ['use', 'class', 'leading'])}><slot /></i
3336
>
3437
</span>
3538
{/if}
@@ -56,11 +59,16 @@
5659
const filter = getContext('SMUI:chip:filter');
5760
const isSelected = getContext('SMUI:chip:isSelected');
5861
62+
let element;
5963
let icon;
6064
6165
onMount(() => {
6266
if (!leading && $shouldRemoveOnTrailingIconClick) {
63-
icon.setAttribute('tabindex', '-1');
67+
(icon || element).setAttribute('tabindex', '-1');
6468
}
6569
});
70+
71+
export function getElement() {
72+
return element;
73+
}
6674
</script>

‎packages/chips/Set.svelte

+4
Original file line numberDiff line numberDiff line change
@@ -184,4 +184,8 @@
184184
chips.splice(index, 1);
185185
chips = chips;
186186
}
187+
188+
export function getElement() {
189+
return element;
190+
}
187191
</script>

‎packages/chips/Text.svelte

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
{#if $filter}
2-
<Checkmark />
2+
<Checkmark bind:this={input} />
33
{/if}
4-
<span use:useActions={use} use:forwardEvents role="gridcell">
4+
<span
5+
bind:this={element}
6+
use:useActions={use}
7+
use:forwardEvents
8+
role="gridcell"
9+
>
510
<span
611
class="
712
{className}
@@ -34,17 +39,27 @@
3439
export { className as class };
3540
export let tabindex = null;
3641
42+
let element;
43+
let input;
44+
let text;
45+
3746
const initialTabindex = getContext('SMUI:chip:initialTabindex');
3847
const choice = getContext('SMUI:chip:choice');
3948
const filter = getContext('SMUI:chip:filter');
4049
const isSelected = getContext('SMUI:chip:isSelected');
4150
42-
let text;
43-
4451
onMount(() => {
4552
text.setAttribute(
4653
'tabindex',
4754
tabindex == null ? $initialTabindex : tabindex
4855
);
4956
});
57+
58+
export function getInput() {
59+
return input && input.getElement();
60+
}
61+
62+
export function getElement() {
63+
return element;
64+
}
5065
</script>

‎packages/common/ClassAdder.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
export let use = [];
2828
let className = '';
2929
export { className as class };
30-
export let component = internals.component;
3130
let forwardEventsAdditional = [];
3231
export { forwardEventsAdditional as forwardEvents };
3332
@@ -36,6 +35,8 @@
3635
const contexts = internals.contexts;
3736
const props = internals.props;
3837
38+
export let component = internals.component;
39+
3940
const forwardEvents = forwardEventsBuilder(get_current_component(), [
4041
...internals.forwardEvents,
4142
...forwardEventsAdditional,

‎packages/common/Icon.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@
3434
export { className as class };
3535
export let on = false;
3636
37-
export let component = I;
38-
3937
let element;
4038
39+
export let component = I;
40+
4141
const context = getContext('SMUI:icon:context');
4242
4343
export function getElement() {

‎packages/data-table/Body.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<tbody
2+
bind:this={element}
23
use:useActions={use}
34
use:forwardEvents
45
class="mdc-data-table__content {className}"
@@ -20,5 +21,11 @@
2021
let className = '';
2122
export { className as class };
2223
24+
let element;
25+
2326
setContext('SMUI:data-table:row:header', false);
27+
28+
export function getElement() {
29+
return element;
30+
}
2431
</script>

‎packages/data-table/Cell.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{#if header}
22
<th
3+
bind:this={element}
34
use:useActions={use}
45
use:forwardEvents
56
class="
@@ -15,6 +16,7 @@
1516
>
1617
{:else}
1718
<td
19+
bind:this={element}
1820
use:useActions={use}
1921
use:forwardEvents
2022
class="
@@ -52,8 +54,14 @@
5254
export let numeric = false;
5355
export let checkbox = false;
5456
57+
let element;
58+
5559
$: props = exclude($$props, ['use', 'class', 'numeric', 'checkbox']);
5660
5761
$: roleProp = role ? { role } : {};
5862
$: scopeProp = scope ? { scope } : {};
63+
64+
export function getElement() {
65+
return element;
66+
}
5967
</script>

0 commit comments

Comments
 (0)