@idooel/components 0.0.1-beta.39 → 0.0.1-beta.40

package/packages/composite-components/search-area/src/label.vue

@@ -1,36 +1,36 @@
-<template>
-  <div class="g-search__label">
-    <span class="label__title">{{ label }}</span>
-    <span class="label__suffix">：</span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-search__label {
-  /* width: 69px; */
-  flex-basis: 69px;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  .label__title, .label__suffix {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.88);
-    white-space: nowrap;
-  }
-  .label__suffix {
-    margin-left: 4px;
-  }
-}
+<template>
+  <div class="g-search__label">
+    <span class="label__title">{{ label }}</span>
+    <span class="label__suffix">：</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-search__label {
+  /* width: 69px; */
+  flex-basis: 69px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .label__title, .label__suffix {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.88);
+    white-space: nowrap;
+  }
+  .label__suffix {
+    margin-left: 4px;
+  }
+}
 </style>

package/packages/date/index.js

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

package/packages/date/src/index.vue

@@ -1,40 +1,96 @@
-<template>
-  <a-date-picker 
-    style="width: 100%;" 
-    mode="year"
-    :open="open"
-    :value="value"
-    @focus="onFocus"
-    @panelChange="onPanelChange"
-    :format="format">
-  </a-date-picker>
-</template>
-
-<script>
-export default {
-  name: 'ele-date',
-  props: {
-    value: {
-      type: Object
-    },
-    format: {
-      type: String,
-      default: 'YYYY/MM/DD'
-    }
-  },
-  data () {
-    return {
-      open: false
-    }
-  },
-  methods: {
-    onFocus () {
-      this.open = true
-    },
-    onPanelChange (value, mode) {
-      this.$emit('input', value)
-      this.open = false
-    }
-  }
-}
+<template>
+  <div class="ele-date__wrapper">
+    <a-date-picker 
+      style="width: 100%;" 
+      :mode="modeValue"
+      v-if="modeValue == 'year'"
+      :open="open"
+      :value="value"
+      :show-time="showTime"
+      :show-today="showToday"
+      :valueFormat="innerValueFormat"
+      @panelChange="onPanelChange"
+      @openChange="openChange"
+      @change="onChange"
+      :format="format">
+    </a-date-picker>
+    <a-date-picker 
+      v-else
+      style="width: 100%;" 
+      :open="open"
+      :value="value"
+      :show-time="showTime"
+      :show-today="showToday"
+      :valueFormat="innerValueFormat"
+      @panelChange="onPanelChange"
+      @openChange="openChange"
+      @change="onChange"
+      :format="format">
+    </a-date-picker>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  name: 'ele-date',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Object]
+    },
+    format: {
+      type: String,
+      default: 'YYYY/MM/DD'
+    },
+    mode: {
+      type: String
+    },
+    valueFormat: {
+      type: String
+    },
+    showTime: {
+      type: [Boolean, Object],
+      default: true
+    },
+    showToday: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data () {
+    return {
+      open: false
+    }
+  },
+  computed: {
+    innerValueFormat () {
+      if (this.valueFormat) return this.valueFormat
+      return this.format
+    },
+    modeValue () {
+      if (this.mode) return this.mode
+      if (this.format === 'YYYY') return 'year'
+      return 'date'
+    }
+  },
+  methods: {
+    onChange (_, dataString) {
+      this.$emit('input', dataString)
+      this.$emit('change', dataString)
+    },
+    onPanelChange (value, mode) {
+      if (this.modeValue !== 'year') return
+      this.$emit('input', moment(value).format(this.format))
+      this.$emit('change', moment(value).format(this.format))
+      this.open = false
+    },
+    openChange (open) {
+      this.open = open
+    }
+  }
+}
 </script>

package/packages/date-range/index.js

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

package/packages/date-range/src/index.vue

@@ -1,47 +1,47 @@
-<template>
-  <a-range-picker 
-    style="width: 100%;"
-    :disabled="disabled"
-    :show-time="showTime"
-    :value="value" 
-    :format="format" 
-    @change="onChange">
-  </a-range-picker>
-</template>
-
-<script>
-export default {
-  name: 'ele-date-range',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    showTime: {
-      type: Object
-    },
-    format: {
-      type: Array,
-      default: () => ['YYYY-MM-DD', 'YYYY-MM-DD']
-    },
-    value: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    onChange (date, dateString) {
-      this.$emit('change', dateString)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
-import { models } from '../..';
+<template>
+  <a-range-picker 
+    style="width: 100%;"
+    :disabled="disabled"
+    :show-time="showTime"
+    :value="value" 
+    :format="format" 
+    @change="onChange">
+  </a-range-picker>
+</template>
+
+<script>
+export default {
+  name: 'ele-date-range',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showTime: {
+      type: Object
+    },
+    format: {
+      type: Array,
+      default: () => ['YYYY-MM-DD', 'YYYY-MM-DD']
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    onChange (date, dateString) {
+      this.$emit('change', dateString)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+import { models } from '../..';

package/packages/form/index.js

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