origam 2.23.2 → 2.25.0

package/dist/src/components/Btn/OrigamBtn.vue

@@ -12,6 +12,7 @@
 			:href="hrefAttr"
 			:type="typeAttr"
 			:value="valueAttr"
+			@click.capture="handleClickCapture"
 			@click="handleClick"
 			@mouseenter="handleMouseenter"
 			@mouseleave="handleMouseleave"
@@ -25,99 +26,84 @@
 				class="origam-btn__underlay"
 		/>
 
-		<origam-progress
+		<slot
 				v-if="isOverlayLoading"
-				ref="origamProgressRef"
-				class="origam-btn__progress"
+				name="loader"
 				v-bind="progressProps"
-				:thickness="loaderConfig.kind === 'line' ? 3 : undefined"
-				:color="color"
-				:active="true"
-		/>
+		>
+			<origam-progress
+					ref="origamProgressRef"
+					class="origam-btn__progress"
+					v-bind="progressProps"
+					tag="span"
+					aria-hidden="true"
+					:thickness="loaderKind === 'line' ? 3 : undefined"
+					:color="color"
+					:active="true"
+			/>
+		</slot>
 
 		<slot name="wrapper">
-			<origam-loader
-					:loading="isSkeletonLoading"
-					class="origam-btn__loader"
-			>
-				<template
-						v-if="hasLoader && isSkeletonLoading"
-						#loader
+			<span class="origam-btn__loader">
+				<span
+						v-if="hasPrepend"
+						key="prepend"
+						class="origam-btn__prepend"
+				>
+					<slot name="prepend">
+						<origam-avatar
+								v-if="prependAvatar"
+								key="prepend-avatar"
+								:density="density"
+								:image="prependAvatar"
+						/>
+						<origam-icon
+								v-if="prependIcon"
+								key="prepend-icon"
+								:density="density"
+								:icon="prependIcon"
+						/>
+					</slot>
+				</span>
+
+				<span
+						class="origam-btn__content"
+						data-no-activator=""
+				>
+					<slot name="default">
+						<template v-if="hasIcon">
+							<origam-icon
+									key="content-icon"
+									:icon="icon"
+							/>
+						</template>
+						<template v-else>
+							{{ text }}
+						</template>
+					</slot>
+				</span>
+
+				<span
+						v-if="hasAppend"
+						key="append"
+						class="origam-btn__append"
 				>
-					<slot
-							name="loader"
-							v-bind="progressProps"
-					>
-						<origam-skeleton
-								variant="rectangular"
-								:width="'100%'"
-								:height="'100%'"
-								v-bind="loaderConfig.overrides"
+					<slot name="append">
+						<origam-avatar
+								v-if="appendAvatar"
+								key="append-avatar"
+								:density="density"
+								:image="appendAvatar"
+						/>
+						<origam-icon
+								v-if="appendIcon"
+								key="append-icon"
+								:density="density"
+								:icon="appendIcon"
 						/>
 					</slot>
-				</template>
-
-				<template #default>
-          <span
-		          v-if="hasPrepend"
-		          key="prepend"
-		          class="origam-btn__prepend"
-          >
-            <slot name="prepend">
-              <origam-avatar
-		              v-if="prependAvatar"
-		              key="prepend-avatar"
-		              :density="density"
-		              :image="prependAvatar"
-              />
-              <origam-icon
-		              v-if="prependIcon"
-		              key="prepend-icon"
-		              :density="density"
-		              :icon="prependIcon"
-              />
-            </slot>
-          </span>
-
-					<span
-							class="origam-btn__content"
-							data-no-activator=""
-					>
-            <slot name="default">
-              <template v-if="hasIcon">
-                <origam-icon
-		                key="content-icon"
-		                :icon="icon"
-                />
-              </template>
-              <template v-else>
-                {{ text }}
-              </template>
-            </slot>
-          </span>
-
-					<span
-							v-if="hasAppend"
-							key="append"
-							class="origam-btn__append"
-					>
-            <slot name="append">
-             <origam-avatar
-		             v-if="appendAvatar"
-		             key="append-avatar"
-		             :density="density"
-		             :image="appendAvatar"
-             />
-             <origam-icon
-		             v-if="appendIcon"
-		             key="append-icon"
-		             :density="density"
-		             :icon="appendIcon"
-             />
-           </slot>
-          </span>
-				</template>
-			</origam-loader>
+				</span>
+			</span>
 		</slot>
 	</component>
 </template>
@@ -126,9 +112,7 @@
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots, watchEffect } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
-import OrigamLoader from "../Loader/OrigamLoader.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
-import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useDimension } from "../../composables/Commons/dimension.composable";
@@ -290,7 +274,7 @@ const isActive = computed(() => {
 });
 const isDisabled = computed(() => group?.disabled.value || props.disabled);
 const isAnchor = computed(() => link.tag.value === "a");
-const ariaDisabled = computed(() => isAnchor.value && isDisabled.value ? "true" : void 0);
+const ariaDisabled = computed(() => isAnchor.value && isDisabled.value || isLoading.value ? "true" : void 0);
 const hrefAttr = computed(() => isAnchor.value && isDisabled.value ? void 0 : link.href.value);
 const typeAttr = computed(() => isAnchor.value ? void 0 : "button");
 const valueAttr = computed(() => {
@@ -306,7 +290,7 @@ const isRipple = computed(() => {
 });
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
-const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
+const { loaderClasses, isLoading, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
 const { locationStyles } = useLocation(props);
 const { positionClasses } = usePosition(props);
 const { sizeClasses, sizeStyles } = useSize(props);
@@ -331,6 +315,11 @@ const {
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
+const handleClickCapture = (e) => {
+  if (!isLoading.value) return;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+};
 const handleClick = (e) => {
   if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === "_blank")) return;
   link.navigate?.(e);
@@ -339,9 +328,6 @@ const handleClick = (e) => {
 const hasIcon = computed(() => {
   return !!(icon.value && props.icon !== true);
 });
-const hasLoader = computed(() => {
-  return slots.loader || loaderConfig.value.isActive;
-});
 const isUnnamedIconOnly = computed(() => {
   if (!hasIcon.value) return false;
   if (slots.default || props.text) return false;
@@ -357,13 +343,9 @@ if (import.meta.env?.DEV) {
     }
   });
 }
-const isSkeletonLoading = computed(() => {
-  return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
-});
-const isOverlayLoading = computed(() => {
-  return loaderConfig.value.isActive && (loaderConfig.value.kind === "line" || loaderConfig.value.kind === "circular");
-});
-const ariaBusy = computed(() => loaderConfig.value.isActive ? "true" : void 0);
+const isOverlayLoading = computed(() => loaderConfig.value.isActive);
+const loaderKind = computed(() => loaderConfig.value.kind === "line" ? "line" : "circular");
+const ariaBusy = computed(() => isLoading.value ? "true" : void 0);
 const progressProps = computed(() => {
   const cfg = loaderConfig.value;
   return Object.assign(
@@ -371,7 +353,7 @@ const progressProps = computed(() => {
       size: "23",
       indeterminate: cfg.indeterminate,
       modelValue: cfg.modelValue,
-      type: cfg.kind === "line" ? PROGRESS_TYPE.LINEAR : PROGRESS_TYPE.CIRCULAR
+      type: loaderKind.value === "line" ? PROGRESS_TYPE.LINEAR : PROGRESS_TYPE.CIRCULAR
     },
     origamProgressRef.value?.filterProps(props, ["class", "style", "id", "tag", "size", "type"]) ?? {},
     cfg.overrides
@@ -405,14 +387,14 @@ const btnClasses = computed(() => {
       // so consumers can pick either spelling.
       "origam-btn--flat": props.flat,
       "origam-btn--icon": !!props.icon,
-      "origam-btn--loading": loaderConfig.value.isActive,
+      // `origam-btn--loading` comes from `loaderClasses` below: one
+      // source, emitted once.
       // Loader-kind discriminator so SCSS can branch per kind:
-      //   • `--loader-line`     → linear progress strip overlay,
+      //   - `--loader-line`     -> linear progress strip overlay,
       //      keeps the label visible (like OrigamCard's loader).
-      //   • `--loader-circular` → centred spinner; label hidden.
-      //   • `--loader-skeleton` → full-box shimmer; label hidden,
-      //      btn keeps a min-width so it doesn't collapse.
-      [`origam-btn--loader-${loaderConfig.value.kind}`]: loaderConfig.value.isActive,
+      //   - `--loader-circular` -> centred spinner over the label,
+      //      which stays in the DOM (width and name preserved).
+      [`origam-btn--loader-${loaderKind.value}`]: isLoading.value,
       "origam-btn--slim": props.slim,
       "origam-btn--stacked": props.stacked
     },
@@ -995,23 +977,6 @@ defineExpose({
 			}
 		}
 
-		// Skeleton — rectangular placeholder REPLACES the btn content
-		// entirely (OrigamLoader's #loader branch). The btn collapses to
-		// the skeleton's natural size unless we give it a sensible
-		// min-width / min-height.
-		&--loader-skeleton {
-			min-width: var(--origam-btn--loader-skeleton---min-width, 96px);
-			min-height: var(--origam-btn--loader-skeleton---min-height, 36px);
-
-			:deep(.origam-skeleton--rectangular) {
-				position: absolute;
-				inset: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: inherit;
-			}
-		}
-
 		&--stacked {
 			#{$this}__loader {
 				grid-template-areas: "prepend" "content" "append";

package/dist/src/components/Field/OrigamField.vue

@@ -9,16 +9,7 @@
 	>
 		<div class="origam-field__overlay"/>
 
-		<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
-			<origam-skeleton
-					class="origam-field__skeleton"
-					variant="rectangular"
-					:loading="true"
-					v-bind="loaderConfig.overrides"
-			/>
-		</template>
-
-		<template v-if="hasLoader && loaderConfig.kind !== 'skeleton'">
+		<template v-if="hasLoader">
 			<slot name="loader">
 				<div class="origam-field__loader">
 					<origam-progress
@@ -35,138 +26,136 @@
 			</slot>
 		</template>
 
-		<template v-if="!loaderConfig.isActive || loaderConfig.kind !== 'skeleton'">
-			<div
-					v-if="hasPrependInner"
-					key="prependInner"
-					class="origam-field__prepend-inner"
-					v-bind="prependInnerCommandAttrs"
-					@click="handleClickPrependInner"
-					@keydown="handleKeydownPrependInner"
-			>
-				<slot name="prependInner">
-					<origam-avatar
-							v-if="prependInnerAvatar"
-							key="prepend-avatar"
-							:density="density"
-							:image="prependInnerAvatar"
-					/>
-					<origam-icon
-							v-if="prependInnerIcon"
-							key="prepend-icon"
-							:density="density"
-							:icon="prependInnerIcon"
+		<div
+				v-if="hasPrependInner"
+				key="prependInner"
+				class="origam-field__prepend-inner"
+				v-bind="prependInnerCommandAttrs"
+				@click="handleClickPrependInner"
+				@keydown="handleKeydownPrependInner"
+		>
+			<slot name="prependInner">
+				<origam-avatar
+						v-if="prependInnerAvatar"
+						key="prepend-avatar"
+						:density="density"
+						:image="prependInnerAvatar"
+				/>
+				<origam-icon
+						v-if="prependInnerIcon"
+						key="prepend-icon"
+						:density="density"
+						:icon="prependInnerIcon"
+				/>
+			</slot>
+		</div>
+
+		<div
+				class="origam-field__field"
+				data-no-activator=""
+		>
+			<template v-if="hasLabel">
+				<slot
+						name="label"
+						v-bind="labelProps"
+				>
+					<origam-label
+							v-bind="labelProps"
+							ref="origamLabelRef"
 					/>
 				</slot>
-			</div>
+			</template>
 
-			<div
-					class="origam-field__field"
-					data-no-activator=""
+			<span
+					v-if="hasPrefix"
+					class="origam-field__prefix"
 			>
-				<template v-if="hasLabel">
-					<slot
-							name="label"
-							v-bind="labelProps"
-					>
-						<origam-label
-								v-bind="labelProps"
-								ref="origamLabelRef"
-						/>
-					</slot>
-				</template>
-
-				<span
-						v-if="hasPrefix"
-						class="origam-field__prefix"
-				>
-	         <slot name="prefix">
-	          <span>
-	            {{ prefix }}
-	          </span>
-	         </slot>
-	      </span>
-
-				<slot
-						name="default"
-						v-bind="slotProps"
-				/>
-
-				<span
-						v-if="hasSuffix"
-						class="origam-field__suffix"
-				>
-	        <slot name="suffix">
-	          <span>
-	            {{ suffix }}
-	          </span>
-	        </slot>
-	      </span>
-			</div>
+         <slot name="prefix">
+          <span>
+            {{ prefix }}
+          </span>
+         </slot>
+      </span>
+
+			<slot
+					name="default"
+					v-bind="slotProps"
+			/>
 
-			<origam-expand-x
-					v-if="hasClear"
-					key="clear"
+			<span
+					v-if="hasSuffix"
+					class="origam-field__suffix"
 			>
-				<button
-						v-show="dirty"
-						type="button"
-						class="origam-field__clearable"
-						:aria-label="clearLabel"
-						@blur="handleBlur"
-						@focus="handleFocus"
-						@mousedown="handleMousedownClear"
-						@keydown="handleKeydownClear"
-				>
-					<slot name="clear">
-						<origam-icon :icon="clearIcon"/>
-					</slot>
-				</button>
-			</origam-expand-x>
-
-			<div
-					v-if="hasAppendInner"
-					key="appendInner"
-					class="origam-field__append-inner"
-					v-bind="appendInnerCommandAttrs"
-					@click="handleClickAppendInner"
-					@keydown="handleKeydownAppendInner"
+        <slot name="suffix">
+          <span>
+            {{ suffix }}
+          </span>
+        </slot>
+      </span>
+		</div>
+
+		<origam-expand-x
+				v-if="hasClear"
+				key="clear"
+		>
+			<button
+					v-show="dirty"
+					type="button"
+					class="origam-field__clearable"
+					:aria-label="clearLabel"
+					@blur="handleBlur"
+					@focus="handleFocus"
+					@mousedown="handleMousedownClear"
+					@keydown="handleKeydownClear"
 			>
-				<slot name="appendInner">
-					<origam-avatar
-							v-if="appendInnerAvatar"
-							key="append-avatar"
-							:density="density"
-							:image="appendInnerAvatar"
-					/>
-					<origam-icon
-							v-if="appendInnerIcon"
-							key="append-icon"
-							:density="density"
-							:icon="appendInnerIcon"
-					/>
+				<slot name="clear">
+					<origam-icon :icon="clearIcon"/>
 				</slot>
-			</div>
+			</button>
+		</origam-expand-x>
+
+		<div
+				v-if="hasAppendInner"
+				key="appendInner"
+				class="origam-field__append-inner"
+				v-bind="appendInnerCommandAttrs"
+				@click="handleClickAppendInner"
+				@keydown="handleKeydownAppendInner"
+		>
+			<slot name="appendInner">
+				<origam-avatar
+						v-if="appendInnerAvatar"
+						key="append-avatar"
+						:density="density"
+						:image="appendInnerAvatar"
+				/>
+				<origam-icon
+						v-if="appendInnerIcon"
+						key="append-icon"
+						:density="density"
+						:icon="appendInnerIcon"
+				/>
+			</slot>
+		</div>
 
-			<div class="origam-field__outlines">
-				<div class="origam-field__outline origam-field__outline--start"/>
-				<div class="origam-field__outline origam-field__outline--notch">
-					<template v-if="hasFloatingLabel">
-						<slot
-								name="floatingLabel"
+		<div class="origam-field__outlines">
+			<div class="origam-field__outline origam-field__outline--start"/>
+			<div class="origam-field__outline origam-field__outline--notch">
+				<template v-if="hasFloatingLabel">
+					<slot
+							name="floatingLabel"
+							v-bind="floatingLabelProps"
+					>
+						<origam-label
+								key="floating-label"
 								v-bind="floatingLabelProps"
-						>
-							<origam-label
-									key="floating-label"
-									v-bind="floatingLabelProps"
-									ref="origamFloatingLabelRef"
-							/>
-						</slot>
-					</template>
-				</div>
-				<div class="origam-field__outline origam-field__outline--end"/>
+								ref="origamFloatingLabelRef"
+						/>
+					</slot>
+				</template>
 			</div>
-		</template>
+			<div class="origam-field__outline origam-field__outline--end"/>
+		</div>
 
 	</div>
 </template>
@@ -178,7 +167,6 @@ import OrigamExpandX from "../Transition/OrigamExpandX.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import OrigamLabel from "../Label/OrigamLabel.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
-import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
 import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
@@ -659,26 +647,6 @@ defineExpose({
 		backdrop-filter: var(--origam-field---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
 
-		&__skeleton {
-			width: 100%;
-			/*
-			 * ⛔ #595 — FAUX POSITIF de `token-var-channels`, a laisser en
-			 * baseline. Le repli est `var(--origam-input__control---height, 36px)`,
-			 * et ce token-la est ECRIT PAR INSTANCE : les quatre modificateurs
-			 * de taille de ce composant (~l.1532-1550) comme ceux d `OrigamInput`
-			 * et d `OrigamTextareaField` le posent sur l element
-			 * (`sm`=28 / `md`=36 / `lg`=44 / `xl`=52px). Declarer
-			 * `--origam-field__skeleton---min-height` a `:root` avec ce repli
-			 * substituerait la valeur RACINE (36px) une fois pour toutes : le
-			 * squelette cesserait de suivre la taille du champ. Meme piege que
-			 * `---hover-x` sur SliderField.
-			 */
-			min-height: var(--origam-field__skeleton---min-height, var(--origam-input__control---height, 36px));
-			border-radius: var(--origam-field---border-radius, 8px);
-			grid-column: 1 / -1;
-			grid-row: 1;
-		}
-
 		&__loader {
 			position: absolute;
 			bottom: 0;