Combine nuxt forms

.github/workflows/test.yml

@@ -0,0 +1,54 @@
+name: Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18, 20]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test -- --run
+
+      - name: Run linting
+        run: npm run lint
+
+  build:
+    runs-on: ubuntu-latest
+    needs: test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build

.gitignore

@@ -10,6 +10,10 @@ framework
 dist
 .DS_Store
 
+# Coverage reports
+coverage/
+*.lcov
+
 # Yarn
 .yarn/cache
 .yarn/*state*

.nuxtrc

@@ -1 +1,2 @@
-typescript.includeWorkspace = true
+typescript.includeWorkspace=true
+setups.@nuxt/test-utils="3.23.0"

.prettierrc

@@ -3,7 +3,7 @@
   "singleQuote": false,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "semi": false,
+  "semi": true,
   "vueIndentScriptAndStyle": false,
   "htmlWhitespaceSensitivity": "ignore"
 }

README.md

@@ -1,5 +1,9 @@
 # SRCDEV Nuxt Components
 
+[![Tests](https://github.com/simoncornforth/nuxt-components/workflows/Tests/badge.svg)](https://github.com/simoncornforth/nuxt-components/actions/workflows/test.yml)
+[![npm version](https://badge.fury.io/js/srcdev-nuxt-components.svg)](https://badge.fury.io/js/srcdev-nuxt-components)
+[![License](https://img.shields.io/npm/l/srcdev-nuxt-components.svg)](https://github.com/simoncornforth/nuxt-components/blob/main/LICENSE)
+
 ## NOTE
 
 Althought this repo is public and feel free to do what you wish with it, this has been developed for use with websites we develop.
@@ -13,7 +17,7 @@ npm install --save srcdev-nuxt-components
 ```ts
 defineNuxtConfig({
   extends: "srcdev-nuxt-components",
-})
+});
 ```
 
 ## Styles Architecture

app/assets/styles/components/forms/components/_form-fieldset.css

@@ -0,0 +1,36 @@
+.form-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  &.single-checkbox-fieldset {
+  }
+
+  &.multiple-checkboxes-fieldset {
+  }
+
+  &.multiple-radiobuttons-fieldset {
+  }
+
+  .form-fieldset-legend {
+    color: var(--form-fieldset-legend-color);
+    margin-block: 0.8rem;
+    font-size: var(--step-5);
+    font-weight: normal;
+    line-height: 1.5;
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-fieldset-description {
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
+  }
+
+  .form-fieldset-content {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+}

app/assets/styles/components/forms/components/_input-button.css

@@ -0,0 +1,65 @@
+.input-button-core {
+  gap: var(--form-button-icon-gap);
+  border-radius: var(--form-input-border-radius);
+
+  padding-inline: var(--form-button-padding-inline);
+  padding-block-start: var(--form-element-padding-block-start);
+  padding-block-end: var(--form-element-padding-block-end);
+
+  box-shadow: var(--box-shadow-off);
+  background-color: var(--theme-button-surface);
+  border: var(--form-element-border-width) solid var(--theme-button-border);
+  color: var(--theme-button-text);
+  outline: var(--form-element-outline-width) solid var(--theme-button-outline);
+  outline-offset: var(--form-element-outline-offset-focus);
+
+  &:hover {
+    background-color: var(--theme-button-surface-hover);
+    border-color: var(--theme-button-border-hover);
+    color: var(--theme-button-text-hover);
+    outline-color: var(--theme-button-outline-hover);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  &:focus-visible {
+    background-color: var(--theme-button-surface-hover);
+    border-color: var(--theme-button-border-hover);
+    color: var(--theme-button-text-focus);
+    outline-color: var(--theme-button-outline-focus);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  &[readonly] {
+    opacity: 0.5;
+    &:hover,
+    &:focus-visible {
+      cursor: not-allowed;
+    }
+  }
+
+  &.icon-only {
+    aspect-ratio: 1;
+    height: var(--form-icon-only-button-size);
+    width: var(--form-icon-only-button-size);
+    margin: 0;
+    padding: 0;
+  }
+
+  .btn-text {
+    display: inline-block;
+    white-space: nowrap;
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+  }
+
+  .btn-icon {
+    display: flex;
+    .icon {
+      aspect-ratio: 1;
+      display: inline-block;
+      height: var(--form-icon-size);
+      width: var(--form-icon-size);
+      color: var(--theme-button-icon-color);
+    }
+  }
+}