@scalar/api-client 3.3.0 → 3.3.1

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/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @scalar/api-client
2
2
 
3
+ ## 3.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#8839](https://github.com/scalar/scalar/pull/8839): Fix modal fade-in animation stutter by replacing v-show with CSS visibility/opacity to avoid forced layout recalculation on open
8
+
3
9
  ## 3.3.0
4
10
 
5
11
  ### Minor Changes
package/dist/style.css CHANGED
@@ -8895,7 +8895,7 @@ to {
8895
8895
  background-color: var(--scalar-background-danger);
8896
8896
  }
8897
8897
  /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
8898
- .scalar .scalar-app-layout[data-v-6118685a] {
8898
+ .scalar .scalar-app-layout[data-v-ae5e8531] {
8899
8899
  background: var(--scalar-background-1);
8900
8900
  border: var(--scalar-border-width) solid var(--scalar-border-color);
8901
8901
  border-radius: 8px;
@@ -8907,12 +8907,12 @@ to {
8907
8907
  overflow: hidden;
8908
8908
  }
8909
8909
  @media (max-width: 720px) and (max-height: 480px) {
8910
- .scalar .scalar-app-layout[data-v-6118685a] {
8910
+ .scalar .scalar-app-layout[data-v-ae5e8531] {
8911
8911
  height: 100%;
8912
8912
  max-height: 90svh;
8913
8913
  }
8914
8914
  }
8915
- .scalar .scalar-app-exit[data-v-6118685a] {
8915
+ .scalar .scalar-app-exit[data-v-ae5e8531] {
8916
8916
  cursor: pointer;
8917
8917
  z-index: -1;
8918
8918
  background: #00000038;
@@ -8922,10 +8922,10 @@ to {
8922
8922
  top: 0;
8923
8923
  left: 0;
8924
8924
  }
8925
- .dark-mode .scalar .scalar-app-exit[data-v-6118685a] {
8925
+ .dark-mode .scalar .scalar-app-exit[data-v-ae5e8531] {
8926
8926
  background: #00000073;
8927
8927
  }
8928
- .scalar .scalar-app-exit[data-v-6118685a]:before {
8928
+ .scalar .scalar-app-exit[data-v-ae5e8531]:before {
8929
8929
  text-align: center;
8930
8930
  color: #fff;
8931
8931
  opacity: .6;
@@ -8937,15 +8937,19 @@ to {
8937
8937
  top: 0;
8938
8938
  right: 12px;
8939
8939
  }
8940
- .scalar .scalar-app-exit[data-v-6118685a]:hover:before {
8940
+ .scalar .scalar-app-exit[data-v-ae5e8531]:hover:before {
8941
8941
  opacity: 1;
8942
8942
  }
8943
- .scalar-container[data-v-6118685a] {
8944
- visibility: visible;
8943
+ .scalar-container[data-v-ae5e8531] {
8944
+ visibility: hidden;
8945
+ opacity: 0;
8946
+ pointer-events: none;
8947
+ will-change: opacity;
8945
8948
  justify-content: center;
8946
8949
  align-items: center;
8947
8950
  width: 100%;
8948
8951
  height: 100%;
8952
+ transition: opacity .35s, visibility 0s linear .35s;
8949
8953
  display: flex;
8950
8954
  position: fixed;
8951
8955
  top: 0;
@@ -8953,18 +8957,18 @@ to {
8953
8957
  left: 0;
8954
8958
  overflow: hidden;
8955
8959
  }
8956
- .scalar .url-form-input[data-v-6118685a] {
8960
+ .scalar-container.scalar-client--open[data-v-ae5e8531] {
8961
+ opacity: 1;
8962
+ visibility: visible;
8963
+ pointer-events: auto;
8964
+ transition: opacity .35s;
8965
+ }
8966
+ .scalar .url-form-input[data-v-ae5e8531] {
8957
8967
  min-height: auto !important;
8958
8968
  }
8959
- .scalar .scalar-container[data-v-6118685a] {
8969
+ .scalar .scalar-container[data-v-ae5e8531] {
8960
8970
  line-height: normal;
8961
8971
  }
8962
- .scalar-client-fade-enter-active[data-v-6118685a], .scalar-client-fade-leave-active[data-v-6118685a] {
8963
- transition: opacity .35s;
8964
- }
8965
- .scalar-client-fade-enter-from[data-v-6118685a], .scalar-client-fade-leave-to[data-v-6118685a] {
8966
- opacity: 0;
8967
- }
8968
8972
 
8969
8973
  .document-scripts-editors__container[data-v-8c8fa790] {
8970
8974
  min-height: 300px;
@@ -2,9 +2,9 @@ import { type ModalState } from '@scalar/components';
2
2
  type __VLS_Props = {
3
3
  modalState: ModalState;
4
4
  };
5
- declare var __VLS_13: {};
5
+ declare var __VLS_7: {};
6
6
  type __VLS_Slots = {} & {
7
- default?: (props: typeof __VLS_13) => any;
7
+ default?: (props: typeof __VLS_7) => any;
8
8
  };
9
9
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
10
10
  close: () => any;
@@ -1 +1 @@
1
- {"version":3,"file":"ModalClientContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"names":[],"mappings":"AAkLA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAW3B,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAkJ9C,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOhD,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"ModalClientContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"names":[],"mappings":"AA0KA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAI3B,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAgI9C,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
2
2
  import ModalClientContainer_vue_vue_type_script_setup_true_lang_default from "./ModalClientContainer.vue.script.js";
3
3
  /* empty css */
4
4
  //#region src/v2/components/modals/ModalClientContainer.vue
5
- var ModalClientContainer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModalClientContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6118685a"]]);
5
+ var ModalClientContainer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModalClientContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ae5e8531"]]);
6
6
  //#endregion
7
7
  export { ModalClientContainer_default as default };
8
8
 
@@ -1 +1 @@
1
- {"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addScalarClassesToHeadless,\n ScalarTeleportRoot,\n type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport {\n nextTick,\n onBeforeMount,\n onBeforeUnmount,\n ref,\n useId,\n watch,\n} from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n (e: 'open'): void\n (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\nconst id = useId()\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n useFocusTrap(client, {\n allowOutsideClick: true,\n fallbackFocus: `#${id}`,\n })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n () => props.modalState.open,\n async (open) => {\n if (open) {\n await nextTick()\n activateFocusTrap()\n emit('open')\n } else {\n deactivateFocusTrap()\n emit('close')\n }\n },\n { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n deactivateFocusTrap()\n})\n</script>\n\n<template>\n <Transition name=\"scalar-client-fade\">\n <div\n v-show=\"modalState.open\"\n class=\"scalar scalar-app z-overlay relative\">\n <div class=\"scalar-container\">\n <div\n :id=\"id\"\n ref=\"client\"\n aria-label=\"API Client\"\n aria-modal=\"true\"\n v-bind=\"$attrs\"\n class=\"scalar-app-layout scalar-client\"\n role=\"dialog\"\n tabindex=\"-1\">\n <ScalarTeleportRoot>\n <slot />\n </ScalarTeleportRoot>\n </div>\n\n <!-- overlay / exit area -->\n <div\n class=\"scalar-app-exit\"\n @click=\"modalState.hide()\" />\n </div>\n </div>\n </Transition>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n background: var(--scalar-background-1);\n height: calc(100% - 120px);\n max-width: 1390px;\n width: 100%;\n margin: auto;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n .scalar .scalar-app-layout {\n height: 100%;\n max-height: 90svh;\n }\n}\n\n.scalar .scalar-app-exit {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: #00000038;\n cursor: pointer;\n z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n font-family: sans-serif;\n position: absolute;\n top: 0;\n right: 12px;\n font-size: 30px;\n font-weight: 100;\n line-height: 50px;\n text-align: center;\n color: white;\n opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n opacity: 1;\n}\n\n/* container */\n.scalar-container {\n overflow: hidden;\n visibility: visible;\n position: fixed;\n bottom: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.scalar .url-form-input {\n min-height: auto !important;\n}\n\n.scalar .scalar-container {\n line-height: normal;\n}\n\n.scalar-client-fade-enter-active,\n.scalar-client-fade-leave-active {\n transition: opacity 0.35s ease;\n}\n\n.scalar-client-fade-enter-from,\n.scalar-client-fade-leave-to {\n opacity: 0;\n}\n</style>\n"],"mappings":""}
1
+ {"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addScalarClassesToHeadless,\n ScalarTeleportRoot,\n type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport { nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n (e: 'open'): void\n (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n useFocusTrap(client, {\n allowOutsideClick: true,\n fallbackFocus: () => client.value as HTMLElement,\n })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n () => props.modalState.open,\n async (open) => {\n if (open) {\n await nextTick()\n activateFocusTrap()\n emit('open')\n } else {\n deactivateFocusTrap()\n emit('close')\n }\n },\n { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n deactivateFocusTrap()\n})\n</script>\n\n<template>\n <div class=\"scalar scalar-app z-overlay relative\">\n <div\n class=\"scalar-container\"\n :class=\"{ 'scalar-client--open': modalState.open }\">\n <div\n ref=\"client\"\n aria-label=\"API Client\"\n aria-modal=\"true\"\n v-bind=\"$attrs\"\n class=\"scalar-app-layout scalar-client\"\n role=\"dialog\"\n tabindex=\"-1\">\n <ScalarTeleportRoot>\n <slot />\n </ScalarTeleportRoot>\n </div>\n\n <!-- overlay / exit area -->\n <div\n class=\"scalar-app-exit\"\n @click=\"modalState.hide()\" />\n </div>\n </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n background: var(--scalar-background-1);\n height: calc(100% - 120px);\n max-width: 1390px;\n width: 100%;\n margin: auto;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n .scalar .scalar-app-layout {\n height: 100%;\n max-height: 90svh;\n }\n}\n\n.scalar .scalar-app-exit {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: #00000038;\n cursor: pointer;\n z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n font-family: sans-serif;\n position: absolute;\n top: 0;\n right: 12px;\n font-size: 30px;\n font-weight: 100;\n line-height: 50px;\n text-align: center;\n color: white;\n opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n opacity: 1;\n}\n\n/* container */\n.scalar-container {\n overflow: hidden;\n visibility: hidden;\n position: fixed;\n bottom: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n will-change: opacity;\n transition:\n opacity 0.35s ease,\n visibility 0s linear 0.35s;\n}\n\n.scalar-container.scalar-client--open {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transition: opacity 0.35s ease;\n}\n\n.scalar .url-form-input {\n min-height: auto !important;\n}\n\n.scalar .scalar-container {\n line-height: normal;\n}\n</style>\n"],"mappings":""}
@@ -1,10 +1,8 @@
1
- import { Transition, createBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
1
+ import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
2
2
  import { ScalarTeleportRoot, addScalarClassesToHeadless } from "@scalar/components";
3
3
  import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
4
4
  //#region src/v2/components/modals/ModalClientContainer.vue?vue&type=script&setup=true&lang.ts
5
5
  var _hoisted_1 = { class: "scalar scalar-app z-overlay relative" };
6
- var _hoisted_2 = { class: "scalar-container" };
7
- var _hoisted_3 = ["id"];
8
6
  var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
9
7
  __name: "ModalClientContainer",
10
8
  props: { modalState: {} },
@@ -13,10 +11,9 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PUR
13
11
  const props = __props;
14
12
  const emit = __emit;
15
13
  const client = ref(null);
16
- const id = useId();
17
14
  const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(client, {
18
15
  allowOutsideClick: true,
19
- fallbackFocus: `#${id}`
16
+ fallbackFocus: () => client.value
20
17
  });
21
18
  onBeforeMount(() => addScalarClassesToHeadless());
22
19
  watch(() => props.modalState.open, async (open) => {
@@ -33,26 +30,22 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PUR
33
30
  deactivateFocusTrap();
34
31
  });
35
32
  return (_ctx, _cache) => {
36
- return openBlock(), createBlock(Transition, { name: "scalar-client-fade" }, {
37
- default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", mergeProps({
38
- id: unref(id),
39
- ref_key: "client",
40
- ref: client,
41
- "aria-label": "API Client",
42
- "aria-modal": "true"
43
- }, _ctx.$attrs, {
44
- class: "scalar-app-layout scalar-client",
45
- role: "dialog",
46
- tabindex: "-1"
47
- }), [createVNode(unref(ScalarTeleportRoot), null, {
48
- default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
49
- _: 3
50
- })], 16, _hoisted_3), createElementVNode("div", {
51
- class: "scalar-app-exit",
52
- onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
53
- })])], 512), [[vShow, __props.modalState.open]])]),
33
+ return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["scalar-container", { "scalar-client--open": __props.modalState.open }]) }, [createElementVNode("div", mergeProps({
34
+ ref_key: "client",
35
+ ref: client,
36
+ "aria-label": "API Client",
37
+ "aria-modal": "true"
38
+ }, _ctx.$attrs, {
39
+ class: "scalar-app-layout scalar-client",
40
+ role: "dialog",
41
+ tabindex: "-1"
42
+ }), [createVNode(unref(ScalarTeleportRoot), null, {
43
+ default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
54
44
  _: 3
55
- });
45
+ })], 16), createElementVNode("div", {
46
+ class: "scalar-app-exit",
47
+ onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
48
+ })], 2)]);
56
49
  };
57
50
  }
58
51
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ModalClientContainer.vue.script.js","names":["$attrs"],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addScalarClassesToHeadless,\n ScalarTeleportRoot,\n type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport {\n nextTick,\n onBeforeMount,\n onBeforeUnmount,\n ref,\n useId,\n watch,\n} from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n (e: 'open'): void\n (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\nconst id = useId()\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n useFocusTrap(client, {\n allowOutsideClick: true,\n fallbackFocus: `#${id}`,\n })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n () => props.modalState.open,\n async (open) => {\n if (open) {\n await nextTick()\n activateFocusTrap()\n emit('open')\n } else {\n deactivateFocusTrap()\n emit('close')\n }\n },\n { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n deactivateFocusTrap()\n})\n</script>\n\n<template>\n <Transition name=\"scalar-client-fade\">\n <div\n v-show=\"modalState.open\"\n class=\"scalar scalar-app z-overlay relative\">\n <div class=\"scalar-container\">\n <div\n :id=\"id\"\n ref=\"client\"\n aria-label=\"API Client\"\n aria-modal=\"true\"\n v-bind=\"$attrs\"\n class=\"scalar-app-layout scalar-client\"\n role=\"dialog\"\n tabindex=\"-1\">\n <ScalarTeleportRoot>\n <slot />\n </ScalarTeleportRoot>\n </div>\n\n <!-- overlay / exit area -->\n <div\n class=\"scalar-app-exit\"\n @click=\"modalState.hide()\" />\n </div>\n </div>\n </Transition>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n background: var(--scalar-background-1);\n height: calc(100% - 120px);\n max-width: 1390px;\n width: 100%;\n margin: auto;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n .scalar .scalar-app-layout {\n height: 100%;\n max-height: 90svh;\n }\n}\n\n.scalar .scalar-app-exit {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: #00000038;\n cursor: pointer;\n z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n font-family: sans-serif;\n position: absolute;\n top: 0;\n right: 12px;\n font-size: 30px;\n font-weight: 100;\n line-height: 50px;\n text-align: center;\n color: white;\n opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n opacity: 1;\n}\n\n/* container */\n.scalar-container {\n overflow: hidden;\n visibility: visible;\n position: fixed;\n bottom: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.scalar .url-form-input {\n min-height: auto !important;\n}\n\n.scalar .scalar-container {\n line-height: normal;\n}\n\n.scalar-client-fade-enter-active,\n.scalar-client-fade-leave-active {\n transition: opacity 0.35s ease;\n}\n\n.scalar-client-fade-enter-from,\n.scalar-client-fade-leave-to {\n opacity: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAgBA,MAAM,QAAQ;EACd,MAAM,OAAO;EAKb,MAAM,SAAS,IAAwB,KAAI;EAC3C,MAAM,KAAK,OAAM;EAEjB,MAAM,EAAE,UAAU,mBAAmB,YAAY,wBAC/C,aAAa,QAAQ;GACnB,mBAAmB;GACnB,eAAe,IAAI;GACpB,CAAA;AAGH,sBAAoB,4BAA4B,CAAA;AAGhD,cACQ,MAAM,WAAW,MACvB,OAAO,SAAS;AACd,OAAI,MAAM;AACR,UAAM,UAAS;AACf,uBAAkB;AAClB,SAAK,OAAM;UACN;AACL,yBAAoB;AACpB,SAAK,QAAO;;KAGhB,EAAE,WAAW,OAAO,CACtB;AAGA,wBAAsB;AACpB,wBAAoB;IACrB;;uBAIC,YAyBa,YAAA,EAzBD,MAAK,sBAAoB,EAAA;2BAwB7B,CAAA,eAvBN,mBAuBM,OAvBN,YAuBM,CApBJ,mBAmBM,OAnBN,YAmBM,CAlBJ,mBAYM,OAZN,WAYM;KAXH,IAAI,MAAA,GAAE;cACH;KAAJ,KAAI;KACJ,cAAW;KACX,cAAW;OACHA,KAAAA,QAAM;KACd,OAAM;KACN,MAAK;KACL,UAAS;SACT,YAEqB,MAAA,mBAAA,EAAA,MAAA;4BADX,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA;;0BAKZ,mBAE+B,OAAA;KAD7B,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,MAAI;0BApBnB,QAAA,WAAW,KAAI,CAAA,CAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"ModalClientContainer.vue.script.js","names":["$attrs"],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addScalarClassesToHeadless,\n ScalarTeleportRoot,\n type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport { nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n (e: 'open'): void\n (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n useFocusTrap(client, {\n allowOutsideClick: true,\n fallbackFocus: () => client.value as HTMLElement,\n })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n () => props.modalState.open,\n async (open) => {\n if (open) {\n await nextTick()\n activateFocusTrap()\n emit('open')\n } else {\n deactivateFocusTrap()\n emit('close')\n }\n },\n { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n deactivateFocusTrap()\n})\n</script>\n\n<template>\n <div class=\"scalar scalar-app z-overlay relative\">\n <div\n class=\"scalar-container\"\n :class=\"{ 'scalar-client--open': modalState.open }\">\n <div\n ref=\"client\"\n aria-label=\"API Client\"\n aria-modal=\"true\"\n v-bind=\"$attrs\"\n class=\"scalar-app-layout scalar-client\"\n role=\"dialog\"\n tabindex=\"-1\">\n <ScalarTeleportRoot>\n <slot />\n </ScalarTeleportRoot>\n </div>\n\n <!-- overlay / exit area -->\n <div\n class=\"scalar-app-exit\"\n @click=\"modalState.hide()\" />\n </div>\n </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n background: var(--scalar-background-1);\n height: calc(100% - 120px);\n max-width: 1390px;\n width: 100%;\n margin: auto;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n .scalar .scalar-app-layout {\n height: 100%;\n max-height: 90svh;\n }\n}\n\n.scalar .scalar-app-exit {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: #00000038;\n cursor: pointer;\n z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n font-family: sans-serif;\n position: absolute;\n top: 0;\n right: 12px;\n font-size: 30px;\n font-weight: 100;\n line-height: 50px;\n text-align: center;\n color: white;\n opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n opacity: 1;\n}\n\n/* container */\n.scalar-container {\n overflow: hidden;\n visibility: hidden;\n position: fixed;\n bottom: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n will-change: opacity;\n transition:\n opacity 0.35s ease,\n visibility 0s linear 0.35s;\n}\n\n.scalar-container.scalar-client--open {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transition: opacity 0.35s ease;\n}\n\n.scalar .url-form-input {\n min-height: auto !important;\n}\n\n.scalar .scalar-container {\n line-height: normal;\n}\n</style>\n"],"mappings":";;;;;;;;;;EASA,MAAM,QAAQ;EACd,MAAM,OAAO;EAKb,MAAM,SAAS,IAAwB,KAAI;EAE3C,MAAM,EAAE,UAAU,mBAAmB,YAAY,wBAC/C,aAAa,QAAQ;GACnB,mBAAmB;GACnB,qBAAqB,OAAO;GAC7B,CAAA;AAGH,sBAAoB,4BAA4B,CAAA;AAGhD,cACQ,MAAM,WAAW,MACvB,OAAO,SAAS;AACd,OAAI,MAAM;AACR,UAAM,UAAS;AACf,uBAAkB;AAClB,SAAK,OAAM;UACN;AACL,yBAAoB;AACpB,SAAK,QAAO;;KAGhB,EAAE,WAAW,OAAO,CACtB;AAGA,wBAAsB;AACpB,wBAAoB;IACrB;;uBAIC,mBAsBM,OAtBN,YAsBM,CArBJ,mBAoBM,OAAA,EAnBJ,OAAK,eAAA,CAAC,oBAAkB,EAAA,uBACS,QAAA,WAAW,MAAI,CAAA,CAAA,EAAA,EAAA,CAChD,mBAWM,OAXN,WAWM;aAVA;IAAJ,KAAI;IACJ,cAAW;IACX,cAAW;MACHA,KAAAA,QAAM;IACd,OAAM;IACN,MAAK;IACL,UAAS;QACT,YAEqB,MAAA,mBAAA,EAAA,MAAA;2BADX,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA;;aAKZ,mBAE+B,OAAA;IAD7B,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,MAAI"}
@@ -1,6 +1,6 @@
1
1
  //#region src/v2/constants.ts
2
2
  /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
3
- var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.3.0";
3
+ var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.3.1";
4
4
  //#endregion
5
5
  export { APP_VERSION };
6
6
 
package/package.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "rest",
19
19
  "testing"
20
20
  ],
21
- "version": "3.3.0",
21
+ "version": "3.3.1",
22
22
  "engines": {
23
23
  "node": ">=22"
24
24
  },
@@ -332,22 +332,22 @@
332
332
  "vue-router": "5.0.4",
333
333
  "yaml": "^2.8.0",
334
334
  "zod": "^4.3.5",
335
- "@scalar/components": "0.22.4",
336
- "@scalar/helpers": "0.5.2",
337
- "@scalar/oas-utils": "0.13.3",
335
+ "@scalar/components": "0.22.5",
336
+ "@scalar/helpers": "0.5.3",
337
+ "@scalar/json-magic": "0.12.9",
338
338
  "@scalar/icons": "0.7.2",
339
- "@scalar/json-magic": "0.12.8",
340
339
  "@scalar/openapi-types": "0.8.0",
341
- "@scalar/postman-to-openapi": "0.7.1",
342
- "@scalar/sidebar": "0.9.5",
343
- "@scalar/snippetz": "0.9.2",
344
- "@scalar/types": "0.9.2",
345
- "@scalar/use-codemirror": "0.14.11",
340
+ "@scalar/oas-utils": "0.13.4",
341
+ "@scalar/postman-to-openapi": "0.7.2",
342
+ "@scalar/snippetz": "0.9.3",
343
+ "@scalar/sidebar": "0.9.6",
346
344
  "@scalar/themes": "0.15.3",
345
+ "@scalar/types": "0.9.3",
346
+ "@scalar/use-codemirror": "0.14.11",
347
347
  "@scalar/use-toasts": "0.10.2",
348
348
  "@scalar/use-hooks": "0.4.3",
349
- "@scalar/workspace-store": "0.47.0",
350
- "@scalar/validation": "0.3.0"
349
+ "@scalar/validation": "0.3.0",
350
+ "@scalar/workspace-store": "0.47.1"
351
351
  },
352
352
  "devDependencies": {
353
353
  "@tailwindcss/vite": "^4.2.0",
@@ -362,7 +362,7 @@
362
362
  "vite": "8.0.0",
363
363
  "vite-svg-loader": "5.1.1",
364
364
  "vitest": "4.1.0",
365
- "@scalar/pre-post-request-scripts": "0.4.6"
365
+ "@scalar/pre-post-request-scripts": "0.4.7"
366
366
  },
367
367
  "scripts": {
368
368
  "build": "vite build && vue-tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",