feat: support react and add new components: rich-text-editor/color-picker/divider/calendar-view

Author: kagol

.gitignore

@@ -14,6 +14,8 @@ coverage/
 /packages/vue/mobile.ts
 /packages/vue/mobile-first.ts
 /packages/vue/app.ts
+/packages/vue-icon-saas/src
+/packages/vue-icon-saas/index.ts
 
 /packages/react/index.ts
 /packages/react/pc.ts

.prettierrc

@@ -11,6 +11,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "proseWrap": "preserve",
+  "arrowParens": "always",
   "overrides": [
     {
       "files": ".prettierrc",
@@ -19,4 +20,4 @@
       }
     }
   ]
-}
+}

.vscode/settings.json

@@ -81,5 +81,6 @@
       "bold": false,
       "italic": false
     }
-  ]
+  ],
+  "vue.codeActions.enabled": false
 }

examples/docs/newsrc/pc.vue

@@ -97,7 +97,7 @@
       </div>
     </tiny-floatbar>
     <!-- 切换主题 -->
-    <tiny-dropdown class="!fixed bottom20 right140" @item-click="changeTheme">
+    <tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme">
       <span title="切换主题">
         <SvgTheme></SvgTheme>
       </span>

examples/docs/newsrc/uses/useMonaco.js

@@ -0,0 +1,13 @@
+<template>
+  <tiny-badge data="我的待办" :value="0"></tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/badge/props-content.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <tiny-button type="primary" banner native-type="submit">默认按钮</tiny-button>
+    <tiny-button type="primary" custom-class="mt-4" banner plain>线性按钮</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/button/banner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <tiny-button>默认按钮</tiny-button>
-    <tiny-button button-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
+    <tiny-button custom-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/button-class.vue

@@ -14,7 +14,7 @@ export default {
   },
   data() {
     return {
-      image: 'webnova/static/images/hae-logo.png'
+      image: '/static/images/hae-logo.png'
     }
   }
 }

examples/docs/resources/mobile-first/app/button/image.vue

@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      image: 'webnova/static/images/hae-logo.png'
+      image: '/static/images/hae-logo.png'
     }
   }
 }

examples/docs/resources/mobile-first/app/button/slot-default.vue

@@ -115,7 +115,7 @@ export default {
       codeFiles: ['click.vue']
     },
     {
-      demoId: 'dynamic-disable-button',
+      demoId: 'dynamic-disabled',
       name: {
         'zh-CN': '动态禁用按钮',
         'en-US': 'events'
@@ -124,7 +124,19 @@ export default {
         'zh-CN': '<p>设置  <code>disabled</code>属性为 true 后，可以禁用按钮。<p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['dynamic-disable-button.vue']
+      codeFiles: ['dynamic-disabled.vue']
+    },
+    {
+      demoId: 'banner',
+      name: {
+        'zh-CN': '通知栏按钮',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过添加<code>banner</code>属性设置通栏按钮<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['banner.vue']
     }
   ],
   apis: []

examples/docs/resources/mobile-first/app/button/webdoc/button.js

@@ -2,16 +2,16 @@
   <div class="w-80">
     <tiny-carousel aspect-ratio="2:1" :loop="false">
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/dsj.png" alt="" />
+        <img src="/static/images/dsj.png" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/jz.png" alt="" />
+        <img src="/static/images/jz.png" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/ld.png" alt="" />
+        <img src="/static/images/ld.png" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/px.png" alt="" />
+        <img src="/static/images/px.png" alt="" />
       </tiny-carousel-item>
     </tiny-carousel>
   </div>

examples/docs/resources/mobile-first/app/carousel/close-loop.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-cell :data="data"></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: '进行中'
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-cell :data="data" disabled></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: '进行中'
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/disabled.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-cell :data="data" :icon="icon"></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+import { IconWriting } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: '',
+      icon: IconWriting()
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/icon.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-cell :data="data" placeholder="请选择日期"></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: ''
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/placeholder.vue

@@ -0,0 +1,9 @@
+---
+title: Cell 单元格
+---
+
+# Cell 单元格
+
+<div>
+此组件主要用于移动下拉选择组件（DatePickerMobile、SelectMobile 等）显示值的承载容器
+</div>

examples/docs/resources/mobile-first/app/cell/webdoc/cell.cn.md

@@ -0,0 +1,9 @@
+---
+title: Cell 单元格
+---
+
+# Cell 单元格
+
+<div>
+此组件主要用于移动下拉选择组件（DatePickerMobile、SelectMobile 等）显示值的承载容器
+</div>

examples/docs/resources/mobile-first/app/cell/webdoc/cell.en.md

@@ -0,0 +1,67 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'with-date-picker',
+      name: {
+        'zh-CN': '结合日期选择一起使用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['with-date-picker.vue']
+    },
+    {
+      demoId: 'placeholder',
+      name: {
+        'zh-CN': '占位文本',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['placeholder.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'icon',
+      name: {
+        'zh-CN': 'icon 图标',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>可以传入一个 svg 对象替换默认的下拉图标<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['icon.vue']
+    }
+  ],
+  apis: []
+}