origam 2.16.0 → 2.17.0

package/dist/src/components/Img/OrigamImg.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-responsive
+			:id="id"
 			v-intersect="intersect"
 			:aria-label="alt"
 			:class="imgClasses"
@@ -19,6 +20,7 @@
 						:class="imgPictureClasses"
 						:crossorigin="crossorigin"
 						:draggable="draggable"
+						:loading="nativeLoading"
 						:referrerpolicy="referrerpolicy"
 						:sizes="sizes"
 						:src="normalisedSrc.src"
@@ -91,20 +93,20 @@ import {
   useSlots,
   watch
 } from "vue";
-import { OrigamResponsive, OrigamTransition } from "../../components";
-import {
-  useBorder,
-  useBothColor,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
-import { IN_BROWSER, SUPPORTS_INTERSECTION } from "../../consts";
-import { vIntersect } from "../../directives";
-import { IMG_STATE } from "../../enums";
-import { convertToUnit, getCurrentInstance, pick } from "../../utils";
+import OrigamResponsive from "../Responsive/OrigamResponsive.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { IN_BROWSER, SUPPORTS_INTERSECTION } from "../../consts/Commons/commons.const";
+import vIntersect from "../../directives/Intersect/intersect.directive";
+import { IMG_STATE } from "../../enums/Img/img.enum";
+import { convertToUnit, pick } from "../../utils/Commons/commons.util";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util";
 const props = defineProps({
   alt: { type: String, required: false },
   cover: { type: Boolean, required: false },
@@ -122,7 +124,6 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   aspectRatio: { type: [String, Number], required: false },
   contentClass: { type: String, required: false },
-  inline: { type: Boolean, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -165,7 +166,6 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   transition: { type: [Boolean, String, Object], required: false },
-  disabled: { type: Boolean, required: false },
   eager: { type: Boolean, required: false }
 });
 const emits = defineEmits(["loadstart", "load", "error"]);
@@ -180,7 +180,7 @@ const slots = useSlots();
 const vm = getCurrentInstance("OrigamImg");
 const currentSrc = shallowRef("");
 const image = ref();
-const state = shallowRef(props.eager ? IMG_STATE.LOADING : IMG_STATE.IDLE);
+const state = shallowRef(IMG_STATE.IDLE);
 const naturalWidth = shallowRef();
 const naturalHeight = shallowRef();
 const normalisedSrc = computed(() => {
@@ -199,7 +199,7 @@ const normalisedSrc = computed(() => {
 const aspectRatio = computed(() => {
   return normalisedSrc.value.aspectRatio || naturalWidth.value / naturalHeight.value || 0;
 });
-const responsiveProps = pick(props, ["aspectRatio", "contentClass", "inline", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "class", "style"]);
+const responsiveProps = computed(() => pick(props, ["aspectRatio", "contentClass", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "class", "style"]));
 watch(() => props.src, () => {
   init(state.value !== IMG_STATE.IDLE);
 });
@@ -296,10 +296,11 @@ const markBooted = (val) => {
 };
 stop = watch(aspectRatio, markBooted);
 markBooted(aspectRatio.value);
-const intersect = ref([{
+const intersect = computed(() => [{
   handler: init,
   options: props.options
 }, null, ["once"]]);
+const nativeLoading = computed(() => props.eager ? "eager" : "lazy");
 const isLoaded = computed(() => {
   return state.value === IMG_STATE.LOADED;
 });
@@ -355,7 +356,7 @@ const imgGradientStyles = computed(() => {
     `backgroundImage: linear-gradient(${props.gradient})`
   ];
 });
-const { id, css, load, isLoaded: styleIsLoaded, unload } = useStyle(imgStyles);
+const { id, css, load, isLoaded: styleIsLoaded, unload } = useStyle(imgStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -373,12 +374,6 @@ defineExpose({
 
 		z-index: var(--origam-img---z-index);
 
-		&--booting {
-			&:deep(.origam-responsive__sizer) {
-				transition: var(--origam-img--booting---transition);
-			}
-		}
-
 		&--rounded {
 			border-radius: var(--origam-radius---2xl, 24px);
 		}
@@ -462,8 +457,6 @@ defineExpose({
 	:root {
 		--origam-img---z-index: 0;
 
-		--origam-img--booting---transition: none;
-
 		--origam-img--rounded---border-radius: 4px;
 
 		--origam-img__content---z-index: -1;

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="rootEl"
 			:class="infiniteScrollClasses"
 			:style="infiniteScrollStyles"
@@ -39,7 +40,7 @@
 					>
 						<origam-btn
 								:color="color"
-								text="Load more"
+								:text="t(loadMoreText)"
 								@click="intersecting(INFINITE_SCROLL_SIDE.START)"
 						/>
 					</slot>
@@ -70,7 +71,7 @@
 		</template>
 
 		<div class="origam-infinite-scroll__side" role="status" aria-live="polite" :style="typographyStyles">
-			<template v-if="hasStartIntersect">
+			<template v-if="hasEndIntersect">
 				<slot
 						name="error"
 						v-bind="{side: INFINITE_SCROLL_SIDE.END, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.END), color }}"
@@ -115,22 +116,18 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
-import { OrigamBtn, OrigamInfiniteScrollIntersect, OrigamProgress } from "../../components";
-import {
-  useBothColor,
-  useDimension,
-  useLocale,
-  useProps,
-  useStyle,
-  useTypography
-} from "../../composables";
-import {
-  DIRECTION,
-  INFINITE_SCROLL_MODE,
-  INFINITE_SCROLL_SIDE,
-  INFINITE_SCROLL_STATUS,
-  PROGRESS_TYPE
-} from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamInfiniteScrollIntersect from "./OrigamInfiniteScrollIntersect.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { INFINITE_SCROLL_MODE, INFINITE_SCROLL_SIDE, INFINITE_SCROLL_STATUS } from "../../enums/InfiniteScroll/infinite-scroll.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
 const props = defineProps({
   side: { type: null, required: false, default: INFINITE_SCROLL_SIDE.END },
   mode: { type: null, required: false, default: INFINITE_SCROLL_MODE.INTERSECT },
@@ -150,11 +147,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   tag: { type: String, required: false, default: "div" },
   direction: { type: null, required: false, default: DIRECTION.VERTICAL },
-  fontFamily: { type: null, required: false },
-  fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  fontSize: { type: null, required: false }
 });
 const emits = defineEmits(["load"]);
 defineSlots();
@@ -282,7 +275,7 @@ const infiniteScrollClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(infiniteScrollStyles);
+const { id, css, load, isLoaded, unload } = useStyle(infiniteScrollStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -303,7 +296,7 @@ defineExpose({
 			justify-content: center;
 			flex-direction: column;
 			gap: var(--origam-infinite-scroll__loader---gap, 12px);
-			padding-block: var(--origam-infinite-scroll__loader---padding-block, 12px);
+			padding-block: var(--origam-infinite-scroll__empty---padding-block, var(--origam-infinite-scroll__loader---padding-block, 12px));
 			padding-inline: var(--origam-infinite-scroll__loader---padding-inline, 0px);
 			font-size: var(--origam-infinite-scroll__loader---font-size, 0.875rem);
 			color: var(--origam-infinite-scroll__empty---color, var(--origam-color__text---secondary));

package/dist/src/components/InfiniteScroll/OrigamInfiniteScrollIntersect.vue

@@ -1,14 +1,17 @@
 <template>
 	<div
+			:id="id"
 			ref="intersectionRef"
-			class="origam-infinite-scroll-intersect"
+			:class="rootClasses"
+			:style="rootStyles"
 	>&nbsp;
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
-import { useIntersectionObserver, useProps } from "../../composables";
+import { computed, StyleValue, watch } from "vue";
+import { useIntersectionObserver } from "../../composables/Commons/intersectionObserver.composable";
+import { useProps } from "../../composables/Commons/props.composable";
 const props = defineProps({
   side: { type: null, required: false },
   rootRef: { type: null, required: true },
@@ -18,9 +21,18 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["intersect"]);
+defineSlots();
 const { filterProps } = useProps(props);
+const rootClasses = computed(() => ["origam-infinite-scroll-intersect", props.class]);
+const rootStyles = computed(() => props.style);
+const observerOptions = computed(() => {
+  const options = {};
+  if (props.rootRef) options.root = props.rootRef;
+  if (props.margin) options.rootMargin = props.margin;
+  return Object.keys(options).length ? options : void 0;
+});
 const { intersectionRef, isIntersecting } = useIntersectionObserver(() => {
-}, props.margin ? { rootMargin: props.margin } : void 0);
+}, observerOptions);
 watch(isIntersecting, async (val) => {
   if (!props.side) return;
   emits("intersect", { isIntersecting: val, side: props.side });

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			class="origam-inline-edit"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -45,6 +46,8 @@
 						:data-cy="`origam-inline-edit-action-${INLINE_EDIT_ACTION.EDIT}`"
 						size="x-small"
 						variant="text"
+						tabindex="-1"
+						aria-hidden="true"
 						@click="handleEnterEdit"
 				/>
 			</div>
@@ -66,11 +69,12 @@
 						:model-value="draft"
 						:placeholder="resolvedPlaceholder"
 						:disabled="disabled || isPending"
+						:aria-label="fieldAriaLabel"
 						:aria-invalid="error !== null"
 						:aria-describedby="error !== null ? errorId : undefined"
 						class="origam-inline-edit__field"
 						data-cy="origam-inline-edit-input"
-            hide-details
+						hide-details
 						@update:model-value="handleInput"
 						@keydown="handleKeyDown"
 						@blur="handleBlur"
@@ -120,6 +124,7 @@
 						:type="inputType"
 						:placeholder="resolvedPlaceholder"
 						:disabled="disabled || isPending"
+						:aria-label="fieldAriaLabel"
 						:aria-invalid="error !== null"
 						:aria-describedby="error !== null ? errorId : undefined"
 						class="origam-inline-edit__field"
@@ -195,12 +200,17 @@ import {
   useId,
   watch
 } from "vue";
-import { OrigamBtn, OrigamTextField, OrigamTextareaField } from "../../components";
-import { useInlineEdit, useTypography } from "../../composables";
-import { INLINE_EDIT_ACTION, MDI_ICONS } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamTextField from "../TextField/OrigamTextField.vue";
+import OrigamTextareaField from "../TextareaField/OrigamTextareaField.vue";
+import { useInlineEdit } from "../../composables/InlineEdit/inline-edit.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { INLINE_EDIT_ACTION } from "../../enums/InlineEdit/inline-edit.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   modelValue: { type: [String, Number], required: true },
-  placeholder: { type: String, required: false, default: "Click to edit" },
+  placeholder: { type: String, required: false, default: void 0 },
   rules: { type: Array, required: false, default: void 0 },
   validate: { type: Function, required: false, default: void 0 },
   autoFocus: { type: Boolean, required: false, default: true },
@@ -217,16 +227,14 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false, default: "span" },
-  fontFamily: { type: null, required: false },
+  tag: { type: String, required: false, default: "div" },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["update:modelValue", "edit", "cancel", "confirm", "validate-error"]);
 defineSlots();
 const modelRef = computed(() => props.modelValue);
+const { t } = useLocale();
 const {
   isEditing,
   draft,
@@ -236,7 +244,7 @@ const {
   confirm,
   cancel,
   setValue
-} = useInlineEdit(modelRef, {
+} = useInlineEdit(modelRef, () => ({
   rules: props.rules,
   validate: props.validate,
   trim: props.trim,
@@ -247,8 +255,9 @@ const {
     emit("update:modelValue", out);
   },
   onCancel: () => emit("cancel"),
-  onError: (message) => emit("validate-error", message)
-});
+  onError: (message) => emit("validate-error", message),
+  invalidMessage: t("origam.inline_edit.invalid_value")
+}));
 const inputRef = ref(null);
 const errorId = `origam-inline-edit-error-${useId()}`;
 const displayValue = computed(() => {
@@ -257,14 +266,15 @@ const displayValue = computed(() => {
   return String(v);
 });
 const isEmpty = computed(() => displayValue.value.trim().length === 0);
-const resolvedPlaceholder = computed(() => props.placeholder ?? "Click to edit");
+const resolvedPlaceholder = computed(() => props.placeholder ?? t("origam.inline_edit.placeholder"));
 const displayAriaLabel = computed(() => {
   const label = isEmpty.value ? resolvedPlaceholder.value : displayValue.value;
-  return `Edit ${label}`;
+  return t("origam.inline_edit.edit_aria_label", label);
 });
-const editActionLabel = computed(() => `Edit ${displayValue.value || resolvedPlaceholder.value}`);
-const confirmActionLabel = "Confirm";
-const cancelActionLabel = "Cancel";
+const editActionLabel = computed(() => t("origam.inline_edit.edit"));
+const confirmActionLabel = computed(() => t("origam.inline_edit.confirm"));
+const cancelActionLabel = computed(() => t("origam.inline_edit.cancel"));
+const fieldAriaLabel = computed(() => t("origam.inline_edit.field_aria_label"));
 const handleEnterEdit = () => {
   if (props.disabled) return;
   edit();
@@ -343,7 +353,7 @@ defineExpose({
 		display: inline-flex;
 		flex-direction: row;
 		align-items: flex-start;
-		gap: var(--origam-inline-edit---actions-gap, var(--origam-inline-edit__actions---gap, 4px));
+		gap: var(--origam-inline-edit__actions---gap, 4px);
 		max-width: 100%;
 		transition: opacity var(--origam-inline-edit---transition-duration, 160ms) ease;
 	}
@@ -358,6 +368,38 @@ defineExpose({
 		pointer-events: none;
 	}
 
+	/*********************************************************
+	 * ⛔ C1 (vague 3) — les cinq classes d'etat racine suivantes
+	 * (--editing, --pending, --multiline, --has-error, --show-actions)
+	 * etaient posees sur la racine sans la moindre regle SCSS : la classe
+	 * existait, aucune ne peignait. Chacune produit desormais un style
+	 * calcule reellement distinct, mesure en Playwright (voir
+	 * packages/tests/e2e/inline-edit.spec.ts, describe "root state classes").
+	 *********************************************************/
+
+	.origam-inline-edit--editing {
+		background-color: var(--origam-inline-edit--editing---background-color, var(--origam-color__surface---raised));
+		border-radius: var(--origam-inline-edit__display---border-radius, 4px);
+	}
+
+	.origam-inline-edit--pending {
+		cursor: progress;
+	}
+
+	.origam-inline-edit--multiline {
+		width: 100%;
+	}
+
+	.origam-inline-edit--has-error {
+		outline: 1px solid var(--origam-inline-edit--has-error---outline-color, var(--origam-color__feedback--danger---border));
+		outline-offset: 2px;
+		border-radius: var(--origam-inline-edit__display---border-radius, 4px);
+	}
+
+	.origam-inline-edit--show-actions {
+		align-items: center;
+	}
+
 	.origam-inline-edit__display {
 		all: unset;
 		box-sizing: border-box;
@@ -394,7 +436,7 @@ defineExpose({
 
 	.origam-inline-edit__field {
 		flex: 1;
-		min-width: var(--origam-inline-edit__field---min-width, 180px);
+		min-width: var(--origam-inline-edit__input---min-width, 180px);
 	}
 
 	.origam-inline-edit__error {