@scalar/components 0.32.1 → 0.33.0

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,65 @@
+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, onMounted, openBlock, ref, unref, useModel, vModelText, withDirectives, withModifiers } from "vue";
+import { ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
+//#region src/components/ScalarSidebar/ScalarSidebarSearchInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSearchInput",
+	props: /*@__PURE__*/ mergeModels({
+		autofocus: { type: Boolean },
+		loader: {},
+		label: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const inputRef = ref(null);
+		const model = useModel(__props, "modelValue");
+		function handleClear() {
+			model.value = "";
+			if (inputRef.value) inputRef.value.focus();
+		}
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		onMounted(() => __props.autofocus && inputRef.value?.focus());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", normalizeProps(guardReactiveProps(unref(stylingAttrsCx)("flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5", "bg-sidebar-b-search border-sidebar-border-search", model.value ? "text-sidebar-c-1" : "text-sidebar-c-search"))), [
+				createVNode(unref(ScalarIconMagnifyingGlass), { class: "text-sidebar-c-search size-4" }),
+				withDirectives(createElementVNode("input", mergeProps({
+					ref_key: "inputRef",
+					ref: inputRef,
+					"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: "Search...",
+					spellcheck: "false",
+					type: "search"
+				}, unref(otherAttrs)), null, 16, _hoisted_1), [[vModelText, model.value]]),
+				__props.loader && __props.loader.isActive ? (openBlock(), createBlock(unref(ScalarLoading_default), {
+					key: 0,
+					class: "mr-3 self-center",
+					loader: __props.loader,
+					size: "md"
+				}, null, 8, ["loader"])) : model.value ? (openBlock(), createBlock(unref(ScalarIconButton_default), {
+					key: 1,
+					class: "size-4 p-px",
+					icon: unref(ScalarIconX),
+					label: "Clear Search",
+					weight: "bold",
+					onClick: withModifiers(handleClear, ["stop", "prevent"])
+				}, null, 8, ["icon"])) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSearchInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSearchInput.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/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { ScalarLoading, type LoadingState } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\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\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\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=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      v-bind=\"otherAttrs\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"size-4 p-px\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,WAAW,IAA6B,IAAI;EAElD,MAAM,QAAQA,SAAmB,SAAA,YAAC;EAElC,SAAS,cAAc;GACrB,MAAM,QAAQ;GAEd,IAAI,SAAS,OACX,SAAS,MAAM,MAAM;EAEzB;EAGA,MAAM,EAAE,gBAAgB,eAAe,UAAU;EAEjD,gBAAgB,QAAA,aAAa,SAAS,OAAO,MAAM,CAAC;;GAGlD,OAAAC,UAAA,GAAAC,mBAiCQ,SAAAC,eAAAC,mBAhCSC,MAAA,cAAA,CAAc,C,yLAAmN,MAAA,QAAK,qBAAA,uB;IAOrPC,YAAkED,MAAA,yBAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;IAC/DE,eAAAC,mBAWwB,SAXxBC,WAWwB;KAVlB,SAAA;KAAJ,KAAI;KACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;IACG,GAAAJ,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,UAAA,GAAA,CATT,CAAAK,YAAA,MAAA,KAAK,C;IAWR,QAAA,UAAU,QAAA,OAAO,YADzBT,UAAA,GAAAU,YAIcN,MAAAO,qBAAA,GAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;I,2BAEM,MAAA,SADbX,UAAA,GAAAU,YAMsCN,MAAAQ,wBAAA,GAAA;;KAJpC,OAAM;KACL,MAAMR,MAAA,WAAA;KACP,OAAM;KACN,QAAO;KACN,SAAKS,cAAe,aAAW,CAAA,QAAA,SAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue.js

@@ -1,5 +1,5 @@
-import ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSection.vue.script.js";
-/* empty css                                   */
+import ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSection.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                         */
 //#region src/components/ScalarSidebar/ScalarSidebarSection.vue
 var ScalarSidebarSection_default = ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSection.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      v-if=\"$slots.default\"\n      class=\"text-sm/4 py-1.75 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply h-0 -mb-px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSection.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      v-if=\"$slots.default\"\n      class=\"py-1.75 text-sm/4 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply -mb-px h-0;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,56 @@
+import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
+import { useSidebarGroups } from "./useSidebarGroups.js";
+import ScalarSidebarLoading_default from "./ScalarSidebarLoading.vue.js";
+import ScalarSidebarSpacer_default from "./ScalarSidebarSpacer.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+//#region src/components/ScalarSidebar/ScalarSidebarSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-px" };
+var ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSection",
+	props: {
+		is: { default: "li" },
+		icon: { type: [Object, Function] },
+		active: { type: Boolean },
+		selected: { type: Boolean },
+		disabled: { type: Boolean },
+		indent: {},
+		loading: { type: Boolean }
+	},
+	setup(__props) {
+		const { level } = useSidebarGroups({ increment: false });
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("group/item group/sidebar-section contents"))), {
+				default: withCtx(() => [
+					createVNode(ScalarSidebarSpacer_default, {
+						class: "group/spacer-before h-3",
+						indent: unref(level)
+					}, null, 8, ["indent"]),
+					_ctx.$slots.default ? (openBlock(), createBlock(ScalarSidebarButton_default, {
+						key: 0,
+						is: "div",
+						class: "py-1.75 text-sm/4 font-bold",
+						disabled: "",
+						icon: __props.icon,
+						indent: unref(level)
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					}, 8, ["icon", "indent"])) : createCommentVNode("", true),
+					createElementVNode("ul", _hoisted_1, [__props.loading ? (openBlock(), createBlock(ScalarSidebarLoading_default, { key: 0 })) : renderSlot(_ctx.$slots, "items", {}, void 0, void 0, 1)]),
+					createVNode(ScalarSidebarSpacer_default, {
+						class: "group/spacer-after h-3",
+						indent: unref(level)
+					}, null, 8, ["indent"])
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSection.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSection.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSection.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_createVNode","ScalarSidebarSpacer","ScalarSidebarButton","_renderSlot","_createCommentVNode","_createElementVNode","ScalarSidebarLoading"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Section component\n *\n * A section of the sidebar that can contain subitems\n *\n * @example\n * <ScalarSidebarSection>\n *   <!-- Section title -->\n *   <template #title>\n *     My Section\n *   </template>\n *   <!-- Section items -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarSection>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport type { ScalarSidebarGroupProps, ScalarSidebarItemProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst { is = 'li' } = defineProps<\n  ScalarSidebarItemProps & Pick<ScalarSidebarGroupProps, 'loading'>\n>()\n\ndefineSlots<{\n  /** The text content of the toggle */\n  default?(): unknown\n  /** The list of sidebar subitems */\n  items?(): unknown\n}>()\n\nconst { level } = useSidebarGroups({ increment: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"cx('group/item group/sidebar-section contents')\">\n    <ScalarSidebarSpacer\n      class=\"group/spacer-before h-3\"\n      :indent=\"level\" />\n    <ScalarSidebarButton\n      is=\"div\"\n      v-if=\"$slots.default\"\n      class=\"py-1.75 text-sm/4 font-bold\"\n      disabled\n      :icon=\"icon\"\n      :indent=\"level\">\n      <slot />\n    </ScalarSidebarButton>\n    <ul class=\"flex flex-col gap-px\">\n      <ScalarSidebarLoading v-if=\"loading\" />\n      <slot\n        v-else\n        name=\"items\" />\n    </ul>\n    <ScalarSidebarSpacer\n      class=\"group/spacer-after h-3\"\n      :indent=\"level\" />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Don't add a spacer before the first section */\n.group\\/sidebar-section:first-of-type > .group\\/spacer-before {\n  @apply h-0;\n}\n\n/* Don't add a spacer after the last section */\n.group\\/sidebar-section:last-of-type > .group\\/spacer-after {\n  @apply h-0;\n}\n\n/* Only one spacer between sections */\n.group\\/sidebar-section:has(+ .group\\/sidebar-section) > .group\\/spacer-after {\n  @apply -mb-px h-0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,EAAE,UAAU,iBAAiB,EAAE,WAAW,MAAM,CAAC;EAGvD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAC,UAAA,GAAAC,YAwBYC,wBAvBL,QAAA,EAAE,GAAAC,eAAAC,mBACCC,MAAA,EAAA,CAAE,CAAA,2CAAA,CAAA,CAAA,GAAA;IACV,SAAAC,cAEoB;KAFpBC,YAEoBC,6BAAA;MADlB,OAAM;MACL,QAAQH,MAAA,KAAA;;KAGHN,KAAAA,OAAO,WAFfC,UAAA,GAAAC,YAQsBQ,6BAAA;;MAPpB,IAAG;MAEH,OAAM;MACN,UAAA;MACC,MAAM,QAAA;MACN,QAAQJ,MAAA,KAAA;;MACT,SAAAC,cAAQ,CAARI,WAAQ,KAAA,QAAA,SAAA,C;;;KAEVE,mBAKK,MALL,YAKK,CAJyB,QAAA,WAA5BZ,UAAA,GAAAC,YAAuCY,8BAAA,EAAA,KAAA,EAAA,CAAA,KACvCH,WAEiB,KAAA,QAAA,SAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C;KAEnBH,YAEoBC,6BAAA;MADlB,OAAM;MACL,QAAQH,MAAA,KAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.js

@@ -1,4 +1,4 @@
-import ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSpacer.vue.script.js";
+import ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSpacer.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSidebar/ScalarSidebarSpacer.vue
 var ScalarSidebarSpacer_default = ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSpacer.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Spacer component\n *\n * Provide a styled spacer for the ScalarSidebar, handles the indent lines for nested groups\n *\n *\n *\n * @example\n *   <ScalarSidebarSpacer />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0 } = defineProps<{ indent?: SidebarGroupLevel }>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex px-2 h-1')\">\n    <ScalarSidebarIndent :indent=\"indent\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSpacer.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Spacer component\n *\n * Provide a styled spacer for the ScalarSidebar, handles the indent lines for nested groups\n *\n *\n *\n * @example\n *   <ScalarSidebarSpacer />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0 } = defineProps<{ indent?: SidebarGroupLevel }>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex shrink-0 px-2 h-1')\">\n    <ScalarSidebarIndent :indent=\"indent\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,18 @@
+import ScalarSidebarIndent_default from "./ScalarSidebarIndent.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, unref } from "vue";
+var ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSpacer",
+	props: { indent: { default: 0 } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex shrink-0 px-2 h-1"))), [createVNode(ScalarSidebarIndent_default, { indent: __props.indent }, null, 8, ["indent"])], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSpacer_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSpacer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSpacer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSpacer.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createVNode","ScalarSidebarIndent"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Spacer component\n *\n * Provide a styled spacer for the ScalarSidebar, handles the indent lines for nested groups\n *\n *\n *\n * @example\n *   <ScalarSidebarSpacer />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarIndent from './ScalarSidebarIndent.vue'\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0 } = defineProps<{ indent?: SidebarGroupLevel }>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex shrink-0 px-2 h-1')\">\n    <ScalarSidebarIndent :indent=\"indent\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAsBA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAEM,OAAAC,eAAAC,mBAFOC,MAAA,EAAA,CAAE,CAAA,wBAAA,CAAA,CAAA,GAAA,CACbC,YAAwCC,6BAAA,EAAlB,QAAQ,QAAA,OAAM,GAAA,MAAA,GAAA,CAAA,QAAA,CAAA,C"}

package/dist/components/ScalarTeleport/ScalarTeleport.vue.js

@@ -1,4 +1,4 @@
-import ScalarTeleport_vue_vue_type_script_setup_true_lang_default from "./ScalarTeleport.vue.script.js";
+import ScalarTeleport_vue_vue_type_script_setup_true_lang_default from "./ScalarTeleport.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarTeleport/ScalarTeleport.vue
 var ScalarTeleport_default = ScalarTeleport_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTeleport.vue.js","names":[],"sources":["../../../src/components/ScalarTeleport/ScalarTeleport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport component\n *\n * Teleports the contents to the nearest <ScalarTeleportRoot>\n * Falls back to the default teleport target (body) if no root is found\n *\n * Is a wrapper around the Vue <Teleport> component and takes the same props\n *\n * @example\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { TeleportProps } from 'vue'\n\nimport { useTeleport } from './useTeleport'\n\ndefineProps<{\n  /**\n   * Override the default teleport target\n   */\n  to?: TeleportProps['to']\n  /**\n   * Whether to teleport immediately, disables the default defer behavior\n   *\n   * @see https://vuejs.org/guide/built-ins/teleport#deferred-teleport\n   */\n  immediate?: boolean\n  /**\n   * Whether to disable teleportation\n   */\n  disabled?: TeleportProps['disabled']\n}>()\n\ndefineSlots<{\n  /** The element to be teleported */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst root = useTeleport()\n</script>\n<template>\n  <Teleport\n    :defer=\"!immediate\"\n    :disabled=\"disabled\"\n    :to=\"to || root\">\n    <div\n      class=\"scalar-app\"\n      style=\"display: contents\"\n      v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTeleport.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTeleport/ScalarTeleport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport component\n *\n * Teleports the contents to the nearest <ScalarTeleportRoot>\n * Falls back to the default teleport target (body) if no root is found\n *\n * Is a wrapper around the Vue <Teleport> component and takes the same props\n *\n * @example\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { TeleportProps } from 'vue'\n\nimport { useTeleport } from './useTeleport'\n\ndefineProps<{\n  /**\n   * Override the default teleport target\n   */\n  to?: TeleportProps['to']\n  /**\n   * Whether to teleport immediately, disables the default defer behavior\n   *\n   * @see https://vuejs.org/guide/built-ins/teleport#deferred-teleport\n   */\n  immediate?: boolean\n  /**\n   * Whether to disable teleportation\n   */\n  disabled?: TeleportProps['disabled']\n}>()\n\ndefineSlots<{\n  /** The element to be teleported */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst root = useTeleport()\n</script>\n<template>\n  <Teleport\n    :defer=\"!immediate\"\n    :disabled=\"disabled\"\n    :to=\"to || root\">\n    <div\n      class=\"scalar-app\"\n      style=\"display: contents\"\n      v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTeleport/ScalarTeleport.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { useTeleport } from "./useTeleport.js";
+import { Teleport, createBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+var ScalarTeleport_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTeleport",
+	props: {
+		to: {},
+		immediate: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	setup(__props) {
+		const root = useTeleport();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, {
+				defer: !__props.immediate,
+				disabled: __props.disabled,
+				to: __props.to || unref(root)
+			}, [createElementVNode("div", mergeProps({
+				class: "scalar-app",
+				style: { "display": "contents" }
+			}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16)], 8, [
+				"defer",
+				"disabled",
+				"to"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarTeleport_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTeleport.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTeleport.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_Teleport","_unref","_createElementVNode","_mergeProps","_renderSlot"],"sources":["../../../src/components/ScalarTeleport/ScalarTeleport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport component\n *\n * Teleports the contents to the nearest <ScalarTeleportRoot>\n * Falls back to the default teleport target (body) if no root is found\n *\n * Is a wrapper around the Vue <Teleport> component and takes the same props\n *\n * @example\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { TeleportProps } from 'vue'\n\nimport { useTeleport } from './useTeleport'\n\ndefineProps<{\n  /**\n   * Override the default teleport target\n   */\n  to?: TeleportProps['to']\n  /**\n   * Whether to teleport immediately, disables the default defer behavior\n   *\n   * @see https://vuejs.org/guide/built-ins/teleport#deferred-teleport\n   */\n  immediate?: boolean\n  /**\n   * Whether to disable teleportation\n   */\n  disabled?: TeleportProps['disabled']\n}>()\n\ndefineSlots<{\n  /** The element to be teleported */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst root = useTeleport()\n</script>\n<template>\n  <Teleport\n    :defer=\"!immediate\"\n    :disabled=\"disabled\"\n    :to=\"to || root\">\n    <div\n      class=\"scalar-app\"\n      style=\"display: contents\"\n      v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;EA6CA,MAAM,OAAO,YAAY;;GAGvB,OAAAC,UAAA,GAAAC,YAUWC,UAAA;IATR,OAAK,CAAG,QAAA;IACR,UAAU,QAAA;IACV,IAAI,QAAA,MAAMC,MAAA,IAAA;G,IACXC,mBAKM,OALNC,WAKM;IAJJ,OAAM;IACN,OAAA,EAAA,WAAA,WAAA;GACQN,GAAAA,KAAAA,MAAM,GAAA,CACdO,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue.js

@@ -1,4 +1,4 @@
-import ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default from "./ScalarTeleportRoot.vue.script.js";
+import ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default from "./ScalarTeleportRoot.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarTeleport/ScalarTeleportRoot.vue
 var ScalarTeleportRoot_default = ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTeleportRoot.vue.js","names":[],"sources":["../../../src/components/ScalarTeleport/ScalarTeleportRoot.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport root component\n *\n * Provides a teleport target for nested <ScalarTeleport> components\n *\n * @example\n * <ScalarTeleportRoot>\n *   ...\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n *   ...\n * </ScalarTeleportRoot>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useProvideTeleport } from './useTeleport'\n\nconst props = defineProps<{\n  /**\n   * Override the default teleport target id\n   */\n  id?: string\n}>()\n\ndefineSlots<{\n  /** The content which contains <ScalarTeleports> */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst id = useProvideTeleport(props.id)\n</script>\n<template>\n  <slot />\n  <div\n    :id=\"id\"\n    class=\"scalar-teleport-root contents\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTeleportRoot.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTeleport/ScalarTeleportRoot.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport root component\n *\n * Provides a teleport target for nested <ScalarTeleport> components\n *\n * @example\n * <ScalarTeleportRoot>\n *   ...\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n *   ...\n * </ScalarTeleportRoot>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useProvideTeleport } from './useTeleport'\n\nconst props = defineProps<{\n  /**\n   * Override the default teleport target id\n   */\n  id?: string\n}>()\n\ndefineSlots<{\n  /** The content which contains <ScalarTeleports> */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst id = useProvideTeleport(props.id)\n</script>\n<template>\n  <slot />\n  <div\n    :id=\"id\"\n    class=\"scalar-teleport-root contents\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { useProvideTeleport } from "./useTeleport.js";
+import { Fragment, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, unref } from "vue";
+//#region src/components/ScalarTeleport/ScalarTeleportRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTeleportRoot",
+	props: { id: {} },
+	setup(__props) {
+		const id = useProvideTeleport(__props.id);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", {
+				id: unref(id),
+				class: "scalar-teleport-root contents"
+			}, null, 8, _hoisted_1)], 64);
+		};
+	}
+});
+//#endregion
+export { ScalarTeleportRoot_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTeleportRoot.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarTeleport/ScalarTeleportRoot.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTeleportRoot.vue_vue_type_script_setup_true_lang.js","names":["props","_openBlock","_createElementBlock","_Fragment","_renderSlot","_createElementVNode","_unref"],"sources":["../../../src/components/ScalarTeleport/ScalarTeleportRoot.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar teleport root component\n *\n * Provides a teleport target for nested <ScalarTeleport> components\n *\n * @example\n * <ScalarTeleportRoot>\n *   ...\n *   <ScalarTeleport>\n *     <div>Teleported Content</div>\n *   </ScalarTeleport>\n *   ...\n * </ScalarTeleportRoot>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useProvideTeleport } from './useTeleport'\n\nconst props = defineProps<{\n  /**\n   * Override the default teleport target id\n   */\n  id?: string\n}>()\n\ndefineSlots<{\n  /** The content which contains <ScalarTeleports> */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst id = useProvideTeleport(props.id)\n</script>\n<template>\n  <slot />\n  <div\n    :id=\"id\"\n    class=\"scalar-teleport-root contents\" />\n</template>\n"],"mappings":";;;;;;;;;EAkCA,MAAM,KAAK,mBAAmBA,QAAM,EAAE;;G,wDAGpCI,WAAQ,KAAA,QAAA,SAAA,GACRC,mBAE0C,OAAA;IADvC,IAAIC,MAAA,EAAA;IACL,OAAM"}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.js

@@ -1,4 +1,4 @@
-import ScalarTextArea_vue_vue_type_script_setup_true_lang_default from "./ScalarTextArea.vue.script.js";
+import ScalarTextArea_vue_vue_type_script_setup_true_lang_default from "./ScalarTextArea.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarTextArea/ScalarTextArea.vue
 var ScalarTextArea_default = ScalarTextArea_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex min-h-0 shrink cursor-text items-start bg-b-1 text-c-1 leading-snug dark:bg-b-1.5',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTextArea.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex min-h-0 shrink cursor-text items-start bg-b-1 text-c-1 leading-snug dark:bg-b-1.5',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTextArea/ScalarTextArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, defineComponent, mergeProps, onMounted, openBlock, unref, useModel, vModelText, withCtx, withDirectives } from "vue";
+import { useTextareaAutosize } from "@vueuse/core";
+var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTextArea",
+	props: {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const { textarea } = useTextareaAutosize({
+			input: model,
+			styleProp: "minHeight"
+		});
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		onMounted(() => {
+			if ("autofocus" in otherAttrs.value) textarea.value?.focus();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex min-h-0 shrink cursor-text items-start bg-b-1 text-c-1 leading-snug dark:bg-b-1.5"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
+				default: withCtx(() => [withDirectives(createElementVNode("textarea", mergeProps({
+					ref_key: "textarea",
+					ref: textarea,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
+				}, unref(otherAttrs), { class: "w-full resize-none rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none" }), null, 16), [[vModelText, model.value]])]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarTextArea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTextArea.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextArea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInput","_mergeProps","_withCtx","_withDirectives","_createElementVNode","_vModelText"],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex min-h-0 shrink cursor-text items-start bg-b-1 text-c-1 leading-snug dark:bg-b-1.5',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQA,SAAmB,SAAA,YAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;EACb,CAAC;EAGD,MAAM,EAAE,gBAAgB,eAAe,UAAU;EAEjD,gBAAgB;GAEd,IAAI,eAAe,WAAW,OAAO,SAAS,OAAO,MAAM;EAC7D,CAAC;;GAGC,OAAAC,UAAA,GAAAC,YAakBC,MAAAC,uBAAA,GAblBC,WAakB,EAZhB,IAAG,MAAK,GACOF,MAAA,cAAA,CAAc,C,2GAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,QAAA,CAAQ,EAAE,MAAK,G;IACvB,SAAAG,cAI4H,CAJ5HC,eAAAC,mBAI4H,YAJ5HH,WAI4H;KAHtH,SAAA;KAAJ,KAAI;KACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;IACN,GAAAF,MAAA,UAAA,GAAU,EAClB,OAAM,kHAAiH,CAAA,GAAA,MAAA,EAAA,GAAA,CAF9G,CAAAM,YAAA,MAAA,KAAK,C"}

package/dist/components/ScalarTextArea/index.js

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

package/dist/components/ScalarTextInput/ScalarTextInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarTextInput_vue_vue_type_script_setup_true_lang_default from "./ScalarTextInput.vue.script.js";
+import ScalarTextInput_vue_vue_type_script_setup_true_lang_default from "./ScalarTextInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarTextInput/ScalarTextInput.vue
 var ScalarTextInput_default = ScalarTextInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.js","names":[],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"stylingAttrsCx('cursor-text bg-b-1 text-c-1 dark:bg-b-1.5')\"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTextInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"stylingAttrsCx('cursor-text bg-b-1 text-c-1 dark:bg-b-1.5')\"\n    @click=\"handleClick\">\n    <div class=\"relative flex flex-1 items-center\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"whitespace-nowrap text-transparent select-none\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute inset-0 flex items-center overflow-hidden whitespace-nowrap select-none\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTextInput/ScalarTextInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,71 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useModel, vModelDynamic, withCtx, withDirectives } from "vue";
+//#region src/components/ScalarTextInput/ScalarTextInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "relative flex flex-1 items-center" };
+var _hoisted_2 = {
+	key: 0,
+	class: "whitespace-nowrap text-transparent select-none"
+};
+var _hoisted_3 = ["aria-readonly", "readonly"];
+var _hoisted_4 = {
+	key: 1,
+	class: "absolute inset-0 flex items-center overflow-hidden whitespace-nowrap select-none"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "text-c-2"
+};
+var _hoisted_6 = { class: "text-transparent" };
+var _hoisted_7 = {
+	key: 1,
+	class: "text-c-2"
+};
+var ScalarTextInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTextInput",
+	props: /*@__PURE__*/ mergeModels({ readonly: { type: Boolean } }, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["click"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const input = ref();
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		onMounted(() => {
+			if ("autofocus" in otherAttrs.value) input.value?.focus();
+		});
+		function handleClick(event) {
+			emit("click", event);
+			if (__props.readonly) input.value?.select();
+			else input.value?.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("cursor-text bg-b-1 text-c-1 dark:bg-b-1.5"), { onClick: handleClick }), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true),
+					withDirectives(createElementVNode("input", mergeProps({
+						ref_key: "input",
+						ref: input,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						"aria-readonly": __props.readonly || void 0,
+						class: "z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none",
+						readonly: __props.readonly
+					}, unref(otherAttrs)), null, 16, _hoisted_3), [[vModelDynamic, model.value]]),
+					_ctx.$slots.prefix || _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_4, [
+						_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_6, toDisplayString(model.value || _ctx.$attrs.placeholder), 1),
+						_ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)
+					])) : createCommentVNode("", true)
+				]), renderSlot(_ctx.$slots, "aside")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarTextInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTextInput.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInput.vue_vue_type_script_setup_true_lang.js","names":["$slots","$attrs","_useModel","_openBlock","_createBlock","_unref","ScalarFormInput","_mergeProps","_withCtx","_createElementVNode","_createElementBlock","_renderSlot","_createCommentVNode","_withDirectives","_vModelDynamic","_toDisplayString"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"stylingAttrsCx('cursor-text bg-b-1 text-c-1 dark:bg-b-1.5')\"\n    @click=\"handleClick\">\n    <div class=\"relative flex flex-1 items-center\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"whitespace-nowrap text-transparent select-none\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute inset-0 flex items-center overflow-hidden whitespace-nowrap select-none\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,OAAO;EAcb,MAAM,QAAQE,SAAmB,SAAA,YAAC;EAElC,MAAM,QAAQ,IAAsB;EAGpC,MAAM,EAAE,gBAAgB,eAAe,UAAU;EAEjD,gBAAgB;GAEd,IAAI,eAAe,WAAW,OAAO,MAAM,OAAO,MAAM;EAC1D,CAAC;EAED,SAAS,YAAY,OAAmB;GAEtC,KAAK,SAAS,KAAK;GAEnB,IAAI,QAAA,UACF,MAAM,OAAO,OAAO;QAEpB,MAAM,OAAO,MAAM;EAEvB;;GAGE,OAAAC,UAAA,GAAAC,YAkCkBC,MAAAC,uBAAA,GAlClBC,WAkCkB,EAjChB,IAAG,MAAK,GACAF,MAAA,cAAA,CAAc,CAAA,2CAAA,GAAA,EACrB,SAAO,YAAW,CAAA,GAAA;IACnB,SAAAG,cA4BM,CA5BNC,mBA4BM,OA5BN,YA4BM;KA1BIT,KAAAA,OAAO,UADfG,UAAA,GAAAO,mBAIM,OAJN,YAIM,CADJC,WAAsB,KAAA,QAAA,QAAA,C;KAExBE,eAAAJ,mBAMwB,SANxBF,WAMwB;MALlB,SAAA;MAAJ,KAAI;MACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;MACb,iBAAe,QAAA,YAAY,KAAA;MAC5B,OAAM;MACL,UAAA,QAAA;KACO,GAAAF,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,UAAA,GAAA,CAJT,CAAAS,eAAA,MAAA,KAAK,C;KAMRd,KAAAA,OAAO,UAAUA,KAAAA,OAAO,UADhCG,UAAA,GAAAO,mBAcM,OAdN,YAcM;MAVIV,KAAAA,OAAO,UADfG,UAAA,GAAAO,mBAIO,QAJP,YAIO,CADLC,WAAsB,KAAA,QAAA,QAAA,C;MAExBF,mBAAuE,QAAvE,YAAuEM,gBAArC,MAAA,SAASd,KAAAA,OAAO,WAAW,GAAA,CAAA;MAErDD,KAAAA,OAAO,UADfG,UAAA,GAAAO,mBAIO,QAJP,YAIO,CADLC,WAAsB,KAAA,QAAA,QAAA,C;;I,IAI5BA,WAAqB,KAAA,QAAA,OAAA,C"}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.js

@@ -1,4 +1,4 @@
-import ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default from "./ScalarTextInputCopy.vue.script.js";
+import ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default from "./ScalarTextInputCopy.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarTextInput/ScalarTextInputCopy.vue
 var ScalarTextInputCopy_default = ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInputCopy.vue.js","names":[],"sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input Copy component\n *\n * A wrapper around the ScalarTextInput component that provides a\n * copy button and allows copying of the input content to the clipboard.\n *\n * @example\n *   <ScalarTextInputCopy v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport { ScalarCopyBackdrop, ScalarCopyButton } from '../ScalarCopy'\nimport ScalarTextInput from './ScalarTextInput.vue'\n\nconst { duration = 1500, immediate } = defineProps<{\n  /** The placement of the copy button */\n  duration?: number\n  /** Whether the input is writable */\n  editable?: boolean\n  /** Whether to copy the model value immediately on mount */\n  immediate?: boolean\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n  /* Override the label for the copy button */\n  copy?: () => unknown\n  /* Override the label for the copy button when the content has been copied */\n  copied?: () => unknown\n}>()\n\nonMounted(() => {\n  // Copy the model value immediately on mount if immediate is true\n  if (immediate && model.value) copy(model.value)\n})\n\nconst model = defineModel<string>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarTextInput\n    v-model=\"model\"\n    :readonly=\"!editable\"\n    @click=\"model && copy(model)\">\n    <template #aside>\n      <ScalarCopyButton\n        class=\"z-1 bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2\"\n        :copied=\"copied || clipboardCopied\"\n        placement=\"left\"\n        @click.stop=\"model && copy(model)\">\n        <template\n          v-if=\"$slots.copy\"\n          #copy>\n          <slot name=\"copy\" />\n        </template>\n        <template\n          v-if=\"$slots.copied\"\n          #copied>\n          <slot name=\"copied\" />\n        </template>\n        <template #backdrop>\n          <ScalarCopyBackdrop\n            class=\"bg-b-1 group-hover/copy-button:bg-b-1.5 dark:bg-b-1.5 dark:group-hover/copy-button:bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTextInputCopy.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input Copy component\n *\n * A wrapper around the ScalarTextInput component that provides a\n * copy button and allows copying of the input content to the clipboard.\n *\n * @example\n *   <ScalarTextInputCopy v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport { ScalarCopyBackdrop, ScalarCopyButton } from '../ScalarCopy'\nimport ScalarTextInput from './ScalarTextInput.vue'\n\nconst { duration = 1500, immediate } = defineProps<{\n  /** The placement of the copy button */\n  duration?: number\n  /** Whether the input is writable */\n  editable?: boolean\n  /** Whether to copy the model value immediately on mount */\n  immediate?: boolean\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n  /* Override the label for the copy button */\n  copy?: () => unknown\n  /* Override the label for the copy button when the content has been copied */\n  copied?: () => unknown\n}>()\n\nonMounted(() => {\n  // Copy the model value immediately on mount if immediate is true\n  if (immediate && model.value) copy(model.value)\n})\n\nconst model = defineModel<string>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarTextInput\n    v-model=\"model\"\n    :readonly=\"!editable\"\n    @click=\"model && copy(model)\">\n    <template #aside>\n      <ScalarCopyButton\n        class=\"bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2 z-1\"\n        :copied=\"copied || clipboardCopied\"\n        placement=\"left\"\n        @click.stop=\"model && copy(model)\">\n        <template\n          v-if=\"$slots.copy\"\n          #copy>\n          <slot name=\"copy\" />\n        </template>\n        <template\n          v-if=\"$slots.copied\"\n          #copied>\n          <slot name=\"copied\" />\n        </template>\n        <template #backdrop>\n          <ScalarCopyBackdrop\n            class=\"bg-b-1 group-hover/copy-button:bg-b-1.5 dark:bg-b-1.5 dark:group-hover/copy-button:bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,66 @@
+import ScalarCopyBackdrop_default from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
+import ScalarCopyButton_default from "../ScalarCopy/ScalarCopyButton.vue.js";
+import ScalarTextInput_default from "./ScalarTextInput.vue.js";
+import { createBlock, createSlots, createVNode, defineComponent, mergeModels, onMounted, openBlock, renderSlot, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { useClipboard } from "@vueuse/core";
+var ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarTextInputCopy",
+	props: /*@__PURE__*/ mergeModels({
+		duration: { default: 1500 },
+		editable: { type: Boolean },
+		immediate: { type: Boolean }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"copied": {
+			type: Boolean,
+			default: false
+		},
+		"copiedModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:copied"],
+	setup(__props) {
+		onMounted(() => {
+			if (__props.immediate && model.value) copy(model.value);
+		});
+		const model = useModel(__props, "modelValue");
+		const copied = useModel(__props, "copied");
+		const { copy, copied: clipboardCopied } = useClipboard({
+			legacy: true,
+			copiedDuring: __props.duration
+		});
+		/** Watch the clipboard copied state and emit it to the consuming component */
+		watch(clipboardCopied, (v) => copied.value = v);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarTextInput_default, {
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+				readonly: !__props.editable,
+				onClick: _cache[2] || (_cache[2] = ($event) => model.value && unref(copy)(model.value))
+			}, {
+				aside: withCtx(() => [createVNode(unref(ScalarCopyButton_default), {
+					class: "bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2 z-1",
+					copied: copied.value || unref(clipboardCopied),
+					placement: "left",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => model.value && unref(copy)(model.value), ["stop"]))
+				}, createSlots({
+					backdrop: withCtx(() => [createVNode(unref(ScalarCopyBackdrop_default), { class: "bg-b-1 group-hover/copy-button:bg-b-1.5 dark:bg-b-1.5 dark:group-hover/copy-button:bg-b-1.5" })]),
+					_: 2
+				}, [_ctx.$slots.copy ? {
+					name: "copy",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "copy")]),
+					key: "0"
+				} : void 0, _ctx.$slots.copied ? {
+					name: "copied",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "copied")]),
+					key: "1"
+				} : void 0]), 1032, ["copied"])]),
+				_: 3
+			}, 8, ["modelValue", "readonly"]);
+		};
+	}
+});
+//#endregion
+export { ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTextInputCopy.vue_vue_type_script_setup_true_lang.js.map