@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 • 8.25 kB
JavaScript
(("undefined"!==typeof self?self:this)["webpackJsonpwvc"]=("undefined"!==typeof self?self:this)["webpackJsonpwvc"]||[]).push([[11],{"09d3":function(t,e,i){var a={"./en.json":"7029","./fr.json":"c529","./zh.json":"3733"};function n(t){var e=o(t);return i(e)}function o(t){if(!i.o(a,t)){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}return a[t]}n.keys=function(){return Object.keys(a)},n.resolve=o,t.exports=n,n.id="09d3"},3733:function(t){t.exports=JSON.parse('{"open_in_new_tab":"在新窗口中打开","copyright":"© $year World Vision Canada. All rights reserved."}')},3803:function(t,e,i){e=t.exports=i("2350")(!1),e.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);",""]),e.push([t.i,'.container[data-v-5331b714]{box-sizing:border-box;padding:0;margin:0;display:inline-block;width:100%}.tabs[data-v-5331b714]{position:relative;overflow-x:hidden;padding-bottom:4px}.tabs-inner[data-v-5331b714]{overflow-x:auto;position:relative;-ms-overflow-style:none;scrollbar-width:none}.tabs-inner[data-v-5331b714]::-webkit-scrollbar{display:none}.tabs[data-v-5331b714]:after{position:absolute;content:"";background:#e4e4e4;height:2px;bottom:8px;left:4px;right:4px;width:100%}.tab-list[data-v-5331b714]{overflow-x:auto;list-style-type:none;display:flex;width:fit-content;justify-content:flex-start;margin:0;padding:4px;position:relative}.tab-indicator[data-v-5331b714]{position:absolute;border-bottom:4px solid #e7600c;z-index:10;top:100%;transform:translate(-16px,-8px);transition:left .2s}.tab-item[data-v-5331b714]{display:inline-block}.tab-btn[data-v-5331b714]{box-sizing:border-box;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;outline:none;border:none;background:transparent;cursor:pointer;font-family:Karla;font-size:14px;line-height:24px;text-decoration:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;height:100%;white-space:nowrap;transition:background-color .2s ease-in-out}.tab-btn.theme-light[data-v-5331b714]{color:#000}.tab-btn.theme-dark[data-v-5331b714]{color:#fff}@media (min-width:768px){.tab-btn[data-v-5331b714]{flex-direction:row;font-family:Karla;font-size:16px;line-height:24px;text-decoration:none;padding:24px 16px}}.tab-btn.has-icon[data-v-5331b714]{padding-top:8px;padding-bottom:8px}@media (min-width:768px){.tab-btn.has-icon[data-v-5331b714]{padding:24px 16px}}.tab-btn.is-active .tab-icon__item[data-v-5331b714]{visibility:hidden}.tab-btn.is-active .tab-icon__item--hover[data-v-5331b714]{visibility:visible}.tab-btn:hover.theme-light[data-v-5331b714]{background-color:#f5f5f5}.tab-btn:hover.theme-dark[data-v-5331b714]{background-color:#666}.tab-btn:hover .tab-icon__item[data-v-5331b714]{visibility:hidden}.tab-btn:hover .tab-icon__item--hover[data-v-5331b714]{visibility:visible}.tab-btn[data-v-5331b714]:focus-visible{outline-offset:0;z-index:10}.tab-btn:focus-visible.theme-light[data-v-5331b714]{outline:4px solid #337ab7}.tab-btn:focus-visible.theme-dark[data-v-5331b714]{outline:4px solid #00acca}.tab-icon[data-v-5331b714]{position:relative;display:block;width:24px;min-width:24px;height:24px}@media (min-width:768px){.tab-icon[data-v-5331b714]{margin-right:8px}}.tab-icon__item[data-v-5331b714]{display:block;position:absolute;border-radius:50%;width:100%;height:100%;background-repeat:no-repeat;background-size:cover}.tab-icon__item--hover[data-v-5331b714]{visibility:hidden}',""])},"6bbc":function(t,e,i){"use strict";i.r(e);var a=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"container"},[i("div",{class:["tabs",t.themeClass,t.classes]},[i("div",{ref:"tabInner",staticClass:"tabs-inner"},[i("ul",{ref:"tabList",staticClass:"tab-list",attrs:{role:"tablist"}},t._l(t.WvcTabs,(function(e,a){return i("li",{key:e.id,staticClass:"tab-item"},[i("button",{ref:"tabBtn",refInFor:!0,class:["tab-btn",t.themeClass,{"is-active":e.isActive,"has-icon":!!e.icon}],attrs:{id:"tab-"+t.uniqueId+"-"+(a+1),role:"tab","aria-selected":e.isActive?"true":"false","aria-controls":"tabPanel-"+t.uniqueId+"-"+(a+1),tabindex:0===a?"0":"-1"},on:{focus:function(i){return t.selectWvcTab(e)},click:function(i){return t.selectWvcTab(e)}}},[e.icon?i("span",{ref:"tabIcon",refInFor:!0,staticClass:"tab-icon",attrs:{"aria-hidden":"true"}},[e.icon?i("span",{staticClass:"tab-icon__item",style:{backgroundImage:"url("+e.icon+")"}}):t._e(),e.iconHover?i("span",{staticClass:"tab-icon__item tab-icon__item--hover",style:{backgroundImage:"url("+e.iconHover+")"}}):t._e()]):t._e(),i("span",[t._v(t._s(e.name))])])])})),0),i("div",{ref:"tabIndicator",staticClass:"tab-indicator"})])]),i("div",{staticClass:"tabs-details"},[t._t("default")],2)])},n=[],o=i("9523"),s=i.n(o),r=i("9225"),c={name:"WvcTabs",props:{dark:{type:Boolean,default:!1}},data:function(){return{WvcTabs:[],uniqueId:null,tabFocus:0}},computed:{classes:function(){return s()({},"".concat(this.small|"small"===this.size?"tabs-small":""),!0)},themeClass:function(){return{"theme-light":!this.dark,"theme-dark":this.dark}}},created:function(){this.WvcTabs=this.$children},mounted:function(){var t=this;this.uniqueId=this._uid,this.WvcTabs.forEach((function(e,i){e.id="tabPanel-".concat(t.uniqueId,"-").concat(i+1),e.ariaLabelledby="tab-".concat(t.uniqueId,"-").concat(i+1)}));var e=this;window.addEventListener("DOMContentLoaded",(function(){window.addEventListener("resize",e.indicatorUpdate),t.$refs.tabList.addEventListener("keydown",(function(t){return e.tabKeys(t)})),setTimeout((function(){e.indicatorUpdate()}),0)}))},updated:function(){this.indicatorUpdate()},beforeDestroy:function(){window.removeEventListener("resize",this.indicatorUpdate)},methods:{selectWvcTab:function(t){var e=this,i=this.$refs.tabBtn;this.WvcTabs.forEach((function(a,n){a.isActive=a.name===t.name,i[n].setAttribute("tabindex",-1),!0===a.isActive&&(i[n].setAttribute("tabindex",0),e.tabFocus=n,i[n].focus())}))},indicatorUpdate:function(){var t=this.$refs.tabBtn,e=t.filter((function(t){return t.classList.contains("is-active")})),i=e[0],a=this.$refs.tabInner,n=this.$refs.tabIndicator,o=i.getBoundingClientRect().width,s=i.getBoundingClientRect().left+a.scrollLeft;n.style.width="".concat(o,"px"),n.style.left="".concat(s,"px")},tabKeys:function(t){var e=this.$refs.tabBtn;39!==t.keyCode&&37!==t.keyCode||(e[this.tabFocus].setAttribute("tabindex",-1),39===t.keyCode?(this.tabFocus++,this.tabFocus>=e.length&&(this.tabFocus=0)):37===t.keyCode&&(this.tabFocus--,this.tabFocus<0&&(this.tabFocus=e.length-1)),e[this.tabFocus].setAttribute("tabindex",0),e[this.tabFocus].focus())}},i18n:r["a"]},d=c,b=i("2877");function l(t){var e=i("dc8f");e.__inject__&&e.__inject__(t)}var u=Object(b["a"])(d,a,n,!1,l,"5331b714",null,!0);e["default"]=u.exports},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,e,i){"use strict";var a=i("2b0e"),n=i("a925");a["a"].use(n["a"]);var o=function(){return(window.navigator.userLanguage||window.navigator.language).substring(0,2)};function s(){var t=i("09d3"),e={};return t.keys().forEach((function(i){var a=i.match(/([A-Za-z0-9-_]+)\./i);if(a&&a.length>1){var n=a[1];e[n]=t(i)}})),e}e["a"]=new n["a"]({locale:o()||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:s()})},9523:function(t,e){function i(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}t.exports=i},b3ef:function(t,e,i){var a=i("3803");"string"===typeof a&&(a=[[t.i,a,""]]),a.locals&&(t.exports=a.locals);var n=i("35d6").default;t.exports.__inject__=function(t){n("135f13a2",a,t)}},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."}')},dc8f:function(t,e,i){"use strict";i.r(e);var a=i("b3ef"),n=i.n(a);for(var o in a)["default"].indexOf(o)<0&&function(t){i.d(e,t,(function(){return a[t]}))}(o);e["default"]=n.a}}]);
//# sourceMappingURL=wvc.umd.min.11.js.map