feature/FE-2810

src/assets/styles/_utilities.css

@@ -1,3 +1,4 @@
+@import "./utilities/animation.css";
 @import "./utilities/aria.css";
 @import "./utilities/prose.css";
 @import "./utilities/typography.css";

src/assets/styles/utilities/animation.css

@@ -0,0 +1,27 @@
+/*
+ * Loading shimmer: dims the masked element and sweeps a full-strength band
+ * across it. Apply directly (text + underline) or on a pseudo-element
+ * (underline bar only). Uses @utility so it composes with variants (after:).
+ */
+
+@utility shimmer-mask {
+  mask-image: linear-gradient(
+    110deg,
+    rgb(0 0 0 / 0.35) 40%,
+    rgb(0 0 0) 50%,
+    rgb(0 0 0 / 0.35) 60%
+  );
+  mask-size: 200% 100%;
+  animation: shimmer 1.25s ease-in-out infinite alternate;
+}
+
+/* One full sweep per iteration (band travels edge to edge) so
+   `animation-direction: alternate` produces a visible back-and-forth. */
+@keyframes shimmer {
+  0% {
+    mask-position: 0% 0;
+  }
+  100% {
+    mask-position: 100% 0;
+  }
+}

src/index.ts

@@ -71,5 +71,9 @@ export {
   isEmptySlot,
   isMobile,
   type Theme,
-  type ITheme
+  type ITheme,
+  useDisabled,
+  useReadonly,
+  setDisabled,
+  setReadonly
 } from "./utils";

src/ui/autocomplete/Autocomplete.ce.vue

@@ -13,7 +13,7 @@
     :uiConfig="props.uiConfig"
     :popoverClass="props.popoverClass"
     :type="props.type"
-    :disabled="props.disabled"
+    :disabled="disabled"
     :autoFocus="props.autoFocus"
     :model-value="modelValue"
     v-model:open="open"
@@ -111,7 +111,7 @@ import { ref, computed, watch } from "vue";
 import Avatar from "../avatar/Avatar.ce.vue";
 import Icon from "../icon/Icon.ce.vue";
 import config from "./autocomplete.config";
-import { useStyles } from "../../utils";
+import { useStyles, useDisabled } from "../../utils";
 import { cn } from "../../utils";
 import {
   debounce,
@@ -159,6 +159,8 @@ const meta = computed(() => ({
 const open = ref(false);
 const processing = ref(false);
 
+const disabled = useDisabled(() => props.disabled);
+
 const itemValue = computed((): string => props.itemValue || "value");
 const itemLabel = computed((): string => props.itemLabel || "label");
 const modelValue = computed((): AutocompleteItemProps | undefined =>

src/ui/breadcrumb/Breadcrumb.ce.vue

@@ -25,8 +25,10 @@
             :size="item.icon ? 'sm' : props.size"
             :label="item.label"
             :icon="item.icon"
+            :loading="item.loading"
             color="muted"
             :uiConfig="{ link: { items: '[&>i]:p-[3px]' } } as any"
+            :action="item.handler"
           />
         </BreadcrumbItem>
 

src/ui/breadcrumb/types.ts

@@ -10,6 +10,7 @@ export type BreadcrumbItem = RouterLinkProps & {
   value?: string | number;
   handler?: (...args: unknown[]) => unknown;
   href?: string;
+  loading?: boolean;
 };
 
 export type BreadcrumbVariant = "visible" | "condensed" | "parent" | "hidden";

src/ui/button-group/ButtonGroup.ce.vue

@@ -41,7 +41,7 @@ import { Button } from "../button";
 import { Select } from "../select";
 import config from "./buttonGroup.config";
 import { ButtonGroup } from "./types";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import type { ButtonGroupProps } from "./types";
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
@@ -54,9 +54,11 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
   class: ""
 });
 
+const disabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   variant: "control",
-  isDisabled: props.disabled,
+  isDisabled: disabled.value,
   hasRing: true
 }));
 

src/ui/button/Button.ce.vue

@@ -54,7 +54,7 @@ import { Spinner } from "../spinner";
 import config from "./button.config";
 import Button from "./Button.vue";
 import ButtonItems from "./ButtonItems.vue";
-import { useStyles, cn } from "../../utils";
+import { useStyles, cn, useDisabled } from "../../utils";
 import { kebabCase } from "lodash-es";
 import type { ButtonProps } from "./types";
 
@@ -78,11 +78,13 @@ defineEmits<{
   click: [event: Event];
 }>();
 
+const disabled = useDisabled(() => props.disabled || props.loading);
+
 const component = computed(() => {
   if (props.is) return props.is;
   // NB  if we are disabled and we are a link, we render a button to prevent navigation
-  if (props.to && !props.disabled) return RouterLink;
-  if (props.href && !props.disabled) return "a";
+  if (props.to && !disabled.value) return RouterLink;
+  if (props.href && !disabled.value) return "a";
   // default
   return Button;
 });
@@ -100,10 +102,10 @@ const meta = computed(() => ({
   align: props.align,
   isIconOnly: props.iconOnly,
   isBlock: props.block,
-  isDisabled: props.disabled || props.loading,
+  isDisabled: disabled.value,
   isLoading: props.loading,
   isFocusable: props.focusable,
-  hasRing: props.ring && !props.disabled && props.focusable
+  hasRing: props.ring && !disabled.value && props.focusable
 }));
 
 const styles = useStyles(["button"], meta, config, props.uiConfig ?? {});

src/ui/checkbox-cards/CheckboxCards.ce.vue

@@ -2,7 +2,7 @@
   <ToggleGroupRoot
     v-model="modelValue"
     :required="props.required"
-    :disabled="props.disabled"
+    :disabled="disabled"
     :class="cn(styles.checkboxCards.root, props.class)"
     type="multiple"
     data-test-key="checkbox-group"
@@ -15,7 +15,7 @@
         :value="item.value as string"
         :name="item.id"
         :required="props.required"
-        :disabled="props.disabled"
+        :disabled="disabled"
         :no-input="props.noInput"
         :class="cn(styles.checkboxCards.input, props.itemClass)"
         :itemClass="styles.checkboxCards.item"
@@ -105,7 +105,7 @@ import { Label } from "../label";
 import { Link } from "../link";
 import CheckboxCardItem from "./CheckboxCardItem.vue";
 import config from "./checkboxCards.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 import { includes, isFunction, isString, isNil } from "lodash-es";
 import type { CheckboxCardsItemActionProps, CheckboxCardsProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -133,6 +133,8 @@ const modelValue = useVModel(props, "modelValue", emits, {
   defaultValue: props.defaultValue
 });
 
+const disabled = useDisabled(() => props.disabled);
+
 const meta = computed(() => ({
   noInput: props.noInput,
   cursor: props.cursor,

src/ui/checkbox-group/CheckboxGroup.vue

@@ -8,17 +8,20 @@ import {
   useForwardPropsEmits
 } from "radix-vue";
 import { computed, type HTMLAttributes } from "vue";
-import { cn } from "../../utils";
+import { assign } from "lodash-es";
+import { cn, useDisabled } from "../../utils";
 
 const props = defineProps<
   ListboxRootProps & { class?: HTMLAttributes["class"] }
 >();
 const emits = defineEmits<ListboxRootEmits>();
 
+const disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  return assign(delegated, { disabled: disabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);

src/ui/checkbox/Checkbox.ce.vue

@@ -15,8 +15,8 @@ import { useVModel } from "@vueuse/core";
 import { computed } from "vue";
 import config from "./checkbox.config";
 import Checkbox from "./Checkbox.vue";
-import { useStyles, cn } from "../../utils";
-import { omit } from "lodash-es";
+import { useStyles, cn, useDisabled } from "../../utils";
+import { assign, omit } from "lodash-es";
 import type { CheckboxProps } from "./types";
 // -----------------------------------------------------------------------------
 
@@ -31,8 +31,12 @@ const emits = defineEmits<{
   (e: "update:checked", payload: string | number): void;
 }>();
 
+const disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() =>
-  omit(props, ["class", "uiConfig", "defaultChecked", "checked"])
+  assign(omit(props, ["class", "uiConfig", "defaultChecked", "checked"]), {
+    disabled: disabled.value
+  })
 );
 
 const checked = useVModel(props, "checked", emits, {

src/ui/combobox/Combobox.ce.vue

@@ -1,7 +1,7 @@
 <template>
   <Popover
     v-model:open="open"
-    :disabled="props.disabled"
+    :disabled="disabled"
     :class="styles.combobox.root"
   >
     <PopoverTrigger as-child :ring="false">
@@ -146,7 +146,7 @@ import {
 import Icon from "../icon/Icon.ce.vue";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import config from "./combobox.config";
-import { cn, useStyles } from "../../utils";
+import { cn, useStyles, useDisabled } from "../../utils";
 import { find, get, isEmpty, isEqual, isFunction, has } from "lodash-es";
 import type { ComboboxProps, ComboboxItemProps } from "./types";
 
@@ -193,6 +193,8 @@ const meta = computed(() => ({
 const open = ref(false);
 const skipFocus = computed(() => props.tabindex === "-1");
 
+const disabled = useDisabled(() => props.disabled);
+
 const itemValue = computed((): string => props.itemValue || "value");
 const itemLabel = computed((): string => props.itemLabel || "label");
 

src/ui/command/Command.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
 import { type HTMLAttributes, computed } from "vue";
-import { cn } from "../../utils";
+import { assign } from "lodash-es";
+import { cn, useDisabled } from "../../utils";
 import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
 
 const props = withDefaults(
@@ -14,10 +15,12 @@ const props = withDefaults(
 
 const emits = defineEmits<ComboboxRootEmits>();
 
+const disabled = useDisabled(() => props.disabled);
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
 
-  return delegated;
+  return assign(delegated, { disabled: disabled.value });
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);

src/ui/form/Form.ce.vue

@@ -51,7 +51,13 @@ import { Button } from "../button";
 import config from "./form.config";
 import { upmindUIRenderers } from "./renderers";
 import { iterateSchema } from "./renderers/utils";
-import { useStyles, isDeepEmpty, useValidation } from "../../utils";
+import {
+  useStyles,
+  isDeepEmpty,
+  useValidation,
+  useDisabled,
+  useReadonly
+} from "../../utils";
 import { cn } from "../../utils";
 import {
   isEmpty,
@@ -132,6 +138,9 @@ const touched = useVModel(props, "touched", emits, {
 });
 // ---
 
+const disabled = useDisabled(() => props.disabled || props.processing);
+const readonly = useReadonly(() => props.readonly);
+
 const meta = computed(() => {
   return {
     canTranslate: !isEmpty(props.i18n),
@@ -141,7 +150,8 @@ const meta = computed(() => {
     isDirty: baseModel !== model.value,
     isTouched: touched.value,
     isValid: isEmpty(errors.value),
-    isDisabled: props.disabled || props.processing
+    isDisabled: disabled.value,
+    isReadonly: readonly.value
   };
 });
 

src/ui/form/types.ts

@@ -62,6 +62,7 @@ export type FormMeta = {
   isTouched: boolean;
   isValid: boolean;
   isDisabled: boolean;
+  isReadonly: boolean;
 };
 
 export type FormActionsProps = {

src/ui/input-password/InputPassword.ce.vue

@@ -12,7 +12,7 @@
           <Link
             :class="styles.inputPassword.action"
             :focusable="false"
-            :disabled="props.disabled || props.readonly"
+            :disabled="disabled || readonly"
             @click.prevent="onGenerate"
           >
             <Icon icon="magic-wand-02" size="2xs" />
@@ -44,8 +44,8 @@ import Input from "../input/Input.ce.vue";
 import { Link } from "../link";
 import Tooltip from "../tooltip/Tooltip.ce.vue";
 import config from "./input-password.config";
-import { useStyles } from "../../utils";
-import { omit } from "lodash-es";
+import { useStyles, useDisabled, useReadonly } from "../../utils";
+import { assign, omit } from "lodash-es";
 import type { InputPasswordProps } from "./types";
 // -----------------------------------------------------------------------------
 const props = withDefaults(defineProps<InputPasswordProps>(), {
@@ -70,18 +70,24 @@ const modelValue = useVModel(props, "modelValue", emit, {
 
 const unmask = ref(false);
 
+const disabled = useDisabled(() => props.disabled);
+const readonly = useReadonly(() => props.readonly);
+
 const delegatedProps = computed(() =>
-  omit(props, [
-    "class",
-    "uiConfig",
-    "defaultValue",
-    "modelValue",
-    "autocomplete",
-    "generator",
-    "generateLabel",
-    "showLabel",
-    "hideLabel"
-  ])
+  assign(
+    omit(props, [
+      "class",
+      "uiConfig",
+      "defaultValue",
+      "modelValue",
+      "autocomplete",
+      "generator",
+      "generateLabel",
+      "showLabel",
+      "hideLabel"
+    ]),
+    { disabled: disabled.value, readonly: readonly.value }
+  )
 );
 
 function onGenerate() {