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

package/.storybook/preview.ts

@@ -1,37 +1,37 @@
-import { withVuetifyTheme } from './withVuetifyTheme.decorator';
-import { setup } from '@storybook/vue3';
-import vuetify from '../src/plugins/vuetify';
-import { createInternalI18n } from '../src/i18n/i18n';
-
-import '../src/assets/css/base.css'; // Import global CSS
-import '../src/assets/css/variables.css'; // Import global CSS
-
-// Setup Vuetify
-setup((app) => {
-  app.use(vuetify);
-  app.use(createInternalI18n());
-});
-
-// Global Types for Theme
-export const globalTypes = {
-  theme: {
-    docs: {
-      source: {
-        type: 'dynamic',
-      },
-    },
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light', left: '🌞' },
-        { value: 'dark', title: 'Dark', left: '🌛' },
-      ],
-      dynamicTitle: true,
-    },
-  },
-};
-
-// Combine with Existing Decorators
-export const decorators = [withVuetifyTheme];
+import { withVuetifyTheme } from './withVuetifyTheme.decorator';
+import { setup } from '@storybook/vue3';
+import vuetify from '../src/plugins/vuetify';
+import { createInternalI18n } from '../src/i18n/i18n';
+
+import '../src/assets/css/base.css'; // Import global CSS
+import '../src/assets/css/variables.css'; // Import global CSS
+
+// Setup Vuetify
+setup((app) => {
+  app.use(vuetify);
+  app.use(createInternalI18n());
+});
+
+// Global Types for Theme
+export const globalTypes = {
+  theme: {
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+    },
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light', left: '🌞' },
+        { value: 'dark', title: 'Dark', left: '🌛' },
+      ],
+      dynamicTitle: true,
+    },
+  },
+};
+
+// Combine with Existing Decorators
+export const decorators = [withVuetifyTheme];

package/.storybook/storyWrapper.vue

@@ -1,18 +1,18 @@
-<template>
-  <v-app :theme="themeName">
-    <v-main style="background: var(--Soft-Concrete-0)" class="pa-2">
-      <slot name="story"></slot>
-    </v-main>
-  </v-app>
-</template>
-
-<script>
-export default {
-  props: {
-    themeName: {
-      type: String,
-      default: 'light',
-    },
-  },
-};
-</script>
+<template>
+  <v-app :theme="themeName">
+    <v-main style="background: var(--Soft-Concrete-0)" class="pa-2">
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  props: {
+    themeName: {
+      type: String,
+      default: 'light',
+    },
+  },
+};
+</script>

package/.storybook/withVuetifyTheme.decorator.ts

@@ -1,21 +1,21 @@
-import { h } from 'vue';
-import StoryWrapper from './storyWrapper.vue';
-
-export const DEFAULT_THEME = 'light';
-
-export const withVuetifyTheme = (storyFn, context) => {
-  // Pull our global theme variable, fallback to DEFAULT_THEME
-  const themeName = context.globals.theme || DEFAULT_THEME;
-  const story = storyFn();
-
-  return () => {
-    return h(
-      StoryWrapper,
-      // give themeName to StoryWrapper as a prop
-      { themeName },
-      {
-        story: () => h(story, { ...context.args }),
-      },
-    );
-  };
-};
+import { h } from 'vue';
+import StoryWrapper from './storyWrapper.vue';
+
+export const DEFAULT_THEME = 'light';
+
+export const withVuetifyTheme = (storyFn, context) => {
+  // Pull our global theme variable, fallback to DEFAULT_THEME
+  const themeName = context.globals.theme || DEFAULT_THEME;
+  const story = storyFn();
+
+  return () => {
+    return h(
+      StoryWrapper,
+      // give themeName to StoryWrapper as a prop
+      { themeName },
+      {
+        story: () => h(story, { ...context.args }),
+      },
+    );
+  };
+};

package/App.vue

@@ -1,147 +1,190 @@
-<template>
-  <div class="app">
-    <div class="element-container">
-      <div style="height:100%; width: 100%; display: flex; flex-direction: column; gap: 20px;">
-        <Card :appointment="value0" :dentist-image-src="value0.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
-        <Card disabled :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
-        <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
-        <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
-        <Card duplicate-treatment-datetime disabled :appointment="value4" :dentist-image-src="value4.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
-      </div>
-     </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue';
-import type { AppointmentData } from '@/types';
-import Card from '@/components/Appointment/Card/Card.vue';
-
-function onConfirmed(appointmentId: string | undefined) {
-  console.log(`Appointment ${appointmentId} confirmed`);
-}
-
-function onCancelled(appointmentId: string | undefined) {
-  console.log(`Appointment ${appointmentId} cancelled`);
-}
-
-function onRescheduled(appointmentId: string | undefined) {
-  console.log(`Appointment ${appointmentId} rescheduled`);
-}
-
-const value0 = ref<AppointmentData>({
-  id: "0",
-  patientName: "Max Mustermann",
-  start: "2025-09-23T16:00:00Z",
-  end: "2025-09-23T16:30:00Z",
-  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
-  is_confirmed: true,
-  template_name: ["Cleaning"],
-  description: "ABCD-1234",
-  dentist: {
-    name: "Dr. Erika Mustermann",
-    gender: 'weiblich',
-    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
-  },
-  type: 0,
-  address: "Musterstraße 1, 12345 Musterstadt",
-  district: "Musterstadt-Mitte"
-});
-
-const value1 = ref<AppointmentData>({
-  id: "1",
-  patientName: "Max Mustermann",
-  start: "2025-09-23T16:00:00Z",
-  end: "2025-09-23T16:30:00Z",
-  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
-  is_confirmed: false,
-  template_name: ["Cleaning"],
-  description: "ABCD-1234",
-  dentist: {
-    name: "Dr. Erika Mustermann",
-    gender: 'weiblich',
-    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
-  },
-  type: 0,
-  address: "Musterstraße 1, 12345 Musterstadt",
-  district: "Musterstadt-Mitte"
-});
-
-const value2 = ref<AppointmentData>({
-  id: "2",
-  patientName: "Erika Mustermann",
-  start: "2025-09-23T16:00:00Z",
-  end: "2025-09-23T16:30:00Z",
-  status: "cancelled", // Change to 'past' or 'cancelled' to test other states
-  is_confirmed: false,
-  template_name: ["Cleaning"],
-  description: "ABCD-1234",
-  dentist: {
-    name: "Dr. Erika Mustermann",
-    gender: 'weiblich',
-    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
-  },
-  type: 0,
-  address: "Musterstraße 1, 12345 Musterstadt",
-  district: "Musterstadt-Mitte"
-});
-
-const value3 = ref<AppointmentData>({
-  id: "3",
-  patientName: "Max Mustermann",
-  start: "2025-09-23T16:00:00Z",
-  end: "2025-09-23T16:30:00Z",
-  status: "past", // Change to 'past' or 'cancelled' to test other states
-  is_confirmed: false,
-  template_name: ["Routine Checkup", "Cleaning"],
-  description: "ABCD-1234",
-  dentist: {
-    name: "Dr. Erika Mustermann",
-    gender: 'weiblich',
-    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
-  },
-  type: 0,
-  address: "Musterstraße 1, 12345 Musterstadt",
-  district: "Musterstadt-Mitte"
-});
-
-const value4 = ref<AppointmentData>({
-  id: "4",
-  patientName: "Max Mustermann",
-  start: "2025-09-23T16:00:00Z",
-  end: "2025-09-23T16:30:00Z",
-  status: "past", // Change to 'past' or 'cancelled' to test other states
-  is_confirmed: false,
-  template_name: ["Routine Checkup", "Cleaning"],
-  description: "ABCD-1234",
-  dentist: {
-    name: "Dr. Erika Mustermann",
-    gender: 'weiblich',
-    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
-  },
-  type: 0,
-  address: "Musterstraße 1, 12345 Musterstadt",
-  district: "Musterstadt-Mitte"
-});
-</script>
-
-<style scoped>
-.app {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  height: 100vh;
-  background-color: light-blue;
-}
-
-.element-container{
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 70%;
-  height: 100%;
-}
-</style>
+<template>
+  <div class="app">
+    <div class="element-container">
+      <div style="height:100%; width: 100%; display: flex; flex-direction: column; gap: 20px;">
+        <Card :appointment="value0" :appointmentTypes="appointmentTypes" :dentist-image-src="value0.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card disabled :appointment="value1" :appointmentTypes="appointmentTypes" :dentist-image-src="value1.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card :appointment="value2" :appointmentTypes="appointmentTypes" :dentist-image-src="value2.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card :appointment="value3" :appointmentTypes="appointmentTypes" :dentist-image-src="value3.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card duplicate-treatment-datetime disabled :appointment="value4" :appointmentTypes="appointmentTypes" :dentist-image-src="value4.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+      </div>
+     </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import type { AppointmentData } from '@/types';
+import Card from '@/components/Appointment/Card/Card.vue';
+
+function onConfirmed(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} confirmed`);
+}
+
+function onCancelled(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} cancelled`);
+}
+
+function onRescheduled(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} rescheduled`);
+}
+
+const value0 = ref<AppointmentData>({
+  id: "0",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: true,
+  template_name: ["Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 4,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value1 = ref<AppointmentData>({
+  id: "1",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 3,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value2 = ref<AppointmentData>({
+  id: "2",
+  patientName: "Erika Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "cancelled", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value3 = ref<AppointmentData>({
+  id: "3",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "past", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 2,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value4 = ref<AppointmentData>({
+  id: "4",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "past", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 1,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const appointmentTypes = ref([
+  {
+    id: 0,
+    icon: 'simple',
+    title: 'Simple',
+    content: '1 Patient <br>1 Behandler <br>1 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: "hidden"
+  },
+  {
+    id: 1,
+    icon: 'multitermin',
+    title: 'Multitermin',
+    content: '1 Patient <br>1 Behandler <br>2 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+  {
+    id: 2,
+    icon: 'supervision',
+    title: 'Supervision',
+    content: '1 Patient <br>2 Behandler <br> 1 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+  {
+    id: 3,
+    icon: 'doppeltermin',
+    title: 'Doppeltermin',
+    content: '2 Patienten <br> 1 Behandler <br> 1 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+  {
+    id: 4,
+    icon: 'kombitermin',
+    title: 'Kombitermin',
+    content: '1 Patient <br> 2 Behandler <br> 2 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+]);
+</script>
+
+<style scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: light-blue;
+}
+
+.element-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  height: 100%;
+}
+</style>

package/README.md

@@ -1,56 +1,56 @@
-# WL Shared UI Components
-
-This library provides a set of UI components used across all applications within the WL ecosystem.
-
-## Adding @wunschlachen/wl-shared-components to a Nuxt Project
-
-### Step 1: Install the Library
-
-To add WL components, use Node's package manager:
-
-```
-npm install @wunschlachen/wl-shared-components
-```
-
-
-### Step 2: Create a Vuetify Plugin File
-
-Create a new file named `wlSharedComponents.js` inside your `plugins` folder, and add the following code to define the Vuetify plugin:
-
-```javascript
-// plugins/wlSharedComponents.js
-import { defineNuxtPlugin } from "#app";
-import vuetify from "@wunschlachen/wl-shared-components/src/plugins/vuetify";
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(vuetify);
-});
-```
-
-### Step 3: Update Nuxt Configuration
-In your nuxt.config.js, add the following configurations:
-
-Add vuetify and @wunschlachen/wl-shared-components to the build.transpile section.
-Register the Vuetify plugin by adding it to the plugins array.
-```
-export default defineNuxtConfig({
-  build: {
-    transpile: ["vuetify", "@wunschlachen/wl-shared-components"],
-  },
-});
-```
-
-## Development
-Running Storybook
-To begin development and launch Storybook, execute:
-
-```
-npm install
-npm run storybook
-```
-
-## Contributing
-
-Pull requests are welcome! For major changes, please open an issue first to discuss proposed changes.
-
-Ensure that any necessary tests are updated to maintain project integrity.
+# WL Shared UI Components
+
+This library provides a set of UI components used across all applications within the WL ecosystem.
+
+## Adding @wunschlachen/wl-shared-components to a Nuxt Project
+
+### Step 1: Install the Library
+
+To add WL components, use Node's package manager:
+
+```
+npm install @wunschlachen/wl-shared-components
+```
+
+
+### Step 2: Create a Vuetify Plugin File
+
+Create a new file named `wlSharedComponents.js` inside your `plugins` folder, and add the following code to define the Vuetify plugin:
+
+```javascript
+// plugins/wlSharedComponents.js
+import { defineNuxtPlugin } from "#app";
+import vuetify from "@wunschlachen/wl-shared-components/src/plugins/vuetify";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(vuetify);
+});
+```
+
+### Step 3: Update Nuxt Configuration
+In your nuxt.config.js, add the following configurations:
+
+Add vuetify and @wunschlachen/wl-shared-components to the build.transpile section.
+Register the Vuetify plugin by adding it to the plugins array.
+```
+export default defineNuxtConfig({
+  build: {
+    transpile: ["vuetify", "@wunschlachen/wl-shared-components"],
+  },
+});
+```
+
+## Development
+Running Storybook
+To begin development and launch Storybook, execute:
+
+```
+npm install
+npm run storybook
+```
+
+## Contributing
+
+Pull requests are welcome! For major changes, please open an issue first to discuss proposed changes.
+
+Ensure that any necessary tests are updated to maintain project integrity.