@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
407 lines (330 loc) • 17.7 kB
JavaScript
((typeof self !== 'undefined' ? self : this)["webpackJsonpwvc"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpwvc"] || []).push([[11],{
/***/ "09d3":
/***/ (function(module, exports, __webpack_require__) {
var map = {
"./en.json": "7029",
"./fr.json": "c529",
"./zh.json": "3733"
};
function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
function webpackContextResolve(req) {
if(!__webpack_require__.o(map, req)) {
var e = new Error("Cannot find module '" + req + "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
}
return map[req];
}
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "09d3";
/***/ }),
/***/ "3733":
/***/ (function(module) {
module.exports = JSON.parse("{\"open_in_new_tab\":\"在新窗口中打开\",\"copyright\":\"© $year World Vision Canada. All rights reserved.\"}");
/***/ }),
/***/ "3803":
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__("2350")(false);
// imports
exports.push([module.i, "@import url(https://fonts.googleapis.com/css2?family=Karla:wght@700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap);", ""]);
// module
exports.push([module.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}", ""]);
// exports
/***/ }),
/***/ "6bbc":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"01f5881a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/elements/WvcTabs.vue?vue&type=template&id=5331b714&scoped=true&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"container"},[_c('div',{class:['tabs', _vm.themeClass, _vm.classes]},[_c('div',{ref:"tabInner",staticClass:"tabs-inner"},[_c('ul',{ref:"tabList",staticClass:"tab-list",attrs:{"role":"tablist"}},_vm._l((_vm.WvcTabs),function(WvcTab,index){return _c('li',{key:WvcTab.id,staticClass:"tab-item"},[_c('button',{ref:"tabBtn",refInFor:true,class:[
'tab-btn',
_vm.themeClass,
{ 'is-active': WvcTab.isActive, 'has-icon': !!WvcTab.icon }
],attrs:{"id":("tab-" + _vm.uniqueId + "-" + (index + 1)),"role":"tab","aria-selected":WvcTab.isActive ? 'true' : 'false',"aria-controls":("tabPanel-" + _vm.uniqueId + "-" + (index + 1)),"tabindex":index === 0 ? '0' : '-1'},on:{"focus":function($event){return _vm.selectWvcTab(WvcTab)},"click":function($event){return _vm.selectWvcTab(WvcTab)}}},[(!!WvcTab.icon)?_c('span',{ref:"tabIcon",refInFor:true,staticClass:"tab-icon",attrs:{"aria-hidden":"true"}},[(!!WvcTab.icon)?_c('span',{staticClass:"tab-icon__item",style:({ backgroundImage: ("url(" + (WvcTab.icon) + ")") })}):_vm._e(),(!!WvcTab.iconHover)?_c('span',{staticClass:"tab-icon__item tab-icon__item--hover",style:({ backgroundImage: ("url(" + (WvcTab.iconHover) + ")") })}):_vm._e()]):_vm._e(),_c('span',[_vm._v(_vm._s(WvcTab.name))])])])}),0),_c('div',{ref:"tabIndicator",staticClass:"tab-indicator"})])]),_c('div',{staticClass:"tabs-details"},[_vm._t("default")],2)])}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/elements/WvcTabs.vue?vue&type=template&id=5331b714&scoped=true&
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js
var defineProperty = __webpack_require__("9523");
var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty);
// EXTERNAL MODULE: ./src/i18n.js
var i18n = __webpack_require__("9225");
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/elements/WvcTabs.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ var WvcTabsvue_type_script_lang_js_ = ({
name: 'WvcTabs',
props: {
dark: {
type: Boolean,
default: false
}
},
data: function data() {
return {
WvcTabs: [],
uniqueId: null,
tabFocus: 0
};
},
computed: {
classes: function classes() {
return defineProperty_default()({}, "".concat(this.small | this.size === 'small' ? 'tabs-small' : ''), true);
},
themeClass: function themeClass() {
return {
'theme-light': !this.dark,
'theme-dark': this.dark
};
}
},
created: function created() {
this.WvcTabs = this.$children;
},
mounted: function mounted() {
var _this = this;
this.uniqueId = this._uid;
this.WvcTabs.forEach(function (WvcTab, i) {
WvcTab.id = "tabPanel-".concat(_this.uniqueId, "-").concat(i + 1);
WvcTab.ariaLabelledby = "tab-".concat(_this.uniqueId, "-").concat(i + 1);
});
var self = this;
window.addEventListener('DOMContentLoaded', function () {
window.addEventListener('resize', self.indicatorUpdate);
_this.$refs.tabList.addEventListener('keydown', function (e) {
return self.tabKeys(e);
});
setTimeout(function () {
self.indicatorUpdate();
}, 0);
});
},
updated: function updated() {
this.indicatorUpdate();
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('resize', this.indicatorUpdate);
},
methods: {
selectWvcTab: function selectWvcTab(selectedWvcTab) {
var _this2 = this;
// clicking a tab will reset that tab to be focussed automatically
var tabs = this.$refs.tabBtn;
this.WvcTabs.forEach(function (WvcTab, index) {
WvcTab.isActive = WvcTab.name === selectedWvcTab.name; // reset tabs to tabindex -1
tabs[index].setAttribute('tabindex', -1);
if (WvcTab.isActive === true) {
// set this active one to tabindex zero
tabs[index].setAttribute('tabindex', 0); // reset the tabFocus counter used by arrow keys
_this2.tabFocus = index; // focus this element
tabs[index].focus();
}
});
},
indicatorUpdate: function indicatorUpdate() {
var tabBtn = this.$refs.tabBtn;
var selectedList = tabBtn.filter(function (element) {
return element.classList.contains('is-active');
});
var selected = selectedList[0];
var inner = this.$refs.tabInner;
var indicator = this.$refs.tabIndicator;
var width = selected.getBoundingClientRect().width;
var left = selected.getBoundingClientRect().left + inner.scrollLeft;
indicator.style.width = "".concat(width, "px");
indicator.style.left = "".concat(left, "px");
},
tabKeys: function tabKeys(e) {
var tabs = this.$refs.tabBtn; // Move right
if (e.keyCode === 39 || e.keyCode === 37) {
tabs[this.tabFocus].setAttribute('tabindex', -1);
if (e.keyCode === 39) {
this.tabFocus++; // If we're at the end, go to the start
if (this.tabFocus >= tabs.length) {
this.tabFocus = 0;
} // Move left
} else if (e.keyCode === 37) {
this.tabFocus--; // If we're at the start, move to the end
if (this.tabFocus < 0) {
this.tabFocus = tabs.length - 1;
}
}
tabs[this.tabFocus].setAttribute('tabindex', 0);
tabs[this.tabFocus].focus();
}
}
},
i18n: i18n["a" /* default */]
});
// CONCATENATED MODULE: ./src/elements/WvcTabs.vue?vue&type=script&lang=js&
/* harmony default export */ var elements_WvcTabsvue_type_script_lang_js_ = (WvcTabsvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__("2877");
// CONCATENATED MODULE: ./src/elements/WvcTabs.vue
function injectStyles (context) {
var style0 = __webpack_require__("dc8f")
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
elements_WvcTabsvue_type_script_lang_js_,
render,
staticRenderFns,
false,
injectStyles,
"5331b714",
null
,true
)
/* harmony default export */ var WvcTabs = __webpack_exports__["default"] = (component.exports);
/***/ }),
/***/ "7029":
/***/ (function(module) {
module.exports = JSON.parse("{\"open_in_new_tab\":\"Open in a new window\",\"copyright\":\"© $year World Vision Canada. All rights reserved.\"}");
/***/ }),
/***/ "9225":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("2b0e");
/* harmony import */ var vue_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("a925");
vue__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].use(vue_i18n__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]); // get locale from page, with user window as fallback
var getLocale = function getLocale() {
// for demo i removed so i can show diffrent language in my browser changes aria label
// document.documentElement.lang doesn't change lang in storybook
return (window.navigator.userLanguage || window.navigator.language).substring(0, 2);
};
function loadLocaleMessages() {
var locales = __webpack_require__("09d3");
var messages = {};
locales.keys().forEach(function (key) {
var matched = key.match(/([A-Za-z0-9-_]+)\./i);
if (matched && matched.length > 1) {
var locale = matched[1];
messages[locale] = locales(key);
}
});
return messages;
}
/* harmony default export */ __webpack_exports__["a"] = (new vue_i18n__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]({
locale: getLocale() || 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: loadLocaleMessages()
}));
/***/ }),
/***/ "9523":
/***/ (function(module, exports) {
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
module.exports = _defineProperty;
/***/ }),
/***/ "b3ef":
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__("3803");
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add CSS to Shadow Root
var add = __webpack_require__("35d6").default
module.exports.__inject__ = function (shadowRoot) {
add("135f13a2", content, shadowRoot)
};
/***/ }),
/***/ "c529":
/***/ (function(module) {
module.exports = JSON.parse("{\"open_in_new_tab\":\"Ouvrir dans un nouvel onglet\",\"copyright\":\"© Vision Mondiale Canada - $year tous droits réservés.\"}");
/***/ }),
/***/ "dc8f":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_WvcTabs_vue_vue_type_style_index_0_id_5331b714_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b3ef");
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_WvcTabs_vue_vue_type_style_index_0_id_5331b714_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_WvcTabs_vue_vue_type_style_index_0_id_5331b714_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_WvcTabs_vue_vue_type_style_index_0_id_5331b714_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_WvcTabs_vue_vue_type_style_index_0_id_5331b714_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony default export */ __webpack_exports__["default"] = (_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_WvcTabs_vue_vue_type_style_index_0_id_5331b714_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ })
}]);
//# sourceMappingURL=wvc.common.11.js.map