@karyl-chan/ui 0.1.0

package/src/components/AppSelectField.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts" generic="V extends string | number | null">
+import { computed, nextTick, ref, watch } from 'vue';
+import AppSelect from './AppSelect.vue';
+import type { Placement } from '../composables/use-popover';
+import type { DrawerPlacement } from '../composables/use-drawer';
+
+/**
+ * Drop-in replacement for native `<select>` built on AppSelect, so the
+ * picker honours the same viewport-aware popover/drawer split the rest
+ * of the admin surface uses. Owns:
+ * - A value-model (`v-model`).
+ * - A trigger button styled to match form inputs.
+ * - The flat / grouped option list rendering.
+ * - Optional in-dropdown filter (off by default) for long option lists.
+ *
+ * `options` accepts either `{ value, label }[]` (flat) or items with a
+ * `group` field (header pulled from the unique non-null group strings,
+ * preserving first-seen order).
+ *
+ * Labels are passed in as props with English defaults — this component
+ * does not depend on vue-i18n.
+ */
+export interface SelectOption<V> {
+    value: V;
+    label: string;
+    group?: string | null;
+}
+
+const props = withDefaults(defineProps<{
+    modelValue: V;
+    options: SelectOption<V>[];
+    placeholder?: string;
+    disabled?: boolean;
+    placement?: Placement;
+    drawerPlacement?: DrawerPlacement;
+    drawerTitle?: string;
+    /** Show a search box at the top of the dropdown. Default: false. */
+    filter?: boolean;
+    /** Placeholder for the filter input. */
+    filterPlaceholder?: string;
+    /** Text shown when filter yields no matches. */
+    noMatchesLabel?: string;
+}>(), {
+    placeholder: '',
+    disabled: false,
+    placement: 'bottom-start',
+    drawerPlacement: 'bottom',
+    drawerTitle: '',
+    filter: false,
+    filterPlaceholder: 'Search',
+    noMatchesLabel: 'No matches'
+});
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: V): void;
+}>();
+
+const isOpen = ref(false);
+const filterText = ref('');
+const filterInputRef = ref<HTMLInputElement | null>(null);
+
+const selected = computed(() =>
+    props.options.find(o => o.value === props.modelValue) ?? null
+);
+
+// When the filter is on, narrow the option list by case-insensitive
+// substring match against the label. Group headers fall away naturally
+// because the grouping pass below only emits a header when at least
+// one option in that group survives the filter.
+const filteredOptions = computed(() => {
+    if (!props.filter) return props.options;
+    const needle = filterText.value.trim().toLowerCase();
+    if (!needle) return props.options;
+    return props.options.filter(o => o.label.toLowerCase().includes(needle));
+});
+
+interface Group {
+    label: string | null;
+    items: SelectOption<V>[];
+}
+const groups = computed<Group[]>(() => {
+    const out: Group[] = [];
+    const byKey = new Map<string, Group>();
+    for (const opt of filteredOptions.value) {
+        const key = opt.group ?? '';
+        let g = byKey.get(key);
+        if (!g) {
+            g = { label: opt.group ?? null, items: [] };
+            byKey.set(key, g);
+            out.push(g);
+        }
+        g.items.push(opt);
+    }
+    return out;
+});
+
+const hasGroups = computed(() => groups.value.some(g => g.label !== null));
+const noMatches = computed(() => props.filter && filteredOptions.value.length === 0);
+
+// Reset filter on close so the next open starts fresh; auto-focus the
+// filter input on open so the user can type immediately.
+watch(isOpen, (open) => {
+    if (!open) {
+        filterText.value = '';
+    } else if (props.filter) {
+        nextTick(() => filterInputRef.value?.focus());
+    }
+});
+
+function pick(value: V) {
+    emit('update:modelValue', value);
+    isOpen.value = false;
+}
+</script>
+
+<template>
+    <AppSelect
+        v-model:open="isOpen"
+        :placement="placement"
+        :drawer-placement="drawerPlacement"
+        :drawer-title="drawerTitle || placeholder"
+        :close-on-item-click="!filter"
+    >
+        <template #trigger>
+            <button type="button" class="select-trigger" :disabled="disabled">
+                <span class="label" :class="{ placeholder: !selected }">
+                    {{ selected?.label ?? placeholder }}
+                </span>
+                <span class="chevron" :class="{ open: isOpen }">›</span>
+            </button>
+        </template>
+
+        <div v-if="filter" class="filter-bar" @click.stop>
+            <input
+                ref="filterInputRef"
+                v-model="filterText"
+                type="text"
+                class="filter-input"
+                :placeholder="filterPlaceholder"
+            />
+        </div>
+        <ul class="select-list">
+            <template v-if="noMatches">
+                <li class="empty">{{ noMatchesLabel }}</li>
+            </template>
+            <template v-else-if="hasGroups">
+                <template v-for="(g, gi) in groups" :key="gi">
+                    <li v-if="g.label !== null" class="group-head">{{ g.label }}</li>
+                    <li
+                        v-for="opt in g.items"
+                        :key="String(opt.value) + '|' + opt.label"
+                        :class="['option', { active: opt.value === modelValue, indented: g.label !== null }]"
+                        @click="pick(opt.value)"
+                    >{{ opt.label }}</li>
+                </template>
+            </template>
+            <template v-else>
+                <li
+                    v-for="opt in filteredOptions"
+                    :key="String(opt.value) + '|' + opt.label"
+                    :class="['option', { active: opt.value === modelValue }]"
+                    @click="pick(opt.value)"
+                >{{ opt.label }}</li>
+            </template>
+        </ul>
+    </AppSelect>
+</template>
+
+<style scoped>
+.select-trigger {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.55rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-surface);
+    color: var(--text);
+    font: inherit;
+    font-size: 0.9rem;
+    cursor: pointer;
+    text-align: left;
+    min-width: 0;
+}
+.select-trigger:hover:not(:disabled) { background: var(--bg-surface-hover); }
+.select-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
+.select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.label.placeholder { color: var(--text-muted); }
+.chevron {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    transition: transform var(--transition-base);
+    transform: rotate(90deg);
+    font-size: 0.95rem;
+}
+.chevron.open { transform: rotate(270deg); }
+
+.filter-bar {
+    padding: 0.4rem 0.5rem;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-surface);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.filter-input {
+    width: 100%;
+    padding: 0.35rem 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-surface);
+    color: var(--text);
+    font: inherit;
+    font-size: 0.88rem;
+    box-sizing: border-box;
+}
+.filter-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+.select-list {
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+    overflow-y: auto;
+    max-height: 320px;
+}
+.option {
+    padding: 0.45rem 0.85rem;
+    cursor: pointer;
+    font-size: 0.88rem;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+}
+.option:hover { background: var(--bg-surface-hover); }
+.option.active { background: var(--bg-surface-active); font-weight: 500; }
+.option.indented { padding-left: 1.5rem; }
+.empty {
+    padding: 0.6rem 0.85rem;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    text-align: center;
+}
+.group-head {
+    padding: 0.4rem 0.85rem 0.2rem;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-muted);
+}
+@media (max-width: 768px) {
+    .select-list { max-height: none; }
+}
+</style>

package/src/components/AppTabs.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+import { useBreakpoint } from '../composables/use-breakpoint';
+import AppSelectField, { type SelectOption } from './AppSelectField.vue';
+import type { TabDef } from './tab-types';
+
+export type { TabDef };
+
+/**
+ * AppTabs — two-level tab strip with viewport-aware fallback. NO
+ * vue-router dependency. Tab clicks emit `update:modelValue` /
+ * `update:subModelValue`; the parent owns selection state.
+ *
+ * Desktop:
+ *   - Primary tabs always render as a horizontal pill row at the top.
+ *   - Sub-tabs (when provided) render either underneath the primary
+ *     row (`subLayout: 'top'`) or as a full-height vertical sidebar
+ *     to the left of the panel (`subLayout: 'sidebar'`).
+ *
+ * Mobile (≤768px):
+ *   - Both rows collapse to AppSelectField dropdowns stacked vertically.
+ *
+ * If you need URL-synced tabs with deep-linkable hrefs, use
+ * `AppTabsRouted` from this package (a thin wrapper that adds
+ * `vue-router` integration on top).
+ */
+const props = withDefaults(defineProps<{
+    modelValue: string;
+    tabs: TabDef[];
+    subModelValue?: string;
+    subTabs?: TabDef[];
+    /** Where sub-tabs render on desktop. Has no effect on mobile. */
+    subLayout?: 'top' | 'sidebar';
+}>(), {
+    subModelValue: undefined,
+    subTabs: () => [],
+    subLayout: 'top'
+});
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:subModelValue', value: string): void;
+}>();
+
+const { isMobile } = useBreakpoint();
+
+const hasSub = computed(() => props.subTabs.length > 0);
+
+function pickPrimary(key: string) { emit('update:modelValue', key); }
+function pickSub(key: string) { emit('update:subModelValue', key); }
+
+const primaryOptions = computed<SelectOption<string>[]>(() =>
+    props.tabs.map(t => ({ value: t.key, label: t.label }))
+);
+const subOptions = computed<SelectOption<string>[]>(() =>
+    props.subTabs.map(t => ({ value: t.key, label: t.label }))
+);
+</script>
+
+<template>
+    <!-- Mobile: two stacked dropdowns. -->
+    <div v-if="isMobile" class="tabs-root mobile">
+        <div class="dropdowns">
+            <AppSelectField
+                :model-value="modelValue"
+                :options="primaryOptions"
+                @update:model-value="pickPrimary"
+            />
+            <AppSelectField
+                v-if="hasSub && subModelValue !== undefined"
+                :model-value="subModelValue"
+                :options="subOptions"
+                @update:model-value="pickSub"
+            />
+        </div>
+        <div class="panel">
+            <slot />
+        </div>
+    </div>
+
+    <!-- Desktop, sub-tabs below primary. -->
+    <div
+        v-else-if="!hasSub || subLayout === 'top'"
+        class="tabs-root desktop top"
+    >
+        <nav class="primary-row" role="tablist">
+            <button
+                v-for="t in tabs"
+                :key="t.key"
+                type="button"
+                role="tab"
+                :class="['tab', { active: t.key === modelValue }]"
+                :aria-selected="t.key === modelValue"
+                :disabled="t.disabled"
+                @click="!t.disabled && pickPrimary(t.key)"
+            >
+                <Icon v-if="t.icon" :icon="t.icon" width="16" height="16" />
+                <span>{{ t.label }}</span>
+            </button>
+        </nav>
+        <nav v-if="hasSub" class="sub-row" role="tablist">
+            <button
+                v-for="t in subTabs"
+                :key="t.key"
+                type="button"
+                role="tab"
+                :class="['sub-tab', { active: t.key === subModelValue }]"
+                :aria-selected="t.key === subModelValue"
+                :disabled="t.disabled"
+                @click="!t.disabled && pickSub(t.key)"
+            >
+                <Icon v-if="t.icon" :icon="t.icon" width="14" height="14" />
+                <span>{{ t.label }}</span>
+            </button>
+        </nav>
+        <div class="panel">
+            <slot />
+        </div>
+    </div>
+
+    <!-- Desktop, sub-tabs as a vertical sidebar. -->
+    <div v-else class="tabs-root desktop sidebar">
+        <nav class="primary-row" role="tablist">
+            <button
+                v-for="t in tabs"
+                :key="t.key"
+                type="button"
+                role="tab"
+                :class="['tab', { active: t.key === modelValue }]"
+                :aria-selected="t.key === modelValue"
+                :disabled="t.disabled"
+                @click="!t.disabled && pickPrimary(t.key)"
+            >
+                <Icon v-if="t.icon" :icon="t.icon" width="16" height="16" />
+                <span>{{ t.label }}</span>
+            </button>
+        </nav>
+        <div class="split">
+            <nav class="sub-side" role="tablist">
+                <button
+                    v-for="t in subTabs"
+                    :key="t.key"
+                    type="button"
+                    role="tab"
+                    :class="['sub-side-tab', { active: t.key === subModelValue }]"
+                    :aria-selected="t.key === subModelValue"
+                    :disabled="t.disabled"
+                    @click="!t.disabled && pickSub(t.key)"
+                >
+                    <Icon v-if="t.icon" :icon="t.icon" width="16" height="16" />
+                    <span>{{ t.label }}</span>
+                </button>
+            </nav>
+            <div class="panel side-panel">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.tabs-root {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+    min-height: 0;
+    /* Span the parent's cross-axis. Without this, a parent that uses
+       `align-items: flex-start` (a common pattern when other siblings
+       are bare buttons that shouldn't stretch) collapses the tabs
+       strip to its own content width. */
+    width: 100%;
+    flex: 1;
+}
+
+.primary-row {
+    display: flex;
+    gap: 0.4rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.5rem;
+    /* Horizontal scroll when tabs don't fit; never vertical. The
+       browser implicitly upgrades the other axis to `auto` whenever
+       one axis is non-visible, so `overflow-y: hidden` is required —
+       otherwise an unwanted vertical scrollbar appears whenever the
+       border-bottom / focus ring nudges the box past its parent's
+       computed height (which it does for sub-row's active underline). */
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    flex-shrink: 0;
+}
+.tab {
+    background: var(--bg-surface-2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-base);
+    padding: 0.4rem 0.95rem;
+    cursor: pointer;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    white-space: nowrap;
+    text-decoration: none;
+}
+.tab:hover:not(:disabled) { background: var(--bg-surface-hover); }
+.tab.active {
+    background: var(--accent-bg);
+    border-color: var(--accent);
+    color: var(--accent-text-strong);
+}
+.tab:disabled { opacity: 0.45; cursor: default; }
+
+.sub-row {
+    display: flex;
+    gap: 0.6rem;
+    border-bottom: 1px solid var(--border);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    margin-top: -0.3rem;
+    flex-shrink: 0;
+}
+.sub-tab {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0.45rem 0.2rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    white-space: nowrap;
+    text-decoration: none;
+}
+.sub-tab:hover:not(:disabled) { color: var(--text); }
+.sub-tab.active { color: var(--accent-text-strong); border-color: var(--accent); }
+.sub-tab:disabled { opacity: 0.45; cursor: default; }
+
+.split {
+    display: flex;
+    gap: 0.9rem;
+    flex: 1;
+    min-height: 0;
+}
+.sub-side {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    width: 200px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding-right: 0.6rem;
+    overflow-y: auto;
+}
+.sub-side-tab {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-base);
+    padding: 0.5rem 0.7rem;
+    text-align: left;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: 0.88rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+}
+.sub-side-tab:hover:not(:disabled) {
+    background: var(--bg-surface-hover);
+    color: var(--text);
+}
+.sub-side-tab.active {
+    background: var(--accent-bg);
+    color: var(--accent-text-strong);
+    border-color: var(--accent);
+}
+.sub-side-tab:disabled { opacity: 0.45; cursor: default; }
+
+.panel {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+}
+.side-panel {
+    padding-right: 0.2rem;
+}
+
+.tabs-root.mobile { gap: 0.5rem; }
+.dropdowns {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+@media (max-width: 640px) {
+    .sub-side { width: 160px; }
+}
+</style>