From 63bb497eb0bf72b4a7c9715208be0f7cfff6ac2a Mon Sep 17 00:00:00 2001
From: KeiferJu <jkf19980216@qq.com>
Date: Mon, 23 Mar 2020 14:23:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=AD=E4=BB=A3=E7=89=88=E6=9C=AC=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/routes/components/jsdocs.json      | 37 ++++++++++-
 package.json                                |  2 +-
 src/components/Datepicker/DatePicker.svelte | 71 +++++++++++----------
 src/components/Timepicker/TimePicker.svelte | 30 +++++----
 4 files changed, 92 insertions(+), 48 deletions(-)

diff --git a/docs/src/routes/components/jsdocs.json b/docs/src/routes/components/jsdocs.json
index ee47082..ada700b 100644
--- a/docs/src/routes/components/jsdocs.json
+++ b/docs/src/routes/components/jsdocs.json
@@ -76,10 +76,10 @@
     {
       "description": "当前日期",
       "type": [
-        "DateObject"
+        "timestamp"
       ],
       "defaultvalue": "",
-      "name": "nowDate",
+      "name": "date",
       "values": ""
     },
     {
@@ -176,6 +176,22 @@
       "defaultvalue": "left",
       "name": "align",
       "values": "'left'、'center'、'right'"
+    },{
+      "description": "图标",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": "true",
+      "name": "icon",
+      "values": ""
+    },{
+      "description": "输入框样式类",
+      "type": [
+        "String"
+      ],
+      "defaultvalue": "",
+      "name": "inputClass",
+      "values": ""
     }
   ],
   "Timepicker": [
@@ -207,6 +223,7 @@
       "values": ""
     },
     {
+      "isEvent": true,
       "description": "选定事件",
       "name": "timeChecked",
       "values": ""
@@ -228,6 +245,22 @@
       "defaultvalue": "left",
       "name": "align",
       "values": "'left'、'center'、'right'"
+    },{
+      "description": "图标",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": "true",
+      "name": "icon",
+      "values": ""
+    },{
+      "description": "输入框样式类",
+      "type": [
+        "String"
+      ],
+      "defaultvalue": "",
+      "name": "inputClass",
+      "values": ""
     }
   ],
   "Dialog": [
diff --git a/package.json b/package.json
index e909d52..ebeef1e 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "svelma-pro",
   "svelte": "src/index.js",
   "description": "Based on svelma project extension and modification",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "KeiferJu",
   "license": "MIT",
   "keywords": [
diff --git a/src/components/Datepicker/DatePicker.svelte b/src/components/Datepicker/DatePicker.svelte
index a9f9865..5762011 100644
--- a/src/components/Datepicker/DatePicker.svelte
+++ b/src/components/Datepicker/DatePicker.svelte
@@ -9,11 +9,12 @@
 
   import { obtainWeeks } from './main.js'
   import { createEventDispatcher } from 'svelte'
+  import Input from '../Input.svelte'
 
   const dispatch = createEventDispatcher()
 
   export let width = '100%'
-  export let nowDate = new Date()
+  let nowDate = new Date()
   export let i18n = 'ZH'
 
   export let markDate = []
@@ -26,20 +27,27 @@
 
   export let pickerRule = 'singleChoice'
 
- export let align = "left";
-  let left;
+  export let align = 'left'
+  export let icon = true;
+  export let inputClass = '';
+  let left
   $: {
-    if(align === 'center'){
-      left = 'calc(50% - 150px)';
-    }else if(align === 'right'){
+    if (align === 'center') {
+      left = 'calc(50% - 150px)'
+    } else if (align === 'right') {
       left = 'calc(100% - 300px)'
-    }else{
-      left = 0;
+    } else {
+      left = 0
     }
-
   }
 
   let pickerResult = []
+  let rangePickerResult = '';
+  $: {
+     if (pickerRule === 'rangeChoice') {
+       rangePickerResult = pickerResult[0].start+ '  ~  ' + pickerResult[1].end
+  }
+  }
 
   if (pickerRule === 'singleChoice') {
     const dt = new Date(Number(date))
@@ -173,49 +181,46 @@
 
   .range-input {
     width: 50%;
+    display: inline-block;
   }
 
-  .range-input.left,
-  .range-input.left:focus,
-  .range-input.left:active {
+  /* .input.left,
+  .input.left:focus,
+  .input.left:hover
+  .input.left:active {
     border-right: 0;
+    border-color: #dbdbdb !important;
     box-shadow: none !important;
-    /* float: left; */
   }
 
-  .range-input.right,
-  .range-input.right:focus,
-  .range-input.right:active {
+  .input.right,
+  .input.right:focus,
+  .input.right:hover,
+  .input.right:active {
     border-left: 0;
+    border-color: #dbdbdb !important;
     box-shadow: none !important;
-    float: right;
-  }
+  } */
 </style>
 
 <div style="width: {width};position: relative">
   {#if !calendar}
     {#if pickerRule === 'rangeChoice'}
       <div
-        style="position: relative;"
+        style="position: relative;margin: 5px 0 0 0;"
         on:click={() => {
           visible = !visible
         }}>
-        <input class="dp-input input is-primary range-input left" type="text" value={pickerResult[0].start} readonly />
-        <span class="fa fa-calendar date-icon" />
-        <input class="dp-input input is-primary range-input right" type="text" value={pickerResult[1].end} readonly />
-        <span class="fa fa-chevron-right date-icon" style="left: calc(50% - 5px);" />
+      <Input type="text" class={inputClass} bind:value={rangePickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" />
       </div>
     {:else}
-      <div style="position: relative;">
-        <input
-          class="dp-input input is-primary"
-          type="text"
-          value={pickerResult}
-          readonly
-          on:click={() => {
-            visible = !visible
-          }} />
-        <span class="fa fa-calendar date-icon" />
+      <div
+        style="position: relative;margin: 5px 0 0 0;"
+        on:click={() => {
+          visible = !visible
+        }}>
+        <Input type="text" class={inputClass} bind:value={pickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" />
+        <!-- <span class="fa fa-calendar date-icon" /> -->
       </div>
     {/if}
   {/if}
diff --git a/src/components/Timepicker/TimePicker.svelte b/src/components/Timepicker/TimePicker.svelte
index e5f8563..3965418 100755
--- a/src/components/Timepicker/TimePicker.svelte
+++ b/src/components/Timepicker/TimePicker.svelte
@@ -1,12 +1,15 @@
 <script>
   import Switcher from './Switcher.svelte'
   import { createEventDispatcher } from 'svelte'
+  import Input from '../Input.svelte'
 
   const dispatch = createEventDispatcher()
 
   export let width = '100%'
   export let hour12 = false // 是否12进制
    export let align = "left";
+     export let icon = true;
+  export let inputClass = '';
   let left;
   $: {
     if(align === 'center'){
@@ -156,7 +159,7 @@
     overflow: hidden;
   }
 
-  .touch-time-reset > button {
+  /* .touch-time-reset > button {
     width: 100px;
     height: 30px;
     border-radius: 15px;
@@ -170,7 +173,7 @@
   .touch-time-reset button:nth-child(1):active {
     -webkit-transform: scale(0.95);
     transform: scale(0.95);
-  }
+  } */
 
   .touch-time {
     /* font-size: 30px;
@@ -178,15 +181,15 @@
     font-size: 20px;
     font-weight: 500;
   }
-  .dp-input {
+  /* .dp-input {
     margin: 5px 0 0 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     display: inline-block;
     padding-left: 30px;
-  }
-  .date-icon {
+  } */
+  /* .date-icon {
     height: 40px;
     display: inline-block;
     width: 40px;
@@ -194,12 +197,14 @@
     bottom: 0;
     left: 10px;
     line-height: 40px;
-  }
+  } */
 </style>
 
-<div style="width: {width}">
-  <div style="position: relative">
-    <input
+<div style="width: {width};position: relative">
+  <div style="position: relative" on:click={() => {
+        visible = !visible
+      }} >
+    <!-- <input
       class="dp-input input is-primary"
       type="text"
       readonly
@@ -207,8 +212,10 @@
       on:click={() => {
         visible = !visible
       }} />
-    <span class="fa fa-clock date-icon" />
-    {#if visible}
+    <span class="fa fa-clock date-icon" /> -->
+    <Input type="text" class={inputClass} bind:value={_time} readonly iconPack="fa" icon="{icon? 'clock': ''}" />
+  </div>
+   {#if visible}
       <div class="touch-time-wrapper"  style="left: {left}">
         <div class="touch-time">{_time}</div>
         <div class="touch-time-picker">
@@ -235,5 +242,4 @@
       </div> -->
       </div>
     {/if}
-  </div>
 </div>