@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo/progress/progress-width.spec.ts

@@ -1,14 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('宽度', () => {
-  test('宽度是否正常显示', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/progress-width')
+test('宽度是否正常显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/progress/progress-width')
 
-    const progress1 = page.getByRole('progressbar').nth(0).locator('.tiny-progress-bar__outer')
-    const progress2 = page.getByRole('progressbar').nth(1).locator('.tiny-progress-bar__outer')
+  const progress1 = page.getByRole('progressbar').nth(0).locator('.tiny-progress-bar__outer')
+  const progress2 = page.getByRole('progressbar').nth(1).locator('.tiny-progress-bar__outer')
 
-    await expect(progress1).toHaveCSS('height', '4px')
-    await expect(progress2).toHaveCSS('height', '12px')
-  })
+  await expect(progress1).toHaveCSS('height', '4px')
+  await expect(progress2).toHaveCSS('height', '12px')
 })

package/resources/pc/demo/progress/text-inside-or-no-text.spec.ts

@@ -1,16 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('文字显示和隐藏', () => {
-  test('显示 隐藏文字', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-    await page.goto('http://127.0.0.1:7130/pc/progress/text-inside-or-no-text')
+test('显示或隐藏文字', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/progress/text-inside-or-no-text')
 
-    const text = page.getByText('50%')
+  const text = page.getByText('50%')
 
-    await expect(text).toBeVisible()
-    await page.getByRole('button', { name: '隐藏文字' }).click()
-    await expect(text).not.toBeVisible()
-    await page.getByRole('button', { name: '显示文字' }).click()
-    await expect(text).toBeVisible()
-  })
+  await expect(text).toBeVisible()
+  await page.getByRole('button', { name: '隐藏文字' }).click()
+  await expect(text).not.toBeVisible()
+  await page.getByRole('button', { name: '显示文字' }).click()
+  await expect(text).toBeVisible()
 })

package/resources/pc/demo/roles/fetch-role.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('fetch-role', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/roles/fetch-role')
+  const reference = page.locator('.tiny-roles .tiny-popover__reference')
+  const list = page.locator('.tiny-roles__selector')
+
+  await expect(list).toBeHidden()
+  await reference.hover()
+  await page.waitForTimeout(500)
+  await expect(list).toBeVisible()
+  await page.getByRole('listitem').filter({ hasText: 'Guest' }).click()
+  await page.waitForTimeout(500)
+  await expect(page.getByText('当前选中的角色id是1003')).toBeVisible()
+})

package/resources/pc/demo/roles/fetch-role.vue

@@ -1,9 +1,9 @@
 <template>
-  <tiny-roles :fetch-role="fetchRole"></tiny-roles>
+  <tiny-roles v-bind="services" @change="changeRole"></tiny-roles>
 </template>
 
 <script lang="jsx">
-import { Roles } from '@opentiny/vue'
+import { Roles, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -11,12 +11,166 @@ export default {
   },
   data() {
     return {
-      fetchRole: this.handleFetchRole
+      roleId: '',
+      env: {},
+      services: {
+        fetchRole: this.handleFetchRole,
+        getEnvInfoSync: this.getEnvInfoSync,
+        getCustomized: this.getCustomized
+      }
     }
   },
   methods: {
     handleFetchRole() {
-      return Promise.resolve(window.location.href)
+      return new Promise((resolve, reject) => {
+        /* 此处自定义切换角色的请求逻辑，resolve 切换成功后重定向的url */
+        setTimeout(() => {
+          resolve(window.location.href)
+        }, 2000)
+      })
+    },
+    getEnvInfoSync() {
+      /* 此处自定义请求当前环境用户的具体信息，数据返回格式如下 */
+      const env = {
+        user: {
+          createdBy: 131269511,
+          creationDate: '2017-09-27T00:00:00.000+0800',
+          creationUserCN: null,
+          lastUpdateDate: '2017-11-14T09:43:38.000+0800',
+          lastUpdateUserCN: null,
+          rowIdx: -1,
+          userId: 131269511,
+          userAccount: 'test1',
+          employeeNumber: '12345678',
+          userCN: 'test1',
+          email: 'test1@test1.com',
+          userType: 'HWE',
+          dept: null,
+          coalitionPermission: false,
+          currentRole: {
+            createdBy: null,
+            creationDate: null,
+            creationUserCN: null,
+            lastUpdateDate: null,
+            lastUpdateUserCN: null,
+            rowIdx: -1,
+            roleSort: null,
+            roleId: 1001,
+            roleName: 'System Admin',
+            roleDesc: null,
+            defaultUrl: '',
+            status: null,
+            applyStatus: null,
+            owner: null,
+            userAdminRole: null,
+            grantedOperations: null,
+            personalPermissions: ['vui$Service$Employee.Manage$delete', 'vui$Service$Employee.Manage$edit'],
+            noPermissionUrl: ['vui$jalor/logs/listLogs.html'],
+            permissionUrl: null,
+            approvedByOld: null,
+            approveMode: null,
+            roleDimension: null,
+            roleChk: null,
+            roleList: null,
+            currentScope: 'otc',
+            appNames: ['vui']
+          },
+          currentProgramIds: [1001],
+          currentPrograms: null,
+          validRoles: [
+            {
+              createdBy: null,
+              creationDate: null,
+              creationUserCN: null,
+              lastUpdateDate: null,
+              lastUpdateUserCN: null,
+              rowIdx: -1,
+              roleSort: null,
+              roleId: 1003,
+              roleName: 'Guest',
+              roleDesc: null,
+              defaultUrl: null,
+              status: null,
+              applyStatus: null,
+              owner: null,
+              userAdminRole: null,
+              grantedOperations: null,
+              personalPermissions: null,
+              noPermissionUrl: null,
+              permissionUrl: null,
+              approvedByOld: null,
+              approveMode: null,
+              roleDimension: null,
+              roleChk: null,
+              roleList: null,
+              currentScope: 'otc',
+              appNames: ['vui']
+            },
+            {
+              createdBy: null,
+              creationDate: null,
+              creationUserCN: null,
+              lastUpdateDate: null,
+              lastUpdateUserCN: null,
+              rowIdx: -1,
+              roleSort: null,
+              roleId: 1001,
+              roleName: 'System Admin',
+              roleDesc: null,
+              defaultUrl: '',
+              status: null,
+              applyStatus: null,
+              owner: null,
+              userAdminRole: null,
+              grantedOperations: null,
+              personalPermissions: null,
+              noPermissionUrl: null,
+              permissionUrl: null,
+              approvedByOld: null,
+              approveMode: null,
+              roleDimension: null,
+              roleChk: null,
+              roleList: null,
+              currentScope: 'otc',
+              appNames: ['vui']
+            }
+          ],
+          defaultRole: 'vui:1001;',
+          endDate: '2017-11-14T11:08:58.000+0800',
+          programValidity: null,
+          appNames: ['vui'],
+          scopes: ['otc']
+        },
+        userSettingList: [
+          {
+            lastUpdateDate: '2017-11-01T11:39:36.000+0800',
+            rowIdx: -1,
+            settingId: 1006,
+            settingKey: 'global',
+            userId: 131269511,
+            settingContent:
+              '{"common":{"wideScreen":1,"lang":"zhCN","grid":{"pageSize":15},"lastCheckBrowserDate":0,"pushMsg":{"enable":1,"items":null},"infoTipLanguage":"zhCN","timeZone":"076+8"},"_settingId":1006}',
+            numberOfSettings: 0
+          }
+        ]
+      }
+
+      this.env = env
+      this.roleId = env.user.currentRole.roleId
+
+      return env
+    },
+    getCustomized() {
+      /* 此处自定义请求当前环境用户的自定义信息 */
+      return new Promise((resolve, reject) => {
+        resolve(this.env.userSettingList)
+      })
+    },
+    changeRole(roleId) {
+      /* 选中值发生变化时触发 */
+      this.roleId = roleId
+
+      Modal.message(`当前选中的角色id是${roleId}`)
     }
   }
 }

package/resources/pc/demo/row/align.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-layout>
+  <tiny-layout class="tiny-layout-align">
     <tiny-row :flex="true" class="margin-bottom10">
       <tiny-col :span="3">
         <div class="col lg">默认</div>
@@ -49,18 +49,6 @@ export default {
 </script>
 
 <style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
 .lg {
   height: 120px;
 }

package/resources/pc/demo/row/gutter-nospace.vue

@@ -60,17 +60,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>

package/resources/pc/demo/row/gutter.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-layout>
+  <tiny-layout class="tiny-layout-gutter">
     <tiny-row class="margin-bottom10">
       <tiny-col :span="3" id="test">
         <div class="col">默认</div>
@@ -47,17 +47,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>

package/resources/pc/demo/row/justify.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-layout>
+  <tiny-layout class="tiny-layout-justify">
     <tiny-row :flex="true" class="margin-bottom10">
       <tiny-col :span="3">
         <div class="col">默认</div>
@@ -69,17 +69,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>

package/resources/pc/demo/row/order.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-layout>
+  <tiny-layout class="tiny-layout-order">
     <tiny-row :flex="true" order="asc" class="margin-bottom10">
       <tiny-col :span="3" :no="3">
         <div class="col">3 asc</div>
@@ -42,17 +42,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>

package/resources/pc/demo/row/tag1.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-layout>
+  <tiny-layout class="tiny-layout-tag1">
     <tiny-row tag="span">
       <tiny-col :span="3">
         <div class="col">span（行标签已改为span）</div>
@@ -25,13 +25,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>

package/resources/pc/demo/select/allow-create.vue

@@ -1,6 +1,7 @@
 <template>
   <tiny-select v-model="value" placeholder="请选择" allow-create filterable default-first-option>
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </tiny-option>
   </tiny-select>
 </template>
 
@@ -15,26 +16,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ''
     }

package/resources/pc/demo/select/automatic-dropdown.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="onFocus" style="margin-bottom: 10px">点击获取焦点</tiny-button>
+    <tiny-button @click="onFocus" style="margin-bottom: 10px">
+      点击获取焦点
+    </tiny-button>
     <tiny-select v-model="value" placeholder="请选择" automatic-dropdown ref="selectDom">
-      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+      </tiny-option>
     </tiny-select>
   </div>
 </template>
@@ -19,26 +22,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ''
     }

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

@@ -1,6 +1,7 @@
 <template>
   <tiny-select v-model="value" placeholder="请选择">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </tiny-option>
   </tiny-select>
 </template>
 
@@ -15,26 +16,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ''
     }

package/resources/pc/demo/select/binding-obj.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <tiny-select v-model="value" placeholder="请选择" value-key="val">
-      <tiny-option v-for="item in options" :key="item.obj.id" :label="item.text" :value="item.obj"> </tiny-option>
+      <tiny-option v-for="item in options" :key="item.obj.id" :label="item.text" :value="item.obj">
+      </tiny-option>
     </tiny-select>
     <p class="value">
       {{ value }}
@@ -20,26 +21,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          obj: { val: '选项1', id: 1 },
-          text: '黄金糕'
-        },
-        {
-          obj: { val: '选项2', id: 2 },
-          text: '双皮奶'
-        },
-        {
-          obj: { val: '选项3', id: 3 },
-          text: '蚵仔煎'
-        },
-        {
-          obj: { val: '选项4', id: 4 },
-          text: '龙须面'
-        },
-        {
-          obj: { val: '选项5', id: 5 },
-          text: '北京烤鸭'
-        }
+        { obj: { val: '选项1', id: 1 }, text: '黄金糕' },
+        { obj: { val: '选项2', id: 2 }, text: '双皮奶' },
+        { obj: { val: '选项3', id: 3 }, text: '蚵仔煎' },
+        { obj: { val: '选项4', id: 4 }, text: '龙须面' },
+        { obj: { val: '选项5', id: 5 }, text: '北京烤鸭' }
       ],
       value: { val: '选项3', id: 3 }
     }

package/resources/pc/demo/select/cache-usage.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
-    <tiny-select
-      v-model="value"
-      placeholder="请选择"
-      clearable
-      :options="options"
-      :cache-op="cacheOp"
-      @change="cacheChange"
-    ></tiny-select>
+    <tiny-select v-model="value" placeholder="请选择" clearable :options="options" :cache-op="cacheOp"
+      @change="cacheChange"></tiny-select>
     <p class="cache-value">
       {{ cacheValue }}
     </p>
@@ -28,26 +22,11 @@ export default {
       },
       cacheValue: '',
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: '选项3'
     }

package/resources/pc/demo/select/clearable.vue

@@ -1,6 +1,7 @@
 <template>
   <tiny-select v-model="value" placeholder="请选择" clearable>
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </tiny-option>
   </tiny-select>
 </template>
 
@@ -15,26 +16,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: '选项3'
     }