Add disabled property to input with styling and condition (#25)

Author: ChromuSx

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Next
+- Add `disabled` property 
+
 ## 2.1.1 - 2022 Aug 15
 - Fix broken month dropdown on Firefox
 - Fix unreliable clamping to min/max dates

src/lib/DateInput.svelte

@@ -44,6 +44,8 @@
   export let placeholder = '2020-12-31 23:00:00'
   /** Whether the text is valid */
   export let valid = true
+  /** Disable the input **/
+  export let disabled = false
 
   /** Format string */
   export let format = 'yyyy-MM-dd HH:mm:ss'
@@ -145,11 +147,12 @@
     type="text"
     bind:value={text}
     {placeholder}
+    {disabled}
     on:focus={() => (visible = true)}
     on:mousedown={() => (visible = true)}
     on:input={input}
   />
-  {#if visible}
+  {#if visible && !disabled}
     <div class="picker" class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
       <DateTimePicker
         on:focusout={onFocusOut}
@@ -182,6 +185,8 @@
     &:focus
       border-color: var(--date-picker-highlight-border, #0269f7)
       box-shadow: 0px 0px 0px 2px var(--date-picker-highlight-shadow, rgba(#0269f7, 0.4))
+    &:disabled
+      opacity: 0.5
   .invalid
     border: 1px solid rgba(#f92f72, 0.5)
     background-color: rgba(#f92f72, 0.1)

src/routes/_DateInput.svelte

@@ -9,6 +9,7 @@
   let max: Date
   let valid: boolean
   let visible: boolean
+  let disabled: boolean
   let closeOnSelection: boolean
   let browseWithoutSelecting: boolean
   let format: string
@@ -24,6 +25,7 @@
     bind:valid
     bind:format
     bind:visible
+    bind:disabled
     bind:closeOnSelection
     bind:browseWithoutSelecting
   />
@@ -37,6 +39,7 @@
     <Prop label="valid" bind:value={valid} />
     <Prop label="format" bind:value={format} />
     <Prop label="visible" bind:value={visible} />
+    <Prop label="disabled" bind:value={disabled} />
     <Prop label="closeOnSelection" bind:value={closeOnSelection} />
     <Prop label="browseWithoutSelecting" bind:value={browseWithoutSelecting} />
     <Prop label="locale">Default</Prop>

src/routes/docs.md

@@ -38,6 +38,7 @@ The component will not assign a date value until a specific date is selected in
 | `valid`                  | bool         | Whether the text is valid                            |
 | `format`                 | string       | Format string                                        |
 | `visible`                | bool         | Whether the date popup is visible                    |
+| `disabled`               | bool         | Disable the input                                    |
 | `closeOnSelection`       | bool         | Close the date popup when a date is selected         |
 | `browseWithoutSelecting` | bool         | Wait with updating the date until a date is selected |
 | `locale`                 | Locale       | Locale object for internationalization               |