feat(ellipsis): support expand (#1197)

packages/varlet-ui/src/ellipsis/Ellipsis.vue

@@ -21,8 +21,8 @@
 
 <script lang="ts">
 import VarTooltip, { tooltipProps } from '../tooltip'
-import { computed, defineComponent, ref, type StyleValue } from 'vue'
-import { createNamespace, type ExtractPublicPropTypes } from '../utils/components'
+import { computed, defineComponent, type CSSProperties } from 'vue'
+import { createNamespace, useVModel, type ExtractPublicPropTypes } from '../utils/components'
 import { props } from './props'
 
 const { name, n, classes } = createNamespace('ellipsis')
@@ -32,16 +32,8 @@ export default defineComponent({
   components: { VarTooltip },
   props,
   setup(props) {
-    const expanding = ref(false)
-    const rootStyles = computed<StyleValue>(() => {
-      if (!props.lineClamp) {
-        return {}
-      }
-
-      return {
-        '-webkit-line-clamp': props.lineClamp,
-      } as StyleValue
-    })
+    const expanding = useVModel(props, 'expand')
+    const rootStyles = computed<CSSProperties>(() => (props.lineClamp ? { '-webkit-line-clamp': props.lineClamp } : {}))
     const tooltip = computed<ExtractPublicPropTypes<typeof tooltipProps>>(() => {
       if (props.tooltip === false) {
         return {

packages/varlet-ui/src/ellipsis/__tests__/__snapshots__/index.spec.js.snap

@@ -1,5 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`test ellipsis expand 1`] = `
+"<div class=\\"var-tooltip var--box\\"><span class=\\"var-ellipsis var-ellipsis--line var-ellipsis--cursor var-ellipsis--expand\\">hello</span>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`test ellipsis expand 2`] = `
+"<div class=\\"var-tooltip var--box\\"><span class=\\"var-ellipsis var-ellipsis--line var-ellipsis--cursor\\">hello</span>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
+
 exports[`test ellipsis expandTrigger equals click 1`] = `
 "<div class=\\"var-tooltip var--box\\"><span class=\\"var-ellipsis var-ellipsis--line var-ellipsis--cursor\\">hello</span>
   <!--teleport start-->

packages/varlet-ui/src/ellipsis/__tests__/index.spec.js

@@ -47,3 +47,14 @@ test('test ellipsis tooltip equals object', () => {
   const wrapper = mount(VarEllipsis, { props: { tooltip: { type: 'primary' } } })
   expect(wrapper.vm.tooltip).toStrictEqual({ sameWidth: true, type: 'primary' })
 })
+
+test('test ellipsis expand', async () => {
+  const wrapper = mount(VarEllipsis, {
+    props: { expand: true, expandTrigger: 'click' },
+    slots: { default: () => 'hello' },
+  })
+
+  expect(wrapper.html()).toMatchSnapshot()
+  await wrapper.find('.var-ellipsis').trigger('click')
+  expect(wrapper.html()).toMatchSnapshot()
+})

packages/varlet-ui/src/ellipsis/docs/en-US.md

@@ -24,6 +24,16 @@ Mainly used to omit single-line text and multi-line text.
 </template>
 ```
 
+### Expand Text
+
+```html
+<template>
+  <var-ellipsis style="max-width: 170px" expand>
+     I want to say english to everyone like, even you still are normal people, you still can work a world champion and no one trust you!
+  </var-ellipsis>
+</template>
+```
+
 ### Click On Text To Expand
 
 ```html
@@ -59,9 +69,10 @@ Mainly used to omit single-line text and multi-line text.
 
 | Prop   | Description  | Type  | Default  |
 | ----- | ------ | ---- | ---- |
+| `v-model:expand` | Whether to expand | _boolean_  | `false` |
 | `expand-trigger` | Expand trigger method, optional value `click` | _string_ | `-` |
 | `line-clamp` | Maximum number of display lines, see [line-clamp](https://caniuse.com/?search=line-clamp) for compatibility | _string_ | `-` |
-| `tooltip` | Tooltip component props, for deep customization. For more convenience, `sameWidth` defaults to `true` here | _boolean \| TooltipProps_ | `-` |
+| `tooltip` | Tooltip component props, for deep customization. For more convenience, `sameWidth` defaults to `true` here | _boolean \| TooltipProps_ | `true` |
 
 ### Slots
 

packages/varlet-ui/src/ellipsis/docs/zh-CN.md

@@ -24,6 +24,16 @@
 </template>
 ```
 
+### 展开文字
+
+```html
+<template>
+  <var-ellipsis style="max-width: 170px" expand>
+    其实没有什么事情是不可能的，我都拿到世界冠军了，真的没有什么事情是不可能的。
+  </var-ellipsis>
+</template>
+```
+
 ### 点击文字展开
 
 ```html
@@ -59,9 +69,10 @@
 
 | 参数  | 说明   | 类型  | 默认值 |
 |-------|------|----|----|
+| `v-model:expand` | 是否展开 | _boolean_  | `false` |
 | `expand-trigger` | 展开触发方式，可选值 `click` | _string_  | `-` |
 | `line-clamp` | 最大显示行数，兼容性见 [line-clamp](https://caniuse.com/?search=line-clamp) | _string_  | `-` |
-| `tooltip` | Tooltip 组件配置，用于深度定制。为了更方便使用，`sameWidth` 在这里默认为 `true` | _boolean \| TooltipProps_  | `-` |
+| `tooltip` | Tooltip 组件配置，用于深度定制。为了更方便使用，`sameWidth` 在这里默认为 `true` | _boolean \| TooltipProps_  | `true` |
 
 ### 插槽
 

packages/varlet-ui/src/ellipsis/example/index.vue

@@ -14,6 +14,9 @@ watchLang(use)
   <app-type>{{ pack.multipleLine }}</app-type>
   <var-ellipsis style="max-width: 50vmin" :line-clamp="3">{{ pack.text }}</var-ellipsis>
 
+  <app-type>{{ pack.expandText }}</app-type>
+  <var-ellipsis style="max-width: 50vmin" expand>{{ pack.text }}</var-ellipsis>
+
   <app-type>{{ pack.expand }}</app-type>
   <var-ellipsis style="max-width: 50vmin" :line-clamp="3" expand-trigger="click" :tooltip="false">{{
     pack.text

packages/varlet-ui/src/ellipsis/example/locale/en-US.ts

@@ -1,6 +1,7 @@
 export default {
   line: 'Single Line Ellipsis',
   multipleLine: 'Multiple Line Ellipsis',
+  expandText: 'Expand Text',
   expand: 'Click On Text To Expand',
   tooltip: 'Custom Tooltip',
   text: 'I want to say english to everyone like, even you still are normal people, you still can work a world champion and no one trust you!',

packages/varlet-ui/src/ellipsis/example/locale/zh-CN.ts

@@ -1,6 +1,7 @@
 export default {
   line: '单行省略',
   multipleLine: '多行省略',
+  expandText: '展开文字',
   expand: '点击文字展开',
   tooltip: '自定义 Tooltip',
   text: '其实没有什么事情是不可能的，我都拿到世界冠军了，真的没有什么事情是不可能的。',

packages/varlet-ui/src/ellipsis/props.ts

@@ -1,14 +1,16 @@
 import { tooltipProps } from '../tooltip'
 import { type PropType } from 'vue'
-import { type ExtractPublicPropTypes } from '../utils/components'
+import { defineListenerProp, type ExtractPublicPropTypes } from '../utils/components'
 
 export type EllipsisExpandTrigger = 'click'
 
 export const props = {
+  expand: Boolean,
   expandTrigger: String as PropType<EllipsisExpandTrigger>,
   lineClamp: [Number, String],
   tooltip: {
     type: [Object, Boolean] as PropType<ExtractPublicPropTypes<typeof tooltipProps> | boolean>,
     default: true,
   },
+  'onUpdate:expand': defineListenerProp<(expand: boolean) => void>(),
 }

packages/varlet-ui/types/ellipsis.d.ts

@@ -1,14 +1,16 @@
 import { TooltipProps } from './tooltip'
-import { VarComponent, BasicAttributes } from './varComponent'
+import { VarComponent, BasicAttributes, ListenerProp } from './varComponent'
 
 export declare const ellipsisProps: Record<string, any>
 
 export type EllipsisExpandTrigger = 'click'
 
 export interface EllipsisProps extends BasicAttributes {
+  expand?: boolean
   expandTrigger?: EllipsisExpandTrigger
   lineClamp?: string | number
   tooltip?: boolean | TooltipProps
+  'onUpdate:expand'?: ListenerProp<(expand: boolean) => void>
 }
 
 export class Ellipsis extends VarComponent {