nubomed-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,117 @@
+<!--
+ * @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

@@ -0,0 +1,103 @@
+: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

@@ -0,0 +1,160 @@
+<!--
+ * @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>