nubomed-ui 1.0.3 → 1.0.4

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-.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;
-        }
-      }
-    }
-  }
-}