@varlet/ui 3.18.1 → 3.19.0

package/es/themes/md3-dark/dateInput.mjs

@@ -0,0 +1,9 @@
+var stdin_default = {
+  "--date-input-picker-width": "320px",
+  "--date-input-time-select-separator-color": "var(--color-on-surface-variant)",
+  "--date-input-time-select-border-color": "var(--color-outline)",
+  "--date-input-time-select-active-color": "var(--color-primary)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-dark/datePicker.mjs

@@ -6,41 +6,46 @@ var stdin_default = {
   "--date-picker-main-color": "var(--color-inverse-surface)",
   "--date-picker-border-radius": "20px",
   "--date-picker-title-padding": "20px 20px 16px",
-  "--date-picker-actions-padding": "20px",
+  "--date-picker-actions-padding": "10px 20px 20px",
   "--day-picker-head-item-color": "var(--color-inverse-surface)",
+  "--day-picker-adjacent-item-color": "hsla(var(--hsl-on-surface-variant), 0.72)",
+  "--day-picker-disabled-item-color": "var(--color-text-disabled)",
   "--date-picker-header-arrow-filter": "opacity(1)",
   "--date-picker-header-padding": "0 0 16px",
-  "--date-picker-body-height": "300px",
-  "--date-picker-body-padding": "0 14px 16px",
+  "--date-picker-header-padding-top-no-title": "20px",
+  "--date-picker-body-height": "304px",
+  "--date-picker-body-padding-horizontal": "12px",
+  "--date-picker-body-padding": "0 var(--date-picker-body-padding-horizontal) 16px",
   "--date-picker-header-color": "var(--color-on-surface-variant)",
   "--date-picker-font-size": "var(--font-size-md)",
   "--date-picker-min-width": "290px",
   "--date-picker-title-hint-font-size": "var(--font-size-md)",
   "--date-picker-title-height": "105px",
-  "--date-picker-title-year-font-size": "var(--font-size-md)",
-  "--date-picker-title-year-font-weight": "500",
-  "--date-picker-title-year-margin-bottom": "8px",
   "--date-picker-title-date-height": "48px",
   "--date-picker-title-date-font-size": "34px",
   "--date-picker-title-date-font-weight": "500",
   "--date-picker-title-date-range-font-size": "20px",
   "--date-picker-title-date-justify-content": "normal",
   "--month-picker-padding": "0 12px",
-  "--month-picker-item-width": "33%",
-  "--month-picker-item-height": "56px",
+  "--month-picker-item-width": "32%",
+  "--month-picker-item-height": "46px",
   "--month-picker-item-button-max-width": "140px",
+  "--month-picker-item-button-font-weight": "normal",
   "--year-picker-padding": "0 12px",
-  "--year-picker-item-width": "33%",
-  "--year-picker-item-height": "56px",
+  "--year-picker-item-width": "32%",
+  "--year-picker-item-height": "46px",
   "--year-picker-item-button-max-width": "140px",
+  "--year-picker-item-button-font-weight": "normal",
   "--day-picker-content-item-width": "14.28%",
-  "--day-picker-content-item-font-size": "var(--font-size-sm)",
+  "--day-picker-content-item-min-height": "21px",
+  "--day-picker-content-item-font-size": "var(--font-size-md)",
   "--day-picker-content-item-padding": "2px 0",
   "--day-picker-content-item-button-width": "32px",
   "--day-picker-content-item-button-height": "32px",
-  "--day-picker-content-item-button-font-size": "var(--font-size-sm)",
+  "--day-picker-content-item-button-font-size": "var(--font-size-md)",
+  "--day-picker-head-item-font-size": "var(--font-size-md)",
   "--day-picker-head-item-padding": "8px 0",
-  "--day-picker-head-item-font-weight": "600"
+  "--day-picker-head-item-font-weight": "normal"
 };
 export {
   stdin_default as default

package/es/themes/md3-dark/index.mjs

@@ -34,6 +34,7 @@ import collapse from "./collapse.mjs";
 import countdown from "./countdown.mjs";
 import counter from "./counter.mjs";
 import dataTable from "./dataTable.mjs";
+import dateInput from "./dateInput.mjs";
 import datePicker from "./datePicker.mjs";
 import dialog from "./dialog.mjs";
 import divider from "./divider.mjs";
@@ -87,7 +88,7 @@ import tooltip from "./tooltip.mjs";
 import treeMenu from "./treeMenu.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "dark",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -166,7 +167,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), badge), tooltip), treeMenu), progress), tabs), tab), step), divider), table), pagination), watermark), collapse), result), appBar), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), counter), dataTable), switchThemes), slider), uploader), timePicker), datePicker), rate), railNavigation), railNavigationItem), skeleton), avatarGroup), countdown), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), ripple), space), swipe), code), signature);
+}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), badge), tooltip), treeMenu), progress), tabs), tab), step), divider), table), pagination), watermark), collapse), result), appBar), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), counter), dataTable), switchThemes), slider), uploader), timePicker), dateInput), datePicker), rate), railNavigation), railNavigationItem), skeleton), avatarGroup), countdown), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), ripple), space), swipe), code), signature);
 export {
   stdin_default as default
 };

package/es/themes/md3-light/alert.mjs

@@ -2,9 +2,9 @@ var stdin_default = {
   "--alert-padding": "16px",
   "--alert-border-radius": "4px",
   "--alert-icon-size": "22px",
-  "--alert-icon-margin": "0 12px 0 0",
+  "--alert-icon-margin": "1px 12px 0 0",
   "--alert-close-icon-size": "22px",
-  "--alert-close-icon-margin": "2px 0 0 12px",
+  "--alert-close-icon-margin": "1px 0 0 12px",
   "--alert-standard-info-text-color": "var(--color-on-info)",
   "--alert-standard-danger-text-color": "var(--color-on-danger)",
   "--alert-standard-success-text-color": "var(--color-on-success)",

package/es/themes/md3-light/dateInput.mjs

@@ -0,0 +1,9 @@
+var stdin_default = {
+  "--date-input-picker-width": "320px",
+  "--date-input-time-select-separator-color": "var(--color-on-surface-variant)",
+  "--date-input-time-select-border-color": "var(--color-outline)",
+  "--date-input-time-select-active-color": "var(--color-primary)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/datePicker.mjs

@@ -6,41 +6,46 @@ var stdin_default = {
   "--date-picker-main-color": "#1D1B20",
   "--date-picker-border-radius": "20px",
   "--date-picker-title-padding": "20px 20px 16px",
-  "--date-picker-actions-padding": "20px",
+  "--date-picker-actions-padding": "10px 20px 20px",
   "--day-picker-head-item-color": "#1D1B20",
+  "--day-picker-adjacent-item-color": "hsla(var(--hsl-on-surface-variant), 0.72)",
+  "--day-picker-disabled-item-color": "var(--color-text-disabled)",
   "--date-picker-header-arrow-filter": "opacity(1)",
   "--date-picker-header-padding": "0 0 16px",
-  "--date-picker-body-height": "300px",
-  "--date-picker-body-padding": "0 14px 16px",
+  "--date-picker-header-padding-top-no-title": "20px",
+  "--date-picker-body-height": "304px",
+  "--date-picker-body-padding-horizontal": "12px",
+  "--date-picker-body-padding": "0 var(--date-picker-body-padding-horizontal) 16px",
   "--date-picker-header-color": "var(--color-on-surface-variant)",
   "--date-picker-font-size": "var(--font-size-md)",
   "--date-picker-min-width": "290px",
   "--date-picker-title-hint-font-size": "var(--font-size-md)",
   "--date-picker-title-height": "105px",
-  "--date-picker-title-year-font-size": "var(--font-size-md)",
-  "--date-picker-title-year-font-weight": "500",
-  "--date-picker-title-year-margin-bottom": "8px",
   "--date-picker-title-date-height": "48px",
   "--date-picker-title-date-font-size": "34px",
   "--date-picker-title-date-font-weight": "500",
   "--date-picker-title-date-range-font-size": "20px",
   "--date-picker-title-date-justify-content": "normal",
   "--month-picker-padding": "0 12px",
-  "--month-picker-item-width": "33%",
-  "--month-picker-item-height": "56px",
+  "--month-picker-item-width": "32%",
+  "--month-picker-item-height": "46px",
   "--month-picker-item-button-max-width": "140px",
+  "--month-picker-item-button-font-weight": "normal",
   "--year-picker-padding": "0 12px",
-  "--year-picker-item-width": "33%",
-  "--year-picker-item-height": "56px",
+  "--year-picker-item-width": "32%",
+  "--year-picker-item-height": "46px",
   "--year-picker-item-button-max-width": "140px",
+  "--year-picker-item-button-font-weight": "normal",
   "--day-picker-content-item-width": "14.28%",
-  "--day-picker-content-item-font-size": "var(--font-size-sm)",
+  "--day-picker-content-item-min-height": "21px",
+  "--day-picker-content-item-font-size": "var(--font-size-md)",
   "--day-picker-content-item-padding": "2px 0",
   "--day-picker-content-item-button-width": "32px",
   "--day-picker-content-item-button-height": "32px",
-  "--day-picker-content-item-button-font-size": "var(--font-size-sm)",
+  "--day-picker-content-item-button-font-size": "var(--font-size-md)",
+  "--day-picker-head-item-font-size": "var(--font-size-md)",
   "--day-picker-head-item-padding": "8px 0",
-  "--day-picker-head-item-font-weight": "600"
+  "--day-picker-head-item-font-weight": "normal"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/index.mjs

@@ -34,6 +34,7 @@ import collapse from "./collapse.mjs";
 import countdown from "./countdown.mjs";
 import counter from "./counter.mjs";
 import dataTable from "./dataTable.mjs";
+import dateInput from "./dateInput.mjs";
 import datePicker from "./datePicker.mjs";
 import dialog from "./dialog.mjs";
 import divider from "./divider.mjs";
@@ -87,7 +88,7 @@ import tooltip from "./tooltip.mjs";
 import treeMenu from "./treeMenu.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "light",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -166,7 +167,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), tooltip), treeMenu), tabs), tab), table), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), slider), uploader), timePicker), datePicker), switchThemes), rate), railNavigation), railNavigationItem), avatarGroup), badge), countdown), counter), dataTable), divider), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), pagination), progress), ripple), skeleton), space), step), swipe), watermark), appBar), code), signature);
+}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), tooltip), treeMenu), tabs), tab), table), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), slider), uploader), timePicker), dateInput), datePicker), switchThemes), rate), railNavigation), railNavigationItem), avatarGroup), badge), countdown), counter), dataTable), divider), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), pagination), progress), ripple), skeleton), space), step), swipe), watermark), appBar), code), signature);
 export {
   stdin_default as default
 };

package/es/utils/elements.mjs

@@ -170,6 +170,12 @@ function isDisplayNoneElement(element) {
   }
   return false;
 }
+function scrollSelectedIntoView(scroller, selected) {
+  if (!scroller || !selected) {
+    return;
+  }
+  scroller.scrollTop = selected.offsetTop - scroller.clientHeight / 2 + selected.offsetHeight / 2;
+}
 const focusableSelector = ["button", "input", "select", "textarea", "[tabindex]", "[href]"].map((s) => `${s}:not([disabled])`).join(", ");
 function focusChildElementByKey(referenceElement, parentElement, key, beforeFocus) {
   const focusableElements = Array.from(parentElement.querySelectorAll(focusableSelector)).filter(
@@ -231,6 +237,7 @@ export {
   isVw,
   multiplySizeUnit,
   padStartFlex,
+  scrollSelectedIntoView,
   scrollTo,
   toPxNum,
   toSizeUnit

package/es/utils/shared.mjs

@@ -1,4 +1,8 @@
 import { isString, removeItem } from "@varlet/shared";
+import dayjs from "dayjs/esm/index.js";
+import customParseFormat from "dayjs/esm/plugin/customParseFormat/index.js";
+import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
+import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
 const isHTMLSupportImage = (val) => {
   if (!isString(val)) {
     return false;
@@ -33,6 +37,16 @@ const createCache = (max) => {
     }
   };
 };
+let dayjsExtended = false;
+const createDayjs = () => {
+  if (!dayjsExtended) {
+    dayjs.extend(customParseFormat);
+    dayjs.extend(isSameOrAfter);
+    dayjs.extend(isSameOrBefore);
+    dayjsExtended = true;
+  }
+  return dayjs;
+};
 const linear = (value) => value;
 const cubic = (value) => value ** 3;
 const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
@@ -49,6 +63,7 @@ const padStart = (str, maxLength, fillString = "") => {
 };
 export {
   createCache,
+  createDayjs,
   cubic,
   easeInOutCubic,
   isHTMLSupportImage,