@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/mobile/app/input/prefix-suffix.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input placeholder="请输入内容" v-model="input">
-      <template #prefix>
-        <div style="color: red">Http</div>
-      </template>
-      <template #suffix>
-        <div style="color: red">com</div>
-      </template>
-    </tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-.tiny-mobile-input-prefix .tiny-mobile-input__inner {
-  padding-left: 45px;
-  padding-right: 28px;
-}
-</style>

package/demos/mobile/app/input/props-step.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="number" step="3" placeholder="当前步长为3"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: '测试长度'
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/props.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" name="name" label="label" readonly></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: '测试长度'
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/slot-content.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="textarea">
-      <template #content> 自定义头部内容 </template>
-    </tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/slots-append-prepend.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input placeholder="请输入内容" v-model="input">
-      <template #prepend>Http://</template>
-    </tiny-input>
-    <br /><br />
-    <tiny-input placeholder="请输入内容" v-model="input">
-      <template #append>.com</template>
-    </tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/suffix-icon.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" placeholder="请输入内容" :suffix-icon="IconDialog"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-import { iconDialog } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: '',
-      IconDialog: iconDialog()
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/type-be-form-tips.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input
-      v-model="input"
-      mobile-tips="让你输入一段文字"
-      is-select
-      :select-menu="menus"
-      placeholder="请输入内容"
-      type="form"
-      mobileTips="曾经有一段真挚的感情"
-    ></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: 'hello mobile',
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/type-be-form.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" placeholder="请输入内容" type="form"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: 'hello mobile',
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/pc/app/file-upload/accept-file-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" accept=".doc,.docx" :file-list="fileList2">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-
-const action = ref('http://localhost:3000/api/upload')
-const fileList = ref([])
-const fileList2 = ref([])
-</script>

package/demos/pc/app/file-upload/accept-file.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" accept=".doc,.docx" :file-list="fileList2">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [],
-      fileList2: []
-    }
-  }
-}
-</script>

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

@@ -1,20 +0,0 @@
-<template>
-  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" disabled>
-    <template #trigger>
-      <tiny-button type="primary">选取文件</tiny-button>
-    </template>
-  </tiny-file-upload>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-
-const action = ref('http://localhost:3000/api/upload')
-const fileList = ref([
-  {
-    name: 'test1',
-    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
-  }
-])
-</script>

package/demos/pc/app/file-upload/dynamic-disable.vue

@@ -1,29 +0,0 @@
-<template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" disabled>
-    <template #trigger>
-      <tiny-button type="primary">选取文件</tiny-button>
-    </template>
-  </tiny-file-upload>
-</template>
-
-<script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/file-upload/jalor-request-composition-api.vue

@@ -1,21 +0,0 @@
-<template>
-  <tiny-file-upload ref="uploadRef" :data="requestData" :before-upload="beforeUpload">
-    <template #trigger>
-      <tiny-button type="primary">选取文件</tiny-button>
-    </template>
-  </tiny-file-upload>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
-
-const requestData = ref({
-  id: 123
-})
-
-function beforeUpload() {
-  Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
-  return true
-}
-</script>

package/demos/pc/app/file-upload/jalor-request.vue

@@ -1,31 +0,0 @@
-<template>
-  <tiny-file-upload ref="upload" :data="requestData" :before-upload="beforeUpload">
-    <template #trigger>
-      <tiny-button type="primary">选取文件</tiny-button>
-    </template>
-  </tiny-file-upload>
-</template>
-
-<script lang="jsx">
-import { FileUpload, Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      requestData: {
-        id: 123
-      }
-    }
-  },
-  methods: {
-    beforeUpload() {
-      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
-      return true
-    }
-  }
-}
-</script>

package/demos/pc/app/file-upload/upload-file-filters-composition-api.vue

@@ -1,34 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" :filters="filters">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-
-const action = ref('http://localhost:3000/api/upload')
-const filters = ref({
-  max_file_size: '1GB', // 文件大小
-  mime_types: [
-    {
-      // 文件格式，Title可选，为了便于分类。
-      title: 'Image files',
-      extensions: 'jpg,gif,png'
-    },
-    {
-      title: 'Zip files',
-      extensions: 'zip,rar'
-    },
-    {
-      title: 'Doc files',
-      extensions: 'doc,docx,xls,xlsx'
-    },
-    {
-      title: 'Video files',
-      extensions: 'mkv,mov,mp4,avi'
-    }
-  ]
-})
-</script>

package/demos/pc/app/file-upload/upload-file-filters.vue

@@ -1,43 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" :filters="filters">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      filters: {
-        max_file_size: '1GB', // 文件大小
-        mime_types: [
-          {
-            // 文件格式，Title可选，为了便于分类。
-            title: 'Image files',
-            extensions: 'jpg,gif,png'
-          },
-          {
-            title: 'Zip files',
-            extensions: 'zip,rar'
-          },
-          {
-            title: 'Doc files',
-            extensions: 'doc,docx,xls,xlsx'
-          },
-          {
-            title: 'Video files',
-            extensions: 'mkv,mov,mp4,avi'
-          }
-        ]
-      }
-    }
-  }
-}
-</script>

package/demos/pc/app/filter-panel/clearable-composition-api.vue

@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" clearable :value="value" @handle-clear="handleClear">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput
-} from '@opentiny/vue'
-
-const inputVal = ref('')
-const radioVal = ref('')
-const value = computed(() => {
-  return radioVal.value + inputVal.value
-})
-
-function handleClear() {
-  radioVal.value = ''
-  inputVal.value = ''
-}
-</script>

package/demos/pc/app/filter-panel/clearable.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('点击按钮清空', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/filter-panel/clearable')
-
-  const panel = page.locator('.tiny-filter-panel')
-  const button = panel.locator('.tiny-filter-box')
-  const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
-  const clear = panel.locator('.filter-icon-close')
-
-  await button.click()
-  await expect(popPanel).toBeVisible()
-  await page.getByRole('radio', { name: '等于' }).click()
-  await expect(button).toHaveText('物品数量等于')
-  await clear.click()
-  await expect(button).toHaveText('物品数量')
-})

package/demos/pc/app/filter-panel/clearable.vue

@@ -1,42 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" clearable :value="value" @handle-clear="handleClear">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script>
-import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      inputVal: '',
-      radioVal: ''
-    }
-  },
-  computed: {
-    value() {
-      return this.radioVal + this.inputVal
-    }
-  },
-  methods: {
-    handleClear() {
-      this.radioVal = ''
-      this.inputVal = ''
-    }
-  }
-}
-</script>

package/demos/pc/app/filter-panel/disabled-composition-api.vue

@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" disabled :value="value">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput
-} from '@opentiny/vue'
-
-const inputVal = ref('')
-const radioVal = ref('')
-const value = computed(() => {
-  return radioVal.value + inputVal.value
-})
-</script>

package/demos/pc/app/filter-panel/disabled.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('禁用状态', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/filter-panel/disabled')
-
-  const panel = page.locator('.tiny-filter-panel')
-  const button = panel.locator('.tiny-filter-box.disabled')
-
-  await expect(button).toHaveCount(1)
-  await expect(button).toHaveCSS('cursor', 'not-allowed')
-})