npm - @dialpad/dialtone-vue - Versions diffs - 3.210.0 → 3.211.0-next.2 - Mend

@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.2

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.

Files changed (558) hide show

package/dist/lib/item-layout/item-layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item-layout.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[~~leftClass~~, 'd-item-layout__left']\"\n >\n <!-- @slot Slot for ~~left~~ content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n :class=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-item-layout__title']\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n subtitleClass,\n 'd-item-layout--subtitle',\n { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n :class=\"[~~bottomClass~~, 'd-item-layout__bottom']\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n :class=\"[~~rightClass~~, 'd-item-layout__right']\"\n >\n <!-- @slot Slot for ~~right~~ content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n :class=\"[selectedClass, 'd-item-layout__selected']\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/*\n Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n /\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtItemLayout',\n props: {\n /\n Set this prop to render layout as a specific HTML element.\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n Set this prop to remove the default styling.\n * @values true, false\n /\n unstyled: {\n type: Boolean,\n default: false,\n },\n\n /\n Set the class for the ~~left~~ section.\n /\n ~~leftClass~~: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the content section.\n /\n contentClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the title section.\n /\n titleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the subtitle section.\n /\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the ~~bottom~~ section.\n /\n ~~bottomClass~~: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the ~~right~~ section.\n /\n ~~rightClass~~: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the selected section.\n /\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n methods: {\n /\n Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = this.$slots.left ? 'auto' : '';\n const rightContentColumn = this.$slots.right ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n\n hasSlotContent,\n },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":";;;~~AA0EA~~,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,6BAA8B;AAC5B,YAAMC,~~IAAoB~~,KAAK,OAAO,OAAO,SAAS,~~IAChDC~~,~~IAAqB~~,KAAK,OAAO,~~QAAQ~~,SAAS,~~IAClDC~~,IAAwB,KAAK,OAAO,WAAW,SAAS;AAE9D,aAAO;AAAA,iCACoBF,CAAiB,QAAQC,CAAkB,IAAIC,CAAqB;AAAA;AAAA,IAEjG;AAAA,IAEA,gBAAAC;AAAA;AAEJ;;~~AAvKE~~,SAAAC,EAAA,GAAAC,~~EA8DYC~~,~~EA7DLC~~,EAAA,EAAE,GAAA;AAAA,IACN,SAAOA,EAAA,WAAQ,0BAAA,eAAA;AAAA,IACf,OAAKC,EAAED,EAAA,YAAYE,EAAA,2BAA0B,CAAA;AAAA;eAE9C,~~MAOU~~;AAAA,~~MANFA~~,EAAA,eAAeC,EAAA,OAAO,IAAI,~~UADlCC~~,~~EAOU~~,WAAA;AAAA;~~QALR~~,WAAQ;AAAA,QACP,~~UAAQJ~~,EAAA,~~WAAS~~,qBAAA,CAAA;AAAA;~~QAGlBK~~,~~EAAoBF~~,EAAA,QAAA,~~MAAA~~;AAAA;~~MAEtBG~~,~~EAgCU~~,WAAA;AAAA,~~QA/BR~~,WAAQ;AAAA,QACP,UAAQN,EAAA,cAAY,wBAAA,CAAA;AAAA;QAGbE,EAAA,eAAeC,EAAA,OAAO,OAAO,UADrCC,EAOM,OAAA;AAAA;UALJ,WAAQ;AAAA,UACP,UAAQJ,EAAA,YAAU,sBAAA,CAAA;AAAA;UAGnBK,EAAQF,EAAA,QAAA,SAAA;AAAA;QAGFD,EAAA,eAAeC,EAAA,OAAO,QAAQ,UADtCC,EAWM,OAAA;AAAA;UATJ,WAAQ;AAAA,UACP,OAAKG,EAAA;AAAA,YAAcP,EAAA;AAAA;qDAAuGE,EAAA,eAAeC,EAAA,OAAO,OAAO,EAAA;AAAA;;UAOxJE,EAAwBF,EAAA,QAAA,UAAA;AAAA;QAGlBD,EAAA,eAAeC,EAAA,OAAO,MAAM,~~UADpCC~~,~~EAOM~~,OAAA;AAAA;~~UALJ~~,WAAQ;AAAA,UACP,~~UAAQJ~~,EAAA,~~aAAW~~,uBAAA,CAAA;AAAA;~~UAGpBK~~,~~EAAsBF~~,EAAA,QAAA,QAAA;AAAA;;~~MAIlBD~~,EAAA,eAAeC,EAAA,OAAO,KAAK,~~UADnCC~~,~~EAOU~~,WAAA;AAAA;~~QALR~~,WAAQ;AAAA,QACP,~~UAAQJ~~,EAAA,~~YAAU~~,sBAAA,CAAA;AAAA;~~QAGnBK~~,~~EAAqBF~~,EAAA,QAAA,OAAA;AAAA;~~MAGfD~~,EAAA,eAAeC,EAAA,OAAO,QAAQ,UADtCC,EAOU,WAAA;AAAA;QALR,WAAQ;AAAA,QACP,UAAQJ,EAAA,eAAa,yBAAA,CAAA;AAAA;QAGtBK,EAAwBF,EAAA,QAAA,UAAA;AAAA;;;;;;"}
1	+ {"version":3,"file":"item-layout.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"hasSlotContent($slots.start) \|\| hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[resolvedStartClass, 'd-item-layout__left']\"\n >\n <!-- @slot Slot for start content -->\n <slot\n v-if=\"$slots.start\"\n name=\"start\"\n />\n <!-- @slot @deprecated Use start -->\n <slot\n v-else\n name=\"left\"\n />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n :class=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-item-layout__title']\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n subtitleClass,\n 'd-item-layout--subtitle',\n { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.blockEnd) \|\| hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n :class=\"[resolvedBlockEndClass, 'd-item-layout__bottom']\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot\n v-if=\"$slots.blockEnd\"\n name=\"blockEnd\"\n />\n <!-- @slot @deprecated Use blockEnd -->\n <slot\n v-else\n name=\"bottom\"\n />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.end) \|\| hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n :class=\"[resolvedEndClass, 'd-item-layout__right']\"\n >\n <!-- @slot Slot for end content -->\n <slot\n v-if=\"$slots.end\"\n name=\"end\"\n />\n <!-- @slot @deprecated Use end -->\n <slot\n v-else\n name=\"right\"\n />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n :class=\"[selectedClass, 'd-item-layout__selected']\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/*\n Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n /\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtItemLayout',\n props: {\n /\n Set this prop to render layout as a specific HTML element.\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n Set this prop to remove the default styling.\n * @values true, false\n /\n unstyled: {\n type: Boolean,\n default: false,\n },\n\n /\n Set the class for the start section.\n /\n startClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the start section.\n * @deprecated Use startClass\n /\n leftClass: {\n type: String,\n default: undefined,\n },\n\n /\n Set the class for the content section.\n /\n contentClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the title section.\n /\n titleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the subtitle section.\n /\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the block-end section.\n /\n blockEndClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the block-end section.\n * @deprecated Use blockEndClass\n /\n bottomClass: {\n type: String,\n default: undefined,\n },\n\n /\n Set the class for the end section.\n /\n endClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the end section.\n * @deprecated Use endClass\n /\n rightClass: {\n type: String,\n default: undefined,\n },\n\n /\n Set the class for the selected section.\n /\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n computed: {\n resolvedStartClass () {\n return this.leftClass ?? this.startClass;\n },\n\n resolvedEndClass () {\n return this.rightClass ?? this.endClass;\n },\n\n resolvedBlockEndClass () {\n return this.bottomClass ?? this.blockEndClass;\n },\n },\n\n methods: {\n /\n Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = (this.$slots.start \|\| this.$slots.left) ? 'auto' : '';\n const rightContentColumn = (this.$slots.end \|\| this.$slots.right) ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n\n hasSlotContent,\n },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/vue3"),t=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),s={"{win}":e.DtIconLayoutGrid,"{arrow-right}":e.DtIconArrowRight,"{arrow-left}":e.DtIconArrowLeft,"{arrow-up}":e.DtIconArrowUp,"{arrow-down}":e.DtIconArrowDown,"{cmd}":e.DtIconCommand,"{opt}":e.DtIconOption},l={"{cmd}":"Command","{opt}":"Option","{win}":"Windows","{arrow-right}":"Right Arrow","{arrow-left}":"Left Arrow","{arrow-up}":"Up Arrow","{arrow-down}":"Down Arrow","{plus}":"plus"},u={ctrl:"Control",alt:"Alt",esc:"Escape",del:"Delete",ins:"Insert",pgup:"Page Up",pgdn:"Page Down",num:"Number",caps:"Caps Lock"},p={compatConfig:{MODE:3},name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:e.DtIconLayoutGrid,DtIconArrowRight:e.DtIconArrowRight,DtIconArrowLeft:e.DtIconArrowLeft,DtIconArrowUp:e.DtIconArrowUp,DtIconArrowDown:e.DtIconArrowDown,DtIconCommand:e.DtIconCommand,DtIconOption:e.DtIconOption,DtIconPlus:e.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...s,"{plus}":e.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(s).reduce((o,r)=>o.replace(new RegExp("{"+r+"}","gi"),s[r]),this.shortcutWithSeparator)},formattedShortcutSplit(){const o=Object.keys(this.icons).join("|"),r=new RegExp(`(${o})`,"gi");return this.formattedShortcut.split(r).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(o=>{const r=o.trim();if(l[r])return l[r];const n=r.toLowerCase();return u[n]?u[n]:r}).filter(o=>o).join(" ")}}},m={class:"d-keyboard-shortcut--sr-only"},w=["innerHTML"];function h(o,r,n,I,_,a){return t.openBlock(),t.createElementBlock("kbd",{class:t.normalizeClass(["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":n.inverted}])},[t.createElementVNode("span",m,t.toDisplayString(n.screenReaderText||a.generatedScreenReaderText),1),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.formattedShortcutSplit,(c,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[a.icons[c]?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.icons[c]),{key:`icon-${i}-${c}`,size:"100","aria-hidden":"true",class:t.normalizeClass(["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":n.inverted}])},null,8,["class"])):c.trim()?(t.openBlock(),t.createElementBlock("span",{key:`text-${i}-${c}`,"aria-hidden":"true",class:t.normalizeClass(["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":n.inverted}]),innerHTML:c},null,10,w)):t.createCommentVNode("",!0)],64))),256))],2)}const D=d._(p,[["render",h]]);exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/vue3"),t=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../text/text.cjs"),s={"{win}":e.DtIconLayoutGrid,"{arrow-right}":e.DtIconArrowRight,"{arrow-left}":e.DtIconArrowLeft,"{arrow-up}":e.DtIconArrowUp,"{arrow-down}":e.DtIconArrowDown,"{cmd}":e.DtIconCommand,"{opt}":e.DtIconOption},d={"{cmd}":"Command","{opt}":"Option","{win}":"Windows","{arrow-right}":"Right Arrow","{arrow-left}":"Left Arrow","{arrow-up}":"Up Arrow","{arrow-down}":"Down Arrow","{plus}":"plus"},l={ctrl:"Control",alt:"Alt",esc:"Escape",del:"Delete",ins:"Insert",pgup:"Page Up",pgdn:"Page Down",num:"Number",caps:"Caps Lock"},w={compatConfig:{MODE:3},name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:e.DtIconLayoutGrid,DtIconArrowRight:e.DtIconArrowRight,DtIconArrowLeft:e.DtIconArrowLeft,DtIconArrowUp:e.DtIconArrowUp,DtIconArrowDown:e.DtIconArrowDown,DtIconCommand:e.DtIconCommand,DtIconOption:e.DtIconOption,DtIconPlus:e.DtIconPlus,DtText:m.default},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...s,"{plus}":e.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(s).reduce((o,r)=>o.replace(new RegExp("{"+r+"}","gi"),s[r]),this.shortcutWithSeparator)},formattedShortcutSplit(){const o=Object.keys(this.icons).join("|"),r=new RegExp(`(${o})`,"gi");return this.formattedShortcut.split(r).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(o=>{const r=o.trim();if(d[r])return d[r];const n=r.toLowerCase();return l[n]?l[n]:r}).filter(o=>o).join(" ")}}},h={class:"d-keyboard-shortcut--sr-only"},D=["innerHTML"];function _(o,r,n,g,f,a){const u=t.resolveComponent("dt-text");return t.openBlock(),t.createElementBlock("kbd",{class:t.normalizeClass(["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":n.inverted}])},[t.createElementVNode("span",h,t.toDisplayString(n.screenReaderText||a.generatedScreenReaderText),1),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.formattedShortcutSplit,(c,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[a.icons[c]?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.icons[c]),{key:`icon-${i}-${c}`,size:"100","aria-hidden":"true",class:t.normalizeClass(["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":n.inverted}])},null,8,["class"])):c.trim()?(t.openBlock(),t.createBlock(u,{key:`text-${i}-${c}`,kind:"body",size:"sm",numeric:"",density:400,tone:n.inverted?"secondary-inverted":"tertiary","aria-hidden":"true",class:t.normalizeClass(["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":n.inverted}])},{default:t.withCtx(()=>[t.createElementVNode("span",{innerHTML:c},null,8,D)]),_:2},1032,["tone","class"])):t.createCommentVNode("",!0)],64))),256))],2)}const I=p._(w,[["render",_]]);exports.default=I;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["~~<!-- eslint-disable vue/no-v-html -->\n~~<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <~~span~~\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n ~~/>\~~n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":"~~uOAmDMA~~,EAAyB,CAC7B,QAASC,EAAAA,iBACT,gBAAiBC,EAAAA,iBACjB,eAAgBC,EAAAA,gBAChB,aAAcC,EAAAA,cACd,eAAgBC,EAAAA,gBAChB,QAASC,EAAAA,cACT,QAASC,EAAAA,YACX,EAGMC,EAAqB,CACzB,QAAS,UACT,QAAS,SACT,QAAS,UACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,SAAU,MACZ,EAGMC,EAAoB,CACxB,KAAQ,UACR,IAAO,MACP,IAAO,SACP,IAAO,SACP,IAAO,SACP,KAAQ,UACR,KAAQ,YACR,IAAO,SACP,KAAQ,WACV,EAMKC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,iBAAAT,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,8BACAC,EAAAA,cACA,gBAAAC,EAAAA,8BACAC,EAAAA,2BACAC,EAAAA,wBACAI,EAAAA,~~YAGF~~,MAAO,~~CAKL~~,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,OACN,SAAU,IAOZ,iBAAkB,CAChB,KAAM,OACN,QAAS,OAIb,MAAQ,CACN,MAAO,CACL,UAAW,OAEf,EAEA,SAAU,CACR,OAAS,CACP,MAAO,CACL,~~GAAGX~~,EACH,SAAUW,EAAAA,WAEd,EAEA,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,QAAQ,CACvD,EAEA,mBAAqB,CACnB,OAAO,OAAO,KAAKX,CAAsB,EAAE,OAAO,~~CAACY~~,EAAQC,IAClDD,EAAO,QAAQ,IAAI,OAAO,IAAMC,EAAM,IAAK,IAAI,~~EAAGb~~,~~EAAuBa~~,CAAG,CAAC,EACnF,KAAK,qBAAqB,CAC/B,EAGA,wBAA0B,CACxB,MAAMC,EAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,EAOlDC,EAAQ,IAAI,OAAO,IAAID,CAAe,IAAK,IAAI,EACrD,OAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO,CAC3D,EAGA,2BAA6B,CAC3B,OAAO,KAAK,uBACT,IAAIC,GAAQ,CACX,MAAMC,EAAcD,EAAK,KAAI,EAG7B,~~GAAIR~~,~~EAAmBS~~,CAAW,EAChC,~~OAAOT~~,~~EAAmBS~~,CAAW,EAIvC,MAAMC,EAAYD,EAAY,YAAW,EACzC,~~OAAIR~~,~~EAAkBS~~,CAAS,~~EACtBT~~,~~EAAkBS~~,CAAS,EAI7BD,CACT,CAAC,EACA,OAAOD,GAAQA,CAAI,EACnB,KAAK,GAAG,CACb,EAEJ,~~EA3LUG~~,EAAA,CAAA,MAAM,8BAA8B~~,+DAN5CC~~,EAAAA,~~mBAkCM~~,MAAA,~~CAjCH~~,MAAKC,EAAAA,eAAA,wDAA0EC,EAAA,QAAQ,MAKxFC,qBAEO,OAFPJ,EAEOK,kBADFF,EAAA,kBAAoBG,EAAA,yBAAyB,EAAA,CAAA,GAElDC,EAAAA,UAAA,EAAA,EAAAN,EAAAA,~~mBAwBWO~~,WAAA,KAAAC,EAAAA,~~WAvBWH~~,EAAA,uBAAsB,CAAlCT,EAAM,yDAINS,EAAA,MAAMT,CAAI,iBAFlBa,EAAAA,YAUEC,EAAAA,wBATKL,EAAA,MAAMT,CAAI,CAAA,EAAA,CAEd,IAAG,QAAU,CAAC,IAAIA,CAAI,GACvB,KAAK,MACL,cAAY,OACX,MAAKK,EAAAA,eAAA,oEAA8FC,EAAA,QAAQ,wBAMjGN,EAAK,KAAI,~~iBADtBI~~,EAAAA,~~mBASE~~,~~OAAA~~,~~CAPC~~,IAAG,QAAU,CAAC,~~IAAIJ~~,CAAI,GACvB,cAAY,OACX,~~MAAKK~~,EAAAA,eAAA,oEAA8FC,EAAA,QAAQ,~~IAI5G~~,~~UAAQN~~"}
1	+ {"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <dt-text\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n kind=\"body\"\n size=\"sm\"\n numeric\n :density=\"400\"\n :tone=\"inverted ? 'secondary-inverted' : 'tertiary'\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n >\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"item\" />\n </dt-text>\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtText } from '@/components/text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n DtText,\n },\n\n props: {\n /\n @ignore\n * If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","DtText","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_component_dt_text","_hoisted_2"],"mappings":"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"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js CHANGED Viewed

@@ -1,15 +1,16 @@
-import { DtIconPlus as u, DtIconOption as h, DtIconCommand as w, DtIconArrowDown as _, DtIconArrowUp as f, DtIconArrowLeft as S, DtIconArrowRight as g, DtIconLayoutGrid as y } from "@dialpad/dialtone-icons/vue3";
-import { openBlock as n, createElementBlock as c, normalizeClass as s, createElementVNode as D, toDisplayString as I, Fragment as l, renderList as A, createBlock as k, resolveDynamicComponent as b, createCommentVNode as C } from "vue";
-import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { DtIconPlus as u, DtIconOption as w, DtIconCommand as f, DtIconArrowDown as S, DtIconArrowUp as y, DtIconArrowLeft as g, DtIconArrowRight as D, DtIconLayoutGrid as I } from "@dialpad/dialtone-icons/vue3";
+import { resolveComponent as A, openBlock as n, createElementBlock as c, normalizeClass as s, createElementVNode as l, toDisplayString as x, Fragment as p, renderList as b, createBlock as m, resolveDynamicComponent as C, withCtx as T, createCommentVNode as v } from "vue";
+import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import L from "../text/text.js";
 const i = {
-  "{win}": y,
-  "{arrow-right}": g,
-  "{arrow-left}": S,
-  "{arrow-up}": f,
-  "{arrow-down}": _,
-  "{cmd}": w,
-  "{opt}": h
-}, p = {
+  "{win}": I,
+  "{arrow-right}": D,
+  "{arrow-left}": g,
+  "{arrow-up}": y,
+  "{arrow-down}": S,
+  "{cmd}": f,
+  "{opt}": w
+}, h = {
   "{cmd}": "Command",
   "{opt}": "Option",
   "{win}": "Windows",
@@ -18,7 +19,7 @@ const i = {
   "{arrow-up}": "Up Arrow",
   "{arrow-down}": "Down Arrow",
   "{plus}": "plus"
-}, m = {
+}, _ = {
   ctrl: "Control",
   alt: "Alt",
   esc: "Escape",
@@ -28,21 +29,23 @@ const i = {
   pgdn: "Page Down",
   num: "Number",
   caps: "Caps Lock"
-}, x = {
+}, O = {
   compatConfig: { MODE: 3 },
   name: "DtKeyboardShortcut",
   components: {
-    DtIconLayoutGrid: y,
-    DtIconArrowRight: g,
-    DtIconArrowLeft: S,
-    DtIconArrowUp: f,
-    DtIconArrowDown: _,
-    DtIconCommand: w,
-    DtIconOption: h,
-    DtIconPlus: u
+    DtIconLayoutGrid: I,
+    DtIconArrowRight: D,
+    DtIconArrowLeft: g,
+    DtIconArrowUp: y,
+    DtIconArrowDown: S,
+    DtIconCommand: f,
+    DtIconOption: w,
+    DtIconPlus: u,
+    DtText: L
   },
   props: {
     /**
+     * @ignore
      * If true, applies inverted styles.
      * @values true, false
      */
@@ -83,56 +86,66 @@ const i = {
       return this.shortcut.replace(this.separator, "{plus}");
     },
     formattedShortcut() {
-      return Object.keys(i).reduce((r, t) => r.replace(new RegExp("{" + t + "}", "gi"), i[t]), this.shortcutWithSeparator);
+      return Object.keys(i).reduce((e, t) => e.replace(new RegExp("{" + t + "}", "gi"), i[t]), this.shortcutWithSeparator);
     },
     // Splits any icon based aliases into their own array items.
     formattedShortcutSplit() {
-      const r = Object.keys(this.icons).join("|"), t = new RegExp(`(${r})`, "gi");
+      const e = Object.keys(this.icons).join("|"), t = new RegExp(`(${e})`, "gi");
       return this.formattedShortcut.split(t).filter(Boolean);
     },
     // Generates accessible text for the keyboard shortcut
     generatedScreenReaderText() {
-      return this.formattedShortcutSplit.map((r) => {
-        const t = r.trim();
-        if (p[t])
-          return p[t];
-        const e = t.toLowerCase();
-        return m[e] ? m[e] : t;
-      }).filter((r) => r).join(" ");
+      return this.formattedShortcutSplit.map((e) => {
+        const t = e.trim();
+        if (h[t])
+          return h[t];
+        const r = t.toLowerCase();
+        return _[r] ? _[r] : t;
+      }).filter((e) => e).join(" ");
     }
   }
-}, E = { class: "d-keyboard-shortcut--sr-only" }, L = ["innerHTML"];
-function O(r, t, e, R, v, a) {
+}, R = { class: "d-keyboard-shortcut--sr-only" }, B = ["innerHTML"];
+function N(e, t, r, j, U, a) {
+  const k = A("dt-text");
   return n(), c("kbd", {
     class: s([
       "d-keyboard-shortcut",
-      { "d-keyboard-shortcut--inverted": e.inverted }
+      { "d-keyboard-shortcut--inverted": r.inverted }
     ])
   }, [
-    D("span", E, I(e.screenReaderText || a.generatedScreenReaderText), 1),
-    (n(!0), c(l, null, A(a.formattedShortcutSplit, (o, d) => (n(), c(l, null, [
-      a.icons[o] ? (n(), k(b(a.icons[o]), {
+    l("span", R, x(r.screenReaderText || a.generatedScreenReaderText), 1),
+    (n(!0), c(p, null, b(a.formattedShortcutSplit, (o, d) => (n(), c(p, null, [
+      a.icons[o] ? (n(), m(C(a.icons[o]), {
         key: `icon-${d}-${o}`,
         size: "100",
         "aria-hidden": "true",
         class: s([
           "d-keyboard-shortcut__icon",
-          { "d-keyboard-shortcut__icon--inverted": e.inverted }
+          { "d-keyboard-shortcut__icon--inverted": r.inverted }
         ])
-      }, null, 8, ["class"])) : o.trim() ? (n(), c("span", {
+      }, null, 8, ["class"])) : o.trim() ? (n(), m(k, {
         key: `text-${d}-${o}`,
+        kind: "body",
+        size: "sm",
+        numeric: "",
+        density: 400,
+        tone: r.inverted ? "secondary-inverted" : "tertiary",
         "aria-hidden": "true",
         class: s([
           "d-keyboard-shortcut__item",
-          { "d-keyboard-shortcut__item--inverted": e.inverted }
+          { "d-keyboard-shortcut__item--inverted": r.inverted }
+        ])
+      }, {
+        default: T(() => [
+          l("span", { innerHTML: o }, null, 8, B)
         ]),
-        innerHTML: o
-      }, null, 10, L)) : C("", !0)
+        _: 2
+      }, 1032, ["tone", "class"])) : v("", !0)
     ], 64))), 256))
   ], 2);
 }
-const U = /* @__PURE__ */ T(x, [["render", O]]);
+const P = /* @__PURE__ */ E(O, [["render", N]]);
 export {
-  U as default
+  P as default
 };
 //# sourceMappingURL=keyboard-shortcut.js.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["~~<!-- eslint-disable vue/no-v-html -->\n~~<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <~~span~~\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n ~~/>\~~n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","i","_createBlock","_resolveDynamicComponent"],"mappings":"~~;;;AAmDA~~,MAAMA,IAAyB;AAAA,EAC7B,SAASC;AAAA,EACT,iBAAiBC;AAAA,EACjB,gBAAgBC;AAAA,EAChB,cAAcC;AAAA,EACd,gBAAgBC;AAAA,EAChB,SAASC;AAAA,EACT,SAASC;AACX,GAGMC,IAAqB;AAAA,EACzB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,UAAU;AACZ,GAGMC,IAAoB;AAAA,EACxB,MAAQ;AAAA,EACR,KAAO;AAAA,EACP,KAAO;AAAA,EACP,KAAO;AAAA,EACP,KAAO;AAAA,EACP,MAAQ;AAAA,EACR,MAAQ;AAAA,EACR,KAAO;AAAA,EACP,MAAQ;AACV,GAMKC,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAT;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAI;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,~~IAKL~~,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA;;;;;IAOZ,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEf;AAAA,EAEA,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,~~GAAGX~~;AAAA,QACH,UAAUW;AAAA;IAEd;AAAA,IAEA,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACvD;AAAA,IAEA,oBAAqB;AACnB,aAAO,OAAO,KAAKX,CAAsB,EAAE,OAAO,~~CAACY~~,GAAQC,MAClDD,EAAO,QAAQ,IAAI,OAAO,MAAMC,IAAM,KAAK,IAAI,~~GAAGb~~,~~EAAuBa~~,CAAG,CAAC,GACnF,KAAK,qBAAqB;AAAA,IAC/B;AAAA;AAAA,IAGA,yBAA0B;AACxB,YAAMC,IAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,GAOlDC,IAAQ,IAAI,OAAO,IAAID,CAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO;AAAA,IAC3D;AAAA;AAAA,IAGA,4BAA6B;AAC3B,aAAO,KAAK,uBACT,IAAI,CAAAC,MAAQ;AACX,cAAMC,IAAcD,EAAK,KAAI;AAG7B,~~YAAIR~~,~~EAAmBS~~,CAAW;AAChC,~~iBAAOT~~,~~EAAmBS~~,CAAW;AAIvC,cAAMC,IAAYD,EAAY,YAAW;AACzC,~~eAAIR~~,~~EAAkBS~~,CAAS,~~IACtBT~~,~~EAAkBS~~,CAAS,IAI7BD;AAAA,MACT,CAAC,EACA,OAAO,CAAAD,MAAQA,CAAI,EACnB,KAAK,GAAG;AAAA,IACb;AAAA;AAEJ,~~GA3LUG~~,IAAA,EAAA,OAAM,+BAA8B;;cAN5CC,~~EAkCM~~,OAAA;AAAA,~~IAjCH~~,OAAKC,EAAA;AAAA;yCAA0EC,EAAA,SAAQ;AAAA;;IAKxFC,EAEO,QAFPJ,GAEOK,EADFF,EAAA,oBAAoBG,EAAA,yBAAyB,GAAA,CAAA;AAAA,KAElDC,EAAA,EAAA,GAAAN,~~EAwBWO~~,GAAA,MAAAC,~~EAvBWH~~,EAAA,wBAAsB,CAAlCT,GAAMa;MAINJ,EAAA,MAAMT,CAAI,UAFlBc,EAUEC,EATKN,EAAA,MAAMT,CAAI,CAAA,GAAA;AAAA,QAEd,KAAG,QAAUa,CAAC,IAAIb,CAAI;AAAA,QACvB,MAAK;AAAA,QACL,eAAY;AAAA,QACX,OAAKK,EAAA;AAAA;mDAA8FC,EAAA,SAAQ;AAAA;gCAMjGN,EAAK,KAAI,~~UADtBI~~,~~EASE~~,~~QAAA~~;AAAA,~~QAPC~~,KAAG,~~QAAUS~~,CAAC,IAAIb,CAAI;AAAA,QACvB,eAAY;AAAA,QACX,~~OAAKK~~,EAAA;AAAA;mDAA8FC,EAAA,SAAQ;AAAA;~~QAI5G~~,~~WAAQN~~;AAAA~~;;;;;~~"}
1	+ {"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <dt-text\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n kind=\"body\"\n size=\"sm\"\n numeric\n :density=\"400\"\n :tone=\"inverted ? 'secondary-inverted' : 'tertiary'\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n >\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"item\" />\n </dt-text>\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtText } from '@/components/text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n DtText,\n },\n\n props: {\n /\n @ignore\n * If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","DtText","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","i","_createBlock","_resolveDynamicComponent","_component_dt_text","_hoisted_2"],"mappings":"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"}

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../text/text.cjs"),i=require("../stack/stack.cjs"),p=require("../link/link.cjs"),v={key:0,class:"d-d-flex d-ai-center d-jc-center d-h164"},B={__name:"kitchen_sink_view",props:{title:{type:String,required:!0},itemLabel:{type:String,required:!0},iframeUrl:{type:String,required:!0},loaders:{type:Object,required:!0}},setup(u){const _=u,s=e.ref([]),k=e.ref(!0);function m(o){return o.toLowerCase().replace(/[\s/_]+/g,"-")}function g(o){var a;(a=document.getElementById(`ks-${o}`))==null\|\|a.scrollIntoView({behavior:"smooth"})}function x(o){return e.markRaw(e.defineComponent({name:`ErrorBoundary-${o}`,setup(a,{slots:n}){const r=e.ref(null);return e.onErrorCaptured(t=>(r.value=t.message\|\|String(t),!1)),()=>{var t;return r.value?e.h("div",{class:"d-fc-critical d-fs-200 d-p8 d-px12 d-bgc-critical d-bar4"},`Failed to render ${o}: ${r.value}`):(t=n.default)==null?void 0:t.call(n)}}}))}function y(o,a,n){const r=[];for(const[t,l]of Object.entries(o)){if(t==="default"\|\|!(l!=null&&l.render)\|\|typeof l.render!="function")continue;const f={...a.args,...l.args};try{const c=l.render(f,{argTypes:a.argTypes\|\|{}});r.push({name:t,component:e.markRaw(c),errorBoundary:x(`${n} / ${t}`)})}catch(c){console.error(`Kitchen Sink: Failed to initialize ${n}/${t}:`,c)}}return r}return e.onMounted(async()=>{const o=await Promise.allSettled(Object.values(_.loaders).map(async n=>n())),a=[];for(const n of o){if(n.status!=="fulfilled")continue;const r=n.value,t=r.default;if(!(t!=null&&t.title))continue;const l=t.title.split("/").pop(),f=m(l),c=m(t.title),h=y(r,t,l);h.length!==0&&a.push({id:f,name:l,storyId:c,variants:h})}s.value=a.sort((n,r)=>n.name.localeCompare(r.name)),k.value=!1}),(o,a)=>{const n=e.resolveDirective("dt-scrollbar");return e.openBlock(),e.createElementBlock("div",null,[k.value?(e.openBlock(),e.createElementBlock("div",v,[e.createVNode(e.unref(d.default),{tone:"muted"},{default:e.withCtx(()=>[e.createTextVNode(" Loading "+e.toDisplayString(u.itemLabel)+"... ",1)]),_:1})])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createVNode(e.unref(i.default),{class:"d-p32 d-py16 d-pb8 d-bgc-secondary d-bb d-ps-sticky d-t0 d-zi-base1 d-mtn10 d-mxn10 d-bs-card",gap:"400"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.default),{class:"d-px8",gap:"400",direction:"row",justify:"between",align:"baseline"},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{as:"h1",kind:"headline",size:"3xl"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.title),1)]),_:1}),e.createVNode(e.unref(d.default),{kind:"body",size:"sm"},{default:e.withCtx(()=>[e.createVNode(e.unref(p.default),{href:u.iframeUrl,target:"_blank",rel:"noopener noreferrer"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.default),{gap:"300",direction:"row"},{default:e.withCtx(()=>[a[0]\|\|(a[0]=e.createTextVNode(" Open in new window ",-1)),e.createVNode(e.unref(w.DtIconExternalLink),{size:"200"})]),_:1})]),_:1},8,["href"])]),_:1})]),_:1}),e.withDirectives((e.openBlock(),e.createElementBlock("div",null,[e.createVNode(e.unref(i.default),{direction:"row",gap:"400",class:"d-pb8 d-px8"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,r=>(e.openBlock(),e.createBlock(e.unref(p.default),{key:r.id,href:`#ks-${r.id}`,onClick:e.withModifiers(t=>g(r.id),["prevent"])},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{kind:"body",size:"sm",class:"d-ws-nowrap"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.name),1)]),_:2},1024)]),_:2},1032,["href","onClick"]))),128))]),_:1})])),[[n]])]),_:1}),e.createVNode(e.unref(i.default),{class:"d-px32"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,r=>(e.openBlock(),e.createBlock(e.unref(i.default),{id:`ks-${r.id}`,key:r.id,as:"section",gap:"500",class:"d-py32 kitchen-sink__section"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.default),{gap:"400",direction:"row",justify:"between",align:"baseline"},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{as:"h2",kind:"headline",size:"2xl"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.name),1)]),_:2},1024),e.createVNode(e.unref(p.default),{href:`/?path=/story/${r.storyId}--default`},{default:e.withCtx(()=>[...a[1]\|\|(a[1]=[e.createTextVNode(" View Story ",-1)])]),_:1},8,["href"])]),_:2},1024),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.variants,t=>(e.openBlock(),e.createBlock(e.unref(i.default),{key:t.name,class:"d-ba d-bc-subtle d-p16",gap:"400"},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{size:"xs",tone:"muted",kind:"code"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:2},1024),e.createElementVNode("div",null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.errorBoundary),null,{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component)))]),_:2},1024))])]),_:2},1024))),128))]),_:2},1032,["id"]))),128))]),_:1})],64))])}}},C=b._(B,[["__scopeId","data-v-1a19d505"]]);exports.default=C;
2	+ //# sourceMappingURL=kitchen-sink-view.cjs.map

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"kitchen-sink-view.cjs","sources":["../../../components/kitchen_sink/kitchen_sink_view.vue"],"sourcesContent":["\n<template>\n <div>\n <div\n v-if=\"loading\"\n class=\"d-d-flex d-ai-center d-jc-center d-h164\"\n >\n <dt-text\n tone=\"muted\"\n >\n Loading {{ itemLabel }}...\n </dt-text>\n </div>\n <template v-else>\n <dt-stack\n class=\"\n d-p32\n d-py16\n d-pb8\n d-bgc-secondary\n d-bb\n d-ps-sticky\n d-t0\n d-zi-base1\n d-mtn10\n d-mxn10\n d-bs-card\n \"\n gap=\"400\"\n >\n <dt-stack\n class=\"d-px8\"\n gap=\"400\"\n direction=\"row\"\n justify=\"between\"\n align=\"baseline\"\n >\n <dt-text\n as=\"h1\"\n kind=\"headline\"\n size=\"3xl\"\n >\n {{ title }}\n </dt-text>\n <dt-text\n kind=\"body\"\n size=\"sm\"\n >\n <dt-link\n :href=\"iframeUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <dt-stack\n gap=\"300\"\n direction=\"row\"\n >\n Open in new window\n <dt-icon-external-link size=\"200\" />\n </dt-stack>\n </dt-link>\n </dt-text>\n </dt-stack>\n <div\n v-dt-scrollbar\n >\n <dt-stack\n direction=\"row\"\n gap=\"400\"\n class=\"d-pb8 d-px8\"\n >\n <dt-link\n v-for=\"section in sections\"\n :key=\"section.id\"\n :href=\"`#ks-${section.id}`\"\n @click.prevent=\"scrollTo(section.id)\"\n >\n <dt-text\n kind=\"body\"\n size=\"sm\"\n class=\"d-ws-nowrap\"\n >\n {{ section.name }}\n </dt-text>\n </dt-link>\n </dt-stack>\n </div>\n </dt-stack>\n <dt-stack class=\"d-px32\">\n <dt-stack\n v-for=\"section in sections\"\n :id=\"`ks-${section.id}`\"\n :key=\"section.id\"\n as=\"section\"\n gap=\"500\"\n class=\"d-py32 kitchen-sink__section\"\n >\n <dt-stack\n gap=\"400\"\n direction=\"row\"\n justify=\"between\"\n align=\"baseline\"\n >\n <dt-text\n as=\"h2\"\n kind=\"headline\"\n size=\"2xl\"\n >\n {{ section.name }}\n </dt-text>\n <dt-link\n :href=\"`/?path=/story/${section.storyId}--default`\"\n >\n View Story\n </dt-link>\n </dt-stack>\n <dt-stack\n v-for=\"variant in section.variants\"\n :key=\"variant.name\"\n class=\"d-ba d-bc-subtle d-p16\"\n gap=\"400\"\n >\n <dt-text\n size=\"xs\"\n tone=\"muted\"\n kind=\"code\"\n >\n {{ variant.name }}\n </dt-text>\n <div>\n <component :is=\"variant.errorBoundary\">\n <component :is=\"variant.component\" />\n </component>\n </div>\n </dt-stack>\n </dt-stack>\n </dt-stack>\n </template>\n </div>\n</template>\n\n<script setup>\nimport { ref, h, onErrorCaptured, onMounted, defineComponent, markRaw } from 'vue';\nimport { DtLink } from '@/components/link';\nimport { DtStack } from '@/components/stack';\nimport { DtText } from '@/components/text';\nimport { DtIconExternalLink } from '@dialpad/dialtone-icons/vue3';\n\nconst props = defineProps({\n title: {\n type: String,\n required: true,\n },\n itemLabel: {\n type: String,\n required: true,\n },\n iframeUrl: {\n type: String,\n required: true,\n },\n loaders: {\n type: Object,\n required: true,\n },\n});\n\nconst sections = ref([]);\nconst loading = ref(true);\n\nfunction sanitizeId (str) {\n return str.toLowerCase().replace(/[\\s/_]+/g, '-');\n}\n\nfunction scrollTo (id) {\n document.getElementById(`ks-${id}`)?.scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction createErrorBoundary (name) {\n return markRaw(defineComponent({\n name: `ErrorBoundary-${name}`,\n setup (_, { slots }) {\n const error = ref(null);\n onErrorCaptured((err) => {\n error.value = err.message || String(err);\n return false;\n });\n return () => {\n if (error.value) {\n return h('div', {\n class: 'd-fc-critical d-fs-200 d-p8 d-px12 d-bgc-critical d-bar4',\n }, `Failed to render ${name}: ${error.value}`);\n }\n return slots.default?.();\n };\n },\n }));\n}\n\nfunction extractVariants (module, meta, name) {\n const variants = [];\n\n for (const [exportName, exportValue] of Object.entries(module)) {\n if (exportName === 'default') continue;\n if (!exportValue?.render || typeof exportValue.render !== 'function') continue;\n\n const mergedArgs = { ...meta.args, ...exportValue.args };\n\n try {\n const componentOptions = exportValue.render(mergedArgs, {\n argTypes: meta.argTypes || {},\n });\n variants.push({\n name: exportName,\n component: markRaw(componentOptions),\n errorBoundary: createErrorBoundary(`${name} / ${exportName}`),\n });\n } catch (e) {\n console.error(`Kitchen Sink: Failed to initialize ${name}/${exportName}:`, e);\n }\n }\n\n return variants;\n}\n\nonMounted(async () => {\n const results = await Promise.allSettled(\n Object.values(props.loaders).map(async (loader) => loader()),\n );\n\n const loaded = [];\n\n for (const result of results) {\n if (result.status !== 'fulfilled') continue;\n\n const module = result.value;\n const meta = module.default;\n if (!meta?.title) continue;\n\n const name = meta.title.split('/').pop();\n const id = sanitizeId(name);\n const storyId = sanitizeId(meta.title);\n const variants = extractVariants(module, meta, name);\n\n if (variants.length === 0) continue;\n\n loaded.push({ id, name, storyId, variants });\n }\n\n sections.value = loaded.sort((a, b) => a.name.localeCompare(b.name));\n loading.value = false;\n});\n</script>\n\n<style scoped>\n.kitchen-sink__section {\n scroll-margin-block-start: var(--dt-size-750);\n}\n[outline] {\n outline: 2px solid orangered;\n}\n</style>\n"],"names":["props","__props","sections","ref","loading","sanitizeId","str","scrollTo","id","_a","createErrorBoundary","name","markRaw","defineComponent","_","slots","error","onErrorCaptured","err","h","extractVariants","module","meta","variants","exportName","exportValue","mergedArgs","componentOptions","e","onMounted","results","loader","loaded","result","storyId","a","b","_createElementBlock","_openBlock","_hoisted_1","_createVNode","_unref","DtText","_toDisplayString","_Fragment","DtStack","DtLink","DtIconExternalLink","_renderList","section","_createBlock","_withModifiers","$event","_createTextVNode","_cache","variant","_createElementVNode","_resolveDynamicComponent"],"mappings":"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"}

package/dist/lib/kitchen-sink/kitchen-sink-view.js ADDED Viewed

@@ -0,0 +1,263 @@
+import { ref as h, onMounted as j, resolveDirective as O, openBlock as d, createElementBlock as c, createVNode as a, unref as r, withCtx as n, createTextVNode as f, toDisplayString as y, Fragment as g, withDirectives as T, renderList as w, createBlock as _, withModifiers as V, createElementVNode as q, resolveDynamicComponent as B, markRaw as C, defineComponent as N, onErrorCaptured as F, h as M } from "vue";
+import { DtIconExternalLink as U } from "@dialpad/dialtone-icons/vue3";
+import { _ as A } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import p from "../text/text.js";
+import u from "../stack/stack.js";
+import x from "../link/link.js";
+const K = {
+  key: 0,
+  class: "d-d-flex d-ai-center d-jc-center d-h164"
+}, P = {
+  __name: "kitchen_sink_view",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    },
+    itemLabel: {
+      type: String,
+      required: !0
+    },
+    iframeUrl: {
+      type: String,
+      required: !0
+    },
+    loaders: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(k) {
+    const D = k, b = h([]), $ = h(!0);
+    function z(l) {
+      return l.toLowerCase().replace(/[\s/_]+/g, "-");
+    }
+    function E(l) {
+      var o;
+      (o = document.getElementById(`ks-${l}`)) == null || o.scrollIntoView({ behavior: "smooth" });
+    }
+    function I(l) {
+      return C(N({
+        name: `ErrorBoundary-${l}`,
+        setup(o, { slots: i }) {
+          const t = h(null);
+          return F((e) => (t.value = e.message || String(e), !1)), () => {
+            var e;
+            return t.value ? M("div", {
+              class: "d-fc-critical d-fs-200 d-p8 d-px12 d-bgc-critical d-bar4"
+            }, `Failed to render ${l}: ${t.value}`) : (e = i.default) == null ? void 0 : e.call(i);
+          };
+        }
+      }));
+    }
+    function L(l, o, i) {
+      const t = [];
+      for (const [e, s] of Object.entries(l)) {
+        if (e === "default" || !(s != null && s.render) || typeof s.render != "function") continue;
+        const v = { ...o.args, ...s.args };
+        try {
+          const m = s.render(v, {
+            argTypes: o.argTypes || {}
+          });
+          t.push({
+            name: e,
+            component: C(m),
+            errorBoundary: I(`${i} / ${e}`)
+          });
+        } catch (m) {
+          console.error(`Kitchen Sink: Failed to initialize ${i}/${e}:`, m);
+        }
+      }
+      return t;
+    }
+    return j(async () => {
+      const l = await Promise.allSettled(
+        Object.values(D.loaders).map(async (i) => i())
+      ), o = [];
+      for (const i of l) {
+        if (i.status !== "fulfilled") continue;
+        const t = i.value, e = t.default;
+        if (!(e != null && e.title)) continue;
+        const s = e.title.split("/").pop(), v = z(s), m = z(e.title), S = L(t, e, s);
+        S.length !== 0 && o.push({ id: v, name: s, storyId: m, variants: S });
+      }
+      b.value = o.sort((i, t) => i.name.localeCompare(t.name)), $.value = !1;
+    }), (l, o) => {
+      const i = O("dt-scrollbar");
+      return d(), c("div", null, [
+        $.value ? (d(), c("div", K, [
+          a(r(p), { tone: "muted" }, {
+            default: n(() => [
+              f(" Loading " + y(k.itemLabel) + "... ", 1)
+            ]),
+            _: 1
+          })
+        ])) : (d(), c(g, { key: 1 }, [
+          a(r(u), {
+            class: "d-p32 d-py16 d-pb8 d-bgc-secondary d-bb d-ps-sticky d-t0 d-zi-base1 d-mtn10 d-mxn10 d-bs-card",
+            gap: "400"
+          }, {
+            default: n(() => [
+              a(r(u), {
+                class: "d-px8",
+                gap: "400",
+                direction: "row",
+                justify: "between",
+                align: "baseline"
+              }, {
+                default: n(() => [
+                  a(r(p), {
+                    as: "h1",
+                    kind: "headline",
+                    size: "3xl"
+                  }, {
+                    default: n(() => [
+                      f(y(k.title), 1)
+                    ]),
+                    _: 1
+                  }),
+                  a(r(p), {
+                    kind: "body",
+                    size: "sm"
+                  }, {
+                    default: n(() => [
+                      a(r(x), {
+                        href: k.iframeUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                      }, {
+                        default: n(() => [
+                          a(r(u), {
+                            gap: "300",
+                            direction: "row"
+                          }, {
+                            default: n(() => [
+                              o[0] || (o[0] = f(" Open in new window ", -1)),
+                              a(r(U), { size: "200" })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["href"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              T((d(), c("div", null, [
+                a(r(u), {
+                  direction: "row",
+                  gap: "400",
+                  class: "d-pb8 d-px8"
+                }, {
+                  default: n(() => [
+                    (d(!0), c(g, null, w(b.value, (t) => (d(), _(r(x), {
+                      key: t.id,
+                      href: `#ks-${t.id}`,
+                      onClick: V((e) => E(t.id), ["prevent"])
+                    }, {
+                      default: n(() => [
+                        a(r(p), {
+                          kind: "body",
+                          size: "sm",
+                          class: "d-ws-nowrap"
+                        }, {
+                          default: n(() => [
+                            f(y(t.name), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 2
+                    }, 1032, ["href", "onClick"]))), 128))
+                  ]),
+                  _: 1
+                })
+              ])), [
+                [i]
+              ])
+            ]),
+            _: 1
+          }),
+          a(r(u), { class: "d-px32" }, {
+            default: n(() => [
+              (d(!0), c(g, null, w(b.value, (t) => (d(), _(r(u), {
+                id: `ks-${t.id}`,
+                key: t.id,
+                as: "section",
+                gap: "500",
+                class: "d-py32 kitchen-sink__section"
+              }, {
+                default: n(() => [
+                  a(r(u), {
+                    gap: "400",
+                    direction: "row",
+                    justify: "between",
+                    align: "baseline"
+                  }, {
+                    default: n(() => [
+                      a(r(p), {
+                        as: "h2",
+                        kind: "headline",
+                        size: "2xl"
+                      }, {
+                        default: n(() => [
+                          f(y(t.name), 1)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      a(r(x), {
+                        href: `/?path=/story/${t.storyId}--default`
+                      }, {
+                        default: n(() => [...o[1] || (o[1] = [
+                          f(" View Story ", -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["href"])
+                    ]),
+                    _: 2
+                  }, 1024),
+                  (d(!0), c(g, null, w(t.variants, (e) => (d(), _(r(u), {
+                    key: e.name,
+                    class: "d-ba d-bc-subtle d-p16",
+                    gap: "400"
+                  }, {
+                    default: n(() => [
+                      a(r(p), {
+                        size: "xs",
+                        tone: "muted",
+                        kind: "code"
+                      }, {
+                        default: n(() => [
+                          f(y(e.name), 1)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      q("div", null, [
+                        (d(), _(B(e.errorBoundary), null, {
+                          default: n(() => [
+                            (d(), _(B(e.component)))
+                          ]),
+                          _: 2
+                        }, 1024))
+                      ])
+                    ]),
+                    _: 2
+                  }, 1024))), 128))
+                ]),
+                _: 2
+              }, 1032, ["id"]))), 128))
+            ]),
+            _: 1
+          })
+        ], 64))
+      ]);
+    };
+  }
+}, X = /* @__PURE__ */ A(P, [["__scopeId", "data-v-1a19d505"]]);
+export {
+  X as default
+};
+//# sourceMappingURL=kitchen-sink-view.js.map