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

README.md

@@ -60,14 +60,14 @@
 ##  特性
 
 * 🚀 70+ 高质量组件，覆盖移动端主流场景
-* 💪 支持一套代码同时开发多端小程序+H5
+* 💪 支持一套代码同时开发 H5+多端小程序
 * 📖 基于京东APP 10.0 视觉规范
 * 🍭 支持按需引用
 * 📖 详尽的文档和示例
 * 💪 支持 TypeScript
 * 💪 支持服务端渲染（测试阶段）
-* 🍭 支持定制主题，内置 700+ 个主题变量
-* 🌍 国际化支持
+* 🍭 支持组件级别定制主题，内置 700+ 个变量
+* 🌍 国际化支持，已支持英文，印尼语和繁体中文
 * 🍭 单元测试覆盖率超过 80%，保障稳定性
 * 📖 提供 Sketch 设计资源
 

awesome.md

@@ -0,0 +1,55 @@
+# Awesome NutUI
+
+NutUI 学习资源汇总 [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)
+
+## 官方资源
+
+- [NutUI 快速上手](https://nutui.jd.com/#/zh-CN/guide/start)
+- [NutUI 小程序开发](https://nutui.jd.com/#/zh-CN/guide/starttaro)
+- [NutUI 主题定制](https://nutui.jd.com/#/zh-CN/guide/theme)
+
+
+## 文章教程
+
+- [移动端组件库如何和 Taro 结合](https://jelly.jd.com/article/618341fd4a534d01c422bc98)
+
+
+
+## 视频教程
+
+- [NutUI 项目实践 - 开发京东购物小程序之首页开发](https://www.bilibili.com/video/BV1PP411n7Mq/?vd_source=339cf5dcca71ec2905c729fd92bba8a9)
+- [NutUI 组件能力分析和夯实](https://www.bilibili.com/video/BV1UP4y1d7fq/?spm_id_from=333.999.0.0&vd_source=339cf5dcca71ec2905c729fd92bba8a9)
+- [NutUI 项目实践 - 开发京东购物小程序之项目搭建](https://www.bilibili.com/video/BV1EB4y1q7hM/?spm_id_from=333.337.search-card.all.click&vd_source=339cf5dcca71ec2905c729fd92bba8a9)
+- [NutUI 一分钟快速在线主题定制](https://www.bilibili.com/video/BV1fi4y1D7qb/?share_source=copy_web&vd_source=339cf5dcca71ec2905c729fd92bba8a9)
+- [NutUI-VSCode智能提示来了](https://www.bilibili.com/video/BV1xZ4y1h7Pg/?vd_source=339cf5dcca71ec2905c729fd92bba8a9)
+
+
+## 开发技巧
+
+- [NutUI 视频组件开发心得](https://jelly.jd.com/article/5ed9ac37c27b86015c501423)
+- [移动端日历组件设计与实现](https://jelly.jd.com/article/6258c1aa89548f01acd2c31a)
+- [折叠面板组件的设计与实现](https://jelly.jd.com/article/62aac30d5deaaa01b341e616)
+- [主流移动端组件库的对比和分析](https://jelly.jd.com/article/62cfc23825ea640188105a7f)
+- [可线性渐变的环形进度条的实现探究](https://jelly.jd.com/article/62df9cab05de4d019ec758fd)
+- [开发者的福利 - NutUI-VSCode 智能提示来了](https://jelly.jd.com/article/6278e71f8acc790195e0c254)
+- [Vue组件库工程探索与实践——按需加载](https://www.jianshu.com/p/a07b1f699c0e)
+
+
+## 项目实践
+
+- [金先生的 NutUI3 初体验](https://jelly.jd.com/article/61b0a49a9a050e6cad30e36d)
+- [NutUI3 开启 BCRM 新征程](https://jelly.jd.com/article/61a44a8537be44f993d84410)
+- [NutUI3 多端实践之路 — 京采云项目总结](https://jelly.jd.com/article/6141ab492685d0019946e2ec)
+- [NutUI 3.0 助力企业业务售后门户建设](https://jelly.jd.com/article/60e81ffc625de10174c7f9e7)
+- [走进京东618大促“产星”之路](https://jelly.jd.com/article/60d97e4478b202017b295684)
+- [NutUI 落地实践-让组件库服务慧采协同采购业务](https://jelly.jd.com/article/5f30a8ca645f82014b842b81)
+- [NutUI 实战--持续升级企业业务之福礼](https://jelly.jd.com/article/5f10308affb8ec014f4f326a)
+- [为京东PLUS会员保驾护航的日子](https://jelly.jd.com/article/5ef99cb17c53070156dd5a6e)
+- [如何用 Canvas 拍出 JDer's 工作照](https://jelly.jd.com/article/5ecf17905ea1c6015178a7c5)
+- [倒带，回看我们「动」起来的2019](https://jelly.jd.com/article/5e202f35fc9e0d0152c1d534)
+- [京东PLUS会员项目前端性能优化实践](https://jelly.jd.com/article/5c66173eef943d0054d09b3f)
+
+
+
+
+

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

@@ -4,7 +4,7 @@ exports[`Ellipsis Props Direction Middle 1`] = `
 "<view class=\\"nut-ellipsis\\">
   <!--v-if-->
   <view>NutUI3.0上线后我们研发团队...
-    <!--v-if-->...UI 中增加小程序多端适配的能力。
+    <!--v-if--> ...UI 中增加小程序多端适配的能力。
   </view>
   <!--v-if-->
 </view>"
@@ -14,7 +14,7 @@ exports[`Ellipsis Props Direction Start 1`] = `
 "<view class=\\"nut-ellipsis\\">
   <!--v-if-->
   <view>
-    <!--v-if-->...多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。
+    <!--v-if--> ...多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。
   </view>
   <!--v-if-->
 </view>"
@@ -24,7 +24,7 @@ exports[`Ellipsis Props Rows 1`] = `
 "<view class=\\"nut-ellipsis\\">
   <!--v-if-->
   <view>
-    <!--v-if-->... 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。
+    <!--v-if--> ... 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。
   </view>
   <!--v-if-->
 </view>"

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

@@ -93,6 +93,7 @@ app.use(Ellipsis);
 | expand-text         | Expand text               | String | ''              |
 | collapse-text         | Collapse text               | String | ''               |
 | symbol         | Symbol     | String | '...'       |
+| line-height         | the row height of the container     | String、Number | 20       |
 
 ### Events
 

src/packages/__VUE/ellipsis/doc.md

@@ -93,6 +93,7 @@ app.use(Ellipsis);
 | expand-text         | 展开操作的文案               | String | ''              |
 | collapse-text         | 收起操作的文案               | String | ''               |
 | symbol         | 省略的符号     | String | '...'       |
+| line-height          | 容器的行高     | String、Number | 20       |
 
 ### Events
 

src/packages/__VUE/ellipsis/index.scss

@@ -1,4 +1,5 @@
 .nut-ellipsis {
+  display: flex;
   .nut-ellipsis-text {
     cursor: hand;
     color: $ellipsis-expand-collapse-color;

src/packages/__VUE/ellipsis/index.taro.vue

@@ -1,26 +1,28 @@
 <template>
-  <view :class="classes" @click="handleClick" ref="root" :id="'root' + refRandomId">
-    <view v-if="!exceeded">{{ content }}</view>
+  <view>
+    <view :class="classes" @click="handleClick" ref="root" :id="'root' + refRandomId">
+      <view v-if="!exceeded">{{ content }}</view>
 
-    <view v-if="exceeded && !expanded">
-      {{ ellipsis.leading
-      }}<view class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</view
-      >{{ ellipsis.tailing }}
+      <view v-if="exceeded && !expanded">
+        {{ ellipsis.leading
+        }}<view class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</view
+        >{{ ellipsis.tailing }}
+      </view>
+      <view v-if="exceeded && expanded">
+        {{ content }}
+        <span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
+      </view>
     </view>
-    <view v-if="exceeded && expanded">
-      {{ content }}
-      <span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
-    </view>
-  </view>
 
-  <view
-    class="nut-ellipsis-copy"
-    @click="handleClick"
-    ref="rootContain"
-    :id="'rootContain' + refRandomId"
-    :style="{ width: widthRef }"
-  >
-    <view>{{ contantCopy }}</view>
+    <view
+      class="nut-ellipsis-copy"
+      @click="handleClick"
+      ref="rootContain"
+      :id="'rootContain' + refRandomId"
+      :style="{ width: widthRef }"
+    >
+      <view>{{ contantCopy }}</view>
+    </view>
   </view>
 </template>
 
@@ -62,6 +64,10 @@ export default create({
     symbol: {
       type: String,
       default: '...'
+    },
+    lineHeight: {
+      type: [Number, String],
+      default: '20'
     }
   },
   emits: ['click', 'change'],
@@ -119,7 +125,7 @@ export default create({
               computedStyle: ['width', 'height', 'lineHeight', 'paddingTop', 'paddingBottom']
             },
             (res) => {
-              lineHeight = pxToNumber(res.lineHeight);
+              lineHeight = pxToNumber(res.lineHeight === 'normal' ? props.lineHeight : res.lineHeight);
               maxHeight = Math.floor(
                 lineHeight * (Number(props.rows) + 0.5) + pxToNumber(res.paddingTop) + pxToNumber(res.paddingBottom)
               );
@@ -163,8 +169,6 @@ export default create({
     // 计算 start/end 省略
     const tailor = async (left: number, right: number) => {
       const actionText = state.expanded ? props.collapseText : props.expandText;
-
-      console.log(actionText);
       const end = props.content.length;
 
       if (right - left <= 1) {

src/packages/__VUE/ellipsis/index.vue

@@ -2,9 +2,9 @@
   <view :class="classes" @click="handleClick" ref="root">
     <view v-if="!exceeded">{{ content }}</view>
     <view v-if="exceeded && !expanded">
-      {{ ellipsis.leading
-      }}<span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</span
-      >{{ ellipsis.tailing }}
+      {{ ellipsis.leading }}
+      <span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</span>
+      {{ ellipsis.tailing }}
     </view>
     <view v-if="exceeded && expanded">
       {{ content }}
@@ -48,6 +48,10 @@ export default create({
     symbol: {
       type: String,
       default: '...'
+    },
+    lineHeight: {
+      type: [Number, String],
+      default: '20'
     }
   },
   emits: ['click', 'change'],
@@ -105,7 +109,7 @@ export default create({
       container.style.whiteSpace = 'normal';
       container.style.webkitLineClamp = 'unset';
       container.style.display = 'block';
-      const lineHeight = pxToNumber(originStyle.lineHeight);
+      const lineHeight = pxToNumber(originStyle.lineHeight === 'normal' ? props.lineHeight : originStyle.lineHeight);
       maxHeight = Math.floor(
         lineHeight * (Number(props.rows) + 0.5) +
           pxToNumber(originStyle.paddingTop) +
@@ -114,7 +118,6 @@ export default create({
 
       container.innerText = props.content;
       document.body.appendChild(container);
-
       calcEllipse();
     };
 
@@ -202,9 +205,9 @@ export default create({
       }
     };
 
-    const pxToNumber = (value: string | null) => {
+    const pxToNumber = (value: string | null | number) => {
       if (!value) return 0;
-      const match = value.match(/^\d*(\.\d*)?/);
+      const match = (value as string).match(/^\d*(\.\d*)?/);
       return match ? Number(match[0]) : 0;
     };
 

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

@@ -134,8 +134,8 @@ The Image component provides a default loading failure warning and supports cust
 | height         | Height，Default unit px              | String | -                |
 | round         | Whether to be round               | Boolean | false              |
 | radius         | Border Raduis               | String \| Numer | -                |
-| showError         | Whether to show error placeholder | Boolean | false              |
-| showLoading         | Whether to show loading placeholder | Boolean | true              |
+| show-error         | Whether to show error placeholder | Boolean | false              |
+| show-loading         | Whether to show loading placeholder | Boolean | true              |
 
 ### ImageFit 
 

src/packages/__VUE/image/doc.md

@@ -133,8 +133,8 @@ app.use();
 | height         | 高度，默认单位`px`               | String | -                |
 | round         | 是否显示为圆角               | Boolean | false              |
 | radius         | 圆角大小               | String \| Numer | -                |
-| showError         | 是否展示图片加载失败| Boolean | false              |
-| showLoading         | 是否展示加载中图片               | Boolean | true              |
+| show-error         | 是否展示图片加载失败| Boolean | false              |
+| show-loading         | 是否展示加载中图片               | Boolean | true              |
 
 ### ImageFit 图片填充模式
 

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

@@ -8,8 +8,13 @@ Support full screen preview videos and images, support functional call.
 
 ```javascript
 import { createApp, reactive, toRefs } from 'vue';
+//vue
+import { ImagePreview, Overlay, Popup, Swiper, SwiperItem } from '@nutui/nutui';
+//taro
+import { ImagePreview, Overlay, Popup, Swiper, SwiperItem } from '@nutui/nutui-taro';
 
-import { ImagePreview } from '@nutui/nutui';
+const app = createApp();
+app.use(ImagePreview);
 
 
 const app = createApp();

src/packages/__VUE/imagepreview/doc.md

@@ -9,9 +9,9 @@
 ```javascript
 import { createApp, reactive, toRefs } from 'vue';
 //vue
-import { ImagePreview } from '@nutui/nutui';
+import { ImagePreview, Overlay, Popup, Swiper, SwiperItem } from '@nutui/nutui';
 //taro
-import { ImagePreview } from '@nutui/nutui-taro';
+import { ImagePreview, Overlay, Popup, Swiper, SwiperItem } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(ImagePreview);