UNPKG

v-ingredients

Version:

Reusable Components

1,759 lines (1,639 loc) 147 kB
import Vue from 'vue'; var script = Vue.extend({ name: 'Icon', }); function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */ , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { if (typeof shadowMode !== 'boolean') { createInjectorSSR = createInjector; createInjector = shadowMode; shadowMode = false; } // Vue.extend constructor export interop. var options = typeof script === 'function' ? script.options : script; // render functions if (template && template.render) { options.render = template.render; options.staticRenderFns = template.staticRenderFns; options._compiled = true; // functional template if (isFunctionalTemplate) { options.functional = true; } } // scopedId if (scopeId) { options._scopeId = scopeId; } var hook; if (moduleIdentifier) { // server build hook = function hook(context) { // 2.3 injection context = context || // cached call this.$vnode && this.$vnode.ssrContext || // stateful this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__; } // inject component styles if (style) { style.call(this, createInjectorSSR(context)); } // register component module identifier for async chunk inference if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier); } }; // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook; } else if (style) { hook = shadowMode ? function (context) { style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); } : function (context) { style.call(this, createInjector(context)); }; } if (hook) { if (options.functional) { // register for functional component in vue file var originalRender = options.render; options.render = function renderWithStyleInjection(h, context) { hook.call(context); return originalRender(h, context); }; } else { // inject component registration as beforeCreate hook var existing = options.beforeCreate; options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; } } return script; } /* script */ var __vue_script__ = script; /* template */ var __vue_render__ = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c("span", { staticClass: "icon" }, [_vm._t("default")], 2) }; var __vue_staticRenderFns__ = []; __vue_render__._withStripped = true; /* style */ var __vue_inject_styles__ = undefined; /* scoped */ var __vue_scope_id__ = "data-v-77848792"; /* module identifier */ var __vue_module_identifier__ = undefined; /* functional template */ var __vue_is_functional_template__ = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__ = /*#__PURE__*/normalizeComponent( { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined ); var script$1 = Vue.extend({ components: { Icon: __vue_component__ }, props: { id: { type: String, required: true, }, href: { type: String, default: '', }, onClick: { type: Function, default: function () { }, }, disabled: { type: Boolean, default: false, }, beforeIcon: { type: String, }, afterIcon: { type: String, }, }, methods: { onClickInterceptor: function (event) { if (!this.disabled) { var hasEventsAttached = Object.keys(this.$listeners).length > 0; if (!this.disabled && this.href.length > 0 && !hasEventsAttached) { var paths = this.$router.options.routes.map(function (route) { return route.path; }); if (paths.includes(this.href)) { this.$router.push({ path: this.href, }); } else { window.location.href = this.href; } } this.$emit('click', event); } }, }, }); /* script */ var __vue_script__$1 = script$1; /* template */ var __vue_render__$1 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "a", { class: ["v-btn", { disabled: _vm.disabled }], attrs: { id: _vm.id }, on: { click: function($event) { return _vm.onClickInterceptor($event) } } }, [ _vm.beforeIcon ? _c("Icon", { staticClass: "icon-before" }, [ _vm._v(_vm._s(_vm.beforeIcon)) ]) : _vm._e(), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm.afterIcon ? _c("Icon", { staticClass: "icon-after" }, [ _vm._v(_vm._s(_vm.afterIcon)) ]) : _vm._e() ], 2 ) }; var __vue_staticRenderFns__$1 = []; __vue_render__$1._withStripped = true; /* style */ var __vue_inject_styles__$1 = undefined; /* scoped */ var __vue_scope_id__$1 = "data-v-36e56761"; /* module identifier */ var __vue_module_identifier__$1 = undefined; /* functional template */ var __vue_is_functional_template__$1 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$1 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined ); function __awaiter(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); } function __generator(thisArg, body) { var _ = { label: 0, sent: function sent() { if (t[0] & 1) { throw t[1]; } return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) { throw new TypeError("Generator is already executing."); } while (_) { try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) { return t; } if (y = 0, t) { op = [op[0] & 2, t.value]; } switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) { _.ops.pop(); } _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } } if (op[0] & 5) { throw op[1]; } return { value: op[0] ? op[1] : void 0, done: true }; } } var script$2 = Vue.extend({ name: 'RequiredStar', }); /* script */ var __vue_script__$2 = script$2; /* template */ var __vue_render__$2 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c("span", { class: ["required-star"] }, [_vm._v("*")]) }; var __vue_staticRenderFns__$2 = []; __vue_render__$2._withStripped = true; /* style */ var __vue_inject_styles__$2 = undefined; /* scoped */ var __vue_scope_id__$2 = "data-v-95578166"; /* module identifier */ var __vue_module_identifier__$2 = undefined; /* functional template */ var __vue_is_functional_template__$2 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$2 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined ); var Validators = [ { name: 'required', error: 'Dane pole jest wymagane', validator: function (item) { return (item !== null && item !== '' && item !== 'false' && item !== 'null'); }, }, { name: 'phone', error: 'Błędny numer telefonu', validator: function (item) { var value = item.toString().replace(/ /g, ''); return /[0-9]{9}/.test(value) && value.length === 9 && value !== '000000000'; }, }, { name: 'email', error: 'Niepoprawny adres email', validator: function (item) { return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(item); }, }, { name: 'pesel', error: 'Niepoprawny numer pesel', validator: function (item) { if (item.length == 11) { var arr = [1, 3, 7, 9, 1, 3, 7, 9, 1, 3]; var sum = 0; for (var i = 0; i < 10; i++) { // @ts-ignore sum += arr[i] * item[i]; } sum = sum % 10 == 0 ? 0 : 10 - sum % 10; // @ts-ignore return sum === parseInt(item[10]); } return false; }, }, { name: 'nip', error: 'Błędny NIP', validator: function (item) { var numbers = [6, 5, 7, 2, 3, 4, 5, 6, 7]; if (item.length === 10 && parseInt(item, 10) > 0) { var b = 0; for (var a = 0; a < 9; a++) { b += parseInt(item.charAt(a)) * numbers[a]; } return b % 11 === parseInt(item.charAt(9)); } return false; }, }, { name: 'regon', error: 'Błędny REGON', validator: function (item) { var reg = /^[0-9]{9}$/; if (!reg.test(item)) { return false; } else { var digits = ("" + item).split(""); var checksum = (8 * parseInt(digits[0]) + 9 * parseInt(digits[1]) + 2 * parseInt(digits[2]) + 3 * parseInt(digits[3]) + 4 * parseInt(digits[4]) + 5 * parseInt(digits[5]) + 6 * parseInt(digits[6]) + 7 * parseInt(digits[7])) % 11; if (checksum == 10) { checksum = 0; } return (parseInt(digits[8]) == checksum); } }, }, { name: 'do', error: 'Niepoprawny numer dowodu osobistego', validator: function (item) { // Check length if (item == null || item.length !== 9) { return false; } item = item.toUpperCase(); var letterValues = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // eslint-disable-next-line space-before-function-paren function getLetterValue(letter) { return letterValues.indexOf(letter); } // Check seria for (var i = 0; i < 3; i++) { if (getLetterValue(item[i]) < 10 || item[i] === 'O' || item === 'Q') { return false; } } // Check numbers for (var i = 3; i < 9; i++) { if (getLetterValue(item[i]) < 0 || getLetterValue(item[i]) > 9) { return false; } } // sprawdz cyfre kontrolna var sum = 7 * getLetterValue(item[0]) + 3 * getLetterValue(item[1]) + 1 * getLetterValue(item[2]) + 7 * getLetterValue(item[4]) + 3 * getLetterValue(item[5]) + 1 * getLetterValue(item[6]) + 7 * getLetterValue(item[7]) + 3 * getLetterValue(item[8]); sum %= 10; if (sum !== getLetterValue(item[3])) { return false; } return true; }, }, { name: 'postCode', error: 'Niepoprawny kod pocztowy', validator: function (item) { return /^[0-9]{2}-[0-9]{3}$/.test(item); }, }, { name: 'otpPass', error: 'Niepoprawne hasło SMS', validator: function (value) { return /[0-9]{4}/.test(value) && value.length === 4; }, }, { name: 'only-numbers', error: 'Litery i specjalne znaki nie są dozwolone', validator: function (value) { return /^[0-9]+$/.test(value); }, }, { name: 'only-letters', error: 'Cyfry i specjalne znaki nie są dozwolone', validator: function (value) { return /^[A-Za-z]+$/.test(value); }, }, { name: 'name', error: 'Cyfry i specjalne znaki nie są dozwolone', validator: function (value) { return /^[ ',-\.A-Za-z\xC0-\xCF\xD1-\xD6\xD8-\xDD\xDF-\xE5\xE7-\xF6\xF8-\xFD\xFF\u0104-\u0107\u010C\u010D\u0116-\u0119\u012E\u012F\u0141-\u0144\u0152\u0160\u0161\u016A\u016B\u0172\u0173\u0178-\u017E\u2202]+$/.test(value); }, } ]; function validate(value, validation) { var validationTypes = validation && validation.length > 0 ? validation.split(' ') : []; var test = validationTypes.map(function (type) { var validatorObj = Validators.find(function (obj) { return obj.name === type; }); return value && validatorObj ? validatorObj.validator(value.toString()) : false; }); return !test.some(function (result) { return result === false; }); } function getValidationTypes(itemValidation) { if (itemValidation === void 0) { itemValidation = ''; } return itemValidation ? itemValidation.split(' ').reverse() : []; } function getErrorMsg(validation) { if (!validation || validation.length === 0) { return null; } var validationArr = getValidationTypes(validation); var msg = ''; validationArr.forEach(function (type) { var validatorObj = Validators.find(function (validator) { return validator.name === type; }); msg += validatorObj ? validatorObj.error : ''; msg += type !== validationArr[validationArr.length - 1] ? ', ' : ''; }); return msg; } var script$3 = Vue.extend({ components: { RequiredStar: __vue_component__$2, }, props: { label: { type: String, default: '', }, name: { type: String, required: true, }, options: { type: Array, required: true, }, value: { // v-model gives us a value prop type: [String, Number], default: null, }, disabled: { type: Boolean, default: false, }, placeholder: { type: String, default: null, }, placeholderExternal: { type: Boolean, default: false }, error: { type: String, default: null, }, validation: { type: String, default: '', } }, data: function () { return { optionsOpened: false, selectedOptionLabel: '', timeout: null, changed: false }; }, computed: { isValid: { get: function () { return !(this.error && this.error.length > 0); }, set: function (isValid) { var errorMsg = !isValid ? getErrorMsg(this.validation) : ''; this.$emit('update:error', errorMsg); } }, isRequired: function () { return typeof this.validation === 'string' && this.validation.length > 0 && this.validation.includes('required'); }, showValidation: function () { if (!this.value && !this.isRequired) { return false; } return this.changed; }, }, watch: { value: function (newVal, oldVal) { this.changed = true; var option = this.options.filter(function (option) { return option.value === newVal; }); if (option.length === 1) { this.selectOption(option[0]); } } }, mounted: function () { var _this = this; var selectedOption = this.options.filter(function (option) { return option.value === _this.value; }); this.selectedOptionLabel = selectedOption.length === 1 ? selectedOption[0].label : ''; if (this.value || this.error) { this.changed = true; } }, methods: { recheck: function (option) { return __awaiter(this, void 0, Promise, function () { return __generator(this, function (_a) { switch (_a.label) { case 0: this.changed = false; if (this.timeout) { clearTimeout(this.timeout); } return [4 /*yield*/, this.selectOption(option)]; case 1: _a.sent(); this.isValid = validate(option.value.toString(), this.validation); // this.timeout = setTimeout(() => { // setTimeout adds validation delay effect this.changed = true; return [2 /*return*/]; } }); }); }, isSelected: function (option) { return option.value === this.value; }, closeOptions: function () { this.optionsOpened = false; }, openOptions: function () { var _this = this; this.optionsOpened = true; var listener = function (e) { if (e.target !== _this.$refs.selected) { _this.closeOptions(); document.removeEventListener('mousedown', listener); } }; document.addEventListener('mousedown', listener); }, toggleOptions: function () { this.optionsOpened ? this.closeOptions() : this.openOptions(); }, selectOption: function (option) { this.selectedOptionLabel = option.label; this.$emit('input', option.value); this.closeOptions(); } }, }); /* script */ var __vue_script__$3 = script$3; /* template */ var __vue_render__$3 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { class: [ "select", { disabled: _vm.disabled, required: _vm.isRequired, valid: _vm.showValidation && _vm.isValid, invalid: _vm.showValidation && !_vm.isValid, opened: _vm.optionsOpened } ] }, [ _vm.label ? _c( "h5", { class: ["select-label"] }, [ _vm.isRequired ? _c("RequiredStar") : _vm._e(), _vm._v(" "), _c("span", { domProps: { innerHTML: _vm._s(_vm.label) } }) ], 1 ) : _vm._e(), _vm._v(" "), _c("div", { class: ["select-container"] }, [ _c( "div", { ref: "selected", class: ["selected-option"], on: { mousedown: _vm.toggleOptions } }, [ _vm.placeholderExternal ? _c( "span", { class: ["placeholder-external"], on: { mousedown: _vm.toggleOptions } }, [ _vm._v( "\n " + _vm._s(_vm.placeholder) + "\n " ) ] ) : _vm._e(), _vm._v( "\n " + _vm._s(_vm.selectedOptionLabel) + "\n " ) ] ), _vm._v(" "), _c( "ul", { directives: [ { name: "show", rawName: "v-show", value: _vm.optionsOpened, expression: "optionsOpened" } ], class: ["select-options"] }, _vm._l(_vm.options, function(option) { return _c("li", { key: "select-" + _vm.name + "-option-" + option.value, class: ["select-option", { active: _vm.isSelected(option) }], domProps: { innerHTML: _vm._s(option.label ? option.label : "-") }, on: { mousedown: function($event) { return _vm.recheck(option) } } }) }), 0 ), _vm._v(" "), _vm.error ? _c("span", { class: ["error-msg"], domProps: { innerHTML: _vm._s(_vm.error) } }) : _vm._e() ]) ] ) }; var __vue_staticRenderFns__$3 = []; __vue_render__$3._withStripped = true; /* style */ var __vue_inject_styles__$3 = undefined; /* scoped */ var __vue_scope_id__$3 = "data-v-222093af"; /* module identifier */ var __vue_module_identifier__$3 = undefined; /* functional template */ var __vue_is_functional_template__$3 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$3 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined ); var script$4 = Vue.extend({ name: 'Tooltip', props: { content: { type: String, required: true, }, placement: { type: String, default: 'top', }, interactive: { type: Boolean, default: true, }, theme: { type: String, default: 'light', }, arrow: { type: Boolean, default: true, }, }, }); /* script */ var __vue_script__$4 = script$4; /* template */ var __vue_render__$4 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c("span", { directives: [ { name: "tippy", rawName: "v-tippy", value: { placement: _vm.placement, interactive: _vm.interactive, theme: _vm.theme, arrow: _vm.arrow }, expression: "{\n placement: placement,\n interactive: interactive,\n theme: theme,\n arrow: arrow\n }" } ], class: ["v-tooltip"], attrs: { content: _vm.content } }) }; var __vue_staticRenderFns__$4 = []; __vue_render__$4._withStripped = true; /* style */ var __vue_inject_styles__$4 = undefined; /* scoped */ var __vue_scope_id__$4 = "data-v-38d43de1"; /* module identifier */ var __vue_module_identifier__$4 = undefined; /* functional template */ var __vue_is_functional_template__$4 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$4 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined ); var script$5 = Vue.extend({ components: { RequiredStar: __vue_component__$2, }, props: { label: { type: String, default: '', }, name: { type: String, required: true, }, disabled: { type: Boolean, default: false, }, value: { type: [Boolean, Array], }, multi: { type: Boolean, default: false, }, choices: { type: Array, default: function () { return []; }, }, error: { type: String, default: null, }, validation: { type: String, default: '', }, }, data: function () { return { changed: false, }; }, computed: { isValid: { get: function () { return !(this.error && this.error.length > 0); }, set: function (isValid) { var errorMsg = !isValid ? getErrorMsg(this.validation) : ''; this.$emit('update:error', errorMsg); }, }, showValidation: function () { if (!this.value && !this.isRequired) { return false; } return this.changed; }, isRequired: function () { return (typeof this.validation === 'string' && this.validation.length > 0 && this.validation.includes('required')); }, }, watch: { value: function () { this.changed = true; }, }, mounted: function () { if (this.value || this.error) { this.changed = true; } }, methods: { choiceIsChecked: function (choice) { return Array.isArray(this.value) && this.value.includes(choice); }, getValue: function (item) { return typeof item === 'string' ? item : item.value; }, getLabel: function (item) { return typeof item === 'string' ? item : item.label; }, recheck: function (value) { this.changed = false; this.multi ? this.updateMultiValue(value) : this.updateValue(value); var valueToValidate = this.multi ? (JSON.stringify(this.value).length > 2).toString() : (!value).toString(); this.isValid = validate(valueToValidate, this.validation); // this.timeout = setTimeout(() => { // setTimeout adds validation delay effect this.changed = true; // }, 800) }, updateValue: function (value) { this.$emit('input', !value); }, updateMultiValue: function (value) { var values = this.value ? this.value : []; values.includes(value) ? values.splice(values.indexOf(value), 1) : values.push(value); this.$emit('input', values); }, }, }); /* script */ var __vue_script__$5 = script$5; /* template */ var __vue_render__$5 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { class: [ "checkbox", { disabled: _vm.disabled, required: _vm.isRequired, multi: _vm.multi, valid: _vm.showValidation && _vm.isValid, invalid: _vm.showValidation && !_vm.isValid } ] }, [ _vm.multi && _vm.choices.length > 0 ? [ _c( "div", { class: ["title"] }, [ _vm.isRequired ? _c("RequiredStar") : _vm._e(), _vm._v(" "), _c("span", { domProps: { innerHTML: _vm._s(_vm.label) } }), _vm._v(" "), _vm.error ? _c("span", { class: ["error-msg"], domProps: { innerHTML: _vm._s(_vm.error) } }) : _vm._e() ], 1 ), _vm._v(" "), _vm._l(_vm.choices, function(choice) { return [ _c( "label", { key: "checkbox-multi-" + _vm.getValue(choice), class: [ "checkbox-label", { checked: _vm.choiceIsChecked(choice), disabled: _vm.disabled, required: _vm.isRequired, valid: _vm.choiceIsChecked(choice) && _vm.showValidation && _vm.isValid, invalid: !_vm.choiceIsChecked(choice) && _vm.showValidation && !_vm.isValid } ] }, [ _c("input", { attrs: { type: "checkbox", name: _vm.name, required: _vm.isRequired, disabled: _vm.disabled }, domProps: { value: _vm.getValue(choice), checked: _vm.choiceIsChecked(choice) }, on: { change: function($event) { return _vm.recheck(choice) } } }), _vm._v( "\n " + _vm._s(_vm.getLabel(choice)) + "\n " ) ] ) ] }) ] : [ _c( "label", { class: [ "checkbox-label", { checked: _vm.value, disabled: _vm.disabled, required: _vm.isRequired, valid: _vm.value === true && _vm.showValidation && _vm.isValid, invalid: _vm.value === false && _vm.showValidation && !_vm.isValid } ] }, [ _c("input", { attrs: { type: "checkbox", name: _vm.name, required: _vm.isRequired, disabled: _vm.disabled }, domProps: { value: _vm.value, checked: _vm.value }, on: { change: function($event) { return _vm.recheck(_vm.value) } } }), _vm._v(" "), _c("span", { class: ["text"] }, [ _c( "span", { class: ["label"] }, [ _vm.isRequired ? _c("RequiredStar") : _vm._e(), _vm._v(" "), _c("span", { domProps: { innerHTML: _vm._s(_vm.label) } }) ], 1 ), _vm._v(" "), _vm.error ? _c("span", { class: ["error-msg"], domProps: { innerHTML: _vm._s(_vm.error) } }) : _vm._e() ]) ] ) ] ], 2 ) }; var __vue_staticRenderFns__$5 = []; __vue_render__$5._withStripped = true; /* style */ var __vue_inject_styles__$5 = undefined; /* scoped */ var __vue_scope_id__$5 = "data-v-40a9ac46"; /* module identifier */ var __vue_module_identifier__$5 = undefined; /* functional template */ var __vue_is_functional_template__$5 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$5 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 }, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined ); var script$6 = Vue.extend({ components: { Icon: __vue_component__, Tooltip: __vue_component__$4 }, props: { tippyConfig: { type: Object, default: function () { return ({ arrow: true, theme: 'light', placement: 'top', interactive: true, }); }, }, items: { type: Array, required: true, }, showTooltipIcon: { type: Boolean, default: true } }, }); /* script */ var __vue_script__$6 = script$6; /* template */ var __vue_render__$6 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _vm.items ? _c( "ul", { staticClass: "iconed-list" }, _vm._l(_vm.items, function(item, index) { return _c( "li", { key: item + index, staticClass: "iconed-list-item" }, [ _c("Icon", { staticClass: "item-icon" }, [ _c("img", { attrs: { src: "https://" + item.iconUrl, alt: "" } }) ]), _vm._v(" "), item.tooltipContent && !_vm.showTooltipIcon ? _c( "p", { directives: [ { name: "tippy", rawName: "v-tippy", value: _vm.tippyConfig, expression: "tippyConfig" } ], staticClass: "item-text", attrs: { content: item.tooltipContent } }, [_vm._v(_vm._s(item.label) + "\n ")] ) : _vm._e(), _vm._v(" "), item.tooltipContent && _vm.showTooltipIcon ? _c( "p", { staticClass: "item-text" }, [ _vm._v(_vm._s(item.label) + "\n "), _vm.showTooltipIcon ? _c("Tooltip", { attrs: { content: item.tooltipContent } }) : _vm._e() ], 1 ) : _c("p", { staticClass: "item-text" }, [ _vm._v(_vm._s(item.label)) ]) ], 1 ) }), 0 ) : _vm._e() }; var __vue_staticRenderFns__$6 = []; __vue_render__$6._withStripped = true; /* style */ var __vue_inject_styles__$6 = undefined; /* scoped */ var __vue_scope_id__$6 = "data-v-8d71fb74"; /* module identifier */ var __vue_module_identifier__$6 = undefined; /* functional template */ var __vue_is_functional_template__$6 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$6 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 }, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined ); var script$7 = Vue.extend({ filters: { pln: function (value) { return value + ' zł'; }, }, props: { offer: { type: Object, required: true, default: function () { return ({ startPrice: 1, monthlyRate: 0, installments: 0, }); }, }, recurrentOfferText: { type: String, default: '', }, }, computed: { installments: function () { if (this.offer.installments) { var exceptions = ['2', '3', '4']; var text = exceptions.includes(this.offer.installments.toString().substr(-1)) ? 'raty' : 'rat'; return this.offer.installments + " " + text; } return ''; }, }, }); /* script */ var __vue_script__$7 = script$7; /* template */ var __vue_render__$7 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c("div", { staticClass: "phone-offer-box" }, [ _c("p", { staticClass: "offer-start-price" }, [ _c("span", { staticClass: "highlight" }, [ _vm._v(_vm._s(_vm._f("pln")(_vm.offer.startPrice))) ]), _vm._v(" na start\n ") ]), _vm._v(" "), _c("p", { staticClass: "offer-recurent-price" }, [ _c("span", { staticClass: "highlight" }, [ _vm._v(_vm._s(_vm._f("pln")(_vm.offer.monthlyRate))) ]), _vm._v(" "), _vm.offer.installments ? _c("span", [_vm._v("x " + _vm._s(_vm.installments) + " za sprzęt")]) : _c("span", { domProps: { innerHTML: _vm._s(_vm.recurrentOfferText) } }) ]) ]) }; var __vue_staticRenderFns__$7 = []; __vue_render__$7._withStripped = true; /* style */ var __vue_inject_styles__$7 = undefined; /* scoped */ var __vue_scope_id__$7 = undefined; /* module identifier */ var __vue_module_identifier__$7 = undefined; /* functional template */ var __vue_is_functional_template__$7 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$7 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 }, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined ); var script$8 = Vue.extend({ name: 'DeviceBox', components: { DeviceOfferBox: __vue_component__$7, Btn: __vue_component__$1, Icon: __vue_component__, }, props: { tilt: { type: Boolean, default: true, }, displayDetails: { type: Boolean, default: true, }, animations: { type: String, default: null, }, viewType: { type: String, default: 'tile', }, device: { type: Object, required: true, }, offer: { type: Object, }, }, computed: { name: function () { return "<span class=\"device-name-brand\">" + this.device.brand + "</span> <span class=\"device-name-model\">" + this.device.model + "</span>"; }, deviceURL: function () { // At this moment it's only temporary URL as we don't know how we will call devices in new system. return "/telefony?sku=" + this.device.sku; }, }, methods: { goToURL: function (url) { this.$router.push(url); }, }, }); /* script */ var __vue_script__$8 = script$8; /* template */ var __vue_render__$8 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { staticClass: "device device-box", class: [_vm.viewType, _vm.animations], on: { click: function($event) { return _vm.goToURL(_vm.deviceURL) } } }, [ _vm.viewType === "tile" ? _c("h2", { staticClass: "device-name", domProps: { innerHTML: _vm._s(_vm.name) } }) : _vm._e(), _vm._v(" "), _c("div", { staticClass: "device-image-container" }, [ _vm.tilt ? _c("img", { directives: [{ name: "tilt", rawName: "v-tilt" }], staticClass: "device-image shake", attrs: { src: _vm.device.image, alt: _vm.device.brand + " " + _vm.device.model } }) : _c("img", { staticClass: "device-image shake", attrs: { src: _vm.device.image, alt: _vm.device.brand + " " + _vm.device.model } }) ]), _vm._v(" "), _vm.displayDetails ? _c("div", { staticClass: "device-details" }, [ _c("div", { staticClass: "device-details-technical" }, [ _vm.viewType === "bar" ? _c("h2", { staticClass: "device-name", domProps: { innerHTML: _vm._s(_vm.name) } }) : _vm._e(), _vm._v(" "), _c("div", { staticClass: "device-colors" }, [ _c("p", { staticClass: "device-colors-text" }, [ _vm._v("Kolor:") ]), _vm._v(" "), _c( "ul", { staticClass: "device-colors-list" }, _vm._l(_vm.device.colors, function(item, index) { return _c("li", { key: index }, [ _c("span", { staticClass: "device-colors-list-item", style: "background-image: url('" + item + "')" }) ]) }), 0 ) ]), _vm._v(" "), _c("div", { staticClass: "device-technical-details" }, [ _vm.viewType === "bar" ? _c( "ul", { staticClass: "device-technical-details-list" }, _vm._l(_vm.device.technicalDetails, function( item, index ) { return _c( "li", { key: index, staticClass: "device-technical-details-item" }, [ item.icon ? _c("Icon", { staticClass: "item-icon" }, [ _vm._v(_vm._s(item.icon)) ]) : _c("p", { staticClass: "item-text" }, [ _vm._v(_vm._s(item.text)) ]), _vm._v(" "), _c("p", { staticClass: "item-title", domProps: { innerHTML: _vm._s(item.title) } }) ], 1 ) }), 0 ) : _vm._e() ]) ]), _vm._v(" "), _vm.displayDetails ? _c( "div", { staticClass: "device-details-offer" }, [ _c("DeviceOfferBox", { attrs: { offer: _vm.offer } }), _vm._v(" "), _c( "Btn", { staticClass: "primary", attrs: { id: "phone-" + _vm.device.sku, href: _vm.deviceURL } }, [_vm._v("Sprawdź")] ) ], 1 ) : _vm._e() ]) : _vm._e() ] ) }; var __vue_staticRenderFns__$8 = []; __vue_render__$8._withStripped = true; /* style */ var __vue_inject_styles__$8 = undefined; /* scoped */ var __vue_scope_id__$8 = "data-v-5aad64e0"; /* module identifier */ var __vue_module_identifier__$8 = undefined; /* functional template */ var __vue_is_functional_template__$8 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var __vue_component__$8 = /*#__PURE__*/normalizeComponent( { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 }, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined ); var script$9 = Vue.extend({ components: { RequiredStar: __vue_component__$2 }, props: { id: { type: String, required: true, }, type: { type: String, required: true, }, label: { type: String, default: null, }, name: { type: String, required: true, }, value: { type: String, default: null, required: false, }, disabled: { type: Boolean, default: false, }, pattern: { type: RegExp, default: null, }, placeholder: { type: String, default: null, }, placeholderExternal: { type: Boolean, default: false }, error: { type: String, default: null, }, validation: { type: String, default: '', } }, data: function () { return { changed: false, focused: false, timeout: null }; }, computed: { // either filled label or aria label are required for WCAG reasons