@lx-frontend/wrap-element-ui 1.0.1-beta.2 → 1.0.1-beta.4

package/README.md

@@ -1,45 +1,45 @@
-### 介绍
-
-`wrap-element-ui` 是一款基于 `element-UI` 二次封装的前端组件库，主要用于快速开发 PC 网站中后台产品
-
-### 使用 npm 安装
-
-```bash
-pnpm i wrap-element-ui
-```
-
-### 组件使用
-
-可以局部注册所需的组件，适用于与其他框架组合使用的场景
-
-```js
-import { DemoComponent } from "@lx-frontend/wrap-element-ui";
-
-export default {
-  components: {
-    DemoComponent,
-  },
-};
-```
-
-在模板中，用 `<DemoComponent></DemoComponent>` 自定义标签的方式使用组件
-
-```xml
-<template>
-  <div>
-    <DemoComponent>这是一个 demo 组件</DemoComponent>
-  </div>
-</template>
-```
-
-### 开发指南
-
-新增或修改组件时，使用 `pnpm sb:dev` 可以实时预览 stories。
-
-开发完成后，可以使用 `pnpm sb:dist` 预览打包后的组件是否能正常工作。与 `pnpm sb:dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
-
-`build:lib`命令用于打包组件库，生成组件代码及类型定义文件。
-
-`build:sb` 用于生成 stories 静态预览文件。
-
-`pnpm preview` 用于预览`build:sb`生成的静态文件。
+### 介绍
+
+`wrap-element-ui` 是一款基于 `element-UI` 二次封装的前端组件库，主要用于快速开发 PC 网站中后台产品
+
+### 使用 npm 安装
+
+```bash
+pnpm i wrap-element-ui
+```
+
+### 组件使用
+
+可以局部注册所需的组件，适用于与其他框架组合使用的场景
+
+```js
+import { DemoComponent } from "@lx-frontend/wrap-element-ui";
+
+export default {
+  components: {
+    DemoComponent,
+  },
+};
+```
+
+在模板中，用 `<DemoComponent></DemoComponent>` 自定义标签的方式使用组件
+
+```xml
+<template>
+  <div>
+    <DemoComponent>这是一个 demo 组件</DemoComponent>
+  </div>
+</template>
+```
+
+### 开发指南
+
+新增或修改组件时，使用 `pnpm sb:dev` 可以实时预览 stories。
+
+开发完成后，可以使用 `pnpm sb:dist` 预览打包后的组件是否能正常工作。与 `pnpm sb:dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
+
+`build:lib`命令用于打包组件库，生成组件代码及类型定义文件。
+
+`build:sb` 用于生成 stories 静态预览文件。
+
+`pnpm preview` 用于预览`build:sb`生成的静态文件。

package/package.json

@@ -1,24 +1,11 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.1-beta.2",
+  "version": "1.0.1-beta.4",
   "description": "wrap-element-ui",
   "author": "",
-  "main": "dist/index.mjs",
+  "main": "src/components/index.ts",
   "private": false,
-  "scripts": {
-    "clean": "rimraf dist",
-    "sb:dev": "cross-env MODE=development storybook dev -p 6006",
-    "sb:dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
-    "build:lib": "pnpm clean && vite build",
-    "build:sb": "cross-env MODE=production rimraf storybook-static && pnpm build:lib && storybook build",
-    "preview": "serve ./storybook-static",
-    "publish:dev": "npm publish --access public --tag beta",
-    "publish:prod": "npm publish --access public",
-    "cdn": "gulp oss",
-    "lint": "eslint src"
-  },
   "files": [
-    "dist",
     "README.md",
     "package.json",
     "src/components"
@@ -69,5 +56,17 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-tsconfig-paths": "^4.3.2",
     "vue-template-compiler": "^2.6.10"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "sb:dev": "cross-env MODE=development storybook dev -p 6006",
+    "sb:dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
+    "build:lib": "pnpm clean && vite build",
+    "build:sb": "cross-env MODE=production rimraf storybook-static && pnpm build:lib && storybook build",
+    "preview": "serve ./storybook-static",
+    "publish:dev": "npm publish --access public --tag beta",
+    "publish:prod": "npm publish --access public",
+    "cdn": "gulp oss",
+    "lint": "eslint src"
   }
-}
+}

package/src/components/AddMembers/index.vue

@@ -1,157 +1,157 @@
-<template>
-  <div>
-    <PopoverForm
-      :title="title"
-      :with-submit-btn="false"
-      :width="360"
-      @on-change="handleCloseSelectPopup"
-    >
-      <div
-        slot="form"
-        class="team-setting__members-popover"
-      >
-        <div class="team-setting__members-select">
-          <el-input
-            v-model="searchQuery"
-            placeholder="请输入姓名"
-            @input="handleInputSearch(searchQuery, $attrs.keyId)"
-          />
-        </div>
-        <div
-          v-if="searchQuery && !options.length && !fetchLoading"
-          class="team-setting__empty-members-options"
-        >
-          {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
-        </div>
-        <ul
-          v-else
-          class="team-setting__members-options"
-        >
-          <li
-            class="team-setting__members-option"
-            v-for="item in options"
-            :key="item[$attrs.showConfig.id]"
-          >
-            <div class="team-setting__members-option-left" v-if="isShowRoles">
-              {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
-            </div>
-            <div class="team-setting__members-option-left" v-else>
-              {{item[$attrs.showConfig.name]}}
-            </div>
-            <el-button
-              v-if="item.is_selected"
-              type="text"
-              disabled
-            >
-              已添加
-            </el-button>
-            <el-button
-              v-else
-              type="text"
-              @click="handleAdd($attrs.keyId, item)"
-            >
-              添加
-            </el-button>
-          </li>
-        </ul>
-      </div>
-      <el-button
-        slot="reference"
-        type="text"
-        icon="el-icon-plus"
-      >
-        {{ title }}
-      </el-button>
-    </PopoverForm>
-  </div>
-</template>
-
-<script>
-import PopoverForm from '../PopoverForm'
-export default {
-  name: 'AddMembers',
-  components: {
-    PopoverForm
-  },
-  props: {
-    /** 成员数据 */
-    technicianOptions: Array,
-    /** 获取数据加载中 */
-    fetchTechniciansLoading: Boolean,
-    /** 弹窗标题 */
-    title: {
-      type: String,
-      default: '添加成员',
-    },
-    /** 角色名称展示 */
-    isShowRoles: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      searchQuery: '',
-    }
-  },
-  watch: {
-  },
-  methods: {
-    handleCloseSelectPopup(show) {
-      if (show) return;
-      this.searchQuery = '';
-      this.$emit('update:options', []);
-    },
-    handleInputSearch(query, keyId) {
-      this.$emit('fetchMethods', { query, keyId });
-    },
-    handleAdd(id, item) {
-      const query = { id, item };
-      this.$emit('handleAdd', query);
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.team-setting {
-  &__members-popover {
-    padding: 20px 0;
-    margin: 0 20px;
-    height: 350px;
-    overflow-y: auto;
-  }
-  &__empty-members {
-    &-options {
-      font-size: 12px;
-      color: #80838e;
-      text-align: center;
-      margin-top: 10px;
-    }
-  }
-  &__members-options {
-    display: flex;
-    flex-direction: column;
-  }
-  &__members-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 30px;
-    &-left {
-      width: 250px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: #80838e;
-    }
-    &-right {
-      color: #1890ff;
-      &--selected {
-        color: #80838e;
-      }
-    }
-  }
-}
-
-</style>
+<template>
+  <div>
+    <PopoverForm
+      :title="title"
+      :with-submit-btn="false"
+      :width="360"
+      @on-change="handleCloseSelectPopup"
+    >
+      <div
+        slot="form"
+        class="team-setting__members-popover"
+      >
+        <div class="team-setting__members-select">
+          <el-input
+            v-model="searchQuery"
+            placeholder="请输入姓名"
+            @input="handleInputSearch(searchQuery, $attrs.keyId)"
+          />
+        </div>
+        <div
+          v-if="searchQuery && !options.length && !fetchLoading"
+          class="team-setting__empty-members-options"
+        >
+          {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
+        </div>
+        <ul
+          v-else
+          class="team-setting__members-options"
+        >
+          <li
+            class="team-setting__members-option"
+            v-for="item in options"
+            :key="item[$attrs.showConfig.id]"
+          >
+            <div class="team-setting__members-option-left" v-if="isShowRoles">
+              {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
+            </div>
+            <div class="team-setting__members-option-left" v-else>
+              {{item[$attrs.showConfig.name]}}
+            </div>
+            <el-button
+              v-if="item.is_selected"
+              type="text"
+              disabled
+            >
+              已添加
+            </el-button>
+            <el-button
+              v-else
+              type="text"
+              @click="handleAdd($attrs.keyId, item)"
+            >
+              添加
+            </el-button>
+          </li>
+        </ul>
+      </div>
+      <el-button
+        slot="reference"
+        type="text"
+        icon="el-icon-plus"
+      >
+        {{ title }}
+      </el-button>
+    </PopoverForm>
+  </div>
+</template>
+
+<script>
+import PopoverForm from '../PopoverForm'
+export default {
+  name: 'AddMembers',
+  components: {
+    PopoverForm
+  },
+  props: {
+    /** 成员数据 */
+    technicianOptions: Array,
+    /** 获取数据加载中 */
+    fetchTechniciansLoading: Boolean,
+    /** 弹窗标题 */
+    title: {
+      type: String,
+      default: '添加成员',
+    },
+    /** 角色名称展示 */
+    isShowRoles: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    }
+  },
+  watch: {
+  },
+  methods: {
+    handleCloseSelectPopup(show) {
+      if (show) return;
+      this.searchQuery = '';
+      this.$emit('update:options', []);
+    },
+    handleInputSearch(query, keyId) {
+      this.$emit('fetchMethods', { query, keyId });
+    },
+    handleAdd(id, item) {
+      const query = { id, item };
+      this.$emit('handleAdd', query);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.team-setting {
+  &__members-popover {
+    padding: 20px 0;
+    margin: 0 20px;
+    height: 350px;
+    overflow-y: auto;
+  }
+  &__empty-members {
+    &-options {
+      font-size: 12px;
+      color: #80838e;
+      text-align: center;
+      margin-top: 10px;
+    }
+  }
+  &__members-options {
+    display: flex;
+    flex-direction: column;
+  }
+  &__members-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 30px;
+    &-left {
+      width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #80838e;
+    }
+    &-right {
+      color: #1890ff;
+      &--selected {
+        color: #80838e;
+      }
+    }
+  }
+}
+
+</style>