@scalar/components 0.31.1 → 0.32.1

package/dist/components/ScalarCard/ScalarCardHeader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"names":[],"mappings":"AA8DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAsEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAQzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarCardHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"names":[],"mappings":"AA+DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAqEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAQzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCard/ScalarCardHeader.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-1 truncate\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCardHeader.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardHeader.vue.script.js

@@ -16,10 +16,10 @@ var ScalarCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const id = useId();
 		useCardHeading(id);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-header leading-[22px] font-medium py-[6.75px] px-3 shrink-0"))), {
+			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0"))), {
 				default: withCtx(() => [createElementVNode("div", {
 					id: unref(id),
-					class: "scalar-card-header-title min-w-0 flex-1 truncate"
+					class: "scalar-card-header-title min-w-0 flex-auto"
 				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)]),
 				_: 3
 			}, 16);

package/dist/components/ScalarCard/ScalarCardHeader.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-1 truncate\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAyBA,MAAM,EAAE,OAAO,UAAU;EAGzB,MAAM,KAAK,MAAM;EAGjB,eAAe,EAAE;;uBAGf,YAgBoB,2BAAA,eAAA,mBAfH,MAAA,EAAA,CAAE,CAAA,yEAAA,CAAA,CAAA,GAAA;2BASX,CAJN,mBAIM,OAAA;KAHH,IAAI,MAAA,EAAA;KACL,OAAM;QACN,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAGFA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarCardHeader.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAyBA,MAAM,EAAE,OAAO,UAAU;EAGzB,MAAM,KAAK,MAAM;EAGjB,eAAe,EAAE;;uBAGf,YAiBoB,2BAAA,eAAA,mBAhBH,MAAA,EAAA,CAAE,CAAA,2FAAA,CAAA,CAAA,GAAA;2BAUX,CAJN,mBAIM,OAAA;KAHH,IAAI,MAAA,EAAA;KACL,OAAM;QACN,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAGFA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/ScalarCombobox/ScalarCombobox.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ScalarFloatingOptions } from '../ScalarFloating/index.js';
+import type { LoadingState } from '../ScalarLoading/index.js';
 import type { ComboboxSlots, FilterFunction, Option, OptionGroup, OptionsOrGroups } from './types.js';
 /**
  * Scalar Combobox component
@@ -26,21 +27,34 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
         /** A function to filter the options based on a query,
          * if not provided, the options will be filtered by option label
          *
+         * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a
+         * server) using the `query` model, so results the server already matched are shown as given.
+         *
          * @see {@link FilterFunction} for more information
          */
         filterFn?: FilterFunction<O, G>;
+        /**
+         * The loading state of the options, see `useLoadingState`
+         *
+         * Shows a spinner at the end of the search input while active, or an X when the state is
+         * invalidated (e.g. a failed request).
+         */
+        loader?: LoadingState;
     } & ScalarFloatingOptions & {
         modelValue?: O;
+        /** The search query, bind it to search the options yourself */
+        query?: string;
     }) & {
         onAdd?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: O | undefined) => any) | undefined;
+        "onUpdate:query"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ComboboxSlots<O, G>;
-    emit: ((evt: "add") => void) & ((event: "update:modelValue", value: O | undefined) => void);
+    emit: ((evt: "add") => void) & (((event: "update:modelValue", value: O | undefined) => void) & ((event: "update:query", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/ScalarCombobox/ScalarCombobox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCombobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA4KO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA1KpD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB,+CAA+C;qBAClC,MAAM;QACnB,+DAA+D;oBACnD,MAAM;QAClB;;;;WAIG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;qBAgBtB,CAAC;;;;KA6I6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;UAEJ,qFAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"ScalarCombobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"names":[],"mappings":"AAoIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGpD,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA+MO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA7MpD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB,+CAA+C;qBAClC,MAAM;QACnB,+DAA+D;oBACnD,MAAM;QAClB;;;;;;;WAOG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B;;;;;WAKG;iBACM,YAAY;;qBAsBZ,CAAC;QACd,+DAA+D;gBACrD,MAAM;;;;;KA8J2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;UAEJ,0IAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/ScalarCombobox/ScalarCombobox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCombobox.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox component\n *\n * A searchable select input with support for filtering, option groups,\n * and custom option rendering.\n *\n * @example\n * <ScalarCombobox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarCombobox>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** An accessible label for the search input */\n    inputLabel?: string\n    /** The message to display when filtering returns no options */\n    noResults?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O>()\n\ndefineSlots<ComboboxSlots<O, G>>()\n</script>\n<template>\n  <ComboboxPopover\n    :middleware\n    :offset\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize\n    :target\n    :teleport>\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open, close }\">\n      <ComboboxOptions\n        :close\n        :filterFn\n        :inputLabel\n        :modelValue=\"model ? [model] : []\"\n        :noResults\n        :open\n        :options\n        :placeholder\n        @add=\"() => (close(), emit('add'))\"\n        @update:modelValue=\"(v) => (close(), (model = v[0]))\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCombobox.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox component\n *\n * A searchable select input with support for filtering, option groups,\n * and custom option rendering.\n *\n * @example\n * <ScalarCombobox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarCombobox>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport type { LoadingState } from '../ScalarLoading'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** An accessible label for the search input */\n    inputLabel?: string\n    /** The message to display when filtering returns no options */\n    noResults?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n     * server) using the `query` model, so results the server already matched are shown as given.\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n    /**\n     * The loading state of the options, see `useLoadingState`\n     *\n     * Shows a spinner at the end of the search input while active, or an X when the state is\n     * invalidated (e.g. a failed request).\n     */\n    loader?: LoadingState\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O>()\n\n/** The search query, bind it to search the options yourself */\nconst query = defineModel<string>('query', { default: '' })\n\ndefineSlots<ComboboxSlots<O, G>>()\n</script>\n<template>\n  <ComboboxPopover\n    :middleware\n    :offset\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize\n    :target\n    :teleport>\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open, close }\">\n      <ComboboxOptions\n        v-model:query=\"query\"\n        :close\n        :filterFn\n        :inputLabel\n        :loader\n        :modelValue=\"model ? [model] : []\"\n        :noResults\n        :open\n        :options\n        :placeholder\n        @add=\"() => (close(), emit('add'))\"\n        @update:modelValue=\"(v) => (close(), (model = v[0]))\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots['search-end']\"\n          #search-end=\"props\">\n          <slot\n            name=\"search-end\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCombobox/ScalarCombobox.vue.script.js

@@ -9,6 +9,7 @@ var ScalarCombobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		inputLabel: {},
 		noResults: {},
 		filterFn: { type: Function },
+		loader: {},
 		placement: {},
 		offset: { type: [
 			Number,
@@ -21,12 +22,16 @@ var ScalarCombobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		teleport: { type: [Boolean, String] }
 	}, {
 		"modelValue": {},
-		"modelModifiers": {}
+		"modelModifiers": {},
+		"query": { default: "" },
+		"queryModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue", "update:query"]),
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
+		/** The search query, bind it to search the options yourself */
+		const query = useModel(__props, "query");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ScalarComboboxPopover_default, {
 				middleware: __props.middleware,
@@ -38,9 +43,12 @@ var ScalarCombobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			}, {
 				default: withCtx(({ open }) => [renderSlot(_ctx.$slots, "default", { open })]),
 				popover: withCtx(({ open, close }) => [createVNode(ScalarComboboxOptions_default, {
+					query: query.value,
+					"onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event),
 					close,
 					filterFn: __props.filterFn,
 					inputLabel: __props.inputLabel,
+					loader: __props.loader,
 					modelValue: model.value ? [model.value] : [],
 					noResults: __props.noResults,
 					open,
@@ -49,25 +57,32 @@ var ScalarCombobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					onAdd: () => (close(), emit("add")),
 					"onUpdate:modelValue": (v) => (close(), model.value = v[0])
 				}, createSlots({ _: 2 }, [
+					_ctx.$slots["search-end"] ? {
+						name: "search-end",
+						fn: withCtx((props) => [renderSlot(_ctx.$slots, "search-end", normalizeProps(guardReactiveProps(props)))]),
+						key: "0"
+					} : void 0,
 					_ctx.$slots.option ? {
 						name: "option",
 						fn: withCtx((props) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(props)))]),
-						key: "0"
+						key: "1"
 					} : void 0,
 					_ctx.$slots.group ? {
 						name: "group",
 						fn: withCtx((props) => [renderSlot(_ctx.$slots, "group", normalizeProps(guardReactiveProps(props)))]),
-						key: "1"
+						key: "2"
 					} : void 0,
 					_ctx.$slots.add ? {
 						name: "add",
 						fn: withCtx((props) => [renderSlot(_ctx.$slots, "add", normalizeProps(guardReactiveProps(props)))]),
-						key: "2"
+						key: "3"
 					} : void 0
 				]), 1032, [
+					"query",
 					"close",
 					"filterFn",
 					"inputLabel",
+					"loader",
 					"modelValue",
 					"noResults",
 					"open",

package/dist/components/ScalarCombobox/ScalarCombobox.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCombobox.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox component\n *\n * A searchable select input with support for filtering, option groups,\n * and custom option rendering.\n *\n * @example\n * <ScalarCombobox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarCombobox>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** An accessible label for the search input */\n    inputLabel?: string\n    /** The message to display when filtering returns no options */\n    noResults?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O>()\n\ndefineSlots<ComboboxSlots<O, G>>()\n</script>\n<template>\n  <ComboboxPopover\n    :middleware\n    :offset\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize\n    :target\n    :teleport>\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open, close }\">\n      <ComboboxOptions\n        :close\n        :filterFn\n        :inputLabel\n        :modelValue=\"model ? [model] : []\"\n        :noResults\n        :open\n        :options\n        :placeholder\n        @add=\"() => (close(), emit('add'))\"\n        @update:modelValue=\"(v) => (close(), (model = v[0]))\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAc,SAAA,YAAC;;uBAK3B,YA8CkB,+BAAA;IA7Cf,YAAA,QAAA;IACA,QAAA,QAAA;IACA,WAAW,QAAA,aAAS;IACpB,QAAA,QAAA;IACA,QAAA,QAAA;IACA,UAAA,QAAA;;IACU,SAAO,SACF,EADM,WAAI,CACxB,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SAkCE,EAlCE,MAAM,YAAK,CAC/B,YAiCkB,+BAAA;KAhCf;KACA,UAAA,QAAA;KACA,YAAA,QAAA;KACA,YAAY,MAAA,QAAK,CAAI,MAAA,KAAK,IAAA,CAAA;KAC1B,WAAA,QAAA;KACA;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,cAAY,MAAK,GAAI,KAAI,KAAA;KACzB,wBAAoB,OAAO,MAAK,GAAK,MAAA,QAAQ,EAAC;;KAGvCA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarCombobox.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox component\n *\n * A searchable select input with support for filtering, option groups,\n * and custom option rendering.\n *\n * @example\n * <ScalarCombobox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarCombobox>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport type { LoadingState } from '../ScalarLoading'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** An accessible label for the search input */\n    inputLabel?: string\n    /** The message to display when filtering returns no options */\n    noResults?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n     * server) using the `query` model, so results the server already matched are shown as given.\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n    /**\n     * The loading state of the options, see `useLoadingState`\n     *\n     * Shows a spinner at the end of the search input while active, or an X when the state is\n     * invalidated (e.g. a failed request).\n     */\n    loader?: LoadingState\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O>()\n\n/** The search query, bind it to search the options yourself */\nconst query = defineModel<string>('query', { default: '' })\n\ndefineSlots<ComboboxSlots<O, G>>()\n</script>\n<template>\n  <ComboboxPopover\n    :middleware\n    :offset\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize\n    :target\n    :teleport>\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open, close }\">\n      <ComboboxOptions\n        v-model:query=\"query\"\n        :close\n        :filterFn\n        :inputLabel\n        :loader\n        :modelValue=\"model ? [model] : []\"\n        :noResults\n        :open\n        :options\n        :placeholder\n        @add=\"() => (close(), emit('add'))\"\n        @update:modelValue=\"(v) => (close(), (model = v[0]))\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots['search-end']\"\n          #search-end=\"props\">\n          <slot\n            name=\"search-end\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAc,SAAA,YAAC;;EAG7B,MAAM,QAAQ,SAAmB,SAAC,OAAwB;;uBAKxD,YAuDkB,+BAAA;IAtDf,YAAA,QAAA;IACA,QAAA,QAAA;IACA,WAAW,QAAA,aAAS;IACpB,QAAA,QAAA;IACA,QAAA,QAAA;IACA,UAAA,QAAA;;IACU,SAAO,SACF,EADM,WAAI,CACxB,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SA2CE,EA3CE,MAAM,YAAK,CAC/B,YA0CkB,+BAAA;KAzCR,OAAO,MAAA;mEAAK,QAAA;KACnB;KACA,UAAA,QAAA;KACA,YAAA,QAAA;KACA,QAAA,QAAA;KACA,YAAY,MAAA,QAAK,CAAI,MAAA,KAAK,IAAA,CAAA;KAC1B,WAAA,QAAA;KACA;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,cAAY,MAAK,GAAI,KAAI,KAAA;KACzB,wBAAoB,OAAO,MAAK,GAAK,MAAA,QAAQ,EAAC;;KAGvCA,KAAAA,OAAM,gBAAA;YACX;mBAAY,UAAK,CAClB,WAEmB,KAAA,QAAA,cAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ScalarFloatingOptions } from '../ScalarFloating/index.js';
+import type { LoadingState } from '../ScalarLoading/index.js';
 import type { ComboboxSlots, FilterFunction, Option, OptionGroup, OptionsOrGroups } from './types.js';
 /**
  * Scalar Combobox Multiselect component
@@ -21,14 +22,27 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
         /** A function to filter the options based on a query,
          * if not provided, the options will be filtered by option label
          *
+         * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a
+         * server) using the `query` model, so results the server already matched are shown as given.
+         *
          * @see {@link FilterFunction} for more information
          */
         filterFn?: FilterFunction<O, G>;
+        /**
+         * The loading state of the options, see `useLoadingState`
+         *
+         * Shows a spinner at the end of the search input while active, or an X when the state is
+         * invalidated (e.g. a failed request).
+         */
+        loader?: LoadingState;
     } & ScalarFloatingOptions & {
         modelValue?: O[];
+        /** The search query, bind it to search the options yourself */
+        query?: string;
     }) & {
         onAdd?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: O[]) => any) | undefined;
+        "onUpdate:query"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -461,7 +475,7 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
     }>) => void;
     attrs: any;
     slots: ComboboxSlots<O, G>;
-    emit: ((evt: "add") => void) & ((event: "update:modelValue", value: O[]) => void);
+    emit: ((evt: "add") => void) & (((event: "update:modelValue", value: O[]) => void) & ((event: "update:query", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAM,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC3F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAoLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAlLpD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;WAIG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;qBAyBtB,CAAC,EAAE;;;;KAgJ2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;UAEJ,2EAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAuIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGpD,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAM,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC3F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAqNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAnNpD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;;;;WAOG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B;;;;;WAKG;iBACM,YAAY;;qBA6BZ,CAAC,EAAE;QAChB,+DAA+D;gBACrD,MAAM;;;;;KAiK2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;UAEJ,gIAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Multiselect component\n *\n * A searchable select input that supports selecting multiple options.\n *\n * @example\n * <ScalarComboboxMultiselect v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>Select items</ScalarButton>\n * </ScalarComboboxMultiselect>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\" O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O> \">\nimport { ref } from 'vue'\n\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\ndefineSlots<ComboboxSlots<O, G>>()\n\n/** Propagate up the popover ref */\nconst comboboxPopoverRef = ref<typeof ComboboxPopover | null>(null)\n\ndefineExpose({ comboboxPopoverRef })\n</script>\n<template>\n  <ComboboxPopover\n    ref=\"comboboxPopoverRef\"\n    :middleware=\"middleware\"\n    :offset=\"offset\"\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize=\"resize\"\n    :target=\"target\"\n    :teleport=\"teleport\">\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open }\">\n      <ComboboxOptions\n        v-if=\"options?.length\"\n        v-model=\"model\"\n        :filterFn\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarComboboxMultiselect.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Multiselect component\n *\n * A searchable select input that supports selecting multiple options.\n *\n * @example\n * <ScalarComboboxMultiselect v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>Select items</ScalarButton>\n * </ScalarComboboxMultiselect>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\" O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O> \">\nimport { ref } from 'vue'\n\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport type { LoadingState } from '../ScalarLoading'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n     * server) using the `query` model, so results the server already matched are shown as given.\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n    /**\n     * The loading state of the options, see `useLoadingState`\n     *\n     * Shows a spinner at the end of the search input while active, or an X when the state is\n     * invalidated (e.g. a failed request).\n     */\n    loader?: LoadingState\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\n/** The search query, bind it to search the options yourself */\nconst query = defineModel<string>('query', { default: '' })\n\ndefineSlots<ComboboxSlots<O, G>>()\n\n/** Propagate up the popover ref */\nconst comboboxPopoverRef = ref<typeof ComboboxPopover | null>(null)\n\ndefineExpose({ comboboxPopoverRef })\n</script>\n<template>\n  <ComboboxPopover\n    ref=\"comboboxPopoverRef\"\n    :middleware=\"middleware\"\n    :offset=\"offset\"\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize=\"resize\"\n    :target=\"target\"\n    :teleport=\"teleport\">\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open }\">\n      <ComboboxOptions\n        v-if=\"options?.length || loader\"\n        v-model=\"model\"\n        v-model:query=\"query\"\n        :filterFn\n        :loader\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots['search-end']\"\n          #search-end=\"props\">\n          <slot\n            name=\"search-end\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.script.js

@@ -7,6 +7,7 @@ var ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default = /*@_
 		options: {},
 		placeholder: {},
 		filterFn: { type: Function },
+		loader: {},
 		placement: {},
 		offset: { type: [
 			Number,
@@ -19,12 +20,16 @@ var ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default = /*@_
 		teleport: { type: [Boolean, String] }
 	}, {
 		"modelValue": { default: () => [] },
-		"modelModifiers": {}
+		"modelModifiers": {},
+		"query": { default: "" },
+		"queryModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue", "update:query"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
+		/** The search query, bind it to search the options yourself */
+		const query = useModel(__props, "query");
 		/** Propagate up the popover ref */
 		const comboboxPopoverRef = ref(null);
 		__expose({ comboboxPopoverRef });
@@ -40,35 +45,45 @@ var ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default = /*@_
 				teleport: __props.teleport
 			}, {
 				default: withCtx(({ open }) => [renderSlot(_ctx.$slots, "default", { open })]),
-				popover: withCtx(({ open }) => [__props.options?.length ? (openBlock(), createBlock(ScalarComboboxOptions_default, {
+				popover: withCtx(({ open }) => [__props.options?.length || __props.loader ? (openBlock(), createBlock(ScalarComboboxOptions_default, {
 					key: 0,
 					modelValue: model.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					query: query.value,
+					"onUpdate:query": _cache[1] || (_cache[1] = ($event) => query.value = $event),
 					filterFn: __props.filterFn,
+					loader: __props.loader,
 					multiselect: "",
 					open,
 					options: __props.options,
 					placeholder: __props.placeholder,
-					onAdd: _cache[1] || (_cache[1] = ($event) => emit("add"))
+					onAdd: _cache[2] || (_cache[2] = ($event) => emit("add"))
 				}, createSlots({ _: 2 }, [
+					_ctx.$slots["search-end"] ? {
+						name: "search-end",
+						fn: withCtx((props) => [renderSlot(_ctx.$slots, "search-end", normalizeProps(guardReactiveProps(props)))]),
+						key: "0"
+					} : void 0,
 					_ctx.$slots.option ? {
 						name: "option",
 						fn: withCtx((props) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(props)))]),
-						key: "0"
+						key: "1"
 					} : void 0,
 					_ctx.$slots.group ? {
 						name: "group",
 						fn: withCtx((props) => [renderSlot(_ctx.$slots, "group", normalizeProps(guardReactiveProps(props)))]),
-						key: "1"
+						key: "2"
 					} : void 0,
 					_ctx.$slots.add ? {
 						name: "add",
 						fn: withCtx((props) => [renderSlot(_ctx.$slots, "add", normalizeProps(guardReactiveProps(props)))]),
-						key: "2"
+						key: "3"
 					} : void 0
 				]), 1032, [
 					"modelValue",
+					"query",
 					"filterFn",
+					"loader",
 					"open",
 					"options",
 					"placeholder"

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Multiselect component\n *\n * A searchable select input that supports selecting multiple options.\n *\n * @example\n * <ScalarComboboxMultiselect v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>Select items</ScalarButton>\n * </ScalarComboboxMultiselect>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\" O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O> \">\nimport { ref } from 'vue'\n\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\ndefineSlots<ComboboxSlots<O, G>>()\n\n/** Propagate up the popover ref */\nconst comboboxPopoverRef = ref<typeof ComboboxPopover | null>(null)\n\ndefineExpose({ comboboxPopoverRef })\n</script>\n<template>\n  <ComboboxPopover\n    ref=\"comboboxPopoverRef\"\n    :middleware=\"middleware\"\n    :offset=\"offset\"\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize=\"resize\"\n    :target=\"target\"\n    :teleport=\"teleport\">\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open }\">\n      <ComboboxOptions\n        v-if=\"options?.length\"\n        v-model=\"model\"\n        :filterFn\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAgB,SAAA,YAAsB;;EAKpD,MAAM,qBAAqB,IAAmC,IAAI;EAElE,SAAa,EAAE,mBAAmB,CAAC;;uBAGjC,YA6CkB,+BAAA;aA5CZ;IAAJ,KAAI;IACH,YAAY,QAAA;IACZ,QAAQ,QAAA;IACR,WAAW,QAAA,aAAS;IACpB,QAAQ,QAAA;IACR,QAAQ,QAAA;IACR,UAAU,QAAA;;IACA,SAAO,SACF,EADM,WAAI,CACxB,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SAgCE,EAhCE,WAAI,CAEhB,QAAA,SAAS,UAAA,UAAA,GADjB,YA+BkB,+BAAA;;iBA7BP,MAAA;wEAAK,QAAA;KACb,UAAA,QAAA;KACD,aAAA;KACC;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,OAAG,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,KAAA;;KAGFA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarComboboxMultiselect.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Multiselect component\n *\n * A searchable select input that supports selecting multiple options.\n *\n * @example\n * <ScalarComboboxMultiselect v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>Select items</ScalarButton>\n * </ScalarComboboxMultiselect>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\" O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O> \">\nimport { ref } from 'vue'\n\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport type { LoadingState } from '../ScalarLoading'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n     * server) using the `query` model, so results the server already matched are shown as given.\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n    /**\n     * The loading state of the options, see `useLoadingState`\n     *\n     * Shows a spinner at the end of the search input while active, or an X when the state is\n     * invalidated (e.g. a failed request).\n     */\n    loader?: LoadingState\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\n/** The search query, bind it to search the options yourself */\nconst query = defineModel<string>('query', { default: '' })\n\ndefineSlots<ComboboxSlots<O, G>>()\n\n/** Propagate up the popover ref */\nconst comboboxPopoverRef = ref<typeof ComboboxPopover | null>(null)\n\ndefineExpose({ comboboxPopoverRef })\n</script>\n<template>\n  <ComboboxPopover\n    ref=\"comboboxPopoverRef\"\n    :middleware=\"middleware\"\n    :offset=\"offset\"\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize=\"resize\"\n    :target=\"target\"\n    :teleport=\"teleport\">\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open }\">\n      <ComboboxOptions\n        v-if=\"options?.length || loader\"\n        v-model=\"model\"\n        v-model:query=\"query\"\n        :filterFn\n        :loader\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots['search-end']\"\n          #search-end=\"props\">\n          <slot\n            name=\"search-end\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAgB,SAAA,YAAsB;;EAGpD,MAAM,QAAQ,SAAmB,SAAC,OAAwB;;EAK1D,MAAM,qBAAqB,IAAmC,IAAI;EAElE,SAAa,EAAE,mBAAmB,CAAC;;uBAGjC,YAsDkB,+BAAA;aArDZ;IAAJ,KAAI;IACH,YAAY,QAAA;IACZ,QAAQ,QAAA;IACR,WAAW,QAAA,aAAS;IACpB,QAAQ,QAAA;IACR,QAAQ,QAAA;IACR,UAAU,QAAA;;IACA,SAAO,SACF,EADM,WAAI,CACxB,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SAyCE,EAzCE,WAAI,CAEhB,QAAA,SAAS,UAAU,QAAA,UAAA,UAAA,GAD3B,YAwCkB,+BAAA;;iBAtCP,MAAA;wEAAK,QAAA;KACN,OAAO,MAAA;mEAAK,QAAA;KACnB,UAAA,QAAA;KACA,QAAA,QAAA;KACD,aAAA;KACC;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,OAAG,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,KAAA;;KAGFA,KAAAA,OAAM,gBAAA;YACX;mBAAY,UAAK,CAClB,WAEmB,KAAA,QAAA,cAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts

@@ -1,3 +1,4 @@
+import { type LoadingState } from '../ScalarLoading/index.js';
 import { type ComboboxSlots, type FilterFunction, type Option, type OptionGroup, type OptionsOrGroups } from './types.js';
 /**
  * Scalar Combobox Options component
@@ -26,23 +27,37 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
          * A function to filter the options based on a query,
          * if not provided, the options will be filtered by option label
          *
+         * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a
+         * server) using the `query` model, so results the server already matched are shown as given.
+         *
          * @see {@link FilterFunction} for more information
          */
         filterFn?: FilterFunction<O, G>;
+        /**
+         * The loading state of the options, see `useLoadingState`
+         *
+         * Shows a spinner at the end of the search input while active, or an X when the state is
+         * invalidated (e.g. a failed request). While loading with no options yet, the list shows
+         * placeholder rows instead of the "no results" message and the spinner.
+         */
+        loader?: LoadingState;
         /** Whether the combobox is in multiselect mode, defaults to false */
         multiselect?: boolean;
     } & {
         modelValue?: O[];
+        /** The search query, exposed so callers can search the options themselves */
+        query?: string;
     }) & {
         onAdd?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: O[]) => any) | undefined;
+        "onUpdate:query"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: Omit<ComboboxSlots<O, G>, "default">;
-    emit: ((evt: "add") => void) & ((event: "update:modelValue", value: O[]) => void);
+    emit: ((evt: "add") => void) & (((event: "update:modelValue", value: O[]) => void) & ((event: "update:query", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAyVA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EAErB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAyhBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAvhBtD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB,+CAA+C;qBAClC,MAAM;QACnB,+DAA+D;oBACnD,MAAM;QAClB,+DAA+D;gBACvD,MAAM,IAAI;QAClB;;;;;WAKG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,qEAAqE;sBACvD,OAAO;;qBA6LV,CAAC,EAAE;;;;KAwU2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;UAEJ,2EAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AA8bA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EAErB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAoqBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAlqBtD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB,+CAA+C;qBAClC,MAAM;QACnB,+DAA+D;oBACnD,MAAM;QAClB,+DAA+D;gBACvD,MAAM,IAAI;QAClB;;;;;;;;WAQG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B;;;;;;WAMG;iBACM,YAAY;QACrB,qEAAqE;sBACvD,OAAO;;qBA+PV,CAAC,EAAE;QAChB,6EAA6E;gBACnE,MAAM;;;;;KAoY2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;UAEJ,gIAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Options component\n *\n * Renders the searchable option list for a combobox, including\n * filtering, keyboard navigation, and an optional \"add new\" action.\n *\n * @example\n * <ScalarComboboxOptions v-model=\"selected\" :options=\"options\" />\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport { filterByOptionLabel } from '@/components/ScalarCombobox/filter-by-option-label'\nimport { ScalarIconMagnifyingGlass, ScalarIconPlus } from '@scalar/icons'\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport { ScalarListboxCheckbox } from '../ScalarListbox'\nimport ComboboxOption from './ScalarComboboxOption.vue'\nimport ComboboxOptionGroup from './ScalarComboboxOptionGroup.vue'\nimport {\n  type ComboboxEmits,\n  type ComboboxSlots,\n  type FilterFunction,\n  type Option,\n  type OptionGroup,\n  type OptionsOrGroups,\n  isGroups,\n} from './types'\n\nconst {\n  options: optionsOrGroups,\n  placeholder,\n  inputLabel,\n  noResults,\n  close,\n  filterFn = filterByOptionLabel,\n  multiselect,\n} = defineProps<{\n  /** The options to display in the combobox */\n  options: OptionsOrGroups<O, G>\n  /** The placeholder text to display in the combobox */\n  placeholder?: string\n  /** An accessible label for the search input */\n  inputLabel?: string\n  /** The message to display when filtering returns no options */\n  noResults?: string\n  /** Close the popover without changing the current selection */\n  close?: () => void\n  /**\n   * A function to filter the options based on a query,\n   * if not provided, the options will be filtered by option label\n   *\n   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\n  /** Whether the combobox is in multiselect mode, defaults to false */\n  multiselect?: boolean\n}>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\nconst slots = defineSlots<Omit<ComboboxSlots<O, G>, 'default'>>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** A unique ID for the combobox */\nconst id = `scalar-combobox-items-${useId()}`\n\n/** A static option entry for the \"Add a new option\" option */\nconst addOption: Option = { id: `${useId()}-add`, label: 'Add a new option' }\n\n/** Generate a unique ID for an option */\nfunction getOptionId(option: Option) {\n  return `${id}-${option.id}`\n}\n\n/** A flat list of all options */\nconst options = computed<O[]>(() =>\n  isGroups(optionsOrGroups)\n    ? optionsOrGroups.flatMap((group) => group.options)\n    : optionsOrGroups,\n)\n\n/** An list of all groups */\nconst groups = computed<G[]>(\n  () =>\n    isGroups(optionsOrGroups)\n      ? optionsOrGroups // G extends OptionGroup<O>\n      : /*\n          We know G is an unextended OptionGroup<O> here because of the\n          structure of the component props so we can cast it to G\n        */\n        [{ label: '', options: optionsOrGroups } as G], // G is OptionGroup<O>\n)\n\nconst query = ref<string>('')\nconst activeRef = ref<Option | undefined>(model.value?.[0] ?? options.value[0])\n\n// Clear the query on open and close\nonMounted(() => {\n  // Clear the query\n  query.value = ''\n\n  // Set the active option to the selected option or the first option\n  activeRef.value = model.value?.[0] ?? options.value[0]\n\n  // Scroll to the selected option\n  const selected = model.value[0]\n  if (selected) {\n    setTimeout(() => {\n      const value = model.value[0]\n      if (!value) {\n        return\n      }\n\n      document\n        ?.getElementById(getOptionId(value))\n        ?.scrollIntoView({ block: 'nearest' })\n    }, 10)\n  }\n})\n\n// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => (activeRef.value = withAdd.value[0]),\n)\n\n/** The filtered list of options */\nconst filtered = computed<O[]>(() =>\n  filterFn(query.value, options.value, groups.value),\n)\n\n/** The list of filtered options with the \"Add a new option\" option */\nconst withAdd = computed<Option[]>(() =>\n  slots.add ? [...filtered.value, addOption] : filtered.value,\n)\n\nfunction toggleSelected(option: Option | undefined) {\n  if (!option) {\n    return\n  }\n\n  if (option.id === addOption.id) {\n    addNew()\n    return\n  }\n\n  if (multiselect) {\n    // Remove from selection list\n    if (model.value.some((o) => o.id === option.id)) {\n      model.value = model.value.filter((o) => o.id !== option.id)\n    }\n    // Add to selection list\n    else {\n      model.value = [\n        ...model.value,\n        options.value.find((o) => o.id === option.id)!,\n      ]\n    }\n  } else {\n    // Set selection for single select mode\n    model.value = [options.value.find((o) => o.id === option.id)!]\n  }\n}\n\nfunction moveActive(dir: 1 | -1) {\n  const list = withAdd.value\n\n  // Find active index\n  const activeIdx = list.findIndex(\n    (option) => option.id === activeRef.value?.id,\n  )\n\n  // Calculate next index and exit if it's out of bounds\n  const nextIdx = activeIdx + dir\n\n  if (nextIdx < 0 || nextIdx > list.length - 1) {\n    return\n  }\n\n  activeRef.value = list[nextIdx]! // We know it's in bounds from the check above\n\n  if (!activeRef.value) {\n    return\n  }\n\n  // Scroll to the active option\n  document?.getElementById(getOptionId(activeRef.value))?.scrollIntoView({\n    behavior: 'smooth',\n    block: 'nearest',\n  })\n}\n\nfunction addNew() {\n  emit('add')\n  query.value = ''\n}\n\n/**\n * Space toggles the active option in multiselect mode while the search box is empty.\n *\n * The options look like checkboxes, so keyboard users press Space to toggle them. Without this\n * handler Space types a leading space into the query, which filters out every option whose label\n * has no space and hides the whole list without any feedback (found by an accessibility audit).\n * Once a query has been typed, Space keeps inserting a character so multi-word labels stay\n * searchable. Key auto-repeat is ignored so holding Space after opening the popover with it does\n * not toggle the option repeatedly, and IME composition is left alone.\n */\nconst handleSpace = (event: KeyboardEvent): void => {\n  if (!multiselect || query.value !== '' || event.isComposing) {\n    return\n  }\n  // Suppress repeated spaces too, so holding the key does not start filtering.\n  event.preventDefault()\n  if (!event.repeat) {\n    toggleSelected(activeRef.value)\n  }\n}\n\n// Manual autofocus for the input\nconst input = ref<HTMLInputElement | null>(null)\n\n// This must be a setTimeout to ensure there is no scroll jump. nextTick does not work here.\nonMounted(() => setTimeout(() => input.value?.focus(), 0))\n</script>\n<template>\n  <!-- Inset to line up with the options below -->\n  <div class=\"relative flex m-1 mb-0.75\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-1.75 top-1/2 -translate-y-1/2 text-c-3 size-4\" />\n    <input\n      ref=\"input\"\n      v-model=\"query\"\n      :aria-activedescendant=\"activeRef ? getOptionId(activeRef) : undefined\"\n      aria-autocomplete=\"list\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"Boolean(filtered.length || slots.add || noResults)\"\n      :aria-label=\"inputLabel\"\n      class=\"min-w-0 flex-1 rounded-md border-0 py-1.5 pl-7.25 pr-1.75 leading-none text-c-1\"\n      data-1p-ignore\n      :placeholder\n      role=\"combobox\"\n      tabindex=\"0\"\n      type=\"text\"\n      @keydown.down.prevent=\"moveActive(1)\"\n      @keydown.enter.prevent=\"activeRef && toggleSelected(activeRef)\"\n      @keydown.esc.prevent=\"close?.()\"\n      @keydown.space=\"handleSpace\"\n      @keydown.up.prevent=\"moveActive(-1)\" />\n  </div>\n  <ul\n    v-show=\"filtered.length || slots.add || noResults\"\n    :id=\"id\"\n    :aria-multiselectable=\"multiselect\"\n    class=\"border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <li\n      v-if=\"!filtered.length && !slots.add && noResults\"\n      class=\"text-c-3 px-2.5 py-2\"\n      role=\"status\">\n      {{ noResults }}\n    </li>\n    <ComboboxOptionGroup\n      v-for=\"(group, i) in groups\"\n      :id=\"`${id}-group-${i}`\"\n      :key=\"i\"\n      :hidden=\"\n        // Only show the group label if there are some results\n        !group.options.some((o) => filtered.some((f) => f.id === o.id)) ||\n        // And it has a label\n        !group.label\n      \">\n      <template #label>\n        <slot\n          v-if=\"$slots.group\"\n          :group\n          name=\"group\" />\n        <template v-else>\n          {{ group.label }}\n        </template>\n      </template>\n      <template\n        v-for=\"option in filtered\"\n        :key=\"option.id\">\n        <ComboboxOption\n          v-if=\"group.options.some((o) => o.id === option.id)\"\n          :id=\"getOptionId(option)\"\n          v-slot=\"{ active, selected }\"\n          :active=\"activeRef?.id === option.id\"\n          :selected=\"model.some((o) => o.id === option.id)\"\n          @click=\"toggleSelected(option)\"\n          @mousedown.prevent\n          @mouseenter=\"activeRef = option\">\n          <slot\n            v-if=\"$slots.option\"\n            :active\n            name=\"option\"\n            :option\n            :selected />\n          <template v-else>\n            <ScalarListboxCheckbox\n              :multiselect\n              :selected=\"model.some((o) => o.id === option.id)\" />\n            <span class=\"inline-block min-w-0 flex-1 truncate text-c-1\">\n              {{ option.label }}\n            </span>\n          </template>\n        </ComboboxOption>\n      </template>\n    </ComboboxOptionGroup>\n    <ComboboxOption\n      v-if=\"slots.add\"\n      :id=\"getOptionId(addOption)\"\n      v-slot=\"{ active }\"\n      :active=\"activeRef?.id === addOption.id\"\n      @click=\"addNew\"\n      @mousedown.prevent\n      @mouseenter=\"activeRef = addOption\">\n      <ScalarIconPlus class=\"size-4 p-px\" />\n      <slot\n        :active\n        name=\"add\" />\n    </ComboboxOption>\n  </ul>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarComboboxOptions.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Options component\n *\n * Renders the searchable option list for a combobox, including\n * filtering, keyboard navigation, and an optional \"add new\" action.\n *\n * @example\n * <ScalarComboboxOptions v-model=\"selected\" :options=\"options\" />\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport { filterByOptionLabel } from '@/components/ScalarCombobox/filter-by-option-label'\nimport { ScalarIconMagnifyingGlass, ScalarIconPlus } from '@scalar/icons'\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport { ScalarListboxCheckbox } from '../ScalarListbox'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\nimport ComboboxOption from './ScalarComboboxOption.vue'\nimport ComboboxOptionGroup from './ScalarComboboxOptionGroup.vue'\nimport {\n  type ComboboxEmits,\n  type ComboboxSlots,\n  type FilterFunction,\n  type Option,\n  type OptionGroup,\n  type OptionsOrGroups,\n  isGroups,\n} from './types'\n\nconst {\n  options: optionsOrGroups,\n  placeholder,\n  inputLabel,\n  noResults,\n  close,\n  filterFn = filterByOptionLabel,\n  loader,\n  multiselect,\n} = defineProps<{\n  /** The options to display in the combobox */\n  options: OptionsOrGroups<O, G>\n  /** The placeholder text to display in the combobox */\n  placeholder?: string\n  /** An accessible label for the search input */\n  inputLabel?: string\n  /** The message to display when filtering returns no options */\n  noResults?: string\n  /** Close the popover without changing the current selection */\n  close?: () => void\n  /**\n   * A function to filter the options based on a query,\n   * if not provided, the options will be filtered by option label\n   *\n   * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n   * server) using the `query` model, so results the server already matched are shown as given.\n   *\n   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\n  /**\n   * The loading state of the options, see `useLoadingState`\n   *\n   * Shows a spinner at the end of the search input while active, or an X when the state is\n   * invalidated (e.g. a failed request). While loading with no options yet, the list shows\n   * placeholder rows instead of the \"no results\" message and the spinner.\n   */\n  loader?: LoadingState\n  /** Whether the combobox is in multiselect mode, defaults to false */\n  multiselect?: boolean\n}>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\nconst slots = defineSlots<Omit<ComboboxSlots<O, G>, 'default'>>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** A unique ID for the combobox */\nconst id = `scalar-combobox-items-${useId()}`\n\n/** A static option entry for the \"Add a new option\" option */\nconst addOption: Option = { id: `${useId()}-add`, label: 'Add a new option' }\n\n/** Generate a unique ID for an option */\nfunction getOptionId(option: Option) {\n  return `${id}-${option.id}`\n}\n\n/** A flat list of all options */\nconst options = computed<O[]>(() =>\n  isGroups(optionsOrGroups)\n    ? optionsOrGroups.flatMap((group) => group.options)\n    : optionsOrGroups,\n)\n\n/** An list of all groups */\nconst groups = computed<G[]>(\n  () =>\n    isGroups(optionsOrGroups)\n      ? optionsOrGroups // G extends OptionGroup<O>\n      : /*\n          We know G is an unextended OptionGroup<O> here because of the\n          structure of the component props so we can cast it to G\n        */\n        [{ label: '', options: optionsOrGroups } as G], // G is OptionGroup<O>\n)\n\n/** The search query, exposed so callers can search the options themselves */\nconst query = defineModel<string>('query', { default: '' })\n/** The filtered list of options */\nconst filtered = computed<O[]>(() =>\n  filterFn(query.value, options.value, groups.value),\n)\n\n/** The list of filtered options with the \"Add a new option\" option */\nconst withAdd = computed<Option[]>(() =>\n  slots.add ? [...filtered.value, addOption] : filtered.value,\n)\n\n/**\n * The selected option when it is in the list, otherwise the top option.\n *\n * With async search the selected option is often not in the loaded results (e.g. a branch\n * past the first page), and pointing at a row that does not exist would let Enter select nothing.\n */\nconst getInitialActive = (): Option | undefined => {\n  const selected = model.value[0]\n  return selected && withAdd.value.some((option) => option.id === selected.id)\n    ? selected\n    : withAdd.value[0]\n}\n\nconst activeRef = ref<Option | undefined>(getInitialActive())\n\n// Clear the query on open and close\nonMounted(() => {\n  // Clear the query\n  query.value = ''\n\n  // Set the active option to the selected option or the first option\n  activeRef.value = getInitialActive()\n\n  // Scroll to the selected option\n  const selected = model.value[0]\n  if (selected) {\n    setTimeout(() => {\n      const value = model.value[0]\n      if (!value) {\n        return\n      }\n\n      document\n        ?.getElementById(getOptionId(value))\n        ?.scrollIntoView({ block: 'nearest' })\n    }, 10)\n  }\n})\n\n/**\n * Whether the query changed since the options last updated. Async results arrive after the\n * query changes, so the top hit of the new results should become active even when the\n * previously active option is still somewhere in the list.\n */\nlet queryChanged = false\n\n// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => {\n    activeRef.value = withAdd.value[0]\n    queryChanged = true\n  },\n)\n\n/**\n * Async options arrive after the query has changed, so the active option can point at a row\n * that no longer exists or is no longer the top hit. Move it back to the top when that happens.\n */\nwatch(withAdd, (list) => {\n  if (\n    queryChanged ||\n    !list.some((option) => option.id === activeRef.value?.id)\n  ) {\n    activeRef.value = list[0]\n  }\n  queryChanged = false\n})\n\n/** Whether the options are still loading */\nconst isLoading = computed<boolean>(() => Boolean(loader?.isLoading))\n\n/** Show placeholder rows while loading with nothing to show yet */\nconst showSkeleton = computed<boolean>(\n  () => isLoading.value && !filtered.value.length,\n)\n\n/** Show the loader in the search input, unless the skeleton already says it is loading */\nconst showLoader = computed<boolean>(\n  () => Boolean(loader?.isActive) && !showSkeleton.value,\n)\n\n/** Whether there is anything to show at the end of the search input */\nconst showSearchEnd = computed<boolean>(() =>\n  Boolean(slots['search-end'] || showLoader.value),\n)\n\n/** Whether the listbox has anything to show */\nconst showList = computed<boolean>(() =>\n  Boolean(\n    filtered.value.length ||\n    slots.add ||\n    showSkeleton.value ||\n    (noResults && !isLoading.value),\n  ),\n)\n\nfunction toggleSelected(option: Option | undefined) {\n  if (!option) {\n    return\n  }\n\n  if (option.id === addOption.id) {\n    addNew()\n    return\n  }\n\n  // Remove from selection list in multiselect mode\n  if (multiselect && model.value.some((o) => o.id === option.id)) {\n    model.value = model.value.filter((o) => o.id !== option.id)\n    return\n  }\n\n  // The active option can be stale while async options load, so never select a missing one\n  const match = options.value.find((o) => o.id === option.id)\n  if (!match) {\n    return\n  }\n\n  // Add to the selection in multiselect mode, replace it in single select mode\n  model.value = multiselect ? [...model.value, match] : [match]\n}\n\nfunction moveActive(dir: 1 | -1) {\n  const list = withAdd.value\n\n  // Find active index\n  const activeIdx = list.findIndex(\n    (option) => option.id === activeRef.value?.id,\n  )\n\n  // Calculate next index and exit if it's out of bounds\n  const nextIdx = activeIdx + dir\n\n  if (nextIdx < 0 || nextIdx > list.length - 1) {\n    return\n  }\n\n  activeRef.value = list[nextIdx]! // We know it's in bounds from the check above\n\n  if (!activeRef.value) {\n    return\n  }\n\n  // Scroll to the active option\n  document?.getElementById(getOptionId(activeRef.value))?.scrollIntoView({\n    behavior: 'smooth',\n    block: 'nearest',\n  })\n}\n\nfunction addNew() {\n  emit('add')\n  query.value = ''\n}\n\n/**\n * Space toggles the active option in multiselect mode while the search box is empty.\n *\n * The options look like checkboxes, so keyboard users press Space to toggle them. Without this\n * handler Space types a leading space into the query, which filters out every option whose label\n * has no space and hides the whole list without any feedback (found by an accessibility audit).\n * Once a query has been typed, Space keeps inserting a character so multi-word labels stay\n * searchable. Key auto-repeat is ignored so holding Space after opening the popover with it does\n * not toggle the option repeatedly, and IME composition is left alone.\n */\nconst handleSpace = (event: KeyboardEvent): void => {\n  if (!multiselect || query.value !== '' || event.isComposing) {\n    return\n  }\n  // Suppress repeated spaces too, so holding the key does not start filtering.\n  event.preventDefault()\n  if (!event.repeat) {\n    toggleSelected(activeRef.value)\n  }\n}\n\n// Manual autofocus for the input\nconst input = ref<HTMLInputElement | null>(null)\n\n// This must be a setTimeout to ensure there is no scroll jump. nextTick does not work here.\nonMounted(() => setTimeout(() => input.value?.focus(), 0))\n</script>\n<template>\n  <!-- Inset to line up with the options below -->\n  <div class=\"relative flex items-center m-1 mb-0.75\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-1.75 top-1/2 -translate-y-1/2 text-c-3 size-4\" />\n    <input\n      ref=\"input\"\n      v-model=\"query\"\n      :aria-activedescendant=\"activeRef ? getOptionId(activeRef) : undefined\"\n      aria-autocomplete=\"list\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"showList\"\n      :aria-label=\"inputLabel\"\n      class=\"min-w-0 flex-1 rounded-md border-0 py-1.5 pl-7.25 leading-none text-c-1\"\n      :class=\"showSearchEnd ? 'pr-7.25' : 'pr-1.75'\"\n      data-1p-ignore\n      :placeholder\n      role=\"combobox\"\n      tabindex=\"0\"\n      type=\"text\"\n      @keydown.down.prevent=\"moveActive(1)\"\n      @keydown.enter.prevent=\"activeRef && toggleSelected(activeRef)\"\n      @keydown.esc.prevent=\"close?.()\"\n      @keydown.space=\"handleSpace\"\n      @keydown.up.prevent=\"moveActive(-1)\" />\n    <div\n      v-if=\"showSearchEnd\"\n      class=\"absolute right-1.75 top-1/2 flex -translate-y-1/2 items-center\">\n      <slot\n        :loader\n        name=\"search-end\">\n        <ScalarLoading\n          v-if=\"showLoader\"\n          :loader\n          size=\"md\" />\n      </slot>\n    </div>\n  </div>\n  <ul\n    v-show=\"showList\"\n    :id=\"id\"\n    :aria-busy=\"isLoading\"\n    :aria-multiselectable=\"multiselect\"\n    class=\"border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <template v-if=\"showSkeleton\">\n      <li\n        v-for=\"idx in 3\"\n        :key=\"idx\"\n        aria-hidden=\"true\"\n        class=\"flex px-2 py-1.5\"\n        role=\"presentation\">\n        <div\n          class=\"h-lh rounded-md bg-b-3 animate-pulse\"\n          :class=\"idx === 3 ? 'w-2/3' : 'w-full'\" />\n      </li>\n    </template>\n    <li\n      v-else-if=\"!filtered.length && !slots.add && noResults && !isLoading\"\n      class=\"text-c-3 px-2.5 py-2\"\n      role=\"status\">\n      {{ noResults }}\n    </li>\n    <ComboboxOptionGroup\n      v-for=\"(group, i) in groups\"\n      :id=\"`${id}-group-${i}`\"\n      :key=\"i\"\n      :hidden=\"\n        // Only show the group label if there are some results\n        !group.options.some((o) => filtered.some((f) => f.id === o.id)) ||\n        // And it has a label\n        !group.label\n      \">\n      <template #label>\n        <slot\n          v-if=\"$slots.group\"\n          :group\n          name=\"group\" />\n        <template v-else>\n          {{ group.label }}\n        </template>\n      </template>\n      <template\n        v-for=\"option in filtered\"\n        :key=\"option.id\">\n        <ComboboxOption\n          v-if=\"group.options.some((o) => o.id === option.id)\"\n          :id=\"getOptionId(option)\"\n          v-slot=\"{ active, selected }\"\n          :active=\"activeRef?.id === option.id\"\n          :selected=\"model.some((o) => o.id === option.id)\"\n          @click=\"toggleSelected(option)\"\n          @mousedown.prevent\n          @mouseenter=\"activeRef = option\">\n          <slot\n            v-if=\"$slots.option\"\n            :active\n            name=\"option\"\n            :option\n            :selected />\n          <template v-else>\n            <ScalarListboxCheckbox\n              :multiselect\n              :selected=\"model.some((o) => o.id === option.id)\" />\n            <span class=\"inline-block min-w-0 flex-1 truncate text-c-1\">\n              {{ option.label }}\n            </span>\n          </template>\n        </ComboboxOption>\n      </template>\n    </ComboboxOptionGroup>\n    <ComboboxOption\n      v-if=\"slots.add\"\n      :id=\"getOptionId(addOption)\"\n      v-slot=\"{ active }\"\n      :active=\"activeRef?.id === addOption.id\"\n      @click=\"addNew\"\n      @mousedown.prevent\n      @mouseenter=\"activeRef = addOption\">\n      <ScalarIconPlus class=\"size-4 p-px\" />\n      <slot\n        :active\n        name=\"add\" />\n    </ComboboxOption>\n  </ul>\n</template>\n"],"mappings":""}