jsl-ui 9.29.0 → 10.0.0

package/lib/ui/date.picker/css/tiny-date-picker.css

@@ -1,326 +1,125 @@
-.dp-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.75);
+@import "../../theme.css";
+
+.dp-below, .dp-modal, .dp-permanent {
+  box-sizing: border-box;
+  color: var(--jsl-color-text);
+  font: inherit;
+  font-size: .875rem;
+  line-height: 1.4;
+}
+.dp-below *, .dp-modal *, .dp-permanent * { box-sizing: border-box; }
+.dp {
+  width: 19rem;
+  max-width: calc(100vw - 1rem);
+  border: 1px solid var(--jsl-color-border);
+  border-radius: .875rem;
+  background: var(--jsl-color-surface);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
+  overflow: auto;
+  max-height: calc(100dvh - 1rem);
+}
+.dp-below { position: fixed; z-index: 2200; width: max-content; }
+.dp-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2300;
+  display: grid;
+  place-items: center;
+  padding: .5rem;
+  background: var(--jsl-color-overlay);
+}
+.dp-permanent { display: inline-block; max-width: 100%; }
+.dp-permanent .dp { box-shadow: none; max-width: 100%; }
+.dp button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  border-radius: .4rem;
+  padding: .5rem;
+  font: inherit;
+  line-height: 1.4;
+  cursor: pointer;
+  text-align: center;
+  margin: 0;
+}
+.dp button:hover:not(:disabled) { background: var(--jsl-color-surface-hover); }
+.dp button:focus-visible {
+  outline: 2px solid var(--jsl-color-focus);
+  outline-offset: -2px;
+  position: relative;
+  z-index: 1;
+}
+.dp button:disabled {
+  color: var(--jsl-color-disabled-text);
+  cursor: not-allowed;
+  opacity: .4;
+}
+.dp-cal-header {
+  display: grid;
+  grid-template-columns: 2rem 1fr auto 2rem;
+  align-items: center;
+  gap: .125rem;
+  padding: .75rem .625rem .5rem;
+}
+.dp-cal-header button { font-weight: 600; }
+.dp .dp-prev, .dp .dp-next { font-size: 1.375rem; line-height: 1; padding: .35rem; }
+.dp-days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: .125rem;
+  padding: 0 .625rem .625rem;
+}
+.dp-col-header {
+  color: var(--jsl-color-text-muted);
+  text-align: center;
+  font-size: .6875rem;
+  font-weight: 500;
+  padding: .5rem 0;
+}
+.dp .dp-day {
+  position: relative;
+  padding: .45rem 0;
+  min-height: 2.125rem;
+  font-size: .8125rem;
+  font-variant-numeric: tabular-nums;
+}
+.dp .dp-edge-day { color: var(--jsl-color-text-muted); }
+.dp .dp-current:not(.dp-selected) { background: var(--jsl-color-surface-selected); }
+.dp .dp-selected, .dp .dp-selected:hover:not(:disabled) {
+  background: var(--jsl-color-accent);
+  color: var(--jsl-color-on-accent);
+  font-weight: 600;
+}
+.dp-day-today::after {
+  content: "";
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  bottom: 3px;
+  left: calc(50% - 1.5px);
+  border-radius: 50%;
+  background: currentColor;
+}
+.dp-cal-footer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: .25rem;
+  border-top: 1px solid var(--jsl-color-border-subtle);
+  padding: .5rem .625rem;
+}
+.dp-cal-footer button { font-size: .75rem; font-weight: 500; }
+.dp-months {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: .375rem;
+  padding: .75rem;
+  min-height: 15rem;
+  align-content: center;
+}
+.dp-months button { font-size: .75rem; padding: .875rem .25rem; }
+.dp-years { padding: .75rem; height: 19rem; overflow-y: auto; display: grid; gap: .25rem; }
+.dp-years button { display: block; width: 100%; padding: .625rem; }
+@media (forced-colors: active) {
+  .dp .dp-selected { outline: 2px solid Highlight; }
 }
-
-.dp {
-  position: relative;
-  background: #FFF;
-  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
-  line-height: 1.4;
-  border-radius: 0.5rem;
-  max-height: 400px;
-  z-index: 2010;
-  overflow: hidden;
-  -webkit-tap-highlight-color: transparent;
-}
-
-
-/* .dp:before {
-  content: ' ';
-  height: 6px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: #3B99FC;
-  background: linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%); 
-} */
-
-.dp-permanent .dp {
-  padding-top: 0;
-  border: 1px solid #EEE;
-  box-shadow: none;
-}
-
-.dp-permanent .dp:before {
-  display: none;
-}
-
-/* .dp-cal {
-  min-height: 300px;
-} */
-
-.dp-below {
-  position: absolute;
-  width: 20rem;
-  max-width: 100vw;
-}
-
-.dp-permanent {
-  position: relative;
-  width: 20rem;
-  max-width: 100vw;
-  z-index: 2010;
-}
-
-.dp-permanent .dp{
-  z-index: 0;
-}
-
-.dp-modal .dp {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 600px;
-  width: calc(100% - 4em);
-  transform: translate(-50%, -50%);
-  animation: slide-up 0.3s forwards;
-}
-
-.dp-months {
-  padding: 24px;
-}
-
-.dp-years {
-  box-sizing: border-box;
-  max-height: 400px;
-  padding: 8px 0;
-  overflow: auto !important; /* HACK for Chrome on Android */
-}
-
-.dp-cal-month,
-.dp-cal-year,
-.dp-day,
-.dp-month,
-.dp-year {
-  box-sizing: border-box;
-  text-align: center;
-  text-decoration: none;
-  position: relative;
-  color: #3B404D;
-  border-radius: 2px;
-  border: 0;
-  background: transparent;
-  top: 0.2rem;
-}
-
-.dp-cal-header {
-  position: relative;
-  text-align: center;
-  padding-bottom: 0.4rem;
-  background: #f0f0f0;
-}
-
-.dp-next,
-.dp-prev {
-  position: absolute;
-  width: 1.8rem;
-  height: 1.8rem;
-  overflow: hidden;
-  top: 0.3rem;
-  color: #777;
-  border-radius: 2px;
-  border: 0;
-  background: transparent;
-}
-
-.dp-next:focus,
-.dp-prev:focus,
-.dp-next:hover,
-.dp-prev:hover {
-  outline: none;
-  color: inherit;
-}
-
-.dp-prev {
-  left: 24px;
-}
-
-.dp-next {
-  right: 24px;
-}
-
-.dp-prev:before,
-.dp-next:before {
-  content: '';
-  border: 2px solid;
-  width: 0.7rem;
-  height: 0.7rem;
-  display: inline-block;
-  transform: rotate(-45deg);
-  transition: border-color 0.2s;
-  margin: 0.5rem 0 3rem 0.3rem
-}
-
-.dp-prev:before {
-  border-right: 0;
-  border-bottom: 0;
-}
-
-.dp-next:before {
-  border-left: 0;
-  border-top: 0;
-  margin-left: 0;
-  margin-right: 4px;
-}
-
-.dp-cal-month,
-.dp-cal-year {
-  display: inline-block;
-  font-size: 1.1rem;
-  padding: 0.4rem 0.3rem 0.3rem;
-  outline: none;
-}
-
-.dp-cal-footer {
-  text-align: center;
-  background: #f5f5f5;
-}
-
-.dp-day-today:after {
-  content: '';
-  height: 0;
-  width: 0;
-  border: 7px solid #227BD7;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.dp-close,
-.dp-clear,
-.dp-today {
-  box-sizing: border-box;
-  display: inline-block;
-  width: 33%;
-  padding: 8px;
-  text-decoration: none;
-  color: inherit;
-  border: 0;
-  background: transparent;
-}
-
-.dp-permanent .dp-close,
-.dp-permanent .dp-clear {
-  display: none;
-}
-
-.dp-close:active,
-.dp-clear:active,
-.dp-today:active,
-.dp-next:active,
-.dp-prev:active,
-.dp-cal-month:active,
-.dp-cal-year:active {
-  background: #75BCFC;
-  color: white;
-}
-
-@media screen and (min-device-width: 1200px) {
-  .dp-close:hover,
-  .dp-close:focus,
-  .dp-clear:hover,
-  .dp-clear:focus,
-  .dp-today:hover,
-  .dp-today:focus,
-  .dp-next:hover,
-  .dp-next:focus,
-  .dp-prev:hover,
-  .dp-prev:focus,
-  .dp-cal-month:focus,
-  .dp-cal-month:hover,
-  .dp-cal-year:hover,
-  .dp-cal-year:focus {
-    background: #75BCFC;
-    color: white;
-  }
-}
-
-.dp-col-header,
-.dp-day {
-  width: 14.28571429%;
-  display: inline-block;
-  padding: 8px;
-  text-align: center;
-}
-
-.dp-col-header {
-  color: #AAA;
-  text-transform: uppercase;
-  font-weight: 300;
-  font-size: 0.8rem;
-  padding: 8px 0;
-}
-
-.dp-month {
-  width: 33%;
-  display: inline-block;
-  padding: 8px;
-}
-
-.dp-year {
-  display: block;
-  padding: 8px 40px;
-  width: 100%;
-}
-
-.dp-edge-day {
-  color: #AAA;
-}
-
-.dp-day:hover,
-.dp-month:hover,
-.dp-year:hover,
-.dp-current:focus,
-.dp-current,
-.dp-day:focus,
-.dp-month:focus,
-.dp-year:focus {
-  outline: none;
-  background: #75BCFC;
-  color: white;
-}
-
-.dp-selected:hover,
-.dp-selected:focus,
-.dp-selected {
-  background: #3B99FC;
-  color: #FFF;
-}
-
-.dp-day-disabled {
-  background: transparent;
-  color: #DDD;
-}
-
-.dp-day-disabled:focus,
-.dp-day-disabled:hover {
-  background: #DDD;
-}
-
-.dp-focuser {
-  position: absolute;
-  z-index: 0;
-  top: 50%;
-  left: 50%;
-}
-
-/* Responsive overrides */
-@media (max-width: 480px), (max-height: 480px) {
-  .dp-modal .dp {
-    /* font-size: 0.9em; */
-    width: auto;
-    width: 100%;
-  }
-
-  .dp-day-of-week,
-  .dp-day {
-    padding: 0.3rem;
-  }
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translate(-50%, 100%);
-  }
-  100% {
-    transform: translate(-50%, -50%);
-  }
-}

package/lib/ui/date.picker/date-picker-options.js

@@ -40,7 +40,8 @@ export default function DatePickerOptions(opts) {
     opts.inRange = makeInRangeFn(opts);
     opts.min = parse(opts.min || shiftYear(now(), -100));
     opts.max = parse(opts.max || shiftYear(now(), 100));
-    opts.hilightedDate = opts.parse(opts.hilightedDate);
+    opts.hilightedDate = opts.parse(opts.hilightedDate) || now();
+    opts.hilightedDate = opts.hilightedDate < opts.min ? opts.min : opts.hilightedDate > opts.max ? opts.max : opts.hilightedDate;
     return opts;
 }
 function defaults() {
@@ -58,13 +59,13 @@ function defaults() {
         parse: function (str) {
             //var date = new Date(str);
             var d = date.parse(str);
-            return !d ? now() : d;
+            return d;
         },
         dateClass: function () { },
         inRange: function () {
             return true;
         },
-        appendTo: document.body,
+        appendTo: null,
         dayOffset: 1
     };
 }

package/lib/ui/date.picker/lib/date-manip.js

@@ -109,12 +109,21 @@ export function dateOrParse(parse) {
  * @returns {Date}
  */
 export function constrainDate(dt, min, max) {
+    if (!dt || isNaN(dt.getTime())) {
+        return null;
+    }
     return (dt < min) ? min :
         (dt > max) ? max :
             dt;
 }
 function dropTime(dt) {
+    if (dt == null) {
+        return null;
+    }
     dt = new Date(dt);
+    if (isNaN(dt.getTime())) {
+        return null;
+    }
     dt.setHours(0, 0, 0, 0);
     return dt;
 }

package/lib/ui/date.picker/mode/base-mode.d.ts

@@ -2,6 +2,7 @@ import { noop } from '../lib/fns';
 export default function BaseMode(input: any, emit: any, opts: any): {
     el: any;
     opts: any;
+    destroyed: boolean;
     shouldFocusOnBlur: boolean;
     shouldFocusOnRender: boolean;
     state: {
@@ -22,5 +23,5 @@ export default function BaseMode(input: any, emit: any, opts: any): {
     close: (becauseOfBlur?: boolean) => void;
     destroy: () => void;
     render: () => void;
-    setState: (state: any) => void;
+    setState: (state: any, silent?: boolean) => void;
 };