@scalar/api-client 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalar/api-client
 
+## 0.9.4
+
+### Patch Changes
+
+- Updated dependencies [3d712d74]
+  - @scalar/use-codemirror@0.7.20
+
+## 0.9.3
+
+### Patch Changes
+
+- Updated dependencies [75e1cdf8]
+  - @scalar/use-keyboard-event@0.5.8
+
 ## 0.9.2
 
 ### Patch Changes

package/dist/index.js

@@ -16,7 +16,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, unref, createCommentVNode, computed, onMounted, watch, reactive, readonly, ref, createElementBlock, toRaw, createElementVNode, createVNode, normalizeClass, normalizeStyle, renderSlot, Fragment, renderList, createStaticVNode, pushScopeId, popScopeId, withDirectives, withModifiers, vModelSelect, vModelText, vModelCheckbox, vShow, withKeys } from "vue";
+import { defineComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, unref, createCommentVNode, ref, onMounted, onActivated, onDeactivated, computed, watch, reactive, readonly, createElementBlock, toRaw, createElementVNode, createVNode, normalizeClass, normalizeStyle, renderSlot, Fragment, renderList, createStaticVNode, pushScopeId, popScopeId, withDirectives, withModifiers, vModelSelect, vModelText, vModelCheckbox, vShow, withKeys } from "vue";
 import { Dialog, DialogPanel, DialogTitle, DialogDescription, Disclosure, DisclosureButton, DisclosurePanel, TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
 import { useMediaQuery } from "@vueuse/core";
 import TimeAgo from "javascript-time-ago";
@@ -71,6 +71,15 @@ const getThemeById = (themeId = "default") => {
   }
   return presets[themeId] ?? defaultTheme;
 };
+function useActive() {
+  const isActive = ref(true);
+  onMounted(() => isActive.value = true);
+  onActivated(() => isActive.value = true);
+  onDeactivated(() => isActive.value = false);
+  return {
+    isActive: computed(() => isActive.value)
+  };
+}
 function useKeyboardEvent({
   element,
   keyList,
@@ -83,13 +92,15 @@ function useKeyboardEvent({
   active = () => true
 }) {
   const targetEl = computed(() => (element == null ? void 0 : element.value) || "document");
+  const { isActive: componentIsActive } = useActive();
   const keys = keyList.map((k) => k.toLocaleLowerCase());
   const eventHandler = (event) => {
     const target = event.target;
     const isInput = ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) || target.contentEditable;
     if (
-      // Check for command or ctrl keys
-      (withCtrlCmd ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey) && // Check for shift key
+      // Check if the component is active (e.g. in a `<keepalive>`)
+      (componentIsActive.value && // Check for command or ctrl keys
+      withCtrlCmd ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey) && // Check for shift key
       (withShift ? event.shiftKey : !event.shiftKey) && // Check for alt key
       (withAlt ? event.altKey : !event.altKey) && // Check whether or not to ignore inputs
       (!ignoreInputElements || !isInput) && // Check for key match
@@ -13990,7 +14001,7 @@ function scaleBlock(block, scaler) {
   return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block._content) ? block._content.map((b) => scaleBlock(b, scaler)) : block._content);
 }
 const theme = /* @__PURE__ */ Facet.define({ combine: (strs) => strs.join(" ") });
-const darkTheme$1 = /* @__PURE__ */ Facet.define({ combine: (values2) => values2.indexOf(true) > -1 });
+const darkTheme = /* @__PURE__ */ Facet.define({ combine: (values2) => values2.indexOf(true) > -1 });
 const baseThemeID = /* @__PURE__ */ StyleModule.newName(), baseLightID = /* @__PURE__ */ StyleModule.newName(), baseDarkID = /* @__PURE__ */ StyleModule.newName();
 const lightDarkIDs = { "&light": "." + baseLightID, "&dark": "." + baseDarkID };
 function buildTheme(main, spec, scopes) {
@@ -15318,7 +15329,7 @@ class EditorView {
   Get the CSS classes for the currently active editor themes.
   */
   get themeClasses() {
-    return baseThemeID + " " + (this.state.facet(darkTheme$1) ? baseDarkID : baseLightID) + " " + this.state.facet(theme);
+    return baseThemeID + " " + (this.state.facet(darkTheme) ? baseDarkID : baseLightID) + " " + this.state.facet(theme);
   }
   updateAttrs() {
     let editorAttrs = attrsFromFacet(this, editorAttributes, {
@@ -15754,7 +15765,7 @@ class EditorView {
     let prefix = StyleModule.newName();
     let result = [theme.of(prefix), styleModule.of(buildTheme(`.${prefix}`, spec))];
     if (options && options.dark)
-      result.push(darkTheme$1.of(true));
+      result.push(darkTheme.of(true));
     return result;
   }
   /**
@@ -15792,7 +15803,7 @@ EditorView.decorations = decorations;
 EditorView.atomicRanges = atomicRanges;
 EditorView.bidiIsolatedRanges = bidiIsolatedRanges;
 EditorView.scrollMargins = scrollMargins;
-EditorView.darkTheme = darkTheme$1;
+EditorView.darkTheme = darkTheme;
 EditorView.cspNonce = /* @__PURE__ */ Facet.define({ combine: (values2) => values2.length ? values2[0] : "" });
 EditorView.contentAttributes = contentAttributes;
 EditorView.editorAttributes = editorAttributes;
@@ -24745,7 +24756,7 @@ var createTheme = (_ref) => {
   var extension = [themeExtension, syntaxHighlighting(highlightStyle)];
   return extension;
 };
-const lightTheme = createTheme({
+const customTheme = createTheme({
   theme: "light",
   settings: {
     background: "var(--theme-background-2, var(--default-theme-background-2))",
@@ -24831,95 +24842,8 @@ const lightTheme = createTheme({
     }
   ]
 });
-const darkTheme = createTheme({
-  theme: "dark",
-  settings: {
-    background: "var(--theme-background-2, var(--default-theme-background-2))",
-    foreground: "var(--theme-color-1, var(--default-theme-color-1))",
-    caret: "var(--theme-color-1, var(--default-theme-color-1))",
-    selection: "var(--theme-background-3, var(--default-theme-background-3))",
-    selectionMatch: "#e3dcce",
-    gutterBackground: "var(--theme-background-2, var(--default-theme-background-2))",
-    gutterForeground: "var(--theme-color-3, var(--default-theme-color-3))",
-    gutterBorder: "transparent",
-    lineHighlight: "var(--theme-background-3, var(--default-theme-background-3))",
-    fontFamily: "var(--theme-font-code, var(--default-theme-font-code))"
-  },
-  styles: [
-    {
-      tag: [tags$1.standard(tags$1.tagName), tags$1.tagName],
-      color: "var(--theme-color-purple, var(--default-theme-color-purple))"
-    },
-    {
-      tag: [tags$1.comment],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags$1.className],
-      color: "var(--theme-color-orange, var(--default-theme-color-orange))"
-    },
-    {
-      tag: [tags$1.variableName, tags$1.propertyName, tags$1.attributeName],
-      color: "var(--theme-color-1, var(--default-theme-color-1))"
-    },
-    {
-      tag: [tags$1.operator],
-      color: "var(--theme-color-2, var(--default-theme-color-2))"
-    },
-    {
-      tag: [tags$1.keyword, tags$1.typeName, tags$1.typeOperator],
-      color: "var(--theme-color-green, var(--default-theme-color-green))"
-    },
-    {
-      tag: [tags$1.string],
-      color: "var(--theme-color-blue, var(--default-theme-color-blue))"
-    },
-    {
-      tag: [tags$1.bracket, tags$1.regexp, tags$1.meta],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags$1.number],
-      color: "var(--theme-color-blue, var(--default-theme-color-blue))"
-    },
-    {
-      tag: [tags$1.name, tags$1.quote],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags$1.heading],
-      color: "var(--theme-color-3, var(--default-theme-color-3))",
-      fontWeight: "bold"
-    },
-    {
-      tag: [tags$1.emphasis],
-      color: "var(--theme-color-3, var(--default-theme-color-3))",
-      fontStyle: "italic"
-    },
-    {
-      tag: [tags$1.deleted],
-      color: "var(--theme-color-3, var(--default-theme-color-3))",
-      backgroundColor: "transparent"
-    },
-    {
-      tag: [tags$1.atom, tags$1.bool, tags$1.special(tags$1.variableName)],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags$1.url, tags$1.escape, tags$1.regexp, tags$1.link],
-      color: "var(--theme-color-1, var(--default-theme-color-1))"
-    },
-    { tag: tags$1.link, textDecoration: "underline" },
-    { tag: tags$1.strikethrough, textDecoration: "line-through" },
-    {
-      tag: tags$1.invalid,
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    }
-  ]
-});
-const isDark = ref(false);
 const useCodeMirror = (parameters) => {
-  const { extensions, content: content2, forceDarkMode, forceLightMode, withoutTheme } = parameters;
+  const { extensions, content: content2, withoutTheme } = parameters;
   const value = ref(content2 ?? "");
   const codeMirrorRef = ref(null);
   const codeMirror = ref(null);
@@ -24939,55 +24863,20 @@ const useCodeMirror = (parameters) => {
       codeMirror.value = new EditorView(configuration);
     }
   };
-  const getCurrentTheme = () => {
-    if (withoutTheme) {
-      return null;
-    }
-    if (forceDarkMode) {
-      return darkTheme;
-    }
-    if (forceLightMode) {
-      return lightTheme;
-    }
-    if (isDark.value) {
-      return darkTheme;
-    }
-    return lightTheme;
-  };
   const addDefaultExtensions = (newExtensions = []) => {
-    const selectAllKeyBinding = {
-      key: "Mod-a",
-      run: (view) => {
-        view.dispatch({
-          selection: { anchor: 0, head: view.state.doc.length },
-          scrollIntoView: false
-        });
-        return true;
-      }
-    };
     const defaultExtensions = [
-      EditorView.theme(
-        {
-          ".cm-line": {
-            lineHeight: "20px"
-          },
-          ".cm-gutterElement": {
-            lineHeight: "20px"
-          }
+      withoutTheme ? null : customTheme,
+      EditorView.theme({
+        ".cm-line": {
+          lineHeight: "20px"
         },
-        { dark: forceDarkMode ? false : isDark.value }
-      ),
-      keymap.of([selectAllKeyBinding]),
-      getCurrentTheme()
+        ".cm-gutterElement": {
+          lineHeight: "20px"
+        }
+      })
     ].filter((extension) => extension !== null);
     return [...defaultExtensions, newExtensions];
   };
-  watch(isDark, () => {
-    const { extensions: configuredExtensions } = parameters;
-    if (!forceDarkMode) {
-      reconfigureCodeMirror(configuredExtensions);
-    }
-  });
   const destroyCodeMirror = () => {
     var _a2;
     (_a2 = codeMirror.value) == null ? void 0 : _a2.destroy();
@@ -25099,8 +24988,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     withVariables: { type: Boolean },
     lineNumbers: { type: Boolean },
     withoutTheme: { type: Boolean },
-    disableEnter: { type: Boolean, default: false },
-    forceDarkMode: { type: Boolean, default: false }
+    disableEnter: { type: Boolean, default: false }
   },
   emits: ["change"],
   setup(__props, { expose: __expose, emit }) {
@@ -25196,8 +25084,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     } = useCodeMirror({
       content: props.content ?? "",
       extensions: getCodeMirrorExtensions(),
-      withoutTheme: props.withoutTheme,
-      forceDarkMode: props.forceDarkMode
+      withoutTheme: props.withoutTheme
     });
     watch(
       () => props.content,
@@ -25214,7 +25101,6 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     watch(
       [
         () => props.disableEnter,
-        () => props.forceDarkMode,
         () => props.languages,
         () => props.lineNumbers,
         () => props.readOnly,

package/package.json

@@ -13,7 +13,7 @@
     "rest",
     "testing"
   ],
-  "version": "0.9.2",
+  "version": "0.9.4",
   "engines": {
     "node": ">=18"
   },
@@ -44,21 +44,21 @@
     "pretty-ms": "^8.0.0",
     "vue": "^3.3.0",
     "@scalar/themes": "0.5.4",
-    "@scalar/use-codemirror": "0.7.19",
-    "@scalar/use-modal": "0.2.3",
-    "@scalar/use-keyboard-event": "0.5.7"
+    "@scalar/use-codemirror": "0.7.20",
+    "@scalar/use-keyboard-event": "0.5.8",
+    "@scalar/use-modal": "0.2.3"
   },
   "devDependencies": {
     "@types/content-type": "^1.1.6",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitest/coverage-v8": "^0.34.4",
     "tsc-alias": "^1.8.8",
-    "vite": "^4.4.12",
+    "vite": "^4.5.2",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vitest": "^0.34.4",
     "vue-tsc": "^1.8.19",
-    "@scalar/api-client-proxy": "0.5.13",
-    "@scalar/echo-server": "0.5.8"
+    "@scalar/echo-server": "0.5.8",
+    "@scalar/api-client-proxy": "0.5.13"
   },
   "peerDependencies": {
     "vue": "^3.3.0"