@simple-reporting/base 1.0.37 → 1.0.39

package/dev/src/assets/scss/placeholders/grid.scss

@@ -0,0 +1,354 @@
+@use "srl/helpers";
+@use "srl/system";
+@use "srl/grid";
+
+%srl-trim-margins {
+  @include helpers.trim-margins;
+}
+
+%srl-grid-base {
+  @if system.$build == "pdf" {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  } @else {
+    margin-left: auto;
+    margin-right: auto;
+    @include grid.container();
+    @include grid.row();
+  }
+}
+
+%srl-grid-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  display: block;
+}
+
+%srl-regular-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(6);
+    @include grid.offset(3);
+  } @else if system.$build == "pdf" {
+    @include grid.pdf-flex-col(6);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(8, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(8, tablet-ls);
+    @include grid.offset(2, tablet-ls);
+
+    // Desktop
+    @include grid.col(6, desktop);
+    @include grid.offset(3, desktop);
+
+    // Desktop large
+    @include grid.col(6, desktop-large);
+    @include grid.offset(3, desktop-large);
+  }
+}
+
+%srl-wide-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(12);
+    @include grid.offset(0);
+  } @else if system.$build == "pdf" {
+    @include grid.pdf-flex-col(8);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(8, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(12, tablet-ls);
+    @include grid.offset(0, tablet-ls);
+
+    // Desktop
+    @include grid.col(12, desktop);
+    @include grid.offset(0, desktop);
+
+    // Desktop large
+    @include grid.col(12, desktop-large);
+    @include grid.offset(0, desktop-large);
+  }
+}
+
+/*
+  Quote without an image wide with
+*/
+%srl-quote-wide-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(8);
+    @include grid.offset(2);
+  } @else if system.$build == "pdf" {
+    @include grid.pdf-flex-col(8);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(8, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(10, tablet-ls);
+    @include grid.offset(1, tablet-ls);
+
+    // Desktop
+    @include grid.col(8, desktop);
+    @include grid.offset(2, desktop);
+
+    // Desktop large
+    @include grid.col(8, desktop-large);
+    @include grid.offset(2, desktop-large);
+  }
+}
+
+/*
+  Quote with an image regular with
+  Just the image
+*/
+%srl-quote-with-image-image-regular-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(2);
+    @include grid.offset(3);
+  } @else if system.$build == "pdf" {
+    margin-left: grid.calculate-pdf-col-start(3);
+    margin-right: grid.get-gutter-column-gap();
+    width: grid.calculate-pdf-col-span-minus-one-gutter(2);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(3, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(3, tablet-ls);
+    @include grid.offset(2, tablet-ls);
+
+    // Desktop
+    @include grid.col(2, desktop);
+    @include grid.offset(3, desktop);
+
+    // Desktop large
+    @include grid.col(2, desktop-large);
+    @include grid.offset(3, desktop-large);
+  }
+}
+
+/*
+  Quote with an image regular with
+  Just the text
+*/
+%srl-quote-with-image-text-regular-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(4);
+    @include grid.offset(5);
+  } @else if system.$build == "pdf" {
+    width: grid.calculate-pdf-col-span-minus-one-gutter(4);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(5, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(5, tablet-ls);
+    @include grid.offset(5, tablet-ls);
+
+    // Desktop
+    @include grid.col(4, desktop);
+    @include grid.offset(5, desktop);
+
+    // Desktop large
+    @include grid.col(4, desktop-large);
+    @include grid.offset(5, desktop-large);
+  }
+}
+
+/*
+  Quote with an image wide with
+  Just the image
+*/
+%srl-quote-with-image-image-wide-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(2);
+    @include grid.offset(2);
+  } @else if system.$build == "pdf" {
+    margin-left: 0;
+    margin-right: 0;
+    @include grid.pdf-flex-col(2);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(3, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(3, tablet-ls);
+    @include grid.offset(1, tablet-ls);
+
+    // Desktop
+    @include grid.col(2, desktop);
+    @include grid.offset(2, desktop);
+
+    // Desktop large
+    @include grid.col(2, desktop-large);
+    @include grid.offset(2, desktop-large);
+  }
+}
+
+/*
+  Quote with an image wide with
+  Just the text
+*/
+%srl-quote-with-image-text-wide-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(6);
+    @include grid.offset(4);
+  } @else if system.$build == "pdf" {
+    @include grid.pdf-flex-col(6);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(5, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(7, tablet-ls);
+    @include grid.offset(4, tablet-ls);
+
+    // Desktop
+    @include grid.col(6, desktop);
+    @include grid.offset(4, desktop);
+
+    // Desktop large
+    @include grid.col(6, desktop-large);
+    @include grid.offset(4, desktop-large);
+  }
+}
+
+/*
+  Aside width
+*/
+%srl-aside-width {
+  @if system.$build == "xbrl" {
+    @include grid.col(2);
+    @include grid.offset(1);
+  } @else if system.$build == "pdf" {
+    @include grid.pdf-flex-col(2);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(8, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(2, tablet-ls);
+
+    // Desktop
+    @include grid.col(2, desktop);
+    @include grid.offset(1, desktop);
+
+    // Desktop large
+    @include grid.col(2, desktop-large);
+    @include grid.offset(1, desktop-large);
+  }
+}
+
+/*
+  Quote with an image regular with
+  Just the image
+*/
+%srl-cv-header-portrait {
+  @if system.$build == "xbrl" {
+    @include grid.col(2);
+  } @else if system.$build == "pdf" {
+    margin-right: grid.get-gutter-column-gap();
+    width: grid.calculate-pdf-col-span-minus-one-gutter(2);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(3, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(3, tablet-ls);
+
+    // Desktop
+    @include grid.col(2, desktop);
+
+    // Desktop large
+    @include grid.col(2, desktop-large);
+  }
+}
+
+/*
+  Quote with an image regular with
+  Just the text
+*/
+%srl-cv-header-content {
+  @if system.$build == "xbrl" {
+    @include grid.col(4);
+  } @else if system.$build == "pdf" {
+    width: grid.calculate-pdf-col-span-minus-one-gutter(4);
+  } @else {
+    // Mobile
+    @include grid.col(4);
+
+    // Mobile landscape
+    @include grid.col(4, phone-ls);
+
+    // Tablet portrait
+    @include grid.col(5, tablet-pt);
+
+    // Tablet landscape
+    @include grid.col(5, tablet-ls);
+
+    // Desktop
+    @include grid.col(4, desktop);
+
+    // Desktop large
+    @include grid.col(4, desktop-large);
+  }
+}

package/dev/src/assets/scss/web.scss

@@ -1,33 +1,29 @@
 @use "srl";
-@use "placeholders";
 @use "./components/note/accordion";
 
-.srl-grid {
-  @extend %srl-grid-base;
+@include srl.system-add-root-style('srl-header-height', srl.system-size-unit(68));
+@include srl.system-add-root-style('srl-header-height', srl.system-size-unit(101), 'tablet-ls', 'up');
 
-  .srl-grid {
-    @extend %srl-grid-reset;
-  }
+// Set inline background images for media queries
+[style*="--medium-url"] {
+  background-image: var(--medium-url) !important;
 }
 
-.srl-grid__inner {
-  @extend %srl-regular-width;
-
-  .srl-wide-width & {
-    @extend %srl-wide-width;
+@include srl.grid-media-up(tablet-pt) {
+  [style*="--large-url"] {
+    background-image: var(--large-url) !important;
   }
+}
 
-  .srl-quote.srl-wide-width & {
-    @extend %srl-quote-wide-width;
+@include srl.grid-media-up(desktop) {
+  [style*="--xlarge-url"] {
+    background-image: var(--xlarge-url) !important;
   }
 }
 
-.srl-grid__aside {
-  @extend %srl-trim-margins;
-  @extend %srl-aside-width;
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation-name: none !important;
+  }
 }
-
-.srl-grid__content {
-  @extend %srl-trim-margins;
-  @extend %srl-regular-width;
-}

package/dev/src/assets/scss/xbrl.scss

@@ -0,0 +1 @@
+@use "srl";

package/dev/src/components/Button/Default/Action.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, ref, type VNode } from 'vue'
+
+const props = defineProps<{
+  label: string;
+  title?: string;
+  type: 'button' | 'link' | 'submit';
+  callback: () => void;
+  img?: {
+    src: string
+    alt?: string
+  }
+  imgBefore?: {
+    src: string
+    alt?: string
+  }
+  imgAfter?: {
+    src: string
+    alt?: string
+  }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string;
+  svgBefore?: VNode | string;
+  svgAfter?: VNode | string;
+}>();
+
+const classes = computed(() => {
+  return {
+    'srl-button': true,
+    'srl-button--icon': props.icon || props.img || props.svg,
+    'srl-has-icon': props.iconBefore || props.iconAfter || props.imgBefore || props.imgAfter || props.svgBefore || props.svgAfter,
+  }
+})
+
+const $el = ref<HTMLButtonElement>()
+defineExpose({
+  $el
+})
+</script>
+
+<template>
+  <button
+    ref="$el"
+    type="button"
+    :title="props.title"
+    :aria-label="props.icon ? props.label : undefined"
+    :class="classes"
+    @click="props.callback()"
+  >
+    <ButtonDefaultContent
+      :label ="props.label"
+      :img="props.img"
+      :imgBefore="props.imgBefore"
+      :imgAfter="props.imgAfter"
+      :icon="props.icon"
+      :iconBefore="props.iconBefore"
+      :iconAfter="props.iconAfter"
+      :svg="props.svg"
+      :svgBefore="props.svgBefore"
+      :svgAfter="props.svgAfter"
+    />
+  </button>
+</template>

package/dev/src/components/Button/Default/Content.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { h, ref, shallowRef, type VNode, watch } from 'vue'
+
+const props = defineProps<{
+  label: string;
+  img?: {
+    src: string
+    alt?: string
+  }
+  imgBefore?: {
+    src: string
+    alt?: string
+  }
+  imgAfter?: {
+    src: string
+    alt?: string
+  }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string
+  svgBefore?: VNode | string
+  svgAfter?: VNode | string
+}>();
+
+const svgVNode = shallowRef<VNode | null>(null)
+const svgBeforeVNode = shallowRef<VNode | null>(null)
+const svgAfterVNode = shallowRef<VNode | null>(null)
+
+watch(
+  props,
+  async (to) => {
+    // Svg
+    if (typeof to.svg === 'object') {
+      svgVNode.value = to.svg
+    } else if (typeof to.svg === 'string') {
+      let icon = null
+      if (to.svg.startsWith('data:image/svg+xml,')) {
+        icon = decodeURIComponent(to.svg.replace('data:image/svg+xml,', ''))
+      } else if (!to.svg.startsWith('<svg')) {
+        try {
+          const res = await fetch(to.svg)
+          if (!res.ok) {
+            svgVNode.value = null
+            return
+          }
+          icon = await res.text()
+        } catch (e) {
+          svgVNode.value = null
+          return
+        }
+      } else {
+        icon = to.svg
+      }
+
+      if (!icon) {
+        svgVNode.value = null
+        return
+      }
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(icon, 'image/svg+xml')
+      const svg = doc.querySelector('svg')
+      if (!svg) {
+        svgVNode.value = null
+        return
+      }
+
+      const attrs = Object.fromEntries([...svg.attributes].map(attr => [attr.name, attr.value]))
+
+      svgVNode.value = h('svg', {
+        innerHTML: svg.innerHTML,
+        ...attrs
+      })
+    } else {
+      svgVNode.value = null
+    }
+
+    // Svg Before
+    if (typeof to.svgBefore === 'object') {
+      svgBeforeVNode.value = to.svgBefore
+    } else if (typeof to.svgBefore === 'string') {
+      let icon = null
+      if (to.svgBefore.startsWith('data:image/svg+xml,')) {
+        icon = decodeURIComponent(to.svgBefore.replace('data:image/svg+xml,', ''))
+      } else if (!to.svgBefore.startsWith('<svg')) {
+        try {
+          const res = await fetch(to.svgBefore)
+          if (!res.ok) {
+            svgBeforeVNode.value = null
+            return
+          }
+          icon = await res.text()
+        } catch (e) {
+          svgBeforeVNode.value = null
+          return
+        }
+      } else {
+        icon = to.svgBefore
+      }
+
+      if (!icon) {
+        svgBeforeVNode.value = null
+        return
+      }
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(icon, 'image/svg+xml')
+      const svg = doc.querySelector('svg')
+      if (!svg) {
+        svgBeforeVNode.value = null
+        return
+      }
+
+      const attrs = Object.fromEntries([...svg.attributes].map(attr => [attr.name, attr.value]))
+
+      svgBeforeVNode.value = h('svg', {
+        innerHTML: svg.innerHTML,
+        ...attrs
+      })
+    } else {
+      svgBeforeVNode.value = null
+    }
+
+    // Svg After
+    if (typeof to.svgAfter === 'object') {
+      svgAfterVNode.value = to.svgAfter
+    } else if (typeof to.svgAfter === 'string') {
+      let icon = null
+      if (to.svgAfter.startsWith('data:image/svg+xml,')) {
+        icon = decodeURIComponent(to.svgAfter.replace('data:image/svg+xml,', ''))
+      } else if (!to.svgAfter.startsWith('<svg')) {
+        try {
+          const res = await fetch(to.svgAfter)
+          if (!res.ok) {
+            svgAfterVNode.value = null
+            return
+          }
+          icon = await res.text()
+        } catch (e) {
+          svgAfterVNode.value = null
+          return
+        }
+      } else {
+        icon = to.svgAfter
+      }
+
+      if (!icon) {
+        svgAfterVNode.value = null
+        return
+      }
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(icon, 'image/svg+xml')
+      const svg = doc.querySelector('svg')
+      if (!svg) {
+        svgAfterVNode.value = null
+        return
+      }
+
+      const attrs = Object.fromEntries([...svg.attributes].map(attr => [attr.name, attr.value]))
+
+      svgAfterVNode.value = h('svg', {
+        innerHTML: svg.innerHTML,
+        ...attrs
+      })
+    } else {
+      svgAfterVNode.value = null
+    }
+  },
+  { immediate: true }
+)
+
+</script>
+
+<template>
+  <template v-if="props.img">
+    <img :src="props.img.src" :alt="props.img.alt || props.label" />
+  </template>
+  <template v-else-if="props.imgBefore && props.imgAfter">
+    <img :src="props.imgBefore.src" :alt="props.imgBefore.alt ?? ''" aria-hidden="true" />
+    <span v-text="props.label" />
+    <img :src="props.imgAfter.src" :alt="props.imgAfter.alt ?? ''" aria-hidden="true" />
+  </template>
+  <template v-else-if="props.imgBefore">
+    <img :src="props.imgBefore.src" :alt="props.imgBefore.alt ?? ''" aria-hidden="true" />
+    <span v-text="props.label" />
+  </template>
+  <template v-else-if="props.imgAfter">
+    <span v-text="props.label" />
+    <img :src="props.imgAfter.src" :alt="props.imgAfter.alt ?? ''" aria-hidden="true" />
+  </template>
+  <template v-else-if="props.icon">
+    <i :class="`srl-icon srl-icon-${props.icon}`" />
+  </template>
+  <template v-else-if="props.iconBefore && props.iconAfter">
+    <i :class="`srl-icon srl-icon-${props.iconBefore}`" />
+    <span v-text="props.label" />
+    <i :class="`srl-icon srl-icon-${props.iconAfter}`" />
+  </template>
+  <template v-else-if="props.iconBefore">
+    <i :class="`srl-icon srl-icon-${props.iconBefore}`" />
+    <span v-text="props.label" />
+  </template>
+  <template v-else-if="props.iconAfter">
+    <span v-text="props.label" />
+    <i :class="`srl-icon srl-icon-${props.iconAfter}`" />
+  </template>
+  <template v-else-if="props.svg">
+    <component :is="svgVNode" v-if="svgVNode" :aria-label="props.label" />
+  </template>
+  <template v-else-if="props.svgBefore && props.svgAfter">
+    <component :is="svgBeforeVNode" v-if="svgBeforeVNode" aria-hidden="true" />
+    <span v-text="props.label" />
+    <component :is="svgAfterVNode" v-if="svgAfterVNode" aria-hidden="true" />
+  </template>
+  <template v-else-if="props.svgBefore">
+    <component :is="svgBeforeVNode" v-if="svgBeforeVNode" aria-hidden="true" />
+    <span v-text="props.label" />
+  </template>
+  <template v-else-if="props.svgAfter">
+    <span v-text="props.label" />
+    <component :is="svgAfterVNode" v-if="svgAfterVNode" aria-hidden="true" />
+  </template>
+  <template v-else>
+    <span v-text="props.label" />
+  </template>
+</template>