@ddwl/ddwl-ui 1.2.3-beta.2 → 1.3.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ddwl/ddwl-ui",
-  "version": "1.2.3-beta.2",
+  "version": "1.3.0",
   "private": false,
   "main": "dist/app.common.js",
-  "style": "lib/theme/index.css",
+  "style": "dist/app.css",
   "description": "ddwl组件库",
   "author": "dingshengfei",
   "license": "MIT",
@@ -15,7 +15,8 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "dev": "vue-cli-service serve",
+    "lint": "vue-cli-service lint",
+    "dev": "vue-cli-service lint && vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name app src/main.js",
     "release": "bumpp -r && npm publish --access=public"
   },
@@ -43,6 +44,8 @@
     "bumpp": "^10.2.0",
     "conventional-changelog-cli": "^5.0.0",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^8.0.3",
     "vue-template-compiler": "^2.6.14"
   },

package/src/lib/install/index.js

@@ -1,7 +1,6 @@
 import previewVue from '../../packages/file-preview/index.vue'
 
 export default (Vue) => {
-
   // 文件预览
   Vue.prototype.$preview = ({ defaultIndex = 0, list = [] }) => {
     const Preview = Vue.extend(previewVue)
@@ -11,4 +10,4 @@ export default (Vue) => {
     instance.defaultIndex = defaultIndex
     instance.list = list
   }
-}
+}

package/src/lib/slots/buttonGroup.vue

@@ -13,15 +13,24 @@
           :button-name="btn.name"
           :button-type="btn.type"
           :disabled="typeof btn.disabled === 'function' ? btn.disabled(row) : btn.disabled"
-          @submit="(callback) => { btn.method(callback, row, index) }"
+          @submit="
+            (callback) => {
+              btn.method(callback, row, index)
+            }
+          "
         >
           {{ typeof btn.title === 'function' ? btn.title(row) : btn.title }}
         </dialog-confirm>
         <span
           v-else
-          :class="`${btn.type === 'danger' ? 'danger-text-btn' : 'primary-text-btn'} ${(typeof btn.disabled === 'function' ? btn.disabled(row) : btn.disabled) ? 'disabled' : ''}`"
+          :class="`${btn.type === 'danger' ? 'danger-text-btn' : 'primary-text-btn'} ${
+            (typeof btn.disabled === 'function' ? btn.disabled(row) : btn.disabled)
+              ? 'disabled'
+              : ''
+          }`"
           @click="btn.method(row, index)"
-        >{{ btn.name }}</span>
+          >{{ btn.name }}</span
+        >
       </span>
     </template>
     <el-dropdown
@@ -67,7 +76,7 @@ export default {
       default: -1
     }
   },
-  data () {
+  data() {
     return {
       buttons: [],
       dropdownButtons: []
@@ -76,10 +85,10 @@ export default {
   computed: {},
   watch: {
     list: {
-      handler () {
+      handler() {
         if (this.list.length) {
-          this.buttons = this.list.filter(btn => !btn.dropdown)
-          this.dropdownButtons = this.list.filter(btn => btn.dropdown)
+          this.buttons = this.list.filter((btn) => !btn.dropdown)
+          this.dropdownButtons = this.list.filter((btn) => btn.dropdown)
         } else {
           this.buttons = []
           this.dropdownButtons = []
@@ -89,23 +98,23 @@ export default {
       immediate: true
     }
   },
-  created () { },
+  created() {},
   methods: {
-    commandChange (value) {
-      const button = this.dropdownButtons.find(btn => btn.name === value)
+    commandChange(value) {
+      const button = this.dropdownButtons.find((btn) => btn.name === value)
       button.method(this.row)
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss">
 .button-group-item + .button-group-item {
   margin-left: 8px;
 }
 .el-dropdown-link {
   cursor: pointer;
-  color: #409EFF;
+  color: #409eff;
 }
 .el-icon-arrow-down {
   font-size: 12px;

package/src/lib/slots/dict.vue

@@ -23,12 +23,11 @@ export default {
       default: ''
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {
-    dictText () {
+    dictText() {
       if (Array.isArray(this.row[this.prop])) {
         const result = this.$DDWL.enum.getLabels(this.code, this.row[this.prop])
         return result?.length ? result.join(',') : ''
@@ -42,5 +41,4 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss"></style>

package/src/lib/slots/file.vue

@@ -21,16 +21,14 @@ export default {
       default: ''
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {},
   watch: {},
-  created () {},
+  created() {},
   methods: {}
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss"></style>

package/src/lib/slots/icon.vue

@@ -3,7 +3,7 @@
   <div class="icon-slot">
     <div v-for="({ icon, type, color }, index) in list" :key="index">
       <!-- image -->
-      <img  v-if="type === 'image'" class="icon-image" :src="icon" alt="">
+      <img v-if="type === 'image'" class="icon-image" :src="icon" alt="" />
       <!-- svg -->
       <svg-icon v-else-if="type === 'svg'" :style="{ color }" class="icon-svg" :icon="icon" />
       <!-- iconfont -->
@@ -34,11 +34,11 @@ export default {
       default: () => []
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {
-    list () {
+    list() {
       if (typeof this.icons === 'function') {
         return this.icons(this.row)
       } else {
@@ -46,12 +46,12 @@ export default {
       }
     }
   },
-  created () {},
+  created() {},
   methods: {}
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss">
 .icon-slot {
   display: flex;
   align-items: center;
@@ -60,7 +60,8 @@ export default {
     height: 20px;
     margin-right: 4px;
   }
-  .icon-svg, .icon-iconfont {
+  .icon-svg,
+  .icon-iconfont {
     font-size: 18px;
     margin-right: 4px;
   }

package/src/lib/slots/index.js

@@ -1,7 +1,7 @@
 const modules = {}
 const requireComponent = require.context('../slots', true, /.vue$/)
 
-requireComponent.keys().forEach(file => {
+requireComponent.keys().forEach((file) => {
   const componentConfig = requireComponent(file)
   const components = componentConfig.default || componentConfig
 

package/src/main.js

@@ -22,8 +22,6 @@ import RadioGroup from './packages/radio-group'
 
 import extendComponentInstall from './lib/install/index.js'
 
-import './lib/theme/index.css'
-
 const components = [
   Button,
   Descriptions,
@@ -49,7 +47,6 @@ const components = [
 ]
 
 const install = (Vue, opts = {}) => {
-
   Vue.prototype.$DDWL = {
     upload: opts.upload,
     enum: opts.enum
@@ -67,4 +64,4 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export default {
   install
-}
+}

package/src/packages/button/index.vue

@@ -1,10 +1,6 @@
 <!-- 按钮 -->
 <template>
-  <el-button
-    v-bind="$attrs"
-    :loading="loading"
-    @click="handleClick"
-  >
+  <el-button v-bind="$attrs" :loading="loading" @click="handleClick">
     <slot />
   </el-button>
 </template>
@@ -13,16 +9,16 @@
 export default {
   name: 'DButton',
   components: {},
-  data () {
+  data() {
     return {
       loading: false
     }
   },
   computed: {},
   watch: {},
-  created () {},
+  created() {},
   methods: {
-    handleClick () {
+    handleClick() {
       this.loading = true
       this.$emit('submit', () => {
         this.loading = false
@@ -32,5 +28,4 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss"></style>

package/src/packages/checkbox-group/index.vue

@@ -1,15 +1,7 @@
 <!-- 多选框组 -->
 <template>
-  <el-checkbox-group
-    v-model="value"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <el-checkbox
-      v-for="item in options"
-      :key="item.value"
-      :label="item.value"
-    >
+  <el-checkbox-group v-model="value" v-bind="$attrs" v-on="$listeners">
+    <el-checkbox v-for="item in options" :key="item.value" :label="item.value">
       {{ item.label }}
     </el-checkbox>
   </el-checkbox-group>
@@ -33,25 +25,23 @@ export default {
       default: () => []
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {
     value: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('modelChange', value)
       }
     }
   },
   watch: {},
-  created () {},
+  created() {},
   methods: {}
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss"></style>

package/src/packages/descriptions/index.vue

@@ -4,7 +4,7 @@
   <el-descriptions
     :class="{
       'd-descriptions': true,
-      'border': border
+      border: border
     }"
     :border="border"
     :label-style="{
@@ -13,22 +13,13 @@
     }"
     v-bind="$attrs"
   >
-    <el-descriptions-item
-      v-for="item in config"
-      :key="item.prop"
-      v-bind="item"
-    >
+    <el-descriptions-item v-for="item in config" :key="item.prop" v-bind="item">
       <template slot="label">
         <item-render v-if="item.labelRender" :scope="data" :render="item.labelRender" />
         <span v-else>{{ item.label }}</span>
       </template>
       <template>
-        <component
-          :is="item.component"
-          v-if="item.component"
-          v-bind="item"
-          :row="data"
-        />
+        <component :is="item.component" v-if="item.component" v-bind="item" :row="data" />
         <item-render v-else-if="item.render" :scope="data" :render="item.render" />
         <span v-else>{{ data[item.prop] }}</span>
       </template>
@@ -52,7 +43,7 @@ export default {
       default: () => [],
       type: Array
     },
-     border: {
+    border: {
       default: true,
       type: Boolean
     },
@@ -65,19 +56,19 @@ export default {
       type: Object
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {},
   watch: {},
-  created () {},
+  created() {},
   methods: {}
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss">
 .d-descriptions {
-  :deep(.el-descriptions__body) {
+  .el-descriptions__body {
     .el-descriptions__header {
       margin-bottom: 12px;
     }
@@ -101,7 +92,7 @@ export default {
   }
 }
 .d-descriptions.border {
-  :deep(.el-descriptions__body) {
+  .el-descriptions__body {
     .el-descriptions__table.is-bordered {
       width: 100%;
       table-layout: fixed;

package/src/packages/dialog/index.vue

@@ -1,7 +1,7 @@
 <!-- 弹窗 -->
 <template>
   <el-dialog
-    :class="fullscreen ? 'cover-screen-dialog' : ''"
+    :class="fullscreen ? 'd-cover-screen-dialog' : ''"
     class="d-dialog"
     v-bind="$attrs"
     :title="title"
@@ -18,12 +18,7 @@
     <template slot="footer">
       <slot name="footer" />
       <div v-if="showButton" class="ar">
-        <el-button
-          type="primary"
-          :icon="submitButtonIcon"
-          :loading="loading"
-          @click="submit"
-        >
+        <el-button type="primary" :icon="submitButtonIcon" :loading="loading" @click="submit">
           {{ submitButtonText }}
         </el-button>
         <el-button @click="cancel">
@@ -90,31 +85,31 @@ export default {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       loading: false
     }
   },
   computed: {
     visible: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('change', value)
       }
     }
   },
   methods: {
-    getRef (ref) {
+    getRef(ref) {
       return typeof ref === 'string' ? this.$parent.$refs[ref] : ref
     },
-    async submit () {
+    async submit() {
       // 是否需要进行表单校验
       if (this.formRefs) {
         // 多表单校验
         if (Array.isArray(this.formRefs)) {
-          await Promise.all(this.formRefs.map(ref => this.getRef(ref)?.validate()))
+          await Promise.all(this.formRefs.map((ref) => this.getRef(ref)?.validate()))
         } else {
           await this.getRef(this.formRefs)?.validate()
         }
@@ -127,19 +122,19 @@ export default {
         }
       })
     },
-    cancel () {
+    cancel() {
       this.$emit('cancel')
       this.visible = false
     },
     /**
      * @description: 弹窗关闭时清除表单校验
      */
-    closed () {
+    closed() {
       this.$emit('closed')
       if (this.formRefs) {
         // 多表单校验
         if (Array.isArray(this.formRefs)) {
-          this.formRefs.forEach(ref => this.getRef(ref)?.resetFields())
+          this.formRefs.forEach((ref) => this.getRef(ref)?.resetFields())
         } else {
           this.getRef(this.formRefs)?.resetFields()
         }
@@ -148,12 +143,12 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .d-dialog {
   display: flex;
   align-items: center;
   justify-content: center;
-  :deep(.el-dialog) {
+  .el-dialog {
     max-height: 90vh;
     display: flex;
     flex-direction: column;
@@ -163,10 +158,10 @@ export default {
       overflow: auto;
     }
   }
-}
-.cover-screen-dialog {
-  :deep(.el-dialog) {
-    height: 90vh;
+  &.d-cover-screen-dialog {
+    .el-dialog {
+      height: 90vh;
+    }
   }
 }
 </style>

package/src/packages/dialog-confirm/index.vue

@@ -4,8 +4,12 @@
     <span
       v-if="button === 'text'"
       slot="reference"
-      :class="`${buttonType || 'primary'}-text-btn ${disabled ? 'disabled': ''}`"
-      @click="() => { visible = true }"
+      :class="`${buttonType || 'primary'}-text-btn ${disabled ? 'disabled' : ''}`"
+      @click="
+        () => {
+          visible = true
+        }
+      "
     >
       {{ buttonName }}
     </span>
@@ -14,17 +18,15 @@
       :disabled="disabled"
       :icon="buttonIcon"
       :type="buttonType"
-      @click="() => { visible = true }"
+      @click="
+        () => {
+          visible = true
+        }
+      "
     >
       {{ buttonName }}
     </el-button>
-    <d-dialog
-      v-model="visible"
-      :title="title"
-      width="374px"
-      append-to-body
-      @submit="submit"
-    >
+    <d-dialog v-model="visible" :title="title" width="374px" append-to-body @submit="submit">
       <div class="d-dialog-confirm-container">
         <i class="el-icon-warning" />
         <p class="d-dialog-confirm-content">
@@ -67,20 +69,20 @@ export default {
       type: String
     }
   },
-  data () {
+  data() {
     return {
       visible: false
     }
   },
   methods: {
-    submit (callback) {
+    submit(callback) {
       this.$emit('submit', callback)
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .d-dialog-confirm-container {
   display: flex;
   align-items: center;

package/src/packages/drawer/index.vue

@@ -17,12 +17,7 @@
         <slot />
       </div>
       <div v-if="showButton" class="ar mt16">
-        <el-button
-          type="primary"
-          :icon="submitButtonIcon"
-          :loading="loading"
-          @click="submit"
-        >
+        <el-button type="primary" :icon="submitButtonIcon" :loading="loading" @click="submit">
           {{ submitButtonText }}
         </el-button>
         <el-button @click="cancel">
@@ -76,31 +71,31 @@ export default {
       default: '70%'
     }
   },
-  data () {
+  data() {
     return {
       loading: false
     }
   },
   computed: {
     visible: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('change', value)
       }
     }
   },
   methods: {
-    getRef (ref) {
+    getRef(ref) {
       return typeof ref === 'string' ? this.$parent.$refs[ref] : ref
     },
-    async submit () {
+    async submit() {
       // 是否需要进行表单校验
       if (this.formRefs) {
         // 多表单校验
         if (Array.isArray(this.formRefs)) {
-          await Promise.all(this.formRefs.map(ref => this.getRef(ref)?.validate()))
+          await Promise.all(this.formRefs.map((ref) => this.getRef(ref)?.validate()))
         } else {
           await this.getRef(this.formRefs)?.validate()
         }
@@ -113,19 +108,19 @@ export default {
         }
       })
     },
-    cancel () {
+    cancel() {
       this.$emit('cancel')
       this.visible = false
     },
     /**
      * @description: 弹窗关闭时清除表单校验
      */
-    closed () {
+    closed() {
       this.$emit('closed')
       if (this.formRefs) {
         // 多表单校验
         if (Array.isArray(this.formRefs)) {
-          this.formRefs.forEach(ref => this.getRef(ref)?.resetFields())
+          this.formRefs.forEach((ref) => this.getRef(ref)?.resetFields())
         } else {
           this.getRef(this.formRefs)?.resetFields()
         }