nubomed-ui 1.0.2 → 1.0.3

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

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

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

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

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