n20-common-lib 3.2.67 → 3.2.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.2.67",
+  "version": "3.2.68",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/_coreLib.scss

@@ -58,6 +58,7 @@
 @import './v3/footer.scss';
 @import './v3/radioCard.scss';
 @import './v3/collapse.scss';
+@import './v3/collapse-link.scss';
 @import './v3/anchor.scss';
 @import './info-card.scss';
 

package/src/assets/css/v3/collapse-link.scss

@@ -0,0 +1,82 @@
+.v3-collapse-link {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin: 0;
+    padding: 1px 4px;
+    overflow: hidden;
+    appearance: none;
+    border: 0;
+    border-radius: 2px;
+    background: transparent;
+    color: $--color-primary;
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 22px;
+    cursor: pointer;
+    user-select: none;
+
+    &.is-left {
+      align-self: flex-start;
+    }
+
+    &.is-right {
+      align-self: flex-end;
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba($--color-primary, 0.3);
+      outline-offset: 1px;
+    }
+  }
+
+  &__text {
+    white-space: nowrap;
+  }
+
+  &__arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    line-height: 14px;
+    transition: transform 0.2s ease;
+
+    &.is-collapsed {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    margin-top: 12px;
+    background: $--border-color-base;
+  }
+
+  &__body-wrap {
+    display: grid;
+    grid-template-rows: 0fr;
+    margin-top: 0;
+    transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
+
+    &.is-expanded {
+      grid-template-rows: 1fr;
+      margin-top: 12px;
+    }
+  }
+
+  &__body {
+    min-height: 0;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="v3-collapse-link">
+    <button
+      type="button"
+      class="v3-collapse-link__trigger"
+      :class="`is-${align}`"
+      :aria-expanded="String(isExpanded)"
+      @click="toggle"
+    >
+      <span class="v3-collapse-link__text">{{ actionText }}</span>
+      <i
+        class="v3-icon-up v3-collapse-link__arrow"
+        :class="{ 'is-collapsed': !isExpanded }"
+        aria-hidden="true"
+      ></i>
+    </button>
+    <div v-if="showDivider" class="v3-collapse-link__divider"></div>
+    <div
+      v-if="$slots.default"
+      class="v3-collapse-link__body-wrap"
+      :class="{ 'is-expanded': isExpanded }"
+    >
+      <div class="v3-collapse-link__body">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../../utils/i18n/index'
+
+export default {
+  name: 'CollapseLink',
+  model: {
+    prop: 'expanded',
+    event: 'change'
+  },
+  props: {
+    expanded: {
+      type: Boolean,
+      default: null
+    },
+    expandText: {
+      type: String,
+      default: $lc('展开')
+    },
+    collapseText: {
+      type: String,
+      default: $lc('收起')
+    },
+    showDivider: {
+      type: Boolean,
+      default: false
+    },
+    align: {
+      type: String,
+      default: 'left',
+      validator: (value) => ['left', 'right'].includes(value)
+    }
+  },
+  data() {
+    return {
+      localExpanded: true
+    }
+  },
+  computed: {
+    isControlled() {
+      return this.expanded !== null
+    },
+    isExpanded() {
+      return this.isControlled ? this.expanded : this.localExpanded
+    },
+    actionText() {
+      return this.isExpanded ? this.collapseText : this.expandText
+    }
+  },
+  methods: {
+    toggle() {
+      const next = !this.isExpanded
+      if (!this.isControlled) {
+        this.localExpanded = next
+      }
+      this.$emit('change', next)
+    }
+  }
+}
+</script>

package/src/index.js

@@ -128,6 +128,7 @@ 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 CollapseLink from './components/v3/CollapseLink/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'
@@ -297,6 +298,7 @@ const components = [
   Footer,
   RadioCard,
   Collapse,
+  CollapseLink,
   AnchorV3
 ]
 
@@ -450,6 +452,7 @@ export {
   Footer,
   RadioCard,
   Collapse,
+  CollapseLink,
   AnchorV3,
   asyncGetRelaNos,
   // 方法