fix: calendar popup v-model attr

Author: richard1015

src/packages/calendar/demo.vue

@@ -10,7 +10,7 @@
       >
       </nut-cell>
       <nut-calendar
-        :visible="isVisible"
+        v-model:visible="isVisible"
         :default-value="date"
         @close="closeSwitch('isVisible')"
         @choose="setChooseValue"
@@ -29,7 +29,7 @@
       >
       </nut-cell>
       <nut-calendar
-        :visible="isVisible1"
+        v-model:visible="isVisible1"
         :default-value="date1"
         type="range"
         :start-date="`2019-12-22`"
@@ -50,7 +50,7 @@
       >
       </nut-cell>
       <nut-calendar
-        :visible="isVisible3"
+        v-model:visible="isVisible3"
         @close="closeSwitch('isVisible3')"
         @choose="setChooseValue3"
         :default-value="date3"
@@ -79,7 +79,6 @@ import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
 
 const { createDemo } = createComponent('calendar');
-import Utils from '@/utils/date';
 
 interface TestCalendarState {
   isVisible: boolean;

src/packages/calendar/doc.md

@@ -27,7 +27,7 @@ app.use(Calendar);
 >
 </nut-cell>
 <nut-calendar
-  :visible="isVisible"
+  v-model:visible="isVisible"
   :default-value="date"
   @close="closeSwitch('isVisible')"
   @choose="setChooseValue"
@@ -74,7 +74,7 @@ setup() {
 >
 </nut-cell>
 <nut-calendar
-  :visible="isVisible"
+  v-model:visible="isVisible"
   :default-value="date"
   type="range"
   :start-date="`2019-12-22`"
@@ -120,7 +120,7 @@ setup() {
 >
 </nut-cell>
 <nut-calendar
-  :visible="isVisible"
+  v-model:visible="isVisible"
   @close="closeSwitch('isVisible')"
   @choose="setChooseValue"
   :start-date="null"

src/packages/calendar/index.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   flex: 1;
-  height: 100%;
+  height: 518px;
   padding-top: 132px;
   padding-bottom: 78px;
   color: $calendar-base-color;

src/packages/calendar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <nut-popup
     v-if="poppable"
-    v-model:visible="childIsVisible"
+    :visible="visible"
     position="bottom"
     round
     :closeable="true"
@@ -39,7 +39,7 @@
   </nut-calendar-item>
 </template>
 <script lang="ts">
-import { PropType, reactive, ref, watch, toRefs } from 'vue';
+import { PropType, ref } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('calendar');
 import Popup from '@/packages/popup/index.vue';
@@ -62,7 +62,8 @@ export default create({
       default: true
     },
     visible: {
-      type: Boolean
+      type: Boolean,
+      default: false
     },
     title: {
       type: String,
@@ -85,19 +86,14 @@ export default create({
     // element refs
     const calendarRef = ref<null | HTMLElement>(null);
 
-    // state
-    const state = reactive({
-      childIsVisible: false
-    });
-
     // methods
     const update = () => {
-      state.childIsVisible = false;
+      emit('update:visible', false);
     };
 
     const close = () => {
-      emit('update:visible', false);
       emit('close');
+      emit('update:visible', false);
     };
 
     const choose = (param: string) => {
@@ -109,23 +105,12 @@ export default create({
       close();
     };
 
-    watch(
-      () => props.visible,
-      val => {
-        if (val) {
-          state.childIsVisible = true;
-        }
-      }
-    );
-
     return {
       closePopup,
       update,
       close,
       choose,
-      calendarRef,
-      ...toRefs(state),
-      ...toRefs(props)
+      calendarRef
     };
   }
 });