origam 2.15.0 → 2.17.0

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;

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

@@ -3,6 +3,7 @@
 		<template v-if="loaderConfig.kind === 'skeleton'">
 			<tr
 					v-for="rowIndex in SKELETON_ROW_COUNT"
+					:id="skeletonRowId(rowIndex)"
 					:key="`skeleton-row_${rowIndex}`"
 					class="origam-data-table-rows origam-data-table-rows--skeleton"
 					aria-busy="true"
@@ -18,8 +19,11 @@
 		</template>
 		<template v-else>
 			<tr
+					:id="id"
 					key="loading"
 					class="origam-data-table-rows origam-data-table-rows--loading"
+					:class="textColorClasses"
+					:style="textColorStyles"
 			>
 				<td :colspan="columns.length">
 					<slot name="loading">
@@ -32,8 +36,11 @@
 
 	<template v-else-if="!(items && items.length) && !hideNoData">
 		<tr
+				:id="id"
 				key="no-data"
 				class="origam-data-table-rows origam-data-table-rows--no-data"
+				:class="textColorClasses"
+				:style="textColorStyles"
 		>
 			<td :colspan="columns.length">
 				<slot name="no-data">
@@ -51,9 +58,29 @@
 						v-bind="groupHeaderSlotProps(item, index)"
 				>
 					<origam-data-table-group-header-row
+							:id="itemRowId(index)"
 							:key="`group-header_${item.id}`"
-							v-bind="groupHeaderSlotProps(item, index)"
+							v-bind="groupHeaderRowProps(item, index)"
 					>
+						<template
+								v-if="$slots['data-table-group']"
+								#data-table-group="groupProps"
+						>
+							<slot
+									name="data-table-group"
+									v-bind="groupProps"
+							/>
+						</template>
+
+						<template
+								v-if="$slots['data-table-select']"
+								#data-table-select="selectProps"
+						>
+							<slot
+									name="data-table-select"
+									v-bind="selectProps"
+							/>
+						</template>
 					</origam-data-table-group-header-row>
 				</slot>
 			</template>
@@ -64,9 +91,33 @@
 						v-bind="itemSlotProps(item, index)"
 				>
 					<origam-data-table-row
+							:id="itemRowId(index)"
 							:item="item"
 							v-bind="{...itemSlotProps(item, index).props}"
+							@expand="emit('expand', $event)"
+							@select="emit('select', $event)"
 					>
+						<template
+								v-for="name in itemColumnSlotNames"
+								:key="name"
+								#[name]="cellProps"
+						>
+							<slot
+									:name="name"
+									v-bind="cellProps"
+							/>
+						</template>
+
+						<template
+								v-for="name in headerColumnSlotNames"
+								:key="name"
+								#[name]="titleProps"
+						>
+							<slot
+									:name="name"
+									v-bind="titleProps"
+							/>
+						</template>
 					</origam-data-table-row>
 				</slot>
 
@@ -82,10 +133,26 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
-import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, usePagination, useProps, useSelection } from "../../composables";
-import { getPrefixedEventHandlers } from "../../utils";
-import { mergeProps, useAttrs } from "vue";
+import OrigamDataTableGroupHeaderRow from "./OrigamDataTableGroupHeaderRow.vue";
+import OrigamDataTableRow from "./OrigamDataTableRow.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import { useDisplay } from "../../composables/Commons/display.composable";
+import { useExpanded } from "../../composables/DataTable/expand.composable";
+import { useGroupBy } from "../../composables/DataTable/group.composable";
+import { useHeaders } from "../../composables/DataTable/headers.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { usePagination } from "../../composables/DataTable/pagination.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSelection } from "../../composables/DataTable/select.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { getPrefixedEventHandlers } from "../../utils/Commons/event.util";
+import {
+  pickDataTableHeaderColumnSlotNames,
+  pickDataTableItemColumnSlotNames
+} from "../../utils/DataTable/slot-name.util";
+import { computed, mergeProps, useAttrs, useSlots } from "vue";
 const attrs = useAttrs();
 const props = defineProps({
   hideNoData: { type: Boolean, required: false },
@@ -93,20 +160,28 @@ const props = defineProps({
   noDataText: { type: String, required: false, default: "origam.no_data_text" },
   rowProps: { type: [Object, Function], required: false },
   cellProps: { type: [Object, Function], required: false },
-  id: { type: String, required: false },
-  class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false, default: "origam.data_iterator.loading_text" },
-  tag: { type: String, required: false },
+  id: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false }
 });
+const emit = defineEmits(["expand", "select"]);
 defineSlots();
+const slots = useSlots();
+const itemColumnSlotNames = computed(() => {
+  return pickDataTableItemColumnSlotNames(Object.keys(slots));
+});
+const headerColumnSlotNames = computed(() => {
+  return pickDataTableHeaderColumnSlotNames(Object.keys(slots));
+});
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const SKELETON_ROW_COUNT = 5;
-const { loaderConfig } = useLoader(props, "line");
+const skeletonRowId = (index) => props.id ? `${props.id}-skeleton-row-${index}` : void 0;
+const itemRowId = (index) => props.id ? `${props.id}-row-${index}` : void 0;
+const { loaderConfig } = useLoader(props, LOADER_KIND.LINE);
+const { textColorClasses, textColorStyles } = useTextColor(props, "color");
 const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();
@@ -140,6 +215,17 @@ const groupHeaderSlotProps = (item, index) => {
     isGroupOpen
   });
 };
+const groupHeaderRowProps = (item, index) => {
+  const slotPropsLocal = slotProps(item, index);
+  return {
+    index,
+    item,
+    columns: columns.value,
+    isSelected,
+    toggleGroup,
+    ...getPrefixedEventHandlers(attrs, ":group-header", () => slotPropsLocal)
+  };
+};
 const itemSlotProps = (item, index) => {
   const slotPropsLocal = slotProps(item, index);
   return Object.assign({}, slotPropsLocal, {
@@ -182,12 +268,12 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-data-table-rows {
 		&--no-data {
-			text-align: var(--origam-data-table-empty---text-align, center);
-			color: var(--origam-data-table-rows--no-data---color, var(--origam-color__text---secondary));
+			text-align: var(--origam-data-table-empty---text-align, var(--origam-data-table__empty---text-align, center));
+			color: var(--origam-data-table-rows--no-data---color, var(--origam-data-table__empty---color, var(--origam-color__text---secondary)));
 		}
 
 		&--loading {
-			color: var(--origam-data-table-rows--loading---color, var(--origam-color__text---secondary));
+			color: var(--origam-data-table-rows--loading---color, var(--origam-data-table---loading-row-color, var(--origam-color__text---secondary)));
 		}
 
 		&--skeleton {

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-picker
+			:id="id"
 			ref="origamPickerRef"
 			:class="datePickerClasses"
 			:style="datePickerStyles"
@@ -13,10 +14,7 @@
 			<slot name="title"/>
 		</template>
 
-		<template
-				v-if="slots.header"
-				#header
-		>
+		<template #header>
 			<slot
 					name="header"
 					v-bind="headerProps"
@@ -25,7 +23,7 @@
 						key="header"
 						ref="origamDatePickerHeaderRef"
 						v-bind="{ ...datePickerHeaderProps, ...headerProps }"
-						@click="!viewModeIsMonth ? handleClickDate : undefined"
+						@click="handleHeaderClick"
 				/>
 			</slot>
 		</template>
@@ -33,7 +31,7 @@
 		<slot name="default">
 			<origam-date-picker-controls
 					ref="origamDatePickerControlsRef"
-					:text="text"
+					:text="controlsText"
 					v-bind="{...datePickerControlsProps, ...disabledControlers}"
 					@click:next="handleClickNext"
 					@click:prev="handleClickPrev"
@@ -94,20 +92,24 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  OrigamDatePickerControls,
-  OrigamDatePickerHeader,
-  OrigamDatePickerMonth,
-  OrigamDatePickerMonths,
-  OrigamDatePickerYears,
-  OrigamFade,
-  OrigamPicker,
-  OrigamReverseTranslatePicker,
-  OrigamTranslatePicker
-} from "../../components";
-import { useDate, useLocale, useProps, useVModel, useStyle } from "../../composables";
-import { CALENDAR_STRATEGY, DATE_MODE } from "../../enums";
-import { wrapInArray } from "../../utils";
+import OrigamDatePickerControls from "./OrigamDatePickerControls.vue";
+import OrigamDatePickerHeader from "./OrigamDatePickerHeader.vue";
+import OrigamDatePickerMonth from "./OrigamDatePickerMonth.vue";
+import OrigamDatePickerMonths from "./OrigamDatePickerMonths.vue";
+import OrigamDatePickerYears from "./OrigamDatePickerYears.vue";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamPicker from "../Picker/OrigamPicker.vue";
+import OrigamReverseTranslatePicker from "../Transition/OrigamReverseTranslatePicker.vue";
+import OrigamTranslatePicker from "../Transition/OrigamTranslatePicker.vue";
+import { useDate } from "../../composables/Commons/date.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { UNSEEDED } from "../../consts/Commons/vmodel.const";
+import { CALENDAR_STRATEGY } from "../../enums/Commons/calendar.enum";
+import { DATE_MODE } from "../../enums/DatePicker/date-picker.enum";
+import { wrapInArray } from "../../utils/Commons/commons.util";
 import { computed, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
   modelValue: { type: [String, Date, Array], required: false },
@@ -153,10 +155,11 @@ const props = defineProps({
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false },
+  defaultSnap: { type: null, required: false },
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
+  handleLabel: { type: String, required: false },
   tag: { type: String, required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
@@ -174,12 +177,11 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   title: { type: String, required: false, default: "origam.date_picker.title" },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
   disabledNext: { type: Boolean, required: false },
@@ -240,8 +242,20 @@ const internal = computed(() => {
   const value = adapter.date(model.value?.[0]);
   return value && adapter.isValid(value) ? value : adapter.date();
 });
-const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
-const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
+const internalMonth = ref(UNSEEDED);
+const month = computed({
+  get: () => internalMonth.value === UNSEEDED ? Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))) : internalMonth.value,
+  set: (value) => {
+    internalMonth.value = value;
+  }
+});
+const internalYear = ref(UNSEEDED);
+const year = computed({
+  get: () => internalYear.value === UNSEEDED ? Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))) : internalYear.value,
+  set: (value) => {
+    internalYear.value = value;
+  }
+});
 const isReversing = shallowRef(false);
 const header = computed(() => {
   if ((props.multiple || props.range) && model.value?.length > 1) {
@@ -249,13 +263,16 @@ const header = computed(() => {
   }
   return model.value?.[0] && adapter.isValid(model.value?.[0]) ? adapter.format(adapter.date(model.value?.[0]), "normalDateWithWeekday") : t(props.header);
 });
-const text = computed(() => {
+const monthAndYearText = computed(() => {
   let date = adapter.date();
   date = adapter.setDate(date, 1);
   date = adapter.setMonth(date, month.value);
   date = adapter.setYear(date, year.value);
   return adapter.format(date, "monthAndYear");
 });
+const controlsText = computed(() => {
+  return props.text || monthAndYearText.value;
+});
 const headerTransition = computed(() => {
   return {
     component: isReversing.value ? OrigamReverseTranslatePicker : OrigamTranslatePicker
@@ -322,6 +339,9 @@ const handleClickPrev = () => {
 const handleClickDate = () => {
   viewMode.value = DATE_MODE.MONTH;
 };
+const handleHeaderClick = () => {
+  if (!viewModeIsMonth.value) handleClickDate();
+};
 const handleClickMonth = () => {
   viewMode.value = viewModeIsMonths.value ? DATE_MODE.MONTH : DATE_MODE.MONTHS;
 };
@@ -402,7 +422,7 @@ const datePickerClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -418,10 +438,10 @@ defineExpose({
 		$this: &;
 
 		overflow: hidden;
-		width: 328px;
+		width: var(--origam-date-picker---width);
 
 		&--show-week {
-			width: 368px;
+			width: var(--origam-date-picker--show-week---width);
 		}
 
 		&--year {

package/dist/src/components/DatePicker/OrigamDatePickerControls.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="datePickerControlsClasses"
 			:style="datePickerControlsStyles"
 	>
@@ -53,9 +54,14 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamBtnGroup, OrigamSpacer } from "../../components";
-import { useProps, useStyle } from "../../composables";
-import { DATE_MODE, MDI_ICONS } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamBtnGroup from "../Btn/OrigamBtnGroup.vue";
+import OrigamSpacer from "../Grids/OrigamSpacer.vue";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { DATE_MODE } from "../../enums/DatePicker/date-picker.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   active: { type: [String, Array, Boolean, Object], required: false },
@@ -73,7 +79,20 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
-const emits = defineEmits(["click:year", "click:month", "click:prev", "click:next", "click:text"]);
+useUnsupportedProp(
+  "OrigamDatePickerControls",
+  "active",
+  "the controls row reflects the picker view state of its parent; it has no active state of its own.",
+  () => props.active !== void 0
+);
+useUnsupportedProp(
+  "OrigamDatePickerControls",
+  "viewMode",
+  "the displayed mode comes from the picker through `mode`, never from this prop.",
+  () => props.viewMode !== DATE_MODE.MONTH
+);
+const emits = defineEmits(["click:year", "click:month", "click:prev", "click:next"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const disableMonth = computed(() => {
   return props.disabled || props.disabledMonth;
@@ -110,7 +129,7 @@ const datePickerControlsClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerControlsStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerControlsStyles, () => props.id);
 defineExpose({
   filterProps,
   css,