nubomed-ui 1.0.1 → 1.0.3

package/src/docs/index.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="container">
+    <div class="container-header"></div>
+    <div class="container">
+      <div class="container-aside">
+        <div class="menu">
+          <div v-for="item in navList" :key="item.text" class="menu__group">
+            <p class="menu__group__text">{{ item.text }}</p>
+            <div
+              v-for="(child, index) in item.children"
+              :key="index"
+              class="menu__group__child"
+              :class="
+                active.text === child.text ? 'menu__group__child--active' : ''
+              "
+            >
+              {{ child.text }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="container-main">
+        <component :is="active.component"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import Icons from '../demos/Icons.vue'
+import Button from '../demos/Button.vue'
+
+const navList = ref([])
+navList.value.push({
+  text: '基础组件',
+  children: [
+    {
+      text: '图标',
+      id: 'Icons',
+      component: Icons
+    },
+    {
+      text: '按钮',
+      id: 'Button',
+      component: Button
+    }
+  ]
+})
+navList.value.push({
+  text: '表单组件',
+  children: [
+    { text: 'Input 输入框', id: 'Input' },
+    { text: 'Input Number 数字器', id: 'InputNumber' },
+    { text: '多选按钮', id: 'ButtonGroup' },
+    { text: '下拉框', id: '' },
+    { text: '开关', id: '' },
+    { text: '日期选择器', id: '' },
+    { text: '时间选择器', id: '' }
+  ]
+})
+navList.value.push({
+  text: '数据展示',
+  children: [
+    { text: 'Badge 徽章', id: 'Badge' },
+    { text: 'Empty 空状态', id: 'Empty' },
+    { text: 'Steps 步骤条', id: 'Steps' },
+    { text: '走马灯', id: '' },
+    { text: '分页', id: '' },
+    { text: '进度条', id: '' },
+    { text: '表格', id: '' },
+    { text: '时间线', id: '' }
+  ]
+})
+navList.value.push({
+  text: '导航',
+  children: [
+    { text: '标题栏', id: 'Header' },
+    { text: '底部导航', id: 'FooterMenu' },
+    { text: '侧边栏', id: 'LeftMenu' },
+    { text: '宫格菜单', id: 'Menus' },
+    { text: '下拉菜单', id: '' }
+  ]
+})
+navList.value.push({
+  text: '反馈组件',
+  children: [
+    { text: 'Dialog 对话框', id: 'Dialog' },
+    { text: 'Loading 加载', id: '' },
+    { text: 'Tost 提示', id: 'Tost' },
+    { text: 'Message 消息弹框', id: '' },
+    { text: 'Popover 气泡卡片', id: '' },
+    { text: 'Tooltip 文字提示', id: '' }
+  ]
+})
+
+navList.value.push({
+  text: '键盘',
+  children: [
+    { text: '输入框键盘', id: 'InputKeyboard' },
+    { text: '通用键盘', id: '' }
+  ]
+})
+
+navList.value.push({
+  text: '业务组件',
+  children: [
+    { text: '状态栏', id: 'Statusbar' },
+    { text: '动作栏', id: 'ActionBar' },
+    { text: '检测页', id: 'CheckPage' },
+    { text: '开柜浮球', id: 'OpenCabinetBall' }
+  ]
+})
+
+const active = ref(navList.value[0].children[1])
+
+const handleRef = (id) => {
+  nextTick(() => {
+    const returnEle = document.querySelector('#' + id) // 将要跳转区域的id
+    if (returnEle) {
+      returnEle.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+        inline: 'nearest'
+      }) // true 是默认的
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .container-header {
+    height: 60px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  .container {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    .container-aside {
+      width: 200px;
+      height: 100%;
+      overflow: auto;
+      border-right: 1px solid #dcdfe6;
+    }
+    .container-main {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+.menu {
+  margin: 0 20px;
+  &__group {
+    margin-bottom: 15px;
+    &__text {
+      font-size: 16px;
+      line-height: 28px;
+    }
+    &__child {
+      font-size: 14px;
+      line-height: 40px;
+      border-radius: 10px;
+      padding: 0 15px;
+      cursor: pointer;
+      &--active {
+        background-color: rgba(#79bbff, 0.1);
+        color: #79bbff;
+      }
+    }
+  }
+}
+
+.component {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  &__left {
+    flex: 1;
+    height: 100%;
+    overflow: auto;
+    padding: 30px;
+    box-sizing: border-box;
+  }
+  &__right {
+    width: 180px;
+    height: 100%;
+    overflow: auto;
+    padding: 30px;
+    box-sizing: border-box;
+  }
+  &__title {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 56px;
+  }
+  &__intro {
+    font-size: 14px;
+    line-height: 28px;
+  }
+  &__detail {
+    &__title {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 36px;
+    }
+    &__intro {
+      font-size: 14px;
+      line-height: 28px;
+    }
+    &__box {
+      border: 1px solid #dcdfe6;
+      border-radius: 5px;
+    }
+    &__demo {
+      padding: 15px;
+      border-bottom: 1px solid #dcdfe6;
+    }
+    &__toggle {
+      padding: 15px;
+      border-bottom: 1px solid #dcdfe6;
+      text-align: right;
+    }
+    &__code {
+      background-color: #f0f2f5;
+      padding: 15px;
+    }
+  }
+}
+
+.table{
+  width: 100%;
+  td, th{
+    text-align: left;border: 1px solid #cad0e0;font-size: 16px;line-height: 24px;padding: 5px 12px;
+  }
+}
+
+.demo {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: #f3f7fd;
+  padding-top: 150px;
+}
+.demo-nav {
+  padding: 10px 30px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  min-height: 40px;
+  line-height: 40px;
+  background-color: #ffffff;
+  z-index: 1;
+  box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.15);
+  div {
+    display: inline-block;
+    margin-right: 20px;
+  }
+  strong {
+    font-size: 24px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+.demo-box {
+  background-color: #ffffff;
+}
+.demo-box-title {
+  border-bottom: 1px solid #cad0e0;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  .demo-box-title-name {
+    height: 76px;
+    font-size: 50px;
+    line-height: 76px;
+  }
+  .demo-box-title-desc {
+    height: 32px;
+    font-size: 24px;
+    color: #f98900;
+    line-height: 32px;
+    margin-left: 20px;
+  }
+}
+</style>

package/src/main.js

@@ -0,0 +1,23 @@
+/*
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 16:24:35
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-09-12 18:38:40
+ * @Description:
+ */
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+import NuboMedUI from './packages' //导入
+app.use(NuboMedUI)
+
+// import NuboMedUIBI from './bi-packages' //导入
+// app.use(NuboMedUIBI)
+
+// svg图标
+import SvgIcon from './packages/components/SvgIcon/index.vue'
+app.component('SvgIcon', SvgIcon)
+
+app.mount('#app')

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

@@ -0,0 +1,81 @@
+:root {
+  // 通用
+  --nb-action-bar-height: 112px;
+}
+
+.nb-action-bar {
+  position: relative;
+  width: 100%;
+  height: var(--nb-action-bar-height);
+  background: #ffffff;
+  box-shadow: 0px 4px 40px 0px rgba(24, 29, 65, 0.08), 0px 2px 28px 0px rgba(24, 29, 65, 0.1),
+    0px 0px 10px 0px rgba(24, 29, 65, 0.08);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+  box-sizing: border-box;
+  &__left {
+    display: flex;
+    align-items: center;
+    img {
+      width: 80px;
+      height: 80px;
+      margin-right: 20px;
+    }
+    span {
+      font-size: 28px;
+      line-height: 42px;
+    }
+  }
+  &__right {
+    display: flex;
+    align-items: center;
+    .nb-button + .nb-button {
+      margin-left: 24px;
+    }
+  }
+  &--loading {
+    .nb-action-bar__left span {
+      strong {
+        font-size: 36px;
+        font-family: var(--nb-font-bold-family);
+        font-weight: normal;
+        color: #00a572;
+        line-height: 54px;
+        margin-left: 4px;
+      }
+    }
+  }
+  &--abnormal {
+    .nb-action-bar__left span {
+      font-size: 32px;
+      font-family: var(--nb-font-bold-family);
+      color: var(--nb-abnormal-color);
+      line-height: 50px;
+    }
+  }
+  &--success {
+    .nb-action-bar__left span {
+      color: var(--nb-font-color-7);
+      display: flex;
+      align-items: center;
+      strong {
+        font-size: 36px;
+        font-family: OPPOSans-B, OPPOSans;
+        font-weight: normal;
+        color: #00a572;
+        line-height: 54px;
+        margin-left: 4px;
+      }
+    }
+  }
+  &--fixed {
+    position: fixed;
+    bottom: 30px;
+    left: 30px;
+    right: 30px;
+    width: auto;
+  }
+}

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

@@ -0,0 +1,100 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 15:15:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-24 18:13:22
+ * @Description: 检测动作栏
+-->
+<template>
+  <div class="nb-action-bar" :class="classes">
+    <!-- 检测中 -->
+    <div v-if="loading" class="nb-action-bar__left">
+      <slot name="loading">
+        <img src="./images/loading.gif" />
+        <span>{{ loadingText }}</span>
+      </slot>
+    </div>
+    <!-- 检测异常 -->
+    <div v-if="abnormal" class="nb-action-bar__left">
+      <slot name="abnormal">
+        <img src="./images/warning.png" />
+        <span>{{ abnormalText }}</span>
+      </slot>
+    </div>
+    <!-- 检测正常 -->
+    <div v-if="success" class="nb-action-bar__left">
+      <slot name="success">
+        <img src="./images/success.png" />
+        <span v-html="successText"></span>
+      </slot>
+    </div>
+
+    <!-- 右侧显示按钮 -->
+    <div class="nb-action-bar__right">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { createNamespace } from '../../../utils/create.js'
+
+defineOptions({
+  name: 'NbActionBar'
+})
+
+const props = defineProps({
+  // 是否定位fixed
+  fixed: {
+    type: Boolean,
+    default: true
+  },
+  // 检测中
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 检测中的提示语
+  loadingText: {
+    type: String,
+    default: ''
+  },
+  // 是否异常
+  abnormal: {
+    type: Boolean,
+    default: false
+  },
+  // 异常提示语
+  abnormalText: {
+    type: String,
+    default: ''
+  },
+  // 是否正常
+  success: {
+    type: Boolean,
+    default: false
+  },
+  // 正常的提示语
+  successText: {
+    type: String,
+    default: ''
+  }
+})
+
+const [name, bem] = createNamespace('action-bar')
+
+// 样式
+const classes = bem([
+  {
+    fixed: props.fixed,
+    loading: props.loading,
+    abnormal: props.abnormal,
+    success: props.success
+  }
+])
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

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

@@ -0,0 +1,50 @@
+:root {
+  // 通用
+  --nb-badge-border-radius: 16px;
+  --nb-badge-font-size: 24px;
+  --nb-badge-color: #ffffff;
+  --nb-badge-height: 32px;
+  --nb-badge-bg-color: var(--nb-abnormal-color);
+}
+
+.nb-badge {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+  width: fit-content;
+
+  &__content {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    height: var(--nb-badge-height);
+    min-width: var(--nb-badge-height);
+    padding: 0 4px;
+
+    background-color: var(--nb-badge-bg-color);
+    border-radius: var(--nb-badge-border-radius);
+    color: var(--nb-badge-color);
+    font-size: var(--nb-badge-font-size);
+    line-height: var(--nb-badge-height);
+    white-space: nowrap;
+
+    &--fixed {
+      position: absolute;
+      top: 0;
+      right: calc(1px + #{var(--nb-badge-font-size)} / 2);
+      transform: translateY(-50%) translateX(100%);
+      &.nb-badge__content--dot{
+        right: 5px;
+      }
+    }
+    &--dot {
+      height: 10px;
+      width: 10px;
+      min-width: 0;
+      padding: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 15:15:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-06-29 18:25:27
+ * @Description: 徽章
+-->
+<template>
+  <div class="nb-badge">
+    <slot />
+    <sup v-show="!hidden && (content || isDot)" :class="classes" v-text="content" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { createNamespace } from '../../../utils/create.js'
+import { isNumber } from '../../../utils/validate.js'
+
+defineOptions({
+  name: 'NbBadge'
+})
+
+const props = defineProps({
+  // 显示值
+  value: {
+    type: [String, Number],
+    default: ''
+  },
+  // 最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
+  max: {
+    type: [String, Number],
+    default: 99
+  },
+  // 是否隐藏 Badge。
+  hidden: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示小圆点。
+  isDot: {
+    type: Boolean,
+    default: false
+  }
+})
+const slots = defineSlots()
+
+const [name, bem] = createNamespace('badge__content')
+
+// 样式
+const classes = bem([
+  {
+    fixed: !!slots.default,
+    dot: props.isDot
+  }
+])
+
+// 显示内容
+const content = computed(() => {
+  if (props.isDot) return ''
+
+  if (isNumber(props.value) && isNumber(props.max)) {
+    return props.max < props.value ? `${props.max}+` : `${props.value}`
+  }
+  return `${props.value}`
+})
+
+defineExpose({
+  content
+})
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>