docs: taro intro

README.md

@@ -9,7 +9,7 @@
 ## 特性
 
 * 70+ 高质量组件（3.0 持续开发中）
-* 基于京东APP 9.0 视觉规范
+* 基于京东APP 10.0 视觉规范
 * 支持按需引用
 * 详尽的文档和示例
 * 支持 TypeScript

src/docs/intro.md

@@ -15,7 +15,7 @@ NutUI 是京东风格的 Vue 移动端组件库，开发和服务于移动Web界
 ## 特性
 
 * 70+ 高质量组件（3.0 持续开发中）
-* 基于京东APP 9.0 视觉规范
+* 基于京东APP 10.0 视觉规范
 * 支持按需引用
 * 详尽的文档和示例
 * 支持 TypeScript

src/docs/start.md

@@ -14,7 +14,7 @@ npm i @nutui/nutui
 npm i @nutui/nutui@next
 
 # taro 小程序项目
-npm i @nutui/nutui@taro
+npm i @nutui/nutui-taro
 ```
 
 #### CDN 安装使用示例

src/packages/__VUE/actionsheet/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { ActionSheet } from '@nutui/nutui';
+// taro
+import { ActionSheet } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(ActionSheet);

src/packages/__VUE/address/doc.md

@@ -8,7 +8,11 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Address, Icon, Popup } from '@nutui/nutui';
+// taro
+import { Address, Icon, Popup } from '@nutui/nutui-taro';
+
 const app = createApp();
 app.use(Address);
 app.use(Icon);

src/packages/__VUE/avatar/doc.md

@@ -7,7 +7,10 @@
 ### 安装
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Avatar } from '@nutui/nutui';
+// taro
+import { Avatar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Avatar);

src/packages/__VUE/backtop/doc.taro.md

@@ -9,7 +9,7 @@
 ```javascript
 
 import { createApp } from 'vue';
-import { BackTop } from '@nutui/nutui';
+import { BackTop } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(BackTop);

src/packages/__VUE/button/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Button } from '@nutui/nutui';
+// taro
+import { Button } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Button);

src/packages/__VUE/calendar/doc.md

@@ -8,7 +8,10 @@
 
 ```javascript
 import { createApp } from 'vue';
+// vue
 import { Calendar } from '@nutui/nutui';
+// taro
+import { Calendar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Calendar);

src/packages/__VUE/cell/doc.taro.md

@@ -8,7 +8,7 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Cell,CellGroup } from '@nutui/nutui';
+import { Cell,CellGroup } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Cell);

src/packages/__VUE/checkbox/doc.md

@@ -8,7 +8,10 @@
 
 ``` ts
 import { createApp } from 'vue';
+// vue
 import { Checkbox } from '@nutui/nutui';
+// taro
+import { Checkbox } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Checkbox);

src/packages/__VUE/checkboxgroup/demo.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-temp name="wifi"></nut-temp>
-      <nut-temp name="mail" txt="test txt"></nut-temp>
-    </nut-cell>
-  </div>
-</template>
-
-<script lang="ts">
-import { createComponent } from '../../utils/create';
-const { createDemo } = createComponent('checkboxgroup');
-export default createDemo({
-  props: {},
-  setup() {
-    return {};
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.nut-temp {
-}
-</style>

src/packages/__VUE/checkboxgroup/doc.md

@@ -1,34 +0,0 @@
-#  checkboxgroup组件
-
-    ### 介绍
-    
-    基于 xxxxxxx
-    
-    ### 安装
-    
-    
-    
-    ## 代码演示
-    
-    ### 基础用法1
-    
-
-    
-    ## API
-    
-    ### Props
-    
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
-    
-    ### Events
-    
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
-    

src/packages/__VUE/collapse/doc.md

@@ -9,7 +9,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Collapse } from '@nutui/nutui';
+// taro
+import { Collapse } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Collapse);

src/packages/__VUE/collapse/doc.taro.md

@@ -1,194 +0,0 @@
-# Collapse 折叠面板
-
-## 基本用法
-
-通过`v-model`控制展开的面板列表，`activeNames`为数组格式
-
-```html
-<nut-collapse v-model:active="active1" icon="down-arrow">
-  <nut-collapse-item :title="title1" :name="1">
-    NutUI是一套拥有京东风格的轻量级的 Vue 组件库
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2">
-    在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
-  </nut-collapse-item>
-  <nut-collapse-item :title="title3" :name="3" disabled>
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-setup() {
-  const activeNames = reactive([1, 2]);
-  const title = reactive({
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-  })
-  return {
-    activeNames,
-    ...toRefs(title)
-  };
-}
-```
-### 无icon样式
-
-```html
-<nut-collapse v-model:active="activeName" :accordion="true">
-  <nut-collapse-item :title="title1" :name="1">
-   引入Vue3新特性 Composition API、Teleport、Emits 等
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2">
-    全面使用 TypeScipt
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-setup() {
-  const activeName = ref(1);
-  const title = reactive({
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-  })
-  return {
-    activeName,
-    ...toRefs(title)
-  };
-}
-```
-
-### 手风琴
-
-通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`subTitle`可以设置副标题的内容
-
-```html
- <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
-  <nut-collapse-item :title="title1" :name="1">
-    基于京东设计语言体系，构建场景
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-   提高界⾯的模块化通用程度
-  </nut-collapse-item>
-  <nut-collapse-item :title="title3" :name="3">
-  采用组合式 API Composition 语法重构，结构清晰，功能模块化
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-setup() {
-  const activeName = ref(1);
-  const subTitle = '副标题';
-  const title = reactive({
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-  })
-  return {
-    activeName,
-    subTitle,
-    ...toRefs(title)
-  };
-}
-```
-
-
-### 自定义折叠图标
-
-通过icon设置自定义图标，rotate设置图标旋转的角度
-
-```html
-<nut-collapse
-  v-model:active="activeName"
-  :accordion="true"
-  icon="arrow-right2"
-  rotate="90"
->
-  <nut-collapse-item :title="title1" :name="1">
-      NUTUI3.0重新思考其内在的一致性和可组合性
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-    提⾼产研输出对接的效率，降低输出工作量
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-})
-return {
-  activeName,
-  ...toRefs(title)
-};
-```
-
-
-### 自定义标题图标
-
-通过icon设置自定义图标，rotate设置图标旋转的角度
-
-```html
-<nut-collapse
-  v-model:active="activeName"
-  title-icon="issue"
-  title-icon-color="red"
-  title-icon-size="20px"
-  title-icon-position="left"
-  icon="down-arrow"
-  :accordion="true"
->
-  <nut-collapse-item :title="title1" :name="1">
-  组件 emits 事件单独提取，增强代码可读性
-  </nut-collapse-item>
-  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-  使用 Teleport 新特性重构挂载类组件
-  </nut-collapse-item>
-</nut-collapse>
-```
-
-``` javascript
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-})
-return {
-  activeName,
-  ...toRefs(title)
-};
-```
-
-## Collapse Prop
-
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
-| accordion | 是否开启手风琴模式 | boolean | false |
-| icon | 图标链接/或使用 NutUI 的 icon | string | ‘’ |
-| icon-size | 图标大小 | string | 16px |
-| icon-color | 图标颜色 | string | '' |
-| sub-title | 标题栏副标题 | string | - |
-| title-icon | 标题图标链接/或使用 NutUI 的 icon | string | ‘’ |
-| title-icon-size | 标题图标大小 | string | 16px |
-| title-icon-color | 标题图标颜色 | string | ’‘ |
-| title-icon-position | 标题图标位置 | string | ‘left' |
-| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
-
-### CollapseItem Prop
-| 参数 | 说明 | 类型 | 默认值 | 
-|------|------|------|------|
-| name | 唯一标识符，必填 | string \ number | -1 |
-| title | 标题栏左侧内容 | string | - |
-| sub-title | 标题栏副标题 | string | - |
-| disabled | 标题栏是否禁用 | boolean | false |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |

src/packages/__VUE/collapseitem/doc.md

@@ -1,2 +0,0 @@
-# CollapseItem 折叠面板
-

src/packages/__VUE/datepicker/doc.taro.md

@@ -8,7 +8,7 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { DatePicker } from '@nutui/nutui';
+import { DatePicker } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(DatePicker);

src/packages/__VUE/dialog/doc.taro.md

@@ -9,7 +9,7 @@
     
 ```javascript
 import { createApp } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { Dialog } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Dialog);

src/packages/__VUE/drag/doc.taro.md

@@ -7,7 +7,7 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Drag } from '@nutui/nutui';
+import { Drag } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Drag);

src/packages/__VUE/icon/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Icon } from '@nutui/nutui';
+// taro
+import { Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Icon);

src/packages/__VUE/infiniteloading/doc.taro.md

@@ -8,7 +8,7 @@
 
 ```javascript
   import { createApp } from 'vue';
-  import { InfiniteLoading } from '@nutui/nutui';
+  import { InfiniteLoading } from '@nutui/nutui-taro';
 
   const app = createApp();
   app.use(InfiniteLoading);

src/packages/__VUE/input/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Input } from '@nutui/nutui';
+// taro
+import { Input } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Input);

src/packages/__VUE/inputnumber/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { InputNumber,Icon } from '@nutui/nutui';
+// taro
+import { InputNumber,Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(InputNumber).use(Icon);

src/packages/__VUE/layout/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Layout } from '@nutui/nutui';
+// taro
+import { Layout } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Layout);

src/packages/__VUE/menu/doc.md

@@ -8,8 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+// vue
 import { Menu } from '@nutui/nutui';
-
+// taro
+import { Menu } from '@nutui/nutui-taro';
 const app = createApp();
 app.use(Menu);
 

src/packages/__VUE/navbar/doc.md

@@ -10,7 +10,10 @@
 ```javascript
 
 import { createApp } from 'vue';
+// vue
 import { Navbar } from '@nutui/nutui';
+// taro
+import { Navbar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Navbar);