@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/disabled.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <br />
+    <div>场景 1：下拉禁用</div>
+    <br />
+    <tiny-select v-model="value1" disabled autocomplete>
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：多选 + 下拉某项禁用</div>
+    <br />
+    <tiny-select v-model="value2" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：单选 + 下拉某项禁用</div>
+    <br />
+    <tiny-select v-model="value3">
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：多选 + 禁用项默认选中</div>
+    <br />
+    <tiny-select v-model="value4" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：多选 hover-expand 模式下禁用</div>
+    <br />
+    <tiny-select
+      v-model="value5"
+      placeholder="请选择"
+      multiple
+      disabled
+      hover-expand
+      disabled-tooltip-content="我是自定义内容"
+    >
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆重庆超长超长超长超长超长超长超长超长超长' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      options2: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海', disabled: true },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆', disabled: true },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: '',
+      value2: ['选项 2'],
+      value3: '',
+      value4: ['选项 2', '选项 3'],
+      value5: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/events-composition-api.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <p>单选</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      clearable
+      @change="change"
+      @blur="blur"
+      @focus="focus"
+      @visible-change="visibleChange"
+      @clear="clear"
+      @dropdown-click="dropdownClick"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+
+    <p>多选</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      multiple
+      clearable
+      @change="change"
+      @blur="blur"
+      @focus="focus"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag"
+      @dropdown-click="dropdownClick"
+    >
+      <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 { TinySelectWrapper as TinySelect, TinyOption, TinyModal } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value1 = ref('')
+const value2 = ref([])
+
+const change = () => {
+  TinyModal.message({
+    message: '触发 change 事件',
+    status: 'info'
+  })
+}
+
+const clear = () => {
+  TinyModal.message({
+    message: '触发 clear 事件',
+    status: 'info'
+  })
+}
+
+const focus = () => {
+  TinyModal.message({
+    message: '触发 focus 事件',
+    status: 'info'
+  })
+}
+
+const blur = () => {
+  TinyModal.message({
+    message: '触发 blur 事件',
+    status: 'info'
+  })
+}
+
+const removeTag = () => {
+  TinyModal.message({
+    message: '触发 remove-tag 事件',
+    status: 'info'
+  })
+}
+
+const visibleChange = () => {
+  TinyModal.message({
+    message: '触发 visible-change 事件',
+    status: 'info'
+  })
+}
+
+const dropdownClick = () => {
+  TinyModal.message({
+    message: '触发 dropdown-click 事件',
+    status: 'info'
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/events.spec.ts

@@ -0,0 +1,72 @@
+import { test, expect } from '@playwright/test'
+
+test('单选事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#events')
+  const wrap = page.locator('#events')
+  const select = wrap.locator('.tiny-select').first()
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const model = page.locator('.tiny-modal')
+
+  await input.click()
+  await page.waitForTimeout(500)
+  await expect(model.filter({ hasText: '触发 focus 事件' })).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
+
+  await option.first().click()
+  await expect(input).toHaveValue('北京')
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(2)
+
+  await page.waitForTimeout(500)
+  await wrap.click()
+  await expect(model.filter({ hasText: '触发 blur 事件' })).toHaveCount(1)
+
+  await page.waitForTimeout(200)
+  await input.hover()
+  await page.getByLabel('示例', { exact: true }).getByRole('img').first().click()
+  await page.waitForTimeout(500)
+  await expect(input).toHaveValue('')
+  await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
+})
+
+test('多选事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#events')
+  const wrap = page.locator('#events')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const tag = wrap.locator('.tiny-tag')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const model = page.locator('.tiny-modal')
+
+  await page.waitForTimeout(500)
+  await select.click()
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
+
+  await option.nth(1).click()
+  await expect(tag).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
+
+  await option.nth(0).click()
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(2)
+  await expect(tag).toHaveCount(5)
+
+  await page.waitForTimeout(500)
+  await tag.first().locator('.tiny-tag__close').click()
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 remove-tag 事件' })).toHaveCount(1)
+  await expect(tag).toHaveCount(4)
+
+  await wrap.click()
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
+
+  await page.waitForTimeout(200)
+  await select.hover()
+  await page.locator('.is-show-close > div > .tiny-input__suffix > .tiny-input__suffix-inner > svg').first().click()
+
+  await expect(tag).toHaveCount(0)
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
+})

package/demos/pc/app/select-wrapper/events.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div>单选</div>
+    <br />
+    <tiny-select
+      v-model="value1"
+      clearable
+      @change="change"
+      @blur="blur"
+      @focus="focus"
+      @visible-change="visibleChange"
+      @clear="clear"
+      @dropdown-click="dropdownClick"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>多选</div>
+    <br />
+    <tiny-select
+      v-model="value2"
+      multiple
+      clearable
+      @change="change"
+      @blur="blur"
+      @focus="focus"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag"
+      @dropdown-click="dropdownClick"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: '',
+      value2: []
+    }
+  },
+  methods: {
+    change() {
+      TinyModal.message({
+        message: '触发 change 事件',
+        status: 'info'
+      })
+    },
+    clear() {
+      TinyModal.message({
+        message: '触发 clear 事件',
+        status: 'info'
+      })
+    },
+    focus() {
+      TinyModal.message({
+        message: '触发 focus 事件'
+      })
+    },
+    blur() {
+      TinyModal.message({
+        message: '触发 blur 事件',
+        status: 'info'
+      })
+    },
+    removeTag() {
+      TinyModal.message({
+        message: '触发 remove-tag 事件',
+        status: 'info'
+      })
+    },
+    visibleChange() {
+      TinyModal.message({
+        message: '触发 visible-change 事件',
+        status: 'info'
+      })
+    },
+    dropdownClick() {
+      TinyModal.message({
+        message: '触发 dropdown-click 事件',
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/extra-query-params-composition-api.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="demo-select">
+    <div>父选项：</div>
+    <br />
+    <tiny-select
+      ref="select3"
+      v-model="radioValue1"
+      :init-query="initQuery1"
+      placeholder="请输入关键词"
+      clearable
+      :remote-method="remoteMethod1"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="true"
+      text-field="label"
+      render-type="grid"
+      :grid-op="gridOpRadio1"
+      @change="change"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>子选项：</div>
+    <br />
+    <tiny-select
+      ref="select4"
+      v-model="radioValue2"
+      :init-query="initQuery2"
+      placeholder="请输入关键词"
+      clearable
+      :remote-method="remoteMethod2"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      :extra-query-params="extraQueryParams"
+      value-field="id"
+      :multiple="true"
+      text-field="label"
+      render-type="grid"
+      :grid-op="gridOpRadio2"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const parents = ref([])
+const children = ref([])
+const radioValue1 = ref(['001'])
+const radioValue2 = ref(['001'])
+const extraQueryParams = ref(null)
+
+const gridOpRadio1 = reactive({
+  data: [],
+  height: 300,
+  optimization: {
+    animat: true,
+    delayHover: 250,
+    scrollX: { gt: 20 },
+    scrollY: { gt: 20 }
+  },
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'label', title: '父级' }
+  ]
+})
+
+const gridOpRadio2 = reactive({
+  data: [],
+  height: 300,
+  optimization: {
+    animat: true,
+    delayHover: 250,
+    scrollX: { gt: 20 },
+    scrollY: { gt: 20 }
+  },
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'label', title: '子级' }
+  ]
+})
+
+parents.value = [
+  { id: '001', label: '指南' },
+  { id: '002', label: '组件' }
+]
+
+children.value = [
+  { id: '001', label: '安装', parent: '001' },
+  { id: '002', label: '开发', parent: '001' },
+  { id: '004', label: '框架风格', parent: '002' },
+  { id: '005', label: '表单组件', parent: '002' },
+  { id: '006', label: '数据组件', parent: '002' },
+  { id: '007', label: '提示组件', parent: '002' },
+  { id: '008', label: '导航组件', parent: '002' },
+  { id: '009', label: '其他组件', parent: '002' }
+]
+
+extraQueryParams.value = radioValue1.value
+
+const initQuery1 = () => {
+  return new Promise((resolve) => {
+    resolve(parents)
+  })
+}
+
+const remoteMethod1 = (value) => {
+  let res = parents.value.filter((parent) => ~parent.label.indexOf(value || ''))
+
+  return new Promise((resolve) => {
+    resolve(res)
+  })
+}
+
+// init 表示是否是初始化（mounted 里面执行为初始化）
+const initQuery2 = (value, extraQueryParams, init) => {
+  const res = children.value.filter((child) => extraQueryParams.includes(child.parent))
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(res)
+    }, 1000)
+  })
+}
+
+const remoteMethod2 = (value, extraQueryParams) => {
+  let child = children.value.filter((child) => extraQueryParams.includes(child.parent))
+  const res = child.filter((child) => ~child.label.indexOf(value || ''))
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(res)
+    }, 1000)
+  })
+}
+
+const change = (radioValue1) => {
+  extraQueryParams.value = radioValue1
+
+  radioValue2.value = radioValue2.value.filter((value2) => {
+    const selected = children.value.find((child) => child.id === value2)
+
+    return radioValue1.includes(selected.parent)
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.demo-select .tiny-select {
+  width: 270px;
+}
+</style>