@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/select/remote-search-allow-copy.vue

@@ -1,116 +0,0 @@
-<template>
-  <tiny-select
-    v-model="value"
-    filterable
-    remote
-    reserve-keyword
-    placeholder="请输入关键词"
-    :remote-method="remoteMethod"
-    :loading="loading"
-    loading-text="Loading..."
-    allow-copy
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-  <p class="font-style">复制到此处：</p>
-  <tiny-input class="custom" type="text" />
-</template>
-
-<script lang="jsx">
-import { Select, Option, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      loading: false,
-      value: '',
-      options: [],
-      list: [],
-      states: [
-        'Alabama',
-        'Alaska',
-        'Arizona',
-        'Arkansas',
-        'California',
-        'Colorado',
-        'Connecticut',
-        'Delaware',
-        'Florida',
-        'Georgia',
-        'Hawaii',
-        'Idaho',
-        'Illinois',
-        'Indiana',
-        'Iowa',
-        'Kansas',
-        'Kentucky',
-        'Louisiana',
-        'Maine',
-        'Maryland',
-        'Massachusetts',
-        'Michigan',
-        'Minnesota',
-        'Mississippi',
-        'Missouri',
-        'Montana',
-        'Nebraska',
-        'Nevada',
-        'New Hampshire',
-        'New Jersey',
-        'New Mexico',
-        'New York',
-        'North Carolina',
-        'North Dakota',
-        'Ohio',
-        'Oklahoma',
-        'Oregon',
-        'Pennsylvania',
-        'Rhode Island',
-        'South Carolina',
-        'South Dakota',
-        'Tennessee',
-        'Texas',
-        'Utah',
-        'Vermont',
-        'Virginia',
-        'Washington',
-        'West Virginia',
-        'Wisconsin',
-        'Wyoming'
-      ]
-    }
-  },
-  mounted() {
-    this.list = this.states.map((item) => {
-      return { value: item, label: item }
-    })
-  },
-  methods: {
-    remoteMethod(query) {
-      if (query !== undefined) {
-        this.loading = true
-        setTimeout(() => {
-          this.loading = false
-          this.options = this.list.filter((item) => {
-            return item.label.toLowerCase().includes(query.toLowerCase())
-          })
-        }, 200)
-      } else {
-        this.options = []
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.font-style {
-  font-size: 14px;
-  margin: 8px;
-}
-</style>

package/demos/pc/app/select/set-input-value-composition-api.vue

@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="click" style="margin-bottom: 15px"> 设置value值 </tiny-button>
-    <tiny-select v-model="value" ref="dropRef" placeholder="请选择" multiple>
-      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-    </tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-
-const click = () => {
-  value.value = ['选项4']
-}
-</script>

package/demos/pc/app/select/set-input-value.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('set-input-value', async ({ page }) => {
-  await page.goto('select#set-input-value')
-  const tags = page.locator('#preview .tiny-select .tiny-tag')
-
-  await page.getByRole('button', { name: '设置value值' }).click()
-  await page.waitForTimeout(500)
-  await expect((await tags.all()).length).toEqual(1)
-  await expect(tags.first()).toHaveText(/龙须面/)
-})

package/demos/pc/app/select/set-input-value.vue

@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="click" style="margin-bottom: 15px"> 设置value值 </tiny-button>
-    <tiny-select v-model="value" ref="drop" placeholder="请选择" multiple>
-      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-    </tiny-select>
-  </div>
-</template>
-
-<script>
-import { Select, Option, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
-      ],
-      value: ''
-    }
-  },
-  methods: {
-    click() {
-      this.value = ['选项4']
-    }
-  }
-}
-</script>

package/demos/pc/app/select/size-medium-composition-api.vue

@@ -1,17 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" size="medium" multiple :options="options"></tiny-select>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-</script>

package/demos/pc/app/select/size-medium.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="fontStyle">medium</div>
-  <tiny-select v-model="value" placeholder="请选择" size="medium" multiple :options="options"></tiny-select>
-  <div class="fontStyle">small</div>
-  <tiny-select v-model="value1" placeholder="请选择" size="small" multiple>
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-  <div class="fontStyle">mini</div>
-  <tiny-select v-model="value2" placeholder="请选择" size="mini" multiple>
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script>
-import { Option, Select } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option
-  },
-  data() {
-    return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
-      ],
-      value: '',
-      value1: '',
-      value2: ''
-    }
-  }
-}
-</script>
-
-<style>
-.fontStyle {
-  font-size: 14px;
-  margin: 8px;
-}
-</style>

package/demos/pc/app/select/size-small-composition-api.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" size="small" multiple>
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-</script>

package/demos/pc/app/select/tag-copy-all-composition-api.vue

@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <tiny-select ref="selectRef" v-model="value" placeholder="请选择" multiple copyable>
-      <tiny-option
-        v-for="item in options"
-        v-show="!item.filter"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
-      </tiny-option>
-    </tiny-select>
-    <p class="font-style">复制到此处：</p>
-    <input class="copy-value" type="text" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref(['选项1'])
-const selectRef = ref()
-
-const filter = (value) => {
-  const select = selectRef.value
-
-  if (value) {
-    select.state.cachedOptions.forEach((item) => {
-      item.state.visible = item.label.includes(value)
-    })
-  } else {
-    select.state.cachedOptions.forEach((item) => {
-      item.state.visible = true
-    })
-  }
-}
-</script>
-
-<style scoped>
-.font-style {
-  font-size: 14px;
-  margin: 8px;
-}
-</style>

package/demos/pc/app/select/tag-copy-all.spec.ts

@@ -1,12 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('tag-copy-all', async ({ page }) => {
-  await page.goto('select#tag-copy-all')
-  const select = page.locator('#preview .tiny-select')
-
-  await select.hover()
-  await page.locator('.tiny-select__copy > .tiny-svg > .st0').click()
-  const copyValueInput = page.locator('.copy-value')
-  await copyValueInput.press('Control+V')
-  await expect(copyValueInput).toHaveValue('黄金糕')
-})

package/demos/pc/app/select/tag-copy-all.vue

@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <tiny-select ref="select" v-model="value" placeholder="请选择" multiple copyable>
-      <tiny-option
-        v-for="item in options"
-        v-show="!item.filter"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
-      </tiny-option>
-    </tiny-select>
-    <p class="font-style">复制到此处：</p>
-    <tiny-input class="copy-value" type="text" />
-  </div>
-</template>
-
-<script lang="jsx">
-import { Select, Option, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
-      ],
-      value: ['选项1']
-    }
-  },
-  methods: {
-    filter(value) {
-      const select = this.$refs.select
-
-      if (value) {
-        select.state.cachedOptions.forEach((item) => {
-          item.state.visible = item.label.includes(value)
-        })
-      } else {
-        select.state.cachedOptions.forEach((item) => {
-          item.state.visible = true
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.font-style {
-  font-size: 14px;
-  margin: 8px;
-}
-</style>

package/demos/pc/app/slider/slider-event-change-composition-api.vue

@@ -1,18 +0,0 @@
-<template>
-  <tiny-slider v-model="value2" @change="change"></tiny-slider>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Slider as TinySlider, Notify } from '@opentiny/vue'
-
-const value2 = ref(40)
-
-function change(val) {
-  Notify({
-    title: '触发change事件',
-    message: `改变值为${val}`,
-    offset: 100
-  })
-}
-</script>

package/demos/pc/app/slider/slider-event-change.spec.ts

@@ -1,19 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('change事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#slider-event-change')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
-  const sliderBlock = slider.locator('div').nth(1)
-  // 获取进度条的宽度
-  const { width: sliderWidth } = await slider.boundingBox()
-  // 获取当前滑块位置
-  const { x, y } = await sliderBlock.boundingBox()
-  await sliderBlock.hover()
-  await page.mouse.down()
-  // 滑块向右移动百分之二十
-  await page.mouse.move(sliderWidth * 0.2 + x, y)
-  await expect(page.locator('div').filter({ hasText: '触发change事件改变值为59' }).first()).toBeVisible()
-  await page.waitForTimeout(300)
-})

package/demos/pc/app/slider/slider-event-change.vue

@@ -1,27 +0,0 @@
-<template>
-  <tiny-slider v-model="value2" @change="change"></tiny-slider>
-</template>
-
-<script>
-import { Slider, Notify } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlider: Slider
-  },
-  data() {
-    return {
-      value2: 40
-    }
-  },
-  methods: {
-    change(val) {
-      Notify({
-        title: '触发change事件',
-        message: `改变值为${val}`,
-        offset: 100
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/slider/slider-event-start-composition-api.vue

@@ -1,18 +0,0 @@
-<template>
-  <tiny-slider v-model="value2" @start="start"></tiny-slider>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Slider as TinySlider, Notify } from '@opentiny/vue'
-
-const value2 = ref(40)
-
-function start(val) {
-  Notify({
-    title: '触发开始滑动事件',
-    message: `${JSON.stringify(val)}`,
-    offset: 100
-  })
-}
-</script>

package/demos/pc/app/slider/slider-event-start.spec.ts

@@ -1,20 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('start 滑块开始滑动事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#slider-event-start')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
-  const sliderBlock = slider.locator('div').nth(1)
-  // 获取进度条的宽度
-  const { width: sliderWidth } = await slider.boundingBox()
-  const { x, y } = await sliderBlock.boundingBox()
-
-  await sliderBlock.hover()
-  await page.mouse.down()
-  await page.mouse.move(sliderWidth * 0.4 + x, y)
-  await page.mouse.up()
-  //   弹出框事件
-  await expect(page.locator('div').filter({ hasText: '触发开始滑动事件{"isTrusted":false}' }).first()).toBeVisible()
-  await page.waitForTimeout(2000)
-})

package/demos/pc/app/slider/slider-event-start.vue

@@ -1,27 +0,0 @@
-<template>
-  <tiny-slider v-model="value2" @start="start"></tiny-slider>
-</template>
-
-<script>
-import { Slider, Notify } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlider: Slider
-  },
-  data() {
-    return {
-      value2: 40
-    }
-  },
-  methods: {
-    start(val) {
-      Notify({
-        title: '触发开始滑动事件',
-        message: `${JSON.stringify(val)}`,
-        offset: 100
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/slider/slider-event-stop-composition-api.vue

@@ -1,18 +0,0 @@
-<template>
-  <tiny-slider v-model="value2" @stop="stop"></tiny-slider>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Slider as TinySlider, Notify } from '@opentiny/vue'
-
-const value2 = ref(40)
-
-function stop(val) {
-  Notify({
-    title: '触发停止滑动事件',
-    message: `停止后值为${val}`,
-    offset: 150
-  })
-}
-</script>

package/demos/pc/app/slider/slider-event-stop.spec.ts

@@ -1,19 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('stop 滑块停止滑动事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#slider-event-stop')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
-  const sliderBlock = slider.locator('div').nth(1)
-  // 获取进度条的宽度
-  const { width: sliderWidth } = await slider.boundingBox()
-  const { x, y } = await sliderBlock.boundingBox()
-
-  await sliderBlock.hover()
-  await page.mouse.down()
-  await page.mouse.move(sliderWidth * 0.4 + x, y)
-  await page.mouse.up()
-  //   弹出框事件
-  await expect(page.locator('div').filter({ hasText: '触发停止滑动事件停止后值为79' }).first()).toBeVisible()
-})

package/demos/pc/app/slider/slider-event-stop.vue

@@ -1,27 +0,0 @@
-<template>
-  <tiny-slider v-model="value2" @stop="stop"></tiny-slider>
-</template>
-
-<script>
-import { Slider, Notify } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlider: Slider
-  },
-  data() {
-    return {
-      value2: 40
-    }
-  },
-  methods: {
-    stop(val) {
-      Notify({
-        title: '触发停止滑动事件',
-        message: `停止后值为${val}`,
-        offset: 150
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/tooltip/dynamic-disable-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-tooltip effect="light" :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom">
-    <button class="tiny-button tiny-button--primary" @click="disabled = !disabled">
-      点击{{ disabled ? '开启' : '关闭' }} tooltip 功能
-    </button>
-  </tiny-tooltip>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
-
-const disabled = ref(false)
-</script>

package/demos/pc/app/tooltip/dynamic-disable.spec.js

@@ -1,23 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试动态禁用', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#dynamic-disable')
-
-  const button = page.getByRole('button', { name: '点击关闭 tooltip 功能' })
-  const button1 = page.getByRole('button', { name: '点击开启 tooltip 功能' })
-  const tooltip = page.getByRole('tooltip', { name: '点击关闭 tooltip 功能', includeHidden: true })
-
-  // 不禁用时，悬浮
-  await button.hover()
-  await expect(tooltip).toBeVisible()
-  await page.waitForTimeout(1000)
-
-  // 禁用后悬浮
-  await button.click()
-  await page.mouse.move(0, 0)
-  await button1.hover()
-
-  await expect(tooltip).toBeHidden()
-  await expect(tooltip).toHaveCSS('display', 'none')
-})

package/demos/pc/app/tooltip/dynamic-disable.vue

@@ -1,22 +0,0 @@
-<template>
-  <tiny-tooltip effect="light" :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom">
-    <button class="tiny-button tiny-button--primary" @click="disabled = !disabled">
-      点击{{ disabled ? '开启' : '关闭' }} tooltip 功能
-    </button>
-  </tiny-tooltip>
-</template>
-
-<script lang="jsx">
-import { Tooltip } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTooltip: Tooltip
-  },
-  data() {
-    return {
-      disabled: false
-    }
-  }
-}
-</script>