@scalar/components 0.32.1 → 0.33.1

package/dist/components/ScalarModal/ScalarModal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,133 @@
+import ScalarIconButton_default from "../ScalarIconButton/ScalarIconButton.vue.js";
+import { cva, cx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, reactive, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { ScalarIconX } from "@scalar/icons";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+//#region src/components/ScalarModal/ScalarModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "close-button fixed top-2 right-2 z-10"
+};
+/**
+* Scalar Modal component
+*
+* A dialog overlay with configurable size and variant.
+* Use the {@link useModal} hook to control the open state.
+*
+* @example
+* <ScalarModal :state="modal" title="My Modal">
+*   Modal content
+* </ScalarModal>
+*/
+var __default__ = {};
+/** Hook for creating a reactive modal state */
+function useModal() {
+	return reactive({
+		open: false,
+		show() {
+			this.open = true;
+		},
+		hide() {
+			this.open = false;
+		}
+	});
+}
+var ScalarModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	...__default__,
+	__name: "ScalarModal",
+	props: {
+		state: {},
+		title: {},
+		bodyClass: {},
+		maxWidth: {},
+		size: { default: "md" },
+		variant: {}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const modal = cva({
+			base: ["scalar-modal", "flex flex-col relative mb-0 rounded-lg bg-b-1 p-0 text-left leading-snug text-c-1 opacity-0 w-[calc(100vw-12px)] md:w-[calc(100vw-16px)] lg:w-[calc(100vw-32px)]"].join(" "),
+			variants: {
+				size: {
+					xxs: "mt-[20svh] max-h-[60svh] max-w-[360px]",
+					xs: "mt-[20svh] max-h-[60svh] max-w-[480px]",
+					sm: "mt-[20svh] max-h-[60svh] max-w-[540px]",
+					md: "mt-[20svh] max-h-[60svh] max-w-[640px]",
+					lg: "m-auto max-h-[80svh] max-w-[800px]",
+					xl: "m-auto max-h-[90svh] max-w-[1000px]",
+					full: "full-size-styles max-h-dvh mt-0 lg:w-full"
+				},
+				variant: {
+					form: "scalar-modal-form",
+					search: "scalar-modal-search mt-[15svh] max-h-[60svh] max-w-[540px]",
+					error: "scalar-modal-error"
+				}
+			}
+		});
+		const body = cva({
+			base: ["scalar-modal-body", "relative flex-1 min-h-0 p-3"].join(" "),
+			variants: {
+				variant: {
+					form: "overflow-visible",
+					search: "flex flex-col !m-0 overflow-hidden p-0",
+					error: "overflow-y-scroll"
+				},
+				size: {
+					xxs: "",
+					xs: "",
+					sm: "",
+					md: "",
+					lg: "",
+					xl: "m-0 p-0",
+					full: " rounded-none"
+				}
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Dialog), {
+				open: __props.state.open,
+				onClose: _cache[1] || (_cache[1] = () => {
+					__props.state.hide();
+					emit("close");
+				})
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cx)(__props.size === "full" ? "scalar-modal-layout-full" : "scalar-modal-layout", "fixed top-0 left-0 flex items-start justify-center", "z-overlay h-dvh w-dvw", "bg-backdrop dark:bg-backdrop-dark opacity-0", __props.size === "full" && "flex")) }, [createVNode(unref(DialogPanel), {
+					class: normalizeClass(unref(modal)({
+						size: __props.size,
+						variant: __props.variant
+					})),
+					style: normalizeStyle({ maxWidth: __props.maxWidth })
+				}, {
+					default: withCtx(() => [__props.title ? (openBlock(), createBlock(unref(DialogTitle), {
+						key: 0,
+						class: "scalar-modal-header text-c-1 m-0 -mb-1 rounded-lg px-3 pt-3 text-left text-sm font-medium"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+						_: 1
+					})) : createCommentVNode("", true), __props.size === "full" ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(__props.bodyClass)
+					}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)) : (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(cx)(unref(body)({
+							size: __props.size,
+							variant: __props.variant
+						}), __props.bodyClass))
+					}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2))]),
+					_: 3
+				}, 8, ["class", "style"]), __props.size === "full" ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ScalarIconButton_default), {
+					class: "hover:bg-b-3 focus:outline-none",
+					icon: unref(ScalarIconX),
+					label: "Close modal",
+					onClick: _cache[0] || (_cache[0] = ($event) => __props.state.hide())
+				}, null, 8, ["icon"])])) : createCommentVNode("", true)], 2)]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { ScalarModal_vue_vue_type_script_setup_true_lang_default as default, useModal };
+
+//# sourceMappingURL=ScalarModal.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarModal/ScalarModal.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarModal.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","_normalizeStyle","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementBlock","_renderSlot","ScalarIconButton"],"sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue'\nimport { ScalarIconX } from '@scalar/icons'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { VariantProps } from 'cva'\nimport { reactive } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\n\ntype ModalVariants = VariantProps<typeof modal>\n\nconst { size = 'md' } = defineProps<{\n  state: ReturnType<typeof useModal>\n  title?: string\n  bodyClass?: string\n  maxWidth?: string\n  size?: ModalVariants['size']\n  variant?: ModalVariants['variant']\n}>()\n\nconst emit = defineEmits<{\n  (event: 'close'): void\n}>()\n\nconst modal = cva({\n  base: [\n    'scalar-modal',\n    'flex flex-col relative mb-0 rounded-lg bg-b-1 p-0 text-left leading-snug text-c-1 opacity-0 w-[calc(100vw-12px)] md:w-[calc(100vw-16px)] lg:w-[calc(100vw-32px)]',\n  ].join(' '),\n  variants: {\n    size: {\n      xxs: 'mt-[20svh] max-h-[60svh] max-w-[360px]',\n      xs: 'mt-[20svh] max-h-[60svh] max-w-[480px]',\n      sm: 'mt-[20svh] max-h-[60svh] max-w-[540px]',\n      md: 'mt-[20svh] max-h-[60svh] max-w-[640px]',\n      lg: 'm-auto max-h-[80svh] max-w-[800px]',\n      xl: 'm-auto max-h-[90svh] max-w-[1000px]',\n      full: 'full-size-styles max-h-dvh mt-0 lg:w-full',\n    },\n    variant: {\n      form: 'scalar-modal-form',\n      search: 'scalar-modal-search mt-[15svh] max-h-[60svh] max-w-[540px]',\n      error: 'scalar-modal-error',\n    },\n  },\n})\nconst body = cva({\n  base: ['scalar-modal-body', 'relative flex-1 min-h-0 p-3'].join(' '),\n  variants: {\n    variant: {\n      form: 'overflow-visible',\n      search: 'flex flex-col !m-0 overflow-hidden p-0',\n      error: 'overflow-y-scroll',\n    },\n    size: {\n      xxs: '',\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n      xl: 'm-0 p-0',\n      full: ' rounded-none',\n    },\n  },\n})\n</script>\n<script lang=\"ts\">\n/**\n * Scalar Modal component\n *\n * A dialog overlay with configurable size and variant.\n * Use the {@link useModal} hook to control the open state.\n *\n * @example\n * <ScalarModal :state=\"modal\" title=\"My Modal\">\n *   Modal content\n * </ScalarModal>\n */\nexport default {}\n\n/** Hook for creating a reactive modal state */\nexport function useModal() {\n  return reactive({\n    open: false,\n    show() {\n      this.open = true\n    },\n    hide() {\n      this.open = false\n    },\n  })\n}\n</script>\n<template>\n  <Dialog\n    :open=\"state.open\"\n    @close=\"\n      () => {\n        state.hide()\n        emit('close')\n      }\n    \">\n    <div\n      :class=\"\n        cx(\n          size === 'full' ? 'scalar-modal-layout-full' : 'scalar-modal-layout',\n          'fixed top-0 left-0 flex items-start justify-center',\n          'z-overlay h-dvh w-dvw',\n          'bg-backdrop dark:bg-backdrop-dark opacity-0',\n          size === 'full' && 'flex',\n        )\n      \">\n      <DialogPanel\n        :class=\"modal({ size, variant })\"\n        :style=\"{ maxWidth }\">\n        <DialogTitle\n          v-if=\"title\"\n          class=\"scalar-modal-header text-c-1 m-0 -mb-1 rounded-lg px-3 pt-3 text-left text-sm font-medium\">\n          {{ title }}\n        </DialogTitle>\n        <div\n          v-if=\"size === 'full'\"\n          :class=\"bodyClass\">\n          <slot />\n        </div>\n        <div\n          v-else\n          :class=\"cx(body({ size, variant }), bodyClass)\">\n          <slot />\n        </div>\n      </DialogPanel>\n      <div\n        v-if=\"size === 'full'\"\n        class=\"close-button fixed top-2 right-2 z-10\">\n        <ScalarIconButton\n          class=\"hover:bg-b-3 focus:outline-none\"\n          :icon=\"ScalarIconX\"\n          label=\"Close modal\"\n          @click=\"state.hide()\" />\n      </div>\n    </div>\n  </Dialog>\n</template>\n<style scoped>\n@reference '../../style.css';\n\n.scalar-modal-layout {\n  animation: fadein-layout ease-in-out 0.3s forwards;\n}\n.scalar-modal {\n  animation: fadein-modal ease-in-out 0.3s forwards;\n  animation-delay: 0.1s;\n  box-shadow: var(--scalar-shadow-2);\n  transform: translate3d(0, 10px, 0);\n}\n.scalar-modal-layout-full {\n  opacity: 1 !important;\n  background: transparent !important;\n}\n.modal-content-search .modal-body {\n  padding: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  max-height: 440px;\n}\n/*\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n  .scalar-modal-layout .scalar-modal {\n    margin-top: 5svh;\n    max-height: 90svh;\n  }\n}\n@keyframes fadein-layout {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes fadein-modal {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 10px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n.full-size-styles {\n  transform: translate3d(0, 0, 0);\n  animation: fadein-layout ease-in-out 0.3s forwards;\n  max-height: 100% !important;\n  top: 0 !important;\n  left: 0;\n  position: absolute !important;\n  margin: initial;\n  border-radius: 0 !important;\n  background-color: var(--scalar-background-1) !important;\n  box-shadow: none !important;\n  border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n@variant md {\n  .full-size-styles {\n    width: 50dvw !important;\n  }\n}\n.full-size-styles:after {\n  content: '';\n  width: 50dvw;\n  height: 100dvh;\n  position: absolute;\n  right: -50dvw;\n  top: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8EA,IAAA,cAAe,CAAC;;AAGhB,SAAgB,WAAW;CACzB,OAAO,SAAS;EACd,MAAM;EACN,OAAO;GACL,KAAK,OAAO;EACd;EACA,OAAO;GACL,KAAK,OAAO;EACd;CACF,CAAC;AACH;;;;;;;;;;;;;;EAvEA,MAAM,OAAO;EAIb,MAAM,QAAQ,IAAI;GAChB,MAAM,CACJ,gBACA,kKACF,CAAC,CAAC,KAAK,GAAG;GACV,UAAU;IACR,MAAM;KACJ,KAAK;KACL,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,MAAM;IACR;IACA,SAAS;KACP,MAAM;KACN,QAAQ;KACR,OAAO;IACT;GACF;EACF,CAAC;EACD,MAAM,OAAO,IAAI;GACf,MAAM,CAAC,qBAAqB,6BAA6B,CAAC,CAAC,KAAK,GAAG;GACnE,UAAU;IACR,SAAS;KACP,MAAM;KACN,QAAQ;KACR,OAAO;IACT;IACA,MAAM;KACJ,KAAK;KACL,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,MAAM;IACR;GACF;EACF,CAAC;;GA8BC,OAAAA,UAAA,GAAAC,YA+CSC,MAAA,MAAA,GAAA;IA9CN,MAAM,QAAA,MAAM;IACZ,SAAK,OAAA,OAAA,OAAA,W;KAAyB,QAAA,MAAM,KAAI;KAAW,KAAI,OAAA;;;IAMxD,SAAAC,cAsCM,CAtCNC,mBAsCM,OAAA,EArCH,OAAKC,eAAWH,MAAA,EAAA,CAAE,CAAY,QAAA,SAAI,SAAA,6BAAA,uB,8HAAwO,QAAA,SAAI,UAAA,M,OAS/QI,YAkBcJ,MAAA,WAAA,GAAA;KAjBX,OAAKG,eAAEH,MAAA,KAAA,CAAK,CAAA;MAAA,MAAG,QAAA;MAAI,SAAE,QAAA;KAAO,CAAA,CAAA;KAC5B,OAAKK,eAAA,EAAA,UAAI,QAAA,SAAQ,CAAA;;KAClB,SAAAJ,cAIc,CAHN,QAAA,SADRH,UAAA,GAAAC,YAIcC,MAAA,WAAA,GAAA;;MAFZ,OAAM;;MACN,SAAAC,cAAW,CAARK,gBAAAC,gBAAA,QAAA,KAAK,GAAA,CAAA,C;;K,oCAGF,QAAA,SAAI,UADZT,UAAA,GAAAW,mBAIM,OAAA;;MAFH,OAAKN,eAAE,QAAA,SAAS;K,IACjBO,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,C,UAEVZ,UAAA,GAAAW,mBAIM,OAAA;;MAFH,OAAKN,eAAEH,MAAA,EAAA,CAAE,CAACA,MAAA,IAAA,CAAI,CAAA;OAAA,MAAG,QAAA;OAAI,SAAE,QAAA;MAAO,CAAA,GAAK,QAAA,SAAS,CAAA;K,IAC7CU,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,C;;I,2BAIJ,QAAA,SAAI,UADZZ,UAAA,GAAAW,mBAQM,OARN,YAQM,CALJL,YAI0BJ,MAAAW,wBAAA,GAAA;KAHxB,OAAM;KACL,MAAMX,MAAA,WAAA;KACP,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,MAAM,KAAI"}

package/dist/components/ScalarModal/index.js

@@ -1,3 +1,3 @@
-import { useModal } from "./ScalarModal.vue.script.js";
+import { useModal } from "./ScalarModal.vue_vue_type_script_setup_true_lang.js";
 import ScalarModal_default from "./ScalarModal.vue.js";
 export { ScalarModal_default as ScalarModal, useModal };

package/dist/components/ScalarPopover/ScalarPopover.vue.js

@@ -1,4 +1,4 @@
-import ScalarPopover_vue_vue_type_script_setup_true_lang_default from "./ScalarPopover.vue.script.js";
+import ScalarPopover_vue_vue_type_script_setup_true_lang_default from "./ScalarPopover.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarPopover/ScalarPopover.vue
 var ScalarPopover_default = ScalarPopover_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.vue.js","names":[],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarPopover.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}

package/dist/components/ScalarPopover/ScalarPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,53 @@
+import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+var ScalarPopover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarPopover",
+	props: {
+		focus: { type: Boolean },
+		placement: {},
+		offset: { type: [
+			Number,
+			Object,
+			Function
+		] },
+		resize: { type: Boolean },
+		target: {},
+		middleware: {},
+		teleport: { type: [Boolean, String] }
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Popover), { as: "template" }, {
+				default: withCtx(({ open }) => [createVNode(unref(ScalarFloating_default), normalizeProps(guardReactiveProps(_ctx.$props)), {
+					floating: withCtx(({ width, height }) => [createVNode(unref(PopoverPanel), mergeProps({
+						focus: __props.focus,
+						style: {
+							width,
+							height
+						}
+					}, unref(cx)("relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border")), {
+						default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
+							close: () => close(),
+							open
+						})]),
+						_: 2
+					}, 1040, ["focus", "style"])]),
+					default: withCtx(() => [createVNode(unref(PopoverButton), { as: "template" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open })]),
+						_: 2
+					}, 1024)]),
+					_: 2
+				}, 1040)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarPopover_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarPopover.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarPopover/ScalarPopover.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarPopover.vue_vue_type_script_setup_true_lang.js","names":["$props","_openBlock","_createBlock","_unref","_withCtx","_createVNode","ScalarFloating","_normalizeProps","_guardReactiveProps","_mergeProps","_renderSlot"],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,YAwBUC,MAAA,OAAA,GAAA,EAtBR,IAAG,WAAU,GAAA;IACb,SAAAC,SAoBiB,EAtBP,WAAI,CAEdC,YAoBiBF,MAAAG,sBAAA,GAAAC,eAAAC,mBApBOR,KAAAA,MAAM,CAAA,GAAA;KAIjB,UAAQI,SAcF,EAdM,OAAO,aAAM,CAClCC,YAaeF,MAAA,YAAA,GAbfM,WAae;MAXZ,OAAO,QAAA;MACP,OAAK;OAAI;OAAO;MAAM;K,GACFN,MAAA,EAAA,CAAE,C;MAKvB,SAAAC,SAGiB,EAXP,YAAK,CAQfM,WAGiB,KAAA,QAAA,WAAA;OAFd,aAAa,MAAK;OAEZ;;;;KAhBb,SAAAN,cAEgB,CAFhBC,YAEgBF,MAAA,aAAA,GAAA,EAFD,IAAG,WAAU,GAAA;MAC1B,SAAAC,cAAqB,CAArBM,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,C"}

package/dist/components/ScalarPopover/index.js

@@ -1,2 +1 @@
-import ScalarPopover_default from "./ScalarPopover.vue.js";
-export { ScalarPopover_default as ScalarPopover };
+export { default as ScalarPopover } from "./ScalarPopover.vue.js";

package/dist/components/ScalarSavePrompt/ScalarSavePrompt.vue.js

@@ -1,4 +1,4 @@
-import ScalarSavePrompt_vue_vue_type_script_setup_true_lang_default from "./ScalarSavePrompt.vue.script.js";
+import ScalarSavePrompt_vue_vue_type_script_setup_true_lang_default from "./ScalarSavePrompt.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSavePrompt/ScalarSavePrompt.vue
 var ScalarSavePrompt_default = ScalarSavePrompt_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSavePrompt.vue.js","names":[],"sources":["../../../src/components/ScalarSavePrompt/ScalarSavePrompt.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar save prompt\n *\n * Placeholder shell — wire layout, modal, and actions in the host.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconArrowCounterClockwise,\n  ScalarIconFloppyDisk,\n} from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarButton } from '../ScalarButton'\nimport type { LoadingState } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n}>()\n\nconst emit = defineEmits<{\n  (e: 'save'): void\n  (e: 'discard'): void\n}>()\n\nconst dirty = defineModel<boolean>({ default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Transition\n    enterActiveClass=\"transition-transform ease-spring duration-400\"\n    enterFromClass=\"translate-y-[200%]\"\n    enterToClass=\"translate-y-0\"\n    leaveActiveClass=\"transition-transform ease-in duration-100\"\n    leaveFromClass=\"translate-y-0\"\n    leaveToClass=\"translate-y-[200%]\">\n    <div\n      v-if=\"dirty || loader?.isActive\"\n      aria-live=\"polite\"\n      v-bind=\"\n        cx(\n          'flex items-center gap-2',\n          'w-content max-w-screen-padded-4 z-context',\n          'fixed left-1/2 -translate-x-1/2 bottom-4',\n          'bg-b-2 p-4 shadow-lg rounded-xl',\n        )\n      \">\n      <div class=\"min-w-0 flex-1 text-c-1 text-base font-medium\">\n        <slot>You have unsaved changes</slot>\n      </div>\n      <div class=\"flex -m-2 shrink-0\">\n        <ScalarButton\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"emit('discard')\">\n          <template #icon>\n            <ScalarIconArrowCounterClockwise\n              class=\"size-full\"\n              weight=\"bold\" />\n          </template>\n          <slot name=\"discard\">Undo</slot>\n        </ScalarButton>\n        <ScalarButton\n          :loader\n          size=\"sm\"\n          @click=\"emit('save')\">\n          <template #icon>\n            <ScalarIconFloppyDisk\n              class=\"size-full\"\n              weight=\"bold\" />\n          </template>\n          <slot name=\"save\">Save</slot>\n        </ScalarButton>\n      </div>\n    </div>\n  </Transition>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSavePrompt.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSavePrompt/ScalarSavePrompt.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar save prompt\n *\n * Placeholder shell — wire layout, modal, and actions in the host.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconArrowCounterClockwise,\n  ScalarIconFloppyDisk,\n} from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarButton } from '../ScalarButton'\nimport type { LoadingState } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n}>()\n\nconst emit = defineEmits<{\n  (e: 'save'): void\n  (e: 'discard'): void\n}>()\n\nconst dirty = defineModel<boolean>({ default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Transition\n    enterActiveClass=\"transition-transform ease-spring duration-400\"\n    enterFromClass=\"translate-y-[200%]\"\n    enterToClass=\"translate-y-0\"\n    leaveActiveClass=\"transition-transform ease-in duration-100\"\n    leaveFromClass=\"translate-y-0\"\n    leaveToClass=\"translate-y-[200%]\">\n    <div\n      v-if=\"dirty || loader?.isActive\"\n      aria-live=\"polite\"\n      v-bind=\"\n        cx(\n          'flex items-center gap-2',\n          'w-content max-w-screen-padded-4 z-context',\n          'fixed left-1/2 -translate-x-1/2 bottom-4',\n          'bg-b-2 p-4 shadow-lg rounded-xl',\n        )\n      \">\n      <div class=\"text-c-1 min-w-0 flex-1 text-base font-medium\">\n        <slot>You have unsaved changes</slot>\n      </div>\n      <div class=\"-m-2 flex shrink-0\">\n        <ScalarButton\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"emit('discard')\">\n          <template #icon>\n            <ScalarIconArrowCounterClockwise\n              class=\"size-full\"\n              weight=\"bold\" />\n          </template>\n          <slot name=\"discard\">Undo</slot>\n        </ScalarButton>\n        <ScalarButton\n          :loader\n          size=\"sm\"\n          @click=\"emit('save')\">\n          <template #icon>\n            <ScalarIconFloppyDisk\n              class=\"size-full\"\n              weight=\"bold\" />\n          </template>\n          <slot name=\"save\">Save</slot>\n        </ScalarButton>\n      </div>\n    </div>\n  </Transition>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSavePrompt/ScalarSavePrompt.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,66 @@
+import ScalarButton_default from "../ScalarButton/ScalarButton.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+import { ScalarIconArrowCounterClockwise, ScalarIconFloppyDisk } from "@scalar/icons";
+//#region src/components/ScalarSavePrompt/ScalarSavePrompt.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "text-c-1 min-w-0 flex-1 text-base font-medium" };
+var _hoisted_2 = { class: "-m-2 flex shrink-0" };
+var ScalarSavePrompt_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSavePrompt",
+	props: /*@__PURE__*/ mergeModels({ loader: {} }, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["save", "discard"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const dirty = useModel(__props, "modelValue");
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, {
+				enterActiveClass: "transition-transform ease-spring duration-400",
+				enterFromClass: "translate-y-[200%]",
+				enterToClass: "translate-y-0",
+				leaveActiveClass: "transition-transform ease-in duration-100",
+				leaveFromClass: "translate-y-0",
+				leaveToClass: "translate-y-[200%]"
+			}, {
+				default: withCtx(() => [dirty.value || __props.loader?.isActive ? (openBlock(), createElementBlock("div", mergeProps({
+					key: 0,
+					"aria-live": "polite"
+				}, unref(cx)("flex items-center gap-2", "w-content max-w-screen-padded-4 z-context", "fixed left-1/2 -translate-x-1/2 bottom-4", "bg-b-2 p-4 shadow-lg rounded-xl")), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[2] || (_cache[2] = createTextVNode("You have unsaved changes", -1))])]), createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarButton_default), {
+					size: "sm",
+					variant: "ghost",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("discard"))
+				}, {
+					icon: withCtx(() => [createVNode(unref(ScalarIconArrowCounterClockwise), {
+						class: "size-full",
+						weight: "bold"
+					})]),
+					default: withCtx(() => [renderSlot(_ctx.$slots, "discard", {}, () => [_cache[3] || (_cache[3] = createTextVNode("Undo", -1))])]),
+					_: 3
+				}), createVNode(unref(ScalarButton_default), {
+					loader: __props.loader,
+					size: "sm",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("save"))
+				}, {
+					icon: withCtx(() => [createVNode(unref(ScalarIconFloppyDisk), {
+						class: "size-full",
+						weight: "bold"
+					})]),
+					default: withCtx(() => [renderSlot(_ctx.$slots, "save", {}, () => [_cache[4] || (_cache[4] = createTextVNode("Save", -1))])]),
+					_: 3
+				}, 8, ["loader"])])], 16)) : createCommentVNode("", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarSavePrompt_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSavePrompt.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSavePrompt/ScalarSavePrompt.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSavePrompt.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_mergeProps","_unref","_createElementVNode","_renderSlot","_createTextVNode","_createVNode","ScalarButton","_createCommentVNode"],"sources":["../../../src/components/ScalarSavePrompt/ScalarSavePrompt.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar save prompt\n *\n * Placeholder shell — wire layout, modal, and actions in the host.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconArrowCounterClockwise,\n  ScalarIconFloppyDisk,\n} from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarButton } from '../ScalarButton'\nimport type { LoadingState } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n}>()\n\nconst emit = defineEmits<{\n  (e: 'save'): void\n  (e: 'discard'): void\n}>()\n\nconst dirty = defineModel<boolean>({ default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Transition\n    enterActiveClass=\"transition-transform ease-spring duration-400\"\n    enterFromClass=\"translate-y-[200%]\"\n    enterToClass=\"translate-y-0\"\n    leaveActiveClass=\"transition-transform ease-in duration-100\"\n    leaveFromClass=\"translate-y-0\"\n    leaveToClass=\"translate-y-[200%]\">\n    <div\n      v-if=\"dirty || loader?.isActive\"\n      aria-live=\"polite\"\n      v-bind=\"\n        cx(\n          'flex items-center gap-2',\n          'w-content max-w-screen-padded-4 z-context',\n          'fixed left-1/2 -translate-x-1/2 bottom-4',\n          'bg-b-2 p-4 shadow-lg rounded-xl',\n        )\n      \">\n      <div class=\"text-c-1 min-w-0 flex-1 text-base font-medium\">\n        <slot>You have unsaved changes</slot>\n      </div>\n      <div class=\"-m-2 flex shrink-0\">\n        <ScalarButton\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"emit('discard')\">\n          <template #icon>\n            <ScalarIconArrowCounterClockwise\n              class=\"size-full\"\n              weight=\"bold\" />\n          </template>\n          <slot name=\"discard\">Undo</slot>\n        </ScalarButton>\n        <ScalarButton\n          :loader\n          size=\"sm\"\n          @click=\"emit('save')\">\n          <template #icon>\n            <ScalarIconFloppyDisk\n              class=\"size-full\"\n              weight=\"bold\" />\n          </template>\n          <slot name=\"save\">Save</slot>\n        </ScalarButton>\n      </div>\n    </div>\n  </Transition>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAsBA,MAAM,OAAO;EAKb,MAAM,QAAQA,SAAoB,SAAA,YAAmB;EAGrD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,YA8CaC,YAAA;IA7CX,kBAAiB;IACjB,gBAAe;IACf,cAAa;IACb,kBAAiB;IACjB,gBAAe;IACf,cAAa;;IACb,SAAAC,cAsCM,CArCE,MAAA,SAAS,QAAA,QAAQ,YADzBH,UAAA,GAAAI,mBAsCM,OAtCNC,WAsCM;;KApCJ,aAAU;I,GACOC,MAAA,EAAA,CAAE,C,0JAQnBC,mBAEM,OAFN,YAEM,CADJC,WAAqC,KAAA,QAAA,WAAA,CAAA,SAAA,CAA/B,OAAA,OAAA,OAAA,KAAAC,gBAAA,4BAAwB,EAAA,E,MAEhCF,mBAuBM,OAvBN,YAuBM,CAtBJG,YAUeJ,MAAAK,oBAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;KACD,MAAIR,cAGK,CAFlBO,YAEkBJ,MAAA,+BAAA,GAAA;MADhB,OAAM;MACN,QAAO;;KAEX,SAAAH,cAAgC,CAAhCK,WAAgC,KAAA,QAAA,WAAA,CAAA,SAAA,CAAX,OAAA,OAAA,OAAA,KAAAC,gBAAA,QAAI,EAAA,E;;I,IAE3BC,YAUeJ,MAAAK,oBAAA,GAAA;KATZ,QAAA,QAAA;KACD,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;KACD,MAAIR,cAGK,CAFlBO,YAEkBJ,MAAA,oBAAA,GAAA;MADhB,OAAM;MACN,QAAO;;KAEX,SAAAH,cAA6B,CAA7BK,WAA6B,KAAA,QAAA,QAAA,CAAA,SAAA,CAAX,OAAA,OAAA,OAAA,KAAAC,gBAAA,QAAI,EAAA,E"}

package/dist/components/ScalarSavePrompt/index.js

@@ -1,2 +1 @@
-import ScalarSavePrompt_default from "./ScalarSavePrompt.vue.js";
-export { ScalarSavePrompt_default as ScalarSavePrompt };
+export { default as ScalarSavePrompt } from "./ScalarSavePrompt.vue.js";

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAwFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAEP,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;;aAxBR,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;kFA8Hf,CAAC"}
+{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAwFA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAEP,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;;aAxBR,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;kFA8Hf,CAAC"}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarSearchInput_vue_vue_type_script_setup_true_lang_default from "./ScalarSearchInput.vue.script.js";
+import ScalarSearchInput_vue_vue_type_script_setup_true_lang_default from "./ScalarSearchInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSearchInput/ScalarSearchInput.vue
 var ScalarSearchInput_default = ScalarSearchInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      :placeholder=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSearchInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { ScalarLoading, type LoadingState } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      :placeholder=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import ScalarLoading_default from "../ScalarLoading/ScalarLoading.vue.js";
+import ScalarIconButton_default from "../ScalarIconButton/ScalarIconButton.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, ref, unref, useModel, vModelText, withDirectives, withModifiers } from "vue";
+import { ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
+//#region src/components/ScalarSearchInput/ScalarSearchInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "placeholder"];
+var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSearchInput",
+	props: /*@__PURE__*/ mergeModels({
+		loader: {},
+		label: {},
+		placeholder: {},
+		clearLabel: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const inputRef = ref(null);
+		function handleClear() {
+			model.value = "";
+			if (inputRef.value) inputRef.value.focus();
+		}
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", normalizeProps(guardReactiveProps(unref(stylingAttrsCx)("flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25"))), [
+				createVNode(unref(ScalarIconMagnifyingGlass), { class: "text-sidebar-c-search size-4" }),
+				withDirectives(createElementVNode("input", mergeProps({
+					ref_key: "inputRef",
+					ref: inputRef
+				}, unref(otherAttrs), {
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					"aria-label": __props.label ?? "Enter search query",
+					autocapitalize: "off",
+					autocomplete: "off",
+					autocorrect: "off",
+					class: "flex-1 appearance-none rounded border-none bg-transparent outline-none",
+					placeholder: __props.placeholder ?? "Search...",
+					spellcheck: "false",
+					type: "search"
+				}), null, 16, _hoisted_1), [[vModelText, model.value]]),
+				__props.loader && __props.loader.isActive ? (openBlock(), createBlock(unref(ScalarLoading_default), {
+					key: 0,
+					class: "mr-1",
+					loader: __props.loader,
+					size: "lg"
+				}, null, 8, ["loader"])) : model.value ? (openBlock(), createBlock(unref(ScalarIconButton_default), {
+					key: 1,
+					class: "-my-1",
+					icon: unref(ScalarIconX),
+					label: __props.clearLabel ?? "Clear Search",
+					size: "sm",
+					weight: "bold",
+					onClick: withModifiers(handleClear, ["stop", "prevent"])
+				}, null, 8, ["icon", "label"])) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSearchInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSearchInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSearchInput.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createVNode","_withDirectives","_createElementVNode","_mergeProps","_vModelText","_createBlock","ScalarLoading","ScalarIconButton","_withModifiers","_createCommentVNode"],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { ScalarLoading, type LoadingState } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      :placeholder=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQA,SAAmB,SAAA,YAAC;EAElC,MAAM,WAAW,IAA6B,IAAI;EAElD,SAAS,cAAc;GACrB,MAAM,QAAQ;GAEd,IAAI,SAAS,OACX,SAAS,MAAM,MAAM;EAEzB;EAGA,MAAM,EAAE,gBAAgB,eAAe,UAAU;;GAG/C,OAAAC,UAAA,GAAAC,mBAgCQ,SAAAC,eAAAC,mBA/BSC,MAAA,cAAA,CAAc,C;IAK7BC,YAAkED,MAAA,yBAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;IAC/DE,eAAAC,mBAWkB,SAXlBC,WAWkB;KAVZ,SAAA;KAAJ,KAAI;IACI,GAAAJ,MAAA,UAAA,GAAU;KACT,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACL,aAAa,QAAA,eAAW;KACzB,YAAW;KACX,MAAK;I,4BARI,CAAAK,YAAA,MAAA,KAAK,C;IAUR,QAAA,UAAU,QAAA,OAAO,YADzBT,UAAA,GAAAU,YAIcN,MAAAO,qBAAA,GAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;I,2BAEM,MAAA,SADbX,UAAA,GAAAU,YAOsCN,MAAAQ,wBAAA,GAAA;;KALpC,OAAM;KACL,MAAMR,MAAA,WAAA;KACN,OAAO,QAAA,cAAU;KAClB,MAAK;KACL,QAAO;KACN,SAAKS,cAAe,aAAW,CAAA,QAAA,SAAA,CAAA"}

package/dist/components/ScalarSearchInput/index.js

@@ -1,2 +1 @@
-import ScalarSearchInput_default from "./ScalarSearchInput.vue.js";
-export { ScalarSearchInput_default as ScalarSearchInput };
+export { default as ScalarSearchInput } from "./ScalarSearchInput.vue.js";

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA2EA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAGlE;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;WAET,IAAI,GAAG,mBAAmB;eACtB,OAAO;;WADX,IAAI,GAAG,mBAAmB;eACtB,OAAO;;WAkHT,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,CAAC,KAAK,IAAgB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBACzB,CAAC,KAAK,IAAiB,KAAK,GAAG;EAS7C,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA2EA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,EAA2B,KAAK,IAAI,EAAE,MAAM,eAAe,CAAA;AAGlE;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;WAET,IAAI,GAAG,mBAAmB;eACtB,OAAO;;WADX,IAAI,GAAG,mBAAmB;eACtB,OAAO;;WAkHT,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,CAAC,KAAK,IAAgB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBACzB,CAAC,KAAK,IAAiB,KAAK,GAAG;EAS7C,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/ScalarSearchResults/ScalarSearchResultItem.vue.js

@@ -1,4 +1,4 @@
-import ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default from "./ScalarSearchResultItem.vue.script.js";
+import ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default from "./ScalarSearchResultItem.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSearchResults/ScalarSearchResultItem.vue
 var ScalarSearchResultItem_default = ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultItem.vue.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result Item component\n *\n * A single search result entry with an optional icon, description, and addon slot.\n *\n * @example\n * <ScalarSearchResultItem :icon=\"ScalarIconFile\">\n *   Result Title\n *   <template #description>Result description</template>\n * </ScalarSearchResultItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\ndefineProps<{\n  icon?: Icon | ScalarIconComponent\n  selected?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <a\n    :aria-selected=\"selected\"\n    role=\"option\"\n    tabindex=\"-1\"\n    v-bind=\"\n      cx(\n        'group flex cursor-pointer gap-2 rounded px-2 py-1.5 no-underline hover:bg-b-2 text-base/5',\n        { 'bg-b-2': selected },\n      )\n    \">\n    <!-- Icon -->\n    <div\n      v-if=\"icon\"\n      class=\"flex h-fit items-center text-sm font-medium text-c-3 group-hover:text-c-1\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          class=\"size-4\"\n          :icon=\"icon\" />\n      </slot>\n      <span>&hairsp;</span>\n    </div>\n    <!-- Content -->\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n      <div class=\"flex items-center gap-1\">\n        <div\n          class=\"flex-1 truncate zoomed:whitespace-normal! wrap-break-word font-medium\">\n          <slot />\n        </div>\n        <div\n          v-if=\"$slots.addon\"\n          class=\"text-base text-c-2\">\n          <slot name=\"addon\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.description\"\n        class=\"truncate zoomed:whitespace-normal! wrap-break-word text-c-2\">\n        <slot name=\"description\" />\n      </div>\n    </div>\n  </a>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSearchResultItem.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result Item component\n *\n * A single search result entry with an optional icon, description, and addon slot.\n *\n * @example\n * <ScalarSearchResultItem :icon=\"ScalarIconFile\">\n *   Result Title\n *   <template #description>Result description</template>\n * </ScalarSearchResultItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarIconLegacyAdapter, type Icon } from '../ScalarIcon'\n\ndefineProps<{\n  icon?: Icon | ScalarIconComponent\n  selected?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <a\n    :aria-selected=\"selected\"\n    role=\"option\"\n    tabindex=\"-1\"\n    v-bind=\"\n      cx(\n        'group flex cursor-pointer gap-2 rounded px-2 py-1.5 no-underline hover:bg-b-2 text-base/5',\n        { 'bg-b-2': selected },\n      )\n    \">\n    <!-- Icon -->\n    <div\n      v-if=\"icon\"\n      class=\"text-c-3 group-hover:text-c-1 flex h-fit items-center text-sm font-medium\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          class=\"size-4\"\n          :icon=\"icon\" />\n      </slot>\n      <span>&hairsp;</span>\n    </div>\n    <!-- Content -->\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n      <div class=\"flex items-center gap-1\">\n        <div\n          class=\"zoomed:whitespace-normal! flex-1 truncate font-medium wrap-break-word\">\n          <slot />\n        </div>\n        <div\n          v-if=\"$slots.addon\"\n          class=\"text-c-2 text-base\">\n          <slot name=\"addon\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.description\"\n        class=\"zoomed:whitespace-normal! text-c-2 truncate wrap-break-word\">\n        <slot name=\"description\" />\n      </div>\n    </div>\n  </a>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import ScalarIconLegacyAdapter_default from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+//#region src/components/ScalarSearchResults/ScalarSearchResultItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-selected"];
+var _hoisted_2 = {
+	key: 0,
+	class: "text-c-3 group-hover:text-c-1 flex h-fit items-center text-sm font-medium"
+};
+var _hoisted_3 = { class: "flex min-w-0 flex-1 flex-col gap-0.5" };
+var _hoisted_4 = { class: "flex items-center gap-1" };
+var _hoisted_5 = { class: "zoomed:whitespace-normal! flex-1 truncate font-medium wrap-break-word" };
+var _hoisted_6 = {
+	key: 0,
+	class: "text-c-2 text-base"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "zoomed:whitespace-normal! text-c-2 truncate wrap-break-word"
+};
+var ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSearchResultItem",
+	props: {
+		icon: { type: [Object, Function] },
+		selected: { type: Boolean }
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("a", mergeProps({
+				"aria-selected": __props.selected,
+				role: "option",
+				tabindex: "-1"
+			}, unref(cx)("group flex cursor-pointer gap-2 rounded px-2 py-1.5 no-underline hover:bg-b-2 text-base/5", { "bg-b-2": __props.selected })), [__props.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(unref(ScalarIconLegacyAdapter_default), {
+				key: 0,
+				class: "size-4",
+				icon: __props.icon
+			}, null, 8, ["icon"])) : createCommentVNode("", true)]), _cache[0] || (_cache[0] = createElementVNode("span", null, " ", -1))])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")]), _ctx.$slots.addon ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "addon")])) : createCommentVNode("", true)]), _ctx.$slots.description ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "description")])) : createCommentVNode("", true)])], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ScalarSearchResultItem_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSearchResultItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSearchResultItem.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot","_createBlock","ScalarIconLegacyAdapter","_createCommentVNode","_createElementVNode"],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result Item component\n *\n * A single search result entry with an optional icon, description, and addon slot.\n *\n * @example\n * <ScalarSearchResultItem :icon=\"ScalarIconFile\">\n *   Result Title\n *   <template #description>Result description</template>\n * </ScalarSearchResultItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarIconLegacyAdapter, type Icon } from '../ScalarIcon'\n\ndefineProps<{\n  icon?: Icon | ScalarIconComponent\n  selected?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <a\n    :aria-selected=\"selected\"\n    role=\"option\"\n    tabindex=\"-1\"\n    v-bind=\"\n      cx(\n        'group flex cursor-pointer gap-2 rounded px-2 py-1.5 no-underline hover:bg-b-2 text-base/5',\n        { 'bg-b-2': selected },\n      )\n    \">\n    <!-- Icon -->\n    <div\n      v-if=\"icon\"\n      class=\"text-c-3 group-hover:text-c-1 flex h-fit items-center text-sm font-medium\">\n      <slot name=\"icon\">\n        <ScalarIconLegacyAdapter\n          v-if=\"icon\"\n          class=\"size-4\"\n          :icon=\"icon\" />\n      </slot>\n      <span>&hairsp;</span>\n    </div>\n    <!-- Content -->\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n      <div class=\"flex items-center gap-1\">\n        <div\n          class=\"zoomed:whitespace-normal! flex-1 truncate font-medium wrap-break-word\">\n          <slot />\n        </div>\n        <div\n          v-if=\"$slots.addon\"\n          class=\"text-c-2 text-base\">\n          <slot name=\"addon\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.description\"\n        class=\"zoomed:whitespace-normal! text-c-2 truncate wrap-break-word\">\n        <slot name=\"description\" />\n      </div>\n    </div>\n  </a>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,mBAyCI,KAzCJC,WAyCI;IAxCD,iBAAe,QAAA;IAChB,MAAK;IACL,UAAS;G,GACMC,MAAA,EAAA,CAAE,C,6FAA2H,EAAA,UAAA,QAAA,SAAQ,C,KAQ5I,QAAA,QADRH,UAAA,GAAAC,mBAUM,OAVN,YAUM,CAPJG,WAKO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHG,QAAA,QADRJ,UAAA,GAAAK,YAGiBF,MAAAG,+BAAA,GAAA;;IADf,OAAM;IACL,MAAM,QAAA;G,yDAEX,OAAA,OAAA,OAAA,KAAAE,mBAAqB,QAAA,MAAf,KAAQ,EAAA,E,oCAGhBA,mBAiBM,OAjBN,YAiBM,CAhBJA,mBAUM,OAVN,YAUM,CATJA,mBAGM,OAHN,YAGM,CADJJ,WAAQ,KAAA,QAAA,SAAA,C,IAGFL,KAAAA,OAAO,SADfC,UAAA,GAAAC,mBAIM,OAJN,YAIM,CADJG,WAAqB,KAAA,QAAA,OAAA,C,sCAIjBL,KAAAA,OAAO,eADfC,UAAA,GAAAC,mBAIM,OAJN,YAIM,CADJG,WAA2B,KAAA,QAAA,aAAA,C"}

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.js

@@ -1,4 +1,4 @@
-import ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default from "./ScalarSearchResultList.vue.script.js";
+import ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default from "./ScalarSearchResultList.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSearchResults/ScalarSearchResultList.vue
 var ScalarSearchResultList_default = ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultList.vue.js","names":[],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-base font-medium text-c-2\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSearchResultList.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-c-2 text-base font-medium\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,20 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+var ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSearchResultList",
+	props: { noResults: { type: Boolean } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ role: "listbox" }, unref(cx)("flex flex-col")), [__props.noResults ? renderSlot(_ctx.$slots, "noResults", {}, () => [_cache[0] || (_cache[0] = createElementVNode("div", { class: "flex flex-col items-center gap-2 px-3 py-4" }, [createElementVNode("div", {
+				class: "text-c-2 text-base font-medium",
+				role: "alert"
+			}, " No results found ")], -1))], void 0, 0) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSearchResultList_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSearchResultList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSearchResultList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot","_createElementVNode","_createCommentVNode"],"sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Search Result List component\n *\n * A container for search result items with a \"no results\" fallback.\n *\n * @example\n * <ScalarSearchResultList :noResults=\"results.length === 0\">\n *   <ScalarSearchResultItem v-for=\"r in results\" :key=\"r.id\">\n *     {{ r.label }}\n *   </ScalarSearchResultItem>\n * </ScalarSearchResultList>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  noResults?: boolean\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"listbox\"\n    v-bind=\"cx('flex flex-col')\">\n    <slot\n      v-if=\"noResults\"\n      name=\"noResults\">\n      <div class=\"flex flex-col items-center gap-2 px-3 py-4\">\n        <div\n          class=\"text-c-2 text-base font-medium\"\n          role=\"alert\">\n          No results found\n        </div>\n      </div>\n    </slot>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;EAuBA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAeM,OAfNC,WAeM,EAdJ,MAAK,UAAS,GACNC,MAAA,EAAA,CAAE,CAAA,eAAA,CAAA,GAAA,CAEF,QAAA,YADRC,WAUO,KAAA,QAAA,aAAA,CAAA,SAAA,CAPL,OAAA,OAAA,OAAA,KAAAC,mBAMM,OAAA,EAND,OAAM,6CAA4C,GAAA,CACrDA,mBAIM,OAAA;IAHJ,OAAM;IACN,MAAK;GAAQ,GAAA,oBAEf,C,qDAGJD,WAAQ,KAAA,QAAA,SAAA,C"}