slibra-module-web/src/views/control/components/BaseInput.vue

<script setup>
import { ref, computed } from 'vue';
import { SvgIcon } from '@/components';

const props = defineProps({
  size: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'default'
  },
  isActive: {
    type: Boolean,
    default: false
  },
  unit: {
    type: String,
    default: ''
  },
  isNeedFlotBtn: {
    type: Boolean,
    default: true
  }
})

const inpRef = ref(null);
const inpValue = ref('');
const isFocusStatus = ref(false);
const activeIndex = ref(0);

const domClassName = computed(() => {
  return [
    'input_wrapper',
    'input-' + props.type + "_" + props.size,
    'inpit_' + props.size
  ]
})

const onFocus = () => {
  isFocusStatus.value = true;
}

const onBlur = () => {
  isFocusStatus.value = false;
}

const handleInpValue = (event, type) => {
  if ( type === 'confirm' ) {
    
  }
  if ( type === 'cancel' ) {
    event.preventDefault();
    inpValue.value = '';
  }
}
</script>

<template>
  <div :class="domClassName">
    <input
      ref="inpRef"
      v-model="inpValue"
      type="text"
      class="inp"
      @focus="onFocus"
      @blur="onBlur"
    >
    <div class="unit" v-if="unit">{{ unit }}</div>
    <ul class="inp-flot_group space-x-[4px]" v-show="isFocusStatus && isNeedFlotBtn">
      <li>
        <SvgIcon name="control-icon-confirm" size="16" @click="handleInpValue($event, 'confirm')"></SvgIcon>
      </li>
      <li>
        <SvgIcon name="control-icon-cancel" size="16" @mousedown="handleInpValue($event, 'cancel')"></SvgIcon>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.input_wrapper {
  @include flex(x, center, between);
  position: relative;
  margin-top: 4px;

  .inp {
    width: 100%;
    height: 28px;
    padding: 0px 56px 0 10px;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #E6EAEE;
    background: #fff;
    outline: none;
    font-size: 12px;

    &:focus {
      border: 1px solid #2454FF;
    }
  }

  .unit {
    flex-shrink: 1;
    width: 60px;
    height: 28px;
    border-radius: 0px 4px 4px 0px;
    border: 1px solid #E6EAEE;
    border-left: 0;
    background: #F0F2F5;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    font-weight: bold;
  }

  .inp-flot_group {
    @include flex(x, center, center);
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);

    li {
      width: 16px;
      height: 16px;
      border-radius: 100%;
      color: #DFE2E6;
      cursor: pointer;

      svg,
      svg path {
        fill: #e0e2e6;
        stroke: #e0e2e6;
      }

      &:hover svg {
        fill: #b3c4e3;
        stroke: #b3c4e3;
      }
    }
  }
}

.inpit_small, .input-text_small {
  width: 112px;
  .inp {
    text-align: center;
    padding: 0 10px;
  }
}

.input-text_small {
  .inp {
    border-radius: 4px;
  }
}
</style>