@scalar/agent-chat 0.12.20 → 0.12.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -3
- package/dist/components/ApprovalSection.vue.js +1 -1
- package/dist/components/ApprovalSection.vue.js.map +1 -1
- package/dist/components/ApprovalSection.vue.script.js.map +1 -1
- package/dist/components/BuildingRequest.vue.js +1 -1
- package/dist/components/BuildingRequest.vue.js.map +1 -1
- package/dist/components/ContextItem.vue.js +1 -1
- package/dist/components/ContextItem.vue.js.map +1 -1
- package/dist/components/ContextItem.vue.script.js.map +1 -1
- package/dist/components/ErrorMessage.vue.js +1 -1
- package/dist/components/ErrorMessage.vue.js.map +1 -1
- package/dist/components/ErrorMessage.vue.script.js.map +1 -1
- package/dist/components/FreeMessagesInfoSection.vue.js +1 -1
- package/dist/components/FreeMessagesInfoSection.vue.js.map +1 -1
- package/dist/components/FreeMessagesInfoSection.vue.script.js.map +1 -1
- package/dist/components/LoadingOpenAPISpecsSummary.vue.js +1 -1
- package/dist/components/LoadingOpenAPISpecsSummary.vue.js.map +1 -1
- package/dist/components/LoadingSearchOpenAPIOperations.vue.js +1 -1
- package/dist/components/LoadingSearchOpenAPIOperations.vue.js.map +1 -1
- package/dist/components/PaymentSection.vue.js +1 -1
- package/dist/components/PaymentSection.vue.js.map +1 -1
- package/dist/components/PaymentSection.vue.script.js +1 -1
- package/dist/components/PaymentSection.vue.script.js.map +1 -1
- package/dist/components/RequestFailed.vue.js +1 -1
- package/dist/components/RequestFailed.vue.js.map +1 -1
- package/dist/components/RequestPreview.vue.js +1 -1
- package/dist/components/RequestPreview.vue.js.map +1 -1
- package/dist/components/RequestPreview.vue.script.js.map +1 -1
- package/dist/components/SendingRequest.vue.js +1 -1
- package/dist/components/SendingRequest.vue.js.map +1 -1
- package/dist/components/UploadSection.vue.js +1 -1
- package/dist/components/UploadSection.vue.js.map +1 -1
- package/dist/components/UploadSection.vue.script.js.map +1 -1
- package/dist/package.json +1 -1
- package/dist/style.css +220 -221
- package/dist/views/Chat/Chat.vue.js +1 -1
- package/dist/views/Chat/Chat.vue.js.map +1 -1
- package/dist/views/Chat/Chat.vue.script.js.map +1 -1
- package/dist/views/Chat/Messages/ExecuteRequestTool.vue.d.ts.map +1 -1
- package/dist/views/Chat/Messages/ExecuteRequestTool.vue.js +1 -1
- package/dist/views/Chat/Messages/ExecuteRequestTool.vue.js.map +1 -1
- package/dist/views/Chat/Messages/ExecuteRequestTool.vue.script.js.map +1 -1
- package/dist/views/PromptForm.vue.js +1 -1
- package/dist/views/PromptForm.vue.js.map +1 -1
- package/dist/views/PromptForm.vue.script.js.map +1 -1
- package/dist/vue-styles.css +176 -182
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -7,9 +7,8 @@ Agent chat components
|
|
|
7
7
|
Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.
|
|
8
8
|
|
|
9
9
|
- **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
|
|
10
|
-
- **[Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
|
|
11
|
-
- **[
|
|
12
|
-
- **[MCP Servers](https://scalar.com/products/agent/getting-started)** — Generate secure MCP servers from your API spec.
|
|
10
|
+
- **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
|
|
11
|
+
- **[SDK Generator](https://scalar.com/products/sdks/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
|
|
13
12
|
- **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.
|
|
14
13
|
|
|
15
14
|
20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import ApprovalSection_vue_vue_type_script_setup_true_lang_default from "./ApprovalSection.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/ApprovalSection.vue
|
|
5
|
-
var ApprovalSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ApprovalSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var ApprovalSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ApprovalSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-fb5102df"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ApprovalSection_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApprovalSection.vue.js","names":[],"sources":["../../src/components/ApprovalSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nconst emit = defineEmits<{\n (e: 'approve'): void\n (e: 'reject'): void\n}>()\n</script>\n\n<template>\n <div class=\"approvalSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n One or more requests require approval.\n </strong>\n <div class=\"approveContainer\">\n <button\n type=\"button\"\n class=\"actionButton rejectButton\"\n @click=\"emit('reject')\">\n Reject\n </button>\n <button\n type=\"button\"\n class=\"actionButton approveButton\"\n @click=\"emit('approve')\">\n Approve\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.approvalSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"ApprovalSection.vue.js","names":[],"sources":["../../src/components/ApprovalSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nconst emit = defineEmits<{\n (e: 'approve'): void\n (e: 'reject'): void\n}>()\n</script>\n\n<template>\n <div class=\"approvalSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n One or more requests require approval.\n </strong>\n <div class=\"approveContainer\">\n <button\n type=\"button\"\n class=\"actionButton rejectButton\"\n @click=\"emit('reject')\">\n Reject\n </button>\n <button\n type=\"button\"\n class=\"actionButton approveButton\"\n @click=\"emit('approve')\">\n Approve\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.approvalSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n\n.approvalText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.approveContainer {\n display: flex;\n gap: 5px;\n}\n\n.actionButton {\n display: flex;\n align-items: center;\n font-weight: var(--scalar-semibold);\n border-radius: var(--scalar-radius-full);\n padding: 6px 12px;\n font-size: var(--scalar-font-size-3);\n}\n\n.rejectButton {\n color: white;\n background: var(--scalar-color-red);\n}\n.rejectButton:hover,\n.rejectButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n\n.approveButton {\n color: white;\n background: var(--scalar-color-blue);\n}\n.approveButton:hover,\n.approveButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApprovalSection.vue.script.js","names":[],"sources":["../../src/components/ApprovalSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nconst emit = defineEmits<{\n (e: 'approve'): void\n (e: 'reject'): void\n}>()\n</script>\n\n<template>\n <div class=\"approvalSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n One or more requests require approval.\n </strong>\n <div class=\"approveContainer\">\n <button\n type=\"button\"\n class=\"actionButton rejectButton\"\n @click=\"emit('reject')\">\n Reject\n </button>\n <button\n type=\"button\"\n class=\"actionButton approveButton\"\n @click=\"emit('approve')\">\n Approve\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.approvalSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"ApprovalSection.vue.script.js","names":[],"sources":["../../src/components/ApprovalSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nconst emit = defineEmits<{\n (e: 'approve'): void\n (e: 'reject'): void\n}>()\n</script>\n\n<template>\n <div class=\"approvalSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n One or more requests require approval.\n </strong>\n <div class=\"approveContainer\">\n <button\n type=\"button\"\n class=\"actionButton rejectButton\"\n @click=\"emit('reject')\">\n Reject\n </button>\n <button\n type=\"button\"\n class=\"actionButton approveButton\"\n @click=\"emit('approve')\">\n Approve\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.approvalSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n\n.approvalText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.approveContainer {\n display: flex;\n gap: 5px;\n}\n\n.actionButton {\n display: flex;\n align-items: center;\n font-weight: var(--scalar-semibold);\n border-radius: var(--scalar-radius-full);\n padding: 6px 12px;\n font-size: var(--scalar-font-size-3);\n}\n\n.rejectButton {\n color: white;\n background: var(--scalar-color-red);\n}\n.rejectButton:hover,\n.rejectButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n\n.approveButton {\n color: white;\n background: var(--scalar-color-blue);\n}\n.approveButton:hover,\n.approveButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;EAGA,MAAM,OAAO;;uBAOX,mBAqBM,OArBN,YAqBM,CApBJ,mBAKS,UALT,YAKS,CAJP,YAEkB,MAAA,eAAA,EAAA;IADhB,OAAM;IACN,QAAO;iDAAS,4CAEpB,GAAA,EAAA,CAAA,EACA,mBAaM,OAbN,YAaM,CAZJ,mBAKS,UAAA;IAJP,MAAK;IACL,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;MAAY,WAE1B,EACA,mBAKS,UAAA;IAJP,MAAK;IACL,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;MAAa,YAE3B,CAAA,CAAA,CAAA,CAAA"}
|
|
@@ -13,7 +13,7 @@ function _sfc_render(_ctx, _cache) {
|
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg"
|
|
14
14
|
}, [createElementVNode("path", { d: "M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z" })])], -1), createTextVNode(" Building Request... ", -1)])]);
|
|
15
15
|
}
|
|
16
|
-
var BuildingRequest_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
16
|
+
var BuildingRequest_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5a1d2b16"]]);
|
|
17
17
|
//#endregion
|
|
18
18
|
export { BuildingRequest_default as default };
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuildingRequest.vue.js","names":[],"sources":["../../src/components/BuildingRequest.vue"],"sourcesContent":["<template>\n <div class=\"buildingRequest\">\n <div class=\"playIcon\">\n <svg\n fill=\"currentColor\"\n height=\"32\"\n viewBox=\"0 0 256 256\"\n width=\"32\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"></path>\n </svg>\n </div>\n Building Request...\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius:
|
|
1
|
+
{"version":3,"file":"BuildingRequest.vue.js","names":[],"sources":["../../src/components/BuildingRequest.vue"],"sourcesContent":["<template>\n <div class=\"buildingRequest\">\n <div class=\"playIcon\">\n <svg\n fill=\"currentColor\"\n height=\"32\"\n viewBox=\"0 0 256 256\"\n width=\"32\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"></path>\n </svg>\n </div>\n Building Request...\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius: var(--scalar-radius-full);\n}\n\n.playIcon::before {\n content: '';\n width: 16px;\n height: 16px;\n display: inline-block;\n box-sizing: border-box;\n position: absolute;\n border-width: 1.75px;\n border-style: solid;\n border-color: currentcolor currentcolor transparent;\n border-image: initial;\n border-radius: var(--scalar-radius-full);\n background: var(--scalar-background-1);\n animation: 0.42s linear 0s infinite normal none running rotation;\n}\n\n.buildingRequest {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--scalar-color-blue);\n font-weight: var(--scalar-semibold);\n min-height: 40px;\n font-size: var(--scalar-font-size-3);\n position: relative;\n}\n\n.buildingRequest svg {\n width: 100%;\n height: 100%;\n z-index: 1;\n border-radius: var(--scalar-radius-full);\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n"],"mappings":";;;;;mBACO,OAAM,mBAAiB;;qBAA5B,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZJ,mBAUM,OAAA,EAVD,OAAM,YAAU,EAAA,CACnB,mBAQM,OAAA;EAPJ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,OAAM;KACN,mBAC4M,QAAA,EAA1M,GAAE,kMAAgM,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,gBAElM,yBAER,GAAA,CAAA,EAAA,CAAA"}
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import ContextItem_vue_vue_type_script_setup_true_lang_default from "./ContextItem.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/ContextItem.vue
|
|
5
|
-
var ContextItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ContextItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var ContextItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ContextItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0509fef2"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ContextItem_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextItem.vue.js","names":[],"sources":["../../src/components/ContextItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { loading } = defineProps<{ loading: boolean }>()\n</script>\n\n<template>\n <div\n class=\"contextItem\"\n :class=\"{\n shimmer: loading,\n }\">\n <span class=\"contextItemText\">\n <slot />\n </span>\n </div>\n</template>\n\n<style scoped>\n.contextItem {\n white-space: nowrap;\n font-size: 10px;\n display: inline-block;\n color: var(--scalar-color-2);\n cursor: pointer;\n vertical-align: middle;\n padding: 1px 8px;\n border-radius:
|
|
1
|
+
{"version":3,"file":"ContextItem.vue.js","names":[],"sources":["../../src/components/ContextItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { loading } = defineProps<{ loading: boolean }>()\n</script>\n\n<template>\n <div\n class=\"contextItem\"\n :class=\"{\n shimmer: loading,\n }\">\n <span class=\"contextItemText\">\n <slot />\n </span>\n </div>\n</template>\n\n<style scoped>\n.contextItem {\n white-space: nowrap;\n font-size: 10px;\n display: inline-block;\n color: var(--scalar-color-2);\n cursor: pointer;\n vertical-align: middle;\n padding: 1px 8px;\n border-radius: var(--scalar-radius-2xl);\n padding: 5px 10px;\n display: flex;\n align-items: center;\n background: color-mix(\n in srgb,\n var(--scalar-background-2),\n var(--scalar-background-1)\n );\n max-width: 200px;\n}\n\n.contextItemText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.shimmer {\n background: var(--scalar-background-2);\n background-image: linear-gradient(\n 90deg,\n #202020 0%,\n var(--scalar-background-2) 40%,\n var(--scalar-background-3) 80%\n );\n background-size: 200% 100%;\n animation: shimmer 1.4s ease-in-out infinite;\n}\n\n.light-mode .shimmer {\n background: var(--scalar-background-2);\n background-image: linear-gradient(\n 90deg,\n #fafafa 0%,\n var(--scalar-background-2) 40%,\n var(--scalar-background-3) 80%\n );\n background-size: 200% 100%;\n animation: shimmer 1.4s ease-in-out infinite;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextItem.vue.script.js","names":[],"sources":["../../src/components/ContextItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { loading } = defineProps<{ loading: boolean }>()\n</script>\n\n<template>\n <div\n class=\"contextItem\"\n :class=\"{\n shimmer: loading,\n }\">\n <span class=\"contextItemText\">\n <slot />\n </span>\n </div>\n</template>\n\n<style scoped>\n.contextItem {\n white-space: nowrap;\n font-size: 10px;\n display: inline-block;\n color: var(--scalar-color-2);\n cursor: pointer;\n vertical-align: middle;\n padding: 1px 8px;\n border-radius:
|
|
1
|
+
{"version":3,"file":"ContextItem.vue.script.js","names":[],"sources":["../../src/components/ContextItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { loading } = defineProps<{ loading: boolean }>()\n</script>\n\n<template>\n <div\n class=\"contextItem\"\n :class=\"{\n shimmer: loading,\n }\">\n <span class=\"contextItemText\">\n <slot />\n </span>\n </div>\n</template>\n\n<style scoped>\n.contextItem {\n white-space: nowrap;\n font-size: 10px;\n display: inline-block;\n color: var(--scalar-color-2);\n cursor: pointer;\n vertical-align: middle;\n padding: 1px 8px;\n border-radius: var(--scalar-radius-2xl);\n padding: 5px 10px;\n display: flex;\n align-items: center;\n background: color-mix(\n in srgb,\n var(--scalar-background-2),\n var(--scalar-background-1)\n );\n max-width: 200px;\n}\n\n.contextItemText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.shimmer {\n background: var(--scalar-background-2);\n background-image: linear-gradient(\n 90deg,\n #202020 0%,\n var(--scalar-background-2) 40%,\n var(--scalar-background-3) 80%\n );\n background-size: 200% 100%;\n animation: shimmer 1.4s ease-in-out infinite;\n}\n\n.light-mode .shimmer {\n background: var(--scalar-background-2);\n background-image: linear-gradient(\n 90deg,\n #fafafa 0%,\n var(--scalar-background-2) 40%,\n var(--scalar-background-3) 80%\n );\n background-size: 200% 100%;\n animation: shimmer 1.4s ease-in-out infinite;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n</style>\n"],"mappings":";;;;;;;;uBAKE,mBAQM,OAAA,EAPJ,OAAK,eAAA,CAAC,eAAa,EAAA,SACM,QAAA,SAAA,CAAA,CAAA,EAAA,EAAA,CAGzB,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import ErrorMessage_vue_vue_type_script_setup_true_lang_default from "./ErrorMessage.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/ErrorMessage.vue
|
|
5
|
-
var ErrorMessage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ErrorMessage_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var ErrorMessage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ErrorMessage_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-130cb1d5"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ErrorMessage_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorMessage.vue.js","names":[],"sources":["../../src/components/ErrorMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { AgentErrorCodes } from '@/entities/error/constants'\nimport { type ChatError } from '@/hooks/use-chat-error'\n\nconst { error } = defineProps<{ error: ChatError }>()\n\nconst HIDDEN_ERROR_CODES: string[] = [AgentErrorCodes.LIMIT_REACHED]\n</script>\n\n<template>\n <div\n v-if=\"!HIDDEN_ERROR_CODES.includes(error.code)\"\n class=\"error gap-1.5\">\n <ScalarIconInfo\n class=\"text-red size-4\"\n weight=\"bold\" />\n {{ error.message }}\n </div>\n</template>\n\n<style scoped>\n.error {\n display: flex;\n align-items: center;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"ErrorMessage.vue.js","names":[],"sources":["../../src/components/ErrorMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { AgentErrorCodes } from '@/entities/error/constants'\nimport { type ChatError } from '@/hooks/use-chat-error'\n\nconst { error } = defineProps<{ error: ChatError }>()\n\nconst HIDDEN_ERROR_CODES: string[] = [AgentErrorCodes.LIMIT_REACHED]\n</script>\n\n<template>\n <div\n v-if=\"!HIDDEN_ERROR_CODES.includes(error.code)\"\n class=\"error gap-1.5\">\n <ScalarIconInfo\n class=\"text-red size-4\"\n weight=\"bold\" />\n {{ error.message }}\n </div>\n</template>\n\n<style scoped>\n.error {\n display: flex;\n align-items: center;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 95%\n );\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorMessage.vue.script.js","names":[],"sources":["../../src/components/ErrorMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { AgentErrorCodes } from '@/entities/error/constants'\nimport { type ChatError } from '@/hooks/use-chat-error'\n\nconst { error } = defineProps<{ error: ChatError }>()\n\nconst HIDDEN_ERROR_CODES: string[] = [AgentErrorCodes.LIMIT_REACHED]\n</script>\n\n<template>\n <div\n v-if=\"!HIDDEN_ERROR_CODES.includes(error.code)\"\n class=\"error gap-1.5\">\n <ScalarIconInfo\n class=\"text-red size-4\"\n weight=\"bold\" />\n {{ error.message }}\n </div>\n</template>\n\n<style scoped>\n.error {\n display: flex;\n align-items: center;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"ErrorMessage.vue.script.js","names":[],"sources":["../../src/components/ErrorMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { AgentErrorCodes } from '@/entities/error/constants'\nimport { type ChatError } from '@/hooks/use-chat-error'\n\nconst { error } = defineProps<{ error: ChatError }>()\n\nconst HIDDEN_ERROR_CODES: string[] = [AgentErrorCodes.LIMIT_REACHED]\n</script>\n\n<template>\n <div\n v-if=\"!HIDDEN_ERROR_CODES.includes(error.code)\"\n class=\"error gap-1.5\">\n <ScalarIconInfo\n class=\"text-red size-4\"\n weight=\"bold\" />\n {{ error.message }}\n </div>\n</template>\n\n<style scoped>\n.error {\n display: flex;\n align-items: center;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 95%\n );\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAQA,MAAM,qBAA+B,CAAC,gBAAgB,cAAa;;WAKxD,mBAAmB,SAAS,QAAA,MAAM,KAAI,IAAA,WAAA,EAD/C,mBAOM,OAPN,YAOM,CAJJ,YAEkB,MAAA,eAAA,EAAA;IADhB,OAAM;IACN,QAAO;uBAAS,MAClB,gBAAG,QAAA,MAAM,QAAO,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import FreeMessagesInfoSection_vue_vue_type_script_setup_true_lang_default from "./FreeMessagesInfoSection.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/FreeMessagesInfoSection.vue
|
|
5
|
-
var FreeMessagesInfoSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(FreeMessagesInfoSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var FreeMessagesInfoSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(FreeMessagesInfoSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1921dede"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FreeMessagesInfoSection_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreeMessagesInfoSection.vue.js","names":[],"sources":["../../src/components/FreeMessagesInfoSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo, ScalarIconX } from '@scalar/icons'\nimport { ref } from 'vue'\n\nimport { URLS } from '@/consts/urls'\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst isDismissed = ref(false)\nconst { signupLink } = useSignupLink()\n\n/**\n * Dismiss the free messages info section.\n */\nfunction dismiss() {\n isDismissed.value = true\n}\n</script>\n\n<template>\n <div\n v-show=\"!isDismissed\"\n class=\"freeMessagesInfoSection\">\n <strong class=\"infoText flex items-center gap-1.5\">\n <!-- Sign up -->\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n <a\n class=\"underline\"\n :href=\"signupLink\"\n target=\"_blank\"\n >Sign up for Agent Scalar</a\n >\n to continue without hitting limits.\n </strong>\n <div class=\"actionsContainer\">\n <a\n class=\"actionButton upgradeButton\"\n :href=\"URLS.AGENT_SCALAR_DOCUMENTATION\"\n target=\"_blank\"\n type=\"button\">\n Read more\n </a>\n <button\n aria-label=\"Close\"\n class=\"closeButton\"\n type=\"button\"\n @click=\"dismiss\">\n <ScalarIconX\n class=\"size-4\"\n weight=\"bold\" />\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.freeMessagesInfoSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"FreeMessagesInfoSection.vue.js","names":[],"sources":["../../src/components/FreeMessagesInfoSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo, ScalarIconX } from '@scalar/icons'\nimport { ref } from 'vue'\n\nimport { URLS } from '@/consts/urls'\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst isDismissed = ref(false)\nconst { signupLink } = useSignupLink()\n\n/**\n * Dismiss the free messages info section.\n */\nfunction dismiss() {\n isDismissed.value = true\n}\n</script>\n\n<template>\n <div\n v-show=\"!isDismissed\"\n class=\"freeMessagesInfoSection\">\n <strong class=\"infoText flex items-center gap-1.5\">\n <!-- Sign up -->\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n <a\n class=\"underline\"\n :href=\"signupLink\"\n target=\"_blank\"\n >Sign up for Agent Scalar</a\n >\n to continue without hitting limits.\n </strong>\n <div class=\"actionsContainer\">\n <a\n class=\"actionButton upgradeButton\"\n :href=\"URLS.AGENT_SCALAR_DOCUMENTATION\"\n target=\"_blank\"\n type=\"button\">\n Read more\n </a>\n <button\n aria-label=\"Close\"\n class=\"closeButton\"\n type=\"button\"\n @click=\"dismiss\">\n <ScalarIconX\n class=\"size-4\"\n weight=\"bold\" />\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.freeMessagesInfoSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.infoText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.actionsContainer {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.actionButton {\n display: flex;\n align-items: center;\n font-weight: var(--scalar-semibold);\n border-radius: var(--scalar-radius-full);\n padding: 6px 12px;\n}\n\n.upgradeButton {\n color: white;\n font-size: var(--scalar-font-size-3);\n background: var(--scalar-color-blue);\n}\n.upgradeButton:hover,\n.upgradeButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n\n.closeButton {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: var(--scalar-radius-full);\n color: var(--scalar-color-2);\n background: transparent;\n border: none;\n cursor: pointer;\n}\n.closeButton:hover {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 80%\n );\n color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreeMessagesInfoSection.vue.script.js","names":[],"sources":["../../src/components/FreeMessagesInfoSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo, ScalarIconX } from '@scalar/icons'\nimport { ref } from 'vue'\n\nimport { URLS } from '@/consts/urls'\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst isDismissed = ref(false)\nconst { signupLink } = useSignupLink()\n\n/**\n * Dismiss the free messages info section.\n */\nfunction dismiss() {\n isDismissed.value = true\n}\n</script>\n\n<template>\n <div\n v-show=\"!isDismissed\"\n class=\"freeMessagesInfoSection\">\n <strong class=\"infoText flex items-center gap-1.5\">\n <!-- Sign up -->\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n <a\n class=\"underline\"\n :href=\"signupLink\"\n target=\"_blank\"\n >Sign up for Agent Scalar</a\n >\n to continue without hitting limits.\n </strong>\n <div class=\"actionsContainer\">\n <a\n class=\"actionButton upgradeButton\"\n :href=\"URLS.AGENT_SCALAR_DOCUMENTATION\"\n target=\"_blank\"\n type=\"button\">\n Read more\n </a>\n <button\n aria-label=\"Close\"\n class=\"closeButton\"\n type=\"button\"\n @click=\"dismiss\">\n <ScalarIconX\n class=\"size-4\"\n weight=\"bold\" />\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.freeMessagesInfoSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"FreeMessagesInfoSection.vue.script.js","names":[],"sources":["../../src/components/FreeMessagesInfoSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo, ScalarIconX } from '@scalar/icons'\nimport { ref } from 'vue'\n\nimport { URLS } from '@/consts/urls'\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst isDismissed = ref(false)\nconst { signupLink } = useSignupLink()\n\n/**\n * Dismiss the free messages info section.\n */\nfunction dismiss() {\n isDismissed.value = true\n}\n</script>\n\n<template>\n <div\n v-show=\"!isDismissed\"\n class=\"freeMessagesInfoSection\">\n <strong class=\"infoText flex items-center gap-1.5\">\n <!-- Sign up -->\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n <a\n class=\"underline\"\n :href=\"signupLink\"\n target=\"_blank\"\n >Sign up for Agent Scalar</a\n >\n to continue without hitting limits.\n </strong>\n <div class=\"actionsContainer\">\n <a\n class=\"actionButton upgradeButton\"\n :href=\"URLS.AGENT_SCALAR_DOCUMENTATION\"\n target=\"_blank\"\n type=\"button\">\n Read more\n </a>\n <button\n aria-label=\"Close\"\n class=\"closeButton\"\n type=\"button\"\n @click=\"dismiss\">\n <ScalarIconX\n class=\"size-4\"\n weight=\"bold\" />\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.freeMessagesInfoSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.infoText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.actionsContainer {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.actionButton {\n display: flex;\n align-items: center;\n font-weight: var(--scalar-semibold);\n border-radius: var(--scalar-radius-full);\n padding: 6px 12px;\n}\n\n.upgradeButton {\n color: white;\n font-size: var(--scalar-font-size-3);\n background: var(--scalar-color-blue);\n}\n.upgradeButton:hover,\n.upgradeButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n\n.closeButton {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: var(--scalar-radius-full);\n color: var(--scalar-color-2);\n background: transparent;\n border: none;\n cursor: pointer;\n}\n.closeButton:hover {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 80%\n );\n color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAOA,MAAM,cAAc,IAAI,MAAK;EAC7B,MAAM,EAAE,eAAe,eAAc;;;;EAKrC,SAAS,UAAU;AACjB,eAAY,QAAQ;;;uCAKpB,mBAkCM,OAlCN,YAkCM,CA/BJ,mBAYS,UAZT,YAYS;IAVP,YAEkB,MAAA,eAAA,EAAA;KADhB,OAAM;KACN,QAAO;;IACT,mBAKC,KAAA;KAJC,OAAM;KACL,MAAM,MAAA,WAAU;KACjB,QAAO;OACN,4BAAwB,GAAA,WAAA;8CAC1B,yCAEH,GAAA;OACA,mBAiBM,OAjBN,YAiBM,CAhBJ,mBAMI,KAAA;IALF,OAAM;IACL,MAAM,MAAA,KAAI,CAAC;IACZ,QAAO;IACP,MAAK;MAAS,eAEhB,GAAA,WAAA,EACA,mBAQS,UAAA;IAPP,cAAW;IACX,OAAM;IACN,MAAK;IACJ,SAAO;OACR,YAEkB,MAAA,YAAA,EAAA;IADhB,OAAM;IACN,QAAO;6BA9BJ,YAAA,MAAW,CAAA,CAAA"}
|
|
@@ -7,7 +7,7 @@ var _hoisted_1 = { class: "loadingApiSpecs" };
|
|
|
7
7
|
function _sfc_render(_ctx, _cache) {
|
|
8
8
|
return openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "playIcon" }, null, -1), createTextVNode(" Loading APIs... ", -1)])]);
|
|
9
9
|
}
|
|
10
|
-
var LoadingOpenAPISpecsSummary_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
10
|
+
var LoadingOpenAPISpecsSummary_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0248d9dc"]]);
|
|
11
11
|
//#endregion
|
|
12
12
|
export { LoadingOpenAPISpecsSummary_default as default };
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingOpenAPISpecsSummary.vue.js","names":[],"sources":["../../src/components/LoadingOpenAPISpecsSummary.vue"],"sourcesContent":["<template>\n <div class=\"loadingApiSpecs\">\n <div class=\"playIcon\"></div>\n Loading APIs...\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius:
|
|
1
|
+
{"version":3,"file":"LoadingOpenAPISpecsSummary.vue.js","names":[],"sources":["../../src/components/LoadingOpenAPISpecsSummary.vue"],"sourcesContent":["<template>\n <div class=\"loadingApiSpecs\">\n <div class=\"playIcon\"></div>\n Loading APIs...\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius: var(--scalar-radius-full);\n}\n\n.playIcon::before {\n content: '';\n width: 16px;\n height: 16px;\n display: inline-block;\n box-sizing: border-box;\n position: absolute;\n border-width: 1.5px;\n border-style: solid;\n border-color: currentcolor currentcolor transparent;\n border-image: initial;\n border-radius: var(--scalar-radius-full);\n background: var(--scalar-background-1);\n animation: 0.42s linear 0s infinite normal none running rotation;\n}\n\n.loadingApiSpecs {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n margin-bottom: 10px;\n}\n\n.loadingApiSpecs svg {\n width: 100%;\n height: 100%;\n z-index: 1;\n border-radius: var(--scalar-radius-full);\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n"],"mappings":";;;;;mBACO,OAAM,mBAAiB;;qBAA5B,mBAGM,OAHN,YAGM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFJ,mBAA4B,OAAA,EAAvB,OAAM,YAAU,EAAA,MAAA,GAAA,EAAA,gBAAO,qBAE9B,GAAA,CAAA,EAAA,CAAA"}
|
|
@@ -7,7 +7,7 @@ var _hoisted_1 = { class: "sendingRequest" };
|
|
|
7
7
|
function _sfc_render(_ctx, _cache) {
|
|
8
8
|
return openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "playIcon" }, null, -1), createTextVNode(" Retrieving relevant information... ", -1)])]);
|
|
9
9
|
}
|
|
10
|
-
var LoadingSearchOpenAPIOperations_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
10
|
+
var LoadingSearchOpenAPIOperations_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-43864661"]]);
|
|
11
11
|
//#endregion
|
|
12
12
|
export { LoadingSearchOpenAPIOperations_default as default };
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingSearchOpenAPIOperations.vue.js","names":[],"sources":["../../src/components/LoadingSearchOpenAPIOperations.vue"],"sourcesContent":["<template>\n <div class=\"sendingRequest\">\n <div class=\"playIcon\"></div>\n Retrieving relevant information...\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius:
|
|
1
|
+
{"version":3,"file":"LoadingSearchOpenAPIOperations.vue.js","names":[],"sources":["../../src/components/LoadingSearchOpenAPIOperations.vue"],"sourcesContent":["<template>\n <div class=\"sendingRequest\">\n <div class=\"playIcon\"></div>\n Retrieving relevant information...\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius: var(--scalar-radius-full);\n}\n\n.playIcon::before {\n content: '';\n width: 16px;\n height: 16px;\n display: inline-block;\n box-sizing: border-box;\n position: absolute;\n border-width: 1.5px;\n border-style: solid;\n border-color: currentcolor currentcolor transparent;\n border-image: initial;\n border-radius: var(--scalar-radius-full);\n background: var(--scalar-background-1);\n animation: 0.42s linear 0s infinite normal none running rotation;\n}\n\n.sendingRequest {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n margin-bottom: 10px;\n}\n\n.sendingRequest svg {\n width: 100%;\n height: 100%;\n z-index: 1;\n border-radius: var(--scalar-radius-full);\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n"],"mappings":";;;;;mBACO,OAAM,kBAAgB;;qBAA3B,mBAGM,OAHN,YAGM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFJ,mBAA4B,OAAA,EAAvB,OAAM,YAAU,EAAA,MAAA,GAAA,EAAA,gBAAO,wCAE9B,GAAA,CAAA,EAAA,CAAA"}
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import PaymentSection_vue_vue_type_script_setup_true_lang_default from "./PaymentSection.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/PaymentSection.vue
|
|
5
|
-
var PaymentSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(PaymentSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var PaymentSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(PaymentSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9d163ea1"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { PaymentSection_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentSection.vue.js","names":[],"sources":["../../src/components/PaymentSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst { navigateToSignup } = useSignupLink()\n</script>\n\n<template>\n <div class=\"paymentSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n You've used up your complimentary Scalar Credits. Sign up to get free\n Credits.\n </strong>\n <div class=\"paymentContainer\">\n <button\n class=\"actionButton approveButton\"\n type=\"button\"\n @click=\"navigateToSignup\">\n Sign up\n </button>\n <div class=\"paymentInfo\">\n <h3>$0 <span>/ month</span></h3>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Credits</span>\n <span>100</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>MCP Servers</span>\n <span>Unlimited</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>Base monthly total</span>\n <span>$0.00</span>\n </div>\n </div>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Additional Credits</span>\n <span>+ $0.02 per Credit</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.paymentSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"PaymentSection.vue.js","names":[],"sources":["../../src/components/PaymentSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst { navigateToSignup } = useSignupLink()\n</script>\n\n<template>\n <div class=\"paymentSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n You've used up your complimentary Scalar Credits. Sign up to get free\n Credits.\n </strong>\n <div class=\"paymentContainer\">\n <button\n class=\"actionButton approveButton\"\n type=\"button\"\n @click=\"navigateToSignup\">\n Sign up\n </button>\n <div class=\"paymentInfo\">\n <h3>$0 <span>/ month</span></h3>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Credits</span>\n <span>100</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>MCP Servers</span>\n <span>Unlimited</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>Base monthly total</span>\n <span>$0.00</span>\n </div>\n </div>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Additional Credits</span>\n <span>+ $0.02 per Credit</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.paymentSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n\n.approvalText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.paymentContainer {\n display: flex;\n gap: 5px;\n}\n\n.actionButton {\n display: flex;\n align-items: center;\n font-weight: var(--scalar-semibold);\n border-radius: var(--scalar-radius-full);\n padding: 6px 12px;\n}\n\n.rejectButton {\n color: white;\n background: var(--scalar-color-red);\n}\n.rejectButton:hover,\n.rejectButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n\n.approveButton {\n color: white;\n font-size: var(--scalar-font-size-3);\n background: var(--scalar-color-blue);\n}\n.approveButton:hover,\n.approveButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n.paymentInfo {\n width: 300px;\n position: absolute;\n right: 0;\n bottom: 70px;\n box-shadow: var(--scalar-shadow-2);\n background: var(--scalar-background-1);\n border-radius: var(--scalar-radius-3xl);\n pointer-events: none;\n padding: 12px;\n transform: translate3d(0, -5px, 0);\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n.paymentInfo h3 {\n font-size: var(--scalar-font-size-1);\n font-weight: var(--scalar-bold);\n margin-bottom: 18px;\n}\n.paymentInfo h3 span {\n font-size: var(--scalar-font-size-2);\n}\n.dark-mode .paymentInfo {\n background: var(--scalar-background-2);\n}\n.paymentContainer:hover .paymentInfo {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n.paymentInfoItem {\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n font-size: var(--scalar-font-size-3);\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n}\n.paymentInfoSection:not(:last-child) {\n border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n padding-bottom: 8px;\n}\n</style>\n"],"mappings":""}
|
|
@@ -17,7 +17,7 @@ var PaymentSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
|
|
|
17
17
|
class: "actionButton approveButton",
|
|
18
18
|
type: "button",
|
|
19
19
|
onClick: _cache[0] || (_cache[0] = (...args) => unref(navigateToSignup) && unref(navigateToSignup)(...args))
|
|
20
|
-
}, " Sign up "), _cache[2] || (_cache[2] = createStaticVNode("<div class=\"paymentInfo\" data-v-
|
|
20
|
+
}, " Sign up "), _cache[2] || (_cache[2] = createStaticVNode("<div class=\"paymentInfo\" data-v-9d163ea1><h3 data-v-9d163ea1>$0 <span data-v-9d163ea1>/ month</span></h3><div class=\"paymentInfoSection\" data-v-9d163ea1><div class=\"paymentInfoItem\" data-v-9d163ea1><span data-v-9d163ea1>Credits</span><span data-v-9d163ea1>100</span></div><div class=\"paymentInfoItem\" data-v-9d163ea1><span data-v-9d163ea1>MCP Servers</span><span data-v-9d163ea1>Unlimited</span></div><div class=\"paymentInfoItem\" data-v-9d163ea1><span data-v-9d163ea1>Base monthly total</span><span data-v-9d163ea1>$0.00</span></div></div><div class=\"paymentInfoSection\" data-v-9d163ea1><div class=\"paymentInfoItem\" data-v-9d163ea1><span data-v-9d163ea1>Additional Credits</span><span data-v-9d163ea1>+ $0.02 per Credit</span></div></div></div>", 1))])]);
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentSection.vue.script.js","names":[],"sources":["../../src/components/PaymentSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst { navigateToSignup } = useSignupLink()\n</script>\n\n<template>\n <div class=\"paymentSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n You've used up your complimentary Scalar Credits. Sign up to get free\n Credits.\n </strong>\n <div class=\"paymentContainer\">\n <button\n class=\"actionButton approveButton\"\n type=\"button\"\n @click=\"navigateToSignup\">\n Sign up\n </button>\n <div class=\"paymentInfo\">\n <h3>$0 <span>/ month</span></h3>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Credits</span>\n <span>100</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>MCP Servers</span>\n <span>Unlimited</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>Base monthly total</span>\n <span>$0.00</span>\n </div>\n </div>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Additional Credits</span>\n <span>+ $0.02 per Credit</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.paymentSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"PaymentSection.vue.script.js","names":[],"sources":["../../src/components/PaymentSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconInfo } from '@scalar/icons'\n\nimport { useSignupLink } from '@/hooks/use-signup-link'\n\nconst { navigateToSignup } = useSignupLink()\n</script>\n\n<template>\n <div class=\"paymentSection\">\n <strong class=\"approvalText flex items-center gap-1.5\">\n <ScalarIconInfo\n class=\"text-blue size-4\"\n weight=\"bold\" />\n You've used up your complimentary Scalar Credits. Sign up to get free\n Credits.\n </strong>\n <div class=\"paymentContainer\">\n <button\n class=\"actionButton approveButton\"\n type=\"button\"\n @click=\"navigateToSignup\">\n Sign up\n </button>\n <div class=\"paymentInfo\">\n <h3>$0 <span>/ month</span></h3>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Credits</span>\n <span>100</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>MCP Servers</span>\n <span>Unlimited</span>\n </div>\n <div class=\"paymentInfoItem\">\n <span>Base monthly total</span>\n <span>$0.00</span>\n </div>\n </div>\n <div class=\"paymentInfoSection\">\n <div class=\"paymentInfoItem\">\n <span>Additional Credits</span>\n <span>+ $0.02 per Credit</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.paymentSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n\n.approvalText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.paymentContainer {\n display: flex;\n gap: 5px;\n}\n\n.actionButton {\n display: flex;\n align-items: center;\n font-weight: var(--scalar-semibold);\n border-radius: var(--scalar-radius-full);\n padding: 6px 12px;\n}\n\n.rejectButton {\n color: white;\n background: var(--scalar-color-red);\n}\n.rejectButton:hover,\n.rejectButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n\n.approveButton {\n color: white;\n font-size: var(--scalar-font-size-3);\n background: var(--scalar-color-blue);\n}\n.approveButton:hover,\n.approveButton:active {\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 10%\n );\n color: white !important;\n}\n.paymentInfo {\n width: 300px;\n position: absolute;\n right: 0;\n bottom: 70px;\n box-shadow: var(--scalar-shadow-2);\n background: var(--scalar-background-1);\n border-radius: var(--scalar-radius-3xl);\n pointer-events: none;\n padding: 12px;\n transform: translate3d(0, -5px, 0);\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n.paymentInfo h3 {\n font-size: var(--scalar-font-size-1);\n font-weight: var(--scalar-bold);\n margin-bottom: 18px;\n}\n.paymentInfo h3 span {\n font-size: var(--scalar-font-size-2);\n}\n.dark-mode .paymentInfo {\n background: var(--scalar-background-2);\n}\n.paymentContainer:hover .paymentInfo {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n.paymentInfoItem {\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n font-size: var(--scalar-font-size-3);\n color: var(--scalar-color-2);\n font-weight: var(--scalar-semibold);\n}\n.paymentInfoSection:not(:last-child) {\n border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n padding-bottom: 8px;\n}\n</style>\n"],"mappings":";;;;;;;;;;EAKA,MAAM,EAAE,qBAAqB,eAAc;;uBAIzC,mBAuCM,OAvCN,YAuCM,CAtCJ,mBAMS,UANT,YAMS,CALP,YAEkB,MAAA,eAAA,EAAA;IADhB,OAAM;IACN,QAAO;iDAAS,oFAGpB,GAAA,EAAA,CAAA,EACA,mBA8BM,OA9BN,YA8BM,CA7BJ,mBAKS,UAAA;IAJP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,iBAAA,IAAA,MAAA,iBAAA,CAAA,GAAA,KAAgB;MAAE,YAE5B,EAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,0vBAAA,EAAA,EAAA,CAAA,CAAA,CAAA"}
|
|
@@ -13,7 +13,7 @@ function _sfc_render(_ctx, _cache) {
|
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg"
|
|
14
14
|
}, [createElementVNode("path", { d: "M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z" })])], -1), createTextVNode(" Request Failed ", -1)])]);
|
|
15
15
|
}
|
|
16
|
-
var RequestFailed_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
16
|
+
var RequestFailed_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-29140773"]]);
|
|
17
17
|
//#endregion
|
|
18
18
|
export { RequestFailed_default as default };
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequestFailed.vue.js","names":[],"sources":["../../src/components/RequestFailed.vue"],"sourcesContent":["<template>\n <div class=\"requestFailed\">\n <i class=\"requestFailedIcon\">\n <svg\n fill=\"currentColor\"\n height=\"100%\"\n viewBox=\"0 0 256 256\"\n width=\"100%\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z\"></path>\n </svg>\n </i>\n Request Failed\n </div>\n</template>\n\n<style scoped>\n.requestFailed {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--scalar-color-red);\n font-weight: var(--scalar-semibold);\n min-height: 40px;\n font-size: var(--scalar-font-size-3);\n position: relative;\n}\n.requestFailedIcon {\n box-shadow: inset 0 0 0 1.5px currentColor;\n padding: 4px;\n padding: 4px;\n width: 16px;\n height: 16px;\n border-radius:
|
|
1
|
+
{"version":3,"file":"RequestFailed.vue.js","names":[],"sources":["../../src/components/RequestFailed.vue"],"sourcesContent":["<template>\n <div class=\"requestFailed\">\n <i class=\"requestFailedIcon\">\n <svg\n fill=\"currentColor\"\n height=\"100%\"\n viewBox=\"0 0 256 256\"\n width=\"100%\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z\"></path>\n </svg>\n </i>\n Request Failed\n </div>\n</template>\n\n<style scoped>\n.requestFailed {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--scalar-color-red);\n font-weight: var(--scalar-semibold);\n min-height: 40px;\n font-size: var(--scalar-font-size-3);\n position: relative;\n}\n.requestFailedIcon {\n box-shadow: inset 0 0 0 1.5px currentColor;\n padding: 4px;\n padding: 4px;\n width: 16px;\n height: 16px;\n border-radius: var(--scalar-radius-full);\n}\n</style>\n"],"mappings":";;;;;mBACO,OAAM,iBAAe;;qBAA1B,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZJ,mBAUI,KAAA,EAVD,OAAM,qBAAmB,EAAA,CAC1B,mBAQM,OAAA;EAPJ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,OAAM;KACN,mBACyM,QAAA,EAAvM,GAAE,+LAA6L,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,gBAEjM,oBAEN,GAAA,CAAA,EAAA,CAAA"}
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import RequestPreview_vue_vue_type_script_setup_true_lang_default from "./RequestPreview.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/RequestPreview.vue
|
|
5
|
-
var RequestPreview_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var RequestPreview_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1e1f4549"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { RequestPreview_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequestPreview.vue.js","names":[],"sources":["../../src/components/RequestPreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarIconCaretDown, ScalarIconCaretRight } from '@scalar/icons'\nimport { type DeepPartial } from 'ai'\nimport { computed, ref } from 'vue'\n\nimport AutosendPaused from '@/components/AutosendPaused.vue'\nimport BuildingRequest from '@/components/BuildingRequest.vue'\nimport RequestApproved from '@/components/RequestApproved.vue'\nimport RequestFailed from '@/components/RequestFailed.vue'\nimport RequestRejected from '@/components/RequestRejected.vue'\nimport RequestSuccess from '@/components/RequestSuccess.vue'\nimport { getMediaTypeConfig } from '@/components/ResponseBody/helpers/media-types'\nimport { processResponseBody } from '@/components/ResponseBody/helpers/process-response-body'\nimport ResponseBody from '@/components/ResponseBody/ResponseBody.vue'\nimport ResponseBodyToggle from '@/components/ResponseBody/ResponseBodyToggle.vue'\nimport SendingRequest from '@/components/SendingRequest.vue'\nimport type {\n ExecuteClientSideRequestToolInput,\n ExecuteClientSideRequestToolOutput,\n} from '@/entities/tools/execute-request'\n\nconst { request, response, state } = defineProps<{\n request?:\n | ExecuteClientSideRequestToolInput\n | DeepPartial<ExecuteClientSideRequestToolInput>\n response?: ExecuteClientSideRequestToolOutput\n state:\n | 'requiresApproval'\n | 'sendingRequest'\n | 'requestSucceeded'\n | 'requestFailed'\n | 'approved'\n | 'rejected'\n | 'buildingRequest'\n}>()\n\nconst responseData = computed(() => {\n if (response?.success) {\n return {\n data: response.data.responseBody,\n headers: response.data.headers,\n }\n }\n\n if (response?.error?.code === 'REQUEST_NOT_OK') {\n return {\n data: response.error.detail.responseBody,\n headers: response.error.detail.headers,\n }\n }\n\n return undefined\n})\n\nconst showRequestToggle = ref(false)\n\n/** Show request preview automatically for failed requests or when approval is required. */\nconst shouldShowRequest = computed(() => {\n if (state === 'requestFailed' || state === 'requiresApproval') {\n return true\n }\n return showRequestToggle.value\n})\n\nconst responseBody = computed(() =>\n processResponseBody({\n data: responseData.value?.data,\n headers: responseData.value?.headers,\n }),\n)\n\nconst mediaConfig = computed(() =>\n getMediaTypeConfig(responseBody.value.mimeType?.essence ?? ''),\n)\n\nconst displayToggle = ref<'preview' | 'raw'>()\nfunction toggleDisplay(mode: 'preview' | 'raw') {\n displayToggle.value = mode\n}\n\nconst displayMode = computed(() => {\n if (displayToggle.value) return displayToggle.value\n\n if (mediaConfig.value?.raw && !mediaConfig.value.preview) return 'raw'\n if (mediaConfig.value?.preview) return 'preview'\n\n return 'raw'\n})\n</script>\n\n<template>\n <div\n class=\"requestPreview\"\n :class=\"{\n open: shouldShowRequest,\n succeeded: state === 'requestSucceeded',\n }\">\n <RequestApproved v-if=\"state === 'approved'\" />\n <div\n v-else-if=\"state === 'buildingRequest'\"\n class=\"autosendContainer\">\n <BuildingRequest />\n </div>\n <div\n v-else-if=\"state === 'requiresApproval'\"\n class=\"autosendContainer\">\n <AutosendPaused />\n </div>\n <button\n v-else-if=\"state === 'sendingRequest'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <SendingRequest />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'requestSucceeded'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestSuccess />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'rejected'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestRejected />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <RequestFailed v-else-if=\"state === 'requestFailed'\" />\n <div class=\"requestContent\">\n <div class=\"requestContentInner\">\n <div\n v-if=\"request\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Request</h1>\n </div>\n <ScalarCodeBlock\n class=\"codeBlock\"\n :content=\"JSON.stringify(request, null, 2)\"\n lang=\"json\" />\n </div>\n <div\n v-if=\"responseData\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Response</h1>\n <ResponseBodyToggle\n v-if=\"mediaConfig?.raw && mediaConfig.preview\"\n v-model=\"displayMode\"\n @toggle=\"toggleDisplay\" />\n </div>\n <ResponseBody\n :data=\"responseData.data\"\n :display=\"displayMode\"\n :mediaConfig=\"mediaConfig\"\n :responseBody=\"responseBody\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.requestHeaderContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px;\n}\n\n.requestPreview {\n border-radius:
|
|
1
|
+
{"version":3,"file":"RequestPreview.vue.js","names":[],"sources":["../../src/components/RequestPreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarIconCaretDown, ScalarIconCaretRight } from '@scalar/icons'\nimport { type DeepPartial } from 'ai'\nimport { computed, ref } from 'vue'\n\nimport AutosendPaused from '@/components/AutosendPaused.vue'\nimport BuildingRequest from '@/components/BuildingRequest.vue'\nimport RequestApproved from '@/components/RequestApproved.vue'\nimport RequestFailed from '@/components/RequestFailed.vue'\nimport RequestRejected from '@/components/RequestRejected.vue'\nimport RequestSuccess from '@/components/RequestSuccess.vue'\nimport { getMediaTypeConfig } from '@/components/ResponseBody/helpers/media-types'\nimport { processResponseBody } from '@/components/ResponseBody/helpers/process-response-body'\nimport ResponseBody from '@/components/ResponseBody/ResponseBody.vue'\nimport ResponseBodyToggle from '@/components/ResponseBody/ResponseBodyToggle.vue'\nimport SendingRequest from '@/components/SendingRequest.vue'\nimport type {\n ExecuteClientSideRequestToolInput,\n ExecuteClientSideRequestToolOutput,\n} from '@/entities/tools/execute-request'\n\nconst { request, response, state } = defineProps<{\n request?:\n | ExecuteClientSideRequestToolInput\n | DeepPartial<ExecuteClientSideRequestToolInput>\n response?: ExecuteClientSideRequestToolOutput\n state:\n | 'requiresApproval'\n | 'sendingRequest'\n | 'requestSucceeded'\n | 'requestFailed'\n | 'approved'\n | 'rejected'\n | 'buildingRequest'\n}>()\n\nconst responseData = computed(() => {\n if (response?.success) {\n return {\n data: response.data.responseBody,\n headers: response.data.headers,\n }\n }\n\n if (response?.error?.code === 'REQUEST_NOT_OK') {\n return {\n data: response.error.detail.responseBody,\n headers: response.error.detail.headers,\n }\n }\n\n return undefined\n})\n\nconst showRequestToggle = ref(false)\n\n/** Show request preview automatically for failed requests or when approval is required. */\nconst shouldShowRequest = computed(() => {\n if (state === 'requestFailed' || state === 'requiresApproval') {\n return true\n }\n return showRequestToggle.value\n})\n\nconst responseBody = computed(() =>\n processResponseBody({\n data: responseData.value?.data,\n headers: responseData.value?.headers,\n }),\n)\n\nconst mediaConfig = computed(() =>\n getMediaTypeConfig(responseBody.value.mimeType?.essence ?? ''),\n)\n\nconst displayToggle = ref<'preview' | 'raw'>()\nfunction toggleDisplay(mode: 'preview' | 'raw') {\n displayToggle.value = mode\n}\n\nconst displayMode = computed(() => {\n if (displayToggle.value) return displayToggle.value\n\n if (mediaConfig.value?.raw && !mediaConfig.value.preview) return 'raw'\n if (mediaConfig.value?.preview) return 'preview'\n\n return 'raw'\n})\n</script>\n\n<template>\n <div\n class=\"requestPreview\"\n :class=\"{\n open: shouldShowRequest,\n succeeded: state === 'requestSucceeded',\n }\">\n <RequestApproved v-if=\"state === 'approved'\" />\n <div\n v-else-if=\"state === 'buildingRequest'\"\n class=\"autosendContainer\">\n <BuildingRequest />\n </div>\n <div\n v-else-if=\"state === 'requiresApproval'\"\n class=\"autosendContainer\">\n <AutosendPaused />\n </div>\n <button\n v-else-if=\"state === 'sendingRequest'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <SendingRequest />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'requestSucceeded'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestSuccess />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'rejected'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestRejected />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <RequestFailed v-else-if=\"state === 'requestFailed'\" />\n <div class=\"requestContent\">\n <div class=\"requestContentInner\">\n <div\n v-if=\"request\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Request</h1>\n </div>\n <ScalarCodeBlock\n class=\"codeBlock\"\n :content=\"JSON.stringify(request, null, 2)\"\n lang=\"json\" />\n </div>\n <div\n v-if=\"responseData\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Response</h1>\n <ResponseBodyToggle\n v-if=\"mediaConfig?.raw && mediaConfig.preview\"\n v-model=\"displayMode\"\n @toggle=\"toggleDisplay\" />\n </div>\n <ResponseBody\n :data=\"responseData.data\"\n :display=\"displayMode\"\n :mediaConfig=\"mediaConfig\"\n :responseBody=\"responseBody\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.requestHeaderContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px;\n}\n\n.requestPreview {\n border-radius: var(--scalar-radius-2xl);\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n}\n\n.requestContent {\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n overflow: hidden;\n transition: grid-template-rows 0.2s ease-out;\n}\n\n.requestPreview.open .requestContent {\n grid-template-rows: 1fr;\n}\n.requestPreview.succeeded {\n padding: 0;\n}\n\n.requestContentInner {\n min-height: 0;\n overflow: hidden;\n}\n.code {\n display: flex;\n flex-direction: column;\n font-size: var(--scalar-font-size-4);\n border-radius: var(--scalar-radius-2xl);\n background: color-mix(\n in srgb,\n var(--scalar-background-2),\n var(--scalar-background-1)\n );\n overflow: hidden;\n margin-bottom: 12px;\n}\n.dark-mode .code {\n background: var(--scalar-background-2);\n}\n.code h1 {\n font-size: var(--scalar-font-size-3);\n color: var(--scalar-color-3);\n padding: 8px;\n}\n.code :deep(.codeBlock) {\n max-height: calc(50vh - 100px);\n padding-top: 0;\n}\n.autosendContainer {\n display: flex;\n justify-content: space-between;\n}\n\n.sendButton {\n background: var(--scalar-color-blue);\n color: white;\n font-weight: var(--scalar-semibold);\n padding: 5px 10px;\n}\n.sendButton:hover,\n.sendButton:active {\n background: color-mix(in srgb, var(--scalar-color-blue), black 10%);\n color: white !important;\n}\n\n.toggleButton {\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n position: relative;\n display: flex;\n align-items: center;\n color: var(--scalar-color-3);\n justify-content: space-between;\n border-radius: var(--scalar-radius-lg);\n}\n\n.toggleButton:hover {\n text-decoration: underline;\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequestPreview.vue.script.js","names":[],"sources":["../../src/components/RequestPreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarIconCaretDown, ScalarIconCaretRight } from '@scalar/icons'\nimport { type DeepPartial } from 'ai'\nimport { computed, ref } from 'vue'\n\nimport AutosendPaused from '@/components/AutosendPaused.vue'\nimport BuildingRequest from '@/components/BuildingRequest.vue'\nimport RequestApproved from '@/components/RequestApproved.vue'\nimport RequestFailed from '@/components/RequestFailed.vue'\nimport RequestRejected from '@/components/RequestRejected.vue'\nimport RequestSuccess from '@/components/RequestSuccess.vue'\nimport { getMediaTypeConfig } from '@/components/ResponseBody/helpers/media-types'\nimport { processResponseBody } from '@/components/ResponseBody/helpers/process-response-body'\nimport ResponseBody from '@/components/ResponseBody/ResponseBody.vue'\nimport ResponseBodyToggle from '@/components/ResponseBody/ResponseBodyToggle.vue'\nimport SendingRequest from '@/components/SendingRequest.vue'\nimport type {\n ExecuteClientSideRequestToolInput,\n ExecuteClientSideRequestToolOutput,\n} from '@/entities/tools/execute-request'\n\nconst { request, response, state } = defineProps<{\n request?:\n | ExecuteClientSideRequestToolInput\n | DeepPartial<ExecuteClientSideRequestToolInput>\n response?: ExecuteClientSideRequestToolOutput\n state:\n | 'requiresApproval'\n | 'sendingRequest'\n | 'requestSucceeded'\n | 'requestFailed'\n | 'approved'\n | 'rejected'\n | 'buildingRequest'\n}>()\n\nconst responseData = computed(() => {\n if (response?.success) {\n return {\n data: response.data.responseBody,\n headers: response.data.headers,\n }\n }\n\n if (response?.error?.code === 'REQUEST_NOT_OK') {\n return {\n data: response.error.detail.responseBody,\n headers: response.error.detail.headers,\n }\n }\n\n return undefined\n})\n\nconst showRequestToggle = ref(false)\n\n/** Show request preview automatically for failed requests or when approval is required. */\nconst shouldShowRequest = computed(() => {\n if (state === 'requestFailed' || state === 'requiresApproval') {\n return true\n }\n return showRequestToggle.value\n})\n\nconst responseBody = computed(() =>\n processResponseBody({\n data: responseData.value?.data,\n headers: responseData.value?.headers,\n }),\n)\n\nconst mediaConfig = computed(() =>\n getMediaTypeConfig(responseBody.value.mimeType?.essence ?? ''),\n)\n\nconst displayToggle = ref<'preview' | 'raw'>()\nfunction toggleDisplay(mode: 'preview' | 'raw') {\n displayToggle.value = mode\n}\n\nconst displayMode = computed(() => {\n if (displayToggle.value) return displayToggle.value\n\n if (mediaConfig.value?.raw && !mediaConfig.value.preview) return 'raw'\n if (mediaConfig.value?.preview) return 'preview'\n\n return 'raw'\n})\n</script>\n\n<template>\n <div\n class=\"requestPreview\"\n :class=\"{\n open: shouldShowRequest,\n succeeded: state === 'requestSucceeded',\n }\">\n <RequestApproved v-if=\"state === 'approved'\" />\n <div\n v-else-if=\"state === 'buildingRequest'\"\n class=\"autosendContainer\">\n <BuildingRequest />\n </div>\n <div\n v-else-if=\"state === 'requiresApproval'\"\n class=\"autosendContainer\">\n <AutosendPaused />\n </div>\n <button\n v-else-if=\"state === 'sendingRequest'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <SendingRequest />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'requestSucceeded'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestSuccess />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'rejected'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestRejected />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <RequestFailed v-else-if=\"state === 'requestFailed'\" />\n <div class=\"requestContent\">\n <div class=\"requestContentInner\">\n <div\n v-if=\"request\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Request</h1>\n </div>\n <ScalarCodeBlock\n class=\"codeBlock\"\n :content=\"JSON.stringify(request, null, 2)\"\n lang=\"json\" />\n </div>\n <div\n v-if=\"responseData\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Response</h1>\n <ResponseBodyToggle\n v-if=\"mediaConfig?.raw && mediaConfig.preview\"\n v-model=\"displayMode\"\n @toggle=\"toggleDisplay\" />\n </div>\n <ResponseBody\n :data=\"responseData.data\"\n :display=\"displayMode\"\n :mediaConfig=\"mediaConfig\"\n :responseBody=\"responseBody\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.requestHeaderContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px;\n}\n\n.requestPreview {\n border-radius:
|
|
1
|
+
{"version":3,"file":"RequestPreview.vue.script.js","names":[],"sources":["../../src/components/RequestPreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarIconCaretDown, ScalarIconCaretRight } from '@scalar/icons'\nimport { type DeepPartial } from 'ai'\nimport { computed, ref } from 'vue'\n\nimport AutosendPaused from '@/components/AutosendPaused.vue'\nimport BuildingRequest from '@/components/BuildingRequest.vue'\nimport RequestApproved from '@/components/RequestApproved.vue'\nimport RequestFailed from '@/components/RequestFailed.vue'\nimport RequestRejected from '@/components/RequestRejected.vue'\nimport RequestSuccess from '@/components/RequestSuccess.vue'\nimport { getMediaTypeConfig } from '@/components/ResponseBody/helpers/media-types'\nimport { processResponseBody } from '@/components/ResponseBody/helpers/process-response-body'\nimport ResponseBody from '@/components/ResponseBody/ResponseBody.vue'\nimport ResponseBodyToggle from '@/components/ResponseBody/ResponseBodyToggle.vue'\nimport SendingRequest from '@/components/SendingRequest.vue'\nimport type {\n ExecuteClientSideRequestToolInput,\n ExecuteClientSideRequestToolOutput,\n} from '@/entities/tools/execute-request'\n\nconst { request, response, state } = defineProps<{\n request?:\n | ExecuteClientSideRequestToolInput\n | DeepPartial<ExecuteClientSideRequestToolInput>\n response?: ExecuteClientSideRequestToolOutput\n state:\n | 'requiresApproval'\n | 'sendingRequest'\n | 'requestSucceeded'\n | 'requestFailed'\n | 'approved'\n | 'rejected'\n | 'buildingRequest'\n}>()\n\nconst responseData = computed(() => {\n if (response?.success) {\n return {\n data: response.data.responseBody,\n headers: response.data.headers,\n }\n }\n\n if (response?.error?.code === 'REQUEST_NOT_OK') {\n return {\n data: response.error.detail.responseBody,\n headers: response.error.detail.headers,\n }\n }\n\n return undefined\n})\n\nconst showRequestToggle = ref(false)\n\n/** Show request preview automatically for failed requests or when approval is required. */\nconst shouldShowRequest = computed(() => {\n if (state === 'requestFailed' || state === 'requiresApproval') {\n return true\n }\n return showRequestToggle.value\n})\n\nconst responseBody = computed(() =>\n processResponseBody({\n data: responseData.value?.data,\n headers: responseData.value?.headers,\n }),\n)\n\nconst mediaConfig = computed(() =>\n getMediaTypeConfig(responseBody.value.mimeType?.essence ?? ''),\n)\n\nconst displayToggle = ref<'preview' | 'raw'>()\nfunction toggleDisplay(mode: 'preview' | 'raw') {\n displayToggle.value = mode\n}\n\nconst displayMode = computed(() => {\n if (displayToggle.value) return displayToggle.value\n\n if (mediaConfig.value?.raw && !mediaConfig.value.preview) return 'raw'\n if (mediaConfig.value?.preview) return 'preview'\n\n return 'raw'\n})\n</script>\n\n<template>\n <div\n class=\"requestPreview\"\n :class=\"{\n open: shouldShowRequest,\n succeeded: state === 'requestSucceeded',\n }\">\n <RequestApproved v-if=\"state === 'approved'\" />\n <div\n v-else-if=\"state === 'buildingRequest'\"\n class=\"autosendContainer\">\n <BuildingRequest />\n </div>\n <div\n v-else-if=\"state === 'requiresApproval'\"\n class=\"autosendContainer\">\n <AutosendPaused />\n </div>\n <button\n v-else-if=\"state === 'sendingRequest'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <SendingRequest />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'requestSucceeded'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestSuccess />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <button\n v-else-if=\"state === 'rejected'\"\n class=\"toggleButton\"\n type=\"button\"\n @click=\"showRequestToggle = !showRequestToggle\">\n <RequestRejected />\n\n <ScalarIconCaretDown v-if=\"shouldShowRequest\" />\n <ScalarIconCaretRight v-else />\n </button>\n <RequestFailed v-else-if=\"state === 'requestFailed'\" />\n <div class=\"requestContent\">\n <div class=\"requestContentInner\">\n <div\n v-if=\"request\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Request</h1>\n </div>\n <ScalarCodeBlock\n class=\"codeBlock\"\n :content=\"JSON.stringify(request, null, 2)\"\n lang=\"json\" />\n </div>\n <div\n v-if=\"responseData\"\n class=\"code\">\n <div class=\"requestHeaderContainer\">\n <h1>Response</h1>\n <ResponseBodyToggle\n v-if=\"mediaConfig?.raw && mediaConfig.preview\"\n v-model=\"displayMode\"\n @toggle=\"toggleDisplay\" />\n </div>\n <ResponseBody\n :data=\"responseData.data\"\n :display=\"displayMode\"\n :mediaConfig=\"mediaConfig\"\n :responseBody=\"responseBody\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.requestHeaderContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px;\n}\n\n.requestPreview {\n border-radius: var(--scalar-radius-2xl);\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n}\n\n.requestContent {\n display: grid;\n grid-template-rows: 0fr;\n min-height: 0;\n overflow: hidden;\n transition: grid-template-rows 0.2s ease-out;\n}\n\n.requestPreview.open .requestContent {\n grid-template-rows: 1fr;\n}\n.requestPreview.succeeded {\n padding: 0;\n}\n\n.requestContentInner {\n min-height: 0;\n overflow: hidden;\n}\n.code {\n display: flex;\n flex-direction: column;\n font-size: var(--scalar-font-size-4);\n border-radius: var(--scalar-radius-2xl);\n background: color-mix(\n in srgb,\n var(--scalar-background-2),\n var(--scalar-background-1)\n );\n overflow: hidden;\n margin-bottom: 12px;\n}\n.dark-mode .code {\n background: var(--scalar-background-2);\n}\n.code h1 {\n font-size: var(--scalar-font-size-3);\n color: var(--scalar-color-3);\n padding: 8px;\n}\n.code :deep(.codeBlock) {\n max-height: calc(50vh - 100px);\n padding-top: 0;\n}\n.autosendContainer {\n display: flex;\n justify-content: space-between;\n}\n\n.sendButton {\n background: var(--scalar-color-blue);\n color: white;\n font-weight: var(--scalar-semibold);\n padding: 5px 10px;\n}\n.sendButton:hover,\n.sendButton:active {\n background: color-mix(in srgb, var(--scalar-color-blue), black 10%);\n color: white !important;\n}\n\n.toggleButton {\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n position: relative;\n display: flex;\n align-items: center;\n color: var(--scalar-color-3);\n justify-content: space-between;\n border-radius: var(--scalar-radius-lg);\n}\n\n.toggleButton:hover {\n text-decoration: underline;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,MAAM,eAAe,eAAe;AAClC,OAAI,QAAA,UAAU,QACZ,QAAO;IACL,MAAM,QAAA,SAAS,KAAK;IACpB,SAAS,QAAA,SAAS,KAAK;IACzB;AAGF,OAAI,QAAA,UAAU,OAAO,SAAS,iBAC5B,QAAO;IACL,MAAM,QAAA,SAAS,MAAM,OAAO;IAC5B,SAAS,QAAA,SAAS,MAAM,OAAO;IACjC;IAIH;EAED,MAAM,oBAAoB,IAAI,MAAK;;EAGnC,MAAM,oBAAoB,eAAe;AACvC,OAAI,QAAA,UAAU,mBAAmB,QAAA,UAAU,mBACzC,QAAO;AAET,UAAO,kBAAkB;IAC1B;EAED,MAAM,eAAe,eACnB,oBAAoB;GAClB,MAAM,aAAa,OAAO;GAC1B,SAAS,aAAa,OAAO;GAC9B,CAAC,CACJ;EAEA,MAAM,cAAc,eAClB,mBAAmB,aAAa,MAAM,UAAU,WAAW,GAAG,CAChE;EAEA,MAAM,gBAAgB,KAAuB;EAC7C,SAAS,cAAc,MAAyB;AAC9C,iBAAc,QAAQ;;EAGxB,MAAM,cAAc,eAAe;AACjC,OAAI,cAAc,MAAO,QAAO,cAAc;AAE9C,OAAI,YAAY,OAAO,OAAO,CAAC,YAAY,MAAM,QAAS,QAAO;AACjE,OAAI,YAAY,OAAO,QAAS,QAAO;AAEvC,UAAO;IACR;;uBAIC,mBA+EM,OAAA,EA9EJ,OAAK,eAAA,CAAC,kBAAgB;UACA,kBAAA;eAAoC,QAAA,UAAK;WAIxC,QAAA,UAAK,cAAA,WAAA,EAA5B,YAA+C,yBAAA,EAAA,KAAA,GAAA,CAAA,IAElC,QAAA,UAAK,qBAAA,WAAA,EADlB,mBAIM,OAJN,YAIM,CADJ,YAAmB,wBAAA,CAAA,CAAA,IAGR,QAAA,UAAK,sBAAA,WAAA,EADlB,mBAIM,OAJN,YAIM,CADJ,YAAkB,uBAAA,CAAA,CAAA,IAGP,QAAA,UAAK,oBAAA,WAAA,EADlB,mBASS,UAAA;;IAPP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAA,QAAiB,CAAI,kBAAA;OAC7B,YAAkB,uBAAA,EAES,kBAAA,SAAA,WAAA,EAA3B,YAAgD,MAAA,oBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAChD,YAA+B,MAAA,qBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA,IAGpB,QAAA,UAAK,sBAAA,WAAA,EADlB,mBASS,UAAA;;IAPP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAA,QAAiB,CAAI,kBAAA;OAC7B,YAAkB,uBAAA,EAES,kBAAA,SAAA,WAAA,EAA3B,YAAgD,MAAA,oBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAChD,YAA+B,MAAA,qBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA,IAGpB,QAAA,UAAK,cAAA,WAAA,EADlB,mBASS,UAAA;;IAPP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAA,QAAiB,CAAI,kBAAA;OAC7B,YAAmB,wBAAA,EAEQ,kBAAA,SAAA,WAAA,EAA3B,YAAgD,MAAA,oBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAChD,YAA+B,MAAA,qBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA,IAEP,QAAA,UAAK,mBAAA,WAAA,EAA/B,YAAuD,uBAAA,EAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EACvD,mBA8BM,OA9BN,YA8BM,CA7BJ,mBA4BM,OA5BN,YA4BM,CA1BI,QAAA,WAAA,WAAA,EADR,mBAUM,OAVN,YAUM,CAAA,OAAA,OAAA,OAAA,KAPJ,mBAEM,OAAA,EAFD,OAAM,0BAAwB,EAAA,CACjC,mBAAgB,MAAA,MAAZ,UAAO,CAAA,EAAA,GAAA,GAEb,YAGgB,MAAA,gBAAA,EAAA;IAFd,OAAM;IACL,SAAS,KAAK,UAAU,QAAA,SAAO,MAAA,EAAA;IAChC,MAAK;+DAGD,aAAA,SAAA,WAAA,EADR,mBAeM,OAfN,YAeM,CAZJ,mBAMM,OANN,YAMM,CAAA,OAAA,OAAA,OAAA,KALJ,mBAAiB,MAAA,MAAb,YAAQ,GAAA,GAEJ,YAAA,OAAa,OAAO,YAAA,MAAY,WAAA,WAAA,EADxC,YAG4B,4BAAA;;gBADjB,YAAA;6EAAW,QAAA;IACnB,UAAQ;kEAEb,YAIiC,sBAAA;IAH9B,MAAM,aAAA,MAAa;IACnB,SAAS,YAAA;IACT,aAAa,YAAA;IACb,cAAc,aAAA"}
|
|
@@ -13,7 +13,7 @@ function _sfc_render(_ctx, _cache) {
|
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg"
|
|
14
14
|
}, [createElementVNode("path", { d: "M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z" })])], -1), createTextVNode(" Sending Request to Endpoint ", -1)])]);
|
|
15
15
|
}
|
|
16
|
-
var SendingRequest_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
16
|
+
var SendingRequest_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a375f414"]]);
|
|
17
17
|
//#endregion
|
|
18
18
|
export { SendingRequest_default as default };
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SendingRequest.vue.js","names":[],"sources":["../../src/components/SendingRequest.vue"],"sourcesContent":["<template>\n <div class=\"sendingRequest\">\n <div class=\"playIcon\">\n <svg\n fill=\"currentColor\"\n height=\"32\"\n viewBox=\"0 0 256 256\"\n width=\"32\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"></path>\n </svg>\n </div>\n Sending Request to Endpoint\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius:
|
|
1
|
+
{"version":3,"file":"SendingRequest.vue.js","names":[],"sources":["../../src/components/SendingRequest.vue"],"sourcesContent":["<template>\n <div class=\"sendingRequest\">\n <div class=\"playIcon\">\n <svg\n fill=\"currentColor\"\n height=\"32\"\n viewBox=\"0 0 256 256\"\n width=\"32\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"></path>\n </svg>\n </div>\n Sending Request to Endpoint\n </div>\n</template>\n\n<style scoped>\n.playIcon {\n padding: 4px;\n height: 16px;\n width: 16px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: var(--scalar-background-1);\n border-radius: var(--scalar-radius-full);\n}\n\n.playIcon::before {\n content: '';\n width: 16px;\n height: 16px;\n display: inline-block;\n box-sizing: border-box;\n position: absolute;\n border-width: 1.75px;\n border-style: solid;\n border-color: currentcolor currentcolor transparent;\n border-image: initial;\n border-radius: var(--scalar-radius-full);\n background: var(--scalar-background-1);\n animation: 0.42s linear 0s infinite normal none running rotation;\n}\n\n.sendingRequest {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--scalar-color-blue);\n font-weight: var(--scalar-semibold);\n min-height: 40px;\n font-size: var(--scalar-font-size-3);\n position: relative;\n}\n\n.sendingRequest svg {\n width: 100%;\n height: 100%;\n z-index: 1;\n border-radius: var(--scalar-radius-full);\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n"],"mappings":";;;;;mBACO,OAAM,kBAAgB;;qBAA3B,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZJ,mBAUM,OAAA,EAVD,OAAM,YAAU,EAAA,CACnB,mBAQM,OAAA;EAPJ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,OAAM;KACN,mBAC4M,QAAA,EAA1M,GAAE,kMAAgM,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,gBAElM,iCAER,GAAA,CAAA,EAAA,CAAA"}
|
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
2
2
|
import UploadSection_vue_vue_type_script_setup_true_lang_default from "./UploadSection.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/UploadSection.vue
|
|
5
|
-
var UploadSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(UploadSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var UploadSection_default = /* @__PURE__ */ _plugin_vue_export_helper_default(UploadSection_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9621c76b"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { UploadSection_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadSection.vue.js","names":[],"sources":["../../src/components/UploadSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { ScalarIconCheck, ScalarIconXCircle } from '@scalar/icons'\nimport { computed } from 'vue'\n\nimport { type UploadTmpDocumentState } from '@/hooks/use-upload-tmp-document'\n\nconst { uploadState } = defineProps<{\n uploadState: UploadTmpDocumentState\n}>()\n\nconst loadingState = useLoadingState()\n\nconst isLoading = computed(() =>\n ['uploading', 'processing', 'loading'].includes(uploadState.type),\n)\n</script>\n\n<template>\n <div\n class=\"uploadSection\"\n :class=\"{\n error: uploadState.type === 'error',\n done: uploadState.type === 'done',\n }\">\n <div\n v-if=\"isLoading\"\n class=\"flex items-center gap-1.5\">\n <ScalarLoading\n class=\"text-blue\"\n :loader=\"{\n ...loadingState,\n isLoading: true,\n }\"\n size=\"lg\" />\n <strong\n v-if=\"uploadState.type === 'loading'\"\n class=\"uploadText\">\n Loading OpenAPI document…\n </strong>\n <strong\n v-else-if=\"uploadState.type === 'processing'\"\n class=\"uploadText\">\n Processing OpenAPI document…\n </strong>\n <strong\n v-else\n class=\"uploadText\">\n Uploading OpenAPI document…\n </strong>\n </div>\n <strong\n v-if=\"uploadState.type === 'done'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconCheck class=\"icon text-green\" />\n Your OpenAPI document has been processed successfully.\n </strong>\n <strong\n v-if=\"uploadState.type === 'error'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconXCircle class=\"icon text-red\" />\n {{ uploadState.error }}\n </strong>\n </div>\n</template>\n\n<style scoped>\n.uploadSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"UploadSection.vue.js","names":[],"sources":["../../src/components/UploadSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { ScalarIconCheck, ScalarIconXCircle } from '@scalar/icons'\nimport { computed } from 'vue'\n\nimport { type UploadTmpDocumentState } from '@/hooks/use-upload-tmp-document'\n\nconst { uploadState } = defineProps<{\n uploadState: UploadTmpDocumentState\n}>()\n\nconst loadingState = useLoadingState()\n\nconst isLoading = computed(() =>\n ['uploading', 'processing', 'loading'].includes(uploadState.type),\n)\n</script>\n\n<template>\n <div\n class=\"uploadSection\"\n :class=\"{\n error: uploadState.type === 'error',\n done: uploadState.type === 'done',\n }\">\n <div\n v-if=\"isLoading\"\n class=\"flex items-center gap-1.5\">\n <ScalarLoading\n class=\"text-blue\"\n :loader=\"{\n ...loadingState,\n isLoading: true,\n }\"\n size=\"lg\" />\n <strong\n v-if=\"uploadState.type === 'loading'\"\n class=\"uploadText\">\n Loading OpenAPI document…\n </strong>\n <strong\n v-else-if=\"uploadState.type === 'processing'\"\n class=\"uploadText\">\n Processing OpenAPI document…\n </strong>\n <strong\n v-else\n class=\"uploadText\">\n Uploading OpenAPI document…\n </strong>\n </div>\n <strong\n v-if=\"uploadState.type === 'done'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconCheck class=\"icon text-green\" />\n Your OpenAPI document has been processed successfully.\n </strong>\n <strong\n v-if=\"uploadState.type === 'error'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconXCircle class=\"icon text-red\" />\n {{ uploadState.error }}\n </strong>\n </div>\n</template>\n\n<style scoped>\n.uploadSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n\n.uploadSection.error {\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 95%\n );\n}\n\n.uploadSection.done {\n background: color-mix(\n in srgb,\n var(--scalar-color-green),\n var(--scalar-background-1) 95%\n );\n}\n\n.uploadText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.icon {\n height: 20px;\n width: 20px;\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadSection.vue.script.js","names":[],"sources":["../../src/components/UploadSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { ScalarIconCheck, ScalarIconXCircle } from '@scalar/icons'\nimport { computed } from 'vue'\n\nimport { type UploadTmpDocumentState } from '@/hooks/use-upload-tmp-document'\n\nconst { uploadState } = defineProps<{\n uploadState: UploadTmpDocumentState\n}>()\n\nconst loadingState = useLoadingState()\n\nconst isLoading = computed(() =>\n ['uploading', 'processing', 'loading'].includes(uploadState.type),\n)\n</script>\n\n<template>\n <div\n class=\"uploadSection\"\n :class=\"{\n error: uploadState.type === 'error',\n done: uploadState.type === 'done',\n }\">\n <div\n v-if=\"isLoading\"\n class=\"flex items-center gap-1.5\">\n <ScalarLoading\n class=\"text-blue\"\n :loader=\"{\n ...loadingState,\n isLoading: true,\n }\"\n size=\"lg\" />\n <strong\n v-if=\"uploadState.type === 'loading'\"\n class=\"uploadText\">\n Loading OpenAPI document…\n </strong>\n <strong\n v-else-if=\"uploadState.type === 'processing'\"\n class=\"uploadText\">\n Processing OpenAPI document…\n </strong>\n <strong\n v-else\n class=\"uploadText\">\n Uploading OpenAPI document…\n </strong>\n </div>\n <strong\n v-if=\"uploadState.type === 'done'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconCheck class=\"icon text-green\" />\n Your OpenAPI document has been processed successfully.\n </strong>\n <strong\n v-if=\"uploadState.type === 'error'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconXCircle class=\"icon text-red\" />\n {{ uploadState.error }}\n </strong>\n </div>\n</template>\n\n<style scoped>\n.uploadSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius:
|
|
1
|
+
{"version":3,"file":"UploadSection.vue.script.js","names":[],"sources":["../../src/components/UploadSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { ScalarIconCheck, ScalarIconXCircle } from '@scalar/icons'\nimport { computed } from 'vue'\n\nimport { type UploadTmpDocumentState } from '@/hooks/use-upload-tmp-document'\n\nconst { uploadState } = defineProps<{\n uploadState: UploadTmpDocumentState\n}>()\n\nconst loadingState = useLoadingState()\n\nconst isLoading = computed(() =>\n ['uploading', 'processing', 'loading'].includes(uploadState.type),\n)\n</script>\n\n<template>\n <div\n class=\"uploadSection\"\n :class=\"{\n error: uploadState.type === 'error',\n done: uploadState.type === 'done',\n }\">\n <div\n v-if=\"isLoading\"\n class=\"flex items-center gap-1.5\">\n <ScalarLoading\n class=\"text-blue\"\n :loader=\"{\n ...loadingState,\n isLoading: true,\n }\"\n size=\"lg\" />\n <strong\n v-if=\"uploadState.type === 'loading'\"\n class=\"uploadText\">\n Loading OpenAPI document…\n </strong>\n <strong\n v-else-if=\"uploadState.type === 'processing'\"\n class=\"uploadText\">\n Processing OpenAPI document…\n </strong>\n <strong\n v-else\n class=\"uploadText\">\n Uploading OpenAPI document…\n </strong>\n </div>\n <strong\n v-if=\"uploadState.type === 'done'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconCheck class=\"icon text-green\" />\n Your OpenAPI document has been processed successfully.\n </strong>\n <strong\n v-if=\"uploadState.type === 'error'\"\n class=\"uploadText flex items-center gap-1.5\">\n <ScalarIconXCircle class=\"icon text-red\" />\n {{ uploadState.error }}\n </strong>\n </div>\n</template>\n\n<style scoped>\n.uploadSection {\n width: 100%;\n margin-bottom: -16px;\n padding: 8px 8px 24px 12px;\n position: relative;\n background: color-mix(\n in srgb,\n var(--scalar-color-blue),\n var(--scalar-background-1) 95%\n );\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n border-radius: var(--scalar-radius-3xl) var(--scalar-radius-3xl) 0 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 0;\n transform: translate3d(0, calc(-100% + 16px), 0);\n}\n\n.uploadSection.error {\n background: color-mix(\n in srgb,\n var(--scalar-color-red),\n var(--scalar-background-1) 95%\n );\n}\n\n.uploadSection.done {\n background: color-mix(\n in srgb,\n var(--scalar-color-green),\n var(--scalar-background-1) 95%\n );\n}\n\n.uploadText {\n font-weight: var(--scalar-semibold);\n font-size: var(--scalar-font-size-3);\n}\n\n.icon {\n height: 20px;\n width: 20px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,eAAe,iBAAgB;EAErC,MAAM,YAAY,eAChB;GAAC;GAAa;GAAc;GAAU,CAAC,SAAS,QAAA,YAAY,KAAK,CACnE;;uBAIE,mBA4CM,OAAA,EA3CJ,OAAK,eAAA,CAAC,iBAAe;WACE,QAAA,YAAY,SAAI;UAA0B,QAAA,YAAY,SAAI;;IAKzE,UAAA,SAAA,WAAA,EADR,mBAyBM,OAzBN,YAyBM,CAtBJ,YAMc,MAAA,cAAA,EAAA;KALZ,OAAM;KACL,QAAM;SAAiB,MAAA,aAAY;;;KAIpC,MAAK;6BAEC,QAAA,YAAY,SAAI,aAAA,WAAA,EADxB,mBAIS,UAJT,YAEqB,8BAErB,IAEa,QAAA,YAAY,SAAI,gBAAA,WAAA,EAD7B,mBAIS,UAJT,YAEqB,iCAErB,KAAA,WAAA,EACA,mBAIS,UAJT,YAEqB,gCAErB,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAGM,QAAA,YAAY,SAAI,UAAA,WAAA,EADxB,mBAKS,UALT,YAKS,CAFP,YAA2C,MAAA,gBAAA,EAAA,EAA1B,OAAM,mBAAiB,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAG,4DAE7C,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEQ,QAAA,YAAY,SAAI,WAAA,WAAA,EADxB,mBAKS,UALT,YAKS,CAFP,YAA2C,MAAA,kBAAA,EAAA,EAAxB,OAAM,iBAAe,CAAA,EAAA,gBAAG,MAC3C,gBAAG,QAAA,YAAY,MAAK,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
|