refac: updated ui

walt-id · Nov 20, 2023 · e7123c6 · e7123c6
1 parent bfae660
commit e7123c6
Show file tree

Hide file tree

Showing 43 changed files with 1,112 additions and 327 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,31 +1,18 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    srcDir: "src",
-
-    devtools: { enabled: true },
-
-    modules: [
-        "@nuxt/content",
-        ["@unocss/nuxt", { autoImport: false }],
-        "nuxt-icon",
-        "nuxt-monaco-editor",
-        "@nuxt/image",
-        "nuxt-security"
-    ],
-
-    security: {
-        corsHandler: {
-            origin: "*",
-            methods: "*"
-        },
-        rateLimiter: false
+  srcDir: "src",
+  devtools: { enabled: true },
+  modules: [
+    "@nuxt/content",
+    ["@unocss/nuxt", { autoImport: false }],
+    "nuxt-icon",
+    "nuxt-monaco-editor",
+    "@nuxt/image",
+  ],
+  content: {
+    highlight: {
+      theme: "github-dark",
+      preload: ["json", "kotlin", "http", "js", "ts", "md", "shell"],
     },
-
-
-    content: {
-        highlight: {
-            theme: "github-dark",
-            preload: ["json", "kotlin", "http", "js", "ts", "md", "shell"]
-        }
-    }
+  },
 });
diff --git a/src/app.vue b/src/app.vue
@@ -1,61 +1,25 @@
 <template>
-    <Html class="" lang="en">
-        <Body class="bg-gray-900 text-white antialiased transition-colors duration-300 font-sans">
-            <NuxtLayout class="">
-                <NuxtLoadingIndicator />
-                <NuxtErrorBoundary>
-                    <!--page -->
-                    <!--<MonacoEditor v-model="val" class="h-48 bg-white" lang="json"-->
-                    <!--&gt;</MonacoEditor>-->
+  <Html class="" lang="en">
 
-                    <NuxtPage class="h-full max-w-6xl mx-auto" />
+  <Body class="bg-slate-900 text-gray-200 antialiased transition-colors duration-300 font-sans">
+    <NuxtLayout class="">
+      <NuxtLoadingIndicator />
+      <NuxtErrorBoundary>
+        <NuxtPage class="h-full mx-auto" />
+        <template #error="{ error, clearError }">
+          <p>An error occurred: {{ error }}</p>
+          <button class="rounded-md bg-gray-700 border border-gray-500 p-1 mt-2" @click="clearError">
+            Reset error
+          </button>
+        </template>
+      </NuxtErrorBoundary>
+    </NuxtLayout>
+  </Body>
 
-                    <template #error="{ error, clearError }">
-                        <p>An error occurred: {{ error }}</p>
-
-                        <button class="rounded-md bg-white border p-1 mt-2" @click="clearError">Reset error</button>
-                    </template>
-                </NuxtErrorBoundary>
-            </NuxtLayout>
-        </Body>
-    </Html>
+  </Html>
 </template>
 
 <script lang="ts" setup>
 import "@unocss/reset/tailwind-compat.css";
 import "uno.css";
-
-const { data: navigation } = await useAsyncData("navigation", () => fetchContentNavigation());
-
-const val = ref(
-    "{\n" +
-        '    "@context": [\n' +
-        '      "https://www.w3.org/2018/credentials/v1",\n' +
-        '      "https://www.w3.org/2018/credentials/examples/v1"\n' +
-        "    ],\n" +
-        '    "id": "http://example.gov/credentials/3732",\n' +
-        '    "type": [\n' +
-        '      "VerifiableCredential",\n' +
-        '      "UniversityDegreeCredential"\n' +
-        "    ],\n" +
-        '    "issuer": {\n' +
-        '      "id": "did:web:vc.transmute.world"\n' +
-        "    },\n" +
-        '    "issuanceDate": "2020-03-10T04:24:12.164Z",\n' +
-        '    "credentialSubject": {\n' +
-        '      "id": "did:example:ebfeb1f712ebc6f1c276e12ec21",\n' +
-        '      "degree": {\n' +
-        '        "type": "BachelorDegree",\n' +
-        '        "name": "Bachelor of Science and Arts"\n' +
-        "      }\n" +
-        "    },\n" +
-        '    "proof": {\n' +
-        '      "type": "JsonWebSignature2020",\n' +
-        '      "created": "2020-03-21T17:51:48Z",\n' +
-        '      "verificationMethod": "did:web:vc.transmute.world#_Qq0UL2Fq651Q0Fjd6TvnYE-faHiOpRlPVQcY_-tA4A",\n' +
-        '      "proofPurpose": "assertionMethod",\n' +
-        '      "jws": "eyJiNjQiOmZhbHNlLCJjcml0IjpbImI2NCJdLCJhbGciOiJFZERTQSJ9..OPxskX37SK0FhmYygDk-S4csY_gNhCUgSOAaXFXDTZx86CmI5nU9xkqtLWg-f4cqkigKDdMVdtIqWAvaYx2JBA"\n' +
-        "    }\n" +
-        "  }"
-);
 </script>
diff --git a/src/components/content/BoxTabs/BoxTabs.vue b/src/components/content/BoxTabs/BoxTabs.vue
@@ -0,0 +1,45 @@
+<template>
+    <section>
+        <div class="border border-0.2 border-slate-700 bg-slate-900 rounded-md">
+            <div class="flex gap-x-2 py-2 px-2 border-b-0.2 border-slate-800 bg-slate-800 rounded-t-md">
+                <div @click="onActiveTabChange(i)"
+                     :class="tabs[activeTab].tabName === tabName ? 'bg-slate-700' : ''"
+                     class="py-1 px-3 text-slate-50 rounded-md cursor-pointer" v-for="({tabName, slot}, i) in tabs"
+                     :key="tabName">
+                    <span :class="tabs[activeTab].tabName === tabName ? 'text-primary-300' : ''" class="text-slate-50">{{ tabName }}</span>
+                </div>
+            </div>
+            <div class="py-4 px-4">
+                <slot v-if="activeTab === 0" name="tab1" />
+                <slot v-if="activeTab === 1" name="tab2" />
+                <slot v-if="activeTab === 2" name="tab3" />
+                <slot v-if="activeTab === 3" name="tab4" />
+                <slot v-if="activeTab === 4" name="tab5" />
+                <slot v-if="activeTab === 5" name="tab6" />
+            </div>
+        </div>
+
+    </section>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+    tabNames: {
+        type: Array,
+        required: true,
+        validator: (tabs) => Array.isArray(tabs) && tabs.length > 0,
+    }
+});
+
+const tabs = props.tabNames.map((tab, i) => ({ slot: `tab${i + 1}`, tabName: tab }));
+const activeTab = ref(0);
+
+const onActiveTabChange = (i: number) => {
+    activeTab.value = i;
+};
+
+
+</script>
diff --git a/src/components/content/BoxTabs/README.md b/src/components/content/BoxTabs/README.md
@@ -0,0 +1,35 @@
+# BoxTabs Component
+
+<img width="954" alt="Screenshot 2023-11-08 at 14 02 45" src="https://github.com/walt-id/waltid-docs/assets/48290617/98e91cca-1c29-429d-843d-f9a2e9051720">
+
+The box tabs component supports up to 6 tabs. If the name for the tab is not provided in the tabNames array,
+the tab won't show up.
+
+### Props
+```json
+{
+  "tabNames": {
+    "type": "Array",
+    "default": []
+  }
+}
+```
+
+### Usage Example
+
+```
+::box-tabs{:tabNames='["Tab1Name", "Tab2Name", "Tab3Name"]'}
+#tab1
+ 
+... tab 1 content ...
+
+#tab2
+
+... tab 2 content ...
+
+#tab3
+
+... tab 3 content ...
+::
+
+```
diff --git a/src/components/content/Callout/Callout.vue b/src/components/content/Callout/Callout.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="pt-4 px-4 bg-slate-800 text-slate-50 rounded-md border-l-4 flex gap-3" :class="borderClass">
+        <div>
+            <CheckCircleIcon v-if="type==='Success'" class="text-green-700 h-6 mt-1"/>
+            <InformationCircleIcon v-if="type==='Info'" class="text-primary-300 h-6 mt-1"/>
+            <ExclamationTriangleIcon v-if="type==='Error'" class="text-red-400 h-6 mt-1"/>
+        </div>
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { CheckCircleIcon, InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'Info',
+        validator: (value: string) => ['Success', 'Error', 'Info'].includes(value),
+        required: false,
+    }
+})
+
+const borderClass = computed(() => {
+    switch (props.type) {
+        case 'Success':
+            return 'border-green-500';
+        case 'Error':
+            return 'border-red-400';
+        case 'Info':
+            return 'border-primary-400';
+        default:
+            return '';
+    }
+})
+
+</script>
diff --git a/src/components/content/Callout/README.md b/src/components/content/Callout/README.md
@@ -0,0 +1,49 @@
+# Alert Component
+
+The alert component is a flexible callout box that can be used to draw the user's attention.
+
+### Props
+
+```json
+{
+  "type": {
+    "type": "String",
+    "default": "Info" // other options "Success" or "Error"
+  }
+}
+```
+
+Usage Example
+Mark up your content as follows to use the Alert component. The 'type' attribute can be set to 'Success', 'Error', or '
+Info'. If it is omitted, 'Info' is used by default.
+
+```markdown
+::callout{type="Error"}
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
+dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
+book. It has survived not only five centuries,
+::
+
+Replace "Error" with any accepted type of alert:
+
+::callout{type="Success"}
+...your message here...
+::
+
+::callout{type="Info"}
+...your message here...
+::
+
+::callout{type="Error"}
+...your message here...
+::
+
+If the 'type' attribute is not provided, 'Info' is used by default:
+
+::callout
+...your default Info message here...
+::
+```
+
+In all of these cases, the component will apply an appropriate border color and display a relevant icon based on the '
+type' attribute. The content of the message goes in between the opening and closing "::".