Merge pull request #193 from silinternational/develop

Release version 10.0.0

components/custom/DateInput/DateInput.svelte

@@ -0,0 +1,126 @@
+<script>
+/**
+ * @component DateInput
+ * @description Date input with custom styling
+ */
+
+/**
+ * @prop {string}
+ * @description sets color of input text
+ */
+export let color = 'black'
+
+/**
+ * @prop {string}
+ * @description sets color of input border
+ */
+export let borderColor = 'black'
+
+/**
+ * @prop {string}
+ * @description sets color of input text after blur when required and empty
+ */
+export let errorColor = 'red'
+
+/**
+ * @prop {string}
+ * @description sets padding of input
+ */
+export let padding = '12px'
+
+/**
+ * @prop {string}
+ * @description sets width of input
+ */
+export let width = '220px'
+
+/**
+ * @prop {string}
+ * @description sets font size input text
+ */
+export let fontSize = '14px'
+
+/**
+ * @prop {string}
+ * @description sets name of input
+ */
+export let name = ''
+
+/**
+ * @prop {string} date in locale with no time data
+ * @description sets initial date of input
+ */
+export let value = ''
+
+/**
+ * @prop {boolean}
+ * @description sets whether input is disabled
+ */
+export let disabled = false
+
+/**
+ * @prop {boolean}
+ * @description sets whether input is focused on load
+ */
+export let autofocus = false
+
+/**
+ * @prop {boolean}
+ * @description sets whether input is required and has error color when empty after blur
+ */
+export let required = false
+
+const onBlur = (e) => {
+  if (required && !e.target.value) {
+    e.target.style.color = errorColor
+    e.target.style.borderColor = errorColor
+  }
+}
+
+const onInput = (e) => {
+  if (required && e.target.value) {
+    e.target.style.color = color
+    e.target.style.borderColor = borderColor
+  }
+}
+
+const focus = (node) => autofocus && node.focus()
+</script>
+
+<style>
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.custom-field {
+  font-size: 14px;
+  position: relative;
+  border-top: 20px solid transparent;
+}
+
+.custom-field input {
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  font-family: var(--mdc-typography-font-family);
+}
+</style>
+
+<label class="{$$props.class} custom-field">
+  <input
+    type="date"
+    {required}
+    {disabled}
+    {name}
+    bind:value
+    on:blur={onBlur}
+    on:input={onInput}
+    use:focus
+    style:color
+    style:padding
+    style:width
+    style:font-size={fontSize}
+    style:--border-color={borderColor}
+  />
+</label>

components/custom/DateInput/index.js

@@ -0,0 +1,3 @@
+import DateInput from './DateInput.svelte'
+
+export default DateInput

components/custom/Form/Form.svelte

@@ -4,12 +4,6 @@ import { generateRandomID } from '../../../random'
 
 export let id = generateRandomID('form-')
 export let saveToLocalStorage = false
-/**
- * @deprecated The 'success' prop has been deprecated in favor of using
- * 'event.target.reset' on the form's submit event.
- * Please use 'event.target.reset' instead.
- */
-export let success = false
 
 let form = {}
 
@@ -18,15 +12,6 @@ onMount(() => {
 })
 
 $: saveToLocalStorage && restoreFormValues(form)
-$: success && resetForm(form)
-
-const resetForm = (form) => {
-  console.warn(
-    '@silintl/ui-components: success prop is deprecated, use `Form on:submit={(event) => event.target.reset()}` instead'
-  )
-  form.reset()
-  sessionStorage.removeItem(id)
-}
 
 const resetSelf = (event) => {
   event.target.reset()

components/custom/index.js

@@ -3,5 +3,6 @@ import Form from './Form'
 import StaticChip from './StaticChip'
 import SearchableSelect from './SearchableSelect'
 import FileDropArea from './FileDropArea'
+import DateInput from './DateInput'
 
-export { Badge, FileDropArea, Form, SearchableSelect, StaticChip }
+export { Badge, DateInput, FileDropArea, Form, SearchableSelect, StaticChip }

components/mdc/Select/Select.svelte

@@ -6,7 +6,7 @@ import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
 
 export let label = 'Select'
 
-/** @type {{id, name}[]} */
+/** @type {{id: string, name: string}[]} */
 export let options = []
 export let width = '280px'
 export let disabled = false