origam 2.24.0 → 2.25.0

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;

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -1,19 +1,5 @@
 <template>
-  <div
-    v-if="isSkeletonLoading"
-    class="origam-switch__skeleton"
-    :class="{ 'origam-switch__skeleton--inset': inset }"
-    aria-busy="true"
-    :aria-label="loadingLabel"
-    role="status"
-    data-cy="origam-switch-skeleton"
-  >
-    <span class="origam-switch__skeleton-track"/>
-    <span class="origam-switch__skeleton-thumb"/>
-  </div>
-
   <origam-input
-    v-else
     :id="id"
     ref="origamInputRef"
     v-model="model"
@@ -145,7 +131,6 @@ import OrigamSwitchTrack from "./OrigamSwitchTrack.vue";
 import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
 import { useFocus } from "../../composables/Commons/focus.composable";
 import { useLoader } from "../../composables/Commons/loader.composable";
-import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
@@ -288,8 +273,6 @@ const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
 const slots = useSlots();
 const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
-const { t } = useLocale();
-const loadingLabel = computed(() => t("origam.loading"));
 const uid = getUid();
 const id = computed(() => {
   return props.id || `switch-${uid}`;
@@ -316,16 +299,13 @@ const controlProps = computed(() => {
 const trackProps = computed(() => {
   return origamSwitchTrackRef.value?.filterProps(props, ["modelValue", "disabled", "readonly", "error", "inset", "isValid", "bgColor", "color", "class", "style", "id"]);
 });
-const isSkeletonLoading = computed(() => {
-  return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
-});
 const isLineLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "line";
 });
 const hasCircularLoading = computed(() => {
   if (slots.loader) return true;
   const cfg = loaderConfig.value;
-  return cfg.isActive && cfg.kind !== "line" && cfg.kind !== "skeleton";
+  return cfg.isActive && cfg.kind !== "line";
 });
 const switchStyles = computed(() => {
   return [
@@ -368,54 +348,6 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-  @keyframes origam-switch-skeleton-pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.55;
-    }
-  }
-
-  .origam-switch__skeleton {
-    position: relative;
-    display: inline-block;
-    width: var(--origam-switch__skeleton---width, 52px);
-    height: var(--origam-switch__skeleton---height, 32px);
-    animation: origam-switch-skeleton-pulse 1.6s ease-in-out infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-
-    .origam-switch__skeleton-track {
-      position: absolute;
-      inset: 0;
-      border-radius: 999px;
-      background-color: var(--origam-switch__skeleton-track---background-color, color-mix(in srgb, currentColor 14%, transparent));
-    }
-
-    .origam-switch__skeleton-thumb {
-      position: absolute;
-      top: 50%;
-      left: 6px;
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      transform: translateY(-50%);
-      background-color: var(--origam-switch__skeleton-thumb---background-color, color-mix(in srgb, currentColor 28%, transparent));
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
-    }
-
-    &--inset {
-      .origam-switch__skeleton-thumb {
-        width: 24px;
-        height: 24px;
-        left: 4px;
-      }
-    }
-  }
-
   .origam-switch {
     $this: &;
 

package/dist/src/interfaces/Btn/btn.interface.d.ts

@@ -9,7 +9,7 @@ import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IGroupEmits, IGroupItemProps } from '../Commons/group.interface';
 import type { IHoverProps } from '../Commons/hover.interface';
 import type { ILinkProps } from '../Commons/router.interface';
-import type { ILoaderProps } from '../Commons/loader.interface';
+import type { IControlLoaderProps } from '../Commons/loader.interface';
 import type { ILocationProps } from '../Commons/location.interface';
 import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
@@ -25,7 +25,7 @@ import type { TStatus, TStatusPosition } from '../../types/Commons/status.type';
  *  `icon` prop accepts `boolean | TIcon` (boolean = icon-only mode) which is
  *  wider than `IIconProps.icon?: TIcon`.  Pulling the two status props in
  *  directly avoids the TS2430 incompatible-extends error. */
-export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IDensityProps, IDimensionProps, IElevationProps, IRoundedProps, ITagProps, ISizeProps, ILinkProps, IRippleProps, ILoaderProps, IPositionProps, ILocationProps, IGroupItemProps, IPaddingProps, IMarginProps, IAdjacentProps, IHoverProps, IActiveProps, IActionVariantProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
+export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IDensityProps, IDimensionProps, IElevationProps, IRoundedProps, ITagProps, ISizeProps, ILinkProps, IRippleProps, IControlLoaderProps, IPositionProps, ILocationProps, IGroupItemProps, IPaddingProps, IMarginProps, IAdjacentProps, IHoverProps, IActiveProps, IActionVariantProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
     /** @deprecated Use `variant="flat"` instead. Kept for backward compat. */
     flat?: boolean;
     /** Pass `true` to activate icon-only mode; pass a `TIcon` value to set the icon. */
@@ -62,7 +62,7 @@ export interface IBtnEmits extends IGroupEmits {
 export interface IBtnSlots extends IAdjacentSlots {
     /** Overrides the whole loader/prepend/content/append layout. */
     wrapper?: () => any;
-    /** Overrides the active loader (line/circular/skeleton), receives the
+    /** Overrides the active loader (line/circular), receives the
      *  forwarded `<OrigamProgress>` props. */
     loader?: (data: Record<string, unknown>) => any;
     default?: () => any;

package/dist/src/interfaces/Commons/loader.interface.d.ts

@@ -1,6 +1,6 @@
 import type { IColorProps } from './color.interface';
 import type { ICommonsComponentProps, ITagProps } from './commons.interface';
-import type { TLoaderConfig, TLoaderKind, TLoadingValue } from '../../types/Commons/loader.type';
+import type { TControlLoadingValue, TLoaderConfig, TLoaderKind, TLoadingValue } from '../../types/Commons/loader.type';
 /*********************************************************
  * ILoaderProps / IResolvedLoader
  *
@@ -20,6 +20,18 @@ export interface ILoaderProps extends ICommonsComponentProps, ITagProps, IColorP
     loading?: TLoadingValue;
     loadingText?: string;
 }
+/*********************************************************
+ * IControlLoaderProps
+ *
+ * @description
+ * `ILoaderProps` for a CONTROL (`OrigamBtn`, `OrigamSwitch`, `OrigamField`
+ * and its derivatives): same surface, but `loading` refuses
+ * `{ type: 'skeleton' }` - an action in flight never replaces the control
+ * (see `TControlLoaderConfig`).
+ ********************************************************/
+export interface IControlLoaderProps extends Omit<ILoaderProps, 'loading'> {
+    loading?: TControlLoadingValue;
+}
 /**
  * Resolved loader state — what each consumer component reads to decide
  * which renderer to mount and with which props.

package/dist/src/interfaces/Field/field.interface.d.ts

@@ -7,7 +7,7 @@ import type { IDensityProps } from '../Commons/density.interface';
 import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IFocusEmits, IFocusProps } from '../Commons/focus.interface';
 import type { ILabelProps } from '../Label/label.interface';
-import type { ILoaderProps } from '../Commons/loader.interface';
+import type { IControlLoaderProps } from '../Commons/loader.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
@@ -31,7 +31,7 @@ import type { IInputVariantProps } from '../Commons/variant.interface';
  * `--origam-field---border-*` token channel the three outline legs already
  * read, so the notch keeps opening under `--active` / `--focused`.
  ********************************************************/
-export interface IFieldProps extends ICommonsComponentProps, ILoaderProps, IColorProps, IBgColorProps, IAdjacentInnerProps, IBorderProps, IFocusProps, IDensityProps, ILabelProps, IActiveProps, IInputVariantProps, IRoundedProps, IElevationProps, ISizeProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
+export interface IFieldProps extends ICommonsComponentProps, IControlLoaderProps, IColorProps, IBgColorProps, IAdjacentInnerProps, IBorderProps, IFocusProps, IDensityProps, ILabelProps, IActiveProps, IInputVariantProps, IRoundedProps, IElevationProps, ISizeProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
     centerAffix?: boolean;
     dirty?: boolean;
     disabled?: boolean;

package/dist/src/interfaces/Switch/switch.interface.d.ts

@@ -7,13 +7,13 @@ import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IFocusEmits } from '../Commons/focus.interface';
 import type { IHoverProps } from '../Commons/hover.interface';
 import type { IInputProps } from '../Input/input.interface';
-import type { ILoaderProps } from '../Commons/loader.interface';
+import type { IControlLoaderProps } from '../Commons/loader.interface';
 import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISelectionControlProps } from '../SelectionControl/selection-control.interface';
 import type { ISwitchTrackSlotsProps } from './switch-track.interface';
-export interface ISwitchProps extends ICommonsComponentProps, ITagProps, IPaddingProps, IMarginProps, IBorderProps, IRoundedProps, IInputProps, ISelectionControlProps, ILoaderProps, IColorProps, IDensityProps, IElevationProps, IActiveProps, IHoverProps {
+export interface ISwitchProps extends ICommonsComponentProps, ITagProps, IPaddingProps, IMarginProps, IBorderProps, IRoundedProps, IInputProps, ISelectionControlProps, IControlLoaderProps, IColorProps, IDensityProps, IElevationProps, IActiveProps, IHoverProps {
     indeterminate?: boolean;
     inset?: boolean;
 }

package/dist/src/types/Commons/loader.type.d.ts

@@ -35,3 +35,27 @@ export type TLoaderConfig = ({
  * | `{ type: 'line' \| 'circular' \| 'skeleton', … }` | Loading with explicit kind override and per-instance prop overrides. |
  */
 export type TLoadingValue = boolean | number | TLoaderConfig;
+/*********************************************************
+ * TControlLoaderConfig / TControlLoadingValue
+ *
+ * @description
+ * Per-kind override config of a CONTROL (`OrigamBtn`, `OrigamSwitch`,
+ * `OrigamField` and its derivatives). A control that is mid-action keeps its
+ * label, its value and its input rendered: an action in flight is signalled
+ * by an indicator (spinner / strip), never by a placeholder that stands in
+ * for the control.
+ *
+ * @description
+ * So the `skeleton` member of `TLoaderConfig` is REFUSED at compile time
+ * here: `{ type: 'skeleton' }` is a type error on these components.
+ * Skeleton placeholders stay available on the containers whose content
+ * genuinely does not exist yet (Card, ExpansionPanel, DataTable).
+ *
+ * @description
+ * `TControlLoadingValue` is the `loading` prop value a control accepts:
+ * `TLoadingValue` minus the skeleton placeholder.
+ ********************************************************/
+export type TControlLoaderConfig = Exclude<TLoaderConfig, {
+    type: `${LOADER_KIND.SKELETON}`;
+}>;
+export type TControlLoadingValue = boolean | number | TControlLoaderConfig;