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

package/src/components/VgIcon.vue

@@ -1,54 +1,54 @@
-<template>
-  <svg v-if="custom" class="icon-svg" :focusable="focusable" :aria-hidden="titleTekst === ''">
-    <title v-if="title" xmlns="http://www.w3.org/2000/svg">{{ title }}</title>
-    <use :xlink:href="`#${icon}`"></use>
-  </svg>
-  <InlineSvg v-else-if="iconSrc" :src="iconSrc" class="icon icon-svg" :title="titleTekst" :focusable="focusable" :aria-hidden="titleTekst === ''" />
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import InlineSvg from 'vue-inline-svg';
-
-const props = defineProps({
-  icon: {
-    type: String,
-    required: true
-  },
-  focusable: {
-    type: String,
-    default: 'false'
-  },
-  title: {
-    type: String,
-    default: undefined
-  }
-});
-
-const siteIkoner = inject('siteIkoner');
-
-const titleTekst = computed(() => props.title || '');
-
-const custom = computed((): boolean => !!iconSrc.value?.includes('<symbol'));
-
-const iconSrc = computed(() => {
-  let resolved = siteIkoner ? (siteIkoner as { [key: string]: string })[props.icon] : null;
-  if (props.icon && !resolved) {
-    try {
-      const path = new URL(`../assets/icons/${props.icon}.svg`, import.meta.url).href;
-      if (path.endsWith('undefined')) {
-        throw Error('invalid URL');
-      }
-      resolved = path;
-    } catch {
-      // eslint-disable-next-line no-console
-      console.warn(`Unable to resolve path for icon: ${props.icon}.svg`);
-    }
-  }
-  return resolved;
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgIcon.scss';
-</style>
+<template>
+  <svg v-if="custom" class="icon-svg" :focusable="focusable" :aria-hidden="titleTekst === ''">
+    <title v-if="title" xmlns="http://www.w3.org/2000/svg">{{ title }}</title>
+    <use :xlink:href="`#${icon}`"></use>
+  </svg>
+  <InlineSvg v-else-if="iconSrc" :src="iconSrc" class="icon icon-svg" :title="titleTekst" :focusable="focusable" :aria-hidden="titleTekst === ''" />
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import InlineSvg from 'vue-inline-svg';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  focusable: {
+    type: String,
+    default: 'false'
+  },
+  title: {
+    type: String,
+    default: undefined
+  }
+});
+
+const siteIkoner = inject('siteIkoner');
+
+const titleTekst = computed(() => props.title || '');
+
+const custom = computed((): boolean => !!iconSrc.value?.includes('<symbol'));
+
+const iconSrc = computed(() => {
+  let resolved = siteIkoner ? (siteIkoner as { [key: string]: string })[props.icon] : null;
+  if (props.icon && !resolved) {
+    try {
+      const path = new URL(`../assets/icons/${props.icon}.svg`, import.meta.url).href;
+      if (path.endsWith('undefined')) {
+        throw Error('invalid URL');
+      }
+      resolved = path;
+    } catch {
+      // eslint-disable-next-line no-console
+      console.warn(`Unable to resolve path for icon: ${props.icon}.svg`);
+    }
+  }
+  return resolved;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgIcon.scss';
+</style>

package/src/components/VgKalturaVideo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <iframe
+      v-if="playVideo && videoUrl"
+      :src="videoUrl"
+      :alt="alt"
+      class="video-frame"
+      title="Kaltura afspiller"
+      allow="autoplay"
+      allowfullscreen
+      webkitallowfullscreen
+      mozAllowFullScreen
+      data-testid="video-frame"
+    />
+    <slot name="preview" :thumbnail-url="thumbnailUrl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  playVideo: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const videoUrl = computed(() => {
+  let link = props.src;
+  const autoPlay = 'flashvars[autoPlay]';
+  if (!link.includes(autoPlay)) {
+    link = addQuerystring(link, `${autoPlay}=true`);
+  }
+  return link;
+});
+
+const thumbnailUrl = computed<string>(() => {
+  let url = '';
+  const groups = props.src.match(/https:\/\/(.*)\/p\/(\d*)\/.*?.*entry_id=([a-zA-Z0-9_]+)(?=&|$)/); // NOSONAR
+  if (groups?.length === 4) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, domain, partnerId, entryId] = groups;
+    url = `https://${domain}/p/${partnerId}/thumbnail/entry_id/${entryId}/width/800/quality/100`;
+  }
+  return url;
+});
+
+function addQuerystring(url: string, query: string): string {
+  const firstParamPrefix = '?';
+  const subsequentParamPrefix = '&';
+  if (query.indexOf(firstParamPrefix) === 0 || query.indexOf(subsequentParamPrefix) === 0) {
+    query = query.substring(1);
+  }
+  const qsPrefix = url.indexOf(firstParamPrefix) > 0 ? subsequentParamPrefix : firstParamPrefix;
+  return url + qsPrefix + query;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/components/VgListe.vue

@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <div class="udvidet-cardgruppe udvidet-cardgruppe-liste px-0">
-      <p>{{ resultsText }}</p>
-      <div class="row cardrow">
-        <slot />
-      </div>
-    </div>
-    <div v-if="antal > dataSlice.length" class="d-flex justify-content-center">
-      <div v-if="useSpinner && pending">
-        <slot name="spinner">
-          <div class="spinner" />
-        </slot>
-      </div>
-      <button v-else class="button centered-button button-secondary" type="button" data-testid="button-load" @click="onClick">
-        {{ $t('content.application.emnelandningside.button.visflere') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ParamType } from '@/utils/tekstnoegle-util';
-import { computed, inject, nextTick, PropType, ref, watch } from 'vue';
-
-const emits = defineEmits(['load-slice']);
-const props = defineProps({
-  titel: {
-    type: String,
-    required: false,
-    default: undefined
-  },
-  antal: {
-    type: Number,
-    required: true
-  },
-  useSpinner: {
-    type: Boolean,
-    default: true
-  },
-  dataSlice: {
-    type: Array as PropType<any>,
-    required: true
-  }
-});
-
-const $t: (tekstnoegle: string, params?: ParamType) => string = inject('$t')!;
-
-const pending = ref(false);
-
-const resultsText = computed(() => $t('content.applikation.cardliste.results.text', [props.dataSlice.length, props.antal ?? 0]));
-
-const onClick = () => {
-  pending.value = true;
-  emits('load-slice');
-};
-
-watch(
-  () => props.dataSlice,
-  async (newDataSlice, oldDataSlice) => {
-    if (newDataSlice > oldDataSlice) {
-      pending.value = false;
-      await nextTick();
-      const containerElement = document.querySelector('.applikation-container .udvidet-cardgruppe-liste');
-      containerElement?.querySelectorAll<HTMLElement>('.udvidet-cardgruppe-card')[oldDataSlice.length].focus();
-    }
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgListe.scss';
-</style>
+<template>
+  <div>
+    <div class="udvidet-cardgruppe udvidet-cardgruppe-liste px-0">
+      <p>{{ resultsText }}</p>
+      <div class="row cardrow">
+        <slot />
+      </div>
+    </div>
+    <div v-if="antal > dataSlice.length" class="d-flex justify-content-center">
+      <div v-if="useSpinner && pending">
+        <slot name="spinner">
+          <div class="spinner" />
+        </slot>
+      </div>
+      <button v-else class="button centered-button button-secondary" type="button" data-testid="button-load" @click="onClick">
+        {{ $t('content.application.emnelandningside.button.visflere') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ParamType } from '@/utils/tekstnoegle-util';
+import { computed, inject, nextTick, PropType, ref, watch } from 'vue';
+
+const emits = defineEmits(['load-slice']);
+const props = defineProps({
+  titel: {
+    type: String,
+    required: false,
+    default: undefined
+  },
+  antal: {
+    type: Number,
+    required: true
+  },
+  useSpinner: {
+    type: Boolean,
+    default: true
+  },
+  dataSlice: {
+    type: Array as PropType<any>,
+    required: true
+  }
+});
+
+const $t: (tekstnoegle: string, params?: ParamType) => string = inject('$t')!;
+
+const pending = ref(false);
+
+const resultsText = computed(() => $t('content.applikation.cardliste.results.text', [props.dataSlice.length, props.antal ?? 0]));
+
+const onClick = () => {
+  pending.value = true;
+  emits('load-slice');
+};
+
+watch(
+  () => props.dataSlice,
+  async (newDataSlice, oldDataSlice) => {
+    if (newDataSlice > oldDataSlice) {
+      pending.value = false;
+      await nextTick();
+      const containerElement = document.querySelector('.applikation-container .udvidet-cardgruppe-liste');
+      containerElement?.querySelectorAll<HTMLElement>('.udvidet-cardgruppe-card')[oldDataSlice.length].focus();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgListe.scss';
+</style>

package/src/components/VgListeCard.vue

@@ -1,41 +1,41 @@
-<template>
-  <div class="card-container">
-    <div class="udvidet-card-container">
-      <a role="button" tabindex="0" class="udvidet-cardgruppe-card liste-layout" data-testid="link" :title="titel" :aria-label="titel">
-        <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 line-limit mt-0 mb-3 break-word" data-testid="titel">{{ titel }}</h3>
-              </div>
-              <pre class="mt-0 mb-3 break-word line-limit">
-                <slot/>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  label: {
-    type: String,
-    required: false,
-    default: undefined
-  },
-  titel: {
-    type: String,
-    required: true
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/custom/_vgCard.scss';
-</style>
+<template>
+  <div class="card-container">
+    <div class="udvidet-card-container">
+      <a role="button" tabindex="0" class="udvidet-cardgruppe-card liste-layout" data-testid="link" :title="titel" :aria-label="titel">
+        <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 line-limit mt-0 mb-3 break-word" data-testid="titel">{{ titel }}</h3>
+              </div>
+              <pre class="mt-0 mb-3 break-word line-limit">
+                <slot/>
+              </pre>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: undefined
+  },
+  titel: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgCard.scss';
+</style>

package/src/components/VgLoginButton.vue

@@ -1,7 +1,7 @@
-<template>
-  <button type="button" class="button mitid-button d-inline-flex align-items-center"><VgIcon icon="mitId" class="mr-4" />Log ind med MitID</button>
-</template>
-
-<script setup lang="ts">
-import VgIcon from '@/components/VgIcon.vue';
-</script>
+<template>
+  <button type="button" class="button mitid-button d-inline-flex align-items-center"><VgIcon icon="mitId" class="mr-4" />Log ind med MitID</button>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+</script>