first version of textinput

ui/src/components/TextInput.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="text-input">
+    <sl-icon-button
+      class="edit-button"
+      name="pencil"
+      @click="editing = true"
+      :disabled="editing"
+    />
+
+    <div v-if="editing" class="edit">
+      <sl-input
+        type="text"
+        size="small"
+        v-sl-model:myValue
+        @blur="submit"
+        ref="input"
+      />
+      <!-- <sl-icon-button
+        name="box-arrow-in-right"
+        @click="$emit('edit', myValue)"
+      /> -->
+    </div>
+    <div v-else class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, ref, watchEffect } from "vue";
+
+export default defineComponent({
+  name: "TextInput",
+  emits: ["edit"],
+  props: {
+    value: {
+      required: true,
+    },
+  },
+  setup(props) {
+    const myValue = ref(props.value);
+    const editing = ref(false);
+    const input = ref<HTMLInputElement | undefined>(undefined);
+
+    watchEffect(async () => {
+      if (editing.value) {
+        await nextTick();
+        input.value?.focus();
+      }
+    });
+
+    return {
+      editing,
+      myValue,
+      input,
+    };
+  },
+  methods: {
+    submit() {
+      if (this.myValue !== this.value) {
+        this.$emit("edit", this.myValue);
+      }
+      this.editing = false;
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.text-input {
+  display: flex;
+  align-items: center;
+}
+
+.edit {
+  display: flex;
+
+  sl-input {
+    flex-grow: 1;
+  }
+}
+</style>

ui/src/components/widgets/Table.vue

@@ -24,23 +24,26 @@
             <Marquee>{{ entry.attribute }}</Marquee>
           </td>
           <td>
-            <Address
-              link
-              v-if="entry.value.t === 'Address'"
-              :address="entry.value.c"
-              :resolve="Boolean(resolve[id])"
-              :data-id="id"
-              :ref="
-                (el) => {
-                  if (el) addressEls.push(el);
-                }
-              "
-            />
-            <template v-else>
-              <Marquee>
+            <text-input
+              :value="entry.value.c"
+              @edit="(val) => updateEntry(id, entry.attribute, val)"
+            >
+              <Address
+                link
+                v-if="entry.value.t === 'Address'"
+                :address="entry.value.c"
+                :resolve="Boolean(resolve[id])"
+                :data-id="id"
+                :ref="
+                  (el) => {
+                    if (el) addressEls.push(el);
+                  }
+                "
+              />
+              <Marquee v-else>
                 {{ entry.value.c }}
               </Marquee>
-            </template>
+            </text-input>
           </td>
         </tr>
         <tr v-if="attributes.length > currentDisplay">
@@ -88,6 +91,7 @@
 <script lang="ts">
 import Address from "@/components/Address.vue";
 import Marquee from "@/components/Marquee.vue";
+import TextInput from "@/components/TextInput.vue";
 import { AttributeChange, IEntry } from "@/types/base";
 import {
   computed,
@@ -104,6 +108,7 @@ export default defineComponent({
   components: {
     Address,
     Marquee,
+    TextInput,
   },
   emits: ["edit"],
   props: {
@@ -186,6 +191,24 @@ export default defineComponent({
         this.$emit("edit", { type: "delete", addr } as AttributeChange);
       }
     },
+    async updateEntry(addr: string, attribute: string, value: string) {
+      // this.$emit("edit", {
+      //   type: "update",
+      //   addr,
+      //   value
+      // } as AttributeChange);
+
+      this.$emit("edit", {
+        type: "delete",
+        addr,
+      } as AttributeChange);
+
+      this.$emit("edit", {
+        type: "create",
+        attribute,
+        value,
+      } as AttributeChange);
+    },
   },
 });
 </script>