{"version":3,"file":"B0tFmU1P.js","sources":["../../../../components/atoms/VInput/VInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ninterface InputProps {\n    id?: string\n    label?: string\n    modelValue?: string | number | Blob\n    disabled?: boolean\n    required?: boolean\n    horizontal?: boolean\n    autocomplete?: string\n    suffix?: string\n    step?: number\n    type?:\n        | 'text'\n        | 'checkbox'\n        | 'textarea'\n        | 'email'\n        | 'password'\n        | 'tel'\n        | 'file'\n        | 'color'\n        | 'url'\n        | 'search'\n        | 'number'\n        | 'date'\n        | 'datetime-local'\n        | 'hidden'\n    error?: string | null\n    separator?: boolean\n}\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    disabled: false,\n    required: false,\n    horizontal: false,\n    autocomplete: 'off',\n    type: 'text',\n    step: 1,\n    error: null,\n})\n\nconst emit = defineEmits(['update:modelValue'])\nconst value = computed<string | Blob | number | undefined>({\n    get() {\n        return props?.modelValue\n    },\n    set(value) {\n        emit('update:modelValue', value)\n    },\n})\n\nconst slots = useSlots()\nconst hasSlot = computed(() => !!slots.default)\n\nconst suffix = computed(() => {\n    return props.suffix ? ' ' + props.suffix : null\n})\n\nconst fileName = ref('')\nconst setFileBlob = (e: Event) => {\n    const fileList = (e.target as HTMLInputElement)?.files || []\n    if (fileList.length > 0) {\n        fileName.value = fileList[0].name\n        value.value = fileList[0]\n    }\n}\n\nconst $style = useCssModule()\nconst classes = computed(() => {\n    return [\n        $style.root,\n        props.type && $style[`root--type-${props.type}`],\n        props.type === 'file' && $style['root--type-file'],\n        props.separator && $style['root--has-separator'],\n        props.error && $style['has-errors'],\n        props.horizontal && $style.horizontal,\n        props.required && $style.required,\n        props.disabled && $style.disabled,\n    ]\n})\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <label\n            v-if=\"label\"\n            :class=\"$style.label\"\n            :for=\"id\"\n        >{{ label }}</label>\n        <div :class=\"$style['input-group']\">\n            <input\n                v-if=\"!hasSlot && type === 'file'\"\n                :id=\"id\"\n                type=\"file\"\n                :class=\"$style.input\"\n                :disabled=\"disabled\"\n                :required=\"required\"\n                @change=\"setFileBlob\"\n            >\n            <input\n                v-else-if=\"!hasSlot && type === 'number'\"\n                :id=\"id\"\n                v-model.number=\"value\"\n                :class=\"$style.input\"\n                :disabled=\"disabled\"\n                :required=\"required\"\n                :step=\"step\"\n                :autocomplete=\"autocomplete\"\n                type=\"number\"\n            >\n            <textarea\n                v-else-if=\"!hasSlot && type === 'textarea'\"\n                :id=\"id\"\n                v-model=\"value\"\n                :class=\"$style.input\"\n                :disabled=\"disabled\"\n                :required=\"required\"\n                :autocomplete=\"autocomplete\"\n            />\n            <input\n                v-else-if=\"!hasSlot\"\n                :id=\"id\"\n                v-model=\"value\"\n                :class=\"$style.input\"\n                :disabled=\"disabled\"\n                :required=\"required\"\n                :autocomplete=\"autocomplete\"\n                :type=\"type\"\n            >\n            <slot />\n            <template v-if=\"!hasSlot && type === 'file'\">\n                <SvgIcon\n                    :class=\"$style['download-icon']\"\n                    name=\"download\"\n                    view-box=\"0 0 24 24\"\n                    width=\"24\"\n                    height=\"24\"\n                />\n                <span>{{ fileName ? fileName : $t('choose_file') }}</span>\n            </template>\n\n            <template v-if=\"suffix\">\n                {{ suffix }}\n            </template>\n        </div>\n        <p\n            v-if=\"error\"\n            :class=\"$style['error-message']\"\n        >\n            {{ error }}\n        </p>\n    </div>\n</template>\n\n<style lang=\"scss\" module>\n@mixin input {\n    width: 100%;\n    height: var(--v-input-height, #{rem(48)});\n    padding: var(--v-input-padding, 0 var(--spacing-2-xs));\n    border: 1px solid var(--v-input-border-color, var(--color-border-primary));\n    border-radius: var(--v-input-border-radius, var(--radius-sm));\n    background-color: var(--v-input-background-color, var(--color-white));\n    color: var(--v-input-color, var(--color-primary));\n    font-size: var(--v-input-font-size, #{rem(16)});\n    transition: 0.2s ease(in-out-cubic);\n    transition-property: border-color, background-color;\n\n    &:focus {\n        --v-input-border-color: var(--color-black);\n        --v-input-background-color: #f6f6f6;\n\n        outline: none;\n    }\n\n    .disabled &,\n    &:disabled {\n        --v-input-border-color: rgb(159 159 159 / 70%);\n        --v-input-color: var(--v-input-disabled-color, var(--color-primary-disabled));\n    }\n\n    @media (hover: hover) {\n        &:hover {\n            --v-input-border-color: var(--color-black);\n        }\n    }\n}\n\n.root {\n    width: var(--v-input-root-width, 100%);\n\n    &--has-separator {\n        padding-bottom: rem(12);\n        border-bottom: 1px solid var(--color-line-primary);\n    }\n\n    &.horizontal:has(input:where([type=\"radio\"], [type=\"checkbox\"])) {\n        cursor: pointer;\n    }\n\n    &--type-checkbox {\n        --v-input-label-line-height: 1.6;\n        --v-input-height: 1.6lh;\n        --v-input-horizontal-align-item: flex-start;\n    }\n}\n\n.label {\n    display: block;\n    margin-bottom: 0.5rem;\n    color: color(primary);\n    cursor: inherit;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--v-input-label-line-height, 120%);\n\n    .root--type-checkbox & {\n        cursor: pointer;\n    }\n\n    @media (prefers-contrast: no-preference) {\n        .disabled &,\n        &:disabled {\n            color: var(--color-primary-disabled);\n        }\n    }\n}\n\n.input-group {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    .root--type-file & {\n        @include input;\n\n        padding-right: rem(24 + 16 + 6);\n    }\n}\n\n.horizontal {\n    display: flex;\n    width: auto;\n    flex-direction: row;\n    align-items: var(--v-input-horizontal-align-item, center);\n    gap: var(--spacing-xs);\n\n    .label {\n        order: 2;\n        margin: 0;\n    }\n\n    input {\n        width: auto;\n        order: 1;\n        margin: 0;\n    }\n}\n\n.required {\n    .label::after {\n        margin-left: 0.25rem;\n        color: color(error);\n        content: '*';\n    }\n}\n\n.root select {\n    --v-input-font-size: 14px;\n\n    appearance: none;\n    background-image: var(\n            --v-input-select-background-image,\n            url(\"data:image/svg+xml;utf8, <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8 10L12 14L16 10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/> </svg>\")\n    );\n    background-position-x: calc(100% - 16px);\n    background-position-y: 50%;\n    background-repeat: no-repeat;\n    cursor: pointer;\n    opacity: 1; // select has 0.7 opacity when disabled\n    text-overflow: ellipsis;\n    transition: border-color 0.2s ease(in-out-cubic);\n    white-space: nowrap;\n\n    @include input;\n}\n\n.input {\n    cursor: inherit;\n\n    @include input;\n\n    &[type='checkbox'] {\n        cursor: pointer;\n    }\n\n    .root.horizontal &[type='checkbox'] {\n        line-height: 0.8;\n    }\n\n    &[type='file'] {\n        position: absolute;\n        width: 100%;\n        cursor: pointer;\n        inset: 0;\n        opacity: 0;\n    }\n\n    &:is(textarea) {\n        min-height: 100px;\n        resize: vertical;\n    }\n}\n\n.file-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.download-icon {\n    position: absolute;\n    right: rem(16);\n    pointer-events: none;\n}\n\n.error-message {\n    margin: 0.5rem 0 1rem;\n    color: color(error);\n    font-size: 0.8rem;\n}\n\n.has-errors {\n    .label {\n        color: color(error);\n    }\n\n    select,\n    textarea,\n    input {\n        border-color: color(error);\n    }\n}\n</style>\n"],"names":["props","__props","emit","__emit","value","computed","slots","useSlots","hasSlot","suffix","fileName","ref","setFileBlob","fileList","_a","$style","useCssModule","classes"],"mappings":"8sBA8BA,MAAMA,EAAQC,EAURC,EAAOC,EACPC,EAAQC,EAA6C,CACvD,KAAM,CACF,OAAOL,GAAA,YAAAA,EAAO,UAClB,EACA,IAAII,EAAO,CACPF,EAAK,oBAAqBE,CAAK,CACnC,CAAA,CACH,EAEKE,EAAQC,IACRC,EAAUH,EAAS,IAAM,CAAC,CAACC,EAAM,OAAO,EAExCG,EAASJ,EAAS,IACbL,EAAM,OAAS,IAAMA,EAAM,OAAS,IAC9C,EAEKU,EAAWC,EAAI,EAAE,EACjBC,EAAe,GAAa,OAC9B,MAAMC,IAAYC,EAAA,EAAE,SAAF,YAAAA,EAA+B,QAAS,CAAA,EACtDD,EAAS,OAAS,IACTH,EAAA,MAAQG,EAAS,CAAC,EAAE,KACvBT,EAAA,MAAQS,EAAS,CAAC,EAC5B,EAGEE,EAASC,IACTC,EAAUZ,EAAS,IACd,CACHU,EAAO,KACPf,EAAM,MAAQe,EAAO,cAAcf,EAAM,IAAI,EAAE,EAC/CA,EAAM,OAAS,QAAUe,EAAO,iBAAiB,EACjDf,EAAM,WAAae,EAAO,qBAAqB,EAC/Cf,EAAM,OAASe,EAAO,YAAY,EAClCf,EAAM,YAAce,EAAO,WAC3Bf,EAAM,UAAYe,EAAO,SACzBf,EAAM,UAAYe,EAAO,QAAA,CAEhC"}