n20-common-lib 3.1.14 → 3.1.16

package/src/components/v3/Collapse/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="n20-page-collapse">
+    <div class="n20-page-collapse__header" @click="toggle">
+      <div class="n20-page-collapse__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div class="n20-page-collapse__action">
+        <span class="n20-page-collapse__action-text">{{ actionText }}</span>
+        <i
+          class="n20-page-collapse__arrow"
+          :class="isExpanded ? 'n20-page-collapse__arrow-up' : 'n20-page-collapse__arrow-down'"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 9.5L7 5.5L11 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </i>
+      </div>
+    </div>
+    <div class="n20-page-collapse__body-wrap" :class="{ 'is-expanded': isExpanded }">
+      <div class="n20-page-collapse__body">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../../utils/i18n/index'
+
+export default {
+  name: 'Collapse',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    expanded: {
+      type: Boolean,
+      default: null
+    }
+  },
+  data() {
+    return {
+      localExpanded: true
+    }
+  },
+  computed: {
+    isControlled() {
+      return this.expanded !== null
+    },
+    isExpanded() {
+      return this.isControlled ? this.expanded : this.localExpanded
+    },
+    actionText() {
+      return this.isExpanded ? $lc('收起') : $lc('展开')
+    }
+  },
+  methods: {
+    toggle() {
+      const next = !this.isExpanded
+      if (!this.isControlled) {
+        this.localExpanded = next
+      }
+      this.$emit('update:expanded', next)
+      this.$emit('change', next)
+    }
+  }
+}
+</script>

package/src/components/v3/Footer/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="n20-page-footer-v3" :style="showTopDivider ? 'border-top: 1px solid #E5E6EB;' : undefined">
+    <div :class="`n20-page-footer-left ${leftExtraClass}`">
+      <slot name="leftExtra"></slot>
+    </div>
+    <div :class="`n20-page-footer-center ${centerClass}`">
+      <slot></slot>
+    </div>
+    <div :class="`n20-page-footer-right ${rightExtraClass}`">
+      <slot name="rightExtra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    leftExtraClass: {
+      type: String,
+      default: ''
+    },
+    centerClass: {
+      type: String,
+      default: ''
+    },
+    rightExtraClass: {
+      type: String,
+      default: ''
+    },
+    showTopDivider: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>

package/src/components/v3/Header/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="n20-page-header-v3" :style="showBottomDivider ? 'border-bottom: 1px solid #E5E6EB;' : undefined">
+    <div class="n20-page-header-left">
+      <div v-if="showBack" class="n20-page-header-v3__back" @click="handleBack">
+        <i :class="icon"></i>
+        <span class="n20-page-header-v3__back-text">{{ title }}</span>
+      </div>
+      <div v-if="showBack" class="n20-page-header-v3__divider"></div>
+      <div class="n20-page-header-v3__title">
+        <slot name="content">{{ content }}</slot>
+      </div>
+    </div>
+    <div :class="`n20-page-header-right ${extraClass}`">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    extraClass: {
+      type: String,
+      default: ''
+    },
+    showBack: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '返回'
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'n20-icon-yuefenqiehuan-zuoce'
+    },
+    showBottomDivider: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleBack() {
+      this.$emit('back')
+    }
+  }
+}
+</script>

package/src/components/v3/RadioCard/components/Card.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    :class="`n20-page-radio-card-item${checked ? ' n20-page-radio-card-item-checked' : ''}${disabled ? ' n20-page-radio-card-item-disabled' : ''}`"
+    @click="handleClick"
+  >
+    <el-radio
+      :key="value"
+      :value="checkValue"
+      :disabled="disabled"
+      class="n20-page-radio-card-item-radio"
+      :label="value"
+      >{{ label }}</el-radio
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RadioCardItem',
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    checkValue: {
+      type: [String, Number, Boolean, null, undefined],
+      default: null
+    },
+    value: {
+      type: [String, Number, Boolean],
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('check', this.value)
+    }
+  }
+}
+</script>

package/src/components/v3/RadioCard/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="n20-page-radio-card">
+    <Card
+      v-for="option in options"
+      :key="option.value"
+      :checked="value === option.value"
+      :check-value="value"
+      :value="option.value"
+      :label="option.label"
+      :disabled="option.disabled"
+      @check="handleCheck"
+    />
+  </div>
+</template>
+
+<script>
+import Card from './components/Card.vue'
+
+export default {
+  name: 'RadioCard',
+  components: { Card },
+  model: {
+    prop: 'value',
+    event: 'onChange'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean, null, undefined],
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleCheck(value) {
+      this.$emit('onChange', value)
+    }
+  }
+}
+</script>

package/src/components/v3/UploadList/index.vue

@@ -190,7 +190,7 @@ const keysDefault = {
 }
 
 export default {
-  name: 'UploadList',
+  name: 'FileUploadTableV3',
   components: {
     Upload,
     Dialog,

package/src/index.js

@@ -124,6 +124,11 @@ import TimePicker from './components/TimePicker/index.vue'
 import Tree from './components/Tree/index.vue'
 import Upload from './components/Upload/index.vue'
 import UploadMsg from './components/Upload/uploadMsg.vue'
+import AnchorV3 from './components/v3/Anchor/index.vue'
+import Collapse from './components/v3/Collapse/index.vue'
+import Footer from './components/v3/Footer/index.vue'
+import Header from './components/v3/Header/index.vue'
+import RadioCard from './components/v3/RadioCard/index.vue'
 import SecondaryTabV3 from './components/v3/SecondaryTab/index.vue'
 
 /* v3组件*/
@@ -281,7 +286,12 @@ const components = [
   operatingStatus,
   /* v3组件*/
   tableProV3,
-  SecondaryTabV3
+  SecondaryTabV3,
+  Header,
+  Footer,
+  RadioCard,
+  Collapse,
+  AnchorV3
 ]
 
 const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
@@ -428,6 +438,11 @@ export {
   /* v3组件*/
   tableProV3,
   SecondaryTabV3,
+  Header,
+  Footer,
+  RadioCard,
+  Collapse,
+  AnchorV3,
   asyncGetRelaNos,
   // 方法
   auth,