dynamic add column

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@coreui/coreui": "^5.0.0",
+        "@coreui/icons": "^3.0.1",
+        "@coreui/icons-vue": "^2.0.0",
         "@coreui/vue": "^5.0.0",
         "@popperjs/core": "^2.11.8",
         "@vue/compat": "^3.4.25",
@@ -1869,6 +1871,19 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/@coreui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-u9UKEcRMyY9pa4jUoLij8pAR03g5g6TLWV33/Mx2ix8sffyi0eO4fLV8DSTQljDCw938zt7KYog5cVKEAJUxxg=="
+    },
+    "node_modules/@coreui/icons-vue": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@coreui/icons-vue/-/icons-vue-2.0.0.tgz",
+      "integrity": "sha512-3OLOv6TExmi93kapV4n9kmJ36fqxTHv3Vn/SPGAUX1btwf0wCmXen4xF3A8OdLEwR0i6Ggqw+MY/T7WjA6k2xg==",
+      "peerDependencies": {
+        "vue": "^3.2.20"
+      }
+    },
     "node_modules/@coreui/vue": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-5.0.0.tgz",

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@coreui/coreui": "^5.0.0",
+    "@coreui/icons": "^3.0.1",
+    "@coreui/icons-vue": "^2.0.0",
     "@coreui/vue": "^5.0.0",
     "@popperjs/core": "^2.11.8",
     "@vue/compat": "^3.4.25",

src/App.vue

@@ -2,23 +2,80 @@
 
 <template>
 <Navbar></Navbar>
-  <HelloWorld msg="Welcome to Your Vue.js App"/>  
+  <CContainer>
+    <div class="container-fluid p-0">
+      <CAlert color="primary" class="d-flex align-items-center">
+        <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
+          <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
+        </svg>
+        <div>
+          An example alert with an icon
+        </div>
+      </CAlert>
+      <div class="row">
+        <div class="col-1">
+          <CIcon v-on:click="addForm" icon="cibAddthis" size="xxl" class="mb-3"/>
+        </div>
+      </div>
+    </div>
+  
+  <div v-for="(form, index) in forms" :key="index">
+    <Form initialData="allFormData[index]" @update-data="data => handleDataUpdate(index, data)"></Form>    
+  </div>
+  <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+    
+    <CButton @click="submit()" color="success">Submit</CButton>
+  </div>
+</CContainer>
+
 <Footer></Footer>
 </template>
 
 <script>
+import Vue from 'vue'
+import { CIcon } from '@coreui/icons-vue';
+import * as icon from '@coreui/icons';
 import HelloWorld from './components/HelloWorld.vue'
 import Navbar from './components/Navbar.vue'
 import Footer from './components/Footer.vue'
+import Form from './components/Form.vue'
 
 export default {
   name: 'App',
   components: {
     HelloWorld,
     Navbar,
+    Form,
     Footer
+  },
+
+  setup() {
+    return {
+      icon,
+    }
+  },  
+  data() {
+    return {
+      forms: [],
+      allFormData: []
+    };
+  },
+  methods:{
+    addForm(event){
+        console.log("add one");
+        this.forms.push({});
+        this.allFormData.push('');
+    },
+    handleDataUpdate(index, data) {
+      this.allFormData[index] = data; // Update the specific form's data
+    },
+    submit() {
+      console.log('All form data:', this.allFormData[0].attribute);
+      // Here you can handle all the data, such as sending it to a server
+    }
 
   }
+
 }
 </script>
 

src/components/Footer.vue

 <template>
-<CFooter>
-  <div>
-    <CLink href="https://coreui.io">CoreUI</CLink>
-    <span>&copy; 2021 creativeLabs.</span>
-  </div>
-  <div>
-    <span>Powered by</span>
-    <CLink href="https://coreui.io">CoreUI</CLink>
-  </div>
+<CFooter class="fixed-bottom">
+        <CContainer>            
+            <div class="row align-items-center justify-content-md-between ">
+                    <div class="copyright">
+                        &copy; 2021 <a href="https://lab.prlab.io" target="_blank">PRLAB@NTUST</a>
+                </div>
+            </div>
+        </CContainer>    
 </CFooter>
 </template>
 
@@ -19,13 +18,23 @@ export default {
 </script>
 <style>
 #footer {
-    position: fixed;
-    height: 50px;
-    background-color: red;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    margin-bottom: 0px;
+    ul.footer {
+  margin-top: 10px;
+  text-align: center;
+}
+
+ul.footer li {
+  color: #333;
+  display: inline-block;
+}
+
+#footer {
+  bottom: -50px;
+  height: 50px;
+  left: 0;
+  position: absolute;
+  right: 0;
+}
 }
 
 </style>
\ No newline at end of file

src/components/Form.vue

+<template>
+<CContainer class="">
+<CRow class="mb-5 g-3">
+<CCol xs>
+    <CFormInput type="text" placeholder="Attribute" aria-label="Attribute"
+    v-model="attribute"
+    @input="updateParent"
+    />
+  </CCol>
+  <CCol xs>
+    <CFormInput type="text" placeholder="Threshold" aria-label="Threshold"     
+    v-model="threshold"
+    @input="updateParent"
+    />
+  </CCol>
+</CRow>
+</CContainer>
+</template>
+<script>
+export default {
+    name: 'Form',
+    props: {
+        initialData: Object
+    },
+    data () {
+      return {
+            attribute: this.initialData.attribute || '',
+            threshold: this.initialData.threshold || '',
+        };
+    },
+    methods:{
+        updateParent() {
+          this.$emit('update-data', { attribute: this.attribute, threshold: this.threshold });
+        }
+
+    }
+}
+</script>
+

src/components/HelloWorld.vue

@@ -11,20 +11,27 @@
           An example alert with an icon
         </div>
       </CAlert>
-      <button type="button" class="btn btn-success mx-1 my-3" @click="add">ADD</button>
+      <div class="row">
+        <div class="col-1">
+          <CIcon v-on:click="plus" icon="cibAddthis" size="xxl"/>
+        </div>
+      </div>
     </div>
   </div>
+  <Form></Form>
   </CContainer>
 </template>
 
 <script>
 import { CContainer, CAlert } from '@coreui/vue'
+
 export default {
 
   name: 'HelloWorld',
   props: {
     msg: String
   }
+
 }
 </script>
 

src/components/Navbar.vue

 <template>
-<CNavbar expand="lg" color-scheme="light" class="bg-light">
+<CNavbar expand="lg" color-scheme="light" class="bg-light-cui-white fixed-top">
   <CContainer fluid>
     <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
     <CNavbarBrand href="#">Navbar</CNavbarBrand>

src/main.js

@@ -2,7 +2,12 @@ import {  createApp } from 'vue'
 //in your `main.js` file
 import 'bootstrap/dist/css/bootstrap.min.css'
 import '@coreui/coreui/dist/css/coreui.min.css'
-
+import CoreuiVue from '@coreui/vue';
 import App from './App.vue'
+import { CIcon } from '@coreui/icons-vue';
+import * as icon from '@coreui/icons';
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.provide('icons', icon)
+app.component('CIcon', CIcon)
+app.use(CoreuiVue).mount('#app')