origam 2.16.0 → 2.17.0

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="datePickerMonthsClasses"
 			:style="datePickerMonthsStyles"
 	>
@@ -17,9 +18,13 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn } from "../../components";
-import { useDate, useProps, useVModel, useStyle } from "../../composables";
-import { convertToUnit, createRange, int } from "../../utils";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useDate } from "../../composables/Commons/date.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { convertToUnit, createRange, int } from "../../utils/Commons/commons.util";
 import { computed, StyleValue, watchEffect } from "vue";
 const props = defineProps({
   min: { type: null, required: false },
@@ -81,8 +86,10 @@ const handleClick = (i) => {
   }
   model.value = i;
 };
+const { dimensionStyles } = useDimension(props);
 const datePickerMonthsStyles = computed(() => {
   return [
+    dimensionStyles.value,
     {
       height: convertToUnit(props.height)
     },
@@ -95,7 +102,7 @@ const datePickerMonthsClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerMonthsStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerMonthsStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="datePickerYearsClasses"
 			:style="datePickerYearsStyles"
 	>
@@ -17,9 +18,13 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn } from "../../components";
-import { useDate, useProps, useVModel, useStyle } from "../../composables";
-import { convertToUnit, createRange, int, templateRef } from "../../utils";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useDate } from "../../composables/Commons/date.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { convertToUnit, createRange, int, templateRef } from "../../utils/Commons/commons.util";
 import { computed, nextTick, onMounted, StyleValue, watchEffect } from "vue";
 const props = defineProps({
   min: { type: null, required: false },
@@ -90,8 +95,10 @@ onMounted(async () => {
   await nextTick();
   yearRef.el?.scrollIntoView({ block: "center" });
 });
+const { dimensionStyles } = useDimension(props);
 const datePickerYearsStyles = computed(() => {
   return [
+    dimensionStyles.value,
     {
       height: convertToUnit(props.height)
     },
@@ -104,7 +111,7 @@ const datePickerYearsClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerYearsStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerYearsStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -1,15 +1,17 @@
 <template>
 	<origam-text-field
+			:id="id"
 			ref="origamTextFieldRef"
 			v-model:focused="isFocused"
-			:aria-label="t(label)"
+			:aria-label="t(accessibleLabel)"
 			:class="datePickerFieldClasses"
 			:counter-value="counterValue"
 			:dirty="isDirty"
 			:placeholder="placeholder"
 			:style="datePickerFieldStyles"
-			:title="t(label)"
-			:validation-value="validationValue"
+			:title="t(accessibleLabel)"
+			:validation-value="effectiveValidationValue"
+
 			v-bind="{ ...textFieldProps }"
 			@blur="handleBlur"
 			@change="handleChange"
@@ -171,21 +173,31 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  OrigamAvatar,
-  OrigamChip,
-  OrigamDatePicker,
-  OrigamIcon,
-  OrigamMenu,
-  OrigamTextField,
-  OrigamTranslateScale
-} from "../../components";
-import { useDate, useDefaults, useLocale, useProps, useTeleportTypography, useTextColor, useVModel, useStyle } from "../../composables";
-import { ORIGAM_FORM_KEY } from "../../consts";
-import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "../../utils";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamChip from "../Chip/OrigamChip.vue";
+import OrigamDatePicker from "../DatePicker/OrigamDatePicker.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamMenu from "../Menu/OrigamMenu.vue";
+import OrigamTextField from "../TextField/OrigamTextField.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useDate } from "../../composables/Commons/date.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useTeleportTypography } from "../../composables/Commons/teleport-typography.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_FORM_KEY } from "../../consts/Form/form.const";
+import { BLOCK } from "../../enums/Commons/anchor.enum";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { TEXT_FIELD_TYPE } from "../../enums/TextField/text-field.enum";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { isEmpty, matchesSelector, wrapInArray } from "../../utils/Commons/commons.util";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, toRef, useSlots, watch } from "vue";
-const _props = defineProps({
+const props = defineProps({
   menu: { type: Boolean, required: false },
   menuProps: { type: Object, required: false },
   range: { type: Boolean, required: false, default: false },
@@ -215,17 +227,13 @@ const _props = defineProps({
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -272,7 +280,6 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -307,7 +314,7 @@ const _props = defineProps({
   prependIcon: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
-const props = useDefaults(_props);
+defineEmits(["update:menu", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -424,8 +431,6 @@ const handleAfterLeave = () => {
 const chipSlotProps = (item) => {
   return {
     closable: props.closableChips,
-    bgColor: "rgba(168, 168, 168, 1)",
-    color: "rgb(255, 255, 255)",
     border: true,
     rounded: true,
     "onClick:close": (e) => handleChipClose(e, item),
@@ -471,16 +476,21 @@ const datePickerProps = computed(() => {
     ]
   );
 });
-const validationValue = computed(() => model.value);
+const effectiveValidationValue = computed(() => {
+  return props.validationValue === void 0 ? model.value : props.validationValue;
+});
 const isDirty = computed(() => {
   return model.value.length > 0;
 });
 const placeholder = computed(() => {
   return isDirty.value || !isFocused.value && props.label && !props.persistentPlaceholder ? void 0 : props.placeholder;
 });
-const label = computed(() => {
+const toggleLabel = computed(() => {
   return menu.value ? props.closeText : props.openText;
 });
+const accessibleLabel = computed(() => {
+  return props.label || toggleLabel.value;
+});
 const closeOnSelect = computed(() => {
   return props.closeOnSelect && !(props.multiple || props.range);
 });
@@ -511,7 +521,7 @@ const datePickerFieldClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(datePickerFieldStyles);
+const { id, css, load, isLoaded, unload } = useStyle(datePickerFieldStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   isFocused,

package/dist/src/components/DefaultsProvider/OrigamDefaultsProvider.vue

@@ -4,25 +4,24 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { provideDefaults, useProps } from "../../composables";
+import { provideDefaults } from "../../composables/Commons/defaults.composable";
+import { useProps } from "../../composables/Commons/props.composable";
 const props = defineProps({
   defaults: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   reset: { type: [String, Number], required: false },
   root: { type: [String, Number], required: false },
-  scoped: { type: Boolean, 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 }
+  scoped: { type: Boolean, required: false }
 });
+defineEmits([]);
 defineSlots();
 provideDefaults(
   computed(() => props.defaults ?? {}),
   {
-    scoped: props.scoped,
-    reset: props.reset,
-    root: props.root,
-    disabled: props.disabled
+    scoped: () => props.scoped,
+    reset: () => props.reset,
+    root: () => props.root,
+    disabled: () => props.disabled
   }
 );
 const { filterProps } = useProps(props);

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -1,11 +1,13 @@
 <template>
 	<origam-overlay
+			:id="id"
 			ref="origamOverlayRef"
 			v-model="isActive"
 			:activator-props="activatorProps"
 			:class="dialogClasses"
 			:style="dialogStyles"
 			v-bind="{...overlayProps, ...scopeId}"
+			@click:outside="handleClickOutside"
 	>
 			<template #activator="{props}">
 			<slot
@@ -22,6 +24,7 @@
 				<origam-card
 						ref="origamCardRef"
 						:aria-labelledby="dialogTitleId"
+						:title-id="dialogTitleId"
 						aria-modal="true"
 						role="dialog"
 						v-bind="cardProps"
@@ -40,12 +43,24 @@
 						<slot name="header"/>
 					</template>
 
-					<template #header-append>
+					<!--
+						#412 — the target names below (`#header.append`, …) address
+						`<OrigamCard>`'s OWN slots, which it reads as `slots['header.append']`
+						(point notation, `OrigamCard.vue:70`). Dialog's PUBLIC slot names
+						exposed to ITS OWN consumers stay dash-named (`<slot name="header-append">`
+						right below) — the two are independent identifiers: a named
+						template's target must match the CHILD's slot name, not whatever
+						name this component re-exposes upward. Pre-fix these were both
+						written as `#header-append` (dash) — a literal string that never
+						matched Card's `header.append`, so the five header zones (including
+						the default close button) were silently discarded. See #412.
+					-->
+					<template #header.append>
 						<slot name="header-append">
 							<origam-btn
 									:icon="MDI_ICONS.CLOSE"
 									:rounded="0"
-									aria-label="Close dialog"
+									:aria-label="t(closeLabel)"
 									bg-color="transparent"
 									@click="handleClose"
 							/>
@@ -54,7 +69,7 @@
 
 					<template
 							v-if="hasPrepend"
-							#header-prepend
+							#header.prepend
 					>
 						<slot name="header-prepend">
 							<origam-icon
@@ -68,7 +83,7 @@
 
 					<template
 							v-if="slots['header-title']"
-							#header-title
+							#header.title
 					>
 						<slot
 								name="header-title"
@@ -78,14 +93,14 @@
 
 					<template
 							v-if="slots['header-subtitle']"
-							#header-subtitle
+							#header.subtitle
 					>
 						<slot name="header-subtitle"/>
 					</template>
 
 					<template
 							v-if="slots['header-content']"
-							#header-content
+							#header.content
 					>
 						<slot name="header-content"/>
 					</template>
@@ -126,25 +141,29 @@
 
 <script lang="ts" setup>
 import { computed, mergeProps, nextTick, ref, StyleValue, useSlots, watch } from "vue";
-import { getUid } from "../../utils";
-import { OrigamBtn, OrigamCard, OrigamIcon, OrigamOverlay, OrigamTranslateScale } from "../../components";
-import {
-  useProps,
-  useScopeId,
-  useSize,
-  useStatus,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { IN_BROWSER } from "../../consts";
-import { vIntersect } from "../../directives";
-import { MDI_ICONS } from "../../enums";
-import { focusableChildren, forwardRefs } from "../../utils";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamCard from "../Card/OrigamCard.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStatus } from "../../composables/Commons/status.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
+import vIntersect from "../../directives/Intersect/intersect.directive";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { focusableChildren } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
 const props = defineProps({
   fullscreen: { type: Boolean, required: false },
   retainFocus: { type: Boolean, required: false, default: true },
-  scrollable: { type: Boolean, required: false },
   size: { type: null, required: false },
+  closeLabel: { type: String, required: false, default: "origam.close" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -193,6 +212,7 @@ const props = defineProps({
   text: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
   type: { type: null, required: false },
+  titleId: { type: String, required: false },
   tag: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -257,6 +277,7 @@ defineSlots();
 const { filterProps } = useProps(props);
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();
+const { t } = useLocale();
 const slots = useSlots();
 const uid = getUid();
 const dialogTitleId = computed(() => `origam-dialog-title-${uid}`);
@@ -320,6 +341,9 @@ const cardProps = computed(() => {
 const handleClose = () => {
   isActive.value = false;
 };
+const handleClickOutside = (e) => {
+  emits("click:outside", e);
+};
 const handleIntersect = (_isIntersecting, entries) => {
   if (entries[entries.length - 1].isIntersecting) {
     emits("isRead", true);
@@ -334,15 +358,14 @@ const dialogClasses = computed(() => {
   return [
     "origam-dialog",
     {
-      "origam-dialog--fullscreen": props.fullscreen,
-      "origam-dialog--scrollable": props.scrollable
+      "origam-dialog--fullscreen": props.fullscreen
     },
     sizeClasses.value,
     statusClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dialogStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dialogStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   css,

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-dialog
+			:id="id"
 			ref="origamDialogRef"
 			v-model="isActive"
 			v-bind="dialogProps"
@@ -99,7 +100,7 @@
 						<origam-col cols="auto">
 							<origam-btn
 									v-if="cancellable"
-									text="Cancel"
+									:text="cancelText"
 									@click="handleCancel"
 							/>
 						</origam-col>
@@ -107,7 +108,7 @@
 						<origam-col cols="auto">
 							<origam-btn
 									:disabled="!validatable"
-									text="Validate"
+									:text="validateText"
 									@click="handleValidate"
 							/>
 						</origam-col>
@@ -120,15 +121,23 @@
 
 <script lang="ts" setup>
 import { computed, ref, useSlots } from "vue";
-import { OrigamBtn, OrigamCol, OrigamContainer, OrigamDialog, OrigamRow } from "../../components";
-import { useProps, useVModel } from "../../composables";
-import { JUSTIFY } from "../../enums";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamCol from "../Grids/OrigamCol.vue";
+import OrigamContainer from "../Grids/OrigamContainer.vue";
+import OrigamDialog from "./OrigamDialog.vue";
+import OrigamRow from "../Grids/OrigamRow.vue";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { JUSTIFY } from "../../enums/Commons/justify.enum";
 const props = defineProps({
   cancellable: { type: Boolean, required: false, default: true },
+  cancelTextKey: { type: String, required: false, default: "origam.dialog.confirmation.cancel" },
+  validateTextKey: { type: String, required: false, default: "origam.dialog.confirmation.validate" },
   fullscreen: { type: Boolean, required: false },
   retainFocus: { type: Boolean, required: false },
-  scrollable: { type: Boolean, required: false },
   size: { type: null, required: false },
+  closeLabel: { type: String, 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 },
@@ -177,6 +186,7 @@ const props = defineProps({
   text: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
   type: { type: null, required: false },
+  titleId: { type: String, required: false },
   tag: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -237,6 +247,9 @@ const props = defineProps({
   icon: { type: null, required: false }
 });
 const emits = defineEmits(["validate", "cancel", "update:modelValue"]);
+const { t } = useLocale();
+const cancelText = computed(() => t(props.cancelTextKey));
+const validateText = computed(() => t(props.validateTextKey));
 defineSlots();
 const { filterProps } = useProps(props);
 const origamDialogRef = ref();

package/dist/src/components/Divider/OrigamDivider.vue

@@ -1,5 +1,6 @@
 <template>
 	<hr
+			:id="id"
 			:aria-orientation="dividerOrientation"
 			:class="dividerClasses"
 			:role="dividerRole"
@@ -9,14 +10,12 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef, useAttrs } from "vue";
-import {
-  useBothColor,
-  useMargin,
-  useProps,
-  useStyle
-} from "../../composables";
-import { DIRECTION } from "../../enums";
-import { convertToUnit } from "../../utils";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { convertToUnit } from "../../utils/Commons/commons.util";
 const attrs = useAttrs();
 const props = defineProps({
   inset: { type: Boolean, required: false },
@@ -37,6 +36,8 @@ const props = defineProps({
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
+defineSlots();
 const dividerOrientation = computed(() => {
   return !attrs.role || attrs.role === "separator" ? props.direction : void 0;
 });
@@ -71,7 +72,7 @@ const dividerStyles = computed(() => {
   }
   return styles;
 });
-const { id, css, load, isLoaded, unload } = useStyle(dividerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dividerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -91,18 +92,23 @@ defineExpose({
 		max-width: var(--origam-divider---max-width, 100%);
 		opacity: var(--origam-divider---opacity, 0.12);
 		transition: inherit;
-		border-style: solid;
+		border-style: var(--origam-divider---border-style, solid);
 
-		border-top-width: var(--origam-divider---border-top-width, thin);
+		border-top-width: var(--origam-divider---border-top-width, var(--origam-divider---thickness, thin));
 		border-right-width: 0;
 		border-bottom-width: 0;
 		border-left-width: 0;
 		margin: 0;
+		margin-block: var(--origam-divider---margin-block, 0);
+		padding-block-start: var(--origam-divider---padding-block-start, 0);
+		padding-block-end: var(--origam-divider---padding-block-end, 0);
+		padding-inline-start: var(--origam-divider---padding-inline-start, 0);
+		padding-inline-end: var(--origam-divider---padding-inline-end, 0);
 
 		&--vertical {
 			align-self: stretch;
 			border-top-width: 0;
-			border-right-width: var(--origam-divider---border-right-width, thin);
+			border-right-width: var(--origam-divider---border-right-width, var(--origam-divider---thickness, thin));
 			border-bottom-width: 0;
 			border-left-width: 0;
 			display: inline-flex;