@scalar/api-client 2.38.3 → 2.39.0

package/dist/v2/components/data-table/DataTableInputSelect.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableInputSelect.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { CodeInputModelValue } from '@/v2/components/code-input/CodeInput.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: CodeInputModelValue\n    value?: string[]\n    default?: CodeInputModelValue | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => {\n    const id = option.toString()\n    return { id: id, label: id, value: id }\n  }),\n)\n\n/** Filter the options by what is selected */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(','))\n  return arrayOptions.value.filter((option) => selectedValues.has(option.id))\n})\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(','))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            class=\"min-w-4\"\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue ?? 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/components/data-table/DataTableInputSelect.vue.script.js

@@ -0,0 +1,161 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, vModelText, watch, withCtx, withDirectives, withKeys } from "vue";
+import { ScalarButton, ScalarComboboxMultiselect, ScalarDropdown, ScalarDropdownDivider, ScalarDropdownItem, ScalarIcon } from "@scalar/components";
+//#region src/v2/components/data-table/DataTableInputSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline" };
+var _hoisted_2 = { class: "text-c-1 whitespace-nowrap" };
+var _hoisted_3 = { class: "text-c-1 overflow-hidden text-ellipsis" };
+var _hoisted_4 = { class: "overflow-hidden text-ellipsis" };
+var _hoisted_5 = { class: "flex h-4 w-4 items-center justify-center" };
+var DataTableInputSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DataTableInputSelect",
+	props: {
+		modelValue: { type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		] },
+		value: {},
+		default: { type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		] },
+		canAddCustomValue: {
+			type: Boolean,
+			default: true
+		},
+		type: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const options = computed(() => props.value ?? []);
+		const addingCustomValue = ref(false);
+		const customValue = ref("");
+		const inputRef = ref(null);
+		watch(customValue, (newValue) => {
+			emit("update:modelValue", newValue);
+		});
+		const updateSelected = (value) => {
+			emit("update:modelValue", value);
+			addingCustomValue.value = false;
+		};
+		const addCustomValue = () => {
+			if (customValue.value.trim()) updateSelected(customValue.value);
+		};
+		const handleBlur = () => {
+			if (!customValue.value.trim()) emit("update:modelValue", "");
+			addingCustomValue.value = false;
+		};
+		const isSelected = (value) => {
+			return props.modelValue.toString() === value;
+		};
+		watch(addingCustomValue, (newValue) => {
+			if (newValue) nextTick(() => {
+				inputRef.value?.focus();
+			});
+		});
+		const initialValue = computed(() => {
+			return props.modelValue !== void 0 ? props.modelValue : props.default;
+		});
+		/** Options for the array type */
+		const arrayOptions = computed(() => options.value.map((option) => {
+			const id = option.toString();
+			return {
+				id,
+				label: id,
+				value: id
+			};
+		}));
+		/** Filter the options by what is selected */
+		const selectedArrayOptions = computed(() => {
+			const selectedValues = new Set(props.modelValue.toString().split(","));
+			return arrayOptions.value.filter((option) => selectedValues.has(option.id));
+		});
+		/** Update the model value when the selected options change */
+		const updateSelectedOptions = (selectedOptions) => {
+			emit("update:modelValue", selectedOptions.map((option) => option.value).join(","));
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [__props.type === "array" ? (openBlock(), createBlock(unref(ScalarComboboxMultiselect), {
+				key: 0,
+				modelValue: selectedArrayOptions.value,
+				options: arrayOptions.value,
+				"onUpdate:modelValue": updateSelectedOptions
+			}, {
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					class: "custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none",
+					fullWidth: "",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_2, toDisplayString(selectedArrayOptions.value.length > 0 ? selectedArrayOptions.value.map((option) => option.label).join(", ") : "Select a value"), 1), createVNode(unref(ScalarIcon), {
+						class: "min-w-4",
+						icon: "ChevronDown",
+						size: "md"
+					})]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["modelValue", "options"])) : addingCustomValue.value ? withDirectives((openBlock(), createElementBlock("input", {
+				key: 1,
+				ref_key: "inputRef",
+				ref: inputRef,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customValue.value = $event),
+				class: "text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none",
+				placeholder: "Value",
+				type: "text",
+				onBlur: handleBlur,
+				onKeyup: withKeys(addCustomValue, ["enter"])
+			}, null, 544)), [[vModelText, customValue.value]]) : (openBlock(), createBlock(unref(ScalarDropdown), {
+				key: 2,
+				resize: "",
+				value: initialValue.value
+			}, {
+				items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option) => {
+					return openBlock(), createBlock(unref(ScalarDropdownItem), {
+						key: option,
+						class: "group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
+						value: option,
+						onClick: ($event) => updateSelected(option)
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-4 w-4 items-center justify-center rounded-full p-[3px]", isSelected(option) ? "bg-c-accent text-b-1" : "shadow-border text-transparent"]) }, [createVNode(unref(ScalarIcon), {
+							class: "size-2.5",
+							icon: "Checkmark",
+							thickness: "3"
+						})], 2), createElementVNode("span", _hoisted_4, toDisplayString(option), 1)]),
+						_: 2
+					}, 1032, ["value", "onClick"]);
+				}), 128)), __props.canAddCustomValue ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [options.value.length ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 0 })) : createCommentVNode("", true), createVNode(unref(ScalarDropdownItem), {
+					class: "flex items-center gap-1.5",
+					onClick: _cache[1] || (_cache[1] = ($event) => addingCustomValue.value = true)
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarIcon), {
+						icon: "Add",
+						size: "sm"
+					})]), _cache[2] || (_cache[2] = createElementVNode("span", null, "Add value", -1))]),
+					_: 1
+				})], 64)) : createCommentVNode("", true)]),
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					class: "size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_3, toDisplayString(initialValue.value ?? "Select a value"), 1), createVNode(unref(ScalarIcon), {
+						icon: "ChevronDown",
+						size: "md"
+					})]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["value"]))]);
+		};
+	}
+});
+//#endregion
+export { DataTableInputSelect_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTableInputSelect.vue.script.js.map

package/dist/v2/components/data-table/DataTableInputSelect.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableInputSelect.vue.script.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { CodeInputModelValue } from '@/v2/components/code-input/CodeInput.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: CodeInputModelValue\n    value?: string[]\n    default?: CodeInputModelValue | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => {\n    const id = option.toString()\n    return { id: id, label: id, value: id }\n  }),\n)\n\n/** Filter the options by what is selected */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(','))\n  return arrayOptions.value.filter((option) => selectedValues.has(option.id))\n})\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(','))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            class=\"min-w-4\"\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue ?? 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/v2/components/data-table/DataTableRow.vue.js

@@ -0,0 +1,13 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock, openBlock, renderSlot } from "vue";
+//#region src/v2/components/data-table/DataTableRow.vue
+var _sfc_main = {};
+var _hoisted_1 = { class: "group contents" };
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("tr", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+}
+var DataTableRow_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { DataTableRow_default as default };
+
+//# sourceMappingURL=DataTableRow.vue.js.map

package/dist/v2/components/data-table/DataTableRow.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRow.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableRow.vue"],"sourcesContent":["<template>\n  <tr class=\"group contents\">\n    <slot />\n  </tr>\n</template>\n"],"mappings":";;;;mBACM,OAAM,kBAAgB;;qBAA1B,mBAEK,MAFL,YAEK,CADH,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/v2/components/data-table/DataTableText.vue.js

@@ -0,0 +1,7 @@
+import DataTableText_vue_vue_type_script_setup_true_lang_default from "./DataTableText.vue.script.js";
+//#region src/v2/components/data-table/DataTableText.vue
+var DataTableText_default = DataTableText_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataTableText_default as default };
+
+//# sourceMappingURL=DataTableText.vue.js.map

package/dist/v2/components/data-table/DataTableText.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableText.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DataTableCell from './DataTableCell.vue'\n\ndefineProps<{\n  text?: string | number\n}>()\n</script>\n<template>\n  <DataTableCell class=\"relative flex\">\n    <span class=\"flex-1 px-2 py-1.5 whitespace-nowrap\">\n      <slot>{{ text }}</slot>\n    </span>\n  </DataTableCell>\n</template>\n"],"mappings":""}

package/dist/v2/components/data-table/DataTableText.vue.script.js

@@ -0,0 +1,20 @@
+import DataTableCell_default from "./DataTableCell.vue.js";
+import { createBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderSlot, toDisplayString, withCtx } from "vue";
+//#region src/v2/components/data-table/DataTableText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex-1 px-2 py-1.5 whitespace-nowrap" };
+var DataTableText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DataTableText",
+	props: { text: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(DataTableCell_default, { class: "relative flex" }, {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { DataTableText_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTableText.vue.script.js.map

package/dist/v2/components/data-table/DataTableText.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableText.vue.script.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport DataTableCell from './DataTableCell.vue'\n\ndefineProps<{\n  text?: string | number\n}>()\n</script>\n<template>\n  <DataTableCell class=\"relative flex\">\n    <span class=\"flex-1 px-2 py-1.5 whitespace-nowrap\">\n      <slot>{{ text }}</slot>\n    </span>\n  </DataTableCell>\n</template>\n"],"mappings":";;;;;;;;;uBAQE,YAIgB,uBAAA,EAJD,OAAM,iBAAe,EAAA;2BAG3B,CAFP,mBAEO,QAFP,YAEO,CADL,WAAuB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBAAd,QAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/v2/components/data-table/index.d.ts

@@ -1,9 +1,9 @@
-export { default as DataTable } from './DataTable.vue';
-export { default as DataTableCell } from './DataTableCell.vue';
-export { default as DataTableCheckbox } from './DataTableCheckbox.vue';
-export { default as DataTableHeader } from './DataTableHeader.vue';
-export { default as DataTableInput } from './DataTableInput.vue';
-export { default as DataTableInputSelect } from './DataTableInputSelect.vue';
-export { default as DataTableRow } from './DataTableRow.vue';
-export { default as DataTableText } from './DataTableText.vue';
+export { default as DataTable } from './DataTable.vue.js';
+export { default as DataTableCell } from './DataTableCell.vue.js';
+export { default as DataTableCheckbox } from './DataTableCheckbox.vue.js';
+export { default as DataTableHeader } from './DataTableHeader.vue.js';
+export { default as DataTableInput } from './DataTableInput.vue.js';
+export { default as DataTableInputSelect } from './DataTableInputSelect.vue.js';
+export { default as DataTableRow } from './DataTableRow.vue.js';
+export { default as DataTableText } from './DataTableText.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/data-table/index.js

@@ -1,3 +1,9 @@
-import { n as DataTableInputSelect_default } from "../../../code-input-iq-moLxi.js";
-import { a as DataTableCheckbox_default, i as DataTableHeader_default, n as DataTableRow_default, o as DataTableCell_default, r as DataTableInput_default, s as DataTable_default, t as DataTableText_default } from "../../../data-table-PL7e8NRO.js";
+import DataTableInputSelect_default from "./DataTableInputSelect.vue.js";
+import DataTable_default from "./DataTable.vue.js";
+import DataTableCell_default from "./DataTableCell.vue.js";
+import DataTableCheckbox_default from "./DataTableCheckbox.vue.js";
+import DataTableHeader_default from "./DataTableHeader.vue.js";
+import DataTableInput_default from "./DataTableInput.vue.js";
+import DataTableRow_default from "./DataTableRow.vue.js";
+import DataTableText_default from "./DataTableText.vue.js";
 export { DataTable_default as DataTable, DataTableCell_default as DataTableCell, DataTableCheckbox_default as DataTableCheckbox, DataTableHeader_default as DataTableHeader, DataTableInput_default as DataTableInput, DataTableInputSelect_default as DataTableInputSelect, DataTableRow_default as DataTableRow, DataTableText_default as DataTableText };

package/dist/v2/components/forms/ConfirmationForm.vue.js

@@ -0,0 +1,7 @@
+import ConfirmationForm_vue_vue_type_script_setup_true_lang_default from "./ConfirmationForm.vue.script.js";
+//#region src/v2/components/forms/ConfirmationForm.vue
+var ConfirmationForm_default = ConfirmationForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ConfirmationForm_default as default };
+
+//# sourceMappingURL=ConfirmationForm.vue.js.map

package/dist/v2/components/forms/ConfirmationForm.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationForm.vue.js","names":[],"sources":["../../../../src/v2/components/forms/ConfirmationForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\n\nconst { label = 'Save', variant = 'solid' } = defineProps<{\n  /** The label of the submit button */\n  label?: string\n  /** Sets the style of the submit button */\n  variant?: 'danger' | 'solid'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n\n    <div class=\"flex justify-between gap-10\">\n      <!-- Cancel -->\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n\n      <!-- Submit -->\n      <ScalarButton\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"variant\">\n        {{ label }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/v2/components/forms/ConfirmationForm.vue.script.js

@@ -0,0 +1,40 @@
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { ScalarButton } from "@scalar/components";
+//#region src/v2/components/forms/ConfirmationForm.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex justify-between gap-10" };
+var ConfirmationForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ConfirmationForm",
+	props: {
+		label: { default: "Save" },
+		variant: { default: "solid" }
+	},
+	emits: ["cancel", "submit"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: "flex flex-col gap-4 text-base",
+				onSubmit: _cache[1] || (_cache[1] = withModifiers(($event) => emit("submit"), ["prevent"]))
+			}, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarButton), {
+				size: "sm",
+				type: "button",
+				variant: "outlined",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("cancel"))
+			}, {
+				default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+				_: 1
+			}), createVNode(unref(ScalarButton), {
+				size: "sm",
+				type: "submit",
+				variant: __props.variant
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+				_: 1
+			}, 8, ["variant"])])], 32);
+		};
+	}
+});
+//#endregion
+export { ConfirmationForm_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ConfirmationForm.vue.script.js.map

package/dist/v2/components/forms/ConfirmationForm.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationForm.vue.script.js","names":[],"sources":["../../../../src/v2/components/forms/ConfirmationForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\n\nconst { label = 'Save', variant = 'solid' } = defineProps<{\n  /** The label of the submit button */\n  label?: string\n  /** Sets the style of the submit button */\n  variant?: 'danger' | 'solid'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n\n    <div class=\"flex justify-between gap-10\">\n      <!-- Cancel -->\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n\n      <!-- Submit -->\n      <ScalarButton\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"variant\">\n        {{ label }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;EAUA,MAAM,OAAO;;uBAMX,mBAuBO,QAAA;IAtBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,SAAA,EAAA,CAAA,UAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,UAAA,EAER,mBAiBM,OAjBN,YAiBM,CAfJ,YAMe,MAAA,aAAA,EAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;2BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF0B,YAE1B,GAAA,CAAA,EAAA,CAAA;;OAGA,YAKe,MAAA,aAAA,EAAA;IAJb,MAAK;IACL,MAAK;IACJ,SAAS,QAAA;;2BACC,CAAA,gBAAA,gBAAR,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA"}

package/dist/v2/components/forms/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ConfirmationForm } from './ConfirmationForm.vue';
+export { default as ConfirmationForm } from './ConfirmationForm.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/forms/index.js

@@ -1,2 +1,2 @@
-import { t as ConfirmationForm_default } from "../../../forms-CZX6cFDS.js";
+import ConfirmationForm_default from "./ConfirmationForm.vue.js";
 export { ConfirmationForm_default as ConfirmationForm };

package/dist/v2/components/layout/CollapsibleSection.vue.js

@@ -0,0 +1,7 @@
+import CollapsibleSection_vue_vue_type_script_setup_true_lang_default from "./CollapsibleSection.vue.script.js";
+//#region src/v2/components/layout/CollapsibleSection.vue
+var CollapsibleSection_default = CollapsibleSection_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CollapsibleSection_default as default };
+
+//# sourceMappingURL=CollapsibleSection.vue.js.map

package/dist/v2/components/layout/CollapsibleSection.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSection.vue.js","names":[],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0 border-b\"\n    :class=\"isStatic && 'last-of-type:first-of-type:border-b-0'\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border border-b-0'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":""}

package/dist/v2/components/layout/CollapsibleSection.vue.script.js

@@ -0,0 +1,79 @@
+import ValueEmitter_default from "./ValueEmitter.vue.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+import { ScalarIcon } from "@scalar/components";
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
+//#region src/v2/components/layout/CollapsibleSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-labelledby"];
+var _hoisted_2 = { class: "text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]" };
+var _hoisted_3 = ["id"];
+var _hoisted_4 = {
+	key: 0,
+	class: "sr-only"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold"
+};
+var _hoisted_6 = { class: "sr-only" };
+var _hoisted_7 = {
+	key: 0,
+	class: "ui-not-open:hidden flex items-center gap-2 pr-0.75"
+};
+var CollapsibleSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CollapsibleSection",
+	props: {
+		defaultOpen: {
+			type: Boolean,
+			default: true
+		},
+		itemCount: { default: 0 },
+		isStatic: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const headingId = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Disclosure), {
+				as: "div",
+				class: normalizeClass(["group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0 border-b", __props.isStatic && "last-of-type:first-of-type:border-b-0"]),
+				defaultOpen: __props.defaultOpen,
+				static: __props.isStatic
+			}, {
+				default: withCtx(({ open }) => [createVNode(ValueEmitter_default, {
+					value: open,
+					onChange: _cache[0] || (_cache[0] = (value) => emit("update:modelValue", value))
+				}, null, 8, ["value"]), createElementVNode("section", {
+					"aria-labelledby": unref(headingId),
+					class: "contents"
+				}, [createElementVNode("div", { class: normalizeClass(["bg-b-2 flex items-center", __props.isStatic && "rounded-t-xl border border-b-0"]) }, [createVNode(unref(DisclosureButton), {
+					class: normalizeClass(["hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2", __props.isStatic && "!pl-3"]),
+					disabled: __props.isStatic
+				}, {
+					default: withCtx(() => [!__props.isStatic ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						class: "text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline",
+						icon: "ChevronRight",
+						size: "md"
+					})) : createCommentVNode("", true), createElementVNode("h2", _hoisted_2, [createElementVNode("span", {
+						id: unref(headingId),
+						class: "contents"
+					}, [renderSlot(_ctx.$slots, "title", { open }), !open ? (openBlock(), createElementBlock("span", _hoisted_4, " (Collapsed) ")) : createCommentVNode("", true)], 8, _hoisted_3), !open && __props.itemCount ? (openBlock(), createElementBlock("span", _hoisted_5, [createTextVNode(toDisplayString(__props.itemCount) + " ", 1), createElementVNode("span", _hoisted_6, "Item" + toDisplayString(__props.itemCount === 1 ? "" : "s"), 1)])) : createCommentVNode("", true)])]),
+					_: 2
+				}, 1032, ["class", "disabled"]), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "actions", { open })])) : createCommentVNode("", true)], 2), createVNode(unref(DisclosurePanel), mergeProps(_ctx.$attrs, { class: "diclosure-panel h-full max-h-fit rounded-b" }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open })]),
+					_: 2
+				}, 1040)], 8, _hoisted_1)]),
+				_: 3
+			}, 8, [
+				"class",
+				"defaultOpen",
+				"static"
+			]);
+		};
+	}
+});
+//#endregion
+export { CollapsibleSection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CollapsibleSection.vue.script.js.map

package/dist/v2/components/layout/CollapsibleSection.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSection.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0 border-b\"\n    :class=\"isStatic && 'last-of-type:first-of-type:border-b-0'\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border border-b-0'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;CAOE,MAAM;;;;;;;;;;;EAwBR,MAAM,OAAO;EAIb,MAAM,YAAY,OAAM;;uBAItB,YAwEa,MAAA,WAAA,EAAA;IAtEX,IAAG;IACH,OAAK,eAAA,CAAC,kFACE,QAAA,YAAQ,wCAAA,CAAA;IACf,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAThD,WAAI,CAOd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,MAAK;4BAErD,mBA2DU,WAAA;KA1DP,mBAAiB,MAAA,UAAS;KAC3B,OAAM;QACN,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,iCAAA,CAAA,EAAA,EAAA,CAEhB,YAkCmB,MAAA,iBAAA,EAAA;KAjCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,QAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,WAAA,EADT,YAIc,MAAA,WAAA,EAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBAsBK,MAtBL,YAsBK,CApBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,UAAS;MACd,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,MAAI,CAAA,EAAA,CAEJ,QAAA,WAAA,EADT,mBAIO,QAJP,YAEkB,gBAElB,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,EAAA,CAKO,QAAQ,QAAA,aAAA,WAAA,EADjB,mBAKO,QALP,YAKO,CAAA,gBAAA,gBAFF,QAAA,UAAS,GAAG,KACf,EAAA,EAAA,mBAAiE,QAAjE,YAAsB,SAAI,gBAAG,QAAA,cAAS,IAAA,KAAA,IAAA,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA;;qCAOpCA,KAAAA,OAAO,WAAA,WAAA,EADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,EAKjB,YAIkB,MAAA,gBAAA,EAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,8CAA4C,CAAA,EAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA"}

package/dist/v2/components/layout/ValueEmitter.vue.js

@@ -0,0 +1,7 @@
+import ValueEmitter_vue_vue_type_script_setup_true_lang_default from "./ValueEmitter.vue.script.js";
+//#region src/v2/components/layout/ValueEmitter.vue
+var ValueEmitter_default = ValueEmitter_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ValueEmitter_default as default };
+
+//# sourceMappingURL=ValueEmitter.vue.js.map

package/dist/v2/components/layout/ValueEmitter.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueEmitter.vue.js","names":[],"sources":["../../../../src/v2/components/layout/ValueEmitter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * This component takes in any value and emits it back\n *\n * This is useful when we need to catch the open state of a disclosure from its v-slot\n */\nexport default {\n  name: 'ValueEmitter',\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { onBeforeUnmount, watch } from 'vue'\n\nconst { value } = defineProps<{ value: T }>()\nconst emit = defineEmits<{\n  (e: 'change', value: T): void\n  (e: 'unmount'): void\n}>()\n\nwatch(\n  () => value,\n  (newValue) => emit('change', newValue),\n  { immediate: true },\n)\n\nonBeforeUnmount(() => emit('unmount'))\n</script>\n\n<!-- eslint-disable-next-line vue/valid-template-root -->\n<template>\n  <!-- We use this hack to emit the slot value back to the parent -->\n</template>\n"],"mappings":""}

package/dist/v2/components/layout/ValueEmitter.vue.script.js

@@ -0,0 +1,18 @@
+import { defineComponent, onBeforeUnmount, watch } from "vue";
+var ValueEmitter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ValueEmitter",
+	props: { value: {} },
+	emits: ["change", "unmount"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		watch(() => __props.value, (newValue) => emit("change", newValue), { immediate: true });
+		onBeforeUnmount(() => emit("unmount"));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ValueEmitter_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ValueEmitter.vue.script.js.map

package/dist/v2/components/layout/ValueEmitter.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueEmitter.vue.script.js","names":[],"sources":["../../../../src/v2/components/layout/ValueEmitter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * This component takes in any value and emits it back\n *\n * This is useful when we need to catch the open state of a disclosure from its v-slot\n */\nexport default {\n  name: 'ValueEmitter',\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { onBeforeUnmount, watch } from 'vue'\n\nconst { value } = defineProps<{ value: T }>()\nconst emit = defineEmits<{\n  (e: 'change', value: T): void\n  (e: 'unmount'): void\n}>()\n\nwatch(\n  () => value,\n  (newValue) => emit('change', newValue),\n  { immediate: true },\n)\n\nonBeforeUnmount(() => emit('unmount'))\n</script>\n\n<!-- eslint-disable-next-line vue/valid-template-root -->\n<template>\n  <!-- We use this hack to emit the slot value back to the parent -->\n</template>\n"],"mappings":";;CAOE,MAAM;;;;EAQR,MAAM,OAAO;AAKb,cACQ,QAAA,QACL,aAAa,KAAK,UAAU,SAAS,EACtC,EAAE,WAAW,MAAM,CACrB;AAEA,wBAAsB,KAAK,UAAU,CAAA"}

package/dist/v2/components/layout/index.d.ts

@@ -1,2 +1,2 @@
-export { default as CollapsibleSection } from './CollapsibleSection.vue';
+export { default as CollapsibleSection } from './CollapsibleSection.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/layout/index.js

@@ -1,2 +1,2 @@
-import { t as CollapsibleSection_default } from "../../../layout-BWiL7dfb.js";
+import CollapsibleSection_default from "./CollapsibleSection.vue.js";
 export { CollapsibleSection_default as CollapsibleSection };

package/dist/v2/components/modals/DeleteModal.vue.js

@@ -0,0 +1,7 @@
+import DeleteModal_vue_vue_type_script_setup_true_lang_default from "./DeleteModal.vue.script.js";
+//#region src/v2/components/modals/DeleteModal.vue
+var DeleteModal_default = DeleteModal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DeleteModal_default as default };
+
+//# sourceMappingURL=DeleteModal.vue.js.map

package/dist/v2/components/modals/DeleteModal.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteModal.vue.js","names":[],"sources":["../../../../src/v2/components/modals/DeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { truncate } from '@scalar/helpers/string/truncate'\nimport { computed } from 'vue'\n\nimport { ConfirmationForm } from '@/v2/components/forms'\n\nconst { name, warningMessage } = defineProps<{\n  /** The name of the item to delete */\n  name: string\n  /** The warning message to display */\n  warningMessage?: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\n/** Condenses the name to 18 characters and adds an ellipsis if it's longer */\nconst truncatedName = computed(() => truncate(name))\n</script>\n<template>\n  <ConfirmationForm\n    :label=\"`Delete ${truncatedName}`\"\n    variant=\"danger\"\n    @cancel=\"emit('close')\"\n    @submit=\"emit('delete')\">\n    <p\n      v-if=\"warningMessage\"\n      class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ warningMessage }}\n    </p>\n  </ConfirmationForm>\n</template>\n"],"mappings":""}

package/dist/v2/components/modals/DeleteModal.vue.script.js

@@ -0,0 +1,36 @@
+import ConfirmationForm_default from "../forms/ConfirmationForm.vue.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { truncate } from "@scalar/helpers/string/truncate";
+//#region src/v2/components/modals/DeleteModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-c-2 text-sm leading-normal text-pretty"
+};
+var DeleteModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DeleteModal",
+	props: {
+		name: {},
+		warningMessage: {}
+	},
+	emits: ["close", "delete"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		/** Condenses the name to 18 characters and adds an ellipsis if it's longer */
+		const truncatedName = computed(() => truncate(__props.name));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ConfirmationForm_default), {
+				label: `Delete ${truncatedName.value}`,
+				variant: "danger",
+				onCancel: _cache[0] || (_cache[0] = ($event) => emit("close")),
+				onSubmit: _cache[1] || (_cache[1] = ($event) => emit("delete"))
+			}, {
+				default: withCtx(() => [__props.warningMessage ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(__props.warningMessage), 1)) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["label"]);
+		};
+	}
+});
+//#endregion
+export { DeleteModal_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DeleteModal.vue.script.js.map

package/dist/v2/components/modals/DeleteModal.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteModal.vue.script.js","names":[],"sources":["../../../../src/v2/components/modals/DeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { truncate } from '@scalar/helpers/string/truncate'\nimport { computed } from 'vue'\n\nimport { ConfirmationForm } from '@/v2/components/forms'\n\nconst { name, warningMessage } = defineProps<{\n  /** The name of the item to delete */\n  name: string\n  /** The warning message to display */\n  warningMessage?: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\n/** Condenses the name to 18 characters and adds an ellipsis if it's longer */\nconst truncatedName = computed(() => truncate(name))\n</script>\n<template>\n  <ConfirmationForm\n    :label=\"`Delete ${truncatedName}`\"\n    variant=\"danger\"\n    @cancel=\"emit('close')\"\n    @submit=\"emit('delete')\">\n    <p\n      v-if=\"warningMessage\"\n      class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ warningMessage }}\n    </p>\n  </ConfirmationForm>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAaA,MAAM,OAAO;;EAMb,MAAM,gBAAgB,eAAe,SAAS,QAAA,KAAK,CAAA;;uBAGjD,YAUmB,MAAA,yBAAA,EAAA;IAThB,OAAK,UAAY,cAAA;IAClB,SAAQ;IACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;2BAKT,CAHI,QAAA,kBAAA,WAAA,EADR,mBAII,KAJJ,YAII,gBADC,QAAA,eAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/v2/components/modals/ModalClientContainer.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import ModalClientContainer_vue_vue_type_script_setup_true_lang_default from "./ModalClientContainer.vue.script.js";
+/* empty css                                   */
+//#region src/v2/components/modals/ModalClientContainer.vue
+var ModalClientContainer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModalClientContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6118685a"]]);
+//#endregion
+export { ModalClientContainer_default as default };
+
+//# sourceMappingURL=ModalClientContainer.vue.js.map

package/dist/v2/components/modals/ModalClientContainer.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n  type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport {\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\nconst id = useId()\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: `#${id}`,\n  })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n  () => props.modalState.open,\n  async (open) => {\n    if (open) {\n      await nextTick()\n      activateFocusTrap()\n      emit('open')\n    } else {\n      deactivateFocusTrap()\n      emit('close')\n    }\n  },\n  { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n  deactivateFocusTrap()\n})\n</script>\n\n<template>\n  <Transition name=\"scalar-client-fade\">\n    <div\n      v-show=\"modalState.open\"\n      class=\"scalar scalar-app z-overlay relative\">\n      <div class=\"scalar-container\">\n        <div\n          :id=\"id\"\n          ref=\"client\"\n          aria-label=\"API Client\"\n          aria-modal=\"true\"\n          v-bind=\"$attrs\"\n          class=\"scalar-app-layout scalar-client\"\n          role=\"dialog\"\n          tabindex=\"-1\">\n          <ScalarTeleportRoot>\n            <slot />\n          </ScalarTeleportRoot>\n        </div>\n\n        <!-- overlay / exit area -->\n        <div\n          class=\"scalar-app-exit\"\n          @click=\"modalState.hide()\" />\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n  background: var(--scalar-background-1);\n  height: calc(100% - 120px);\n  max-width: 1390px;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\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 .scalar-app-layout {\n    height: 100%;\n    max-height: 90svh;\n  }\n}\n\n.scalar .scalar-app-exit {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #00000038;\n  cursor: pointer;\n  z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n  font-family: sans-serif;\n  position: absolute;\n  top: 0;\n  right: 12px;\n  font-size: 30px;\n  font-weight: 100;\n  line-height: 50px;\n  text-align: center;\n  color: white;\n  opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n  opacity: 1;\n}\n\n/* container */\n.scalar-container {\n  overflow: hidden;\n  visibility: visible;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n\n.scalar-client-fade-enter-active,\n.scalar-client-fade-leave-active {\n  transition: opacity 0.35s ease;\n}\n\n.scalar-client-fade-enter-from,\n.scalar-client-fade-leave-to {\n  opacity: 0;\n}\n</style>\n"],"mappings":""}