@opentiny/vue-docs 2.2.18 → 2.2.19

package/src/views/components/components.vue

@@ -81,12 +81,11 @@
                           >
                           </version-tip>
                         </td>
-                        <td v-if="!key.includes('slots')">
+                        <td v-if="!key.includes('slots')" @click="handleTypeClick">
                           <a
                             v-if="row.typeAnchorName"
                             :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
                             v-html="row.type"
-                            @click="handleTypeClick"
                           ></a>
                           <span v-else v-html="row.type"></span>
                         </td>
@@ -140,13 +139,13 @@
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref } from 'vue'
 import { marked } from 'marked'
-import { Loading, Anchor, ButtonGroup } from '@opentiny/vue'
+import { Anchor, ButtonGroup } from '@opentiny/vue'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
 import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode } from '@/tools'
 import demo from '@/views/components/demo'
 import { router } from '@/router.js'
 import { Collapse, CollapseItem } from '@opentiny/vue'
-import { faqMdConfig, staticDemoPath, getWebdocPath } from './cmpConfig'
+import { faqMdConfig, getWebdocPath } from './cmpConfig'
 import AsyncHighlight from './async-highlight.vue'
 import VersionTip from './VersionTip.vue'
 
@@ -161,9 +160,6 @@ export default defineComponent({
     AsyncHighlight,
     VersionTip
   },
-  directives: {
-    loading: Loading.directive
-  },
   setup() {
     const anchorRefreshKey = ref(0)
     const state = reactive({
@@ -317,21 +313,6 @@ export default defineComponent({
           state.currJson.types = apiJson.types
         }
 
-        if (state.cmpId?.startsWith('grid-')) {
-          fetchDemosFile(`${staticDemoPath}/grid/webdoc/grid.js`).then((data) => {
-            // eslint-disable-next-line no-eval
-            const gridJson = eval('(' + data.slice(15) + ')')
-            state.currJson.apis = gridJson.apis
-            state.currJson.types = gridJson.types
-          })
-        } else if (state.cmpId?.startsWith('chart-')) {
-          fetchDemosFile(`${staticDemoPath}/chart/webdoc/chart.js`).then((data) => {
-            // eslint-disable-next-line no-eval
-            const chartJson = eval('(' + data.slice(15) + ')')
-            state.currJson.apis = chartJson.apis
-          })
-        }
-
         let hash = router.currentRoute.value.hash?.slice(1)
 
         // 单demo处理，如果有hash,取hash的demo, 没有hash, 取第1项
@@ -370,7 +351,10 @@ export default defineComponent({
       },
       // 点击api 区域的type列
       handleTypeClick: (ev) => {
-        changeActiveNames(ev.target.hash, true)
+        const hash = ev.target.hash
+        if (hash) {
+          changeActiveNames(hash, true)
+        }
       },
       // 目录列表上的点击
       handleAnchorClick: (e, data) => {
@@ -441,7 +425,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 table.api-table {
   width: 100%;
   table-layout: fixed;
@@ -452,6 +436,7 @@ table.api-table {
     text-decoration: none;
     color: #5e7ce0;
     cursor: pointer;
+    word-wrap: break-word;
   }
 
   tbody tr:hover {
@@ -523,11 +508,12 @@ table.api-table {
   }
 }
 .cmp-page-anchor {
-  .tiny-anchor__affix {
+  :deep(.tiny-anchor__affix) {
+    top: unset !important;
     overflow-y: auto;
     max-height: 80vh;
   }
-  .tiny-anchor-link {
+  :deep(.tiny-anchor-link) {
     margin-bottom: 10px;
     max-width: 150px;
     font-size: 12px;
@@ -555,13 +541,6 @@ table.api-table {
   }
 }
 
-.markdown-top-body,
-.all-demos-container {
-  & > .tiny-loading svg {
-    height: 36px;
-    width: 36px;
-  }
-}
 .all-demos-container {
   margin-top: 24px;
 }

package/src/views/components/demo.vue

@@ -84,7 +84,7 @@ export default defineComponent({
   },
   setup(props) {
     const { templateModeState } = useTemplateMode()
-    const { currThemeLabel } = useTheme()
+    const { currentThemeKey } = useTheme()
     const isMobileFirst = computed(() => {
       return templateModeState.mode === 'mobile-first'
     })
@@ -179,7 +179,7 @@ export default defineComponent({
       },
       openPlayground(demo, open = true) {
         const cmpId = router.currentRoute.value.params.cmpId
-        const tinyTheme = templateModeState.isSaas ? 'saas' : currThemeLabel.value.split('-')[1]
+        const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[1]
         const openModeQuery = open ? '' : '&openMode=preview'
         // TODO: 目前mf只有Options写法，后续再放开compositon
         const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${
@@ -235,13 +235,13 @@ export default defineComponent({
 })
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .demo-desc {
   font-size: 16px;
   line-height: 1.7em;
   margin: 12px 0;
 
-  code {
+  :deep(code) {
     color: #476582;
     padding: 4px 8px;
     margin: 0 4px;

package/src/views/layout/layout.vue

@@ -19,7 +19,7 @@
             v-for="(item, index) in themeData"
             :key="index"
             @click="themeItemClick(item)"
-            :class="{ 'is-actived': item.value === currThemeLabel }"
+            :class="{ 'is-actived': item.value === currentThemeKey }"
           >
             {{ item.label }}
           </tiny-dropdown-item>
@@ -128,7 +128,7 @@ export default defineComponent({
   },
   props: [],
   setup() {
-    const { getThemeData, changeTheme, currThemeLabel } = useTheme()
+    const { getThemeData, changeTheme, currentThemeKey, defaultTheme } = useTheme()
     const { apiModeState, apiModeFn } = useApiMode()
     const { templateModeState } = useTemplateMode()
     let state = reactive({
@@ -142,9 +142,9 @@ export default defineComponent({
     })
 
     const lang = getWord('zh-CN', 'en-US')
-    const allPathParam = useRoute().params.all
+    const { all: allPathParam, theme = defaultTheme } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''
-    const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/os-theme/${route}${key}`
+    const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/${route}${key}`
 
     const changeLanguage = () => {
       appFn.toggleLang()
@@ -159,7 +159,7 @@ export default defineComponent({
 
     const clickMenu = (menu) => {
       if (menu.type === 'overview') {
-        router.push(`${import.meta.env.VITE_CONTEXT}${allPath}${lang}/overview`)
+        router.push(`${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/overview`)
       } else if (menu.type === 'docs') {
         router.push(getTo('docs/', menu.key))
       } else if (menu.type === 'components') {
@@ -211,7 +211,7 @@ export default defineComponent({
       collapseChange,
       themeData: getThemeData(),
       themeItemClick,
-      currThemeLabel,
+      currentThemeKey,
       themeSvg,
       changeLanguage,
       apiModeState,

package/src/views/overview.vue

@@ -68,6 +68,7 @@ import TinyInput from '@opentiny/vue-input'
 import noDataSvg from '@/assets/images/no-data.svg?url'
 import searchSvg from '@/assets/images/search.svg?url'
 import { getWord, i18nByKey, isZhCn, pubUrl } from '@/tools'
+import useTheme from '@/tools/useTheme'
 
 export default defineComponent({
   name: 'Overview',
@@ -94,7 +95,7 @@ export default defineComponent({
       }
     }
     function searchResultFn(event) {
-      const value = event.target.value
+      const value = event
       const trimValue = value.replaceAll(' ', '').toLowerCase()
       const currentValue = trimValue
       const reg = new RegExp(currentValue, 'ig')
@@ -116,11 +117,13 @@ export default defineComponent({
       state.searchMenus = searchMenus
     }
     const lang = getWord('zh-CN', 'en-US')
-    const allPathParam = useRoute().params.all
+    const { defaultThemeKey } = useTheme()
+    const { all: allPathParam, theme = defaultThemeKey } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''
+
     let fn = {
       searchHandler: debounce(searchResultFn, 300),
-      getTo: (key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/os-theme/components/${key}`,
+      getTo: (key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/components/${key}`,
       getSvg: (key) => {
         // 表格示例单独另起了许多路由，统一使用表格组件图标
         if (key.startsWith('grid-')) {

package/demos/pc/app/credit-card-form/background-image.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('背景图片', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('credit-card-form#background-image')
-  await expect(page.locator('.-front > .credit-card-item__cover > img')).toHaveAttribute(
-    'src',
-    '/static/images/mountain.png'
-  )
-})

package/demos/pc/app/credit-card-form/basic-usage.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基本用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('credit-card-form#basic-usage')
-  await expect(page.getByText('Card Number')).toBeVisible()
-  await expect(page.locator('.credit-card-item__wrapper')).toBeVisible()
-  await expect(page.locator('label').filter({ hasText: /^Card Holder$/ })).toBeVisible()
-  await expect(page.locator('#v-card-cvv')).toBeVisible()
-  await expect(page.getByRole('button', { name: '提交' })).toBeVisible()
-  await page.getByLabel('#### #### #### ####').fill('1111 1111 1111 1111')
-  await expect(page.getByText('1111 **** **** 1111')).toBeVisible()
-})

package/demos/pc/app/credit-card-form/credit-card-form-events.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('credit-card-form#credit-card-form-events')
-  await page.getByRole('button', { name: '提交' }).click()
-  await page
-    .locator('div')
-    .filter({ hasText: '已提交的信息为：{"invaildCard":true,"cardName":"","cardNumber":"","cardMonth":"","cardYe' })
-    .nth(1)
-    .click()
-  await expect(
-    page
-      .locator('div')
-      .filter({ hasText: '已提交的信息为：{"invaildCard":true,"cardName":"","cardNumber":"","cardMonth":"","cardYe' })
-      .nth(1)
-  ).toBeVisible()
-})

package/demos/pc/app/drawer/default-slot-composition-api.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="fn" type="primary"> 抽屉默认插槽示例 </tiny-button>
-    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div class="my-content">默认插槽内容</div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
-
-const visible = ref(false)
-
-function fn() {
-  visible.value = true
-}
-</script>
-
-<style scoped>
-.my-content {
-  padding: 16px 0;
-}
-</style>

package/demos/pc/app/drawer/default-slot.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('默认插槽', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('drawer#default-slot')
-
-  const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '抽屉默认插槽示例' }).click()
-  await expect(drawer.locator('.tiny-drawer__body > div')).toHaveClass('my-content')
-  await expect(drawer.locator('.tiny-drawer__body')).toHaveText('默认插槽内容')
-})

package/demos/pc/app/drawer/default-slot.vue

@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="fn" type="primary"> 抽屉默认插槽示例 </tiny-button>
-    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div class="my-content">默认插槽内容</div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script>
-import { Drawer, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      visible: false
-    }
-  },
-  methods: {
-    fn() {
-      this.visible = true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.my-content {
-  padding: 16px 0;
-}
-</style>

package/demos/pc/app/font/Font-usage-specifications.spec.js

@@ -1,41 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('test', async ({ page }) => {
-  await page.goto('font#english-fonts')
-  await page.getByText('字体使用规范').click()
-  await page.locator('.col-xs-10').first().click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[1]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-38-css'
-  )
-  await page.locator('div:nth-child(2) > .col-xs-10').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[2]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-30-css'
-  )
-  await page.locator('div:nth-child(3) > .col-xs-10').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[3]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-24-css'
-  )
-  await page.locator('div:nth-child(4) > .col-xs-10').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[4]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-20-css'
-  )
-  await page.locator('div:nth-child(5) > .col-xs-10').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[5]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-16-css'
-  )
-  await page.locator('div:nth-child(6) > .col-xs-10').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[6]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-14-css'
-  )
-  await page.locator('div:nth-child(7) > .col-xs-10').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[7]')).toHaveAttribute(
-    'class',
-    'tiny-row row-font-css font-12-css'
-  )
-})

package/demos/pc/app/font/chinese-font-set.spec.js

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('test', async ({ page }) => {
-  await page.goto('font#Font-usage-specifications')
-  await page.getByText('中文字体集').click()
-  await page.getByRole('heading', { name: '用户体验' }).click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h1')).toHaveText('用户体验')
-  await page.getByRole('heading', { name: '微软雅黑' }).click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h5')).toHaveText('微软雅黑')
-})

package/demos/pc/app/font/english-fonts.spec.js

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('test', async ({ page }) => {
-  await page.goto('font#chinese-font-set')
-  await page.getByText('英文字体').click()
-  await page.getByRole('heading', { name: 'User Experience Design' }).click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h1')).toHaveText('User Experience Design')
-  await page.getByRole('heading', { name: 'Helvetica' }).click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h5')).toHaveText('Helvetica')
-})

package/demos/pc/app/hrapprover/category-type.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('权签类别', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('hrapprover#category-type')
-  await page.locator('#preview').getByRole('img').nth(1).click()
-  await expect(
-    page.getByText(
-      '辅助查询编码名称加载中公司加载中一级部门加载中二级部门加载中三级部门加载中四级部门加载中五级部门加载中六级部门加载中七级部门加载中八级部门加载中已选没有权签人'
-    )
-  ).toBeVisible()
-  await expect(page.locator('div').filter({ hasText: /^确定取消$/ })).toBeVisible()
-})

package/demos/pc/app/modal/min-height-composition-api.vue

@@ -1,16 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
-</template>
-
-<script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
-
-function btnClick() {
-  Modal.alert({
-    message: '提示框拖动最小高度为300',
-    resize: true,
-    height: 500,
-    minHeight: 300
-  })
-}
-</script>

package/demos/pc/app/modal/min-height.spec.ts

@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('调整窗口后显示的最小高度', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#min-height')
-
-  await page.getByRole('button', { name: '提示框最小高度为300' }).click()
-  const modal = page.locator('.tiny-modal.active .tiny-modal__box')
-  // 获取弹窗位置
-  const { x, y, height } = await modal.boundingBox()
-  // 开始横线拖动
-  await page.mouse.move(x, y + height)
-  await page.mouse.down()
-  await page.mouse.move(x, y + 100)
-  await page.mouse.move(x, y + height - 200)
-  await page.mouse.up()
-
-  // 判断窗口高度是否不小于限定最小高度
-  const { height: finalHeight } = await modal.boundingBox()
-  expect(Math.round(finalHeight)).toBeGreaterThanOrEqual(300)
-})

package/demos/pc/app/modal/min-height.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '提示框拖动最小高度为300',
-        resize: true,
-        height: 500,
-        minHeight: 300
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/modal/showFooter-composition-api.vue

@@ -1,11 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
-</template>
-
-<script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
-
-function btnClick() {
-  Modal.alert({ message: '不显示底部', showFooter: false })
-}
-</script>

package/demos/pc/app/modal/showFooter.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('不显示底部', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#showFooter')
-
-  const modal = page.locator('.tiny-modal.active')
-  await page.getByRole('button', { name: '不显示底部' }).click()
-  await expect(modal.locator('.tiny-modal__footer')).not.toBeVisible()
-})

package/demos/pc/app/modal/showFooter.vue

@@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '不显示底部', showFooter: false })
-    }
-  }
-}
-</script>

package/demos/pc/app/modal/showHeader-composition-api.vue

@@ -1,11 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
-</template>
-
-<script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
-
-function btnClick() {
-  Modal.alert({ message: '不显示头部', showHeader: false })
-}
-</script>