vuetify 1.0.16
This commit is contained in:
parent
4ab14f41bb
commit
fbe756ec05
20 changed files with 612 additions and 434 deletions
|
|
@ -13,7 +13,7 @@
|
|||
</v-navigation-drawer>
|
||||
|
||||
<v-navigation-drawer app :mini-variant.sync="mini" v-model="drawer"
|
||||
:disable-route-watcher="true" :enable-resize-watcher="true">
|
||||
:enable-resize-watcher="true">
|
||||
<v-list class="pa-0">
|
||||
|
||||
<v-list-tile avatar tag="div">
|
||||
|
|
@ -176,7 +176,8 @@
|
|||
children: [
|
||||
|
||||
{href: '/form',text: 'Forms',icon: 'format_list_bulleted' },
|
||||
{href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted' }
|
||||
{href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted' },
|
||||
{href: '/form3',text: 'vue-form-json-schema',icon: 'format_list_bulleted' }
|
||||
]},
|
||||
{
|
||||
icon: 'more_horiz',
|
||||
|
|
@ -189,7 +190,8 @@
|
|||
{href: '/select',text: 'Select',icon: 'extension'},
|
||||
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
|
||||
{href: '/svg',text: 'SVG',icon: 'extension'},
|
||||
{href: '/tree',text: 'Tree',icon: 'nature'}
|
||||
{href: '/tree',text: 'Tree',icon: 'nature'},
|
||||
{href: '/tree2',text: 'Tree 2',icon: 'nature'}
|
||||
]},
|
||||
|
||||
{href: '/settings',text: 'Settings',icon: 'settings' },
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function vue-poc:file(
|
|||
declare function vue-poc:get-file($file)
|
||||
{
|
||||
let $path := resolve-uri( 'static/' || $file,static-base-uri())
|
||||
let $path:=if(file:exists($path))then $path else $vue-poc:index
|
||||
let $path:=if(file:exists($path))then $path else ($vue-poc:index,prof:dump($path," Not found"))
|
||||
return (
|
||||
web:response-header(map { 'media-type': vue-poc:content-type($path) }),
|
||||
file:read-binary($path)
|
||||
|
|
|
|||
|
|
@ -8,12 +8,7 @@ display button that invokes a select path form
|
|||
}
|
||||
-->
|
||||
<template id="vp-selectpath">
|
||||
<v-menu :close-on-click="false"
|
||||
offset-x
|
||||
:close-on-content-click="false"
|
||||
:nudge-width="200"
|
||||
v-model="frmfav"
|
||||
>
|
||||
<v-dialog v-model="frmfav" persistent max-width="600">
|
||||
<v-btn slot="activator" @click.stop="set(!frmfav)" icon flat title="Add ">
|
||||
<slot>
|
||||
<v-icon>add_circle</v-icon>
|
||||
|
|
@ -22,57 +17,39 @@ display button that invokes a select path form
|
|||
<v-card >
|
||||
<v-toolbar >
|
||||
<v-card-title>
|
||||
Add a new tab {{type}}
|
||||
Content of new tab {{type}}
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
|
||||
|
||||
</v-toolbar>
|
||||
|
||||
<v-card-text>
|
||||
Content:
|
||||
<v-tabs v-model="type" icons-and-text centered >
|
||||
|
||||
<v-tab >
|
||||
Empty
|
||||
<v-icon>fiber_new</v-icon>
|
||||
</v-tab>
|
||||
<v-tab >
|
||||
XMLDB
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-tab>
|
||||
<v-tab >
|
||||
Webfile
|
||||
<v-icon>account_box</v-icon>
|
||||
</v-tab>
|
||||
<v-tab-item>
|
||||
<v-card flat>
|
||||
<v-card-text>empty</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-text-field label="database url" v-model="xmldb"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-text-field label="webfile url" v-model="webfile"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat @click.stop="favorite(); set(false)">Add tab</v-btn>
|
||||
</v-card-actions>
|
||||
<v-tabs v-model="type" icons-and-text centered >
|
||||
<v-tab v-for="item in protocols" :key="item.name">
|
||||
{{item.name}}
|
||||
<v-icon>{{item.icon}}</v-icon>
|
||||
</v-tab>
|
||||
|
||||
|
||||
<v-tab-item v-for="item in protocols" :key="item.name">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-text-field v-for="f in item.fields" :key="f.model"
|
||||
:label="f.label" :v-model="f.model"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
|
||||
<v-btn color="primary" flat @click.stop="favorite(); set(false)">Add tab</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-dialog>
|
||||
</template>
|
||||
<script>{
|
||||
props: {
|
||||
|
|
@ -82,7 +59,13 @@ display button that invokes a select path form
|
|||
return {
|
||||
type: 0,
|
||||
xmldb: "",
|
||||
webfile:""
|
||||
webfile:"",
|
||||
protocols:[
|
||||
{name: "new",icon: "fiber_new",fields: [{label: "test gg", model: "webfile"}]},
|
||||
{name:"xmldb",icon:"favorite", fields: [{label: "test2", model: "webfile"}]},
|
||||
{name:"webfile",icon:"account_box", fields: [{label: "test3", model: "webfile"}]},
|
||||
{name:"file",icon:"fiber_new", fields: [{label: "test 4", model: "webfile"}]}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ event fired cmd outline
|
|||
this.editor = window.ace.edit(this.$el)
|
||||
this.applySettings(this.aceSettings)
|
||||
this.editor.$blockScrolling = Infinity
|
||||
console.log("setValue: ",this.content)
|
||||
//console.log("setValue: ",this.content)
|
||||
this.editor.setValue((this.content == null)?"NULL":this.content, 1);
|
||||
this.editor.setOptions({ readOnly:this.readOnly });
|
||||
if(this.minLines){
|
||||
|
|
|
|||
|
|
@ -81,17 +81,17 @@ const Notification={
|
|||
Vue.use(Notification);
|
||||
|
||||
// Mimetype info
|
||||
const MimeTypes={
|
||||
"text/xml":"xml",
|
||||
"application/xml":"xml",
|
||||
"application/xquery":"xquery",
|
||||
"text/ecmascript":"javascript",
|
||||
"application/sparql-query":"sparql",
|
||||
"text/html":"html",
|
||||
"text/turtle":"turtle",
|
||||
"text/css":"css",
|
||||
"image/svg+xml":"svg"
|
||||
};
|
||||
const MimeTypes=[
|
||||
{name: "text/xml", mode: "xml"},
|
||||
{name: "application/xml", mode:"xml"},
|
||||
{name: "application/xquery", mode:"xquery"},
|
||||
{name: "text/ecmascript", mode:"javascript"},
|
||||
{name: "application/sparql-query", mode:"sparql"},
|
||||
{name: "text/html", mode:"html"},
|
||||
{name: "text/turtle", mode:"turtle"},
|
||||
{name: "text/css", mode:"css"},
|
||||
{name: "image/svg+xml", mode:"svg"}
|
||||
];
|
||||
|
||||
// Settings read and write list clear
|
||||
localforage.config({
|
||||
|
|
@ -215,6 +215,12 @@ const Fullscreen={
|
|||
}) }
|
||||
};
|
||||
Vue.use(Fullscreen);
|
||||
Vue.use(VueTreeselect);
|
||||
//Vue.use( VueFormJsonSchema);
|
||||
function install (Vue) {
|
||||
Vue.component('vue-form-json-schema', VueFormJsonSchema);
|
||||
};
|
||||
Vue.use({ install: install });
|
||||
|
||||
//leaflet
|
||||
//Vue.component('v-map', Vue2Leaflet.Map);
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
<v-menu left transition="v-fade-transition" >
|
||||
<v-chip label small slot="activator" >{{ mode }}</v-chip>
|
||||
<v-list dense>
|
||||
<v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
|
||||
<v-list-tile-title v-text="mimetype" @click="setMode(mimetype)"></v-list-tile-title>
|
||||
<v-list-tile v-for="type in mimeTypes" :key="type.name">
|
||||
<v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
|
@ -262,9 +262,9 @@ v-on:annotation="annotation"></vue-ace>
|
|||
this.annotations=counts
|
||||
//console.log("annotations: ",counts)
|
||||
},
|
||||
setMode(mimetype){
|
||||
this.mimetype=mimetype
|
||||
var r=MimeTypes[mimetype]
|
||||
setMode(type){
|
||||
this.mimetype=type.name
|
||||
var r=type.mode
|
||||
this.mode=r?r:"text"
|
||||
},
|
||||
onResize(){
|
||||
|
|
|
|||
|
|
@ -1,14 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="tabs">
|
||||
<div>
|
||||
<v-toolbar tabs>
|
||||
<v-toolbar tabs dense>
|
||||
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
|
||||
<v-toolbar-title>{{ currentItem }} : {{ active && active.name }}{{ dirty?'*':'' }}</v-toolbar-title>
|
||||
<v-btn @click="showInfo = !showInfo" icon><v-icon>info</v-icon></v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn>{{ active && active.mode }}</v-btn>
|
||||
|
||||
|
||||
<v-menu left transition="v-fade-transition" >
|
||||
<v-chip label small slot="activator" >{{ active && active.mode }}</v-chip>
|
||||
<v-list dense>
|
||||
<v-list-tile v-for="type in mimeTypes" :key="type.name">
|
||||
<v-list-tile-title v-text="type.name" @click="alert('todo')"></v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="showInfo = !showInfo" icon>
|
||||
<v-icon v-if="showInfo">info</v-icon>
|
||||
<v-icon v-else>mode_edit</v-icon>
|
||||
</v-btn>
|
||||
<v-menu left bottom :close-on-content-click="false" >
|
||||
<a class="tabs__item" slot="activator">
|
||||
{{ items.length }}
|
||||
|
|
@ -28,7 +37,6 @@
|
|||
</v-menu>
|
||||
|
||||
<v-tabs v-model="currentItem" slot="extension">
|
||||
|
||||
<v-tab
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
|
|
@ -44,63 +52,83 @@
|
|||
<v-icon size="16px">close</v-icon>
|
||||
</v-btn>
|
||||
</v-tab>
|
||||
|
||||
</v-tabs>
|
||||
|
||||
|
||||
</v-toolbar>
|
||||
<qd-panel :show="showInfo">
|
||||
|
||||
<v-tabs-items slot="body" v-model="currentItem">
|
||||
|
||||
|
||||
<v-tabs-items slot="body" v-model="currentItem">
|
||||
<v-tab-item
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:id="'T' + item.id"
|
||||
>
|
||||
<v-card flat >
|
||||
<div style="height:200px" ref="ace" v-resize="onResize" >
|
||||
<v-flex xs12 fill-height >
|
||||
<vue-ace :content="item.text" v-on:change-content="changeContent"
|
||||
:mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card flat v-if="showInfo" >
|
||||
<v-card-actions >
|
||||
<v-toolbar-title >Metadata for tab id: '{{ currentItem }}'</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat > <v-icon>highlight_off</v-icon>todo</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-card-text v-if="active">
|
||||
<v-layout row v-for="x in ['name','id','mode','dirty','location']" :key="x">
|
||||
<v-flex xs3>
|
||||
<v-subheader>{{ x}}</v-subheader>
|
||||
</v-flex>
|
||||
<v-flex xs9>
|
||||
<v-text-field
|
||||
:name="x"
|
||||
label="Hint Text"
|
||||
:value="active[x]"
|
||||
single-line
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card v-else>
|
||||
<div style="height:200px" ref="ace" v-resize="onResize" >
|
||||
<v-flex xs12 fill-height >
|
||||
<vue-ace :content="item.text" v-on:change-content="changeContent"
|
||||
:mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
<v-card slot="aside" flat>
|
||||
<v-card-actions >
|
||||
<v-toolbar-title >test</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-text> blah blah protocol: </v-card-text>
|
||||
</v-card>
|
||||
</qd-panel>
|
||||
</v-tabs-items>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data () {
|
||||
return {
|
||||
showadd: false,
|
||||
showInfo: false,
|
||||
showadd: false, // showing add form
|
||||
showInfo: false, // showing info
|
||||
nextId:4,
|
||||
a1:"",
|
||||
currentItem: null, //href of current
|
||||
active: null,
|
||||
items: [
|
||||
{name:"web.txt", id:"1", mode:"text", dirty: false,
|
||||
text:"1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
|
||||
text:`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat.`},
|
||||
|
||||
{name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
|
||||
text:"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
|
||||
text:`let $a:=1 to 5
|
||||
return $a `},
|
||||
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false,
|
||||
text:"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
||||
text:`<foo version="1.0">
|
||||
<node>hello</node>
|
||||
</foo>`},
|
||||
|
||||
],
|
||||
wrap: true,
|
||||
aceSettings: {}
|
||||
aceSettings: {},
|
||||
mimeTypes:MimeTypes
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -122,7 +150,7 @@
|
|||
},
|
||||
|
||||
addItem(tab){
|
||||
console.log("TABS: ",tab);
|
||||
console.log("new: ",tab);
|
||||
var def={name: "AA"+this.nextId,
|
||||
id: ""+this.nextId,
|
||||
contentType: "text/xml",
|
||||
|
|
|
|||
52
src/vue-poc/features/form/form-json-schema.vue
Normal file
52
src/vue-poc/features/form/form-json-schema.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="formsschema">
|
||||
<v-container fluid>
|
||||
<v-card>
|
||||
<v-card-title><qd-link href="https://jarvelov.gitbooks.io/vue-form-json-schema/">vue-form-json-schema@1.13.4</qd-link> </v-card-title>
|
||||
|
||||
<vue-form-json-schema
|
||||
:model="model"
|
||||
:schema="schema"
|
||||
:ui-schema="uiSchema"
|
||||
:on-change="onChange"
|
||||
>
|
||||
</vue-form-json-schema>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>{
|
||||
|
||||
data: () => ({
|
||||
model: {},
|
||||
|
||||
// A valid JSON Schema object
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstName: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Array of HTML elements or Vue components
|
||||
uiSchema: [{
|
||||
component: 'input',
|
||||
model: 'firstName',
|
||||
// Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
|
||||
fieldOptions: {
|
||||
class: ['form-control'],
|
||||
on: ['input'],
|
||||
attrs: {
|
||||
placeholder: 'Please enter your first name',
|
||||
},
|
||||
},
|
||||
}]
|
||||
}),
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.model = value;
|
||||
}
|
||||
}
|
||||
|
||||
}</script>
|
||||
21
src/vue-poc/features/svg2.vue
Normal file
21
src/vue-poc/features/svg2.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="svg2">
|
||||
<v-container fluid>
|
||||
<!-- UI controls that can are used to manipulate the display of the chart -->
|
||||
|
||||
todo
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
alert("mounted");
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="svg2">
|
||||
<v-container fluid>
|
||||
<!-- UI controls that can are used to manipulate the display of the chart -->
|
||||
|
||||
<div class="controls">
|
||||
|
||||
<div>
|
||||
<label>Chart width</label>
|
||||
<input type="range" v-model="settings.width" min="0" max="1000" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Stroke color</label>
|
||||
<input type="color" v-model="settings.strokeColor" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Search…</label>
|
||||
<input type="text" v-model="search" />
|
||||
</div>
|
||||
|
||||
<button v-on:click="add">Add node</button>
|
||||
|
||||
<div>
|
||||
Selected: {{ selected }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SVG that renders the chart based on the "width" and "height" setting from the Vue instance’s data object -->
|
||||
|
||||
<svg v-bind:width="settings.width" v-bind:height="settings.height">
|
||||
|
||||
<!-- In contrast to D3’s "select" methods, we define the graphical elements explicitely here and use the template syntax to loop through collections and bind properties such as "d" or "r" to those elements. -->
|
||||
|
||||
<transition-group tag="g" name="line" >
|
||||
|
||||
<!-- Links are represented as paths -->
|
||||
|
||||
<path v-for="link in links" class="link" v-bind:key="link.id" v-bind:d="link.d" v-bind:style="link.style"></path>
|
||||
|
||||
</transition-group>
|
||||
|
||||
|
||||
<!-- We can now also use events to elements that will call respective methods on the Vue instance -->
|
||||
|
||||
<transition-group tag="g" name="list">
|
||||
<g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:key="node.id" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">
|
||||
|
||||
<!-- Circles for each node -->
|
||||
|
||||
<circle v-bind:r="node.r" v-bind:style="{'fill': index == selected ? '#ff0000' : '#bfbfbf'}"></circle>
|
||||
|
||||
<!-- Finally, text labels -->
|
||||
|
||||
<text v-bind:dx="node.textpos.x" v-bind:dy="node.textpos.y" v-bind:style="node.textStyle">{{ node.text }}</text>
|
||||
|
||||
</g>
|
||||
</transition-group>
|
||||
</svg>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function() {
|
||||
return {
|
||||
csv: null,
|
||||
selected: null,
|
||||
search: "force",
|
||||
settings: {
|
||||
strokeColor: "#19B5FF",
|
||||
width: 960,
|
||||
height: 2000
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
var that = this;
|
||||
|
||||
d3.csv("flare.csv",
|
||||
function(error, data) {
|
||||
if (error) throw error;
|
||||
|
||||
// Load the CSV data
|
||||
// After the CSV has been loaded, the computed properties will automatically re-compute (root, tree, and then nodes & links…)
|
||||
|
||||
that.csv = data;
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
// once we have the CSV loaded, the "root" will be calculated
|
||||
|
||||
root: function() {
|
||||
|
||||
var that = this;
|
||||
|
||||
if (this.csv) {
|
||||
var stratify = d3.stratify().parentId(function(d) {
|
||||
return d.id.substring(0, d.id.lastIndexOf("."));
|
||||
});
|
||||
|
||||
// attach the tree to the Vue data object
|
||||
return this.tree(
|
||||
stratify(that.csv).sort(function(a, b) {
|
||||
return a.height - b.height || a.id.localeCompare(b.id);
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
// the "tree" is also a computed property so that it is always up to date when the width and height settings change
|
||||
|
||||
tree: function() {
|
||||
return d3
|
||||
.cluster()
|
||||
.size([this.settings.height, this.settings.width - 160]);
|
||||
},
|
||||
|
||||
// Instead of enter, update, exit, we mainly use computed properties and instead of "d3.data()" we can use array.map to create objects that hold class names, styles, and other attributes for each datum
|
||||
|
||||
nodes: function() {
|
||||
var that = this;
|
||||
if (this.root) {
|
||||
return this.root.descendants().map(function(d) {
|
||||
return {
|
||||
id: d.id,
|
||||
r: 2.5,
|
||||
className: "node" +
|
||||
(d.children ? " node--internal" : " node--leaf"),
|
||||
text: d.id.substring(d.id.lastIndexOf(".") + 1),
|
||||
highlight: d.id.toLowerCase().indexOf(that.search.toLowerCase()) != -1 && that.search != "",
|
||||
style: {
|
||||
transform: "translate(" + d.y + "px," + d.x + "px)"
|
||||
},
|
||||
textpos: {
|
||||
x: d.children ? -8 : 8,
|
||||
y: 3
|
||||
},
|
||||
textStyle: {
|
||||
textAnchor: d.children ? "end" : "start"
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Instead of enter, update, exit, we mainly use computed properties and instead of "d3.data()" we can use array.map to create objects that hold class names, styles, and other attributes for each datum
|
||||
|
||||
links: function() {
|
||||
var that = this;
|
||||
|
||||
if (this.root) {
|
||||
|
||||
// here we’ll calculate the "d" attribute for each path that is then used in the template where we use "v-for" to loop through all of the links to create <path> elements
|
||||
|
||||
return this.root.descendants().slice(1).map(function(d) {
|
||||
return {
|
||||
id: d.id,
|
||||
d: "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x,
|
||||
|
||||
// here we could of course calculate colors depending on data but for now all links share the same color from the settings object that we can manipulate using UI controls and v-model
|
||||
|
||||
style: {
|
||||
stroke: that.settings.strokeColor
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
this.csv.push({
|
||||
id: "flare.physics.Dummy",
|
||||
value: 0
|
||||
})
|
||||
},
|
||||
select: function(index, node) {
|
||||
this.selected = index;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
51
src/vue-poc/features/tree2.vue
Normal file
51
src/vue-poc/features/tree2.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="tree2">
|
||||
<v-container fluid>
|
||||
<v-card>
|
||||
<v-toolbar class="lime darken-1">
|
||||
<v-card-title ><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.19</qd-link> </v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn>todo</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<treeselect
|
||||
v-model="value"
|
||||
:multiple="true"
|
||||
:options="source"
|
||||
/>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data:function(){
|
||||
return {
|
||||
value: null,
|
||||
source: [
|
||||
{
|
||||
id: 'node-1',
|
||||
label: 'Node 1',
|
||||
children: [
|
||||
{
|
||||
id: 'node-1-a',
|
||||
label: 'Node 1-A',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'node-2',
|
||||
label: 'Node 2',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick (node) {
|
||||
console.log(node.model.text + ' clicked !')
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -47,7 +47,7 @@ const router = new VueRouter({
|
|||
{ path: '/history', component: History, meta:{title:"File History"} },
|
||||
{ path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} },
|
||||
{ path: '/svg', component: Svg, meta:{title:"SVG"} },
|
||||
/* { path: '/svg2', component: Svg2, meta:{title:"SVG2"} }, */
|
||||
{ path: '/svg2', component: Svg2, meta:{title:"SVG2"} },
|
||||
{ path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
|
||||
{ path: '/validate', component: Validate, meta:{title:"Validate"} },
|
||||
|
||||
|
|
@ -66,10 +66,14 @@ const router = new VueRouter({
|
|||
{ path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
|
||||
|
||||
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
|
||||
{ path: '/tree', component: Tree,meta:{title:"tree"} },
|
||||
{ path: '/tree', component: Tree, meta:{title:"tree"} },
|
||||
{ path: '/tree2', component: Tree2, meta:{title:"tree2"} },
|
||||
{ path: '/map', component: Map,meta:{title:"map"} },
|
||||
|
||||
{ path: '/form', component: Brutusin, meta:{title:"Form demo"} },
|
||||
{ path: '/form2', component: Formsjson, meta:{title:"Form schema"} },
|
||||
{ path: '/form3', component: Formsschema, meta:{title:"vue-form-json-schema"} },
|
||||
|
||||
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
|
||||
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// generated 2018-04-09T23:17:40.773+01:00
|
||||
// generated 2018-04-25T23:09:21.192+01:00
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
|
||||
Vue.component('qd-confirm',{template:`
|
||||
|
|
@ -457,7 +457,7 @@ Vue.component('vp-notifications',{template:`
|
|||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-selectpath.vue
|
||||
Vue.component('vp-selectpath',{template:`
|
||||
<v-menu :close-on-click="false" offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmfav">
|
||||
<v-dialog v-model="frmfav" persistent="" max-width="600">
|
||||
<v-btn slot="activator" @click.stop="set(!frmfav)" icon="" flat="" title="Add ">
|
||||
<slot>
|
||||
<v-icon>add_circle</v-icon>
|
||||
|
|
@ -466,57 +466,38 @@ Vue.component('vp-selectpath',{template:`
|
|||
<v-card>
|
||||
<v-toolbar>
|
||||
<v-card-title>
|
||||
Add a new tab {{type}}
|
||||
Content of new tab {{type}}
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
|
||||
|
||||
</v-toolbar>
|
||||
|
||||
<v-card-text>
|
||||
Content:
|
||||
<v-tabs v-model="type" icons-and-text="" centered="">
|
||||
|
||||
<v-tab>
|
||||
Empty
|
||||
<v-icon>fiber_new</v-icon>
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
XMLDB
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
Webfile
|
||||
<v-icon>account_box</v-icon>
|
||||
</v-tab>
|
||||
<v-tab-item>
|
||||
<v-card flat="">
|
||||
<v-card-text>empty</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-card flat="">
|
||||
<v-card-text>
|
||||
<v-text-field label="database url" v-model="xmldb"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-card flat="">
|
||||
<v-card-text>
|
||||
<v-text-field label="webfile url" v-model="webfile"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat="" @click.stop="favorite(); set(false)">Add tab</v-btn>
|
||||
</v-card-actions>
|
||||
<v-tabs v-model="type" icons-and-text="" centered="">
|
||||
<v-tab v-for="item in protocols" :key="item.name">
|
||||
{{item.name}}
|
||||
<v-icon>{{item.icon}}</v-icon>
|
||||
</v-tab>
|
||||
|
||||
|
||||
<v-tab-item v-for="item in protocols" :key="item.name">
|
||||
<v-card flat="">
|
||||
<v-card-text>
|
||||
<v-text-field v-for="f in item.fields" :key="f.model" :label="f.label" :v-model="f.model"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
|
||||
<v-btn color="primary" flat="" @click.stop="favorite(); set(false)">Add tab</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-dialog>
|
||||
`,
|
||||
|
||||
props: {
|
||||
|
|
@ -526,7 +507,13 @@ Vue.component('vp-selectpath',{template:`
|
|||
return {
|
||||
type: 0,
|
||||
xmldb: "",
|
||||
webfile:""
|
||||
webfile:"",
|
||||
protocols:[
|
||||
{name: "new",icon: "fiber_new",fields: [{label: "test gg", model: "webfile"}]},
|
||||
{name:"xmldb",icon:"favorite", fields: [{label: "test2", model: "webfile"}]},
|
||||
{name:"webfile",icon:"account_box", fields: [{label: "test3", model: "webfile"}]},
|
||||
{name:"file",icon:"fiber_new", fields: [{label: "test 4", model: "webfile"}]}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
@ -648,7 +635,7 @@ Vue.component('vue-ace',{template:`
|
|||
this.editor = window.ace.edit(this.$el)
|
||||
this.applySettings(this.aceSettings)
|
||||
this.editor.$blockScrolling = Infinity
|
||||
console.log("setValue: ",this.content)
|
||||
//console.log("setValue: ",this.content)
|
||||
this.editor.setValue((this.content == null)?"NULL":this.content, 1);
|
||||
this.editor.setOptions({ readOnly:this.readOnly });
|
||||
if(this.minLines){
|
||||
|
|
@ -1227,8 +1214,8 @@ const Edit=Vue.extend({template:`
|
|||
<v-menu left="" transition="v-fade-transition">
|
||||
<v-chip label="" small="" slot="activator">{{ mode }}</v-chip>
|
||||
<v-list dense="">
|
||||
<v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
|
||||
<v-list-tile-title v-text="mimetype" @click="setMode(mimetype)"></v-list-tile-title>
|
||||
<v-list-tile v-for="type in mimeTypes" :key="type.name">
|
||||
<v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
|
@ -1450,9 +1437,9 @@ const Edit=Vue.extend({template:`
|
|||
this.annotations=counts
|
||||
//console.log("annotations: ",counts)
|
||||
},
|
||||
setMode(mimetype){
|
||||
this.mimetype=mimetype
|
||||
var r=MimeTypes[mimetype]
|
||||
setMode(type){
|
||||
this.mimetype=type.name
|
||||
var r=type.mode
|
||||
this.mode=r?r:"text"
|
||||
},
|
||||
onResize(){
|
||||
|
|
@ -1498,14 +1485,23 @@ const Edit=Vue.extend({template:`
|
|||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/edit/tabs.vue
|
||||
const Tabs=Vue.extend({template:`
|
||||
<div>
|
||||
<v-toolbar tabs="">
|
||||
<v-toolbar tabs="" dense="">
|
||||
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
|
||||
<v-toolbar-title>{{ currentItem }} : {{ active && active.name }}{{ dirty?'*':'' }}</v-toolbar-title>
|
||||
<v-btn @click="showInfo = !showInfo" icon=""><v-icon>info</v-icon></v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn>{{ active && active.mode }}</v-btn>
|
||||
|
||||
|
||||
<v-menu left="" transition="v-fade-transition">
|
||||
<v-chip label="" small="" slot="activator">{{ active && active.mode }}</v-chip>
|
||||
<v-list dense="">
|
||||
<v-list-tile v-for="type in mimeTypes" :key="type.name">
|
||||
<v-list-tile-title v-text="type.name" @click="alert('todo')"></v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="showInfo = !showInfo" icon="">
|
||||
<v-icon v-if="showInfo">info</v-icon>
|
||||
<v-icon v-else="">mode_edit</v-icon>
|
||||
</v-btn>
|
||||
<v-menu left="" bottom="" :close-on-content-click="false">
|
||||
<a class="tabs__item" slot="activator">
|
||||
{{ items.length }}
|
||||
|
|
@ -1520,7 +1516,6 @@ const Tabs=Vue.extend({template:`
|
|||
</v-menu>
|
||||
|
||||
<v-tabs v-model="currentItem" slot="extension">
|
||||
|
||||
<v-tab v-for="item in items" :key="item.id" :href="'#T' + item.id" ripple="" style="text-transform: none;text-align:left">
|
||||
<v-avatar>
|
||||
<v-icon size="16px">insert_drive_file</v-icon>
|
||||
|
|
@ -1531,57 +1526,72 @@ const Tabs=Vue.extend({template:`
|
|||
<v-icon size="16px">close</v-icon>
|
||||
</v-btn>
|
||||
</v-tab>
|
||||
|
||||
</v-tabs>
|
||||
|
||||
|
||||
</v-toolbar>
|
||||
<qd-panel :show="showInfo">
|
||||
|
||||
<v-tabs-items slot="body" v-model="currentItem">
|
||||
|
||||
|
||||
<v-tabs-items slot="body" v-model="currentItem">
|
||||
<v-tab-item v-for="item in items" :key="item.id" :id="'T' + item.id">
|
||||
<v-card flat="">
|
||||
<div style="height:200px" ref="ace" v-resize="onResize">
|
||||
<v-flex xs12="" fill-height="">
|
||||
<vue-ace :content="item.text" v-on:change-content="changeContent" :mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card flat="" v-if="showInfo">
|
||||
<v-card-actions>
|
||||
<v-toolbar-title>Metadata for tab id: '{{ currentItem }}'</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat=""> <v-icon>highlight_off</v-icon>todo</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-card-text v-if="active">
|
||||
<v-layout row="" v-for="x in ['name','id','mode','dirty','location']" :key="x">
|
||||
<v-flex xs3="">
|
||||
<v-subheader>{{ x}}</v-subheader>
|
||||
</v-flex>
|
||||
<v-flex xs9="">
|
||||
<v-text-field :name="x" label="Hint Text" :value="active[x]" single-line=""></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card v-else="">
|
||||
<div style="height:200px" ref="ace" v-resize="onResize">
|
||||
<v-flex xs12="" fill-height="">
|
||||
<vue-ace :content="item.text" v-on:change-content="changeContent" :mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
<v-card slot="aside" flat="">
|
||||
<v-card-actions>
|
||||
<v-toolbar-title>test</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-text> blah blah protocol: </v-card-text>
|
||||
</v-card>
|
||||
</qd-panel>
|
||||
</v-tabs-items>
|
||||
|
||||
</div>
|
||||
`,
|
||||
|
||||
data () {
|
||||
return {
|
||||
showadd: false,
|
||||
showInfo: false,
|
||||
showadd: false, // showing add form
|
||||
showInfo: false, // showing info
|
||||
nextId:4,
|
||||
a1:"",
|
||||
currentItem: null, //href of current
|
||||
active: null,
|
||||
items: [
|
||||
{name:"web.txt", id:"1", mode:"text", dirty: false,
|
||||
text:"1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
|
||||
text:`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat.`},
|
||||
|
||||
{name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
|
||||
text:"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
|
||||
text:`let $a:=1 to 5
|
||||
return $a `},
|
||||
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false,
|
||||
text:"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
||||
text:`<foo version="1.0">
|
||||
<node>hello</node>
|
||||
</foo>`},
|
||||
|
||||
],
|
||||
wrap: true,
|
||||
aceSettings: {}
|
||||
aceSettings: {},
|
||||
mimeTypes:MimeTypes
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1603,7 +1613,7 @@ const Tabs=Vue.extend({template:`
|
|||
},
|
||||
|
||||
addItem(tab){
|
||||
console.log("TABS: ",tab);
|
||||
console.log("new: ",tab);
|
||||
var def={name: "AA"+this.nextId,
|
||||
id: ""+this.nextId,
|
||||
contentType: "text/xml",
|
||||
|
|
@ -2055,6 +2065,55 @@ const Brutusin=Vue.extend({template:`
|
|||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/form/form-json-schema.vue
|
||||
const Formsschema=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-card-title><qd-link href="https://jarvelov.gitbooks.io/vue-form-json-schema/">vue-form-json-schema@1.13.4</qd-link> </v-card-title>
|
||||
|
||||
<vue-form-json-schema :model="model" :schema="schema" :ui-schema="uiSchema" :on-change="onChange">
|
||||
</vue-form-json-schema>
|
||||
</v-card>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
|
||||
data: () => ({
|
||||
model: {},
|
||||
|
||||
// A valid JSON Schema object
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstName: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Array of HTML elements or Vue components
|
||||
uiSchema: [{
|
||||
component: 'input',
|
||||
model: 'firstName',
|
||||
// Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
|
||||
fieldOptions: {
|
||||
class: ['form-control'],
|
||||
on: ['input'],
|
||||
attrs: {
|
||||
placeholder: 'Please enter your first name',
|
||||
},
|
||||
},
|
||||
}]
|
||||
}),
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.model = value;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/form/formschema.vue
|
||||
const Formsjson=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
|
|
@ -4024,6 +4083,28 @@ const Svg=Vue.extend({template:`
|
|||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/svg2.vue
|
||||
const Svg2=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<!-- UI controls that can are used to manipulate the display of the chart -->
|
||||
|
||||
todo
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
alert("mounted");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/model.build/model.vue
|
||||
const Model=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
|
|
@ -4182,7 +4263,7 @@ const Runtask=Vue.extend({template:`
|
|||
const Task=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<h3>Available Tasks</h3>
|
||||
<v-progress-linear v-if="loading" v-bind:indeterminate="true" height="2"></v-progress-linear>
|
||||
<v-progress-linear v-if="loading" v-bind:indeterminate="true"></v-progress-linear>
|
||||
<ul>
|
||||
<li v-for="task in tasks" :key="task.to">
|
||||
<router-link :to="task.to" v-text="task.title"></router-link>
|
||||
|
|
@ -4598,6 +4679,54 @@ methods: {
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tree2.vue
|
||||
const Tree2=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-toolbar class="lime darken-1">
|
||||
<v-card-title><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.19</qd-link> </v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn>todo</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<treeselect v-model="value" :multiple="true" :options="source">
|
||||
|
||||
</treeselect></v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data:function(){
|
||||
return {
|
||||
value: null,
|
||||
source: [
|
||||
{
|
||||
id: 'node-1',
|
||||
label: 'Node 1',
|
||||
children: [
|
||||
{
|
||||
id: 'node-1-a',
|
||||
label: 'Node 1-A',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'node-2',
|
||||
label: 'Node 2',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick (node) {
|
||||
console.log(node.model.text + ' clicked !')
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
|
@ -4956,7 +5085,7 @@ const router = new VueRouter({
|
|||
{ path: '/history', component: History, meta:{title:"File History"} },
|
||||
{ path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} },
|
||||
{ path: '/svg', component: Svg, meta:{title:"SVG"} },
|
||||
/* { path: '/svg2', component: Svg2, meta:{title:"SVG2"} }, */
|
||||
{ path: '/svg2', component: Svg2, meta:{title:"SVG2"} },
|
||||
{ path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
|
||||
{ path: '/validate', component: Validate, meta:{title:"Validate"} },
|
||||
|
||||
|
|
@ -4975,10 +5104,14 @@ const router = new VueRouter({
|
|||
{ path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
|
||||
|
||||
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
|
||||
{ path: '/tree', component: Tree,meta:{title:"tree"} },
|
||||
{ path: '/tree', component: Tree, meta:{title:"tree"} },
|
||||
{ path: '/tree2', component: Tree2, meta:{title:"tree2"} },
|
||||
{ path: '/map', component: Map,meta:{title:"map"} },
|
||||
|
||||
{ path: '/form', component: Brutusin, meta:{title:"Form demo"} },
|
||||
{ path: '/form2', component: Formsjson, meta:{title:"Form schema"} },
|
||||
{ path: '/form3', component: Formsschema, meta:{title:"vue-form-json-schema"} },
|
||||
|
||||
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
|
||||
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
|
||||
],
|
||||
|
|
@ -5011,7 +5144,7 @@ const Vuepoc=Vue.extend({template:`
|
|||
<vp-notifications :show-notifications.sync="showNotifications"></vp-notifications>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-navigation-drawer app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" :enable-resize-watcher="true">
|
||||
<v-navigation-drawer app="" :mini-variant.sync="mini" v-model="drawer" :enable-resize-watcher="true">
|
||||
<v-list class="pa-0">
|
||||
|
||||
<v-list-tile avatar="" tag="div">
|
||||
|
|
@ -5173,7 +5306,8 @@ const Vuepoc=Vue.extend({template:`
|
|||
children: [
|
||||
|
||||
{href: '/form',text: 'Forms',icon: 'format_list_bulleted' },
|
||||
{href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted' }
|
||||
{href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted' },
|
||||
{href: '/form3',text: 'vue-form-json-schema',icon: 'format_list_bulleted' }
|
||||
]},
|
||||
{
|
||||
icon: 'more_horiz',
|
||||
|
|
@ -5186,7 +5320,8 @@ const Vuepoc=Vue.extend({template:`
|
|||
{href: '/select',text: 'Select',icon: 'extension'},
|
||||
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
|
||||
{href: '/svg',text: 'SVG',icon: 'extension'},
|
||||
{href: '/tree',text: 'Tree',icon: 'nature'}
|
||||
{href: '/tree',text: 'Tree',icon: 'nature'},
|
||||
{href: '/tree2',text: 'Tree 2',icon: 'nature'}
|
||||
]},
|
||||
|
||||
{href: '/settings',text: 'Settings',icon: 'settings' },
|
||||
|
|
@ -5348,17 +5483,17 @@ const Notification={
|
|||
Vue.use(Notification);
|
||||
|
||||
// Mimetype info
|
||||
const MimeTypes={
|
||||
"text/xml":"xml",
|
||||
"application/xml":"xml",
|
||||
"application/xquery":"xquery",
|
||||
"text/ecmascript":"javascript",
|
||||
"application/sparql-query":"sparql",
|
||||
"text/html":"html",
|
||||
"text/turtle":"turtle",
|
||||
"text/css":"css",
|
||||
"image/svg+xml":"svg"
|
||||
};
|
||||
const MimeTypes=[
|
||||
{name: "text/xml", mode: "xml"},
|
||||
{name: "application/xml", mode:"xml"},
|
||||
{name: "application/xquery", mode:"xquery"},
|
||||
{name: "text/ecmascript", mode:"javascript"},
|
||||
{name: "application/sparql-query", mode:"sparql"},
|
||||
{name: "text/html", mode:"html"},
|
||||
{name: "text/turtle", mode:"turtle"},
|
||||
{name: "text/css", mode:"css"},
|
||||
{name: "image/svg+xml", mode:"svg"}
|
||||
];
|
||||
|
||||
// Settings read and write list clear
|
||||
localforage.config({
|
||||
|
|
@ -5482,6 +5617,12 @@ const Fullscreen={
|
|||
}) }
|
||||
};
|
||||
Vue.use(Fullscreen);
|
||||
Vue.use(VueTreeselect);
|
||||
//Vue.use( VueFormJsonSchema);
|
||||
function install (Vue) {
|
||||
Vue.component('vue-form-json-schema', VueFormJsonSchema);
|
||||
};
|
||||
Vue.use({ install: install });
|
||||
|
||||
//leaflet
|
||||
//Vue.component('v-map', Vue2Leaflet.Map);
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="Vue poc" />
|
||||
<meta name="author" content="andy bunce." />
|
||||
<title>Vue Router Test</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"/>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"/>
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="//unpkg.com/vuetify@1.0.13/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.css"/>
|
||||
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="/vue-poc/ui/svg-pan-zoom.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" />
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="Vue poc" />
|
||||
<meta name="author" content="andy bunce." />
|
||||
<title>Vue Router Test</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"/>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"/>
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="//unpkg.com/vuetify@1.0.16/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.22/dist/vue-treeselect.min.js">
|
||||
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.css"/>
|
||||
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="/vue-poc/ui/svg/d3-svg.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<h3><code>vue-poc</code> <small>(v0.3.4)</small> </h3>
|
||||
<h3><code>vue-poc</code> <small>(v0.3.5)</small> </h3>
|
||||
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
|
|
@ -37,9 +38,9 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
|
||||
<script src="//unpkg.com/vuetify@1.0.13/dist/vuetify.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-language_tools.js"></script>
|
||||
<script src="//unpkg.com/vuetify@1.0.16/dist/vuetify.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-language_tools.js"></script>
|
||||
<script src="//d3js.org/d3.v4.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
|
||||
|
|
@ -47,13 +48,15 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.5.1/localforage.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/vue-jstree@1.0.11/dist/vue-jstree.js"></script>
|
||||
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.22/dist/vue-treeselect.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.js"></script>
|
||||
<script src="//unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js"></script>
|
||||
<script src="//unpkg.com/vue-form-json-schema@1.13.1/dist/vue-form-json-schema.umd.js"></script>
|
||||
|
||||
<script src="/vue-poc/ui/svg-pan-zoom.js"></script>
|
||||
<script src="/vue-poc/ui/svg/d3-svg.js"></script>
|
||||
<script src="/vue-poc/ui/perf-stat.js"></script>
|
||||
<script src="/vue-poc/ui/app-gen.js"></script>
|
||||
<script>if('serviceWorker' in navigator) {
|
||||
|
|
|
|||
68
src/vue-poc/static/resources/butterfly.svg
Normal file
68
src/vue-poc/static/resources/butterfly.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 46 KiB |
|
|
@ -5,7 +5,7 @@ console.log('WORKER: executing.');
|
|||
/* A version number is useful when updating the worker logic,
|
||||
allowing you to remove outdated cache entries during the update.
|
||||
*/
|
||||
var version = 'v1:2:';
|
||||
var version = 'v1:3:';
|
||||
|
||||
/* These resources will be downloaded and cached by the service worker
|
||||
during the installation process. If any resource fails to be downloaded,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
html, body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
}
|
||||
.canvas {
|
||||
overflow: hidden;
|
||||
background-color:green;
|
||||
}
|
||||
.canvas .wrapper.outer > .background {
|
||||
fill: #000000;
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
// http://www.billdwhite.com/wordpress/2017/09/12/d3-v4-zooming-understanding-zoombehavior-in-the-pan-and-zoom-minimap/
|
||||
d3.demo = {};
|
||||
d3.demo = {};
|
||||
|
||||
/** CANVAS **/
|
||||
d3.demo.canvas = function() {
|
||||
Loading…
Add table
Reference in a new issue