srcdev-nuxt-forms 0.0.5 → 0.0.7

package/README.md

@@ -1,4 +1,4 @@
-# Nuxt Layer Starter
+# Nuxt Forms Layer
 
 Create Nuxt extendable layer with this GitHub template.
 
@@ -20,6 +20,13 @@ Running `pnpm dev` will prepare and boot `.playground` directory, which imports
 
 ## Distributing your theme
 
+### Release it
+CLI Prompt assisted release and versioning
+
+```bash
+npm run release
+```
+
 Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
 
 To do so, you only have to check if `files` in `package.json` are valid, then run:

package/assets/styles/forms/index.css

@@ -0,0 +1 @@
+@import "./variables/_theme.css";

package/assets/styles/forms/variables/_theme.css

@@ -0,0 +1,25 @@
+:root {
+    --form-bg-color: #f9f9f9; /* Background color for form */
+    --form-border-color: #cccccc; /* Border color for form elements */
+    --form-text-color: #333333; /* Text color for form elements */
+    --form-placeholder-color: #888888; /* Placeholder text color */
+    --form-focus-border-color: #0076c6; /* Border color on focus */
+    --form-button-bg-color: #0076c6; /* Button background color */
+    --form-button-text-color: #ffffff; /* Button text color */
+    --form-error-color: #ce0606; /* Error message color */
+    --form-success-color: #008000; /* Success message color */
+    --form-warning-color: #ffcc00; /* Warning message color */
+    --form-info-color: #0076c6; /* Info message color */
+    --form-required-color: #ce0606; /* Required field color */
+    --form-disabled-color: #cccccc; /* Disabled field color */
+    --form-disabled-bg-color: #f9f9f9; /* Disabled field background color */
+    --form-disabled-border-color: #cccccc; /* Disabled field border color */
+    --form-disabled-text-color: #999999; /* Disabled field text color */
+
+    --input-border: #121212;
+
+    --input-border-radius: 4px;
+
+    --input-border-width-thin: 1px;
+    --input-border-width-thick: 2px;
+}

package/assets/styles/main.css

@@ -0,0 +1 @@
+@import "./forms/index.css";

package/assets/styles/variables/_colours.css

@@ -0,0 +1,10 @@
+:root {
+    --colour-primary: #ff0000;
+    --colour-secondary: #00ff00;
+    --colour-tertiary: #0000ff;
+    --colour-quaternary: #ffff00;
+    --colour-quinary: #ff00ff;
+    --colour-senary: #00ffff;
+    --colour-septenary: #000000;
+    --colour-octonary: #ffffff;
+}

package/assets/styles/variables/index.css

@@ -0,0 +1 @@
+@import "./_colours.css";

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

@@ -13,3 +13,11 @@
     });
 
 </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/package.json

@@ -1,23 +1,26 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "./nuxt.config.ts",
   "files": [
+    "assets",
     "components"
   ],
   "scripts": {
-    "dev": "nuxi dev .playground",
-    "build": "nuxt build .playground",
-    "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground",
+    "dev": "nuxi dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
     "lint": "eslint .",
-    "postinstall": "nuxt prepare .playground"
+    "postinstall": "nuxt prepare",
+    "release": "release-it"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.3.13",
     "eslint": "^9.5.0",
     "nuxt": "^3.12.2",
+    "release-it": "^17.4.0",
     "typescript": "^5.5.2"
   }
 }

package/components/HelloWorld.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-const { myLayer } = useAppConfig()
-</script>
-
-<template>
-  <div>
-    <h1>Hello World!</h1>
-    <pre>{{ myLayer }}</pre>
-  </div>
-</template>