Merge pull request #53 from eyunhua/master

v0.11.0-dev
ecomfe · May 27, 2018 · 7428277 · 7428277
2 parents 5c7ff7b + a00d0c4
commit 7428277
Show file tree

Hide file tree

Showing 40 changed files with 4,110 additions and 3,514 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## 0.11.0-dev(veui版本为1.0.0-alpha.13)
+
+### 💡 主要变更
+
+* [+] 新增 `Table` 组件样式，包括字体大小以及行内容超出省略号隐藏
+* [+] 更新 `NumberInput` 组件样式
+
+### 🐞 问题修复
+
+* [^] 更新 `Uploader` 组件样式
+* [^] 修改 `Datepicker` 组件年月选择框箭头上方可以看到被遮挡文字的问题（fix#50）
+* [^] 修改 `Form` 组件验证信息展示的问题（fix#51）
+
 ## 0.10.0-dev(veui版本为1.0.0-alpha.12)
 
 ### 🐞 问题修复

diff --git a/demo/components/Alert.vue b/demo/components/Alert.vue
@@ -13,11 +13,13 @@
  <veui-alert class="limit-width" type="error" message="错误，请检查并修改后再进行操作" @update:open="close"></veui-alert>
  <veui-dialog
  title="提示"
- :open="open"
- @update:open="open = !open"
- :draggable="true">
+ :open.sync="open"
+ draggable>
  您关闭了
- <template slot="foot"></template>
+ <template slot="foot">
+ <veui-button ui="primary" @click="open = false">确定</veui-button>
+ <veui-button autofocus @click="open = false">取消</veui-button>
+ </template>
  </veui-dialog>
  </section>
  </article>

diff --git a/demo/components/AlertBox.vue b/demo/components/AlertBox.vue
@@ -2,7 +2,7 @@
  <article class="alert-box-demo">
  <h1><code>&lt;veui-alert-box&gt;</code></h1>
  <p>
- <veui-button ui="primary"
+ <veui-button type="primary"
  @click="alertBoxOpen = true">
  open alert box
  </veui-button>
@@ -13,33 +13,33 @@
  </p>
 
  <p>
- <veui-button ui="primary"
+ <veui-button type="primary"
  @click="alertSuccessBoxOpen = true">
  open success alert box
  </veui-button>
- <veui-alert-box :open.sync="alertSuccessBoxOpen" ui="success">
+ <veui-alert-box :open.sync="alertSuccessBoxOpen" type="success">
  <template slot="title">创建条目成功</template>
  恭喜你，您的资料已经提交成功！
  </veui-alert-box>
  </p>
 
  <p>
- <veui-button ui="primary"
+ <veui-button type="primary"
  @click="alertInfoBoxOpen = true">
  open info alert box
  </veui-button>
- <veui-alert-box :open.sync="alertInfoBoxOpen" ui="info">
+ <veui-alert-box :open.sync="alertInfoBoxOpen" type="info">
  <template slot="title">创建条目提醒</template>
  请完善你的资料，保证内容真实。
  </veui-alert-box>
  </p>
 
  <p>
- <veui-button ui="primary"
+ <veui-button type="primary"
  @click="alertErrorBoxOpen = true">
  open error alert box
  </veui-button>
- <veui-alert-box :open.sync="alertErrorBoxOpen" ui="error">
+ <veui-alert-box :open.sync="alertErrorBoxOpen" type="error">
  <template slot="title">创建条目失败</template>
  请完善你的资料，保证内容真实。
  </veui-alert-box>

diff --git a/demo/components/Breadcrumb.vue b/demo/components/Breadcrumb.vue
@@ -1,22 +1,22 @@
 <template>
  <article>
  <h1><code>&lt;veui-breadcrumb&gt;</code></h1>
- <p>
+ <section>
  <veui-breadcrumb :routes="items" @redirect="handleRedirect">
  <template slot-scope="route"><em>{{ route.label }}</em></template>
  <template slot="separator" slot-scope="scope">/</template>
  </veui-breadcrumb>
- </p>
- <p>
+ </section>
+ <section>
  <veui-breadcrumb :routes="items" @redirect="handleRedirect"/>
- </p>
- <p>
+ </section>
+ <section>
  <veui-breadcrumb>
  <veui-breadcrumb-item to="/">首页</veui-breadcrumb-item>
- <veui-breadcrumb-item to="/breadcrumb">面包屑</veui-breadcrumb-item>
+ <veui-breadcrumb-item :to="{ name: 'Breadcrumb' }">面包屑</veui-breadcrumb-item>
  <veui-breadcrumb-item type="text">我在这里</veui-breadcrumb-item>
  </veui-breadcrumb>
- </p>
+ </section>
  </article>
 </template>
 
@@ -53,4 +53,9 @@ export default {
  }
  }
 }
-</script>
+</script>
+<style lang="less" scoped>
+section {
+ margin-bottom: 20px;
+}
+</style>
diff --git a/demo/components/DatePicker.vue b/demo/components/DatePicker.vue
@@ -3,29 +3,43 @@
  <h1><code>&lt;veui-date-picker&gt;</code></h1>
  <section>
  <h2>普通</h2>
- <p>
- <veui-date-picker v-model="selected1"></veui-date-picker>
- </p>
+ <veui-date-picker v-model="selected1"/>
  </section>
  <section>
  <h2>禁用</h2>
- <p><veui-date-picker v-model="selected1" disabled></veui-date-picker></p>
+ <veui-date-picker v-model="selected1" disabled />
  </section>
  <section>
  <h2>可清除选择</h2>
- <p><veui-date-picker v-model="selected1" clearable></veui-date-picker></p>
+ <veui-date-picker v-model="selected1" clearable />
  </section>
  <section>
  <h2>范围选择</h2>
- <p><veui-date-picker v-model="selected2" range :shortcuts="shortcuts"></veui-date-picker></p>
+ <veui-date-picker v-model="selected2" range :shortcuts="shortcuts" />
  </section>
  <section>
  <h2>可清除范围选择</h2>
- <p><veui-date-picker v-model="selected2" range clearable :panel="3"></veui-date-picker></p>
+ <veui-date-picker v-model="selected2" range clearable :panel="3" />
  </section>
  <section>
  <h2>范围禁用</h2>
- <p><veui-date-picker v-model="selected2" range disabled></veui-date-picker></p>
+ <veui-date-picker v-model="selected2" range disabled />
+ </section>
+ <section>
+ <h2>作用域插槽 <code>date</code></h2>
+ <section>
+ <veui-date-picker v-model="selected2" range>
+ <template slot="date" slot-scope="{ date }"><em>{{ date }}</em></template>
+ </veui-date-picker>
+ </section>
+ </section>
+ <section>
+ <h2>作用域插槽 <code>selected</code></h2>
+ <section>
+ <veui-date-picker v-model="selected2" range>
+ <template slot="selected" slot-scope="{ year, month, date, position }">{{ position === 'from' ? '👉' : '' }}{{ year % 2000 }}.{{ month + 1 }}.<strong>{{ date }}</strong>{{ position === 'to' ? ' 👈' : '' }}</template>
+ </veui-date-picker>
+ </section>
  </section>
  </article>
 </template>

diff --git a/demo/components/Dialog.vue b/demo/components/Dialog.vue
@@ -2,24 +2,24 @@
  <article class="demo-dialog">
  <h1><code>&lt;veui-dialog&gt;</code></h1>
  <p>
- <veui-dialog :modal="true"
+ <veui-dialog
  overlay-class="test demo-dialog-standard-dialog"
- :open="modalDialogVisible"
+ :open.sync="modalDialogVisible"
  title="Dialog Title"
- @update:open="(value) => modalDialogVisible = value">
+ modal>
  <p>content area</p>
  <template slot="foot">
  <veui-button ui="primary" @click="modalDialogVisible = false">OK</veui-button>
  <veui-button autofocus @click="modalDialogVisible = false">CANCEL</veui-button>
  </template>
  </veui-dialog>
  <veui-button ui="primary"
- @click="modalDialogVisible = !modalDialogVisible">Open a model dialog box</veui-button>
+ @click="modalDialogVisible = !modalDialogVisible">Open a modal dialog box</veui-button>
 
- <veui-dialog :modal="false"
- :open="nonModalDialogVisible"
- title="Dialog Title"
- @update:open="(value) => nonModalDialogVisible = value">
+ <veui-dialog
+ :modal="false"
+ :open.sync="nonModalDialogVisible"
+ title="Dialog Title">
  The content of the Dialog. You can use the default slot to override it.
  <template slot="foot">
  <veui-button ui="primary" @click="nonModalDialogVisible = false">OK</veui-button>
@@ -30,11 +30,12 @@
  @click="nonModalDialogVisible = !nonModalDialogVisible">Open a modeless dialog box</veui-button>
  </p>
  <p>
- <veui-dialog :draggable="true"
+ <veui-dialog
  :modal="false"
  :open.sync="draggableDialog1Visible"
  ui="center"
- title="First">
+ title="First"
+ draggable>
  You can drag the dialog box in the viewport.
  <template slot="foot">
  <veui-button ui="primary" @click="draggableDialog1Visible = false">OK</veui-button>
@@ -43,12 +44,12 @@
  </veui-dialog>
  <veui-button ui="primary" @click="draggableDialog1Visible = !draggableDialog1Visible">Open the first draggable dialog box</veui-button>
 
- <veui-dialog :draggable="true"
+ <veui-dialog
  :modal="false"
- :open="draggableDialog2Visible"
+ :open.sync="draggableDialog2Visible"
  title="Second"
- @update:open="(value) => draggableDialog2Visible = value"
- ui="reverse top">
+ ui="reverse top"
+ draggable>
  <p>Drag the current dialog box to the right and open the first draggable dialog.</p>
  <p>Keep the two dialog have some parts overlapped.</p>
  <p>You'll see the first draggable dialog is higher than the second one.</p>
@@ -60,13 +61,13 @@
  </veui-dialog>
  <veui-button ui="primary" @click="draggableDialog2Visible = !draggableDialog2Visible">Open the second draggable dialog box</veui-button>
 
- <veui-dialog :draggable="true"
+ <veui-dialog
  :modal="false"
- :open="draggableDialog3Visible"
+ :open.sync="draggableDialog3Visible"
  title="Reset Position"
- @update:open="(value) => ($refs.resetDialog.resetPosition(), draggableDialog3Visible = value)"
  ui="reverse top"
- ref="resetDialog">
+ ref="resetDialog"
+ draggable>
  Click the `reset` button to put the dialog to the initial position.
  <template slot="foot">
  <veui-button @click="() => $refs.resetDialog.resetPosition()" ui="alt">Reset</veui-button>
@@ -75,8 +76,8 @@
  <veui-button ui="alt" @click="draggableDialog3Visible = !draggableDialog3Visible">Draggable dialog box with reset button</veui-button>
  </p>
  <p>
- <veui-dialog :open="operationDialogVisible"
- @update:open="(value) => operationDialogVisible = value"
+ <veui-dialog
+ :open.sync="operationDialogVisible"
  @ok="handleOk"
  @cancel="handleCancel"
  title="The Built-in Button">
@@ -85,8 +86,8 @@
  <veui-button ui="primary" @click="operationDialogVisible = true">The Built-in Button</veui-button>
  </p>
  <p>
- <veui-dialog :open="customTextTitleDialogVisible"
- @update:open="(value) => customTextTitleDialogVisible = value"
+ <veui-dialog
+ :open.sync="customTextTitleDialogVisible"
  title="Custom Title">
  You can change the dialog title text by setting the `title` prop or passing in the `title` slot parameter.
  <template slot="foot">
@@ -96,8 +97,8 @@
  </veui-dialog>
  <veui-button ui="primary" @click="customTextTitleDialogVisible = true">Custom Title</veui-button>
 
- <veui-dialog :open="customIconTitleDialogVisible"
- @update:open="(value) => customIconTitleDialogVisible = value">
+ <veui-dialog
+ :open.sync="customIconTitleDialogVisible">
  <template slot="title">Custom Title With ICON <icon class="svg" name="calendar"></icon></template>
  <template slot="foot">
  <veui-button ui="primary" @click="customIconTitleDialogVisible = false">OK</veui-button>
@@ -109,8 +110,8 @@
  </p>
 
  <p>
- <veui-dialog :open="contentAutoHeightDialogVisible"
- @update:open="(value) => contentAutoHeightDialogVisible = value"
+ <veui-dialog
+ :open.sync="contentAutoHeightDialogVisible">
  title="Adaptive Content Height">
  <p>The following increaming content string will incream the content height slowly:</p>
  <div v-html="dynamicContent"></div>
@@ -132,6 +133,10 @@
  <veui-button ui="primary" @click="popupConfirms">Open ConfirmBox</veui-button>
  </p>
  <p>
+ <veui-button @click="popupToasts('info')">Info Toast</veui-button>
+ <veui-button @click="popupToasts('warn')">Warn Toast</veui-button>
+ <veui-button @click="popupToasts('error')">Error Toast</veui-button>
+ <veui-button @click="popupToasts('success')">Success Toast</veui-button>
  <veui-button ui="primary" @click="popupToasts">Open Toasts</veui-button>
  </p>
  <p>
@@ -146,7 +151,6 @@ import confirmManager from 'veui/managers/confirm'
 import promptManager from 'veui/managers/prompt'
 import toastManager from 'veui/managers/toast'
 import 'veui-theme-blue/icons/calendar'
-
 export default {
  name: 'dialog-demo',
  components: {
@@ -166,19 +170,28 @@ export default {
  customIconTitleDialogVisible: false,
  contentAutoHeightDialogVisible: false,
  dynamicContent: '',
- test: '123'
+ test: '123',
+ adaptiveDialogTimer: null
  }
  },
- created () {
- setInterval(() => {
- this.dynamicContent += `${Date.now()}<br>`
- }, 1000)
- },
  watch: {
  contentAutoHeightDialogVisible (value) {
  if (value) {
+ this.adaptiveDialogTimer = setInterval(
+ () => {
+ this.dynamicContent += `${Date.now()}<br>`
+ },
+ 1000
+ )
+ } else {
+ clearTimeout(this.adaptiveDialogTimer)
  this.dynamicContent = ''
  }
+ },
+ draggableDialog3Visible (value) {
+ if (!value) {
+ this.$refs.resetDialog.resetPosition()
+ }
  }
  },
  methods: {
@@ -217,13 +230,22 @@ export default {
  }
  })
  },
- popupToasts () {
- let counter = 1
- setInterval(() => {
- counter++
- const type = ['error', 'info', 'success'][counter % 3]
- toastManager[type](`${type}-${counter}`)
- }, 1000)
+ popupToasts (type) {
+ if (type && toastManager[type]) {
+ toastManager[type](`${type} message`)
+ } else {
+ let index = 0
+ let timer = setInterval(
+ () => {
+ const type = ['warn', 'error', 'info', 'success'][index]
+ toastManager[type](`${type}-${index + 1}`)
+ if (++index > 3) {
+ clearTimeout(timer)
+ }
+ },
+ 1000
+ )
+ }
  },
  popupPrompt () {
  promptManager.info('Please tell us your age:', 'Prompt').then(({ isOk, value }) => {
@@ -257,4 +279,4 @@ export default {
  }
  }
 }
-</style>
+</style>