@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

package/dist/components/Filters/FilterMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterMenu.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","Button","_mergeProps","_createElementVNode","_createTextVNode","_toDisplayString","FilterGlyph","FilterFrame","_createElementBlock","_Fragment","_renderList","_createCommentVNode","Button_default","FilterFrame_default","FilterGlyph_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","FilterMenu_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","attrs","useAttrs","query","ref","keyboard","groups","computed","q","shown","f","name","pick","onOpen","isOpen","onKeydown","event","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","PopoverTrigger","createVNode","mergeProps","createElementVNode","createTextVNode","toDisplayString","PopoverPortal","PopoverContent","ListboxRoot","ListboxFilter","ListboxContent","createElementBlock","Fragment","renderList","ListboxGroup","group","ListboxGroupLabel","createCommentVNode","ListboxItem","field"],"sources":["../../../src/components/Filters/FilterMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\n\nimport {\n  ListboxContent,\n  ListboxFilter,\n  ListboxGroup,\n  ListboxGroupLabel,\n  ListboxItem,\n  ListboxRoot,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport type { FilterField } from './types'\n\nexport interface FilterMenuProps {\n  fields: FilterField[]\n  /** Fields already filtering, marked \"In use\"; picking one should open its chip, not add a second. */\n  inUse?: string[]\n  /** chip: the dashed \"+ Filter\" in the view bar. button: the page header's Filters button, tinted while filters are in use. */\n  as?: 'chip' | 'button'\n  /** The footer's status; \"{count} fields\" by default. */\n  status?: string\n  label?: string\n  buttonLabel?: string\n  searchPlaceholder?: string\n  inUseLabel?: string\n  addLabel?: string\n  closeLabel?: string\n  /** `{count}` is the number of fields. */\n  fieldsLabel?: string\n  /** `{query}` is what was typed. */\n  noMatchLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilterMenuProps>(), {\n  inUse: () => [],\n  as: 'chip',\n  status: undefined,\n  label: 'Filter',\n  buttonLabel: 'Filters',\n  searchPlaceholder: 'Filter by…',\n  inUseLabel: 'In use',\n  addLabel: 'Add',\n  closeLabel: 'Close',\n  fieldsLabel: '{count} fields',\n  noMatchLabel: 'No field matches “{query}”.'\n})\n\nconst emit = defineEmits<{ pick: [name: string] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst attrs = useAttrs()\nconst query = ref('')\n// Only the keyboard's highlight gets the focus ring; the pointer's is just a tint.\nconst keyboard = ref(false)\n\nconst groups = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  const shown = props.fields.filter((f) => !q || f.label.toLowerCase().includes(q))\n  return [...new Set(shown.map((f) => f.group ?? ''))].map((name) => ({\n    name,\n    fields: shown.filter((f) => (f.group ?? '') === name)\n  }))\n})\n\nfunction pick(name: unknown) {\n  if (typeof name !== 'string') return\n  open.value = false\n  query.value = ''\n  emit('pick', name)\n}\n\nfunction onOpen(isOpen: boolean) {\n  if (!isOpen) query.value = ''\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n}\n</script>\n\n<!-- The field list behind \"+ Filter\": search, fields grouped with their type, and which are already filtering. -->\n<template>\n  <PopoverRoot v-model:open=\"open\" @update:open=\"onOpen\">\n    <PopoverTrigger v-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :variant=\"inUse.length ? 'tinted' : 'secondary'\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M2.5 3.5h11l-4.25 5v4l-2.5 1v-5z\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong px-2 text-13 font-medium whitespace-nowrap text-sui-ink-muted outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-ink-muted hover:text-sui-ink-body focus-visible:sui-ring data-[state=open]:border-solid data-[state=open]:border-sui-accent-solid data-[state=open]:text-sui-accent data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <FilterGlyph name=\"plus\" />\n      {{ label }}\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :side-offset=\"8\"\n        @keydown=\"onKeydown\"\n        @pointermove=\"keyboard = false\"\n      >\n        <ListboxRoot highlight-on-hover @update:model-value=\"pick\">\n          <FilterFrame\n            :close-label=\"closeLabel\"\n            :enter-label=\"addLabel\"\n            :status=\"status ?? fieldsLabel.replace('{count}', String(fields.length))\"\n          >\n            <div class=\"flex h-11 items-center gap-2 border-b border-sui-line-subtle px-3.5 text-sui-ink-muted\">\n              <FilterGlyph class=\"size-4\" name=\"search\" />\n              <ListboxFilter\n                v-model=\"query\"\n                :aria-label=\"searchPlaceholder\"\n                auto-focus\n                class=\"h-full min-w-0 flex-1 border-none bg-transparent p-0 text-sm text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n                :placeholder=\"searchPlaceholder\"\n              />\n            </div>\n            <ListboxContent\n              :aria-label=\"searchPlaceholder\"\n              class=\"group/list max-h-64 overflow-auto px-1.5 pt-1 pb-1.5 outline-hidden\"\n              :data-keyboard=\"keyboard || undefined\"\n            >\n              <ListboxGroup v-for=\"group in groups\" :key=\"group.name\">\n                <ListboxGroupLabel\n                  v-if=\"group.name\"\n                  class=\"m-0 px-2 pt-2.5 pb-1 text-11 font-semibold tracking-caps text-sui-ink-muted uppercase\"\n                >\n                  {{ group.name }}\n                </ListboxGroupLabel>\n                <ListboxItem\n                  v-for=\"field in group.fields\"\n                  :key=\"field.name\"\n                  class=\"flex min-h-8 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-13.5 text-sui-ink outline-hidden select-none data-highlighted:bg-sui-sunken group-data-keyboard/list:data-highlighted:sui-ring-inset\"\n                  :value=\"field.name\"\n                >\n                  <span\n                    class=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-sui-sunken text-sui-ink-body\"\n                  >\n                    <FilterGlyph :name=\"field.type\" />\n                  </span>\n                  <span class=\"min-w-0 flex-1 truncate\">{{ field.label }}</span>\n                  <span\n                    v-if=\"inUse.includes(field.name)\"\n                    class=\"inline-flex items-center gap-1.5 text-xs font-medium text-sui-accent\"\n                  >\n                    <span class=\"size-1.5 rounded-full bg-sui-accent-solid\" />\n                    {{ inUseLabel }}\n                  </span>\n                </ListboxItem>\n              </ListboxGroup>\n              <p v-if=\"!groups.length\" class=\"m-0 px-2 py-3 text-13 text-sui-ink-body\">\n                {{ noMatchLabel.replace('{query}', query) }}\n              </p>\n            </ListboxContent>\n          </FilterFrame>\n        </ListboxRoot>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"FilterMenu.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_renderSlot","_createVNode","Button","_mergeProps","_createElementVNode","_createTextVNode","_toDisplayString","FilterGlyph","FilterFrame","_createElementBlock","_Fragment","_renderList","_createCommentVNode","Button_default","FilterFrame_default","FilterGlyph_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","FilterMenu_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","attrs","useAttrs","custom","useCustomTrigger","query","ref","keyboard","groups","computed","q","shown","f","name","pick","onOpen","isOpen","onKeydown","event","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","_ctx","PopoverAnchor","renderSlot","PopoverTrigger","createVNode","mergeProps","createElementVNode","createTextVNode","toDisplayString","PopoverPortal","PopoverContent","ListboxRoot","ListboxFilter","ListboxContent","createElementBlock","Fragment","renderList","ListboxGroup","group","ListboxGroupLabel","createCommentVNode","ListboxItem","field"],"sources":["../../../src/components/Filters/FilterMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\n\nimport {\n  ListboxContent,\n  ListboxFilter,\n  ListboxGroup,\n  ListboxGroupLabel,\n  ListboxItem,\n  ListboxRoot,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport { type FilterTriggerProps, useCustomTrigger } from './trigger'\nimport type { FilterField } from './types'\n\nexport interface FilterMenuProps {\n  fields: FilterField[]\n  /** Fields already filtering, marked \"In use\"; picking one should open its chip, not add a second. */\n  inUse?: string[]\n  /** chip: the dashed \"+ Filter\" in the view bar. button: the page header's Filters button, tinted while filters are in use. */\n  as?: 'chip' | 'button'\n  /** as=\"button\" only: ghost for a page header. Secondary by default, tinted while filters are in use. */\n  variant?: 'secondary' | 'ghost' | 'tinted'\n  /** The footer's status; \"{count} fields\" by default. */\n  status?: string\n  label?: string\n  buttonLabel?: string\n  searchPlaceholder?: string\n  inUseLabel?: string\n  addLabel?: string\n  closeLabel?: string\n  /** `{count}` is the number of fields. */\n  fieldsLabel?: string\n  /** `{query}` is what was typed. */\n  noMatchLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilterMenuProps>(), {\n  inUse: () => [],\n  as: 'chip',\n  variant: undefined,\n  status: undefined,\n  label: 'Filter',\n  buttonLabel: 'Filters',\n  searchPlaceholder: 'Filter by…',\n  inUseLabel: 'In use',\n  addLabel: 'Add',\n  closeLabel: 'Close',\n  fieldsLabel: '{count} fields',\n  noMatchLabel: 'No field matches “{query}”.'\n})\n\nconst emit = defineEmits<{ pick: [name: string] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** Your own opener in place of the chip or button: spread `props` on it. `count` is the filters in use. */\n  trigger?: (props: { open: boolean; toggle: () => void; count: number; props: FilterTriggerProps }) => unknown\n}>()\n\nconst attrs = useAttrs()\nconst custom = useCustomTrigger(open)\nconst query = ref('')\n// Only the keyboard's highlight gets the focus ring; the pointer's is just a tint.\nconst keyboard = ref(false)\n\nconst groups = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  const shown = props.fields.filter((f) => !q || f.label.toLowerCase().includes(q))\n  return [...new Set(shown.map((f) => f.group ?? ''))].map((name) => ({\n    name,\n    fields: shown.filter((f) => (f.group ?? '') === name)\n  }))\n})\n\nfunction pick(name: unknown) {\n  if (typeof name !== 'string') return\n  open.value = false\n  query.value = ''\n  emit('pick', name)\n}\n\nfunction onOpen(isOpen: boolean) {\n  if (!isOpen) query.value = ''\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n}\n</script>\n\n<!-- The field list behind \"+ Filter\": search, fields grouped with their type, and which are already filtering. -->\n<template>\n  <PopoverRoot v-model:open=\"open\" @update:open=\"onOpen\">\n    <PopoverAnchor v-if=\"$slots.trigger\" as-child>\n      <slot :count=\"inUse.length\" name=\"trigger\" :open=\"open\" :props=\"custom.props.value\" :toggle=\"custom.toggle\" />\n    </PopoverAnchor>\n    <PopoverTrigger v-else-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :variant=\"variant ?? (inUse.length ? 'tinted' : 'secondary')\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M2.5 3.5h11l-4.25 5v4l-2.5 1v-5z\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong px-2 text-13 font-medium whitespace-nowrap text-sui-ink-muted outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-ink-muted hover:text-sui-ink-body focus-visible:sui-ring data-[state=open]:border-solid data-[state=open]:border-sui-accent-solid data-[state=open]:text-sui-accent data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <FilterGlyph name=\"plus\" />\n      {{ label }}\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        :aria-label=\"$slots.trigger ? searchPlaceholder : undefined\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :data-sui-panel=\"custom.panelKey\"\n        :side-offset=\"8\"\n        @close-auto-focus=\"custom.returnFocus\"\n        @interact-outside=\"custom.ignoreTrigger\"\n        @keydown=\"onKeydown\"\n        @pointermove=\"keyboard = false\"\n      >\n        <ListboxRoot highlight-on-hover @update:model-value=\"pick\">\n          <FilterFrame\n            :close-label=\"closeLabel\"\n            :enter-label=\"addLabel\"\n            :status=\"status ?? fieldsLabel.replace('{count}', String(fields.length))\"\n          >\n            <div class=\"flex h-11 items-center gap-2 border-b border-sui-line-subtle px-3.5 text-sui-ink-muted\">\n              <FilterGlyph class=\"size-4\" name=\"search\" />\n              <ListboxFilter\n                v-model=\"query\"\n                :aria-label=\"searchPlaceholder\"\n                auto-focus\n                class=\"h-full min-w-0 flex-1 border-none bg-transparent p-0 text-sm text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n                :placeholder=\"searchPlaceholder\"\n              />\n            </div>\n            <ListboxContent\n              :aria-label=\"searchPlaceholder\"\n              class=\"group/list max-h-64 overflow-auto px-1.5 pt-1 pb-1.5 outline-hidden\"\n              :data-keyboard=\"keyboard || undefined\"\n            >\n              <ListboxGroup v-for=\"group in groups\" :key=\"group.name\">\n                <ListboxGroupLabel\n                  v-if=\"group.name\"\n                  class=\"m-0 px-2 pt-2.5 pb-1 text-11 font-semibold tracking-caps text-sui-ink-muted uppercase\"\n                >\n                  {{ group.name }}\n                </ListboxGroupLabel>\n                <ListboxItem\n                  v-for=\"field in group.fields\"\n                  :key=\"field.name\"\n                  class=\"flex min-h-8 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-13.5 text-sui-ink outline-hidden select-none data-highlighted:bg-sui-sunken group-data-keyboard/list:data-highlighted:sui-ring-inset\"\n                  :value=\"field.name\"\n                >\n                  <span\n                    class=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-sui-sunken text-sui-ink-body\"\n                  >\n                    <FilterGlyph :name=\"field.type\" />\n                  </span>\n                  <span class=\"min-w-0 flex-1 truncate\">{{ field.label }}</span>\n                  <span\n                    v-if=\"inUse.includes(field.name)\"\n                    class=\"inline-flex items-center gap-1.5 text-xs font-medium text-sui-accent\"\n                  >\n                    <span class=\"size-1.5 rounded-full bg-sui-accent-solid\" />\n                    {{ inUseLabel }}\n                  </span>\n                </ListboxItem>\n              </ListboxGroup>\n              <p v-if=\"!groups.length\" class=\"m-0 px-2 py-3 text-13 text-sui-ink-body\">\n                {{ noMatchLabel.replace('{query}', query) }}\n              </p>\n            </ListboxContent>\n          </FilterFrame>\n        </ListboxRoot>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/Filters/SortMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortMenu.js","names":["_sfc_main","SortMenu_vue_vue_type_script_setup_true_lang_default","SortMenu_default"],"sources":["../../../src/components/Filters/SortMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, RadioGroupItem, RadioGroupRoot } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport SortArrow from './SortArrow.vue'\nimport { sortDirections } from './defaults'\nimport type { FilterField, FilterFieldType, ViewSort } from './types'\n\nexport interface SortMenuProps {\n  /** The sortable fields. */\n  options: FilterField[]\n  /** chip: the sort in the view bar, which shows only while there is one. button: the page header's Sort button. */\n  as?: 'chip' | 'button'\n  /** Boards can't sort: disable the button, with a Tooltip saying why. */\n  disabled?: boolean\n  status?: string\n  /** The two directions' words for each field type, ascending first. */\n  directionLabels?: Partial<Record<FilterFieldType, [string, string]>>\n  title?: string\n  buttonLabel?: string\n  clearLabel?: string\n  directionLabel?: string\n  doneLabel?: string\n  closeLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SortMenuProps>(), {\n  as: 'chip',\n  status: undefined,\n  directionLabels: () => ({}),\n  title: 'Sort by',\n  buttonLabel: 'Sort',\n  clearLabel: 'Clear sort',\n  directionLabel: 'Direction',\n  doneLabel: 'Done',\n  closeLabel: 'Close'\n})\n\nconst sort = defineModel<ViewSort | null>({ default: null })\nconst open = defineModel<boolean>('open', { default: false })\n\nconst attrs = useAttrs()\n\nconst current = computed(() => (sort.value ? props.options.find((o) => o.name === sort.value!.name) : undefined))\nconst words = (type: FilterFieldType) => props.directionLabels[type] ?? sortDirections[type]\nconst dirLabel = computed(() => (current.value ? words(current.value.type)[sort.value!.dir === 'desc' ? 1 : 0] : ''))\n\nfunction pickField(name: string) {\n  sort.value = { name, dir: sort.value?.name === name ? sort.value.dir : 'asc' }\n}\n\nfunction clear() {\n  sort.value = null\n  open.value = false\n}\n\nconst row =\n  'flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset'\n</script>\n\n<!-- A view's sort: the header's Sort button or the view bar's chip (\"Name, A → Z\") open a panel of fields and a direction. -->\n<template>\n  <PopoverRoot v-if=\"as === 'button' || current\" v-model:open=\"open\">\n    <PopoverTrigger v-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :disabled=\"disabled\" :variant=\"current ? 'tinted' : 'secondary'\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-13 whitespace-nowrap text-sui-accent outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-accent-bright focus-visible:sui-ring data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <SortArrow :dir=\"sort!.dir\" />\n      <span\n        ><span class=\"font-medium\">{{ current!.label }},</span>{{ ' ' }}{{ dirLabel }}</span\n      >\n      <svg\n        aria-hidden=\"true\"\n        class=\"size-3.5 shrink-0 fill-none stroke-current opacity-70\"\n        stroke-linecap=\"round\"\n        stroke-width=\"2.2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M6 9l6 6 6-6\" />\n      </svg>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :side-offset=\"8\"\n      >\n        <FilterFrame :close-label=\"closeLabel\" :enter-label=\"doneLabel\" :status=\"status\" @enter=\"open = false\">\n          <div class=\"flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-4 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n            </svg>\n            <span class=\"text-sm font-semibold text-sui-ink\">{{ title }}</span>\n            <button\n              v-if=\"current\"\n              class=\"ml-auto inline-flex h-7 items-center rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-sunken hover:text-sui-ink focus-visible:sui-ring-inset\"\n              type=\"button\"\n              @click=\"clear\"\n            >\n              {{ clearLabel }}\n            </button>\n          </div>\n          <RadioGroupRoot\n            :aria-label=\"title\"\n            class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\"\n            :model-value=\"sort?.name\"\n            @update:model-value=\"pickField($event as string)\"\n          >\n            <RadioGroupItem\n              v-for=\"option in options\"\n              :key=\"option.name\"\n              :class=\"[\n                row,\n                option.name === sort?.name\n                  ? 'bg-sui-accent-wash font-semibold text-sui-accent'\n                  : 'text-sui-ink hover:bg-sui-sunken'\n              ]\"\n              :value=\"option.name\"\n            >\n              <span\n                class=\"flex size-6 shrink-0 items-center justify-center rounded-md\"\n                :class=\"\n                  option.name === sort?.name ? 'bg-sui-surface text-sui-accent' : 'bg-sui-sunken text-sui-ink-body'\n                \"\n              >\n                <FilterGlyph :name=\"option.type\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n              <CheckIcon v-if=\"option.name === sort?.name\" />\n            </RadioGroupItem>\n          </RadioGroupRoot>\n          <RadioGroupRoot\n            v-if=\"current\"\n            :aria-label=\"directionLabel\"\n            class=\"mx-3 mb-3 grid grid-cols-2 gap-0.5 rounded-lg bg-sui-sunken p-0.75\"\n            :model-value=\"sort!.dir\"\n            orientation=\"horizontal\"\n            @update:model-value=\"sort = { name: sort!.name, dir: $event as ViewSort['dir'] }\"\n          >\n            <RadioGroupItem\n              v-for=\"(dir, i) in ['asc', 'desc'] as const\"\n              :key=\"dir\"\n              class=\"flex h-9 items-center justify-center gap-1.5 rounded-md text-13 font-medium outline-hidden transition-colors duration-150 focus-visible:sui-ring-inset\"\n              :class=\"\n                sort!.dir === dir\n                  ? 'bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle'\n                  : 'text-sui-ink-body hover:text-sui-ink'\n              \"\n              :value=\"dir\"\n            >\n              <SortArrow :dir=\"dir\" />\n              {{ words(current.type)[i] }}\n            </RadioGroupItem>\n          </RadioGroupRoot>\n        </FilterFrame>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SortMenu.js","names":["_sfc_main","SortMenu_vue_vue_type_script_setup_true_lang_default","SortMenu_default"],"sources":["../../../src/components/Filters/SortMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  RadioGroupItem,\n  RadioGroupRoot\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport SortArrow from './SortArrow.vue'\nimport { sortDirections } from './defaults'\nimport { type FilterTriggerProps, useCustomTrigger } from './trigger'\nimport type { FilterField, FilterFieldType, ViewSort } from './types'\n\nexport interface SortMenuProps {\n  /** The sortable fields. */\n  options: FilterField[]\n  /** chip: the sort in the view bar, which shows only while there is one. button: the page header's Sort button. */\n  as?: 'chip' | 'button'\n  /** as=\"button\" only: ghost for a page header. Secondary by default, tinted while sorted. */\n  variant?: 'secondary' | 'ghost' | 'tinted'\n  /** Boards can't sort: disable the button, with a Tooltip saying why. */\n  disabled?: boolean\n  status?: string\n  /** The two directions' words for each field type, ascending first. */\n  directionLabels?: Partial<Record<FilterFieldType, [string, string]>>\n  title?: string\n  buttonLabel?: string\n  clearLabel?: string\n  directionLabel?: string\n  doneLabel?: string\n  closeLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SortMenuProps>(), {\n  as: 'chip',\n  variant: undefined,\n  status: undefined,\n  directionLabels: () => ({}),\n  title: 'Sort by',\n  buttonLabel: 'Sort',\n  clearLabel: 'Clear sort',\n  directionLabel: 'Direction',\n  doneLabel: 'Done',\n  closeLabel: 'Close'\n})\n\nconst sort = defineModel<ViewSort | null>({ default: null })\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** Your own opener in place of the chip or button: spread `props` on it. `label` reads like the chip. */\n  trigger?: (props: {\n    open: boolean\n    toggle: () => void\n    active: boolean\n    label: string\n    props: FilterTriggerProps\n  }) => unknown\n}>()\n\nconst attrs = useAttrs()\nconst custom = useCustomTrigger(open)\n\nconst current = computed(() => (sort.value ? props.options.find((o) => o.name === sort.value!.name) : undefined))\nconst words = (type: FilterFieldType) => props.directionLabels[type] ?? sortDirections[type]\nconst dirLabel = computed(() => (current.value ? words(current.value.type)[sort.value!.dir === 'desc' ? 1 : 0] : ''))\n\nfunction pickField(name: string) {\n  const field = props.options.find((o) => o.name === name)\n  sort.value = { name, dir: sort.value?.name === name ? sort.value.dir : (field?.sortDir ?? 'asc') }\n}\n\nfunction clear() {\n  sort.value = null\n  open.value = false\n}\n\nconst row =\n  'flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset'\n</script>\n\n<!-- A view's sort: the header's Sort button or the view bar's chip (\"Name, A → Z\") open a panel of fields and a direction. -->\n<template>\n  <PopoverRoot v-if=\"$slots.trigger || as === 'button' || current\" v-model:open=\"open\">\n    <PopoverAnchor v-if=\"$slots.trigger\" as-child>\n      <slot\n        :active=\"!!current\"\n        :label=\"current ? `${current.label}, ${dirLabel}` : ''\"\n        name=\"trigger\"\n        :open=\"open\"\n        :props=\"custom.props.value\"\n        :toggle=\"custom.toggle\"\n      />\n    </PopoverAnchor>\n    <PopoverTrigger v-else-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :disabled=\"disabled\" :variant=\"variant ?? (current ? 'tinted' : 'secondary')\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-13 whitespace-nowrap text-sui-accent outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-accent-bright focus-visible:sui-ring data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <SortArrow :dir=\"sort!.dir\" />\n      <span\n        ><span class=\"font-medium\">{{ current!.label }},</span>{{ ' ' }}{{ dirLabel }}</span\n      >\n      <svg\n        aria-hidden=\"true\"\n        class=\"size-3.5 shrink-0 fill-none stroke-current opacity-70\"\n        stroke-linecap=\"round\"\n        stroke-width=\"2.2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M6 9l6 6 6-6\" />\n      </svg>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        :aria-label=\"$slots.trigger ? title : undefined\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :data-sui-panel=\"custom.panelKey\"\n        :side-offset=\"8\"\n        @close-auto-focus=\"custom.returnFocus\"\n        @interact-outside=\"custom.ignoreTrigger\"\n      >\n        <FilterFrame :close-label=\"closeLabel\" :enter-label=\"doneLabel\" :status=\"status\" @enter=\"open = false\">\n          <div class=\"flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-4 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n            </svg>\n            <span class=\"text-sm font-semibold text-sui-ink\">{{ title }}</span>\n            <button\n              v-if=\"current\"\n              class=\"ml-auto inline-flex h-7 items-center rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-sunken hover:text-sui-ink focus-visible:sui-ring-inset\"\n              type=\"button\"\n              @click=\"clear\"\n            >\n              {{ clearLabel }}\n            </button>\n          </div>\n          <RadioGroupRoot\n            :aria-label=\"title\"\n            class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\"\n            :model-value=\"sort?.name\"\n            @update:model-value=\"pickField($event as string)\"\n          >\n            <RadioGroupItem\n              v-for=\"option in options\"\n              :key=\"option.name\"\n              :class=\"[\n                row,\n                option.name === sort?.name\n                  ? 'bg-sui-accent-wash font-semibold text-sui-accent'\n                  : 'text-sui-ink hover:bg-sui-sunken'\n              ]\"\n              :value=\"option.name\"\n            >\n              <span\n                class=\"flex size-6 shrink-0 items-center justify-center rounded-md\"\n                :class=\"\n                  option.name === sort?.name ? 'bg-sui-surface text-sui-accent' : 'bg-sui-sunken text-sui-ink-body'\n                \"\n              >\n                <FilterGlyph :name=\"option.type\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n              <CheckIcon v-if=\"option.name === sort?.name\" />\n            </RadioGroupItem>\n          </RadioGroupRoot>\n          <RadioGroupRoot\n            v-if=\"current\"\n            :aria-label=\"directionLabel\"\n            class=\"mx-3 mb-3 grid grid-cols-2 gap-0.5 rounded-lg bg-sui-sunken p-0.75\"\n            :model-value=\"sort!.dir\"\n            orientation=\"horizontal\"\n            @update:model-value=\"sort = { name: sort!.name, dir: $event as ViewSort['dir'] }\"\n          >\n            <RadioGroupItem\n              v-for=\"(dir, i) in ['asc', 'desc'] as const\"\n              :key=\"dir\"\n              class=\"flex h-9 items-center justify-center gap-1.5 rounded-md text-13 font-medium outline-hidden transition-colors duration-150 focus-visible:sui-ring-inset\"\n              :class=\"\n                sort!.dir === dir\n                  ? 'bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle'\n                  : 'text-sui-ink-body hover:text-sui-ink'\n              \"\n              :value=\"dir\"\n            >\n              <SortArrow :dir=\"dir\" />\n              {{ words(current.type)[i] }}\n            </RadioGroupItem>\n          </RadioGroupRoot>\n        </FilterFrame>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/components/Filters/SortMenu.vue.d.ts

@@ -1,9 +1,12 @@
+import { type FilterTriggerProps } from './trigger';
 import type { FilterField, FilterFieldType, ViewSort } from './types';
 export interface SortMenuProps {
     /** The sortable fields. */
     options: FilterField[];
     /** chip: the sort in the view bar, which shows only while there is one. button: the page header's Sort button. */
     as?: 'chip' | 'button';
+    /** as="button" only: ghost for a page header. Secondary by default, tinted while sorted. */
+    variant?: 'secondary' | 'ghost' | 'tinted';
     /** Boards can't sort: disable the button, with a Tooltip saying why. */
     disabled?: boolean;
     status?: string;
@@ -17,18 +20,29 @@ export interface SortMenuProps {
     closeLabel?: string;
 }
 type __VLS_Props = SortMenuProps;
+type __VLS_Slots = {
+    /** Your own opener in place of the chip or button: spread `props` on it. `label` reads like the chip. */
+    trigger?: (props: {
+        open: boolean;
+        toggle: () => void;
+        active: boolean;
+        label: string;
+        props: FilterTriggerProps;
+    }) => unknown;
+};
 type __VLS_ModelProps = {
     modelValue?: ViewSort | null;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: ViewSort | null) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: ViewSort | null) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     title: string;
     clearLabel: string;
@@ -39,5 +53,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     directionLabel: string;
     doneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Filters/SortMenu.vue_vue_type_script_setup_true_lang.js

@@ -3,16 +3,18 @@ import t from "../internal/CheckIcon.js";
 import n from "./FilterFrame.js";
 import r from "./FilterGlyph.js";
 import { sortDirections as i } from "./defaults.js";
-import a from "./SortArrow.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as _, openBlock as v, renderList as y, toDisplayString as b, unref as x, useAttrs as S, useModel as C, withCtx as w } from "vue";
-import { PopoverContent as T, PopoverPortal as E, PopoverRoot as D, PopoverTrigger as O, RadioGroupItem as k, RadioGroupRoot as A } from "reka-ui";
+import { useCustomTrigger as a } from "./trigger.js";
+import o from "./SortArrow.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, mergeProps as _, normalizeClass as v, openBlock as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useModel as T, withCtx as E } from "vue";
+import { PopoverAnchor as D, PopoverContent as O, PopoverPortal as k, PopoverRoot as A, PopoverTrigger as j, RadioGroupItem as M, RadioGroupRoot as N } from "reka-ui";
 //#region src/components/Filters/SortMenu.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "font-medium" }, M = { class: "flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted" }, N = { class: "text-sm font-semibold text-sui-ink" }, P = { class: "min-w-0 flex-1 truncate" }, F = "flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset", I = /*@__PURE__*/ m({
+var P = { class: "font-medium" }, F = { class: "flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted" }, I = { class: "text-sm font-semibold text-sui-ink" }, L = { class: "min-w-0 flex-1 truncate" }, R = "flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset", z = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "SortMenu",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ g({
 		options: {},
 		as: { default: "chip" },
+		variant: { default: void 0 },
 		disabled: { type: Boolean },
 		status: { default: void 0 },
 		directionLabels: { default: () => ({}) },
@@ -32,125 +34,142 @@ var j = { class: "font-medium" }, M = { class: "flex h-11 items-center gap-1.5 p
 		openModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:open"],
-	setup(m) {
-		let h = m, I = C(m, "modelValue"), L = C(m, "open"), R = S(), z = s(() => I.value ? h.options.find((e) => e.name === I.value.name) : void 0), B = (e) => h.directionLabels[e] ?? i[e], V = s(() => z.value ? B(z.value.type)[+(I.value.dir === "desc")] : "");
-		function H(e) {
-			I.value = {
+	setup(h) {
+		let g = h, z = T(h, "modelValue"), B = T(h, "open"), V = w(), H = a(B), U = c(() => z.value ? g.options.find((e) => e.name === z.value.name) : void 0), W = (e) => g.directionLabels[e] ?? i[e], G = c(() => U.value ? W(U.value.type)[+(z.value.dir === "desc")] : "");
+		function K(e) {
+			let t = g.options.find((t) => t.name === e);
+			z.value = {
 				name: e,
-				dir: I.value?.name === e ? I.value.dir : "asc"
+				dir: z.value?.name === e ? z.value.dir : t?.sortDir ?? "asc"
 			};
 		}
-		function U() {
-			I.value = null, L.value = !1;
+		function q() {
+			z.value = null, B.value = !1;
 		}
-		return (i, s) => m.as === "button" || z.value ? (v(), c(x(D), {
+		return (i, a) => i.$slots.trigger || h.as === "button" || U.value ? (y(), l(C(A), {
 			key: 0,
-			open: L.value,
-			"onUpdate:open": s[3] ||= (e) => L.value = e
+			open: B.value,
+			"onUpdate:open": a[3] ||= (e) => B.value = e
 		}, {
-			default: w(() => [m.as === "button" ? (v(), c(x(O), {
+			default: E(() => [i.$slots.trigger ? (y(), l(C(D), {
 				key: 0,
 				"as-child": ""
 			}, {
-				default: w(() => [p(e, g(x(R), {
-					disabled: m.disabled,
-					variant: z.value ? "tinted" : "secondary"
+				default: E(() => [x(i.$slots, "trigger", {
+					active: !!U.value,
+					label: U.value ? `${U.value.label}, ${G.value}` : "",
+					open: B.value,
+					props: C(H).props.value,
+					toggle: C(H).toggle
+				})]),
+				_: 3
+			})) : h.as === "button" ? (y(), l(C(j), {
+				key: 1,
+				"as-child": ""
+			}, {
+				default: E(() => [m(e, _(C(V), {
+					disabled: h.disabled,
+					variant: h.variant ?? (U.value ? "tinted" : "secondary")
 				}), {
-					default: w(() => [s[4] ||= d("svg", {
+					default: E(() => [a[4] ||= f("svg", {
 						"aria-hidden": "true",
 						class: "size-4 fill-none stroke-current",
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round",
 						"stroke-width": "1.5",
 						viewBox: "0 0 16 16"
-					}, [d("path", { d: "M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5" })], -1), f(" " + b(m.buttonLabel), 1)]),
+					}, [f("path", { d: "M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5" })], -1), p(" " + S(h.buttonLabel), 1)]),
 					_: 1
 				}, 16, ["disabled", "variant"])]),
 				_: 1
-			})) : (v(), c(x(O), g({ key: 1 }, x(R), { class: "inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-13 whitespace-nowrap text-sui-accent outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-accent-bright focus-visible:sui-ring data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]" }), {
-				default: w(() => [
-					p(a, { dir: I.value.dir }, null, 8, ["dir"]),
-					d("span", null, [d("span", j, b(z.value.label) + ",", 1), f(b(" ") + b(V.value), 1)]),
-					s[5] ||= d("svg", {
+			})) : (y(), l(C(j), _({ key: 2 }, C(V), { class: "inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-13 whitespace-nowrap text-sui-accent outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-accent-bright focus-visible:sui-ring data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]" }), {
+				default: E(() => [
+					m(o, { dir: z.value.dir }, null, 8, ["dir"]),
+					f("span", null, [f("span", P, S(U.value.label) + ",", 1), p(S(" ") + S(G.value), 1)]),
+					a[5] ||= f("svg", {
 						"aria-hidden": "true",
 						class: "size-3.5 shrink-0 fill-none stroke-current opacity-70",
 						"stroke-linecap": "round",
 						"stroke-width": "2.2",
 						viewBox: "0 0 24 24"
-					}, [d("path", { d: "M6 9l6 6 6-6" })], -1)
+					}, [f("path", { d: "M6 9l6 6 6-6" })], -1)
 				]),
 				_: 1
-			}, 16)), p(x(E), null, {
-				default: w(() => [p(x(T), {
+			}, 16)), m(C(k), null, {
+				default: E(() => [m(C(O), {
 					align: "start",
+					"aria-label": i.$slots.trigger ? h.title : void 0,
 					class: "z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in",
-					"side-offset": 8
+					"data-sui-panel": C(H).panelKey,
+					"side-offset": 8,
+					onCloseAutoFocus: C(H).returnFocus,
+					onInteractOutside: C(H).ignoreTrigger
 				}, {
-					default: w(() => [p(n, {
-						"close-label": m.closeLabel,
-						"enter-label": m.doneLabel,
-						status: m.status,
-						onEnter: s[2] ||= (e) => L.value = !1
+					default: E(() => [m(n, {
+						"close-label": h.closeLabel,
+						"enter-label": h.doneLabel,
+						status: h.status,
+						onEnter: a[2] ||= (e) => B.value = !1
 					}, {
-						default: w(() => [
-							d("div", M, [
-								s[6] ||= d("svg", {
+						default: E(() => [
+							f("div", F, [
+								a[6] ||= f("svg", {
 									"aria-hidden": "true",
 									class: "size-4 fill-none stroke-current",
 									"stroke-linecap": "round",
 									"stroke-linejoin": "round",
 									"stroke-width": "1.5",
 									viewBox: "0 0 16 16"
-								}, [d("path", { d: "M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5" })], -1),
-								d("span", N, b(m.title), 1),
-								z.value ? (v(), u("button", {
+								}, [f("path", { d: "M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5" })], -1),
+								f("span", I, S(h.title), 1),
+								U.value ? (y(), d("button", {
 									key: 0,
 									class: "ml-auto inline-flex h-7 items-center rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-sunken hover:text-sui-ink focus-visible:sui-ring-inset",
 									type: "button",
-									onClick: U
-								}, b(m.clearLabel), 1)) : l("", !0)
+									onClick: q
+								}, S(h.clearLabel), 1)) : u("", !0)
 							]),
-							p(x(A), {
-								"aria-label": m.title,
+							m(C(N), {
+								"aria-label": h.title,
 								class: "max-h-64 overflow-auto px-1.5 pt-1 pb-1.5",
-								"model-value": I.value?.name,
-								"onUpdate:modelValue": s[0] ||= (e) => H(e)
+								"model-value": z.value?.name,
+								"onUpdate:modelValue": a[0] ||= (e) => K(e)
 							}, {
-								default: w(() => [(v(!0), u(o, null, y(m.options, (e) => (v(), c(x(k), {
+								default: E(() => [(y(!0), d(s, null, b(h.options, (e) => (y(), l(C(M), {
 									key: e.name,
-									class: _([F, e.name === I.value?.name ? "bg-sui-accent-wash font-semibold text-sui-accent" : "text-sui-ink hover:bg-sui-sunken"]),
+									class: v([R, e.name === z.value?.name ? "bg-sui-accent-wash font-semibold text-sui-accent" : "text-sui-ink hover:bg-sui-sunken"]),
 									value: e.name
 								}, {
-									default: w(() => [
-										d("span", { class: _(["flex size-6 shrink-0 items-center justify-center rounded-md", e.name === I.value?.name ? "bg-sui-surface text-sui-accent" : "bg-sui-sunken text-sui-ink-body"]) }, [p(r, { name: e.type }, null, 8, ["name"])], 2),
-										d("span", P, b(e.label), 1),
-										e.name === I.value?.name ? (v(), c(t, { key: 0 })) : l("", !0)
+									default: E(() => [
+										f("span", { class: v(["flex size-6 shrink-0 items-center justify-center rounded-md", e.name === z.value?.name ? "bg-sui-surface text-sui-accent" : "bg-sui-sunken text-sui-ink-body"]) }, [m(r, { name: e.type }, null, 8, ["name"])], 2),
+										f("span", L, S(e.label), 1),
+										e.name === z.value?.name ? (y(), l(t, { key: 0 })) : u("", !0)
 									]),
 									_: 2
 								}, 1032, ["class", "value"]))), 128))]),
 								_: 1
 							}, 8, ["aria-label", "model-value"]),
-							z.value ? (v(), c(x(A), {
+							U.value ? (y(), l(C(N), {
 								key: 0,
-								"aria-label": m.directionLabel,
+								"aria-label": h.directionLabel,
 								class: "mx-3 mb-3 grid grid-cols-2 gap-0.5 rounded-lg bg-sui-sunken p-0.75",
-								"model-value": I.value.dir,
+								"model-value": z.value.dir,
 								orientation: "horizontal",
-								"onUpdate:modelValue": s[1] ||= (e) => I.value = {
-									name: I.value.name,
+								"onUpdate:modelValue": a[1] ||= (e) => z.value = {
+									name: z.value.name,
 									dir: e
 								}
 							}, {
-								default: w(() => [(v(), u(o, null, y(["asc", "desc"], (e, t) => p(x(k), {
+								default: E(() => [(y(), d(s, null, b(["asc", "desc"], (e, t) => m(C(M), {
 									key: e,
-									class: _(["flex h-9 items-center justify-center gap-1.5 rounded-md text-13 font-medium outline-hidden transition-colors duration-150 focus-visible:sui-ring-inset", I.value.dir === e ? "bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle" : "text-sui-ink-body hover:text-sui-ink"]),
+									class: v(["flex h-9 items-center justify-center gap-1.5 rounded-md text-13 font-medium outline-hidden transition-colors duration-150 focus-visible:sui-ring-inset", z.value.dir === e ? "bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle" : "text-sui-ink-body hover:text-sui-ink"]),
 									value: e
 								}, {
-									default: w(() => [p(a, { dir: e }, null, 8, ["dir"]), f(" " + b(B(z.value.type)[t]), 1)]),
+									default: E(() => [m(o, { dir: e }, null, 8, ["dir"]), p(" " + S(W(U.value.type)[t]), 1)]),
 									_: 2
 								}, 1032, ["class", "value"])), 64))]),
 								_: 1
-							}, 8, ["aria-label", "model-value"])) : l("", !0)
+							}, 8, ["aria-label", "model-value"])) : u("", !0)
 						]),
 						_: 1
 					}, 8, [
@@ -159,14 +178,19 @@ var j = { class: "font-medium" }, M = { class: "flex h-11 items-center gap-1.5 p
 						"status"
 					])]),
 					_: 1
-				})]),
+				}, 8, [
+					"aria-label",
+					"data-sui-panel",
+					"onCloseAutoFocus",
+					"onInteractOutside"
+				])]),
 				_: 1
 			})]),
-			_: 1
-		}, 8, ["open"])) : l("", !0);
+			_: 3
+		}, 8, ["open"])) : u("", !0);
 	}
 });
 //#endregion
-export { I as default };
+export { z as default };
 
 //# sourceMappingURL=SortMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Filters/SortMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortMenu.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","Button","_mergeProps","_createElementVNode","_createTextVNode","_toDisplayString","SortArrow","FilterFrame","_createElementBlock","_createCommentVNode","_Fragment","_renderList","_normalizeClass","FilterGlyph","CheckIcon","Button_default","CheckIcon_default","FilterFrame_default","FilterGlyph_default","SortArrow_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","row","SortMenu_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","sort","useModel","open","attrs","useAttrs","current","computed","o","words","type","sortDirections","dirLabel","pickField","name","clear","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","PopoverTrigger","createVNode","mergeProps","createElementVNode","createTextVNode","toDisplayString","PopoverPortal","PopoverContent","createElementBlock","createCommentVNode","RadioGroupRoot","Fragment","renderList","RadioGroupItem","option","normalizeClass","dir","i"],"sources":["../../../src/components/Filters/SortMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, RadioGroupItem, RadioGroupRoot } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport SortArrow from './SortArrow.vue'\nimport { sortDirections } from './defaults'\nimport type { FilterField, FilterFieldType, ViewSort } from './types'\n\nexport interface SortMenuProps {\n  /** The sortable fields. */\n  options: FilterField[]\n  /** chip: the sort in the view bar, which shows only while there is one. button: the page header's Sort button. */\n  as?: 'chip' | 'button'\n  /** Boards can't sort: disable the button, with a Tooltip saying why. */\n  disabled?: boolean\n  status?: string\n  /** The two directions' words for each field type, ascending first. */\n  directionLabels?: Partial<Record<FilterFieldType, [string, string]>>\n  title?: string\n  buttonLabel?: string\n  clearLabel?: string\n  directionLabel?: string\n  doneLabel?: string\n  closeLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SortMenuProps>(), {\n  as: 'chip',\n  status: undefined,\n  directionLabels: () => ({}),\n  title: 'Sort by',\n  buttonLabel: 'Sort',\n  clearLabel: 'Clear sort',\n  directionLabel: 'Direction',\n  doneLabel: 'Done',\n  closeLabel: 'Close'\n})\n\nconst sort = defineModel<ViewSort | null>({ default: null })\nconst open = defineModel<boolean>('open', { default: false })\n\nconst attrs = useAttrs()\n\nconst current = computed(() => (sort.value ? props.options.find((o) => o.name === sort.value!.name) : undefined))\nconst words = (type: FilterFieldType) => props.directionLabels[type] ?? sortDirections[type]\nconst dirLabel = computed(() => (current.value ? words(current.value.type)[sort.value!.dir === 'desc' ? 1 : 0] : ''))\n\nfunction pickField(name: string) {\n  sort.value = { name, dir: sort.value?.name === name ? sort.value.dir : 'asc' }\n}\n\nfunction clear() {\n  sort.value = null\n  open.value = false\n}\n\nconst row =\n  'flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset'\n</script>\n\n<!-- A view's sort: the header's Sort button or the view bar's chip (\"Name, A → Z\") open a panel of fields and a direction. -->\n<template>\n  <PopoverRoot v-if=\"as === 'button' || current\" v-model:open=\"open\">\n    <PopoverTrigger v-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :disabled=\"disabled\" :variant=\"current ? 'tinted' : 'secondary'\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-13 whitespace-nowrap text-sui-accent outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-accent-bright focus-visible:sui-ring data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <SortArrow :dir=\"sort!.dir\" />\n      <span\n        ><span class=\"font-medium\">{{ current!.label }},</span>{{ ' ' }}{{ dirLabel }}</span\n      >\n      <svg\n        aria-hidden=\"true\"\n        class=\"size-3.5 shrink-0 fill-none stroke-current opacity-70\"\n        stroke-linecap=\"round\"\n        stroke-width=\"2.2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M6 9l6 6 6-6\" />\n      </svg>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :side-offset=\"8\"\n      >\n        <FilterFrame :close-label=\"closeLabel\" :enter-label=\"doneLabel\" :status=\"status\" @enter=\"open = false\">\n          <div class=\"flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-4 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n            </svg>\n            <span class=\"text-sm font-semibold text-sui-ink\">{{ title }}</span>\n            <button\n              v-if=\"current\"\n              class=\"ml-auto inline-flex h-7 items-center rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-sunken hover:text-sui-ink focus-visible:sui-ring-inset\"\n              type=\"button\"\n              @click=\"clear\"\n            >\n              {{ clearLabel }}\n            </button>\n          </div>\n          <RadioGroupRoot\n            :aria-label=\"title\"\n            class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\"\n            :model-value=\"sort?.name\"\n            @update:model-value=\"pickField($event as string)\"\n          >\n            <RadioGroupItem\n              v-for=\"option in options\"\n              :key=\"option.name\"\n              :class=\"[\n                row,\n                option.name === sort?.name\n                  ? 'bg-sui-accent-wash font-semibold text-sui-accent'\n                  : 'text-sui-ink hover:bg-sui-sunken'\n              ]\"\n              :value=\"option.name\"\n            >\n              <span\n                class=\"flex size-6 shrink-0 items-center justify-center rounded-md\"\n                :class=\"\n                  option.name === sort?.name ? 'bg-sui-surface text-sui-accent' : 'bg-sui-sunken text-sui-ink-body'\n                \"\n              >\n                <FilterGlyph :name=\"option.type\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n              <CheckIcon v-if=\"option.name === sort?.name\" />\n            </RadioGroupItem>\n          </RadioGroupRoot>\n          <RadioGroupRoot\n            v-if=\"current\"\n            :aria-label=\"directionLabel\"\n            class=\"mx-3 mb-3 grid grid-cols-2 gap-0.5 rounded-lg bg-sui-sunken p-0.75\"\n            :model-value=\"sort!.dir\"\n            orientation=\"horizontal\"\n            @update:model-value=\"sort = { name: sort!.name, dir: $event as ViewSort['dir'] }\"\n          >\n            <RadioGroupItem\n              v-for=\"(dir, i) in ['asc', 'desc'] as const\"\n              :key=\"dir\"\n              class=\"flex h-9 items-center justify-center gap-1.5 rounded-md text-13 font-medium outline-hidden transition-colors duration-150 focus-visible:sui-ring-inset\"\n              :class=\"\n                sort!.dir === dir\n                  ? 'bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle'\n                  : 'text-sui-ink-body hover:text-sui-ink'\n              \"\n              :value=\"dir\"\n            >\n              <SortArrow :dir=\"dir\" />\n              {{ words(current.type)[i] }}\n            </RadioGroupItem>\n          </RadioGroupRoot>\n        </FilterFrame>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"SortMenu.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_renderSlot","_createVNode","Button","_mergeProps","_createElementVNode","_createTextVNode","_toDisplayString","SortArrow","FilterFrame","_createElementBlock","_createCommentVNode","_Fragment","_renderList","_normalizeClass","FilterGlyph","CheckIcon","Button_default","CheckIcon_default","FilterFrame_default","FilterGlyph_default","SortArrow_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","row","SortMenu_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","sort","useModel","open","attrs","useAttrs","custom","useCustomTrigger","current","computed","o","words","type","sortDirections","dirLabel","pickField","field","name","clear","_ctx","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","PopoverAnchor","renderSlot","PopoverTrigger","createVNode","mergeProps","createElementVNode","createTextVNode","toDisplayString","PopoverPortal","PopoverContent","createElementBlock","createCommentVNode","RadioGroupRoot","Fragment","renderList","RadioGroupItem","option","normalizeClass","dir","i"],"sources":["../../../src/components/Filters/SortMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  RadioGroupItem,\n  RadioGroupRoot\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport SortArrow from './SortArrow.vue'\nimport { sortDirections } from './defaults'\nimport { type FilterTriggerProps, useCustomTrigger } from './trigger'\nimport type { FilterField, FilterFieldType, ViewSort } from './types'\n\nexport interface SortMenuProps {\n  /** The sortable fields. */\n  options: FilterField[]\n  /** chip: the sort in the view bar, which shows only while there is one. button: the page header's Sort button. */\n  as?: 'chip' | 'button'\n  /** as=\"button\" only: ghost for a page header. Secondary by default, tinted while sorted. */\n  variant?: 'secondary' | 'ghost' | 'tinted'\n  /** Boards can't sort: disable the button, with a Tooltip saying why. */\n  disabled?: boolean\n  status?: string\n  /** The two directions' words for each field type, ascending first. */\n  directionLabels?: Partial<Record<FilterFieldType, [string, string]>>\n  title?: string\n  buttonLabel?: string\n  clearLabel?: string\n  directionLabel?: string\n  doneLabel?: string\n  closeLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SortMenuProps>(), {\n  as: 'chip',\n  variant: undefined,\n  status: undefined,\n  directionLabels: () => ({}),\n  title: 'Sort by',\n  buttonLabel: 'Sort',\n  clearLabel: 'Clear sort',\n  directionLabel: 'Direction',\n  doneLabel: 'Done',\n  closeLabel: 'Close'\n})\n\nconst sort = defineModel<ViewSort | null>({ default: null })\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** Your own opener in place of the chip or button: spread `props` on it. `label` reads like the chip. */\n  trigger?: (props: {\n    open: boolean\n    toggle: () => void\n    active: boolean\n    label: string\n    props: FilterTriggerProps\n  }) => unknown\n}>()\n\nconst attrs = useAttrs()\nconst custom = useCustomTrigger(open)\n\nconst current = computed(() => (sort.value ? props.options.find((o) => o.name === sort.value!.name) : undefined))\nconst words = (type: FilterFieldType) => props.directionLabels[type] ?? sortDirections[type]\nconst dirLabel = computed(() => (current.value ? words(current.value.type)[sort.value!.dir === 'desc' ? 1 : 0] : ''))\n\nfunction pickField(name: string) {\n  const field = props.options.find((o) => o.name === name)\n  sort.value = { name, dir: sort.value?.name === name ? sort.value.dir : (field?.sortDir ?? 'asc') }\n}\n\nfunction clear() {\n  sort.value = null\n  open.value = false\n}\n\nconst row =\n  'flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset'\n</script>\n\n<!-- A view's sort: the header's Sort button or the view bar's chip (\"Name, A → Z\") open a panel of fields and a direction. -->\n<template>\n  <PopoverRoot v-if=\"$slots.trigger || as === 'button' || current\" v-model:open=\"open\">\n    <PopoverAnchor v-if=\"$slots.trigger\" as-child>\n      <slot\n        :active=\"!!current\"\n        :label=\"current ? `${current.label}, ${dirLabel}` : ''\"\n        name=\"trigger\"\n        :open=\"open\"\n        :props=\"custom.props.value\"\n        :toggle=\"custom.toggle\"\n      />\n    </PopoverAnchor>\n    <PopoverTrigger v-else-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :disabled=\"disabled\" :variant=\"variant ?? (current ? 'tinted' : 'secondary')\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-13 whitespace-nowrap text-sui-accent outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-accent-bright focus-visible:sui-ring data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <SortArrow :dir=\"sort!.dir\" />\n      <span\n        ><span class=\"font-medium\">{{ current!.label }},</span>{{ ' ' }}{{ dirLabel }}</span\n      >\n      <svg\n        aria-hidden=\"true\"\n        class=\"size-3.5 shrink-0 fill-none stroke-current opacity-70\"\n        stroke-linecap=\"round\"\n        stroke-width=\"2.2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M6 9l6 6 6-6\" />\n      </svg>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        :aria-label=\"$slots.trigger ? title : undefined\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :data-sui-panel=\"custom.panelKey\"\n        :side-offset=\"8\"\n        @close-auto-focus=\"custom.returnFocus\"\n        @interact-outside=\"custom.ignoreTrigger\"\n      >\n        <FilterFrame :close-label=\"closeLabel\" :enter-label=\"doneLabel\" :status=\"status\" @enter=\"open = false\">\n          <div class=\"flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-4 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path d=\"M5 13V3M2.5 5.5 5 3l2.5 2.5M11 3v10M8.5 10.5 11 13l2.5-2.5\" />\n            </svg>\n            <span class=\"text-sm font-semibold text-sui-ink\">{{ title }}</span>\n            <button\n              v-if=\"current\"\n              class=\"ml-auto inline-flex h-7 items-center rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-sunken hover:text-sui-ink focus-visible:sui-ring-inset\"\n              type=\"button\"\n              @click=\"clear\"\n            >\n              {{ clearLabel }}\n            </button>\n          </div>\n          <RadioGroupRoot\n            :aria-label=\"title\"\n            class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\"\n            :model-value=\"sort?.name\"\n            @update:model-value=\"pickField($event as string)\"\n          >\n            <RadioGroupItem\n              v-for=\"option in options\"\n              :key=\"option.name\"\n              :class=\"[\n                row,\n                option.name === sort?.name\n                  ? 'bg-sui-accent-wash font-semibold text-sui-accent'\n                  : 'text-sui-ink hover:bg-sui-sunken'\n              ]\"\n              :value=\"option.name\"\n            >\n              <span\n                class=\"flex size-6 shrink-0 items-center justify-center rounded-md\"\n                :class=\"\n                  option.name === sort?.name ? 'bg-sui-surface text-sui-accent' : 'bg-sui-sunken text-sui-ink-body'\n                \"\n              >\n                <FilterGlyph :name=\"option.type\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n              <CheckIcon v-if=\"option.name === sort?.name\" />\n            </RadioGroupItem>\n          </RadioGroupRoot>\n          <RadioGroupRoot\n            v-if=\"current\"\n            :aria-label=\"directionLabel\"\n            class=\"mx-3 mb-3 grid grid-cols-2 gap-0.5 rounded-lg bg-sui-sunken p-0.75\"\n            :model-value=\"sort!.dir\"\n            orientation=\"horizontal\"\n            @update:model-value=\"sort = { name: sort!.name, dir: $event as ViewSort['dir'] }\"\n          >\n            <RadioGroupItem\n              v-for=\"(dir, i) in ['asc', 'desc'] as const\"\n              :key=\"dir\"\n              class=\"flex h-9 items-center justify-center gap-1.5 rounded-md text-13 font-medium outline-hidden transition-colors duration-150 focus-visible:sui-ring-inset\"\n              :class=\"\n                sort!.dir === dir\n                  ? 'bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle'\n                  : 'text-sui-ink-body hover:text-sui-ink'\n              \"\n              :value=\"dir\"\n            >\n              <SortArrow :dir=\"dir\" />\n              {{ words(current.type)[i] }}\n            </RadioGroupItem>\n          </RadioGroupRoot>\n        </FilterFrame>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/Filters/index.d.ts

@@ -4,5 +4,6 @@ export { default as FilterMenu } from './FilterMenu.vue';
 export type { FilterMenuProps } from './FilterMenu.vue';
 export { default as SortMenu } from './SortMenu.vue';
 export type { SortMenuProps } from './SortMenu.vue';
+export type { FilterTriggerProps } from './trigger';
 export { datePresets, describeFilter, filterOperators, sortDirections } from './defaults';
-export type { FilterField, FilterFieldType, FilterOperator, FilterOption, FilterValue, ViewSort } from './types';
+export type { FilterField, FilterFieldType, FilterOperator, FilterOption, FilterSummary, FilterValue, ViewSort } from './types';

package/dist/components/Filters/trigger.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPublicInstance, type Ref } from 'vue';
+/** What a `#trigger` slot's opener spreads with `v-bind="props"`. */
+export interface FilterTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+    'data-state': 'open' | 'closed';
+    onClick: () => void;
+    ref: (node: Element | ComponentPublicInstance | null) => void;
+}
+export declare function useCustomTrigger(open: Ref<boolean>): {
+    props: import("vue").ComputedRef<FilterTriggerProps>;
+    toggle: () => boolean;
+    ignoreTrigger: (event: Event) => void;
+    returnFocus: (event: Event) => void;
+    panelKey: string;
+};

package/dist/components/Filters/trigger.js

@@ -0,0 +1,33 @@
+import { computed as e, nextTick as t, ref as n, shallowRef as r, useId as i, watch as a } from "vue";
+//#region src/components/Filters/trigger.ts
+function o(o) {
+	let s = r(null), c = i(), l = n();
+	a(o, async (e) => {
+		await t(), l.value = e ? document.querySelector(`[data-sui-panel="${c}"]`)?.id ?? void 0 : void 0;
+	});
+	let u = (e) => e instanceof Element ? e : e?.$el ?? null, d = () => o.value = !o.value, f = e(() => ({
+		"aria-haspopup": "dialog",
+		"aria-expanded": o.value,
+		"aria-controls": l.value,
+		"data-state": o.value ? "open" : "closed",
+		onClick: d,
+		ref: (e) => s.value = u(e)
+	}));
+	function p(e) {
+		s.value?.contains(e.target) && e.preventDefault();
+	}
+	function m(e) {
+		s.value && (e.preventDefault(), s.value.focus());
+	}
+	return {
+		props: f,
+		toggle: d,
+		ignoreTrigger: p,
+		returnFocus: m,
+		panelKey: c
+	};
+}
+//#endregion
+export { o as useCustomTrigger };
+
+//# sourceMappingURL=trigger.js.map

package/dist/components/Filters/trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":["useCustomTrigger","element","shallowRef","panelKey","useId","panelId","ref","open","nextTick","isOpen","elementOf","node","toggle","props","computed","ignoreTrigger","event","returnFocus"],"sources":["../../../src/components/Filters/trigger.ts"],"sourcesContent":["import { type ComponentPublicInstance, type Ref, computed, nextTick, ref, shallowRef, useId, watch } from 'vue'\n\n/** What a `#trigger` slot's opener spreads with `v-bind=\"props\"`. */\nexport interface FilterTriggerProps {\n  'aria-haspopup': 'dialog'\n  'aria-expanded': boolean\n  'aria-controls': string | undefined\n  'data-state': 'open' | 'closed'\n  onClick: () => void\n  ref: (node: Element | ComponentPublicInstance | null) => void\n}\n\n// An opener drawn by the app sits outside Reka's PopoverTrigger, so the panel needs telling that clicks on it aren't\n// outside clicks, and where focus goes back to when it closes.\nexport function useCustomTrigger(open: Ref<boolean>) {\n  const element = shallowRef<HTMLElement | null>(null)\n  // Reka names the panel itself; the opener reads that id once the panel is open.\n  const panelKey = useId()\n  const panelId = ref<string>()\n  watch(open, async (isOpen) => {\n    await nextTick()\n    panelId.value = isOpen ? (document.querySelector(`[data-sui-panel=\"${panelKey}\"]`)?.id ?? undefined) : undefined\n  })\n  const elementOf = (node: Element | ComponentPublicInstance | null) =>\n    node instanceof Element ? (node as HTMLElement) : ((node?.$el as HTMLElement | undefined) ?? null)\n  const toggle = () => (open.value = !open.value)\n\n  const props = computed<FilterTriggerProps>(() => ({\n    'aria-haspopup': 'dialog',\n    'aria-expanded': open.value,\n    'aria-controls': panelId.value,\n    'data-state': open.value ? 'open' : 'closed',\n    onClick: toggle,\n    ref: (node) => (element.value = elementOf(node))\n  }))\n\n  function ignoreTrigger(event: Event) {\n    if (element.value?.contains(event.target as Node)) event.preventDefault()\n  }\n\n  function returnFocus(event: Event) {\n    if (!element.value) return\n    event.preventDefault()\n    element.value.focus()\n  }\n\n  return { props, toggle, ignoreTrigger, returnFocus, panelKey }\n}\n"],"mappings":";;AAcA,SAAgBA,EAAiB,GAAoB;CACnD,IAAMC,IAAUC,EAA+B,IAAI,GAE7CC,IAAWC,EAAM,GACjBC,IAAUC,EAAY;CAC5B,EAAMC,GAAM,OAAO,MAAW;EAE5B,AADA,MAAMC,EAAS,GACf,EAAQ,QAAQC,IAAU,SAAS,cAAc,oBAAoBN,EAAS,GAAG,CAAC,EAAE,MAAM,KAAA,IAAa,KAAA;CACzG,CAAC;CACD,IAAMO,KAAa,MACjBC,aAAgB,UAAWA,IAAyBA,GAAM,OAAmC,MACzFC,UAAgB,EAAK,QAAQ,CAACL,EAAK,OAEnCM,IAAQC,SAAoC;EAChD,iBAAiB;EACjB,iBAAiBP,EAAK;EACtB,iBAAiBF,EAAQ;EACzB,cAAcE,EAAK,QAAQ,SAAS;EACpC,SAASK;EACT,MAAM,MAAU,EAAQ,QAAQF,EAAUC,CAAI;CAChD,EAAE;CAEF,SAASI,EAAc,GAAc;EACnC,AAAId,EAAQ,OAAO,SAASe,EAAM,MAAc,KAAGA,EAAM,eAAe;CAC1E;CAEA,SAASC,EAAY,GAAc;EACjC,AAAKhB,EAAQ,UACbe,EAAM,eAAe,GACrBf,EAAQ,MAAM,MAAM;CACtB;CAEA,OAAO;EAAE;EAAO;EAAQ;EAAe;EAAa;CAAS;AAC/D"}

package/dist/components/Filters/types.d.ts

@@ -5,6 +5,14 @@ export interface FilterField {
     type: FilterFieldType;
     /** A heading the picker lists the field under, e.g. "Activity". */
     group?: string;
+    /** The direction SortMenu starts this field in; ascending by default. Newest first suits most dates. */
+    sortDir?: 'asc' | 'desc';
+}
+/** How a filter chip reads: the field, the operator and the value, each optional. */
+export interface FilterSummary {
+    field?: string;
+    op?: string;
+    value?: string;
 }
 export interface FilterOperator {
     value: string;