@opentinyvue/vue-docs 3.29.2 → 3.29.3

package/demos/apis/button-group.js

@@ -110,6 +110,21 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'text-value-field',
           mfDemo: ''
+        },
+        // displayMode
+        {
+          name: 'display-mode',
+          type: "'default' | 'merged'",
+          defaultValue: "'default'",
+          desc: {
+            'zh-CN': '按钮组显示模式，可选值为"default"和"merged"，默认为"default"。当设置为"merged"时，按钮组内的按钮将合并显示，形成一个整体的外观。',
+            'en-US': 'Button group display mode, optional values are "default" and "merged", the default is "default". When set to "merged", the buttons in the button group will be merged to form an overall appearance.'
+          },
+          mode: ['pc','mobile-first'],
+          pcDemo: 'display-mode',
+          meta: {
+            stable: '3.29.0'
+          }
         }
       ],
       events: [

package/demos/apis/grid.js

@@ -3239,7 +3239,7 @@ export default {
       type: 'interface',
       code: `
     interface IPopperOption {
-      bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+      bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认true
       followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
       removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
       updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置

package/demos/mobile-first/app/button-group/display-mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br>
+    <br>
+    
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script>
+import { TinyButtonGroup } from "@opentiny/vue";
+
+export default {
+  components: {
+    TinyButtonGroup,
+  },
+  data() {
+    return {
+      checkedVal: "Button1",
+      groupData: [
+        { text: "Button1", value: "Button1" },
+        { text: "Button2", value: "Button2" },
+        { text: "Button3", value: "Button3" },
+      ],
+    };
+  },
+};
+</script>

package/demos/mobile-first/app/button-group/webdoc/button-group.js

@@ -52,6 +52,19 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['enumeration.vue']
+    },
+    {
+      demoId: 'display-mode',
+      name: {
+        'zh-CN': '按钮组显示模式',
+        'en-US': 'button mode'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>display-mode</code> 属性设置按钮组显示模式，可选值有 <code>default</code>（默认）和 <code>merged</code>（选块合并）。</p>',
+        'en-US': '<p>button mode</p>'
+      },
+      codeFiles: ['display-mode.vue']
     }
   ]
 }

package/demos/pc/app/base-select/copy-multi.spec.ts

@@ -10,7 +10,7 @@ test('多选复制单个标签', async ({ page }) => {
 
   await expect(tag).toContainText('北京')
   await page.waitForTimeout(200)
-  const tagBox = await tag.locator('span').boundingBox()
+  const tagBox = await tag.locator('span > span').boundingBox()
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 

package/demos/pc/app/button-group/display-mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br>
+    <br>
+    
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script>
+import { TinyButtonGroup } from "@opentiny/vue";
+
+export default {
+  components: {
+    TinyButtonGroup,
+  },
+  data() {
+    return {
+      checkedVal: "Button1",
+      groupData: [
+        { text: "Button1", value: "Button1" },
+        { text: "Button2", value: "Button2" },
+        { text: "Button3", value: "Button3" },
+      ],
+    };
+  },
+};
+</script>

package/demos/pc/app/button-group/webdoc/button-group.js

@@ -149,6 +149,20 @@ export default {
         'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
       },
       codeFiles: ['change-event.vue']
+    },
+    {
+      demoId: 'display-mode',
+      name: {
+        'zh-CN': '按钮组显示模式',
+        'en-US': 'Button Group Display Mode'
+      },
+      desc: {
+        'zh-CN':
+        '<p>通过 <code>display-mode</code> 属性设置按钮组显示模式，可选值有 <code>default</code>（默认）和 <code>merged</code>（选块合并）。</p>',
+        'en-US':
+        '<p>Set the display mode of the button group through the <code>display-mode</code> attribute. The optional values are: <code>default</code> (default) and <code>merged</code> (merged).</p>'
+      },
+      codeFiles: ['display-mode.vue']
     }
   ],
   features: [

package/demos/pc/app/flowchart/basic-usage-composition-api.vue

@@ -1,176 +1,27 @@
 <template>
   <div class="tiny-demo">
-    <button @click="toggleStatus">切换状态</button>
     <tiny-flowchart
-      ref="chartRef"
-      :data="chartData"
-      :config="chartConfig"
+      ref="chart"
+      :data="chartDataRaw"
+      :config="chartConfigRaw"
       @click-node="onClickNode"
       @click-link="onClickLink"
       @click-blank="onClickBlank"
     >
-      <template #content="params">
-        <handler-list class="custom-handler-list" :params="params" />
-      </template>
     </tiny-flowchart>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { TinyModal, TinyPopover, Flowchart } from '@opentiny/vue'
-import { iconYes, iconPanelMini, iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { TinyModal, TinyFlowchart } from '@opentiny/vue'
+import { hooks } from '@opentiny/vue-common'
 
-const { createNode, createLink, createItem, createConfig } = Flowchart
-
-const HandlerDropdown = {
-  template: `<div class="tiny-handler-dropdown">
-    <div v-for="(handler, i) in params.node.info.items" :key="i" class="tiny-handler-dropdown-item">
-      <div class="item-icon">
-        <div :style="iconStyle(handler)">
-          <tiny-icon-yes v-if="check(handler)"></tiny-icon-yes>
-          <tiny-icon-pane v-else></tiny-icon-pane>
-        </div>
-      </div>
-      <div class="item-status">{{ handler.status }}</div>
-      <div class="item-head">
-        <img :src="params.allItem[handler.key]" :style="imgStyle" />
-      </div>
-      <div class="item-name">{{ handler.name }}</div>
-      <div class="item-key">{{ handler.key }}</div>
-      <div class="item-role">{{ handler.role }}</div>
-      <div class="item-date">{{ handler.date }}</div>
-    </div>
-  </div>`,
-  name: 'TinyHandlerDropdown',
-  components: {
-    TinyIconYes: iconYes(),
-    TinyIconPane: iconPanelMini()
-  },
-  props: {
-    params: Object
-  },
-  computed: {
-    imgStyle() {
-      return 'width:16px;height:16px;border-radius:50%;'
-    }
-  },
-  methods: {
-    check(handler) {
-      const { params } = this
-      return typeof params.config.checkItemStatus === 'function' && params.config.checkItemStatus(handler)
-    },
-    iconStyle(handler) {
-      const color = this.check(handler)
-        ? 'border-color:#52c41a;background:#52c41a;'
-        : 'border-color:#40a9ff;background:#40a9ff;'
-      return (
-        this.imgStyle +
-        'display:flex;align-items:center;justify-content:center;' +
-        'border-width:1px;border-style:solid;' +
-        color
-      )
-    }
-  }
-}
-
-const HandlerList = {
-  template: `<tiny-popover
-    placement="bottom-start"
-    title=""
-    v-model="params.showPop"
-    width="220"
-    trigger="manual"
-    popper-class="demo-popover-class1"
-    :visible-arrow="false"
-  >
-    <handler-dropdown class="custom-handler-dropdown" :params="params" />
-    <template #reference>
-      <div
-        class="tiny-handler-list"
-        :class="'name-' + params.node.name"
-        :style="'border:1px solid ' + params.config.listBorderColor"
-      >
-        <div class="tiny-handler-list__heads" :style="'width:' + headWidth + 'px'">
-          <img
-            v-for="(item, i) in heads"
-            class="tiny-handler-list__head-img"
-            :key="i"
-            :src="item.head"
-            :style="item.style"
-          />
-        </div>
-        <div
-          class="tiny-handler-list__icon"
-          :style="'width:' + params.config.listIconSize + 'px;fill:' + params.config.listIconColor"
-          @click="toggleStatus"
-        >
-          <tiny-icon-up v-if="params.dropdowns[params.node.name]"></tiny-icon-up>
-          <tiny-icon-down v-else></tiny-icon-down>
-        </div>
-      </div>
-    </template>
-  </tiny-popover>`,
-  name: 'TinyHandlerList',
-  components: {
-    TinyIconDown: iconChevronDown(),
-    TinyIconUp: iconChevronUp(),
-    HandlerDropdown,
-    TinyPopover
-  },
-  props: {
-    params: Object
-  },
-  computed: {
-    headWidth() {
-      const { params } = this
-
-      return params.config.listWidth - 6 - params.config.listIconSize
-    },
-    heads() {
-      const { params, headWidth } = this
-      const { allItem, node, config } = params
-      const { headSize } = config
-      const { info } = node
-      const { items } = info
-      const imgStyle = `width:${headSize}px;height:${headSize}px`
-      const res = []
-
-      items.forEach(({ key }, i) => {
-        let left
-
-        if (items.length > 1) {
-          left = Math.floor(((headWidth - headSize) / (items.length - 1)) * i)
-        } else if (items.length === 1) {
-          left = Math.floor(headWidth / 2)
-        }
-
-        const style = `${imgStyle};left:${left}px`
-
-        res.push({ head: allItem[key], style })
-      })
-
-      return res
-    }
-  },
-  methods: {
-    toggleStatus() {
-      const { params } = this
-      params.dropdowns[params.node.name] = !params.dropdowns[params.node.name]
-    }
-  }
-}
-
-const handlers = [
-  createItem('WX100001', '张三', '转审人', '已转审', '很好', '2018-08-20 12:00', ''),
-  createItem('WX100002', '李四', '主管', '已转审', '非常好', '2018-08-20 12:00', ''),
-  createItem('WX100003', '王五', '主管', '处理中', '', '', '')
-]
+const { createNode, createLink, createConfig } = TinyFlowchart
 
 const chartData = {
   nodes: [
     createNode('1', 1, '基础信息', '2018.08.02', [], 1, 0),
-    createNode('2', 1, '调职补偿', '2018.08.02', handlers, 0, 2),
+    createNode('2', 1, '调职补偿', '2018.08.02', [], 0, 2),
     createNode('3', 1, '汇总调职补偿', '', [], 1, 4),
     createNode('4', 3, '启动精算', '', [], 4, 5),
     createNode('5', 3, '复核精算', '', [], 4, 6),
@@ -209,23 +60,9 @@ chartConfig.headUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/m
 chartConfig.checkItemStatus = (item) => ~['已转审', '已同意'].indexOf(item.status)
 chartConfig.adjustPos = (afterNode) => afterNode.raw.name === '2' && (afterNode.y += 1)
 
-const nodeFail = chartData.nodes[chartData.nodes.length - 1]
-const linkDash = chartData.links[chartData.links.length - 1]
-
-const flag = ref(false)
-const chartRef = ref()
-const TinyFlowchart = Flowchart
-
-function toggleStatus() {
-  flag.value = !flag.value
-  // 1.更改数据
-  nodeFail.info.status = flag.value ? 1 : 4
-  linkDash.info.style = flag.value ? 'solid' : 'dash'
-  linkDash.info.status = flag.value ? 1 : 3
-  chartConfig.anchor = flag.value ? 'left' : 'center'
-  // 2.刷新流程图
-  chartRef.value.refresh()
-}
+// 使用 markRaw 避免大数据对象被 Vue 深度响应式代理，提升性能
+const chartDataRaw = hooks.markRaw(chartData)
+const chartConfigRaw = hooks.markRaw(chartConfig)
 
 function onClickNode(_afterNode, _e) {
   TinyModal.message('click-node')
@@ -239,90 +76,3 @@ function onClickBlank(_param, _e) {
   TinyModal.message('click-blank')
 }
 </script>
-
-<style scoped>
-/* HandlerList */
-.tiny-handler-list {
-  width: calc(100% - 2px);
-  height: 100%;
-  border-radius: 3px;
-  position: relative;
-}
-.tiny-handler-list__heads {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  height: calc(100% - 2px);
-}
-.tiny-handler-list__icon {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  height: calc(100% - 2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-}
-.tiny-handler-list__head-img {
-  border-radius: 50%;
-  position: absolute;
-}
-/* HandlerDropdown */
-.tiny-handler-dropdown {
-  width: auto;
-  height: auto;
-  padding: 6px;
-  text-align: initial;
-  cursor: pointer;
-}
-.tiny-handler-dropdown-item + .tiny-handler-dropdown-item {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px dashed #999;
-}
-.tiny-handler-dropdown-item {
-  font-size: 12px;
-  display: grid;
-  gap: 4px;
-  grid-template-rows: repeat(3, 20px);
-  grid-template-columns: 20px 20px 40px auto 40px;
-  grid-template-areas:
-    'icon status status status status'
-    '. head name key role'
-    '. date date date date';
-  align-items: center;
-  justify-content: start;
-}
-.tiny-handler-dropdown-item .item-icon {
-  grid-area: icon;
-}
-.tiny-handler-dropdown-item .item-status {
-  grid-area: status;
-  font-weight: bold;
-}
-.tiny-handler-dropdown-item .item-head {
-  grid-area: head;
-}
-.tiny-handler-dropdown-item .item-name {
-  grid-area: name;
-}
-.tiny-handler-dropdown-item .item-key {
-  grid-area: key;
-}
-.tiny-handler-dropdown-item .item-role {
-  grid-area: role;
-  background: #d9d9d9;
-}
-.tiny-handler-dropdown-item .item-date {
-  grid-area: date;
-  color: #999;
-}
-.tiny-handler-dropdown-item .item-icon .tiny-svg {
-  fill: #fff;
-}
-.tiny-popover.demo-popover-class1.tiny-popper[x-placement^='bottom'] {
-  margin-top: 2px;
-  padding: 0;
-}
-</style>

package/demos/pc/app/flowchart/basic-usage.spec.ts

@@ -4,7 +4,8 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('flowchart#basic-usage')
 
-  const flowchart = page.locator('.pc-demo .tiny-flow-chart')
+  const preview = page.locator('#basic-usage')
+  const flowchart = preview.locator('.tiny-flow-chart')
   const nodes = flowchart.locator('.tiny-flow-chart__node-icon-wrapper')
   await expect(flowchart).toBeVisible()
   await expect(flowchart).toHaveCSS('width', '1024px')