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

package/src/components/TextArea/TextArea.vue

@@ -1,207 +1,207 @@
-<template>
-  <v-textarea
-    :class="{
-      'text-area': true,
-      'is-success': success,
-      'is-error': error,
-      'is-warning': warning,
-    }"
-    :style="{ color: colors['primary-color'] }"
-    v-model="internalValue"
-    :clearable="clearable"
-    :clear-icon="clearIcon"
-    :label="label"
-    :placeholder="placeholder"
-    :prepend-icon="prependIcon"
-    :prepend-inner-icon="prependInnerIcon"
-    :append-icon="appendIcon"
-    :append-inner-icon="appendInnerIcon"
-    variant="outlined"
-    rounded="lg"
-    :disabled="disabled"
-    :density="density"
-    :hide-details="hideDetails"
-    :rows="rows"
-    :auto-grow="autoGrow"
-    :error="error"
-    @click:append="emit('click:append', $event)"
-    @click:appendInner="emit('click:appendInner', $event)"
-    @click:clear="emit('click:clear', $event)"
-    @click:control="emit('click:control', $event)"
-    @click:prepend="emit('click:prepend', $event)"
-    @click:prependInner="emit('click:prependInner', $event)"
-    data-testid="root"
-  >
-    <!-- You can include slots if needed -->
-  </v-textarea>
-</template>
-<script setup>
-import './TextArea.css';
-import { computed, inject } from 'vue';
-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 TextArea component
-const props = defineProps({
-  /**
-   * The value bound to the textarea, supporting both String and Number types.
-   * Default is an empty string.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-
-  /**
-   * Indicates if the textarea is in a success state.
-   * When true, the success style will be applied.
-   */
-  success: Boolean,
-
-  /**
-   * Indicates if the textarea is in an error state.
-   * When true, the error style will be applied.
-   */
-  error: Boolean,
-
-  /**
-   * Indicates if the textarea is in a warning state.
-   * When true, the warning style will be applied.
-   */
-  warning: Boolean,
-
-  /**
-   * Disables the textarea if true, making it non-interactive.
-   */
-  disabled: Boolean,
-
-  /**
-   * Whether to show the clear icon.
-   */
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Icon for clearing the textarea content.
-   */
-  clearIcon: {
-    type: String,
-    default: 'mdi-close',
-  },
-
-  /**
-   * Label for the textarea field.
-   */
-  label: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Placeholder text for the textarea.
-   */
-  placeholder: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * Icon displayed before the textarea.
-   * Default is null, meaning no icon is displayed by default.
-   */
-  prependIcon: {
-    type: String,
-    default: null,
-  },
-
-  /**
-   * Inner icon displayed before the textarea, inside the input field.
-   * Default is null.
-   */
-  prependInnerIcon: {
-    type: String,
-    default: null,
-  },
-
-  /**
-   * Icon displayed after the textarea.
-   * Default is null.
-   */
-  appendIcon: {
-    type: String,
-    default: null,
-  },
-
-  /**
-   * Inner icon displayed after the textarea, inside the input field.
-   * Default is null.
-   */
-  appendInnerIcon: {
-    type: String,
-    default: null,
-  },
-
-  /**
-   * Controls the size and spacing of the textarea.
-   */
-  density: {
-    type: String,
-    default: 'compact',
-  },
-
-  /**
-   * Hides the details or additional text when true.
-   */
-  hideDetails: {
-    type: Boolean,
-    default: true,
-  },
-
-  /**
-   * Number of rows to display.
-   */
-  rows: {
-    type: [String, Number],
-    default: 3,
-  },
-
-  /**
-   * Whether the textarea should auto-grow.
-   */
-  autoGrow: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-// Define emits for event handling
-const emit = defineEmits([
-  'update:modelValue', // Emitted when the model value is updated
-  'click:append', // Emitted when the append icon is clicked
-  'click:appendInner', // Emitted when the append inner icon is clicked
-  'click:clear', // Emitted when the clear button is clicked
-  'click:control', // Emitted when the main textarea control is clicked
-  'click:prepend', // Emitted when the prepend icon is clicked
-  'click:prependInner', // Emitted when the prepend inner icon is clicked
-]);
-
-// Computed property to create two-way binding for v-model
-const internalValue = computed({
-  get() {
-    return props.modelValue; // Getter returns the current modelValue prop
-  },
-  set(val) {
-    emit('update:modelValue', val); // Setter emits the updated value to parent component
-  },
-});
-</script>
+<template>
+  <v-textarea
+    :class="{
+      'text-area': true,
+      'is-success': success,
+      'is-error': error,
+      'is-warning': warning,
+    }"
+    :style="{ color: colors['primary-color'] }"
+    v-model="internalValue"
+    :clearable="clearable"
+    :clear-icon="clearIcon"
+    :label="label"
+    :placeholder="placeholder"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :append-icon="appendIcon"
+    :append-inner-icon="appendInnerIcon"
+    variant="outlined"
+    rounded="lg"
+    :disabled="disabled"
+    :density="density"
+    :hide-details="hideDetails"
+    :rows="rows"
+    :auto-grow="autoGrow"
+    :error="error"
+    @click:append="emit('click:append', $event)"
+    @click:appendInner="emit('click:appendInner', $event)"
+    @click:clear="emit('click:clear', $event)"
+    @click:control="emit('click:control', $event)"
+    @click:prepend="emit('click:prepend', $event)"
+    @click:prependInner="emit('click:prependInner', $event)"
+    data-testid="root"
+  >
+    <!-- You can include slots if needed -->
+  </v-textarea>
+</template>
+<script setup>
+import './TextArea.css';
+import { computed, inject } from 'vue';
+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 TextArea component
+const props = defineProps({
+  /**
+   * The value bound to the textarea, supporting both String and Number types.
+   * Default is an empty string.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+
+  /**
+   * Indicates if the textarea is in a success state.
+   * When true, the success style will be applied.
+   */
+  success: Boolean,
+
+  /**
+   * Indicates if the textarea is in an error state.
+   * When true, the error style will be applied.
+   */
+  error: Boolean,
+
+  /**
+   * Indicates if the textarea is in a warning state.
+   * When true, the warning style will be applied.
+   */
+  warning: Boolean,
+
+  /**
+   * Disables the textarea if true, making it non-interactive.
+   */
+  disabled: Boolean,
+
+  /**
+   * Whether to show the clear icon.
+   */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Icon for clearing the textarea content.
+   */
+  clearIcon: {
+    type: String,
+    default: 'mdi-close',
+  },
+
+  /**
+   * Label for the textarea field.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Placeholder text for the textarea.
+   */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * Icon displayed before the textarea.
+   * Default is null, meaning no icon is displayed by default.
+   */
+  prependIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Inner icon displayed before the textarea, inside the input field.
+   * Default is null.
+   */
+  prependInnerIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Icon displayed after the textarea.
+   * Default is null.
+   */
+  appendIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Inner icon displayed after the textarea, inside the input field.
+   * Default is null.
+   */
+  appendInnerIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Controls the size and spacing of the textarea.
+   */
+  density: {
+    type: String,
+    default: 'compact',
+  },
+
+  /**
+   * Hides the details or additional text when true.
+   */
+  hideDetails: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Number of rows to display.
+   */
+  rows: {
+    type: [String, Number],
+    default: 3,
+  },
+
+  /**
+   * Whether the textarea should auto-grow.
+   */
+  autoGrow: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// Define emits for event handling
+const emit = defineEmits([
+  'update:modelValue', // Emitted when the model value is updated
+  'click:append', // Emitted when the append icon is clicked
+  'click:appendInner', // Emitted when the append inner icon is clicked
+  'click:clear', // Emitted when the clear button is clicked
+  'click:control', // Emitted when the main textarea control is clicked
+  'click:prepend', // Emitted when the prepend icon is clicked
+  'click:prependInner', // Emitted when the prepend inner icon is clicked
+]);
+
+// Computed property to create two-way binding for v-model
+const internalValue = computed({
+  get() {
+    return props.modelValue; // Getter returns the current modelValue prop
+  },
+  set(val) {
+    emit('update:modelValue', val); // Setter emits the updated value to parent component
+  },
+});
+</script>

package/src/components/TickBox/TickBox.css

@@ -1,116 +1,116 @@
-/* Wrapper */
-.tick-box-wrapper {
-  display: contents;
-}
-
-/* Common styles for the checkbox label */
-.tick-box .v-label {
-  opacity: 1 !important;
-}
-
-/* Label styles */
-.tick-box-label.label-default {
-  color: var(--tickbox-default-text);
-}
-
-.tick-box-label.label-error {
-  color: var(--tickbox-error-text);
-}
-
-.tick-box-label.label-success {
-  color: var(--tickbox-success-text);
-}
-
-.tick-box-label.label-disabled {
-  color: var(--tickbox-disabled-text);
-}
-
-/* Default state */
-.tick-box.default-state .v-icon {
-  color: var(--tickbox-default-checkmark) !important;
-}
-
-.tick-box.default-state svg path {
-  stroke: var(--tickbox-default-checkmark);
-  fill: var(--tickbox-default-bg);
-  stroke-width: 3px;
-}
-
-.tick-box.default-state svg rect {
-  stroke: var(--tickbox-default-border);
-  fill: var(--tickbox-default-bg);
-  stroke-width: 1px;
-}
-
-.tick-box.default-state:hover svg rect {
-  stroke: var(--tickbox-hovered-border);
-  fill: var(--tickbox-hovered-bg);
-}
-
-.tick-box.default-state:hover svg path {
-  stroke: var(--tickbox-hovered-checkmark);
-}
-
-/* Success state */
-.tick-box.success-state .v-icon {
-  color: var(--tickbox-success-checkmark) !important;
-}
-
-.tick-box.success-state svg rect {
-  stroke: var(--tickbox-success-border);
-  fill: var(--tickbox-success-bg);
-  stroke-width: 1px;
-}
-
-.tick-box.success-state svg path {
-  stroke: var(--tickbox-success-checkmark);
-  fill: var(--tickbox-success-bg);
-  stroke-width: 3px;
-}
-
-/* Error state */
-.tick-box.error-state .v-icon {
-  color: var(--tickbox-error-checkmark) !important;
-}
-
-.tick-box.error-state svg path {
-  stroke: var(--tickbox-error-checkmark);
-  fill: var(--tickbox-error-bg);
-  stroke-width: 3px;
-}
-
-.tick-box.error-state svg rect {
-  stroke: var(--tickbox-error-border);
-  fill: var(--tickbox-error-bg);
-  stroke-width: 1px;
-}
-
-/* Disabled state */
-.tick-box.disabled-state .v-icon {
-  color: var(--tickbox-disabled-checkmark) !important;
-}
-
-.tick-box.disabled-state svg path {
-  stroke: var(--tickbox-disabled-checkmark);
-  fill: var(--tickbox-disabled-bg);
-  stroke-width: 3px;
-}
-
-.tick-box.disabled-state svg rect {
-  stroke: var(--tickbox-disabled-border);
-  fill: var(--tickbox-disabled-bg);
-  stroke-width: 1px;
-}
-
-.tick-box.disabled-state {
-  cursor: not-allowed;
-}
-
-.tick-box.disabled-state:hover svg rect {
-  stroke: var(--tickbox-disabled-border);
-  fill: var(--tickbox-disabled-bg);
-}
-
-.tick-box.disabled-state:hover svg path {
-  stroke: var(--tickbox-disabled-checkmark);
-}
+/* Wrapper */
+.tick-box-wrapper {
+  display: contents;
+}
+
+/* Common styles for the checkbox label */
+.tick-box .v-label {
+  opacity: 1 !important;
+}
+
+/* Label styles */
+.tick-box-label.label-default {
+  color: var(--tickbox-default-text);
+}
+
+.tick-box-label.label-error {
+  color: var(--tickbox-error-text);
+}
+
+.tick-box-label.label-success {
+  color: var(--tickbox-success-text);
+}
+
+.tick-box-label.label-disabled {
+  color: var(--tickbox-disabled-text);
+}
+
+/* Default state */
+.tick-box.default-state .v-icon {
+  color: var(--tickbox-default-checkmark) !important;
+}
+
+.tick-box.default-state svg path {
+  stroke: var(--tickbox-default-checkmark);
+  fill: var(--tickbox-default-bg);
+  stroke-width: 3px;
+}
+
+.tick-box.default-state svg rect {
+  stroke: var(--tickbox-default-border);
+  fill: var(--tickbox-default-bg);
+  stroke-width: 1px;
+}
+
+.tick-box.default-state:hover svg rect {
+  stroke: var(--tickbox-hovered-border);
+  fill: var(--tickbox-hovered-bg);
+}
+
+.tick-box.default-state:hover svg path {
+  stroke: var(--tickbox-hovered-checkmark);
+}
+
+/* Success state */
+.tick-box.success-state .v-icon {
+  color: var(--tickbox-success-checkmark) !important;
+}
+
+.tick-box.success-state svg rect {
+  stroke: var(--tickbox-success-border);
+  fill: var(--tickbox-success-bg);
+  stroke-width: 1px;
+}
+
+.tick-box.success-state svg path {
+  stroke: var(--tickbox-success-checkmark);
+  fill: var(--tickbox-success-bg);
+  stroke-width: 3px;
+}
+
+/* Error state */
+.tick-box.error-state .v-icon {
+  color: var(--tickbox-error-checkmark) !important;
+}
+
+.tick-box.error-state svg path {
+  stroke: var(--tickbox-error-checkmark);
+  fill: var(--tickbox-error-bg);
+  stroke-width: 3px;
+}
+
+.tick-box.error-state svg rect {
+  stroke: var(--tickbox-error-border);
+  fill: var(--tickbox-error-bg);
+  stroke-width: 1px;
+}
+
+/* Disabled state */
+.tick-box.disabled-state .v-icon {
+  color: var(--tickbox-disabled-checkmark) !important;
+}
+
+.tick-box.disabled-state svg path {
+  stroke: var(--tickbox-disabled-checkmark);
+  fill: var(--tickbox-disabled-bg);
+  stroke-width: 3px;
+}
+
+.tick-box.disabled-state svg rect {
+  stroke: var(--tickbox-disabled-border);
+  fill: var(--tickbox-disabled-bg);
+  stroke-width: 1px;
+}
+
+.tick-box.disabled-state {
+  cursor: not-allowed;
+}
+
+.tick-box.disabled-state:hover svg rect {
+  stroke: var(--tickbox-disabled-border);
+  fill: var(--tickbox-disabled-bg);
+}
+
+.tick-box.disabled-state:hover svg path {
+  stroke: var(--tickbox-disabled-checkmark);
+}