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

package/src/components/CheckBox/Checkbox.vue

@@ -1,184 +1,184 @@
-<template>
-  <label
-    :class="labelClasses"
-    data-testid="root"
-    :for="checkboxId"
-    :style="checkboxCssVars"
-  >
-    <span class="checkbox-container">
-      <input
-        type="checkbox"
-        :id="checkboxId"
-        :name="value"
-        :checked="isChecked"
-        @change="updateValue"
-        :class="inputClasses"
-        :disabled="disabled"
-        :aria-checked="isChecked"
-        :aria-disabled="disabled"
-        :aria-invalid="error"
-        :aria-describedby="error ? `${checkboxId}-error` : undefined"
-      />
-    </span>
-    <span class="label-text">{{ label }}</span>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { defineProps, defineEmits, computed, inject } from 'vue';
-import './CheckBox.css';
-import { siteColors, getColorsForDomain, domain } 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 checkbox component with default values and validation
-const props = defineProps({
-  /**
-   * The label text associated with the checkbox.
-   */
-  label: {
-    type: String,
-  },
-  /**
-   * Boolean indicating if the checkbox is in a success state.
-   * When true, the success style will be applied.
-   */
-  success: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean indicating if the checkbox is in an error state.
-   * When true, the error style will be applied.
-   */
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean indicating if the checkbox is disabled.
-   * When true, the checkbox will be non-interactive.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * The value associated with the checkbox input.
-   * Should be unique for each checkbox to track selections correctly.
-   */
-  value: {
-    type: String,
-    default: 'checkbox',
-  },
-  /**
-   * The model value of the checkbox.
-   * Can be an array for multiple selections or a boolean for single selection.
-   * Default is an empty array for multiple selections.
-   */
-  modelValue: {
-    type: [Array, Boolean],
-    default: () => [], // Default empty array for multiple selections
-  },
-  /**
-   * The density of the checkbox.
-   * Controls the size and spacing of the checkbox, accepting 'comfortable', 'default', or 'compact'.
-   * Default is 'default'.
-   */
-  density: {
-    type: String,
-    default: 'default',
-    validator: (value) => ['comfortable', 'default', 'compact'].includes(value), // Validate acceptable values
-  },
-});
-
-// Define events that can be emitted from the component
-const emit = defineEmits(['update:modelValue', 'input-error']);
-
-// Generate stable unique ID for accessibility
-const checkboxId = `checkbox-${props.value}-${Math.random().toString(36).substr(2, 9)}`;
-
-// Computed property to check if the checkbox is selected
-const isChecked = computed(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(props.value); // For multiple selections, check if value is in the array
-  }
-  return props.modelValue; // For single selection (boolean), return the model value
-});
-
-// Function to update the modelValue based on the checkbox state
-const updateValue = (event) => {
-  const checked = event.target.checked;
-  let newValue;
-
-  // Handle array (multiple selection) and boolean (single selection) cases
-  if (Array.isArray(props.modelValue)) {
-    if (checked) {
-      newValue = [...props.modelValue, props.value]; // Add value if checked
-    } else {
-      newValue = props.modelValue.filter((item) => item !== props.value); // Remove value if unchecked
-    }
-  } else {
-    newValue = checked; // For boolean, just set to checked state
-  }
-
-  // Emit the updated value and a potential input error event
-  emit('update:modelValue', newValue);
-  emit('input-error', { id: props.value, isError: !checked });
-};
-
-// Computed classes for the label, dynamically applying success, error, or disabled styles
-const labelClasses = computed(() => ({
-  label: true,
-  'label-success': props.success, // Success state class
-  'label-error': props.error, // Error state class
-  'label-disabled': props.disabled, // Disabled state class
-}));
-
-// Computed classes for the checkbox input, dynamically applying success, error, or disabled styles
-const inputClasses = computed(() => ({
-  'input-checkbox': true,
-  'input-success': props.success, // Success state class
-  'input-error': props.error, // Error state class
-  'input-disabled': props.disabled, // Disabled state class
-  [`density-${props.density}`]: true, // Density class (comfortable, default, or compact)
-}));
-
-// Computed CSS custom properties for checkbox theming
-const checkboxCssVars = computed(() => ({
-  // Default state
-  '--checkbox-default-text': colors.value['checkbox_default_text'],
-  '--checkbox-default-border': colors.value['checkbox_defaut_border'],
-  '--checkbox-default-bg': colors.value['checkbox_default_bg'],
-  '--checkbox-default-checkmark': colors.value['checkbox_default_checkmark'],
-  // Hover state
-  '--checkbox-hovered-border': colors.value['checkbox_hovered_border'],
-  '--checkbox-hovered-bg': colors.value['checkbox_hovered_bg'],
-  '--checkbox-hovered-checkmark': colors.value['checkbox_hovered_checkmark'],
-  // Checked state
-  '--checkbox-checked-border': colors.value['checkbox_checked_border'],
-  '--checkbox-checked-bg': colors.value['checkbox_checked_bg'],
-  // Error state
-  '--checkbox-error-border': colors.value['checkbox_error_border'],
-  '--checkbox-error-bg': colors.value['checkbox_error_bg'],
-  '--checkbox-error-text': colors.value['checkbox_error_text'],
-  '--checkbox-error-checkmark': colors.value['checkbox_error_checkmark'],
-  // Success state
-  '--checkbox-success-border': colors.value['checkbox_success_border'],
-  '--checkbox-success-bg': colors.value['checkbox_success_bg'],
-  '--checkbox-success-text': colors.value['checkbox_success_text'],
-  '--checkbox-success-checkmark': colors.value['checkbox_success_checkmark'],
-  // Disabled state
-  '--checkbox-disabled-border': colors.value['checkbox_disabled_border'],
-  '--checkbox-disabled-bg': colors.value['checkbox_disabled_bg'],
-  '--checkbox-disabled-text': colors.value['checkbox_disabled_text'],
-  '--checkbox-disabled-checkmark': colors.value['checkbox_disabled_checkmark'],
-}));
-</script>
+<template>
+  <label
+    :class="labelClasses"
+    data-testid="root"
+    :for="checkboxId"
+    :style="checkboxCssVars"
+  >
+    <span class="checkbox-container">
+      <input
+        type="checkbox"
+        :id="checkboxId"
+        :name="value"
+        :checked="isChecked"
+        @change="updateValue"
+        :class="inputClasses"
+        :disabled="disabled"
+        :aria-checked="isChecked"
+        :aria-disabled="disabled"
+        :aria-invalid="error"
+        :aria-describedby="error ? `${checkboxId}-error` : undefined"
+      />
+    </span>
+    <span class="label-text">{{ label }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, computed, inject } from 'vue';
+import './CheckBox.css';
+import { siteColors, getColorsForDomain, domain } 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 checkbox component with default values and validation
+const props = defineProps({
+  /**
+   * The label text associated with the checkbox.
+   */
+  label: {
+    type: String,
+  },
+  /**
+   * Boolean indicating if the checkbox is in a success state.
+   * When true, the success style will be applied.
+   */
+  success: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean indicating if the checkbox is in an error state.
+   * When true, the error style will be applied.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean indicating if the checkbox is disabled.
+   * When true, the checkbox will be non-interactive.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * The value associated with the checkbox input.
+   * Should be unique for each checkbox to track selections correctly.
+   */
+  value: {
+    type: String,
+    default: 'checkbox',
+  },
+  /**
+   * The model value of the checkbox.
+   * Can be an array for multiple selections or a boolean for single selection.
+   * Default is an empty array for multiple selections.
+   */
+  modelValue: {
+    type: [Array, Boolean],
+    default: () => [], // Default empty array for multiple selections
+  },
+  /**
+   * The density of the checkbox.
+   * Controls the size and spacing of the checkbox, accepting 'comfortable', 'default', or 'compact'.
+   * Default is 'default'.
+   */
+  density: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['comfortable', 'default', 'compact'].includes(value), // Validate acceptable values
+  },
+});
+
+// Define events that can be emitted from the component
+const emit = defineEmits(['update:modelValue', 'input-error']);
+
+// Generate stable unique ID for accessibility
+const checkboxId = `checkbox-${props.value}-${Math.random().toString(36).substr(2, 9)}`;
+
+// Computed property to check if the checkbox is selected
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(props.value); // For multiple selections, check if value is in the array
+  }
+  return props.modelValue; // For single selection (boolean), return the model value
+});
+
+// Function to update the modelValue based on the checkbox state
+const updateValue = (event) => {
+  const checked = event.target.checked;
+  let newValue;
+
+  // Handle array (multiple selection) and boolean (single selection) cases
+  if (Array.isArray(props.modelValue)) {
+    if (checked) {
+      newValue = [...props.modelValue, props.value]; // Add value if checked
+    } else {
+      newValue = props.modelValue.filter((item) => item !== props.value); // Remove value if unchecked
+    }
+  } else {
+    newValue = checked; // For boolean, just set to checked state
+  }
+
+  // Emit the updated value and a potential input error event
+  emit('update:modelValue', newValue);
+  emit('input-error', { id: props.value, isError: !checked });
+};
+
+// Computed classes for the label, dynamically applying success, error, or disabled styles
+const labelClasses = computed(() => ({
+  label: true,
+  'label-success': props.success, // Success state class
+  'label-error': props.error, // Error state class
+  'label-disabled': props.disabled, // Disabled state class
+}));
+
+// Computed classes for the checkbox input, dynamically applying success, error, or disabled styles
+const inputClasses = computed(() => ({
+  'input-checkbox': true,
+  'input-success': props.success, // Success state class
+  'input-error': props.error, // Error state class
+  'input-disabled': props.disabled, // Disabled state class
+  [`density-${props.density}`]: true, // Density class (comfortable, default, or compact)
+}));
+
+// Computed CSS custom properties for checkbox theming
+const checkboxCssVars = computed(() => ({
+  // Default state
+  '--checkbox-default-text': colors.value['checkbox_default_text'],
+  '--checkbox-default-border': colors.value['checkbox_defaut_border'],
+  '--checkbox-default-bg': colors.value['checkbox_default_bg'],
+  '--checkbox-default-checkmark': colors.value['checkbox_default_checkmark'],
+  // Hover state
+  '--checkbox-hovered-border': colors.value['checkbox_hovered_border'],
+  '--checkbox-hovered-bg': colors.value['checkbox_hovered_bg'],
+  '--checkbox-hovered-checkmark': colors.value['checkbox_hovered_checkmark'],
+  // Checked state
+  '--checkbox-checked-border': colors.value['checkbox_checked_border'],
+  '--checkbox-checked-bg': colors.value['checkbox_checked_bg'],
+  // Error state
+  '--checkbox-error-border': colors.value['checkbox_error_border'],
+  '--checkbox-error-bg': colors.value['checkbox_error_bg'],
+  '--checkbox-error-text': colors.value['checkbox_error_text'],
+  '--checkbox-error-checkmark': colors.value['checkbox_error_checkmark'],
+  // Success state
+  '--checkbox-success-border': colors.value['checkbox_success_border'],
+  '--checkbox-success-bg': colors.value['checkbox_success_bg'],
+  '--checkbox-success-text': colors.value['checkbox_success_text'],
+  '--checkbox-success-checkmark': colors.value['checkbox_success_checkmark'],
+  // Disabled state
+  '--checkbox-disabled-border': colors.value['checkbox_disabled_border'],
+  '--checkbox-disabled-bg': colors.value['checkbox_disabled_bg'],
+  '--checkbox-disabled-text': colors.value['checkbox_disabled_text'],
+  '--checkbox-disabled-checkmark': colors.value['checkbox_disabled_checkmark'],
+}));
+</script>

package/src/components/DateInput/DateInput.css

@@ -1,3 +1,3 @@
-.wl-date-input.edit-layout .v-input__append {
-    margin-inline-start: 0px;
+.wl-date-input.edit-layout .v-input__append {
+    margin-inline-start: 0px;
 }