{"version":3,"file":"BaseInputNumber-I2DaMh05.js","sources":["../../src/components/Forms/BaseInputNumber.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\">\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\"/>\n    <div class=\"input-row\">\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            type=\"text\"\n            :placeholder=\"props.placeholder\"\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            class=\"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\">\n      {{ details }}\n      <slot name=\"details\"/>\n    </base-text>\n    <base-text v-if=\"!props.noError\" color=\"error\" size=\"xs\"> {{ errorMessage }}</base-text>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {computed, ref, toRef} 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\n\nconst props = defineProps(\n    {\n      label: String,\n      modelValue: [String, Number],\n      placeholder: String,\n      type: {\n        type: String as () => 'number' | 'integer',\n        default: 'number',\n      },\n      rules: {\n        type: Array as () => ValidatorRule<string>[],\n        default: () => [],\n      },\n      requiredTag: {\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      primaryRequiredTag: {\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));\nconst errorMessage = computed(() => {\n  return form.error.value;\n})\n\nconst numberRegex = /[^0-9.]/g;\nconst integerRegex = /[^\\d\\uFF10-\\uFF19]/g;\n\nconst formattedValue = computed(() => {\n    let value = props.modelValue;\n    if (props.type === 'integer') value = value ? String(props.modelValue).replace(integerRegex, '') : props.modelValue;\n    else value = value ? String(props.modelValue).replace(numberRegex, '') : props.modelValue;\n    return value;\n});\n\nasync function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    await emit('update:modelValue', value);\n    if (props.type === 'integer') value = value.replace(integerRegex, '');\n    else value = value.replace(numberRegex, '');\n    emit('update:modelValue', 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  padding-left: 12px;\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  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</style>\n"],"names":["validate","useValidator","props","__props","emit","__emit","ref","form","useFormField","toRef","errorMessage","computed","numberRegex","integerRegex","formattedValue","value","onInput","e","onClear"],"mappings":"4sCAgEM,KAAA,CAAE,SAAAA,GAAaC,IAGfC,EAAQC,EA8ERC,EAAOC,EACIC,EAAsB,EACjC,MAAAC,EAAOC,EAAaC,EAAM,IAAMP,EAAM,UAAU,EAAGO,EAAM,IAAMP,EAAM,KAAK,CAAC,EAC3EQ,EAAeC,EAAS,IACrBJ,EAAK,MAAM,KACnB,EAEKK,EAAc,WACdC,EAAe,sBAEfC,EAAiBH,EAAS,IAAM,CAClC,IAAII,EAAQb,EAAM,WAClB,OAAIA,EAAM,OAAS,UAAmBa,EAAAA,EAAQ,OAAOb,EAAM,UAAU,EAAE,QAAQW,EAAc,EAAE,EAAIX,EAAM,WAC5Fa,EAAAA,EAAQ,OAAOb,EAAM,UAAU,EAAE,QAAQU,EAAa,EAAE,EAAIV,EAAM,WACxEa,CAAA,CACV,EAED,eAAeC,EAAQC,EAAU,CACzB,IAAAF,EAASE,EAAE,OAA4B,MACrC,MAAAb,EAAK,oBAAqBW,CAAK,EACjCb,EAAM,OAAS,UAAmBa,EAAAA,EAAM,QAAQF,EAAc,EAAE,EACvDE,EAAAA,EAAM,QAAQH,EAAa,EAAE,EAC1CR,EAAK,oBAAqBW,CAAK,CACnC,CAEA,SAASG,GAAU,CACjBd,EAAK,oBAAqB,EAAE,EAC5BA,EAAK,OAAO,CACd"}