Closes #18

Support left aligned labels
melohagan · Nov 22, 2023 · 1d757ba · 1d757ba
1 parent 8e89fd0
commit 1d757ba
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kasper-date-picker",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Date picker that supports locale",
   "license": "MIT",
   "svelte": "index.js",

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -32,7 +32,8 @@
   $: formField = formApi?.registerField(field, "datetime", defaultValue, disabled, validation, formStep)
 
   let fieldApi;
-  let fieldState; 
+  let fieldState;
+  let visible; 
 
   $: unsubscribe = formField?.subscribe((value) => {
     fieldState = value?.fieldState;
@@ -132,43 +133,43 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
+<div class="spectrum-Form-item" class:visible use:styleable={$component.styles}>
   {#if !formContext}
     <div class="placeholder">Form components need to be wrapped in a form.</div>
   {:else}
-  <div class="spectrum-Form-item">
     <label
         class:hidden={!label}
         for={fieldState?.fieldId}
         class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
       >
         {label || " "}
     </label>
-  </div>
-    <DateInput 
-      value={fieldState.value} 
-      on:select={e => {
-        const changed = fieldApi?.setValue(e.detail)
-        if (onChange && changed) {
-          onChange({ value: e.detail })
-        }
-      }}
-      on:change={onChange}
-      {showCalendar}
-      {min}
-      {max}
-      {placeholder}
-      defaultDate={defaultValue}
-      disabled={fieldState?.disabled ?? disabled}
-      locale={kasperLocale}
-      {dfLocale}
-      {format}
-      {closeOnSelection}
-      {ignoreTimezones}
-    />
-    {#if fieldState?.error}
-      <div class="error">{fieldState.error}</div>
-    {/if}
+      <DateInput 
+        bind:visible
+        value={fieldState.value} 
+        on:select={e => {
+          const changed = fieldApi?.setValue(e.detail)
+          if (onChange && changed) {
+            onChange({ value: e.detail })
+          }
+        }}
+        on:change={onChange}
+        {showCalendar}
+        {min}
+        {max}
+        {placeholder}
+        defaultDate={defaultValue}
+        disabled={fieldState?.disabled ?? disabled}
+        locale={kasperLocale}
+        {labelPos}
+        {dfLocale}
+        {format}
+        {closeOnSelection}
+        {ignoreTimezones}
+      />
+      {#if fieldState?.error}
+        <div class="error">{fieldState.error}</div>
+      {/if}
   {/if}
 </div>
 
@@ -187,10 +188,20 @@
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);
   }
+  .spectrum-FieldLabel--above {
+    padding-bottom: 32px;
+  }
   .error {
     color: var(--spectrum-semantic-negative-color-default, 
                var(--spectrum-global-color-red-500));
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
+  .spectrum-Form-item.above {
+    display: flex;
+    flex-direction: column;
+  }
+  .visible {
+    overflow: hidden;
+  }
 </style>
diff --git a/src/DateInput.svelte b/src/DateInput.svelte
@@ -75,6 +75,9 @@
   export let locale: Locale = {}
   export let dfLocale = enUS
 
+  export let labelPos = ""
+  $: overlayOffsetClass = labelPos === "above" ? "above-label" : ""
+
   function valueUpdate(value: Date | null, formatTokens: FormatToken[]) {
     text = toText(value, formatTokens)
   }
@@ -189,10 +192,11 @@
   }
 </script>
 
-<div class="pickerContainer" on:focusout={onFocusOut} >
-  <div class="spectrum-Textfield spectrum-Textfield-input spectrum-InputGroup-input" on:keydown={keydown}>
+<div class="spectrumInputGroup" on:focusout={onFocusOut} >
+  <div class="spectrum-Textfield spectrum-InputGroup-textfield" on:keydown={keydown}>
     <input
       class:invalid={!valid}
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
       type="text"
       bind:value={text}
       {placeholder}
@@ -202,51 +206,37 @@
       on:input={input}
     />
   </div>
-  {#if visible && !disabled}
-    <div class="picker" class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
-      <DateTimePicker
-        on:select={onSelect}
-        bind:value={$store}
-        {min}
-        {max}
-        {locale}
-        {browseWithoutSelecting}
-        {showCalendar}
-        parsedPlaceholder={dateParse(placeholder, format, new Date(), { locale: dfLocale })}
-      />
-    </div>
-  {/if}
 </div>
+{#if visible && !disabled}
+<div class={`overlay ${overlayOffsetClass}`} class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
+  <DateTimePicker
+    on:select={onSelect}
+    bind:value={$store}
+    {min}
+    {max}
+    {locale}
+    {browseWithoutSelecting}
+    {showCalendar}
+    parsedPlaceholder={dateParse(placeholder, format, new Date(), { locale: dfLocale })}
+  />
+</div>
+{/if}
 
 <style lang="sass">
-  .pickerContainer
-    height: 32px
-    overflow: visible
   .spectrum-Textfield
     width: 100%
-  input
-    color: var(--date-picker-foreground, #000000)
-    background: var(--date-picker-background, #ffffff)
-    min-width: 0px
-    box-sizing: border-box
-    border: none
-    outline: none
-    transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
-    &: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)
     &:focus
       border-color: #f92f72
       box-shadow: 0px 0px 0px 2px rgba(#f92f72, 0.5)
-  .picker
-    display: none
-    position: sticky
-    z-index: 999
-    &.visible
-      display: block
+  .overlay
+    position: fixed;
+    z-index: 999;
+    width: 100vw;
+    height: 100vh;
+    max-height: 100%;
+  .above-label
+    margin-top: 56px
 </style>