Merge branch 'taro-vue-test' of https://github.com/jdf2e/nutui into taro-vue-test

src/packages/__VUE/input/index.scss

@@ -17,6 +17,7 @@
     overflow: hidden;
     display: inline-block;
     text-align: left;
+    display: flex;
     .label-string {
       overflow: hidden;
       white-space: nowrap;
@@ -41,5 +42,7 @@
   }
   &-require {
     color: $primary-color;
+    display: inline-block;
+    margin-right: 5px;
   }
 }

src/packages/__VUE/textarea/demo.vue

@@ -7,7 +7,7 @@
     <h2>高度自定义，拉伸</h2>
     <nut-textarea v-model="value3" rows="10" autosize />
     <h2>只读</h2>
-    <nut-textarea readonly model-value="textarea直读状态" />
+    <nut-textarea readonly model-value="textarea只读状态" />
     <h2>禁用</h2>
     <nut-textarea
       disabled

src/packages/__VUE/textarea/index.scss

@@ -1,6 +1,7 @@
 .nut-textarea {
   position: relative;
   width: 100%;
+  box-sizing: border-box;
   display: flex;
   background: $white;
   font-size: $textarea-font;

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,5 +1,12 @@
 export default {
-  pages: ['pages/popup/demo', 'pages/inputnumber/demo', 'pages/button/demo'],
+  pages: [
+    'pages/input/demo',
+    'pages/popup/demo',
+    'pages/inputnumber/demo',
+    'pages/calendar/demo',
+    'pages/textarea/demo',
+    'pages/button/demo'
+  ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/sites/mobile-taro/vue/src/pages/calendar/demo.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Calendar from './index.taro.vue';
+
+const { createDemo } = createComponent('calendar');
+
+interface TestCalendarState {
+  isVisible: boolean;
+  date: string;
+  dateWeek: string;
+  isVisible1: boolean;
+  date1: string[];
+  date2: string;
+  isVisible3: boolean;
+  date3: string;
+}
+export default createDemo({
+  props: {},
+  components: {
+    'nut-calendar': Calendar
+  },
+  setup() {
+    const state: TestCalendarState = reactive({
+      isVisible: false,
+      date: '',
+      dateWeek: '',
+
+      isVisible1: false,
+      date1: ['2019-12-23', '2019-12-26'],
+
+      date2: '2020-07-08',
+
+      isVisible3: false,
+      date3: ''
+    });
+    const openSwitch = (param: string) => {
+      state[`${param}`] = true;
+    };
+
+    const closeSwitch = (param: string) => {
+      state[`${param}`] = false;
+    };
+
+    const setChooseValue = (param: string) => {
+      state.date = param[3];
+      state.dateWeek = param[4];
+    };
+
+    const setChooseValue1 = (param: string) => {
+      state.date1 = [...[param[0][3], param[1][3]]];
+    };
+
+    const setChooseValue2 = (param: string) => {
+      state.date2 = param[3];
+      console.log(state.date2);
+    };
+
+    const setChooseValue3 = (param: string) => {
+      state.date3 = param[3];
+    };
+
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue,
+      setChooseValue1,
+      setChooseValue2,
+      setChooseValue3
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.test-calendar-wrapper {
+  display: flex;
+  width: 100%;
+  height: 613px;
+  overflow: hidden;
+}
+</style>

src/sites/mobile-taro/vue/src/pages/calendar/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Calendar'
+};

src/sites/mobile-taro/vue/src/pages/calendar/index.taro.vue

@@ -40,11 +40,12 @@
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { create } = createComponent('calendar');
-import Popup from '@/packages/__VUE/popup/index.vue';
-import CalendarItem from '@/packages/__VUE/calendaritem/index.vue';
-import Utils from '@/packages/utils/date';
+import Popup from './../popup/index.taro.vue';
+// import CalendarItem from '@/packages/__VUE/calendaritem/index.vue';
+import CalendarItem from './../calendaritem/index.taro.vue';
+import Utils from './../../../../../../packages/utils/date';
 type InputDate = string | string[];
 export default create({
   children: [CalendarItem, Popup],

src/sites/mobile-taro/vue/src/pages/calendaritem/index.taro.vue

@@ -86,10 +86,10 @@
 </template>
 <script lang="ts">
 import { PropType, reactive, ref, watch, toRefs } from 'vue';
-import { createComponent } from '../../utils/create';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { create } = createComponent('calendar-item');
-import Utils from '../../utils/date';
-import requestAniFrame from '../../utils/raf';
+import Utils from './../../../../../../packages/utils/date';
+import requestAniFrame from './../../../../../../packages/utils/raf';
 type InputDate = string | string[];
 interface CalendarState {
   yearMonthTitle: string;
@@ -664,5 +664,6 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/calendaritem/index.scss';
+// @import 'index.scss';
 </style>

src/sites/mobile-taro/vue/src/pages/input/demo.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="demo full">
+    <h2>基础用法</h2>
+    <nut-input
+      v-model="state.val1"
+      @change="change"
+      @focus="focus"
+      @blur="blur"
+      label="文本(异步)"
+    />
+    <nut-input
+      placeholder="请输入文本"
+      @change="change"
+      v-model="state.val0"
+      :require-show="true"
+      label="文本"
+      @clear="clear"
+    />
+    <h2>禁用输入框</h2>
+    <nut-input
+      v-model="state.val2"
+      @change="change"
+      :disabled="true"
+      label="文本"
+    />
+    <nut-input
+      v-model="state.val3"
+      @change="change"
+      :readonly="true"
+      label="文本"
+    />
+    <h2>限制输入长度</h2>
+    <nut-input
+      v-model="state.val4"
+      @change="change"
+      max-length="7"
+      label="限制7"
+    />
+    <h2>自定义类型</h2>
+    <nut-input
+      v-model="state.val7"
+      @change="change"
+      type="password"
+      label="密码"
+    />
+    <nut-input
+      v-model="state.val5"
+      @change="change"
+      type="number"
+      label="整数"
+    />
+    <nut-input
+      v-model="state.val6"
+      @change="change"
+      type="digit"
+      placeholder="支持小数点的输入"
+      label="数字"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Input from './index.taro.vue';
+const { createDemo } = createComponent('input');
+export default createDemo({
+  props: {},
+  components: {
+    'nut-input': Input
+  },
+  setup() {
+    const state = reactive({
+      val0: '',
+      val1: '初始数据',
+      val2: '禁止修改',
+      val3: 'readonly 只读',
+      val4: '',
+      val5: '',
+      val6: '',
+      val7: '',
+      val8: '文案'
+    });
+    setTimeout(function() {
+      state.val1 = '异步数据';
+    }, 2000);
+    const change = (value: string | number, event: Event) => {
+      console.log('change: ', value, event);
+    };
+    const focus = (value: string | number, event: Event) => {
+      console.log('focus:', value, event);
+    };
+    const blur = (value: string | number, event: Event) => {
+      console.log('blur:', value, event);
+    };
+    const clear = (value: string | number) => {
+      console.log('clear:', value);
+    };
+
+    return {
+      state,
+      change,
+      blur,
+      clear,
+      focus
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/sites/mobile-taro/vue/src/pages/input/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Input'
+};

src/sites/mobile-taro/vue/src/pages/input/index.taro.vue

@@ -4,7 +4,11 @@
       <view class="nut-input-require" v-if="requireShow">*</view>
       <view v-if="label" class="label-string">{{ label }}</view>
     </view>
+    <view v-if="readonly">
+      {{ modelValue }}
+    </view>
     <input
+      v-else
       class="input-text"
       :style="styles"
       :type="type"
@@ -29,8 +33,39 @@
 </template>
 <script lang="ts">
 import { ref, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { formatNumber } from './util';
+import { createComponent } from './../../../../../../packages/utils/create';
+
+function trimExtraChar(value: string, char: string, regExp: RegExp) {
+  const index = value.indexOf(char);
+
+  if (index === -1) {
+    return value;
+  }
+
+  if (char === '-' && index !== 0) {
+    return value.slice(0, index);
+  }
+
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+}
+
+function formatNumber(value: string, allowDot = true, allowMinus = true) {
+  if (allowDot) {
+    value = trimExtraChar(value, '.', /\./g);
+  } else {
+    value = value.replace(/\./g, '');
+  }
+
+  if (allowMinus) {
+    value = trimExtraChar(value, '-', /-/g);
+  } else {
+    value = value.replace(/-/, '');
+  }
+
+  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+
+  return value.replace(regExp, '');
+}
 
 const { componentName, create } = createComponent('input');
 interface Events {
@@ -73,7 +108,7 @@ export default create({
     },
     maxLength: {
       type: [String, Number],
-      default: ''
+      default: '99999999'
     },
     clearable: {
       type: Boolean,
@@ -153,5 +188,6 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+// @import 'index.scss';
+@import '../../../../../../packages/__VUE/input/index.scss';
 </style>

src/sites/mobile-taro/vue/src/pages/textarea/demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="demo full">
+    <h2>基础用法</h2>
+    <nut-textarea v-model="value" />
+    <h2>显示字数统计</h2>
+    <nut-textarea v-model="value2" limit-show max-length="20" />
+    <h2>高度自定义，拉伸</h2>
+    <nut-textarea v-model="value3" rows="10" autosize />
+    <h2>只读</h2>
+    <nut-textarea readonly model-value="textarea只读状态" />
+    <h2>禁用</h2>
+    <nut-textarea
+      disabled
+      model-value="textarea禁用状态"
+      limit-show
+      max-length="20"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Textarea from './index.taro.vue';
+const { createDemo } = createComponent('textarea');
+export default createDemo({
+  props: {},
+  components: {
+    'nut-textarea': Textarea
+  },
+  setup() {
+    const value = ref('');
+    const value2 = ref('');
+    const value3 = ref('');
+
+    return {
+      value,
+      value2,
+      value3
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/sites/mobile-taro/vue/src/pages/textarea/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Textarea'
+};

src/sites/mobile-taro/vue/src/pages/textarea/index.taro.vue

@@ -1,6 +1,10 @@
 <template>
   <view :class="classes">
+    <view v-if="readonly">
+      {{ modelValue }}
+    </view>
     <textarea
+      v-else
       class="nut-textarea__textarea"
       :style="styles"
       :rows="rows"
@@ -19,8 +23,8 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { computed } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
 
 const { componentName, create } = createComponent('textarea');
 
@@ -124,5 +128,5 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/textarea/index.scss';
 </style>