feat(validation): oppgradere validering (#946)

* feat(nve-combobox): oppdatere combobox (#871)

* feat(nve-combobox): oppdatere combobox

update

getLabel

Co-authored-by: Copilot <copilot@github.com>

* fix fontobserver issue

* fikse bugs + legge til labelText

* oppdatere combobox

* updates

* update disabled

* update hover on tags

---------

Co-authored-by: Copilot <copilot@github.com>

* feat(nve-radio-group): oppdatere radio gruppe (#886)

* feat(nve-radio-group): oppdatere radio gruppe

* update tests

* update color

* feat(nve-textarea): oppdatere textarea (#890)

* feat(nve-textarea): oppdatere textarea

* updated docs

* feat(nve-checkbox): oppdatere sjekkbokser og sjekkboks gruppen (#896)

* feat(nve-checkbox): oppdatere sjekkbokser og sjekkboks gruppen

oppdatere doksene

updates

update

add selected values state

* added tests

* updates afer comments

* feat(nve-input): oppgradere input (#897)

* feat(nve-input): oppgradere input

* added tests

* oppdatere etter review

* feat(validation): oppgradere validering

update

update

* fix the docs

---------

Co-authored-by: Copilot <copilot@github.com>

Author: amish1188

doc-site/.vitepress/config.mts

@@ -96,4 +96,12 @@ export default defineConfig({
       },
     },
   },
+  vite: {
+    resolve: {
+      alias: {
+        '@interfaces': path.resolve(__dirname, '../../src/interfaces'),
+        '@styles': path.resolve(__dirname, '../../src/styles'),
+      },
+    },
+  },
 });

doc-site/.vitepress/theme/index.ts

@@ -20,7 +20,8 @@ import TypographyTable from './components/TypographyTable.vue';
 import { cssTokenState } from './cssTokenState';
 import { useCurrentTheme, Theme } from './composables/useCurrentTheme';
 import NveTableDemo from './components/NveTableDemo.vue';
-
+import { validateForm, rules } from '../../../src/validation/validateForm';
+export { validateForm, rules };
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -65,8 +66,14 @@ export default {
     }
     return h(DefaultTheme.Layout, null, {});
   },
+
   async enhanceApp({ app }) {
     if (!import.meta.env.SSR) {
+      if (typeof window !== 'undefined') {
+        // eksponere validateForm og rules til window for å kunne bruke dem i sandbox
+        (window as typeof window & { validateForm: typeof validateForm }).validateForm = validateForm;
+        (window as typeof window & { rules: typeof rules }).rules = rules;
+      }
       // siden VitePress bygges via SSR, vi må sikre at våre web komponenter lastes ned i nettleseren bare
       // derfor importerer vi alle komponenter når miljø ikke er SSR
       const components = import.meta.glob('../../../src/components/*/*.component.ts');

doc-site/.vitepress/theme/style.css

@@ -138,10 +138,6 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
-.vp-doc a {
-  text-decoration: unset;
-}
-
 nve-message-card p,
 nve-message-card ul {
   margin: 0 !important;
@@ -235,6 +231,11 @@ a:has(nve-link-card) {
   text-decoration: unset;
 }
 
+/* Brukes for å beholde fontfarge på besøkte lenker */
+a.no-visited:visited {
+  color: var(--vp-c-brand-1);
+}
+
 /* Brukes for å overskrive standard lenke visited styling fra eksterne rammeverker. */
 a:visited {
   color: var(--color-interactive-foreground-link-visited);
@@ -249,3 +250,10 @@ a:visited {
   padding: 3px 6px;
   background-color: var(--vp-code-bg);
 }
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-x-small);
+  justify-content: flex-start;
+}

doc-site/components/Komponentoversikt.md

@@ -237,13 +237,6 @@ nodeId er ID til komponent-sida i Figma. Den ligger som en parameter i URL'en ti
     statusDesign: 'Ferdig',
     statusCode: 'Ferdig'
   },
-  {
-    name: 'nve-option',
-    nodeId: undefined,
-    description: undefined,
-    statusDesign: 'Ferdig',
-    statusCode: 'Ferdig'
-  },
   {
     name: 'nve-navbar',
     nodeId: '203-17',
@@ -286,13 +279,6 @@ nodeId er ID til komponent-sida i Figma. Den ligger som en parameter i URL'en ti
     statusDesign: 'Ferdig',
     statusCode: 'Ferdig'
   },
-  {
-    name: 'nve-radio-button',
-    nodeId: '4229-83173',
-    description: undefined,
-    statusDesign: 'Ikke påbegynt',
-    statusCode: 'Ferdig'
-  },
   {
     name: 'nve-radio-group',
     nodeId: '4229-83173',
@@ -321,13 +307,6 @@ nodeId er ID til komponent-sida i Figma. Den ligger som en parameter i URL'en ti
     statusDesign: 'Skal revideres',
     statusCode: 'Ikke påbegynt'
   },
-  {
-    name: 'nve-select',
-    nodeId: '4229-82274',
-    description: 'Dropdown-list / rullgardin',
-    statusDesign: 'Ferdig',
-    statusCode: 'Trenger kvalitetssjekk'
-  },
   {
     name: 'nve-skeleton',
     nodeId: '4229-83175',

doc-site/components/nve-carousel-item.md

@@ -84,10 +84,14 @@ Du kan også legge andre ting enn bilder i `nve-carousel-item`.
     <div>
       <h1>Velg språk / choose language</h1>
       <br />
-      <nve-select label="Språk/language">
-        <nve-option value="valg1">Norsk</nve-option>
-        <nve-option value="valg2">Engelsk</nve-option>
-      </nve-select>
+      <nve-combobox
+        label="Språk/language"
+        options='[
+    { "value":"nb","id": "nb","label": "Norsk" },
+    { "value":"en","id": "en","label": "Engelsk" },
+     ]'
+      >
+      </nve-combobox>
     </div>
   </nve-carousel-item>
   <nve-carousel-item>

doc-site/components/nve-carousel.md

@@ -318,10 +318,14 @@ Du kan også legge andre ting enn bilder i `nve-carousel-item`.
     <div>
       <h1>Velg språk / choose language</h1>
       <br />
-      <nve-select label="Språk/language">
-        <nve-option value="valg1">Norsk</nve-option>
-        <nve-option value="valg2">Engelsk</nve-option>
-      </nve-select>
+      <nve-combobox
+        label="Språk/language"
+        options='[
+        { "value":"nb","id": "nb","label": "Norsk" },
+        { "value":"en","id": "en","label": "Engelsk" },
+        ]'
+      >
+      </nve-combobox>
     </div>
   </nve-carousel-item>
   <nve-carousel-item>