@mezzanine-ui/core 0.6.1 → 0.7.1

package/alert/_alert-styles.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '~@mezzanine-ui/system/palette';
 @use '~@mezzanine-ui/system/transition';
 @use '~@mezzanine-ui/system/typography';
@@ -18,7 +19,7 @@ $close-icon-width: $icon-size + 12px;
   width: 100%;
 
   &__icon {
-    $vertical-padding: #{($box-height - $icon-size) / 2};
+    $vertical-padding: #{math.div($box-height - $icon-size, 2)};
 
     padding: $vertical-padding $icon-horizontal-padding;
     font-size: typography.px-to-rem($icon-size);

package/calendar/_calendar-styles.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '~@mezzanine-ui/system/typography';
 @use '~@mezzanine-ui/system/palette';
 @use '~@mezzanine-ui/system/transition';
@@ -59,11 +60,8 @@
   --#{$cell-prefix}-text-color: #{palette.color(text-primary)};
 
   position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
-  aspect-ratio: 1 / 1;
+  padding-top: 100%;
   color: var(--#{$cell-prefix}-text-color);
   user-select: none;
 
@@ -74,15 +72,29 @@
     height: 100%;
   }
 
+  &__inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &--today {
     --#{$cell-prefix}-text-color: #{palette.color(primary)};
 
     &::after {
+      $dot-width: 2px;
+
       content: '';
       position: absolute;
+      left: calc(50% - #{math.div($dot-width, 2)});
       display: block;
-      width: 2px;
-      height: 2px;
+      width: $dot-width;
+      height: $dot-width;
       border-radius: 50%;
       bottom: 6px;
       background-color: var(--#{$cell-prefix}-text-color);

package/calendar/calendar.d.ts

@@ -29,6 +29,7 @@ export declare const calendarClasses: {
     row: string;
     /** Cell classes */
     cell: string;
+    cellInner: string;
     cellToday: string;
     cellActive: string;
     cellDisabled: string;

package/calendar/calendar.js

@@ -20,6 +20,7 @@ const calendarClasses = {
     row: calendarRowPrefix,
     /** Cell classes */
     cell: calendarCellPrefix,
+    cellInner: `${calendarCellPrefix}__inner`,
     cellToday: `${calendarCellPrefix}--today`,
     cellActive: `${calendarCellPrefix}--active`,
     cellDisabled: `${calendarCellPrefix}--disabled`,

package/input/_input-styles.scss

@@ -6,5 +6,21 @@
   input {
     padding-left: var(--#{text-field.$prefix}-padding-left);
     padding-right: var(--#{text-field.$prefix}-padding-right);
+
+    /* clears the 'X' from Internet Explorer */
+    &[type="search"]::-ms-clear,
+    &[type="search"]::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    /* clears the 'X' from Chrome */
+    &[type="search"]::-webkit-search-decoration,
+    &[type="search"]::-webkit-search-cancel-button,
+    &[type="search"]::-webkit-search-results-button,
+    &[type="search"]::-webkit-search-results-decoration {
+      display: none;
+    }
   }
 }

package/message/_message-styles.scss

@@ -7,9 +7,9 @@
 
 $height: 40px !default;
 $padding-left: 12px !default;
-$padding-right: 24px !default;
+$padding-right: 12px !default;
+$content-padding: 12px !default;
 $icon-size: 24px !default;
-$icon-gap: 12px !default;
 
 .#{$prefix} {
   display: flex;
@@ -28,12 +28,13 @@ $icon-gap: 12px !default;
   &__icon {
     color: var(--#{$prefix}-color);
     font-size: typography.px-to-rem($icon-size);
-    margin-right: $icon-gap;
   }
 
   &__content {
     @include typography.variant(body1);
     @include typography.overflow-ellipsis();
+
+    padding: 0 $content-padding;
   }
 
   @each $severity in $severities {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@mezzanine-ui/icons": "^0.5.0",
-    "@mezzanine-ui/system": "^0.5.2",
+    "@mezzanine-ui/system": "^0.7.0",
     "tslib": "^2.1.0"
   }
 }

package/select/_select-styles.scss

@@ -32,8 +32,8 @@ $tags-gap: 4px !default;
     }
 
     /* clears the 'X' from Internet Explorer */
-    &[type=search]::-ms-clear,
-    &[type=search]::-ms-reveal {
+    &[type="search"]::-ms-clear,
+    &[type="search"]::-ms-reveal {
       display: none;
       width: 0;
       height: 0;

package/slider/_slider-styles.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '~@mezzanine-ui/system/palette';
 @use './slider' as *;
 
@@ -90,13 +91,13 @@ $handler-scale-size: 24px !default;
   box-sizing: border-box;
 
   &:hover {
-    transform: scale($handler-scale-size / $handler-size);
+    transform: scale(math.div($handler-scale-size, $handler-size));
     background-color: palette.color(primary-light);
   }
 
   &--active {
     z-index: 1;
-    transform: scale($handler-scale-size / $handler-size);
+    transform: scale(math.div($handler-scale-size, $handler-size));
     background-color: palette.color(primary-dark);
 
     &:hover {

package/slider/index.js

@@ -1 +1 @@
-export { findClosetValueIndex, getPercentage, getSliderRect, getValueFromClientX, isRangeSlider, roundToStep, sliderClasses, sliderHandlerPrefix, sliderPrefix, sortSliderValue, toSliderCssVars } from './slider.js';
+export { findClosetValueIndex, fixRangeSliderValue, fixSingleSliderValue, getPercentage, getPrecision, getSliderRect, getValueFromClientX, isRangeSlider, roundToStep, sliderClasses, sliderHandlerPrefix, sliderPrefix, sortSliderValue, toSliderCssVars } from './slider.js';

package/slider/slider.d.ts

@@ -53,5 +53,8 @@ export declare function sortSliderValue(value: RangeSliderValue): RangeSliderVal
 export declare function getSliderRect(element: HTMLDivElement): SliderRect;
 export declare function getValueFromClientX(clientX: number, trackDims: SliderRect, min: number, max: number): number;
 export declare function getPercentage(value: number, min: number, max: number): number;
+export declare function getPrecision(step: number): number;
+export declare function fixSingleSliderValue(value: SingleSliderValue, min: number, max: number): SingleSliderValue;
+export declare function fixRangeSliderValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue;
 export declare function roundToStep(value: number, step: number, min: number, max: number): number;
 export declare function findClosetValueIndex(value: SliderValue, newValue: number): number;

package/slider/slider.js

@@ -67,8 +67,42 @@ function getValueFromClientX(clientX, trackDims, min, max) {
     return value + min;
 }
 function getPercentage(value, min, max) {
+    if (min > max)
+        return 0;
     return Math.max(0, Math.min(100, (value / Math.abs(max - min)) * 100));
 }
+function getPrecision(step) {
+    const stepString = step.toString();
+    let precision = 0;
+    if (stepString.indexOf('.') >= 0) {
+        precision = stepString.length - stepString.indexOf('.') - 1;
+    }
+    return precision;
+}
+function fixSingleSliderValue(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+function fixRangeSliderValue(value, min, max) {
+    if (value[0] > max && value[1] > max) {
+        return [max, max];
+    }
+    if (value[0] < min && value[1] < min) {
+        return [min, min];
+    }
+    if (value[0] < min) {
+        return [min, value[1]];
+    }
+    if (value[1] > max) {
+        return [value[0], max];
+    }
+    return value;
+}
 function roundToStep(value, step, min, max) {
     let left = min;
     let right = max;
@@ -77,9 +111,9 @@ function roundToStep(value, step, min, max) {
     }
     right = Math.min(left + step, max);
     if (value - left < right - value) {
-        return left;
+        return parseFloat(left.toFixed(getPrecision(step)));
     }
-    return right;
+    return parseFloat(right.toFixed(getPrecision(step)));
 }
 function findClosetValueIndex(value, newValue) {
     if (!isRangeSlider(value))
@@ -88,4 +122,4 @@ function findClosetValueIndex(value, newValue) {
     return value.findIndex((element) => element === closetValue);
 }
 
-export { findClosetValueIndex, getPercentage, getSliderRect, getValueFromClientX, isRangeSlider, roundToStep, sliderClasses, sliderHandlerPrefix, sliderPrefix, sortSliderValue, toSliderCssVars };
+export { findClosetValueIndex, fixRangeSliderValue, fixSingleSliderValue, getPercentage, getPrecision, getSliderRect, getValueFromClientX, isRangeSlider, roundToStep, sliderClasses, sliderHandlerPrefix, sliderPrefix, sortSliderValue, toSliderCssVars };

package/table/table.d.ts

@@ -75,9 +75,10 @@ export interface TableExpandable<SourceType> {
 }
 /** === Feature Pagination */
 export interface TablePagination {
-    show?: boolean;
-    current?: number;
-    onChange?(page: number): void;
+    current: number;
+    /** @NOTE set this to true, should control pageSize properly to make layout correct */
+    disableAutoSlicing?: boolean;
+    onChange(page: number): void;
     total?: number;
     options?: {
         boundaryCount?: number;

package/textarea/_textarea-styles.scss

@@ -16,7 +16,6 @@ $count-gap: 4px !default;
   padding: #{$padding-y} 0;
 
   textarea {
-    height: 100%;
     margin: 0;
     padding-left: var(--#{text-field.$prefix}-padding-left);
     padding-right: var(--#{text-field.$prefix}-padding-right);

package/time-panel/_time-panel-styles.scss

@@ -47,11 +47,6 @@ $padding: 16px !default;
 .#{$column-prefix} {
   $cell-height: 32px;
 
-  @mixin buttonBase {
-    display: block;
-    aspect-ratio: 1 / 1;
-  }
-
   @include typography.variant(input3);
 
   width: 48px;
@@ -66,20 +61,31 @@ $padding: 16px !default;
   }
 
   &__button {
-    @include buttonBase;
-
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: $cell-height;
     height: $cell-height;
   }
 
   &__control-button {
-    @include buttonBase;
-
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     width: 24px;
     height: 24px;
     margin: 0 auto 0 4px;
     font-size: 24px;
   }
 
+  &__ratio-box-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &__cells {
     height: $cell-height * 5;
     overflow: hidden;

package/time-panel/timePanel.d.ts

@@ -26,6 +26,7 @@ export declare const timePanelClasses: {
     columnButton: string;
     columnControlButton: string;
     columnCells: string;
+    columnRatioBoxInner: string;
 };
 /** Helpers */
 export declare function getUnitLabel(target: string | number, digits: number, fill?: string): string;

package/time-panel/timePanel.js

@@ -19,6 +19,7 @@ const timePanelClasses = {
     columnButton: `${timePanelColumnPrefix}__button`,
     columnControlButton: `${timePanelColumnPrefix}__control-button`,
     columnCells: `${timePanelColumnPrefix}__cells`,
+    columnRatioBoxInner: `${timePanelColumnPrefix}__ratio-box-inner`,
 };
 /** Helpers */
 function getUnitLabel(target, digits, fill = '0') {