nubomed-ui 1.0.3 → 1.0.4

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

@@ -1,241 +0,0 @@
-:root {
-  --nb-button-border-radius: 8px;
-  // 按type
-  // type=primary
-  --nb-button-primary-color: #ffffff;
-  --nb-button-primary-background: linear-gradient(180deg, #3385e6 0%, #0066e0 100%);
-  --nb-button-primary-box-shadow: 0px 1px 6px 0px rgba(24, 29, 65, 0.12);
-  --nb-button-primary-border-color: #0066e0;
-  --nb-button-primary-background-focus: #007aff;
-  // type=warning
-  --nb-button-warning-color: #ffffff;
-  --nb-button-warning-background: linear-gradient(180deg, #ea5765 0%, #e52d3e 100%);
-  --nb-button-warning-box-shadow: 0px 1px 6px 0px rgba(24, 29, 65, 0.12);
-  --nb-button-warning-border-color: #e52d3e;
-  --nb-button-warning-background-focus: #f94a5a;
-  // type=default
-  --nb-button-default-color: #181d41;
-  --nb-button-default-background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
-  --nb-button-default-box-shadow: 0px 1px 6px 0px rgba(24, 29, 65, 0.12);
-  --nb-button-default-border-color: #cad0e0;
-  --nb-button-default-background-focus: #cad0e0;
-  // type=info
-  --nb-button-info-color: #ffffff;
-  --nb-button-info-background: linear-gradient(180deg, #00aabb 0%, #008693 100%);
-  --nb-button-info-box-shadow: none;
-  --nb-button-info-border-color: #008693;
-  --nb-button-info-background-focus: #008693;
-  
-  // plain
-  --nb-button-plain-background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
-  --nb-button-plain-border-color: #cad0e0;
-  // disabled
-  --nb-button-disabled-color: rgba(24, 29, 65, 0.2);
-  --nb-button-disabled-background: #f4f6f9;
-  --nb-button-disabled-box-shadow: none;
-  --nb-button-disabled-border-color: #f4f6f9;
-  --nb-button-disabled-background-focus: #f4f6f9;
-  // size=large
-  --nb-button-large-width: 480px;
-  --nb-button-large-height: 80px;
-  --nb-button-large-font-size: 28px;
-  --nb-button-large-icon-size: 40px;
-  // size=medium
-  --nb-button-medium-width: 220px;
-  --nb-button-medium-height: 72px;
-  --nb-button-medium-font-size: 28px;
-  --nb-button-medium-icon-size: 28px;
-  // size=small
-  --nb-button-small-width: 220px;
-  --nb-button-small-height: 64px;
-  --nb-button-small-font-size: 24px;
-  --nb-button-small-icon-size: 28px;
-  // size=mini
-  --nb-button-mini-width: 88px;
-  --nb-button-mini-height: 48px;
-  --nb-button-mini-font-size: 24px;
-  --nb-button-mini-icon-size: 24px;
-}
-
-.nb-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  text-align: center;
-  box-sizing: border-box;
-  outline: none;
-  transition: 0.1s;
-  user-select: none;
-  vertical-align: middle;
-  -webkit-appearance: none;
-  border-radius: var(--nb-button-border-radius);
-  font-family: inherit;
-  font-weight: normal;
-
-  &:focus {
-    outline: none;
-  }
-  &--large {
-    min-width: var(--nb-button-large-width);
-    height: var(--nb-button-large-height);
-    font-size: var(--nb-button-large-font-size);
-    padding: 0 36px;
-    svg,
-    .svg-icon {
-      width: var(--nb-button-large-icon-size);
-      height: var(--nb-button-large-icon-size);
-      margin-right: 8px;
-    }
-  }
-
-  &--medium {
-    min-width: var(--nb-button-medium-width);
-    height: var(--nb-button-medium-height);
-    font-size: var(--nb-button-medium-font-size);
-    padding: 0 20px;
-    svg,
-    .svg-icon {
-      width: var(--nb-button-medium-icon-size);
-      height: var(--nb-button-medium-icon-size);
-      margin-right: 8px;
-    }
-  }
-
-  &--small {
-    min-width: var(--nb-button-small-width);
-    height: var(--nb-button-small-height);
-    font-size: var(--nb-button-small-font-size);
-    padding: 0 20px;
-    svg,
-    .svg-icon {
-      width: var(--nb-button-small-icon-size);
-      height: var(--nb-button-small-icon-size);
-      margin-right: 8px;
-    }
-  }
-
-  &--mini {
-    min-width: var(--nb-button-mini-width);
-    height: var(--nb-button-mini-height);
-    font-size: var(--nb-button-mini-font-size);
-    padding: 0 20px;
-    svg,
-    .svg-icon {
-      width: var(--nb-button-mini-icon-size);
-      height: var(--nb-button-mini-icon-size);
-      margin-right: 8px;
-    }
-  }
-  &--auto-width {
-    width: fit-content;
-    min-width: 160px !important;
-  }
-
-  &--primary {
-    color: var(--nb-button-primary-color);
-    background: var(--nb-button-primary-background);
-    box-shadow: var(--nb-button-primary-box-shadow);
-    border: 1px solid var(--nb-button-primary-border-color);
-    &:focus {
-      border-color: var(--nb-button-primary-background-focus);
-      background-color: var(--nb-button-primary-background-focus);
-    }
-    &.nb-button--plain {
-      color: var(--nb-button-primary-border-color);
-    }
-  }
-  &--warning {
-    color: var(--nb-button-warning-color);
-    background: var(--nb-button-warning-background);
-    box-shadow: var(--nb-button-warning-box-shadow);
-    border: 1px solid var(--nb-button-warning-border-color);
-    &:focus {
-      border-color: var(--nb-button-warning-background-focus);
-      background-color: var(--nb-button-warning-background-focus);
-    }
-    &.nb-button--plain {
-      color: var(--nb-button-warning-border-color);
-    }
-  }
-  &--default {
-    color: var(--nb-button-default-color);
-    background: var(--nb-button-default-background);
-    box-shadow: var(--nb-button-default-box-shadow);
-    border: 1px solid var(--nb-button-default-border-color);
-    &:focus {
-      border-color: var(--nb-button-default-background-focus);
-      background-color: var(--nb-button-default-background-focus);
-    }
-    &.nb-button--plain {
-      color: var(--nb-button-default-border-color);
-    }
-  }
-  &--info {
-    color: var(--nb-button-info-color);
-    background: var(--nb-button-info-background);
-    box-shadow: var(--nb-button-info-box-shadow);
-    border: 1px solid var(--nb-button-info-border-color);
-    &:focus {
-      border-color: var(--nb-button-info-background-focus);
-      background-color: var(--nb-button-info-background-focus);
-    }
-    &.nb-button--plain {
-      color: var(--nb-button-info-border-color);
-    }
-  }
-  &--plain {
-    background: var(--nb-button-plain-background);
-    border-color: var(--nb-button-plain-border-color);
-  }
-
-  &--text {
-    &.nb-button--text {
-      min-width: 100px;
-      height: 64px;
-      background: transparent;
-      border-color: transparent;
-      box-shadow: none;
-      padding: 0 10px 0 6px;
-      font-size: 24px;
-      &:focus {
-        border-color: transparent;
-        background-color: transparent;
-      }
-      svg,
-      .svg-icon {
-        width: 32px;
-        height: 32px;
-      }
-    }
-  }
-  &--loading {
-    cursor: default;
-    opacity: 0.5;
-    .is-loading {
-      width: 28px;
-      height: 28px;
-      margin-right: 8px;
-      animation: rotating 2s linear infinite;
-    }
-    @keyframes rotating {
-      0% {
-        transform: rotateZ(0deg);
-      }
-      100% {
-        transform: rotateZ(360deg);
-      }
-    }
-  }
-  &--disabled {
-    cursor: not-allowed;
-    background: var(--nb-button-disabled-background);
-    box-shadow: var(--nb-button-disabled-box-shadow);
-    border: 1px solid var(--nb-button-disabled-border-color);
-    &.nb-button.nb-button--disabled {
-      color: var(--nb-button-disabled-color);
-    }
-  }
-}

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

@@ -1,111 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-06-27 16:57:58
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-06-29 18:27:30
- * @Description: 按钮
--->
-<template>
-  <button :class="classes" :disabled="buttonDisabled" @click="onClick">
-    <!-- loading -->
-    <svg-icon v-if="loading" icon="loading" class="is-loading" />
-    <!-- svg-icon -->
-    <svg-icon v-if="svgIcon" :icon="svgIcon" class="svg-icon" />
-    <slot></slot>
-  </button>
-</template>
-<script setup>
-import { computed } from 'vue'
-import { createNamespace } from '../../../utils/create.js'
-
-const [name, bem] = createNamespace('button')
-
-// 定义名称
-defineOptions({
-  name: 'NbButton'
-})
-
-// 定义props
-const props = defineProps({
-  // 定义Props
-  // 类型，可选值为 primary warning default info
-  type: {
-    type: String,
-    default: 'default',
-    validator(value) {
-      return ['default', 'primary', 'warning', 'info'].includes(value)
-    }
-  },
-  // 尺寸，可选值为 large medium small mini
-  size: {
-    type: String,
-    default: 'medium',
-    validator(value) {
-      return ['large', 'medium', 'small', 'mini'].includes(value)
-    }
-  },
-  // 按钮是否为禁用状态
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 是否为加载中状态
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  // 是否为朴素按钮
-  plain: {
-    type: Boolean,
-    default: false
-  },
-  // 是否为文字按钮
-  text: {
-    type: Boolean,
-    default: false
-  },
-  // 是否自适应文字显示宽度
-  autoWidth: {
-    type: Boolean,
-    default: false
-  },
-  // svg-icon的名称
-  svgIcon: {
-    type: String,
-    default: ''
-  }
-})
-
-// 定义emits
-const emits = defineEmits(['click'])
-
-// 按钮是否禁用
-const buttonDisabled = computed(() => {
-  if (props.loading) {
-    return true
-  }
-  return props.disabled
-})
-
-// 样式
-const classes = bem([
-  props.size,
-  props.type,
-  {
-    'auto-width': props.autoWidth,
-    plain: props.plain,
-    loading: props.loading,
-    disabled: props.disabled,
-    text: props.text
-  }
-])
-
-// 点击按钮
-const onClick = () => {
-  emits('click')
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

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

@@ -1,54 +0,0 @@
-.nb-button-group {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  &__item {
-    min-width: 88px;
-    height: 64px;
-    background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F9 100%);
-    box-shadow: 0px 1px 6px 0px rgba(24, 29, 65, 0.12);
-    border-radius: 8px;
-    border: 1px solid #CAD0E0;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    line-height: 36px;
-    box-sizing: border-box;
-    padding: 0 17px;
-    overflow: hidden;
-    cursor: pointer;
-
-    .nb-icon {
-      display: none;
-    }
-
-    &--checked {
-      color: var(--nb-theme-color);
-      border: 3px solid var(--nb-theme-color);
-      box-shadow: none;
-      background: #DEEDFF;
-      overflow: hidden;
-      padding: 0 15px;
-      .nb-icon {
-        display: block;
-        position: absolute;
-        bottom: -3px;
-        right: -3px;
-        width: 28px;
-        height: 28px;
-        z-index: 2;
-      }
-    }
-    &--disabled{
-      cursor: no-drop;
-      color: var(--nb-input-disabled-color);
-    }
-  }
-
-  &__item+&__item {
-    margin-left: 16px;
-  }
-}

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

@@ -1,75 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-10 17:51:28
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-11 11:46:07
- * @Description: 多选按钮组
--->
-<template>
-  <ul class="nb-button-group">
-    <li v-for="(item, index) in data" :key="index" :class="itemClassess(item)" @click="handleChange(item)">{{ item.label }}<nb-icon icon="checked-corner-bottom" /></li>
-  </ul>
-</template>
-<script setup>
-import { ref, computed } from 'vue'
-import { createNamespace } from '../../../utils/create.js'
-
-const [name, bem] = createNamespace('button-group')
-
-// 定义名称
-defineOptions({
-  name: 'NbButtonGroup'
-})
-
-// 定义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/Check/Cate.vue

@@ -1,138 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-10 17:51:28
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-14 18:00:04
- * @Description: 多选按钮组
--->
-<template>
-  <div class="nb-check-cate">
-    <nb-icon class="nb-check-cate__arrow" icon="caret-right" />
-    <nb-icon class="nb-check-cate__icon" icon="menu-in-store" />
-    <strong class="nb-check-cate__text"
-      >异常出库<small>2021/10/22</small></strong
-    >
-    <span class="nb-check-cate__count">
-      <slot name="count"><i>数量</i><strong>32</strong></slot>
-    </span>
-  </div>
-</template>
-<script setup>
-import { ref, computed } from "vue";
-import { createNamespace } from '../../../utils/create.js';
-
-const [name, bem] = createNamespace("check-cate");
-
-// 定义名称
-defineOptions({
-  name: "NbCheckCate",
-});
-
-// 定义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">
-.nb-check-cate {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--nb-check-list-cate-height);
-  background-color: #f4f6f9;
-  border-radius: 8px;
-  padding: 0 30px 0 17px;
-  box-sizing: border-box;
-  &__arrow {
-    width: 40px !important;
-    height: 40px !important;
-    color: #8b8ea0;
-    margin-right: 8px;
-    cursor: pointer;
-  }
-  &__icon {
-    width: 40px !important;
-    height: 40px !important;
-    margin-right: 8px;
-  }
-
-  &__text {
-    font-size: 32px;
-    line-height: 48px;
-    font-family: var(--nb-font-bold-family);
-
-    small {
-      font-size: 24px;
-      line-height: 32px;
-      font-family: var(--nb-font-family);
-      font-weight: normal;
-      color: var(--nb-font-color-5);
-      margin-left: 18px;
-    }
-  }
-
-  &__count {
-    flex: 1;
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    i {
-      font-size: 24px;
-      line-height: 36px;
-      color: var(--nb-font-color-5);
-      font-style: normal;
-    }
-    strong {
-      font-family: var(--nb-font-bold-family);
-      font-size: 36px;
-      line-height: 48px;
-      margin-left: 8px;
-      color: var(--nb-theme-color);
-    }
-  }
-}
-</style>

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

@@ -1,47 +0,0 @@
-:root {
-  --nb-check-list-cate-height: 72px;
-  --nb-check-list-detail-height: 94px;
-}
-
-.nb-check-list {
-  &__item {
-    
-
-    &__details {}
-
-    &__detail {
-      margin-top: 8px;
-      min-height: var(--nb-check-list-detail-height);
-      background: #FEF2F6;
-      border-radius: 8px;
-      border: 1px solid #CAD0E0;
-      box-sizing: border-box;
-
-      &__top {
-        display: flex;
-        align-items: center;
-        min-height: calc(var(--nb-check-list-detail-height) - 2px);
-        padding: 0 24px 0 16px;
-
-      }
-
-      &__arrow {
-        width: 40px !important;
-        height: 40px !important;
-        color: #8B8EA0;
-        margin-right: 8px;
-        cursor: pointer;
-      }
-
-      &__name {
-        font-size: 28px;
-        line-height: 42px;
-        font-family: var(--nb-font-bold-family);
-      }
-    }
-  }
-
-  &__item+&__item {
-    margin-top: 40px;
-  }
-}