feat(@vtmn/svelte): export ref on components (#1471)

Decathlon · Oct 20, 2023 · 7802bd3 · 7802bd3
1 parent 788b354
commit 7802bd3
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 3 deletions.
diff --git a/packages/sources/svelte/src/components/actions/VtmnButton/VtmnButton.svelte b/packages/sources/svelte/src/components/actions/VtmnButton/VtmnButton.svelte
@@ -44,6 +44,11 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the button
+   */
+  export let ref = undefined;
+
   $: componentClass = cn(
     'vtmn-btn',
     variant && `vtmn-btn_variant--${variant}`,
@@ -59,6 +64,7 @@
   on:click
   on:keydown
   type="button"
+  bind:this={ref}
   class={componentClass}
   {...$$restProps}
 >

diff --git a/packages/sources/svelte/src/components/actions/VtmnLink/VtmnLink.svelte b/packages/sources/svelte/src/components/actions/VtmnLink/VtmnLink.svelte
@@ -44,6 +44,11 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the link
+   */
+  export let ref = undefined;
+
   $: componentClass = cn(
     'vtmn-link',
     size && `vtmn-link_size--${size}`,
@@ -56,7 +61,14 @@
   let computedRel = computeRel($$restProps['target'], $$restProps['rel']);
 </script>
 
-<a {href} class={componentClass} on:click {...$$restProps} rel={computedRel}>
+<a
+  bind:this={ref}
+  {href}
+  class={componentClass}
+  on:click
+  {...$$restProps}
+  rel={computedRel}
+>
   <slot />
 </a>
 

diff --git a/packages/sources/svelte/src/components/forms/VtmnSelect/VtmnSelect.svelte b/packages/sources/svelte/src/components/forms/VtmnSelect/VtmnSelect.svelte
@@ -48,6 +48,11 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the select
+   */
+  export let ref = undefined;
+
   $: componentClass = cn(
     'vtmn-select_container',
     !border && `vtmn-select--no-border`,
@@ -58,6 +63,7 @@
 <div class={componentClass}>
   <label for={id}>{label}</label>
   <select
+    bind:this={ref}
     {name}
     {id}
     {disabled}

diff --git a/packages/sources/svelte/src/components/forms/VtmnTextInput/VtmnTextInput.svelte b/packages/sources/svelte/src/components/forms/VtmnTextInput/VtmnTextInput.svelte
@@ -70,6 +70,11 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the text input
+   */
+  export let ref = undefined;
+
   $: componentClass = cn(
     'vtmn-text-input',
     valid && 'vtmn-text-input--valid',
@@ -89,6 +94,7 @@
 {/if}
 {#if multiline}
   <textarea
+    bind:this={ref}
     bind:value
     on:input
     on:change
@@ -106,6 +112,7 @@
 {:else}
   <div class="vtmn-text-input_container">
     <input
+      bind:this={ref}
       bind:value
       on:input
       on:change

diff --git a/packages/sources/svelte/src/components/overlays/VtmnPopover/VtmnPopover.svelte b/packages/sources/svelte/src/components/overlays/VtmnPopover/VtmnPopover.svelte
@@ -17,6 +17,21 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the popover
+   */
+  export let ref = undefined;
+
+  /**
+   * Reference of the body of the popover
+   */
+  export let bodyRef = undefined;
+
+  /**
+   * Reference of the title of the popover
+   */
+  export let titleRef = undefined;
+
   $: componentClass = cn('vtmn-popover', className);
 </script>
 
@@ -28,20 +43,23 @@
   aria-describedby={id}
   aria-labelledby={`${id}-title`}
   tabindex="0"
+  {id}
+  bind:this={ref}
   {...$$restProps}
 >
   <slot />
 
   <div {id} role="dialog">
     <p
+      bind:this={titleRef}
       class="vtmn-popover_title"
       id={`${id}-title`}
       role="heading"
       aria-level="2"
     >
       <slot name="title" />
     </p>
-    <p class="vtmn-popover_text"><slot name="body" /></p>
+    <p class="vtmn-popover_text" bind:this={bodyRef}><slot name="body" /></p>
   </div>
 </div>
 

diff --git a/packages/sources/svelte/src/components/selection-controls/VtmnCheckbox/VtmnCheckbox.svelte b/packages/sources/svelte/src/components/selection-controls/VtmnCheckbox/VtmnCheckbox.svelte
@@ -25,6 +25,11 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the input
+   */
+  export let ref = undefined;
+
   $: componentClass = cn('vtmn-checkbox', className);
 </script>
 
@@ -35,6 +40,7 @@
   bind:checked
   on:click
   on:change
+  bind:this={ref}
   {disabled}
   {...$$restProps}
 />

diff --git a/packages/sources/svelte/src/components/selection-controls/VtmnToggle/VtmnToggle.svelte b/packages/sources/svelte/src/components/selection-controls/VtmnToggle/VtmnToggle.svelte
@@ -33,12 +33,17 @@
    */
   export { className as class };
 
+  /**
+   * Reference of the input
+   */
+  export let ref = undefined;
+
   $: componentClass = cn('vtmn-toggle', `vtmn-toggle_size--${size}`, className);
 </script>
 
 <div class={componentClass}>
   <div class="vtmn-toggle_switch">
-    <input type="checkbox" {id} {disabled} bind:checked />
+    <input type="checkbox" {id} {disabled} bind:checked bind:this={ref} />
     <span aria-hidden="true" />
   </div>
   <label for={id}>