@opentiny/vue-docs 1.0.0 → 1.0.2

package/resources/mobile-first/app/cascader-select/disabled-array.vue

@@ -0,0 +1,106 @@
+<template>
+  <div date-tag="tiny-demo">
+    <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
+    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event" :disabled="disabled"></tiny-cascader-select>
+  </div>
+</template>
+
+<script>
+import { CascaderSelect, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascaderSelect: CascaderSelect,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      value: [2023, 1],
+      optionList: [years, months]
+    }
+  },
+  methods: {
+    showCascader() {
+      this.visible = true
+    },
+    disabled(value, focusYear, focusMonth) {
+      // 禁用日期 2023-2 的月份
+      if (focusYear === 2023 && value === 2) return true
+      // 禁用日期 2024 的年份
+      if (value === 2024) return true
+      // 其它选项不禁用，默认返回falsy值
+      return false
+    }
+  }
+}
+
+const years = [
+  { id: 2000, label: '2000年' },
+  { id: 2001, label: '2001年' },
+  { id: 2002, label: '2002年' },
+  { id: 2003, label: '2003年' },
+  { id: 2004, label: '2004年' },
+  { id: 2005, label: '2005年' },
+  { id: 2006, label: '2006年' },
+  { id: 2007, label: '2007年' },
+  { id: 2008, label: '2008年' },
+  { id: 2009, label: '2009年' },
+  { id: 2010, label: '2010年' },
+  { id: 2011, label: '2011年' },
+  { id: 2012, label: '2012年' },
+  { id: 2013, label: '2013年' },
+  { id: 2014, label: '2014年' },
+  { id: 2015, label: '2015年' },
+  { id: 2016, label: '2016年' },
+  { id: 2017, label: '2017年' },
+  { id: 2018, label: '2018年' },
+  { id: 2019, label: '2019年' },
+  { id: 2020, label: '2020年' },
+  { id: 2021, label: '2021年' },
+  { id: 2022, label: '2022年' },
+  { id: 2023, label: '2023年' },
+  { id: 2024, label: '2024年' },
+  { id: 2025, label: '2025年' },
+  { id: 2026, label: '2026年' },
+  { id: 2027, label: '2027年' },
+  { id: 2028, label: '2028年' },
+  { id: 2029, label: '2029年' },
+  { id: 2030, label: '2030年' },
+  { id: 2031, label: '2031年' },
+  { id: 2032, label: '2032年' },
+  { id: 2033, label: '2033年' },
+  { id: 2034, label: '2034年' },
+  { id: 2035, label: '2035年' },
+  { id: 2036, label: '2036年' },
+  { id: 2037, label: '2037年' },
+  { id: 2038, label: '2038年' },
+  { id: 2039, label: '2039年' },
+  { id: 2040, label: '2040年' },
+  { id: 2041, label: '2041年' },
+  { id: 2042, label: '2042年' },
+  { id: 2043, label: '2043年' },
+  { id: 2044, label: '2044年' },
+  { id: 2045, label: '2045年' },
+  { id: 2046, label: '2046年' },
+  { id: 2047, label: '2047年' },
+  { id: 2048, label: '2048年' },
+  { id: 2049, label: '2049年' },
+  { id: 2050, label: '2050年' }
+]
+
+const months = [
+  { id: 1, label: '1月' },
+  { id: 2, label: '2月' },
+  { id: 3, label: '3月' },
+  { id: 4, label: '4月' },
+  { id: 5, label: '5月' },
+  { id: 6, label: '6月' },
+  { id: 7, label: '7月' },
+  { id: 8, label: '8月' },
+  { id: 9, label: '9月' },
+  { id: 10, label: '10月' },
+  { id: 11, label: '11月' },
+  { id: 12, label: '12月' }
+]
+</script>

package/resources/mobile-first/app/cascader-select/disabled.vue

@@ -0,0 +1,58 @@
+<template>
+  <div date-tag="tiny-demo">
+    <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
+    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+  </div>
+</template>
+
+<script>
+import { CascaderSelect, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascaderSelect: CascaderSelect,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      value: [2022, 1, 31],
+      optionList: [
+        { range: [2000, 2050], optionMethod: this.getYear },
+        { range: [1, 12], optionMethod: this.getMonth },
+        { rangeMethod: this.rangeDate, optionMethod: this.getDate }
+      ]
+    }
+  },
+  methods: {
+    getYear(year, focusYear, focusMonth, focusDate) {
+      return { id: year, label: `${year}年` }
+    },
+    getMonth(month, focusYear, focusMonth, focusDate) {
+      return { id: month, label: `${month}月` }
+    },
+    getDate(date, focusYear, focusMonth, focusDate) {
+      // 禁用日期 2022-1-30 的 date 选项
+      const disabled = focusYear === 2022 && focusMonth === 1 && date === 30
+
+      return { id: date, label: `${date}日`, disabled }
+    },
+    rangeDate(focusYear, focusMonth, focusDate) {
+      const range = [1]
+
+      if (focusMonth === 2) {
+        const isLeap = (focusYear % 4 === 0 && focusYear % 100 !== 0) || focusYear % 400 === 0
+
+        range.push(isLeap ? 29 : 28)
+      } else {
+        range.push(~[1, 3, 5, 7, 8, 10, 12].indexOf(focusMonth) ? 31 : 30)
+      }
+
+      return range
+    },
+    showCascader() {
+      this.visible = true
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/cascader-select/object-option.vue

@@ -0,0 +1,55 @@
+<template>
+  <div date-tag="tiny-demo">
+    <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
+    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+  </div>
+</template>
+
+<script>
+import { CascaderSelect, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascaderSelect: CascaderSelect,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      value: [2022, 1, 31],
+      optionList: [
+        { range: [2000, 2050], optionMethod: this.getYear },
+        { range: [1, 12], optionMethod: this.getMonth },
+        { rangeMethod: this.rangeDate, optionMethod: this.getDate }
+      ]
+    }
+  },
+  methods: {
+    getYear(year, focusYear, focusMonth, focusDate) {
+      return { id: year, label: `${year}年` }
+    },
+    getMonth(month, focusYear, focusMonth, focusDate) {
+      return { id: month, label: `${month}月` }
+    },
+    getDate(date, focusYear, focusMonth, focusDate) {
+      return { id: date, label: `${date}日` }
+    },
+    rangeDate(focusYear, focusMonth, focusDate) {
+      const range = [1]
+
+      if (focusMonth === 2) {
+        const isLeap = (focusYear % 4 === 0 && focusYear % 100 !== 0) || focusYear % 400 === 0
+
+        range.push(isLeap ? 29 : 28)
+      } else {
+        range.push(~[1, 3, 5, 7, 8, 10, 12].indexOf(focusMonth) ? 31 : 30)
+      }
+
+      return range
+    },
+    showCascader() {
+      this.visible = true
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/cascader-select/text-color-class.vue

@@ -0,0 +1,112 @@
+<template>
+  <div date-tag="tiny-demo">
+    <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
+    <tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event" :disabled="disabled" :text-color="textColorClass"></tiny-cascader-select>
+  </div>
+</template>
+
+<script>
+import { CascaderSelect, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascaderSelect: CascaderSelect,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      value: [2023, 1],
+      optionList: [years, months],
+      textColorClass: {
+        first: 'text-color-text-primary',
+        second: 'text-color-text-secondary',
+        third: 'text-color-text-placeholder',
+        disabled: 'text-color-text-disabled'
+      }
+    }
+  },
+  methods: {
+    showCascader() {
+      this.visible = true
+    },
+    disabled(value, focusYear, focusMonth) {
+      // 禁用日期 2023-2 的月份
+      if (focusYear === 2023 && value === 2) return true
+      // 禁用日期 2024 的年份
+      if (value === 2024) return true
+      // 其它选项不禁用，默认返回falsy值
+      return false
+    }
+  }
+}
+
+const years = [
+  { id: 2000, label: '2000年' },
+  { id: 2001, label: '2001年' },
+  { id: 2002, label: '2002年' },
+  { id: 2003, label: '2003年' },
+  { id: 2004, label: '2004年' },
+  { id: 2005, label: '2005年' },
+  { id: 2006, label: '2006年' },
+  { id: 2007, label: '2007年' },
+  { id: 2008, label: '2008年' },
+  { id: 2009, label: '2009年' },
+  { id: 2010, label: '2010年' },
+  { id: 2011, label: '2011年' },
+  { id: 2012, label: '2012年' },
+  { id: 2013, label: '2013年' },
+  { id: 2014, label: '2014年' },
+  { id: 2015, label: '2015年' },
+  { id: 2016, label: '2016年' },
+  { id: 2017, label: '2017年' },
+  { id: 2018, label: '2018年' },
+  { id: 2019, label: '2019年' },
+  { id: 2020, label: '2020年' },
+  { id: 2021, label: '2021年' },
+  { id: 2022, label: '2022年' },
+  { id: 2023, label: '2023年' },
+  { id: 2024, label: '2024年' },
+  { id: 2025, label: '2025年' },
+  { id: 2026, label: '2026年' },
+  { id: 2027, label: '2027年' },
+  { id: 2028, label: '2028年' },
+  { id: 2029, label: '2029年' },
+  { id: 2030, label: '2030年' },
+  { id: 2031, label: '2031年' },
+  { id: 2032, label: '2032年' },
+  { id: 2033, label: '2033年' },
+  { id: 2034, label: '2034年' },
+  { id: 2035, label: '2035年' },
+  { id: 2036, label: '2036年' },
+  { id: 2037, label: '2037年' },
+  { id: 2038, label: '2038年' },
+  { id: 2039, label: '2039年' },
+  { id: 2040, label: '2040年' },
+  { id: 2041, label: '2041年' },
+  { id: 2042, label: '2042年' },
+  { id: 2043, label: '2043年' },
+  { id: 2044, label: '2044年' },
+  { id: 2045, label: '2045年' },
+  { id: 2046, label: '2046年' },
+  { id: 2047, label: '2047年' },
+  { id: 2048, label: '2048年' },
+  { id: 2049, label: '2049年' },
+  { id: 2050, label: '2050年' }
+]
+
+const months = [
+  { id: 1, label: '1月' },
+  { id: 2, label: '2月' },
+  { id: 3, label: '3月' },
+  { id: 4, label: '4月' },
+  { id: 5, label: '5月' },
+  { id: 6, label: '6月' },
+  { id: 7, label: '7月' },
+  { id: 8, label: '8月' },
+  { id: 9, label: '9月' },
+  { id: 10, label: '10月' },
+  { id: 11, label: '11月' },
+  { id: 12, label: '12月' }
+]
+</script>

package/resources/mobile-first/app/checkbox/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <tiny-checkbox v-model="checked">
+    复选框
+  </tiny-checkbox>
+</template>
+
+<script>
+import { Checkbox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox
+  },
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/button-chek-box.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-checkbox-button">
+    <tiny-checkbox-button v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox-button>
+    <tiny-button class="btn" @click="getValue">获取文本</tiny-button>
+  </div>
+</template>
+
+<script>
+import { CheckboxButton, Modal, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxButton: CheckboxButton,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      checked: ''
+    }
+  },
+  methods: {
+    getValue() {
+      Modal.message({
+        message: 'change 事件，当前选中的值为:' + this.checked,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-checkbox-button .btn {
+  margin-left: 20px;
+}
+</style>

package/resources/mobile-first/app/checkbox/checkbox-button.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="demo-checkbox-group">
+    <tiny-checkbox-group v-model="checked" fill="#409EFF">
+      <tiny-checkbox-button label="复选框1" checked true-label="真文本" false-label="假文本"></tiny-checkbox-button>
+    </tiny-checkbox-group>
+    <tiny-button class="btn" @click="getValue">获取文本</tiny-button>
+  </div>
+</template>
+
+<script>
+import { CheckboxButton, CheckboxGroup, Modal, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxButton: CheckboxButton,
+    TinyCheckboxGroup: CheckboxGroup,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      checked: ''
+    }
+  },
+  methods: {
+    getValue() {
+      Modal.message({
+        message: 'change 事件，当前选中的值为:' + this.checked,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/checkbox-events.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-checkbox-group v-model="checked" @change="valueChange">
+      <tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
+      <tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
+    </tiny-checkbox-group>
+    {{ logger }}
+  </div>
+</template>
+
+<script>
+import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxButton: CheckboxButton,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checked: ['复选框1'],
+      logger: ''
+    }
+  },
+  methods: {
+    valueChange(val) {
+      this.logger = `当前选择：${JSON.stringify(val)}`
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/checkbox-group.vue

@@ -0,0 +1,22 @@
+<template>
+  <tiny-checkbox-group v-model="checked">
+    <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+    <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+  </tiny-checkbox-group>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checked: ['复选框1']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/checkbox-slot.vue

@@ -0,0 +1,30 @@
+<template>
+  <tiny-checkbox-group v-model="checked">
+    <tiny-checkbox label="复选框1">
+      <template #default>
+        <span style="color: red">复选框1</span>
+      </template>
+    </tiny-checkbox>
+    <tiny-checkbox label="复选框2">
+      <template #default>
+        <span style="color: blue">复选框2</span>
+      </template>
+    </tiny-checkbox>
+  </tiny-checkbox-group>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checked: ['复选框1']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/checked.vue

@@ -0,0 +1,22 @@
+<template>
+  <tiny-checkbox-group v-model="checked">
+    <tiny-checkbox label="复选框1" name="name1" checked></tiny-checkbox>
+    <tiny-checkbox label="复选框2" name="name2" disabled></tiny-checkbox>
+  </tiny-checkbox-group>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checked: ['']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/content-overflow.vue

@@ -0,0 +1,33 @@
+<template>
+  <tiny-checkbox v-model="checked" border>
+    <tiny-tooltip content="备选项1 提示文字 提示文字" effect="light" placement="top">
+      <div class="content-overflow">备选项1 提示文字 提示文字</div>
+    </tiny-tooltip>
+  </tiny-checkbox>
+</template>
+
+<script>
+import { Checkbox, Tooltip } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyTooltip: Tooltip
+  },
+  data() {
+    return {
+      checked: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content-overflow {
+  width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+</style>

package/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue

@@ -0,0 +1,68 @@
+<template>
+  <tiny-checkbox-group v-model="checked" @change="valueChange">
+    <tiny-checkbox-button v-for="item in list" :label="item.title" :key="item.id"></tiny-checkbox-button>
+  </tiny-checkbox-group>
+</template>
+
+<script>
+import { CheckboxButton, CheckboxGroup, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxButton: CheckboxButton,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      list: [],
+      checked: []
+    }
+  },
+  created() {
+    this.getData().then((data) => {
+      this.list = data
+      this.checked = data.filter((item) => item.checked).map((item) => item.title)
+    })
+  },
+  methods: {
+    valueChange(val) {
+      Modal.message({
+        message: `当前选择：${JSON.stringify(val)}`,
+        status: 'info'
+      })
+    },
+
+    /**
+     * 模拟服务请求
+     */
+    getData() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve([
+            {
+              title: '北京',
+              checked: true,
+              id: 1
+            },
+            {
+              title: '上海',
+              checked: false,
+              id: 2
+            },
+            {
+              title: '广州',
+              checked: true,
+              id: 3
+            },
+            {
+              title: '深圳',
+              checked: false,
+              id: 4
+            }
+          ])
+        }, 800)
+      })
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/group-options.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-checkbox-group v-model="checkList" type="checkbox" :options="options"></tiny-checkbox-group>
+</template>
+
+<script>
+import { CheckboxGroup, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checkList: ['A'],
+      options: [
+        { label: 'A', text: '很好', events: { click: this.handleClick } },
+        { label: 'B', text: '一般' }
+      ]
+    }
+  },
+  methods: {
+    handleClick() {
+      Modal.message({ message: 'click' })
+    }
+  }
+}
+</script>