npm - @scalar/components - Versions diffs - 0.21.1 → 0.21.3 - Mend

@scalar/components 0.21.1 → 0.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOption.vue.script.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst { active, selected } = defineProps<{\n active?: boolean\n selected?: boolean\n}>()\n\nconst variants = cva({\n base: [\n // Group\n 'group/item',\n // Layout\n 'flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left',\n // Text / background style\n 'truncate bg-transparent text-c-1',\n // Interaction\n 'cursor-pointer hover:bg-b-2',\n ],\n variants: {\n selected: { true: 'text-c-1' },\n active: { true: 'bg-b-2' },\n },\n})\n</script>\n<template>\n <li\n :aria-selected=\"selected\"\n :class=\"cx(variants({ active, selected }))\"\n role=\"option\"\n tabindex=\"-1\">\n <slot\n :active\n :selected />\n </li>\n</template>\n"],"mappings":";;;;;;;;;;;~~EAQA~~,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAEA;IAEA;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,YAAY;IAC9B,QAAQ,EAAE,MAAM,UAAU;IAC3B;GACF,CAAA;;uBAGC,mBAQK,MAAA;IAPF,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA;IACtC,MAAK;IACL,UAAS;OACT,WAEc,KAAA,QAAA,WAAA;IADX,QAAA,QAAA;IACA,UAAA,QAAA"}
1	+ {"version":3,"file":"ScalarComboboxOption.vue.script.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Combobox Option component\n \n A single selectable option within a combobox list.\n * Handles active and selected states.\n \n @example\n * <ScalarComboboxOption :active=\"true\" :selected=\"false\">\n * Option Label\n * </ScalarComboboxOption>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst { active, selected } = defineProps<{\n active?: boolean\n selected?: boolean\n}>()\n\nconst variants = cva({\n base: [\n // Group\n 'group/item',\n // Layout\n 'flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left',\n // Text / background style\n 'truncate bg-transparent text-c-1',\n // Interaction\n 'cursor-pointer hover:bg-b-2',\n ],\n variants: {\n selected: { true: 'text-c-1' },\n active: { true: 'bg-b-2' },\n },\n})\n</script>\n<template>\n <li\n :aria-selected=\"selected\"\n :class=\"cx(variants({ active, selected }))\"\n role=\"option\"\n tabindex=\"-1\">\n <slot\n :active\n :selected />\n </li>\n</template>\n"],"mappings":";;;;;;;;;;;EAuBA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAEA;IAEA;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,YAAY;IAC9B,QAAQ,EAAE,MAAM,UAAU;IAC3B;GACF,CAAA;;uBAGC,mBAQK,MAAA;IAPF,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA;IACtC,MAAK;IACL,UAAS;OACT,WAEc,KAAA,QAAA,WAAA;IADX,QAAA,QAAA;IACA,UAAA,QAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts CHANGED Viewed

@@ -1,17 +1,27 @@
-type __VLS_Props = {
+/**
+ * Scalar Combobox Option Group component
+ *
+ * Groups related options under an optional label within a combobox.
+ *
+ * @example
+ * <ScalarComboboxOptionGroup>
+ *   <template #label>Group Name</template>
+ *   <!-- options -->
+ * </ScalarComboboxOptionGroup>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     id?: string;
     hidden?: boolean;
-};
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    hidden?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOptionGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"names":[],"mappings":"~~AA4BA~~,~~KAAK~~,~~WAAW~~,~~GAAG~~;~~IACjB~~,~~EAAE~~,~~CAAC,EAAE,~~MAAM,~~CAAA~~;~~IACX~~,MAAM,~~CAAC,EAAE,~~OAAO,~~CAAA~~;~~CACjB~~,~~CAAC;AAwCF,QAAA,IAAI,~~OAAO,~~IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,~~CAAC,~~EAAE,CAAC,~~KAAK,~~EAAE~~,~~OAAO,OAAO,~~KAAK,GAAG,~~CAAA;CAAE,GAC1C;IAAE,OAAO,~~CAAC,~~EAAE,CAAC,~~KAAK,~~EAAE~~,~~OAAO,OAAO,~~KAAK,GAAG~~,CAAA~~;~~CAAE~~,CAAC;~~AAG/C~~,~~QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,~~KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ScalarComboboxOptionGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"names":[],"mappings":"AA4CA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM;aACF,OAAO;;SADX,MAAM;aACF,OAAO;;YA2CN,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC5B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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/ScalarCombobox/ScalarComboboxOptionGroup.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOptionGroup.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { id = useId(), hidden = false } = defineProps<{\n id?: string\n hidden?: boolean\n}>()\n</script>\n<template>\n <div\n :id=\"id\"\n :aria-labelledby=\"id ? `${id}-label` : undefined\"\n class=\"contents\"\n :role=\"hidden ? undefined : 'group'\">\n <div\n v-if=\"!hidden\"\n :id=\"`${id}-label`\"\n class=\"min-w-0 truncate px-2.5 py-1.5 text-c-2\">\n <slot name=\"label\" />\n </div>\n <slot />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ScalarComboboxOptionGroup.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Combobox Option Group component\n \n Groups related options under an optional label within a combobox.\n \n @example\n * <ScalarComboboxOptionGroup>\n * <template #label>Group Name</template>\n * <!-- options -->\n * </ScalarComboboxOptionGroup>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { id = useId(), hidden = false } = defineProps<{\n id?: string\n hidden?: boolean\n}>()\n</script>\n<template>\n <div\n :id=\"id\"\n :aria-labelledby=\"id ? `${id}-label` : undefined\"\n class=\"contents\"\n :role=\"hidden ? undefined : 'group'\">\n <div\n v-if=\"!hidden\"\n :id=\"`${id}-label`\"\n class=\"min-w-0 truncate px-2.5 py-1.5 text-c-2\">\n <slot name=\"label\" />\n </div>\n <slot />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOptionGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { id = useId(), hidden = false } = defineProps<{\n id?: string\n hidden?: boolean\n}>()\n</script>\n<template>\n <div\n :id=\"id\"\n :aria-labelledby=\"id ? `${id}-label` : undefined\"\n class=\"contents\"\n :role=\"hidden ? undefined : 'group'\">\n <div\n v-if=\"!hidden\"\n :id=\"`${id}-label`\"\n class=\"min-w-0 truncate px-2.5 py-1.5 text-c-2\">\n <slot name=\"label\" />\n </div>\n <slot />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;~~uBASE~~,mBAYM,OAAA;IAXH,IAAI,QAAA;IACJ,mBAAiB,QAAA,KAAE,GAAM,QAAA,GAAE,UAAW,KAAA;IACvC,OAAM;IACL,MAAM,QAAA,SAAS,KAAA,IAAS;QAEhB,QAAA,UAAA,WAAA,EADT,mBAKM,OAAA;;IAHH,IAAE,GAAK,QAAA,GAAE;IACV,OAAM;OACN,WAAqB,KAAA,QAAA,QAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAEvB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}
1	+ {"version":3,"file":"ScalarComboboxOptionGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Combobox Option Group component\n \n Groups related options under an optional label within a combobox.\n \n @example\n * <ScalarComboboxOptionGroup>\n * <template #label>Group Name</template>\n * <!-- options -->\n * </ScalarComboboxOptionGroup>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { id = useId(), hidden = false } = defineProps<{\n id?: string\n hidden?: boolean\n}>()\n</script>\n<template>\n <div\n :id=\"id\"\n :aria-labelledby=\"id ? `${id}-label` : undefined\"\n class=\"contents\"\n :role=\"hidden ? undefined : 'group'\">\n <div\n v-if=\"!hidden\"\n :id=\"`${id}-label`\"\n class=\"min-w-0 truncate px-2.5 py-1.5 text-c-2\">\n <slot name=\"label\" />\n </div>\n <slot />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;uBAwBE,mBAYM,OAAA;IAXH,IAAI,QAAA;IACJ,mBAAiB,QAAA,KAAE,GAAM,QAAA,GAAE,UAAW,KAAA;IACvC,OAAM;IACL,MAAM,QAAA,SAAS,KAAA,IAAS;QAEhB,QAAA,UAAA,WAAA,EADT,mBAKM,OAAA;;IAHH,IAAE,GAAK,QAAA,GAAE;IACV,OAAM;OACN,WAAqB,KAAA,QAAA,QAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAEvB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}

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

@@ -1,4 +1,15 @@
 import { type ComboboxSlots, type FilterFunction, type Option, type OptionGroup, type OptionsOrGroups } from './types.js';
+/**
+ * Scalar Combobox Options component
+ *
+ * Renders the searchable option list for a combobox, including
+ * filtering, keyboard navigation, and an optional "add new" action.
+ *
+ * @example
+ * <ScalarComboboxOptions v-model="selected" :options="options" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         /** The options to display in the combobox */
@@ -29,8 +40,6 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"~~AAmSA~~,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EAErB,MAAM,SAAS,CAAA;~~AAEhB~~,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+dO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA7dtD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;;WAKG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,qEAAqE;sBACvD,OAAO;;qBAqKV,CAAC,EAAE;;;;KA4S2E,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,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;~~wBACvD~~,~~OAAO,YAAY;AAAxC,wBAAyC;AACzC,~~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"}
1	+ {"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAgTA,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;WA+dO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA7dtD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;;WAKG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,qEAAqE;sBACvD,OAAO;;qBAqKV,CAAC,EAAE;;;;KA4S2E,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,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;AAC5E,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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOptions.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<!-- 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 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 /\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// 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 <div class=\"relative flex\">\n <ScalarIconMagnifyingGlass\n class=\"pointer-events-none absolute left-2.5 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 class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-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.up.prevent=\"moveActive(-1)\" />\n </div>\n <ul\n v-show=\"filtered.length \|\| slots.add\"\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 <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":""}
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 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 /\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// 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 <div class=\"relative flex\">\n <ScalarIconMagnifyingGlass\n class=\"pointer-events-none absolute left-2.5 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 class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-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.up.prevent=\"moveActive(-1)\" />\n </div>\n <ul\n v-show=\"filtered.length \|\| slots.add\"\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 <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":""}

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxOptions.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<!-- 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 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 /\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// 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 <div class=\"relative flex\">\n <ScalarIconMagnifyingGlass\n class=\"pointer-events-none absolute left-2.5 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 class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-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.up.prevent=\"moveActive(-1)\" />\n </div>\n <ul\n v-show=\"filtered.length \|\| slots.add\"\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 <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":"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"}
1	+ {"version":3,"file":"ScalarComboboxOptions.vue.script.js","names":["$slots"],"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 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 /\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// 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 <div class=\"relative flex\">\n <ScalarIconMagnifyingGlass\n class=\"pointer-events-none absolute left-2.5 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 class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-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.up.prevent=\"moveActive(-1)\" />\n </div>\n <ul\n v-show=\"filtered.length \|\| slots.add\"\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 <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":"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"}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.d.ts CHANGED Viewed

@@ -1,7 +1,20 @@
 import { type ScalarFloatingOptions } from '../ScalarFloating';
 import type { ScalarPopoverSlots } from '../ScalarPopover';
-type __VLS_Slots = ScalarPopoverSlots;
-declare const __VLS_base: import("vue").DefineComponent<ScalarFloatingOptions, {
+/**
+ * Scalar Combobox Popover component
+ *
+ * Wraps combobox content in a floating popover panel.
+ * Handles open/close behavior and keyboard interactions.
+ *
+ * @example
+ * <ScalarComboboxPopover>
+ *   <button>Toggle</button>
+ *   <template #popover="{ close }">Content</template>
+ * </ScalarComboboxPopover>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScalarFloatingOptions, {
     popoverButtonRef: import("vue").Ref<import("vue").DefineComponent<{
         as: {
             type: (ObjectConstructor | StringConstructor)[];
@@ -67,10 +80,7 @@ declare const __VLS_base: import("vue").DefineComponent<ScalarFloatingOptions, {
         as: string | Record<string, any>;
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, 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;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarPopoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"~~AAsEA~~,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;~~AAK1D~~,~~KAAK~~,~~WAAW,GAAG,kBAAkB,CAAC~~;~~AA4JtC~~,~~QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8PAGd,CAAC~~;~~AACH~~,QAAA,MAAM,YAAY,~~EAAS,eAAe,~~CAAC~~,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC~~;~~wBACtD~~,~~OAAO,YAAY;AAAxC,wBAAyC;AACzC,~~KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAsFA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAqKd,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/ScalarCombobox/ScalarComboboxPopover.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n ScalarFloating,\n ScalarFloatingBackdrop,\n type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup /\nconst popoverButtonRef = ref<typeof PopoverButton \| null>(null)\n\n/* Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n return\n }\n e.preventDefault()\n e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton\n ref=\"popoverButtonRef\"\n as=\"template\"\n @keydown=\"handleKeydown\">\n <slot :open />\n </PopoverButton>\n <template\n v-if=\"open\"\n #floating=\"{ width }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :style=\"{ width }\"\n v-bind=\"\n cx('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n \">\n <slot\n :close\n name=\"popover\"\n :open />\n <ScalarFloatingBackdrop />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Combobox Popover component\n \n Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n \n @example\n * <ScalarComboboxPopover>\n * <button>Toggle</button>\n * <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n ScalarFloating,\n ScalarFloatingBackdrop,\n type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/* Expose the popover button so we can close the popup /\nconst popoverButtonRef = ref<typeof PopoverButton \| null>(null)\n\n/* Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n return\n }\n e.preventDefault()\n e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton\n ref=\"popoverButtonRef\"\n as=\"template\"\n @keydown=\"handleKeydown\">\n <slot :open />\n </PopoverButton>\n <template\n v-if=\"open\"\n #floating=\"{ width }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :style=\"{ width }\"\n v-bind=\"\n cx('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n \">\n <slot\n :close\n name=\"popover\"\n :open />\n <ScalarFloatingBackdrop />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js CHANGED Viewed

@@ -3,7 +3,6 @@ import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBack
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
-//#region src/components/ScalarCombobox/ScalarComboboxPopover.vue?vue&type=script&setup=true&lang.ts
 var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarComboboxPopover",

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n ScalarFloating,\n ScalarFloatingBackdrop,\n type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup /\nconst popoverButtonRef = ref<typeof PopoverButton \| null>(null)\n\n/* Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n return\n }\n e.preventDefault()\n e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton\n ref=\"popoverButtonRef\"\n as=\"template\"\n @keydown=\"handleKeydown\">\n <slot :open />\n </PopoverButton>\n <template\n v-if=\"open\"\n #floating=\"{ width }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :style=\"{ width }\"\n v-bind=\"\n cx('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n \">\n <slot\n :close\n name=\"popover\"\n :open />\n <ScalarFloatingBackdrop />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;EAiBA~~,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,mBAAmB,IAAiC,KAAI;;EAG9D,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,CAAC,CAAC,WAAW,YAAY,CAAC,SAAS,EAAE,IAAI,CAC3C;AAEF,KAAE,gBAAe;AACjB,KAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,SAAS,CAAC,CAAA;;AAGxE,WAAa,EAAE,kBAAkB,CAAA;;uBAG/B,YA2BU,MAAA,QAAA,EAAA,EAzBR,IAAG,YAAU,EAAA;sBAwBI,EAzBP,WAAI,CAEd,YAuBiB,MAAA,uBAAA,EAAA,eAAA,mBAvBOA,KAAAA,OAAM,CAAA,EAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,cAAA,EAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAYc,EAZF,YAAK,CAClB,YAWe,MAAA,aAAA,EAXf,WAWe,EATZ,OAAK,EAAI,OAAK,EAAA,EACM,MAAA,GAAE,CAAA,8DAAA,CAAA,EAAA;wBAMb,EARA,YAAK,CAKf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA;UACH,YAA0B,MAAA,+BAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Combobox Popover component\n \n Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n \n @example\n * <ScalarComboboxPopover>\n * <button>Toggle</button>\n * <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n /\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n ScalarFloating,\n ScalarFloatingBackdrop,\n type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/* Expose the popover button so we can close the popup /\nconst popoverButtonRef = ref<typeof PopoverButton \| null>(null)\n\n/* Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n return\n }\n e.preventDefault()\n e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton\n ref=\"popoverButtonRef\"\n as=\"template\"\n @keydown=\"handleKeydown\">\n <slot :open />\n </PopoverButton>\n <template\n v-if=\"open\"\n #floating=\"{ width }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :style=\"{ width }\"\n v-bind=\"\n cx('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n \">\n <slot\n :close\n name=\"popover\"\n :open />\n <ScalarFloatingBackdrop />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,mBAAmB,IAAiC,KAAI;;EAG9D,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,CAAC,CAAC,WAAW,YAAY,CAAC,SAAS,EAAE,IAAI,CAC3C;AAEF,KAAE,gBAAe;AACjB,KAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,SAAS,CAAC,CAAA;;AAGxE,WAAa,EAAE,kBAAkB,CAAA;;uBAG/B,YA2BU,MAAA,QAAA,EAAA,EAzBR,IAAG,YAAU,EAAA;sBAwBI,EAzBP,WAAI,CAEd,YAuBiB,MAAA,uBAAA,EAAA,eAAA,mBAvBOA,KAAAA,OAAM,CAAA,EAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,cAAA,EAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAYc,EAZF,YAAK,CAClB,YAWe,MAAA,aAAA,EAXf,WAWe,EATZ,OAAK,EAAI,OAAK,EAAA,EACM,MAAA,GAAE,CAAA,8DAAA,CAAA,EAAA;wBAMb,EARA,YAAK,CAKf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA;UACH,YAA0B,MAAA,+BAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.vue.d.ts CHANGED Viewed

@@ -1,11 +1,19 @@
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+/**
+ * Scalar Error Boundary component
+ *
+ * Catches errors thrown by child components and displays
+ * a fallback error message instead of crashing the entire app.
+ *
+ * @example
+ * <ScalarErrorBoundary>
+ *   <SomeComponent />
+ * </ScalarErrorBoundary>
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"names":[],"mappings":"~~AAgGA~~,~~QAAA,IAAI,~~OAAO,~~IAAW~~,~~CAAE~~;~~AACxB~~,~~KAAK~~,~~WAAW~~,~~GAAG,EAAE,GACnB~~;~~IAAE~~,~~OAAO,~~CAAC,~~EAAE,CAAC,~~KAAK,~~EAAE~~,~~OAAO,OAAO,~~KAAK,GAAG~~,CAAA~~;~~CAAE~~,CAAC;~~AAK/C~~,~~QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,~~KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ScalarErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"names":[],"mappings":"AAkDA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAgEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQxC,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/ScalarErrorBoundary/ScalarErrorBoundary.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarErrorBoundary.vue.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n console.error('[ERROR]', err, info)\n\n hasError.value = true\n error.value = err\n\n // Prevent the error from propagating further up\n return false\n})\n</script>\n\n<template>\n <slot v-if=\"!hasError\" />\n <div\n v-else\n class=\"rounded border bg-b-2 p-3 text-sm\">\n <div class=\"p-2\">Oops, something went wrong here.</div>\n <div\n v-if=\"error\"\n class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n {{ error?.name }}: {{ error?.message }}\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ScalarErrorBoundary.vue.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Error Boundary component\n \n Catches errors thrown by child components and displays\n * a fallback error message instead of crashing the entire app.\n \n @example\n * <ScalarErrorBoundary>\n * <SomeComponent />\n * </ScalarErrorBoundary>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n console.error('[ERROR]', err, info)\n\n hasError.value = true\n error.value = err\n\n // Prevent the error from propagating further up\n return false\n})\n</script>\n\n<template>\n <slot v-if=\"!hasError\" />\n <div\n v-else\n class=\"rounded border bg-b-2 p-3 text-sm\">\n <div class=\"p-2\">Oops, something went wrong here.</div>\n <div\n v-if=\"error\"\n class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n {{ error?.name }}: {{ error?.message }}\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarErrorBoundary.vue.script.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n console.error('[ERROR]', err, info)\n\n hasError.value = true\n error.value = err\n\n // Prevent the error from propagating further up\n return false\n})\n</script>\n\n<template>\n <slot v-if=\"!hasError\" />\n <div\n v-else\n class=\"rounded border bg-b-2 p-3 text-sm\">\n <div class=\"p-2\">Oops, something went wrong here.</div>\n <div\n v-if=\"error\"\n class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n {{ error?.name }}: {{ error?.message }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;~~EAGA~~,MAAM,WAAW,IAAa,MAAK;EACnC,MAAM,QAAQ,KAAW;AAEzB,mBAAiB,KAAK,GAAG,SAAS;AAChC,WAAQ,MAAM,WAAW,KAAK,KAAI;AAElC,YAAS,QAAQ;AACjB,SAAM,QAAQ;AAGd,UAAO;IACR;;WAIc,SAAA,QAAb,WAAyB,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,IAAA,WAAA,EACzB,mBASM,OATN,YASM,CAAA,OAAA,OAAA,OAAA,KANJ,mBAAuD,OAAA,EAAlD,OAAM,OAAK,EAAC,oCAAgC,GAAA,GAEzC,MAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAIM,gBADD,MAAA,OAAO,KAAI,GAAG,OAAE,gBAAG,MAAA,OAAO,QAAO,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"ScalarErrorBoundary.vue.script.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Error Boundary component\n \n Catches errors thrown by child components and displays\n * a fallback error message instead of crashing the entire app.\n \n @example\n * <ScalarErrorBoundary>\n * <SomeComponent />\n * </ScalarErrorBoundary>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n console.error('[ERROR]', err, info)\n\n hasError.value = true\n error.value = err\n\n // Prevent the error from propagating further up\n return false\n})\n</script>\n\n<template>\n <slot v-if=\"!hasError\" />\n <div\n v-else\n class=\"rounded border bg-b-2 p-3 text-sm\">\n <div class=\"p-2\">Oops, something went wrong here.</div>\n <div\n v-if=\"error\"\n class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n {{ error?.name }}: {{ error?.message }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAiBA,MAAM,WAAW,IAAa,MAAK;EACnC,MAAM,QAAQ,KAAW;AAEzB,mBAAiB,KAAK,GAAG,SAAS;AAChC,WAAQ,MAAM,WAAW,KAAK,KAAI;AAElC,YAAS,QAAQ;AACjB,SAAM,QAAQ;AAGd,UAAO;IACR;;WAIc,SAAA,QAAb,WAAyB,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,IAAA,WAAA,EACzB,mBASM,OATN,YASM,CAAA,OAAA,OAAA,OAAA,KANJ,mBAAuD,OAAA,EAAlD,OAAM,OAAK,EAAC,oCAAgC,GAAA,GAEzC,MAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAIM,gBADD,MAAA,OAAO,KAAI,GAAG,OAAE,gBAAG,MAAA,OAAO,QAAO,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/ScalarFileUpload/ScalarFileUploadFileList.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFileUploadFileList.vue.js","names":[],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUploadFileList.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar File Upload File List\n \n Displays a list of files\n \n @example\n * <ScalarFileUploadFileList :files=\"files\" />\n /\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ~~useBindCx~~ } from '@scalar/~~use~~-~~hooks/useBindCx~~'\nimport ~~prettyBytes~~ from '~~pretty~~-~~bytes~~'\n\nimport { ScalarButton } from '../ScalarButton'\n\ndefineEmits<{\n /* Emitted when the user clicks the upload button /\n (e: 'upload'): void\n}>()\n\n/* The files to display */\nconst files = defineModel<File[]>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-2 p-4')\">\n <div class=\"text-c-2\">Selected files:</div>\n <ul\n v-for=\"file in files\"\n :key=\"file.name\"\n class=\"flex flex-col gap-0.5\">\n <li class=\"border rounded p-1 text-xs\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex-1 min-w-0 truncate\">\n {{ file.name }}\n </div>\n <div class=\"text-c-3\">{{ ~~prettyBytes~~(file.size) }}</div>\n </div>\n </li>\n </ul>\n <div class=\"flex items-center gap-1.5\">\n <ScalarButton\n size=\"xs\"\n @click=\"$emit('upload')\">\n Upload\n </ScalarButton>\n <ScalarButton\n size=\"xs\"\n variant=\"outlined\"\n @click=\"files = []\">\n Clear\n </ScalarButton>\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ScalarFileUploadFileList.vue.js","names":[],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUploadFileList.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar File Upload File List\n \n Displays a list of files\n \n @example\n * <ScalarFileUploadFileList :files=\"files\" />\n /\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { formatBytes } from '@scalar/helpers/formatters/format-bytes'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarButton } from '../ScalarButton'\n\ndefineEmits<{\n /* Emitted when the user clicks the upload button /\n (e: 'upload'): void\n}>()\n\n/* The files to display */\nconst files = defineModel<File[]>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-2 p-4')\">\n <div class=\"text-c-2\">Selected files:</div>\n <ul\n v-for=\"file in files\"\n :key=\"file.name\"\n class=\"flex flex-col gap-0.5\">\n <li class=\"border rounded p-1 text-xs\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex-1 min-w-0 truncate\">\n {{ file.name }}\n </div>\n <div class=\"text-c-3\">{{ formatBytes(file.size) }}</div>\n </div>\n </li>\n </ul>\n <div class=\"flex items-center gap-1.5\">\n <ScalarButton\n size=\"xs\"\n @click=\"$emit('upload')\">\n Upload\n </ScalarButton>\n <ScalarButton\n size=\"xs\"\n variant=\"outlined\"\n @click=\"files = []\">\n Clear\n </ScalarButton>\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarFileUpload/ScalarFileUploadFileList.vue.script.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import ScalarButton_default from "../ScalarButton/ScalarButton.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { Fragment, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
-import prettyBytes from "pretty-bytes";
+import { formatBytes } from "@scalar/helpers/formatters/format-bytes";
 //#region src/components/ScalarFileUpload/ScalarFileUploadFileList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "border rounded p-1 text-xs" };
 var _hoisted_2 = { class: "flex items-center justify-between" };
@@ -27,7 +27,7 @@ var ScalarFileUploadFileList_vue_vue_type_script_setup_true_lang_default = /* @_
 					return openBlock(), createElementBlock("ul", {
 						key: file.name,
 						class: "flex flex-col gap-0.5"
-					}, [createElementVNode("li", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(file.name), 1), createElementVNode("div", _hoisted_4, toDisplayString(unref(prettyBytes)(file.size)), 1)])])]);
+					}, [createElementVNode("li", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(file.name), 1), createElementVNode("div", _hoisted_4, toDisplayString(unref(formatBytes)(file.size)), 1)])])]);
 				}), 128)),
 				createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarButton_default), {
 					size: "xs",

package/dist/components/ScalarFileUpload/ScalarFileUploadFileList.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFileUploadFileList.vue.script.js","names":["$emit"],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUploadFileList.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar File Upload File List\n \n Displays a list of files\n \n @example\n * <ScalarFileUploadFileList :files=\"files\" />\n /\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ~~useBindCx~~ } from '@scalar/~~use~~-~~hooks/useBindCx~~'\nimport ~~prettyBytes~~ from '~~pretty~~-~~bytes~~'\n\nimport { ScalarButton } from '../ScalarButton'\n\ndefineEmits<{\n /* Emitted when the user clicks the upload button /\n (e: 'upload'): void\n}>()\n\n/* The files to display */\nconst files = defineModel<File[]>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-2 p-4')\">\n <div class=\"text-c-2\">Selected files:</div>\n <ul\n v-for=\"file in files\"\n :key=\"file.name\"\n class=\"flex flex-col gap-0.5\">\n <li class=\"border rounded p-1 text-xs\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex-1 min-w-0 truncate\">\n {{ file.name }}\n </div>\n <div class=\"text-c-3\">{{ ~~prettyBytes~~(file.size) }}</div>\n </div>\n </li>\n </ul>\n <div class=\"flex items-center gap-1.5\">\n <ScalarButton\n size=\"xs\"\n @click=\"$emit('upload')\">\n Upload\n </ScalarButton>\n <ScalarButton\n size=\"xs\"\n variant=\"outlined\"\n @click=\"files = []\">\n Clear\n </ScalarButton>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAGlC,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBA4BM,OAAA,eAAA,mBA5BO,MAAA,GAAE,CAAA,0BAAA,CAAA,CAAA,EAAA;8BACb,mBAA2C,OAAA,EAAtC,OAAM,YAAU,EAAC,mBAAe,GAAA;sBACrC,mBAYK,UAAA,MAAA,WAXY,MAAA,QAAR,SAAI;yBADb,mBAYK,MAAA;MAVF,KAAK,KAAK;MACX,OAAM;SACN,mBAOK,MAPL,YAOK,CANH,mBAKM,OALN,YAKM,CAJJ,mBAEM,OAFN,YAEM,gBADD,KAAK,KAAI,EAAA,EAAA,EAEd,mBAAwD,OAAxD,YAAwD,gBAA/B,MAAA,YAAW,CAAC,KAAK,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;IAIpD,mBAYM,OAZN,YAYM,CAXJ,YAIe,MAAA,qBAAA,EAAA;KAHb,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF2B,YAE3B,GAAA,CAAA,EAAA,CAAA;;QACA,YAKe,MAAA,qBAAA,EAAA;KAJb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,EAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFsB,WAEtB,GAAA,CAAA,EAAA,CAAA"}
1	+ {"version":3,"file":"ScalarFileUploadFileList.vue.script.js","names":["$emit"],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUploadFileList.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar File Upload File List\n \n Displays a list of files\n \n @example\n * <ScalarFileUploadFileList :files=\"files\" />\n /\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { formatBytes } from '@scalar/helpers/formatters/format-bytes'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarButton } from '../ScalarButton'\n\ndefineEmits<{\n /* Emitted when the user clicks the upload button /\n (e: 'upload'): void\n}>()\n\n/* The files to display */\nconst files = defineModel<File[]>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-2 p-4')\">\n <div class=\"text-c-2\">Selected files:</div>\n <ul\n v-for=\"file in files\"\n :key=\"file.name\"\n class=\"flex flex-col gap-0.5\">\n <li class=\"border rounded p-1 text-xs\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex-1 min-w-0 truncate\">\n {{ file.name }}\n </div>\n <div class=\"text-c-3\">{{ formatBytes(file.size) }}</div>\n </div>\n </li>\n </ul>\n <div class=\"flex items-center gap-1.5\">\n <ScalarButton\n size=\"xs\"\n @click=\"$emit('upload')\">\n Upload\n </ScalarButton>\n <ScalarButton\n size=\"xs\"\n variant=\"outlined\"\n @click=\"files = []\">\n Clear\n </ScalarButton>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAGlC,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBA4BM,OAAA,eAAA,mBA5BO,MAAA,GAAE,CAAA,0BAAA,CAAA,CAAA,EAAA;8BACb,mBAA2C,OAAA,EAAtC,OAAM,YAAU,EAAC,mBAAe,GAAA;sBACrC,mBAYK,UAAA,MAAA,WAXY,MAAA,QAAR,SAAI;yBADb,mBAYK,MAAA;MAVF,KAAK,KAAK;MACX,OAAM;SACN,mBAOK,MAPL,YAOK,CANH,mBAKM,OALN,YAKM,CAJJ,mBAEM,OAFN,YAEM,gBADD,KAAK,KAAI,EAAA,EAAA,EAEd,mBAAwD,OAAxD,YAAwD,gBAA/B,MAAA,YAAW,CAAC,KAAK,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;IAIpD,mBAYM,OAZN,YAYM,CAXJ,YAIe,MAAA,qBAAA,EAAA;KAHb,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF2B,YAE3B,GAAA,CAAA,EAAA,CAAA;;QACA,YAKe,MAAA,qBAAA,EAAA;KAJb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,EAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFsB,WAEtB,GAAA,CAAA,EAAA,CAAA"}

package/dist/components/ScalarFloating/ScalarFloating.vue.d.ts CHANGED Viewed

@@ -1,6 +1,23 @@
 import { type MiddlewareData } from '@floating-ui/vue';
 import type { FloatingOptions } from './types';
-type __VLS_Slots = {
+/**
+ * Scalar Floating component
+ *
+ * Positions a floating element relative to a reference element
+ * using Floating UI. Handles placement, offset, flipping, and resizing.
+ *
+ * @example
+ * <ScalarFloating placement="bottom">
+ *   <button>Reference</button>
+ *   <template #floating>Floating content</template>
+ * </ScalarFloating>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FloatingOptions, {
+    /** The resolved target element */
+    targetRef: import("vue").ComputedRef<HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The reference element for the element in the #floating slot */
     default(): unknown;
     /** The floating element */
@@ -12,14 +29,7 @@ type __VLS_Slots = {
         /** The middleware data return by Floating UI */
         data?: MiddlewareData;
     }): unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<FloatingOptions, {
-    /** The resolved target element */
-    targetRef: import("vue").ComputedRef<HTMLElement | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingOptions> & Readonly<{}>, {}, {}, {}, {}, 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/ScalarFloating/ScalarFloating.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"~~AAyIA~~,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;~~AAc9C~~,~~KAAK~~,~~WAAW~~,~~GAAG~~;~~IACjB~~,~~kEAAkE~~;~~IAClE~~,~~OAAO~~,~~IAAI~~,OAAO~~,CAAA~~;IAClB,2BAA2B;~~IAC3B,QAAQ,CAAC,CAAC,KAAK,EAAE~~;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO~~,CAAA~~;~~CACZ~~,CAAC;~~AA0IF~~,~~QAAA,MAAM,UAAU;IApEd,kCAAkC;;wPAuElC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,~~KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAwJA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI9C;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IA8FhB,kCAAkC;;;IAjFlC,kEAAkE;eACvD,OAAO;IAClB,2BAA2B;qBACV;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO;EAgJT,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/ScalarFloating/ScalarFloating.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n type MiddlewareData,\n autoUpdate,\n flip,\n offset as offsetMiddleware,\n shift,\n size,\n useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n placement,\n offset = 5,\n resize = false,\n middleware = [],\n target,\n teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n /** The reference element for the element in the #floating slot /\n default(): unknown\n /* The floating element /\n floating?(props: {\n /* The width of the reference element if `resize` is true and placement is on the y axis /\n width?: string\n /* The height of the reference element if `resize` is true and placement is on the x axis /\n height?: string\n /* The middleware data return by Floating UI /\n data?: MiddlewareData\n }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement \| null> = ref(null)\nconst wrapperRef: Ref<HTMLElement \| null> = ref(null)\n\nconst targetRef = computed<HTMLElement \| undefined>(() => {\n if (typeof window !== 'undefined' && wrapperRef.value) {\n // If target is a string (id), try to find it in the document\n if (typeof target === 'string') {\n const t = document.getElementById(target)\n if (t) {\n return t\n }\n console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n }\n // If target is an HTMLElement, return it\n else if (target instanceof HTMLElement) {\n return target\n }\n // Fallback to div wrapper if no child element is provided\n const firstChild = wrapperRef.value.children?.[0]\n if (firstChild instanceof HTMLElement) {\n return firstChild\n }\n return wrapperRef.value\n }\n // Return undefined if nothing is found\n return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'y'\n ? targetSize.width.value\n : undefined,\n)\n\nconst targetHeight = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'x'\n ? targetSize.height.value\n : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n placement: computed(() => placement ?? 'bottom'),\n whileElementsMounted: autoUpdate,\n middleware: computed(() => [\n offsetMiddleware(offset),\n flip(),\n shift({ padding: 10 }),\n size({\n apply({ availableWidth, availableHeight, elements }) {\n // Assign the max width and height to the floating element\n // @see https://floating-ui.com/docs/size\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n })\n },\n }),\n ...middleware,\n ]),\n})\n\ndefineExpose({\n /* The resolved target element */\n targetRef,\n})\n</script>\n<template>\n <div\n ref=\"wrapperRef\"\n :class=\"{ contents: !!$slots.default }\">\n <slot />\n </div>\n <ScalarTeleport\n v-if=\"$slots.floating\"\n :disabled=\"!teleport\"\n :to=\"typeof teleport === 'string' ? teleport : undefined\">\n <div\n ref=\"floatingRef\"\n class=\"relative z-context\"\n :style=\"floatingStyles\">\n <slot\n :data=\"middlewareData\"\n :height=\"targetHeight\"\n name=\"floating\"\n :width=\"targetWidth\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Floating component\n \n Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n \n @example\n * <ScalarFloating placement=\"bottom\">\n * <button>Reference</button>\n * <template #floating>Floating content</template>\n * </ScalarFloating>\n /\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n type MiddlewareData,\n autoUpdate,\n flip,\n offset as offsetMiddleware,\n shift,\n size,\n useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n placement,\n offset = 5,\n resize = false,\n middleware = [],\n target,\n teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n /* The reference element for the element in the #floating slot /\n default(): unknown\n /* The floating element /\n floating?(props: {\n /* The width of the reference element if `resize` is true and placement is on the y axis /\n width?: string\n /* The height of the reference element if `resize` is true and placement is on the x axis /\n height?: string\n /* The middleware data return by Floating UI /\n data?: MiddlewareData\n }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement \| null> = ref(null)\nconst wrapperRef: Ref<HTMLElement \| null> = ref(null)\n\nconst targetRef = computed<HTMLElement \| undefined>(() => {\n if (typeof window !== 'undefined' && wrapperRef.value) {\n // If target is a string (id), try to find it in the document\n if (typeof target === 'string') {\n const t = document.getElementById(target)\n if (t) {\n return t\n }\n console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n }\n // If target is an HTMLElement, return it\n else if (target instanceof HTMLElement) {\n return target\n }\n // Fallback to div wrapper if no child element is provided\n const firstChild = wrapperRef.value.children?.[0]\n if (firstChild instanceof HTMLElement) {\n return firstChild\n }\n return wrapperRef.value\n }\n // Return undefined if nothing is found\n return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'y'\n ? targetSize.width.value\n : undefined,\n)\n\nconst targetHeight = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'x'\n ? targetSize.height.value\n : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n placement: computed(() => placement ?? 'bottom'),\n whileElementsMounted: autoUpdate,\n middleware: computed(() => [\n offsetMiddleware(offset),\n flip(),\n shift({ padding: 10 }),\n size({\n apply({ availableWidth, availableHeight, elements }) {\n // Assign the max width and height to the floating element\n // @see https://floating-ui.com/docs/size\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n })\n },\n }),\n ...middleware,\n ]),\n})\n\ndefineExpose({\n /* The resolved target element */\n targetRef,\n})\n</script>\n<template>\n <div\n ref=\"wrapperRef\"\n :class=\"{ contents: !!$slots.default }\">\n <slot />\n </div>\n <ScalarTeleport\n v-if=\"$slots.floating\"\n :disabled=\"!teleport\"\n :to=\"typeof teleport === 'string' ? teleport : undefined\">\n <div\n ref=\"floatingRef\"\n class=\"relative z-context\"\n :style=\"floatingStyles\">\n <slot\n :data=\"middlewareData\"\n :height=\"targetHeight\"\n name=\"floating\"\n :width=\"targetWidth\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":""}

package/dist/components/ScalarFloating/ScalarFloating.vue.script.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { useResizeWithTarget } from "./useResizeWithTarget.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { getSideAxis } from "@floating-ui/utils";
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/vue";
-//#region src/components/ScalarFloating/ScalarFloating.vue?vue&type=script&setup=true&lang.ts
 var ScalarFloating_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarFloating",

package/dist/components/ScalarFloating/ScalarFloating.vue.script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n type MiddlewareData,\n autoUpdate,\n flip,\n offset as offsetMiddleware,\n shift,\n size,\n useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n placement,\n offset = 5,\n resize = false,\n middleware = [],\n target,\n teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n /** The reference element for the element in the #floating slot /\n default(): unknown\n /* The floating element /\n floating?(props: {\n /* The width of the reference element if `resize` is true and placement is on the y axis /\n width?: string\n /* The height of the reference element if `resize` is true and placement is on the x axis /\n height?: string\n /* The middleware data return by Floating UI /\n data?: MiddlewareData\n }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement \| null> = ref(null)\nconst wrapperRef: Ref<HTMLElement \| null> = ref(null)\n\nconst targetRef = computed<HTMLElement \| undefined>(() => {\n if (typeof window !== 'undefined' && wrapperRef.value) {\n // If target is a string (id), try to find it in the document\n if (typeof target === 'string') {\n const t = document.getElementById(target)\n if (t) {\n return t\n }\n console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n }\n // If target is an HTMLElement, return it\n else if (target instanceof HTMLElement) {\n return target\n }\n // Fallback to div wrapper if no child element is provided\n const firstChild = wrapperRef.value.children?.[0]\n if (firstChild instanceof HTMLElement) {\n return firstChild\n }\n return wrapperRef.value\n }\n // Return undefined if nothing is found\n return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'y'\n ? targetSize.width.value\n : undefined,\n)\n\nconst targetHeight = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'x'\n ? targetSize.height.value\n : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n placement: computed(() => placement ?? 'bottom'),\n whileElementsMounted: autoUpdate,\n middleware: computed(() => [\n offsetMiddleware(offset),\n flip(),\n shift({ padding: 10 }),\n size({\n apply({ availableWidth, availableHeight, elements }) {\n // Assign the max width and height to the floating element\n // @see https://floating-ui.com/docs/size\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n })\n },\n }),\n ...middleware,\n ]),\n})\n\ndefineExpose({\n /* The resolved target element */\n targetRef,\n})\n</script>\n<template>\n <div\n ref=\"wrapperRef\"\n :class=\"{ contents: !!$slots.default }\">\n <slot />\n </div>\n <ScalarTeleport\n v-if=\"$slots.floating\"\n :disabled=\"!teleport\"\n :to=\"typeof teleport === 'string' ? teleport : undefined\">\n <div\n ref=\"floatingRef\"\n class=\"relative z-context\"\n :style=\"floatingStyles\">\n <slot\n :data=\"middlewareData\"\n :height=\"targetHeight\"\n name=\"floating\"\n :width=\"targetWidth\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA~~,MAAM,cAAuC,IAAI,KAAI;EACrD,MAAM,aAAsC,IAAI,KAAI;EAEpD,MAAM,YAAY,eAAwC;AACxD,OAAI,OAAO,WAAW,eAAe,WAAW,OAAO;AAErD,QAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,OAAM;AACxC,SAAI,EACF,QAAO;AAET,aAAQ,KAAK,mCAAmC,QAAA,OAAO,aAAY;eAG5D,QAAA,kBAAkB,YACzB,QAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;AAC/C,QAAI,sBAAsB,YACxB,QAAO;AAET,WAAO,WAAW;;IAIrB;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,OAAO,EAChC,CAAA;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,MAAM,QACjB,KAAA,EACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,OAAO,QAClB,KAAA,EACN;EACA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,SAAS;GAChD,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,OAAO;IACxB,MAAM;IACN,MAAM,EAAE,SAAS,IAAI,CAAC;IACtB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;AAGnD,YAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,eAAe,GAAG,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,gBAAgB,GAAG,GAAG;MACjD,CAAA;OAEJ,CAAC;IACF,GAAG,QAAA;IACJ,CAAC;GACH,CAAA;AAED,WAAa,EAEX,WACD,CAAA;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGFA,KAAAA,OAAO,YAAA,WAAA,EADf,YAciB,MAAA,uBAAA,EAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,eAAc,CAAA;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,eAAc;KACpB,QAAQ,aAAA;KAER,OAAO,YAAA"}
1	+ {"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Scalar Floating component\n \n Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n \n @example\n * <ScalarFloating placement=\"bottom\">\n * <button>Reference</button>\n * <template #floating>Floating content</template>\n * </ScalarFloating>\n /\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n type MiddlewareData,\n autoUpdate,\n flip,\n offset as offsetMiddleware,\n shift,\n size,\n useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n placement,\n offset = 5,\n resize = false,\n middleware = [],\n target,\n teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n /* The reference element for the element in the #floating slot /\n default(): unknown\n /* The floating element /\n floating?(props: {\n /* The width of the reference element if `resize` is true and placement is on the y axis /\n width?: string\n /* The height of the reference element if `resize` is true and placement is on the x axis /\n height?: string\n /* The middleware data return by Floating UI /\n data?: MiddlewareData\n }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement \| null> = ref(null)\nconst wrapperRef: Ref<HTMLElement \| null> = ref(null)\n\nconst targetRef = computed<HTMLElement \| undefined>(() => {\n if (typeof window !== 'undefined' && wrapperRef.value) {\n // If target is a string (id), try to find it in the document\n if (typeof target === 'string') {\n const t = document.getElementById(target)\n if (t) {\n return t\n }\n console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n }\n // If target is an HTMLElement, return it\n else if (target instanceof HTMLElement) {\n return target\n }\n // Fallback to div wrapper if no child element is provided\n const firstChild = wrapperRef.value.children?.[0]\n if (firstChild instanceof HTMLElement) {\n return firstChild\n }\n return wrapperRef.value\n }\n // Return undefined if nothing is found\n return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'y'\n ? targetSize.width.value\n : undefined,\n)\n\nconst targetHeight = computed(() =>\n getSideAxis(placement ?? 'bottom') === 'x'\n ? targetSize.height.value\n : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n placement: computed(() => placement ?? 'bottom'),\n whileElementsMounted: autoUpdate,\n middleware: computed(() => [\n offsetMiddleware(offset),\n flip(),\n shift({ padding: 10 }),\n size({\n apply({ availableWidth, availableHeight, elements }) {\n // Assign the max width and height to the floating element\n // @see https://floating-ui.com/docs/size\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n })\n },\n }),\n ...middleware,\n ]),\n})\n\ndefineExpose({\n /* The resolved target element */\n targetRef,\n})\n</script>\n<template>\n <div\n ref=\"wrapperRef\"\n :class=\"{ contents: !!$slots.default }\">\n <slot />\n </div>\n <ScalarTeleport\n v-if=\"$slots.floating\"\n :disabled=\"!teleport\"\n :to=\"typeof teleport === 'string' ? teleport : undefined\">\n <div\n ref=\"floatingRef\"\n class=\"relative z-context\"\n :style=\"floatingStyles\">\n <slot\n :data=\"middlewareData\"\n :height=\"targetHeight\"\n name=\"floating\"\n :width=\"targetWidth\" />\n </div>\n </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,cAAuC,IAAI,KAAI;EACrD,MAAM,aAAsC,IAAI,KAAI;EAEpD,MAAM,YAAY,eAAwC;AACxD,OAAI,OAAO,WAAW,eAAe,WAAW,OAAO;AAErD,QAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,OAAM;AACxC,SAAI,EACF,QAAO;AAET,aAAQ,KAAK,mCAAmC,QAAA,OAAO,aAAY;eAG5D,QAAA,kBAAkB,YACzB,QAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;AAC/C,QAAI,sBAAsB,YACxB,QAAO;AAET,WAAO,WAAW;;IAIrB;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,OAAO,EAChC,CAAA;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,MAAM,QACjB,KAAA,EACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,OAAO,QAClB,KAAA,EACN;EACA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,SAAS;GAChD,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,OAAO;IACxB,MAAM;IACN,MAAM,EAAE,SAAS,IAAI,CAAC;IACtB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;AAGnD,YAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,eAAe,GAAG,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,gBAAgB,GAAG,GAAG;MACjD,CAAA;OAEJ,CAAC;IACF,GAAG,QAAA;IACJ,CAAC;GACH,CAAA;AAED,WAAa,EAEX,WACD,CAAA;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGFA,KAAAA,OAAO,YAAA,WAAA,EADf,YAciB,MAAA,uBAAA,EAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,eAAc,CAAA;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,eAAc;KACpB,QAAQ,aAAA;KAER,OAAO,YAAA"}

package/dist/components/ScalarForm/ScalarFormError.vue.d.ts CHANGED Viewed

@@ -1,18 +1,27 @@
 import { type Component } from 'vue';
-type __VLS_Props = {
+/**
+ * Scalar Form Error component
+ *
+ * Displays an error or warning message with an icon.
+ *
+ * @example
+ * <ScalarFormError variant="error">Something went wrong</ScalarFormError>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The variant of the error */
-    variant?: 'error' | 'warning';
+    variant?: "error" | "warning";
     /** Whether to show the icon */
     icon?: Component | undefined;
-};
-declare var __VLS_6: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The variant of the error */
+    variant?: "error" | "warning";
+    /** Whether to show the icon */
+    icon?: Component | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;