@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

package/src/components/CheckBox/Checkbox.vue

@@ -1,130 +1,130 @@
-<template>
-  <label :class="labelClasses" data-testid="root">
-    <span class="checkbox-container">
-      <input
-        type="checkbox"
-        :name="value"
-        :checked="isChecked"
-        @change="updateValue"
-        :class="inputClasses"
-        :disabled="disabled"
-      />
-    </span>
-    {{ label }}
-  </label>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import './CheckBox.css';
-
-// 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']);
-
-// 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)
-}));
-</script>
+<template>
+  <label :class="labelClasses" data-testid="root">
+    <span class="checkbox-container">
+      <input
+        type="checkbox"
+        :name="value"
+        :checked="isChecked"
+        @change="updateValue"
+        :class="inputClasses"
+        :disabled="disabled"
+      />
+    </span>
+    {{ label }}
+  </label>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import './CheckBox.css';
+
+// 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']);
+
+// 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)
+}));
+</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;
 }