nubomed-ui 1.0.3 → 1.0.4

package/src/packages/components/InputKeyboard/index.vue

@@ -1,117 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-06-27 16:57:58
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-25 18:44:57
- * @Description: 按钮
--->
-<template>
-  <div class="nb-input-keyboard">
-    <div class="nb-input-keyboard__input">
-      <nb-input size="small" v-model="inputValue" placeholder="请输入首字母" />
-      <nb-button type="primary" :disabled="buttonDisabled" @click="handleSearch">搜索</nb-button>
-    </div>
-    <div class="nb-input-keyboard__keyboard">
-      <div v-for="(item, index) in list" :key="index">
-        <span
-          v-for="item2 in item"
-          :key="item2"
-          :style="type === 0 && ['123', '回删'].includes(item2) ? 'flex: 2' : ''"
-          @click="handleClick(item2)"
-          >{{ item2 }}</span
-        >
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref, computed, onMounted, nextTick } from 'vue'
-import { createNamespace } from '../../../utils/create.js'
-
-const [name, bem] = createNamespace('input-keyboard')
-
-// 定义名称
-defineOptions({
-  name: 'NbInputKeyboard'
-})
-
-// 定义props
-const props = defineProps({})
-
-// 定义emits
-const emits = defineEmits(['search'])
-
-const letters = [
-  ['A', 'B', 'C', 'D', 'E'],
-  ['F', 'G', 'H', 'I', 'J'],
-  ['K', 'L', 'M', 'N', 'O'],
-  ['P', 'Q', 'R', 'S', 'T'],
-  ['U', 'V', 'W', 'X', 'Y'],
-  ['123', 'Z', '回删']
-]
-
-const numbers = [
-  [1, 2, 3],
-  [4, 5, 6],
-  [7, 8, 9],
-  ['abc', 0, '回删']
-]
-
-let currentInput = null
-const inputValue = ref('')
-const type = ref(0) // 模式：0-字母，1-数字
-
-// 当前展示的键盘
-const list = computed(() => {
-  return type.value === 0 ? letters : numbers
-})
-
-// 搜索按钮是否禁用
-const buttonDisabled = computed(() => {
-  if (inputValue.value) {
-    return false
-  } else {
-    return true
-  }
-})
-
-onMounted(() => {
-  nextTick(() => {
-    currentInput = document.querySelector('.nb-input__inner')
-  })
-})
-
-// 点击键盘
-const handleClick = (key) => {
-  const len = currentInput.selectionStart
-  const value = currentInput.value
-  if (key === '123') {
-    // 字母切换成数字
-    type.value = 1
-  } else if (key === 'abc') {
-    // 数字切换成字母
-    type.value = 0
-  } else if (key === '回删') {
-    // 回删
-    currentInput.value = value.substring(0, len - 1) + value.substring(len, value.length)
-    currentInput.setSelectionRange(len - 1, len - 1)
-    currentInput.focus()
-    inputValue.value = currentInput.value
-  } else {
-    // 字母或数字
-    currentInput.value = value.substring(0, len) + key + value.substring(len, value.length)
-    currentInput.setSelectionRange(len + 1, len + 1)
-    currentInput.focus()
-    inputValue.value = currentInput.value
-  }
-}
-
-// 点击搜索
-const handleSearch = () => {
-  emits('search', inputValue.value)
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/src/packages/components/InputNumber/index.scss

@@ -1,103 +0,0 @@
-:root {
-  --nb-input-number-width: 180px;
-  --nb-input-number-height: 48px;
-  --nb-input-number-font-size: 36px;
-  --nb-input-number-icon-size: 32px;
-}
-
-.nb-input-number {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-  box-sizing: border-box;
-  outline: none;
-  transition: 0.1s;
-  overflow: hidden;
-  font-family: inherit;
-  font-weight: normal;
-  vertical-align: middle;
-  caret-color: var(--nb-theme-color);
-  width: var(--nb-input-number-width);
-  height: var(--nb-input-number-height);
-  line-height: var(--nb-input-number-height);
-  padding: 0;
-  &:focus {
-    outline: none;
-  }
-  .nb-input-number__inner {
-    width: 100%;
-    height: 100%;
-    flex-grow: 1;
-    -webkit-appearance: none;
-    color: var(--nb-input-number-color);
-    font-size: inherit;
-    padding: 0;
-    outline: none;
-    border: none;
-    border: 1px solid var(--nb-input-border-color);
-    background: none;
-    box-sizing: border-box;
-    line-height: var(--nb-input-number-height);
-    font-size: var(--nb-input-number-font-size);
-    text-align: center;
-    &::placeholder {
-      color: var(--nb-input-number-placeholder-text-color);
-      font-weight: 400;
-      font-family: inherit;
-      font-size: inherit;
-    }
-  }
-  .nb-input-number__minus,
-  .nb-input-number__plus {
-    min-width: var(--nb-input-number-height);
-    width: var(--nb-input-number-height);
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--nb-input-border-color);
-    box-sizing: border-box;
-    cursor: pointer;
-    .svg-icon {
-      color: #8b8ea0;
-      width: 32px;
-      height: 32px;
-    }
-    &--disabled {
-      cursor: not-allowed;
-      .svg-icon {
-        color: #cad0e0;
-      }
-    }
-  }
-  .nb-input-number__minus {
-    border-right: none;
-    border-top-left-radius: var(--nb-input-border-radius);
-    border-bottom-left-radius: var(--nb-input-border-radius);
-  }
-  .nb-input-number__plus {
-    border-left: none;
-    border-top-right-radius: var(--nb-input-border-radius);
-    border-bottom-right-radius: var(--nb-input-border-radius);
-  }
-
-  &--focus {
-    .nb-input-number__inner {
-      border: 2px solid var(--nb-theme-color);
-    }
-  }
-  &--error {
-    .nb-input-number__inner {
-      border: 2px solid var(--nb-abnormal-color);
-    }
-  }
-  &--disabled {
-    cursor: not-allowed;
-    background: var(--nb-input-number-disabled-background);
-    box-shadow: var(--nb-input-number-disabled-box-shadow);
-    border: 1px solid var(--nb-input-number-disabled-border-color);
-    &.nb-input-number.nb-input-number--disabled {
-      color: var(--nb-input-number-disabled-color);
-    }
-  }
-}

package/src/packages/components/InputNumber/index.vue

@@ -1,160 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-06-27 16:57:58
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-06-30 22:00:08
- * @Description: 数字器
--->
-<template>
-  <div :class="wrapClass">
-    <div :class="minusClass" @click.stop="handleStep(-step)">
-      <svg-icon icon="minus" />
-    </div>
-    <input
-      ref="input"
-      v-model="inputValue"
-      :class="[bem('inner')]"
-      :style="color ? `color: ${color}` : ''"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    />
-    <div class="plus" :class="plusClass" @click.stop="handleStep(step)">
-      <svg-icon icon="plus" />
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref, computed } from 'vue'
-import { createNamespace } from '../../../utils/create.js'
-import { isNumber } from '../../../utils/validate.js'
-
-const [name, bem] = createNamespace('input-number')
-
-// 定义名称
-defineOptions({
-  name: 'NbInputNumber'
-})
-
-// 定义props
-const props = defineProps({
-  // 定义Props
-  // 值
-  modelValue: {
-    type: [String, Number, Object],
-    default: ''
-  },
-  // 	输入框占位文本
-  placeholder: {
-    type: String
-  },
-  // 原生 readonly 属性，是否只读
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  // 是否为禁用状态
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 类型
-  type: {
-    type: String,
-    default: ''
-  },
-  step: {
-    type: Number,
-    default: 1
-  },
-  min: {
-    type: Number
-  },
-  max: {
-    type: Number
-  },
-  // 数字颜色
-  color: {
-    type: String,
-    default: ''
-  }
-})
-
-// 定义emits
-const emits = defineEmits(['input', 'change', 'focus', 'blur', 'clear'])
-
-const hovering = ref(false)
-const focused = ref(false)
-const valueIsNumber = ref(true) // 输入值是否是数字
-
-// 输入框值
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emits('update:modelValue', Number(value))
-  }
-})
-
-// 样式
-const wrapClass = computed(() => {
-  return bem([
-    props.type,
-    {
-      disabled: props.disabled,
-      focus: focused.value,
-      error: !valueIsNumber.value
-    }
-  ])
-})
-
-// 减号样式
-const minusClass = computed(() => {
-  return bem('minus', {
-    disabled: !valueIsNumber.value || (props.min !== undefined && Number(inputValue.value) <= props.min)
-  })
-})
-
-// 加号样式
-const plusClass = computed(() => {
-  return bem('plus', {
-    disabled: !valueIsNumber.value || (props.max !== undefined && Number(inputValue.value) >= props.max)
-  })
-})
-
-// 输入框
-const handleFocus = () => {
-  focused.value = true
-  emits('focus')
-}
-
-const handleBlur = () => {
-  focused.value = false
-  emits('blur')
-}
-
-const handleInput = () => {
-  // 校验是否是数字
-  valueIsNumber.value = isNumber(inputValue.value)
-  // 非数字，显示异常
-  emits('input', Number(inputValue.value))
-}
-
-// 加减
-const handleStep = (step) => {
-  if (!valueIsNumber.value) {
-    return
-  }
-  const value = Number(inputValue.value) + Number(step)
-  if (props.min !== undefined && step < 0 && value < props.min) {
-    return
-  }
-  if (props.max !== undefined && step > 0 && value > props.max) {
-    return
-  }
-  emits('update:modelValue', value)
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>