nubomed-ui 1.0.3 → 1.0.4

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

@@ -1,105 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-10 17:51:28
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-08-07 09:05:04
- * @Description: 多选按钮组
--->
-<template>
-  <div class="nb-check-list">
-    <div class="nb-check-list__item">
-      <!-- 分类 -->
-      <nb-check-cate />
-      <!-- <div class="nb-check-list__item__cate">
-        <nb-icon class="nb-check-list__arrow" icon="caret-right" />
-        <nb-icon class="nb-check-list__item__cate__icon" icon="menu-in-store" />
-        <strong class="nb-check-list__item__cate__text"
-          >异常出库<small>2021/10/22</small></strong
-        >
-        <span class="nb-check-list__item__cate__count">
-          <slot name="count"></slot>
-        </span>
-      </div> -->
-      <!-- 分类下的列表 -->
-      <ul class="nb-check-list__item__details">
-        <li class="nb-check-list__item__detail">
-          <!-- 品名 -->
-          <div class="nb-check-list__item__detail__top">
-            <nb-icon
-              icon="caret-right"
-              class="nb-check-list__item__detail__arrow"
-            />
-            <strong class="nb-check-list__item__detail__name"
-              >非覆膜快速交换胆道金属支架系统</strong
-            >
-            <span>状态</span>
-          </div>
-          <!-- 规格/型号 -->
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script setup>
-import NbCheckCate from "./Cate.vue";
-import { ref, computed } from "vue";
-import { createNamespace } from '../../../utils/create.js';
-
-const [name, bem] = createNamespace("check-list");
-
-// 定义名称
-defineOptions({
-  name: "NbCheckList",
-});
-
-// 定义props
-const props = defineProps({
-  // 值
-  modelValue: {
-    type: [String, Number, Object, Boolean],
-    default: "",
-  },
-  // 选中项绑定值
-  data: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-});
-
-// 定义emits
-const emits = defineEmits(["change"]);
-
-// 输入框值
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
-});
-
-// 样式
-const itemClassess = (item) => {
-  return bem("item", {
-    checked: (inputValue.value || []).includes(item.value),
-    disabled: item.disabled,
-  });
-};
-
-// 点击按钮
-const handleChange = (item) => {
-  const newValue = inputValue.value;
-  const index = newValue.findIndex((x) => x === item.value);
-  if (index > -1) {
-    newValue.splice(index, 1);
-  } else {
-    newValue.push(item.value);
-  }
-  emits("change", item);
-};
-</script>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

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

@@ -1,154 +0,0 @@
-:root {
-  // 通用
-  --el-overlay-color-lighter: rgba(0, 0, 0, 0.7);
-  // 按Size
-  // size=large
-  --nb-dialog-large-width: 1600px;
-  --nb-dialog-large-height: 900px;
-  // size=medium
-  --nb-dialog-medium-width: 1000px;
-  --nb-dialog-medium-height: 640px;
-  // size=mini
-  --nb-dialog-mini-width: 720px;
-  --nb-dialog-mini-height: 520px;
-}
-
-.nb-overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2000;
-  height: 100%;
-  background-color: var(--el-overlay-color-lighter);
-  overflow: auto;
-}
-
-.nb-dialog {
-  background: #ffffff;
-  border-radius: 16px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  &__close {
-    height: 42px;
-    width: 80px;
-    text-align: right;
-    position: absolute;
-    top: 40px;
-    right: 40px;
-    cursor: pointer;
-    .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: #8b8ea0;
-    }
-  }
-  &__header {
-    padding: 36px 40px 24px 40px;
-    display: flex;
-    align-items: center;
-    &__title {
-      flex: 1;
-      font-size: 28px;
-      line-height: 42px;
-      &--center {
-        text-align: center;
-      }
-    }
-  }
-  &__body {
-    flex: 1;
-    width: 100%;
-    overflow: auto;
-    &--center {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-    }
-  }
-  &__footer {
-    width: 100%;
-    height: 100px;
-    box-shadow: 0px -6px 16px 0px rgba(24, 29, 65, 0.08);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    &__tips {
-      height: 100%;
-      font-size: 28px;
-      color: #00a572;
-      line-height: 42px;
-      flex: 1;
-      padding: 0 40px;
-      border-right: 1px solid #cad0e0;
-      display: flex;
-      align-items: center;
-    }
-    .nb-button {
-      flex: 1;
-      height: 100%;
-      border-radius: 0;
-      border: none;
-      font-size: 36px;
-    }
-    &--has-tips {
-      .nb-button {
-        width: 400px;
-        flex: inherit;
-      }
-    }
-  }
-  &--large {
-    width: var(--nb-dialog-large-width);
-    height: var(--nb-dialog-large-height);
-    margin-top: 80px;
-  }
-  &--medium {
-    width: var(--nb-dialog-medium-width);
-    height: var(--nb-dialog-medium-height);
-    margin-top: 80px;
-  }
-  &--mini {
-    width: var(--nb-dialog-mini-width);
-    min-height: var(--nb-dialog-mini-height);
-    margin-top: 160px;
-
-    .nb-dialog__body__icon {
-      width: 160px;
-      height: 160px;
-      margin-bottom: 30px;
-    }
-    .nb-dialog__body__message {
-      font-size: 36px;
-      line-height: 54px;
-    }
-    .nb-dialog__body__desc {
-      font-size: 28px;
-      line-height: 42px;
-      margin-top: 8px;
-      color: var(--nb-font-color-5);
-    }
-    .nb-dialog__body__form {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      overflow-x: hidden;
-      overflow-y: auto;
-      .form__title {
-        text-align: center;
-        font-size: 36px;
-        line-height: 54px;
-      }
-      
-    }
-  }
-}

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

@@ -1,305 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-06-29 15:15:27
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-04 20:46:00
- * @Description: 模态框
--->
-<template>
-  <teleport to="body" :disabled="!appendToBody">
-    <transition name="dialog-fade" @after-enter="afterEnter" @after-leave="afterLeave" @before-leave="beforeLeave">
-      <div v-show="visible" :class="['nb-overlay', modalClass]" :z-index="zIndex">
-        <div :class="classes">
-          <!-- 头部 -->
-          <header v-if="title || $slots.title" :class="headerClasses">
-            <slot name="title">
-              <span :class="headerTitleClasses">{{ title }}</span>
-            </slot>
-          </header>
-          <span v-if="showClose" :class="bem('close')" @click="handleClose">
-            <svg-icon icon="close" />
-          </span>
-          <!-- 主体 -->
-          <div :class="bodyClasses">
-            <slot>
-              <img v-if="icon === 'success'" :class="bem('body__icon')" src="./images/success.png" />
-              <img v-if="icon === 'error'" :class="bem('body__icon')" src="./images/error.png" />
-              <img v-if="icon === 'warning-yellow'" :class="bem('body__icon')" src="./images/warning-yellow.png" />
-              <img v-if="icon === 'warning-red'" :class="bem('body__icon')" src="./images/warning-red.png" />
-              <div v-if="message" v-html="message" :class="bem('body__message')"></div>
-              <div v-if="desc" v-html="desc" :class="bem('body__desc')" :style="`color: ${descColor}`"></div>
-            </slot>
-          </div>
-          <!-- 底部 -->
-          <footer :class="footerClasses">
-            <slot name="footer">
-              <div v-if="footerTips" :class="bem('footer__tips')">{{ footerTips }}</div>
-              <nb-button
-                v-if="showCancelButton"
-                type="default"
-                :style="`color: ${cancelButtonColor}`"
-                @click="handleCancel"
-                >{{ cancelButtonText }}<template v-if="cancelButtonTime > -1">({{ cancelTime }}s)</template></nb-button
-              >
-              <nb-button v-if="showConfirmButton" type="primary" @click="handleConfirm"
-                >{{ confirmButtonText
-                }}<template v-if="confirmButtonTime > -1">({{ confirmTime }}s)</template></nb-button
-              >
-            </slot>
-          </footer>
-        </div>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { createNamespace } from '../../../utils/create.js'
-import { isNumber } from '../../../utils/validate.js'
-
-defineOptions({
-  name: 'NbDialog'
-})
-
-const props = defineProps({
-  // 尺寸
-  size: {
-    type: String,
-    default: 'medium'
-  },
-  // 自定义样式
-  customClass: {
-    type: String,
-    default: ''
-  },
-  // 标题， 也可通过具名 slot （见下表）传入
-  title: {
-    type: String,
-    default: ''
-  },
-  // 标题是否居中显示
-  titleCenter: {
-    type: String,
-    default: false
-  },
-  // header和body内容是否居中显示
-  center: {
-    type: Boolean,
-    default: false
-  },
-  // body的消息图标
-  icon: {
-    type: String
-  },
-  // body的消息内容
-  message: {
-    type: String
-  },
-  // body的消息描述
-  desc: {
-    type: String
-  },
-  // body的消息描述的字体颜色
-  descColor: {
-    type: String
-  },
-  // footer的左下角提示语，绿色字体
-  footerTips: {
-    type: String,
-    default: ''
-  },
-  // 是否显示取消按钮
-  showCancelButton: {
-    type: Boolean,
-    default: true
-  },
-  // 取消按钮的文本内容
-  cancelButtonText: {
-    type: String,
-    default: '取消'
-  },
-  // 取消按钮的文字颜色，默认浅灰色
-  cancelButtonColor: {
-    type: String,
-    default: ''
-  },
-  // 取消按钮是否开启倒计时
-  cancelButtonTime: {
-    type: Number,
-    default: -1
-  },
-  // 是否显示确定按钮
-  showConfirmButton: {
-    type: Boolean,
-    default: true
-  },
-  // 确定按钮的文本内容
-  confirmButtonText: {
-    type: String,
-    default: '确定'
-  },
-  // 确定按钮是否开启倒计时
-  confirmButtonTime: {
-    type: Number,
-    default: -1
-  },
-  fullscreen: {
-    type: Boolean,
-    default: false
-  },
-  // 右上角是否显示关闭按钮
-  showClose: {
-    type: Boolean,
-    default: false
-  },
-  appendToBody: {
-    type: Boolean,
-    default: false
-  },
-  beforeClose: {
-    type: Function
-  },
-  destroyOnClose: {
-    type: Boolean,
-    default: false
-  },
-  modal: {
-    type: Boolean,
-    default: true
-  },
-  openDelay: {
-    type: Number,
-    default: 0
-  },
-  closeDelay: {
-    type: Number,
-    default: 0
-  },
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  modalClass: String,
-  width: {
-    type: [String, Number]
-  },
-  zIndex: {
-    type: Number
-  }
-})
-const slots = defineSlots()
-
-// 定义emits
-const emits = defineEmits(['opened', 'closed', 'close', 'cancel', 'confirm'])
-
-const [name, bem] = createNamespace('dialog')
-let cancelTimer = null
-const cancelTime = ref(-1)
-let confirmTimer = null
-const confirmTime = ref(-1)
-
-// 是否显示弹框
-const visible = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emits('update:modelValue', value)
-  }
-})
-
-// 监听弹框显示，开启倒计时
-watch(visible, (val) => {
-  clearInterval(cancelTimer)
-  if (props.cancelButtonTime > -1 && props.showCancelButton) {
-    if (val) {
-      cancelTime.value = Number(JSON.parse(JSON.stringify(props.cancelButtonTime)))
-      cancelTimer = setInterval(() => {
-        cancelTime.value--
-        if (cancelTime.value <= 0) {
-          clearInterval(cancelTimer)
-          emits('cancel')
-        }
-      }, 1000)
-    } else {
-      clearInterval(cancelTimer)
-    }
-  }
-  clearInterval(confirmTimer)
-  if (props.confirmButtonTime > -1 && props.showConfirmButton) {
-    if (val) {
-      confirmTime.value = Number(JSON.parse(JSON.stringify(props.confirmButtonTime)))
-      confirmTimer = setInterval(() => {
-        confirmTime.value--
-        if (confirmTime.value <= 0) {
-          clearInterval(confirmTimer)
-          emits('confirm')
-        }
-      }, 1000)
-    } else {
-      clearInterval(confirmTimer)
-    }
-  }
-})
-
-// 样式
-const classes = bem([props.customClass, props.size])
-
-// header的样式
-const headerClasses = computed(() => {
-  return bem('header')
-})
-
-// header的标题样式
-const headerTitleClasses = computed(() => {
-  return bem('header__title', {
-    center: props.center || props.titleCenter
-  })
-})
-
-// body的样式
-const bodyClasses = bem('body', {
-  center: props.center
-})
-
-// footer的样式
-const footerClasses = computed(() => {
-  return bem('footer', {
-    'has-tips': props.footerTips
-  })
-})
-
-function afterEnter() {
-  emits('opened')
-}
-
-function afterLeave() {
-  emits('closed')
-}
-
-function beforeLeave() {
-  emits('close')
-}
-
-// 关闭弹框
-const handleClose = () => {
-  emits('update:modelValue', false)
-  clearInterval(cancelTimer)
-  clearInterval(confirmTimer)
-}
-
-// 点击弹框的取消按钮
-const handleCancel = () => {
-  clearInterval(cancelTimer)
-  emits('cancel')
-}
-
-// 点击弹框的确定按钮
-const handleConfirm = () => {
-  clearInterval(confirmTimer)
-  emits('confirm')
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

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

@@ -1,68 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2022-12-24 19:25:39
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-06-29 18:29:05
- * @Description: 空页面
--->
-<template>
-  <div class="nb-empty" :class="[!!$slots.default ? bem(['slot']) : '']">
-    <img v-if="icon === 'data'" src="./images/empty-data.png" class="nb-empty-icon" />
-    <img v-else-if="icon === 'abnormal'" src="./images/empty-abnormal.png" class="nb-empty-icon" />
-    <img v-else src="./images/empty-search.png" class="nb-empty-icon" />
-    <p v-if="text" class="nb-empty-text">{{ text }}</p>
-    <slot></slot>
-  </div>
-</template>
-<script setup>
-import { createNamespace } from '../../../utils/create.js'
-// 定义名称
-defineOptions({
-  name: 'NbEmpty'
-})
-
-// 定义props
-const props = defineProps({
-  // 定义Props
-  // 提示语
-  text: {
-    type: String,
-    default: ''
-  },
-  // 类型 search data abnormal
-  icon: {
-    type: String,
-    default: 'search',
-    validator(value) {
-      return ['search', 'data', 'abnormal'].includes(value)
-    }
-  }
-})
-
-const [name, bem] = createNamespace('empty')
-</script>
-
-<style lang="scss" scoped>
-.nb-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  .nb-empty-icon {
-    width: 500px;
-    height: 500px;
-  }
-  .nb-empty-text {
-    font-size: 32px;
-    line-height: 48px;
-    margin-top: 30px;
-  }
-  &--slot {
-    .nb-empty-text {
-      margin-bottom: 32px;
-    }
-  }
-}
-</style>