@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
352 lines (294 loc) • 16.2 kB
JavaScript
((typeof self !== 'undefined' ? self : this)["webpackJsonpwvc"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpwvc"] || []).push([[13],{
/***/ "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";
/***/ }),
/***/ "2e7c":
/***/ (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__("f5af");
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("3b170aa3", content, shadowRoot)
};
/***/ }),
/***/ "3733":
/***/ (function(module) {
module.exports = JSON.parse("{\"open_in_new_tab\":\"在新窗口中打开\",\"copyright\":\"© $year World Vision Canada. All rights reserved.\"}");
/***/ }),
/***/ "6278":
/***/ (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/WvcPagination.vue?vue&type=template&id=78479c60&scoped=true&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"detectWidth"},[_c('div',{class:['pagination', _vm.themeClass, _vm.containerWidth > 400 ? 'large' : 'small']},[_c('select',{attrs:{"id":"page-selecter","name":"redirect to this page number","aria-label":"redirect to the selected page"},on:{"change":_vm.onSelect}},_vm._l((_vm.totalPages),function(i){return _c('option',{key:i,domProps:{"value":_vm.baseUrl +'?page=' + i,"selected":i == _vm.currentPage ? 'selected' : null}},[_vm._v("\n "+_vm._s(i)+"\n ")])}),0),_c('p',{staticClass:"selection-copy"},[_vm._v("\n "+_vm._s(_vm.totalPageCopy)+"\n ")]),_c('span',{staticClass:"divider"}),_c('a',{class:['previous-link' , _vm.previousClass],attrs:{"href":_vm.previousActive ? _vm.previousUrl : null,"role":_vm.previousActive ? 'link' : null,"aria-label":_vm.ariaLabelPrevious ? _vm.ariaLabelPrevious : null,"aria-describedby":_vm.ariaDescribedbyPrevious ? _vm.ariaDescribedbyPrevious : null}},[_vm._v("\n < "),_c('span',{staticClass:"link-content"},[_vm._v(_vm._s(_vm.previousTitle))])]),_c('a',{class:['next-link', _vm.nextClass],attrs:{"href":_vm.nextActive ? _vm.nextUrl : null,"role":_vm.nextActive ? 'link' : null,"aria-label":_vm.ariaLabelNext ? _vm.ariaLabelNext : null,"aria-describedby":_vm.ariaDescribedbyNext ? _vm.ariaDescribedbyNext : null}},[_c('span',{staticClass:"link-content"},[_vm._v(_vm._s(_vm.nextTitle))]),_vm._v(" >\n ")])])])}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/elements/WvcPagination.vue?vue&type=template&id=78479c60&scoped=true&
// 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/WvcPagination.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ var WvcPaginationvue_type_script_lang_js_ = ({
name: 'WvcPagination',
props: {
/**
* Use dark theme for component.
*/
dark: {
type: Boolean,
default: false
},
totalPages: {
type: Number,
default: 1
},
totalPageCopy: {
type: String,
default: 'of 1 pages'
},
currentPage: {
type: Number,
default: 1
},
baseUrl: {
type: String,
default: '#'
},
previousTitle: {
type: String,
default: 'previous'
},
previousUrl: {
type: String,
default: '#'
},
previousActive: {
type: Boolean,
default: true
},
ariaLabelPrevious: {
type: String,
default: null
},
ariaDescribedbyPrevious: {
type: String,
default: null
},
nextTitle: {
type: String,
default: 'next'
},
nextUrl: {
type: String,
default: '#'
},
nextActive: {
type: Boolean,
default: true
},
ariaLabelNext: {
type: String,
default: null
},
ariaDescribedbyNext: {
type: String,
default: null
}
},
/**
* Hover state swaps icons
*/
data: function data() {
return {
containerWidth: 0
};
},
computed: {
themeClass: function themeClass() {
return {
'theme-light': !this.dark,
'theme-dark': this.dark
};
},
nextClass: function nextClass() {
return {
'link-disabled': !this.nextActive
};
},
previousClass: function previousClass() {
return {
'link-disabled': !this.previousActive
};
}
},
mounted: function mounted() {
this.onResize();
window.addEventListener('resize', this.onResize);
},
methods: {
// this is triggered when the browser resizes
onResize: function onResize() {
// this detects the width of my parent container, not browser width
// const width = this.$refs.detectWidth.clientWidth
var width = this.$refs.detectWidth.clientWidth;
this.containerWidth = width;
},
onSelect: function onSelect(e) {
var href = e.target.value; // console.log(href)
// this works, but cannot be tested in storybook
window.location.href = href;
}
},
i18n: i18n["a" /* default */]
});
// CONCATENATED MODULE: ./src/elements/WvcPagination.vue?vue&type=script&lang=js&
/* harmony default export */ var elements_WvcPaginationvue_type_script_lang_js_ = (WvcPaginationvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__("2877");
// CONCATENATED MODULE: ./src/elements/WvcPagination.vue
function injectStyles (context) {
var style0 = __webpack_require__("85c6")
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
elements_WvcPaginationvue_type_script_lang_js_,
render,
staticRenderFns,
false,
injectStyles,
"78479c60",
null
,true
)
/* harmony default export */ var WvcPagination = __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.\"}");
/***/ }),
/***/ "85c6":
/***/ (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_WvcPagination_vue_vue_type_style_index_0_id_78479c60_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("2e7c");
/* 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_WvcPagination_vue_vue_type_style_index_0_id_78479c60_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_WvcPagination_vue_vue_type_style_index_0_id_78479c60_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_WvcPagination_vue_vue_type_style_index_0_id_78479c60_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_WvcPagination_vue_vue_type_style_index_0_id_78479c60_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_WvcPagination_vue_vue_type_style_index_0_id_78479c60_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/***/ "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()
}));
/***/ }),
/***/ "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.\"}");
/***/ }),
/***/ "f5af":
/***/ (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-78479c60]{box-sizing:border-box;padding:0;margin:0;display:inline-block}a[data-v-78479c60],p[data-v-78479c60]{display:inline}#page-selecter[data-v-78479c60]{display:inline;height:20px;width:34px;float:left;margin:0 8px 0 0;border:none;font-weight:700;background-color:#f5f5f5}#page-selecter[data-v-78479c60]:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px #337ab7}#page-selecter>option[data-v-78479c60]{width:17px;margin:0 4px 0 0;font-weight:700;text-align:center}#page-selecter>option[data-v-78479c60],.selection-copy[data-v-78479c60]{height:24px;font-size:14px;font-stretch:normal;font-style:normal;line-height:1.71;letter-spacing:normal}.selection-copy[data-v-78479c60]{font-family:Karla;margin:0 0 0 8px;color:#000}.divider[data-v-78479c60]{margin:0 24px;height:24px;border-right:1px solid grey}.next-link[data-v-78479c60],.previous-link[data-v-78479c60]{padding:0 1px;height:24px;font-family:Karla;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.71;letter-spacing:normal}.previous-link[data-v-78479c60]{margin-right:16px}.next-link[data-v-78479c60],.previous-link[data-v-78479c60]{color:#000;text-decoration:none}.next-link:hover .link-content[data-v-78479c60],.previous-link:hover .link-content[data-v-78479c60]{text-decoration:underline}.next-link[data-v-78479c60]:focus-visible,.previous-link[data-v-78479c60]:focus-visible{outline:none;box-shadow:0 0 0 2px #337ab7}.link-disabled[data-v-78479c60],.link-disabled a[data-v-78479c60]{color:#999}.link-disabled[data-v-78479c60]:hover,.link-disabled:hover .link-content[data-v-78479c60],.link-disabled a[data-v-78479c60]:hover,.link-disabled a:hover .link-content[data-v-78479c60]{text-decoration:none}.pagination.theme-dark #page-selecter[data-v-78479c60]{display:inline;border-radius:4px}.pagination.theme-dark #page-selecter[data-v-78479c60]:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px #00acca}.pagination.theme-dark .selection-copy[data-v-78479c60]{color:#fff}.pagination.theme-dark .next-link[data-v-78479c60],.pagination.theme-dark .previous-link[data-v-78479c60]{color:#fff;text-decoration:none}.pagination.theme-dark .next-link:hover .link-content[data-v-78479c60],.pagination.theme-dark .previous-link:hover .link-content[data-v-78479c60]{border-bottom:1px solid #fff}.pagination.theme-dark .next-link[data-v-78479c60]:focus-visible,.pagination.theme-dark .previous-link[data-v-78479c60]:focus-visible{outline:none;box-shadow:0 0 0 2px #00acca}.pagination.theme-dark .next-link a[data-v-78479c60],.pagination.theme-dark .next-link p[data-v-78479c60],.pagination.theme-dark .previous-link a[data-v-78479c60],.pagination.theme-dark .previous-link p[data-v-78479c60]{color:#fff}.pagination.theme-dark .link-disabled[data-v-78479c60]{color:#666}.pagination.theme-dark .link-disabled:hover .link-content[data-v-78479c60]{border-bottom:none}@media (max-width:767px){.divider[data-v-78479c60]{margin:0 12px}}", ""]);
// exports
/***/ })
}]);
//# sourceMappingURL=wvc.common.13.js.map