apb
/
vue-poc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

notifications and fav as components

This commit is contained in:
Andy Bunce 2018-02-13 22:28:15 +00:00
parent 1c5a066589
commit 9b34c2462e
5 changed files with 148 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/vue-poc/app.vue
View File

@ -9,35 +9,7 @@
app app
width="500" width="500"
> >
<v-card> <vp-notifications :show-notifications.sync="showNotifications"></vp-notifications>
<v-toolbar class="amber white--text">
<v-toolbar-title >Notifications </v-toolbar-title>
{{ $notification.nextId }}
<v-spacer></v-spacer>
<v-btn @click="showNotifications = false" icon><v-icon>close</v-icon></v-btn>
</v-toolbar>
<v-card-text>
<v-list three-line>
<template v-for="msg in $notification.messages" >
<v-list-tile avatar v-bind:key="msg.index" @click="">
<v-list-tile-avatar>
<v-icon color="red">swap_horiz</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-tooltip>
<v-list-tile-title slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
<span v-text="msg.created"></span>
</v-tooltip>
<v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card-text>
</v-card>
</v-navigation-drawer> </v-navigation-drawer>
<v-navigation-drawer app :mini-variant.sync="mini" v-model="drawer" <v-navigation-drawer app :mini-variant.sync="mini" v-model="drawer"
:disable-route-watcher="true" :enable-resize-watcher="true"> :disable-route-watcher="true" :enable-resize-watcher="true">
@ -68,41 +40,8 @@
<v-toolbar class="indigo" app dark > <v-toolbar class="indigo" app dark >
<v-toolbar-side-icon @click.stop="drawer = !drawer" ></v-toolbar-side-icon> <v-toolbar-side-icon @click.stop="drawer = !drawer" ></v-toolbar-side-icon>
<v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title> <v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title>
<v-menu <vp-favorite :frmfav.sync="frmfav"></vp-favorite>
offset-x
:close-on-content-click="false"
:nudge-width="200"
v-model="frmFav"
>
<v-btn slot="activator" @click="frmFav = !frmFav" icon flat title="Bookmark this page">
<v-icon>star_border</v-icon>
</v-btn>
<v-card style="width:400px;">
<v-toolbar class="amber">
<v-card-title>
Bookmark this page
</v-card-title>
</v-toolbar>
<v-card-text>
<h6>{{$route.meta.title}}</h6>
<v-select
v-model="tags"
label="tags"
chips
tags
:items="taglist"
></v-select>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="frmFav=false">Cancel</v-btn>
<v-btn color="primary" flat @click.stop="favorite();frmFav=false">Save</v-btn>
</v-card-actions>
</v-card>
</v-menu>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-select <v-select
placeholder="Search..." prepend-icon="search" placeholder="Search..." prepend-icon="search"
@ -171,15 +110,8 @@
mini: false, mini: false,
dark: false, dark: false,
alert: {show:false,msg:"Hello"}, alert: {show:false,msg:"Hello"},
frmFav: false, frmfav: false,
tags: [],
taglist: [
'todo',
'find',
'some',
'good',
'tags'
],
items: [ items: [
{href: '/',text: 'Home', icon: 'home' }, {href: '/',text: 'Home', icon: 'home' },
{ {
@ -280,9 +212,6 @@
}, },
onDark(dark){ onDark(dark){
this.dark=dark this.dark=dark
},
favorite(){
alert("@TODO")
} }
}, },
watch: { watch: {

8
src/vue-poc/features/images/images.xqm
View File

@ -34,17 +34,17 @@ declare
%output:method("html") %output:version("5.0") %output:method("html") %output:version("5.0")
function vue-api:report() function vue-api:report()
{ {
<div> <div id="A0">
something something
<ol> <ol>
<li>$cfg:IMAGEDIR: <code>{ $cfg:IMAGEDIR }</code> </li> <li>$cfg:IMAGEDIR: <code>{ $cfg:IMAGEDIR }</code> </li>
<li>$cfg:THUMBDIR: <code>{ $cfg:THUMBDIR }</code> </li> <li>$cfg:THUMBDIR: <code>{ $cfg:THUMBDIR }</code> </li>
<li><a href="#A30">A30</a></li> <li><a href="#A30" >A30</a></li>
<li><a href="#A50">A50</a></li> <li><a href="#A50">A50</a></li>
</ol> </ol>
{for $i in 1 to 50 return <p>{$i}: {for $i in 1 to 50 return <p>{$i}:
<a name="A{$i}">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Morbi aliquam sodales justo, aliquet eleifend ex bibendum eget. Nullam vitae maximus ipsum. Sed maximus felis in interdum maximus. Vestibulum quis urna vel dolor placerat iaculis non at metus. Curabitur nec dictum mauris. Duis placerat magna non pellentesque pulvinar. Nam a eleifend sapien. Suspendisse potenti. Vestibulum nunc massa, eleifend a dolor quis, feugiat condimentum est. Integer diam eros, blandit in purus in, euismod ultrices felis. Donec ipsum magna, elementum non lacus vel, rutrum ornare ante. Integer egestas sapien quam, ut posuere nisi rhoncus nec. Etiam ornare enim eu tellus laoreet, in laoreet urna sodales. Donec interdum, augue non lobortis sodales, leo elit tincidunt mi, vitae varius augue libero vel lectus. Cras imperdiet quis dolor nec gravida. <a id="A{$i}" name="A{$i}">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Morbi aliquam sodales justo, aliquet eleifend ex bibendum eget. Nullam vitae maximus ipsum. Sed maximus felis in interdum maximus. Vestibulum quis urna vel dolor placerat iaculis non at metus. Curabitur nec dictum mauris. Duis placerat magna non pellentesque pulvinar. Nam a eleifend sapien. Suspendisse potenti. Vestibulum nunc massa, eleifend a dolor quis, feugiat condimentum est. Integer diam eros, blandit in purus in, euismod ultrices felis. Donec ipsum magna, elementum non lacus vel, rutrum ornare ante. Integer egestas sapien quam, ut posuere nisi rhoncus nec. Etiam ornare enim eu tellus laoreet, in laoreet urna sodales. Donec interdum, augue non lobortis sodales, leo elit tincidunt mi, vitae varius augue libero vel lectus. Cras imperdiet quis dolor nec gravida.
<a href="#A1">top</a></p> <a href="#A0">top</a></p>
} }
</div> </div>
}; };

15
src/vue-poc/features/images/ireport.vue
View File

@ -16,7 +16,7 @@
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
<v-card-text v-if="!busy" v-html="report"></v-card-text> <v-card-text v-if="!busy" v-html="report" @click.capture="onClick($event)"></v-card-text>
</v-card> </v-card>
</v-container> </v-container>
</template> </template>
@ -38,6 +38,19 @@
var t1 = performance.now(); var t1 = performance.now();
this.elapsed= 0.001 *(t1 - t0) this.elapsed= 0.001 *(t1 - t0)
}) })
},
onClick(event){
console.log("event",event);
var isA= "a"== event.originalTarget.localName
if(isA) {
// alert("stop this"+ event.originalTarget.hash);
console.log("tar",event.originalTarget.hash,document.querySelector(event.originalTarget.hash));
event.preventDefault();
this.$router.push({"hash":event.originalTarget.hash});
// this.$vuetify.goTo(event.originalTarget.hash, { duration: 600, offset: -200, easing: 'easeInOutCubic'});
}
} }
}, },
created:function(){ created:function(){

2
src/vue-poc/router.js
View File

@ -7,7 +7,7 @@ const router = new VueRouter({
if (savedPosition) { if (savedPosition) {
return savedPosition return savedPosition
} else if (to.hash) { } else if (to.hash) {
return { selector: to.hash, behavior: 'smooth' } return { selector: to.hash, behavior: 'smooth',offset: {x:0, y: 80} }
} else { } else {
return { x: 0, y: 0 } return { x: 0, y: 0 }

190
src/vue-poc/static/app-gen.js
View File

@ -1,4 +1,4 @@
// generated 2018-02-12T11:07:53.063Z // generated 2018-02-13T22:26:57.352Z
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
Vue.component('qd-confirm',{template:` Vue.component('qd-confirm',{template:`
@ -210,6 +210,60 @@ Vue.component('vis-time-line',{template:`
} }
); );
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-favorite.vue
Vue.component('vp-favorite',{template:`
<v-menu offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmfav">
<v-btn slot="activator" @click="set(!frmfav)" icon="" flat="" title="Bookmark this page">
<v-icon>star_border</v-icon>
</v-btn>
<v-card style="width:400px;">
<v-toolbar class="green">
<v-card-title>
Bookmark this page
</v-card-title>
</v-toolbar>
<v-card-text>
<h6>{{$route.meta.title}}</h6>
<v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
</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)">Save</v-btn>
</v-card-actions>
</v-card>
</v-menu> `,
props: {
frmfav: Boolean
},
data(){
return {
tags: [],
taglist: [
'todo',
'find',
'some',
'good',
'tags'
],
}
},
methods:{
set(v){
this.$emit('update:frmfav', v)
},
favorite(){
alert("save");
}
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-job.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-job.vue
Vue.component('vp-job',{template:` Vue.component('vp-job',{template:`
<v-card> <v-card>
@ -277,6 +331,55 @@ Vue.component('vp-job',{template:`
); );
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-notifications.vue
Vue.component('vp-notifications',{template:`
<v-card>
<v-toolbar class="amber white--text">
<v-toolbar-title>Notifications </v-toolbar-title>
{{ $notification.nextId }}
<v-btn @click="refresh" icon=""><v-icon>refresh</v-icon></v-btn>
<v-spacer></v-spacer>
<v-btn @click="set(false)" icon=""><v-icon>close</v-icon></v-btn>
</v-toolbar>
<v-card-text>
<v-list three-line="">
<template v-for="msg in $notification.messages">
<v-list-tile avatar="" v-bind:key="msg.index" @click="">
<v-list-tile-avatar>
<v-icon color="red">swap_horiz</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-tooltip>
<v-list-tile-title slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
<span v-text="msg.created"></span>
</v-tooltip>
<v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card-text>
</v-card>
`,
props: {
showNotifications: Boolean
},
methods:{
set(v){
this.$emit('update:showNotifications', v)
},
refresh(){
this.$forceUpdate();
}
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vue-ace.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vue-ace.vue
Vue.component('vue-ace',{template:` Vue.component('vue-ace',{template:`
<div style="width: 100%; height: 100%;"></div> <div style="width: 100%; height: 100%;"></div>
@ -2056,7 +2159,7 @@ const Report=Vue.extend({template:`
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
<v-card-text v-if="!busy" v-html="report"></v-card-text> <v-card-text v-if="!busy" v-html="report" @click.capture="onClick($event)"></v-card-text>
</v-card> </v-card>
</v-container> </v-container>
`, `,
@ -2077,6 +2180,19 @@ const Report=Vue.extend({template:`
var t1 = performance.now(); var t1 = performance.now();
this.elapsed= 0.001 *(t1 - t0) this.elapsed= 0.001 *(t1 - t0)
}) })
},
onClick(event){
console.log("event",event);
var isA= "a"== event.originalTarget.localName
if(isA) {
// alert("stop this"+ event.originalTarget.hash);
console.log("tar",event.originalTarget.hash,document.querySelector(event.originalTarget.hash));
event.preventDefault();
this.$router.push({"hash":event.originalTarget.hash});
// this.$vuetify.goTo(event.originalTarget.hash, { duration: 600, offset: -200, easing: 'easeInOutCubic'});
}
} }
}, },
created:function(){ created:function(){
@ -4039,7 +4155,7 @@ const router = new VueRouter({
if (savedPosition) { if (savedPosition) {
return savedPosition return savedPosition
} else if (to.hash) { } else if (to.hash) {
return { selector: to.hash, behavior: 'smooth' } return { selector: to.hash, behavior: 'smooth',offset: {x:0, y: 80} }
} else { } else {
return { x: 0, y: 0 } return { x: 0, y: 0 }
@ -4118,35 +4234,7 @@ router.beforeEach((to, from, next) => {
const Vuepoc=Vue.extend({template:` const Vuepoc=Vue.extend({template:`
<v-app id="app" :dark="dark"> <v-app id="app" :dark="dark">
<v-navigation-drawer stateless="" v-model="showNotifications" right="" :disable-route-watcher="true" app="" width="500"> <v-navigation-drawer stateless="" v-model="showNotifications" right="" :disable-route-watcher="true" app="" width="500">
<v-card> <vp-notifications :show-notifications.sync="showNotifications"></vp-notifications>
<v-toolbar class="amber white--text">
<v-toolbar-title>Notifications </v-toolbar-title>
{{ $notification.nextId }}
<v-spacer></v-spacer>
<v-btn @click="showNotifications = false" icon=""><v-icon>close</v-icon></v-btn>
</v-toolbar>
<v-card-text>
<v-list three-line="">
<template v-for="msg in $notification.messages">
<v-list-tile avatar="" v-bind:key="msg.index" @click="">
<v-list-tile-avatar>
<v-icon color="red">swap_horiz</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-tooltip>
<v-list-tile-title slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
<span v-text="msg.created"></span>
</v-tooltip>
<v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card-text>
</v-card>
</v-navigation-drawer> </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" :disable-route-watcher="true" :enable-resize-watcher="true">
<v-list class="pa-0"> <v-list class="pa-0">
@ -4176,30 +4264,8 @@ const Vuepoc=Vue.extend({template:`
<v-toolbar class="indigo" app="" dark=""> <v-toolbar class="indigo" app="" dark="">
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title> <v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title>
<v-menu offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmFav"> <vp-favorite :frmfav.sync="frmfav"></vp-favorite>
<v-btn slot="activator" @click="frmFav = !frmFav" icon="" flat="" title="Bookmark this page">
<v-icon>star_border</v-icon>
</v-btn>
<v-card style="width:400px;">
<v-toolbar class="amber">
<v-card-title>
Bookmark this page
</v-card-title>
</v-toolbar>
<v-card-text>
<h6>{{$route.meta.title}}</h6>
<v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="frmFav=false">Cancel</v-btn>
<v-btn color="primary" flat="" @click.stop="favorite();frmFav=false">Save</v-btn>
</v-card-actions>
</v-card>
</v-menu>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-select placeholder="Search..." prepend-icon="search" autocomplete="" :loading="loading" combobox="" clearable="" cache-items="" :items="items2" @keyup.enter="goSearch" :search-input.sync="si" v-model="q"></v-select> <v-select placeholder="Search..." prepend-icon="search" autocomplete="" :loading="loading" combobox="" clearable="" cache-items="" :items="items2" @keyup.enter="goSearch" :search-input.sync="si" v-model="q"></v-select>
@ -4256,15 +4322,8 @@ const Vuepoc=Vue.extend({template:`
mini: false, mini: false,
dark: false, dark: false,
alert: {show:false,msg:"Hello"}, alert: {show:false,msg:"Hello"},
frmFav: false, frmfav: false,
tags: [],
taglist: [
'todo',
'find',
'some',
'good',
'tags'
],
items: [ items: [
{href: '/',text: 'Home', icon: 'home' }, {href: '/',text: 'Home', icon: 'home' },
{ {
@ -4365,9 +4424,6 @@ const Vuepoc=Vue.extend({template:`
}, },
onDark(dark){ onDark(dark){
this.dark=dark this.dark=dark
},
favorite(){
alert("@TODO")
} }
}, },
watch: { watch: {