Merge pull request jd-opensource#494 from guoxiao158/next

fix: input 迁移

src/config.json

@@ -518,6 +518,7 @@
         },
         {
           "name": "Input",
+          "taro": true,
           "sort": 2,
           "cName": "输入框",
           "type": "component",
@@ -548,6 +549,7 @@
         },
         {
           "version": "3.0.0",
+          "taro": true,
           "name": "Calendar",
           "type": "component",
           "cName": "日历",
@@ -578,6 +580,7 @@
         },
         {
           "version": "3.0.0",
+          "taro": true,
           "name": "TextArea",
           "type": "component",
           "cName": "文本域",

src/packages/__VUE/calendar/index.scss

@@ -186,3 +186,6 @@
     }
   }
 }
+.nut-calendar-taro {
+  height: 65vh;
+}

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

@@ -0,0 +1,129 @@
+<template>
+  <nut-popup
+    v-if="poppable"
+    v-model:visible="visible"
+    position="bottom"
+    round
+    :closeable="true"
+    @click-overlay="closePopup"
+    @click-close-icon="closePopup"
+  >
+    <nut-calendar-item
+      props
+      ref="calendarRef"
+      :type="type"
+      :is-auto-back-fill="isAutoBackFill"
+      :poppable="poppable"
+      :title="title"
+      :default-value="defaultValue"
+      :start-date="startDate"
+      :end-date="endDate"
+      @update="update"
+      @close="close"
+      @choose="choose"
+    >
+    </nut-calendar-item>
+  </nut-popup>
+
+  <nut-calendar-item
+    v-else
+    :type="type"
+    :is-auto-back-fill="isAutoBackFill"
+    :poppable="poppable"
+    :title="title"
+    :default-value="defaultValue"
+    :start-date="startDate"
+    :end-date="endDate"
+    @close="close"
+    @choose="choose"
+  >
+  </nut-calendar-item>
+</template>
+<script lang="ts">
+import { PropType, ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { create } = createComponent('calendar');
+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],
+  components: {
+    'nut-calendar-item': CalendarItem,
+    'nut-popup': Popup
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'one'
+    },
+    isAutoBackFill: {
+      type: Boolean,
+      default: false
+    },
+    poppable: {
+      type: Boolean,
+      default: true
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '日历选择'
+    },
+    defaultValue: {
+      type: String as PropType<InputDate>
+    },
+    startDate: {
+      type: String,
+      default: Utils.getDay(0)
+    },
+    endDate: {
+      type: String,
+      default: Utils.getDay(365)
+    }
+  },
+  emits: ['choose', 'close', 'update:visible'],
+  setup(props, { emit }) {
+    // element refs
+    const calendarRef = ref<null | HTMLElement>(null);
+
+    // methods
+    const update = () => {
+      emit('update:visible', false);
+    };
+
+    const close = () => {
+      emit('close');
+      emit('update:visible', false);
+    };
+
+    const choose = (param: string) => {
+      close();
+      emit('choose', param);
+    };
+
+    const closePopup = () => {
+      close();
+    };
+
+    return {
+      closePopup,
+      update,
+      close,
+      choose,
+      calendarRef
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.popup-box {
+  height: 518px;
+}
+</style>

src/packages/__VUE/calendaritem/index.scss

@@ -190,3 +190,6 @@
     }
   }
 }
+.nut-calendar-taro {
+  height: 65vh;
+}

src/packages/__VUE/calendaritem/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    class="nut-calendar"
+    class="nut-calendar .nut-calendar-taro"
     :class="{
       'nut-calendar-tile': !poppable,
       'nut-calendar-nofooter': isAutoBackFill

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/input/index.taro.vue

@@ -0,0 +1,193 @@
+<template>
+  <view :class="classes">
+    <view class="nut-input-label">
+      <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"
+      :maxlength="maxLength"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      @input="valueChange"
+      @focus="valueFocus"
+      @blur="valueBlur"
+    />
+    <view
+      @click="handleClear"
+      class="nut-textinput-clear"
+      v-if="clearable && !readonly"
+      v-show="active && modelValue.length > 0"
+    >
+      <nut-icon name="close-little" size="12px"></nut-icon>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+import { ref, computed } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+
+console.log('aaaa');
+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 {
+  eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
+  params: (string | number | Event)[];
+}
+export default create({
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入信息'
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    requireShow: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    textAlign: {
+      type: String,
+      default: 'left'
+    },
+    maxLength: {
+      type: [String, Number],
+      default: '99999999'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  emits: ['change', 'update:modelValue', 'blur', 'focus', 'clear'],
+
+  setup(props, { emit }) {
+    const active = ref(false);
+
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-disabled`]: props.disabled
+      };
+    });
+
+    const styles = computed(() => {
+      return {
+        textAlign: props.textAlign
+      };
+    });
+
+    const valueChange = (event: Event) => {
+      const input = event.target as HTMLInputElement;
+      let val = input.value;
+
+      if (props.maxLength && val.length > Number(props.maxLength)) {
+        val = val.slice(0, Number(props.maxLength));
+      }
+      if (props.type === 'digit') {
+        val = formatNumber(val, true);
+      }
+      if (props.type === 'number') {
+        val = formatNumber(val, false);
+      }
+      emit('change', val, event);
+      emit('update:modelValue', val, event);
+    };
+
+    const valueFocus = (event: Event) => {
+      const input = event.target as HTMLInputElement;
+      let value = input.value;
+      active.value = true;
+      emit('focus', value, event);
+    };
+
+    const valueBlur = (event: Event) => {
+      setTimeout(() => {
+        active.value = false;
+      }, 0);
+
+      const input = event.target as HTMLInputElement;
+      let value = input.value;
+      emit('blur', value, event);
+    };
+
+    const handleClear = (event: Event) => {
+      emit('change', '', event);
+      emit('update:modelValue', '', event);
+    };
+
+    return {
+      active,
+      classes,
+      styles,
+      valueChange,
+      valueFocus,
+      valueBlur,
+      handleClear
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

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;