@scalar/pre-post-request-scripts 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalar/scripts
 
+## 0.3.11
+
+## 0.3.10
+
+### Patch Changes
+
+- [#8466](https://github.com/scalar/scalar/pull/8466): chore: new build pipeline
+
 ## 0.3.9
 
 ### Patch Changes

package/dist/PostResponseScripts-CrM65oAM.js

@@ -0,0 +1,202 @@
+import { t as ViewLayoutCollapse_default } from "./ViewLayoutCollapse-BMrPz_sj.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, toRef, unref, withCtx } from "vue";
+import { javascript } from "@codemirror/lang-javascript";
+import { useCodeMirror } from "@scalar/use-codemirror";
+//#region src/consts/example-scripts.ts
+var EXAMPLE_SCRIPTS = [
+	{
+		title: "Check the status code",
+		script: `pm.test("Status code is 200", () => {
+  pm.response.to.have.status(200)
+})`,
+		mockResponse: {
+			status: 200,
+			body: { success: true }
+		}
+	},
+	{
+		title: "Check JSON response",
+		script: `pm.test("Response is valid JSON", () => {
+  const responseData = pm.response.json()
+  pm.expect(responseData).to.be.an('object')
+})`,
+		mockResponse: {
+			status: 200,
+			body: { data: "test" },
+			headers: { "Content-Type": "application/json" }
+		}
+	},
+	{
+		title: "Check response headers",
+		script: `pm.test("Content-Type header is present", () => {
+  pm.response.to.have.header('Content-Type')
+})`,
+		mockResponse: {
+			status: 200,
+			body: { success: true },
+			headers: { "Content-Type": "application/json" }
+		}
+	},
+	{
+		title: "Validate JSON schema",
+		script: `pm.test("Response matches schema", () => {
+  const schema = {
+    type: 'object',
+    required: ['id', 'name'],
+    properties: {
+      id: { type: 'number' },
+      name: { type: 'string' }
+    }
+  }
+  pm.response.to.have.jsonSchema(schema)
+})`,
+		mockResponse: {
+			status: 200,
+			body: {
+				id: 1,
+				name: "Test Item"
+			},
+			headers: { "Content-Type": "application/json" }
+		}
+	},
+	{
+		title: "Check response body",
+		script: `pm.test("Response body contains string", () => {
+  pm.expect(pm.response.text()).to.include('success')
+})`,
+		mockResponse: {
+			status: 200,
+			body: "This is a successful response"
+		}
+	},
+	{
+		title: "Successful POST request",
+		script: `pm.test("Successful POST request", () => {
+  pm.expect(pm.response.code).to.be.oneOf([201, 202])
+})`,
+		mockResponse: {
+			status: 201,
+			body: { success: true }
+		}
+	}
+];
+//#endregion
+//#region src/plugins/post-response-scripts/components/PostResponseScripts/ExampleScripts.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "flex flex-wrap gap-1" };
+var _hoisted_2$1 = ["onClick"];
+//#endregion
+//#region src/plugins/post-response-scripts/components/PostResponseScripts/ExampleScripts.vue
+var ExampleScripts_default = /* @__PURE__ */ defineComponent({
+	__name: "ExampleScripts",
+	props: { modelValue: {} },
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const addExample = (example) => {
+			let addition = example;
+			if (props.modelValue.trim() !== "") addition = `\n\n${addition}`;
+			emit("update:modelValue", props.modelValue.trim() + addition);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(EXAMPLE_SCRIPTS), (example) => {
+				return openBlock(), createElementBlock("li", {
+					key: example.title,
+					class: "bg-b-2 text-c-2 hover:bg-b-3 inline-flex flex-col rounded-full px-3 py-1 text-xs font-medium"
+				}, [createElementVNode("button", {
+					class: "w-full",
+					type: "button",
+					onClick: ($event) => addExample(example.script)
+				}, toDisplayString(example.title), 9, _hoisted_2$1)]);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+//#region src/plugins/post-response-scripts/components/PostResponseScripts/ScriptEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "script-editor text-sm" };
+var ScriptEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScriptEditor",
+	props: { modelValue: {} },
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const codeMirrorRef = ref(null);
+		useCodeMirror({
+			codeMirrorRef,
+			content: toRef(() => props.modelValue),
+			language: void 0,
+			extensions: [javascript()],
+			lineNumbers: true,
+			onChange: (value) => {
+				emit("update:modelValue", value);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("div", {
+				ref_key: "codeMirrorRef",
+				ref: codeMirrorRef,
+				class: "editor-container"
+			}, null, 512)]);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/plugins/post-response-scripts/components/PostResponseScripts/ScriptEditor.vue
+var ScriptEditor_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScriptEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a9df3276"]]);
+//#endregion
+//#region src/plugins/post-response-scripts/components/PostResponseScripts/PostResponseScripts.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "w-full" };
+var _hoisted_2 = { class: "mr-2" };
+var _hoisted_3 = {
+	key: 0,
+	class: "bg-green h-2 w-2 rounded-full"
+};
+var _hoisted_4 = { class: "border-y p-3" };
+//#endregion
+//#region src/plugins/post-response-scripts/components/PostResponseScripts/PostResponseScripts.vue
+var PostResponseScripts_default = /* @__PURE__ */ defineComponent({
+	__name: "PostResponseScripts",
+	props: { operation: {} },
+	emits: ["operation:update:extension"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const script = computed(() => __props.operation["x-post-response"] || "");
+		const updatePostResponseScript = (value) => {
+			emit("operation:update:extension", { "x-post-response": value });
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ViewLayoutCollapse_default), {
+				class: "w-full",
+				defaultOpen: true
+			}, {
+				title: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Scripts", -1)])]),
+				suffix: withCtx(() => [createElementVNode("div", _hoisted_2, [script.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)])]),
+				default: withCtx(() => [
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "text-c-3 flex h-8 items-center border-y px-3 text-sm" }, " Post-Response ", -1)),
+					createVNode(ScriptEditor_default, {
+						modelValue: script.value,
+						"onUpdate:modelValue": updatePostResponseScript
+					}, null, 8, ["modelValue"]),
+					createElementVNode("div", _hoisted_4, [createVNode(ExampleScripts_default, {
+						modelValue: script.value,
+						"onUpdate:modelValue": updatePostResponseScript
+					}, null, 8, ["modelValue"])])
+				]),
+				_: 1
+			})]);
+		};
+	}
+});
+//#endregion
+export { PostResponseScripts_default as t };
+
+//# sourceMappingURL=PostResponseScripts-CrM65oAM.js.map

package/dist/PostResponseScripts-CrM65oAM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostResponseScripts-CrM65oAM.js","names":[],"sources":["../src/consts/example-scripts.ts","../src/plugins/post-response-scripts/components/PostResponseScripts/ExampleScripts.vue","../src/plugins/post-response-scripts/components/PostResponseScripts/ExampleScripts.vue","../src/plugins/post-response-scripts/components/PostResponseScripts/ScriptEditor.vue","../src/plugins/post-response-scripts/components/PostResponseScripts/ScriptEditor.vue","../src/plugins/post-response-scripts/components/PostResponseScripts/PostResponseScripts.vue","../src/plugins/post-response-scripts/components/PostResponseScripts/PostResponseScripts.vue"],"sourcesContent":["type ExampleScript = {\n  title: string\n  script: string\n  mockResponse: {\n    body?: any\n    status?: number\n    headers?: Record<string, string>\n    text?: () => string\n  }\n}\n\nexport const EXAMPLE_SCRIPTS: ExampleScript[] = [\n  {\n    title: 'Check the status code',\n    script: `pm.test(\"Status code is 200\", () => {\n  pm.response.to.have.status(200)\n})`,\n    mockResponse: {\n      status: 200,\n      body: { success: true },\n    },\n  },\n  // TODO: We didn't add the proper response duration yet.\n  //   {\n  //     title: 'Check response time',\n  //     script: `pm.test(\"Response time is acceptable\", () => {\n  //   pm.expect(pm.response.responseTime).to.be.below(200)\n  // })`,\n  //     mockResponse: {\n  //       status: 200,\n  //       body: { success: true },\n  //     },\n  //   },\n  {\n    title: 'Check JSON response',\n    script: `pm.test(\"Response is valid JSON\", () => {\n  const responseData = pm.response.json()\n  pm.expect(responseData).to.be.an('object')\n})`,\n    mockResponse: {\n      status: 200,\n      body: { data: 'test' },\n      headers: { 'Content-Type': 'application/json' },\n    },\n  },\n  {\n    title: 'Check response headers',\n    script: `pm.test(\"Content-Type header is present\", () => {\n  pm.response.to.have.header('Content-Type')\n})`,\n    mockResponse: {\n      status: 200,\n      body: { success: true },\n      headers: { 'Content-Type': 'application/json' },\n    },\n  },\n  {\n    title: 'Validate JSON schema',\n    script: `pm.test(\"Response matches schema\", () => {\n  const schema = {\n    type: 'object',\n    required: ['id', 'name'],\n    properties: {\n      id: { type: 'number' },\n      name: { type: 'string' }\n    }\n  }\n  pm.response.to.have.jsonSchema(schema)\n})`,\n    mockResponse: {\n      status: 200,\n      body: { id: 1, name: 'Test Item' },\n      headers: { 'Content-Type': 'application/json' },\n    },\n  },\n  {\n    title: 'Check response body',\n    script: `pm.test(\"Response body contains string\", () => {\n  pm.expect(pm.response.text()).to.include('success')\n})`,\n    mockResponse: {\n      status: 200,\n      body: 'This is a successful response',\n    },\n  },\n  {\n    title: 'Successful POST request',\n    script: `pm.test(\"Successful POST request\", () => {\n  pm.expect(pm.response.code).to.be.oneOf([201, 202])\n})`,\n    mockResponse: {\n      status: 201,\n      body: { success: true },\n    },\n  },\n]\n","<script setup lang=\"ts\">\nimport { EXAMPLE_SCRIPTS } from '@/consts/example-scripts'\n\nconst props = defineProps<{\n  modelValue: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst addExample = (example: string) => {\n  let addition = example\n  // Look at current value. If it's not empty, add a new line.\n  if (props.modelValue.trim() !== '') {\n    addition = `\\n\\n${addition}`\n  }\n\n  emit('update:modelValue', props.modelValue.trim() + addition)\n}\n</script>\n\n<template>\n  <ul class=\"flex flex-wrap gap-1\">\n    <li\n      v-for=\"example in EXAMPLE_SCRIPTS\"\n      :key=\"example.title\"\n      class=\"bg-b-2 text-c-2 hover:bg-b-3 inline-flex flex-col rounded-full px-3 py-1 text-xs font-medium\">\n      <button\n        class=\"w-full\"\n        type=\"button\"\n        @click=\"addExample(example.script)\">\n        {{ example.title }}\n      </button>\n    </li>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { EXAMPLE_SCRIPTS } from '@/consts/example-scripts'\n\nconst props = defineProps<{\n  modelValue: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst addExample = (example: string) => {\n  let addition = example\n  // Look at current value. If it's not empty, add a new line.\n  if (props.modelValue.trim() !== '') {\n    addition = `\\n\\n${addition}`\n  }\n\n  emit('update:modelValue', props.modelValue.trim() + addition)\n}\n</script>\n\n<template>\n  <ul class=\"flex flex-wrap gap-1\">\n    <li\n      v-for=\"example in EXAMPLE_SCRIPTS\"\n      :key=\"example.title\"\n      class=\"bg-b-2 text-c-2 hover:bg-b-3 inline-flex flex-col rounded-full px-3 py-1 text-xs font-medium\">\n      <button\n        class=\"w-full\"\n        type=\"button\"\n        @click=\"addExample(example.script)\">\n        {{ example.title }}\n      </button>\n    </li>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { javascript } from '@codemirror/lang-javascript'\nimport { useCodeMirror } from '@scalar/use-codemirror'\nimport { ref, toRef } from 'vue'\n\nconst props = defineProps<{\n  modelValue: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst codeMirrorRef = ref<HTMLDivElement | null>(null)\n\nuseCodeMirror({\n  codeMirrorRef,\n  content: toRef(() => props.modelValue),\n  language: undefined,\n  // We want to use some custom configuration for the syntax highlighting.\n  extensions: [javascript()],\n  lineNumbers: true,\n  onChange: (value) => {\n    emit('update:modelValue', value)\n  },\n})\n</script>\n\n<template>\n  <div class=\"script-editor text-sm\">\n    <div\n      ref=\"codeMirrorRef\"\n      class=\"editor-container\" />\n  </div>\n</template>\n\n<style scoped>\n.script-editor {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.editor-container {\n  width: 100%;\n  height: 100%;\n  background: var(--scalar-background-1);\n  border-radius: var(--scalar-radius);\n  overflow: hidden;\n  padding-left: 3px;\n}\n\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  background: var(--scalar-background-1);\n}\n\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  padding: 8px 2px;\n}\n\n:deep(.cm-gutters) {\n  border-right: none;\n  color: var(--scalar-color-3);\n  background: var(--scalar-background-1);\n  font-size: var(--scalar-mini);\n  line-height: 1.44;\n}\n\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n}\n\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: var(--scalar-background-2);\n}\n\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n\n:deep(.cm-tooltip) {\n  background: var(--scalar-background-1) !important;\n  border: 1px solid var(--scalar-border-color) !important;\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { javascript } from '@codemirror/lang-javascript'\nimport { useCodeMirror } from '@scalar/use-codemirror'\nimport { ref, toRef } from 'vue'\n\nconst props = defineProps<{\n  modelValue: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst codeMirrorRef = ref<HTMLDivElement | null>(null)\n\nuseCodeMirror({\n  codeMirrorRef,\n  content: toRef(() => props.modelValue),\n  language: undefined,\n  // We want to use some custom configuration for the syntax highlighting.\n  extensions: [javascript()],\n  lineNumbers: true,\n  onChange: (value) => {\n    emit('update:modelValue', value)\n  },\n})\n</script>\n\n<template>\n  <div class=\"script-editor text-sm\">\n    <div\n      ref=\"codeMirrorRef\"\n      class=\"editor-container\" />\n  </div>\n</template>\n\n<style scoped>\n.script-editor {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.editor-container {\n  width: 100%;\n  height: 100%;\n  background: var(--scalar-background-1);\n  border-radius: var(--scalar-radius);\n  overflow: hidden;\n  padding-left: 3px;\n}\n\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  background: var(--scalar-background-1);\n}\n\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  padding: 8px 2px;\n}\n\n:deep(.cm-gutters) {\n  border-right: none;\n  color: var(--scalar-color-3);\n  background: var(--scalar-background-1);\n  font-size: var(--scalar-mini);\n  line-height: 1.44;\n}\n\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n}\n\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: var(--scalar-background-2);\n}\n\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n\n:deep(.cm-tooltip) {\n  background: var(--scalar-background-1) !important;\n  border: 1px solid var(--scalar-border-color) !important;\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Operation } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nimport { ViewLayoutCollapse } from '@/components/ViewLayout'\n\nimport ExampleScripts from './ExampleScripts.vue'\nimport ScriptEditor from './ScriptEditor.vue'\n\nconst { operation } = defineProps<{\n  operation: Pick<Operation, 'x-post-response'>\n}>()\n\nconst emit = defineEmits<{\n  (e: 'operation:update:extension', payload: any): void\n}>()\n\nconst script = computed(() => (operation['x-post-response'] as string) || '')\n\nconst updatePostResponseScript = (value: string) => {\n  emit('operation:update:extension', {\n    'x-post-response': value,\n  })\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"w-full\"\n      :defaultOpen=\"true\">\n      <template #title>Scripts</template>\n      <template #suffix>\n        <!-- Show an indicator whether we have a script -->\n        <div class=\"mr-2\">\n          <div\n            v-if=\"script.length > 0\"\n            class=\"bg-green h-2 w-2 rounded-full\" />\n        </div>\n      </template>\n\n      <div class=\"text-c-3 flex h-8 items-center border-y px-3 text-sm\">\n        Post-Response\n      </div>\n\n      <ScriptEditor\n        :modelValue=\"script\"\n        @update:modelValue=\"updatePostResponseScript\" />\n\n      <div class=\"border-y p-3\">\n        <ExampleScripts\n          :modelValue=\"script\"\n          @update:modelValue=\"updatePostResponseScript\" />\n      </div>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Operation } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nimport { ViewLayoutCollapse } from '@/components/ViewLayout'\n\nimport ExampleScripts from './ExampleScripts.vue'\nimport ScriptEditor from './ScriptEditor.vue'\n\nconst { operation } = defineProps<{\n  operation: Pick<Operation, 'x-post-response'>\n}>()\n\nconst emit = defineEmits<{\n  (e: 'operation:update:extension', payload: any): void\n}>()\n\nconst script = computed(() => (operation['x-post-response'] as string) || '')\n\nconst updatePostResponseScript = (value: string) => {\n  emit('operation:update:extension', {\n    'x-post-response': value,\n  })\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"w-full\"\n      :defaultOpen=\"true\">\n      <template #title>Scripts</template>\n      <template #suffix>\n        <!-- Show an indicator whether we have a script -->\n        <div class=\"mr-2\">\n          <div\n            v-if=\"script.length > 0\"\n            class=\"bg-green h-2 w-2 rounded-full\" />\n        </div>\n      </template>\n\n      <div class=\"text-c-3 flex h-8 items-center border-y px-3 text-sm\">\n        Post-Response\n      </div>\n\n      <ScriptEditor\n        :modelValue=\"script\"\n        @update:modelValue=\"updatePostResponseScript\" />\n\n      <div class=\"border-y p-3\">\n        <ExampleScripts\n          :modelValue=\"script\"\n          @update:modelValue=\"updatePostResponseScript\" />\n      </div>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n"],"mappings":";;;;;AAWA,IAAa,kBAAmC;CAC9C;EACE,OAAO;EACP,QAAQ;;;EAGR,cAAc;GACZ,QAAQ;GACR,MAAM,EAAE,SAAS,MAAM;GACxB;EACF;CAYD;EACE,OAAO;EACP,QAAQ;;;;EAIR,cAAc;GACZ,QAAQ;GACR,MAAM,EAAE,MAAM,QAAQ;GACtB,SAAS,EAAE,gBAAgB,oBAAoB;GAChD;EACF;CACD;EACE,OAAO;EACP,QAAQ;;;EAGR,cAAc;GACZ,QAAQ;GACR,MAAM,EAAE,SAAS,MAAM;GACvB,SAAS,EAAE,gBAAgB,oBAAoB;GAChD;EACF;CACD;EACE,OAAO;EACP,QAAQ;;;;;;;;;;;EAWR,cAAc;GACZ,QAAQ;GACR,MAAM;IAAE,IAAI;IAAG,MAAM;IAAa;GAClC,SAAS,EAAE,gBAAgB,oBAAoB;GAChD;EACF;CACD;EACE,OAAO;EACP,QAAQ;;;EAGR,cAAc;GACZ,QAAQ;GACR,MAAM;GACP;EACF;CACD;EACE,OAAO;EACP,QAAQ;;;EAGR,cAAc;GACZ,QAAQ;GACR,MAAM,EAAE,SAAS,MAAM;GACxB;EACF;CACF;;;;;;;;;;;;EE5FD,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,cAAc,YAAoB;GACtC,IAAI,WAAW;AAEf,OAAI,MAAM,WAAW,MAAM,KAAK,GAC9B,YAAW,OAAO;AAGpB,QAAK,qBAAqB,MAAM,WAAW,MAAM,GAAG,SAAQ;;;uBAK5D,mBAYK,MAZL,cAYK,EAAA,UAAA,KAAA,EAXH,mBAUK,UAAA,MAAA,WATe,MAAA,gBAAe,GAA1B,YAAO;wBADhB,mBAUK,MAAA;KARF,KAAK,QAAQ;KACd,OAAM;QACN,mBAKS,UAAA;KAJP,OAAM;KACN,MAAK;KACJ,UAAK,WAAE,WAAW,QAAQ,OAAM;uBAC9B,QAAQ,MAAK,EAAA,GAAA,aAAA,CAAA,CAAA;;;;;;;;;;;;;EE3BxB,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,gBAAgB,IAA2B,KAAI;AAErD,gBAAc;GACZ;GACA,SAAS,YAAY,MAAM,WAAW;GACtC,UAAU,KAAA;GAEV,YAAY,CAAC,YAAY,CAAC;GAC1B,aAAa;GACb,WAAW,UAAU;AACnB,SAAK,qBAAqB,MAAK;;GAElC,CAAA;;uBAIC,mBAIM,OAJN,cAIM,CAHJ,mBAE6B,OAAA;aADvB;IAAJ,KAAI;IACJ,OAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEnBZ,MAAM,OAAO;EAIb,MAAM,SAAS,eAAgB,QAAA,UAAU,sBAAiC,GAAE;EAE5E,MAAM,4BAA4B,UAAkB;AAClD,QAAK,8BAA8B,EACjC,mBAAmB,OACpB,CAAA;;;uBAKD,mBA4BM,OA5BN,YA4BM,CA3BJ,YA0BqB,MAAA,2BAAA,EAAA;IAzBnB,OAAM;IACL,aAAa;;IACH,OAAK,cAAQ,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;IACb,QAAM,cAMT,CAJN,mBAIM,OAJN,YAIM,CAFI,OAAA,MAAO,SAAM,KAAA,WAAA,EADrB,mBAE0C,OAF1C,WAE0C,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA;2BAMxC;+BAFN,mBAEM,OAAA,EAFD,OAAM,wDAAsD,EAAC,mBAElE,GAAA;KAEA,YAEkD,sBAAA;MAD/C,YAAY,OAAA;MACZ,uBAAmB;;KAEtB,mBAIM,OAJN,YAIM,CAHJ,YAEkD,wBAAA;MAD/C,YAAY,OAAA;MACZ,uBAAmB"}

package/dist/TestResults-DIM8u91u.js

@@ -0,0 +1,224 @@
+import { t as ViewLayoutCollapse_default } from "./ViewLayoutCollapse-BMrPz_sj.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarIcon, cva, useBindCx } from "@scalar/components";
+//#region src/plugins/post-response-scripts/components/TestResults/TestResultIndicator.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = {
+	key: 1,
+	class: "ml-1.25 capitalize"
+};
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestResultIndicator.vue
+var TestResultIndicator_default = /* @__PURE__ */ defineComponent({
+	__name: "TestResultIndicator",
+	props: {
+		state: {},
+		failedTestsCount: {},
+		pendingTestsCount: {},
+		totalTestsCount: {},
+		inline: { type: Boolean }
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		const icon = computed(() => {
+			if (__props.state === "passed") return {
+				name: "Checkmark",
+				color: "text-green p-0.25"
+			};
+			if (__props.state === "failed") return {
+				name: "Close",
+				color: "text-red"
+			};
+			return {
+				name: "Ellipses",
+				color: "text-c-1"
+			};
+		});
+		const statusVariants = cva({
+			base: "flex items-center gap-1.5 rounded-full border pr-2 pl-1.25",
+			variants: { status: {
+				passed: "text-green",
+				failed: "text-red",
+				pending: "text-orange"
+			} }
+		});
+		const textVariants = cva({
+			base: "text-c-2",
+			variants: { inline: {
+				true: "text-xs",
+				false: "text-sm"
+			} }
+		});
+		const getTestCountDisplay = computed(() => {
+			if (__props.totalTestsCount === void 0) return "";
+			if (__props.failedTestsCount) return `${__props.failedTestsCount}/${__props.totalTestsCount}`;
+			return `${__props.totalTestsCount - (__props.pendingTestsCount || 0) - (__props.failedTestsCount || 0)}/${__props.totalTestsCount}`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)(unref(statusVariants)({ status: __props.state })))), [
+				__props.state ? (openBlock(), createBlock(unref(ScalarIcon), {
+					key: 0,
+					class: normalizeClass(icon.value.color),
+					icon: icon.value.name,
+					size: "sm"
+				}, null, 8, ["class", "icon"])) : createCommentVNode("", true),
+				!__props.inline ? (openBlock(), createElementBlock("span", _hoisted_1$3, toDisplayString(__props.state), 1)) : createCommentVNode("", true),
+				__props.totalTestsCount !== void 0 ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 2 }, unref(cx)(unref(textVariants)({ inline: __props.inline })))), toDisplayString(getTestCountDisplay.value), 17)) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestResultItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "flex flex-col" };
+var _hoisted_2$1 = { class: "flex items-center gap-3 p-2" };
+var _hoisted_3$1 = { class: "text-c-2 overflow-hidden text-ellipsis whitespace-nowrap" };
+var _hoisted_4 = { class: "text-c-3 ml-auto whitespace-nowrap" };
+var _hoisted_5 = {
+	key: 0,
+	class: "bg-b-danger text-c-1 flex items-center pr-3 pb-1.5 pl-9"
+};
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestResultItem.vue
+var TestResultItem_default = /* @__PURE__ */ defineComponent({
+	__name: "TestResultItem",
+	props: {
+		result: {},
+		currentState: {}
+	},
+	setup(__props) {
+		const resultStatus = computed(() => {
+			if (__props.result.passed) return {
+				icon: "Checkmark",
+				color: "text-green p-0.25"
+			};
+			if (!__props.result.passed && __props.currentState !== "pending") return {
+				icon: "Close",
+				color: "text-red"
+			};
+			return {
+				icon: "Ellipses",
+				color: "text-c-1"
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("div", { class: normalizeClass(["flex h-8 items-center gap-2 pr-3 pl-2.25", __props.result.error && "bg-b-danger"]) }, [createElementVNode("div", _hoisted_2$1, [createVNode(unref(ScalarIcon), {
+				class: normalizeClass(resultStatus.value.color),
+				icon: resultStatus.value.icon,
+				size: "sm"
+			}, null, 8, ["class", "icon"]), createElementVNode("span", _hoisted_3$1, toDisplayString(__props.result.title), 1)]), createElementVNode("span", _hoisted_4, toDisplayString(__props.result.duration) + " ms ", 1)], 2), __props.result.error ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.result.error), 1)) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestSummary.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "flex h-8 items-center gap-1.5 pr-3 pl-1" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-orange"
+};
+var _hoisted_3 = { class: "text-c-3 ml-auto" };
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestSummary.vue
+var TestSummary_default = /* @__PURE__ */ defineComponent({
+	__name: "TestSummary",
+	props: {
+		results: {},
+		passedTests: {},
+		failedTests: {},
+		pendingTests: {},
+		allTestsPassed: { type: Boolean },
+		totalDuration: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createVNode(TestResultIndicator_default, {
+					failedTestsCount: __props.failedTests?.length,
+					passedTestsCount: __props.passedTests?.length,
+					pendingTestsCount: __props.pendingTests?.length,
+					state: __props.allTestsPassed ? "passed" : "failed",
+					totalTestsCount: __props.results?.length
+				}, null, 8, [
+					"failedTestsCount",
+					"passedTestsCount",
+					"pendingTestsCount",
+					"state",
+					"totalTestsCount"
+				]),
+				__props.pendingTests?.length ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.pendingTests?.length) + " Pending ", 1)) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_3, toDisplayString(__props.totalDuration.toFixed(1)) + " ms ", 1)
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestResults.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "max-h-[calc(100%-32px)] divide-y overflow-y-auto border-t" };
+//#endregion
+//#region src/plugins/post-response-scripts/components/TestResults/TestResults.vue
+var TestResults_default = /* @__PURE__ */ defineComponent({
+	__name: "TestResults",
+	props: { results: {} },
+	setup(__props) {
+		const passedTests = computed(() => __props.results?.value?.filter((result) => result.status === "passed"));
+		const pendingTests = computed(() => __props.results?.value?.filter((result) => result.status === "pending"));
+		const failedTests = computed(() => __props.results?.value?.filter((result) => result.status === "failed"));
+		const allTestsPassed = computed(() => passedTests.value?.length === __props.results?.value?.length);
+		const currentState = computed(() => {
+			if (allTestsPassed.value) return "passed";
+			if (pendingTests.value?.length) return "pending";
+			return "failed";
+		});
+		const totalDuration = computed(() => __props.results?.value?.reduce((acc, curr) => acc + curr.duration, 0) ?? 0);
+		return (_ctx, _cache) => {
+			return __props.results?.value?.length ? (openBlock(), createBlock(unref(ViewLayoutCollapse_default), {
+				key: 0,
+				class: "overflow-auto text-sm",
+				defaultOpen: true
+			}, {
+				title: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" Tests ", -1)])]),
+				suffix: withCtx(() => [createVNode(TestResultIndicator_default, {
+					failedTestsCount: failedTests.value?.length,
+					inline: "",
+					passedTestsCount: passedTests.value?.length,
+					pendingTestsCount: pendingTests.value?.length,
+					state: currentState.value,
+					totalTestsCount: __props.results?.value?.length
+				}, null, 8, [
+					"failedTestsCount",
+					"passedTestsCount",
+					"pendingTestsCount",
+					"state",
+					"totalTestsCount"
+				])]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.results?.value, (result) => {
+					return openBlock(), createBlock(TestResultItem_default, {
+						key: result.title,
+						currentState: result.status,
+						result
+					}, null, 8, ["currentState", "result"]);
+				}), 128)), __props.results ? (openBlock(), createBlock(TestSummary_default, {
+					key: 0,
+					allTestsPassed: allTestsPassed.value,
+					failedTests: failedTests.value ?? [],
+					passedTests: passedTests.value ?? [],
+					pendingTests: pendingTests.value ?? [],
+					results: __props.results?.value,
+					totalDuration: totalDuration.value
+				}, null, 8, [
+					"allTestsPassed",
+					"failedTests",
+					"passedTests",
+					"pendingTests",
+					"results",
+					"totalDuration"
+				])) : createCommentVNode("", true)])]),
+				_: 1
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { TestResults_default as t };
+
+//# sourceMappingURL=TestResults-DIM8u91u.js.map

package/dist/TestResults-DIM8u91u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestResults-DIM8u91u.js","names":[],"sources":["../src/plugins/post-response-scripts/components/TestResults/TestResultIndicator.vue","../src/plugins/post-response-scripts/components/TestResults/TestResultIndicator.vue","../src/plugins/post-response-scripts/components/TestResults/TestResultItem.vue","../src/plugins/post-response-scripts/components/TestResults/TestResultItem.vue","../src/plugins/post-response-scripts/components/TestResults/TestSummary.vue","../src/plugins/post-response-scripts/components/TestResults/TestSummary.vue","../src/plugins/post-response-scripts/components/TestResults/TestResults.vue","../src/plugins/post-response-scripts/components/TestResults/TestResults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarIcon, useBindCx, type Icon } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport type { TestResult } from '@/libs/execute-scripts'\n\nconst { state, totalTestsCount, pendingTestsCount, failedTestsCount } =\n  defineProps<{\n    state?: TestResult['status']\n    failedTestsCount: number | undefined\n    pendingTestsCount: number | undefined\n    totalTestsCount: number | undefined\n    inline?: boolean\n  }>()\n\nconst { cx } = useBindCx()\n\nconst icon = computed(() => {\n  if (state === 'passed') {\n    return { name: 'Checkmark', color: 'text-green p-0.25' }\n  }\n\n  if (state === 'failed') {\n    return { name: 'Close', color: 'text-red' }\n  }\n\n  return { name: 'Ellipses', color: 'text-c-1' }\n})\n\nconst statusVariants = cva({\n  base: 'flex items-center gap-1.5 rounded-full border pr-2 pl-1.25',\n  variants: {\n    status: {\n      passed: 'text-green',\n      failed: 'text-red',\n      pending: 'text-orange',\n    },\n  },\n})\n\nconst textVariants = cva({\n  base: 'text-c-2',\n  variants: {\n    inline: {\n      true: 'text-xs',\n      false: 'text-sm',\n    },\n  },\n})\n\n// Display the number of tests that passed e.g 1/3\nconst getTestCountDisplay = computed(() => {\n  // When there are no tests, show nothing\n  if (totalTestsCount === undefined) {\n    return ''\n  }\n\n  // When they failed, show failed/total\n  if (failedTestsCount) {\n    return `${failedTestsCount}/${totalTestsCount}`\n  }\n\n  // When they passed, show passed/total\n  const completedTests =\n    totalTestsCount - (pendingTestsCount || 0) - (failedTestsCount || 0)\n  return `${completedTests}/${totalTestsCount}`\n})\n</script>\n\n<template>\n  <div v-bind=\"cx(statusVariants({ status: state }))\">\n    <ScalarIcon\n      v-if=\"state\"\n      :class=\"icon.color\"\n      :icon=\"icon.name as Icon\"\n      size=\"sm\" />\n    <span\n      v-if=\"!inline\"\n      class=\"ml-1.25 capitalize\">\n      {{ state }}\n    </span>\n    <span\n      v-if=\"totalTestsCount !== undefined\"\n      v-bind=\"cx(textVariants({ inline }))\">\n      {{ getTestCountDisplay }}\n    </span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, ScalarIcon, useBindCx, type Icon } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport type { TestResult } from '@/libs/execute-scripts'\n\nconst { state, totalTestsCount, pendingTestsCount, failedTestsCount } =\n  defineProps<{\n    state?: TestResult['status']\n    failedTestsCount: number | undefined\n    pendingTestsCount: number | undefined\n    totalTestsCount: number | undefined\n    inline?: boolean\n  }>()\n\nconst { cx } = useBindCx()\n\nconst icon = computed(() => {\n  if (state === 'passed') {\n    return { name: 'Checkmark', color: 'text-green p-0.25' }\n  }\n\n  if (state === 'failed') {\n    return { name: 'Close', color: 'text-red' }\n  }\n\n  return { name: 'Ellipses', color: 'text-c-1' }\n})\n\nconst statusVariants = cva({\n  base: 'flex items-center gap-1.5 rounded-full border pr-2 pl-1.25',\n  variants: {\n    status: {\n      passed: 'text-green',\n      failed: 'text-red',\n      pending: 'text-orange',\n    },\n  },\n})\n\nconst textVariants = cva({\n  base: 'text-c-2',\n  variants: {\n    inline: {\n      true: 'text-xs',\n      false: 'text-sm',\n    },\n  },\n})\n\n// Display the number of tests that passed e.g 1/3\nconst getTestCountDisplay = computed(() => {\n  // When there are no tests, show nothing\n  if (totalTestsCount === undefined) {\n    return ''\n  }\n\n  // When they failed, show failed/total\n  if (failedTestsCount) {\n    return `${failedTestsCount}/${totalTestsCount}`\n  }\n\n  // When they passed, show passed/total\n  const completedTests =\n    totalTestsCount - (pendingTestsCount || 0) - (failedTestsCount || 0)\n  return `${completedTests}/${totalTestsCount}`\n})\n</script>\n\n<template>\n  <div v-bind=\"cx(statusVariants({ status: state }))\">\n    <ScalarIcon\n      v-if=\"state\"\n      :class=\"icon.color\"\n      :icon=\"icon.name as Icon\"\n      size=\"sm\" />\n    <span\n      v-if=\"!inline\"\n      class=\"ml-1.25 capitalize\">\n      {{ state }}\n    </span>\n    <span\n      v-if=\"totalTestsCount !== undefined\"\n      v-bind=\"cx(textVariants({ inline }))\">\n      {{ getTestCountDisplay }}\n    </span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon, type Icon } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport type { TestResult } from '@/libs/execute-scripts'\n\nconst { currentState, result } = defineProps<{\n  result: TestResult\n  currentState: TestResult['status']\n}>()\n\nconst resultStatus = computed(() => {\n  if (result.passed) {\n    return { icon: 'Checkmark', color: 'text-green p-0.25' }\n  }\n\n  if (!result.passed && currentState !== 'pending') {\n    return { icon: 'Close', color: 'text-red' }\n  }\n\n  return { icon: 'Ellipses', color: 'text-c-1' }\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div\n      class=\"flex h-8 items-center gap-2 pr-3 pl-2.25\"\n      :class=\"result.error && 'bg-b-danger'\">\n      <!-- Title -->\n      <div class=\"flex items-center gap-3 p-2\">\n        <ScalarIcon\n          :class=\"resultStatus.color\"\n          :icon=\"resultStatus.icon as Icon\"\n          size=\"sm\" />\n\n        <span class=\"text-c-2 overflow-hidden text-ellipsis whitespace-nowrap\">\n          {{ result.title }}\n        </span>\n      </div>\n      <!-- Duration -->\n      <span class=\"text-c-3 ml-auto whitespace-nowrap\">\n        {{ result.duration }} ms\n      </span>\n    </div>\n    <!-- Error -->\n    <div\n      v-if=\"result.error\"\n      class=\"bg-b-danger text-c-1 flex items-center pr-3 pb-1.5 pl-9\">\n      {{ result.error }}\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon, type Icon } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport type { TestResult } from '@/libs/execute-scripts'\n\nconst { currentState, result } = defineProps<{\n  result: TestResult\n  currentState: TestResult['status']\n}>()\n\nconst resultStatus = computed(() => {\n  if (result.passed) {\n    return { icon: 'Checkmark', color: 'text-green p-0.25' }\n  }\n\n  if (!result.passed && currentState !== 'pending') {\n    return { icon: 'Close', color: 'text-red' }\n  }\n\n  return { icon: 'Ellipses', color: 'text-c-1' }\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div\n      class=\"flex h-8 items-center gap-2 pr-3 pl-2.25\"\n      :class=\"result.error && 'bg-b-danger'\">\n      <!-- Title -->\n      <div class=\"flex items-center gap-3 p-2\">\n        <ScalarIcon\n          :class=\"resultStatus.color\"\n          :icon=\"resultStatus.icon as Icon\"\n          size=\"sm\" />\n\n        <span class=\"text-c-2 overflow-hidden text-ellipsis whitespace-nowrap\">\n          {{ result.title }}\n        </span>\n      </div>\n      <!-- Duration -->\n      <span class=\"text-c-3 ml-auto whitespace-nowrap\">\n        {{ result.duration }} ms\n      </span>\n    </div>\n    <!-- Error -->\n    <div\n      v-if=\"result.error\"\n      class=\"bg-b-danger text-c-1 flex items-center pr-3 pb-1.5 pl-9\">\n      {{ result.error }}\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { TestResult } from '@/libs/execute-scripts'\n\nimport TestResultIndicator from './TestResultIndicator.vue'\n\ndefineProps<{\n  results: TestResult[]\n  passedTests: TestResult[]\n  failedTests: TestResult[]\n  pendingTests: TestResult[]\n  allTestsPassed: boolean\n  totalDuration: number\n}>()\n</script>\n\n<template>\n  <div class=\"flex h-8 items-center gap-1.5 pr-3 pl-1\">\n    <TestResultIndicator\n      :failedTestsCount=\"failedTests?.length\"\n      :passedTestsCount=\"passedTests?.length\"\n      :pendingTestsCount=\"pendingTests?.length\"\n      :state=\"allTestsPassed ? 'passed' : 'failed'\"\n      :totalTestsCount=\"results?.length\" />\n    <span\n      v-if=\"pendingTests?.length\"\n      class=\"text-orange\">\n      {{ pendingTests?.length }}\n      Pending\n    </span>\n    <span class=\"text-c-3 ml-auto\"> {{ totalDuration.toFixed(1) }} ms </span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { TestResult } from '@/libs/execute-scripts'\n\nimport TestResultIndicator from './TestResultIndicator.vue'\n\ndefineProps<{\n  results: TestResult[]\n  passedTests: TestResult[]\n  failedTests: TestResult[]\n  pendingTests: TestResult[]\n  allTestsPassed: boolean\n  totalDuration: number\n}>()\n</script>\n\n<template>\n  <div class=\"flex h-8 items-center gap-1.5 pr-3 pl-1\">\n    <TestResultIndicator\n      :failedTestsCount=\"failedTests?.length\"\n      :passedTestsCount=\"passedTests?.length\"\n      :pendingTestsCount=\"pendingTests?.length\"\n      :state=\"allTestsPassed ? 'passed' : 'failed'\"\n      :totalTestsCount=\"results?.length\" />\n    <span\n      v-if=\"pendingTests?.length\"\n      class=\"text-orange\">\n      {{ pendingTests?.length }}\n      Pending\n    </span>\n    <span class=\"text-c-3 ml-auto\"> {{ totalDuration.toFixed(1) }} ms </span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, type Ref } from 'vue'\n\nimport type { TestResult } from '@/libs/execute-scripts'\n\nimport { ViewLayoutCollapse } from '../../../../components/ViewLayout'\nimport TestResultIndicator from './TestResultIndicator.vue'\nimport TestResultItem from './TestResultItem.vue'\nimport TestSummary from './TestSummary.vue'\n\nconst { results } = defineProps<{\n  results?: Ref<TestResult[]> | undefined\n}>()\n\nconst passedTests = computed(() =>\n  results?.value?.filter((result: TestResult) => result.status === 'passed'),\n)\n\nconst pendingTests = computed(() =>\n  results?.value?.filter((result: TestResult) => result.status === 'pending'),\n)\n\nconst failedTests = computed(() =>\n  results?.value?.filter((result: TestResult) => result.status === 'failed'),\n)\n\nconst allTestsPassed = computed(\n  () => passedTests.value?.length === results?.value?.length,\n)\n\nconst currentState = computed(() => {\n  if (allTestsPassed.value) {\n    return 'passed'\n  }\n\n  if (pendingTests.value?.length) {\n    return 'pending'\n  }\n\n  return 'failed'\n})\n\nconst totalDuration = computed(\n  () =>\n    results?.value?.reduce(\n      (acc: number, curr: TestResult) => acc + curr.duration,\n      0,\n    ) ?? 0,\n)\n</script>\n\n<template>\n  <ViewLayoutCollapse\n    v-if=\"results?.value?.length\"\n    class=\"overflow-auto text-sm\"\n    :defaultOpen=\"true\">\n    <template #title> Tests </template>\n    <template #suffix>\n      <TestResultIndicator\n        :failedTestsCount=\"failedTests?.length\"\n        inline\n        :passedTestsCount=\"passedTests?.length\"\n        :pendingTestsCount=\"pendingTests?.length\"\n        :state=\"currentState\"\n        :totalTestsCount=\"results?.value?.length\" />\n    </template>\n\n    <div class=\"max-h-[calc(100%-32px)] divide-y overflow-y-auto border-t\">\n      <!-- Results -->\n      <TestResultItem\n        v-for=\"result in results?.value\"\n        :key=\"result.title\"\n        :currentState=\"result.status\"\n        :result=\"result\" />\n\n      <TestSummary\n        v-if=\"results\"\n        :allTestsPassed=\"allTestsPassed\"\n        :failedTests=\"failedTests ?? []\"\n        :passedTests=\"passedTests ?? []\"\n        :pendingTests=\"pendingTests ?? []\"\n        :results=\"results?.value\"\n        :totalDuration=\"totalDuration\" />\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, type Ref } from 'vue'\n\nimport type { TestResult } from '@/libs/execute-scripts'\n\nimport { ViewLayoutCollapse } from '../../../../components/ViewLayout'\nimport TestResultIndicator from './TestResultIndicator.vue'\nimport TestResultItem from './TestResultItem.vue'\nimport TestSummary from './TestSummary.vue'\n\nconst { results } = defineProps<{\n  results?: Ref<TestResult[]> | undefined\n}>()\n\nconst passedTests = computed(() =>\n  results?.value?.filter((result: TestResult) => result.status === 'passed'),\n)\n\nconst pendingTests = computed(() =>\n  results?.value?.filter((result: TestResult) => result.status === 'pending'),\n)\n\nconst failedTests = computed(() =>\n  results?.value?.filter((result: TestResult) => result.status === 'failed'),\n)\n\nconst allTestsPassed = computed(\n  () => passedTests.value?.length === results?.value?.length,\n)\n\nconst currentState = computed(() => {\n  if (allTestsPassed.value) {\n    return 'passed'\n  }\n\n  if (pendingTests.value?.length) {\n    return 'pending'\n  }\n\n  return 'failed'\n})\n\nconst totalDuration = computed(\n  () =>\n    results?.value?.reduce(\n      (acc: number, curr: TestResult) => acc + curr.duration,\n      0,\n    ) ?? 0,\n)\n</script>\n\n<template>\n  <ViewLayoutCollapse\n    v-if=\"results?.value?.length\"\n    class=\"overflow-auto text-sm\"\n    :defaultOpen=\"true\">\n    <template #title> Tests </template>\n    <template #suffix>\n      <TestResultIndicator\n        :failedTestsCount=\"failedTests?.length\"\n        inline\n        :passedTestsCount=\"passedTests?.length\"\n        :pendingTestsCount=\"pendingTests?.length\"\n        :state=\"currentState\"\n        :totalTestsCount=\"results?.value?.length\" />\n    </template>\n\n    <div class=\"max-h-[calc(100%-32px)] divide-y overflow-y-auto border-t\">\n      <!-- Results -->\n      <TestResultItem\n        v-for=\"result in results?.value\"\n        :key=\"result.title\"\n        :currentState=\"result.status\"\n        :result=\"result\" />\n\n      <TestSummary\n        v-if=\"results\"\n        :allTestsPassed=\"allTestsPassed\"\n        :failedTests=\"failedTests ?? []\"\n        :passedTests=\"passedTests ?? []\"\n        :pendingTests=\"pendingTests ?? []\"\n        :results=\"results?.value\"\n        :totalDuration=\"totalDuration\" />\n    </div>\n  </ViewLayoutCollapse>\n</template>\n"],"mappings":"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"}

package/dist/ViewLayoutCollapse-BMrPz_sj.js

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

package/dist/ViewLayoutCollapse-BMrPz_sj.js.map

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