date picker component (#591)

* date picker component

* use bbui date picker in standard components

* using bbui component

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.31.0",
+    "@budibase/bbui": "^1.32.0",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -250,6 +250,19 @@ export default {
             ],
           },
         },
+        {
+          _component: "@budibase/standard-components/datepicker",
+          name: "Date Picker",
+          description: "A basic date picker component",
+          icon: "ri-calendar-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Placeholder", key: "placeholder", control: Input },
+            ],
+          },
+        },
       ],
     },
     {

packages/builder/yarn.lock

@@ -688,11 +688,13 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.31.0":
+"@budibase/bbui@^1.32.0":
-  version "1.31.0"
+  version "1.32.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.31.0.tgz#5645875abb4a722c0fae7bd980bc71f40d234f2f"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.32.0.tgz#4b099e51cf8aebfc963a763bb9687994a2ee26a8"
+  integrity sha512-pY4bhoBhE3EAdaO/wWkbOXaHtGpPxaRFFVUBe9DyoLZ6bv6Pg6y3SDMoMNaKtr3ybtum7pk9eDZOjMMYlGC4AQ==
   dependencies:
     sirv-cli "^0.4.6"
+    svelte-flatpickr "^2.4.0"
 
 "@budibase/client@^0.1.19":
   version "0.1.19"
@@ -2938,6 +2940,11 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+flatpickr@^4.5.2:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.6.tgz#34d2ad80adfa34254e62583a34264d472f1038d6"
+  integrity sha512-EZ48CJMttMg3maMhJoX+GvTuuEhX/RbA1YeuI19attP3pwBdbYy6+yqAEVm0o0hSBFYBiLbVxscLW6gJXq6H3A==
+
 flatpickr@^4.5.7:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.3.tgz#15a8b76b6e34e3a072861250503a5995b9d3bc60"
@@ -5970,6 +5977,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-flatpickr@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
+  integrity sha512-UUC5Te+b0qi4POg7VDwfGh0m5W3Hf64OwkfOTj6FEe/dYZN4cBzpQ82EuuQl0CTbbBAsMkcjJcixV1d2V6EHCQ==
+  dependencies:
+    flatpickr "^4.5.2"
+
 svelte-jester@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/svelte-jester/-/svelte-jester-1.0.6.tgz#a95da31acdcdd339468745c05c63fd0b52acff93"

packages/standard-components/components.json

@@ -620,6 +620,13 @@
 			"width": "number"
 		}
 	},
+	"datepicker": {
+		"description": "Date Picker",
+		"bindable": "value",
+		"props": {
+			"placeholder": "string"
+		}
+	},
 	"datachart": {
 		"description": "shiny chart",
 		"data": true,

packages/standard-components/package.json

@@ -36,11 +36,12 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.29.3",
+    "@budibase/bbui": "^1.32.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",
     "fusioncharts": "^3.15.1-sr.1",
+    "svelte-flatpickr": "^2.4.0",
     "svelte-fusioncharts": "^1.0.0"
   }
 }

packages/standard-components/src/Chart/index.js

@@ -1,4 +1,5 @@
 import "britecharts/dist/css/britecharts.min.css"
+
 export { default as donut } from "./Donut.svelte"
 export { default as bar } from "./Bar.svelte"
 export { default as line } from "./Line.svelte"

packages/standard-components/src/DatePicker.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Flatpickr from "svelte-flatpickr"
+  import { DatePicker } from "@budibase/bbui"
+
+  export let placeholder
+  export let value
+
+  export let _bb
+
+  function handleChange(event) {
+    const [fullDate, dateStr, instance] = event.detail
+    if (_bb) {
+      _bb.setBinding("value", fullDate)
+    }
+  }
+</script>
+
+<DatePicker {placeholder} on:change={handleChange} {value} />

packages/standard-components/src/index.js

@@ -26,4 +26,5 @@ export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
 export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
+export { default as datepicker } from "./DatePicker.svelte"
 export * from "./Chart"