DatePicker rework (#737)

* fix(date-picker): append calendar to date picker element #345

Fixes #345

* fix(date-picker): do not import rangePlugin from esm folder

* fix(date-picker): correctly type change event for single/range types

* feat(date-picker): add valueFrom, valueTo for range datepicker

* docs(date-picker): add range type example

* docs(date-picker): extract range example to iframe

* docs(date-picker): extract single type to iframe

docs/src/COMPONENT_API.json

@@ -2393,13 +2393,24 @@
           "reactive": true
         },
         {
-          "name": "appendTo",
+          "name": "valueFrom",
           "kind": "let",
-          "description": "Specify the element to append the calendar to",
-          "type": "HTMLElement",
+          "description": "Specify the date picker start date value (from)\nOnly works with the \"range\" date picker type",
+          "type": "string",
+          "value": "\"\"",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
+        },
+        {
+          "name": "valueTo",
+          "kind": "let",
+          "description": "Specify the date picker end date value (to)\nOnly works with the \"range\" date picker type",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
         },
         {
           "name": "dateFormat",
@@ -2474,11 +2485,15 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }

docs/src/pages/components/DatePicker.svx

@@ -57,9 +57,11 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
-<DatePicker datePickerType="single">
-  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
-</DatePicker>
+<FileSource src="/framed/DatePicker/DatePickerSingle" />
+
+### Range
+
+<FileSource src="/framed/DatePicker/DatePickerRange" />
 
 ### Skeleton
 

docs/src/pages/framed/DatePicker/DatePickerRange.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="range" on:change>
+  <DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
+  <DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
+</DatePicker>

docs/src/pages/framed/DatePicker/DatePickerSingle.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="single" on:change>
+  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+</DatePicker>

docs/vite.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   optimizeDeps: {
-    include: ["clipboard-copy"],
+    include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
     exclude: ["@sveltech/routify"],
   },
 };