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

package/src/components/StagingBanner/StagingBanner.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="isVisible" class="staging-banner">
+    {{ displayText }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import './StagingBanner.css';
+
+const props = defineProps({
+  /**
+   * Custom text to display in the banner.
+   * Default: "⚠️ STAGING - Testumgebung (keine echten Daten)"
+   */
+  text: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Force the banner to show regardless of hostname.
+   * Useful for testing or manual control.
+   */
+  show: {
+    type: Boolean,
+    default: undefined
+  },
+  /**
+   * Whether to auto-detect staging based on hostname.
+   * Looks for "staging." or "staging-" in the hostname.
+   * Default: true
+   */
+  autoDetect: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Whether to add padding to the body to account for the banner.
+   * Default: true
+   */
+  addBodyPadding: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Custom padding value for the body (in pixels).
+   * Default: 40
+   */
+  bodyPaddingPx: {
+    type: Number,
+    default: 40
+  }
+});
+
+const isStaging = ref(false);
+
+const displayText = computed(() => {
+  return props.text || '⚠️ STAGING - Testumgebung (keine echten Daten)';
+});
+
+const isVisible = computed(() => {
+  // If show prop is explicitly set, use that
+  if (props.show !== undefined) {
+    return props.show;
+  }
+  // Otherwise use auto-detection result
+  return props.autoDetect && isStaging.value;
+});
+
+onMounted(() => {
+  // Check if running in browser
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    isStaging.value = hostname.includes('staging.') || hostname.includes('staging-');
+
+    // Add body padding if visible and option is enabled
+    if (isVisible.value && props.addBodyPadding) {
+      document.body.style.paddingTop = `${props.bodyPaddingPx}px`;
+    }
+  }
+});
+</script>

package/src/components/TextArea/TextArea.css

@@ -1,3 +1,3 @@
-.v-icon {
-  opacity: 1 !important;
-}
+.v-icon {
+  opacity: 1 !important;
+}

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;
+}