nubomed-ui 1.0.2 → 1.0.3

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+: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;
+  }
+}