n20-project-component 1.0.3 → 1.0.6

package/package.json

@@ -1,65 +1,69 @@
-{
-  "name": "n20-project-component",
-  "version": "1.0.3",
-  "description": "PC 端 Vue 2 + Element UI 组件库",
-  "main": "dist/n20-project-component.umd.min.js",
-  "module": "dist/n20-project-component.common.js",
-  "style": "dist/n20-project-component.css",
-  "files": [
-    "dist",
-    "src",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vue-cli-service serve --open",
-    "build": "vue-cli-service build --target lib --name n20-project-component src/index.js",
-    "lint": "vue-cli-service lint",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.0",
-    "element-ui": "^2.15.0"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.14",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "1.26.2",
-    "sass-loader": "8.0.2",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "keywords": [
-    "vue2",
-    "element-ui",
-    "component-library",
-    "n20"
-  ],
-  "author": "",
-  "license": "MIT"
-}
+{
+  "name": "n20-project-component",
+  "version": "1.0.6",
+  "description": "PC 端 Vue 2 + Element UI 组件库",
+  "main": "dist/n20-project-component.umd.min.js",
+  "module": "dist/n20-project-component.common.js",
+  "style": "dist/n20-project-component.css",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vue-cli-service serve --open",
+    "build": "vue-cli-service build --target lib --name n20-project-component src/index.js",
+    "lint": "vue-cli-service lint",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0",
+    "element-ui": "^2.15.0"
+  },
+  "dependencies": {
+    "n20-common-lib": "^2.22.39"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.15.14",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "1.26.2",
+    "sass-loader": "8.0.2",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "keywords": [
+    "vue2",
+    "element-ui",
+    "component-library",
+    "n20"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/src/components/DemoButton/index.vue

@@ -1,74 +1,74 @@
-<template>
-  <el-button
-    :type="type"
-    :size="size"
-    :disabled="disabled"
-    :loading="loading"
-    :icon="icon"
-    class="n20-demo-button"
-    @click="handleClick"
-  >
-    <slot>{{ text }}</slot>
-  </el-button>
-</template>
-
-<script>
-/**
- * DemoButton - 示例按钮组件
- *
- * 用于验证组件库构建流程。实际开发时可删除此组件，替换为业务组件。
- *
- * @example
- * <DemoButton type="primary" text="提交" @click="handleSubmit" />
- */
-export default {
-  name: 'N20DemoButton',
-  props: {
-    /** 按钮文本 */
-    text: {
-      type: String,
-      default: '按钮',
-    },
-    /** 按钮类型：primary / success / warning / danger / info / text */
-    type: {
-      type: String,
-      default: 'primary',
-    },
-    /** 按钮尺寸：medium / small / mini */
-    size: {
-      type: String,
-      default: '',
-    },
-    /** 是否禁用 */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /** 是否加载中 */
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    /** 图标类名 */
-    icon: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    handleClick(e) {
-      this.$emit('click', e)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/variables.scss';
-
-.n20-demo-button {
-  // 自定义样式示例 —— 在 Element UI 基础上扩展
-  border-radius: $--n20-border-radius;
-  font-size: $--n20-font-size-base;
-}
-</style>
+<template>
+  <el-button
+    :type="type"
+    :size="size"
+    :disabled="disabled"
+    :loading="loading"
+    :icon="icon"
+    class="n20-demo-button"
+    @click="handleClick"
+  >
+    <slot>{{ text }}</slot>
+  </el-button>
+</template>
+
+<script>
+/**
+ * DemoButton - 示例按钮组件
+ *
+ * 用于验证组件库构建流程。实际开发时可删除此组件，替换为业务组件。
+ *
+ * @example
+ * <DemoButton type="primary" text="提交" @click="handleSubmit" />
+ */
+export default {
+  name: 'N20DemoButton',
+  props: {
+    /** 按钮文本 */
+    text: {
+      type: String,
+      default: '按钮',
+    },
+    /** 按钮类型：primary / success / warning / danger / info / text */
+    type: {
+      type: String,
+      default: 'primary',
+    },
+    /** 按钮尺寸：medium / small / mini */
+    size: {
+      type: String,
+      default: '',
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /** 是否加载中 */
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /** 图标类名 */
+    icon: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/variables.scss';
+
+.n20-demo-button {
+  // 自定义样式示例 —— 在 Element UI 基础上扩展
+  border-radius: $--n20-border-radius;
+  font-size: $--n20-font-size-base;
+}
+</style>

package/src/components/N20CopyText/index.vue

@@ -1,133 +1,133 @@
-<template>
-  <span class="n20-copy-text" @click.stop="handleCopy">
-    <span class="n20-copy-text__content" ref="content">
-      <slot>{{ text }}</slot>
-    </span>
-    <i
-      v-if="showIcon"
-      :class="['n20-copy-text__icon', copied ? 'el-icon-check' : 'el-icon-document-copy']"
-      :style="{ order: iconPosition === 'left' ? -1 : 1 }"
-    />
-  </span>
-</template>
-
-<script>
-/**
- * N20CopyText - 点击复制文本组件
- *
- * 点击后将指定文本复制到剪贴板，通过 Element Message 显示成功反馈。
- *
- * @example
- * <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
- *
- * @example
- * <!-- 自动获取 slot 内容 -->
- * <N20CopyText>BILL-2024-001</N20CopyText>
- */
-export default {
-  name: 'N20CopyText',
-  props: {
-    /** 要复制的文本（默认取 slot 内文本） */
-    text: {
-      type: [String, Number],
-      default: ''
-    },
-    /** 复制成功提示文字 */
-    successTip: {
-      type: String,
-      default: '已复制'
-    },
-    /** 是否显示复制图标 */
-    showIcon: {
-      type: Boolean,
-      default: true
-    },
-    /** 图标位置 */
-    iconPosition: {
-      type: String,
-      default: 'right',
-      validator: v => ['left', 'right'].includes(v)
-    },
-    /** 是否禁用 */
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      copied: false,
-      timer: null
-    }
-  },
-  beforeDestroy() {
-    clearTimeout(this.timer)
-  },
-  methods: {
-    async handleCopy() {
-      if (this.disabled || this.copied) return
-
-      const copyText = this.text || (this.$refs.content && this.$refs.content.innerText) || ''
-      if (!copyText) return
-
-      try {
-        if (navigator.clipboard && window.isSecureContext) {
-          await navigator.clipboard.writeText(String(copyText))
-        } else {
-          // fallback for HTTP or older browsers
-          const textarea = document.createElement('textarea')
-          textarea.value = String(copyText)
-          textarea.style.position = 'fixed'
-          textarea.style.left = '-9999px'
-          document.body.appendChild(textarea)
-          textarea.select()
-          document.execCommand('copy')
-          document.body.removeChild(textarea)
-        }
-
-        this.copied = true
-        this.$message.success(this.successTip)
-        this.$emit('copy', String(copyText))
-
-        this.timer = setTimeout(() => {
-          this.copied = false
-        }, 2000)
-      } catch (err) {
-        this.$message.error('复制失败')
-        this.$emit('error', err)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.n20-copy-text {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-
-  &:hover {
-    .n20-copy-text__icon {
-      opacity: 1;
-    }
-  }
-
-  &__content {
-    display: inline;
-  }
-
-  &__icon {
-    font-size: 14px;
-    color: #909399;
-    opacity: 0.4;
-    transition: all 0.2s ease;
-
-    &.el-icon-check {
-      color: #67C23A;
-      opacity: 1;
-    }
-  }
-}
-</style>
+<template>
+  <span class="n20-copy-text" @click.stop="handleCopy">
+    <span class="n20-copy-text__content" ref="content">
+      <slot>{{ text }}</slot>
+    </span>
+    <i
+      v-if="showIcon"
+      :class="['n20-copy-text__icon', copied ? 'el-icon-check' : 'el-icon-document-copy']"
+      :style="{ order: iconPosition === 'left' ? -1 : 1 }"
+    />
+  </span>
+</template>
+
+<script>
+/**
+ * N20CopyText - 点击复制文本组件
+ *
+ * 点击后将指定文本复制到剪贴板，通过 Element Message 显示成功反馈。
+ *
+ * @example
+ * <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
+ *
+ * @example
+ * <!-- 自动获取 slot 内容 -->
+ * <N20CopyText>BILL-2024-001</N20CopyText>
+ */
+export default {
+  name: 'N20CopyText',
+  props: {
+    /** 要复制的文本（默认取 slot 内文本） */
+    text: {
+      type: [String, Number],
+      default: ''
+    },
+    /** 复制成功提示文字 */
+    successTip: {
+      type: String,
+      default: '已复制'
+    },
+    /** 是否显示复制图标 */
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    /** 图标位置 */
+    iconPosition: {
+      type: String,
+      default: 'right',
+      validator: v => ['left', 'right'].includes(v)
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      copied: false,
+      timer: null
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer)
+  },
+  methods: {
+    async handleCopy() {
+      if (this.disabled || this.copied) return
+
+      const copyText = this.text || (this.$refs.content && this.$refs.content.innerText) || ''
+      if (!copyText) return
+
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(String(copyText))
+        } else {
+          // fallback for HTTP or older browsers
+          const textarea = document.createElement('textarea')
+          textarea.value = String(copyText)
+          textarea.style.position = 'fixed'
+          textarea.style.left = '-9999px'
+          document.body.appendChild(textarea)
+          textarea.select()
+          document.execCommand('copy')
+          document.body.removeChild(textarea)
+        }
+
+        this.copied = true
+        this.$message.success(this.successTip)
+        this.$emit('copy', String(copyText))
+
+        this.timer = setTimeout(() => {
+          this.copied = false
+        }, 2000)
+      } catch (err) {
+        this.$message.error('复制失败')
+        this.$emit('error', err)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n20-copy-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+
+  &:hover {
+    .n20-copy-text__icon {
+      opacity: 1;
+    }
+  }
+
+  &__content {
+    display: inline;
+  }
+
+  &__icon {
+    font-size: 14px;
+    color: #909399;
+    opacity: 0.4;
+    transition: all 0.2s ease;
+
+    &.el-icon-check {
+      color: #67C23A;
+      opacity: 1;
+    }
+  }
+}
+</style>