@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo/layout/responsive-layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <tiny-layout>
+    <tiny-layout class="tiny-layout-responsive-layout">
       <tiny-row :gutter="10">
         <tiny-col :xs="4" :sm="3" :md="2" :lg="4" :xl="1">
           <div class="col">1</div>
@@ -32,26 +32,6 @@ export default {
 </script>
 
 <style scoped>
-.tiny-row {
-  margin-bottom: 20px;
-}
-
-.tiny-row .last-child {
-  margin-bottom: 0;
-}
-
-.tiny-col .col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-
-.tiny-col:nth-child(even) .col {
-  background: #73d0fc;
-}
-
 .lg {
   height: 80px;
 }

package/resources/pc/demo/loading/fullscreen.spec.ts

@@ -5,7 +5,7 @@ test('全局加载', async ({ page }) => {
   await page.goto('http://localhost:7130/pc/loading/fullscreen')
   const loadingText = page.locator('.tiny-loading__text')
   await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
-  const vLoading = page.locator('div:nth-child(4) > .tiny-loading__spinner')
+  const vLoading = page.locator('.circular')
   await expect(vLoading).toBeVisible()
 
   await page.getByRole('button', { name: '静态方法加载全屏Loading' }).click()

package/resources/pc/demo/locales/custom-service.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('locales-custom-service', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/locales/custom-service')
+  const reference = page.locator('.reference-wrapper')
+  const popper = page.locator('.tiny-locales__popper')
+
+  await expect(reference).toHaveText('zhCN')
+  await expect(popper).toBeHidden()
+  await reference.hover()
+  await page.waitForTimeout(200)
+  await expect(popper).toBeVisible()
+  await popper.getByText('enUS').click()
+  await page.waitForTimeout(200)
+  await expect(reference).toHaveText('enUS')
+  await expect(popper).toBeHidden()
+})

package/resources/pc/demo/logon-user/custom-service.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('logon-user-custom-service', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/logon-user/custom-service')
+  const user = page.locator('.tiny-logon-user')
+
+  await expect(user).toHaveText('test1')
+})

package/resources/pc/demo/logout/custom-service.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('logout-custom-service', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/logout/custom-service')
+  const button = page.locator('.tiny-logout')
+  const status = page.locator('.status')
+
+  await expect(button).toHaveText('登录')
+  await expect(status).toContainText(['false'])
+  await button.click()
+  await page.getByRole('button', { name: '确认' }).click()
+  await page.waitForTimeout(1000)
+  await expect(button).toHaveText('注销')
+  await expect(status).toContainText(['true'])
+  await button.click()
+  await page.waitForTimeout(1000)
+  await expect(button).toHaveText('登录')
+  await expect(status).toContainText(['false'])
+})

package/resources/pc/demo/logout/custom-service.vue

@@ -1,9 +1,12 @@
 <template>
-  <tiny-logout v-bind="service"></tiny-logout>
+  <div>
+    <p class="status">是否登录：{{ isLogin }}</p>
+    <tiny-logout v-bind="service"></tiny-logout>
+  </div>
 </template>
 
 <script lang="jsx">
-import { Logout } from '@opentiny/vue'
+import { Logout, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -11,20 +14,37 @@ export default {
   },
   data() {
     return {
+      isLogin: false,
       service: {
-        getLogoutUrl: this.getlogout
+        getLogoutUrl: this.getLogoutUrl,
+        isGuestUser: this.isGuestUser,
+        showLogin: this.showLogin
       }
     }
   },
   methods: {
-    getlogout() {
+    getLogoutUrl() {
       return new Promise((resolve, reject) => {
-        this.$service
-          .fetchLogoutUrl()
-          .then((url) => {
-            resolve(url)
-          })
-          .catch(reject)
+        /* 自定义注销逻辑，返回注销完成后的重定向url */
+        setTimeout(() => {
+          window.localStorage.setItem('isLogin', false)
+          const url = '/pc/logout/custom-service'
+
+          resolve(url)
+        }, 200)
+      })
+    },
+    isGuestUser() {
+      /* 此处为用户自定义获取当前登录状态，未登录为访客，返回true,已登录返回false */
+      this.isLogin = window.localStorage.getItem('isLogin') === 'true'
+
+      return !this.isLogin
+    },
+    showLogin() {
+      /* 此处为用户的自定义登录逻辑 */
+      Modal.confirm('模拟登录且登录成功').then(() => {
+        window.localStorage.setItem('isLogin', true)
+        window.location.reload()
       })
     }
   }

package/resources/pc/demo/milestone/basic-usage.spec.ts

@@ -51,7 +51,7 @@ test('基本用法', async ({ page }) => {
     }
     if (i < 4) {
       const { y, width, height } = await flags.nth(i).boundingBox()
-      await expect(y).toBeCloseTo(280.67, 2)
+      await expect(y).toBeCloseTo(290, 2)
       await expect(width).toEqual(58)
       await expect(height).toEqual(34)
       await expect(flags.nth(i)).toHaveText(flagContents[i])

package/resources/pc/demo/milestone/custom-icon-slot.vue

@@ -76,15 +76,14 @@ export default {
 
 <style>
 .custom {
-  background: rgb(245, 236, 236);
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
   position: relative;
   font-size: 12px;
   text-align: center;
-  left: calc(50% - 10px);
-  top: -1px;
+  left: 0;
+  top: -2px;
   border-radius: 50%;
   color: #000;
   cursor: pointer;

package/resources/pc/demo/milestone/flag-before.spec.ts

@@ -20,7 +20,7 @@ test('旗帜数据来源前面节点', async ({ page }) => {
     const { x, y, width, height } = await flags.nth(i).boundingBox()
 
     await expect(x).toBeCloseTo(afterX[i], 2)
-    await expect(y).toBeCloseTo(361.67, 2)
+    await expect(y).toBeCloseTo(371, 2)
     await expect(width).toEqual(58)
     await expect(height).toEqual(34)
     await expect(flags.nth(i)).toHaveText(flagAfterContents[i])
@@ -36,7 +36,7 @@ test('旗帜数据来源前面节点', async ({ page }) => {
     const { x, y, width, height } = await flags.nth(i).boundingBox()
 
     await expect(x).toBeCloseTo(BeforeX[i], 2)
-    await expect(y).toBeCloseTo(361.67, 2)
+    await expect(y).toBeCloseTo(371, 2)
     await expect(width).toEqual(58)
     await expect(height).toEqual(34)
     await expect(flags.nth(i)).toHaveText(flagBeforeContents[i])

package/resources/pc/demo/modal/value.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
+    <tiny-button @click="value1 = !value1" :reset-time="0">
+      默认插槽
+    </tiny-button>
     <tiny-modal v-model="value1" :lock-scroll="false" show-footer>
       <template #default>
-        <p class="custom-content">test</p>
+        <p class="custom-content">
+          test
+        </p>
       </template>
     </tiny-modal>
   </div>
@@ -24,8 +28,9 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
+
+<style scoped>
 .custom-content {
   color: #3168f1;
 }
-</style>
+</style>

package/resources/pc/demo/numeric/unit.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('unit', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/numeric/calculate-according-to-num-of-goods')
+
+  const numeric = page.locator('#preview .tiny-numeric')
+  const unit = numeric.locator('.tiny-numeric__unit')
+  await expect(unit).toHaveText('斤')
+});

package/resources/pc/demo/numeric/unit.vue

@@ -0,0 +1,19 @@
+<template>
+  <tiny-numeric v-model="num1" :unit="unit"></tiny-numeric>
+</template>
+
+<script>
+import { Numeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      num1: 1,
+      unit: '斤'
+    }
+  }
+}
+</script>

package/resources/pc/demo/popconfirm/basic-usage.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/basic-usage')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const confirmBtn = popConfirmPopover.getByRole('button', { name: '确定' })
+
+  await popConfirm.hover()
+  await expect(popConfirmPopover).toBeVisible()
+  await confirmBtn.click()
+  await expect(popConfirmPopover).not.toBeVisible()
+})

package/resources/pc/demo/popconfirm/basic-usage.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :content="content">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      content: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
+    }
+  }
+}
+</script>

package/resources/pc/demo/popconfirm/cancel-button.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('隐藏取消按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/cancel-button')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const cancelBtn = popConfirmPopover.getByRole('button', { name: '取消' })
+
+  await popConfirm.hover()
+  await expect(popConfirmPopover).toBeVisible()
+  await expect(cancelBtn).not.toBeVisible()
+})

package/resources/pc/demo/popconfirm/cancel-button.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :content="content" :cancel-button="false">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      content: '这是气泡提示框内容。'
+    }
+  }
+}
+</script>

package/resources/pc/demo/popconfirm/confirm-event.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('点击确定按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/confirm-event')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const confirmBtn = popConfirmPopover.getByRole('button', { name: '确定' })
+  const modal = page.locator('body > .tiny-modal').filter({ hasText: 'confirm事件触发了' })
+
+  await popConfirm.hover()
+  await expect(popConfirmPopover).toBeVisible()
+  await confirmBtn.click()
+  await expect(popConfirmPopover).not.toBeVisible()
+  await expect(modal).toBeVisible()
+})

package/resources/pc/demo/popconfirm/confirm-event.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :content="content" @confirm="handleConfirm">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      content: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
+    }
+  },
+  methods: {
+    handleConfirm() {
+      Modal.message({
+        message: 'confirm事件触发了',
+        status: 'info'
+      })
+    }
+  }
+}
+</script>

package/resources/pc/demo/popconfirm/placement.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('提示框显示位置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/placement')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+
+  await popConfirm.first().hover()
+  await expect(popConfirmPopover.first()).toBeVisible()
+  const popConfirmBox1 = await popConfirm.first().boundingBox()
+  const popoverBox1 = await popConfirmPopover.first().boundingBox()
+  expect(popConfirmBox1?.y).toBeLessThan(popoverBox1?.y || 0)
+
+  await popConfirm.nth(1).hover()
+  await expect(popConfirmPopover.nth(1)).toBeVisible()
+  const popConfirmBox2 = await popConfirm.nth(1).boundingBox()
+  const popoverBox2 = await popConfirmPopover.nth(1).boundingBox()
+  expect(popConfirmBox2?.x).toBeLessThan(popoverBox2?.x || 0)
+})

package/resources/pc/demo/popconfirm/placement.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :content="content" placement="bottom">
+      <template #reference>
+        <tiny-button>显示在下方</tiny-button>
+      </template>
+    </tiny-popconfirm>
+    <tiny-popconfirm :title="title" :content="content" placement="right" class="ml-8">
+      <template #reference>
+        <tiny-button>显示在右边</tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      content: '这是气泡提示框内容。'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ml-8 {
+  margin-left: 8px;
+}
+</style>

package/resources/pc/demo/popconfirm/popper-class.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义类名', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/popper-class')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const confirmBtn = popConfirmPopover.getByRole('button', { name: '确定' })
+
+  await popConfirm.hover()
+  await expect(popConfirmPopover).toBeVisible()
+  await expect(popConfirmPopover).toHaveClass(/custom-class/)
+  await confirmBtn.click()
+  await expect(popConfirmPopover).not.toBeVisible()
+})

package/resources/pc/demo/popconfirm/popper-class.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :content="content" popper-class="custom-class">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      content: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
+    }
+  }
+}
+</script>
+
+<style>
+.tiny-popover.tiny-popper.custom-class {
+  background-color: #ccc;
+}
+</style>

package/resources/pc/demo/popconfirm/slot-footer.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义底部按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/slot-footer')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const closeBtn = popConfirmPopover.getByRole('button', { name: '自定义关闭按钮' })
+
+  await popConfirm.hover()
+  await expect(popConfirmPopover).toBeVisible()
+  await expect(closeBtn).toBeVisible()
+  await closeBtn.click()
+  await expect(popConfirmPopover).not.toBeVisible()
+})

package/resources/pc/demo/popconfirm/slot-footer.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :content="content" ref="popconfirm">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+      <template #footer>
+        <tiny-button @click="handleClose">
+          自定义关闭按钮
+        </tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      content: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$refs.popconfirm.hide()
+    }
+  }
+}
+</script>

package/resources/pc/demo/popconfirm/trigger.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('触发方式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/trigger')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+
+  await popConfirm.first().hover()
+  await expect(popConfirmPopover.first()).toBeVisible()
+
+  await popConfirm.nth(1).hover()
+  await expect(popConfirmPopover.nth(1)).not.toBeVisible()
+  await popConfirm.nth(1).click()
+  await expect(popConfirmPopover.nth(1)).toBeVisible()
+})

package/resources/pc/demo/popconfirm/trigger.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" type="info" trigger="hover">
+      <template #reference>
+        <tiny-button>鼠标悬停显示</tiny-button>
+      </template>
+    </tiny-popconfirm>
+    <tiny-popconfirm :title="title" type="info" trigger="click">
+      <template #reference>
+        <tiny-button>点击显示</tiny-button>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { Popconfirm, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm: Popconfirm,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      title: '确定要删除该安全组规则吗?'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-popconfirm + .tiny-popconfirm {
+  margin-left: 8px;
+}
+</style>

package/resources/pc/demo/popconfirm/type.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('图标类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/popconfirm/type')
+
+  const preview = page.locator('#preview')
+  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const getIcon = parent => parent.locator('svg.tiny-svg path').first()
+
+  await popConfirm.first().click()
+  await expect(popConfirmPopover.first()).toBeVisible()
+  await expect(getIcon(popConfirmPopover.first())).toBeVisible()
+  await popConfirm.nth(1).click()
+  await expect(popConfirmPopover.nth(1)).toBeVisible()
+  await expect(getIcon(popConfirmPopover.nth(1))).toBeVisible()
+  await popConfirm.nth(2).click()
+  await expect(popConfirmPopover.nth(2)).toBeVisible()
+  await expect(getIcon(popConfirmPopover.nth(2))).toBeVisible()
+  await popConfirm.nth(3).click()
+  await expect(popConfirmPopover.nth(3)).toBeVisible()
+  await expect(getIcon(popConfirmPopover.nth(3))).toBeVisible()
+})