feat: finish collection migration

2026-06-30 14:08:51 +08:00
parent ebe7ea5f56
commit fda2fe9ec9
7 changed files with 410 additions and 9 deletions
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  uuid: {
+    type: String,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'delete', uuid: string): void
+  (e: 'share', uuid: string): void
+  (e: 'update', uuid: string, name: string): void
+}>()
+
+const isEditing = ref<boolean>(false);
+const editingName = ref<string>("");
+
+const editItem = () => {
+  isEditing.value = true;
+  editingName.value = props.name;
+}
+
+const shareItem = () => {
+  emit('share', props.uuid);
+}
+
+const deleteItem = () => {
+  emit('delete', props.uuid);
+}
+
+const updateItem = () => {
+  let new_name = editingName.value;
+  editingName.value = "";
+  isEditing.value = false;
+  emit('update', props.uuid, new_name);
+}
+
+const cancelUpdateItem = () => {
+  editingName.value = "";
+  isEditing.value = false;
+}
+
+</script>
+
+<template>
+  <div class="item card">
+    <div class="item-words">
+      <p v-show="!isEditing">{{ name }}</p>
+      <div v-show="isEditing" class="control">
+        <input v-model="editingName" class="input" type="text"></input>
+      </div>
+    </div>
+
+    <div class="item-icon control" v-show="!isEditing" @click="editItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
+    </div>
+    <div class="item-icon control" v-show="!isEditing" @click="shareItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-share"></font-awesome-icon></span></a>
+    </div>
+    <div class="item-icon control" v-show="!isEditing" @click="deleteItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-trash"></font-awesome-icon></span></a>
+    </div>
+
+    <div class="item-icon control" v-show="isEditing" @click="updateItem">
+      <button class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-check"></font-awesome-icon></span></button>
+    </div>
+    <div class="item-icon control" v-show="isEditing" @click="cancelUpdateItem">
+      <button class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-times"></font-awesome-icon></span></button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+div.item {
+  display: flex;
+  flex-flow: row;
+  align-items: flex-start;
+
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+div.item-words {
+  flex-grow: 1;
+  flex-basis: 0;
+
+  word-break: break-all;
+}
+
+div.item-icon {
+  margin-left: 0.75rem;
+}
+</style>