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

package/src/components/Audio/Waveform.vue

@@ -1,119 +1,119 @@
-<template>
-  <div ref="waveform" class="waveform"></div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import WaveSurfer from 'wavesurfer.js'
-
-const props = defineProps({
-  src: { type: String },
-  blob: { type: Blob }
-})
-
-const emit = defineEmits(['timeupdate', 'finish', 'ready'])
-
-const waveform = ref(null)
-let waveColor = '#93B1CF'
-let progressColor = '#172774'
-let ws = null
-
-onMounted(() => {
-  const styles = getComputedStyle(document.documentElement)
-  waveColor   = styles.getPropertyValue('--Dental-Light-Blue-2').trim()
-  progressColor   = styles.getPropertyValue('--Dental-Blue-0').trim()
-
-  nextTick(() => {
-    try {
-      createWaveform()
-    } catch (error) {
-      console.error('Error initializing WaveSurfer:', error);
-    }
-  })
-})
-
-function createWaveform() {
-  try {
-    // Check if the waveform element is available
-    if (!waveform.value) {
-      throw new Error('Waveform container element not found');
-    }
-
-    const containerWidth = waveform.value.clientWidth;
-    const containerHeight = waveform.value.clientHeight;
-
-    ws = WaveSurfer.create({
-      container: waveform.value,
-      waveColor: waveColor,
-      progressColor: progressColor,
-      barWidth: 2,
-      barGap: 2,
-      barRadius: 4,
-      cursorWidth: 0,
-      height: containerHeight,
-      width: containerWidth,
-      backend: 'WebAudio',
-    })
-
-    ws.on('audioprocess', (currentTime) => {
-      emit('timeupdate', currentTime);
-    })
-    ws.on('finish', () => {
-      emit('finish');
-    })
-    ws.on('ready', (totalDuration) => {
-      emit('ready', totalDuration);
-    })
-
-    ws.on('error', e => console.error(e))
-
-    if (props.blob) {
-      ws.loadBlob(props.blob)
-    } else if (props.src) {
-      ws.load(props.src)
-    } else {
-      throw new Error('No audio source provided')
-    }
-  } catch (error) {
-    console.error('Error initializing WaveSurfer:', error);
-  }
-}
-
-function play() {
-  if (ws) {
-    ws.play()
-  } else {
-    console.warn('WaveSurfer instance not ready')
-  }
-}
-
-function pause() {
-  if (ws) {
-    ws.pause()
-  } else {
-    console.warn('WaveSurfer instance not ready')
-  }
-}
-
-function getCurrentTime() {
-  return ws ? ws.getCurrentTime() : 0
-}
-
-defineExpose({ play, pause, getCurrentTime })
-
-onBeforeUnmount(() => {
-  if (ws) ws.destroy()
-})
-</script>
-
-<style scoped>
-.waveform {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  width: 100%;
-  height: 100%;
-  min-height: 16px;
-  min-width: 0px;
-}
+<template>
+  <div ref="waveform" class="waveform"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import WaveSurfer from 'wavesurfer.js'
+
+const props = defineProps({
+  src: { type: String },
+  blob: { type: Blob }
+})
+
+const emit = defineEmits(['timeupdate', 'finish', 'ready'])
+
+const waveform = ref(null)
+let waveColor = '#93B1CF'
+let progressColor = '#172774'
+let ws = null
+
+onMounted(() => {
+  const styles = getComputedStyle(document.documentElement)
+  waveColor   = styles.getPropertyValue('--Dental-Light-Blue-2').trim()
+  progressColor   = styles.getPropertyValue('--Dental-Blue-0').trim()
+
+  nextTick(() => {
+    try {
+      createWaveform()
+    } catch (error) {
+      console.error('Error initializing WaveSurfer:', error);
+    }
+  })
+})
+
+function createWaveform() {
+  try {
+    // Check if the waveform element is available
+    if (!waveform.value) {
+      throw new Error('Waveform container element not found');
+    }
+
+    const containerWidth = waveform.value.clientWidth;
+    const containerHeight = waveform.value.clientHeight;
+
+    ws = WaveSurfer.create({
+      container: waveform.value,
+      waveColor: waveColor,
+      progressColor: progressColor,
+      barWidth: 2,
+      barGap: 2,
+      barRadius: 4,
+      cursorWidth: 0,
+      height: containerHeight,
+      width: containerWidth,
+      backend: 'WebAudio',
+    })
+
+    ws.on('audioprocess', (currentTime) => {
+      emit('timeupdate', currentTime);
+    })
+    ws.on('finish', () => {
+      emit('finish');
+    })
+    ws.on('ready', (totalDuration) => {
+      emit('ready', totalDuration);
+    })
+
+    ws.on('error', e => console.error(e))
+
+    if (props.blob) {
+      ws.loadBlob(props.blob)
+    } else if (props.src) {
+      ws.load(props.src)
+    } else {
+      throw new Error('No audio source provided')
+    }
+  } catch (error) {
+    console.error('Error initializing WaveSurfer:', error);
+  }
+}
+
+function play() {
+  if (ws) {
+    ws.play()
+  } else {
+    console.warn('WaveSurfer instance not ready')
+  }
+}
+
+function pause() {
+  if (ws) {
+    ws.pause()
+  } else {
+    console.warn('WaveSurfer instance not ready')
+  }
+}
+
+function getCurrentTime() {
+  return ws ? ws.getCurrentTime() : 0
+}
+
+defineExpose({ play, pause, getCurrentTime })
+
+onBeforeUnmount(() => {
+  if (ws) ws.destroy()
+})
+</script>
+
+<style scoped>
+.waveform {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 16px;
+  min-width: 0px;
+}
 </style>

package/src/components/Button/Button.vue

@@ -1,174 +1,174 @@
-<template>
-  <v-btn
-    :color="color"
-    :disabled="disabled"
-    :prepend-icon="prependIcon"
-    :append-icon="appendIcon"
-    :loading="loading"
-    rounded="lg"
-    :density="density"
-    class="text-none wl-button"
-    :variant="variant"
-    :size="size"
-    :readonly="readonly"
-    :style="rootStyle"
-    data-testid="root"
-  >
-    <slot>{{ label }}</slot>
-  </v-btn>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { siteColors } from "../../utils/index";
-
-const props = defineProps({
-  /**
-   * The color of the button.
-   * Default is '#172774' (a dark blue color).
-   */
-  color: {
-    type: String,
-    default: siteColors['btn_bg'],
-  },
-  /**
-   * The text color of the button (for flat variant).
-   * Default is 'white'.
-   */
-  textColor: {
-    type: String,
-    default: 'white',
-  },
-  /**
-   * Icon to display before the button label.
-   * Accepts the name of an icon (String).
-   */
-  prependIcon: {
-    type: String,
-  },
-  /**
-   * Icon to display after the button label.
-   * Can be any valid icon name or value (type not specified for flexibility).
-   */
-  appendIcon: {},
-
-  /**
-   * Boolean to set the loading state of the button.
-   * When true, it shows a loading spinner.
-   * Default is false.
-   */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Defines the density of the button.
-   * Accepts 'default', 'comfortable', or other Vuetify density options.
-   * Default is 'default'.
-   */
-  density: {
-    type: String,
-    default: 'default',
-  },
-
-  /**
-   * The visual style of the button.
-   * Accepts 'flat', 'outlined', 'contained', etc.
-   * Default is 'flat'.
-   */
-  variant: {
-    type: String,
-    default: 'flat',
-  },
-
-  /**
-   * Size of the button.
-   * Accepts 'small', 'medium', 'large', or 'default'.
-   * Default is 'default'.
-   */
-  size: {
-    type: String,
-    default: 'default',
-  },
-
-  /**
-   * The text label to display inside the button.
-   * Default is 'Button'.
-   */
-  label: {
-    type: String,
-    default: 'Button',
-  },
-
-  /**
-   * Boolean to disable the button.
-   * When true, the button is disabled and not clickable.
-   * Default is false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean to set the button to read-only state.
-   * When true, the button displays the readonly attribute.
-   * Default is false.
-   */
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const buttonStyle = computed(() => {
-  if (props.variant === 'flat') {
-    return { color: props.textColor };
-  }
-  return {};
-});
-
-// Compute a CSS variable for focus color to avoid hardcoded values.
-// Use provided color prop, fall back to siteColors.btn_bg, then to a sensible default.
-const focusColor = computed(() => {
-  const col = props.color || siteColors['btn_bg'] || '#172774';
-  return col;
-});
-
-// Expose a style object that includes the focus color custom property.
-const rootStyle = computed(() => ({
-  ...buttonStyle.value,
-  '--wl-button-focus-color': focusColor.value
-}));
-</script>
-
-<style>
-.wl-button.v-btn--variant-outlined {
-  border-width: 1.5px;
-}
-
-/* Accessibility: Focus Indicators (WCAG 2.4.7) */
-.wl-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-.wl-button.v-btn--variant-outlined:focus-visible {
-  /* Use component-provided focus color with fallback */
-  outline-color: var(--wl-button-focus-color, var(--Dental-Blue-0, #172774));
-  outline-width: 3px;
-  box-shadow: 0 0 0 4px rgba(0,0,0,0.08), 0 0 0 6px rgba(255,255,255,0.06) inset;
-}
-
-.wl-button.v-btn--variant-flat:focus-visible {
-  outline-color: white;
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
-}
-
-/* High contrast mode support */
-@media (forced-colors: active) {
-  .wl-button {
-    border: 2px solid currentColor;
-  }
-}
-</style>
+<template>
+  <v-btn
+    :color="color"
+    :disabled="disabled"
+    :prepend-icon="prependIcon"
+    :append-icon="appendIcon"
+    :loading="loading"
+    rounded="lg"
+    :density="density"
+    class="text-none wl-button"
+    :variant="variant"
+    :size="size"
+    :readonly="readonly"
+    :style="rootStyle"
+    data-testid="root"
+  >
+    <slot>{{ label }}</slot>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { siteColors } from "../../utils/index";
+
+const props = defineProps({
+  /**
+   * The color of the button.
+   * Default is '#172774' (a dark blue color).
+   */
+  color: {
+    type: String,
+    default: siteColors['btn_bg'],
+  },
+  /**
+   * The text color of the button (for flat variant).
+   * Default is 'white'.
+   */
+  textColor: {
+    type: String,
+    default: 'white',
+  },
+  /**
+   * Icon to display before the button label.
+   * Accepts the name of an icon (String).
+   */
+  prependIcon: {
+    type: String,
+  },
+  /**
+   * Icon to display after the button label.
+   * Can be any valid icon name or value (type not specified for flexibility).
+   */
+  appendIcon: {},
+
+  /**
+   * Boolean to set the loading state of the button.
+   * When true, it shows a loading spinner.
+   * Default is false.
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Defines the density of the button.
+   * Accepts 'default', 'comfortable', or other Vuetify density options.
+   * Default is 'default'.
+   */
+  density: {
+    type: String,
+    default: 'default',
+  },
+
+  /**
+   * The visual style of the button.
+   * Accepts 'flat', 'outlined', 'contained', etc.
+   * Default is 'flat'.
+   */
+  variant: {
+    type: String,
+    default: 'flat',
+  },
+
+  /**
+   * Size of the button.
+   * Accepts 'small', 'medium', 'large', or 'default'.
+   * Default is 'default'.
+   */
+  size: {
+    type: String,
+    default: 'default',
+  },
+
+  /**
+   * The text label to display inside the button.
+   * Default is 'Button'.
+   */
+  label: {
+    type: String,
+    default: 'Button',
+  },
+
+  /**
+   * Boolean to disable the button.
+   * When true, the button is disabled and not clickable.
+   * Default is false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean to set the button to read-only state.
+   * When true, the button displays the readonly attribute.
+   * Default is false.
+   */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const buttonStyle = computed(() => {
+  if (props.variant === 'flat') {
+    return { color: props.textColor };
+  }
+  return {};
+});
+
+// Compute a CSS variable for focus color to avoid hardcoded values.
+// Use provided color prop, fall back to siteColors.btn_bg, then to a sensible default.
+const focusColor = computed(() => {
+  const col = props.color || siteColors['btn_bg'] || '#172774';
+  return col;
+});
+
+// Expose a style object that includes the focus color custom property.
+const rootStyle = computed(() => ({
+  ...buttonStyle.value,
+  '--wl-button-focus-color': focusColor.value
+}));
+</script>
+
+<style>
+.wl-button.v-btn--variant-outlined {
+  border-width: 1.5px;
+}
+
+/* Accessibility: Focus Indicators (WCAG 2.4.7) */
+.wl-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.wl-button.v-btn--variant-outlined:focus-visible {
+  /* Use component-provided focus color with fallback */
+  outline-color: var(--wl-button-focus-color, var(--Dental-Blue-0, #172774));
+  outline-width: 3px;
+  box-shadow: 0 0 0 4px rgba(0,0,0,0.08), 0 0 0 6px rgba(255,255,255,0.06) inset;
+}
+
+.wl-button.v-btn--variant-flat:focus-visible {
+  outline-color: white;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .wl-button {
+    border: 2px solid currentColor;
+  }
+}
+</style>