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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-beta.10",
   "npm": {
     "tag": "beta"
   },

src/packages/actionsheet/demo.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="demo-list demo">
-    <h2>基本用法(选择类)</h2>
+    <h2>基本用法</h2>
     <nut-cell
-      :showIcon="true"
+      :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible1')"
     >
       <span><label>基础用法</label></span>
-      <div class="selected-option">{{ state.val1 }}</div>
+      <div class="selected-option" v-html="state.val1"></div>
     </nut-cell>
     <nut-cell
       :showIcon="true"
@@ -15,11 +15,11 @@
       @click="switchActionSheet('isVisible2')"
     >
       <span><label>展示取消按钮</label></span>
-      <div class="selected-option">{{ state.val2 }}</div>
+      <div class="selected-option" v-html="state.val2"></div>
     </nut-cell>
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
       <span><label>展示描述信息</label></span>
-      <div class="selected-option">{{ state.val3 }}</div>
+      <div class="selected-option" v-html="state.val3"></div>
     </nut-cell>
     <h2>选项状态</h2>
 
@@ -39,7 +39,8 @@
       cancel-txt="取消"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
-    ></nut-actionsheet>
+    >
+    </nut-actionsheet>
     <!-- 展示描述信息 -->
     <nut-actionsheet
       :is-visible="state.isVisible3"

src/packages/actionsheet/doc.md

@@ -2,39 +2,39 @@
 
 从底部弹出的动作菜单面板。
 
-## 基本用法(选择类)
+## 基本用法
 
 默认
-```html
+``` html
 <div @click="switchActionSheet">
    <span><label>基础用法</label></span>
-   <div class="selected-option">state.val }}</div>
+   <div class="selected-option" v-html="state.val"></div>
 </div>
 <nut-actionsheet
-        :is-visible="state.isVisible"
-        :menu-items="menuItems"
-        @choose="chooseItem"
-      ></nut-actionsheet>
+  :is-visible="state.isVisible"
+  :menu-items="menuItems"
+  @choose="chooseItem"
+></nut-actionsheet>
 ```
 
 ## 展示取消按钮
 ```html
 <div @click="switchActionSheet">
-   <span><label>展示取消按钮</label></span>
-    <div class="selected-option">state.val }}</div>
+  <span><label>展示取消按钮</label></span>
+  <div class="selected-option" v-html="state.val"></div>
 </div>
- <nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    cancel-txt="取消"
+<nut-actionsheet :is-visible="isVisible" 
+  @close="switchActionSheet"
+  :menu-items="menuItems"
+  @choose="chooseItem"
+  cancel-txt="取消"
 ></nut-actionsheet>
 ```
 ## 展示描述信息
 ```html
 <div @click.native="switchActionSheet">
    <span><label>展示取消按钮</label></span>
-    <div class="selected-option">state.val }}</div>
+    <div class="selected-option" v-html="state.val"></div>
 </div>
  <nut-actionsheet :is-visible="isVisible" 
     @close="switchActionSheet"
@@ -49,14 +49,14 @@
 ```html
 <div @click.native="switchActionSheet">
     <span class="title"><label>性别</label></span>
-    <span class="selected-option">{{sex}}</span>
+    <span class="selected-option" v-html="sex"></span>
 </div>
 <nut-actionsheet
 @close="switchActionSheet"
-        :is-visible="state.isVisible4"
-        cancel-txt="取消"
-        :menu-items="menuItemsThree"
-      ></nut-actionsheet>
+  :is-visible="state.isVisible4"
+  cancel-txt="取消"
+  :menu-items="menuItemsThree"
+></nut-actionsheet>
 ```
 
 ```javascript
@@ -91,23 +91,23 @@ setup() {
 
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| cancel-txt | 取消文案 | String | '取消'
-| menu-items | 列表项 | Array | [ ]
-| option-tag | 设置列表项展示使用参数 | String | 'name'
-| is-visible | 遮罩层可见 | Boolean | false
-| option-sub-tag | 设置列表项描述展示使用参数 | String | 'subname'
-| choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String | ''
-| title | 设置列表项标题 | String | ''
-| description | 设置列表项副标题/描述 | String | ''
-| color | 高亮颜色 | String | '#ee0a24'
-| close-abled | 遮罩层是否可关闭 | Boolean | true
+| 字段             | 说明                                   | 类型    | 默认值    |
+|------------------|----------------------------------------|---------|-----------|
+| cancel-txt       | 取消文案                               | String  | '取消'    |
+| menu-items       | 列表项                                 | Array   | [ ]       |
+| option-tag       | 设置列表项展示使用参数                 | String  | 'name'    |
+| is-visible       | 遮罩层可见                             | Boolean | false     |
+| option-sub-tag   | 设置列表项描述展示使用参数             | String  | 'subname' |
+| choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String  | ''        |
+| title            | 设置列表项标题                         | String  | ''        |
+| description      | 设置列表项副标题/描述                  | String  | ''        |
+| color            | 高亮颜色                               | String  | '#ee0a24' |
+| close-abled      | 遮罩层是否可关闭                       | Boolean | true      |
 
 
 ## Event
 
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| choose | 选择之后触发 | 选中列表项item, 选中的索引值index 
-| cancel | 点击取消文案时触发 | 无
+| 字段   | 说明               | 回调参数                          |
+|--------|--------------------|-----------------------------------|
+| choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
+| cancel | 点击取消文案时触发 | 无                                |

src/packages/datepicker/index.vue

@@ -192,17 +192,42 @@ export default create({
     });
 
     const changeHandler = (val: string[]) => {
-      // let formatDate = [];
-      // if (props.isShowChinese) {
-      //   formatDate = val.map((res: string) => {
-      //     return Number(res.slice(0, res.length - 1));
-      //   }) as any;
-      // } else {
-      //   formatDate = val;
-      // }
-      // state.currentDate = formatValue(
-      //   new Date(formatDate[0], formatDate[1] - 1, formatDate[2])
-      // );
+      if (['date', 'datetime'].includes(props.type)) {
+        let formatDate = [];
+        if (props.isShowChinese) {
+          formatDate = val.map((res: string) => {
+            return Number(res.slice(0, res.length - 1));
+          }) as any;
+        } else {
+          formatDate = val;
+        }
+        let date: Date;
+        if (props.type === 'date') {
+          state.currentDate = formatValue(
+            new Date(
+              formatDate[0],
+              formatDate[1] - 1,
+              Math.min(
+                formatDate[2],
+                getMonthEndDay(formatDate[0], formatDate[1])
+              )
+            )
+          );
+        } else if (props.type === 'datetime') {
+          state.currentDate = formatValue(
+            new Date(
+              formatDate[0],
+              formatDate[1] - 1,
+              Math.min(
+                formatDate[2],
+                getMonthEndDay(formatDate[0], formatDate[1])
+              ),
+              formatDate[3],
+              formatDate[4]
+            )
+          );
+        }
+      }
     };
 
     const generateValue = (

src/packages/swiper/index.scss

@@ -30,4 +30,16 @@
       }
     }
   }
+  &-pagination-vertical {
+    top: 50%;
+    left: 12px;
+    bottom: auto;
+    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    transform: translateY(-50%);
+    i {
+      margin-bottom: 5px;
+    }
+  }
 }

src/packages/swiper/index.vue

@@ -18,7 +18,10 @@
     </view>
     <slot name="page"></slot>
     <view
-      :class="{ [`${componentName}-pagination`]: true }"
+      :class="{
+        [`${componentName}-pagination`]: true,
+        [`${componentName}-pagination-vertical`]: isVertical
+      }"
       v-if="paginationVisible && !slots.page"
     >
       <i

src/packages/toast/demo.vue

@@ -1,29 +1,26 @@
 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <div>
-      <nut-cell
-        title="Text 文字提示"
-        is-link
-        @click="textToast('网络失败，请稍后再试~')"
-      ></nut-cell>
-      <nut-cell
-        title="Success 成功提示"
-        is-link
-        @click="successToast('成功提示')"
-      ></nut-cell>
-      <nut-cell
-        title="Error 失败提示"
-        is-link
-        @click="errorToast('失败提示')"
-      ></nut-cell>
-      <nut-cell
-        title="Warning 警告提示"
-        is-link
-        @click="warningToast('警告提示')"
-      ></nut-cell>
-    </div>
-    <h2>动态更新</h2>
+    <nut-cell
+      title="Text 文字提示"
+      is-link
+      @click="textToast('网络失败，请稍后再试~')"
+    ></nut-cell>
+    <nut-cell
+      title="Success 成功提示"
+      is-link
+      @click="successToast('成功提示')"
+    ></nut-cell>
+    <nut-cell
+      title="Error 失败提示"
+      is-link
+      @click="errorToast('失败提示')"
+    ></nut-cell>
+    <nut-cell
+      title="Warning 警告提示"
+      is-link
+      @click="warningToast('警告提示')"
+    ></nut-cell>
     <nut-cell
       title="Loading 加载提示"
       is-link
@@ -42,10 +39,10 @@ export default createDemo({
     const { proxy } = getCurrentInstance();
 
     const textToast = msg => {
-      proxy.$toast.text(msg, { duration: 100000 });
+      proxy.$toast.text(msg);
     };
     const successToast = msg => {
-      proxy.$toast.success(msg, { duration: 100000 });
+      proxy.$toast.success(msg);
     };
     const errorToast = msg => {
       proxy.$toast.fail(msg);
@@ -54,10 +51,7 @@ export default createDemo({
       proxy.$toast.warn(msg);
     };
     const loadingToast = msg => {
-      proxy.$toast.loading(msg, { duration: 0, id: 'test' });
-      setTimeout(() => {
-        proxy.$toast.success('加载完成', { id: 'test', duration: 2000 });
-      }, 2000);
+      proxy.$toast.loading(msg);
     };
     return {
       textToast,

src/packages/toast/doc.md

@@ -22,34 +22,31 @@ app.use(Toast);
 
 文字提示
 ```javascript
-Toast.text(msg);
+Toast.text('网络失败，请稍后再试~');
 ```
 
 成功提示
 
 ```javascript
-Toast.success(msg);
+Toast.success('成功提示');
 ```
 
 失败提示
 
 ```javascript
-Toast.fail(msg);
+Toast.fail('失败提示');
 ```
 
 警告提示
 
 ```javascript
-Toast.warn(msg);
+Toast.warn('警告提示');
 ```
 
-### 动态更新
+加载提示
 
 ```javascript
-Toast.loading(msg, { duration: 0, id: 'test' });
-setTimeout(() => {
-  Toast.success('加载完成', { id: 'test', duration: 2000 });
-}, 2000);
+Toast.loading('加载中');
 ```
 
 ##¥ 支持在JS模块中导入使用

src/sites/assets/util/ref.ts

@@ -1,5 +1,24 @@
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
+export class RefData {
+  private static instance: RefData;
+  public static getInstance(): RefData {
+    if (this.instance == null) {
+      this.instance = new RefData();
+      let localTheme = localStorage.getItem('nutui-theme-color');
+      if (localTheme) {
+        this.instance.themeColor.value = localTheme;
+      }
+    }
+    return this.instance;
+  }
 
-export const currentRoute = ref('/');
+  public currentRoute: Ref<string> = ref('/');
 
-export const themeColor = ref('red');
+  private _themeColor: Ref<string> = ref('black');
+  public get themeColor(): Ref<string> {
+    return this._themeColor;
+  }
+  public set themeColor(v: Ref<string>) {
+    this._themeColor = v;
+  }
+}

src/sites/doc/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="doc-footer" :class="`doc-footer-${data.theme}`">
+  <div class="doc-footer" :class="`doc-footer-${themeColor}`">
     <div class="doc-footer-content">
       <div class="doc-footer-list">
         <img
@@ -16,8 +16,8 @@
             href="hhttps://cn.vuejs.org/index.html"
             v-hover
             >Vue</a
-          ></div
-        >
+          >
+        </div>
         <div class="doc-footer-item"
           ><a class="sub-link" target="_blank" href="https://vitejs.dev" v-hover
             >Vite</a
@@ -126,12 +126,11 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import { themeColor } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-footer',
   setup() {
     const data = reactive({
-      theme: 'red',
       themeList: [
         {
           name: '热情红',
@@ -159,15 +158,18 @@ export default defineComponent({
         false
       );
     };
+    // checked active index
+    data.activeIndex = data.themeList.findIndex(
+      i => i.color == RefData.getInstance().themeColor.value
+    );
     const checkTheme = (color: string, index: number) => {
       data.isShowSelect = false;
       data.activeIndex = index;
-      data.theme = color;
-      themeColor.value = color;
-      console.log('themeColor1', themeColor);
-      // bus.emit('select-theme', color)
+      RefData.getInstance().themeColor.value = color;
+      localStorage.setItem('nutui-theme-color', color);
     };
     return {
+      themeColor: RefData.getInstance().themeColor,
       data,
       clickOut,
       checkTheme

src/sites/doc/components/Header.vue

@@ -72,7 +72,7 @@
 import { defineComponent, reactive, computed, onMounted } from 'vue';
 import Search from './Search.vue';
 import { header } from '@/config.json';
-import { currentRoute, themeColor } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-header',
   components: {
@@ -106,14 +106,12 @@ export default defineComponent({
     };
     const isActive = computed(() => {
       return function(name: string) {
-        // console.log(name, currentRoute.value);
-        // console.log('name1', currentRoute.value == name.toLowerCase());
-        return currentRoute.value == name.toLowerCase();
+        return RefData.getInstance().currentRoute.value == name.toLowerCase();
       };
     });
     const themeName = computed(() => {
       return function() {
-        return `doc-header-${themeColor.value}`;
+        return `doc-header-${RefData.getInstance().themeColor.value}`;
       };
     });
     const checkTheme = (item: string, index: number) => {

src/sites/doc/components/Nav.vue

@@ -42,14 +42,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive, computed, onMounted } from 'vue';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 import { nav, docs } from '@/config.json';
 export default defineComponent({
   name: 'doc-nav',
   setup() {
     const isActive = computed(() => {
       return function(name: string) {
-        return currentRoute.value == name.toLowerCase();
+        return RefData.getInstance().currentRoute.value == name.toLowerCase();
       };
     });
     onMounted(() => {
@@ -59,7 +59,7 @@ export default defineComponent({
       isActive,
       nav: reactive(nav),
       docs: reactive(docs),
-      currentRoute
+      currentRoute: RefData.getInstance().currentRoute
     };
   }
 });

src/sites/doc/views/Index.vue

@@ -19,7 +19,7 @@ import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -35,7 +35,7 @@ export default defineComponent({
 
     const watchDemoUrl = (router: RouteLocationNormalized) => {
       const { origin, pathname } = window.location;
-      currentRoute.value = router.name as string;
+      RefData.getInstance().currentRoute.value = router.name as string;
       data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${
         router.path
       }`;

src/sites/doc/views/Main.vue

@@ -113,7 +113,7 @@ import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import router from '../router';
-import { themeColor } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 import { ApiService } from '@/sites/service/ApiService';
 export default defineComponent({
   name: 'main',
@@ -175,7 +175,7 @@ export default defineComponent({
 
     const themeName = computed(() => {
       return function() {
-        return `doc-content-${themeColor.value}`;
+        return `doc-content-${RefData.getInstance().themeColor.value}`;
       };
     });
     const toLink = (id: number) => {

src/sites/doc/views/Resource.vue

@@ -83,7 +83,7 @@ import {
 } from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 import { ApiService } from '@/sites/service/ApiService';
 export default defineComponent({
   name: 'doc',
@@ -111,7 +111,7 @@ export default defineComponent({
       activeIndex: 0
     });
     const watchDemoUrl = (router: RouteLocationNormalized) => {
-      currentRoute.value = router.name as string;
+      RefData.getInstance().currentRoute.value = router.name as string;
     };
     onMounted(() => {
       // 路由

src/sites/mobile/App.vue

@@ -19,7 +19,7 @@ export default defineComponent({
 
     //返回demo页
     const goBack = () => {
-      router.push('/');
+      router.back();
     };
     // 当当前路由发生变化时，调用回调函数
     watch(