ControlElement

По суті, це обгортка, що прибирає рамку, тінь і відступи з внутрішнього елемента й додає йому підпис.

Вона дає внутрішньому елементу свободу бути чим завгодно.

Живе демо

Тут можна додати підпис

Розміри

Проп size керує розміром шрифту, внутрішніми відступами, заокругленням і розмірами елементів у всіх обгорнутих компонентах. Доступні розміри: sm, md (за замовчуванням), lg, xl.

Input

Малий

Середній (за замовчуванням)

Великий

Дуже великий

Input з іконками

Textarea

Малий

Середній

Великий

Дуже великий

Button

Button з іконками

NavButton

Головна

Головна

Головна

Головна

SwitchButton

Selector

Малий

Середній

Великий

Дуже великий

CheckBox

Малий

Середній

Великий

Дуже великий

Внутрішнє розміщення

Input і Textarea підтримують layout="inner", що розміщує підпис усередині меж елемента. Спершу підпис виглядає як заповнювач, а коли поле у фокусі чи заповнене — анімовано зміщується вгору.

Input

Повне ім'я

Адреса email

Пароль

Пошук

Вебсайт

Textarea

Нотатки

Відгук

Внутрішнє розміщення з розмірами

Малий

Середній (за замовчуванням)

Великий

Дуже великий

Використання

<template>
  <orio-control-element label="You can add label here">
    <input
      type="text"
      placeholder="Notice standard styling is not a case here"
      style="width: stretch"
    />
  </orio-control-element>
</template>

Задання розміру

<!-- Size applies to any component wrapped with ControlElement -->
<orio-input v-model="name" label="Name" size="sm" />
<orio-input v-model="name" label="Name" size="md" />
<orio-input v-model="name" label="Name" size="lg" />
<orio-input v-model="name" label="Name" size="xl" />

<orio-button size="lg">Large Button</orio-button>
<orio-selector v-model="value" :options="options" size="sm" />

Пропси

Проп	Тип	За замовчуванням	Опис
appearance	'normal' | 'minimal'	'normal'	Minimal прибирає відступи, рамку й тінь зі слоту
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Керує розміром шрифту, відступами й заокругленням внутрішніх елементів
layout	'vertical' | 'horizontal'	'vertical'	Позиція підпису відносно елемента
label	string	-	Текст підпису над елементом

Слоти

Слот	Опис
default	Елемент форми

Слот за замовчуванням надає проп control — набір атрибутів, який ваш внутрішній елемент має розгорнути. Кожен ключ уже записано як DOM-атрибут, яким він стане, тож достатньо v-bind:

<orio-control-element v-slot="{ control }" label="Email" :error="emailError">
  <input v-bind="control" type="email" />
</orio-control-element>

Доступність

Ключ набору	Джерело
id	проп id або useId() — ціль <label for>
tabindex	проп tabindex
disabled	проп disabled
required	проп required
name	проп name
focus-key	проп focusKey — атрибут, який шукає useRovingGrid
aria-label	проп ariaLabel — для елементів без видимого label
aria-describedby	id елемента .control-error, коли задано error
aria-invalid	"true", коли задано error
aria-required	проп required

Ключі пропускаються, коли сказати нічого, тож порожній aria-label="" не потрапляє в розмітку.

CSS-змінні

ControlElement встановлює такі CSS custom properties залежно від size, а дочірні компоненти їх використовують:

Змінна	sm	md (за замовч.)	lg	xl
--control-font-size	0.75rem	0.875rem	1.25rem	1.75rem
--control-label-font-size	0.65rem	0.75rem	0.875rem	1.25rem
--control-py	0.25rem	0.5rem	0.625rem	0.75rem
--control-px	0.5rem	0.75rem	1rem	1.25rem
--control-gap	0.25rem	0.5rem	0.5rem	0.75rem
--control-radius	4px	8px	8px	12px
--control-icon-size	0.75rem	1rem	1.25rem	1.5rem

Примітки

• Використовується всередині Input, Textarea, DatePicker тощо
• Забезпечує узгоджені відступи та розміщення
• Можна використовувати для обгортання власних елементів форм
• label передається через атрибути й рендериться автоматично
• Розмір каскадується через CSS-змінні — дочірні компоненти зчитують їх автоматично