nubomed-ui 1.0.3 → 1.0.4

package/src/docs/index.vue

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

@@ -1,23 +0,0 @@
-/*
- * @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

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

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

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

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