reworked stack

web-app/src/components/fcomponents/FButton.vue

@@ -1,5 +1,12 @@
 <template>
-  <button class="f-btn" :class="classObject" :style="styleObject">
+  <button
+    class="f-btn"
+    :class="classObject"
+    :style="styleObject"
+    :type="props.type"
+    :disabled="props.disabled"
+    :aria-disabled="props.disabled ? 'true' : undefined"
+  >
     <slot></slot>
   </button>
 </template>
@@ -15,6 +22,7 @@ interface Props {
   bgColor?: string;
   light?: boolean;
   dark?: boolean;
+  type?: 'button' | 'submit' | 'reset';
 }
 
 import { computed } from 'vue';
@@ -22,6 +30,7 @@ import { computed } from 'vue';
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
   bgColor: '',
+  type: 'button',
 });
 
 const classObject = computed(() => ({

web-app/src/components/fcomponents/FInput.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="f-input" :class="classObject">
+  <div class="f-input" :class="classObject" v-bind="rootAttrs">
     <div class="f-input-label subheader2">
-      <label v-if="props.label" :for="name">{{ props.label }}</label>
+      <label v-if="props.label" :for="inputId">{{ props.label }}</label>
       <Icon>
         <template v-slot:text v-if="slots.info">
           <slot name="info"></slot>
@@ -13,10 +13,11 @@
         :disabled="props.disabled"
         :readonly="props.readonly"
         :type="props.type"
-        :name="name"
-        :id="name"
+        :name="inputName"
+        :id="inputId"
         @input="updateModelValue"
         :value="props.modelValue"
+        v-bind="inputAttrs"
       />
       <div class="f-input--suffix" v-if="slots.suffix">
         <slot name="suffix">test </slot>
@@ -30,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, useSlots, ref } from 'vue';
+import { computed, getCurrentInstance, useSlots, ref, useAttrs } from 'vue';
 import useClickOutside from '@/composables/useClickOutside';
 
 import Icon from '@/components/icons/IconInfo.vue';
@@ -49,7 +50,52 @@ const slots = useSlots();
 const inputWrapper = ref();
 
 const instance = getCurrentInstance();
-const name = `f-input-${instance!.uid}`;
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+
+const generatedId = `f-input-${instance!.uid}`;
+
+const inputId = computed(() => {
+  const attrId = (attrs as Record<string, unknown>).id;
+  return typeof attrId === 'string' && attrId.length > 0 ? attrId : generatedId;
+});
+
+const inputName = computed(() => {
+  const attrName = (attrs as Record<string, unknown>).name;
+  if (typeof attrName === 'string' && attrName.length > 0) {
+    return attrName;
+  }
+  return inputId.value;
+});
+
+const rootAttrs = computed(() => {
+  const attrRecord = attrs as Record<string, unknown>;
+  const root: Record<string, unknown> = {};
+  if (typeof attrRecord.class === 'string') {
+    root.class = attrRecord.class;
+  }
+  if (attrRecord.style) {
+    root.style = attrRecord.style;
+  }
+  for (const [key, value] of Object.entries(attrRecord)) {
+    if (key.startsWith('data-')) {
+      root[key] = value;
+    }
+  }
+  return root;
+});
+
+const inputAttrs = computed(() => {
+  const attrRecord = attrs as Record<string, unknown>;
+  const input: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(attrRecord)) {
+    if (key === 'class' || key === 'style' || key.startsWith('data-') || key === 'id' || key === 'name') {
+      continue;
+    }
+    input[key] = value;
+  }
+  return input;
+});
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'normal',