vue2-client 1.4.20 → 1.4.21

package/src/components/checkbox/ImgCheckbox.vue

@@ -1,163 +1,163 @@
-<template>
-  <a-tooltip :title="title" :overlayStyle="{zIndex: 2001}">
-    <div class="img-check-box" @click="toggle">
-      <img :src="img" alt=""/>
-      <div v-if="sChecked" class="check-item">
-        <a-icon type="check" />
-      </div>
-    </div>
-  </a-tooltip>
-</template>
-
-<script>
-const Group = {
-  name: 'ImgCheckboxGroup',
-  props: {
-    multiple: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    defaultValues: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
-  },
-  data () {
-    return {
-      values: [],
-      options: []
-    }
-  },
-  provide () {
-    return {
-      groupContext: this
-    }
-  },
-  watch: {
-    'values': function (value) {
-      this.$emit('change', value)
-      // // 此条件是为解决单选时，触发两次chang事件问题
-      // if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0])) {
-      //   this.$emit('change', this.values)
-      // }
-    }
-  },
-  methods: {
-    handleChange (option) {
-      if (!option.checked) {
-        if (this.values.indexOf(option.value) > -1) {
-          this.values = this.values.filter(item => item !== option.value)
-        }
-      } else {
-        if (!this.multiple) {
-          this.values = [option.value]
-          this.options.forEach(item => {
-            if (item.value !== option.value) {
-              item.sChecked = false
-            }
-          })
-        } else {
-          this.values.push(option.value)
-        }
-      }
-    }
-  },
-  render (h) {
-    return h(
-      'div',
-      {
-        attrs: { style: 'display: flex' }
-      },
-      [this.$slots.default]
-    )
-  }
-}
-
-export default {
-  name: 'ImgCheckbox',
-  Group,
-  props: {
-    checked: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    img: {
-      type: String,
-      required: true
-    },
-    // eslint-disable-next-line vue/require-prop-types
-    value: {
-      required: true
-    },
-    // eslint-disable-next-line vue/require-default-prop
-    title: String
-  },
-  data () {
-    return {
-      sChecked: this.initChecked()
-    }
-  },
-  inject: ['groupContext'],
-  watch: {
-    'sChecked': function () {
-      const option = {
-        value: this.value,
-        checked: this.sChecked
-      }
-      this.$emit('change', option)
-      const groupContext = this.groupContext
-      if (groupContext) {
-        groupContext.handleChange(option)
-      }
-    }
-  },
-  created () {
-    const groupContext = this.groupContext
-    if (groupContext) {
-      this.sChecked = groupContext.defaultValues.length > 0 ? groupContext.defaultValues.indexOf(this.value) >= 0 : this.sChecked
-      groupContext.options.push(this)
-    }
-  },
-  methods: {
-    toggle () {
-      if (this.groupContext.multiple || !this.sChecked) {
-        this.sChecked = !this.sChecked
-      }
-    },
-    initChecked () {
-      const groupContext = this.groupContext
-      if (!groupContext) {
-        return this.checked
-      } else if (groupContext.multiple) {
-        return groupContext.defaultValues.indexOf(this.value) > -1
-      } else {
-        return groupContext.defaultValues[0] === this.value
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .img-check-box{
-    margin-right: 16px;
-    position: relative;
-    border-radius: 4px;
-    cursor: pointer;
-    .check-item{
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 100%;
-      padding-top: 15px;
-      padding-left: 24px;
-      height: 100%;
-      color: @primary-color;
-      font-size: 14px;
-      font-weight: bold;
-    }
-  }
-</style>
+<template>
+  <a-tooltip :title="title" :overlayStyle="{zIndex: 2001}">
+    <div class="img-check-box" @click="toggle">
+      <img :src="img" alt=""/>
+      <div v-if="sChecked" class="check-item">
+        <a-icon type="check" />
+      </div>
+    </div>
+  </a-tooltip>
+</template>
+
+<script>
+const Group = {
+  name: 'ImgCheckboxGroup',
+  props: {
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    defaultValues: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      values: [],
+      options: []
+    }
+  },
+  provide () {
+    return {
+      groupContext: this
+    }
+  },
+  watch: {
+    'values': function (value) {
+      this.$emit('change', value)
+      // // 此条件是为解决单选时，触发两次chang事件问题
+      // if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0])) {
+      //   this.$emit('change', this.values)
+      // }
+    }
+  },
+  methods: {
+    handleChange (option) {
+      if (!option.checked) {
+        if (this.values.indexOf(option.value) > -1) {
+          this.values = this.values.filter(item => item !== option.value)
+        }
+      } else {
+        if (!this.multiple) {
+          this.values = [option.value]
+          this.options.forEach(item => {
+            if (item.value !== option.value) {
+              item.sChecked = false
+            }
+          })
+        } else {
+          this.values.push(option.value)
+        }
+      }
+    }
+  },
+  render (h) {
+    return h(
+      'div',
+      {
+        attrs: { style: 'display: flex' }
+      },
+      [this.$slots.default]
+    )
+  }
+}
+
+export default {
+  name: 'ImgCheckbox',
+  Group,
+  props: {
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    img: {
+      type: String,
+      required: true
+    },
+    // eslint-disable-next-line vue/require-prop-types
+    value: {
+      required: true
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    title: String
+  },
+  data () {
+    return {
+      sChecked: this.initChecked()
+    }
+  },
+  inject: ['groupContext'],
+  watch: {
+    'sChecked': function () {
+      const option = {
+        value: this.value,
+        checked: this.sChecked
+      }
+      this.$emit('change', option)
+      const groupContext = this.groupContext
+      if (groupContext) {
+        groupContext.handleChange(option)
+      }
+    }
+  },
+  created () {
+    const groupContext = this.groupContext
+    if (groupContext) {
+      this.sChecked = groupContext.defaultValues.length > 0 ? groupContext.defaultValues.indexOf(this.value) >= 0 : this.sChecked
+      groupContext.options.push(this)
+    }
+  },
+  methods: {
+    toggle () {
+      if (this.groupContext.multiple || !this.sChecked) {
+        this.sChecked = !this.sChecked
+      }
+    },
+    initChecked () {
+      const groupContext = this.groupContext
+      if (!groupContext) {
+        return this.checked
+      } else if (groupContext.multiple) {
+        return groupContext.defaultValues.indexOf(this.value) > -1
+      } else {
+        return groupContext.defaultValues[0] === this.value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .img-check-box{
+    margin-right: 16px;
+    position: relative;
+    border-radius: 4px;
+    cursor: pointer;
+    .check-item{
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      height: 100%;
+      color: @primary-color;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+</style>

package/src/components/form/FormRow.vue

@@ -1,52 +1,52 @@
-<template>
-  <div class="form-row">
-    <div class="label">
-      <span>{{ label }}</span>
-    </div>
-    <div class="content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FormRow',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['label']
-}
-</script>
-
-<style lang="less" scoped>
-  .form-row{
-    display: flex;
-    border-bottom: 1px dashed @border-color-base;
-    margin-bottom: 16px;
-    .label {
-      color: @title-color;
-      font-size: 14px;
-      margin-right: 24px;
-      flex: 0 0 auto;
-      text-align: right;
-      & > span {
-        display: inline-block;
-        height: 39px;
-        line-height: 39px;
-        &:after {
-          content: '：';
-        }
-      }
-    }
-    .content {
-      flex: 1 1 0;
-      :global {
-        .ant-form-item:last-child {
-          margin-right: 0;
-        }
-        .ant-form-item {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <div class="form-row">
+    <div class="label">
+      <span>{{ label }}</span>
+    </div>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormRow',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['label']
+}
+</script>
+
+<style lang="less" scoped>
+  .form-row{
+    display: flex;
+    border-bottom: 1px dashed @border-color-base;
+    margin-bottom: 16px;
+    .label {
+      color: @title-color;
+      font-size: 14px;
+      margin-right: 24px;
+      flex: 0 0 auto;
+      text-align: right;
+      & > span {
+        display: inline-block;
+        height: 39px;
+        line-height: 39px;
+        &:after {
+          content: '：';
+        }
+      }
+    }
+    .content {
+      flex: 1 1 0;
+      :global {
+        .ant-form-item:last-child {
+          margin-right: 0;
+        }
+        .ant-form-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+</style>

package/src/components/index.js

@@ -1,36 +1,36 @@
-// chart
-import Bar from '@vue2-client/components/Charts/Bar'
-import ChartCard from '@vue2-client/components/Charts/ChartCard'
-import Liquid from '@vue2-client/components/Charts/Liquid'
-import MiniArea from '@vue2-client/components/Charts/MiniArea'
-import MiniSmoothArea from '@vue2-client/components/Charts/MiniSmoothArea'
-import MiniBar from '@vue2-client/components/Charts/MiniBar'
-import MiniProgress from '@vue2-client/components/Charts/MiniProgress'
-import Radar from '@vue2-client/components/Charts/Radar'
-import RankList from '@vue2-client/components/Charts/RankList'
-import TagCloud from '@vue2-client/components/Charts/TagCloud'
-import TransferBar from '@vue2-client/components/Charts/TransferBar'
-import Trend from '@vue2-client/components/Trend'
-
-// pro components
-import Ellipsis from '@vue2-client/components/Ellipsis'
-import NumberInfo from '@vue2-client/components/NumberInfo'
-import STable from '@vue2-client/components/STable'
-
-export {
-  Bar,
-  ChartCard,
-  Liquid,
-  MiniArea,
-  MiniSmoothArea,
-  MiniBar,
-  MiniProgress,
-  Radar,
-  TagCloud,
-  RankList,
-  TransferBar,
-  Ellipsis,
-  NumberInfo,
-  STable,
-  Trend
-}
+// chart
+import Bar from '@vue2-client/components/Charts/Bar'
+import ChartCard from '@vue2-client/components/Charts/ChartCard'
+import Liquid from '@vue2-client/components/Charts/Liquid'
+import MiniArea from '@vue2-client/components/Charts/MiniArea'
+import MiniSmoothArea from '@vue2-client/components/Charts/MiniSmoothArea'
+import MiniBar from '@vue2-client/components/Charts/MiniBar'
+import MiniProgress from '@vue2-client/components/Charts/MiniProgress'
+import Radar from '@vue2-client/components/Charts/Radar'
+import RankList from '@vue2-client/components/Charts/RankList'
+import TagCloud from '@vue2-client/components/Charts/TagCloud'
+import TransferBar from '@vue2-client/components/Charts/TransferBar'
+import Trend from '@vue2-client/components/Trend'
+
+// pro components
+import Ellipsis from '@vue2-client/components/Ellipsis'
+import NumberInfo from '@vue2-client/components/NumberInfo'
+import STable from '@vue2-client/components/STable'
+
+export {
+  Bar,
+  ChartCard,
+  Liquid,
+  MiniArea,
+  MiniSmoothArea,
+  MiniBar,
+  MiniProgress,
+  Radar,
+  TagCloud,
+  RankList,
+  TransferBar,
+  Ellipsis,
+  NumberInfo,
+  STable,
+  Trend
+}

package/src/components/menu/SideMenu.vue

@@ -1,62 +1,62 @@
-<template>
-  <a-layout-sider
-    :theme="sideTheme"
-    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
-    width="256px"
-    :collapsible="collapsible"
-    v-model="collapsed"
-    :trigger="null">
-    <div :class="['logo', theme]">
-      <router-link to="/dashboard/workplace">
-        <img :src="logoSrc" alt="logo">
-        <h1 :style="{ fontWeight: 'bold', fontSize: systemNameFontSize }">{{ systemName }}</h1>
-      </router-link>
-    </div>
-    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
-  </a-layout-sider>
-</template>
-
-<script>
-import IMenu from './menu'
-import { mapState } from 'vuex'
-export default {
-  name: 'SideMenu',
-  components: { IMenu },
-  props: {
-    collapsible: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    menuData: {
-      type: Array,
-      required: true
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: 'dark'
-    }
-  },
-  computed: {
-    sideTheme () {
-      return this.theme === 'light' ? this.theme : 'dark'
-    },
-    ...mapState('setting', ['isMobile', 'systemName', 'logoSrc', 'systemNameFontSize'])
-  },
-  methods: {
-    onSelect (obj) {
-      this.$emit('menuSelect', obj)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "index";
-</style>
+<template>
+  <a-layout-sider
+    :theme="sideTheme"
+    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
+    width="256px"
+    :collapsible="collapsible"
+    v-model="collapsed"
+    :trigger="null">
+    <div :class="['logo', theme]">
+      <router-link to="/dashboard/workplace">
+        <img :src="logoSrc" alt="logo">
+        <h1 :style="{ fontWeight: 'bold', fontSize: systemNameFontSize }">{{ systemName }}</h1>
+      </router-link>
+    </div>
+    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
+  </a-layout-sider>
+</template>
+
+<script>
+import IMenu from './menu'
+import { mapState } from 'vuex'
+export default {
+  name: 'SideMenu',
+  components: { IMenu },
+  props: {
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menuData: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    }
+  },
+  computed: {
+    sideTheme () {
+      return this.theme === 'light' ? this.theme : 'dark'
+    },
+    ...mapState('setting', ['isMobile', 'systemName', 'logoSrc', 'systemNameFontSize'])
+  },
+  methods: {
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>