@scalar/api-client 3.19.2 → 3.20.0

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import DataTableInput_vue_vue_type_script_setup_true_lang_default from "./DataTableInput.vue.script.js";
 /* empty css                             */
 //#region src/v2/components/data-table/DataTableInput.vue
-var DataTableInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(DataTableInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a6f4752a"]]);
+var DataTableInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(DataTableInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-135d11b9"]]);
 //#endregion
 export { DataTableInput_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableInput.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from '@scalar/icons'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, useTemplateRef } from 'vue'\n\nimport type { VueClassProp } from '@/types/vue'\nimport { CodeInputLite } from '@/v2/components/code-input'\n\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableInputSelect from './DataTableInputSelect.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    id?: string\n    type?: string | undefined\n    /** Class for the wrapping cell because attrs is bound to the input */\n    containerClass?: VueClassProp | undefined\n    required?: boolean\n    modelValue: string\n    /** Allows adding a custom value to the enum dropdown, defaults to true */\n    canAddCustomEnumValue?: boolean\n    readOnly?: boolean\n    enum?: string[]\n    environment: XScalarEnvironment\n    description?: string | undefined\n    /** Whether to show context function suggestions like $guid, $timestamp. Defaults to true */\n    withFakeData?: boolean\n  }>(),\n  {\n    canAddCustomEnumValue: true,\n    required: false,\n    readOnly: false,\n    withFakeData: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string | number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'selectVariable', value: string): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst mask = ref(true)\nconst interactingWithDropdown = ref(false)\nconst codeInput = useTemplateRef('codeInput')\n\nconst handleBlur = () => !interactingWithDropdown.value && emit('inputBlur')\n\nconst inputType = computed(() =>\n  props.type === 'password' ? 'text' : (props.type ?? 'text'),\n)\n\n// If not an enum nor read only, focus the code input\nconst handleLabelClick = () => {\n  if (!props.enum?.length && !props.readOnly) {\n    codeInput.value?.focus()\n  }\n}\n</script>\n<template>\n  <DataTableCell\n    class=\"relative flex\"\n    :class=\"containerClass\">\n    <div\n      v-if=\"$slots.default\"\n      class=\"text-c-1 flex items-center pr-0 pl-3\"\n      :for=\"id ?? ''\"\n      @click=\"handleLabelClick\">\n      <slot />:\n    </div>\n    <div class=\"relative flex min-w-0 flex-1\">\n      <template v-if=\"props.enum && props.enum.length\">\n        <DataTableInputSelect\n          :canAddCustomValue=\"props.canAddCustomEnumValue\"\n          :modelValue=\"props.modelValue\"\n          :value=\"props.enum\"\n          @update:modelValue=\"emit('update:modelValue', $event)\" />\n      </template>\n      <template v-else>\n        <input\n          v-if=\"mask && type === 'password'\"\n          v-bind=\"id ? { ...$attrs, id: id } : $attrs\"\n          autocomplete=\"off\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1\"\n          :class=\"{ 'scalar-password-input': type === 'password' }\"\n          data-1p-ignore\n          :readOnly=\"readOnly\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          :value=\"modelValue\"\n          @input=\"\n            emit(\n              'update:modelValue',\n              ($event.target as HTMLInputElement).value ?? '',\n            )\n          \" />\n        <CodeInputLite\n          v-else\n          v-bind=\"$attrs\"\n          :id=\"id\"\n          ref=\"codeInput\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1\"\n          :class=\"[\n            type === 'password' && description && 'pr-12',\n            description && 'pr-8',\n            type === 'password' && 'scalar-password-input',\n          ]\"\n          :environment=\"environment\"\n          :modelValue=\"modelValue ?? ''\"\n          :readOnly=\"readOnly\"\n          :required=\"Boolean(required)\"\n          :type=\"inputType\"\n          :withFakeData=\"withFakeData\"\n          @blur=\"handleBlur\"\n          @focus=\"emit('inputFocus')\"\n          @update:modelValue=\"(value) => emit('update:modelValue', value)\" />\n      </template>\n    </div>\n    <div\n      v-if=\"$slots.warning\"\n      class=\"centered-y text-orange absolute right-7 text-xs\">\n      <slot name=\"warning\" />\n    </div>\n    <slot name=\"icon\" />\n    <!-- Clear -->\n    <ScalarIconButton\n      v-if=\"modelValue\"\n      class=\"-ml-.25 h-6 w-6 self-center p-1.25\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Value\"\n      @click=\"emit('update:modelValue', '')\" />\n    <!-- Toggle Visibility -->\n    <ScalarIconButton\n      v-if=\"type === 'password'\"\n      class=\"-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25\"\n      data-testid=\"data-table-password-toggle\"\n      :icon=\"mask ? ScalarIconEye : ScalarIconEyeSlash\"\n      :label=\"mask ? 'Show Password' : 'Hide Password'\"\n      @click=\"mask = !mask\" />\n  </DataTableCell>\n</template>\n\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n.required::after {\n  content: 'Required';\n}\n/* Tailwind placeholder is busted */\ninput::placeholder {\n  color: var(--scalar-color-3);\n}\n/* we want our inputs to look like a password input but not be one */\n.scalar-password-input {\n  text-security: disc;\n  -webkit-text-security: disc;\n  -moz-text-security: disc;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"DataTableInput.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from '@scalar/icons'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, useTemplateRef } from 'vue'\n\nimport type { VueClassProp } from '@/types/vue'\nimport { CodeInputLite } from '@/v2/components/code-input'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableInputSelect from './DataTableInputSelect.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    id?: string\n    type?: string | undefined\n    /** Class for the wrapping cell because attrs is bound to the input */\n    containerClass?: VueClassProp | undefined\n    required?: boolean\n    modelValue: string\n    /** Allows adding a custom value to the enum dropdown, defaults to true */\n    canAddCustomEnumValue?: boolean\n    readOnly?: boolean\n    enum?: string[]\n    environment: XScalarEnvironment\n    description?: string | undefined\n    /** Whether to show context function suggestions like $guid, $timestamp. Defaults to true */\n    withFakeData?: boolean\n  }>(),\n  {\n    canAddCustomEnumValue: true,\n    required: false,\n    readOnly: false,\n    withFakeData: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string | number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'selectVariable', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\ndefineOptions({ inheritAttrs: false })\n\nconst mask = ref(true)\nconst interactingWithDropdown = ref(false)\nconst codeInput = useTemplateRef('codeInput')\n\nconst handleBlur = () => !interactingWithDropdown.value && emit('inputBlur')\n\nconst inputType = computed(() =>\n  props.type === 'password' ? 'text' : (props.type ?? 'text'),\n)\n\n// If not an enum nor read only, focus the code input\nconst handleLabelClick = () => {\n  if (!props.enum?.length && !props.readOnly) {\n    codeInput.value?.focus()\n  }\n}\n</script>\n<template>\n  <DataTableCell\n    class=\"relative flex\"\n    :class=\"containerClass\">\n    <div\n      v-if=\"$slots.default\"\n      class=\"text-c-1 flex items-center pr-0 pl-3\"\n      :for=\"id ?? ''\"\n      @click=\"handleLabelClick\">\n      <slot />:\n    </div>\n    <div class=\"relative flex min-w-0 flex-1\">\n      <template v-if=\"props.enum && props.enum.length\">\n        <DataTableInputSelect\n          :canAddCustomValue=\"props.canAddCustomEnumValue\"\n          :modelValue=\"props.modelValue\"\n          :value=\"props.enum\"\n          @update:modelValue=\"emit('update:modelValue', $event)\" />\n      </template>\n      <template v-else>\n        <input\n          v-if=\"mask && type === 'password'\"\n          v-bind=\"id ? { ...$attrs, id: id } : $attrs\"\n          autocomplete=\"off\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1\"\n          :class=\"{ 'scalar-password-input': type === 'password' }\"\n          data-1p-ignore\n          :readOnly=\"readOnly\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          :value=\"modelValue\"\n          @input=\"\n            emit(\n              'update:modelValue',\n              ($event.target as HTMLInputElement).value ?? '',\n            )\n          \" />\n        <CodeInputLite\n          v-else\n          v-bind=\"$attrs\"\n          :id=\"id\"\n          ref=\"codeInput\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1\"\n          :class=\"[\n            type === 'password' && description && 'pr-12',\n            description && 'pr-8',\n            type === 'password' && 'scalar-password-input',\n          ]\"\n          :environment=\"environment\"\n          :modelValue=\"modelValue ?? ''\"\n          :readOnly=\"readOnly\"\n          :required=\"Boolean(required)\"\n          :type=\"inputType\"\n          :withFakeData=\"withFakeData\"\n          @blur=\"handleBlur\"\n          @focus=\"emit('inputFocus')\"\n          @update:modelValue=\"(value) => emit('update:modelValue', value)\" />\n      </template>\n    </div>\n    <div\n      v-if=\"$slots.warning\"\n      class=\"centered-y text-orange absolute right-7 text-xs\">\n      <slot name=\"warning\" />\n    </div>\n    <slot name=\"icon\" />\n    <!-- Clear -->\n    <ScalarIconButton\n      v-if=\"modelValue\"\n      class=\"-ml-.25 h-6 w-6 self-center p-1.25\"\n      :icon=\"ScalarIconX\"\n      :label=\"translate('apiClient.dataTableInput.clearValue')\"\n      @click=\"emit('update:modelValue', '')\" />\n    <!-- Toggle Visibility -->\n    <ScalarIconButton\n      v-if=\"type === 'password'\"\n      class=\"-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25\"\n      data-testid=\"data-table-password-toggle\"\n      :icon=\"mask ? ScalarIconEye : ScalarIconEyeSlash\"\n      :label=\"\n        mask\n          ? translate('apiClient.dataTableInput.showPassword')\n          : translate('apiClient.dataTableInput.hidePassword')\n      \"\n      @click=\"mask = !mask\" />\n  </DataTableCell>\n</template>\n\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n/* Tailwind placeholder is busted */\ninput::placeholder {\n  color: var(--scalar-color-3);\n}\n/* we want our inputs to look like a password input but not be one */\n.scalar-password-input {\n  text-security: disc;\n  -webkit-text-security: disc;\n  -moz-text-security: disc;\n}\n</style>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../features/localization/index.js";
 import DataTableInputSelect_default from "./DataTableInputSelect.vue.js";
 import CodeInputLite_default from "../code-input/CodeInputLite.vue.js";
 import DataTableCell_default from "./DataTableCell.vue.js";
@@ -53,6 +54,7 @@ var DataTableInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const mask = ref(true);
 		const interactingWithDropdown = ref(false);
 		const codeInput = useTemplateRef("codeInput");
@@ -126,15 +128,15 @@ var DataTableInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 						key: 2,
 						class: "-ml-.25 h-6 w-6 self-center p-1.25",
 						icon: unref(ScalarIconX),
-						label: "Clear Value",
+						label: unref(translate)("apiClient.dataTableInput.clearValue"),
 						onClick: _cache[4] || (_cache[4] = ($event) => emit("update:modelValue", ""))
-					}, null, 8, ["icon"])) : createCommentVNode("", true),
+					}, null, 8, ["icon", "label"])) : createCommentVNode("", true),
 					__props.type === "password" ? (openBlock(), createBlock(unref(ScalarIconButton), {
 						key: 3,
 						class: "-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25",
 						"data-testid": "data-table-password-toggle",
 						icon: mask.value ? unref(ScalarIconEye) : unref(ScalarIconEyeSlash),
-						label: mask.value ? "Show Password" : "Hide Password",
+						label: mask.value ? unref(translate)("apiClient.dataTableInput.showPassword") : unref(translate)("apiClient.dataTableInput.hidePassword"),
 						onClick: _cache[5] || (_cache[5] = ($event) => mask.value = !mask.value)
 					}, null, 8, ["icon", "label"])) : createCommentVNode("", true)
 				]),

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableInput.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from '@scalar/icons'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, useTemplateRef } from 'vue'\n\nimport type { VueClassProp } from '@/types/vue'\nimport { CodeInputLite } from '@/v2/components/code-input'\n\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableInputSelect from './DataTableInputSelect.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    id?: string\n    type?: string | undefined\n    /** Class for the wrapping cell because attrs is bound to the input */\n    containerClass?: VueClassProp | undefined\n    required?: boolean\n    modelValue: string\n    /** Allows adding a custom value to the enum dropdown, defaults to true */\n    canAddCustomEnumValue?: boolean\n    readOnly?: boolean\n    enum?: string[]\n    environment: XScalarEnvironment\n    description?: string | undefined\n    /** Whether to show context function suggestions like $guid, $timestamp. Defaults to true */\n    withFakeData?: boolean\n  }>(),\n  {\n    canAddCustomEnumValue: true,\n    required: false,\n    readOnly: false,\n    withFakeData: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string | number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'selectVariable', value: string): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst mask = ref(true)\nconst interactingWithDropdown = ref(false)\nconst codeInput = useTemplateRef('codeInput')\n\nconst handleBlur = () => !interactingWithDropdown.value && emit('inputBlur')\n\nconst inputType = computed(() =>\n  props.type === 'password' ? 'text' : (props.type ?? 'text'),\n)\n\n// If not an enum nor read only, focus the code input\nconst handleLabelClick = () => {\n  if (!props.enum?.length && !props.readOnly) {\n    codeInput.value?.focus()\n  }\n}\n</script>\n<template>\n  <DataTableCell\n    class=\"relative flex\"\n    :class=\"containerClass\">\n    <div\n      v-if=\"$slots.default\"\n      class=\"text-c-1 flex items-center pr-0 pl-3\"\n      :for=\"id ?? ''\"\n      @click=\"handleLabelClick\">\n      <slot />:\n    </div>\n    <div class=\"relative flex min-w-0 flex-1\">\n      <template v-if=\"props.enum && props.enum.length\">\n        <DataTableInputSelect\n          :canAddCustomValue=\"props.canAddCustomEnumValue\"\n          :modelValue=\"props.modelValue\"\n          :value=\"props.enum\"\n          @update:modelValue=\"emit('update:modelValue', $event)\" />\n      </template>\n      <template v-else>\n        <input\n          v-if=\"mask && type === 'password'\"\n          v-bind=\"id ? { ...$attrs, id: id } : $attrs\"\n          autocomplete=\"off\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1\"\n          :class=\"{ 'scalar-password-input': type === 'password' }\"\n          data-1p-ignore\n          :readOnly=\"readOnly\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          :value=\"modelValue\"\n          @input=\"\n            emit(\n              'update:modelValue',\n              ($event.target as HTMLInputElement).value ?? '',\n            )\n          \" />\n        <CodeInputLite\n          v-else\n          v-bind=\"$attrs\"\n          :id=\"id\"\n          ref=\"codeInput\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1\"\n          :class=\"[\n            type === 'password' && description && 'pr-12',\n            description && 'pr-8',\n            type === 'password' && 'scalar-password-input',\n          ]\"\n          :environment=\"environment\"\n          :modelValue=\"modelValue ?? ''\"\n          :readOnly=\"readOnly\"\n          :required=\"Boolean(required)\"\n          :type=\"inputType\"\n          :withFakeData=\"withFakeData\"\n          @blur=\"handleBlur\"\n          @focus=\"emit('inputFocus')\"\n          @update:modelValue=\"(value) => emit('update:modelValue', value)\" />\n      </template>\n    </div>\n    <div\n      v-if=\"$slots.warning\"\n      class=\"centered-y text-orange absolute right-7 text-xs\">\n      <slot name=\"warning\" />\n    </div>\n    <slot name=\"icon\" />\n    <!-- Clear -->\n    <ScalarIconButton\n      v-if=\"modelValue\"\n      class=\"-ml-.25 h-6 w-6 self-center p-1.25\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Value\"\n      @click=\"emit('update:modelValue', '')\" />\n    <!-- Toggle Visibility -->\n    <ScalarIconButton\n      v-if=\"type === 'password'\"\n      class=\"-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25\"\n      data-testid=\"data-table-password-toggle\"\n      :icon=\"mask ? ScalarIconEye : ScalarIconEyeSlash\"\n      :label=\"mask ? 'Show Password' : 'Hide Password'\"\n      @click=\"mask = !mask\" />\n  </DataTableCell>\n</template>\n\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n.required::after {\n  content: 'Required';\n}\n/* Tailwind placeholder is busted */\ninput::placeholder {\n  color: var(--scalar-color-3);\n}\n/* we want our inputs to look like a password input but not be one */\n.scalar-password-input {\n  text-security: disc;\n  -webkit-text-security: disc;\n  -moz-text-security: disc;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EASb,MAAM,OAAO,IAAI,IAAI;EACrB,MAAM,0BAA0B,IAAI,KAAK;EACzC,MAAM,YAAY,eAAe,WAAW;EAE5C,MAAM,mBAAmB,CAAC,wBAAwB,SAAS,KAAK,WAAW;EAE3E,MAAM,YAAY,eAChB,MAAM,SAAS,aAAa,SAAU,MAAM,QAAQ,MACtD;EAGA,MAAM,yBAAyB;GAC7B,IAAI,CAAC,MAAM,MAAM,UAAU,CAAC,MAAM,UAChC,UAAU,OAAO,MAAM;EAE3B;;uBAGE,YA+EgB,uBAAA,EA9Ed,OAAK,eAAA,CAAC,iBACE,QAAA,cAAc,CAAA,EAAA,GAAA;2BAOhB;KALEA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAMM,OAAA;;MAJJ,OAAM;MACL,KAAK,QAAA,MAAE;MACP,SAAO;SACR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,GAAA,OAAA,OAAA,OAAA,KAAA,gBAAA,MACV,EAAA,EAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;KACA,mBA+CM,OA/CN,YA+CM,CA9CY,MAAM,QAAQ,MAAM,KAAK,UAAA,UAAA,GACvC,YAI2D,8BAAA;;MAHxD,mBAAmB,MAAM;MACzB,YAAY,MAAM;MAClB,OAAO,MAAM;MACb,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAM;;;;;yBAExD,mBAsCW,UAAA,EAAA,KAAA,EAAA,GAAA,CApCD,KAAA,SAAQ,QAAA,SAAI,cAAA,UAAA,GADpB,mBAgBM,SAhBN,WAgBM,EAAA,KAAA,EAAA,GAdI,QAAA,KAAE;MAAA,GAAQC,KAAAA;MAAM,IAAM,QAAA;KAAE,IAAKA,KAAAA,QAAM;MAC3C,cAAa;MACb,OAAK,CAAC,6FAA2F,EAAA,yBAC9D,QAAA,SAAI,WAAA,CAAA;MACvC,kBAAA;MACC,UAAU,QAAA;MACX,YAAW;MACV,MAAM,UAAA;MACN,OAAO,QAAA;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAe,KAAA,qBAAwD,OAAO,OAA4B,SAAK,EAAA;gDAMvH,YAmBqE,MAAA,qBAAA,GAnBrE,WAmBqE,EAAA,KAAA,EAAA,GAjB3DA,KAAAA,QAAM;MACb,IAAI,QAAA;eACD;MAAJ,KAAI;MACJ,OAAK,CAAC,gFAA8E;OAC9D,QAAA,SAAI,cAAmB,QAAA,eAAW;OAAyB,QAAA,eAAW;OAAwB,QAAA,SAAI,cAAA;;MAKvH,aAAa,QAAA;MACb,YAAY,QAAA,cAAU;MACtB,UAAU,QAAA;MACV,UAAU,QAAQ,QAAA,QAAQ;MAC1B,MAAM,UAAA;MACN,cAAc,QAAA;MACd,QAAM;MACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,YAAA;MACX,uBAAiB,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,KAAK;;;;;;;;;;;KAI5DD,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEzB,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,KAAA,GAAA,IAAA;KAGZ,QAAA,cAAA,UAAA,GADR,YAK2C,MAAA,gBAAA,GAAA;;MAHzC,OAAM;MACL,MAAM,MAAA,WAAA;MACP,OAAM;MACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAA,EAAA;;KAGN,QAAA,SAAI,cAAA,UAAA,GADZ,YAM0B,MAAA,gBAAA,GAAA;;MAJxB,OAAM;MACN,eAAY;MACX,MAAM,KAAA,QAAO,MAAA,aAAA,IAAgB,MAAA,kBAAA;MAC7B,OAAO,KAAA,QAAI,kBAAA;MACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI,CAAI,KAAA"}
+{"version":3,"file":"DataTableInput.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from '@scalar/icons'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, useTemplateRef } from 'vue'\n\nimport type { VueClassProp } from '@/types/vue'\nimport { CodeInputLite } from '@/v2/components/code-input'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableInputSelect from './DataTableInputSelect.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    id?: string\n    type?: string | undefined\n    /** Class for the wrapping cell because attrs is bound to the input */\n    containerClass?: VueClassProp | undefined\n    required?: boolean\n    modelValue: string\n    /** Allows adding a custom value to the enum dropdown, defaults to true */\n    canAddCustomEnumValue?: boolean\n    readOnly?: boolean\n    enum?: string[]\n    environment: XScalarEnvironment\n    description?: string | undefined\n    /** Whether to show context function suggestions like $guid, $timestamp. Defaults to true */\n    withFakeData?: boolean\n  }>(),\n  {\n    canAddCustomEnumValue: true,\n    required: false,\n    readOnly: false,\n    withFakeData: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string | number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'selectVariable', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\ndefineOptions({ inheritAttrs: false })\n\nconst mask = ref(true)\nconst interactingWithDropdown = ref(false)\nconst codeInput = useTemplateRef('codeInput')\n\nconst handleBlur = () => !interactingWithDropdown.value && emit('inputBlur')\n\nconst inputType = computed(() =>\n  props.type === 'password' ? 'text' : (props.type ?? 'text'),\n)\n\n// If not an enum nor read only, focus the code input\nconst handleLabelClick = () => {\n  if (!props.enum?.length && !props.readOnly) {\n    codeInput.value?.focus()\n  }\n}\n</script>\n<template>\n  <DataTableCell\n    class=\"relative flex\"\n    :class=\"containerClass\">\n    <div\n      v-if=\"$slots.default\"\n      class=\"text-c-1 flex items-center pr-0 pl-3\"\n      :for=\"id ?? ''\"\n      @click=\"handleLabelClick\">\n      <slot />:\n    </div>\n    <div class=\"relative flex min-w-0 flex-1\">\n      <template v-if=\"props.enum && props.enum.length\">\n        <DataTableInputSelect\n          :canAddCustomValue=\"props.canAddCustomEnumValue\"\n          :modelValue=\"props.modelValue\"\n          :value=\"props.enum\"\n          @update:modelValue=\"emit('update:modelValue', $event)\" />\n      </template>\n      <template v-else>\n        <input\n          v-if=\"mask && type === 'password'\"\n          v-bind=\"id ? { ...$attrs, id: id } : $attrs\"\n          autocomplete=\"off\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1\"\n          :class=\"{ 'scalar-password-input': type === 'password' }\"\n          data-1p-ignore\n          :readOnly=\"readOnly\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          :value=\"modelValue\"\n          @input=\"\n            emit(\n              'update:modelValue',\n              ($event.target as HTMLInputElement).value ?? '',\n            )\n          \" />\n        <CodeInputLite\n          v-else\n          v-bind=\"$attrs\"\n          :id=\"id\"\n          ref=\"codeInput\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1\"\n          :class=\"[\n            type === 'password' && description && 'pr-12',\n            description && 'pr-8',\n            type === 'password' && 'scalar-password-input',\n          ]\"\n          :environment=\"environment\"\n          :modelValue=\"modelValue ?? ''\"\n          :readOnly=\"readOnly\"\n          :required=\"Boolean(required)\"\n          :type=\"inputType\"\n          :withFakeData=\"withFakeData\"\n          @blur=\"handleBlur\"\n          @focus=\"emit('inputFocus')\"\n          @update:modelValue=\"(value) => emit('update:modelValue', value)\" />\n      </template>\n    </div>\n    <div\n      v-if=\"$slots.warning\"\n      class=\"centered-y text-orange absolute right-7 text-xs\">\n      <slot name=\"warning\" />\n    </div>\n    <slot name=\"icon\" />\n    <!-- Clear -->\n    <ScalarIconButton\n      v-if=\"modelValue\"\n      class=\"-ml-.25 h-6 w-6 self-center p-1.25\"\n      :icon=\"ScalarIconX\"\n      :label=\"translate('apiClient.dataTableInput.clearValue')\"\n      @click=\"emit('update:modelValue', '')\" />\n    <!-- Toggle Visibility -->\n    <ScalarIconButton\n      v-if=\"type === 'password'\"\n      class=\"-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25\"\n      data-testid=\"data-table-password-toggle\"\n      :icon=\"mask ? ScalarIconEye : ScalarIconEyeSlash\"\n      :label=\"\n        mask\n          ? translate('apiClient.dataTableInput.showPassword')\n          : translate('apiClient.dataTableInput.hidePassword')\n      \"\n      @click=\"mask = !mask\" />\n  </DataTableCell>\n</template>\n\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n/* Tailwind placeholder is busted */\ninput::placeholder {\n  color: var(--scalar-color-3);\n}\n/* we want our inputs to look like a password input but not be one */\n.scalar-password-input {\n  text-security: disc;\n  -webkit-text-security: disc;\n  -moz-text-security: disc;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EAOb,MAAM,EAAE,cAAc,gBAAgB;EAItC,MAAM,OAAO,IAAI,IAAI;EACrB,MAAM,0BAA0B,IAAI,KAAK;EACzC,MAAM,YAAY,eAAe,WAAW;EAE5C,MAAM,mBAAmB,CAAC,wBAAwB,SAAS,KAAK,WAAW;EAE3E,MAAM,YAAY,eAChB,MAAM,SAAS,aAAa,SAAU,MAAM,QAAQ,MACtD;EAGA,MAAM,yBAAyB;GAC7B,IAAI,CAAC,MAAM,MAAM,UAAU,CAAC,MAAM,UAChC,UAAU,OAAO,MAAM;EAE3B;;uBAGE,YAmFgB,uBAAA,EAlFd,OAAK,eAAA,CAAC,iBACE,QAAA,cAAc,CAAA,EAAA,GAAA;2BAOhB;KALEA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAMM,OAAA;;MAJJ,OAAM;MACL,KAAK,QAAA,MAAE;MACP,SAAO;SACR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,GAAA,OAAA,OAAA,OAAA,KAAA,gBAAA,MACV,EAAA,EAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;KACA,mBA+CM,OA/CN,YA+CM,CA9CY,MAAM,QAAQ,MAAM,KAAK,UAAA,UAAA,GACvC,YAI2D,8BAAA;;MAHxD,mBAAmB,MAAM;MACzB,YAAY,MAAM;MAClB,OAAO,MAAM;MACb,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAM;;;;;yBAExD,mBAsCW,UAAA,EAAA,KAAA,EAAA,GAAA,CApCD,KAAA,SAAQ,QAAA,SAAI,cAAA,UAAA,GADpB,mBAgBM,SAhBN,WAgBM,EAAA,KAAA,EAAA,GAdI,QAAA,KAAE;MAAA,GAAQC,KAAAA;MAAM,IAAM,QAAA;KAAE,IAAKA,KAAAA,QAAM;MAC3C,cAAa;MACb,OAAK,CAAC,6FAA2F,EAAA,yBAC9D,QAAA,SAAI,WAAA,CAAA;MACvC,kBAAA;MACC,UAAU,QAAA;MACX,YAAW;MACV,MAAM,UAAA;MACN,OAAO,QAAA;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAe,KAAA,qBAAwD,OAAO,OAA4B,SAAK,EAAA;gDAMvH,YAmBqE,MAAA,qBAAA,GAnBrE,WAmBqE,EAAA,KAAA,EAAA,GAjB3DA,KAAAA,QAAM;MACb,IAAI,QAAA;eACD;MAAJ,KAAI;MACJ,OAAK,CAAC,gFAA8E;OAC9D,QAAA,SAAI,cAAmB,QAAA,eAAW;OAAyB,QAAA,eAAW;OAAwB,QAAA,SAAI,cAAA;;MAKvH,aAAa,QAAA;MACb,YAAY,QAAA,cAAU;MACtB,UAAU,QAAA;MACV,UAAU,QAAQ,QAAA,QAAQ;MAC1B,MAAM,UAAA;MACN,cAAc,QAAA;MACd,QAAM;MACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,YAAA;MACX,uBAAiB,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,KAAK;;;;;;;;;;;KAI5DD,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEzB,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,KAAA,GAAA,IAAA;KAGZ,QAAA,cAAA,UAAA,GADR,YAK2C,MAAA,gBAAA,GAAA;;MAHzC,OAAM;MACL,MAAM,MAAA,WAAA;MACN,OAAO,MAAA,SAAA,CAAS,CAAA,qCAAA;MAChB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAA,EAAA;;KAGN,QAAA,SAAI,cAAA,UAAA,GADZ,YAU0B,MAAA,gBAAA,GAAA;;MARxB,OAAM;MACN,eAAY;MACX,MAAM,KAAA,QAAO,MAAA,aAAA,IAAgB,MAAA,kBAAA;MAC7B,OAAgB,KAAA,QAAiB,MAAA,SAAA,CAAS,CAAA,uCAAA,IAAsD,MAAA,SAAA,CAAS,CAAA,uCAAA;MAKzG,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI,CAAI,KAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableInputSelect.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"names":[],"mappings":"AAgMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAA;AAEnF,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,mBAAmB,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAA;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B,CAAC;AAobJ,QAAA,MAAM,YAAY;;;;;uBAtbM,OAAO;6EA0b7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DataTableInputSelect.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"names":[],"mappings":"AAqMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAA;AAGnF,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,mBAAmB,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAA;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B,CAAC;AA0bJ,QAAA,MAAM,YAAY;;;;;uBA5bM,OAAO;6EAgc7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableInputSelect.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport {\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n} from '@scalar/components/dropdown'\nimport { ScalarIcon } from '@scalar/components/icon'\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":""}
+{"version":3,"file":"DataTableInputSelect.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport {\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n} from '@scalar/components/dropdown'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { CodeInputModelValue } from '@/v2/components/code-input/CodeInput.vue'\nimport { useLocalization } from '@/v2/features/localization'\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 { translate } = useLocalization()\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=\"translate('apiClient.dataTableInputSelect.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>{{\n                translate('apiClient.dataTableInputSelect.addValue')\n              }}</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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../features/localization/index.js";
 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 } from "@scalar/components/button";
 import { ScalarIcon } from "@scalar/components/icon";
@@ -6,9 +7,10 @@ import { ScalarDropdown, ScalarDropdownDivider, ScalarDropdownItem } from "@scal
 //#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 _hoisted_3 = ["placeholder"];
+var _hoisted_4 = { class: "text-c-1 overflow-hidden text-ellipsis" };
+var _hoisted_5 = { class: "overflow-hidden text-ellipsis" };
+var _hoisted_6 = { 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: {
@@ -37,6 +39,7 @@ var DataTableInputSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const options = computed(() => props.value ?? []);
 		const addingCustomValue = ref(false);
 		const customValue = ref("");
@@ -111,11 +114,11 @@ var DataTableInputSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				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",
+				placeholder: unref(translate)("apiClient.dataTableInputSelect.value"),
 				type: "text",
 				onBlur: handleBlur,
 				onKeyup: withKeys(addCustomValue, ["enter"])
-			}, null, 544)), [[vModelText, customValue.value]]) : (openBlock(), createBlock(unref(ScalarDropdown), {
+			}, null, 40, _hoisted_3)), [[vModelText, customValue.value]]) : (openBlock(), createBlock(unref(ScalarDropdown), {
 				key: 2,
 				resize: "",
 				value: initialValue.value
@@ -131,24 +134,24 @@ var DataTableInputSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 							class: "size-2.5",
 							icon: "Checkmark",
 							thickness: "3"
-						})], 2), createElementVNode("span", _hoisted_4, toDisplayString(option), 1)]),
+						})], 2), createElementVNode("span", _hoisted_5, 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), {
+					default: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(unref(ScalarIcon), {
 						icon: "Add",
 						size: "sm"
-					})]), _cache[2] || (_cache[2] = createElementVNode("span", null, "Add value", -1))]),
+					})]), createElementVNode("span", null, toDisplayString(unref(translate)("apiClient.dataTableInputSelect.addValue")), 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), {
+					default: withCtx(() => [createElementVNode("span", _hoisted_4, toDisplayString(initialValue.value ?? "Select a value"), 1), createVNode(unref(ScalarIcon), {
 						icon: "ChevronDown",
 						size: "md"
 					})]),

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableInputSelect.vue.script.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport {\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n} from '@scalar/components/dropdown'\nimport { ScalarIcon } from '@scalar/components/icon'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAWd,MAAM,OAAO;EAIb,MAAM,UAAU,eAAe,MAAM,SAAS,CAAC,CAAC;EAChD,MAAM,oBAAoB,IAAI,KAAK;EACnC,MAAM,cAAc,IAAI,EAAE;EAC1B,MAAM,WAAW,IAA6B,IAAI;EAElD,MAAM,cAAc,aAAa;GAC/B,KAAK,qBAAqB,QAAQ;EACpC,CAAC;EAED,MAAM,kBAAkB,UAAkB;GACxC,KAAK,qBAAqB,KAAK;GAC/B,kBAAkB,QAAQ;EAC5B;EAEA,MAAM,uBAAuB;GAC3B,IAAI,YAAY,MAAM,KAAK,GACzB,eAAe,YAAY,KAAK;EAEpC;EAEA,MAAM,mBAAmB;GACvB,IAAI,CAAC,YAAY,MAAM,KAAK,GAC1B,KAAK,qBAAqB,EAAE;GAE9B,kBAAkB,QAAQ;EAC5B;EAEA,MAAM,cAAc,UAAkB;GACpC,OAAO,MAAM,WAAW,SAAS,MAAM;EACzC;EAEA,MAAM,oBAAoB,aAAa;GACrC,IAAI,UACF,eAAe;IACb,SAAS,OAAO,MAAM;GACxB,CAAC;EAEL,CAAC;EAED,MAAM,eAAe,eAAe;GAClC,OAAO,MAAM,eAAe,KAAA,IAAY,MAAM,aAAa,MAAM;EACnE,CAAC;;EAGD,MAAM,eAAe,eACnB,QAAQ,MAAM,KAAK,WAAW;GAC5B,MAAM,KAAK,OAAO,SAAS;GAC3B,OAAO;IAAM;IAAI,OAAO;IAAI,OAAO;GAAG;EACxC,CAAC,CACH;;EAGA,MAAM,uBAAuB,eAAe;GAC1C,MAAM,iBAAiB,IAAI,IAAI,MAAM,WAAW,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC;GACrE,OAAO,aAAa,MAAM,QAAQ,WAAW,eAAe,IAAI,OAAO,EAAE,CAAC;EAC5E,CAAC;;EAGD,MAAM,yBAAyB,oBAAyB;GACtD,MAAM,iBAAiB,gBAAgB,KAAK,WAAgB,OAAO,KAAK;GACxE,KAAK,qBAAqB,eAAe,KAAK,GAAG,CAAC;EACpD;;uBAIE,mBAoFM,OApFN,YAoFM,CAlFY,QAAA,SAAI,WAAA,UAAA,GAClB,YAkB4B,MAAA,yBAAA,GAAA;;IAjBzB,YAAY,qBAAA;IACZ,SAAS,aAAA;IACT,uBAAmB;;2BAcL,CAbf,YAae,MAAA,YAAA,GAAA;KAZb,OAAM;KACN,WAAA;KACA,SAAQ;;4BAKC,CAJT,mBAIS,QAJT,YAIS,gBAHP,qBAAA,MAAqB,SAAM,IAAqB,qBAAA,MAAqB,KAAK,WAAW,OAAO,KAAK,CAAA,CAAE,KAAI,IAAA,IAAA,gBAAA,GAAA,CAAA,GAIzG,YAGc,MAAA,UAAA,GAAA;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;;;;;uCAIQ,kBAAA,QAAA,gBAAA,UAAA,GACnB,mBAOkC,SAAA;;aAN5B;IAAJ,KAAI;6EACgB,QAAA;IACpB,OAAM;IACN,aAAY;IACZ,MAAK;IACJ,QAAM;IACN,SAAK,SAAQ,gBAAc,CAAA,OAAA,CAAA;iCALnB,YAAA,KAAW,CAAA,CAAA,KAAA,UAAA,GAQtB,YAgDiB,MAAA,cAAA,GAAA;;IA/Cf,QAAA;IACC,OAAO,aAAA;;IAWG,OAAK,cAEa,EAAA,UAAA,IAAA,GAD3B,mBAmBqB,UAAA,MAAA,WAlBF,QAAA,QAAV,WAAM;yBADf,YAmBqB,MAAA,kBAAA,GAAA;MAjBlB,KAAK;MACN,OAAM;MACL,OAAO;MACP,UAAK,WAAE,eAAe,MAAM;;6BAYvB,CAXN,mBAWM,OAAA,EAVJ,OAAK,eAAA,CAAC,iEACmB,WAAW,MAAM,IAAA,yBAAA,gCAAA,CAAA,EAAA,GAAA,CAK1C,YAGkB,MAAA,UAAA,GAAA;OAFhB,OAAM;OACN,MAAK;OACL,WAAU;eAEd,mBAA+D,QAA/D,YAA+D,gBAAhB,MAAM,GAAA,CAAA,CAAA,CAAA;;;eAEvC,QAAA,qBAAA,UAAA,GAAhB,mBAYW,UAAA,EAAA,KAAA,EAAA,GAAA,CAXoB,QAAA,MAAQ,UAAA,UAAA,GAArC,YAA+C,MAAA,qBAAA,GAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAC/C,YASqB,MAAA,kBAAA,GAAA;KARnB,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAA,QAAiB;;4BAKnB,CAJN,mBAIM,OAJN,YAIM,CAHJ,YAEc,MAAA,UAAA,GAAA;MADZ,MAAK;MACL,MAAK;qCAET,mBAAsB,QAAA,MAAhB,aAAS,EAAA,EAAA,CAAA;;;2BAhCN,CATf,YASe,MAAA,YAAA,GAAA;KARb,OAAM;KACN,SAAQ;;4BAGC,CAFT,mBAES,QAFT,YAES,gBADP,aAAA,SAAY,gBAAA,GAAA,CAAA,GAEd,YAEc,MAAA,UAAA,GAAA;MADZ,MAAK;MACL,MAAK"}
+{"version":3,"file":"DataTableInputSelect.vue.script.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarComboboxMultiselect } from '@scalar/components/combobox'\nimport {\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n} from '@scalar/components/dropdown'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { CodeInputModelValue } from '@/v2/components/code-input/CodeInput.vue'\nimport { useLocalization } from '@/v2/features/localization'\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 { translate } = useLocalization()\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=\"translate('apiClient.dataTableInputSelect.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>{{\n                translate('apiClient.dataTableInputSelect.addValue')\n              }}</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/forms/ConfirmationForm.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationForm.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/forms/ConfirmationForm.vue"],"names":[],"mappings":"AA8CA,KAAK,WAAW,GAAG;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC7B,CAAC;AAoGF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ConfirmationForm.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/forms/ConfirmationForm.vue"],"names":[],"mappings":"AAoDA,KAAK,WAAW,GAAG;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC7B,CAAC;AAwGF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +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/button'\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":""}
+{"version":3,"file":"ConfirmationForm.vue.js","names":[],"sources":["../../../../src/v2/components/forms/ConfirmationForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { label, 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\nconst { translate } = useLocalization()\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        {{ translate('apiClient.confirmationForm.cancel') }}\n      </ScalarButton>\n\n      <!-- Submit -->\n      <ScalarButton\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"variant\">\n        {{ label ?? translate('apiClient.confirmationForm.save') }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../features/localization/index.js";
 import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 //#region src/v2/components/forms/ConfirmationForm.vue?vue&type=script&setup=true&lang.ts
@@ -5,12 +6,13 @@ 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" },
+		label: {},
 		variant: { default: "solid" }
 	},
 	emits: ["cancel", "submit"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("form", {
 				class: "flex flex-col gap-4 text-base",
@@ -21,14 +23,14 @@ var ConfirmationForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				variant: "outlined",
 				onClick: _cache[0] || (_cache[0] = ($event) => emit("cancel"))
 			}, {
-				default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.confirmationForm.cancel")), 1)]),
 				_: 1
 			}), createVNode(unref(ScalarButton), {
 				size: "sm",
 				type: "submit",
 				variant: __props.variant
 			}, {
-				default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.label ?? unref(translate)("apiClient.confirmationForm.save")), 1)]),
 				_: 1
 			}, 8, ["variant"])])], 32);
 		};

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

@@ -1 +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/button'\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,QAAA,GAAA,CAAA,SAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,SAAA,GAER,mBAiBM,OAjBN,YAiBM,CAfJ,YAMe,MAAA,YAAA,GAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF0B,YAE1B,EAAA,CAAA,EAAA,CAAA;;OAGA,YAKe,MAAA,YAAA,GAAA;IAJb,MAAK;IACL,MAAK;IACJ,SAAS,QAAA;;2BACC,CAAA,gBAAA,gBAAR,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA"}
+{"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/button'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { label, 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\nconst { translate } = useLocalization()\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        {{ translate('apiClient.confirmationForm.cancel') }}\n      </ScalarButton>\n\n      <!-- Submit -->\n      <ScalarButton\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"variant\">\n        {{ label ?? translate('apiClient.confirmationForm.save') }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAYA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;;uBAGpC,mBAuBO,QAAA;IAtBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,QAAA,GAAA,CAAA,SAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,SAAA,GAER,mBAiBM,OAjBN,YAiBM,CAfJ,YAMe,MAAA,YAAA,GAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BACwC,CAAA,gBAAA,gBAAjD,MAAA,SAAA,CAAS,CAAA,mCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;OAId,YAKe,MAAA,YAAA,GAAA;IAJb,MAAK;IACL,MAAK;IACJ,SAAS,QAAA;;2BACiD,CAAA,gBAAA,gBAAxD,QAAA,SAAS,MAAA,SAAA,CAAS,CAAA,iCAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/v2/components/layout/CollapsibleSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"names":[],"mappings":"AA8HA;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;IALlB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;YA0PR,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC7B,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK;;KAAiB,KAAK,GAAG;EAUzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CollapsibleSection.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"names":[],"mappings":"AAwIA;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;IALlB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;YAkQR,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC7B,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK;;KAAiB,KAAK,GAAG;EAUzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +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/icon'\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\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\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\"\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-x border-t'\">\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":""}
+{"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/icon'\nimport { useId } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\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 { translate } = useLocalization()\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\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\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\"\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-x border-t'\">\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                >{{ translate('apiClient.collapsibleSection.collapsed') }}</span\n              >\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\">{{\n                itemCount === 1\n                  ? translate('apiClient.collapsibleSection.item')\n                  : translate('apiClient.collapsibleSection.items')\n              }}</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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../features/localization/index.js";
 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/icon";
@@ -32,6 +33,7 @@ var CollapsibleSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const headingId = useId();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Disclosure), {
@@ -61,7 +63,7 @@ var CollapsibleSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 					})) : 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)])]),
+					}, [renderSlot(_ctx.$slots, "title", { open }), !open ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(translate)("apiClient.collapsibleSection.collapsed")), 1)) : createCommentVNode("", true)], 8, _hoisted_3), !open && __props.itemCount ? (openBlock(), createElementBlock("span", _hoisted_5, [createTextVNode(toDisplayString(__props.itemCount) + " ", 1), createElementVNode("span", _hoisted_6, toDisplayString(__props.itemCount === 1 ? unref(translate)("apiClient.collapsibleSection.item") : unref(translate)("apiClient.collapsibleSection.items")), 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 })]),

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

@@ -1 +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/icon'\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\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\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\"\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-x border-t'\">\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,MAAM;;uBAItB,YA2Ea,MAAA,UAAA,GAAA;IAzEX,IAAG;IACH,OAAK,eAAA,CAAC,yEAAuE;8CACpB,QAAA;kBAA6B,QAAA;;IAIrF,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAZhD,WAAI,CAUd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,KAAK;4BAErD,mBA2DU,WAAA;KA1DP,mBAAiB,MAAA,SAAA;KAClB,OAAM;QACN,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,gCAAA,CAAA,EAAA,GAAA,CAEhB,YAkCmB,MAAA,gBAAA,GAAA;KAjCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,OAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,UAAA,GADT,YAIc,MAAA,UAAA,GAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBAsBK,MAtBL,YAsBK,CApBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,SAAA;MACL,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,KAAI,CAAA,GAAA,CAEJ,QAAA,UAAA,GADT,mBAIO,QAJP,YAEkB,eAElB,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,GAAA,CAKO,QAAQ,QAAA,aAAA,UAAA,GADjB,mBAKO,QALP,YAKO,CAAA,gBAAA,gBAFF,QAAA,SAAS,IAAG,KACf,CAAA,GAAA,mBAAiE,QAAjE,YAAsB,SAAI,gBAAG,QAAA,cAAS,IAAA,KAAA,GAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;;qCAOpCA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,GAKjB,YAIkB,MAAA,eAAA,GAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,6CAA4C,CAAA,GAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}
+{"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/icon'\nimport { useId } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\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 { translate } = useLocalization()\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\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\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\"\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-x border-t'\">\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                >{{ translate('apiClient.collapsibleSection.collapsed') }}</span\n              >\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\">{{\n                itemCount === 1\n                  ? translate('apiClient.collapsibleSection.item')\n                  : translate('apiClient.collapsibleSection.items')\n              }}</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;;;;;;;;;;;EA0BR,MAAM,OAAO;EAIb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,YAAY,MAAM;;uBAItB,YA+Ea,MAAA,UAAA,GAAA;IA7EX,IAAG;IACH,OAAK,eAAA,CAAC,yEAAuE;8CACpB,QAAA;kBAA6B,QAAA;;IAIrF,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAZhD,WAAI,CAUd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,KAAK;4BAErD,mBA+DU,WAAA;KA9DP,mBAAiB,MAAA,SAAA;KAClB,OAAM;QACN,mBAoDM,OAAA,EAnDJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,gCAAA,CAAA,EAAA,GAAA,CAEhB,YAsCmB,MAAA,gBAAA,GAAA;KArCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,OAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,UAAA,GADT,YAIc,MAAA,UAAA,GAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBA0BK,MA1BL,YA0BK,CAxBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,SAAA;MACL,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,KAAI,CAAA,GAAA,CAEJ,QAAA,UAAA,GADT,mBAIC,QAJD,YAIC,gBADK,MAAA,SAAA,CAAS,CAAA,wCAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA,GAAA,CAMR,QAAQ,QAAA,aAAA,UAAA,GADjB,mBASO,QATP,YASO,CAAA,gBAAA,gBANF,QAAA,SAAS,IAAG,KACf,CAAA,GAAA,mBAIS,QAJT,YAIS,gBAHP,QAAA,cAAS,IAA2B,MAAA,SAAA,CAAS,CAAA,mCAAA,IAA0D,MAAA,SAAA,CAAS,CAAA,oCAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;;qCAUhHA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,GAKjB,YAIkB,MAAA,eAAA,GAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,6CAA4C,CAAA,GAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}

package/dist/v2/components/modals/DeleteModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/DeleteModal.vue"],"names":[],"mappings":"AA0CA,KAAK,WAAW,GAAG;IACjB,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACpC,CAAC;AAuFF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/DeleteModal.vue"],"names":[],"mappings":"AA8CA,KAAK,WAAW,GAAG;IACjB,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACpC,CAAC;AA0FF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +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":""}
+{"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'\nimport { useLocalization } from '@/v2/features/localization'\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\nconst { translate } = useLocalization()\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=\"translate('apiClient.deleteModal.delete', { name: 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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../features/localization/index.js";
 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";
@@ -15,11 +16,12 @@ var DeleteModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	emits: ["close", "delete"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		/** 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}`,
+				label: unref(translate)("apiClient.deleteModal.delete", { name: truncatedName.value }),
 				variant: "danger",
 				onCancel: _cache[0] || (_cache[0] = ($event) => emit("close")),
 				onSubmit: _cache[1] || (_cache[1] = ($event) => emit("delete"))

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

@@ -1 +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,IAAI,CAAC;;uBAGjD,YAUmB,MAAA,wBAAA,GAAA;IAThB,OAAK,UAAY,cAAA;IAClB,SAAQ;IACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAKT,CAHI,QAAA,kBAAA,UAAA,GADR,mBAII,KAJJ,YAII,gBADC,QAAA,cAAc,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"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'\nimport { useLocalization } from '@/v2/features/localization'\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\nconst { translate } = useLocalization()\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=\"translate('apiClient.deleteModal.delete', { name: 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":";;;;;;;;;;;;;;;;;EAcA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;;EAGtC,MAAM,gBAAgB,eAAe,SAAS,QAAA,IAAI,CAAC;;uBAGjD,YAUmB,MAAA,wBAAA,GAAA;IAThB,OAAO,MAAA,SAAA,CAAS,CAAA,gCAAA,EAAA,MAAyC,cAAA,MAAa,CAAA;IACvE,SAAQ;IACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAKT,CAHI,QAAA,kBAAA,UAAA,GADR,mBAII,KAJJ,YAII,gBADC,QAAA,cAAc,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/v2/components/modals/ModalClientContainer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClientContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"names":[],"mappings":"AAyKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAK1D,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAgI9C,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ModalClientContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"names":[],"mappings":"AA8KA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAO1D,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAoI9C,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 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-77897d1c"]]);
+var ModalClientContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ModalClientContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0eebddf5"]]);
 //#endregion
 export { ModalClientContainer_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { addScalarClassesToHeadless } from '@scalar/components/helpers'\nimport type { ModalState } from '@scalar/components/modal'\nimport { ScalarTeleportRoot } from '@scalar/components/teleport'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport { nextTick, onBeforeMount, onBeforeUnmount, ref, watch } 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)\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: () => client.value as HTMLElement,\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  <div class=\"scalar scalar-app z-overlay relative\">\n    <div\n      class=\"scalar-container\"\n      :class=\"{ 'scalar-client--open': modalState.open }\">\n      <div\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</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: hidden;\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  opacity: 0;\n  pointer-events: none;\n  will-change: opacity;\n  transition:\n    opacity 0.35s ease,\n    visibility 0s linear 0.35s;\n}\n\n.scalar-container.scalar-client--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity 0.35s ease;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { addScalarClassesToHeadless } from '@scalar/components/helpers'\nimport type { ModalState } from '@scalar/components/modal'\nimport { ScalarTeleportRoot } from '@scalar/components/teleport'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport { nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{ modalState: ModalState }>()\n\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst client = ref<HTMLElement | null>(null)\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: () => client.value as HTMLElement,\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  <div class=\"scalar scalar-app z-overlay relative\">\n    <div\n      class=\"scalar-container\"\n      :class=\"{ 'scalar-client--open': modalState.open }\">\n      <div\n        ref=\"client\"\n        :aria-label=\"translate('apiClient.modalClientContainer.label')\"\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</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: hidden;\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  opacity: 0;\n  pointer-events: none;\n  will-change: opacity;\n  transition:\n    opacity 0.35s ease,\n    visibility 0s linear 0.35s;\n}\n\n.scalar-container.scalar-client--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity 0.35s ease;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n</style>\n"],"mappings":""}

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

@@ -1,9 +1,11 @@
+import { useLocalization } from "../../features/localization/index.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
 import { ScalarTeleportRoot } from "@scalar/components/teleport";
 import { addScalarClassesToHeadless } from "@scalar/components/helpers";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 //#region src/v2/components/modals/ModalClientContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "scalar scalar-app z-overlay relative" };
+var _hoisted_2 = ["aria-label"];
 var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ModalClientContainer",
 	props: { modalState: {} },
@@ -11,6 +13,7 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const client = ref(null);
 		const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(client, {
 			allowOutsideClick: true,
@@ -34,7 +37,7 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["scalar-container", { "scalar-client--open": __props.modalState.open }]) }, [createElementVNode("div", mergeProps({
 				ref_key: "client",
 				ref: client,
-				"aria-label": "API Client",
+				"aria-label": unref(translate)("apiClient.modalClientContainer.label"),
 				"aria-modal": "true"
 			}, _ctx.$attrs, {
 				class: "scalar-app-layout scalar-client",
@@ -43,7 +46,7 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 			}), [createVNode(unref(ScalarTeleportRoot), null, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_: 3
-			})], 16), createElementVNode("div", {
+			})], 16, _hoisted_2), createElementVNode("div", {
 				class: "scalar-app-exit",
 				onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
 			})], 2)]);