Merge pull request #56 from lukashornych/dev

Release 1.0.0

.env

@@ -1 +1,2 @@
-VITE_BUILD_VERSION=$EVITALAB_BUILD_VERSION
+VITE_BUILD_VERSION=$EVITALAB_BUILD_VERSION
+GITHUB_REPO_URL=https://github.com/lukashornych/evitalab

.gitignore

@@ -20,3 +20,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.iml

README.md

@@ -117,4 +117,4 @@ yarn dev
 
 Any contributions are welcome and appreciated. If you would like to contribute to evitaLab, feel free to open an issue
 and submit a pull request. However, keep in mind that this project is still in an early development stage and features
-may change or be completely removed.
+may change or be completely removed.

package.json

@@ -9,28 +9,36 @@
   },
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-xml": "^6.0.2",
+    "@ddietr/codemirror-themes": "^1.4.2",
     "@mdi/font": "7.0.96",
+    "@types/dompurify": "^3.0.4",
     "@types/js-cookie": "^3.0.3",
+    "@types/markdown-it": "^13.0.2",
+    "@types/markdown-it-emoji": "^2.0.2",
     "cm6-graphql": "^0.0.9",
-    "cm6-theme-material-dark": "^0.2.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.29.0",
+    "dompurify": "^3.0.6",
     "graphql": "^16.7.1",
+    "highlight.js": "^11.9.0",
     "js-cookie": "^3.0.5",
     "ky": "^0.33.3",
-    "roboto-fontface": "*",
+    "markdown-it": "^13.0.2",
+    "markdown-it-emoji": "^2.0.2",
+    "markdown-it-highlightjs": "^4.0.1",
     "splitpanes": "^3.1.5",
     "store2": "^2.14.2",
     "uuid": "^9.0.0",
     "vue": "^3.2.0",
     "vue-codemirror": "^6.1.1",
     "vue-hotkeys-rt": "^0.2.3",
-    "vue-markdown-render": "^2.0.1",
     "vue-router": "^4.0.0",
     "vue-toastification": "^2.0.0-rc.5",
     "vuetify": "^3.1.0",
     "vuex": "^4.0.2",
-    "webfontloader": "^1.0.0"
+    "webfontloader": "^1.0.0",
+    "xml-formatter": "^3.5.0"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",

src/components/base/CodemirrorFull.vue

@@ -4,7 +4,7 @@ import { Codemirror } from 'vue-codemirror'
 import { EditorState, Extension } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
 import { basicSetup } from 'codemirror'
-import { materialDark } from 'cm6-theme-material-dark'
+import { dracula } from '@ddietr/codemirror-themes/dracula.js'
 
 const props = withDefaults(
     defineProps<{
@@ -37,7 +37,7 @@ const extensions: Extension[] = [
         }
     ]),
     basicSetup,
-    materialDark,
+    dracula,
     ...props.additionalExtensions
 ]
 if (props.readOnly) {

src/components/base/CodemirrorOneLine.vue

@@ -91,25 +91,44 @@ const extensions: Extension[] = [
 </template>
 
 <style lang="scss" scoped>
+@import "@/styles/colors.scss";
+
 .cm-oneline {
-    height: 2.75rem;
     display: inline-grid;
     grid-template-columns: 1fr;
-    padding: 0 1rem;
     column-gap: 0.25rem;
     align-items: center;
 
     &--with-prepend-icon {
         grid-template-columns: 1.5rem 1fr;
-        padding: 0 1rem 0 0.625rem;
+        gap: 0 0.5rem;
+        padding-left: 0.25rem;
     }
 
     &__prepend-inner-icon {
         opacity: var(--v-medium-emphasis-opacity);
     }
 
     & :deep(.cm-scroller) {
-      overflow-x: hidden;
+        overflow-x: hidden;
+        background: $primary-dark;
+        border-radius: 0.25rem;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    & :deep(.cm-editor) {
+        background: transparent;
+    }
+    & :deep(.cm-line) {
+        color: white;
+        font-weight: bold;
+    }
+
+    & :deep(.cm-cursor) {
+        border-left: 1px solid #fff;
     }
 }
 </style>

src/components/base/VClosableCardTitle.vue → src/components/base/VCardTitleWithActions.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 /**
- * VCardTitle component with close button
+ * VCardTitle component with action buttons
  */
-
-const emit = defineEmits<{
-    (e: 'close'): void
-}>()
 </script>
 
 <template>
@@ -14,14 +10,9 @@ const emit = defineEmits<{
             <span>
                 <slot />
             </span>
-            <VBtn
-                icon
-                variant="flat"
-                density="compact"
-                @click="emit('close')"
-            >
-                <VIcon>mdi-close</VIcon>
-            </VBtn>
+            <div class="title-container__actions">
+                <slot name="actions" />
+            </div>
         </div>
     </VCardTitle>
 </template>
@@ -32,5 +23,10 @@ const emit = defineEmits<{
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    &__actions {
+        display: flex;
+        gap: 0.5rem;
+    }
 }
 </style>

src/components/base/VExecuteQueryButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/**
+ * Pre-defined button to execute queries.
+ */
+
+const emit = defineEmits<{
+    (e: 'click'): void
+}>()
+</script>
+
+<template>
+    <VBtn
+        density="compact"
+        @click="emit('click')"
+        class="v-btn--variant-primary"
+    >
+        <VIcon>mdi-play-outline</VIcon>
+
+        <VTooltip activator="parent">
+            Execute query
+        </VTooltip>
+        Run
+    </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/base/VMarkdown.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+/**
+ * Wrapper around Markdown renderer mainly for global styling purposes.
+ */
+
+import MarkdownIt from 'markdown-it'
+import MarkdownItHighlightJs from 'markdown-it-highlightjs'
+import MarkdownItEmoji from 'markdown-it-emoji'
+import { computed } from 'vue'
+
+const markdown: MarkdownIt = new MarkdownIt()
+    .use(MarkdownItHighlightJs)
+    .use(MarkdownItEmoji)
+
+const props = withDefaults(defineProps<{
+    source?: string
+}>(), {
+    source: ''
+})
+
+const renderedSource = computed<string>(() => markdown.render(props.source))
+</script>
+
+<template>
+    <div v-html="renderedSource" class="md-content"/>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/base/VPropertiesTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import VueMarkdown from 'vue-markdown-render'
+import VMarkdown from '@/components/base/VMarkdown.vue'
 
 const props = defineProps<{
     properties: [string, any, ((item?: string) => void)?][]
@@ -36,14 +36,15 @@ const props = defineProps<{
                     <VChip
                         v-for="item in property[1]"
                         :key="item"
+                        :variant="property[2] ? 'outlined' : 'plain'"
                         @click="property[2]?.(item)"
                     >
                         {{ item }}
                     </VChip>
                 </VChipGroup>
-                <span v-else>
-                    <VueMarkdown :source="property[1].toString()" />
-                </span>
+                <div v-else>
+                    <VMarkdown :source="property[1].toString()"/>
+                </div>
             </td>
 
         </tr>

src/components/base/VSideTabs.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Pre-configured VTabs component for vertical tabs.
+ */
+
+enum Side {
+    Left = 'left',
+    Right = 'right'
+}
+
+const props = defineProps<{
+    modelValue: any,
+    side: 'left' | 'right'
+}>()
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: any): void
+}>()
+</script>
+
+<template>
+    <VTabs
+        :model-value="modelValue"
+        @update:model-value="emit('update:modelValue', $event)"
+        direction="vertical"
+        :class="['side-tabs', { 'side-tabs--left': side === Side.Left }, { 'side-tabs--right': side === Side.Right }]"
+    >
+        <slot />
+    </VTabs>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/colors.scss";
+.side-tabs {
+    background: $primary-dark;
+    width: 3rem;
+
+    &--left {
+        border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+
+    &--right {
+        border-left: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+
+    & :deep(.v-btn) {
+        min-width: 3rem;
+        width: 3rem;
+        padding: 0 0 0 1rem !important;
+
+        &:after {
+            width: 3rem;
+        }
+    }
+}
+</style>