list options

src/components/IssueListOptions.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
-const options = [
-  { id: 1, title: 'Title' },
-  { id: 2, title: 'Content' },
-  { id: 3, title: 'Status' },
-]
-const select = (value: unknown) => {}
+import { ISSUE_LIST_FIELDS, useIssueListOptions } from '@/composables/useIssueListOptions.ts'
+
+const visible = useIssueListOptions()
 </script>
 
 <template>
-  <v-menu width="15rem" :close-on-content-click="false">
-    <template v-slot:activator="{ props }">
-      <v-btn density="compact" icon="mdi-dots-horizontal" v-bind="props" />
-    </template>
+  <div>
+    <v-menu width="15rem" :close-on-content-click="false">
+      <template v-slot:activator="{ props }">
+        <v-btn density="compact" icon="mdi-dots-horizontal" v-bind="props" />
+      </template>
 
-    <v-list border select-strategy="single-leaf" density="compact" @update:selected="select">
-      <v-list-item rounded="0" class="py-0" slim v-for="el in options" :key="el.id">
-        <v-list-item-title>
-          <div class="menu-grid px-1">
-            <div>{{ el.title }}</div>
-            <v-switch
-              inset="material"
-              size="x-small"
-              color="success"
-              true-icon="mdi-check"
-              false-icon="mdi-close"
-              hide-details
-            />
-          </div>
-        </v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-menu>
+      <v-list border density="compact">
+        <v-list-item rounded="0" class="py-0" slim v-for="el in ISSUE_LIST_FIELDS" :key="el.alias">
+          <v-list-item-title>
+            <div class="menu-grid px-1">
+              <div>{{ el.title }}</div>
+              <v-switch
+                v-model="visible[el.alias]"
+                inset="material"
+                size="x-small"
+                color="success"
+                true-icon="mdi-check"
+                false-icon="mdi-close"
+                hide-details
+              />
+            </div>
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
 </template>
 
 <style scoped lang="scss">