Merge branch 'daitian' of https://alicorn-dev@dev.azure.com/alicorn-dev/KintoneAppBuilder/_git/KintoneAppBuilder into daitian-pinia

frontend/src/components/flowEditor/left/ItemSelector.vue

@@ -1,42 +1,42 @@
 <template>
-  <q-list separator>
-    <q-virtual-scroll
-      ref="virtualListRef"
-      style="max-height: 10em"
-      :items="list"
-      separator
-      v-slot="{ item, index }"
-    >
-      <q-item clickable v-ripple :key="index" :active="index === activeIndex">
-        <q-item-section>{{ item }}</q-item-section>
-      </q-item>
-    </q-virtual-scroll>
-  </q-list>
+  <div
+    class="row"
+    style="
+      border-radius: 2px;
+      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
+        rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
+    "
+  >
+    <q-icon
+      class="self-center q-ma-sm"
+      name="widgets"
+      color="grey-9"
+      style="font-size: 2em"
+    />
+
+    <div class="col-7 self-center ellipsis">
+      {{ actName }}
+    </div>
+
+    <div class="self-center">
+      <q-btn
+        outline
+        dense
+        label="変 更"
+        padding="none sm"
+        color="primary"
+      ></q-btn>
+    </div>
+  </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue';
-
-const list = [];
-
-for (let i = 0; i < 100; i++) {
-  list.push(`勤怠管理 - ${i}`);
-}
+import { computed } from 'vue';
 
 export default {
-  setup() {
-    const activeIndex = ref(4);
-    const virtualListRef = ref(null);
-
-    onMounted(() => {
-      virtualListRef.value.scrollTo(activeIndex.value);
-    });
-
-    return {
-      list,
-      activeIndex,
-      virtualListRef,
-    };
+  props: ['actName'],
+  setup(props) {
+    const actName = computed(() => props.actName);
   },
 };
 </script>