@simple-reporting/base 1.0.21 → 1.0.23

package/livingdocs/999.Properties/pdf-spacer/scss/pdf.scss

@@ -0,0 +1,29 @@
+@use "srl";
+
+.srl-spacer-25 {
+  margin-top: srl.spacer-get(25) !important;
+}
+
+.srl-spacer-50 {
+    margin-top: srl.spacer-get(50) !important;
+}
+
+.srl-spacer-100 {
+    margin-top: srl.spacer-get(100) !important;
+}
+
+.srl-spacer-200 {
+    margin-top: srl.spacer-get(200) !important;
+}
+
+.srl-spacer-400 {
+  margin-top: srl.spacer-get(400) !important;
+}
+
+.srl-spacer-800 {
+  margin-top: srl.spacer-get(800) !important;
+}
+
+.srl-spacer-1600 {
+  margin-top: srl.spacer-get(1600) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"

package/scripts/build.js

@@ -909,8 +909,8 @@ async function mapScss() {
     await writeFileSync(
       join(folders.srlImports, 'xbrl.scss'),
       output.xbrl.length
-        ? `@use ` + output.xbrl.join(';\n@use ')
-        : '' + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
+        ? `@use ` + output.xbrl.join(`;\n@use `)
+        : `;\n` + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
     );
 
     return true;

package/scripts/init.js

@@ -58,7 +58,7 @@ async function init(folder, options) {
 
       await writeFileSync(
         `${projectPath}/.gitignore`,
-        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/`,
+        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/\n/.DS_Store\n/.idea`,
       );
       console.log(`Project has created`);
       console.log(`cd ${folder}`);

package/srl/.srl/App.vue

@@ -36,20 +36,24 @@
  * to other components in the application.
  */
 import App from '@/App.vue';
-import { watch } from 'vue'
+import { onMounted, watch } from 'vue'
 import { useCssStyles } from '#composables'
+import { setMounted } from '#utils'
 
-const styleElement = document.createElement('style');
-document.head.appendChild(styleElement);
+const styleElement = document.createElement('style')
+document.head.appendChild(styleElement)
 
-const styleContent = useCssStyles();
+const styleContent = useCssStyles()
 watch(
   styleContent.value,
   (newStyles) => {
-    styleElement.innerHTML = newStyles.join('');
+    styleElement.innerHTML = newStyles.join('')
   },
   { immediate: true },
 );
+onMounted(() => {
+  setMounted(true)
+});
 </script>
 
 <template>

package/srl/.srl/components/Srl/Article/Accordion.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {computed, onMounted, ref, useId} from 'vue'
+import { useRoute } from 'vue-router'
+import { isAccordionAnchored, setAccordionAnchored } from '#utils'
+
+const props = withDefaults(defineProps<{
+  toggleSelector?: string
+  contentSelector?: string
+  wrapperSelector?: string
+  openClass?: string
+  duration?: number
+}>(), {
+  toggleSelector: '.srl-article-accordion__toggle',
+  contentSelector: '.srl-article-accordion__content',
+  wrapperSelector: '.srl-article-accordion__wrapper',
+  openClass: 'open',
+  duration: 300,
+})
+
+const route = useRoute()
+
+const id = useId()
+const rootEl = ref<HTMLDivElement>()
+const toggle = ref<HTMLButtonElement>()
+const content = ref<HTMLDivElement>()
+const wrapper = ref<HTMLDivElement>()
+const transition = computed<string>(() => {
+  return props.duration + 'ms'
+})
+
+function open() {
+  toggle.value?.setAttribute('aria-expanded', 'true')
+  wrapper.value?.removeAttribute('hidden')
+  content.value?.classList.add(props.openClass)
+  content.value.focus()
+}
+
+function close() {
+  toggle.value?.setAttribute('aria-expanded', 'false')
+  content.value?.classList.remove(props.openClass)
+  setTimeout(() => {
+    wrapper.value?.setAttribute('hidden', 'true')
+  }, props.duration)
+}
+
+onMounted(() => {
+  toggle.value = rootEl.value?.querySelector( props.toggleSelector ) || undefined
+  content.value = rootEl.value?.querySelector( props.contentSelector ) || undefined
+  wrapper.value = rootEl.value?.querySelector( props.wrapperSelector ) || undefined
+
+  if (toggle.value && content.value && wrapper.value) {
+    wrapper.value.setAttribute('hidden', 'true')
+    content.value.id = id
+    content.value.setAttribute('tabindex', '-1')
+    toggle.value.setAttribute('aria-controls', id)
+
+    toggle.value.addEventListener('click', () => {
+      toggle.value?.getAttribute('aria-expanded') === 'true' ? close() : open()
+    })
+
+    if (route.hash) {
+      if (rootEl.value.id && rootEl.value.id === route.hash) {
+        open()
+        isAccordionAnchored() || setAccordionAnchored(true)
+      } else {
+        const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+        if (targetEl) {
+          open()
+          if (!isAccordionAnchored()) {
+            setAccordionAnchored(true)
+            setTimeout(() => {
+              rootEl.value?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+              })
+            }, 200)
+          }
+        }
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="srl-article-accordion" ref="rootEl" tabindex="-1">
+    <slot/>
+  </div>
+</template>
+
+<style lang="scss">
+.srl-article-accordion {
+  &__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows v-bind(transition) ease-out;
+
+    &.open {
+      grid-template-rows: 1fr;
+    }
+  }
+  &__wrapper {
+    overflow: hidden;
+  }
+}
+</style>

package/srl/.srl/components/Srl/Article/Dialog/Button.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, useId } from 'vue';
+import { ref, useId } from 'vue'
 import { useArticles, useConfig } from '#composables';
-import { prepareHtmlContent } from '#utils';
+import { prepareHtmlContent, isDialogStored, addDialogToStorage, getDialogFromStorage } from '#utils';
 
 const props = defineProps<{
   uuid: string;
+  anchor?: string;
 }>();
 
 const config = useConfig();
@@ -12,6 +13,8 @@ const articles = useArticles();
 const id = ref<string>(`srl-page__dialog-${useId()}`);
 const content = ref<string>('');
 const dialog = ref<SrlPageDialog | null>(null);
+let dialogStored = false
+
 async function loadContent() {
   const article = articles.value.find((article) => article.uuid === props.uuid);
   if (article) {
@@ -20,35 +23,55 @@ async function loadContent() {
       const req = await fetch(file);
       const text = await req.text();
       content.value = prepareHtmlContent(text);
+      // Do something with anchor if provided
+      /*
+      if (props.anchor) {
+        nextTick(() => {
+          // Do action
+        });
+      }
+       */
     } catch (error) {
       console.error(`Failed to load article content from ${file}:`, error);
     }
   }
 }
 
-loadContent();
+if (isDialogStored(props.uuid)) {
+  dialogStored = true;
+} else {
+  addDialogToStorage(props.uuid, dialog);
+  loadContent();
+}
+
 async function open() {
-  dialog.value.open();
+  if (dialog.value) {
+    dialog.value.open();
+  } else {
+    const storage = getDialogFromStorage(props.uuid);
+    storage ?
+        storage.open():
+        console.warn(`Dialog with uuid ${props.uuid} not found in storage.`);
+  }
 }
 </script>
 
 <template>
   <button
-    class="srl-dialog-button"
-    type="button"
-    :aria-controls="id"
-    aria-haspopup="dialog"
-    :aria-expanded="dialog?.dialogState ?? false"
-    @click="open"
+      class="srl-dialog-button"
+      type="button"
+      :aria-controls="id"
+      aria-haspopup="dialog"
+      :aria-expanded="dialog?.dialogState ?? false"
+      @click="open"
   >
     <slot />
-    <Teleport to="body">
+    <Teleport v-if="content" to="body">
       <SrlPageDialog
-        v-if="content"
-        :id="id"
-        ref="dialog"
-        :content="content"
-        @close="expanded = false"
+          :id="id"
+          ref="dialog"
+          :content="content"
+          @close="expanded = false"
       />
     </Teleport>
   </button>

package/srl/.srl/components/Srl/Category/Accordion.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { computed, ref, useId } from 'vue'
+import { computed, nextTick, onMounted, ref, useId } from 'vue'
+import { useRoute } from 'vue-router'
+import { isAccordionAnchored, setAccordionAnchored } from '#utils'
 
 const rootEl = ref<HTMLElement | null>(null)
 const id = ref(useId())
 const state = ref(false)
+const route = useRoute()
 function toggle() {
   state.value ?
-    close() :
-    open()
+      close() :
+      open()
 }
 
 function open() {
@@ -32,10 +35,35 @@ const accordion = computed(() => {
   }
 })
 
+onMounted(() => {
+  if (route.hash) {
+    if (rootEl.value.id && rootEl.value.id === route.hash) {
+      open()
+      isAccordionAnchored() || setAccordionAnchored(true)
+    } else {
+      const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+      if (targetEl) {
+        open()
+        if (!isAccordionAnchored()) {
+          setAccordionAnchored(true)
+          nextTick(() => {
+            setTimeout(() => {
+              rootEl.value.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+              })
+            }, 200)
+          })
+        }
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
-  <div ref="rootEl">
+  <div ref="rootEl" tabindex="-1">
     <slot :accordion="accordion"/>
   </div>
 </template>

package/srl/.srl/plugins/initProject.ts

@@ -2,6 +2,7 @@ import { setConfig } from '#composables/config';
 import { createApp } from 'vue';
 import { initI18n } from '@/i18n';
 import srlVuePlugin from '#plugins/vueSrlPlugin';
+import { clearPageState } from '#utils'
 
 import '#imports/app.scss';
 
@@ -9,11 +10,15 @@ import SrlPageApp from '../App.vue';
 import router from '@/router';
 
 export default async function initProject() {
-  await setConfig();
-  const i18n = initI18n();
-  const app = (window.app = createApp(SrlPageApp));
-  app.use(i18n);
-  app.use(router);
-  app.use(srlVuePlugin);
-  return app;
+    router.beforeEach((to, from, next) => {
+        clearPageState();
+        next();
+    });
+    await setConfig();
+    const i18n = initI18n();
+    const app = (window.app = createApp(SrlPageApp));
+    app.use(i18n);
+    app.use(router);
+    app.use(srlVuePlugin);
+    return app;
 }

package/srl/.srl/utils/html.ts

@@ -3,83 +3,92 @@ import { useArticles, useLocale, addCssStyles } from '#composables';
 
 type AttrObj = { [key: string]: string | null };
 function attributesToString(attributes: Record<string, string | null>): string {
-  return Object.entries(attributes)
-    .map(([key, value]) => (value !== null ? `${key}="${value}"` : key))
-    .join(' ');
+    return Object.entries(attributes)
+        .map(([key, value]) => (value !== null ? `${key}="${value}"` : key))
+        .join(' ');
 }
 
 export function prepareHtmlContent(text: string): string {
-  const articles = useArticles();
-  const locale = useLocale();
+    const articles = useArticles();
+    const locale = useLocale();
 
-  const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
-  text = text.replace(regex, (match, attrString, innerText) => {
+    const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
+    text = text.replace(regex, (match, attrString, innerText) => {
 
-    const attrObj: AttrObj = {};
-    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
-      attrObj[key] = value || null;
-      return m;
-    });
+        const attrObj: AttrObj = {};
+        attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
+            attrObj[key] = value || null;
+            return m;
+        });
 
-    if (
-      attrObj['data-note-target'] &&
-      attrObj['data-note-target'] === 'popup'
-    ) {
-      attrObj.uuid = attrObj.href;
-      delete attrObj.href;
-      const attrs = attributesToString(attrObj);
-      return `<srl-article-dialog-button ${attrs}>${innerText}</srl-article-dialog-button>`;
-    }
+        if (
+            attrObj['data-note-target'] &&
+            attrObj['data-note-target'] === 'popup'
+        ) {
+            attrObj.uuid = attrObj.href;
+            delete attrObj.href;
+            if (attrObj['data-article-name']) {
+                attrObj.uuid = attrObj['data-article-name'];
+                delete attrObj['data-article-name'];
+            }
+            const arrUuid = attrObj.uuid.split('#');
+            attrObj.uuid = arrUuid[0];
+            if (arrUuid[1]) {
+                attrObj.anchor = arrUuid[1];
+            }
+            const attrs = attributesToString(attrObj);
+            return `<srl-article-dialog-button ${attrs}>${innerText}</srl-article-dialog-button>`;
+        }
 
-    if (attrObj.href) {
-      const arrLink = attrObj.href.split('#');
+        if (attrObj.href) {
+            const arrLink = attrObj.href.split('#');
 
-      if (isRouterPath(arrLink[0])) {
-        delete attrObj.href;
-        if (arrLink[0].startsWith('./')) {
-          arrLink[0] = arrLink[0].substring(1);
-        }
-        if (arrLink[0] === `/${locale.value}/home`) {
-          arrLink[0] = `/${locale.value}`;
-        }
-        attrObj.to = arrLink[0];
-        if (arrLink[1]) {
-          attrObj.to += `#${arrLink[1]}`;
-        }
-        const attrs = attributesToString(attrObj);
-        return `<router-link ${attrs}>${innerText}</router-link>`;
-      }
+            if (isRouterPath(arrLink[0])) {
+                delete attrObj.href;
+                if (arrLink[0].startsWith('./')) {
+                    arrLink[0] = arrLink[0].substring(1);
+                }
+                if (arrLink[0] === `/${locale.value}/home`) {
+                    arrLink[0] = `/${locale.value}`;
+                }
+                attrObj.to = arrLink[0];
+                if (arrLink[1]) {
+                    attrObj.to += `#${arrLink[1]}`;
+                }
+                const attrs = attributesToString(attrObj);
+                return `<router-link ${attrs}>${innerText}</router-link>`;
+            }
 
-      const a = articles.value.find((i) => i.uuid === arrLink[0]);
-      if (a) {
-        delete attrObj.href;
-        attrObj.to = a.index
-          ? `/${locale.value}`
-          : `/${locale.value}/${a.slug}`;
-        if (arrLink[1]) {
-          attrObj.to += `#${arrLink[1]}`;
+            const a = articles.value.find((i) => i.uuid === arrLink[0]);
+            if (a) {
+                delete attrObj.href;
+                attrObj.to = a.index
+                    ? `/${locale.value}`
+                    : `/${locale.value}/${a.slug}`;
+                if (arrLink[1]) {
+                    attrObj.to += `#${arrLink[1]}`;
+                }
+                const attrs = attributesToString(attrObj);
+                return `<router-link ${attrs}>${innerText}</router-link>`;
+            }
         }
-        const attrs = attributesToString(attrObj);
-        return `<router-link ${attrs}>${innerText}</router-link>`;
-      }
-    }
 
-    return match;
-  });
+        return match;
+    });
 
-  text = text.replace(
-    /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
-    (_match, name, content) => `<template #${name}>${content}</template>`
-  );
+    text = text.replace(
+        /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
+        (_match, name, content) => `<template #${name}>${content}</template>`
+    );
 
-  text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {
-    addCssStyles(p1);
-    return '';
-  });
+    text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {
+        addCssStyles(p1);
+        return '';
+    });
 
-  return text;
+    return text;
 }
 
 export default {
-  prepareHtmlContent,
+    prepareHtmlContent,
 };

package/srl/.srl/utils/index.ts

@@ -1,5 +1,32 @@
 import { isRouterPath, isExternalPath } from './uri';
 import { camelCase } from './camelCase';
 import { prepareHtmlContent } from './html';
+import {
+    usePageState,
+    clearPageState,
+    isDialogStored,
+    addDialogToStorage,
+    getDialogFromStorage,
+    getDialogStorage,
+    isAccordionAnchored,
+    setAccordionAnchored,
+    isMounted,
+    setMounted
+} from './pageState.ts';
 
-export { isRouterPath, isExternalPath, camelCase, prepareHtmlContent };
+export {
+    isRouterPath,
+    isExternalPath,
+    camelCase,
+    prepareHtmlContent,
+    usePageState,
+    clearPageState,
+    isAccordionAnchored,
+    setAccordionAnchored,
+    isDialogStored,
+    addDialogToStorage,
+    getDialogFromStorage,
+    getDialogStorage,
+    setMounted,
+    isMounted,
+};

package/srl/.srl/utils/pageState.ts

@@ -0,0 +1,61 @@
+import { type Ref } from 'vue'
+
+type DialogStorage = {
+    [key: string]: Ref<SrlPageDialog>;
+}
+
+type PageState = {
+    isMounted: boolean;
+    dialogStorage: DialogStorage;
+    accordionAnchored: boolean;
+}
+
+const pageState: PageState = {
+    isMounted: false,
+    dialogStorage: {},
+    accordionAnchored: false,
+}
+
+export function usePageState() {
+    return pageState;
+}
+
+export function setMounted(value: boolean): void {
+    pageState.isMounted = value;
+}
+
+export function isMounted(): boolean {
+    return pageState.isMounted;
+}
+
+export function clearPageState() {
+    pageState.isMounted = false;
+    pageState.dialogStorage = {};
+    pageState.accordionAnchored = false;
+}
+
+export function isDialogStored(uuid: string): boolean {
+    return uuid in pageState.dialogStorage
+}
+
+export function addDialogToStorage(uuid: string, refSrlPageDialog: Ref<SrlPageDialog>): void {
+    pageState.dialogStorage[uuid] = refSrlPageDialog
+}
+
+export function getDialogFromStorage(uuid: string): SrlPageDialog | null {
+    return isDialogStored(uuid)?
+        pageState.dialogStorage[uuid].value : null
+}
+
+export function getDialogStorage() : DialogStorage {
+    return pageState.dialogStorage
+}
+
+export function setAccordionAnchored(value: boolean): void {
+    pageState.accordionAnchored = value;
+}
+
+export function isAccordionAnchored(): boolean {
+    return pageState.accordionAnchored;
+}
+