TPS
/
exchange
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: styles of country code input

This commit is contained in:
saparatayev 2022-01-15 14:57:49 +05:00
parent ab1f7314c6
commit a100760bc9
3 changed files with 132 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
public/js/resources_js_Pages_Exports_vue.js
View File

@ -910,6 +910,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
//
//
//
//
//
//
//
//
//
//
//
// import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
props: {
@ -1643,7 +1651,7 @@ __webpack_require__.r(__webpack_exports__);
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
// Module
___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n color: rgb(255, 0, 0);\n}\n", ""]);
___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n color: rgb(255, 0, 0);\n}\n.vue-country-select {\n border-color: #004691 !important;\n}\n.vue-country-select .dropdown {\n padding: 0 0.3em 0 0!important;\n}\n.vue-country-select .dropdown-list {\n z-index: 2 !important;\n border-color: #004691 !important;\n}\n.vue-country-select .dropdown-item.last-preferred {\n border-bottom: 1px solid #004691 !important;\n}\n", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@ -2113,26 +2121,49 @@ var render = function() {
"a-form-item",
{ attrs: { label: _vm.trans("Phone") } },
[
_c("vue-country-code", {
attrs: {
preferredCountries: ["tm"],
defaultCountry: "tm"
},
on: { onSelect: _vm.onSelect }
}),
_vm._v(" "),
_c("span", [_vm._v(_vm._s(_vm.countryCode))]),
_vm._v(" "),
_c("a-input", {
attrs: { placeholder: _vm.trans("Phone") },
model: {
value: _vm.form.phone,
callback: function($$v) {
_vm.$set(_vm.form, "phone", $$v)
},
expression: "form.phone"
}
}),
_c(
"a-row",
{ attrs: { gutter: 8, type: "flex", align: "middle" } },
[
_c(
"a-col",
{ attrs: { span: 3 } },
[
_c("vue-country-code", {
attrs: {
preferredCountries: ["tm"],
defaultCountry: "tm"
},
on: { onSelect: _vm.onSelect }
})
],
1
),
_vm._v(" "),
_c("a-col", { attrs: { span: 2 } }, [
_c("span", [_vm._v(_vm._s(_vm.countryCode))])
]),
_vm._v(" "),
_c(
"a-col",
{ attrs: { span: 19 } },
[
_c("a-input", {
attrs: { placeholder: _vm.trans("Phone") },
model: {
value: _vm.form.phone,
callback: function($$v) {
_vm.$set(_vm.form, "phone", $$v)
},
expression: "form.phone"
}
})
],
1
)
],
1
),
_vm._v(" "),
_vm.validationErrorsObj.phone
? _vm._l(_vm.validationErrorsObj.phone, function(item) {

73
public/js/resources_js_Pages_Imports_vue.js
View File

@ -910,6 +910,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
//
//
//
//
//
//
//
//
//
//
//
// import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
props: {
@ -1528,7 +1536,7 @@ __webpack_require__.r(__webpack_exports__);
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
// Module
___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n color: rgb(255, 0, 0);\n}\n", ""]);
___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n color: rgb(255, 0, 0);\n}\n.vue-country-select {\n border-color: #004691 !important;\n}\n.vue-country-select .dropdown {\n padding: 0 0.3em 0 0!important;\n}\n.vue-country-select .dropdown-list {\n z-index: 2 !important;\n border-color: #004691 !important;\n}\n.vue-country-select .dropdown-item.last-preferred {\n border-bottom: 1px solid #004691 !important;\n}\n", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@ -1998,26 +2006,49 @@ var render = function() {
"a-form-item",
{ attrs: { label: _vm.trans("Phone") } },
[
_c("vue-country-code", {
attrs: {
preferredCountries: ["tm"],
defaultCountry: "tm"
},
on: { onSelect: _vm.onSelect }
}),
_vm._v(" "),
_c("span", [_vm._v(_vm._s(_vm.countryCode))]),
_vm._v(" "),
_c("a-input", {
attrs: { placeholder: _vm.trans("Phone") },
model: {
value: _vm.form.phone,
callback: function($$v) {
_vm.$set(_vm.form, "phone", $$v)
},
expression: "form.phone"
}
}),
_c(
"a-row",
{ attrs: { gutter: 8, type: "flex", align: "middle" } },
[
_c(
"a-col",
{ attrs: { span: 3 } },
[
_c("vue-country-code", {
attrs: {
preferredCountries: ["tm"],
defaultCountry: "tm"
},
on: { onSelect: _vm.onSelect }
})
],
1
),
_vm._v(" "),
_c("a-col", { attrs: { span: 2 } }, [
_c("span", [_vm._v(_vm._s(_vm.countryCode))])
]),
_vm._v(" "),
_c(
"a-col",
{ attrs: { span: 19 } },
[
_c("a-input", {
attrs: { placeholder: _vm.trans("Phone") },
model: {
value: _vm.form.phone,
callback: function($$v) {
_vm.$set(_vm.form, "phone", $$v)
},
expression: "form.phone"
}
})
],
1
)
],
1
),
_vm._v(" "),
_vm.validationErrorsObj.phone
? _vm._l(_vm.validationErrorsObj.phone, function(item) {

35
resources/js/Components/CreateRequestModal.vue
View File

@ -25,13 +25,21 @@
<a-form-item
:label="trans('Phone')"
>
<vue-country-code
@onSelect="onSelect"
:preferredCountries="['tm']"
:defaultCountry="'tm'">
</vue-country-code>
<span>{{ countryCode }}</span>
<a-input v-model="form.phone" :placeholder="trans('Phone')" />
<a-row :gutter="8" type="flex" align="middle">
<a-col :span="3">
<vue-country-code
@onSelect="onSelect"
:preferredCountries="['tm']"
:defaultCountry="'tm'">
</vue-country-code>
</a-col>
<a-col :span="2">
<span>{{ countryCode }}</span>
</a-col>
<a-col :span="19">
<a-input v-model="form.phone" :placeholder="trans('Phone')" />
</a-col>
</a-row>
<template v-if="validationErrorsObj.phone">
<span class="validation-error" v-for="item in validationErrorsObj.phone" :key="item">{{ item }}</span>
</template>
@ -283,4 +291,17 @@ export default {
.validation-error {
color: rgb(255, 0, 0);
}
.vue-country-select {
border-color: #004691 !important;
}
.vue-country-select .dropdown {
padding: 0 0.3em 0 0!important;
}
.vue-country-select .dropdown-list {
z-index: 2 !important;
border-color: #004691 !important;
}
.vue-country-select .dropdown-item.last-preferred {
border-bottom: 1px solid #004691 !important;
}
</style>