@aotearoan/neon 23.0.0 → 23.0.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.
- package/dist/components/layout/page-container/NeonPageContainer.cjs.js +2 -0
- package/dist/components/layout/page-container/NeonPageContainer.cjs.js.map +1 -0
- package/dist/components/layout/page-container/NeonPageContainer.es.js +20 -0
- package/dist/components/layout/page-container/NeonPageContainer.es.js.map +1 -0
- package/dist/components/layout/page-container/NeonPageContainer.vue.cjs.js +2 -0
- package/dist/components/layout/page-container/NeonPageContainer.vue.cjs.js.map +1 -0
- package/dist/components/layout/page-container/NeonPageContainer.vue.es.js +23 -0
- package/dist/components/layout/page-container/NeonPageContainer.vue.es.js.map +1 -0
- package/dist/components/navigation/menu/NeonMenu.vue.cjs.js +1 -1
- package/dist/components/navigation/menu/NeonMenu.vue.cjs.js.map +1 -1
- package/dist/components/navigation/menu/NeonMenu.vue.es.js +2 -2
- package/dist/components/navigation/menu/NeonMenu.vue.es.js.map +1 -1
- package/dist/components/navigation/mobile-menu/NeonMobileMenu.vue.cjs.js +1 -1
- package/dist/components/navigation/mobile-menu/NeonMobileMenu.vue.cjs.js.map +1 -1
- package/dist/components/navigation/mobile-menu/NeonMobileMenu.vue.es.js +1 -1
- package/dist/components/navigation/mobile-menu/NeonMobileMenu.vue.es.js.map +1 -1
- package/dist/components/user-input/input/NeonInput.cjs.js +1 -1
- package/dist/components/user-input/input/NeonInput.cjs.js.map +1 -1
- package/dist/components/user-input/input/NeonInput.es.js +62 -69
- package/dist/components/user-input/input/NeonInput.es.js.map +1 -1
- package/dist/neon.cjs.js +1 -1
- package/dist/neon.es.js +145 -143
- package/dist/neon.es.js.map +1 -1
- package/dist/src/components/layout/page-container/NeonPageContainer.d.ts +96 -0
- package/dist/src/components/layout/page-container/NeonPageContainer.vue.d.ts +2 -0
- package/dist/src/components/navigation/dropdown-menu/NeonDropdownMenu.d.ts +33 -33
- package/dist/src/components/navigation/menu/NeonMenu.d.ts +33 -33
- package/dist/src/components/navigation/mobile-menu/NeonMobileMenu.d.ts +33 -33
- package/dist/src/components/presentation/badge/NeonBadge.d.ts +23 -65
- package/dist/src/components/presentation/dropdown/NeonDropdown.d.ts +47 -23
- package/dist/src/components/user-input/color/NeonColor.d.ts +3 -3
- package/dist/src/components/user-input/date-picker/NeonDatePicker.d.ts +38 -94
- package/dist/src/components/user-input/file/NeonFile.d.ts +29 -77
- package/dist/src/components/user-input/input/NeonInput.d.ts +3 -3
- package/dist/src/components/user-input/number/NeonNumber.d.ts +3 -3
- package/dist/src/components/user-input/password/NeonPassword.d.ts +3 -3
- package/dist/src/components/user-input/search/NeonSearch.d.ts +212 -68
- package/dist/src/components/user-input/select/NeonSelect.d.ts +51 -213
- package/dist/src/neon.d.ts +1 -0
- package/package.json +1 -1
- package/src/sass/components/_drawer.scss +2 -1
- package/src/sass/components/_dropdown.scss +1 -0
- package/src/sass/components/_field-group.scss +15 -4
- package/src/sass/components/_number.scss +6 -6
- package/src/sass/components/_page-container.scss +55 -0
- package/src/sass/components/_toggle-chip.scss +7 -6
- package/src/sass/components/components.scss +2 -1
- package/src/sass/includes/_dependencies.scss +1 -0
- package/src/sass/theme.scss +4 -0
- package/src/sass/variables.scss +5 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../presentation/icon/NeonIcon.vue.cjs.js"),n=e.defineComponent({name:"NeonPageContainer",components:{NeonIcon:t},props:{title:{type:String},hideNav:{type:Boolean,default:!1},stickyButtons:{type:Boolean,default:!1}}});module.exports=n;
|
|
2
|
+
//# sourceMappingURL=NeonPageContainer.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonPageContainer.cjs.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * NeonPageContainer is a component for the layout of basic (non-card based) page content. It is designed to be placed\n * directly inside the NeonPage <em>contents</em> slot.\n * <br />\n * <br />\n * Features include support for sticky button placement and hiding the nav bar.\n */\nexport default defineComponent({\n name: 'NeonPageContainer',\n components: {\n NeonIcon,\n },\n props: {\n /** The page title */\n title: { type: String },\n /** Hide the navbar */\n hideNav: { type: Boolean, default: false },\n /** Sticky button support on mobile */\n stickyButtons: { type: Boolean, default: false },\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon"],"mappings":"6FAUAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAEL,MAAO,CAAE,KAAM,MAAA,EAEf,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAEnC,cAAe,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,CAEnD,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { defineComponent as e } from "vue";
|
|
2
|
+
import o from "../../presentation/icon/NeonIcon.vue.es.js";
|
|
3
|
+
const a = e({
|
|
4
|
+
name: "NeonPageContainer",
|
|
5
|
+
components: {
|
|
6
|
+
NeonIcon: o
|
|
7
|
+
},
|
|
8
|
+
props: {
|
|
9
|
+
/** The page title */
|
|
10
|
+
title: { type: String },
|
|
11
|
+
/** Hide the navbar */
|
|
12
|
+
hideNav: { type: Boolean, default: !1 },
|
|
13
|
+
/** Sticky button support on mobile */
|
|
14
|
+
stickyButtons: { type: Boolean, default: !1 }
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
export {
|
|
18
|
+
a as default
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=NeonPageContainer.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonPageContainer.es.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * NeonPageContainer is a component for the layout of basic (non-card based) page content. It is designed to be placed\n * directly inside the NeonPage <em>contents</em> slot.\n * <br />\n * <br />\n * Features include support for sticky button placement and hiding the nav bar.\n */\nexport default defineComponent({\n name: 'NeonPageContainer',\n components: {\n NeonIcon,\n },\n props: {\n /** The page title */\n title: { type: String },\n /** Hide the navbar */\n hideNav: { type: Boolean, default: false },\n /** Sticky button support on mobile */\n stickyButtons: { type: Boolean, default: false },\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon"],"mappings":";;AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA,IAEL,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA,IAEf,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA,IAEnC,eAAe,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAEnD,CAAC;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const t=require("./NeonPageContainer.cjs.js"),e=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={key:0,class:"neon-page-container__title"};function s(n,i,c,l,p,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-page-container--hide-nav":n.hideNav,"neon-page-container--with-sticky-buttons":n.stickyButtons},"neon-page-container"])},[n.title?(e.openBlock(),e.createElementBlock("h1",r,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")],2)}const a=o(t,[["render",s]]);module.exports=a;
|
|
2
|
+
//# sourceMappingURL=NeonPageContainer.vue.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonPageContainer.vue.cjs.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n <div\n :class=\"{\n 'neon-page-container--hide-nav': hideNav,\n 'neon-page-container--with-sticky-buttons': stickyButtons,\n }\"\n class=\"neon-page-container\"\n >\n <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n <!-- @slot the page contents -->\n <slot name=\"default\"></slot>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_1","_toDisplayString","_renderSlot"],"mappings":"qJAQqB,MAAM,2EAPzBA,EAAAA,mBAUM,MAAA,CATH,MAAKC,EAAAA,eAAA,CAAA,iCAA2CC,EAAA,mDAA2DA,EAAA,eAItG,qBAAqB,CAAA,IAEjBA,EAAA,qBAAVF,EAAAA,mBAAoE,KAApEG,EAAoEC,EAAAA,gBAAbF,EAAA,KAAK,EAAA,CAAA,+BAE5DG,aAA4BH,EAAA,OAAA,SAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import o from "./NeonPageContainer.es.js";
|
|
2
|
+
import { openBlock as t, createElementBlock as n, normalizeClass as r, toDisplayString as a, createCommentVNode as i, renderSlot as s } from "vue";
|
|
3
|
+
import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
|
+
const l = {
|
|
5
|
+
key: 0,
|
|
6
|
+
class: "neon-page-container__title"
|
|
7
|
+
};
|
|
8
|
+
function p(e, d, m, f, u, _) {
|
|
9
|
+
return t(), n("div", {
|
|
10
|
+
class: r([{
|
|
11
|
+
"neon-page-container--hide-nav": e.hideNav,
|
|
12
|
+
"neon-page-container--with-sticky-buttons": e.stickyButtons
|
|
13
|
+
}, "neon-page-container"])
|
|
14
|
+
}, [
|
|
15
|
+
e.title ? (t(), n("h1", l, a(e.title), 1)) : i("", !0),
|
|
16
|
+
s(e.$slots, "default")
|
|
17
|
+
], 2);
|
|
18
|
+
}
|
|
19
|
+
const $ = /* @__PURE__ */ c(o, [["render", p]]);
|
|
20
|
+
export {
|
|
21
|
+
$ as default
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=NeonPageContainer.vue.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonPageContainer.vue.es.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n <div\n :class=\"{\n 'neon-page-container--hide-nav': hideNav,\n 'neon-page-container--with-sticky-buttons': stickyButtons,\n }\"\n class=\"neon-page-container\"\n >\n <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n <!-- @slot the page contents -->\n <slot name=\"default\"></slot>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_1","_toDisplayString","_renderSlot"],"mappings":";;;;;EAQqB,OAAM;;;cAPzBA,EAUM,OAAA;AAAA,IATH,OAAKC,EAAA,CAAA;AAAA,uCAA2CC,EAAA;AAAA,kDAA2DA,EAAA;AAAA,OAItG,qBAAqB,CAAA;AAAA;IAEjBA,EAAA,cAAVF,EAAoE,MAApEG,GAAoEC,EAAbF,EAAA,KAAK,GAAA,CAAA;IAE5DG,EAA4BH,EAAA,QAAA,SAAA;AAAA;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const a=require("./NeonMenu.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={ref:"menuWrapper",class:"neon-menu__wrapper"},d=["onClick"],u={class:"neon-menu__item-label"};function p(o,_,k,y,b,h){const l=e.resolveComponent("neon-dropdown-menu"),s=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-link");return e.openBlock(),e.createElementBlock("nav",i,[e.createElementVNode("ul",{class:e.normalizeClass([[`neon-menu--${o.color}`,`neon-menu--${o.size}`],"neon-menu no-style"]),role:"menubar"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menu,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,ref_for:!0,ref:"menuItem",class:e.normalizeClass([{"neon-menu__item--disabled":n.disabled},"neon-menu__item"])},[n.children?(e.openBlock(),e.createBlock(l,{key:`${n.key}DropdownMenu`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),color:o.color,disabled:n.disabled,icon:n.icon,label:n.label,model:n.children,openOnHover:!n.disabled,size:o.size,"dropdown-style":"text"},null,8,["class","color","disabled","icon","label","model","openOnHover","size"])):(e.openBlock(),e.createBlock(r,{key:`${n.key}Link`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),href:n.href,"no-style":!0,tabindex:n.disabled?-1:0,"outline-style":"none",
|
|
1
|
+
"use strict";const a=require("./NeonMenu.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={ref:"menuWrapper",class:"neon-menu__wrapper"},d=["onClick"],u={class:"neon-menu__item-label"};function p(o,_,k,y,b,h){const l=e.resolveComponent("neon-dropdown-menu"),s=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-link");return e.openBlock(),e.createElementBlock("nav",i,[e.createElementVNode("ul",{class:e.normalizeClass([[`neon-menu--${o.color}`,`neon-menu--${o.size}`],"neon-menu no-style"]),role:"menubar"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menu,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,ref_for:!0,ref:"menuItem",class:e.normalizeClass([{"neon-menu__item--disabled":n.disabled},"neon-menu__item"]),role:"menuitem"},[n.children?(e.openBlock(),e.createBlock(l,{key:`${n.key}DropdownMenu`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),color:o.color,disabled:n.disabled,icon:n.icon,label:n.label,model:n.children,openOnHover:!n.disabled,size:o.size,"dropdown-style":"text"},null,8,["class","color","disabled","icon","label","model","openOnHover","size"])):(e.openBlock(),e.createBlock(r,{key:`${n.key}Link`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),href:n.href,"no-style":!0,tabindex:n.disabled?-1:0,"outline-style":"none",onKeydown:e.withKeys(c=>!n.disabled&&o.onClick(n.key),["enter"])},{default:e.withCtx(()=>[e.createElementVNode("div",{class:"neon-menu__link-container",tabindex:"-1",onClick:c=>!n.disabled&&o.onClick(n.key)},[n.icon?(e.openBlock(),e.createBlock(s,{key:`${n.key}LinkIcon`,name:n.icon,class:"neon-menu__item-icon",color:"neutral"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",u,e.toDisplayString(n.label),1)],8,d)]),_:2},1032,["class","href","tabindex","onKeydown"]))],2))),128))],2),e.createVNode(l,{class:e.normalizeClass([{"neon-menu__responsive-menu--hidden":o.responsiveMenuItems.length===0},"neon-menu__responsive-menu"]),color:o.color,indicator:!1,model:o.responsiveMenuItems,openOnHover:!0,size:o.size,"dropdown-style":"text",icon:"ellipsis",placement:"bottom-right"},null,8,["class","color","model","size"])],512)}const m=t(a,[["render",p]]);module.exports=m;
|
|
2
2
|
//# sourceMappingURL=NeonMenu.vue.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonMenu.vue.cjs.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n class=\"neon-menu__item\"\n >\n <neon-dropdown-menu\n v-if=\"item.children\"\n :key=\"`${item.key}DropdownMenu`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :color=\"color\"\n :disabled=\"item.disabled\"\n :icon=\"item.icon\"\n :label=\"item.label\"\n :model=\"item.children\"\n :openOnHover=\"!item.disabled\"\n :size=\"size\"\n dropdown-style=\"text\"\n />\n <neon-link\n v-else\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :href=\"item.href\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n
|
|
1
|
+
{"version":3,"file":"NeonMenu.vue.cjs.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n class=\"neon-menu__item\"\n role=\"menuitem\"\n >\n <neon-dropdown-menu\n v-if=\"item.children\"\n :key=\"`${item.key}DropdownMenu`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :color=\"color\"\n :disabled=\"item.disabled\"\n :icon=\"item.icon\"\n :label=\"item.label\"\n :model=\"item.children\"\n :openOnHover=\"!item.disabled\"\n :size=\"size\"\n dropdown-style=\"text\"\n />\n <neon-link\n v-else\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :href=\"item.href\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n @keydown.enter=\"!item.disabled && onClick(item.key)\"\n >\n <div class=\"neon-menu__link-container\" tabindex=\"-1\" @click=\"!item.disabled && onClick(item.key)\">\n <neon-icon\n v-if=\"item.icon\"\n :key=\"`${item.key}LinkIcon`\"\n :name=\"item.icon\"\n class=\"neon-menu__item-icon\"\n color=\"neutral\"\n />\n <span class=\"neon-menu__item-label\">{{ item.label }}</span>\n </div>\n </neon-link>\n </li>\n </ul>\n <neon-dropdown-menu\n :class=\"{ 'neon-menu__responsive-menu--hidden': responsiveMenuItems.length === 0 }\"\n :color=\"color\"\n :indicator=\"false\"\n :model=\"responsiveMenuItems\"\n :openOnHover=\"true\"\n :size=\"size\"\n class=\"neon-menu__responsive-menu\"\n dropdown-style=\"text\"\n icon=\"ellipsis\"\n placement=\"bottom-right\"\n />\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMenu.ts\" />\n"],"names":["_hoisted_3","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_dropdown_menu","_component_neon_link","_withKeys","$event","_component_neon_icon","_toDisplayString","_createVNode"],"mappings":"sIACO,IAAI,cAAc,MAAM,oCAyCbA,EAAA,CAAA,MAAM,uBAAuB,+IAzC7C,OAAAC,YAAA,EAAAC,qBA0DM,MA1DNC,EA0DM,CAzDJC,EAAAA,mBA4CK,KAAA,CA5CA,MAAKC,EAAAA,eAAA,CAAA,CAAA,cAAiBC,EAAA,KAAK,GAAA,cAAkBA,EAAA,IAAI,IAAW,oBAAoB,CAAA,EAAC,KAAK,6BACzFJ,EAAAA,mBA0CKK,EAAAA,SAAA,KAAAC,EAAAA,WAzCYF,EAAA,KAARG,kBADTP,EAAAA,mBA0CK,KAAA,CAxCF,IAAKO,EAAK,eACX,IAAI,WACH,MAAKJ,EAAAA,eAAA,CAAA,CAAA,4BAAiCI,EAAK,QAAQ,EAC9C,iBAAiB,CAAA,EACvB,KAAK,aAGGA,EAAK,wBADbC,EAAAA,YAYEC,EAAA,CAVC,IAAG,GAAKF,EAAK,GAAG,eAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BC,EAAA,aAAaG,EAAK,IAAI,EAAA,EACrD,MAAOH,EAAA,MACP,SAAUG,EAAK,SACf,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,MAAOA,EAAK,SACZ,YAAW,CAAGA,EAAK,SACnB,KAAMH,EAAA,KACP,iBAAe,yGAEjBI,EAAAA,YAoBYE,EAAA,CAlBT,IAAG,GAAKH,EAAK,GAAG,OAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BC,EAAA,aAAaG,EAAK,IAAI,EAAA,EACrD,KAAMA,EAAK,KACX,WAAU,GACV,SAAUA,EAAK,SAAQ,GAAA,EACxB,gBAAc,OACb,UAAOI,EAAAA,SAAAC,GAAA,CAASL,EAAK,UAAYH,EAAA,QAAQG,EAAK,GAAG,EAAA,CAAA,OAAA,CAAA,sBAElD,IASM,CATNL,EAAAA,mBASM,MAAA,CATD,MAAM,4BAA4B,SAAS,KAAM,QAAKU,GAAA,CAAGL,EAAK,UAAYH,EAAA,QAAQG,EAAK,GAAG,IAErFA,EAAK,oBADbC,EAAAA,YAMEK,EAAA,CAJC,IAAG,GAAKN,EAAK,GAAG,WAChB,KAAMA,EAAK,KACZ,MAAM,uBACN,MAAM,yDAERL,EAAAA,mBAA2D,OAA3DJ,EAA2DgB,EAAAA,gBAApBP,EAAK,KAAK,EAAA,CAAA,8EAKzDQ,EAAAA,YAWEN,EAAA,CAVC,MAAKN,EAAAA,eAAA,CAAA,CAAA,qCAA0CC,EAAA,oBAAoB,YAM9D,4BAA4B,CAAA,EALjC,MAAOA,EAAA,MACP,UAAW,GACX,MAAOA,EAAA,oBACP,YAAa,GACb,KAAMA,EAAA,KAEP,iBAAe,OACf,KAAK,WACL,UAAU"}
|
|
@@ -16,7 +16,8 @@ function C(n, M, g, I, N, B) {
|
|
|
16
16
|
key: e.key,
|
|
17
17
|
ref_for: !0,
|
|
18
18
|
ref: "menuItem",
|
|
19
|
-
class: l([{ "neon-menu__item--disabled": e.disabled }, "neon-menu__item"])
|
|
19
|
+
class: l([{ "neon-menu__item--disabled": e.disabled }, "neon-menu__item"]),
|
|
20
|
+
role: "menuitem"
|
|
20
21
|
}, [
|
|
21
22
|
e.children ? (o(), i(c, {
|
|
22
23
|
key: `${e.key}DropdownMenu`,
|
|
@@ -36,7 +37,6 @@ function C(n, M, g, I, N, B) {
|
|
|
36
37
|
"no-style": !0,
|
|
37
38
|
tabindex: e.disabled ? -1 : 0,
|
|
38
39
|
"outline-style": "none",
|
|
39
|
-
role: "menuitem",
|
|
40
40
|
onKeydown: k((u) => !e.disabled && n.onClick(e.key), ["enter"])
|
|
41
41
|
}, {
|
|
42
42
|
default: b(() => [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonMenu.vue.es.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n class=\"neon-menu__item\"\n >\n <neon-dropdown-menu\n v-if=\"item.children\"\n :key=\"`${item.key}DropdownMenu`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :color=\"color\"\n :disabled=\"item.disabled\"\n :icon=\"item.icon\"\n :label=\"item.label\"\n :model=\"item.children\"\n :openOnHover=\"!item.disabled\"\n :size=\"size\"\n dropdown-style=\"text\"\n />\n <neon-link\n v-else\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :href=\"item.href\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n
|
|
1
|
+
{"version":3,"file":"NeonMenu.vue.es.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n class=\"neon-menu__item\"\n role=\"menuitem\"\n >\n <neon-dropdown-menu\n v-if=\"item.children\"\n :key=\"`${item.key}DropdownMenu`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :color=\"color\"\n :disabled=\"item.disabled\"\n :icon=\"item.icon\"\n :label=\"item.label\"\n :model=\"item.children\"\n :openOnHover=\"!item.disabled\"\n :size=\"size\"\n dropdown-style=\"text\"\n />\n <neon-link\n v-else\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n :href=\"item.href\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n @keydown.enter=\"!item.disabled && onClick(item.key)\"\n >\n <div class=\"neon-menu__link-container\" tabindex=\"-1\" @click=\"!item.disabled && onClick(item.key)\">\n <neon-icon\n v-if=\"item.icon\"\n :key=\"`${item.key}LinkIcon`\"\n :name=\"item.icon\"\n class=\"neon-menu__item-icon\"\n color=\"neutral\"\n />\n <span class=\"neon-menu__item-label\">{{ item.label }}</span>\n </div>\n </neon-link>\n </li>\n </ul>\n <neon-dropdown-menu\n :class=\"{ 'neon-menu__responsive-menu--hidden': responsiveMenuItems.length === 0 }\"\n :color=\"color\"\n :indicator=\"false\"\n :model=\"responsiveMenuItems\"\n :openOnHover=\"true\"\n :size=\"size\"\n class=\"neon-menu__responsive-menu\"\n dropdown-style=\"text\"\n icon=\"ellipsis\"\n placement=\"bottom-right\"\n />\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMenu.ts\" />\n"],"names":["_hoisted_3","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_dropdown_menu","_component_neon_link","_withKeys","$event","_component_neon_icon","_toDisplayString","_createVNode"],"mappings":";;;;EACO,KAAI;AAAA,EAAc,OAAM;oBAyCbA,IAAA,EAAA,OAAM,wBAAuB;;;AAzC7C,SAAAC,EAAA,GAAAC,EA0DM,OA1DNC,GA0DM;AAAA,IAzDJC,EA4CK,MAAA;AAAA,MA5CA,OAAKC,EAAA,CAAA,CAAA,cAAiBC,EAAA,KAAK,IAAA,cAAkBA,EAAA,IAAI,KAAW,oBAAoB,CAAA;AAAA,MAAC,MAAK;AAAA;cACzFJ,EA0CKK,GAAA,MAAAC,EAzCYF,EAAA,MAAI,CAAZG,YADTP,EA0CK,MAAA;AAAA,QAxCF,KAAKO,EAAK;AAAA;QACX,KAAI;AAAA,QACH,OAAKJ,EAAA,CAAA,EAAA,6BAAiCI,EAAK,SAAQ,GAC9C,iBAAiB,CAAA;AAAA,QACvB,MAAK;AAAA;QAGGA,EAAK,iBADbC,EAYEC,GAAA;AAAA,UAVC,KAAG,GAAKF,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BC,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UACrD,OAAOH,EAAA;AAAA,UACP,UAAUG,EAAK;AAAA,UACf,MAAMA,EAAK;AAAA,UACX,OAAOA,EAAK;AAAA,UACZ,OAAOA,EAAK;AAAA,UACZ,aAAW,CAAGA,EAAK;AAAA,UACnB,MAAMH,EAAA;AAAA,UACP,kBAAe;AAAA,8GAEjBI,EAoBYE,GAAA;AAAA,UAlBT,KAAG,GAAKH,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BC,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UACrD,MAAMA,EAAK;AAAA,UACX,YAAU;AAAA,UACV,UAAUA,EAAK,WAAQ,KAAA;AAAA,UACxB,iBAAc;AAAA,UACb,WAAOI,EAAA,CAAAC,MAAA,CAASL,EAAK,YAAYH,EAAA,QAAQG,EAAK,GAAG,GAAA,CAAA,OAAA,CAAA;AAAA;qBAElD,MASM;AAAA,YATNL,EASM,OAAA;AAAA,cATD,OAAM;AAAA,cAA4B,UAAS;AAAA,cAAM,SAAK,CAAAU,MAAA,CAAGL,EAAK,YAAYH,EAAA,QAAQG,EAAK,GAAG;AAAA;cAErFA,EAAK,aADbC,EAMEK,GAAA;AAAA,gBAJC,KAAG,GAAKN,EAAK,GAAG;AAAA,gBAChB,MAAMA,EAAK;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA;cAERL,EAA2D,QAA3DJ,GAA2DgB,EAApBP,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;;IAKzDQ,EAWEN,GAAA;AAAA,MAVC,OAAKN,EAAA,CAAA,EAAA,sCAA0CC,EAAA,oBAAoB,gBAM9D,4BAA4B,CAAA;AAAA,MALjC,OAAOA,EAAA;AAAA,MACP,WAAW;AAAA,MACX,OAAOA,EAAA;AAAA,MACP,aAAa;AAAA,MACb,MAAMA,EAAA;AAAA,MAEP,kBAAe;AAAA,MACf,MAAK;AAAA,MACL,WAAU;AAAA;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("./NeonMobileMenu.cjs.js"),e=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),c={ref:"menuWrapper",class:"neon-mobile-menu__wrapper"},i=["onClick"],u={class:"neon-mobile-menu__item-label"};function d(o,m,k,b,p,y){const l=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-link");return e.openBlock(),e.createElementBlock("nav",c,[e.createElementVNode("ul",{class:e.normalizeClass([[`neon-mobile-menu--${o.color}`],"neon-mobile-menu no-style"]),role:"menubar"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menu,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,ref_for:!0,ref:"menuItem",class:e.normalizeClass([{"neon-mobile-menu__item--disabled":n.disabled},"neon-mobile-menu__item"]),tabindex:"-1"},[(e.openBlock(),e.createBlock(r,{key:`${n.key}Link`,class:e.normalizeClass({"router-link-active":n.href&&o.routeMatches(n.href)}),href:n.disabled?null:n.href,"no-style":!0,tabindex:n.disabled?-1:0,"outline-style":"none",
|
|
1
|
+
"use strict";const t=require("./NeonMobileMenu.cjs.js"),e=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),c={ref:"menuWrapper",class:"neon-mobile-menu__wrapper"},i=["onClick"],u={class:"neon-mobile-menu__item-label"};function d(o,m,k,b,p,y){const l=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-link");return e.openBlock(),e.createElementBlock("nav",c,[e.createElementVNode("ul",{class:e.normalizeClass([[`neon-mobile-menu--${o.color}`],"neon-mobile-menu no-style"]),role:"menubar"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menu,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,ref_for:!0,ref:"menuItem",class:e.normalizeClass([{"neon-mobile-menu__item--disabled":n.disabled},"neon-mobile-menu__item"]),role:"menuitem",tabindex:"-1"},[(e.openBlock(),e.createBlock(r,{key:`${n.key}Link`,class:e.normalizeClass({"router-link-active":n.href&&o.routeMatches(n.href)}),href:n.disabled?null:n.href,"no-style":!0,tabindex:n.disabled?-1:0,"outline-style":"none",onKeydown:e.withKeys(s=>!n.disabled&&o.onClick(n.key),["enter"])},{default:e.withCtx(()=>[e.createElementVNode("div",{class:"neon-mobile-menu__link-container",tabindex:"-1",onClick:s=>!n.disabled&&o.onClick(n.key)},[n.icon?(e.openBlock(),e.createBlock(l,{key:`${n.key}LinkIcon`,disabled:n.disabled,name:n.icon,class:"neon-mobile-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",u,e.toDisplayString(n.label),1)],8,i)]),_:2},1032,["class","href","tabindex","onKeydown"]))],2))),128))],2)],512)}const _=a(t,[["render",d]]);module.exports=_;
|
|
2
2
|
//# sourceMappingURL=NeonMobileMenu.vue.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonMobileMenu.vue.cjs.js","sources":["../../../../src/components/navigation/mobile-menu/NeonMobileMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-mobile-menu__wrapper\">\n <ul :class=\"[`neon-mobile-menu--${color}`]\" class=\"neon-mobile-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-mobile-menu__item--disabled': item.disabled }\"\n class=\"neon-mobile-menu__item\"\n tabindex=\"-1\"\n >\n <neon-link\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': item.href && routeMatches(item.href) }\"\n :href=\"!item.disabled ? item.href : null\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n
|
|
1
|
+
{"version":3,"file":"NeonMobileMenu.vue.cjs.js","sources":["../../../../src/components/navigation/mobile-menu/NeonMobileMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-mobile-menu__wrapper\">\n <ul :class=\"[`neon-mobile-menu--${color}`]\" class=\"neon-mobile-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-mobile-menu__item--disabled': item.disabled }\"\n class=\"neon-mobile-menu__item\"\n role=\"menuitem\"\n tabindex=\"-1\"\n >\n <neon-link\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': item.href && routeMatches(item.href) }\"\n :href=\"!item.disabled ? item.href : null\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n @keydown.enter=\"!item.disabled && onClick(item.key)\"\n >\n <div class=\"neon-mobile-menu__link-container\" tabindex=\"-1\" @click=\"!item.disabled && onClick(item.key)\">\n <neon-icon\n v-if=\"item.icon\"\n :key=\"`${item.key}LinkIcon`\"\n :disabled=\"item.disabled\"\n :name=\"item.icon\"\n class=\"neon-mobile-menu__item-icon\"\n />\n <span class=\"neon-mobile-menu__item-label\">{{ item.label }}</span>\n </div>\n </neon-link>\n </li>\n </ul>\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMobileMenu.ts\" />\n"],"names":["_hoisted_3","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_link","_withKeys","$event","_component_neon_icon","_toDisplayString"],"mappings":"4IACO,IAAI,cAAc,MAAM,2CA4BbA,EAAA,CAAA,MAAM,8BAA8B,oGA5BpD,OAAAC,YAAA,EAAAC,qBAiCM,MAjCNC,EAiCM,CAhCJC,EAAAA,mBA+BK,KAAA,CA/BA,MAAKC,EAAAA,eAAA,CAAA,CAAA,qBAAwBC,EAAA,KAAK,EAAA,EAAW,2BAA2B,CAAA,EAAC,KAAK,6BACjFJ,EAAAA,mBA6BKK,EAAAA,SAAA,KAAAC,EAAAA,WA5BYF,EAAA,KAARG,kBADTP,EAAAA,mBA6BK,KAAA,CA3BF,IAAKO,EAAK,eACX,IAAI,WACH,MAAKJ,EAAAA,eAAA,CAAA,CAAA,mCAAwCI,EAAK,QAAQ,EACrD,wBAAwB,CAAA,EAC9B,KAAK,WACL,SAAS,sBAETC,EAAAA,YAmBYC,EAAA,CAlBT,IAAG,GAAKF,EAAK,GAAG,OAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BI,EAAK,MAAQH,EAAA,aAAaG,EAAK,IAAI,EAAA,EAClE,KAAOA,EAAK,SAAoB,KAATA,EAAK,KAC5B,WAAU,GACV,SAAUA,EAAK,SAAQ,GAAA,EACxB,gBAAc,OACb,UAAOG,EAAAA,SAAAC,GAAA,CAASJ,EAAK,UAAYH,EAAA,QAAQG,EAAK,GAAG,EAAA,CAAA,OAAA,CAAA,sBAElD,IASM,CATNL,EAAAA,mBASM,MAAA,CATD,MAAM,mCAAmC,SAAS,KAAM,QAAKS,GAAA,CAAGJ,EAAK,UAAYH,EAAA,QAAQG,EAAK,GAAG,IAE5FA,EAAK,oBADbC,EAAAA,YAMEI,EAAA,CAJC,IAAG,GAAKL,EAAK,GAAG,WAChB,SAAUA,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,wFAERL,EAAAA,mBAAkE,OAAlEJ,EAAkEe,EAAAA,gBAApBN,EAAK,KAAK,EAAA,CAAA"}
|
|
@@ -17,6 +17,7 @@ function v(n, w, x, B, K, L) {
|
|
|
17
17
|
ref_for: !0,
|
|
18
18
|
ref: "menuItem",
|
|
19
19
|
class: s([{ "neon-mobile-menu__item--disabled": e.disabled }, "neon-mobile-menu__item"]),
|
|
20
|
+
role: "menuitem",
|
|
20
21
|
tabindex: "-1"
|
|
21
22
|
}, [
|
|
22
23
|
(o(), i(c, {
|
|
@@ -26,7 +27,6 @@ function v(n, w, x, B, K, L) {
|
|
|
26
27
|
"no-style": !0,
|
|
27
28
|
tabindex: e.disabled ? -1 : 0,
|
|
28
29
|
"outline-style": "none",
|
|
29
|
-
role: "menuitem",
|
|
30
30
|
onKeydown: b((d) => !e.disabled && n.onClick(e.key), ["enter"])
|
|
31
31
|
}, {
|
|
32
32
|
default: k(() => [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonMobileMenu.vue.es.js","sources":["../../../../src/components/navigation/mobile-menu/NeonMobileMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-mobile-menu__wrapper\">\n <ul :class=\"[`neon-mobile-menu--${color}`]\" class=\"neon-mobile-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-mobile-menu__item--disabled': item.disabled }\"\n class=\"neon-mobile-menu__item\"\n tabindex=\"-1\"\n >\n <neon-link\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': item.href && routeMatches(item.href) }\"\n :href=\"!item.disabled ? item.href : null\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n
|
|
1
|
+
{"version":3,"file":"NeonMobileMenu.vue.es.js","sources":["../../../../src/components/navigation/mobile-menu/NeonMobileMenu.vue"],"sourcesContent":["<template>\n <nav ref=\"menuWrapper\" class=\"neon-mobile-menu__wrapper\">\n <ul :class=\"[`neon-mobile-menu--${color}`]\" class=\"neon-mobile-menu no-style\" role=\"menubar\">\n <li\n v-for=\"item in menu\"\n :key=\"item.key\"\n ref=\"menuItem\"\n :class=\"{ 'neon-mobile-menu__item--disabled': item.disabled }\"\n class=\"neon-mobile-menu__item\"\n role=\"menuitem\"\n tabindex=\"-1\"\n >\n <neon-link\n :key=\"`${item.key}Link`\"\n :class=\"{ 'router-link-active': item.href && routeMatches(item.href) }\"\n :href=\"!item.disabled ? item.href : null\"\n :no-style=\"true\"\n :tabindex=\"item.disabled ? -1 : 0\"\n outline-style=\"none\"\n @keydown.enter=\"!item.disabled && onClick(item.key)\"\n >\n <div class=\"neon-mobile-menu__link-container\" tabindex=\"-1\" @click=\"!item.disabled && onClick(item.key)\">\n <neon-icon\n v-if=\"item.icon\"\n :key=\"`${item.key}LinkIcon`\"\n :disabled=\"item.disabled\"\n :name=\"item.icon\"\n class=\"neon-mobile-menu__item-icon\"\n />\n <span class=\"neon-mobile-menu__item-label\">{{ item.label }}</span>\n </div>\n </neon-link>\n </li>\n </ul>\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMobileMenu.ts\" />\n"],"names":["_hoisted_3","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_link","_withKeys","$event","_component_neon_icon","_toDisplayString"],"mappings":";;;;EACO,KAAI;AAAA,EAAc,OAAM;oBA4BbA,IAAA,EAAA,OAAM,+BAA8B;;;AA5BpD,SAAAC,EAAA,GAAAC,EAiCM,OAjCNC,GAiCM;AAAA,IAhCJC,EA+BK,MAAA;AAAA,MA/BA,OAAKC,EAAA,CAAA,CAAA,qBAAwBC,EAAA,KAAK,EAAA,GAAW,2BAA2B,CAAA;AAAA,MAAC,MAAK;AAAA;cACjFJ,EA6BKK,GAAA,MAAAC,EA5BYF,EAAA,MAAI,CAAZG,YADTP,EA6BK,MAAA;AAAA,QA3BF,KAAKO,EAAK;AAAA;QACX,KAAI;AAAA,QACH,OAAKJ,EAAA,CAAA,EAAA,oCAAwCI,EAAK,SAAQ,GACrD,wBAAwB,CAAA;AAAA,QAC9B,MAAK;AAAA,QACL,UAAS;AAAA;cAETC,EAmBYC,GAAA;AAAA,UAlBT,KAAG,GAAKF,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BI,EAAK,QAAQH,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UAClE,MAAOA,EAAK,WAAoB,OAATA,EAAK;AAAA,UAC5B,YAAU;AAAA,UACV,UAAUA,EAAK,WAAQ,KAAA;AAAA,UACxB,iBAAc;AAAA,UACb,WAAOG,EAAA,CAAAC,MAAA,CAASJ,EAAK,YAAYH,EAAA,QAAQG,EAAK,GAAG,GAAA,CAAA,OAAA,CAAA;AAAA;qBAElD,MASM;AAAA,YATNL,EASM,OAAA;AAAA,cATD,OAAM;AAAA,cAAmC,UAAS;AAAA,cAAM,SAAK,CAAAS,MAAA,CAAGJ,EAAK,YAAYH,EAAA,QAAQG,EAAK,GAAG;AAAA;cAE5FA,EAAK,aADbC,EAMEI,GAAA;AAAA,gBAJC,KAAG,GAAKL,EAAK,GAAG;AAAA,gBAChB,UAAUA,EAAK;AAAA,gBACf,MAAMA,EAAK;AAAA,gBACZ,OAAM;AAAA;cAERL,EAAkE,QAAlEJ,GAAkEe,EAApBN,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const o=require("vue"),q=require("../../../common/enums/NeonInputType.cjs.js"),l=require("../../../common/enums/NeonState.cjs.js"),F=require("../../../common/enums/NeonSize.cjs.js"),i=require("../../../common/enums/NeonFunctionalColor.cjs.js"),w=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../../../common/utils/NeonDebounceUtils.cjs.js"),z=require("../../../common/enums/NeonInputMode.cjs.js"),D=o.defineComponent({name:"NeonInput",components:{NeonIcon:w},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:q.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:F.NeonSize.Medium},color:{type:String,default:i.NeonFunctionalColor.Primary},inputmode:{type:String,default:z.NeonInputMode.Text},autocomplete:{type:String,default:"on"},state:{type:String,default:l.NeonState.Ready},rows:{type:Number,default:null},icon:{type:String,default:null},iconReadonly:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},tabindex:{type:Number,default:0},disabled:{type:Boolean,default:!1},stateHighlight:{type:Boolean,default:!0},stateIcon:{type:Boolean,default:!0},maxlength:{type:Number,default:null},maxlengthLabel:{type:String,default:"No characters left | 1 character left | {count} characters left"},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:u,expose:m}){const g=o.useAttrs(),c=o.ref(null),r=o.ref(!1),h=o.computed(()=>{const{onBlur:t,onFocus:n,onIconClick:a,...B}=g;return B}),d=L.NeonDebounceUtils.debounce(t=>{u("update:modelValue",t)},e.debounce),s=o.computed(()=>{var t;switch(e.state){case l.NeonState.Loading:return"loading";case l.NeonState.Success:return e.stateIcon?"check":void 0;case l.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&(((t=e.modelValue)==null?void 0:t.length)||0)>0?"times":void 0}}),y=o.computed(()=>{var t;return s.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&(((t=e.modelValue)==null?void 0:t.length)||0)>0)}),N=o.computed(()=>{switch(e.state){case l.NeonState.Success:return i.NeonFunctionalColor.Success;case l.NeonState.Error:return i.NeonFunctionalColor.Error;case l.NeonState.Loading:return e.color;default:return i.NeonFunctionalColor.LowContrast}}),S=o.computed(()=>{var t;if(e.maxlength&&e.maxlength>0){const n=e.maxlengthLabel.split(" | "),a=e.maxlength-(((t=e.modelValue)==null?void 0:t.length)||0);switch(a){case 0:return n[0];case 1:return n[1];default:return n[2].replace("{count}",`${a}`)}}return null}),f=()=>{var t;(t=c.value)==null||t.focus()},b=()=>{var t;(t=c.value)==null||t.click()},x=()=>{r.value=!0,u("focus")},V=()=>{r.value=!1,u("blur")},v=t=>{e.disabled||(e.icon?u("icon-click"):(d(""),setTimeout(f)),t.preventDefault(),t.stopPropagation())},I=t=>{const n=t.target.value,a=e.maxlength&&n.length>e.maxlength?n.substring(0,e.maxlength):n;e.modelValue!==a&&d(a)},C=t=>{var n;t.key!=="Backspace"&&e.maxlength&&e.modelValue&&(((n=e.modelValue)==null?void 0:n.length)||0)>=e.maxlength&&t.preventDefault()},k=o.computed(()=>e.placeholder||"");return m({neonInput:c}),{neonInput:c,focused:r,sanitizedAttributes:h,iconVisible:y,iconName:s,iconColor:N,computedPlaceholder:k,counterLabel:S,focus:f,click:b,onFocus:x,onBlur:V,iconClicked:v,changeValue:I,onKeyDown:C}}});module.exports=D;
|
|
2
2
|
//# sourceMappingURL=NeonInput.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n name: 'NeonInput',\n components: {\n NeonIcon,\n },\n props: {\n /**\n * The id the input\n */\n id: { type: String, default: null },\n /**\n * The value of the input\n */\n modelValue: { type: String, default: null },\n /**\n * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n */\n type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n /**\n * Placeholder text to display in the input\n */\n placeholder: { type: String, default: null },\n /**\n * Size of the input\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * Color of the input\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n /**\n * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n */\n inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n /**\n * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n */\n autocomplete: { type: String as () => NeonInputMode, default: 'on' },\n /**\n * The state of the input\n */\n state: { type: String as () => NeonState, default: NeonState.Ready },\n /**\n * The number of rows to display in the case of a textarea\n */\n rows: { type: Number, default: null },\n /**\n * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n */\n icon: { type: String, default: null },\n /**\n * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n */\n iconReadonly: { type: Boolean, default: false },\n /**\n * Hide the icon button, e.g. the X button to clear the input's contents.\n */\n hideIcon: { type: Boolean, default: false },\n /**\n * Tabindex to assign to the input.\n */\n tabindex: { type: Number, default: 0 },\n /**\n * The disabled state of the input\n */\n disabled: { type: Boolean, default: false },\n /**\n * When the state is success or error, display the field with the state color indicator, e.g. border or background\n * color.\n */\n stateHighlight: { type: Boolean, default: true },\n /**\n * When the state is success or error, display the state icon.\n */\n stateIcon: { type: Boolean, default: true },\n /**\n * The character limit for a textarea.\n */\n maxlength: { type: Number, default: null },\n /**\n * The label template for the character limit. This is a string in the vue-i18n Pluralization format with a\n * <em>{count}</em> placeholder.\n */\n maxlengthLabel: { type: String, default: 'No characters left | 1 character left | {count} characters left' },\n /**\n * Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).\n */\n debounce: { type: Number, default: undefined },\n },\n emits: [\n /**\n * Emitted when the input has gained focus\n * @type {void}\n */\n 'focus',\n /**\n * Emitted when the input has lost focus\n * @type {void}\n */\n 'blur',\n /**\n * Emitted when the icon is clicked\n * @type {void}\n */\n 'icon-click',\n /**\n * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n * @type {string} the contents of the input\n */\n 'update:modelValue',\n ],\n setup(props, { emit, expose }) {\n const attrs = useAttrs();\n const neonInput = ref<HTMLElement | null>(null);\n const focused = ref(false);\n\n const sanitizedAttributes = computed(() => {\n const {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onBlur,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onFocus,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onIconClick,\n ...sanitized\n } = attrs;\n\n return sanitized;\n });\n\n const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n emit('update:modelValue', value);\n }, props.debounce);\n\n const iconName = computed(() => {\n switch (props.state) {\n case NeonState.Loading:\n return 'loading';\n case NeonState.Success:\n return props.stateIcon ? 'check' : undefined;\n case NeonState.Error:\n return props.stateIcon ? 'times' : undefined;\n default:\n if (props.icon) {\n return props.icon;\n } else if (props.modelValue && props.modelValue.length > 0) {\n return 'times';\n }\n\n return undefined;\n }\n });\n\n const iconVisible = computed(() => {\n return (\n iconName.value &&\n !props.hideIcon &&\n (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n );\n });\n\n const iconColor = computed(() => {\n switch (props.state) {\n case NeonState.Success:\n return NeonFunctionalColor.Success;\n case NeonState.Error:\n return NeonFunctionalColor.Error;\n case NeonState.Loading:\n return props.color;\n default:\n return NeonFunctionalColor.LowContrast;\n }\n });\n\n const counterLabel = computed<string | null>(() => {\n if (props.maxlength && props.maxlength > 0) {\n const templates = props.maxlengthLabel.split(' | ');\n const remainingChars = props.maxlength - props.modelValue.length;\n switch (remainingChars) {\n case 0:\n return templates[0];\n case 1:\n return templates[1];\n default:\n return templates[2].replace('{count}', `${remainingChars}`);\n }\n }\n return null;\n });\n\n const focus = () => {\n neonInput.value?.focus();\n };\n\n const click = () => {\n neonInput.value?.click();\n };\n\n const onFocus = () => {\n focused.value = true;\n emit('focus');\n };\n\n const onBlur = () => {\n focused.value = false;\n emit('blur');\n };\n\n const iconClicked = ($event: Event) => {\n if (!props.disabled) {\n if (props.icon) {\n emit('icon-click');\n } else {\n emitModelValue('');\n setTimeout(focus);\n }\n $event.preventDefault();\n $event.stopPropagation();\n }\n };\n\n const changeValue = (event: InputEvent) => {\n const val = (event.target as HTMLInputElement).value;\n const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n if (props.modelValue !== v) {\n emitModelValue(v);\n }\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (\n event.key !== 'Backspace' &&\n props.maxlength &&\n props.modelValue &&\n props.modelValue.length >= props.maxlength\n ) {\n event.preventDefault();\n }\n };\n\n const computedPlaceholder = computed(() => {\n if (props.placeholder) {\n return props.placeholder;\n } else {\n switch (props.type) {\n case NeonInputType.Email:\n return 'gbelson@hooli.com';\n case NeonInputType.Tel:\n return '+41785551234';\n case NeonInputType.Url:\n return 'http://www.getskeleton.com';\n default:\n return '';\n }\n }\n });\n\n expose({ neonInput });\n\n return {\n neonInput,\n focused,\n sanitizedAttributes,\n iconVisible,\n iconName,\n iconColor,\n computedPlaceholder,\n counterLabel,\n focus,\n click,\n onFocus,\n onBlur,\n iconClicked,\n changeValue,\n onKeyDown,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","expose","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","counterLabel","templates","remainingChars","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n name: 'NeonInput',\n components: {\n NeonIcon,\n },\n props: {\n /**\n * The id the input\n */\n id: { type: String, default: null },\n /**\n * The value of the input\n */\n modelValue: { type: String, default: null },\n /**\n * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n */\n type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n /**\n * Placeholder text to display in the input\n */\n placeholder: { type: String, default: null },\n /**\n * Size of the input\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * Color of the input\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n /**\n * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n */\n inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n /**\n * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n */\n autocomplete: { type: String, default: 'on' },\n /**\n * The state of the input\n */\n state: { type: String as () => NeonState, default: NeonState.Ready },\n /**\n * The number of rows to display in the case of a textarea\n */\n rows: { type: Number, default: null },\n /**\n * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n */\n icon: { type: String, default: null },\n /**\n * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n */\n iconReadonly: { type: Boolean, default: false },\n /**\n * Hide the icon button, e.g. the X button to clear the input's contents.\n */\n hideIcon: { type: Boolean, default: false },\n /**\n * Tabindex to assign to the input.\n */\n tabindex: { type: Number, default: 0 },\n /**\n * The disabled state of the input\n */\n disabled: { type: Boolean, default: false },\n /**\n * When the state is success or error, display the field with the state color indicator, e.g. border or background\n * color.\n */\n stateHighlight: { type: Boolean, default: true },\n /**\n * When the state is success or error, display the state icon.\n */\n stateIcon: { type: Boolean, default: true },\n /**\n * The character limit for a textarea.\n */\n maxlength: { type: Number, default: null },\n /**\n * The label template for the character limit. This is a string in the vue-i18n Pluralization format with a\n * <em>{count}</em> placeholder.\n */\n maxlengthLabel: { type: String, default: 'No characters left | 1 character left | {count} characters left' },\n /**\n * Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).\n */\n debounce: { type: Number, default: undefined },\n },\n emits: [\n /**\n * Emitted when the input has gained focus\n * @type {void}\n */\n 'focus',\n /**\n * Emitted when the input has lost focus\n * @type {void}\n */\n 'blur',\n /**\n * Emitted when the icon is clicked\n * @type {void}\n */\n 'icon-click',\n /**\n * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n * @type {string} the contents of the input\n */\n 'update:modelValue',\n ],\n setup(props, { emit, expose }) {\n const attrs = useAttrs();\n const neonInput = ref<HTMLElement | null>(null);\n const focused = ref(false);\n\n const sanitizedAttributes = computed(() => {\n const {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onBlur,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onFocus,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onIconClick,\n ...sanitized\n } = attrs;\n\n return sanitized;\n });\n\n const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n emit('update:modelValue', value);\n }, props.debounce);\n\n const iconName = computed(() => {\n switch (props.state) {\n case NeonState.Loading:\n return 'loading';\n case NeonState.Success:\n return props.stateIcon ? 'check' : undefined;\n case NeonState.Error:\n return props.stateIcon ? 'times' : undefined;\n default:\n if (props.icon) {\n return props.icon;\n } else if (props.modelValue && (props.modelValue?.length || 0) > 0) {\n return 'times';\n }\n\n return undefined;\n }\n });\n\n const iconVisible = computed(() => {\n return (\n iconName.value &&\n !props.hideIcon &&\n (props.state !== 'ready' ||\n props.icon ||\n (props.modelValue && !props.disabled && (props.modelValue?.length || 0) > 0))\n );\n });\n\n const iconColor = computed(() => {\n switch (props.state) {\n case NeonState.Success:\n return NeonFunctionalColor.Success;\n case NeonState.Error:\n return NeonFunctionalColor.Error;\n case NeonState.Loading:\n return props.color;\n default:\n return NeonFunctionalColor.LowContrast;\n }\n });\n\n const counterLabel = computed<string | null>(() => {\n if (props.maxlength && props.maxlength > 0) {\n const templates = props.maxlengthLabel.split(' | ');\n const remainingChars = props.maxlength - (props.modelValue?.length || 0);\n switch (remainingChars) {\n case 0:\n return templates[0];\n case 1:\n return templates[1];\n default:\n return templates[2].replace('{count}', `${remainingChars}`);\n }\n }\n return null;\n });\n\n const focus = () => {\n neonInput.value?.focus();\n };\n\n const click = () => {\n neonInput.value?.click();\n };\n\n const onFocus = () => {\n focused.value = true;\n emit('focus');\n };\n\n const onBlur = () => {\n focused.value = false;\n emit('blur');\n };\n\n const iconClicked = ($event: Event) => {\n if (!props.disabled) {\n if (props.icon) {\n emit('icon-click');\n } else {\n emitModelValue('');\n setTimeout(focus);\n }\n $event.preventDefault();\n $event.stopPropagation();\n }\n };\n\n const changeValue = (event: InputEvent) => {\n const val = (event.target as HTMLInputElement).value;\n const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n if (props.modelValue !== v) {\n emitModelValue(v);\n }\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (\n event.key !== 'Backspace' &&\n props.maxlength &&\n props.modelValue &&\n (props.modelValue?.length || 0) >= props.maxlength\n ) {\n event.preventDefault();\n }\n };\n\n const computedPlaceholder = computed(() => props.placeholder || '');\n\n expose({ neonInput });\n\n return {\n neonInput,\n focused,\n sanitizedAttributes,\n iconVisible,\n iconName,\n iconColor,\n computedPlaceholder,\n counterLabel,\n focus,\n click,\n onFocus,\n onBlur,\n iconClicked,\n changeValue,\n onKeyDown,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","expose","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","_a","iconVisible","iconColor","counterLabel","templates","remainingChars","focus","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { NeonInputType as
|
|
1
|
+
import { defineComponent as L, useAttrs as z, ref as m, computed as o } from "vue";
|
|
2
|
+
import { NeonInputType as D } from "../../../common/enums/NeonInputType.es.js";
|
|
3
3
|
import { NeonState as l } from "../../../common/enums/NeonState.es.js";
|
|
4
|
-
import { NeonSize as
|
|
5
|
-
import { NeonFunctionalColor as
|
|
6
|
-
import
|
|
7
|
-
import { NeonDebounceUtils as
|
|
4
|
+
import { NeonSize as F } from "../../../common/enums/NeonSize.es.js";
|
|
5
|
+
import { NeonFunctionalColor as i } from "../../../common/enums/NeonFunctionalColor.es.js";
|
|
6
|
+
import T from "../../presentation/icon/NeonIcon.vue.es.js";
|
|
7
|
+
import { NeonDebounceUtils as E } from "../../../common/utils/NeonDebounceUtils.es.js";
|
|
8
8
|
import { NeonInputMode as M } from "../../../common/enums/NeonInputMode.es.js";
|
|
9
|
-
const q =
|
|
9
|
+
const q = L({
|
|
10
10
|
name: "NeonInput",
|
|
11
11
|
components: {
|
|
12
|
-
NeonIcon:
|
|
12
|
+
NeonIcon: T
|
|
13
13
|
},
|
|
14
14
|
props: {
|
|
15
15
|
/**
|
|
@@ -25,7 +25,7 @@ const q = T({
|
|
|
25
25
|
* * file (use <a href="/user-input/file">NeonFile</a>)
|
|
26
26
|
* * password (use <a href="/user-input/password">NeonPassword</a>)
|
|
27
27
|
*/
|
|
28
|
-
type: { type: String, default:
|
|
28
|
+
type: { type: String, default: D.Text },
|
|
29
29
|
/**
|
|
30
30
|
* Placeholder text to display in the input
|
|
31
31
|
*/
|
|
@@ -33,11 +33,11 @@ const q = T({
|
|
|
33
33
|
/**
|
|
34
34
|
* Size of the input
|
|
35
35
|
*/
|
|
36
|
-
size: { type: String, default:
|
|
36
|
+
size: { type: String, default: F.Medium },
|
|
37
37
|
/**
|
|
38
38
|
* Color of the input
|
|
39
39
|
*/
|
|
40
|
-
color: { type: String, default:
|
|
40
|
+
color: { type: String, default: i.Primary },
|
|
41
41
|
/**
|
|
42
42
|
* The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
|
|
43
43
|
*/
|
|
@@ -121,21 +121,22 @@ const q = T({
|
|
|
121
121
|
*/
|
|
122
122
|
"update:modelValue"
|
|
123
123
|
],
|
|
124
|
-
setup(e, { emit:
|
|
125
|
-
const
|
|
124
|
+
setup(e, { emit: u, expose: g }) {
|
|
125
|
+
const h = z(), c = m(null), r = m(!1), y = o(() => {
|
|
126
126
|
const {
|
|
127
127
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
128
128
|
onBlur: t,
|
|
129
129
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
130
130
|
onFocus: n,
|
|
131
131
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
132
|
-
onIconClick:
|
|
133
|
-
...
|
|
134
|
-
} =
|
|
135
|
-
return
|
|
136
|
-
}),
|
|
137
|
-
|
|
138
|
-
}, e.debounce),
|
|
132
|
+
onIconClick: a,
|
|
133
|
+
...w
|
|
134
|
+
} = h;
|
|
135
|
+
return w;
|
|
136
|
+
}), d = E.debounce((t) => {
|
|
137
|
+
u("update:modelValue", t);
|
|
138
|
+
}, e.debounce), s = o(() => {
|
|
139
|
+
var t;
|
|
139
140
|
switch (e.state) {
|
|
140
141
|
case l.Loading:
|
|
141
142
|
return "loading";
|
|
@@ -144,78 +145,70 @@ const q = T({
|
|
|
144
145
|
case l.Error:
|
|
145
146
|
return e.stateIcon ? "times" : void 0;
|
|
146
147
|
default:
|
|
147
|
-
return e.icon ? e.icon : e.modelValue && e.modelValue.length > 0 ? "times" : void 0;
|
|
148
|
+
return e.icon ? e.icon : e.modelValue && (((t = e.modelValue) == null ? void 0 : t.length) || 0) > 0 ? "times" : void 0;
|
|
148
149
|
}
|
|
149
|
-
}),
|
|
150
|
+
}), b = o(() => {
|
|
151
|
+
var t;
|
|
152
|
+
return s.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && (((t = e.modelValue) == null ? void 0 : t.length) || 0) > 0);
|
|
153
|
+
}), S = o(() => {
|
|
150
154
|
switch (e.state) {
|
|
151
155
|
case l.Success:
|
|
152
|
-
return
|
|
156
|
+
return i.Success;
|
|
153
157
|
case l.Error:
|
|
154
|
-
return
|
|
158
|
+
return i.Error;
|
|
155
159
|
case l.Loading:
|
|
156
160
|
return e.color;
|
|
157
161
|
default:
|
|
158
|
-
return
|
|
162
|
+
return i.LowContrast;
|
|
159
163
|
}
|
|
160
|
-
}),
|
|
164
|
+
}), x = o(() => {
|
|
165
|
+
var t;
|
|
161
166
|
if (e.maxlength && e.maxlength > 0) {
|
|
162
|
-
const
|
|
163
|
-
switch (
|
|
167
|
+
const n = e.maxlengthLabel.split(" | "), a = e.maxlength - (((t = e.modelValue) == null ? void 0 : t.length) || 0);
|
|
168
|
+
switch (a) {
|
|
164
169
|
case 0:
|
|
165
|
-
return
|
|
170
|
+
return n[0];
|
|
166
171
|
case 1:
|
|
167
|
-
return
|
|
172
|
+
return n[1];
|
|
168
173
|
default:
|
|
169
|
-
return
|
|
174
|
+
return n[2].replace("{count}", `${a}`);
|
|
170
175
|
}
|
|
171
176
|
}
|
|
172
177
|
return null;
|
|
173
178
|
}), f = () => {
|
|
174
179
|
var t;
|
|
175
|
-
(t =
|
|
176
|
-
},
|
|
180
|
+
(t = c.value) == null || t.focus();
|
|
181
|
+
}, N = () => {
|
|
177
182
|
var t;
|
|
178
|
-
(t =
|
|
183
|
+
(t = c.value) == null || t.click();
|
|
184
|
+
}, V = () => {
|
|
185
|
+
r.value = !0, u("focus");
|
|
179
186
|
}, v = () => {
|
|
180
|
-
|
|
181
|
-
}, I = () => {
|
|
182
|
-
|
|
187
|
+
r.value = !1, u("blur");
|
|
188
|
+
}, I = (t) => {
|
|
189
|
+
e.disabled || (e.icon ? u("icon-click") : (d(""), setTimeout(f)), t.preventDefault(), t.stopPropagation());
|
|
183
190
|
}, k = (t) => {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
const n = t.target.value, d = e.maxlength && n.length > e.maxlength ? n.substring(0, e.maxlength) : n;
|
|
187
|
-
e.modelValue !== d && s(d);
|
|
191
|
+
const n = t.target.value, a = e.maxlength && n.length > e.maxlength ? n.substring(0, e.maxlength) : n;
|
|
192
|
+
e.modelValue !== a && d(a);
|
|
188
193
|
}, B = (t) => {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
return "http://www.getskeleton.com";
|
|
200
|
-
default:
|
|
201
|
-
return "";
|
|
202
|
-
}
|
|
203
|
-
});
|
|
204
|
-
return h({ neonInput: u }), {
|
|
205
|
-
neonInput: u,
|
|
206
|
-
focused: i,
|
|
207
|
-
sanitizedAttributes: b,
|
|
208
|
-
iconVisible: S,
|
|
209
|
-
iconName: m,
|
|
210
|
-
iconColor: x,
|
|
194
|
+
var n;
|
|
195
|
+
t.key !== "Backspace" && e.maxlength && e.modelValue && (((n = e.modelValue) == null ? void 0 : n.length) || 0) >= e.maxlength && t.preventDefault();
|
|
196
|
+
}, C = o(() => e.placeholder || "");
|
|
197
|
+
return g({ neonInput: c }), {
|
|
198
|
+
neonInput: c,
|
|
199
|
+
focused: r,
|
|
200
|
+
sanitizedAttributes: y,
|
|
201
|
+
iconVisible: b,
|
|
202
|
+
iconName: s,
|
|
203
|
+
iconColor: S,
|
|
211
204
|
computedPlaceholder: C,
|
|
212
|
-
counterLabel:
|
|
205
|
+
counterLabel: x,
|
|
213
206
|
focus: f,
|
|
214
|
-
click:
|
|
215
|
-
onFocus:
|
|
216
|
-
onBlur:
|
|
217
|
-
iconClicked:
|
|
218
|
-
changeValue:
|
|
207
|
+
click: N,
|
|
208
|
+
onFocus: V,
|
|
209
|
+
onBlur: v,
|
|
210
|
+
iconClicked: I,
|
|
211
|
+
changeValue: k,
|
|
219
212
|
onKeyDown: B
|
|
220
213
|
};
|
|
221
214
|
}
|