widget switching in AttributeView

ui/src/components/AttributeView.vue

@@ -1,12 +1,23 @@
 <template>
   <section class="attribute-view">
-    <h3>
-      <up-link v-if="type" :to="{ entity: type.address }">
-        <sl-icon v-if="type.icon" :name="type.icon" />
-        {{ type.name || "???" }}
-      </up-link>
-      <template v-else> {{ title || "???" }} </template>
-    </h3>
+    <header>
+      <h3>
+        <up-link v-if="type" :to="{ entity: type.address }">
+          <sl-icon v-if="type.icon" :name="type.icon" />
+          {{ type.name || "???" }}
+        </up-link>
+        <template v-else> {{ title || "???" }} </template>
+      </h3>
+      <div class="views">
+        <sl-icon-button
+          v-for="widget in availableWidgets"
+          :key="widget.name"
+          :name="widget.icon || 'question-diamond'"
+          :class="{ active: widget.name === currentWidget }"
+          @click="currentWidget = widget.name"
+        />
+      </div>
+    </header>
     <component
       v-for="component in components"
       :key="component.id"
@@ -28,6 +39,12 @@ import { UpType } from "@/lib/types";
 import { AttributeChange, IEntry } from "@/types/base";
 import { ComponentOptions, defineComponent, PropType } from "vue";
 
+interface Widget {
+  name: string;
+  icon?: string;
+  components: ComponentOptions[];
+}
+
 export default defineComponent({
   name: "AttributeView",
   components: {
@@ -61,15 +78,38 @@ export default defineComponent({
       default: false,
     },
   },
+  data() {
+    return {
+      currentWidget: "table",
+    };
+  },
   computed: {
-    components(): ComponentOptions[] {
-      return (
-        this.type?.widgetInfo || [
+    availableWidgets(): Widget[] {
+      const result = [] as Widget[];
+
+      if (this.type?.widgetInfo) {
+        result.push({
+          name: this.type.name || this.type.address,
+          icon: this.type.icon,
+          components: this.type.widgetInfo,
+        });
+      }
+
+      result.push({
+        name: "table",
+        icon: "table",
+        components: [
           {
             name: "Table",
           },
-        ]
-      );
+        ],
+      });
+
+      return result;
+    },
+    components(): ComponentOptions[] {
+      return this.availableWidgets.find((w) => w.name === this.currentWidget)!
+        .components;
     },
   },
   methods: {
@@ -98,6 +138,9 @@ export default defineComponent({
       this.$emit("edit");
     },
   },
+  mounted() {
+    this.currentWidget = this.availableWidgets[0].name;
+  },
 });
 </script>
 
@@ -112,24 +155,48 @@ section {
   border: 1px solid var(--foreground);
   border-radius: 4px;
 
-  h3 {
-    display: inline-block;
+  header {
+    margin-bottom: 0.2em;
 
-    background: var(--background);
-    font-weight: 600;
+    & > * {
+      position: absolute;
+      top: -0.66em;
 
-    position: absolute;
-    top: -1.66em;
-    left: 1ex;
-    line-height: 1;
-    padding: 0 0.75ex;
+      margin: 0;
 
-    sl-icon {
-      margin-bottom: -2px;
+      background: var(--background);
+      font-weight: 600;
+
+      line-height: 1;
+      padding: 0 0.75ex;
+
+      sl-icon {
+        margin-bottom: -2px;
+      }
+
+      a {
+        text-decoration: none;
+      }
     }
 
-    a {
-      text-decoration: none;
+    h3 {
+      left: 1ex;
+    }
+
+    .views {
+      right: 1ex;
+
+      sl-icon-button {
+        &::part(base) {
+          padding: 0 calc(0.75ex / 2);
+        }
+
+        &.active {
+          &::part(base) {
+            color: var(--foreground);
+          }
+        }
+      }
     }
   }
 }