nubomed-ui 1.0.1 → 1.0.3

package/src/packages/components/Form/FormItem.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2022-12-24 19:25:39
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-04 20:11:13
+ * @Description: 空页面
+-->
+<template>
+  <div :class="bem(['', prop])" :prop="prop" :ref="prop">
+    <label v-if="label" :class="labelClasses">{{ label }}</label>
+    <div :class="bem('content')"><slot></slot>
+      <p v-if="errorMessage">{{ errorMessage }}</p>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { createNamespace } from '../../../utils/create.js'
+// 定义名称
+defineOptions({
+  name: 'NbFormItem'
+})
+
+// 定义props
+const props = defineProps({
+  // 定义Props
+  // 提示语
+  label: {
+    type: String,
+    default: ''
+  },
+  // 字段
+  prop: {
+    type: String,
+    default: ''
+  },
+  // body的内容是表单
+  rules: {
+    type: Array,
+    default: []
+  }
+})
+
+const [name, bem] = createNamespace('form-item')
+const labelClasses = bem('label',{
+  required: props.rules.find(x => x.required === true)
+})
+defineExpose({
+  error: () => {
+    console.error('error')
+  }
+})
+</script>
+
+<style lang="scss">
+.nb-form-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+  &__label {
+    color: var(--nb-font-color-7);
+    font-size: 28px;
+    line-height: 42px;
+    margin-right: 20px;
+    text-align: right;
+    &--required::before{
+      content: '*';
+      color: var(--nb-abnormal-color);
+      margin-right: 4px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,76 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2022-12-24 19:25:39
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-04 20:13:38
+ * @Description: 空页面
+-->
+<template>
+  <form :class="classes" ref="form">
+    <slot />
+  </form>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { createNamespace } from '../../../utils/create.js'
+// 定义名称
+defineOptions({
+  name: 'NbForm'
+})
+
+// 定义props
+const props = defineProps({
+  // 定义Props
+  // 提示语
+  label: {
+    type: String,
+    default: ''
+  },
+  model: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  // body的内容是表单
+  rules: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+
+const [name, bem] = createNamespace('form')
+const classes = bem('')
+const form = ref()
+
+function validate(cb) {
+  console.log('校验表单')
+  cb && cb()
+}
+
+defineExpose({
+  validate
+})
+</script>
+
+<style lang="scss">
+.nb-form-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+  &__label {
+    color: var(--nb-font-color-7);
+    font-size: 28px;
+    line-height: 42px;
+    margin-right: 20px;
+    text-align: right;
+    &--required::before {
+      content: '*';
+      color: var(--nb-abnormal-color);
+      margin-right: 4px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 16:57:58
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-06-27 20:25:45
+ * @Description: 
+-->
+<template>
+  <svg-icon :icon="icon" class="nb-icon" />
+</template>
+<script setup>
+// 定义名称
+defineOptions({
+  name: 'NbIcon'
+})
+
+// 定义props
+const props = defineProps({
+  // 定义Props
+  // 类型，可选值为 primary warning default info
+  icon: {
+    type: String,
+    required: true,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,184 @@
+:root {
+  // 按size
+  // size=large
+  --nb-input-large-width: 480px;
+  --nb-input-large-height: 80px;
+  --nb-input-large-font-size: 28px;
+  --nb-input-large-icon-size: 40px;
+  // size=medium
+  --nb-input-medium-width: 400px;
+  --nb-input-medium-height: 64px;
+  --nb-input-medium-font-size: 24px;
+  --nb-input-medium-icon-size: 40px;
+  // size=small
+  --nb-input-small-width: 240px;
+  --nb-input-small-height: 64px;
+  --nb-input-small-font-size: 24px;
+  --nb-input-small-icon-size: 32px;
+}
+
+.nb-input {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  box-sizing: border-box;
+  outline: none;
+  transition: 0.1s;
+  border-radius: var(--nb-input-border-radius);
+  border: 1px solid var(--nb-input-border-color);
+  font-family: inherit;
+  font-weight: normal;
+  vertical-align: middle;
+  caret-color: var(--nb-theme-color);
+  &:focus {
+    outline: none;
+  }
+  .nb-input__inner {
+    width: 100%;
+    flex-grow: 1;
+    -webkit-appearance: none;
+    color: var(--nb-input-color);
+    font-size: inherit;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    &::placeholder {
+      color: var(--nb-input-placeholder-text-color);
+      font-weight: 400;
+      font-family: inherit;
+      font-size: inherit;
+    }
+  }
+  .nb-input__prefix {
+    height: 100%;
+    .svg-icon {
+      color: #cad0e0;
+    }
+  }
+  .nb-input__clear,
+  .nb-input__password {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+    .svg-icon {
+      color: #8b8ea0;
+    }
+  }
+
+  &--focus {
+    border: 2px solid var(--nb-theme-color);
+  }
+
+  &--dark {
+    border: 1px solid #fff;
+    background-color: transparent;
+    color: #ffffff;
+    .nb-input__inner {
+      background-color: transparent;
+      color: #ffffff;
+      &::placeholder {
+        color: rgba(#ffffff, 0.5);
+      }
+    }
+    .nb-input__prefix .svg-icon,
+    .nb-input__clear .svg-icon,
+    .nb-input__password .svg-icon {
+      color: #cad0e0;
+    }
+  }
+  &--large {
+    width: var(--nb-input-large-width);
+    height: var(--nb-input-large-height);
+    line-height: var(--nb-input-large-height);
+    padding: 0 16px 0 11px;
+    .nb-input__inner {
+      height: var(--nb-input-large-height);
+      line-height: var(--nb-input-large-height);
+      font-size: var(--nb-input-large-font-size);
+    }
+    .nb-input__prefix {
+      margin-right: 16px;
+      .svg-icon {
+        width: var(--nb-input-large-icon-size);
+        height: var(--nb-input-large-icon-size);
+      }
+    }
+    .nb-input__clear,
+    .nb-input__password {
+      width: 48px;
+      margin-left: 9px;
+      .svg-icon {
+        width: var(--nb-input-large-icon-size);
+        height: var(--nb-input-large-icon-size);
+      }
+    }
+  }
+
+  &--medium {
+    width: var(--nb-input-medium-width);
+    height: var(--nb-input-medium-height);
+    line-height: var(--nb-input-medium-height);
+    padding: 0 16px 0 11px;
+    .nb-input__inner {
+      height: var(--nb-input-medium-height);
+      line-height: var(--nb-input-medium-height);
+      font-size: var(--nb-input-medium-font-size);
+    }
+    .nb-input__prefix {
+      margin-right: 16px;
+      .svg-icon {
+        width: var(--nb-input-medium-icon-size);
+        height: var(--nb-input-medium-icon-size);
+      }
+    }
+    .nb-input__clear,
+    .nb-input__password {
+      width: 48px;
+      margin-left: 9px;
+      .svg-icon {
+        width: var(--nb-input-medium-icon-size);
+        height: var(--nb-input-medium-icon-size);
+      }
+    }
+  }
+
+  &--small {
+    width: var(--nb-input-small-width);
+    height: var(--nb-input-small-height);
+    line-height: var(--nb-input-small-height);
+    padding: 0 16px 0 11px;
+    .nb-input__inner {
+      height: var(--nb-input-small-height);
+      line-height: var(--nb-input-small-height);
+      font-size: var(--nb-input-small-font-size);
+    }
+    .nb-input__prefix {
+      margin-right: 16px;
+      .svg-icon {
+        width: var(--nb-input-small-icon-size);
+        height: var(--nb-input-small-icon-size);
+      }
+    }
+    .nb-input__clear,
+    .nb-input__password {
+      width: 48px;
+      margin-left: 9px;
+      .svg-icon {
+        width: var(--nb-input-small-icon-size);
+        height: var(--nb-input-small-icon-size);
+      }
+    }
+  }
+  &--disabled {
+    cursor: not-allowed;
+    background: var(--nb-input-disabled-background);
+    box-shadow: var(--nb-input-disabled-box-shadow);
+    border: 1px solid var(--nb-input-disabled-border-color);
+    &.nb-input.nb-input--disabled {
+      color: var(--nb-input-disabled-color);
+    }
+  }
+}

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

@@ -0,0 +1,189 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 16:57:58
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-06-29 19:18:26
+ * @Description: 文本输入框
+-->
+<template>
+  <div :class="wrapClass" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+    <div v-if="props.prefixIcon || $slots.prefix" class="nb-input__prefix">
+      <slot name="prefix" />
+      <svg-icon v-if="props.prefixIcon" :icon="props.prefixIcon" />
+    </div>
+    <input
+      v-model="inputValue"
+      :type="showPassword ? (hidePassword ? 'text' : 'password') : type"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :disabled="disabled"
+      class="nb-input__inner"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <!-- 清除 -->
+    <div v-if="showClear" class="nb-input__clear" @click.stop="handleClear">
+      <svg-icon icon="circle-close-filled" />
+    </div>
+    <!-- 密码框显示小眼睛 -->
+    <div v-if="showPwdVisible" class="nb-input__password" @click.stop="handleShowPassword">
+      <svg-icon :icon="hidePassword ? 'eye-open' : 'eye-close'" />
+    </div>
+    <div v-if="props.suffixIcon || $slots.suffix" class="nb-input__suffix">
+      <slot name="suffix" />
+      <svg-icon v-if="props.suffixIcon" :icon="props.suffixIcon" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import { createNamespace } from '../../../utils/create.js'
+
+const [name, bem] = createNamespace('input')
+
+// 定义名称
+defineOptions({
+  name: 'NbInput'
+})
+
+// 定义props
+const props = defineProps({
+  // 值
+  modelValue: {
+    type: [String, Number, Object],
+    default: ''
+  },
+  // 尺寸，可选值为 large medium small
+  size: {
+    type: String,
+    default: 'medium',
+    validator(value) {
+      return ['large', 'medium', 'small'].includes(value)
+    }
+  },
+  // 类型，可选值为 text
+  type: {
+    type: String,
+    default: 'text'
+  },
+  // 	输入框占位文本
+  placeholder: {
+    type: String
+  },
+  // 原生 readonly 属性，是否只读
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示清除按钮，只有当 type 不是 textarea时生效
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示切换密码图标
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  // 是否为禁用状态
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义后缀图标
+  suffixIcon: {
+    type: String
+  },
+  // 自定义前缀图标
+  prefixIcon: {
+    type: String
+  },
+  // 主题( 内置了 dark / light 两种主题)
+  effect: {
+    type: String,
+    default: 'light',
+    validator(value) {
+      return ['dark', 'light'].includes(value)
+    }
+  }
+})
+
+// 定义emits
+const emits = defineEmits(['input', 'change', 'focus', 'blur', 'clear'])
+
+const hovering = ref(false)
+const focused = ref(false)
+const hidePassword = ref(false)
+
+// 输入框值
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits('update:modelValue', value)
+  }
+})
+
+const showClear = computed(
+  () => props.clearable && !props.disabled && !props.readonly && !!inputValue.value && (focused.value || hovering.value)
+)
+
+const showPwdVisible = computed(
+  () =>
+    props.showPassword &&
+    !props.disabled &&
+    !props.readonly &&
+    !!inputValue.value &&
+    (!!inputValue.value || focused.value)
+)
+
+// 样式
+const wrapClass = computed(() => {
+  return bem([
+    props.size,
+    props.type,
+    props.effect,
+    {
+      disabled: props.disabled,
+      prefix: props.prefixIcon ? true : false,
+      focus: focused.value
+    }
+  ])
+})
+const prefixClasses = bem(['prefix'])
+
+const handleMouseEnter = (evt) => {
+  hovering.value = true
+  emits('mouseenter', evt)
+}
+
+const handleMouseLeave = (evt) => {
+  hovering.value = false
+  emits('mouseleave', evt)
+}
+
+const handleClear = () => {
+  emits('update:modelValue', '')
+  emits('clear')
+}
+
+const handleShowPassword = () => {
+  hidePassword.value = !hidePassword.value
+  if (hidePassword.value) {
+  }
+}
+
+const handleFocus = () => {
+  focused.value = true
+  emits('focus')
+}
+
+const handleBlur = () => {
+  focused.value = false
+  emits('blur')
+}
+
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

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

@@ -0,0 +1,63 @@
+.nb-input-keyboard {
+  display: inline-block;
+  width: 310px;
+  overflow-x: hidden;
+  padding: 30px 15px;
+  box-sizing: border-box;
+  &__input {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .nb-input {
+      width: 200px;
+      height: 50px;
+      margin-right: 6px;
+    }
+    .nb-button {
+      min-width: 74px;
+      width: 74px;
+      height: 50px;
+      font-size: 18px;
+    }
+  }
+  &__keyboard {
+    width: 280px;
+    height: 353px;
+    margin-top: 30.5px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #cad0e0;
+    box-sizing: border-box;
+    padding: 5px 0 0 5px;
+    display: flex;
+    flex-direction: column;
+    div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 5px;
+      span {
+        flex: 1;
+        height: 100%;
+        background: #f4f6f9;
+        border-radius: 3px;
+        border: 1px solid #cad0e0;
+        font-size: 25px;
+        font-family: var(--nb-font-bold-family);
+        line-height: 38px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        margin-right: 5px;
+        cursor: pointer;
+        &:active {
+          background-color: var(--nb-theme-color);
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}