feat(FormSelect): New component

docs/components/TheHeader.vue

@@ -29,6 +29,7 @@ const overlayLinks: DropdownItem[] = [
 
 const formLinks: DropdownItem[] = [
   { label: 'Input', to: '/input' },
+  { label: 'Select', to: '/select' },
   { label: 'Switch', to: '/switch' },
   { label: 'Checkbox', to: '/checkbox' },
   { label: 'Radio Group', to: '/radio' },

docs/pages/select.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { UiContainer, UiFormSelect } from '#components';
+import type { FormSelectOptions } from '#ui/types';
+import { ref } from 'vue';
+
+const country = ref<string>();
+
+const optionsList: FormSelectOptions = [
+  { label: 'México', value: 'mx' },
+  { label: 'United States', value: 'us' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Brazil', value: 'br' },
+  { label: 'Argentina', value: 'ar', disabled: true },
+  { label: 'Germany', value: 'de' },
+  { label: 'Spain', value: 'es' },
+  { label: 'Switzerland', value: 'sw' },
+  { label: 'France', value: 'fr' },
+  { label: 'England', value: 'en' },
+];
+
+const groupList: FormSelectOptions = {
+  America: [
+    { label: 'México', value: 'mx' },
+    { label: 'United States', value: 'us' },
+    { label: 'Canada', value: 'ca' },
+    { label: 'Brazil', value: 'br' },
+    { label: 'Argentina', value: 'ar' },
+  ],
+  Europe: [
+    { label: 'Germany', value: 'de' },
+    { label: 'Spain', value: 'es' },
+    { label: 'Switzerland', value: 'sw' },
+    { label: 'France', value: 'fr' },
+    { label: 'England', value: 'en' },
+  ],
+};
+</script>
+
+<template>
+  <UiContainer class="py-8">
+    <h1 class="demo-page-title">Select</h1>
+    <p class="demo-page-description">
+      Displays a list of options for the user to pick from—triggered by a button.
+    </p>
+
+    <div class="demo-category-container mt-4">
+      <span class="demo-category-title"
+        >Normal <code class="demo-code-line">"{{ country }}"</code></span
+      >
+
+      <UiFormSelect
+        v-model="country"
+        name="country"
+        label="Country"
+        class="mt-2"
+        placeholder="Select your country"
+        :options="optionsList"
+      />
+    </div>
+
+    <div class="demo-category-container mt-6">
+      <span class="demo-category-title"
+        >Groupped <code class="demo-code-line">"{{ country }}"</code></span
+      >
+
+      <UiFormSelect
+        v-model="country"
+        class="mt-2"
+        name="country-2"
+        label="Country"
+        placeholder="Select your favorite country"
+        prefix-icon="i-heroicons-globe-alt-20-solid"
+        :options="groupList"
+      />
+    </div>
+  </UiContainer>
+</template>

src/runtime/components/forms/FormSelect.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// @ts-expect-error
+import appConfig from '#build/app.config';
+
+import UiIcon from '#ui/components/elements/Icon.vue';
+import UiFormField from '#ui/components/forms/FormField.vue';
+import { useUI } from '#ui/composables/useUI';
+import type { Strategy } from '#ui/types';
+import type { FormSelectProps } from '#ui/types/formSelect';
+import { formSelect } from '#ui/ui.config';
+import { mergeConfig } from '#ui/utils';
+import { getUiFormFieldProps } from '#ui/utils/forms';
+import { useToNumber } from '@vueuse/core';
+import omit from 'just-omit';
+import pick from 'just-pick';
+import { useForwardProps, useForwardPropsEmits, type SelectRootEmits } from 'radix-vue';
+import { Select } from 'radix-vue/namespaced';
+import { twJoin, twMerge } from 'tailwind-merge';
+import { computed, defineOptions, toRef, withDefaults } from 'vue';
+
+const config = mergeConfig<typeof formSelect>(
+  appConfig.ui?.formSelect?.strategy,
+  appConfig.ui?.formSelect,
+  formSelect,
+);
+type UiConfig = Partial<typeof config> & { strategy?: Strategy };
+
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(defineProps<FormSelectProps<UiConfig>>(), {
+  class: undefined,
+  ui: () => ({}) as UiConfig,
+  modelValue: undefined,
+});
+const emits = defineEmits<SelectRootEmits>();
+
+const { ui, attrs } = useUI('formSelect', toRef(props, 'ui'), config);
+
+// With config defaults
+const numOffset = useToNumber(() => props.offset ?? ui.value.default.offset);
+const suffixIcon = computed(() => props.suffixIcon ?? ui.value.default.suffixIcon);
+const indicatorIcon = computed(() => props.indicatorIcon ?? ui.value.default.indicatorIcon);
+const scrollUpIcon = computed(() => props.scrollUpIcon ?? ui.value.default.scrollUpIcon);
+const scrollDownIcon = computed(() => props.scrollDownIcon ?? ui.value.default.scrollDownIcon);
+const side = computed(() => props.side ?? ui.value.default.side);
+const align = computed(() => props.align ?? ui.value.default.align);
+
+const rootProps = computed(() =>
+  pick(props, [
+    'open',
+    'defaultOpen',
+    'defaultValue',
+    'modelValue',
+    'dir',
+    'name',
+    'autocomplete',
+    'disabled',
+    'required',
+  ]),
+);
+const forwarded = useForwardPropsEmits(rootProps, emits);
+
+const fieldProps = useForwardProps(() => getUiFormFieldProps(omit(props, ['ui'])));
+
+const itemClasses = computed(() =>
+  twMerge(
+    twJoin(
+      ui.value.item.base,
+      ui.value.item.padding,
+      ui.value.item.active,
+      ui.value.item.inactive,
+      ui.value.item.disabled,
+    ),
+    'group',
+  ),
+);
+</script>
+
+<template>
+  <Select.Root v-bind="forwarded">
+    <UiFormField v-bind="fieldProps" :name="props.name">
+      <Select.Trigger
+        v-bind="attrs"
+        :class="[ui.trigger.base, ui.trigger.rounded, ui.trigger.ring, ui.trigger.border]"
+      >
+        <slot name="prefix">
+          <span v-if="props.prefixText" :class="[ui.trigger.font.addons, 'ml-3']">{{
+            props.prefixText
+          }}</span>
+          <UiIcon v-else-if="props.prefixIcon" :name="props.prefixIcon" :class="[ui.trigger.icon, 'ml-3']" />
+        </slot>
+
+        <Select.Value
+          :placeholder="props.placeholder"
+          :class="[ui.trigger.value.base, ui.trigger.value.padding, ui.trigger.font.value]"
+        />
+
+        <UiIcon :name="suffixIcon" :class="[ui.trigger.icon, 'mr-3']" />
+      </Select.Trigger>
+    </UiFormField>
+
+    <Select.Portal>
+      <Select.Content
+        position="popper"
+        :side="side"
+        :align="align"
+        :side-offset="numOffset"
+        :class="[
+          ui.content.base,
+          ui.content.border,
+          ui.content.size,
+          ui.content.rounded,
+          ui.content.transition,
+        ]"
+      >
+        <Select.ScrollUpButton :class="[ui.scrollButtons.base, ui.scrollButtons.size]">
+          <UiIcon :name="scrollUpIcon" :class="ui.scrollButtons.icon" />
+        </Select.ScrollUpButton>
+
+        <Select.Viewport
+          :class="ui.viewport"
+          style="max-height: calc(var(--radix-select-content-available-height) - 3rem)"
+        >
+          <template v-if="Array.isArray(options)">
+            <Select.Item
+              v-for="option in options"
+              :key="option.value"
+              :class="itemClasses"
+              :value="option.value"
+              :disabled="option.disabled"
+            >
+              <Select.ItemIndicator as-child>
+                <UiIcon :name="indicatorIcon" :class="ui.item.indicator" />
+              </Select.ItemIndicator>
+
+              <Select.ItemText :class="ui.item.label">{{ option.label }}</Select.ItemText>
+            </Select.Item>
+          </template>
+
+          <template v-else>
+            <Select.Group v-for="(groupOptions, groupName, idx) in options" :key="`g${idx}:${groupName}`">
+              <Select.Label :class="ui.group.label">{{ groupName }}</Select.Label>
+
+              <Select.Item
+                v-for="option in groupOptions"
+                :key="option.value"
+                :class="itemClasses"
+                :value="option.value"
+                :disabled="option.disabled"
+              >
+                <Select.ItemIndicator as-child>
+                  <UiIcon :name="indicatorIcon" :class="ui.item.indicator" />
+                </Select.ItemIndicator>
+
+                <Select.ItemText :class="ui.item.label">{{ option.label }}</Select.ItemText>
+              </Select.Item>
+
+              <Select.Separator
+                v-if="idx < Object.keys(props.options).length - 1"
+                :class="ui.group.separator"
+              />
+            </Select.Group>
+          </template>
+        </Select.Viewport>
+
+        <Select.ScrollDownButton :class="[ui.scrollButtons.base, ui.scrollButtons.size]">
+          <UiIcon :name="scrollDownIcon" :class="ui.scrollButtons.icon" />
+        </Select.ScrollDownButton>
+      </Select.Content>
+    </Select.Portal>
+  </Select.Root>
+</template>

src/runtime/types/formSelect.d.ts

@@ -0,0 +1,29 @@
+import type { FormFieldProps } from '#ui/types';
+import type { SelectContentProps, SelectRootProps } from 'radix-vue';
+
+export interface FormSelectItem {
+  value: any;
+  label: string;
+  disabled?: boolean;
+}
+
+export type FormSelectOptions = Record<string, FormSelectItem[]> | FormSelectItem[];
+
+export interface FormSelectProps<UiConfig = any> extends SelectRootProps, Omit<FormFieldProps, 'ui'> {
+  placeholder?: string;
+
+  prefixIcon?: string;
+  prefixText?: string;
+  suffixIcon?: string;
+  indicatorIcon?: string;
+  scrollUpIcon?: string;
+  scrollDownIcon?: string;
+
+  ui?: UiConfig;
+
+  options?: FormSelectOptions;
+
+  offset?: number | string;
+  align?: SelectContentProps['align'];
+  side?: SelectContentProps['side'];
+}

src/runtime/types/index.d.ts

@@ -4,5 +4,6 @@ export * from './combobox';
 export * from './dropdown';
 export * from './formField';
 export * from './formInput';
+export * from './formSelect';
 export * from './link';
 export * from './utils';

src/runtime/ui.config/formSelect.ts

@@ -0,0 +1,62 @@
+import type { SelectContentProps } from 'radix-vue';
+
+export default /*ui*/ {
+  trigger: {
+    base: 'flex w-full items-center bg-white group-data-[error]:bg-red-50',
+    rounded: 'rounded-lg',
+    ring: 'focus-within:ring-2 focus-within:ring-primary-600 group-data-[error]:focus-within:ring-red-400',
+    border: 'border border-gray-900/10 group-data-[error]:border-red-800',
+    icon: 'size-4 text-gray-600 group-data-[error]:text-red-600',
+    font: {
+      value: 'text-sm text-left truncate text-gray-900 group-data-[error]:text-red-800',
+      addons: 'text-sm select-none text-gray-500 group-data-[error]:text-red-600',
+    },
+    value: {
+      base: 'block h-8 w-full flex-1',
+      padding: 'px-2 py-1.5',
+    },
+  },
+
+  content: {
+    base: 'z-30 bg-white shadow-md',
+    rounded: 'rounded-lg',
+    border: 'border border-gray-900/10',
+    size: 'w-[--radix-select-trigger-width] min-w-32',
+    transition:
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+  },
+
+  viewport: 'p-1',
+
+  group: {
+    label: 'text-xs text-gray-500 px-2 py-1 font-semibold',
+    separator: '-mx-1 my-1 h-px bg-gray-900/5',
+  },
+
+  item: {
+    base: 'relative flex cursor-pointer select-none rounded-sm items-center outline-none transition-colors',
+    label: 'text-sm',
+    padding: 'px-2 py-1.5',
+    inactive: '',
+    active: 'data-[highlighted]:outline-none data-[highlighted]:bg-gray-100 data-[highlighted]:text-gray-900',
+    disabled: 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    indicator: 'mr-2 size-4 text-primary-600',
+  },
+
+  scrollButtons: {
+    base: 'flex items-center justify-center bg-white cursor-default',
+    size: 'h-6',
+    icon: 'size-4 text-gray-500',
+  },
+
+  default: {
+    offset: 8,
+    align: 'start' as SelectContentProps['align'],
+    side: 'bottom' as SelectContentProps['side'],
+
+    suffixIcon: 'i-heroicons-chevron-down-20-solid',
+    indicatorIcon: 'i-heroicons-check-20-solid',
+    scrollUpIcon: 'i-heroicons-chevron-up-20-solid',
+    scrollDownIcon: 'i-heroicons-chevron-down-20-solid',
+  },
+};

src/runtime/ui.config/index.ts

@@ -18,4 +18,5 @@ export { default as formField } from './formField';
 export { default as formInput } from './formInput';
 export { default as formLabel } from './formLabel';
 export { default as formRadioGroupItem } from './formRadioGroupItem';
+export { default as formSelect } from './formSelect';
 export { default as formSwitch } from './formSwitch';