UNPKG

@world-vision-canada/wvc-design-system

Version:

WVC Vue Design system is a fork of Vue Design System, an open-source tool for building Design Systems with Vue.js

2 lines • 12.2 kB
1
2
(("undefined"!==typeof self?self:this)["webpackJsonpwvc"]=("undefined"!==typeof self?self:this)["webpackJsonpwvc"]||[]).push([[8],{"09d3":function(t,a,n){var o={"./en.json":"7029","./fr.json":"c529","./zh.json":"3733"};function e(t){var a=c(t);return n(a)}function c(t){if(!n.o(o,t)){var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}return o[t]}e.keys=function(){return Object.keys(o)},e.resolve=c,t.exports=e,e.id="09d3"},3143:function(t,a,n){"use strict";n.r(a);var o=function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("div",{class:["dropdown-nav",t.themeClass,t.state,{"clicked-link":t.isActive},"hover-"+t.hover]},[n("button",{class:["button",t.state,{"clicked-link":t.isActive}],attrs:{id:["dropdown-"+t.id],role:"button",tabindex:"0","aria-label":t.ariaLabel,"aria-current":"selected"===t.state?"page":null,"aria-expanded":[t.ariaExpanded],"aria-haspopup":"true"},on:{mouseover:function(a){t.hover=!0,t.ariaExpanded=!0},mouseleave:function(a){t.hover=!1,t.ariaExpanded=!1},click:function(a){return t.clickedButton()}}},[n("span",{staticClass:"categoryIcons"},["selected"!=t.state&&1!=t.hover&&1!=t.isActive?n("CategoryIconSvg",{staticClass:"categoryIcon",attrs:{"aria-hidden":"false"}}):t._e(),"selected"===t.state||!0===t.hover||!0===t.isActive?n("CategoryIconSolidSvg",{staticClass:"categoryIcon",attrs:{"aria-hidden":"false"}}):t._e()],1),t._v("\n "+t._s(t.buttonCopy)+"\n ")]),n("div",{staticClass:"dropdown-content",attrs:{"aria-labelledby":["dropdown-"+t.id]},on:{click:t.handleClick,mouseover:function(a){t.hover=!0,t.ariaExpanded=!0},mouseleave:function(a){t.hover=!1,t.ariaExpanded=!1}}},[t._t("default"),n("div",{staticClass:"close-button-container"},[n("button",{staticClass:"close-button",attrs:{role:"button",tabindex:"0","aria-label":"close dropdown"},on:{click:t.closeClick}},[n("span",{staticClass:"close-button-copy"},[t._v("\n Close\n ")]),n("span",{staticClass:"close-button-icon"},[n("CloseIconSvg")],1)])])],2)])},e=[],c=n("9225"),i=n("4c5d"),r=n.n(i),s=n("6f22"),d=n.n(s),l=n("3e79"),p=n.n(l),u={name:"WvcDropdownNav",components:{CategoryIconSvg:r.a,CategoryIconSolidSvg:d.a,CloseIconSvg:p.a},props:{ariaLabel:{type:String,default:""},dark:{type:Boolean,default:!1},buttonCopy:{type:String,default:null},state:{type:String,default:null,validator:function(t){return t.match(/(selected)/)}}},data:function(){return{hover:!1,isActive:!1,id:null,ariaExpanded:!1}},computed:{themeClass:function(){return{"theme-light":!this.dark,"theme-dark":this.dark}}},mounted:function(){this.id=this._uid},methods:{clickedButton:function(t){this.isActive=!this.isActive,this.ariaExpanded=!this.ariaExpanded},handleClick:function(t){t.target instanceof HTMLElement&&!this.$el.contains(t.target)&&console.log("clicked-outside")},closeClick:function(t){this.isActive=!1,this.ariaExpanded=!1,this.hover=!1,this.clickedLink=!1}},i18n:c["a"]},f=u,v=n("2877");function h(t){var a=n("b041");a.__inject__&&a.__inject__(t)}var b=Object(v["a"])(f,o,e,!1,h,"22541ca1",null,!0);a["default"]=b.exports},3733:function(t){t.exports=JSON.parse('{"open_in_new_tab":"在新窗口中打开","copyright":"© $year World Vision Canada. All rights reserved."}')},"384b":function(t,a,n){a=t.exports=n("2350")(!1),a.push([t.i,"@import url(https://fonts.googleapis.com/css2?family=Karla:wght@700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap);",""]),a.push([t.i,".dropdown-nav[data-v-22541ca1]{box-sizing:border-box;padding:0;margin:0;display:inline;width:100%}.button[data-v-22541ca1],.dropdown-nav.clicked-link .dropdown-content[data-v-22541ca1],.dropdown-nav.hover-true .dropdown-content[data-v-22541ca1]{display:block}.button[data-v-22541ca1]{box-sizing:border-box;padding:0;margin:0;font-family:Lato;font-size:16px;line-height:24px;height:40px;padding:4px 7px 4px 8px;cursor:pointer;font-weight:500;text-align:left;text-decoration:none;letter-spacing:normal;color:#000;background:none;border:none;border-bottom:4px solid transparent}.categoryIcon[data-v-22541ca1]{display:block;float:left;width:16px;height:16px;object-fit:contain;margin:4px 8px 0 0}.button[data-v-22541ca1]:focus{outline:none}.button.focus[data-v-22541ca1],.button[data-v-22541ca1]:focus-visible{outline:none;box-shadow:0 0 0 4px #337ab7}.button.selected[data-v-22541ca1]{border-bottom:4px solid #000}.clicked-link.button[data-v-22541ca1],.hover-true .button[data-v-22541ca1]{background-color:#f5f5f5}.button.clicked-link .categoryIcon path[data-v-22541ca1],.hover-true .button .categoryIcon path[data-v-22541ca1]{fill:#e7600c}.dropdown-content[data-v-22541ca1]{display:none;position:absolute;width:100%;left:0;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:500;background-color:#f5f5f5;padding:36px 0 16px 0}.dropdown-content>*[data-v-22541ca1]{display:block;float:left}.close-button-container[data-v-22541ca1]{width:100%;display:block;clear:both}.close-button[data-v-22541ca1]{display:block;min-height:40px;margin:0 auto;background-color:#f5f5f5;border:none}.close-button-copy[data-v-22541ca1]{display:block;float:left;font-family:Karla;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;text-align:left;color:#000;padding-top:1px;margin-right:2px}.close-button-icon[data-v-22541ca1]{display:block;float:left;margin:5px 0 0 3px}.dropdown-nav.theme-dark .button[data-v-22541ca1]{color:#fff;border-bottom:4px solid transparent}.dropdown-nav.theme-dark .clicked-link.button[data-v-22541ca1],.dropdown-nav.theme-dark.hover-true .button[data-v-22541ca1]{background-color:#666}.dropdown-nav.theme-dark .button .categoryIcon path[data-v-22541ca1]{fill:#fff}.dropdown-nav.theme-dark .button.selected[data-v-22541ca1]{fill:#fff;border-bottom:4px solid #fff}.dropdown-nav.theme-dark .button.clicked-link .categoryIcon path[data-v-22541ca1],.dropdown-nav.theme-dark.hover-true .button .categoryIcon path[data-v-22541ca1]{fill:#e7600c}@media (max-width:767px){.dropdown-content[data-v-22541ca1]{padding:24px 0 24px 0}.button[data-v-22541ca1]{font-family:Lato;font-size:14px;line-height:24px;padding:4px}.categoryIcon[data-v-22541ca1]{margin:4px 4px 0 0}.button.selected[data-v-22541ca1]{border-bottom:2px solid #000}.dropdown-nav.theme-dark .button.selected[data-v-22541ca1]{border-bottom:2px solid #fff}.column[data-v-22541ca1]{width:156px;height:120px}.close-button-container[data-v-22541ca1]{display:block;padding-top:24px}}",""])},"3e79":function(t,a){t.exports={functional:!0,render(t,a){const{_c:n,_v:o,data:e,children:c=[]}=a,{class:i,staticClass:r,style:s,staticStyle:d,attrs:l={},...p}=e;return n("svg",{class:[i,r],style:[s,d],attrs:Object.assign({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l),...p},c.concat([n("path",{attrs:{d:"M13 1a1.414 1.414 0 012 2L3 15a1.414 1.414 0 11-2-2L13 1z",fill:"#000"}}),n("path",{attrs:{d:"M1 3a1.414 1.414 0 012-2l12 12a1.414 1.414 0 11-2 2L1 3z",fill:"#000"}})]))}}},"4c5d":function(t,a){t.exports={functional:!0,render(t,a){const{_c:n,_v:o,data:e,children:c=[]}=a,{class:i,staticClass:r,style:s,staticStyle:d,attrs:l={},...p}=e;return n("svg",{class:[i,r],style:[s,d],attrs:Object.assign({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l),...p},c.concat([n("g",{attrs:{"clip-path":"url(#a)",fill:"#000"}},[n("path",{attrs:{d:"M7.348 3.68v1.692c0 .972-.615 1.734-1.564 1.94a1.55 1.55 0 01-.32.035c-1.187.002-2.374.002-3.56 0C.94 7.347.09 6.553.018 5.592a4.937 4.937 0 01-.014-.372V1.998c0-.491.143-.934.467-1.31A1.88 1.88 0 011.933.004c1.161-.01 2.326-.008 3.489 0A1.935 1.935 0 017.348 1.93c.003.583 0 1.167 0 1.75zM3.67 1.08H1.99c-.544 0-.91.364-.91.905V5.37c0 .54.371.907.911.907h3.373c.535 0 .913-.375.913-.909V1.995c0-.546-.369-.915-.915-.915H3.67zm12.326 2.609V5.38c0 .967-.624 1.735-1.57 1.934a1.557 1.557 0 01-.321.033c-1.183.003-2.365.003-3.547 0-.972 0-1.824-.793-1.891-1.764-.018-.258-.015-.517-.016-.776V1.992c0-.492.147-.934.472-1.31a1.878 1.878 0 011.454-.678c1.166-.01 2.333-.01 3.5 0a1.933 1.933 0 011.918 1.924c.006.586.001 1.174.001 1.76zm-3.671-2.606H10.62c-.521.003-.89.368-.891.888a974.13 974.13 0 000 3.419c0 .517.377.888.894.889h3.396c.528 0 .907-.377.907-.904V1.991c0-.538-.371-.907-.91-.909h-1.692zM7.346 12.336v1.692c0 .97-.62 1.735-1.568 1.936-.11.022-.22.033-.332.033a867.73 867.73 0 01-3.535 0c-.973 0-1.82-.79-1.895-1.76-.01-.12-.014-.24-.014-.359v-3.233c0-.493.145-.935.47-1.31a1.883 1.883 0 011.465-.681c1.16-.009 2.318-.006 3.477 0a1.936 1.936 0 011.932 1.931c.003.583 0 1.168 0 1.751zM3.678 9.733H1.986c-.542 0-.906.365-.906.908v3.372c0 .549.368.916.914.916h3.359c.55 0 .922-.372.923-.924v-3.348c0-.558-.367-.924-.92-.924H3.679zm12.318 2.605v1.692c0 .968-.623 1.735-1.57 1.935a1.59 1.59 0 01-.321.033 873.45 873.45 0 01-3.547 0c-.971 0-1.825-.794-1.891-1.762-.018-.262-.015-.525-.016-.79v-2.804c0-.492.146-.934.472-1.31.383-.44.873-.671 1.453-.675 1.167-.01 2.333-.01 3.5 0a1.933 1.933 0 011.919 1.92c.006.587.001 1.174.001 1.76zm-3.672-2.605H10.62c-.521.002-.89.369-.89.889a974.13 974.13 0 000 3.419c0 .516.378.887.895.887h3.396c.528 0 .905-.377.906-.905V10.64c0-.536-.371-.906-.911-.907h-1.692z"}})]),n("defs",[n("clipPath",{attrs:{id:"a"}},[n("path",{attrs:{fill:"#fff",d:"M0 0h15.998v16H0z"}})])])]))}}},"6f22":function(t,a){t.exports={functional:!0,render(t,a){const{_c:n,_v:o,data:e,children:c=[]}=a,{class:i,staticClass:r,style:s,staticStyle:d,attrs:l={},...p}=e;return n("svg",{class:[i,r],style:[s,d],attrs:Object.assign({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l),...p},c.concat([n("g",{attrs:{"clip-path":"url(#a)",fill:"#000"}},[n("path",{attrs:{d:"M7.348 3.68v1.692c0 .972-.615 1.734-1.564 1.94a1.55 1.55 0 01-.32.035c-1.187.002-2.374.002-3.56 0C.94 7.347.09 6.553.018 5.592a4.937 4.937 0 01-.014-.372V1.998c0-.491.143-.934.467-1.31A1.88 1.88 0 011.933.004c1.161-.01 2.326-.008 3.489 0A1.935 1.935 0 017.348 1.93c.003.583 0 1.167 0 1.75zm8.648.009V5.38c0 .967-.624 1.735-1.57 1.934a1.557 1.557 0 01-.321.033c-1.183.003-2.365.003-3.547 0-.972 0-1.824-.793-1.891-1.764-.018-.258-.015-.517-.016-.776V1.992c0-.492.147-.934.472-1.31a1.878 1.878 0 011.454-.678c1.166-.01 2.333-.01 3.5 0a1.933 1.933 0 011.918 1.924c.006.586.001 1.174.001 1.76zm-8.65 8.647v1.692c0 .969-.62 1.735-1.568 1.936-.11.022-.22.033-.332.033-1.179.002-2.357.002-3.535 0-.973 0-1.82-.79-1.895-1.76-.01-.12-.014-.24-.014-.359v-3.233c0-.493.145-.935.47-1.31a1.883 1.883 0 011.465-.681c1.16-.009 2.318-.007 3.477 0a1.936 1.936 0 011.932 1.931c.003.583 0 1.168 0 1.751zm8.65.002v1.692c0 .968-.623 1.735-1.57 1.935a1.596 1.596 0 01-.321.033c-1.183.003-2.365.003-3.547 0-.971 0-1.825-.794-1.891-1.762-.018-.262-.015-.525-.016-.79v-2.804c0-.492.146-.934.472-1.31.383-.44.873-.672 1.453-.675 1.167-.01 2.333-.01 3.5 0a1.933 1.933 0 011.919 1.92c.006.587.001 1.174.001 1.76z"}})]),n("defs",[n("clipPath",{attrs:{id:"a"}},[n("path",{attrs:{fill:"#fff",d:"M0 0h15.998v16H0z"}})])])]))}}},7029:function(t){t.exports=JSON.parse('{"open_in_new_tab":"Open in a new window","copyright":"© $year World Vision Canada. All rights reserved."}')},9225:function(t,a,n){"use strict";var o=n("2b0e"),e=n("a925");o["a"].use(e["a"]);var c=function(){return(window.navigator.userLanguage||window.navigator.language).substring(0,2)};function i(){var t=n("09d3"),a={};return t.keys().forEach((function(n){var o=n.match(/([A-Za-z0-9-_]+)\./i);if(o&&o.length>1){var e=o[1];a[e]=t(n)}})),a}a["a"]=new e["a"]({locale:c()||Object({NODE_ENV:"production",BASE_URL:"/"}).VUE_APP_I18N_LOCALE||"en",fallbackLocale:Object({NODE_ENV:"production",BASE_URL:"/"}).VUE_APP_I18N_FALLBACK_LOCALE||"en",messages:i()})},b041:function(t,a,n){"use strict";n.r(a);var o=n("f121"),e=n.n(o);for(var c in o)["default"].indexOf(c)<0&&function(t){n.d(a,t,(function(){return o[t]}))}(c);a["default"]=e.a},c529:function(t){t.exports=JSON.parse('{"open_in_new_tab":"Ouvrir dans un nouvel onglet","copyright":"© Vision Mondiale Canada - $year tous droits réservés."}')},f121:function(t,a,n){var o=n("384b");"string"===typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);var e=n("35d6").default;t.exports.__inject__=function(t){e("589807dc",o,t)}}}]); //# sourceMappingURL=wvc.umd.min.8.js.map