{"version":3,"file":"BaseInput-2hKH2bci.js","sources":["../../src/components/Forms/BaseInput.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 px-2\"\n       :class=\"{'input-padding': !!prependInnerText || !!appendInnerText}\">\n    <flex-layout v-if=\"props.label\" class=\"w-100\" @click.stop>\n      <div>\n        <base-text :color=\"labelColor\">{{ props.label }}</base-text>\n      </div>\n      <required-tag-text v-if=\"props.requiredTag || props.primaryRequiredTag\" :color=\"props.primaryRequiredTag? 'primary' : 'error'\">必須</required-tag-text>\n    </flex-layout >\n    <base-text v-if=\"props.hint\" size=\"xs\" v-html=\"props.hint\" @click.stop/>\n    <div class=\"input-row\" :class=\"clickableClass\">\n      <slot name=\"prepend\"/>\n      <div class=\"input-container\">\n        <slot name=\"prepend-inner\"/>\n        <div v-if=\"prependInnerText\" class=\"prepend-input\" :class=\"prependInnerClass\">\n          <base-text no-wrap>{{ prependInnerText }}</base-text>\n        </div>\n        <input\n            class=\"w-100\"\n            :class=\"{ 'invalidField': !!validate(rules, props.modelValue) }\"\n            :autocomplete=\"props.autocomplete\"\n            :value=\"formattedValue\"\n            :placeholder=\"props.placeholder\"\n            :type=\"props.type\"\n            :maxlength=\"props.maxLength\"\n            :disabled=\"props.disabled\"\n            :readonly=\"props.readonly\"\n            @input=\"onInput\"\n        >\n        <div class=\"input-append-inner\">\n          <base-icon\n            v-if=\"props.clearable\"\n            clickable\n            width=\"20px\"\n            height=\"20px\"\n            :stroke=\"props.disabled ? 'gray': 'black'\"\n            name=\"cross-sign\"\n            @click.stop=\"onClear\"\n          />\n          <slot name=\"append-inner\"/>\n        </div>\n        <div v-if=\"appendInnerText\" class=\"append-input\" :class=\"appendInnerClass\">\n          <base-text no-wrap>{{ appendInnerText }}</base-text>\n        </div>\n      </div>\n    </div>\n    <base-text v-if=\"details\" class=\"px-2\" size=\"xs\" :no-wrap=\"noWrapDetails\" @click.stop>\n      {{ details }}\n      <slot name=\"details\"/>\n    </base-text>\n    <base-text v-if=\"!props.noError\" color=\"error\" size=\"xs\" @click.stop> {{ errorMessage }}</base-text>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {computed, onBeforeUnmount, onUnmounted, ref, toRef, watch} from 'vue';\nimport BaseText from '@/components/Texts/BaseText.vue';\nimport FlexLayout from '@/components/Layouts/FlexLayout.vue';\nimport RequiredTagText from '@/components/Texts/RequiredTagText.vue';\nimport {ValidatorRule} from \"@/composable/ui/useForm\";\nimport useFormField from \"@/composable/ui/useFormField\";\nimport BaseIcon from \"@/components/Images/BaseIcon.vue\";\nimport {useValidator} from \"@/composable/ui/useValidator\";\n\nconst { validate } = useValidator();\n\nconst props = defineProps(\n    {\n      label: String,\n      modelValue: [String, Number],\n      placeholder: String,\n      type: {\n      type: String as () => 'text' | 'password' | 'email' | 'number' | 'tel',\n        default: 'text',\n      },\n      rules: {\n        type: Array as () => ValidatorRule<string>[],\n        default: () => [],\n      },\n      requiredTag: {\n        type: Boolean,\n        default: false,\n      },\n      primaryRequiredTag: {\n        type: Boolean,\n        default: false,\n      },\n      maxLength: {\n        type: Number,\n      },\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n      hint: {\n        type: String,\n        default: '',\n      },\n      readonly: {\n        type: Boolean,\n        default: false,\n      },\n      noError: {\n        type: Boolean,\n        default: false,\n      },\n      details: {\n        type: String,\n        default: '',\n      },\n      labelColor: {\n        type: String,\n        default: 'primary',\n      },\n      autocomplete: {\n        type: String as () => 'on' | 'off' | \"one-time-code\",\n        default: 'off',\n      },\n      prependInnerText: {\n        type: String,\n        default: '',\n      },\n      appendInnerText: {\n        type: String,\n        default: '',\n      },\n      prependInnerClass: {\n        type: String,\n        default: '',\n      },\n      appendInnerClass: {\n        type: String,\n        default: '',\n      },\n      noWrapDetails: {\n        type: Boolean,\n        default: false,\n      },\n      clearable: {\n        type: Boolean,\n        default: false,\n      },\n      clickable: {\n        type: Boolean,\n        default: false,\n      }\n    },\n);\nconst emit = defineEmits(['update:modelValue', 'clear']);\nconst inputRef = ref<HTMLInputElement>();\nconst form = useFormField(toRef(() => props.modelValue), toRef(() => props.rules));\n\nconst formattedValue = computed(() => {\n  if (props.type === 'tel') {\n    return props.modelValue ? String(props.modelValue).replace(/[^0-9]/g, '') : props.modelValue;\n  }\n  if (props.type === 'number') {\n    return props.modelValue ? String(props.modelValue).replace(/[^0-9\\.]/g, '') : props.modelValue;\n  }\n  return props.modelValue;\n});\n\nconst errorMessage = computed(() => {\n  return form.error.value;\n})\n\nconst clickableClass = computed(() => {\n  return props.clickable ? 'clickable' : '';\n});\n\nfunction onInput(e: Event) {\n  if (props.type === 'tel') emit('update:modelValue', (e.target as HTMLInputElement).value.replace(/[^0-9]/g, ''));\n  if (props.type === 'number') emit('update:modelValue', (e.target as HTMLInputElement).value.replace(/[^0-9\\.]/g, ''));\n  emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n\nfunction onClear() {\n  emit('update:modelValue', '');\n  emit('clear');\n}\n</script>\n\n<style scoped>\ninput {\n  font-size: 18px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n\n.required {\n  border: solid var(--error) 1px;\n  padding: 5px;\n  font-size: .7rem;\n  color: var(--error);\n  height: 20px;\n  line-height: 8px;\n  background: #fff;\n  min-width: 40px;\n}\n\n::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: var(--placeholder);\n  opacity: 1; /* Firefox */\n}\n\n:-ms-input-placeholder { /* Internet Explorer 10-11 */\n  color: red;\n}\n\n::-ms-input-placeholder { /* Microsoft Edge */\n  color: red;\n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=number] {\n  -moz-appearance: textfield;\n}\n\n.input-row {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  padding: 0 12px;\n  border-radius: 5px;\n  border: 1px solid var(--border);\n  background-color: var(--grayLight) !important;\n}\n\n.input-container:focus-within {\n  border: solid var(--primary) 1px;\n}\n\n.input-append-inner {\n  display: flex;\n  align-items: center;\n  padding: 5px;\n}\n\n.input-padding:deep(.input-container) {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n.prepend-input {\n  background: var(--lighterGray);\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  min-width: 53px;\n  padding-top: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: solid var(--border) 1px;\n}\n.append-input {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 53px;\n  padding-top: 8px;\n  background: var(--lighterGray);\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-left: solid var(--border) 1px;\n}\n\n.clickable :deep(input) {\n  cursor: pointer !important;\n}\n</style>\n"],"names":["validate","useValidator","props","__props","emit","__emit","ref","form","useFormField","toRef","formattedValue","computed","errorMessage","clickableClass","onInput","e","onClear"],"mappings":"ytCAgEM,KAAA,CAAE,SAAAA,GAAaC,IAEfC,EAAQC,EAkFRC,EAAOC,EACIC,EAAsB,EACjC,MAAAC,EAAOC,EAAaC,EAAM,IAAMP,EAAM,UAAU,EAAGO,EAAM,IAAMP,EAAM,KAAK,CAAC,EAE3EQ,EAAiBC,EAAS,IAC1BT,EAAM,OAAS,MACVA,EAAM,WAAa,OAAOA,EAAM,UAAU,EAAE,QAAQ,UAAW,EAAE,EAAIA,EAAM,WAEhFA,EAAM,OAAS,UACVA,EAAM,WAAa,OAAOA,EAAM,UAAU,EAAE,QAAQ,YAAa,EAAE,EAErEA,EAAM,UACd,EAEKU,EAAeD,EAAS,IACrBJ,EAAK,MAAM,KACnB,EAEKM,EAAiBF,EAAS,IACvBT,EAAM,UAAY,YAAc,EACxC,EAED,SAASY,EAAQC,EAAU,CACrBb,EAAM,OAAS,OAAOE,EAAK,oBAAsBW,EAAE,OAA4B,MAAM,QAAQ,UAAW,EAAE,CAAC,EAC3Gb,EAAM,OAAS,UAAUE,EAAK,oBAAsBW,EAAE,OAA4B,MAAM,QAAQ,YAAa,EAAE,CAAC,EAC/GX,EAAA,oBAAsBW,EAAE,OAA4B,KAAK,CAChE,CAEA,SAASC,GAAU,CACjBZ,EAAK,oBAAqB,EAAE,EAC5BA,EAAK,OAAO,CACd"}