codecentric · SteKoe · Feb 21, 2025 · Feb 19, 2025 · Feb 21, 2025 · Feb 21, 2025
@@ -1,4 +1,6 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx').default;
 const { mergeConfig } = require('vite');
+
 const path = require('path');
 const frontend = path.resolve(__dirname, '../src/main/frontend/');
 module.exports = {
@@ -18,6 +20,7 @@ module.exports = {
   },
   async viteFinal(config) {
     config.plugins = config.plugins.filter((p) => p.name !== 'vue-docgen');
+    config.plugins.push(vueJsx());
     return mergeConfig(config, {
       resolve: {
         alias: {

@@ -74,6 +74,8 @@
     "@storybook/addon-mdx-gfm": "^8.0.0",
     "@storybook/vue3": "8.5.8",
     "@storybook/vue3-vite": "^8.0.0",
+    "@tailwindcss/postcss": "^4.0.7",
+    "@tailwindcss/vite": "^4.0.7",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/user-event": "14.6.1",
     "@testing-library/vue": "8.1.0",
@@ -83,6 +85,7 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-typescript": "^14.0.0",
     "@vue/test-utils": "2.4.6",
     "autoprefixer": "10.4.20",
@@ -92,16 +95,16 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-storybook": "0.11.3",
     "eslint-plugin-vue": "^9.10.0",
-    "happy-dom": "^14.12.3",
+    "happy-dom": "^17.1.1",
     "jsdom": "^26.0.0",
     "msw": "2.7.1",
     "msw-storybook-addon": "2.0.4",
-    "postcss": "8.5.3",
     "prettier": "^3.0.3",
     "rollup-plugin-visualizer": "5.14.0",
     "sass": "^1.57.1",
     "storybook": "8.5.8",
-    "tailwindcss": "3.4.17",
+    "storybook-vue3-router": "^5.0.0",
+    "tailwindcss": "4.0.7",
     "ts-node-dev": "^2.0.0",
     "typescript": "^5.0.3",
     "vite": "6.1.1",
@@ -116,8 +119,7 @@
     "not ie <= 8"
   ],
   "engines": {
-    "node": "22.14.0",
-    "npm": "11.1.0"
+    "node": "22.14.0"
   },
   "msw": {
     "workerDirectory": [
@@ -127,5 +129,6 @@
   },
   "overrides": {
     "esbuild": "0.25.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }
@@ -20,13 +20,7 @@ export default {
   title: 'Components/Alert',
 };
 
-const Template = (args) => ({
-  components: { SbaAlert },
-  setup() {
-    return { args };
-  },
-  template: '<sba-alert v-bind="args" />',
-});
+const Template = (args) => <sba-alert {...args} />;
 
 export const AlertError = {
   render: Template,

@@ -18,7 +18,7 @@
   <div
     v-if="hasError"
     :class="classNames(alertClass, borderClassNames)"
-    class="rounded-b px-4 py-3 shadow-sm backdrop-filter backdrop-blur-xs bg-opacity-80 my-3"
+    class="rounded-b px-4 py-3 shadow backdrop-filter backdrop-blur-xs my-3"
     role="alert"
   >
     <div class="flex">
@@ -70,13 +70,13 @@ export default defineComponent({
     return {
       classNames,
       alertClass: {
-        'bg-red-100 border-red-400 text-red-700':
+        'bg-red-100/80 border-red-400 text-red-700':
           this.severity.toUpperCase() === Severity.ERROR,
-        'bg-orange-100 border-orange-500 text-orange-700':
+        'bg-orange-100/80 border-orange-500 text-orange-700':
           this.severity.toUpperCase() === Severity.WARN,
-        'bg-blue-100 border-blue-500 text-blue-900':
+        'bg-blue-100/80 border-blue-500 text-blue-900':
           this.severity.toUpperCase() === Severity.INFO,
-        'bg-teal-100 border-teal-500 text-teal-900':
+        'bg-teal-100/80 border-teal-500 text-teal-900':
           this.severity.toUpperCase() === Severity.SUCCESS,
       },
       textColor: {

@@ -4,7 +4,9 @@
   </div>
 </template>
 
-<style type="text/css">
+<style>
+@reference "@/index.css";
+
 .btn-group {
   @apply inline-flex z-0 relative -space-x-px;
 }
@@ -15,14 +17,14 @@
 }
 
 .btn-group button:first-child:not(:last-child) {
-  @apply rounded-r-none !important;
+  @apply rounded-r-none!;
 }
 
 .btn-group button:not(:first-child):not(:last-child) {
-  @apply rounded-none !important;
+  @apply rounded-none!;
 }
 
 .btn-group button:last-child:not(:first-child) {
-  @apply rounded-l-none !important;
+  @apply rounded-l-none!;
 }
 </style>
@@ -64,18 +64,3 @@ export const SuccessButton = {
     class: 'is-success',
   },
 };
-
-const SizeTemplate = () => {
-  return {
-    components: { SbaButton },
-    template: `
-      <sba-button size="xs">button xs</sba-button>
-      <sba-button size="sm">button sm</sba-button>
-      <sba-button size="base">button base</sba-button>
-    `,
-  };
-};
-
-export const ButtonSizes = {
-  render: SizeTemplate,
-};
@@ -51,6 +51,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "@/index.css";
+
 .btn {
   @apply rounded-l rounded-r font-medium text-sm text-center text-black border-gray-300 border border-gray-300 bg-white;
   @apply focus:ring-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
@@ -100,10 +102,4 @@ export default {
 .btn.is-primary {
   @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-300;
 }
-
-@supports (-moz-appearance: none) {
-  .backdrop-filter.bg-opacity-40 {
-    --tw-bg-opacity: 1 !important;
-  }
-}
 </style>
@@ -21,16 +21,10 @@ export default {
 };
 
 const Template = (args) => {
-  return {
-    components: { SbaCheckbox },
-    setup() {
-      return { args };
-    },
-    template: '<sba-checkbox v-bind="args" />{{args}}',
-  };
+  return <sba-checkbox {...args} />;
 };
 
-export const OneButton = {
+export const WithLabel = {
   render: Template,
 
   args: {

@@ -1,39 +1,23 @@
 <template>
   <div class="flex items-center">
-    <input
-      :id="id"
-      :checked="modelValue"
-      type="checkbox"
-      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-      :name="name"
-      @change="$emit('update:modelValue', $event.target.checked)"
-    />
-    <label :for="id" class="ml-2 font-medium text-gray-700" v-text="label" />
+    <label>
+      <input
+        :id="id"
+        :checked="modelValue"
+        type="checkbox"
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+        @change="$emit('update:modelValue', $event.target.checked)"
+      />
+      <span class="ml-2 font-medium text-gray-700">{{ label }}</span>
+    </label>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    id() {
-      return 'checkbox-' + this._.uid;
-    },
-  },
-};
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  label: string;
+}>();
+
+defineEmits(['update:modelValue']);
 </script>
@@ -3,6 +3,8 @@
 </template>
 
 <style scoped>
+@reference "@/index.css";
+
 .sba-dropdown-divider {
   height: 0;
   margin: 0.25rem 0;

@@ -78,6 +78,8 @@ const onClick = ($event, close) => {
 </script>
 
 <style scoped>
+@reference "@/index.css";
+
 .sba-dropdown-item {
   @apply flex w-full items-center rounded-md px-2 py-2 hover:bg-sba-700 hover:text-white;
 }

@@ -49,6 +49,8 @@ defineProps({
 </script>
 
 <style scoped>
+@reference "@/index.css";
+
 .submenu {
   @apply inline-block text-left text-white cursor-pointer lg:relative;
 }
@@ -74,7 +76,7 @@ defineProps({
 }
 
 .submenu-items {
-  @apply absolute right-0 text-black w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
+  @apply absolute right-0 text-black w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
 }
 
 .submenu-opener--link {

@@ -45,6 +45,8 @@ export default {
 </script>
 
 <style>
+@reference "@/index.css";
+
 .formatted {
   white-space: break-spaces;
   word-break: break-word;

@@ -16,7 +16,7 @@
 
 <template>
   <sba-button
-    class="border-none sm:m-1 !bg-transparent"
+    class="border-none p-0! sm:m-1 bg-transparent!"
     :title="title"
     size="xs"
     v-on="$attrs"
@@ -53,3 +53,4 @@ export default {
 </script>
 
 <style></style>
+@reference "@/index.css";
@@ -23,7 +23,7 @@
         class="block text-sm font-medium text-gray-700"
         v-text="label"
       />
-      <div :class="{ 'mt-1': hasLabel }" class="flex rounded shadow-sm">
+      <div :class="{ 'mt-1': hasLabel }" class="flex rounded shadow">
         <!-- PREPEND -->
         <label
           v-if="$slots.prepend"
@@ -54,7 +54,7 @@
           :type="type"
           :value="modelValue"
           :aria-label="label || placeholder"
-          class="focus:z-10 p-2 relative flex-1 block w-full rounded-none bg-opacity-40 backdrop-blur-sm"
+          class="focus:z-10 p-2 relative flex-1 block w-full rounded-none bg-white/40 backdrop-blur-sm"
           @input="handleInput"
         />
         <!-- APPEND -->

@@ -10,7 +10,7 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-black bg-opacity-25" />
+        <div class="fixed inset-0 bg-black/25" />
       </TransitionChild>
 
       <div class="fixed inset-0 overflow-y-auto">

@@ -62,6 +62,8 @@ defineProps({
 </script>
 
 <style scoped>
+@reference "@/index.css";
+
 .submenu {
   @apply inline-block text-left text-white cursor-pointer lg:relative;
 }
@@ -91,7 +93,7 @@ defineProps({
 }
 
 .submenu-items {
-  @apply absolute right-0 text-black w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
+  @apply absolute right-0 text-black w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
 }
 
 .submenu-opener--link {

@@ -38,11 +38,15 @@ defineProps({
 </script>
 
 <style scoped>
+@reference "@/index.css";
+
 .sba-nav-item {
   @apply px-3 py-2 rounded lg:self-center hover:bg-sba-700;
 }
 </style>
 <style>
+@reference "@/index.css";
+
 .sba-nav-item.is-active {
   @apply bg-sba-700;
 }

@@ -12,6 +12,8 @@ defineProps({
 </script>
 
 <style>
+@reference "@/index.css";
+
 .brand {
   @apply flex items-center text-white mr-4;
 }