From 58fdabe96b9a33cb2e365a4f35cc66d1c8ff79ee Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 28 Jan 2021 18:53:40 +0000 Subject: [PATCH] Integrate flatpickr with spectrum --- .../design/AppPreview/componentStructure.json | 2 +- .../DateTimeFieldSelect.svelte | 5 ++ .../PropertiesPanel/SettingsView.svelte | 2 + packages/standard-components/manifest.json | 36 +++++---- packages/standard-components/package.json | 1 + .../standard-components/src/DatePicker.svelte | 21 ----- .../src/forms/DateTimeField.svelte | 79 +++++++++++++++++++ .../src/forms/LongFormField.svelte | 2 - .../standard-components/src/forms/index.js | 1 + packages/standard-components/src/index.js | 2 - packages/standard-components/yarn.lock | 5 ++ 11 files changed, 116 insertions(+), 40 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte delete mode 100644 packages/standard-components/src/DatePicker.svelte create mode 100644 packages/standard-components/src/forms/DateTimeField.svelte diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 96e45ed658..6ecdcc8657 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -14,7 +14,7 @@ "optionsfield", "booleanfield", "longformfield", - "datepicker" + "datetimefield" ] }, { diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte new file mode 100644 index 0000000000..5c0ed8cb2f --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index 5575ac0b9f..a1be940553 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -22,6 +22,7 @@ import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte" import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte" import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte" + import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte" export let componentDefinition = {} export let componentInstance = {} @@ -68,6 +69,7 @@ "field/options": OptionsFieldSelect, "field/boolean": BooleanFieldSelect, "field/longform": LongFormFieldSelect, + "field/datetime": DateTimeFieldSelect, } const getControl = type => { diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index d0b81cdf13..4214346a7f 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -114,20 +114,6 @@ } ] }, - "datepicker": { - "name": "Date Picker", - "description": "A basic date picker component", - "icon": "ri-calendar-line", - "styleable": true, - "bindable": true, - "settings": [ - { - "type": "text", - "label": "Placeholder", - "key": "placeholder" - } - ] - }, "stackedlist": { "name": "Stacked List", "icon": "ri-archive-drawer-line", @@ -1257,5 +1243,27 @@ "placeholder": "Type something..." } ] + }, + "datetimefield": { + "name": "Date Picker", + "icon": "ri-calendar-line", + "styleable": true, + "settings": [ + { + "type": "field/datetime", + "label": "Field", + "key": "field" + }, + { + "type": "text", + "label": "Label", + "key": "label" + }, + { + "type": "text", + "label": "Placeholder", + "key": "placeholder" + } + ] } } diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 678e772c0f..eec67a7ff4 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -47,6 +47,7 @@ "@spectrum-css/checkbox": "^3.0.0-beta.6", "@spectrum-css/fieldlabel": "^3.0.0-beta.7", "@spectrum-css/icon": "^3.0.0-beta.2", + "@spectrum-css/inputgroup": "^3.0.0-beta.7", "@spectrum-css/menu": "^3.0.0-beta.5", "@spectrum-css/page": "^3.0.0-beta.0", "@spectrum-css/picker": "^1.0.0-beta.3", diff --git a/packages/standard-components/src/DatePicker.svelte b/packages/standard-components/src/DatePicker.svelte deleted file mode 100644 index 200a563516..0000000000 --- a/packages/standard-components/src/DatePicker.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - -
- -
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte new file mode 100644 index 0000000000..3245ce7662 --- /dev/null +++ b/packages/standard-components/src/forms/DateTimeField.svelte @@ -0,0 +1,79 @@ + + + + {#if fieldState} + +
+
+ +
+ +
+
+ {/if} +
+ + diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte index 0b2b873760..a9cd13de4a 100644 --- a/packages/standard-components/src/forms/LongFormField.svelte +++ b/packages/standard-components/src/forms/LongFormField.svelte @@ -1,6 +1,5 @@