srcdev-nuxt-forms 0.0.17 → 0.0.18

package/components/forms/input-text/InputTextField.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <input type="text" class="input-text" v-model="formValue" />
+  </div>
+</template>
+<script setup lang="ts">
+console.log('InputText component loaded')
+
+const formValue = ref('')
+
+watchEffect(() => {
+  console.log('Form value changed to: ', formValue.value)
+})
+</script>
+
+<style lang="css">
+.input-text {
+  border: var(--input-border-width-thin) solid var(--input-border);
+  border-radius: var(--input-border-radius);
+  padding: 10px;
+}
+</style>

package/nuxt.config.ts

@@ -7,8 +7,8 @@ export default defineNuxtConfig({
   css: [resolve('./assets/styles/main.css')],
   components: [
     {
-      path: '~/components',
-      pathPrefix: true,
+      path: './components',
+      pathPrefix: false,
     },
   ],
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",

package/pages/index.vue

@@ -5,19 +5,19 @@
         <div>
           <h1>Sample form page</h1>
 
-          <FormsUiFormWrapper width="medium">
+          <FormWrapper width="medium">
             <template #default>
               <form>
                 <p>Form content</p>
-                <FormsUiFormField width="wide" :has-gutter="true">
+                <FormField width="wide" :has-gutter="true">
                   <template #default>
                     <p>Input text</p>
-                    <FormsInputTextCore />
+                    <InputTextCore />
                   </template>
-                </FormsUiFormField>
+                </FormField>
               </form>
             </template>
-          </FormsUiFormWrapper>
+          </FormWrapper>
         </div>
       </template>
     </NuxtLayout>