@kong-ui-public/entities-shared 3.59.0 → 3.59.2-pr.3642.c9df003fa.0

package/README.md

@@ -9,6 +9,7 @@ Shared components for Kong entities.
 - [Usage](#usage)
   - [Install](#install)
   - [Registration](#registration)
+  - [Color mode (light/dark theme)](#color-mode-lightdark-theme)
 - [Individual component documentation](#individual-component-documentation)
 - [Individual composables documentation](#individual-composables-documentation)
 - [Sandbox shared utilities](#sandbox-shared-utilities)
@@ -69,6 +70,20 @@ import { EntityDeleteModal, EntityBaseTable } from '@kong-ui-public/entities-sha
 import '@kong-ui-public/entities-shared/dist/style.css'
 ```
 
+### Color mode (light/dark theme)
+
+Components in this package that embed a Monaco-based editor (for example `DeckCommandEditor`) automatically match the host application's active color mode. To enable this, the host application should `provide` a `ComputedRef<'light' | 'dark'>` under the `app:konnectColorMode` injection key. When provided, the editors reactively switch between their light and dark themes as the value changes. When the key is not provided, the editors fall back to the `'light'` theme.
+
+```ts
+// In the host application (e.g. within your root component's setup)
+import { computed, provide } from 'vue'
+
+// `isDarkMode` is however your app tracks its current theme
+const colorMode = computed<'light' | 'dark'>(() => (isDarkMode.value ? 'dark' : 'light'))
+
+provide('app:konnectColorMode', colorMode)
+```
+
 ## Individual component documentation
 
 - [`<EntityDeleteModal.vue />`](docs/entity-delete-modal.md)

package/dist/deck-editor.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("./_plugin-vue_export-helper-C-LN_xos.cjs"),m=require("@kong-ui-public/monaco-editor"),p=require("@kong/icons"),k=require("@kong/kongponents");require("@kong-ui-public/monaco-editor/dist/runtime/style.css");const y={class:"deck-command-editor-wrapper"},_={class:"deck-command-copy-button"},f=e.defineComponent({__name:"DeckCommandEditor",props:e.mergeModels({language:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(r){const n=e.useModel(r,"modelValue"),{i18n:{t:c}}=a.composables.useI18n(),d={scrollbar:{alwaysConsumeMouseWheel:!1},autoIndent:"keep",editContext:!1};async function s(){await u(n.value)}async function u(l){if(navigator.clipboard)try{return await navigator.clipboard.writeText(l),!0}catch{}const o=document?.createElement("textarea");o&&(o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.width="32px",o.style.height="32px",o.style.padding="0",o.style.border="none",o.style.outline="none",o.style.boxShadow="none",o.style.background="transparent",o.value=l,document?.body?.appendChild(o),o.focus(),o.select());let t;try{t=document?.execCommand("copy")}catch{t=!1}finally{document?.body?.removeChild(o)}return t}return(l,o)=>(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(m.MonacoEditor),{modelValue:n.value,"onUpdate:modelValue":o[0]||(o[0]=t=>n.value=t),appearance:"standalone",class:"deck-command-editor",language:r.language,options:d,theme:"light"},null,8,["modelValue","language"]),e.createElementVNode("div",_,[e.createVNode(e.unref(k.KCodeBlockIconButton),{"aria-label":e.unref(c)("deckCodeBlock.copy_tooltip"),"copy-tooltip":e.unref(c)("deckCodeBlock.copy_tooltip"),theme:"light",onClick:o[1]||(o[1]=t=>s())},{default:e.withCtx(()=>[e.createVNode(e.unref(p.CopyIcon),{decorative:""})]),_:1},8,["aria-label","copy-tooltip"])])]))}}),i=a._export_sfc(f,[["__scopeId","data-v-55ffc70c"]]),C={},g={class:"editor-skeleton"};function v(r,n){const c=e.resolveComponent("KSkeleton");return e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,d=>e.createVNode(c,{key:d})),64))])}const b=a._export_sfc(C,[["render",v],["__scopeId","data-v-ec59bbd1"]]);function E(){e.provide(a.DECK_COMMAND_EDITOR_KEY,i)}exports.DeckCommandEditor=i;exports.DeckCommandEditorLoading=b;exports.provideDeckCommandEditor=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("./_plugin-vue_export-helper-C-LN_xos.cjs"),p=require("@kong-ui-public/monaco-editor"),k=require("@kong/icons"),y=require("@kong/kongponents");require("@kong-ui-public/monaco-editor/dist/runtime/style.css");const _={class:"deck-command-editor-wrapper"},f={class:"deck-command-copy-button"},C=e.defineComponent({__name:"DeckCommandEditor",props:e.mergeModels({language:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(r){const d=e.inject("app:konnectColorMode",e.computed(()=>"light")),n=e.useModel(r,"modelValue"),{i18n:{t:c}}=a.composables.useI18n(),s={scrollbar:{alwaysConsumeMouseWheel:!1},autoIndent:"keep",editContext:!1};async function u(){await m(n.value)}async function m(l){if(navigator.clipboard)try{return await navigator.clipboard.writeText(l),!0}catch{}const o=document?.createElement("textarea");o&&(o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.width="32px",o.style.height="32px",o.style.padding="0",o.style.border="none",o.style.outline="none",o.style.boxShadow="none",o.style.background="transparent",o.value=l,document?.body?.appendChild(o),o.focus(),o.select());let t;try{t=document?.execCommand("copy")}catch{t=!1}finally{document?.body?.removeChild(o)}return t}return(l,o)=>(e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(),e.createBlock(e.unref(p.MonacoEditor),{key:e.unref(d),modelValue:n.value,"onUpdate:modelValue":o[0]||(o[0]=t=>n.value=t),appearance:"standalone",class:"deck-command-editor",language:r.language,options:s,theme:e.unref(d)},null,8,["modelValue","language","theme"])),e.createElementVNode("div",f,[e.createVNode(e.unref(y.KCodeBlockIconButton),{"aria-label":e.unref(c)("deckCodeBlock.copy_tooltip"),"copy-tooltip":e.unref(c)("deckCodeBlock.copy_tooltip"),theme:"light",onClick:o[1]||(o[1]=t=>u())},{default:e.withCtx(()=>[e.createVNode(e.unref(k.CopyIcon),{decorative:""})]),_:1},8,["aria-label","copy-tooltip"])])]))}}),i=a._export_sfc(C,[["__scopeId","data-v-2da602e1"]]),g={},v={class:"editor-skeleton"};function b(r,d){const n=e.resolveComponent("KSkeleton");return e.openBlock(),e.createElementBlock("div",v,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,c=>e.createVNode(n,{key:c})),64))])}const E=a._export_sfc(g,[["render",b],["__scopeId","data-v-ec59bbd1"]]);function h(){e.provide(a.DECK_COMMAND_EDITOR_KEY,i)}exports.DeckCommandEditor=i;exports.DeckCommandEditorLoading=E;exports.provideDeckCommandEditor=h;

package/dist/deck-editor.es.js

@@ -1,12 +1,12 @@
-import { defineComponent as f, useModel as y, openBlock as s, createElementBlock as i, createVNode as c, unref as t, createElementVNode as _, withCtx as k, mergeModels as C, resolveComponent as g, Fragment as v, renderList as b, provide as h } from "vue";
-import { c as x, _ as m, D as E } from "./_plugin-vue_export-helper-Fi4wf1FB.js";
-import { MonacoEditor as D } from "@kong-ui-public/monaco-editor";
-import { CopyIcon as w } from "@kong/icons";
-import { KCodeBlockIconButton as V } from "@kong/kongponents";
+import { defineComponent as _, inject as f, computed as k, useModel as C, openBlock as c, createElementBlock as i, createBlock as g, unref as o, createElementVNode as v, createVNode as s, withCtx as h, mergeModels as b, resolveComponent as x, Fragment as E, renderList as D, provide as M } from "vue";
+import { c as w, _ as m, D as V } from "./_plugin-vue_export-helper-Fi4wf1FB.js";
+import { MonacoEditor as B } from "@kong-ui-public/monaco-editor";
+import { CopyIcon as I } from "@kong/icons";
+import { KCodeBlockIconButton as K } from "@kong/kongponents";
 import "@kong-ui-public/monaco-editor/dist/runtime/style.css";
-const I = { class: "deck-command-editor-wrapper" }, M = { class: "deck-command-copy-button" }, B = /* @__PURE__ */ f({
+const S = { class: "deck-command-editor-wrapper" }, T = { class: "deck-command-copy-button" }, N = /* @__PURE__ */ _({
   __name: "DeckCommandEditor",
-  props: /* @__PURE__ */ C({
+  props: /* @__PURE__ */ b({
     language: {}
   }, {
     modelValue: { required: !0 },
@@ -14,17 +14,17 @@ const I = { class: "deck-command-editor-wrapper" }, M = { class: "deck-command-c
   }),
   emits: ["update:modelValue"],
   setup(l) {
-    const n = y(l, "modelValue"), { i18n: { t: a } } = x.useI18n(), d = {
+    const d = f("app:konnectColorMode", k(() => "light")), n = C(l, "modelValue"), { i18n: { t: a } } = w.useI18n(), p = {
       scrollbar: {
         alwaysConsumeMouseWheel: !1
       },
       autoIndent: "keep",
       editContext: !1
     };
-    async function p() {
-      await u(n.value);
+    async function u() {
+      await y(n.value);
     }
-    async function u(r) {
+    async function y(r) {
       if (navigator.clipboard)
         try {
           return await navigator.clipboard.writeText(r), !0;
@@ -32,54 +32,55 @@ const I = { class: "deck-command-editor-wrapper" }, M = { class: "deck-command-c
         }
       const e = document?.createElement("textarea");
       e && (e.style.position = "fixed", e.style.top = "0", e.style.left = "0", e.style.width = "32px", e.style.height = "32px", e.style.padding = "0", e.style.border = "none", e.style.outline = "none", e.style.boxShadow = "none", e.style.background = "transparent", e.value = r, document?.body?.appendChild(e), e.focus(), e.select());
-      let o;
+      let t;
       try {
-        o = document?.execCommand("copy");
+        t = document?.execCommand("copy");
       } catch {
-        o = !1;
+        t = !1;
       } finally {
         document?.body?.removeChild(e);
       }
-      return o;
+      return t;
     }
-    return (r, e) => (s(), i("div", I, [
-      c(t(D), {
+    return (r, e) => (c(), i("div", S, [
+      (c(), g(o(B), {
+        key: o(d),
         modelValue: n.value,
-        "onUpdate:modelValue": e[0] || (e[0] = (o) => n.value = o),
+        "onUpdate:modelValue": e[0] || (e[0] = (t) => n.value = t),
         appearance: "standalone",
         class: "deck-command-editor",
         language: l.language,
-        options: d,
-        theme: "light"
-      }, null, 8, ["modelValue", "language"]),
-      _("div", M, [
-        c(t(V), {
-          "aria-label": t(a)("deckCodeBlock.copy_tooltip"),
-          "copy-tooltip": t(a)("deckCodeBlock.copy_tooltip"),
+        options: p,
+        theme: o(d)
+      }, null, 8, ["modelValue", "language", "theme"])),
+      v("div", T, [
+        s(o(K), {
+          "aria-label": o(a)("deckCodeBlock.copy_tooltip"),
+          "copy-tooltip": o(a)("deckCodeBlock.copy_tooltip"),
           theme: "light",
-          onClick: e[1] || (e[1] = (o) => p())
+          onClick: e[1] || (e[1] = (t) => u())
         }, {
-          default: k(() => [
-            c(t(w), { decorative: "" })
+          default: h(() => [
+            s(o(I), { decorative: "" })
           ]),
           _: 1
         }, 8, ["aria-label", "copy-tooltip"])
       ])
     ]));
   }
-}), K = /* @__PURE__ */ m(B, [["__scopeId", "data-v-55ffc70c"]]), S = {}, T = { class: "editor-skeleton" };
-function N(l, n) {
-  const a = g("KSkeleton");
-  return s(), i("div", T, [
-    (s(), i(v, null, b(5, (d) => c(a, { key: d })), 64))
+}), O = /* @__PURE__ */ m(N, [["__scopeId", "data-v-2da602e1"]]), $ = {}, A = { class: "editor-skeleton" };
+function L(l, d) {
+  const n = x("KSkeleton");
+  return c(), i("div", A, [
+    (c(), i(E, null, D(5, (a) => s(n, { key: a })), 64))
   ]);
 }
-const R = /* @__PURE__ */ m(S, [["render", N], ["__scopeId", "data-v-ec59bbd1"]]);
-function U() {
-  h(E, K);
+const Y = /* @__PURE__ */ m($, [["render", L], ["__scopeId", "data-v-ec59bbd1"]]);
+function z() {
+  M(V, O);
 }
 export {
-  K as DeckCommandEditor,
-  R as DeckCommandEditorLoading,
-  U as provideDeckCommandEditor
+  O as DeckCommandEditor,
+  Y as DeckCommandEditorLoading,
+  z as provideDeckCommandEditor
 };