@mezzanine-ui/core 0.6.2 → 0.7.2

package/_internal/overlay-with-slide-fade/_index.scss

@@ -0,0 +1 @@
+@forward './overlay-with-slider-fade';

package/_internal/overlay-with-slide-fade/_overlay-with-slide-fade-styles.scss

@@ -0,0 +1,7 @@
+@use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/z-index';
+@use './overlay-with-slide-fade' as *;
+
+.#{$prefix} {
+  overflow: hidden;
+}

package/_internal/overlay-with-slide-fade/_overlay-with-slider-fade.scss

@@ -0,0 +1 @@
+$prefix: mzn-overlay-with-slide-fade;

package/_internal/overlay-with-slide-fade/index.d.ts

@@ -0,0 +1 @@
+export * from './overlayWithSlideFade';

package/_internal/overlay-with-slide-fade/index.js

@@ -0,0 +1 @@
+export { overlayWithSlideFadeClasses, overlayWithSlideFadePrefix } from './overlayWithSlideFade.js';

package/_internal/overlay-with-slide-fade/overlayWithSlideFade.d.ts

@@ -0,0 +1,4 @@
+export declare const overlayWithSlideFadePrefix = "mzn-overlay-with-slide-fade";
+export declare const overlayWithSlideFadeClasses: {
+    readonly host: "mzn-overlay-with-slide-fade";
+};

package/_internal/overlay-with-slide-fade/overlayWithSlideFade.js

@@ -0,0 +1,6 @@
+const overlayWithSlideFadePrefix = 'mzn-overlay-with-slide-fade';
+const overlayWithSlideFadeClasses = {
+    host: overlayWithSlideFadePrefix,
+};
+
+export { overlayWithSlideFadeClasses, overlayWithSlideFadePrefix };

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';
@@ -86,11 +87,14 @@
     --#{$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/drawer/_drawer-styles.scss

@@ -15,8 +15,6 @@ $positions: top, right, bottom, left;
   }
 
   &__overlay {
-    display: relative;
-    overflow: hidden;
     z-index: z-index.get(drawer);
   }
 

package/icon/_icon-styles.scss

@@ -25,4 +25,8 @@ $spin-keyframes-name: #{$prefix}-spin !default;
   &--spin {
     animation: #{$spin-keyframes-name} 500ms infinite linear;
   }
+
+  &--size {
+    font-size: var(--#{$prefix}-size);
+  }
 }

package/icon/icon.d.ts

@@ -3,11 +3,13 @@ import { MainColor } from '@mezzanine-ui/system/palette';
 export declare type IconColor = 'inherit' | MainColor | 'disabled';
 export interface IconCssVars {
     color?: IconColor;
+    size?: number;
 }
 export declare const iconPrefix = "mzn-icon";
 export declare const iconClasses: {
     readonly host: "mzn-icon";
     readonly color: "mzn-icon--color";
     readonly spin: "mzn-icon--spin";
+    readonly size: "mzn-icon--size";
 };
 export declare function toIconCssVars(variables: IconCssVars): CssVarInterpolations;

package/icon/icon.js

@@ -6,28 +6,39 @@ const iconClasses = {
     host: iconPrefix,
     color: `${iconPrefix}--color`,
     spin: `${iconPrefix}--spin`,
+    size: `${iconPrefix}--size`,
 };
 function toIconCssVars(variables) {
-    const { color } = variables;
-    if (!color) {
-        return {};
+    const { color, size } = variables;
+    let result = {};
+    /** color mapping */
+    if (color) {
+        let colorValue;
+        if (color === 'inherit') {
+            colorValue = color;
+        }
+        else {
+            /**
+             * Use `action-disabled` color of palette as `disabled` color of icon.
+             */
+            const colorName = color === 'disabled'
+                ? 'action-disabled'
+                : color;
+            colorValue = toCssVar(`${palettePrefix}-${colorName}`);
+        }
+        result = {
+            ...result,
+            [`--${iconPrefix}-color`]: colorValue,
+        };
     }
-    let colorValue;
-    if (color === 'inherit') {
-        colorValue = color;
+    /** size mapping */
+    if (typeof size !== 'undefined') {
+        result = {
+            ...result,
+            [`--${iconPrefix}-size`]: `${size}px`,
+        };
     }
-    else {
-        /**
-         * Use `action-disabled` color of palette as `disabled` color of icon.
-         */
-        const colorName = color === 'disabled'
-            ? 'action-disabled'
-            : color;
-        colorValue = toCssVar(`${palettePrefix}-${colorName}`);
-    }
-    return {
-        [`--${iconPrefix}-color`]: colorValue,
-    };
+    return result;
 }
 
 export { iconClasses, iconPrefix, toIconCssVars };

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.2",
+  "version": "0.7.2",
   "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/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;