@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

package/src/components/TextArea/TextArea.vue

@@ -1,126 +1,126 @@
-<template>
-  <v-textarea
-    class="text-area"
-    v-model="internalValue"
-    clearable
-    :clear-icon="clearIcon"
-    :label="label"
-    :prepend-icon="prependIcon"
-    :prepend-inner-icon="prependInnerIcon"
-    :append-icon="appendIcon"
-    :append-inner-icon="appendInnerIcon"
-    base-color="var(--Soft-Concrete-1)"
-    bg-color="white"
-    variant="outlined"
-    color="var(--Dental-Light-Blue-1)"
-    rounded="lg"
-    @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 } from 'vue';
-
-// 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: '',
-  },
-
-  /**
-   * Icon for clearing the textarea content.
-   * Default is 'text-area'.
-   */
-  clearIcon: {
-    type: String,
-    default: 'text-area',
-  },
-
-  /**
-   * Label for the textarea field.
-   * Default is 'Label'.
-   */
-  label: {
-    type: String,
-    default: 'Label',
-  },
-
-  /**
-   * 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,
-  },
-
-  // Add more props as needed to customize the textarea
-});
-
-// 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>
-
-<style>
-.text-area .v-icon {
-  color: var(--Dental-Blue-0);
-}
-</style>
+<template>
+  <v-textarea
+    class="text-area"
+    v-model="internalValue"
+    clearable
+    :clear-icon="clearIcon"
+    :label="label"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :append-icon="appendIcon"
+    :append-inner-icon="appendInnerIcon"
+    base-color="var(--Soft-Concrete-1)"
+    bg-color="white"
+    variant="outlined"
+    color="var(--Dental-Light-Blue-1)"
+    rounded="lg"
+    @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 } from 'vue';
+
+// 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: '',
+  },
+
+  /**
+   * Icon for clearing the textarea content.
+   * Default is 'text-area'.
+   */
+  clearIcon: {
+    type: String,
+    default: 'text-area',
+  },
+
+  /**
+   * Label for the textarea field.
+   * Default is 'Label'.
+   */
+  label: {
+    type: String,
+    default: 'Label',
+  },
+
+  /**
+   * 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,
+  },
+
+  // Add more props as needed to customize the textarea
+});
+
+// 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>
+
+<style>
+.text-area .v-icon {
+  color: var(--Dental-Blue-0);
+}
+</style>

package/src/components/TickBox/TickBox.css

@@ -1,49 +1,49 @@
-/* Default state */
-.tick-box.default-state .v-icon {
-  color: var(--Dental-Blue-0) !important;
-}
-
-/* Success state */
-.tick-box.success-state .v-icon {
-  color: var(--Success-Green-0) !important;
-}
-
-/* Error state */
-.tick-box.error-state .svg {
-  color: var(--Error-Red-0) !important;
-}
-
-/* Common styles for the checkbox label */
-.tick-box .v-label {
-  opacity: 1 !important;
-}
-
-.tick-box svg path {
-  stroke: var(--Dental-Blue-0);
-  fill: white;
-  stroke-width: 3px;
-}
-
-.tick-box.success-state svg rect {
-  stroke: var(--Success-Green-0);
-  fill: white;
-  stroke-width: 1px;
-}
-
-.tick-box.success-state svg path {
-  stroke: var(--Success-Green-0);
-  fill: white;
-  stroke-width: 3px;
-}
-
-.tick-box.error-state svg path {
-  stroke: var(--Error-Red-0);
-  fill: white;
-  stroke-width: 3px;
-}
-
-.tick-box.error-state svg rect {
-  stroke: var(--Error-Red-0);
-  fill: white;
-  stroke-width: 1px;
-}
+/* Default state */
+.tick-box.default-state .v-icon {
+  color: var(--Dental-Blue-0) !important;
+}
+
+/* Success state */
+.tick-box.success-state .v-icon {
+  color: var(--Success-Green-0) !important;
+}
+
+/* Error state */
+.tick-box.error-state .svg {
+  color: var(--Error-Red-0) !important;
+}
+
+/* Common styles for the checkbox label */
+.tick-box .v-label {
+  opacity: 1 !important;
+}
+
+.tick-box svg path {
+  stroke: var(--Dental-Blue-0);
+  fill: white;
+  stroke-width: 3px;
+}
+
+.tick-box.success-state svg rect {
+  stroke: var(--Success-Green-0);
+  fill: white;
+  stroke-width: 1px;
+}
+
+.tick-box.success-state svg path {
+  stroke: var(--Success-Green-0);
+  fill: white;
+  stroke-width: 3px;
+}
+
+.tick-box.error-state svg path {
+  stroke: var(--Error-Red-0);
+  fill: white;
+  stroke-width: 3px;
+}
+
+.tick-box.error-state svg rect {
+  stroke: var(--Error-Red-0);
+  fill: white;
+  stroke-width: 1px;
+}

package/src/components/TickBox/TickBox.vue

@@ -1,126 +1,126 @@
-<template>
-  <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 :style="labelStyles">{{ label }}</span>
-    </template>
-  </v-checkbox>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import './TickBox.css';
-
-// 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 or success state
-const checkboxClass = computed(() => {
-  if (props.error) return 'error-state'; // Return error class if in error state
-  if (props.success) return 'success-state'; // Return success class if in success state
-  return 'default-state'; // Default class when no error or success
-});
-
-// Computed property for dynamic label styles based on state
-const labelStyles = computed(() => {
-  if (props.error) return { color: 'var(--Error-Red-0)' }; // Error styling for label
-  if (props.success) return { color: 'var(--Success-Green-1)' }; // Success styling for label
-  return { color: 'var(--Dental-Blue-0)' }; // Default label styling
-});
-
-// Computed property for dynamic color based on error or success state
-const hoverColor = computed(() => {
-  if (props.error) return 'var(--Error-Red-0)';
-  if (props.success) return 'var(--Success-Green-1)';
-  return 'var(--Dental-Blue-0)';
-});
-</script>
+<template>
+  <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 :style="labelStyles">{{ label }}</span>
+    </template>
+  </v-checkbox>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import './TickBox.css';
+
+// 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 or success state
+const checkboxClass = computed(() => {
+  if (props.error) return 'error-state'; // Return error class if in error state
+  if (props.success) return 'success-state'; // Return success class if in success state
+  return 'default-state'; // Default class when no error or success
+});
+
+// Computed property for dynamic label styles based on state
+const labelStyles = computed(() => {
+  if (props.error) return { color: 'var(--Error-Red-0)' }; // Error styling for label
+  if (props.success) return { color: 'var(--Success-Green-1)' }; // Success styling for label
+  return { color: 'var(--Dental-Blue-0)' }; // Default label styling
+});
+
+// Computed property for dynamic color based on error or success state
+const hoverColor = computed(() => {
+  if (props.error) return 'var(--Error-Red-0)';
+  if (props.success) return 'var(--Success-Green-1)';
+  return 'var(--Dental-Blue-0)';
+});
+</script>