initial commit

src/components/DiagramRenderer.vue

@@ -0,0 +1,77 @@
+<template>
+  <div ref="mermaidGraph"></div>
+  <br />
+  <div ref="imageGraph"></div>
+</template>
+
+<script setup lang="ts">
+import mermaid from 'mermaid';
+import { onMounted, ref, watchEffect } from 'vue';
+
+// variables
+const mermaidGraph = ref<HTMLInputElement | null>(null);
+const imageGraph = ref<HTMLInputElement | null>(null);
+
+// load mermaid graph
+onMounted(() => {
+  mermaid.initialize({
+    startOnLoad: false,
+    logLevel: 'fatal',
+    securityLevel: 'loose',
+    theme: 'neutral'
+  });
+});
+
+watchEffect(() => {
+  if (mermaidGraph.value != null) {
+    mermaid.render(
+      'test',
+      "graph LR; Wood(<div class='wood-icon'><span>1</span></div>)-->Icon(<div class='timber-icon'>1</div>)",
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        mermaidGraph.value!.innerHTML = svgCode;
+      }
+    );
+  } else {
+    console.log('null value');
+  }
+});
+
+watchEffect(() => {
+  if (imageGraph.value != null) {
+    mermaid.render(
+      'woodTimber',
+      "graph LR; Wood(<img src='/annoIcons/buildingMaterials/Wood.webp' class='icon-size' />)-->Icon(<img src='/annoIcons/buildingMaterials/Timber.webp' class='icon-size' />)",
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imageGraph.value!.innerHTML = svgCode;
+      }
+    );
+  } else {
+    console.log('null value');
+  }
+});
+</script>
+
+<style lang="scss">
+.icon-size {
+  width: 40px;
+  height: 40px;
+}
+
+.wood-icon {
+  background: no-repeat center/100%
+    url('../assets/annoIcons/buildingMaterials/Wood.webp');
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.timber-icon {
+  background: no-repeat center/100%
+    url('../assets/annoIcons/buildingMaterials/Timber.webp');
+  width: 40px;
+  height: 40px;
+}
+</style>

src/components/EssentialLink.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>{{ caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+}
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+});
+</script>

src/components/ExampleComponent.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <p>{{ title }}</p>
+    <ul>
+      <li v-for="todo in todos" :key="todo.id" @click="increment">
+        {{ todo.id }} - {{ todo.content }}
+      </li>
+    </ul>
+    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
+    <p>Active: {{ active ? 'yes' : 'no' }}</p>
+    <p>Clicks on todos: {{ clickCount }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Todo, Meta } from './models';
+
+interface Props {
+  title: string;
+  todos?: Todo[];
+  meta: Meta;
+  active: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+});
+
+const clickCount = ref(0);
+function increment() {
+  clickCount.value += 1;
+  return clickCount.value;
+}
+
+const todoCount = computed(() => props.todos.length);
+
+</script>

src/components/models.ts

@@ -0,0 +1 @@
+export {};