origam 2.16.0 → 2.17.0

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

@@ -1,7 +1,8 @@
 <template>
 	<tr
-			:class="dataTableGroupHeaderRowClasses"
-			:style="dataTableGroupHeaderRowStyles"
+			:id="id"
+			:class="[dataTableGroupHeaderRowClasses, textColorClasses]"
+			:style="[dataTableGroupHeaderRowStyles, textColorStyles]"
 	>
 		<template
 				v-for="(column, index) in columns"
@@ -48,46 +49,44 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
-import { useGroupBy, useHeaders, useProps, useSelection, useStyle } from "../../composables";
-import { MDI_ICONS } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamCheckboxBtn from "../Checkbox/OrigamCheckboxBtn.vue";
+import OrigamDataTableColumnCell from "./OrigamDataTableColumnCell.vue";
+import { useGroupBy } from "../../composables/DataTable/group.composable";
+import { useHeaders } from "../../composables/DataTable/headers.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   index: { type: Number, required: true },
   item: { type: null, required: true },
-  internalItem: { type: Object, required: true },
   columns: { type: Array, required: true },
-  isExpanded: { type: Function, required: true },
-  toggleExpand: { type: Function, required: true },
   isSelected: { type: Function, required: true },
-  toggleSelect: { type: Function, required: true },
   toggleGroup: { type: Function, required: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Object, 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 },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { isGroupOpen, toggleGroup, extractRows } = useGroupBy();
 const { isSelected, isSomeSelected, select } = useSelection();
 const { columns } = useHeaders();
+const { textColorClasses, textColorStyles } = useTextColor(props, "color");
 const rows = computed(() => {
   return extractRows([props.item]);
 });
 const groupIcon = computed(() => {
   return isGroupOpen(props.item) ? MDI_ICONS.CHEVRON_DOWN : MDI_ICONS.CHEVRON_RIGHT;
 });
-const handleClick = () => toggleGroup(props.item);
+const handleClick = () => (props.toggleGroup ?? toggleGroup)(props.item);
 const modelValue = computed(() => {
-  return isSelected(rows.value);
+  return (props.isSelected ?? isSelected)(rows.value);
 });
 const indeterminate = computed(() => {
   return isSomeSelected(rows.value) && !modelValue.value;
@@ -126,7 +125,7 @@ const dataTableGroupHeaderRowStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableGroupHeaderRowStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableGroupHeaderRowStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -139,12 +138,12 @@ defineExpose({
 
 <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);
+		background-color: var(--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-data-table---group-header-row-color, var(--origam-color__text---primary)));
+		font-weight: var(--origam-data-table-group-header-row---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));
+			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, var(--origam-data-table---group-header-row-column-padding-inline-start-factor, 16px)));
 		}
 	}
 </style>

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

@@ -1,5 +1,6 @@
 <template>
 	<origam-data-table-column-cell
+			:id="id"
 			:align="column.align"
 			:aria-sort="column.sortable && !disableSort ? (isSorted(column) ? (sortBy.find((s: IDataTableSortItem) => s.key === column.key)?.order === 'desc' ? 'descending' : 'ascending') : 'none') : undefined"
 			:class="dataTableHeaderCellClasses"
@@ -58,17 +59,17 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamCheckboxBtn, OrigamDataTableColumnCell, OrigamIcon } from "../../components";
-import {
-  useBothColor,
-  useCell,
-  useHeadersCell,
-  useProps,
-  useSelection,
-  useSort,
-  useStyle
-} from "../../composables";
-import { convertToUnit } from "../../utils";
+import OrigamCheckboxBtn from "../Checkbox/OrigamCheckboxBtn.vue";
+import OrigamDataTableColumnCell from "./OrigamDataTableColumnCell.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useCell } from "../../composables/DataTable/cell.composable";
+import { useHeadersCell } from "../../composables/DataTable/headersCell.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useSort } from "../../composables/DataTable/sort.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { convertToUnit } from "../../utils/Commons/commons.util";
 import { computed, CSSProperties, mergeProps, toRef } from "vue";
 const props = defineProps({
   column: { type: Object, required: true },
@@ -86,6 +87,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { toggleSort, sortBy, isSorted } = useSort();
@@ -93,11 +95,11 @@ const { someSelected, allSelected, selectAll } = useSelection();
 const { getSortIcon } = useHeadersCell(props);
 const { getPadding } = useCell();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const headerProps = mergeProps(props.headerProps ?? {});
+const headerProps = computed(() => mergeProps(props.headerProps ?? {}));
 const sortedItems = (column) => {
   return sortBy.value.findIndex((x) => {
-    return x.key === column.key + 1;
-  });
+    return x.key === column.key;
+  }) + 1;
 };
 const getFixedStyles = (column, y) => {
   if (!props.sticky && !column.fixed) return void 0;
@@ -158,7 +160,7 @@ const dataTableHeaderCellStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableHeaderCellStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeaderCellStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -174,14 +176,14 @@ defineExpose({
 		$this: &;
 
 		align-items: center;
-		color: var(--origam-data-table-header-cell---color, var(--origam-color__text---primary));
+		color: var(--origam-data-table-header-cell---color, var(--origam-data-table__header---color, var(--origam-color__text---primary)));
 
 		&__sort-icon {
-			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));
+			opacity: var(--origam-data-table-header-cell__sort-icon---opacity, var(--origam-data-table__header---sort-icon-opacity, 0));
+			color: var(--origam-data-table-header-cell__sort-icon---color, var(--origam-data-table__header---sort-icon-color, var(--origam-data-table__sortable---icon-color, var(--origam-color__text---primary))));
 
 			&--active {
-				color: var(--origam-data-table-header-cell__sort-icon--active---color, var(--origam-color__text---primary));
+				color: var(--origam-data-table-header-cell__sort-icon--active---color, var(--origam-data-table__header---sort-icon-color-active, var(--origam-data-table__sortable---icon-color-active, var(--origam-color__text---primary))));
 			}
 		}
 
@@ -195,30 +197,30 @@ defineExpose({
 			display: inline-flex;
 			justify-content: center;
 			align-items: center;
-			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)
+			font-size: var(--origam-data-table-header-cell__sort-badge---font-size, var(--origam-data-table__header---sort-badge-font-size, 0.875rem));
+			padding: var(--origam-data-table-header-cell__sort-badge---padding, var(--origam-data-table__header---sort-badge-padding, var(--origam-space---1, 4px)));
+			border-radius: var(--origam-data-table-header-cell__sort-badge---border-radius, var(--origam-data-table__header---sort-badge-border-radius, var(--origam-radius---full, 9999px)));
+			background: var(--origam-data-table-header-cell__sort-badge---background, var(--origam-data-table__header---sort-badge-background-color, var(--origam-color__border---default)));
+			color: var(--origam-data-table-header-cell__sort-badge---color, var(--origam-data-table__header---sort-badge-color, var(--origam-color__text---primary)));
+			min-width: var(--origam-data-table-header-cell__sort-badge---min-width, var(--origam-data-table__header---sort-badge-min-width, 20px));
+			min-height: var(--origam-data-table-header-cell__sort-badge---min-height, var(--origam-data-table__header---sort-badge-min-height, 20px));
+			width: var(--origam-data-table-header-cell__sort-badge---width, var(--origam-data-table__header---sort-badge-width, 20px));
+			height: var(--origam-data-table-header-cell__sort-badge---height, var(--origam-data-table__header---sort-badge-height, 20px))
 		}
 
 		&#{$this}--sortable {
-			cursor: var(--origam-data-table-sortable---cursor, pointer);
+			cursor: var(--origam-data-table-sortable---cursor, var(--origam-data-table__sortable---cursor, pointer));
 
 			&:hover {
 				#{$this}__sort-icon {
-					opacity: var(--origam-data-table-header-cell__sort-icon---opacity-hover, 0.5);
+					opacity: var(--origam-data-table-header-cell__sort-icon---opacity-hover, var(--origam-data-table__header---sort-icon-opacity-hover, 0.5));
 				}
 			}
 		}
 
 		&#{$this}--sorted {
 			#{$this}__sort-icon {
-				opacity: var(--origam-data-table-header-cell__sort-icon---opacity-active, 1);
+				opacity: var(--origam-data-table-header-cell__sort-icon---opacity-active, var(--origam-data-table__header---sort-icon-opacity-active, 1));
 			}
 		}
 
@@ -227,8 +229,8 @@ defineExpose({
 		}
 
 		&:deep(.origam-data-table-cell) {
-			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));
+			background: var(--origam-data-table-header-cell---background, var(--origam-data-table__header---background-color, var(--origam-color__surface---raised)));
+			color: var(--origam-data-table-header-cell---color, var(--origam-data-table__header---color, var(--origam-color__text---primary)));
 		}
 	}
 </style>

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

@@ -5,6 +5,7 @@
 				v-bind="slotProps"
 		>
 			<origam-data-table-headers-cell-mobile
+					:id="id"
 					ref="origamDataTableHeadersCellMobileRef"
 					:class="dataTableHeadersClasses"
 					:columns="columns"
@@ -19,12 +20,24 @@
 				v-bind="slotProps"
 		>
 			<origam-data-table-headers-cell
+					:id="id"
 					ref="origamDataTableHeadersCellRef"
 					:class="dataTableHeadersClasses"
 					:headers="headers"
 					:style="dataTableHeadersStyles"
 					v-bind="dataTableHeadersCellProps"
-			/>
+			>
+				<template
+						v-for="name in headerColumnSlotNames"
+						:key="name"
+						#[name]="columnProps"
+				>
+					<slot
+							:name="name"
+							v-bind="columnProps"
+					/>
+				</template>
+			</origam-data-table-headers-cell>
 		</slot>
 	</template>
 
@@ -52,19 +65,21 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamDataTableHeadersCell, OrigamDataTableHeadersCellMobile, OrigamProgress } from "../../components";
-import {
-  useDisplay,
-  useHeaders,
-  useHeadersCell,
-  useLoader,
-  useProps,
-  useSelection,
-  useSort,
-  useStyle
-} from "../../composables";
-import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
-import { computed, ref, StyleValue } from "vue";
+import OrigamDataTableHeadersCell from "./OrigamDataTableHeadersCell.vue";
+import OrigamDataTableHeadersCellMobile from "./OrigamDataTableHeadersCellMobile.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import { useDisplay } from "../../composables/Commons/display.composable";
+import { useHeaders } from "../../composables/DataTable/headers.composable";
+import { useHeadersCell } from "../../composables/DataTable/headersCell.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useSort } from "../../composables/DataTable/sort.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { pickDataTableHeaderColumnSlotNames } from "../../utils/DataTable/slot-name.util";
+import { computed, ref, StyleValue, useSlots } from "vue";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -81,8 +96,10 @@ const props = defineProps({
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
+const slots = useSlots();
 const origamDataTableHeadersCellRef = ref();
 const origamDataTableHeadersCellMobileRef = ref();
 const { toggleSort, sortBy, isSorted } = useSort();
@@ -110,6 +127,9 @@ const dataTableHeadersCellProps = computed(() => {
 const dataTableHeadersCellMobileProps = computed(() => {
   return origamDataTableHeadersCellMobileRef.value?.filterProps(props);
 });
+const headerColumnSlotNames = computed(() => {
+  return pickDataTableHeaderColumnSlotNames(Object.keys(slots));
+});
 const dataTableHeadersClasses = computed(() => {
   return [
     "origam-data-table-headers",
@@ -126,7 +146,7 @@ const dataTableHeadersStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -3,7 +3,10 @@
 			v-for="(row, y) in headers"
 			:key="y"
 	>
-		<tr class="origam-data-table-headers">
+		<tr
+				:id="headerRowId(y)"
+				class="origam-data-table-headers"
+		>
 			<template
 					v-for="(column, x) in row"
 					:key="x"
@@ -16,16 +19,29 @@
 						:x="x"
 						:y="y"
 						v-bind="dataTableHeaderCellProps"
-				/>
+				>
+					<template
+							v-for="name in headerColumnSlotNames"
+							:key="name"
+							#[name]="columnProps"
+					>
+						<slot
+								:name="name"
+								v-bind="columnProps"
+						/>
+					</template>
+				</origam-data-table-header-cell>
 			</template>
 		</tr>
 	</template>
 </template>
 
 <script lang="ts" setup>
-import { OrigamDataTableHeaderCell } from "../../components";
-import { useProps, useStyle } from "../../composables";
-import { computed, ref, StyleValue } from "vue";
+import OrigamDataTableHeaderCell from "./OrigamDataTableHeaderCell.vue";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { pickDataTableHeaderColumnSlotNames } from "../../utils/DataTable/slot-name.util";
+import { computed, ref, StyleValue, useSlots } from "vue";
 const props = defineProps({
   headers: { type: Array, required: true },
   id: { type: String, required: false },
@@ -39,8 +55,14 @@ const props = defineProps({
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false }
 });
+defineEmits([]);
+defineSlots();
 const { filterProps } = useProps(props);
+const slots = useSlots();
 const origamDataTableHeaderCellRef = ref();
+const headerColumnSlotNames = computed(() => {
+  return pickDataTableHeaderColumnSlotNames(Object.keys(slots));
+});
 const dataTableHeaderCellProps = computed(() => {
   return origamDataTableHeaderCellRef.value?.[0]?.filterProps(props);
 });
@@ -54,7 +76,8 @@ const dataTableHeadersCellStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles, () => props.id);
+const headerRowId = (index) => props.id ? `${props.id}-row-${index}` : void 0;
 defineExpose({
   filterProps,
   css,

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

@@ -1,6 +1,7 @@
 <template>
 	<tr class="origam-data-table-headers__row">
 		<origam-data-table-column-cell
+				:id="id"
 				:class="dataTableHeadersCellClasses"
 				:colspan="colspan"
 				:style="dataTableHeadersCellStyles"
@@ -186,16 +187,17 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamChip, OrigamDataTableColumnCell, OrigamSelect } from "../../components";
-import {
-  useHeadersCell,
-  useLocale,
-  useProps,
-  useSelection,
-  useSort,
-  useStyle
-} from "../../composables";
-import { DENSITY, MDI_ICONS } from "../../enums";
+import OrigamChip from "../Chip/OrigamChip.vue";
+import OrigamDataTableColumnCell from "./OrigamDataTableColumnCell.vue";
+import OrigamSelect from "../Select/OrigamSelect.vue";
+import { useHeadersCell } from "../../composables/DataTable/headersCell.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useSort } from "../../composables/DataTable/sort.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, mergeProps, useSlots } from "vue";
 const props = defineProps({
   columns: { type: Array, required: true },
@@ -219,7 +221,7 @@ const slots = useSlots();
 const { toggleSort, sortBy, isSorted } = useSort();
 const { someSelected, allSelected, selectAll } = useSelection();
 const { getSortIcon } = useHeadersCell(props);
-const headerProps = mergeProps(props.headerProps ?? {});
+const headerProps = computed(() => mergeProps(props.headerProps ?? {}));
 const displayItems = computed(() => {
   return props.columns.filter((column) => {
     return column?.sortable && !props.disableSort;
@@ -237,7 +239,7 @@ const handleClear = (e) => {
   emits("click:clear", e);
 };
 const handleAppendCLick = (e) => {
-  selectAll(!allSelected);
+  selectAll(!allSelected.value);
   emits("click:append", e);
 };
 const handlePrependClick = (e) => {
@@ -262,7 +264,7 @@ const dataTableHeadersCellStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,5 +1,6 @@
 <template>
 	<tr
+			:id="id"
 			:aria-selected="showSelect ? isSelected([item]) : undefined"
 			:class="dataTableRowClasses"
 			:style="dataTableRowStyles"
@@ -43,7 +44,7 @@
 							>
 								<origam-btn
 										:aria-expanded="isExpanded(item)"
-										:aria-label="isExpanded(item) ? t('origam.data_table_row.collapse_row', 'Collapse row') : t('origam.data_table_row.expand_row', 'Expand row')"
+										:aria-label="isExpanded(item) ? t('origam.data_table_row.collapse_row') : t('origam.data_table_row.expand_row')"
 										:icon="isExpanded(item) ? MDI_ICONS.CHEVRON_UP : MDI_ICONS.CHEVRON_DOWN"
 										:size="SIZES.SMALL"
 										@click="handleBtnClick"
@@ -81,22 +82,24 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
-import {
-  useCell,
-  useDisplay,
-  useExpanded,
-  useHeaders,
-  useLocale,
-  useProps,
-  useSelection,
-  useSort,
-  useStyle
-} from "../../composables";
-import { MDI_ICONS, SIZES } from "../../enums";
-import { getCurrentInstance, getObjectValueByPath } from "../../utils";
-import { ORIGAM_DATA_TABLE_SHOW_SELECT_KEY } from "../../consts";
-import { computed, inject, ref, Ref, StyleValue, toDisplayString, withModifiers } from "vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamCheckboxBtn from "../Checkbox/OrigamCheckboxBtn.vue";
+import OrigamDataTableColumnCell from "./OrigamDataTableColumnCell.vue";
+import { useCell } from "../../composables/DataTable/cell.composable";
+import { useDisplay } from "../../composables/Commons/display.composable";
+import { useExpanded } from "../../composables/DataTable/expand.composable";
+import { useHeaders } from "../../composables/DataTable/headers.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useSort } from "../../composables/DataTable/sort.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util";
+import { getObjectValueByPath } from "../../utils/Commons/commons.util";
+import { ORIGAM_DATA_TABLE_SHOW_SELECT_KEY } from "../../consts/DataTable/data-table.const";
+import { computed, inject, ref, Ref, StyleValue, toDisplayString } from "vue";
 const vm = getCurrentInstance("dataTableRow");
 const props = defineProps({
   item: { type: Object, required: true },
@@ -164,13 +167,15 @@ const columnCellProps = (index, column) => {
 const displayValue = (index, column) => {
   return toDisplayString(slotProps(index, column).value);
 };
-const handleCheckBoxClick = () => {
-  withModifiers(() => toggleSelect(props.item), ["stop"]);
-  emits("select");
+const handleCheckBoxClick = (e) => {
+  e.stopPropagation();
+  toggleSelect(props.item);
+  emits("select", { item: props.item, value: isSelected([props.item]) });
 };
-const handleBtnClick = () => {
-  withModifiers(() => toggleExpand(props.item), ["stop"]);
-  emits("expand");
+const handleBtnClick = (e) => {
+  e.stopPropagation();
+  toggleExpand(props.item);
+  emits("expand", { item: props.item, value: isExpanded(props.item) });
 };
 const dataTableColumnCellClasses = (key) => {
   return [
@@ -196,7 +201,7 @@ const dataTableRowStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableRowStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableRowStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -211,18 +216,18 @@ defineExpose({
 	.origam-data-table-row {
 		$this: &;
 
-		background-color: var(--origam-data-table-row---background-color, var(--origam-color__surface---default));
-		color: var(--origam-data-table-row---color, var(--origam-color__text---primary));
+		background-color: var(--origam-data-table-row---background-color, var(--origam-data-table__row---background-color, var(--origam-color__surface---default)));
+		color: var(--origam-data-table-row---color, var(--origam-data-table__row---color, var(--origam-color__text---primary)));
 		transition-property: background-color;
-		transition-duration: var(--origam-data-table-row---transition-duration, 100ms);
-		transition-timing-function: var(--origam-data-table-row---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+		transition-duration: var(--origam-data-table-row---transition-duration, var(--origam-data-table__row---transition-duration, 100ms));
+		transition-timing-function: var(--origam-data-table-row---transition-easing, var(--origam-data-table__row---transition-easing, cubic-bezier(0.4, 0, 0.2, 1)));
 
 		&:hover {
-			background-color: var(--origam-data-table-row--hover---background-color, var(--origam-color__surface---overlay));
+			background-color: var(--origam-data-table-row--hover---background-color, var(--origam-data-table__row---hover-background-color, var(--origam-color__surface---overlay)));
 		}
 
 		&__column-title {
-			font-weight: var(--origam-data-table-row__column-title---font-weight, 500);
+			font-weight: var(--origam-data-table-row__column-title---font-weight, var(--origam-data-table__row---column-title-font-weight, 500));
 		}
 
 		&--clickable {
@@ -257,7 +262,7 @@ defineExpose({
 				column-gap: 4px;
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
-				min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table-row--mobile__column, 52px));
+				min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table-row--mobile__column, var(--origam-data-table__row---mobile-column-min-height, 52px)));
 
 				&:not(:last-child) {
 					border-bottom: 0;