css and functional tweaks

Author: mskocik

src/app.postcss

@@ -3,7 +3,7 @@
 /* .decoration-transparent {
   font-size: 2rem;
 } */
-@tailwind components;
+/* @tailwind components; */
 @tailwind utilities;
 
 h1 {

src/lib/components/Calendar.svelte

@@ -112,9 +112,7 @@
 
   $: times = dates.map(date => { date = new Date(date); date.setHours(0,0); return date.getTime() });
   $: dataset = compute(activeDate, dates, currentView, i18n, weekStart);
-  $: dayLabels = weekStart > -1
-    ? i18n.daysMin.concat(i18n.daysMin).slice(weekStart, 7 + weekStart)
-    : i18n.daysMin.slice(weekStart, 7 + weekStart)
+  $: dayLabels =  i18n.daysMin.concat(...i18n.daysMin.slice(1)).slice(weekStart, 7 + weekStart);
 
   function isBetween(/** @type {number} */num) {
     return dataset.prevTo <= num && num < dataset.nextFrom;
@@ -419,7 +417,7 @@
   padding: 0;
   font-size: 90%;
   text-align: center;
-  background-color: var(--sdt-bg-main);
+  background-color: var(--sdt-bg-main);;
 }
 .sdt-cal-th {
   text-align: center;
@@ -439,6 +437,7 @@
 .sdt-table {
   width: 100%;
   border-collapse: collapse;
+  margin: 0;
 }
 .sdt-table-height {
   height: 222px;

src/lib/components/SveltyPicker.svelte

@@ -6,6 +6,7 @@
 <script>
   /**
    * TODO: handle displayFormat change dynamically
+   * TODO: properly handle 'clear' when `autocommit` is `false (make it undoable)
   */
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { fade } from "svelte/transition";
@@ -203,15 +204,15 @@
   }
 
   function computeStringValue() {
-    return valueArray.join('');
+    return valueArray.join(',');
   }
 
   /**
    * @param {string[]} values
    * @returns {boolean}
   */
   function computeDirty(values) {
-    return values.join('') !== undoHistory.join('');
+    return values.join(',') !== undoHistory.join(',');
   }
   
   function resetView() {
@@ -341,7 +342,7 @@
     prevValue = [];
     innerDates = [];
     currentValue = '';
-    onValueSet();
+    autocommit && onValueSet();
   }
 
   /**
@@ -426,7 +427,8 @@
    * @param {{ target: HTMLInputElement}} event 
   */
   function onManualInput(event) {
-
+    event.preventDefault();
+    event.stopPropagation();
     const parsedInput = parseDate(event.target.value, displayFormat || format, i18n, displayFormatType || formatType);
     const formattedInput = formatDate(parsedInput, displayFormat || format, i18n, displayFormatType || formatType);
     if (formattedInput === event.target.value) {
@@ -472,7 +474,7 @@
       ce_valueElement.dispatchEvent(new Event('input'));
       ce_displayElement.dispatchEvent(new Event('input'));
     }
-    dispatchInputEvent && dispatch("input", value);
+    dispatchInputEvent && dispatch('input', currentValue);
   }
 
   /**
@@ -503,33 +505,38 @@
 </script>
 
 <span class="std-component-wrap">
-{#if !ce_displayElement}
-  <input type="hidden" {name} {value}>
-  {#if !pickerOnly}
-  <input bind:this={ref_input} type={pickerOnly ? "hidden" : "text"}
-    id={inputId}
-    tabindex="0"
-    name={name.endsWith(']') ? name.substring(0, name.length-1) + '_input]' : name + '_input'}
-    class:value-dirty={!autocommit && isDirty}
-    value={displayValue}
-    {placeholder} {disabled} {required}
-    autocomplete="off"
-    inputmode="none"
-    class={inputClasses}
-    readonly={isFocused && !manualInput && !isRange}
-    on:input={manualInput ? onManualInput : () => {}}
-    use:inputAction={inputActionParams}
-    on:focus={onInputFocus}
-    on:blur={onInputBlur}
-    on:click={() => {
-      !pickerVisible && onInputFocus();
-    }}
-    on:input
-    on:change
-    on:keydown={onKeyDown}
-  />
+  <slot name="inputs"
+    value={value} displayValue={displayValue} disabled={disabled} isDirty={isDirty}
+    onKeyDown={onKeyDown} onInputFocus={onInputFocus} onInputBlur={onInputBlur}
+  >
+  {#if !ce_displayElement}
+    <input type="hidden" {name} {value}>
+    {#if !pickerOnly}
+    <input bind:this={ref_input} type="text"
+      id={inputId}
+      tabindex="0"
+      name={name.endsWith(']') ? name.substring(0, name.length-1) + '_input]' : name + '_input'}
+      class:value-dirty={!autocommit && isDirty}
+      value={displayValue}
+      {placeholder} {disabled} {required}
+      autocomplete="off"
+      inputmode="none"
+      class={inputClasses}
+      readonly={isFocused && !manualInput && !isRange}
+      on:input={manualInput ? onManualInput : () => {}}
+      use:inputAction={inputActionParams}
+      on:focus={onInputFocus}
+      on:blur={onInputBlur}
+      on:click={() => {
+        !pickerVisible && onInputFocus();
+      }}
+      on:input
+      on:change
+      on:keydown={onKeyDown}
+    />
+    {/if}
   {/if}
-{/if}
+  </slot>
 {#if pickerVisible && isFocused }
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
@@ -637,7 +644,6 @@
     padding: 0.5em;
     color: var(--sdt-color);
   }
-  /* FUTURE: */
   .std-calendar-wrap.is-range-wrap {
     width: 560px;
   }
@@ -652,7 +658,7 @@
     min-width: 264px;
   }
   .value-dirty {
-    color: color-mix(in srgb, black 50%, currentColor);
+    color: color-mix(in srgb, black 20%, white);
   }
   .std-calendar-wrap.is-popup {
     position: absolute;

src/lib/components/Time.svelte

@@ -332,16 +332,16 @@
 
   <div class="sdt-time-head">
     {#if hasDateComponent}
-    <button class="sdt-time-btn sdt-back-btn" title={i18n.backToDate} on:click={onModeSwitch}>
+    <button type="button" class="sdt-time-btn sdt-back-btn" title={i18n.backToDate} on:click={onModeSwitch}>
       <svg class="sdt-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill-rule="evenodd" d="M6.75 0a.75.75 0 01.75.75V3h9V.75a.75.75 0 011.5 0V3h2.75c.966 0 1.75.784 1.75 1.75v16a1.75 1.75 0 01-1.75 1.75H3.25a1.75 1.75 0 01-1.75-1.75v-16C1.5 3.784 2.284 3 3.25 3H6V.75A.75.75 0 016.75 0zm-3.5 4.5a.25.25 0 00-.25.25V8h18V4.75a.25.25 0 00-.25-.25H3.25zM21 9.5H3v11.25c0 .138.112.25.25.25h17.5a.25.25 0 00.25-.25V9.5z"></path></svg>
     </button>
     {/if}
-    <button class="sdt-time-btn sdt-time-figure"
+    <button type="button" class="sdt-time-btn sdt-time-figure"
       class:is-active={!isMinuteView}
       on:click={() => isMinuteView = false}
     >{view(selectedHour, showMeridian)}</button>
     <span>:</span>
-    <button  class="sdt-time-btn sdt-time-figure"
+    <button type="button" class="sdt-time-btn sdt-time-figure"
       class:is-active={isMinuteView}
       on:click={() => isMinuteView = true}
     >{view(selectedMinutes, false)}</button>

src/lib/i18n/index.js

@@ -21,7 +21,9 @@
  * @property {string} backToDate
 */
 
-// Czech translation
+/**
+ * @type {i18nType} Czech translation
+ */
 export const cz = {
   days:        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
   daysShort:   ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -38,7 +40,9 @@ export const cz = {
   backToDate:  'Zpátky na kalendář'
 }
 
-// German translation by emroc GmbH
+/**
+ * @type {i18nType} German translation by emroc GmbH
+ */
 export const de = {
   days:        ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'],
   daysShort:   ['Son', 'Mon', 'Die', 'Mie', 'Don', 'Fre', 'Sam', 'Son'],
@@ -55,7 +59,9 @@ export const de = {
   backToDate:  'Zurück zur Kalenderansicht'
 }
 
-// English translation
+/**
+ * @type {i18nType} English translation
+ */
 export const en = {
   days:        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
   daysShort:   ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -72,7 +78,11 @@ export const en = {
   backToDate:  'Back to calendar view'
 }
 
-// Spanish translation by markoan
+
+/**
+ * @type {i18nType} Spanish translation by markoan
+ */
+
 export const es = {
   days:        ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
   daysShort:   ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
@@ -89,7 +99,9 @@ export const es = {
   backToDate:  'Regresar al calendario'
 }
 
-// Persian (Farsi) translation by sadegh19b
+/**
+ * @type {i18nType} Persian (Farsi) translation by sadegh19b
+ */
 export const fa = {
   days:        ['یکشنبه', 'دوشنبه', 'سه‌شنبه‌', 'چهارشنبه', 'پنج‌شنبه', 'جمعه', 'شنبه', 'یکشنبه'],
   daysShort:   ['یکش', 'دوش', 'سه‌ش', 'چهار', 'پنج', 'جمع', 'شنب', 'یکش'],
@@ -106,7 +118,9 @@ export const fa = {
   backToDate:  'بازگشت به بخش تقویم'
 }
 
-// French translation by Tuditi
+/**
+ * @type {i18nType} French translation by Tuditi
+ */
 export const fr = {
   days:        ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
   daysShort:   ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
@@ -123,7 +137,9 @@ export const fr = {
   backToDate:  'Retour au calendrier'
 }
 
-// Hungarian translation by Tuditi
+/**
+ * @type {i18nType} Hungarian translation by Tuditi
+ */
 export const hu = {
   days:        ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat', 'Vasárnap'],
   daysShort:   ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo', 'V'],
@@ -140,7 +156,9 @@ export const hu = {
   backToDate:  'Vissza a naptárhoz'
 };
 
-// Indonesian translation
+/**
+ * @type {i18nType} Indonesian translation
+ */
 export const id = {
   days:        ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'],
   daysShort:   ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'],
@@ -157,7 +175,9 @@ export const id = {
   backToDate:  'Kembali ke tampilan kalender'
 }
 
-// Japanese translation by aska
+/**
+ * @type {i18nType} Japanese translation by aska
+ */
 export const jp = {
   days:        ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
   daysShort:   ['日曜', '月曜', '火曜', '水曜', '木曜', '金曜', '土曜', '日曜'],
@@ -174,7 +194,9 @@ export const jp = {
   backToDate:  'カレンダーに戻る'
 }
 
-// Dutch Translation by Tuditi
+/**
+ * @type {i18nType} Dutch Translation by Tuditi
+ */
 export const nl = {
   days:        ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'],
   daysShort:   ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vri', 'Zat', 'Zon'],
@@ -191,7 +213,9 @@ export const nl = {
   backToDate:  'Terug naar de kalender'
 };
 
-// Slovak Translation
+/**
+ * @type {i18nType} Slovak Translation
+ */
 export const sk = {
   days:        ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota', 'Nedeľa'],
   daysShort:   ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob', 'Ned'],
@@ -208,7 +232,9 @@ export const sk = {
   backToDate:  'Späť na kalendár'
 }
 
-// Korean translation
+/**
+ * @type {i18nType} Korean translation
+ */
 export const ko = {
   days:        ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
   daysShort:   ['일', '월', '화', '수', '목', '금', '토', '일'],
@@ -225,7 +251,9 @@ export const ko = {
   backToDate:  '달력보기'
 }
 
-// Brazilian portuguese translation by IgorDalepiane
+/**
+ * @type {i18nType} Brazilian portuguese translation by IgorDalepiane
+ */
 export const pt_BR = {
   days: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado', 'Domingo'],
   daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
@@ -242,7 +270,9 @@ export const pt_BR = {
   backToDate: 'Voltar para o calendário'
 }
 
-// italian translation by MarkNerdi
+/**
+ * @type {i18nType} italian translation by MarkNerdi
+ */
 export const it = {
   days:        ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'],
   daysShort:   ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'],