@300codes/design-system 1.0.0

package/src/components/SearchInput/SearchInput.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import TextInput from '../TextInput/TextInput.vue';
+
+export interface SearchInputProps {
+  name: string;
+  id?: string;
+  placeholder?: string;
+  autocomplete?: string;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  iconPath?: string;
+  clearAriaLabel?: string;
+}
+
+withDefaults(defineProps<SearchInputProps>(), {
+  size: 'md',
+  iconPath: '/icons',
+  clearAriaLabel: 'Clear search',
+  id: undefined,
+  placeholder: undefined,
+  autocomplete: undefined,
+});
+
+const emit = defineEmits<{
+  focus: [FocusEvent];
+  blur: [FocusEvent];
+  enter: [];
+  clear: [];
+}>();
+
+const model = defineModel<string>({ required: true });
+
+const textInputRef = ref<{ el: HTMLInputElement | undefined }>();
+
+async function handleClickIcon(side: 'left' | 'right') {
+  if (side === 'right') {
+    model.value = '';
+    emit('clear');
+    await nextTick();
+    textInputRef.value?.el?.focus();
+  } else {
+    emit('enter');
+  }
+}
+</script>
+
+<template>
+  <div
+    class="searchInput"
+    role="search"
+  >
+    <TextInput
+      :id="id"
+      ref="textInputRef"
+      v-model="model"
+      :name="name"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :required="required"
+      :disabled="disabled"
+      :size="size"
+      :icon-left="{ name: 'search', iconPath: iconPath, size: 'md' }"
+      :icon-right="model ? { name: 'close-circle', iconPath: iconPath, size: 'md', ariaLabel: clearAriaLabel } : undefined"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+      @enter="emit('enter')"
+      @click-icon="handleClickIcon"
+    />
+  </div>
+</template>
+
+<style scoped>
+.searchInput {
+  --input-bg: var(--searchInput-bg, #f3f5f7);
+  --input-border-color: var(--searchInput-border, #b0babf);
+  --input-bg-hover: var(--searchInput-bg-hover, #ffffff);
+  --input-border-color-hover: var(--searchInput-border-hover, #0e161b);
+  --input-radius: var(--searchInput-radius, 3rem);
+  --input-radius-mobile: var(--searchInput-radius, 3rem);
+}
+</style>

package/src/components/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchInput } from './SearchInput.vue';
+export type { SearchInputProps } from './SearchInput.vue';

package/src/components/SelectInput/SelectInput.stories.ts

@@ -0,0 +1,111 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { SelectInputProps } from './SelectInput.vue';
+import SelectInput from './SelectInput.vue';
+
+const OPTIONS = [
+  { value: 'pl', label: 'Poland' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'es', label: 'Spain' },
+  { value: 'it', label: 'Italy' },
+];
+
+const meta: Meta<SelectInputProps> = {
+  title: 'Form/SelectInput',
+  component: SelectInput as unknown as ConcreteComponent<SelectInputProps>,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({ template: '<div style="max-width: 25rem; width: 100%;"><story /></div>' }),
+  ],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    mobileTitle: { control: 'text' },
+    invalid: { control: 'boolean' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SelectInputProps>;
+
+export const Default: Story = {
+  args: { name: 'country', options: OPTIONS, placeholder: 'Select country', size: 'md' },
+  render: (args: SelectInputProps) => ({
+    components: { SelectInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SelectInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const WithValue: Story = {
+  args: { name: 'country', options: OPTIONS, placeholder: 'Select country', size: 'md' },
+  render: (args: SelectInputProps) => ({
+    components: { SelectInput },
+    setup() {
+      const value = ref('de');
+      return { args, value };
+    },
+    template: '<SelectInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Invalid: Story = {
+  args: { name: 'country', options: OPTIONS, placeholder: 'Select country', invalid: true },
+  render: (args: SelectInputProps) => ({
+    components: { SelectInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SelectInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { name: 'country', options: OPTIONS, placeholder: 'Select country', disabled: true },
+  render: (args: SelectInputProps) => ({
+    components: { SelectInput },
+    setup() {
+      const value = ref('pl');
+      return { args, value };
+    },
+    template: '<SelectInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Required: Story = {
+  args: { name: 'country', options: OPTIONS, placeholder: 'Select country', required: true },
+  render: (args: SelectInputProps) => ({
+    components: { SelectInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SelectInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { SelectInput },
+    setup() {
+      const sm = ref('');
+      const md = ref('');
+      const lg = ref('');
+      return { sm, md, lg, OPTIONS };
+    },
+    template: `
+      <div class="flex flex-col gap-4 w-80">
+        <SelectInput name="sm" size="sm" placeholder="Small" :options="OPTIONS" v-model="sm" />
+        <SelectInput name="md" size="md" placeholder="Medium" :options="OPTIONS" v-model="md" />
+        <SelectInput name="lg" size="lg" placeholder="Large" :options="OPTIONS" v-model="lg" />
+      </div>
+    `,
+  }),
+};

package/src/components/SelectInput/SelectInput.vue

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, watch } from 'vue';
+import { useMediaQuery, onClickOutside } from '@vueuse/core';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import InputIconButton from '../TextInput/components/InputIconButton.vue';
+
+export type SelectOption = string | { value: string; label: string };
+
+export interface SelectInputProps {
+  name: string;
+  id?: string;
+  options: readonly SelectOption[];
+  placeholder?: string;
+  mobileTitle?: string;
+  invalid?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const props = withDefaults(defineProps<SelectInputProps>(), {
+  id: undefined,
+  placeholder: '',
+  mobileTitle: undefined,
+  size: 'md',
+  disabled: false,
+});
+
+const model = defineModel<string>({ required: true });
+
+const isOpen = ref(false);
+
+const wrapperRef = ref<HTMLDivElement | null>(null);
+const nativeSelectRef = ref<HTMLSelectElement | null>(null);
+const listRef = ref<HTMLUListElement | null>(null);
+const dialogRef = ref<HTMLDialogElement | null>(null);
+
+const isMobile = useMediaQuery('(max-width: 767px)');
+
+onClickOutside(wrapperRef, () => {
+  if (!isMobile.value) isOpen.value = false;
+});
+
+const selectedLabel = computed(() => {
+  if (!model.value) return '';
+  const found = props.options.find((o) => getOptionValue(o) === model.value);
+  return found ? getOptionLabel(found) : '';
+});
+
+const listboxId = computed(() => `${props.id || props.name}-listbox`);
+
+function getOptionValue(opt: SelectOption): string {
+  return typeof opt === 'string' ? opt : opt.value;
+}
+
+function getOptionLabel(opt: SelectOption): string {
+  return typeof opt === 'string' ? opt : opt.label;
+}
+
+function openDropdown() {
+  if (props.disabled) return;
+  isOpen.value = true;
+  nextTick(() => {
+    if (isMobile.value) dialogRef.value?.showModal();
+    const selected = listRef.value?.querySelector<HTMLElement>('[aria-selected="true"]');
+    const first = listRef.value?.querySelector<HTMLElement>('[role="option"]');
+    (selected || first)?.focus();
+  });
+}
+
+function closeDropdown(returnFocus = false) {
+  isOpen.value = false;
+  dialogRef.value?.close();
+  if (returnFocus) nextTick(() => nativeSelectRef.value?.focus());
+}
+
+function handleDialogBackdropClick(e: MouseEvent) {
+  const rect = dialogRef.value?.getBoundingClientRect();
+  if (rect && e.clientY < rect.top) closeDropdown(true);
+}
+
+function selectOption(value: string) {
+  model.value = value;
+  closeDropdown(true);
+}
+
+function handleWrapperTouchStart(e: TouchEvent) {
+  if (!isMobile.value || props.disabled) return;
+
+  e.preventDefault();
+  openDropdown();
+}
+
+function handleMouseDown(e: MouseEvent) {
+  e.preventDefault();
+  if (props.disabled) return;
+  if (isOpen.value) {
+    closeDropdown();
+    nativeSelectRef.value?.focus();
+  } else {
+    openDropdown();
+  }
+}
+
+function handleNativeKeydown(e: KeyboardEvent) {
+  if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(e.key)) {
+    e.preventDefault();
+    if (isOpen.value) {
+      handleListKeydown(e);
+    } else {
+      openDropdown();
+    }
+  } else if (e.key === 'Escape') {
+    closeDropdown(true);
+  }
+}
+
+function handleListKeydown(e: KeyboardEvent) {
+  const items = Array.from(listRef.value?.querySelectorAll<HTMLElement>('[role="option"]') ?? []);
+  const idx = items.indexOf(document.activeElement as HTMLElement);
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    items[idx === -1 ? 0 : (idx + 1) % items.length]?.focus();
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    items[idx === -1 ? items.length - 1 : (idx - 1 + items.length) % items.length]?.focus();
+  } else if (e.key === 'Escape' || e.key === 'Tab') {
+    closeDropdown(true);
+  }
+}
+
+watch(isMobile, () => {
+  if (isOpen.value) closeDropdown();
+});
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    :class="[
+      'selectInput',
+      `selectInput--${size}`,
+      {
+        'selectInput--invalid': invalid,
+        'selectInput--disabled': disabled,
+        'selectInput--open': isOpen && !isMobile,
+      },
+      'relative',
+    ]"
+    @touchstart="handleWrapperTouchStart"
+  >
+    <select
+      :id="id || name"
+      ref="nativeSelectRef"
+      v-model="model"
+      :name="name"
+      :disabled="disabled"
+      :required="required"
+      :class="[
+        'selectInput__native',
+        'w-full h-full absolute inset-0 opacity-0 cursor-pointer',
+        { 'pointer-events-none': isMobile },
+      ]"
+      @mousedown="handleMouseDown"
+      @click.prevent
+      @keydown="handleNativeKeydown"
+    >
+      <option
+        value=""
+        disabled
+      >
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="opt in options"
+        :key="getOptionValue(opt)"
+        :value="getOptionValue(opt)"
+      >
+        {{ getOptionLabel(opt) }}
+      </option>
+    </select>
+
+    <div
+      aria-hidden="true"
+      :class="[
+        'selectInput__trigger',
+        'flex items-center leading-normal justify-between w-full pointer-events-none select-none',
+        {
+          'selectInput__trigger--open': isOpen && !isMobile,
+          'selectInput__trigger--invalid': invalid,
+          'selectInput__trigger--disabled': disabled,
+        },
+      ]"
+    >
+      <span
+        :class="[
+          'truncate',
+          model ? 'selectInput__trigger-value' : 'selectInput__trigger-placeholder',
+        ]"
+      >
+        {{ selectedLabel || placeholder }}
+      </span>
+
+      <BaseIcon
+        name="chevron-down"
+        size="auto"
+        :class="[
+          'selectInput__chevron',
+          'ml-2 transition-transform shrink-0',
+          { 'rotate-180': isOpen },
+        ]"
+        aria-hidden="true"
+      />
+    </div>
+
+    <ul
+      v-if="!isMobile && isOpen"
+      :id="listboxId"
+      ref="listRef"
+      role="listbox"
+      :aria-label="placeholder"
+      class="selectInput__dropdown absolute top-full left-0 right-0 z-10 overflow-y-auto outline-none"
+      @keydown="handleListKeydown"
+    >
+      <li
+        v-for="opt in options"
+        :key="getOptionValue(opt)"
+        role="option"
+        :aria-selected="getOptionValue(opt) === model"
+        :class="[
+          'selectInput__option',
+          { 'selectInput__option--selected': getOptionValue(opt) === model },
+          'cursor-pointer',
+        ]"
+        tabindex="0"
+        @touchend.prevent="selectOption(getOptionValue(opt))"
+        @click="selectOption(getOptionValue(opt))"
+        @keydown.enter.prevent="selectOption(getOptionValue(opt))"
+        @keydown.space.prevent="selectOption(getOptionValue(opt))"
+      >
+        {{ getOptionLabel(opt) }}
+      </li>
+    </ul>
+
+    <Teleport to="body">
+      <dialog
+        v-if="isMobile && isOpen"
+        ref="dialogRef"
+        class="selectInput__sheet border-0 m-0 w-full max-w-full p-0 fixed top-auto inset-x-0 bottom-0 overflow-y-auto"
+        :aria-labelledby="mobileTitle || placeholder ? `${listboxId}-title` : undefined"
+        @cancel.prevent="closeDropdown(true)"
+        @click="handleDialogBackdropClick"
+      >
+        <div
+          v-if="mobileTitle || placeholder"
+          :id="`${listboxId}-title`"
+          class="selectInput__sheet-header sticky top-0 flex items-center"
+        >
+          {{ mobileTitle || placeholder }}
+
+          <InputIconButton
+            icon-name="close"
+            aria-label="Close"
+            class="ml-auto"
+            @click="closeDropdown(true)"
+          />
+        </div>
+
+        <ul
+          :id="listboxId"
+          ref="listRef"
+          role="listbox"
+          :aria-label="placeholder"
+          class="selectInput__list outline-none"
+          @keydown="handleListKeydown"
+        >
+          <li
+            v-for="opt in options"
+            :key="getOptionValue(opt)"
+            role="option"
+            :aria-selected="getOptionValue(opt) === model"
+            :class="[
+              'selectInput__option',
+              { 'selectInput__option--selected': getOptionValue(opt) === model },
+              'cursor-pointer',
+            ]"
+            tabindex="0"
+            @touchend.prevent="selectOption(getOptionValue(opt))"
+            @click="selectOption(getOptionValue(opt))"
+            @keydown.enter.prevent="selectOption(getOptionValue(opt))"
+            @keydown.space.prevent="selectOption(getOptionValue(opt))"
+          >
+            {{ getOptionLabel(opt) }}
+          </li>
+        </ul>
+      </dialog>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.selectInput {
+  --_h: var(--input-h-mobile, 2.5rem);
+  --_px: var(--input-px-mobile, 0.625rem);
+  --_py: var(--input-py-mobile, 0.5rem);
+  --_radius: var(--input-radius-mobile, 0.25rem);
+  --_fs: var(--input-font-size-mobile, 1rem);
+  --_icon-size: var(--selectInput-chevron-size-mobile, 1.25rem);
+  --_dropdown-py: var(--selectInput-dropdown-py, 0.25rem);
+}
+
+@media (min-width: 48rem) {
+  .selectInput {
+    --_h: var(--input-h, 3rem);
+    --_px: var(--input-px, 0.75rem);
+    --_py: var(--input-py, 0.625rem);
+    --_radius: var(--input-radius, 0.375rem);
+    --_fs: var(--input-font-size, 1rem);
+    --_icon-size: var(--selectInput-chevron-size, 1.5rem);
+    --_list-spacing: var(--selectInput-list-spacing, 0.25rem);
+  }
+}
+
+.selectInput--sm {
+  --_h: var(--input-sm-h-mobile, 2.5rem);
+  --_px: var(--input-sm-px-mobile, 0.625rem);
+  --_py: var(--input-sm-py-mobile, 0.5rem);
+  --_radius: var(--input-sm-radius-mobile, 0.25rem);
+  --_fs: var(--input-sm-font-size-mobile, 0.875rem);
+  --_icon-size: var(--selectInput-sm-chevron-size-mobile, 1.25rem);
+  --_dropdown-py: var(--selectInput-sm-dropdown-py, 0.25rem);
+}
+
+@media (min-width: 48rem) {
+  .selectInput--sm {
+    --_h: var(--input-sm-h, 2.5rem);
+    --_px: var(--input-sm-px, 0.625rem);
+    --_py: var(--input-sm-py, 0.5rem);
+    --_radius: var(--input-sm-radius, 0.25rem);
+    --_fs: var(--input-sm-font-size, 0.875rem);
+    --_icon-size: var(--selectInput-sm-chevron-size, 1.5rem);
+    --_list-spacing: var(--selectInput-sm-list-spacing, 0.25rem);
+  }
+}
+
+.selectInput--lg {
+  --_h: var(--input-lg-h-mobile, 3rem);
+  --_px: var(--input-lg-px-mobile, 0.75rem);
+  --_py: var(--input-lg-py-mobile, 0.625rem);
+  --_radius: var(--input-lg-radius-mobile, 0.375rem);
+  --_fs: var(--input-lg-font-size-mobile, 1.125rem);
+  --_icon-size: var(--selectInput-lg-chevron-size-mobile, 1.75rem);
+  --_dropdown-py: var(--selectInput-lg-dropdown-py, 0.5rem);
+}
+
+@media (min-width: 48rem) {
+  .selectInput--lg {
+    --_h: var(--input-lg-h, 3.5rem);
+    --_px: var(--input-lg-px, 1rem);
+    --_py: var(--input-lg-py, 0.75rem);
+    --_radius: var(--input-lg-radius, 0.5rem);
+    --_fs: var(--input-lg-font-size, 1.125rem);
+    --_icon-size: var(--selectInput-lg-chevron-size, 2rem);
+    --_list-spacing: var(--selectInput-lg-list-spacing, 0.5rem);
+  }
+}
+
+/* ── native select ───────────────────────────────────────────────────────── */
+
+.selectInput__native {
+  @apply z-1;
+}
+
+.selectInput--disabled .selectInput__native {
+  @apply cursor-not-allowed;
+}
+
+/* ── visual trigger ──────────────────────────────────────────────────────── */
+
+.selectInput__trigger {
+  height: var(--_h);
+  padding: var(--_py) var(--_px);
+  border-radius: var(--_radius);
+  font-size: var(--_fs);
+  background-color: var(--input-bg, #ffffff);
+  color: var(--input-fg, #0e161b);
+  border: var(--input-border-width, 1px) solid var(--input-border-color, #d6dde1);
+  outline: var(--input-outline-width, 4px) solid transparent;
+  outline-offset: var(--input-outline-offset, -4px);
+}
+
+/* hover — applied on wrapper because native select captures pointer events */
+.selectInput:hover:not(.selectInput--disabled):not(:has(.selectInput__dropdown:hover))
+  .selectInput__trigger {
+  background-color: var(--input-bg-hover, #f3f5f7);
+  border-color: var(--input-border-color-hover, #b0babf);
+}
+
+.selectInput__trigger-placeholder {
+  color: var(--input-placeholder-fg, #5b6a72);
+}
+
+/* focused */
+.selectInput__native:focus-visible ~ .selectInput__trigger {
+  outline-color: var(--input-outline, #3b82f6);
+}
+
+/* ── invalid ─────────────────────────────────────────────────────────────── */
+
+.selectInput__trigger--invalid {
+  border-color: var(--input-border-color-invalid, #ef4444);
+
+  @apply border-2;
+}
+
+/* ── chevron ─────────────────────────────────────────────────────────────── */
+
+.selectInput__chevron {
+  color: var(--selectInput-chevron-fg, #0e161b);
+  width: var(--_icon-size);
+  height: var(--_icon-size);
+}
+
+/* ── disabled ────────────────────────────────────────────────────────────── */
+
+.selectInput__trigger--disabled {
+  background-color: var(--input-bg-disabled, #d6dde1);
+  color: var(--input-fg-disabled, #89979f);
+  border-color: var(--input-border-color-disabled, #d6dde1);
+}
+
+.selectInput__trigger--disabled .selectInput__chevron {
+  color: var(--input-fg-disabled, #89979f);
+}
+
+/* ── desktop dropdown ────────────────────────────────────────────────────── */
+
+.selectInput__dropdown {
+  background-color: var(--selectInput-dropdown-bg, #ffffff);
+  border: var(--selectInput-dropdown-border-width, 1px) solid
+    var(--selectInput-dropdown-border, #d6dde1);
+  border-radius: var(--selectInput-dropdown-radius, 0.375rem);
+  max-height: var(--selectInput-dropdown-max-h, 16rem);
+  padding-block: var(--_dropdown-py);
+  margin-top: var(--_list-spacing);
+}
+
+/* ── option ──────────────────────────────────────────────────────────────── */
+
+.selectInput__option {
+  padding: var(--selectInput-option-py, 0.75rem) var(--selectInput-option-px, 1rem);
+  font-size: var(--_fs);
+  color: var(--selectInput-option-fg, #0e161b);
+}
+
+.selectInput__option:hover,
+.selectInput__option:focus-visible {
+  background-color: var(--selectInput-option-hover-bg, #f3f5f7);
+
+  @apply outline-none;
+}
+
+.selectInput__option--selected {
+  background-color: var(--selectInput-option-selected-bg, #f3f5f7);
+  color: var(--selectInput-option-selected-fg, #1d4ed8);
+}
+
+/* ── mobile sheet (native dialog) ────────────────────────────────────────── */
+
+.selectInput__sheet {
+  background-color: var(--selectInput-sheet-bg, #ffffff);
+  border-top-left-radius: var(--selectInput-dropdown-radius, 0.375rem);
+  border-top-right-radius: var(--selectInput-dropdown-radius, 0.375rem);
+  max-height: var(--selectInput-sheet-max-h, 80vh);
+}
+
+.selectInput__sheet::backdrop {
+  background-color: var(--selectInput-overlay-bg, rgba(0, 0, 0, 0.5));
+}
+
+.selectInput__sheet-header {
+  padding: var(--selectInput-sheet-header-py, 0.75rem) var(--selectInput-sheet-header-px, 1rem);
+  font-size: var(--selectInput-sheet-header-fs, 1rem);
+  font-weight: var(--selectInput-sheet-header-fw, 600);
+  color: var(--selectInput-sheet-header-fg, #0e161b);
+  background-color: var(--selectInput-sheet-bg, #ffffff);
+  border-bottom: var(--selectInput-dropdown-border-width, 1px) solid
+    var(--selectInput-sheet-header-border, #d6dde1);
+}
+
+.selectInput__list {
+  padding-block: var(--_dropdown-py, 0.25rem);
+}
+</style>

package/src/components/SelectInput/index.ts

@@ -0,0 +1,2 @@
+export { default as SelectInput } from './SelectInput.vue';
+export type { SelectInputProps, SelectOption } from './SelectInput.vue';