@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/Button/Button.vue

@@ -1,257 +1,257 @@
-<template>
-  <v-btn
-    :color="buttonColor"
-    :disabled="disabled"
-    :append-icon="appendIcon"
-    rounded="lg"
-    :density="density"
-    class="text-none wl-button"
-    :variant="variant"
-    :size="size"
-    :readonly="readonly"
-    :style="rootStyle"
-    data-testid="root"
-  >
-    <template v-if="loading || prependIcon" v-slot:prepend>
-      <Loader v-if="loading" :size="loaderSize" :inline="true" :bg-color="loaderBgColor" :text-color="loaderTextColor" />
-      <v-icon v-else-if="prependIcon">{{ prependIcon }}</v-icon>
-    </template>
-    <slot>{{ label }}</slot>
-  </v-btn>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { siteColors as globalSiteColors } from "../../utils/index";
-import Loader from '../Loader/Loader.vue';
-
-// Use injected theme colors if available, otherwise fall back to global siteColors
-const injectedColors = inject<any>('themeColors', null);
-const siteColors = computed(() => {
-  if (injectedColors?.value) {
-    return injectedColors.value;
-  }
-  return globalSiteColors || {};
-});
-
-const props = defineProps({
-  /**
-   * The color of the button.
-   * Default is '--Dental-Blue-0' (a dark blue color).
-   */
-  color: {
-    type: String,
-    default: null,
-  },
-  /**
-   * The text color of the button (for flat variant).
-   * Default is 'white'.
-   */
-  textColor: {
-    type: String,
-    default: null,
-  },
-  /**
-   * Icon to display before the button label.
-   * Accepts the name of an icon (String).
-   */
-  prependIcon: {
-    type: String,
-  },
-  /**
-   * Icon to display after the button label.
-   * Can be any valid icon name or value (type not specified for flexibility).
-   */
-  appendIcon: {},
-
-  /**
-   * Boolean to set the loading state of the button.
-   * When true, it shows a loading spinner.
-   * Default is false.
-   */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Defines the density of the button.
-   * Accepts 'default', 'comfortable', or other Vuetify density options.
-   * Default is 'default'.
-   */
-  density: {
-    type: String,
-    default: 'default',
-  },
-
-  /**
-   * The visual style of the button.
-   * Accepts 'flat', 'outlined', 'contained', etc.
-   * Default is 'flat'.
-   */
-  variant: {
-    type: String,
-    default: 'flat',
-  },
-
-  /**
-   * Size of the button.
-   * Accepts 'small', 'medium', 'large', or 'default'.
-   * Default is 'default'.
-   */
-  size: {
-    type: String,
-    default: 'default',
-  },
-
-  /**
-   * The text label to display inside the button.
-   * Default is 'Button'.
-   */
-  label: {
-    type: String,
-    default: 'Button',
-  },
-
-  /**
-   * Boolean to disable the button.
-   * When true, the button is disabled and not clickable.
-   * Default is false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean to set the button to read-only state.
-   * When true, the button displays the readonly attribute.
-   * Default is false.
-   */
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-// Compute the button color with theme fallback
-const buttonColor = computed(() => {
-  if (props.color) return props.color;
-
-  // Use theme colors based on variant and disabled state
-  if (props.variant === 'outlined') {
-    if (props.disabled) {
-      return siteColors.value['button_outline_disabled_border'];
-    }
-    return siteColors.value['button_outline_border'];
-  }
-  if (props.disabled) {
-    return siteColors.value['button_disabled_bg'];
-  }
-  return siteColors.value['button_default_bg'];
-});
-
-// Compute text color with theme fallback
-const buttonTextColor = computed(() => {
-  if (props.textColor) return props.textColor;
-
-  // Use theme colors based on variant and disabled state
-  if (props.variant === 'outlined') {
-    if (props.disabled) {
-      return siteColors.value['button_outline_disabled_text'];
-    }
-    return siteColors.value['button_outline_default_text'];
-  }
-  return siteColors.value['button_default_text'];
-});
-
-const buttonStyle = computed(() => {
-  if (props.variant === 'flat' || props.variant === 'elevated') {
-    return { color: buttonTextColor.value };
-  }
-  return {};
-});
-
-// Compute a CSS variable for focus color to avoid hardcoded values.
-const focusColor = computed(() => {
-  return buttonColor.value;
-});
-
-// Expose a style object that includes the focus color custom property.
-const rootStyle = computed(() => ({
-  ...buttonStyle.value,
-  '--wl-button-focus-color': focusColor.value
-}));
-
-// Compute loader size based on button size
-const loaderSize = computed(() => {
-  switch (props.size) {
-    case 'x-small':
-      return 16;
-    case 'small':
-      return 20;
-    case 'large':
-      return 28;
-    case 'x-large':
-      return 32;
-    default: // 'default' or 'medium'
-      return 24;
-  }
-});
-
-// Compute loader colors based on variant
-const loaderBgColor = computed(() => {
-  // For outlined variant, use transparent for background circle to create contrast
-  if (props.variant === 'outlined') {
-    return 'transparent';
-  }
-  // For flat/elevated: background circle uses text color (after vice versa swap)
-  return buttonTextColor.value;
-});
-
-const loaderTextColor = computed(() => {
-  // For outlined variant, use the outline color for all elements
-  if (props.variant === 'outlined') {
-    return buttonColor.value;
-  }
-  // For flat/elevated: rotating arc and other elements use button background color (after vice versa swap)
-  return buttonColor.value;
-});
-</script>
-
-<style>
-.wl-button.v-btn--variant-outlined {
-  border-width: 1.5px;
-}
-
-/* Disabled button styles */
-.wl-button.v-btn--disabled {
-  opacity: 1 !important;
-  pointer-events: none !important;
-  cursor: not-allowed !important;
-}
-
-/* Accessibility: Focus Indicators (WCAG 2.4.7) */
-.wl-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-.wl-button.v-btn--variant-outlined:focus-visible {
-  /* Use component-provided focus color with fallback */
-  outline-color: var(--wl-button-focus-color, var(--button_outline_border));
-  outline-width: 3px;
-  box-shadow: 0 0 0 4px rgba(0,0,0,0.08), 0 0 0 6px rgba(255,255,255,0.06) inset;
-}
-
-.wl-button.v-btn--variant-flat:focus-visible {
-  outline-color: var(--wl-button-focus-color, var(--button_default_text));
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
-}
-
-/* High contrast mode support */
-@media (forced-colors: active) {
-  .wl-button {
-    border: 2px solid currentColor;
-  }
-}
-</style>
+<template>
+  <v-btn
+    :color="buttonColor"
+    :disabled="disabled"
+    :append-icon="appendIcon"
+    rounded="lg"
+    :density="density"
+    class="text-none wl-button"
+    :variant="variant"
+    :size="size"
+    :readonly="readonly"
+    :style="rootStyle"
+    data-testid="root"
+  >
+    <template v-if="loading || prependIcon" v-slot:prepend>
+      <Loader v-if="loading" :size="loaderSize" :inline="true" :bg-color="loaderBgColor" :text-color="loaderTextColor" />
+      <v-icon v-else-if="prependIcon">{{ prependIcon }}</v-icon>
+    </template>
+    <slot>{{ label }}</slot>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { siteColors as globalSiteColors } from "../../utils/index";
+import Loader from '../Loader/Loader.vue';
+
+// Use injected theme colors if available, otherwise fall back to global siteColors
+const injectedColors = inject<any>('themeColors', null);
+const siteColors = computed(() => {
+  if (injectedColors?.value) {
+    return injectedColors.value;
+  }
+  return globalSiteColors || {};
+});
+
+const props = defineProps({
+  /**
+   * The color of the button.
+   * Default is '--Dental-Blue-0' (a dark blue color).
+   */
+  color: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The text color of the button (for flat variant).
+   * Default is 'white'.
+   */
+  textColor: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Icon to display before the button label.
+   * Accepts the name of an icon (String).
+   */
+  prependIcon: {
+    type: String,
+  },
+  /**
+   * Icon to display after the button label.
+   * Can be any valid icon name or value (type not specified for flexibility).
+   */
+  appendIcon: {},
+
+  /**
+   * Boolean to set the loading state of the button.
+   * When true, it shows a loading spinner.
+   * Default is false.
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Defines the density of the button.
+   * Accepts 'default', 'comfortable', or other Vuetify density options.
+   * Default is 'default'.
+   */
+  density: {
+    type: String,
+    default: 'default',
+  },
+
+  /**
+   * The visual style of the button.
+   * Accepts 'flat', 'outlined', 'contained', etc.
+   * Default is 'flat'.
+   */
+  variant: {
+    type: String,
+    default: 'flat',
+  },
+
+  /**
+   * Size of the button.
+   * Accepts 'small', 'medium', 'large', or 'default'.
+   * Default is 'default'.
+   */
+  size: {
+    type: String,
+    default: 'default',
+  },
+
+  /**
+   * The text label to display inside the button.
+   * Default is 'Button'.
+   */
+  label: {
+    type: String,
+    default: 'Button',
+  },
+
+  /**
+   * Boolean to disable the button.
+   * When true, the button is disabled and not clickable.
+   * Default is false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean to set the button to read-only state.
+   * When true, the button displays the readonly attribute.
+   * Default is false.
+   */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// Compute the button color with theme fallback
+const buttonColor = computed(() => {
+  if (props.color) return props.color;
+
+  // Use theme colors based on variant and disabled state
+  if (props.variant === 'outlined') {
+    if (props.disabled) {
+      return siteColors.value['button_outline_disabled_border'];
+    }
+    return siteColors.value['button_outline_border'];
+  }
+  if (props.disabled) {
+    return siteColors.value['button_disabled_bg'];
+  }
+  return siteColors.value['button_default_bg'];
+});
+
+// Compute text color with theme fallback
+const buttonTextColor = computed(() => {
+  if (props.textColor) return props.textColor;
+
+  // Use theme colors based on variant and disabled state
+  if (props.variant === 'outlined') {
+    if (props.disabled) {
+      return siteColors.value['button_outline_disabled_text'];
+    }
+    return siteColors.value['button_outline_default_text'];
+  }
+  return siteColors.value['button_default_text'];
+});
+
+const buttonStyle = computed(() => {
+  if (props.variant === 'flat' || props.variant === 'elevated') {
+    return { color: buttonTextColor.value };
+  }
+  return {};
+});
+
+// Compute a CSS variable for focus color to avoid hardcoded values.
+const focusColor = computed(() => {
+  return buttonColor.value;
+});
+
+// Expose a style object that includes the focus color custom property.
+const rootStyle = computed(() => ({
+  ...buttonStyle.value,
+  '--wl-button-focus-color': focusColor.value
+}));
+
+// Compute loader size based on button size
+const loaderSize = computed(() => {
+  switch (props.size) {
+    case 'x-small':
+      return 16;
+    case 'small':
+      return 20;
+    case 'large':
+      return 28;
+    case 'x-large':
+      return 32;
+    default: // 'default' or 'medium'
+      return 24;
+  }
+});
+
+// Compute loader colors based on variant
+const loaderBgColor = computed(() => {
+  // For outlined variant, use transparent for background circle to create contrast
+  if (props.variant === 'outlined') {
+    return 'transparent';
+  }
+  // For flat/elevated: background circle uses text color (after vice versa swap)
+  return buttonTextColor.value;
+});
+
+const loaderTextColor = computed(() => {
+  // For outlined variant, use the outline color for all elements
+  if (props.variant === 'outlined') {
+    return buttonColor.value;
+  }
+  // For flat/elevated: rotating arc and other elements use button background color (after vice versa swap)
+  return buttonColor.value;
+});
+</script>
+
+<style>
+.wl-button.v-btn--variant-outlined {
+  border-width: 1.5px;
+}
+
+/* Disabled button styles */
+.wl-button.v-btn--disabled {
+  opacity: 1 !important;
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+/* Accessibility: Focus Indicators (WCAG 2.4.7) */
+.wl-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.wl-button.v-btn--variant-outlined:focus-visible {
+  /* Use component-provided focus color with fallback */
+  outline-color: var(--wl-button-focus-color, var(--button_outline_border));
+  outline-width: 3px;
+  box-shadow: 0 0 0 4px rgba(0,0,0,0.08), 0 0 0 6px rgba(255,255,255,0.06) inset;
+}
+
+.wl-button.v-btn--variant-flat:focus-visible {
+  outline-color: var(--wl-button-focus-color, var(--button_default_text));
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .wl-button {
+    border: 2px solid currentColor;
+  }
+}
+</style>