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

package/src/components/Accordion/AccordionItem.vue

@@ -1,272 +1,272 @@
-<template>
-  <v-divider
-    v-if="computedShowTopDivider"
-    v-bind="computedDividerProps"
-  ></v-divider>
-
-  <v-expansion-panel
-    class="wl-accordion-item"
-    :class="itemClasses"
-    :style="panelStyle"
-    :value="value"
-    :bg-color="computedBgColor"
-    data-testid="root"
-  >
-    <v-expansion-panel-title
-      class="accordion-item__title"
-      collapse-icon="heroicons:chevron-up"
-      expand-icon="heroicons:chevron-down"
-      :static="true"
-    >
-      <slot name="title">
-        <h5 :style="titleStyle">{{ title }}</h5>
-      </slot>
-    </v-expansion-panel-title>
-    <v-expansion-panel-text
-      class="accordion-item__content"
-    >
-      <template v-if="$slots.content">
-        <slot name="content"></slot>
-      </template>
-      <template v-else-if="$slots.text">
-        <slot name="text">
-          <p :style="textStyle">{{ text }}</p>
-        </slot>
-      </template>
-      <template v-else>
-        <p :style="textStyle">{{ text }}</p>
-      </template>
-    </v-expansion-panel-text>
-  </v-expansion-panel>
-
-  <v-divider
-    v-if="computedShowBottomDivider"
-    v-bind="computedDividerProps"
-  ></v-divider>
-</template>
-
-<script setup>
-import { defineProps, computed } from "vue";
-import "./Accordion.css";
-import "./presets/index.css";
-import { siteColors } from "../../utils/index";
-
-const props = defineProps({
-  /**
-   * The variant of the panel ('default' or 'end').
-   * - 'default': Top divider only
-   * - 'end': Top and bottom dividers (for last item in list)
-   */
-  variant: {
-    type: String,
-    default: "default",
-    validator: (value) => ["default", "end"].includes(value),
-  },
-  /**
-   * The title displayed in the panel header.
-   */
-  title: { type: String, default: "Default Title" },
-  /**
-   * The text content inside the panel.
-   */
-  text: { type: String, default: "Default text" },
-  /**
-   * Unique value identifying the panel.
-   */
-  value: { type: [String, Number], required: true },
-  /**
-   * Background color of the panel.
-   */
-  bgColor: { type: String, default: "" },
-  /**
-   * Color for the title text.
-   */
-  titleColor: { type: String, default: "" },
-  /**
-   * Color for the content text.
-   */
-  contentColor: { type: String, default: "" },
-  /**
-   * Color for the expand/collapse icon.
-   */
-  iconColor: { type: String, default: "" },
-  /**
-   * Visual preset style.
-   * - 'default': Flat style with dividers, transparent background
-   * - 'filled': Background color, rounded corners, no dividers
-   * - 'elevated': White background, shadow, rounded corners, no dividers
-   * - 'plain': Minimal style, no background, no shadow, no dividers
-   */
-  preset: {
-    type: String,
-    default: "default",
-    validator: (value) => ["default", "filled", "elevated", "plain"].includes(value),
-  },
-  /**
-   * Custom box-shadow override.
-   * - String: custom shadow value (e.g., '0 4px 12px rgba(0,0,0,0.2)')
-   * - 'none' or false: disable shadow completely
-   * - undefined: use preset default
-   */
-  shadow: {
-    type: [String, Boolean],
-    default: undefined,
-  },
-  /**
-   * Show or hide dividers.
-   * - true: always show dividers
-   * - false: never show dividers
-   * - undefined: use preset default (only default preset shows dividers)
-   * Note: showTopDivider and showBottomDivider take precedence if specified.
-   */
-  showDivider: {
-    type: Boolean,
-    default: undefined,
-  },
-  /**
-   * Show or hide the top divider independently.
-   * - true: always show top divider
-   * - false: never show top divider
-   * - undefined: falls back to showDivider behavior
-   */
-  showTopDivider: {
-    type: Boolean,
-    default: undefined,
-  },
-  /**
-   * Show or hide the bottom divider independently.
-   * - true: always show bottom divider
-   * - false: never show bottom divider
-   * - undefined: falls back to showDivider behavior (respects variant)
-   */
-  showBottomDivider: {
-    type: Boolean,
-    default: undefined,
-  },
-  /**
-   * Props to pass to the v-divider component.
-   * Supports all Vuetify v-divider props: color, thickness, opacity, inset, vertical, length, etc.
-   * @see https://vuetifyjs.com/en/api/v-divider/
-   */
-  dividerProps: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-// Computed preset
-const effectivePreset = computed(() => props.preset);
-
-// Base divider visibility - prop overrides preset default
-const baseShowDivider = computed(() => {
-  if (props.showDivider !== undefined) {
-    return props.showDivider;
-  }
-  // If dividerProps is provided, assume user wants dividers
-  if (Object.keys(props.dividerProps).length > 0) {
-    return true;
-  }
-  return effectivePreset.value === "default";
-});
-
-// Show top divider - specific prop takes precedence
-const computedShowTopDivider = computed(() => {
-  if (props.showTopDivider !== undefined) {
-    return props.showTopDivider;
-  }
-  return baseShowDivider.value;
-});
-
-// Show bottom divider - specific prop takes precedence, then respects variant
-const computedShowBottomDivider = computed(() => {
-  if (props.showBottomDivider !== undefined) {
-    return props.showBottomDivider;
-  }
-  // Fall back to original behavior: only show if variant is 'end' and base divider is enabled
-  return props.variant === "end" && baseShowDivider.value;
-});
-
-// Computed divider props with defaults
-const computedDividerProps = computed(() => ({
-  color: siteColors["accordion_divider_color"],
-  ...props.dividerProps,
-}));
-
-// CSS classes based on preset
-const itemClasses = computed(() => {
-  return {
-    "wl-accordion-item--default": effectivePreset.value === "default",
-    "wl-accordion-item--filled": effectivePreset.value === "filled",
-    "wl-accordion-item--elevated": effectivePreset.value === "elevated",
-    "wl-accordion-item--plain": effectivePreset.value === "plain",
-  };
-});
-
-// Background color based on preset
-const computedBgColor = computed(() => {
-  // User-provided bgColor takes precedence
-  if (props.bgColor) {
-    return props.bgColor;
-  }
-  // Default colors per preset
-  switch (effectivePreset.value) {
-    case "elevated":
-      return "#ffffff";
-    case "filled":
-      return "var(--Dental-Light-Blue--2, #f0f4f8)";
-    case "plain":
-      return "transparent";
-    default:
-      return "transparent";
-  }
-});
-
-// Computed shadow value
-const computedShadow = computed(() => {
-  // Explicit shadow prop overrides preset
-  if (props.shadow !== undefined) {
-    if (props.shadow === false || props.shadow === "none") {
-      return "none";
-    }
-    return props.shadow;
-  }
-  // Default shadow per preset
-  if (effectivePreset.value === "elevated") {
-    return "0 2px 8px rgba(0, 0, 0, 0.1)";
-  }
-  return "none";
-});
-
-// Panel inline styles (for shadow and icon color)
-const panelStyle = computed(() => {
-  const style = {};
-  // Always set the CSS variable for shadow
-  style["--accordion-item-shadow"] = computedShadow.value;
-  // Set icon color if provided
-  if (props.iconColor) {
-    style["--accordion-icon-color"] = props.iconColor;
-  }
-  return style;
-});
-
-const titleStyle = computed(() => {
-  const style = {};
-  if (props.titleColor) {
-    style["color"] = props.titleColor;
-  } else {
-    style["color"] = siteColors["accordion_title_color"];
-  }
-  return style;
-});
-
-const textStyle = computed(() => {
-  const style = {};
-  if (props.contentColor) {
-    style["color"] = props.contentColor;
-  } else {
-    style["color"] = siteColors["accordion_content_color"];
-  }
-  return style;
-});
-</script>
-
+<template>
+  <v-divider
+    v-if="computedShowTopDivider"
+    v-bind="computedDividerProps"
+  ></v-divider>
+
+  <v-expansion-panel
+    class="wl-accordion-item"
+    :class="itemClasses"
+    :style="panelStyle"
+    :value="value"
+    :bg-color="computedBgColor"
+    data-testid="root"
+  >
+    <v-expansion-panel-title
+      class="accordion-item__title"
+      collapse-icon="heroicons:chevron-up"
+      expand-icon="heroicons:chevron-down"
+      :static="true"
+    >
+      <slot name="title">
+        <h5 :style="titleStyle">{{ title }}</h5>
+      </slot>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text
+      class="accordion-item__content"
+    >
+      <template v-if="$slots.content">
+        <slot name="content"></slot>
+      </template>
+      <template v-else-if="$slots.text">
+        <slot name="text">
+          <p :style="textStyle">{{ text }}</p>
+        </slot>
+      </template>
+      <template v-else>
+        <p :style="textStyle">{{ text }}</p>
+      </template>
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+
+  <v-divider
+    v-if="computedShowBottomDivider"
+    v-bind="computedDividerProps"
+  ></v-divider>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+import "./Accordion.css";
+import "./presets/index.css";
+import { siteColors } from "../../utils/index";
+
+const props = defineProps({
+  /**
+   * The variant of the panel ('default' or 'end').
+   * - 'default': Top divider only
+   * - 'end': Top and bottom dividers (for last item in list)
+   */
+  variant: {
+    type: String,
+    default: "default",
+    validator: (value) => ["default", "end"].includes(value),
+  },
+  /**
+   * The title displayed in the panel header.
+   */
+  title: { type: String, default: "Default Title" },
+  /**
+   * The text content inside the panel.
+   */
+  text: { type: String, default: "Default text" },
+  /**
+   * Unique value identifying the panel.
+   */
+  value: { type: [String, Number], required: true },
+  /**
+   * Background color of the panel.
+   */
+  bgColor: { type: String, default: "" },
+  /**
+   * Color for the title text.
+   */
+  titleColor: { type: String, default: "" },
+  /**
+   * Color for the content text.
+   */
+  contentColor: { type: String, default: "" },
+  /**
+   * Color for the expand/collapse icon.
+   */
+  iconColor: { type: String, default: "" },
+  /**
+   * Visual preset style.
+   * - 'default': Flat style with dividers, transparent background
+   * - 'filled': Background color, rounded corners, no dividers
+   * - 'elevated': White background, shadow, rounded corners, no dividers
+   * - 'plain': Minimal style, no background, no shadow, no dividers
+   */
+  preset: {
+    type: String,
+    default: "default",
+    validator: (value) => ["default", "filled", "elevated", "plain"].includes(value),
+  },
+  /**
+   * Custom box-shadow override.
+   * - String: custom shadow value (e.g., '0 4px 12px rgba(0,0,0,0.2)')
+   * - 'none' or false: disable shadow completely
+   * - undefined: use preset default
+   */
+  shadow: {
+    type: [String, Boolean],
+    default: undefined,
+  },
+  /**
+   * Show or hide dividers.
+   * - true: always show dividers
+   * - false: never show dividers
+   * - undefined: use preset default (only default preset shows dividers)
+   * Note: showTopDivider and showBottomDivider take precedence if specified.
+   */
+  showDivider: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * Show or hide the top divider independently.
+   * - true: always show top divider
+   * - false: never show top divider
+   * - undefined: falls back to showDivider behavior
+   */
+  showTopDivider: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * Show or hide the bottom divider independently.
+   * - true: always show bottom divider
+   * - false: never show bottom divider
+   * - undefined: falls back to showDivider behavior (respects variant)
+   */
+  showBottomDivider: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * Props to pass to the v-divider component.
+   * Supports all Vuetify v-divider props: color, thickness, opacity, inset, vertical, length, etc.
+   * @see https://vuetifyjs.com/en/api/v-divider/
+   */
+  dividerProps: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// Computed preset
+const effectivePreset = computed(() => props.preset);
+
+// Base divider visibility - prop overrides preset default
+const baseShowDivider = computed(() => {
+  if (props.showDivider !== undefined) {
+    return props.showDivider;
+  }
+  // If dividerProps is provided, assume user wants dividers
+  if (Object.keys(props.dividerProps).length > 0) {
+    return true;
+  }
+  return effectivePreset.value === "default";
+});
+
+// Show top divider - specific prop takes precedence
+const computedShowTopDivider = computed(() => {
+  if (props.showTopDivider !== undefined) {
+    return props.showTopDivider;
+  }
+  return baseShowDivider.value;
+});
+
+// Show bottom divider - specific prop takes precedence, then respects variant
+const computedShowBottomDivider = computed(() => {
+  if (props.showBottomDivider !== undefined) {
+    return props.showBottomDivider;
+  }
+  // Fall back to original behavior: only show if variant is 'end' and base divider is enabled
+  return props.variant === "end" && baseShowDivider.value;
+});
+
+// Computed divider props with defaults
+const computedDividerProps = computed(() => ({
+  color: siteColors["accordion_divider_color"],
+  ...props.dividerProps,
+}));
+
+// CSS classes based on preset
+const itemClasses = computed(() => {
+  return {
+    "wl-accordion-item--default": effectivePreset.value === "default",
+    "wl-accordion-item--filled": effectivePreset.value === "filled",
+    "wl-accordion-item--elevated": effectivePreset.value === "elevated",
+    "wl-accordion-item--plain": effectivePreset.value === "plain",
+  };
+});
+
+// Background color based on preset
+const computedBgColor = computed(() => {
+  // User-provided bgColor takes precedence
+  if (props.bgColor) {
+    return props.bgColor;
+  }
+  // Default colors per preset
+  switch (effectivePreset.value) {
+    case "elevated":
+      return "#ffffff";
+    case "filled":
+      return "var(--Dental-Light-Blue--2, #f0f4f8)";
+    case "plain":
+      return "transparent";
+    default:
+      return "transparent";
+  }
+});
+
+// Computed shadow value
+const computedShadow = computed(() => {
+  // Explicit shadow prop overrides preset
+  if (props.shadow !== undefined) {
+    if (props.shadow === false || props.shadow === "none") {
+      return "none";
+    }
+    return props.shadow;
+  }
+  // Default shadow per preset
+  if (effectivePreset.value === "elevated") {
+    return "0 2px 8px rgba(0, 0, 0, 0.1)";
+  }
+  return "none";
+});
+
+// Panel inline styles (for shadow and icon color)
+const panelStyle = computed(() => {
+  const style = {};
+  // Always set the CSS variable for shadow
+  style["--accordion-item-shadow"] = computedShadow.value;
+  // Set icon color if provided
+  if (props.iconColor) {
+    style["--accordion-icon-color"] = props.iconColor;
+  }
+  return style;
+});
+
+const titleStyle = computed(() => {
+  const style = {};
+  if (props.titleColor) {
+    style["color"] = props.titleColor;
+  } else {
+    style["color"] = siteColors["accordion_title_color"];
+  }
+  return style;
+});
+
+const textStyle = computed(() => {
+  const style = {};
+  if (props.contentColor) {
+    style["color"] = props.contentColor;
+  } else {
+    style["color"] = siteColors["accordion_content_color"];
+  }
+  return style;
+});
+</script>
+

package/src/components/Accordion/presets/default.css

@@ -1,4 +1,4 @@
-/* Default preset - flat with dividers */
-.wl-accordion-item--default .v-expansion-panel-title {
-  padding: 24px 0px !important;
-}
+/* Default preset - flat with dividers */
+.wl-accordion-item--default .v-expansion-panel-title {
+  padding: 24px 0px !important;
+}

package/src/components/Accordion/presets/elevated.css

@@ -1,26 +1,26 @@
-/* Elevated preset - white background, shadow, rounded */
-.wl-accordion-item--elevated {
-  border-radius: 12px !important;
-  overflow: hidden;
-}
-
-.wl-accordion-item--elevated.v-expansion-panel {
-  border-radius: 12px !important;
-}
-
-.wl-accordion-item--elevated .v-expansion-panel__shadow {
-  border-radius: 12px !important;
-}
-
-.wl-accordion-item--elevated:last-child {
-  margin-bottom: 0;
-}
-
-.wl-accordion-item--elevated .v-expansion-panel-title {
-  padding: 16px 20px !important;
-  border-radius: 12px !important;
-}
-
-.wl-accordion-item--elevated .v-expansion-panel-text {
-  border-radius: 12px !important;
+/* Elevated preset - white background, shadow, rounded */
+.wl-accordion-item--elevated {
+  border-radius: 12px !important;
+  overflow: hidden;
+}
+
+.wl-accordion-item--elevated.v-expansion-panel {
+  border-radius: 12px !important;
+}
+
+.wl-accordion-item--elevated .v-expansion-panel__shadow {
+  border-radius: 12px !important;
+}
+
+.wl-accordion-item--elevated:last-child {
+  margin-bottom: 0;
+}
+
+.wl-accordion-item--elevated .v-expansion-panel-title {
+  padding: 16px 20px !important;
+  border-radius: 12px !important;
+}
+
+.wl-accordion-item--elevated .v-expansion-panel-text {
+  border-radius: 12px !important;
 }

package/src/components/Accordion/presets/filled.css

@@ -1,26 +1,26 @@
-/* Filled preset - background color, rounded, no dividers */
-.wl-accordion-item--filled {
-  border-radius: 12px !important;
-  overflow: hidden;
-}
-
-.wl-accordion-item--filled.v-expansion-panel {
-  border-radius: 12px !important;
-}
-
-.wl-accordion-item--filled .v-expansion-panel__shadow {
-  border-radius: 12px !important;
-}
-
-.wl-accordion-item--filled:last-child {
-  margin-bottom: 0;
-}
-
-.wl-accordion-item--filled .v-expansion-panel-title {
-  padding: 16px 20px !important;
-  border-radius: 12px !important;
-}
-
-.wl-accordion-item--filled .v-expansion-panel-text {
-  border-radius: 12px !important;
-}
+/* Filled preset - background color, rounded, no dividers */
+.wl-accordion-item--filled {
+  border-radius: 12px !important;
+  overflow: hidden;
+}
+
+.wl-accordion-item--filled.v-expansion-panel {
+  border-radius: 12px !important;
+}
+
+.wl-accordion-item--filled .v-expansion-panel__shadow {
+  border-radius: 12px !important;
+}
+
+.wl-accordion-item--filled:last-child {
+  margin-bottom: 0;
+}
+
+.wl-accordion-item--filled .v-expansion-panel-title {
+  padding: 16px 20px !important;
+  border-radius: 12px !important;
+}
+
+.wl-accordion-item--filled .v-expansion-panel-text {
+  border-radius: 12px !important;
+}

package/src/components/Accordion/presets/index.css

@@ -1,5 +1,5 @@
-/* Accordion Presets */
-@import './default.css';
-@import './filled.css';
-@import './elevated.css';
-@import './plain.css';
+/* Accordion Presets */
+@import './default.css';
+@import './filled.css';
+@import './elevated.css';
+@import './plain.css';