Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/config.json

@@ -138,6 +138,17 @@
           "tarodoc": false,
           "type": "component",
           "author": "richard1015"
+        },
+        {
+          "version": "3.0.0",
+          "name": "Image",
+          "cType": "基础组件",
+          "cName": "图片",
+          "desc": "图片展示",
+          "show": true,
+          "tarodoc": false,
+          "type": "component",
+          "author": "yangxiaolu"
         }
       ]
     },
@@ -1043,6 +1054,17 @@
           "sort": 9,
           "show": true,
           "author": "szg2008"
+        },
+        {
+          "version": "3.0.0",
+          "name": "Ellipsis",
+          "cType": "展示组件",
+          "cName": "文本省略",
+          "desc": "文本省略",
+          "show": true,
+          "tarodoc": false,
+          "type": "component",
+          "author": "yangxiaolu3"
         }
       ]
     },

src/packages/__VUE/ellipsis/__tests__/ellipsis.spec.ts

@@ -0,0 +1 @@
+import { mount } from '@vue/test-utils';

src/packages/__VUE/ellipsis/demo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="demo">
+    <h2>{{ translate('header') }}</h2>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="start" class="elli"></nut-ellipsis>
+    </nut-cell>
+
+    <h2>{{ translate('end') }}</h2>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="end"></nut-ellipsis>
+    </nut-cell>
+
+    <h2>{{ translate('middle') }}</h2>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="middle"></nut-ellipsis>
+    </nut-cell>
+
+    <h2>{{ translate('rows') }}</h2>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="start" rows="3"></nut-ellipsis>
+    </nut-cell>
+
+    <h2>{{ translate('expand') }}</h2>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="start" expandText="展开" collapseText="收起"></nut-ellipsis>
+    </nut-cell>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="middle" expandText="展开" collapseText="收起"></nut-ellipsis>
+    </nut-cell>
+    <nut-cell>
+      <nut-ellipsis :content="content" direction="end" rows="3" expandText="展开" collapseText="收起"></nut-ellipsis>
+    </nut-cell>
+  </div>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { createDemo, translate } = createComponent('ellipsis');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    header: '头部省略',
+    end: '尾部省略',
+    middle: '中间省略',
+    rows: '多行省略',
+    expand: '展开收起'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    header: 'Leading',
+    end: 'Tailing',
+    middle: 'Middle',
+    rows: 'Multi-line',
+    expand: 'Expand & Collapse'
+  }
+});
+export default createDemo({
+  props: {},
+  setup() {
+    const content = ref(
+      'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
+    );
+    return { content, translate };
+  }
+});
+</script>
+<style lang="scss" scoped>
+.demo {
+}
+</style>

src/packages/__VUE/ellipsis/doc.en-US.md

@@ -0,0 +1,102 @@
+# ellipsis 
+
+### Intro
+
+展示空间不足时，隐去部分内容并用“...”替代。
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Ellipsis } from '@nutui/nutui';
+// taro
+import { Ellipsis } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use();
+
+```
+
+### Leading
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" direction="start" ></nut-ellipsis>
+</template>
+```
+:::
+
+### Tailing
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" direction="end" ></nut-ellipsis>
+</template>
+```
+:::
+
+### Middle
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" direction="middle" ></nut-ellipsis>
+</template>
+```
+:::
+
+### Multi-line
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis 
+    content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" 
+    direction="start" 
+    rows="3"></nut-ellipsis>
+</template>
+```
+:::
+
+### Expand & Collapse
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis 
+    direction="start" 
+    expandText="Expand" 
+    collapseText="Collapse"
+    content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" ></nut-ellipsis>
+</template>
+```
+:::
+
+## API
+
+### Props
+
+| Attribute         | Description                             | Type   | Default           |
+|--------------|----------------------------------|--------|------------------|
+| content         | Content               | String | -                |
+| direction         | Direction                | 'start' | 'end' | 'middle' | 'end'               |
+| rows         | Rows               | Number | 1              |
+| expandText         | Expand text               | String | ''              |
+| collapseText         | Collapse text               | String | ''               |
+| symbol         | Symbol     | String | '...'       |
+
+### Events
+
+| Event  | Description     | Arguments    |
+|--------|----------------|--------------|
+| click  | Emitted when the content is clicked | -- |
+| change  | Emitted when expand or collapse is clicked | -- |

src/packages/__VUE/ellipsis/doc.md

@@ -0,0 +1,102 @@
+# ellipsis 
+
+### 介绍
+
+展示空间不足时，隐去部分内容并用“...”替代。
+
+### 安装
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Ellipsis } from '@nutui/nutui';
+// taro
+import { Ellipsis } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use();
+
+```
+
+### 头部省略
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" direction="start" ></nut-ellipsis>
+</template>
+```
+:::
+
+### 尾部省略
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" direction="end" ></nut-ellipsis>
+</template>
+```
+:::
+
+### 中间省略
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" direction="middle" ></nut-ellipsis>
+</template>
+```
+:::
+
+### 多行省略
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis 
+    content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" 
+    direction="start" 
+    rows="3"></nut-ellipsis>
+</template>
+```
+:::
+
+### 展开收起
+
+:::demo
+
+```html
+<template>
+  <nut-ellipsis 
+    direction="start" 
+    expandText="展开" 
+    collapseText="收起"
+    content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。" ></nut-ellipsis>
+</template>
+```
+:::
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| content         | 文本内容               | String | -                |
+| direction         | 省略位置               | 'start' | 'end' | 'middle' | 'end'               |
+| rows         | 展示几行               | Number | 1              |
+| expandText         | 展开操作的文案               | String | ''              |
+| collapseText         | 收起操作的文案               | String | ''               |
+| symbol         | 省略的符号     | String | '...'       |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 文本点击是触发 | -- |
+| change  | 点击展开收起时触发 | -- |

src/packages/__VUE/ellipsis/index.scss

@@ -0,0 +1,12 @@
+.nut-ellipsis {
+  .nut-ellipsis-text {
+    cursor: hand;
+    color: $ellipsis-expand-collapse-color;
+    display: inline;
+  }
+}
+
+.nut-ellipsis-copy {
+  position: absolute;
+  top: -999999px;
+}