@kong-ui-public/misc-widgets 2.5.10 → 2.5.11-pr.3759.f7c032a78.0

package/README.md

@@ -13,12 +13,14 @@ This package is a good home for random, one-off components that aren't complex a
 ## Components
 
 - [Github Star](src/components/github-star/README.md)
+- [Secret Input](src/components/secret-input/README.md)
 
 ## Requirements
 
 - `vue` must be initialized in the host application
 - `@kong/kongponents` must be available as a `dependency` in the host application, along with the package's style imports. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
 - `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
+- `@kong/icons` must be available as a `dependency` in the host application.
 
 ## Usage
 
@@ -40,11 +42,14 @@ You can import individual components locally where they are being used. Don't fo
 
 ```html
 <template>
-  <GithubStar />
+  <SecretInput v-model="secret" />
 </template>
 
 <script setup lang="ts">
-import { GithubStar } from '@kong-ui-public/misc-widgets'
+import { ref } from 'vue'
+import { SecretInput } from '@kong-ui-public/misc-widgets'
 import '@kong-ui-public/misc-widgets/dist/style.css'
+
+const secret = ref('')
 </script>
 ```

package/dist/misc-widgets.es.js

@@ -1,23 +1,25 @@
-import { defineComponent as u, computed as l, ref as p, onMounted as d, resolveComponent as b, openBlock as h, createElementBlock as g, createVNode as m, withCtx as f, createElementVNode as i, unref as s, toDisplayString as _, createCommentVNode as S } from "vue";
-import { createI18n as v, i18nTComponent as x } from "@kong-ui-public/i18n";
-const k = { title: "Star", ariaLabel: "Star buttons/github-buttons on GitHub", tooltipLabel: "Star this repository on Github" }, y = {
-  githubStar: k
+import { defineComponent as I, computed as u, ref as K, onMounted as z, resolveComponent as f, openBlock as c, createElementBlock as O, createVNode as $, withCtx as d, createElementVNode as k, unref as n, toDisplayString as D, createCommentVNode as _, useModel as y, useSlots as G, createBlock as m, mergeProps as N, createSlots as j, renderList as H, renderSlot as C, normalizeProps as P, guardReactiveProps as q, resolveDynamicComponent as A, mergeModels as U } from "vue";
+import { createI18n as R, i18nTComponent as Z } from "@kong-ui-public/i18n";
+import { VisibilityIcon as F, VisibilityOffIcon as J } from "@kong/icons";
+const Q = { title: "Star", ariaLabel: "Star buttons/github-buttons on GitHub", tooltipLabel: "Star this repository on Github" }, W = { show: "Show secret", hide: "Hide secret" }, X = {
+  githubStar: Q,
+  secretInput: W
 };
-function L() {
-  const t = v("en-us", y);
+function Y() {
+  const e = R("en-us", X);
   return {
-    i18n: t,
-    i18nT: x(t)
+    i18n: e,
+    i18nT: Z(e)
     // Translation component <i18n-t>
   };
 }
-const C = {
-  useI18n: L
-}, T = {
+const w = {
+  useI18n: Y
+}, ee = {
   key: 0,
   class: "kong-ui-public-misc-widgets-github-star",
   "data-testid": "github-star"
-}, E = ["aria-label", "href"], G = /* @__PURE__ */ u({
+}, te = ["aria-label", "href"], oe = /* @__PURE__ */ I({
   __name: "GithubStar",
   props: {
     url: {
@@ -30,40 +32,122 @@ const C = {
       default: ""
     }
   },
-  setup(t) {
-    const { i18n: e } = C.useI18n(), o = t, a = l(() => o.tooltipText || e.t("githubStar.tooltipLabel")), n = p(!1);
-    return d(async () => {
-      const r = document.createElement("script");
-      r.addEventListener("load", () => {
-        n.value = !0;
-      }), r.setAttribute("src", "https://buttons.github.io/buttons.js"), document.head.appendChild(r);
-    }), (r, w) => {
-      const c = b("KTooltip");
-      return t.url && n.value ? (h(), g("div", T, [
-        m(c, { text: a.value }, {
-          default: f(() => [
-            i("span", null, [
-              i("a", {
-                "aria-label": s(e).t("githubStar.ariaLabel"),
+  setup(e) {
+    const { i18n: a } = w.useI18n(), r = e, t = u(() => r.tooltipText || a.t("githubStar.tooltipLabel")), s = K(!1);
+    return z(async () => {
+      const l = document.createElement("script");
+      l.addEventListener("load", () => {
+        s.value = !0;
+      }), l.setAttribute("src", "https://buttons.github.io/buttons.js"), document.head.appendChild(l);
+    }), (l, b) => {
+      const i = f("KTooltip");
+      return e.url && s.value ? (c(), O("div", ee, [
+        $(i, { text: t.value }, {
+          default: d(() => [
+            k("span", null, [
+              k("a", {
+                "aria-label": n(a).t("githubStar.ariaLabel"),
                 class: "github-button",
                 "data-color-scheme": "no-preference: light; light: light; dark: light;",
                 "data-show-count": "true",
-                href: t.url,
+                href: e.url,
                 target: "_blank"
-              }, _(s(e).t("githubStar.title")), 9, E)
+              }, D(n(a).t("githubStar.title")), 9, te)
             ])
           ]),
           _: 1
         }, 8, ["text"])
-      ])) : S("", !0);
+      ])) : _("", !0);
     };
   }
-}), I = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [a, n] of e)
-    o[a] = n;
-  return o;
-}, q = /* @__PURE__ */ I(G, [["__scopeId", "data-v-235436ca"]]);
+}), L = (e, a) => {
+  const r = e.__vccOpts || e;
+  for (const [t, s] of a)
+    r[t] = s;
+  return r;
+}, ie = /* @__PURE__ */ L(oe, [["__scopeId", "data-v-235436ca"]]), ae = "20px", se = /* @__PURE__ */ I({
+  inheritAttrs: !1,
+  __name: "SecretInput",
+  props: /* @__PURE__ */ U({
+    autocomplete: { default: "off" },
+    showLabel: {},
+    hideLabel: {},
+    showMaskToggle: { type: Boolean, default: !0 }
+  }, {
+    modelValue: {
+      default: ""
+    },
+    modelModifiers: {},
+    masked: { type: Boolean, default: !0 },
+    maskedModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:masked"],
+  setup(e) {
+    const [a, r] = y(e, "modelValue", {
+      set: (o) => r.trim ? o.trim() : o
+    }), t = y(e, "masked"), { i18n: { t: s } } = w.useI18n(), l = u(() => e.showLabel ?? s("secretInput.show")), b = u(() => e.hideLabel ?? s("secretInput.hide")), i = G(), M = () => Object.fromEntries(
+      Object.entries(i).filter(([o]) => o !== "after")
+    ), x = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("-webkit-text-security", "disc"), T = u(() => t.value && !x ? "password" : "text"), h = () => {
+      t.value = !t.value;
+    }, p = (o) => {
+      t.value && o.preventDefault();
+    };
+    return (o, g) => {
+      const V = f("KButton"), B = f("KInput");
+      return c(), m(B, N(o.$attrs, {
+        autocapitalize: "off",
+        autocomplete: e.autocomplete,
+        autocorrect: "off",
+        class: { "secret-input-masked": t.value },
+        "model-value": n(a),
+        spellcheck: "false",
+        type: T.value,
+        onCopyCapture: p,
+        onCutCapture: p,
+        onDragstartCapture: p,
+        "onUpdate:modelValue": g[0] || (g[0] = (v) => a.value = v)
+      }), j({ _: 2 }, [
+        H(M(), (v, S) => ({
+          name: S,
+          fn: d((E) => [
+            C(o.$slots, S, P(q(E)), void 0, !0)
+          ])
+        })),
+        e.showMaskToggle || n(i).after ? {
+          name: "after",
+          fn: d(() => [
+            C(o.$slots, "after", {
+              masked: t.value,
+              toggle: h
+            }, void 0, !0),
+            e.showMaskToggle ? (c(), m(V, {
+              key: 0,
+              appearance: "none",
+              "aria-label": t.value ? l.value : b.value,
+              "aria-pressed": !t.value,
+              class: "secret-input-toggle mask-value-toggle-button",
+              "data-testid": "secret-input-toggle",
+              icon: "",
+              type: "button",
+              onClick: h
+            }, {
+              default: d(() => [
+                (c(), m(A(t.value ? n(F) : n(J)), {
+                  color: "currentColor",
+                  decorative: "",
+                  size: `var(--kui-icon-size-40, ${n(ae)})`
+                }, null, 8, ["size"]))
+              ]),
+              _: 1
+            }, 8, ["aria-label", "aria-pressed"])) : _("", !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["autocomplete", "class", "model-value", "type"]);
+    };
+  }
+}), ue = /* @__PURE__ */ L(se, [["__scopeId", "data-v-f3196a23"]]);
 export {
-  q as GithubStar
+  ie as GithubStar,
+  ue as SecretInput
 };

package/dist/misc-widgets.umd.js

@@ -1 +1 @@
-(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/i18n"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["kong-ui-public-misc-widgets"]={},n.Vue,n["kong-ui-public-i18n"]))})(this,(function(n,t,c){"use strict";const u={githubStar:{title:"Star",ariaLabel:"Star buttons/github-buttons on GitHub",tooltipLabel:"Star this repository on Github"}};function l(){const e=c.createI18n("en-us",u);return{i18n:e,i18nT:c.i18nTComponent(e)}}const d={useI18n:l},p={key:0,class:"kong-ui-public-misc-widgets-github-star","data-testid":"github-star"},b=["aria-label","href"],h=((e,o)=>{const i=e.__vccOpts||e;for(const[s,r]of o)i[s]=r;return i})(t.defineComponent({__name:"GithubStar",props:{url:{type:String,required:!0},tooltipText:{type:String,required:!1,default:""}},setup(e){const{i18n:o}=d.useI18n(),i=e,s=t.computed(()=>i.tooltipText||o.t("githubStar.tooltipLabel")),r=t.ref(!1);return t.onMounted(async()=>{const a=document.createElement("script");a.addEventListener("load",()=>{r.value=!0}),a.setAttribute("src","https://buttons.github.io/buttons.js"),document.head.appendChild(a)}),(a,S)=>{const f=t.resolveComponent("KTooltip");return e.url&&r.value?(t.openBlock(),t.createElementBlock("div",p,[t.createVNode(f,{text:s.value},{default:t.withCtx(()=>[t.createElementVNode("span",null,[t.createElementVNode("a",{"aria-label":t.unref(o).t("githubStar.ariaLabel"),class:"github-button","data-color-scheme":"no-preference: light; light: light; dark: light;","data-show-count":"true",href:e.url,target:"_blank"},t.toDisplayString(t.unref(o).t("githubStar.title")),9,b)])]),_:1},8,["text"])])):t.createCommentVNode("",!0)}}}),[["__scopeId","data-v-235436ca"]]);n.GithubStar=h,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@kong-ui-public/i18n"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/i18n","@kong/icons"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["kong-ui-public-misc-widgets"]={},n.Vue,n["kong-ui-public-i18n"],n.KongIcons))})(this,(function(n,t,d,p){"use strict";const y={githubStar:{title:"Star",ariaLabel:"Star buttons/github-buttons on GitHub",tooltipLabel:"Star this repository on Github"},secretInput:{show:"Show secret",hide:"Hide secret"}};function C(){const e=d.createI18n("en-us",y);return{i18n:e,i18nT:d.i18nTComponent(e)}}const f={useI18n:C},I={key:0,class:"kong-ui-public-misc-widgets-github-star","data-testid":"github-star"},w=["aria-label","href"],_=t.defineComponent({__name:"GithubStar",props:{url:{type:String,required:!0},tooltipText:{type:String,required:!1,default:""}},setup(e){const{i18n:a}=f.useI18n(),i=e,o=t.computed(()=>i.tooltipText||a.t("githubStar.tooltipLabel")),r=t.ref(!1);return t.onMounted(async()=>{const l=document.createElement("script");l.addEventListener("load",()=>{r.value=!0}),l.setAttribute("src","https://buttons.github.io/buttons.js"),document.head.appendChild(l)}),(l,b)=>{const c=t.resolveComponent("KTooltip");return e.url&&r.value?(t.openBlock(),t.createElementBlock("div",I,[t.createVNode(c,{text:o.value},{default:t.withCtx(()=>[t.createElementVNode("span",null,[t.createElementVNode("a",{"aria-label":t.unref(a).t("githubStar.ariaLabel"),class:"github-button","data-color-scheme":"no-preference: light; light: light; dark: light;","data-show-count":"true",href:e.url,target:"_blank"},t.toDisplayString(t.unref(a).t("githubStar.title")),9,w)])]),_:1},8,["text"])])):t.createCommentVNode("",!0)}}}),m=(e,a)=>{const i=e.__vccOpts||e;for(const[o,r]of a)i[o]=r;return i},x=m(_,[["__scopeId","data-v-235436ca"]]),L="20px",M=m(t.defineComponent({inheritAttrs:!1,__name:"SecretInput",props:t.mergeModels({autocomplete:{default:"off"},showLabel:{},hideLabel:{},showMaskToggle:{type:Boolean,default:!0}},{modelValue:{default:""},modelModifiers:{},masked:{type:Boolean,default:!0},maskedModifiers:{}}),emits:["update:modelValue","update:masked"],setup(e){const[a,i]=t.useModel(e,"modelValue",{set:s=>i.trim?s.trim():s}),o=t.useModel(e,"masked"),{i18n:{t:r}}=f.useI18n(),l=t.computed(()=>e.showLabel??r("secretInput.show")),b=t.computed(()=>e.hideLabel??r("secretInput.hide")),c=t.useSlots(),T=()=>Object.fromEntries(Object.entries(c).filter(([s])=>s!=="after")),B=typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("-webkit-text-security","disc"),V=t.computed(()=>o.value&&!B?"password":"text"),h=()=>{o.value=!o.value},u=s=>{o.value&&s.preventDefault()};return(s,g)=>{const E=t.resolveComponent("KButton"),K=t.resolveComponent("KInput");return t.openBlock(),t.createBlock(K,t.mergeProps(s.$attrs,{autocapitalize:"off",autocomplete:e.autocomplete,autocorrect:"off",class:{"secret-input-masked":o.value},"model-value":t.unref(a),spellcheck:"false",type:V.value,onCopyCapture:u,onCutCapture:u,onDragstartCapture:u,"onUpdate:modelValue":g[0]||(g[0]=k=>a.value=k)}),t.createSlots({_:2},[t.renderList(T(),(k,S)=>({name:S,fn:t.withCtx(N=>[t.renderSlot(s.$slots,S,t.normalizeProps(t.guardReactiveProps(N)),void 0,!0)])})),e.showMaskToggle||t.unref(c).after?{name:"after",fn:t.withCtx(()=>[t.renderSlot(s.$slots,"after",{masked:o.value,toggle:h},void 0,!0),e.showMaskToggle?(t.openBlock(),t.createBlock(E,{key:0,appearance:"none","aria-label":o.value?l.value:b.value,"aria-pressed":!o.value,class:"secret-input-toggle mask-value-toggle-button","data-testid":"secret-input-toggle",icon:"",type:"button",onClick:h},{default:t.withCtx(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.value?t.unref(p.VisibilityIcon):t.unref(p.VisibilityOffIcon)),{color:"currentColor",decorative:"",size:`var(--kui-icon-size-40, ${t.unref(L)})`},null,8,["size"]))]),_:1},8,["aria-label","aria-pressed"])):t.createCommentVNode("",!0)]),key:"0"}:void 0]),1040,["autocomplete","class","model-value","type"])}}}),[["__scopeId","data-v-f3196a23"]]);n.GithubStar=x,n.SecretInput=M,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/style.css

@@ -1 +1 @@
-.kong-ui-public-misc-widgets-github-star[data-v-235436ca]{max-height:20px}.kong-ui-public-misc-widgets-github-star .github-button[data-v-235436ca]{font-style:normal}
+.kong-ui-public-misc-widgets-github-star[data-v-235436ca]{max-height:20px}.kong-ui-public-misc-widgets-github-star .github-button[data-v-235436ca]{font-style:normal}.secret-input-masked[data-v-f3196a23] input{-webkit-text-security:disc}.secret-input-masked[data-v-f3196a23] input[type=password]::-ms-reveal{display:none}.secret-input-toggle[data-v-f3196a23]{color:#6c7489;color:var(--kui-color-text-neutral, #6c7489);cursor:pointer}

package/dist/types/components/index.d.ts

@@ -1,2 +1,3 @@
 export { default as GithubStar } from './github-star/GithubStar.vue';
+export { default as SecretInput } from './secret-input/SecretInput.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAA"}

package/dist/types/components/secret-input/SecretInput.vue.d.ts

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    autocomplete?: string;
+    showLabel?: string;
+    hideLabel?: string;
+    showMaskToggle?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+    'masked'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: string, __VLS_16: any, __VLS_19: {
+    masked: boolean;
+    toggle: () => void;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+} & {
+    after?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:masked": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:masked"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=SecretInput.vue.d.ts.map

package/dist/types/components/secret-input/SecretInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecretInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/secret-input/SecretInput.vue"],"names":[],"mappings":"AA4HA,KAAK,WAAW,GAAG;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC;AAqCF,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAwKxD,QAAA,IAAI,QAAQ,QAAW,EAAE,QAAQ,KAAW,EAAE,QAAQ;;;CAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/misc-widgets",
-  "version": "2.5.10",
+  "version": "2.5.11-pr.3759.f7c032a78.0",
   "type": "module",
   "main": "./dist/misc-widgets.umd.js",
   "module": "./dist/misc-widgets.es.js",
@@ -21,11 +21,14 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@kong/icons": "^1.58.0",
     "@kong/kongponents": "^9.63.0",
     "vue": ">= 3.3.13 < 4",
     "@kong-ui-public/i18n": "^2.5.1"
   },
   "devDependencies": {
+    "@kong/design-tokens": "3.3.0",
+    "@kong/icons": "^1.62.1",
     "@kong/kongponents": "9.64.10",
     "vue": "^3.5.41",
     "@kong-ui-public/i18n": "^2.5.1"