@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/internal/ResourcePickerListInternal.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts" generic="T">
+/**
+ * Searchable, optionally grouped single-select list shared by the experiment and
+ * artifact selector modals: two-line rows (title, then code + meta) with status and date
+ * in a right-hand column, a filled selected row, skeleton,
+ * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
+ */
+import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
+import BaseInput from '../BaseInput.vue'
+import Skeleton from '../Skeleton.vue'
+import EmptyState from '../EmptyState.vue'
+import type { PillVariant } from '../../types'
+
+export interface ResourcePickerRow {
+  /** Identifier shown as a gray pill at the start of the second line, e.g. an experiment code. */
+  code?: string
+  title: string
+  /** Second-line facts after the code, joined with " · ". */
+  meta?: string[]
+  /** Right column, above the date, tinted by its variant. */
+  status?: { label: string; variant: PillVariant }
+  /** Right column, in mono. */
+  date?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    /** When set, rows render under collapsible group headers in this order. */
+    groups?: { label: string; items: T[] }[] | null
+    itemKey: (item: T) => string | number
+    describe: (item: T) => ResourcePickerRow
+    selectedKey?: string | number | null
+    search: string
+    /** Accessible name of the list; the search field is labelled "Search {label}". */
+    label: string
+    placeholder?: string
+    loading?: boolean
+    error?: string | null
+    emptyTitle?: string
+    emptyDescription?: string
+  }>(),
+  {
+    groups: null,
+    selectedKey: null,
+    placeholder: 'Search…',
+    loading: false,
+    error: null,
+    emptyTitle: 'Nothing found',
+    emptyDescription: 'Try adjusting your search or filters.',
+  },
+)
+const emit = defineEmits<{
+  select: [item: T]
+  'update:search': [value: string]
+}>()
+defineSlots<{
+  /** Extra filters on the search row. */
+  filters?: () => unknown
+  /** A second filter row under the search. */
+  advanced?: () => unknown
+  /** Row controls before the check; keys pressed inside them never select the row. */
+  actions?: (props: { item: T }) => unknown
+}>()
+
+const listId = `mint-resource-picker-${useId().replace(/:/g, '')}`
+const collapsed = reactive(new Set<string>())
+const activeIndex = ref(-1)
+const listRef = ref<HTMLElement | null>(null)
+
+const visibleGroups = computed(() =>
+  props.groups?.map((group) => ({
+    ...group,
+    rows: collapsed.has(group.label) ? [] : group.items,
+  })),
+)
+/** Keyboard order: the rows on screen, top to bottom. */
+const flat = computed(() =>
+  visibleGroups.value ? visibleGroups.value.flatMap((group) => group.rows) : props.items,
+)
+const indexByKey = computed(() => new Map(flat.value.map((item, i) => [props.itemKey(item), i])))
+const showList = computed(() => !props.loading && !props.error && props.items.length > 0)
+
+function optionId(item: T): string {
+  return `${listId}-${props.itemKey(item)}`
+}
+const activeDescendant = computed(() => {
+  const item = flat.value[activeIndex.value]
+  return item === undefined ? undefined : optionId(item)
+})
+
+function indexOf(item: T): number {
+  return indexByKey.value.get(props.itemKey(item)) ?? -1
+}
+function toggleGroup(label: string) {
+  if (collapsed.has(label)) collapsed.delete(label)
+  else collapsed.add(label)
+}
+function keydown(event: KeyboardEvent) {
+  // Keys belong to the search combobox; a focused header, filter or row action keeps its own Enter.
+  const target = event.target as HTMLElement | null
+  if (target !== event.currentTarget && !target?.closest('.mint-resource-picker__search')) return
+  const rows = flat.value
+  if (!rows.length) return
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault()
+    activeIndex.value =
+      event.key === 'ArrowDown'
+        ? Math.min(activeIndex.value + 1, rows.length - 1)
+        : Math.max(activeIndex.value - 1, 0)
+    nextTick(() =>
+      listRef.value
+        ?.querySelector('.mint-resource-picker__row--active')
+        ?.scrollIntoView({ block: 'nearest' }),
+    )
+  } else if (event.key === 'Enter' && rows[activeIndex.value] !== undefined) {
+    event.preventDefault()
+    emit('select', rows[activeIndex.value]!)
+  }
+}
+
+watch(
+  () => [props.items, props.groups],
+  () => {
+    activeIndex.value = -1
+  },
+)
+</script>
+
+<template>
+  <div class="mint-resource-picker" @keydown="keydown">
+    <div class="mint-resource-picker__toolbar">
+      <BaseInput
+        class="mint-resource-picker__search"
+        :model-value="search"
+        :placeholder="placeholder"
+        size="sm"
+        type="search"
+        role="combobox"
+        :aria-label="`Search ${label.toLowerCase()}`"
+        :aria-expanded="showList"
+        :aria-controls="listId"
+        :aria-activedescendant="activeDescendant"
+        @update:model-value="emit('update:search', String($event ?? ''))"
+      >
+        <template #prefix>
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+            <path d="M7 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zM10.5 10.5L14 14" />
+          </svg>
+        </template>
+      </BaseInput>
+      <slot name="filters" />
+    </div>
+    <slot name="advanced" />
+
+    <div v-if="loading" class="mint-resource-picker__frame" aria-busy="true">
+      <div v-for="n in 4" :key="n" class="mint-resource-picker__skeleton-row">
+        <Skeleton :width="`${40 + n * 10}%`" height="0.75rem" />
+        <Skeleton width="30%" height="0.625rem" />
+      </div>
+    </div>
+    <div v-else-if="error" class="mint-resource-picker__error" role="alert">{{ error }}</div>
+    <EmptyState
+      v-else-if="!items.length"
+      :title="emptyTitle"
+      :description="emptyDescription"
+      size="sm"
+    />
+    <div
+      v-else
+      :id="listId"
+      ref="listRef"
+      class="mint-resource-picker__frame mint-resource-picker__list"
+      role="listbox"
+      :aria-label="label"
+    >
+      <template v-for="group in visibleGroups ?? [{ label: '', items, rows: items }]" :key="group.label">
+        <button
+          v-if="visibleGroups"
+          type="button"
+          class="mint-resource-picker__group"
+          :aria-expanded="!collapsed.has(group.label)"
+          @click="toggleGroup(group.label)"
+        >
+          <svg
+            class="mint-resource-picker__chevron"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            aria-hidden="true"
+          >
+            <path d="M4 6l4 4 4-4" />
+          </svg>
+          <span class="mint-resource-picker__group-label">{{ group.label }}</span>
+          <span class="mint-resource-picker__group-count">{{ group.items.length }}</span>
+        </button>
+        <div
+          v-for="item in group.rows"
+          :id="optionId(item)"
+          :key="itemKey(item)"
+          role="option"
+          :aria-selected="itemKey(item) === selectedKey"
+          class="mint-resource-picker__row"
+          :class="{
+            'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
+            'mint-resource-picker__row--active': indexOf(item) === activeIndex,
+          }"
+          @click="emit('select', item)"
+          @mouseenter="activeIndex = indexOf(item)"
+        >
+          <span class="mint-resource-picker__text">
+            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+                describe(item).code
+              }}</span
+              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
+            >
+          </span>
+          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
+            <span
+              v-if="describe(item).status"
+              class="mint-resource-picker__status"
+              :class="`mint-resource-picker__status--${describe(item).status!.variant}`"
+              >{{ describe(item).status!.label }}</span
+            >
+            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
+          </span>
+          <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
+            <slot name="actions" :item="item" />
+          </span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/internal/SettingsPaneHeadInternal.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/** SettingsModal pane header: title + description or mono count, and an optional "Restore group defaults" action. */
+interface Props {
+  title: string
+  description?: string
+  /** Mono count after the title (search results). */
+  count?: string
+  /** Modified fields in the group. Omit to hide the restore action; 0 renders it disabled. */
+  modifiedCount?: number
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  restore: []
+}>()
+</script>
+
+<template>
+  <div class="mint-settings-modal__head">
+    <div class="mint-settings-modal__head-text">
+      <h4 class="mint-settings-modal__head-title">
+        {{ title }}
+        <span v-if="count" class="mint-settings-modal__head-count">{{ count }}</span>
+      </h4>
+      <p v-if="description" class="mint-settings-modal__head-description">{{ description }}</p>
+    </div>
+    <button
+      v-if="modifiedCount !== undefined"
+      type="button"
+      class="mint-settings-modal__restore-group"
+      :disabled="modifiedCount === 0"
+      @click="emit('restore')"
+    >
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M3 8a5 5 0 1 0 1.5-3.5M3 3v2.5h2.5" />
+      </svg>
+      Restore group defaults
+    </button>
+  </div>
+</template>