KintoneAppBuilder created

frontend/src/components/DocUpload.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="q-pa-md">
+    <q-uploader
+        style="max-width: 400px"
+        :url="uploadUrl"
+        :label="title"
+        accept=".csv,.xlsx"
+        :on-rejected="onRejected"
+    ></q-uploader>
+  </div>
+</template>
+<script setup lang="ts">
+ import { useQuasar } from 'quasar';
+
+
+    const $q=useQuasar();
+//     const allowTypes=['.xlsx','.csv'];
+
+//     function checkFileType(files : File[] ):File[]{
+//         return files.filter((file)=>{
+//             let filename = file.name.toLowerCase();
+//             for(let ext of allowTypes){
+//               if(filename.endsWith(ext)){
+//                 return true;
+//               }
+//             }
+//             return false;
+//         });
+//     }
+
+    function onRejected (rejectedEntries:any) {
+      // Notify plugin needs to be installed
+      // https://quasar.dev/quasar-plugins/notify#Installation
+      $q.notify({
+        type: 'negative',
+        message: `CSVおよびExcelファイルを選択してください。`
+      })
+    }
+
+interface Props {
+  title: string;
+  uploadUrl:string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  title:"設計書から導入する(csv or excel)",
+  uploadUrl:process.env.KAB_BACKEND_URL
+});
+
+</script>
+<style lang="scss">
+
+</style>

frontend/src/components/EssentialLink.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>{{ caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+}
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+});
+</script>

frontend/src/components/ExampleComponent.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <p>{{ title }}</p>
+    <ul>
+      <li v-for="todo in todos" :key="todo.id" @click="increment">
+        {{ todo.id }} - {{ todo.content }}
+      </li>
+    </ul>
+    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
+    <p>Active: {{ active ? 'yes' : 'no' }}</p>
+    <p>Clicks on todos: {{ clickCount }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Todo, Meta } from './models';
+
+interface Props {
+  title: string;
+  todos?: Todo[];
+  meta: Meta;
+  active: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+});
+
+const clickCount = ref(0);
+function increment() {
+  clickCount.value += 1;
+  return clickCount.value;
+}
+
+const todoCount = computed(() => props.todos.length);
+
+</script>

frontend/src/components/models.ts

@@ -0,0 +1,8 @@
+export interface Todo {
+  id: number;
+  content: string;
+}
+
+export interface Meta {
+  totalCount: number;
+}