@erst-vg/vg-design-wrapper 2.0.2 → 2.1.0

package/src/components/VgAccordion.vue

@@ -1,97 +1,97 @@
-<template>
-  <div>
-    <button
-      v-if="bulk"
-      type="button"
-      class="accordion-bulk-button"
-      data-accordion-bulk-expand="true"
-      data-testid="button-bulk"
-      data-cy="button-bulk"
-      @click="$emit('toggle-bulk')"
-    >
-      Åbn alle
-    </button>
-    <ul :id="`accordion-list-${accordionListId}`" class="accordion vg-accordion">
-      <li v-for="(data, index) in accordions" :key="index" data-testid="accordion" data-cy="accordion">
-        <div class="top-wrapper">
-          <slot name="before" :data="data" :index="index" />
-          <component :is="heading" class="my-0">
-            <button
-              type="button"
-              class="accordion-button"
-              :aria-expanded="false"
-              :aria-controls="`accordion-${accordionListId}-${index}`"
-              @click="toggle($event, index)"
-            >
-              <span class="accordion-title h4">
-                <template v-if="hasKey('titel', index)">{{ data.titel }}</template>
-                <slot v-else name="titel" :data="data" :index="index" />
-              </span>
-              <VgIcon class="open" icon="accordionOpen" />
-              <VgIcon class="close" icon="accordionClose" />
-            </button>
-          </component>
-        </div>
-        <div :id="`accordion-${accordionListId}-${index}`" :aria-hidden="true" class="accordion-content" data-testid="accordion-content">
-          <template v-if="hasKey('indhold', index)">
-            <p>{{ data.indhold }}</p>
-          </template>
-          <slot v-else name="indhold" :data="data" :index="index" />
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import VgIcon from '@/components/VgIcon.vue';
-import * as DKFDS from 'dkfds';
-import { computed, onMounted, PropType } from 'vue';
-
-const emits = defineEmits(['toggle', 'toggle-bulk']);
-
-const props = defineProps({
-  accordions: {
-    type: Array as PropType<any>,
-    default: null
-  },
-  id: {
-    type: String,
-    default: undefined,
-    required: false
-  },
-  bulk: {
-    type: Boolean,
-    default: false
-  },
-  heading: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
-    default: 'h2'
-  }
-});
-
-const accordionListId = computed((): string => props.id ?? Math.random().toString().replace('.', ''));
-
-onMounted(() => {
-  const selector = `#accordion-list-${accordionListId.value}`;
-  const elm = document.querySelector(`.applikation-container ${selector}`);
-
-  if (!elm) {
-    // eslint-disable-next-line no-console
-    console.warn(`vg-design-wrapper: kan ikke finde accordion element ud fra selector ${selector}`);
-  } else {
-    new DKFDS.Accordion(elm).init();
-  }
-});
-
-const hasKey = (key: string, index: number): boolean => !!props.accordions[index]?.[key];
-
-const toggle = (event: Event, index: number) => {
-  const button = event.target as HTMLButtonElement;
-  emits('toggle', button.ariaExpanded === 'false', accordionListId.value, index);
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgAccordion.scss';
-</style>
+<template>
+  <div>
+    <button
+      v-if="bulk"
+      type="button"
+      class="accordion-bulk-button"
+      data-accordion-bulk-expand="true"
+      data-testid="button-bulk"
+      data-cy="button-bulk"
+      @click="$emit('toggle-bulk')"
+    >
+      Åbn alle
+    </button>
+    <ul :id="`accordion-list-${accordionListId}`" class="accordion vg-accordion">
+      <li v-for="(data, index) in accordions" :key="index" data-testid="accordion" data-cy="accordion">
+        <div class="top-wrapper">
+          <slot name="before" :data="data" :index="index" />
+          <component :is="heading" class="my-0">
+            <button
+              type="button"
+              class="accordion-button"
+              :aria-expanded="false"
+              :aria-controls="`accordion-${accordionListId}-${index}`"
+              @click="toggle($event, index)"
+            >
+              <span class="accordion-title h4">
+                <template v-if="hasKey('titel', index)">{{ data.titel }}</template>
+                <slot v-else name="titel" :data="data" :index="index" />
+              </span>
+              <VgIcon class="open" icon="accordionOpen" />
+              <VgIcon class="close" icon="accordionClose" />
+            </button>
+          </component>
+        </div>
+        <div :id="`accordion-${accordionListId}-${index}`" :aria-hidden="true" class="accordion-content" data-testid="accordion-content">
+          <template v-if="hasKey('indhold', index)">
+            <p>{{ data.indhold }}</p>
+          </template>
+          <slot v-else name="indhold" :data="data" :index="index" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+import * as DKFDS from 'dkfds';
+import { computed, onMounted, PropType } from 'vue';
+
+const emits = defineEmits(['toggle', 'toggle-bulk']);
+
+const props = defineProps({
+  accordions: {
+    type: Array as PropType<any>,
+    default: null
+  },
+  id: {
+    type: String,
+    default: undefined,
+    required: false
+  },
+  bulk: {
+    type: Boolean,
+    default: false
+  },
+  heading: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
+    default: 'h2'
+  }
+});
+
+const accordionListId = computed((): string => props.id ?? Math.random().toString().replace('.', ''));
+
+onMounted(() => {
+  const selector = `#accordion-list-${accordionListId.value}`;
+  const elm = document.querySelector(`.applikation-container ${selector}`);
+
+  if (!elm) {
+    // eslint-disable-next-line no-console
+    console.warn(`vg-design-wrapper: kan ikke finde accordion element ud fra selector ${selector}`);
+  } else {
+    new DKFDS.Accordion(elm).init();
+  }
+});
+
+const hasKey = (key: string, index: number): boolean => !!props.accordions[index]?.[key];
+
+const toggle = (event: Event, index: number) => {
+  const button = event.target as HTMLButtonElement;
+  emits('toggle', button.ariaExpanded === 'false', accordionListId.value, index);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgAccordion.scss';
+</style>

package/src/components/VgButton.vue

@@ -1,18 +1,18 @@
-<template>
-  <button type="button" class="button">
-    <VgIcon v-if="icon" :icon="icon" />
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import VgIcon from '@/components/VgIcon.vue';
-
-defineProps({
-  icon: {
-    type: String,
-    required: false,
-    default: ''
-  }
-});
-</script>
+<template>
+  <button type="button" class="button">
+    <VgIcon v-if="icon" :icon="icon" />
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+
+defineProps({
+  icon: {
+    type: String,
+    required: false,
+    default: ''
+  }
+});
+</script>

package/src/components/VgButtons.vue

@@ -1,27 +1,27 @@
-<template>
-  <div>
-    <h4>Primærknap</h4>
-    <div class="d-md-flex">
-      <button type="button" class="button button-primary">knap</button>
-      <button type="button" class="button button-primary disabled">knap</button>
-    </div>
-    <h4>Sekundærknapper</h4>
-    <div class="d-md-flex">
-      <button type="button" class="button button-secondary">knap</button>
-      <button type="button" class="button button-secondary disabled">knap</button>
-    </div>
-    <h4>Tertiærknapper</h4>
-    <div>Anvendes ikke</div>
-    <h4>Link knap</h4>
-    <VgButton icon="arrowLeft" class="button-link">Foobar</VgButton>
-    <h4>Knap med ikon</h4>
-    <VgButton icon="arrowLeft" class="button-primary">Knap med ikon </VgButton>
-    <h4>Login-knap med MitID design</h4>
-    <VgLoginButton />
-  </div>
-</template>
-
-<script setup lang="ts">
-import VgButton from '@/components/VgButton.vue';
-import VgLoginButton from '@/components/VgLoginButton.vue';
-</script>
+<template>
+  <div>
+    <h4>Primærknap</h4>
+    <div class="d-md-flex">
+      <button type="button" class="button button-primary">knap</button>
+      <button type="button" class="button button-primary disabled">knap</button>
+    </div>
+    <h4>Sekundærknapper</h4>
+    <div class="d-md-flex">
+      <button type="button" class="button button-secondary">knap</button>
+      <button type="button" class="button button-secondary disabled">knap</button>
+    </div>
+    <h4>Tertiærknapper</h4>
+    <div>Anvendes ikke</div>
+    <h4>Link knap</h4>
+    <VgButton icon="arrowLeft" class="button-link">Foobar</VgButton>
+    <h4>Knap med ikon</h4>
+    <VgButton icon="arrowLeft" class="button-primary">Knap med ikon </VgButton>
+    <h4>Login-knap med MitID design</h4>
+    <VgLoginButton />
+  </div>
+</template>
+
+<script setup lang="ts">
+import VgButton from '@/components/VgButton.vue';
+import VgLoginButton from '@/components/VgLoginButton.vue';
+</script>

package/src/components/VgCard.vue

@@ -1,96 +1,96 @@
-<template>
-  <div class="udvidet-card-container">
-    <a
-      :href="link.href"
-      :target="link.external ? '_blank' : undefined"
-      :title="link.title"
-      class="udvidet-cardgruppe-card udvidet-card"
-      :class="{ 'without-image': !billede?.url }"
-    >
-      <div v-if="showBilleder" class="picture-container">
-        <div class="picture-wrapper">
-          <div
-            v-if="billede?.url"
-            role="img"
-            :aria-label="billede.label"
-            class="card-picture"
-            :data-src="billede?.url"
-            lazy="loaded"
-            data-testid="billede"
-            :style="{ backgroundImage: `url('${billede?.url}')` }"
-          ></div>
-          <div v-else class="picture-empty" />
-        </div>
-      </div>
-      <div class="text-wrapper">
-        <div>
-          <div class="text">
-            <div v-if="label" class="label-container">
-              <p class="h6 m-0 show-spaces break-word" data-testid="label">{{ label }}</p>
-            </div>
-            <div class="card-titel">
-              <h3 class="h4 mt-0 mb-3 break-word" data-testid="overskrift">{{ overskrift }}</h3>
-            </div>
-            <pre class="mt-0 mb-3 break-word">
-              <slot name="text"/>
-            </pre>
-          </div>
-        </div>
-        <div v-if="linkText" class="bottom mt-3">
-          <div class="fremhaevet-link" :class="{ 'line-limit': true }" data-testid="link">
-            <span class="mr-3" data-testid="link-text">{{ linkText }}</span>
-            <VgIcon
-              :icon="link.external ? 'openInNew' : 'highlightArrow'"
-              :class="{
-                'external-link-icon': link.external,
-                'link-icon': true
-              }"
-            />
-          </div>
-        </div>
-      </div>
-    </a>
-  </div>
-</template>
-
-<script setup lang="ts">
-import VgIcon from '@/components/VgIcon.vue';
-import { PropType } from 'vue';
-defineProps({
-  billede: {
-    type: Object as PropType<{
-      url: string;
-      label?: string;
-    }>,
-    default: undefined
-  },
-  showBilleder: {
-    type: Boolean,
-    default: true
-  },
-  label: {
-    type: String,
-    default: undefined
-  },
-  overskrift: {
-    type: String,
-    required: true
-  },
-  linkText: {
-    type: String,
-    default: undefined
-  },
-  link: {
-    type: Object as PropType<{
-      href: string;
-      title: string;
-      external: boolean;
-    }>,
-    required: true
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgCard.scss';
-</style>
+<template>
+  <div class="udvidet-card-container">
+    <a
+      :href="link.href"
+      :target="link.external ? '_blank' : undefined"
+      :title="link.title"
+      class="udvidet-cardgruppe-card udvidet-card"
+      :class="{ 'without-image': !billede?.url }"
+    >
+      <div v-if="showBilleder" class="picture-container">
+        <div class="picture-wrapper">
+          <div
+            v-if="billede?.url"
+            role="img"
+            :aria-label="billede.label"
+            class="card-picture"
+            :data-src="billede?.url"
+            lazy="loaded"
+            data-testid="billede"
+            :style="{ backgroundImage: `url('${billede?.url}')` }"
+          ></div>
+          <div v-else class="picture-empty" />
+        </div>
+      </div>
+      <div class="text-wrapper">
+        <div>
+          <div class="text">
+            <div v-if="label" class="label-container">
+              <p class="h6 m-0 show-spaces break-word" data-testid="label">{{ label }}</p>
+            </div>
+            <div class="card-titel">
+              <h3 class="h4 mt-0 mb-3 break-word" data-testid="overskrift">{{ overskrift }}</h3>
+            </div>
+            <pre class="mt-0 mb-3 break-word">
+              <slot name="text"/>
+            </pre>
+          </div>
+        </div>
+        <div v-if="linkText" class="bottom mt-3">
+          <div class="fremhaevet-link" :class="{ 'line-limit': true }" data-testid="link">
+            <span class="mr-3" data-testid="link-text">{{ linkText }}</span>
+            <VgIcon
+              :icon="link.external ? 'openInNew' : 'highlightArrow'"
+              :class="{
+                'external-link-icon': link.external,
+                'link-icon': true
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+import { PropType } from 'vue';
+defineProps({
+  billede: {
+    type: Object as PropType<{
+      url: string;
+      label?: string;
+    }>,
+    default: undefined
+  },
+  showBilleder: {
+    type: Boolean,
+    default: true
+  },
+  label: {
+    type: String,
+    default: undefined
+  },
+  overskrift: {
+    type: String,
+    required: true
+  },
+  linkText: {
+    type: String,
+    default: undefined
+  },
+  link: {
+    type: Object as PropType<{
+      href: string;
+      title: string;
+      external: boolean;
+    }>,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgCard.scss';
+</style>

package/src/components/VgCardGroup.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="udvidet-cardgruppe">
-    <h2 class="udvidet-cardgruppe__titel mt-0 mb-6" data-testid="titel">{{ titel }}</h2>
-    <div class="row cardrow">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  titel: {
-    type: String,
-    required: false,
-    default: undefined
-  }
-});
-</script>
+<template>
+  <div class="udvidet-cardgruppe">
+    <h2 class="udvidet-cardgruppe__titel mt-0 mb-6" data-testid="titel">{{ titel }}</h2>
+    <div class="row cardrow">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  titel: {
+    type: String,
+    required: false,
+    default: undefined
+  }
+});
+</script>

package/src/components/VgDesignWrapper.vue

@@ -1,45 +1,45 @@
-<template>
-  <div class="applikation-container" data-testid="applikation-container">
-    <div v-if="customSvgIcons.length > 0" class="hide-base-svg">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <svg xmlns="http://www.w3.org/2000/svg" v-html="customSvgIcons"></svg>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, ref, Ref } from 'vue';
-const siteIkoner = inject('siteIkoner');
-
-const customIcons: Ref<string[]> = ref([]);
-
-const customSvgIcons = computed((): string => customIcons.value.join(''));
-
-onMounted(() => {
-  if (siteIkoner) {
-    const parser = new DOMParser();
-    const svgSymbol = 'symbol';
-    Object.entries(siteIkoner).forEach(([key, value]) => {
-      if (value.includes(`<${svgSymbol}`)) {
-        const doc = parser.parseFromString(value, 'image/svg+xml');
-        const symbolEl = doc.querySelector(svgSymbol);
-        if (symbolEl) {
-          // Sæt ID så SVG kan vises med xlink:href
-          symbolEl.id = key;
-          customIcons.value.push(symbolEl.outerHTML);
-        }
-      }
-    });
-  }
-});
-</script>
-
-<style lang="scss">
-// Importer de forskellige komponenter, så leverandør af 3parts applikation ikke selv skal gøre det.
-@use '@/styles/vg/pagination/_vg-pagination.scss';
-@use '@/styles/vg/accordion/_vg-accordion.scss';
-@use '@/styles/vg/buttons/_vg-buttons.scss';
-@use '@/styles/vg/card/_vg-cardText.scss';
-@use '@/styles/vg/card/_vg-udvidedecardgrupper.scss';
-</style>
+<template>
+  <div class="applikation-container" data-testid="applikation-container">
+    <div v-if="customSvgIcons.length > 0" class="hide-base-svg">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <svg xmlns="http://www.w3.org/2000/svg" v-html="customSvgIcons"></svg>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, Ref } from 'vue';
+const siteIkoner = inject('siteIkoner');
+
+const customIcons: Ref<string[]> = ref([]);
+
+const customSvgIcons = computed((): string => customIcons.value.join(''));
+
+onMounted(() => {
+  if (siteIkoner) {
+    const parser = new DOMParser();
+    const svgSymbol = 'symbol';
+    Object.entries(siteIkoner).forEach(([key, value]) => {
+      if (value.includes(`<${svgSymbol}`)) {
+        const doc = parser.parseFromString(value, 'image/svg+xml');
+        const symbolEl = doc.querySelector(svgSymbol);
+        if (symbolEl) {
+          // Sæt ID så SVG kan vises med xlink:href
+          symbolEl.id = key;
+          customIcons.value.push(symbolEl.outerHTML);
+        }
+      }
+    });
+  }
+});
+</script>
+
+<style lang="scss">
+// Importer de forskellige komponenter, så leverandør af 3parts applikation ikke selv skal gøre det.
+@use '@/styles/vg/pagination/_vg-pagination.scss';
+@use '@/styles/vg/accordion/_vg-accordion.scss';
+@use '@/styles/vg/buttons/_vg-buttons.scss';
+@use '@/styles/vg/card/_vg-cardText.scss';
+@use '@/styles/vg/card/_vg-udvidedecardgrupper.scss';
+</style>