{"version":3,"file":"CBpHDGP5.js","sources":["../../../../components/common/text-input/index.vue","../../../../components/common/phone-input-func/index.vue","../../../../forms/verifyPhoneSchema.schema.js"],"sourcesContent":["<template>\n    <div class=\"relative\">\n        <label\n            v-if=\"label\"\n            class=\"mb-2 block text-sm font-medium text-grey-600\"\n        >\n            {{ label }}\n            <span\n                v-if=\"isRequired\"\n                title=\"required\"\n                class=\"text-sm font-normal text-[#FF5959]\"\n            >\n                *\n            </span>\n        </label>\n        <div class=\"relative pb-5\">\n            <!-- <div\n                v-if=\"errorMessage && enableTooltip\"\n                :id=\"name + 'tooltip'\"\n                role=\"tooltip\"\n                class=\"absolute right-0 top-[-3px] z-20 inline-block -translate-y-full rounded-lg bg-grey-400 px-3 py-2 text-[10px] text-white shadow-sm\"\n            >\n                {{ $t(errorMessage) }}\n                <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div> -->\n            <input\n                :id=\"name + '_id'\"\n                class=\"block w-full appearance-none rounded-lg bg-white p-2.5 focus:ring-0\"\n                :class=\"[\n                    classes,\n                    disabled ? 'bg-bigg-gray' : '',\n                    errorMessage\n                        ? 'border-error focus:border-error'\n                        : 'border-[#ECECEC] focus:border-bigg-yellow',\n                ]\"\n                autocomplete=\"off\"\n                :name=\"name\"\n                :type=\"type\"\n                :value=\"inputValue\"\n                :placeholder=\"placeholder\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n                @input=\"handleChange\"\n                @blur=\"handleBlur\"\n            />\n            <div\n                v-if=\"copy\"\n                class=\"absolute inset-y-0 right-0 flex items-center pr-3\"\n            >\n                <div\n                    class=\"cursor-pointer rounded-2xl bg-bigg-yellow px-3 py-1 text-center text-xs font-normal italic text-black\"\n                    @click=\"handleCopy\"\n                >\n                    {{ copied ? $t('common.copied') : $t('common.copy') }}\n                </div>\n            </div>\n            <div\n                v-if=\"confirmed\"\n                class=\"absolute inset-y-0 right-0 flex items-center pr-3\"\n            >\n                <img\n                    :src=\"`${\n                        useRuntimeConfig().public.staticUrl\n                    }/assets/img/icons/check.svg`\"\n                    alt=\"check_icon\"\n                />\n            </div>\n            <div\n                v-if=\"money\"\n                class=\"absolute inset-y-0 right-0 flex items-center pr-3\"\n            >\n                <div class=\"text-right text-sm font-medium text-purple-800\">\n                    {{ moneyValue }} MissingSymbol\n                </div>\n            </div>\n        </div>\n        <span v-if=\"errorMessage\" class=\"absolute bottom-0 text-xs text-error\">\n            {{ $t(errorMessage) }}\n        </span>\n        <!-- <span class=\"text-red text-xs\" v-show=\"errorMessage || meta.valid\">\n            {{ errorMessage || successMessage }}\n        </span> -->\n    </div>\n</template>\n<script setup>\nimport { toRef } from 'vue'\nimport { useField } from 'vee-validate'\nimport { useClipboard } from '@vueuse/core'\n\nconst props = defineProps({\n    type: {\n        type: String,\n        default: 'text',\n    },\n    enableTooltip: {\n        type: Boolean,\n        default: true,\n    },\n    value: {\n        type: String,\n        default: '',\n    },\n    name: {\n        type: String,\n        required: true,\n    },\n    label: {\n        type: String,\n        default: '',\n    },\n    copy: {\n        type: Boolean,\n        default: false,\n    },\n    confirmed: {\n        type: Boolean,\n        default: false,\n    },\n    successMessage: {\n        type: String,\n        default: '',\n    },\n    placeholder: {\n        type: String,\n        default: '',\n    },\n    classes: {\n        type: String,\n        default: '',\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n    readonly: {\n        type: Boolean,\n        default: false,\n    },\n    money: {\n        type: Boolean,\n        default: false,\n    },\n    isRequired: {\n        type: Boolean,\n        default: false,\n    },\n})\nconst name = toRef(props, 'name')\nconst theValue = toRef(props, 'value')\n\nconst {\n    value: inputValue,\n    errorMessage,\n    handleBlur,\n    handleChange,\n    // meta,\n} = useField(name, undefined, {\n    initialValue: props.value,\n})\n\nwatch(\n    () => theValue.value,\n\n    (newVal, _) => {\n        if (newVal) {\n            inputValue.value = newVal\n        }\n    }\n)\nconst moneyValue = computed(() => {\n    if (inputValue.value) {\n        return new Number(inputValue.value * 1000).toLocaleString()\n    } else {\n        return 0\n    }\n})\nconst { copy: copyValue, copied, isSupported } = useClipboard()\nconst handleCopy = () => {\n    if (inputValue.value && isSupported) {\n        copyValue(inputValue.value)\n    }\n}\n</script>\n\n<style>\n/* Chrome, Safari, Edge, Opera */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n\n/* Firefox */\ninput[type='number'] {\n    -moz-appearance: textfield;\n}\n</style>\n<style lang=\"scss\" scoped>\n@media (max-width: 1023px) {\n    .group-input {\n        background: #f6f7fa;\n        > div > div {\n            display: grid;\n            grid-template-columns: 1fr 2.2fr 1fr;\n            align-items: center;\n            label {\n                position: relative;\n                order: 1;\n                transform: unset;\n                padding-left: 5px;\n                top: 0;\n                &:before {\n                    content: unset;\n                }\n            }\n            input {\n                order: 2;\n                background: none;\n                border: none;\n                text-align: right;\n                padding: 0;\n            }\n        }\n    }\n}\n</style>\n","<template>\n    <div class=\"relative\" :class=\"{ 'pb-5': !errorMessage }\">\n        <label\n            v-if=\"label\"\n            class=\"mb-2 block text-sm font-medium text-grey-600\"\n        >\n            {{ label }}\n            <span\n                v-if=\"isRequired\"\n                title=\"required\"\n                class=\"text-sm font-normal text-[#FF5959]\"\n            >\n                *\n            </span>\n        </label>\n        <div class=\"form-group relative\">\n            <div\n                :class=\"[\n                    classes,\n                    'flag',\n                    errorMessage || error\n                        ? '!focus:border-error !border-error'\n                        : '!focus:border-bigg-yellow',\n                ]\"\n            >\n                <img\n                    :src=\"`${staticUrl}/assets/icons/flag-thailand.svg`\"\n                    alt=\"flag\"\n                />\n                <!-- <span>+66</span> -->\n            </div>\n            <input\n                :id=\"name + '_id'\"\n                class=\"block w-full appearance-none rounded-lg p-2.5 focus:ring-0\"\n                :class=\"[\n                    classes,\n                    disabled ? 'bg-bigg-gray' : '',\n                    errorMessage || error\n                        ? 'border-error focus:border-error'\n                        : 'border-[#ECECEC] focus:border-bigg-yellow',\n                ]\"\n                autocomplete=\"off\"\n                :name=\"name\"\n                :type=\"type\"\n                :value=\"inputValue\"\n                :placeholder=\"placeholder\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n                @input=\"handleChange\"\n                @blur=\"handleBlur\"\n            />\n            <slot name=\"func\" :data=\"inputValue\"></slot>\n        </div>\n        <div v-if=\"errorMessage\" class=\"text-xs text-error\">\n            {{ $t(errorMessage) }}\n        </div>\n        <div v-if=\"error\" class=\"text-xs text-error\">\n            {{ $t(error) }}\n        </div>\n    </div>\n</template>\n<script setup>\nimport { toRef } from 'vue'\nimport { useField } from 'vee-validate'\nconst staticUrl = useRuntimeConfig().public.staticUrl\nconst props = defineProps({\n    type: {\n        type: String,\n        default: 'text',\n    },\n    enableTooltip: {\n        type: Boolean,\n        default: true,\n    },\n    value: {\n        type: String,\n        default: '',\n    },\n    name: {\n        type: String,\n        required: true,\n    },\n    label: {\n        type: String,\n        default: '',\n    },\n    successMessage: {\n        type: String,\n        default: '',\n    },\n    placeholder: {\n        type: String,\n        default: '',\n    },\n    classes: {\n        type: String,\n        default: '',\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n    readonly: {\n        type: Boolean,\n        default: false,\n    },\n    isRequired: {\n        type: Boolean,\n        default: false,\n    },\n    error: {\n        type: String,\n        default: null,\n    },\n})\nconst name = toRef(props, 'name')\nconst theValue = toRef(props, 'value')\n\nconst {\n    value: inputValue,\n    errorMessage,\n    handleBlur,\n    handleChange,\n    // meta,\n} = useField(name, undefined, {\n    initialValue: props.value,\n})\n\nwatch(\n    () => theValue.value,\n\n    (newVal, _) => {\n        if (newVal) {\n            inputValue.value = newVal\n        }\n    }\n)\n</script>\n\n<style>\n/* Chrome, Safari, Edge, Opera */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n\n/* Firefox */\ninput[type='number'] {\n    -moz-appearance: textfield;\n}\n</style>\n<style lang=\"scss\" scoped>\n.form-group {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    .flag {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: 1px solid #ececec;\n        border-right: none;\n        border-top-left-radius: 0.25rem;\n        border-bottom-left-radius: 0.25rem;\n        img {\n            width: 26px;\n            height: 26px;\n            object-fit: contain;\n            margin-right: 4px;\n        }\n        span {\n            font-weight: 400;\n            font-size: 0.875rem;\n            line-height: 1.25rem;\n        }\n    }\n    input {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n}\n@media (max-width: 1023px) {\n    .group-input {\n        background: #f6f7fa;\n        > div > div {\n            display: grid;\n            grid-template-columns: 1fr 2.2fr 1fr;\n            align-items: center;\n            label {\n                position: relative;\n                order: 1;\n                transform: unset;\n                padding-left: 5px;\n                top: 0;\n                &:before {\n                    content: unset;\n                }\n            }\n            input {\n                order: 2;\n                background: none;\n                border: none;\n                text-align: right;\n                padding: 0;\n            }\n        }\n    }\n}\ninput::placeholder {\n    color: #b4b4b4;\n}\n</style>\n","import * as Yup from 'yup'\n\nexport const verifyPhoneSchema = Yup.object().shape({\n    phone: Yup.string()\n        .required('error.required')\n        .test('phonenumber-not-match', function (value) {\n            if (/[^0-9]/.test(value)) {\n                return this.createError({\n                    message: 'error.phone_only_digits',\n                })\n            } else if (/^[1-9][0-9]*$/.test(value)) {\n                return this.createError({\n                    message: 'error.start_with_zero',\n                })\n            } else if (value.length < 10) {\n                return this.createError({\n                    message: 'error.min_10_digits',\n                })\n            } else if (value.length > 12) {\n                return this.createError({\n                    message: 'error.max_12_digits',\n                })\n            } else {\n                return true\n            }\n        }),\n    username: Yup.string()\n        .required('error.required')\n        .min(6, 'error.min_6_character')\n        .max(30, 'error.max_30_character')\n        .matches(/^[\\u0E00-\\u0E7Fa-zA-Z0-9_]+$/, 'error.alphanumeric_only'),\n})\n"],"names":["props","__props","name","toRef","theValue","inputValue","errorMessage","handleBlur","handleChange","useField","watch","newVal","_","moneyValue","computed","copyValue","copied","isSupported","useClipboard","handleCopy","staticUrl","useRuntimeConfig","verifyPhoneSchema","Yup.object","Yup.string","value"],"mappings":"+0CAyFA,MAAMA,EAAQC,EA0DRC,EAAOC,EAAMH,EAAO,MAAM,EAC1BI,EAAWD,EAAMH,EAAO,OAAO,EAE/B,CACF,MAAOK,EACP,aAAAC,EACA,WAAAC,EACA,aAAAC,CAEJ,EAAIC,EAASP,EAAM,OAAW,CAC1B,aAAcF,EAAM,KACxB,CAAC,EAEDU,EACI,IAAMN,EAAS,MAEf,CAACO,EAAQC,IAAM,CACPD,IACAN,EAAW,MAAQM,EAE/B,CACA,EACA,MAAME,EAAaC,EAAS,IACpBT,EAAW,MACJ,IAAI,OAAOA,EAAW,MAAQ,GAAI,EAAE,eAAc,EAElD,CAEd,EACK,CAAE,KAAMU,EAAW,OAAAC,EAAQ,YAAAC,CAAa,EAAGC,EAAY,EACvDC,EAAa,IAAM,CACjBd,EAAW,OAASY,GACpBF,EAAUV,EAAW,KAAK,CAElC,s5DCrHA,MAAMe,EAAYC,EAAkB,EAAC,OAAO,UACtCrB,EAAQC,EAkDRC,EAAOC,EAAMH,EAAO,MAAM,EAC1BI,EAAWD,EAAMH,EAAO,OAAO,EAE/B,CACF,MAAOK,EACP,aAAAC,EACA,WAAAC,EACA,aAAAC,CAEJ,EAAIC,EAASP,EAAM,OAAW,CAC1B,aAAcF,EAAM,KACxB,CAAC,EAED,OAAAU,EACI,IAAMN,EAAS,MAEf,CAACO,EAAQC,IAAM,CACPD,IACAN,EAAW,MAAQM,EAE/B,CACA,+/BCtIaW,GAAoBC,EAAY,EAAC,MAAM,CAChD,MAAOC,EAAU,EACZ,SAAS,gBAAgB,EACzB,KAAK,wBAAyB,SAAUC,EAAO,CAC5C,MAAI,SAAS,KAAKA,CAAK,EACZ,KAAK,YAAY,CACpB,QAAS,yBACZ,CAAA,EACM,gBAAgB,KAAKA,CAAK,EAC1B,KAAK,YAAY,CACpB,QAAS,uBACZ,CAAA,EACMA,EAAM,OAAS,GACf,KAAK,YAAY,CACpB,QAAS,qBACZ,CAAA,EACMA,EAAM,OAAS,GACf,KAAK,YAAY,CACpB,QAAS,qBACZ,CAAA,EAEM,EAEvB,CAAS,EACL,SAAUD,EAAU,EACf,SAAS,gBAAgB,EACzB,IAAI,EAAG,uBAAuB,EAC9B,IAAI,GAAI,wBAAwB,EAChC,QAAQ,+BAAgC,yBAAyB,CAC1E,CAAC"}