origam 0.3.10 → 2.2.1

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -22,7 +22,7 @@
 						v-bind="slotProps"
 				/>
 
-				<template v-if="!props.hideDefaultHeader">
+				<template v-if="!hideDefaultHeader">
 					<thead key="thead">
 					<origam-data-table-headers
 							ref="origamDataTableHeadersRef"
@@ -66,7 +66,7 @@
 						v-bind="slotProps"
 				/>
 
-				<template v-if="!props.hideDefaultBody">
+				<template v-if="!hideDefaultBody">
 					<tbody>
 					<slot
 							name="prepend"
@@ -101,7 +101,6 @@
 							ref="origamDataTableFooterRef"
 							v-bind="dataTableFooterProps"
 					>
-						<!-- TODO SLOT FOOTER-->
 					</origam-data-table-footer>
 				</template>
 			</slot>
@@ -133,9 +132,10 @@ import {
   useOptions,
   usePaginatedItems,
   useProps,
-  useSortedItems
+  useSortedItems,
+  useStyle
 } from "../../composables";
-import { DENSITY } from "../../enums";
+import { DENSITY, MDI_ICONS } from "../../enums";
 import { computed, Ref, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
   hideDefaultBody: { type: Boolean, required: false },
@@ -156,7 +156,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -176,7 +176,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  hover: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -187,7 +187,7 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   item: { type: Object, required: true },
   cellProps: { type: null, required: false },
-  mobileBreakpoint: { type: null, required: false },
+  mobileBreakpoint: { type: null, required: false, default: "xs" },
   expandOnClick: { type: Boolean, required: false },
   showExpand: { type: Boolean, required: false },
   expanded: { type: Array, required: false },
@@ -207,18 +207,13 @@ const props = defineProps({
   multiSort: { type: Boolean, required: false },
   mustSort: { type: Boolean, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   disableSort: { type: Boolean, required: false },
   headerProps: { type: null, required: false },
   sticky: { type: Boolean, required: false },
-  sortAscIcon: { type: null, required: false },
-  sortDescIcon: { type: null, required: false },
+  sortAscIcon: { type: null, required: false, default: MDI_ICONS.ARROW_UP },
+  sortDescIcon: { type: null, required: false, default: MDI_ICONS.ARROW_DOWN },
   page: { type: [Number, String], required: false, default: 1 },
   itemsPerPage: { type: [Number, String], required: false, default: 10 },
   customFilter: { type: Function, required: false },
@@ -361,74 +356,33 @@ const dataTableClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-data-table {
-		width: 100%;
+		width: var(--origam-data-table---width, 100%);
+		background-color: var(--origam-data-table---background-color, var(--origam-color__surface---default));
+		color: var(--origam-data-table---color, var(--origam-color__text---primary));
 
 		&__table {
 			width: 100%;
-			border-collapse: separate;
-			border-spacing: 0
+			border-collapse: var(--origam-data-table---border-collapse, separate);
+			border-spacing: var(--origam-data-table---border-spacing, 0)
 		}
 
 		&--loading {
 			&:deep(.origam-data-table-cell) {
-				opacity: var(--origam-data-table--loading---opacity);
+				opacity: var(--origam-data-table--loading---opacity, var(--origam-data-table__loading---opacity, 0.5));
 			}
 		}
 	}
-
-	.v-data-table-group-header-row__column {
-		padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
-	}
-
-	.v-data-table-footer {
-		align-items: center;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-		padding: 8px 4px
-	}
-
-	.v-data-table-footer__items-per-page {
-		align-items: center;
-		display: flex;
-		justify-content: center
-	}
-
-	.v-data-table-footer__items-per-page > span {
-		padding-inline-end: 8px
-	}
-
-	.v-data-table-footer__items-per-page > .v-select {
-		width: 90px
-	}
-
-	.v-data-table-footer__info {
-		display: flex;
-		justify-content: flex-end;
-		min-width: 116px;
-		padding: 0 16px
-	}
-
-	.v-data-table-footer__paginationz {
-		align-items: center;
-		display: flex;
-		margin-inline-start: 16px
-	}
-
-	.v-data-table-footer__page {
-		padding: 0 8px
-	}
-</style>
-
-<style>
-	:root {
-		--origam-data-table--loading---opacity: 0.5;
-	}
 </style>

package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue

@@ -9,7 +9,12 @@
 </template>
 
 <script setup>
-import { useDimension, usePadding, useProps } from "../../composables";
+import {
+  useDimension,
+  usePadding,
+  useProps,
+  useStyle
+} from "../../composables";
 import { ALIGN } from "../../enums";
 import { convertToUnit } from "../../utils";
 import { computed, StyleValue } from "vue";
@@ -63,8 +68,14 @@ const dataTableColumnStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableColumnStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -102,20 +113,13 @@ defineExpose({
 
 		&--fixed {
 			position: sticky;
-			background: var(--origam-data-table-cell--fixed---background);
+			background: var(--origam-data-table-cell--fixed---background, var(--origam-color__surface---raised));
 			left: 0;
-			z-index: 1
+			z-index: var(--origam-data-table-cell--fixed---z-index, 1)
 		}
 
 		&--last-fixed {
-			border-right: 1px solid var(--origam-data-table-cell--last-fixed---border-color);
+			border-right: var(--origam-data-table-cell--last-fixed---border-right-width, 1px) solid var(--origam-data-table-cell--last-fixed---border-right-color, var(--origam-color__border---subtle));
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-data-table-cell--fixed---background: rgba(33, 33, 33, 1);
-		--origam-data-table-cell--last-fixed---border-color: rgba(255, 255, 255, 0.12);
-	}
-</style>

package/dist/src/components/DataTable/OrigamDataTableFooter.vue

@@ -42,7 +42,7 @@
 
 <script setup>
 import { OrigamPagination, OrigamRow, OrigamSelect } from "../../components";
-import { useLocale, usePagination, useProps } from "../../composables";
+import { useLocale, usePagination, useProps, useStyle } from "../../composables";
 import { DENSITY } from "../../enums";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
@@ -68,11 +68,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -131,7 +126,50 @@ const dataTableFooterStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableFooterStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-data-table-footer {
+		align-items: var(--origam-data-table-footer---align-items, center);
+		background-color: var(--origam-data-table-footer---background-color, var(--origam-color__surface---default));
+		color: var(--origam-data-table-footer---color, var(--origam-color__text---primary));
+		display: var(--origam-data-table-footer---display, flex);
+		flex-wrap: var(--origam-data-table-footer---flex-wrap, wrap);
+		justify-content: var(--origam-data-table-footer---justify-content, flex-end);
+		padding-block: var(--origam-data-table-footer---padding-block, var(--origam-space---2, 8px));
+		padding-inline: var(--origam-data-table-footer---padding-inline, var(--origam-space---1, 4px));
+
+		&__items-per-page {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+			gap: var(--origam-data-table-footer__items-per-page---gap, var(--origam-space---2, 8px));
+
+			> span {
+				padding-inline-end: var(--origam-data-table-footer__items-per-page---padding-inline-end, var(--origam-space---2, 8px));
+			}
+		}
+
+		&__info {
+			display: flex;
+			justify-content: var(--origam-data-table-footer__info---justify-content, flex-end);
+			min-width: var(--origam-data-table-footer__info---min-width, 116px);
+			padding-inline: var(--origam-data-table-footer__info---padding-inline, var(--origam-space---4, 16px));
+		}
+
+		&__pagination {
+			align-items: center;
+			display: flex;
+			margin-inline-start: var(--origam-data-table-footer__pagination---margin-inline-start, var(--origam-space---4, 16px));
+		}
+	}
+</style>

package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue

@@ -49,7 +49,7 @@
 
 <script setup>
 import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
-import { useGroupBy, useHeaders, useProps, useSelection } from "../../composables";
+import { useGroupBy, useHeaders, useProps, useSelection, useStyle } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
@@ -66,11 +66,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -130,13 +125,25 @@ const dataTableGroupHeaderRowStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableGroupHeaderRowStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
-<style>
-	:root {
+<style lang="scss" scoped>
+	.origam-data-table-group-header-row {
+		background-color: var(--origam-data-table-group-header-row---background-color, var(--origam-color__surface---overlay));
+		color: var(--origam-data-table-group-header-row---color, var(--origam-color__text---primary));
+		font-weight: var(--origam-data-table-group-header-row---font-weight, 500);
 
+		&__column {
+			padding-inline-start: calc(var(--origam-data-table-group-header-row--depth, 0) * var(--origam-data-table-group-header-row__column---padding-inline-start-factor, 16px));
+		}
 	}
 </style>

package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue

@@ -31,7 +31,7 @@
 					<div class="origam-data-table-header-cell__content">
 						<span>{{ column.title }}</span>
 
-						<template v-if="column.sortable && !props.disableSort">
+						<template v-if="column.sortable && !disableSort">
 							<origam-icon
 									key="icon"
 									:class="{'origam-data-table-header-cell__sort-icon--active': isSorted(column)}"
@@ -40,7 +40,7 @@
 							/>
 						</template>
 
-						<template v-if="props.multiSort && isSorted(column)">
+						<template v-if="multiSort && isSorted(column)">
 							<div
 									key="badge"
 									:style="colorStyles"
@@ -58,7 +58,15 @@
 
 <script setup>
 import { OrigamCheckboxBtn, OrigamDataTableColumnCell, OrigamIcon } from "../../components";
-import { useBothColor, useCell, useHeadersCell, useProps, useSelection, useSort } from "../../composables";
+import {
+  useBothColor,
+  useCell,
+  useHeadersCell,
+  useProps,
+  useSelection,
+  useSort,
+  useStyle
+} from "../../composables";
 import { convertToUnit } from "../../utils";
 import { computed, CSSProperties, mergeProps, toRef } from "vue";
 const props = defineProps({
@@ -74,19 +82,14 @@ const props = defineProps({
   multiSort: { type: Boolean, required: false },
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { toggleSort, sortBy, isSorted } = useSort();
 const { someSelected, allSelected, selectAll } = useSelection();
 const { getSortIcon } = useHeadersCell(props);
 const { getPadding } = useCell();
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const headerProps = mergeProps(props.headerProps ?? {});
 const sortedItems = (column) => {
   return sortBy.value.findIndex((x) => {
@@ -129,11 +132,20 @@ const dataTableHeaderCellClasses = computed(() => {
       "origam-data-table-header-cell--sorted": isSorted(props.column),
       "origam-data-table-header-cell--fixed": props.column.fixed
     },
+    colorClasses.value,
     props.class
   ];
 });
 const dataTableHeaderCellStyles = computed(() => {
   return [
+    // `colorStyles` from `useBothColor` was only applied to the
+    // sort badge pre-fix — meaning consumers passing `color` /
+    // `bgColor` on the DataTable saw NO effect on the header
+    // row itself (the visual surface they actually want to
+    // theme). Apply at the cell level so `bg-color="primary"`
+    // paints the title row, and `color="primary"` tints the
+    // title text + sort indicator.
+    colorStyles.value,
     {
       width: convertToUnit(props.column.width),
       minWidth: convertToUnit(props.column.minWidth),
@@ -143,8 +155,14 @@ const dataTableHeaderCellStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeaderCellStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -153,53 +171,51 @@ defineExpose({
 		$this: &;
 
 		align-items: center;
-		color: var(--origam-data-table-header-cell---color);
+		color: var(--origam-data-table-header-cell---color, var(--origam-color__text---primary));
 
 		&__sort-icon {
-			opacity: 0;
-			color: var(--origam-data-table-header-cell__sort-icon---color);
+			opacity: var(--origam-data-table-header-cell__sort-icon---opacity, 0);
+			color: var(--origam-data-table-header-cell__sort-icon---color, var(--origam-color__text---primary));
 
 			&--active {
-				color: var(--origam-data-table-header-cell__sort-icon--active---color);
+				color: var(--origam-data-table-header-cell__sort-icon--active---color, var(--origam-color__text---primary));
 			}
 		}
 
 		&__content {
 			display: flex;
 			align-items: center;
+			gap: var(--origam-data-table-header-cell__content---gap, 4px);
 		}
 
 		&__sort-badge {
 			display: inline-flex;
 			justify-content: center;
 			align-items: center;
-			font-size: .875rem;
-			padding: 4px;
-			border-radius: 50%;
-			background: var(--origam-data-table-header-cell__sort-badge---background);
-			min-width: 20px;
-			min-height: 20px;
-			width: 20px;
-			height: 20px
-		}
-
-		span {
-			padding-left: 5px;
+			font-size: var(--origam-data-table-header-cell__sort-badge---font-size, 0.875rem);
+			padding: var(--origam-data-table-header-cell__sort-badge---padding, var(--origam-space---1, 4px));
+			border-radius: var(--origam-data-table-header-cell__sort-badge---border-radius, var(--origam-radius---full, 9999px));
+			background: var(--origam-data-table-header-cell__sort-badge---background, var(--origam-color__border---default));
+			color: var(--origam-data-table-header-cell__sort-badge---color, var(--origam-color__text---primary));
+			min-width: var(--origam-data-table-header-cell__sort-badge---min-width, 20px);
+			min-height: var(--origam-data-table-header-cell__sort-badge---min-height, 20px);
+			width: var(--origam-data-table-header-cell__sort-badge---width, 20px);
+			height: var(--origam-data-table-header-cell__sort-badge---height, 20px)
 		}
 
 		&#{$this}--sortable {
-			cursor: pointer;
+			cursor: var(--origam-data-table-sortable---cursor, pointer);
 
 			&:hover {
 				#{$this}__sort-icon {
-					opacity: .5;
+					opacity: var(--origam-data-table-header-cell__sort-icon---opacity-hover, 0.5);
 				}
 			}
 		}
 
 		&#{$this}--sorted {
 			#{$this}__sort-icon {
-				opacity: 1;
+				opacity: var(--origam-data-table-header-cell__sort-icon---opacity-active, 1);
 			}
 		}
 
@@ -208,22 +224,8 @@ defineExpose({
 		}
 
 		&:deep(.origam-data-table-cell) {
-			background: var(--origam-data-table-header-cell---background);
-			color: var(--origam-data-table-header-cell---color);
+			background: var(--origam-data-table-header-cell---background, var(--origam-color__surface---raised));
+			color: var(--origam-data-table-header-cell---color, var(--origam-color__text---primary));
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-data-table-header-cell---background: rgba(33, 33, 33, 1);
-		--origam-data-table-header-cell---color: rgba(255, 255, 255, 1);
-
-		--origam-data-table-header-cell--sortable---color: rgba(255, 255, 255, 1);
-
-		--origam-data-table-header-cell__sort-badge---background: rgba(255, 255, 255, 0.12);
-
-		--origam-data-table-header-cell__sort-icon---color: rgba(255, 255, 255, 1);
-		--origam-data-table-header-cell__sort-icon--active---color: rgba(255, 255, 255, 1);
-	}
-</style>