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

package/src/components/Button/Button.vue

@@ -1,119 +1,119 @@
-<template>
-  <v-btn
-    :color="color"
-    :disabled="disabled"
-    :prepend-icon="prependIcon"
-    :append-icon="appendIcon"
-    :loading="loading"
-    rounded="lg"
-    :density="density"
-    class="text-none wl-button"
-    :variant="variant"
-    :size="size"
-    :readonly="readonly"
-    data-testid="root"
-  >
-    {{ label }}
-  </v-btn>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-
-const props = defineProps({
-  /**
-   * The color of the button.
-   * Default is '#172774' (a dark blue color).
-   */
-  color: {
-    type: String,
-    default: '#172774',
-  },
-  /**
-   * 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,
-  },
-});
-</script>
-
-<style>
-.wl-button .v-btn--variant-outlined {
-  border-width: 1.5px;
-}
-</style>
+<template>
+  <v-btn
+    :color="color"
+    :disabled="disabled"
+    :prepend-icon="prependIcon"
+    :append-icon="appendIcon"
+    :loading="loading"
+    rounded="lg"
+    :density="density"
+    class="text-none wl-button"
+    :variant="variant"
+    :size="size"
+    :readonly="readonly"
+    data-testid="root"
+  >
+    {{ label }}
+  </v-btn>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  /**
+   * The color of the button.
+   * Default is '#172774' (a dark blue color).
+   */
+  color: {
+    type: String,
+    default: '#172774',
+  },
+  /**
+   * 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,
+  },
+});
+</script>
+
+<style>
+.wl-button .v-btn--variant-outlined {
+  border-width: 1.5px;
+}
+</style>

package/src/components/CheckBox/CheckBox.css

@@ -1,185 +1,185 @@
-/* Normal State */
-
-/* Label */
-.label {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.875rem;
-  line-height: 15.6px;
-  letter-spacing: -0.13px;
-  color: var(--Dental-Blue-0);
-  cursor: pointer;
-}
-
-/* Checkbox Container */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Checkbox (Normal) */
-.input-checkbox {
-  appearance: none;
-  background-color: white;
-  margin: 0;
-  padding: 0;
-  /* Width and height will be set by density classes */
-  border: 1px solid;
-  border-radius: 4px;
-  display: grid;
-  place-content: center;
-  transform: translateY(-0.075em);
-  border-color: var(--Soft-Concrete-2);
-  cursor: pointer;
-}
-
-.input-checkbox:hover {
-  border-width: 2px;
-  background-color: var(--Dental-Light-Blue--2);
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox::before {
-  content: '';
-  /* Width and height will be set by density classes */
-  transform: scale(0);
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--Dental-Blue-0);
-  background-color: var(--Dental-Blue-0);
-  border-radius: 2px;
-}
-
-.input-checkbox:checked::before {
-  transform: scale(1);
-  background-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox:checked {
-  border-width: 2px;
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox:hover::before {
-  border-color: var(--Dental-Blue-0);
-}
-
-/* Density Levels */
-
-/* Comfortable */
-.density-comfortable.input-checkbox {
-  width: 32px;
-  height: 32px;
-}
-
-.density-comfortable.input-checkbox::before {
-  width: 20px;
-  height: 20px;
-}
-
-/* Default */
-.density-default.input-checkbox {
-  width: 28px;
-  height: 28px;
-}
-
-.density-default.input-checkbox::before {
-  width: 16px;
-  height: 16px;
-}
-
-/* Compact */
-.density-compact.input-checkbox {
-  width: 24px;
-  height: 24px;
-}
-
-.density-compact.input-checkbox::before {
-  width: 12px;
-  height: 12px;
-}
-
-/* Success State */
-
-/* Success Label */
-.label-success {
-  color: var(--Success-Green-1);
-}
-
-/* Success Checkbox */
-.input-success {
-  border-color: var(--Success-Green-0);
-  color: var(--Success-Green-0);
-}
-
-.input-success:hover {
-  border-color: var(--Success-Green-0);
-  background-color: var(--Success-Green--1);
-}
-
-.input-success.input-checkbox:checked {
-  border-color: var(--Success-Green-0);
-}
-
-.input-success.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--Success-Green-0);
-  background-color: var(--Success-Green-0);
-}
-
-/* Error State */
-
-/* Error Label */
-.label-error {
-  color: var(--Error-Red-0);
-}
-
-/* Error Checkbox */
-.input-error {
-  border-color: var(--Error-Red-0);
-  color: var(--Error-Red-0);
-}
-
-.input-error:hover {
-  border-color: var(--Error-Red-0);
-  background-color: var(--Light-Gum--3);
-}
-
-.input-error.input-checkbox:checked {
-  border-color: var(--Error-Red-0);
-}
-
-.input-error.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--Error-Red-0);
-  background-color: var(--Error-Red-0);
-}
-
-/* Disabled State */
-
-/* Disabled Label */
-.label-disabled {
-  color: var(--Soft-Concrete-2);
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Disabled Checkbox */
-.input-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.input-checkbox:disabled::before {
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-disabled.input-checkbox:hover {
-  border-width: 0.5px;
-  background-color: white;
-  border-color: var(--Soft-Concrete-2);
-}
-
-/* Label Text */
-.label-text {
-  font-weight: 300;
-}
+/* Normal State */
+
+/* Label */
+.label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.875rem;
+  line-height: 15.6px;
+  letter-spacing: -0.13px;
+  color: var(--Dental-Blue-0);
+  cursor: pointer;
+}
+
+/* Checkbox Container */
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Checkbox (Normal) */
+.input-checkbox {
+  appearance: none;
+  background-color: white;
+  margin: 0;
+  padding: 0;
+  /* Width and height will be set by density classes */
+  border: 1px solid;
+  border-radius: 4px;
+  display: grid;
+  place-content: center;
+  transform: translateY(-0.075em);
+  border-color: var(--Soft-Concrete-2);
+  cursor: pointer;
+}
+
+.input-checkbox:hover {
+  border-width: 2px;
+  background-color: var(--Dental-Light-Blue--2);
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox::before {
+  content: '';
+  /* Width and height will be set by density classes */
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--Dental-Blue-0);
+  background-color: var(--Dental-Blue-0);
+  border-radius: 2px;
+}
+
+.input-checkbox:checked::before {
+  transform: scale(1);
+  background-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox:checked {
+  border-width: 2px;
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox:hover::before {
+  border-color: var(--Dental-Blue-0);
+}
+
+/* Density Levels */
+
+/* Comfortable */
+.density-comfortable.input-checkbox {
+  width: 32px;
+  height: 32px;
+}
+
+.density-comfortable.input-checkbox::before {
+  width: 20px;
+  height: 20px;
+}
+
+/* Default */
+.density-default.input-checkbox {
+  width: 28px;
+  height: 28px;
+}
+
+.density-default.input-checkbox::before {
+  width: 16px;
+  height: 16px;
+}
+
+/* Compact */
+.density-compact.input-checkbox {
+  width: 24px;
+  height: 24px;
+}
+
+.density-compact.input-checkbox::before {
+  width: 12px;
+  height: 12px;
+}
+
+/* Success State */
+
+/* Success Label */
+.label-success {
+  color: var(--Success-Green-1);
+}
+
+/* Success Checkbox */
+.input-success {
+  border-color: var(--Success-Green-0);
+  color: var(--Success-Green-0);
+}
+
+.input-success:hover {
+  border-color: var(--Success-Green-0);
+  background-color: var(--Success-Green--1);
+}
+
+.input-success.input-checkbox:checked {
+  border-color: var(--Success-Green-0);
+}
+
+.input-success.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--Success-Green-0);
+  background-color: var(--Success-Green-0);
+}
+
+/* Error State */
+
+/* Error Label */
+.label-error {
+  color: var(--Error-Red-0);
+}
+
+/* Error Checkbox */
+.input-error {
+  border-color: var(--Error-Red-0);
+  color: var(--Error-Red-0);
+}
+
+.input-error:hover {
+  border-color: var(--Error-Red-0);
+  background-color: var(--Light-Gum--3);
+}
+
+.input-error.input-checkbox:checked {
+  border-color: var(--Error-Red-0);
+}
+
+.input-error.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--Error-Red-0);
+  background-color: var(--Error-Red-0);
+}
+
+/* Disabled State */
+
+/* Disabled Label */
+.label-disabled {
+  color: var(--Soft-Concrete-2);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Disabled Checkbox */
+.input-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled::before {
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-disabled.input-checkbox:hover {
+  border-width: 0.5px;
+  background-color: white;
+  border-color: var(--Soft-Concrete-2);
+}
+
+/* Label Text */
+.label-text {
+  font-weight: 300;
+}