@scalar/api-client 1.2.20 → 1.2.21

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @scalar/api-client
 
+## 1.2.21
+
+### Patch Changes
+
+- f871c28: fix: api client address bar url
+- 3748dc5: feat: api client toggle sidebar hotkey
+
 ## 1.2.20
 
 ### Patch Changes

package/dist/components/ApiClient/AddressBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ApiClient/AddressBar.vue.ts"],"names":[],"mappings":";;;;;;;;;AAobA,wBASG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ApiClient/AddressBar.vue.ts"],"names":[],"mappings":";;;;;;;;;AAqdA,wBASG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/ApiClient/ApiClient.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showSideBar: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyPress: () => void;
+    toggleSidebar: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     proxyUrl?: string | undefined;
     readOnly?: boolean | undefined;
@@ -23,6 +24,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showSideBar: boolean;
 }>>> & {
     onEscapeKeyPress?: (() => any) | undefined;
+    onToggleSidebar?: (() => any) | undefined;
 }, {
     readOnly: boolean;
     withDefaultFonts: boolean;

package/dist/components/ApiClient/ApiClient.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiClient.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ApiClient/ApiClient.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAe,MAAM,gBAAgB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Z1D,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"ApiClient.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ApiClient/ApiClient.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAe,MAAM,gBAAgB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4Z1D,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.css

@@ -676,14 +676,14 @@ to {
   color: var(--scalar-api-client-color);
 }
 
-.loader[data-v-95886ec0] {
+.loader[data-v-ccf97327] {
   position: absolute;
   z-index: 3;
   height: 2px;
   background: var(--scalar-api-client-color);
-  animation: loading-95886ec0 5s cubic-bezier(0, 0.5, 0.25, 1);
+  animation: loading-ccf97327 5s cubic-bezier(0, 0.5, 0.25, 1);
 }
-@keyframes loading-95886ec0 {
+@keyframes loading-ccf97327 {
 0% {
     width: 0;
 }
@@ -691,14 +691,14 @@ to {
     width: 100%;
 }
 }
-.address-bar[data-v-95886ec0] {
+.address-bar[data-v-ccf97327] {
   width: 100%;
   padding: 10px;
   display: flex;
   align-items: center;
   position: relative;
 }
-.url-form[data-v-95886ec0] {
+.url-form[data-v-ccf97327] {
   display: flex;
   width: 720px;
   align-items: stretch;
@@ -708,11 +708,11 @@ to {
   z-index: 2;
   max-width: calc(100% - 68px);
 }
-.url-form[data-v-95886ec0] .cm-content {
+.url-form[data-v-ccf97327] .cm-content {
   display: flex;
   align-items: center;
 }
-.url-form-field[data-v-95886ec0] {
+.url-form-field[data-v-ccf97327] {
   align-items: stretch;
   border: 1px solid var(--scalar-border-color);
   border-radius: var(--scalar-radius);
@@ -722,20 +722,73 @@ to {
   padding: 2px;
   width: 100%;
 }
-.url-form-input[data-v-95886ec0] {
+.url-form-input-wrapper[data-v-ccf97327] {
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  scroll-timeline: --scroll-timeline x;
+  /* Firefox supports */
+  scroll-timeline: --scroll-timeline horizontal;
+}
+.url-form-input[data-v-ccf97327] {
   background: var(--scalar-background-1);
   color: var(--scalar-color-1);
   font-weight: var(--scalar-semibold);
   min-height: auto;
+  min-width: fit-content;
   padding-top: 0;
+  position: relative;
 }
-.url-form-input[data-v-95886ec0] .cm-scroller {
+.url-form-input-fade__left[data-v-ccf97327],
+.url-form-input-fade__right[data-v-ccf97327] {
+  content: '';
+  position: sticky;
+  height: 100%;
+  animation-name: fadein-ccf97327;
+  animation-duration: 1ms;
+  animation-direction: reverse;
+  animation-timeline: --scroll-timeline;
+  z-index: 1;
+}
+.url-form-input-fade__left[data-v-ccf97327] {
+  background: linear-gradient(
+    -90deg,
+    color-mix(in srgb, var(--scalar-background-1), transparent 100%) 0%,
+    color-mix(in srgb, var(--scalar-background-1), transparent 20%) 30%,
+    var(--scalar-background-1) 100%
+  );
+  left: 0;
+  min-width: 6px;
+}
+.url-form-input-fade__right[data-v-ccf97327] {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--scalar-background-1), transparent 100%) 0%,
+    color-mix(in srgb, var(--scalar-background-1), transparent 20%) 30%,
+    var(--scalar-background-1) 100%
+  );
+  right: 0;
+  min-width: 24px;
+  animation-direction: reverse;
+}
+@keyframes fadein-ccf97327 {
+0% {
+    opacity: 0;
+}
+2% {
+    opacity: 1;
+}
+}
+.url-form-input[data-v-ccf97327] .cm-scroller {
   overflow-y: hidden;
 }
-.url-form-input[data-v-95886ec0] .cm-line {
+.url-form-input[data-v-ccf97327] .cm-line {
   font-size: var(--scalar-micro);
+  padding: 0;
 }
-.history[data-v-95886ec0] {
+.history[data-v-ccf97327] {
   appearance: none;
   -webkit-appearance: none;
   background: transparent;
@@ -744,7 +797,7 @@ to {
   align-items: center;
   border-radius: var(--scalar-radius);
 }
-.send-button[type='submit'][data-v-95886ec0] {
+.send-button[type='submit'][data-v-ccf97327] {
   font-size: var(--scalar-micro);
   letter-spacing: 0.25px;
   color: var(--scalar-button-1-color);
@@ -763,36 +816,36 @@ to {
   overflow: hidden;
   flex-shrink: 0;
 }
-.send-button[data-v-95886ec0]:hover {
+.send-button[data-v-ccf97327]:hover {
   background: var(--scalar-button-1-hover);
 }
-.send-button svg[data-v-95886ec0] {
+.send-button svg[data-v-ccf97327] {
   width: 12px;
   height: 12px;
   flex-shrink: 0;
   margin-right: 6px;
   position: relative;
 }
-.send-button span[data-v-95886ec0] {
+.send-button span[data-v-ccf97327] {
   position: relative;
 }
 @media screen and (max-width: 720px) {
-.history-toggle span[data-v-95886ec0],
-  .send-button span[data-v-95886ec0] {
+.history-toggle span[data-v-ccf97327],
+  .send-button span[data-v-ccf97327] {
     display: none;
 }
-.history-toggle svg[data-v-95886ec0],
-  .send-button svg[data-v-95886ec0] {
+.history-toggle svg[data-v-ccf97327],
+  .send-button svg[data-v-ccf97327] {
     margin-right: 0;
 }
 }
-.send-button[disabled][data-v-95886ec0] {
+.send-button[disabled][data-v-ccf97327] {
   pointer-events: none;
   color: var(--scalar-color-2);
   background: var(--scalar-background-3);
   border: 1px solid var(--scalar-border-color);
 }
-.history-toggle[data-v-95886ec0] {
+.history-toggle[data-v-ccf97327] {
   padding: 7px;
   line-height: 30px;
   color: var(--scalar-color-3);
@@ -810,16 +863,16 @@ to {
     background-color 0.15s ease-in-out,
     color 0.15s ease-in-out;
 }
-.history-toggle[data-v-95886ec0]:hover {
+.history-toggle[data-v-ccf97327]:hover {
   background-color: var(--scalar-background-2);
   color: var(--scalar-color-1);
 }
-.history-toggle svg[data-v-95886ec0] {
+.history-toggle svg[data-v-ccf97327] {
   height: 13px;
   width: 13px;
   color: currentColor;
 }
-.address-bar-content[data-v-95886ec0] {
+.address-bar-content[data-v-ccf97327] {
   width: 640px;
   height: 100%;
   background: var(--scalar-background-1);
@@ -834,21 +887,21 @@ to {
     opacity 0.01s ease-in-out 0.5s;
   pointer-events: none;
 }
-.address-bar--with-history[data-v-95886ec0] {
+.address-bar--with-history[data-v-ccf97327] {
   z-index: 100000;
 }
-.address-bar--with-history .address-bar-content[data-v-95886ec0] {
+.address-bar--with-history .address-bar-content[data-v-ccf97327] {
   transform: translate3d(0, 0, 0);
   opacity: 1;
   pointer-events: all;
   transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
 }
-.address-bar--with-history .address-bar-close[data-v-95886ec0] {
+.address-bar--with-history .address-bar-close[data-v-ccf97327] {
   opacity: 1;
   pointer-events: all;
   cursor: pointer;
 }
-.address-bar-close[data-v-95886ec0] {
+.address-bar-close[data-v-ccf97327] {
   width: 100%;
   height: 100%;
   position: fixed;

package/dist/index.js

@@ -26395,18 +26395,21 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 const RequestMethodSelect = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-0f1e5bdc"]]);
-const _withScopeId$5 = (n) => (pushScopeId("data-v-95886ec0"), n = n(), popScopeId(), n);
+const _withScopeId$5 = (n) => (pushScopeId("data-v-ccf97327"), n = n(), popScopeId(), n);
 const _hoisted_1$t = {
   key: 0,
   class: "loader"
 };
 const _hoisted_2$k = { class: "url-form" };
 const _hoisted_3$d = { class: "url-form-field" };
-const _hoisted_4$a = {
+const _hoisted_4$a = { class: "url-form-input-wrapper cm-scroller" };
+const _hoisted_5$5 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("div", { class: "url-form-input-fade__left" }, null, -1));
+const _hoisted_6$2 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("div", { class: "url-form-input-fade__right" }, null, -1));
+const _hoisted_7$2 = {
   key: 0,
   class: "history"
 };
-const _hoisted_5$5 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_8$2 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("svg", {
   fill: "none",
   height: "48",
   viewBox: "0 0 14 14",
@@ -26430,11 +26433,11 @@ const _hoisted_5$5 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ create
     })
   ])
 ], -1));
-const _hoisted_6$2 = [
-  _hoisted_5$5
+const _hoisted_9$1 = [
+  _hoisted_8$2
 ];
-const _hoisted_7$2 = ["disabled"];
-const _hoisted_8$2 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_10$1 = ["disabled"];
+const _hoisted_11 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("svg", {
   fill: "none",
   height: "48",
   viewBox: "0 0 14 14",
@@ -26451,12 +26454,12 @@ const _hoisted_8$2 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ create
     })
   ])
 ], -1));
-const _hoisted_9$1 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("span", null, "Send", -1));
-const _hoisted_10$1 = [
-  _hoisted_8$2,
-  _hoisted_9$1
+const _hoisted_12 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("span", null, "Send", -1));
+const _hoisted_13 = [
+  _hoisted_11,
+  _hoisted_12
 ];
-const _hoisted_11 = { class: "address-bar-content" };
+const _hoisted_14 = { class: "address-bar-content" };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "AddressBar",
   props: {
@@ -26527,34 +26530,38 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 requestMethod: requestType.value,
                 onChange: handleRequestMethodChanged
               }, null, 8, ["readOnly", "requestMethod"]),
-              createVNode(unref(CodeMirror), {
-                class: "url-form-input",
-                content: formattedUrl.value,
-                disableEnter: "",
-                readOnly: unref(readOnly2),
-                withoutTheme: "",
-                withVariables: "",
-                onChange
-              }, null, 8, ["content", "readOnly"]),
-              unref(requestHistoryOrder2).length ? (openBlock(), createElementBlock("div", _hoisted_4$a, [
+              createElementVNode("div", _hoisted_4$a, [
+                _hoisted_5$5,
+                createVNode(unref(CodeMirror), {
+                  class: "url-form-input",
+                  content: formattedUrl.value,
+                  disableEnter: "",
+                  readOnly: unref(readOnly2),
+                  withoutTheme: "",
+                  withVariables: "",
+                  onChange
+                }, null, 8, ["content", "readOnly"]),
+                _hoisted_6$2
+              ]),
+              unref(requestHistoryOrder2).length ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
                 createElementVNode("div", {
                   class: "history-toggle",
                   onClick: _cache[0] || (_cache[0] = ($event) => unref(historyModal).show())
-                }, _hoisted_6$2)
+                }, _hoisted_9$1)
               ])) : createCommentVNode("", true),
               createElementVNode("button", {
                 class: "send-button",
                 disabled: !formattedUrl.value.trim().length,
                 type: "submit",
                 onClick: send
-              }, _hoisted_10$1, 8, _hoisted_7$2)
+              }, _hoisted_13, 8, _hoisted_10$1)
             ])
           ]),
           createElementVNode("div", {
             class: "address-bar-close",
             onClick: _cache[1] || (_cache[1] = ($event) => showHistory.value = false)
           }),
-          createElementVNode("div", _hoisted_11, [
+          createElementVNode("div", _hoisted_14, [
             createVNode(unref(FlowModal), {
               state: unref(historyModal),
               title: "Request History",
@@ -26574,7 +26581,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AddressBar = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-95886ec0"]]);
+const AddressBar = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-ccf97327"]]);
 const clickGeneratedParameter = useEventBus(Symbol());
 const _hoisted_1$s = /* @__PURE__ */ createElementVNode("svg", {
   class: "scalar-api-client__toggle__icon",
@@ -33125,12 +33132,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     withDefaultFonts: { type: Boolean, default: true },
     showSideBar: { type: Boolean, default: false }
   },
-  emits: ["escapeKeyPress"],
+  emits: ["escapeKeyPress", "toggleSidebar"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const keys = useMagicKeys();
     whenever(keys.escape, () => emit("escapeKeyPress"));
+    whenever(keys.meta_b, () => emit("toggleSidebar"));
     const { activeRequest: activeRequest2, readOnly: stateReadOnly } = useRequestStore();
     const isSmallScreen = useMediaQuery("(max-width: 820px)");
     const selectedTab = ref(0);

package/package.json

@@ -18,7 +18,7 @@
     "rest",
     "testing"
   ],
-  "version": "1.2.20",
+  "version": "1.2.21",
   "engines": {
     "node": ">=18"
   },
@@ -43,10 +43,10 @@
     "pretty-bytes": "^6.1.1",
     "pretty-ms": "^8.0.0",
     "@scalar/components": "0.7.6",
+    "@scalar/use-codemirror": "0.10.3",
     "@scalar/themes": "0.7.9",
-    "@scalar/use-tooltip": "0.6.2",
     "@scalar/use-modal": "0.3.3",
-    "@scalar/use-codemirror": "0.10.3"
+    "@scalar/use-tooltip": "0.6.2"
   },
   "devDependencies": {
     "@types/content-type": "^1.1.6",
@@ -58,8 +58,8 @@
     "vitest": "^1.5.0",
     "vue": "^3.4.21",
     "vue-tsc": "^1.8.19",
-    "@scalar/api-client-proxy": "0.5.27",
     "@scalar/echo-server": "0.6.4",
+    "@scalar/api-client-proxy": "0.5.27",
     "@scalar/oas-utils": "0.1.10"
   },
   "peerDependencies": {