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

package/.storybook/main.ts

@@ -1,18 +1,18 @@
-import type { StorybookConfig } from '@storybook/vue3-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-    '@storybook/addon-docs',
-  ],
-  framework: {
-    name: '@storybook/vue3-vite',
-    options: {},
-  },
-};
-export default config;
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+};
+export default config;

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,139 +1,139 @@
-<template>
-  <div class="app-shell">
-    <header class="app-nav">
-      <div class="app-title">Component Demos</div>
-      <nav class="nav-links">
-        <button
-          class="nav-btn"
-          :class="{ active: currentPage === 'all' }"
-          type="button"
-          @click="currentPage = 'all'"
-        >
-          All
-        </button>
-        <button
-          class="nav-btn"
-          :class="{ active: currentPage === 'accordion' }"
-          type="button"
-          @click="currentPage = 'accordion'"
-        >
-          Accordion
-        </button>
-        <button
-          class="nav-btn"
-          :class="{ active: currentPage === 'select' }"
-          type="button"
-          @click="currentPage = 'select'"
-        >
-          Select
-        </button>
-        <button
-          class="nav-btn"
-          :class="{ active: currentPage === 'listitem' }"
-          type="button"
-          @click="currentPage = 'listitem'"
-        >
-          ListItem
-        </button>
-        <button
-          class="nav-btn"
-          :class="{ active: currentPage === 'tile' }"
-          type="button"
-          @click="currentPage = 'tile'"
-        >
-          Tile
-        </button>
-      </nav>
-    </header>
-
-    <main class="app-main">
-      <AllPage v-if="currentPage === 'all'" />
-      <AccordionGroupPage v-else-if="currentPage === 'accordion'" />
-      <SelectPage v-else-if="currentPage === 'select'" />
-      <ListItemPage v-else-if="currentPage === 'listitem'" />
-      <TilePage v-else-if="currentPage === 'tile'" />
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import AllPage from '@/pages/AllPage.vue';
-import AccordionGroupPage from '@/pages/AccordionGroupPage.vue';
-import SelectPage from '@/pages/SelectPage.vue';
-import ListItemPage from '@/pages/ListItemPage.vue';
-import TilePage from '@/pages/TilePage.vue';
-
-const currentPage = ref<'all' | 'accordion' | 'select' | 'listitem' | 'tile'>('all');
-</script>
-
-<style scoped>
-.app-shell {
-  min-height: 100vh;
-  background: #f2f4f7;
-}
-
-.app-nav {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.75rem 1.5rem;
-  background: #101828;
-  color: #ffffff;
-  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.2);
-}
-
-.app-title {
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-.nav-links {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.nav-btn {
-  border: 1px solid transparent;
-  background: rgba(255, 255, 255, 0.08);
-  color: inherit;
-  padding: 0.45rem 0.9rem;
-  border-radius: 999px;
-  font-size: 0.95rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
-}
-
-.nav-btn:hover {
-  background: rgba(255, 255, 255, 0.18);
-  transform: translateY(-1px);
-}
-
-.nav-btn.active {
-  background: #ffffff;
-  color: #101828;
-  border-color: #ffffff;
-}
-
-.app-main {
-  padding: 0;
-}
-
-@media (max-width: 640px) {
-  .app-nav {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .nav-links {
-    justify-content: space-between;
-  }
-}
-</style>
+<template>
+  <div class="app-shell">
+    <header class="app-nav">
+      <div class="app-title">Component Demos</div>
+      <nav class="nav-links">
+        <button
+          class="nav-btn"
+          :class="{ active: currentPage === 'all' }"
+          type="button"
+          @click="currentPage = 'all'"
+        >
+          All
+        </button>
+        <button
+          class="nav-btn"
+          :class="{ active: currentPage === 'accordion' }"
+          type="button"
+          @click="currentPage = 'accordion'"
+        >
+          Accordion
+        </button>
+        <button
+          class="nav-btn"
+          :class="{ active: currentPage === 'select' }"
+          type="button"
+          @click="currentPage = 'select'"
+        >
+          Select
+        </button>
+        <button
+          class="nav-btn"
+          :class="{ active: currentPage === 'listitem' }"
+          type="button"
+          @click="currentPage = 'listitem'"
+        >
+          ListItem
+        </button>
+        <button
+          class="nav-btn"
+          :class="{ active: currentPage === 'tile' }"
+          type="button"
+          @click="currentPage = 'tile'"
+        >
+          Tile
+        </button>
+      </nav>
+    </header>
+
+    <main class="app-main">
+      <AllPage v-if="currentPage === 'all'" />
+      <AccordionGroupPage v-else-if="currentPage === 'accordion'" />
+      <SelectPage v-else-if="currentPage === 'select'" />
+      <ListItemPage v-else-if="currentPage === 'listitem'" />
+      <TilePage v-else-if="currentPage === 'tile'" />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import AllPage from '@/pages/AllPage.vue';
+import AccordionGroupPage from '@/pages/AccordionGroupPage.vue';
+import SelectPage from '@/pages/SelectPage.vue';
+import ListItemPage from '@/pages/ListItemPage.vue';
+import TilePage from '@/pages/TilePage.vue';
+
+const currentPage = ref<'all' | 'accordion' | 'select' | 'listitem' | 'tile'>('all');
+</script>
+
+<style scoped>
+.app-shell {
+  min-height: 100vh;
+  background: #f2f4f7;
+}
+
+.app-nav {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: #101828;
+  color: #ffffff;
+  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.2);
+}
+
+.app-title {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.nav-links {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.nav-btn {
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.08);
+  color: inherit;
+  padding: 0.45rem 0.9rem;
+  border-radius: 999px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.nav-btn:hover {
+  background: rgba(255, 255, 255, 0.18);
+  transform: translateY(-1px);
+}
+
+.nav-btn.active {
+  background: #ffffff;
+  color: #101828;
+  border-color: #ffffff;
+}
+
+.app-main {
+  padding: 0;
+}
+
+@media (max-width: 640px) {
+  .app-nav {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .nav-links {
+    justify-content: space-between;
+  }
+}
+</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.