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

<script setup>
import { ref, computed } from 'vue';
import { NInputNumber } from 'naive-ui';

const props = defineProps({
  placeholder: {
    type: String,
    default: () => ""
  },
  size: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'default'
  },
  isActive: {
    type: Boolean,
    default: false
  },
  unit: {
    type: String,
    default: ''
  },
  isNeedFlotBtn: {
    type: Boolean,
    default: true
  },
  isCenter: {
    type: Boolean,
    default: false
  },
  isCloseIcon: {
    type: Boolean,
    default: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 999999
  }
})

let currentVal = '';
const isFocusStatus = ref(false);

const emit = defineEmits(['click:confirm', 'on-input', 'on-blur', 'click:cancel']);
const modelValue = defineModel();

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

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

const onBlur = (e) => {
  if ( currentVal !== '' ) {
    isFocusStatus.value = false;
    emit('on-blur');
  }
}

const onInput = (value) => {
  emit('on-input', value);
  currentVal = value
  modelValue.value = value;
}

const handleInpValue = (event, type) => {
  if (type === 'confirm') {
    emit('click:confirm', modelValue.value);
  }
  if (type === 'cancel') {
    event.preventDefault();
    modelValue.value = null;
    emit('click:cancel', null);
  }
}
</script>

<template>
  <div :class="[domClassName, 'base-input-wrapper']">
    <NInputNumber
      size="small"
      round
      style="width: 100%;"
      :readonly="readonly"
      :precision="2"
      :max="max"
      :min="min"
      :placeholder="placeholder"
      :show-button="false"
      :on-update:value="onInput"
      :on-blur="onBlur"
      :on-focus="onFocus"
      :value="modelValue"
    >
      <template #suffix>
        <div class="unit" v-if="unit">{{ unit }}</div>
      </template>
    </NInputNumber>
    <ul class="inp-flot_group space-x-[4px]" v-show="isFocusStatus && isNeedFlotBtn">
      <!-- <li>
        <SvgIcon name="control-icon-confirm" size="16" @mousedown="handleInpValue($event, 'confirm')"></SvgIcon>
      </li> -->
      <!-- <li v-if="isCloseIcon">
        <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;
    color: #333;
  }

  .inp-flot_group {
    @include flex(x, center, center);
    position: absolute;
    right: 66px;
    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;
      }
    }
  }
}
</style>

<style lang="scss">
.base-input-wrapper {
  .n-input-wrapper {
    padding-right: 0px;
    border: 1px solid #E6EAEE;
    border-radius: 4px;
    .n-input__input-el, .n-input__placeholder {
      font-size: 12px;
    }
  }
}

.input_text_center {
  .n-input-wrapper {
    .n-input__input-el {
      padding-right: 10px;
      text-align: center;
    }
  }
}
</style>