@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

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>

package/src/components/index.ts

@@ -1,21 +1,21 @@
-// Components index file
-
-export { default as AccordionItem } from './Accordion/AccordionItem.vue';
-export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
-export { default as Audio } from './Audio/Audio.vue';
-export { default as Button } from './Button/Button.vue';
-export { default as Checkbox } from './CheckBox/Checkbox.vue';
-export { default as DateInput } from './DateInput/DateInput.vue';
-export { default as Dialog } from './Dialog/Dialog.vue';
-export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
-export { default as IconBullet } from './IconBullet/IconBullet.vue';
-export { default as Input } from './Input/Input.vue';
-export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
-export { default as Select } from './Select/Select.vue';
-export { default as TickBox } from './TickBox/TickBox.vue';
-export { default as TextArea } from './TextArea/TextArea.vue';
-export { default as OtpInput } from './OtpInput/OtpInput.vue';
-export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
-export { default as EditField } from './EditField/EditField.vue';
-export { default as Modal } from './Modal/Modal.vue';
-export { default as AppointmentCard } from './Appointment/Card/Card.vue';
+// Components index file
+
+export { default as AccordionItem } from './Accordion/AccordionItem.vue';
+export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
+export { default as Audio } from './Audio/Audio.vue';
+export { default as Button } from './Button/Button.vue';
+export { default as Checkbox } from './CheckBox/Checkbox.vue';
+export { default as DateInput } from './DateInput/DateInput.vue';
+export { default as Dialog } from './Dialog/Dialog.vue';
+export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
+export { default as IconBullet } from './IconBullet/IconBullet.vue';
+export { default as Input } from './Input/Input.vue';
+export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
+export { default as Select } from './Select/Select.vue';
+export { default as TickBox } from './TickBox/TickBox.vue';
+export { default as TextArea } from './TextArea/TextArea.vue';
+export { default as OtpInput } from './OtpInput/OtpInput.vue';
+export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
+export { default as EditField } from './EditField/EditField.vue';
+export { default as Modal } from './Modal/Modal.vue';
+export { default as AppointmentCard } from './Appointment/Card/Card.vue';

package/src/constants/iconEnums.ts

@@ -1,4 +1,4 @@
-export enum IconEnum {
-    CALENDAR = 'calendar',
-    PLAY = 'play',
+export enum IconEnum {
+    CALENDAR = 'calendar',
+    PLAY = 'play',
 }