@simple-reporting/base 0.0.1

package/dev/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/dev/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/dev/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/dev/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import VueDevTools from 'vite-plugin-vue-devtools'
+import { fileURLToPath, URL } from 'node:url'
+import { beaver } from '@simple-reporting/base/scripts/beaver.js'
+import { map, mapJs } from '@simple-reporting/base/scripts/build.js'
+import { nswowWatcher } from '@simple-reporting/base/scripts/vite.js'
+
+await beaver()
+await map()
+await mapJs()
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), VueDevTools(), nswowWatcher()],
+  base: './',
+  build: {
+    outDir: './.output/app'
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      nswow: fileURLToPath(new URL('./nswow', import.meta.url))
+    }
+  },
+  publicDir: process.env.NODE_ENV === 'development'
+})

package/dev/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)

package/dev/word.ts

@@ -0,0 +1 @@
+import '.nswow/word.scss'

package/livingdocs/Buttons/button/app.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Buttons/button/button.html

@@ -0,0 +1,18 @@
+<script type="ld-conf">
+  {
+  	"name": "button",
+  	"label": "Button",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-button.min.svg",
+  	"directives": {
+  		"link": {
+  			"plainText": true
+  		}
+  	},
+  	"allowedParents": [
+  		"button-container"
+  	]
+  }
+</script>
+<a doc-link="href" class="srl-button">
+  <span class="srl-button__text" doc-editable="link">Link text</span>
+</a>

package/livingdocs/Buttons/button/general.scss

@@ -0,0 +1,33 @@
+@use 'nswow';
+@use 'sass:map';
+
+.srl-button {
+  display: inline-block;
+  text-decoration: none;
+  background-color: nswow.colors-primary();
+  color: nswow.colors-on-primary();
+  padding: #{nswow.system-size-unit(10)} #{nswow.system-size-unit(30)};
+  @include nswow.grid-media(print) {
+    padding: #{nswow.system-size-unit(10, in)} #{nswow.system-size-unit(30, in)};
+  }
+  @each $breakpoint, $gutter in nswow.$grid-gutter {
+    $gap: map.get($gutter, gap);
+    $column-gap: map.get($gutter, column-gap);
+    @if not $column-gap {
+      $column-gap: $gap;
+    }
+    @if $column-gap {
+      @include nswow.grid-media($breakpoint) {
+        @if $breakpoint == print {
+          margin-left: nswow.system-size-unit($column-gap, in);
+        } @else {
+          margin-left: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+  }
+  &__text {
+    @include nswow.typography-copy1();
+    @include nswow.helpers-trim-margins;
+  }
+}

package/livingdocs/Buttons/button/ldd.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Buttons/button/pdf.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Buttons/button/word.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Buttons/button-container/app.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Buttons/button-container/button-container.html

@@ -0,0 +1,31 @@
+<script type="ld-conf">
+  {
+  	"name": "button-container",
+  	"label": "Button container",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-button-container.min.svg",
+  	"properties": [
+  		"horizontal-alignment"
+  	],
+  	"directives": {
+  		"button-container": {
+  			"allowedChildren": [
+  			    "button",
+  			    "button-square",
+  			    "button-large"
+  			],
+  			"defaultComponents": {
+  				"paragraph": "button"
+  			},
+  			"defaultContent": [{
+  				"component": "button"
+  			}]
+  		}
+  	}
+  }
+</script>
+<div class="srl-button-container srl-article__grid srl-article__grid--indent">
+  <div
+    class="srl-button-container__inner srl-article__grid--inner"
+    doc-container="button-container"
+  ></div>
+</div>

package/livingdocs/Buttons/button-container/general.scss

@@ -0,0 +1,12 @@
+@use 'nswow';
+
+.srl-button-container {
+  margin-bottom: nswow.system-size-unit(30);
+  @include nswow.grid-media(print) {
+    margin-bottom: nswow.system-size-unit(30, in);
+  }
+
+  &__inner {
+    text-align: right;
+  }
+}

package/livingdocs/Buttons/button-container/ldd.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Buttons/button-container/pdf.scss

@@ -0,0 +1,3 @@
+.srl-button-container {
+  display: none;
+}

package/livingdocs/Buttons/button-container/properties.json

@@ -0,0 +1,19 @@
+{
+  "horizontal-alignment": {
+    "label": "Horizontal alignment",
+    "type": "select",
+    "options": [
+      {
+        "caption": "left"
+      },
+      {
+        "caption": "center",
+        "value": "horizontal-center"
+      },
+      {
+        "caption": "right",
+        "value": "horizontal-right"
+      }
+    ]
+  }
+}

package/livingdocs/Buttons/button-container/word.scss

@@ -0,0 +1,3 @@
+.srl-button-container {
+  display: none;
+}

package/livingdocs/CV/cv-timeline/app.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/CV/cv-timeline/cv-timeline.html

@@ -0,0 +1,19 @@
+<script type="ld-conf">
+  {
+  	"name": "cv-timeline",
+  	"label": "CV timeline",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-cv-timeline.min.svg"
+  }
+</script>
+<div class="srl-cv-timeline srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner">
+    <span class="srl-cv-timeline__years" doc-editable="years">
+      2010 - 2012
+    </span>
+    <span class="lc-linkable srl-cv-timeline__position" doc-editable="position">
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco, Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco
+    </span>
+  </span>
+</div>

package/livingdocs/CV/cv-timeline/general.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/CV/cv-timeline/ldd.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/CV/cv-timeline/pdf.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/CV/cv-timeline/print.scss

@@ -0,0 +1,35 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 100;
+
+$gap: map.get(nswow.$grid-gutter, print, gap);
+$column-gap: map.get(nswow.$grid-gutter, print, column-gap);
+@if not $column-gap {
+  $column-gap: $gap;
+}
+@if not $column-gap {
+  $column-gap: 0;
+}
+
+.srl-cv-timeline {
+  > span {
+    position: relative;
+  }
+
+  &__years {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: nswow.system-size-unit($numberSize, in);
+  }
+
+  &__position {
+    display: block;
+
+    &:not(:first-child) {
+      margin-left: nswow.system-size-unit($numberSize + $column-gap, in);
+    }
+  }
+}

package/livingdocs/CV/cv-timeline/web.scss

@@ -0,0 +1,27 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 100;
+
+.srl-cv-timeline {
+  > span {
+    display: flex;
+    flex-wrap: nowrap;
+    @each $breakpoint, $gutter in nswow.$grid-gutter {
+      $gap: map.get($gutter, gap);
+      $column-gap: map.get($gutter, column-gap);
+      @if not $column-gap {
+        $column-gap: $gap;
+      }
+      @if $column-gap {
+        @include nswow.grid-media($breakpoint) {
+          column-gap: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+  }
+
+  &__years {
+    flex: 0 0 nswow.system-size-unit($numberSize);
+  }
+}

package/livingdocs/CV/cv-timeline/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Container/column-container/column-container.html

@@ -0,0 +1,44 @@
+<script type="ld-conf">
+  {
+  	"name": "column-container",
+  	"label": "Columns container",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-columns.min.svg",
+  	"properties": [
+  		"web-width",
+  		"pdf-width",
+  		"vertical-alignment",
+  		"columns",
+  		"revert"
+  	]
+  }
+</script>
+
+<div
+  class="srl-columns srl-article__grid srl-article__grid--indent"
+  data-container-label="Column container"
+>
+  <div class="srl-article__grid--inner">
+    <div class="srl-columns__grid">
+      <div
+        class="srl-columns__column srl-columns__column--1"
+        data-container-label="column 1"
+        doc-container="column-1"
+      ></div>
+      <div
+        class="srl-columns__column srl-columns__column--2"
+        data-container-label="column 2"
+        doc-container="column-2"
+      ></div>
+      <div
+        class="srl-columns__column srl-columns__column--3"
+        data-container-label="column 3"
+        doc-container="column-3"
+      ></div>
+      <div
+        class="srl-columns__column srl-columns__column--4"
+        data-container-label="column 4"
+        doc-container="column-4"
+      ></div>
+    </div>
+  </div>
+</div>

package/livingdocs/Container/column-container/general.scss

@@ -0,0 +1,105 @@
+@use 'nswow';
+
+.srl-columns {
+  padding-bottom: nswow.system-size-unit(30);
+
+  break-before: auto;
+  break-inside: auto;
+  break-after: auto;
+
+  @include nswow.grid-media(print) {
+    padding-bottom: nswow.system-size-unit(30, in);
+  }
+
+  &__grid {
+    @include nswow.grid-row();
+  }
+
+  &__column {
+    break-before: auto;
+    break-inside: auto;
+    break-after: auto;
+
+    @include nswow.grid-col(12, phone);
+    @include nswow.grid-col(6, portrait);
+    @include nswow.grid-col(6, landscape);
+    @include nswow.grid-col(6, desktop);
+    @include nswow.grid-col(6, print);
+
+    @include nswow.helpers-trim-margins();
+
+    &--3,
+    &--4 {
+      display: none;
+    }
+  }
+
+  &.srl-columns--1-2 {
+    .srl-columns__column {
+      &--1 {
+        @include nswow.grid-col(12, phone);
+        @include nswow.grid-col(4, portrait);
+        @include nswow.grid-col(4, landscape);
+        @include nswow.grid-col(4, desktop);
+        @include nswow.grid-col(4, print);
+      }
+
+      &--2 {
+        @include nswow.grid-col(12, phone);
+        @include nswow.grid-col(8, portrait);
+        @include nswow.grid-col(8, landscape);
+        @include nswow.grid-col(8, desktop);
+        @include nswow.grid-col(8, print);
+      }
+    }
+  }
+
+  &.srl-columns--2-1 {
+    .srl-columns__column {
+      &--1 {
+        @include nswow.grid-col(12, phone);
+        @include nswow.grid-col(8, portrait);
+        @include nswow.grid-col(8, landscape);
+        @include nswow.grid-col(8, desktop);
+        @include nswow.grid-col(8, print);
+      }
+
+      &--2 {
+        @include nswow.grid-col(12, phone);
+        @include nswow.grid-col(4, portrait);
+        @include nswow.grid-col(4, landscape);
+        @include nswow.grid-col(4, desktop);
+        @include nswow.grid-col(4, print);
+      }
+    }
+  }
+
+  &.srl-columns--3 {
+    .srl-columns__column {
+      @include nswow.grid-col(12, phone);
+      @include nswow.grid-col(4, portrait);
+      @include nswow.grid-col(4, landscape);
+      @include nswow.grid-col(4, desktop);
+      @include nswow.grid-col(4, print);
+
+      &--3 {
+        display: block;
+      }
+    }
+  }
+
+  &.srl-columns--4 {
+    .srl-columns__column {
+      @include nswow.grid-col(12, phone);
+      @include nswow.grid-col(3, portrait);
+      @include nswow.grid-col(3, landscape);
+      @include nswow.grid-col(3, desktop);
+      @include nswow.grid-col(3, print);
+
+      &--3,
+      &--4 {
+        display: block;
+      }
+    }
+  }
+}

package/livingdocs/Container/column-container/properties.json

@@ -0,0 +1,83 @@
+{
+  "web-width": {
+    "label": "Web width",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Text width"
+      },
+      {
+        "caption": "Content width",
+        "value": "srl-article__grid--content-web"
+      },
+      {
+        "caption": "Full width",
+        "value": "srl-article__grid--full-web"
+      }
+    ]
+  },
+  "pdf-width": {
+    "label": "PDF width",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Text width"
+      },
+      {
+        "caption": "Content width",
+        "value": "srl-article__grid--content-pdf"
+      },
+      {
+        "caption": "Full width",
+        "value": "srl-article__grid--full-pdf"
+      }
+    ]
+  },
+  "vertical-alignment": {
+    "label": "Vertical alignment",
+    "type": "select",
+    "options": [
+      {
+        "caption": "top"
+      },
+      {
+        "caption": "center",
+        "value": "vertical-center"
+      },
+      {
+        "caption": "bottom",
+        "value": "vertical-bottom"
+      }
+    ]
+  },
+  "columns": {
+    "label": "Columns",
+    "type": "select",
+    "options": [
+      {
+        "caption": "1/2 1/2"
+      },
+      {
+        "caption": "1/3 2/3",
+        "value": "srl-columns--1-2"
+      },
+      {
+        "caption": "2/3 1/3",
+        "value": "srl-columns--2-1"
+      },
+      {
+        "caption": "1/3 1/3 1/3",
+        "value": "srl-columns--3"
+      },
+      {
+        "caption": "1/4 1/4 1/4 1/4",
+        "value": "srl-columns--4"
+      }
+    ]
+  },
+  "revert": {
+    "label": "Switch sides",
+    "type": "option",
+    "value": "revert"
+  }
+}

package/livingdocs/Lists/alphanumeric-list-group/alphanumeric-list-group.html

@@ -0,0 +1,25 @@
+<script type="ld-conf">
+  {
+  	"name": "alphanumeric-list-group",
+  	"label": "List (alphanumeric)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-alphanumeric-list.min.svg",
+  	"directives": {
+  		"list": {
+  			"allowedChildren": ["list-item"],
+  			"defaultComponents": {
+  				"paragraph": "list-item"
+  			},
+  			"defaultContent": [{
+  				"component": "list-item"
+  			}]
+  		}
+  	}
+  }
+</script>
+<div class="srl-article__grid srl-article__grid--indent">
+  <ol
+    class="srl-article__grid--inner srl-alphanumeric-list-group"
+    data-container-label="List container"
+    doc-container="list"
+  ></ol>
+</div>

package/livingdocs/Lists/alphanumeric-list-group/app.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Lists/alphanumeric-list-group/general.scss

@@ -0,0 +1,5 @@
+@use 'nswow';
+.srl-alphanumeric-list-group {
+  list-style-type: lower-alpha;
+  @include nswow.typography-copy1();
+}

package/livingdocs/Lists/alphanumeric-list-group/ldd.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Lists/alphanumeric-list-group/pdf.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Lists/alphanumeric-list-group/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Lists/list-item/app.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Lists/list-item/general.scss

@@ -0,0 +1,4 @@
+@use 'nswow';
+.srl-list-item__text {
+  @include nswow.typography-copy1();
+}

package/livingdocs/Lists/list-item/ldd.scss

@@ -0,0 +1 @@
+@use 'nswow';

package/livingdocs/Lists/list-item/list-item.html

@@ -0,0 +1,17 @@
+<script type="ld-conf">
+  {
+  	"name": "list-item",
+  	"label": "List item",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-list-item.min.svg",
+  	"allowedParents": [
+  		"unordered-list-group",
+  		"alphanumeric-list-group",
+  		"ordered-list-group"
+  	]
+  }
+</script>
+<li class="srl-list-item">
+  <span class="lc-linkable srl-list-item__text" doc-editable="text"
+    >List-Item</span
+  >
+</li>

package/livingdocs/Lists/list-item/pdf.scss

@@ -0,0 +1 @@
+@use 'nswow';