feat: table button

donotebase · Apr 13, 2020 · f51d67d · f51d67d
1 parent e04786d
commit f51d67d
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 2 deletions.
diff --git a/src/lib/components/buttons/OTableBtn.vue b/src/lib/components/buttons/OTableBtn.vue
@@ -0,0 +1,90 @@
+<template>
+  <o-menubar-btn icon="mdi-table" class="o-table-btn">
+    <q-menu ref="tablePopover" anchor="bottom middle" self="top middle" content-class="o-menu o-table-btn-menu" @hide="onHide">
+      <section class="grid">
+        <div class="row justify-start cursor-pointer" v-for="(row, i) in rows" :key="`row-${i}`">
+          <div v-for="(col, j) in columns" :key="`col-${j}`">
+            <div class="cell" :class="{'selected': row <= selectedRows && col <= selectedColumns}"
+                 @mouseover="select(row, col)"
+                 @click="onSelected()" v-close-popup></div>
+          </div>
+        </div>
+
+        <footer class="row justify-center q-pt-md">
+          {{selectedRows}} x {{selectedColumns}}
+        </footer>
+      </section>
+    </q-menu>
+  </o-menubar-btn>
+</template>
+
+<script>
+import OMenubarBtn from './OMenubarBtn'
+export default {
+  name: 'o-table-btn',
+  data () {
+    return {
+      rows: 5,
+      columns: 5,
+      selectedRows: 2,
+      selectedColumns: 2
+    }
+  },
+  props: {
+    commands: {
+      type: Object
+    },
+    isActive: {
+      type: Object
+    }
+  },
+  components: {
+    OMenubarBtn
+  },
+  methods: {
+    onHide () {
+      this.rows = 5
+      this.columns = 5
+      this.selectedRows = 2
+      this.selectedColumns = 2
+    },
+    select (row, col) {
+      this.selectedRows = row
+      this.selectedColumns = col
+
+      if (this.rows === row && this.rows < 10) {
+        this.rows += 1
+      }
+      if (this.columns === col && this.columns < 10) {
+        this.columns += 1
+      }
+    },
+    onSelected () {
+      this.commands.createTable({ rowsCount: this.selectedRows, colsCount: this.selectedColumns, withHeaderRow: true })
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-table-btn-menu {
+    .grid {
+      padding 1rem
+
+      .cell {
+        height 20px
+        width 20px
+        margin 4px
+        border solid 1px #ccc
+        border-radius 2px
+      }
+
+      .cell.selected {
+        border solid 1px $blue
+        background rgba($blue, 0.2)
+      }
+    }
+  }
+</style>
diff --git a/src/lib/components/menubars/OEditorMenuBar.vue b/src/lib/components/menubars/OEditorMenuBar.vue
@@ -42,6 +42,7 @@
               </section>
             </q-menu>
           </o-menubar-btn>
+          <o-table-btn :commands="commands" :is-active="isActive" :key="index" v-else-if="item==='table'" />
         </template>
       </div>
     </section>
@@ -60,6 +61,7 @@ import OLineHeightDropdown from 'src/lib/components/buttons/OLineHeightDropdown'
 import OHeadingDropdown from 'src/lib/components/buttons/OHeadingDropdown'
 import OHeadingGroup from 'src/lib/components/buttons/OHeadingGroup'
 import OHeadingList from 'src/lib/components/buttons/OHeadingList'
+import OTableBtn from 'src/lib/components/buttons/OTableBtn'
 
 import OMenubarBtn from 'src/lib/components/buttons/OMenubarBtn'
 import OSimpleCommandBtn from 'src/lib/components/buttons/OSimpleCommandBtn'
@@ -82,7 +84,6 @@ export default {
         'bullet_list',
         'ordered_list',
         'todo_list',
-        'table',
         'undo',
         'redo',
         'indent',
@@ -120,7 +121,8 @@ export default {
     OLineHeightDropdown,
     OHeadingDropdown,
     OHeadingGroup,
-    OHeadingList
+    OHeadingList,
+    OTableBtn
   },
   methods: {
     isSimpleCommand (item) {