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

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,38 +1,43 @@
-<template>
-  <div class="app">
-    <div class="element-container">
-      <Button
-        :color="siteColors['slot-bg']"
-        :label="'Some Text'"
-        class="!font-bold mx-2" :text-color="siteColors['slot-text']"
-      >
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/Button/Button.vue';
-import { siteColors } from "@/utils/index";
-</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">
+      <!-- <OtpInput
+        length="6"
+        :boxStyle="{ backgroundColor: siteColors['slot-bg'], color: siteColors['slot-text'] }"
+        phone-number="+49123445"
+        :loading="true"
+        :submit-fn="() => {}"
+        :resend-fn="() => {}"
+      /> -->
+
+      <Audio src="public/audio/test.aac" :cloudStatus="false" :showDeleteButton="false"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OtpInput from "@/components/OtpInput/OtpInput.vue";
+import { siteColors } from "@/utils/index";
+import Audio from "@/components/Audio/Audio.vue";
+</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.

package/heroicons.ts

@@ -1,75 +1,75 @@
-import { h } from 'vue';
-import * as HeroIcons from '@heroicons/vue/24/outline'; // Heroicons solid icons
-import type { IconSet, IconProps } from 'vuetify';
-
-// Import multiple custom SVG components
-import Outline from './src/components/Icons/checkbox.vue';
-import OutlineChecked from './src/components/Icons/outlineChecked.vue';
-import Circle from './src/components/Icons/Circle.vue';
-import Calender from './src/components/Icons/calendar.vue';
-import CalendarNotification from './src/components/Icons/CalendarNotification.vue';
-import Chair from './src/components/Icons/Chair.vue';
-import ChairNotification from './src/components/Icons/ChairNotification.vue';
-import Group3 from './src/components/Icons/Group3.vue';
-import RingNotification from './src/components/Icons/RingNotification.vue';
-import SolidArrowRight from './src/components/Icons/SolidArrowRight.vue';
-import FilledCircle from './src/components/Icons/FilledCircle.vue';
-import FavIcon from './src/components/Icons/FavIcon.vue';
-
-// Register custom SVG icons in an object
-const customIcons: Record<string, typeof Outline> = {
-  Outline,
-  OutlineChecked,
-  Circle,
-  Calender,
-  CalendarNotification,
-  Chair,
-  ChairNotification,
-  Group3,
-  RingNotification,
-  SolidArrowRight,
-  FilledCircle,
-  FavIcon,
-};
-
-const heroicons: IconSet = {
-  component: (props: IconProps) => {
-    let { icon, ...rest } = props;
-
-    if (typeof icon === 'string') {
-      // Convert icon name to PascalCase for custom icons
-      const PascalCaseIconName = icon
-        .split('-')
-        .map((chunk) => chunk.charAt(0).toUpperCase() + chunk.slice(1))
-        .join('');
-
-      const CustomIconComponent =
-        customIcons[PascalCaseIconName as keyof typeof customIcons];
-
-      if (CustomIconComponent) {
-        // Render the custom icon if found
-        return h(CustomIconComponent, rest);
-      }
-
-      // Otherwise, check for Heroicons
-      if (icon.startsWith('heroicons-')) {
-        icon = icon.replace('heroicons-', '');
-      }
-
-      const HeroIconComponent = (HeroIcons as any)[`${PascalCaseIconName}Icon`];
-
-      if (HeroIconComponent) {
-        // Render Heroicon if found
-        return h(HeroIconComponent, rest);
-      }
-
-      console.warn(`Icon "${icon}" not found.`);
-    } else {
-      console.warn('Icon value is not a string:', icon);
-    }
-
-    return null;
-  },
-};
-
-export default heroicons;
+import { h } from 'vue';
+import * as HeroIcons from '@heroicons/vue/24/outline'; // Heroicons solid icons
+import type { IconSet, IconProps } from 'vuetify';
+
+// Import multiple custom SVG components
+import Outline from './src/components/Icons/checkbox.vue';
+import OutlineChecked from './src/components/Icons/outlineChecked.vue';
+import Circle from './src/components/Icons/Circle.vue';
+import Calender from './src/components/Icons/calendar.vue';
+import CalendarNotification from './src/components/Icons/CalendarNotification.vue';
+import Chair from './src/components/Icons/Chair.vue';
+import ChairNotification from './src/components/Icons/ChairNotification.vue';
+import Group3 from './src/components/Icons/Group3.vue';
+import RingNotification from './src/components/Icons/RingNotification.vue';
+import SolidArrowRight from './src/components/Icons/SolidArrowRight.vue';
+import FilledCircle from './src/components/Icons/FilledCircle.vue';
+import FavIcon from './src/components/Icons/FavIcon.vue';
+
+// Register custom SVG icons in an object
+const customIcons: Record<string, typeof Outline> = {
+  Outline,
+  OutlineChecked,
+  Circle,
+  Calender,
+  CalendarNotification,
+  Chair,
+  ChairNotification,
+  Group3,
+  RingNotification,
+  SolidArrowRight,
+  FilledCircle,
+  FavIcon,
+};
+
+const heroicons: IconSet = {
+  component: (props: IconProps) => {
+    let { icon, ...rest } = props;
+
+    if (typeof icon === 'string') {
+      // Convert icon name to PascalCase for custom icons
+      const PascalCaseIconName = icon
+        .split('-')
+        .map((chunk) => chunk.charAt(0).toUpperCase() + chunk.slice(1))
+        .join('');
+
+      const CustomIconComponent =
+        customIcons[PascalCaseIconName as keyof typeof customIcons];
+
+      if (CustomIconComponent) {
+        // Render the custom icon if found
+        return h(CustomIconComponent, rest);
+      }
+
+      // Otherwise, check for Heroicons
+      if (icon.startsWith('heroicons-')) {
+        icon = icon.replace('heroicons-', '');
+      }
+
+      const HeroIconComponent = (HeroIcons as any)[`${PascalCaseIconName}Icon`];
+
+      if (HeroIconComponent) {
+        // Render Heroicon if found
+        return h(HeroIconComponent, rest);
+      }
+
+      console.warn(`Icon "${icon}" not found.`);
+    } else {
+      console.warn('Icon value is not a string:', icon);
+    }
+
+    return null;
+  },
+};
+
+export default heroicons;

package/index.html

@@ -1,19 +1,19 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Vite App</title>
-
-    <!-- Add the link to the Google Font or custom font here -->
-    <link
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="app"></div>
-
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Vite App</title>
+
+    <!-- Add the link to the Google Font or custom font here -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>