@mezzanine-ui/core 0.7.3 → 0.9.2

package/button/_button-styles.scss

@@ -181,7 +181,6 @@ $outlined-border-width: 1px !default;
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  text-transform: uppercase;
   transition: transition.standard(background-color), transition.standard(border), transition.standard(color);
   will-change: background-color, border-color, color;
 

package/icon/_icon-styles.scss

@@ -9,6 +9,7 @@ $spin-keyframes-name: #{$prefix}-spin !default;
 }
 
 .#{$prefix} {
+  cursor: var(--#{$prefix}-cursor);
   display: inline-block;
   width: 1em;
   height: 1em;

package/input/_input-styles.scss

@@ -1,8 +1,34 @@
 @use 'sass:map';
 @use '../text-field';
+@use '../select';
 @use './input' as *;
 
 .#{$prefix} {
+  &__tags-mode {
+    display: flex;
+    flex-wrap: wrap;
+
+    .#{select.$prefix}-trigger__tags {
+      width: unset;
+    }
+
+    input {
+      width: unset;
+      flex: 1;
+    }
+
+    &__input-on-top {
+      flex-direction: column-reverse;
+    }
+
+    &:hover {
+      .#{text-field.$prefix}__clear-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
   input {
     padding-left: var(--#{text-field.$prefix}-padding-left);
     padding-right: var(--#{text-field.$prefix}-padding-right);

package/input/input.d.ts

@@ -3,4 +3,6 @@ export declare type InputSize = Size;
 export declare const inputPrefix = "mzn-input";
 export declare const inputClasses: {
     readonly host: "mzn-input";
+    readonly tagsMode: "mzn-input__tags-mode";
+    readonly tagsModeInputOnTop: "mzn-input__tags-mode__input-on-top";
 };

package/input/input.js

@@ -1,6 +1,8 @@
 const inputPrefix = 'mzn-input';
 const inputClasses = {
     host: inputPrefix,
+    tagsMode: `${inputPrefix}__tags-mode`,
+    tagsModeInputOnTop: `${inputPrefix}__tags-mode__input-on-top`,
 };
 
 export { inputClasses, inputPrefix };

package/message/message.js

@@ -1,10 +1,10 @@
-import { CheckCircleFilledIcon, ExclamationCircleFilledIcon, MinusCircleFilledIcon, InfoCircleFilledIcon } from '@mezzanine-ui/icons';
+import { CheckCircleFilledIcon, ExclamationCircleFilledIcon, TimesCircleFilledIcon, InfoCircleFilledIcon } from '@mezzanine-ui/icons';
 
 const messagePrefix = 'mzn-message';
 const messageIcons = {
     success: CheckCircleFilledIcon,
     warning: ExclamationCircleFilledIcon,
-    error: MinusCircleFilledIcon,
+    error: TimesCircleFilledIcon,
     info: InfoCircleFilledIcon,
 };
 const messageClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "0.7.3",
+  "version": "0.9.2",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -23,7 +23,7 @@
     "build:clean": "node ../../scripts/cleanBuild.js"
   },
   "dependencies": {
-    "@mezzanine-ui/icons": "^0.7.3",
+    "@mezzanine-ui/icons": "^0.9.2",
     "@mezzanine-ui/system": "^0.7.0",
     "tslib": "^2.1.0"
   }

package/page-footer/_page-footer-styles.scss

@@ -3,7 +3,6 @@
 @use './page-footer' as *;
 
 .#{$prefix} {
-  height: 32px;
   padding: spacing.level(4) spacing.level(5);
   border-top: 1px solid palette.color(border);
   background-color: palette.color(surface);

package/table/_table-styles.scss

@@ -103,6 +103,18 @@ $table-refresh-vertical-padding: 8px !default;
     &__cellWrapper {
       @include flexible;
     }
+
+    &__expandedTableWrapper {
+      padding: 0;
+    }
+
+    &__expandedTableRow {
+      background-color: palette.color(divider);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
   }
 
   &__empty {

package/table/index.js

@@ -1 +1 @@
-export { tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix } from './table.js';
+export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix } from './table.js';

package/table/table.d.ts

@@ -12,6 +12,9 @@ export declare const tableClasses: {
     readonly bodyRow: `${string}__row`;
     readonly bodyRowHighlight: `${string}__row--highlight`;
     readonly bodyRowCellWrapper: `${string}__row__cellWrapper`;
+    readonly bodyRowExpandedTableWrapper: `${string}__row__expandedTableWrapper`;
+    readonly bodyRowExpandedTable: `${string}__row__expandedTable`;
+    readonly bodyRowExpandedTableRow: `${string}__row__expandedTableRow`;
     readonly cell: string;
     readonly cellEllipsis: `${string}__ellipsis`;
     readonly selections: "mzn-table__selections";
@@ -42,7 +45,7 @@ export declare type TableColumn<SourceType> = {
     headerClassName?: string;
     width?: number;
     sorter?(a: any, b: any): number;
-    onSorted?(sortedDataSource: SourceType[]): void;
+    onSorted?(dataIndex: string, sortedType: string): void;
     editable?: boolean;
     setCellProps?(record: SourceType): TableRecord<unknown>;
     /** @default true */
@@ -50,6 +53,7 @@ export declare type TableColumn<SourceType> = {
     /** force display tooltip whenever content is hovered */
     forceShownTooltipWhenHovered?: boolean;
 };
+export declare type ExpandedTableColumn = Omit<TableColumn<TableRecord<unknown>>, 'title' | 'renderTitle' | 'align' | 'headerClassName' | 'width' | 'sorter' | 'onSorted' | 'editable' | 'setCellProps'>;
 export declare type TableFetchMore = {
     callback?(): any;
     isReachEnd?: boolean;
@@ -70,8 +74,13 @@ export interface TableRowSelection {
 /** === Feature Expandable */
 export interface TableExpandable<SourceType> {
     className?: string;
-    expandedRowRender(record: SourceType): any;
+    expandedRowRender(record: SourceType): string | {
+        dataSource: TableDataSource[];
+        columns?: ExpandedTableColumn[];
+        className?: string;
+    };
     rowExpandable?(record: SourceType): boolean;
+    onExpand?(record: SourceType, status: boolean): void;
 }
 /** === Feature Pagination */
 export interface TablePagination {
@@ -101,3 +110,6 @@ export interface TableComponents {
         cell?: any;
     };
 }
+/** styling */
+export declare function getColumnStyle(column: TableColumn<TableRecord<unknown>>): {};
+export declare function getCellStyle(column: TableColumn<TableRecord<unknown>>): {};

package/table/table.js

@@ -12,6 +12,9 @@ const tableClasses = {
     bodyRow: `${tableBodyPrefix}__row`,
     bodyRowHighlight: `${tableBodyPrefix}__row--highlight`,
     bodyRowCellWrapper: `${tableBodyPrefix}__row__cellWrapper`,
+    bodyRowExpandedTableWrapper: `${tableBodyPrefix}__row__expandedTableWrapper`,
+    bodyRowExpandedTable: `${tableBodyPrefix}__row__expandedTable`,
+    bodyRowExpandedTableRow: `${tableBodyPrefix}__row__expandedTableRow`,
     cell: tableCellPrefix,
     cellEllipsis: `${tableCellPrefix}__ellipsis`,
     selections: `${tablePrefix}__selections`,
@@ -22,6 +25,32 @@ const tableClasses = {
     paginationIndicator: `${tablePrefix}__pagination__indicator`,
     paginationActions: `${tablePrefix}__pagination__actions`,
     refresh: `${tablePrefix}__refresh`,
-};
+};
+/** styling */
+function getColumnStyle(column) {
+    if (!column)
+        return {};
+    let style = {};
+    if (column.width) {
+        style = {
+            ...style,
+            width: column.width,
+            maxWidth: column.width,
+        };
+    }
+    return style;
+}
+function getCellStyle(column) {
+    if (!column)
+        return {};
+    let style = {};
+    if (column.align) {
+        style = {
+            ...style,
+            justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
+        };
+    }
+    return style;
+}
 
-export { tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix };
+export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix };