UiOverlay

The UiOverlay is an overlay component, best used as a base component for other components that should behave as an overlay. Eg Menus, Dialogs, Sheets

Features ✨

• Teleports to anywhere in the DOM
• Renders no wrapper element
• Traps focus within itself
• Keeps track of all active overlays
• Focuses on next active overlay when closed
• Supports transition

Props ⚙

Name	Type	Default	Description
modelValue	Boolean	undefined	Used internally by v-model
disabled	Boolean	undefined	This prop closes the <UiOverlay> if openedm and disallows any attempt to open
to	String	'body'	A valid querySelector to render the overlay. Throws an error if an invalid value is recieved
restoreScroll	Boolean	true	Use this if you want the previous window scroll positions to be restored when the <UiOverlay> is closed
restoreFocus	Boolean	true	Use this if you want to save the activeElement before the UiOverlay is opened, so the saved activeElement can be focused on when the UiOverlay is closed

Structure 🏗

<slot name='prepend'/>
    
 <props.tag data-ui-switch='' class='root'>
    <div class='track'>
      <slot name='track'/>
    </div>
      
    <div class='thumb'>
      <input/>
      <slot name='thumb' />
    </div>
 </props.tag> 
     
<slot name='append'/>   

Slots 🎰

Name	Payload	Description
prepend	{ active: Boolean, validation: { message: '', valid: true }, toggle: Function }	Use this slot to render something else before the root component, commonly used for prepending a <label/>
track	Same as prepend	Use this slot to render anything inside the .track element
thumb	Same as prepend	Use this slot to render anything inside the .thumb element
default	Same as prepend	Use this slot to render anything inside the root element
append	Same as prepend	Use this slot to render something else after the root component, commonly used for appending a <label/>

All slots are optional, and can accept multiple elements

Examples 💁‍♀️

Simplest form

<div id='app'>
 <UiSwitch/>
</div>

With v-model

<div id='app'>
 <UiSwitch v-model='switch'/>
</div>

With an external <label>

<div id='app'>
 <label for='switch'>
  Toggle UiSwitch
 </label>
 
 <UiSwitch id='switch' v-model='switch'/>
</div>

With an internal <label> (prepend) and an internal validation message <span> (append)

<div id='app'>
 <UiSwitch id='switch'>
  <template v-slot:prepend='{active}'>
    <label for='switch'>
     Selected: {{active}}
    </label> 
  </template>
  
  <template v-slot:append='{validation, toggle}'>
    <span v-if='validation.message' @click='toggle'>
     Error!
    </span>
  </template>
 </UiSwitch>
</div>

CSS variables

Name	Default value	Description
--ui-height	28px	Use this variable to set the root element's height
--ui-width	44px	Use this variable to set the root element's width
--ui-track-height	100%	Sets the height of the track
--ui-track-radius	100%	Sets the border-radius of the track
--ui-track-background	#999	Sets the background of the track
--ui-track-background-checked	#007bff	Sets the background of the track when the component is active
--ui-thumb-size	25px	Sets the height and width of the .thumb element
--ui-thumb-radius	50%	Sets the border-radius of the .thumb element
--ui-thumb-offset	1.5px	The gap between the thumb and the edges
--ui-thumb-translatex	calc(var(--ui-width) - var(--ui-thumb-size) - var(--ui-thumb-offset) )	Computes the active state transformation
--ui-thumb-background	#fff	The background of the thumb