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

package/src/components/TickBox/TickBox.vue

@@ -1,172 +1,172 @@
-<template>
-  <div class="tick-box-wrapper" :style="tickBoxCssVars">
-    <v-checkbox
-      class="tick-box"
-      :class="checkboxClass"
-      true-icon="heroicons:outline-checked"
-      false-icon="heroicons:outline"
-      :disabled="disabled"
-      :value="value"
-      :density="density"
-      v-model="internalValue"
-      :color="hoverColor"
-      :base-color="hoverColor"
-      data-testid="root"
-    >
-      <!-- Custom label slot with dynamic style -->
-      <template #label>
-        <span class="tick-box-label" :class="labelClass">{{ label }}</span>
-      </template>
-    </v-checkbox>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject } from 'vue';
-import './TickBox.css';
-import { siteColors } from "../../utils/index";
-
-// Inject theme colors from ThemeProvider, fallback to global siteColors
-const injectedThemeColors = inject('themeColors', null);
-const colors = computed(() => {
-  if (injectedThemeColors) {
-    return injectedThemeColors.value;
-  }
-  return siteColors;
-});
-
-// Define props for the TickBox component
-const props = defineProps({
-  /**
-   * The label text displayed next to the tick box.
-   * This prop is required.
-   */
-  label: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Indicates if the tick box is in a success state.
-   * When true, the success styling will be applied.
-   */
-  success: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Indicates if the tick box is in an error state.
-   * When true, the error styling will be applied.
-   */
-  error: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Disables the tick box when true, making it non-interactive.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The value that the tick box represents when checked.
-   * Can be a string, number, or boolean. Default is `true`.
-   */
-  value: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-
-  /**
-   * The current value bound to the tick box for v-model.
-   * Can be an array for multiple selection or boolean for single selection.
-   * This prop is required.
-   */
-  modelValue: {
-    type: [Array, Boolean],
-    required: true,
-  },
-
-  /**
-   * Controls the density of the tick box, such as padding and size.
-   * Default is 'comfortable'.
-   */
-  density: {
-    type: String,
-    required: false,
-    default: 'comfortable',
-  },
-});
-
-// Emit event for v-model binding
-const emit = defineEmits(['update:modelValue']);
-
-// Computed property for v-model binding (two-way binding)
-const internalValue = computed({
-  get() {
-    return props.modelValue; // Get the current modelValue from the parent
-  },
-  set(newValue) {
-    emit('update:modelValue', newValue); // Emit the updated value to the parent
-  },
-});
-
-// Computed property for dynamic class based on error, success, or disabled state
-const checkboxClass = computed(() => {
-  if (props.disabled) return 'disabled-state';
-  if (props.error) return 'error-state';
-  if (props.success) return 'success-state';
-  return 'default-state';
-});
-
-// Computed property for dynamic label class
-const labelClass = computed(() => {
-  if (props.disabled) return 'label-disabled';
-  if (props.error) return 'label-error';
-  if (props.success) return 'label-success';
-  return 'label-default';
-});
-
-// Computed property for dynamic color based on error or success state
-const hoverColor = computed(() => {
-  if (props.disabled) return colors.value['checkbox_disabled_checkmark'];
-  if (props.error) return colors.value['checkbox_error_checkmark'];
-  if (props.success) return colors.value['checkbox_success_checkmark'];
-  return colors.value['checkbox_default_checkmark'];
-});
-
-// Computed CSS custom properties for tickbox theming (uses same checkbox colors)
-const tickBoxCssVars = computed(() => ({
-  // Default state
-  '--tickbox-default-text': colors.value['checkbox_default_text'],
-  '--tickbox-default-border': colors.value['checkbox_defaut_border'],
-  '--tickbox-default-bg': colors.value['checkbox_default_bg'],
-  '--tickbox-default-checkmark': colors.value['checkbox_default_checkmark'],
-  // Hover state
-  '--tickbox-hovered-border': colors.value['checkbox_hovered_border'],
-  '--tickbox-hovered-bg': colors.value['checkbox_hovered_bg'],
-  '--tickbox-hovered-checkmark': colors.value['checkbox_hovered_checkmark'],
-  // Checked state
-  '--tickbox-checked-border': colors.value['checkbox_checked_border'],
-  '--tickbox-checked-bg': colors.value['checkbox_checked_bg'],
-  // Error state
-  '--tickbox-error-border': colors.value['checkbox_error_border'],
-  '--tickbox-error-bg': colors.value['checkbox_error_bg'],
-  '--tickbox-error-text': colors.value['checkbox_error_text'],
-  '--tickbox-error-checkmark': colors.value['checkbox_error_checkmark'],
-  // Success state
-  '--tickbox-success-border': colors.value['checkbox_success_border'],
-  '--tickbox-success-bg': colors.value['checkbox_success_bg'],
-  '--tickbox-success-text': colors.value['checkbox_success_text'],
-  '--tickbox-success-checkmark': colors.value['checkbox_success_checkmark'],
-  // Disabled state
-  '--tickbox-disabled-border': colors.value['checkbox_disabled_border'],
-  '--tickbox-disabled-bg': colors.value['checkbox_disabled_bg'],
-  '--tickbox-disabled-text': colors.value['checkbox_disabled_text'],
-  '--tickbox-disabled-checkmark': colors.value['checkbox_disabled_checkmark'],
-}));
-</script>
+<template>
+  <div class="tick-box-wrapper" :style="tickBoxCssVars">
+    <v-checkbox
+      class="tick-box"
+      :class="checkboxClass"
+      true-icon="heroicons:outline-checked"
+      false-icon="heroicons:outline"
+      :disabled="disabled"
+      :value="value"
+      :density="density"
+      v-model="internalValue"
+      :color="hoverColor"
+      :base-color="hoverColor"
+      data-testid="root"
+    >
+      <!-- Custom label slot with dynamic style -->
+      <template #label>
+        <span class="tick-box-label" :class="labelClass">{{ label }}</span>
+      </template>
+    </v-checkbox>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import './TickBox.css';
+import { siteColors } from "../../utils/index";
+
+// Inject theme colors from ThemeProvider, fallback to global siteColors
+const injectedThemeColors = inject('themeColors', null);
+const colors = computed(() => {
+  if (injectedThemeColors) {
+    return injectedThemeColors.value;
+  }
+  return siteColors;
+});
+
+// Define props for the TickBox component
+const props = defineProps({
+  /**
+   * The label text displayed next to the tick box.
+   * This prop is required.
+   */
+  label: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Indicates if the tick box is in a success state.
+   * When true, the success styling will be applied.
+   */
+  success: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Indicates if the tick box is in an error state.
+   * When true, the error styling will be applied.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Disables the tick box when true, making it non-interactive.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The value that the tick box represents when checked.
+   * Can be a string, number, or boolean. Default is `true`.
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+
+  /**
+   * The current value bound to the tick box for v-model.
+   * Can be an array for multiple selection or boolean for single selection.
+   * This prop is required.
+   */
+  modelValue: {
+    type: [Array, Boolean],
+    required: true,
+  },
+
+  /**
+   * Controls the density of the tick box, such as padding and size.
+   * Default is 'comfortable'.
+   */
+  density: {
+    type: String,
+    required: false,
+    default: 'comfortable',
+  },
+});
+
+// Emit event for v-model binding
+const emit = defineEmits(['update:modelValue']);
+
+// Computed property for v-model binding (two-way binding)
+const internalValue = computed({
+  get() {
+    return props.modelValue; // Get the current modelValue from the parent
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue); // Emit the updated value to the parent
+  },
+});
+
+// Computed property for dynamic class based on error, success, or disabled state
+const checkboxClass = computed(() => {
+  if (props.disabled) return 'disabled-state';
+  if (props.error) return 'error-state';
+  if (props.success) return 'success-state';
+  return 'default-state';
+});
+
+// Computed property for dynamic label class
+const labelClass = computed(() => {
+  if (props.disabled) return 'label-disabled';
+  if (props.error) return 'label-error';
+  if (props.success) return 'label-success';
+  return 'label-default';
+});
+
+// Computed property for dynamic color based on error or success state
+const hoverColor = computed(() => {
+  if (props.disabled) return colors.value['checkbox_disabled_checkmark'];
+  if (props.error) return colors.value['checkbox_error_checkmark'];
+  if (props.success) return colors.value['checkbox_success_checkmark'];
+  return colors.value['checkbox_default_checkmark'];
+});
+
+// Computed CSS custom properties for tickbox theming (uses same checkbox colors)
+const tickBoxCssVars = computed(() => ({
+  // Default state
+  '--tickbox-default-text': colors.value['checkbox_default_text'],
+  '--tickbox-default-border': colors.value['checkbox_defaut_border'],
+  '--tickbox-default-bg': colors.value['checkbox_default_bg'],
+  '--tickbox-default-checkmark': colors.value['checkbox_default_checkmark'],
+  // Hover state
+  '--tickbox-hovered-border': colors.value['checkbox_hovered_border'],
+  '--tickbox-hovered-bg': colors.value['checkbox_hovered_bg'],
+  '--tickbox-hovered-checkmark': colors.value['checkbox_hovered_checkmark'],
+  // Checked state
+  '--tickbox-checked-border': colors.value['checkbox_checked_border'],
+  '--tickbox-checked-bg': colors.value['checkbox_checked_bg'],
+  // Error state
+  '--tickbox-error-border': colors.value['checkbox_error_border'],
+  '--tickbox-error-bg': colors.value['checkbox_error_bg'],
+  '--tickbox-error-text': colors.value['checkbox_error_text'],
+  '--tickbox-error-checkmark': colors.value['checkbox_error_checkmark'],
+  // Success state
+  '--tickbox-success-border': colors.value['checkbox_success_border'],
+  '--tickbox-success-bg': colors.value['checkbox_success_bg'],
+  '--tickbox-success-text': colors.value['checkbox_success_text'],
+  '--tickbox-success-checkmark': colors.value['checkbox_success_checkmark'],
+  // Disabled state
+  '--tickbox-disabled-border': colors.value['checkbox_disabled_border'],
+  '--tickbox-disabled-bg': colors.value['checkbox_disabled_bg'],
+  '--tickbox-disabled-text': colors.value['checkbox_disabled_text'],
+  '--tickbox-disabled-checkmark': colors.value['checkbox_disabled_checkmark'],
+}));
+</script>

package/src/components/Tile/Tile.css

@@ -1,106 +1,106 @@
-.wl-tile {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  border: 1.5px solid var(--tile-border, #C1C1C2);
-  border-radius: 8px;
-  background-color: var(--tile-bg, #FFFFFF);
-  overflow: visible;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-
-.wl-tile:hover {
-  background-color: var(--tile-hover-bg, #F6F6F8);
-}
-
-.wl-tile:active {
-  background-color: var(--tile-pressed-bg, #E5E6EE);
-}
-
-/* Disabled state */
-.wl-tile--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-/* Body wraps all content */
-.wl-tile__body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* Header row: icon + title + label inline */
-.wl-tile__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Icon area */
-.wl-tile__icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-/* Label area — inline in header row */
-.wl-tile__label {
-  display: flex;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-/* Title — fills remaining space */
-.wl-tile__title {
-  flex: 1;
-  min-width: 0;
-  color: var(--tile-title-color, #172774);
-}
-
-/* Banner mode — ribbon sticking out on the right */
-.wl-tile__label--banner {
-  position: absolute;
-  right: -9px;
-  top: 10px;
-}
-
-/* Default plain text label */
-.wl-tile__label-text {
-  display: inline-block;
-  font-family: 'Outfit', sans-serif;
-  font-weight: 300;
-  font-size: 11px;
-  line-height: 1.2;
-  letter-spacing: 0.22px;
-  color: var(--tile-label-text-color, #172774);
-  background-color: var(--tile-label-bg, #C5E1FC);
-  border-radius: 2px;
-  padding: 4px 12px;
-  white-space: nowrap;
-}
-
-/* Description text */
-.wl-tile__description {
-  color: var(--tile-description-color, #172774);
-}
-
-/* Accessibility: Focus Indicators (WCAG 2.4.7) */
-.wl-tile:focus-visible {
-  outline: 2px solid var(--tile-focus-ring, #172774);
-  outline-offset: 2px;
-}
-
-/* High contrast mode support */
-@media (forced-colors: active) {
-  .wl-tile {
-    border: 2px solid currentColor;
-  }
-}
+.wl-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border: 1.5px solid var(--tile-border, #C1C1C2);
+  border-radius: 8px;
+  background-color: var(--tile-bg, #FFFFFF);
+  overflow: visible;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.wl-tile:hover {
+  background-color: var(--tile-hover-bg, #F6F6F8);
+}
+
+.wl-tile:active {
+  background-color: var(--tile-pressed-bg, #E5E6EE);
+}
+
+/* Disabled state */
+.wl-tile--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+/* Body wraps all content */
+.wl-tile__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Header row: icon + title + label inline */
+.wl-tile__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Icon area */
+.wl-tile__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* Label area — inline in header row */
+.wl-tile__label {
+  display: flex;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Title — fills remaining space */
+.wl-tile__title {
+  flex: 1;
+  min-width: 0;
+  color: var(--tile-title-color, #172774);
+}
+
+/* Banner mode — ribbon sticking out on the right */
+.wl-tile__label--banner {
+  position: absolute;
+  right: -9px;
+  top: 10px;
+}
+
+/* Default plain text label */
+.wl-tile__label-text {
+  display: inline-block;
+  font-family: 'Outfit', sans-serif;
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 1.2;
+  letter-spacing: 0.22px;
+  color: var(--tile-label-text-color, #172774);
+  background-color: var(--tile-label-bg, #C5E1FC);
+  border-radius: 2px;
+  padding: 4px 12px;
+  white-space: nowrap;
+}
+
+/* Description text */
+.wl-tile__description {
+  color: var(--tile-description-color, #172774);
+}
+
+/* Accessibility: Focus Indicators (WCAG 2.4.7) */
+.wl-tile:focus-visible {
+  outline: 2px solid var(--tile-focus-ring, #172774);
+  outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .wl-tile {
+    border: 2px solid currentColor;
+  }
+}