added fa config files, stub of Column editor
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
font_name: fa-dtbl-1
|
||||
css_selector: '.fa-{{glyph}}'
|
||||
preprocessor_path: ''
|
||||
autowidth: true
|
||||
no_hash: true
|
||||
force: false
|
||||
debug: false
|
||||
quiet: false
|
||||
copyright: >-
|
||||
The Fork Awesome font is licensed under the SIL OFL 1.1
|
||||
(http://scripts.sil.org/OFL). Fork Awesome is a fork based of off Font Awesome
|
||||
4.7.0 by Dave Gandy. More info on licenses at https://forkawesome.github.io
|
||||
font_em: 1792
|
||||
font_ascent: 1536
|
||||
font_descent: 256
|
||||
input:
|
||||
vectors: svg
|
||||
fonts_path_relative_to_css: ./
|
||||
@@ -0,0 +1,86 @@
|
||||
# used
|
||||
home # My profile link
|
||||
sign-out # logout menu button
|
||||
sign-in # login form
|
||||
user-plus # register icon
|
||||
user-circle-o # profile header, menu
|
||||
vcard-o # handle icon
|
||||
users # public page users list
|
||||
user # single user
|
||||
key-modern # account setup link
|
||||
|
||||
github # social login
|
||||
facebook-square # social login
|
||||
google # social login
|
||||
|
||||
inbox # button for the list of proposals
|
||||
|
||||
th-list # nbr of table rows
|
||||
comment # comments button
|
||||
code-fork # fork, or number of forks
|
||||
pencil # edit / propose change button
|
||||
|
||||
save # form save btn
|
||||
link # user homepage link icon
|
||||
globe # form-group for URLs
|
||||
|
||||
question-circle # form help bubble
|
||||
calendar # user join date
|
||||
|
||||
table # icon in table list
|
||||
star-o # table fab btn
|
||||
star # table fav btn, active
|
||||
history # nbr of revisions icon
|
||||
|
||||
eye # visit count
|
||||
|
||||
download # export buttons
|
||||
wrench # Table options
|
||||
|
||||
trash-o
|
||||
plus
|
||||
warning
|
||||
undo
|
||||
|
||||
close
|
||||
hourglass
|
||||
|
||||
sun-o
|
||||
moon-o
|
||||
|
||||
chevron-up
|
||||
chevron-down
|
||||
|
||||
|
||||
# Unused
|
||||
; sliders
|
||||
;
|
||||
;
|
||||
; check
|
||||
; trash-o
|
||||
; trash
|
||||
; close
|
||||
;
|
||||
; eye
|
||||
; eye-slash
|
||||
; filter
|
||||
; flag
|
||||
; search
|
||||
;
|
||||
; legal
|
||||
; rss
|
||||
; reply
|
||||
;
|
||||
; bell
|
||||
; bell-o
|
||||
;
|
||||
; download
|
||||
; cloud-upload
|
||||
; share-alt
|
||||
;
|
||||
; sort
|
||||
; sort-asc
|
||||
; sort-desc
|
||||
; quote-left
|
||||
;
|
||||
; clock-o
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="hidden" :name="name" :value="JSON.stringify(columns)">
|
||||
<table class="editor-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Title</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(col, i) in columns">
|
||||
<td>
|
||||
<a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="move(i, -1)">
|
||||
<v-icon class="fa-chevron-up" alt="Move Up" />
|
||||
</a><!--
|
||||
--><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" @click.prevent="move(i, 1)">
|
||||
<v-icon class="fa-chevron-down" alt="Move Down" />
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input v-model="col.name" class="form-control" type="text" style="width: 140px">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<select v-model="col.type" class="form-control custom-select" style="width: 110px">
|
||||
<option v-for="t in colTypes" :value="t">{{t}}</option>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input v-model="col.title" class="form-control" type="text" style="width: 170px">
|
||||
</td>
|
||||
|
||||
<td class="text-nowrap">
|
||||
<a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="delCol(i)">
|
||||
<v-icon class="fa-trash-o" alt="Delete column" />
|
||||
</a><!--
|
||||
--><a href="" class="btn btn-outline-secondary" v-if="i === columns.length - 1"
|
||||
@click.prevent="addCol()">
|
||||
<v-icon class="fa-plus" alt="Add Column" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "base";
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
@include pr(1);
|
||||
@include py(1);
|
||||
}
|
||||
|
||||
td .btn {
|
||||
@include mr(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
initialColumns: Array,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
columns: this.initialColumns,
|
||||
colTypes: ['string', 'int', 'float', 'bool'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
delCol(n) {
|
||||
if (n == 0) return
|
||||
|
||||
this.columns.splice(n, 1)
|
||||
},
|
||||
addCol() {
|
||||
this.columns.push({
|
||||
name: '',
|
||||
type: 'string',
|
||||
title: '',
|
||||
})
|
||||
},
|
||||
move(i, dir) {
|
||||
let cur = this.columns[i];
|
||||
let next = this.columns[i+dir];
|
||||
this.$set(this.columns, i, next);
|
||||
this.$set(this.columns, i+dir, cur);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Vendored
+10
-12
@@ -1,8 +1,9 @@
|
||||
window.Vue = require('vue')
|
||||
|
||||
const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
|
||||
const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
|
||||
const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'))
|
||||
const ColumnEditor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
|
||||
const ColumnEditorAdvanced = Vue.component('column-editor', require('./components/ColumnEditorAdvanced.vue'))
|
||||
const RowsEditor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
|
||||
const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
|
||||
|
||||
// const app = new Vue({
|
||||
// el: '#app'
|
||||
@@ -10,18 +11,15 @@ const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'))
|
||||
|
||||
window.app = {
|
||||
ColumnEditor: function (selector, data) {
|
||||
new ColumnEditorCtor({
|
||||
propsData: data
|
||||
}).$mount(selector)
|
||||
new ColumnEditor({ propsData: data }).$mount(selector)
|
||||
},
|
||||
ColumnEditorAdvanced: function (selector, data) {
|
||||
new ColumnEditorAdvanced({ propsData: data }).$mount(selector)
|
||||
},
|
||||
RowsEditor: function (selector, data) {
|
||||
new RowsEditorCtor({
|
||||
propsData: data
|
||||
}).$mount(selector)
|
||||
new RowsEditor({ propsData: data }).$mount(selector)
|
||||
},
|
||||
Icon: function (selector, data) {
|
||||
new IconCtor({
|
||||
propsData: data
|
||||
}).$mount(selector)
|
||||
new Icon({ propsData: data }).$mount(selector)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user