@idooel/components 0.0.1-beta.99 → 0.0.2

package/packages/theme/variables.scss

@@ -1,56 +1,56 @@
-$primary-01: #E6F7FF !default;
-$primary-02: #BAE7FF !default;
-$primary-03: #91D5FF !default;
-$primary-04: #69C0FF !default;
-$primary-05: #40A9FF !default;
-$primary-06: #1890FF !default;
-$primary-07: #096DD9 !default;
-$primary-08: #0050B3 !default;
-$primary-09: #003A8C !default;
-$primary-10: #002766 !default;
-
-$link-01: #E6F7FF;
-$link-03: #91D5FF;
-$link-05: #40A9FF;
-$link-06: #1890FF;
-$link-07: #096DD9;
-
-$error-01: #FFF1F0;
-$error-03: #FFA39E;
-$error-05: #FF4D4F;
-$error-06: #F5222D;
-$error-07: #CF1322;
-
-$warning-01: #FFFBE6;
-$warning-03: #FFE58F;
-$warning-05: #FFC53D;
-$warning-06: #FAAD14;
-$warning-07: #D48806;
-
-$success-01: #F6FFED;
-$success-03: #B7EB8F;
-$success-05: #73D13D;
-$success-06: #52C41A;
-$success-07: #389E0D;
-
-//White
-$black-01: rgba(0, 0, 0, 0.02);
-$black-02: rgba(0, 0, 0, 0.04);
-$black-03: rgba(0, 0, 0, 0.08);
-$black-04: rgba(0, 0, 0, 0.16);
-$black-05: rgba(0, 0, 0, 0.24);
-$black-06: rgba(0, 0, 0, 0.44);
-$black-07: rgba(0, 0, 0, 0.64);
-$black-08: rgba(0, 0, 0, 0.88);
-
-//Black
-$white-01: rgba(255, 255, 255, 0.04);
-$white-02: rgba(255, 255, 255, 0.08);
-$white-03: rgba(255, 255, 255, 0.16);
-$white-04: rgba(255, 255, 255, 0.24);
-$white-05: rgba(255, 255, 255, 0.44);
-$white-06: rgba(255, 255, 255, 0.64);
-$white-07: rgba(255, 255, 255, 0.88);
-$white-08: #fff;
-
+$primary-01: #E6F7FF !default;
+$primary-02: #BAE7FF !default;
+$primary-03: #91D5FF !default;
+$primary-04: #69C0FF !default;
+$primary-05: #40A9FF !default;
+$primary-06: #1890FF !default;
+$primary-07: #096DD9 !default;
+$primary-08: #0050B3 !default;
+$primary-09: #003A8C !default;
+$primary-10: #002766 !default;
+
+$link-01: #E6F7FF;
+$link-03: #91D5FF;
+$link-05: #40A9FF;
+$link-06: #1890FF;
+$link-07: #096DD9;
+
+$error-01: #FFF1F0;
+$error-03: #FFA39E;
+$error-05: #FF4D4F;
+$error-06: #F5222D;
+$error-07: #CF1322;
+
+$warning-01: #FFFBE6;
+$warning-03: #FFE58F;
+$warning-05: #FFC53D;
+$warning-06: #FAAD14;
+$warning-07: #D48806;
+
+$success-01: #F6FFED;
+$success-03: #B7EB8F;
+$success-05: #73D13D;
+$success-06: #52C41A;
+$success-07: #389E0D;
+
+//White
+$black-01: rgba(0, 0, 0, 0.02);
+$black-02: rgba(0, 0, 0, 0.04);
+$black-03: rgba(0, 0, 0, 0.08);
+$black-04: rgba(0, 0, 0, 0.16);
+$black-05: rgba(0, 0, 0, 0.24);
+$black-06: rgba(0, 0, 0, 0.44);
+$black-07: rgba(0, 0, 0, 0.64);
+$black-08: rgba(0, 0, 0, 0.88);
+
+//Black
+$white-01: rgba(255, 255, 255, 0.04);
+$white-02: rgba(255, 255, 255, 0.08);
+$white-03: rgba(255, 255, 255, 0.16);
+$white-04: rgba(255, 255, 255, 0.24);
+$white-05: rgba(255, 255, 255, 0.44);
+$white-06: rgba(255, 255, 255, 0.64);
+$white-07: rgba(255, 255, 255, 0.88);
+$white-08: #fff;
+
 $border-radius-base: 2;

package/packages/timeline/index.js

@@ -1,5 +1,5 @@
-import EleTimeline from './src/index.vue'
-
-EleTimeline.install = Vue => Vue.component(EleTimeline.name, EleTimeline)
-
+import EleTimeline from './src/index.vue'
+
+EleTimeline.install = Vue => Vue.component(EleTimeline.name, EleTimeline)
+
 export default EleTimeline

package/packages/timeline/src/index.vue

@@ -1,258 +1,258 @@
-<template>
-  <div class="ele-timeline__wrapper">
-    <div class="ele-timeline__item" v-for="item in innerDataSource" :key="item.key">
-      <div class="ele-timeline__left">
-        <div class="titleline-left__date">{{ item.date }}</div>
-      </div>
-      <div class="ele-timeline__middle">
-        <div class="ele-timeline__circle"></div>
-        <div class="ele-timeline__traline"></div>
-      </div>
-      <div class="ele-timeline__right">
-        <slot v-if="$scopedSlots.right" name="right" :data="item"></slot>
-        <template v-else>
-          <div class="timeline-right__title">
-            <span class="title">{{ item.title }}</span>
-            <span :class="['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']">{{ item.stateName }}</span>
-          </div>
-          <div class="timeline-right__oper">
-            由
-            <span class="oper-name">{{ item.userName }}</span>
-            操作
-          </div>
-          <div class="timeline-right__subtitle" v-for="label in item.labelList" :key="label.value">
-            <div class="right-subtitle__field">{{ label.label }}：</div>
-            <div class="right-subtitle__content">{{ label.value }}</div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { net, type } from '@idooel/shared'
-import { v4 as uuidv4 } from 'uuid'
-import { CONTEXT, parseFieldMap } from '../../utils'
-export default {
-  name: 'ele-timeline',
-  props: {
-    url: {
-      type: String
-    },
-    params: {
-      type: Object,
-      default: () => ({})
-    },
-    requestType: {
-      type: String,
-      default: 'GET'
-    },
-    fieldMap: {
-      type: Object,
-      default: () => ({})
-    },
-    params: {
-      type: Object,
-      default: () => ({})
-    },
-    dataSource: {
-      type: Array,
-      default: () => ([
-        // {
-        //   date: '2023/05/09 03:34:56',
-        //   title: 123,
-        //   state: 1,
-        //   stateName: '成功',
-        //   userName: 'Name',
-        //   labelList: [
-        //     {
-        //       label: 'label',
-        //       value: 'value'
-        //     }
-        //   ],
-        //   action: '结班',
-        //   opinion: '意见'
-        // }
-      ])
-    }
-  },
-  data () {
-    return {
-      innerDataSource: []
-    }
-  },
-  inject: {
-    [CONTEXT]: {
-      default: () => (() => ({}))
-    }
-  },
-  computed: {
-    expressionData () {
-      return {
-        _route: this.$route.query,
-        ...this[CONTEXT]()
-      }
-    }
-  },
-  async created() {
-    if (this.url) {
-      this.innerDataSource = await this.requestData()
-    } else if (!type.isEmpty(this.dataSource)) {
-      this.innerDataSource = this.dataSource
-    } else {
-      console.warn('ele-timeline: 请传入数据源')
-    }
-  },
-  methods: {
-    async requestData () {
-      const ret = await net[this.requestType.toLowerCase()](
-        this.url,
-        { ...this.params, ...parseFieldMap(this.fieldMap, this.expressionData) }
-      ).then(resp => {
-        const { data } = resp || {}
-        return data.map(item => {
-          return {
-            key: uuidv4(),
-            ...item
-          }
-        })
-      })
-      return ret
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import '../../theme/index';
-</style>
-<style lang="scss" scoped>
-.ele-timeline__wrapper {
-  width: 100%;
-  height: 100%;
-  .ele-timeline__item {
-    display: flex;
-    flex-direction: row;
-    &:last-child {
-      .ele-timeline__middle {
-        .ele-timeline__traline {
-          display: none;
-        }
-      }
-    }
-    .ele-timeline__left {
-      flex: 1;
-      padding-right: 12px;
-      padding-top: 16px;
-      padding-bottom: 16px;
-      text-align: right;
-      display: flex;
-      flex-direction: row;
-      justify-content: end;
-      .titleline-left__date {
-        width: 100px;
-        font-size: 14px;
-        color: var(--idoole-black-064);
-      }
-    }
-    .ele-timeline__middle {
-      width: 10px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      transform: translate(0, 20px);
-      .ele-timeline__circle {
-        width: 100%;
-        height: 10px;
-        border-radius: 50%;
-        border-width: 2px;
-        border-style: solid;
-        border-color: var(--idooel-primary-color);
-      }
-      .ele-timeline__traline {
-        width: 1px;
-        height: calc(100% - 10px);
-        border-width: 1px;
-        border-style: solid;
-        border-color: var(--idoole-black-016);
-      }
-    }
-    .ele-timeline__right {
-      text-align: left;
-      flex: 2;
-      padding-left: 12px;
-      padding-top: 16px;
-      padding-bottom: 16px;
-      .timeline-right__title {
-        line-height: 22px;
-        display: flex;
-        flex-direction: row;
-        .title {
-          color: var(--idoole-black-088);
-          font-size: 14px;
-          font-weight: bold;
-        }
-        .title-info {
-          font-size: 14px;
-          color: var(--idoole-black-064);
-          margin-left: 16px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          &::before {
-            content: '';
-            display: inline-block;
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            margin-right: 8px;
-          }
-          &.success {
-            &::before {
-              background: var(--idoole-success-06);
-            }
-          }
-          &.warning {
-            &::before {
-              background: var(--idoole-warning-06);
-            }
-          }
-          &.error {
-            &::before {
-              background: var(--idoole-error-06);
-            }
-          }
-        }
-      }
-      .timeline-right__oper {
-        line-height: 22px;
-        margin-top: 8px;
-        margin-left: 12px;
-        .oper-name {
-          color: var(--idoole-black-088);
-          font-size: 14px;
-          font-weight: bold;
-        }
-      }
-      .timeline-right__subtitle {
-        margin-left: 12px;
-        display: flex;
-        flex-direction: row;
-        line-height: 22px;
-        margin-top: 4px;
-        .right-subtitle__field {
-          flex-shrink: 0;
-          font-size: 14px;
-          color: var(--idoole-black-064);
-        }
-        .right-subtitle__content {
-          font-size: 14px;
-          color: var(--idoole-black-088);
-          font-weight: bold;
-          margin-left: 4px;
-        }
-      }
-    }
-  }
-}
+<template>
+  <div class="ele-timeline__wrapper">
+    <div class="ele-timeline__item" v-for="item in innerDataSource" :key="item.key">
+      <div class="ele-timeline__left">
+        <div class="titleline-left__date">{{ item.date }}</div>
+      </div>
+      <div class="ele-timeline__middle">
+        <div class="ele-timeline__circle"></div>
+        <div class="ele-timeline__traline"></div>
+      </div>
+      <div class="ele-timeline__right">
+        <slot v-if="$scopedSlots.right" name="right" :data="item"></slot>
+        <template v-else>
+          <div class="timeline-right__title">
+            <span class="title">{{ item.title }}</span>
+            <span :class="['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']">{{ item.stateName }}</span>
+          </div>
+          <div class="timeline-right__oper">
+            由
+            <span class="oper-name">{{ item.userName }}</span>
+            操作
+          </div>
+          <div class="timeline-right__subtitle" v-for="label in item.labelList" :key="label.value">
+            <div class="right-subtitle__field">{{ label.label }}：</div>
+            <div class="right-subtitle__content">{{ label.value }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { net, type } from '@idooel/shared'
+import { v4 as uuidv4 } from 'uuid'
+import { CONTEXT, parseFieldMap } from '../../utils'
+export default {
+  name: 'ele-timeline',
+  props: {
+    url: {
+      type: String
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    requestType: {
+      type: String,
+      default: 'GET'
+    },
+    fieldMap: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    dataSource: {
+      type: Array,
+      default: () => ([
+        // {
+        //   date: '2023/05/09 03:34:56',
+        //   title: 123,
+        //   state: 1,
+        //   stateName: '成功',
+        //   userName: 'Name',
+        //   labelList: [
+        //     {
+        //       label: 'label',
+        //       value: 'value'
+        //     }
+        //   ],
+        //   action: '结班',
+        //   opinion: '意见'
+        // }
+      ])
+    }
+  },
+  data () {
+    return {
+      innerDataSource: []
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    expressionData () {
+      return {
+        _route: this.$route.query,
+        ...this[CONTEXT]()
+      }
+    }
+  },
+  async created() {
+    if (this.url) {
+      this.innerDataSource = await this.requestData()
+    } else if (!type.isEmpty(this.dataSource)) {
+      this.innerDataSource = this.dataSource
+    } else {
+      console.warn('ele-timeline: 请传入数据源')
+    }
+  },
+  methods: {
+    async requestData () {
+      const ret = await net[this.requestType.toLowerCase()](
+        this.url,
+        { ...this.params, ...parseFieldMap(this.fieldMap, this.expressionData) }
+      ).then(resp => {
+        const { data } = resp || {}
+        return data.map(item => {
+          return {
+            key: uuidv4(),
+            ...item
+          }
+        })
+      })
+      return ret
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../theme/index';
+</style>
+<style lang="scss" scoped>
+.ele-timeline__wrapper {
+  width: 100%;
+  height: 100%;
+  .ele-timeline__item {
+    display: flex;
+    flex-direction: row;
+    &:last-child {
+      .ele-timeline__middle {
+        .ele-timeline__traline {
+          display: none;
+        }
+      }
+    }
+    .ele-timeline__left {
+      flex: 1;
+      padding-right: 12px;
+      padding-top: 16px;
+      padding-bottom: 16px;
+      text-align: right;
+      display: flex;
+      flex-direction: row;
+      justify-content: end;
+      .titleline-left__date {
+        width: 100px;
+        font-size: 14px;
+        color: var(--idoole-black-064);
+      }
+    }
+    .ele-timeline__middle {
+      width: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      transform: translate(0, 20px);
+      .ele-timeline__circle {
+        width: 100%;
+        height: 10px;
+        border-radius: 50%;
+        border-width: 2px;
+        border-style: solid;
+        border-color: var(--idooel-primary-color);
+      }
+      .ele-timeline__traline {
+        width: 1px;
+        height: calc(100% - 10px);
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--idoole-black-016);
+      }
+    }
+    .ele-timeline__right {
+      text-align: left;
+      flex: 2;
+      padding-left: 12px;
+      padding-top: 16px;
+      padding-bottom: 16px;
+      .timeline-right__title {
+        line-height: 22px;
+        display: flex;
+        flex-direction: row;
+        .title {
+          color: var(--idoole-black-088);
+          font-size: 14px;
+          font-weight: bold;
+        }
+        .title-info {
+          font-size: 14px;
+          color: var(--idoole-black-064);
+          margin-left: 16px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            margin-right: 8px;
+          }
+          &.success {
+            &::before {
+              background: var(--idoole-success-06);
+            }
+          }
+          &.warning {
+            &::before {
+              background: var(--idoole-warning-06);
+            }
+          }
+          &.error {
+            &::before {
+              background: var(--idoole-error-06);
+            }
+          }
+        }
+      }
+      .timeline-right__oper {
+        line-height: 22px;
+        margin-top: 8px;
+        margin-left: 12px;
+        .oper-name {
+          color: var(--idoole-black-088);
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+      .timeline-right__subtitle {
+        margin-left: 12px;
+        display: flex;
+        flex-direction: row;
+        line-height: 22px;
+        margin-top: 4px;
+        .right-subtitle__field {
+          flex-shrink: 0;
+          font-size: 14px;
+          color: var(--idoole-black-064);
+        }
+        .right-subtitle__content {
+          font-size: 14px;
+          color: var(--idoole-black-088);
+          font-weight: bold;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
 </style>

package/packages/tpl/index.js

@@ -1,5 +1,5 @@
-import EleTpl from './src/index.vue'
-
-EleTpl.install = Vue => Vue.component(EleTpl.name, EleTpl)
-
+import EleTpl from './src/index.vue'
+
+EleTpl.install = Vue => Vue.component(EleTpl.name, EleTpl)
+
 export default EleTpl