@idooel/components 0.0.2-beta.3 → 0.0.2-beta.30

package/packages/tabs/index.js

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

package/packages/tabs/src/index.vue

@@ -1,56 +1,56 @@
-<template>
-  <div>
-    <a-tabs :default-active-key="activeKey" :tabBarGutter="tabBarGutter" :tabBarStyle="tabBarStyle" @change="changeHandle">
-      <a-tab-pane v-for="(item, index) in tabsList" :key="index" :tab="item.tabName" :disabled="item.disabled">
-        <template #tab>
-          <component  v-if="item.renderHeader" :is="item.renderHeader" ></component>
-          <span v-else>{{ item.tabName }}</span>
-        </template>
-        <component :is="item.content"></component>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-tabs',
-  components: {},
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    activeKey: {
-      type: Number,
-      default: 0
-    },
-    tabsList: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    tabBarStyle: {
-      type: Object,
-      default () {
-        return {}
-      }
-    },
-    tabBarGutter: {
-      type: Number
-    }
-  },
-  methods: {
-    changeHandle (key) {
-      this.$emit('changeActiveKey', key)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .ant-tabs-nav-scroll {
-  float: left !important;
-}
+<template>
+  <div>
+    <a-tabs :default-active-key="activeKey" :tabBarGutter="tabBarGutter" :tabBarStyle="tabBarStyle" @change="changeHandle">
+      <a-tab-pane v-for="(item, index) in tabsList" :key="index" :tab="item.tabName" :disabled="item.disabled">
+        <template #tab>
+          <component  v-if="item.renderHeader" :is="item.renderHeader" ></component>
+          <span v-else>{{ item.tabName }}</span>
+        </template>
+        <component :is="item.content"></component>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-tabs',
+  components: {},
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    activeKey: {
+      type: Number,
+      default: 0
+    },
+    tabsList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    tabBarStyle: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    tabBarGutter: {
+      type: Number
+    }
+  },
+  methods: {
+    changeHandle (key) {
+      this.$emit('changeActiveKey', key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ant-tabs-nav-scroll {
+  float: left !important;
+}
 </style>

package/packages/text/index.js

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

package/packages/text/src/index.vue

@@ -1,48 +1,48 @@
-<template>
-  <div :class="['ele-text__wrapper', type]">
-    <ele-icon theme="filled" :type="icon"></ele-icon>
-    <span class="message">{{ message }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-text',
-  props: {
-    type: {
-      String,
-      // default success error warning info
-      default: 'default'
-    },
-    message: {
-      type: String
-    }
-  },
-  computed: {
-    icon() {
-      return 'info-circle'
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-//
-.ele-text__wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  &.default {
-    .anticon, .message {
-      color: var(--idoole-black-064);
-    }
-  }
-  .anticon {
-    font-size: 16px;
-  }
-  .message {
-    font-size: 14px;
-    margin-left: 4px;
-  }
-}
+<template>
+  <div :class="['ele-text__wrapper', type]">
+    <ele-icon theme="filled" :type="icon"></ele-icon>
+    <span class="message">{{ message }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-text',
+  props: {
+    type: {
+      String,
+      // default success error warning info
+      default: 'default'
+    },
+    message: {
+      type: String
+    }
+  },
+  computed: {
+    icon() {
+      return 'info-circle'
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+//
+.ele-text__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &.default {
+    .anticon, .message {
+      color: var(--idoole-black-064);
+    }
+  }
+  .anticon {
+    font-size: 16px;
+  }
+  .message {
+    font-size: 14px;
+    margin-left: 4px;
+  }
+}
 </style>

package/packages/text-editor/index.js

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

package/packages/text-editor/src/index.vue

@@ -1,73 +1,73 @@
-<template>
-  <div class="ele-editor__wrapper" :style="{width: editorWidth, height: editorHeight}">
-    <Vueditor :ref="getVueditor" :style="{width: editorWidth, height: editorHeight}"></Vueditor>
-    <div class="ele-editor__bottom">
-      <span>{{ innerContent.length }}字</span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { v4 as uuidv4 } from 'uuid'
-export default {
-  name: 'ele-text-editor',
-  props: {
-    editorWidth: {
-      type: String
-    },
-    editorHeight: {
-      type: String
-    },
-    maxLength: {
-      type: Number,
-      default () {
-        return 10
-      }
-    }
-  },
-  data() {
-    return {
-      editorConfig: {},
-      textEditorRef: null
-    }
-  },
-  computed: {
-    innerContent () {
-      let content = this.textEditorRef ? this.textEditorRef.getContent() : ''
-      if (this.textEditorRef && content.length > this.maxLength) {
-        content = content.substring(0, this.maxLength)
-        this.$nextTick(() => {
-          this.textEditorRef.setContent(content)
-        })
-      }
-      this.$emit('input', content)
-      return content
-    },
-    getVueditor () {
-      return uuidv4()
-    }
-  },
-  watch: {},
-  methods: {},
-  mounted () {
-    this.textEditorRef = this.$refs[this.getVueditor]
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ele-editor__bottom {
-  height: 40px;
-  padding: 8px 20px 8px 8px;
-  border: 1px solid var(--idooel-form-title-border-color);
-  border-top: 0px;
-  span {
-    color: var(--idoole-black-088);
-    text-align: right;
-    font-size: 12px;
-    line-height: 20px;
-    width: 100%;
-    display: inline-block;
-  }
-}
+<template>
+  <div class="ele-editor__wrapper" :style="{width: editorWidth, height: editorHeight}">
+    <Vueditor :ref="getVueditor" :style="{width: editorWidth, height: editorHeight}"></Vueditor>
+    <div class="ele-editor__bottom">
+      <span>{{ innerContent.length }}字</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+export default {
+  name: 'ele-text-editor',
+  props: {
+    editorWidth: {
+      type: String
+    },
+    editorHeight: {
+      type: String
+    },
+    maxLength: {
+      type: Number,
+      default () {
+        return 10
+      }
+    }
+  },
+  data() {
+    return {
+      editorConfig: {},
+      textEditorRef: null
+    }
+  },
+  computed: {
+    innerContent () {
+      let content = this.textEditorRef ? this.textEditorRef.getContent() : ''
+      if (this.textEditorRef && content.length > this.maxLength) {
+        content = content.substring(0, this.maxLength)
+        this.$nextTick(() => {
+          this.textEditorRef.setContent(content)
+        })
+      }
+      this.$emit('input', content)
+      return content
+    },
+    getVueditor () {
+      return uuidv4()
+    }
+  },
+  watch: {},
+  methods: {},
+  mounted () {
+    this.textEditorRef = this.$refs[this.getVueditor]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele-editor__bottom {
+  height: 40px;
+  padding: 8px 20px 8px 8px;
+  border: 1px solid var(--idooel-form-title-border-color);
+  border-top: 0px;
+  span {
+    color: var(--idoole-black-088);
+    text-align: right;
+    font-size: 12px;
+    line-height: 20px;
+    width: 100%;
+    display: inline-block;
+  }
+}
 </style>

package/packages/textarea/index.js

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

package/packages/textarea/src/index.vue

@@ -1,58 +1,58 @@
-<template>
-  <a-textarea 
-    :value="value"
-    :disabled="disabled"
-    :auto-size="autosize"
-    :max-length="maxLength"
-    :placeholder="placeholder"
-    :allow-clear="allowClear"
-    @change="onChange">
-  </a-textarea>
-</template>
-
-<script>
-export default {
-  name: 'ele-textarea',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    maxLength: {
-      type: Number
-    },
-    placeholder: {
-      type: String
-    },
-    allowClear: {
-      type: Boolean,
-      default: false
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: () => ({
-        minRows: 4,
-        maxRows: 4
-      })
-    },
-    value: {
-      type: String
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    onChange (e) {
-      const value = e.target.value
-      this.$emit('change', value)
-      this.$emit('input', value)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
+<template>
+  <a-textarea 
+    :value="value"
+    :disabled="disabled"
+    :auto-size="autosize"
+    :max-length="maxLength"
+    :placeholder="placeholder"
+    :allow-clear="allowClear"
+    @change="onChange">
+  </a-textarea>
+</template>
+
+<script>
+export default {
+  name: 'ele-textarea',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    maxLength: {
+      type: Number
+    },
+    placeholder: {
+      type: String
+    },
+    allowClear: {
+      type: Boolean,
+      default: false
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: () => ({
+        minRows: 4,
+        maxRows: 4
+      })
+    },
+    value: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onChange (e) {
+      const value = e.target.value
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
 </style>

package/packages/theme/form.scss

@@ -1,22 +1,22 @@
-.has-error {
-  .ele-upload__wrapper {
-    .ele-upload__inner {
-      border-color: $error-06;
-      .ele-upload__area {
-        .ele-upload__area--icon {
-          .anticon-cloud-upload {
-            color: $error-06;
-          }
-        }
-        .ele-upload__area--text {
-          .ele-upload__message {
-            color: $error-06;
-          }
-          .ele-upload__ext {
-            color: $error-03;
-          }
-        }
-      }
-    }
-  }
+.has-error {
+  .ele-upload__wrapper {
+    .ele-upload__inner {
+      border-color: $error-06;
+      .ele-upload__area {
+        .ele-upload__area--icon {
+          .anticon-cloud-upload {
+            color: $error-06;
+          }
+        }
+        .ele-upload__area--text {
+          .ele-upload__message {
+            color: $error-06;
+          }
+          .ele-upload__ext {
+            color: $error-03;
+          }
+        }
+      }
+    }
+  }
 }

package/packages/theme/index.scss

@@ -1,44 +1,44 @@
-@import 'variables.scss';
-@import 'form.scss';
-@import 'styleClass.scss';
-
-$primary: $primary-06;
-
-:root {
-  --idooel-primary-color: #{$primary};
-  --idoole-black-02: #{$black-02};
-  --idoole-black-06: #{$black-06};
-  --idoole-black-07: #{$black-07};
-  --idoole-black-064: #{$black-07};
-  --idoole-black-088: #{$black-08};
-  --idoole-black-016: #{$black-04};
-  --idooel-disabled-border-color: #{$black-04};
-
-  --idoole-success-06: #{$success-06};
-  --idoole-warning-06: #{$warning-06};
-  --idoole-error-06: #{$error-06};
-  //Table
-  --idooel-border-width: 2;
-  --idooel-border-color: #53a8ff;
-  --idooel-column-border-width: 1;
-  --idooel-column-border-color: #d9ecff;
-  --idooel-row-odd-color: #{$black-02};
-  --idooel-row-even-color: #FFF;
-  --idooel-row-hover-color: #{$primary-01};
-
-  //Form
-  --idooel-form-title-border-color: #{$black-04};
-  --idooel-form-upload-bg-color: #{$black-01};
-  --idooel-form-upload-border-hover-color: #{$primary-05};
-  --idooel-form-border-radius: #{$border-radius-base}px;
-  --idooel-form-border-err-color: #{$error-06};
-
-  //Link
-  --idooel-link-06: #{$link-06};
-  --idooel-link-03: #{$link-03};
-
-  //img-crop
-  --idooel-img-crop-err-color: #{$error-03};
-}
-
+@import 'variables.scss';
+@import 'form.scss';
+@import 'styleClass.scss';
+
+$primary: $primary-06;
+
+:root {
+  --idooel-primary-color: #{$primary};
+  --idoole-black-02: #{$black-02};
+  --idoole-black-06: #{$black-06};
+  --idoole-black-07: #{$black-07};
+  --idoole-black-064: #{$black-07};
+  --idoole-black-088: #{$black-08};
+  --idoole-black-016: #{$black-04};
+  --idooel-disabled-border-color: #{$black-04};
+
+  --idoole-success-06: #{$success-06};
+  --idoole-warning-06: #{$warning-06};
+  --idoole-error-06: #{$error-06};
+  //Table
+  --idooel-border-width: 2;
+  --idooel-border-color: #53a8ff;
+  --idooel-column-border-width: 1;
+  --idooel-column-border-color: #d9ecff;
+  --idooel-row-odd-color: #{$black-02};
+  --idooel-row-even-color: #FFF;
+  --idooel-row-hover-color: #{$primary-01};
+
+  //Form
+  --idooel-form-title-border-color: #{$black-04};
+  --idooel-form-upload-bg-color: #{$black-01};
+  --idooel-form-upload-border-hover-color: #{$primary-05};
+  --idooel-form-border-radius: #{$border-radius-base}px;
+  --idooel-form-border-err-color: #{$error-06};
+
+  //Link
+  --idooel-link-06: #{$link-06};
+  --idooel-link-03: #{$link-03};
+
+  //img-crop
+  --idooel-img-crop-err-color: #{$error-03};
+}
+
 @import './overrid.scss';

package/packages/theme/overrid.scss

@@ -1,8 +1,8 @@
-.ant-input-disabled {
-  border-color: var(--idooel-disabled-border-color) !important;
-}
-.ant-select-disabled {
-  .ant-select-selection {
-    border-color: var(--idooel-disabled-border-color) !important;
-  }
+.ant-input-disabled {
+  border-color: var(--idooel-disabled-border-color) !important;
+}
+.ant-select-disabled {
+  .ant-select-selection {
+    border-color: var(--idooel-disabled-border-color) !important;
+  }
 }

package/packages/theme/styleClass.scss

@@ -1,3 +1,3 @@
-.margin-t-8 {
-  margin-top: 8px;
+.margin-t-8 {
+  margin-top: 8px;
 }