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

update to vuetify 0.12.0

Browse source
This commit is contained in:
Andy Bunce 2017-05-22 17:02:22 +01:00
parent b1c5365bf7
commit b1cb13d10c
8 changed files with 109 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/vue-poc/static/app-gen.js
View file

@ -1,8 +1,9 @@
const Edit=Vue.extend({
template: `
<v-container fluid="">
<v-container fluid="">
<v-layout row="" wrap="">
<v-flex xs12="">
<v-toolbar class="green">
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>
<v-btn @click.native="showfiles()" small="" icon=""><v-icon>folder</v-icon></v-btn>
<span>{{ name }}</span> <v-chip small="" class="primary white--text">{{ mode }}</v-chip>
@ -84,9 +85,13 @@ const Edit=Vue.extend({
</v-card-row>
</v-card>
</v-dialog>
<div v-if="!busy" style="height:70vh">
</v-flex>
<v-flex xs12="" style="height:70vh" v-if="!busy" fill-height="">
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
</div>
</v-flex>
</v-layout>
</v-container>
`,
@ -287,16 +292,16 @@ const Files=Vue.extend({
);
const Home=Vue.extend({
template: `
<v-row class="ma-5">
<v-col xs4="">
<v-layout class="ma-5">
<v-flex xs4="">
<v-card hover="" raised="">
<v-card-row height="200px" class="pa-5 green lighten-1">
<div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.1
</v-card-row>
</v-card>
</v-col>
<v-col xs4="">
</v-flex>
<v-flex xs4="">
<p>This is a experiment in using <code>vue.js</code>.</p>
<ul>
<li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li>
@ -305,19 +310,19 @@ const Home=Vue.extend({
<li><a href="https://github.com/beautify-web/js-beautify">js-beautify</a></li>
</ul>
</v-col>
</v-flex>
<v-btn floating="floating">
<v-icon>add</v-icon>
</v-btn>
<my-component>REPLACED</my-component>
</v-row>
</v-layout>
`}
);
const Options=Vue.extend({
template: `
<v-row>
<v-col xs2="">
<v-layout>
<v-flex xs2="">
<v-card class="blue darken-4 white--text">
<v-card-row height="200px">
<v-card-title>
@ -334,24 +339,24 @@ const Options=Vue.extend({
</v-btn>
</v-card-row>
</v-card>
</v-col>
</v-flex>
<v-col xs6="">
<v-flex xs6="">
<v-text-field name="url" label="Image location" :required="true" :full-width="false"></v-text-field>
</v-col>
</v-flex>
<v-col xs4="">
<v-flex xs4="">
<v-card-row img="music.jpg" height="300px"></v-card-row>
<v-btn block="" primary="" @click.native="snackbar = true" dark="">Show Snackbar</v-btn>
<v-btn class="white--text" @click.native="snackbar = true">Snackbar?</v-btn>
</v-col>
</v-flex>
<v-snackbar v-model="snackbar">
Hello, I'm a snackbar
<v-btn flat="" class="pink--text" @click.native="snackbar = false">
<v-icon>highlight_off</v-icon>
</v-btn>
</v-snackbar>
</v-row>
</v-layout>
`,
data: function(){
return {
@ -364,19 +369,19 @@ const Options=Vue.extend({
const People=Vue.extend({
template: `
<v-container fluid="">
<v-row>Look at all the people who work here!
<v-layout>Look at all the people who work here!
<v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn>
<p>{{ message }}</p>
</v-row>
<v-row>
<v-col xs5="">
</v-layout>
<v-layout>
<v-flex xs5="">
<v-card-row img="music.jpg" height="300px"></v-card-row>
</v-col>
<v-col xs5="">
</v-flex>
<v-flex xs5="">
<v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="300px"></v-card-row>
</v-col>
</v-row>
</v-flex>
</v-layout>
</v-container>
`,
data: function(){
@ -567,7 +572,8 @@ const app = new Vue({
router,
data:function(){return {
q:"",
sidebar:false,
drawer:true,
mini: false,
items: [{
href: '/',
router: true,

66
src/vue-poc/static/app.html
View file

@ -9,7 +9,7 @@
<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="https://unpkg.com/vuetify@0.11.1/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@ -19,7 +19,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
<script src="https://unpkg.com/vuetify@0.11.1/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
@ -32,38 +32,54 @@
<script src="/vue-poc/ui/vue-ace.js"></script>
</head>
<body>
<v-app id="app" top-toolbar left-fixed-sidebar sidebar-under-toolbar>
<v-app id="app" >
<v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer">
<v-list class="pa-0">
<v-list-item>
<v-list-tile avatar tag="div">
<v-list-tile-avatar>
<img src="https://randomuser.me/api/portraits/men/85.jpg" />
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Random name</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon @click.native.stop="mini = !mini">
<v-icon>chevron_left</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list-item>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-item v-for="item in items" :key="item">
<v-list-tile >
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title ><router-link :to="item.href">{{ item.title }}</router-link></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-toolbar class="blue" >
<v-toolbar-side-icon @click.native.stop="openSidebar()" ></v-toolbar-side-icon>
<v-toolbar-side-icon @click.native.stop="drawer = !drawer" ></v-toolbar-side-icon>
<v-toolbar-title class="hidden-sm-and-down">Vue PoC</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Search..." v-model="q"
hide-details single-line dark @keyup.native.enter="search"></v-text-field>
</v-toolbar>
<main>
<v-sidebar fixed class="white--text" v-model="sidebar">
<div class="px-3">
<h3 class="white--text mt-3">Sidebar</h3>
<p>This is just an example sidebar.</p>
</div>
<v-list>
<v-list-tile v-for="(item, i) in items" :href="item.href" :router="item.router" avatar key="i">
<v-list-tile-avatar>
<v-icon>{{item.icon}}</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
{{ item.title }}
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-sidebar>
<v-content class="pt-0">
<v-container fluid>
<main>
<transition name="fade" mode="out-in">
<router-view class="view ma-3"></router-view>
</transition>
</v-container>
</v-content>
</main>
</v-app>

3
src/vue-poc/static/core.js
View file

@ -54,7 +54,8 @@ const app = new Vue({
router,
data:function(){return {
q:"",
sidebar:false,
drawer:true,
mini: false,
items: [{
href: '/',
router: true,

13
src/vue-poc/templates/edit.vue
View file

@ -1,8 +1,9 @@
<!DOCTYPE html>
<template id="edit">
<v-container fluid>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12>
<v-toolbar class="green">
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>
<v-btn @click.native="showfiles()" small icon><v-icon>folder</v-icon></v-btn>
<span >{{ name }}</span> <v-chip small class="primary white--text">{{ mode }}</v-chip>
@ -84,11 +85,15 @@
</v-card-row>
</v-card>
</v-dialog>
<div v-if="!busy" style="height:70vh">
</v-flex>
<v-flex xs12 style="height:70vh" v-if="!busy" fill-height>
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap"
v-on:change-content="changeContentA"
v-on:annotation="annotation"></vue-ace>
</div>
</v-flex>
</v-layout>
</v-container>
</template>

12
src/vue-poc/templates/home.vue
View file

@ -1,15 +1,15 @@
<!DOCTYPE html>
<template id="home">
<v-row class="ma-5">
<v-col xs4>
<v-layout class="ma-5">
<v-flex xs4>
<v-card hover raised>
<v-card-row height="200px" class="pa-5 green lighten-1">
<div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.1
</v-card-row>
</v-card>
</v-col>
<v-col xs4>
</v-flex>
<v-flex xs4>
<p>This is a experiment in using <code>vue.js</code>.</p>
<ul>
<li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li>
@ -18,12 +18,12 @@
<li><a href="https://github.com/beautify-web/js-beautify">js-beautify</a></li>
</ul>
</v-col>
</v-flex>
<v-btn floating="floating">
<v-icon>add</v-icon>
</v-btn>
<my-component>REPLACED</my-component>
</v-row>
</v-layout>
</template>
<script>{
template: '#home'}

16
src/vue-poc/templates/options.vue
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<template id="options">
<v-row >
<v-col xs2>
<v-layout >
<v-flex xs2>
<v-card class="blue darken-4 white--text">
<v-card-row height="200px">
<v-card-title>
@ -18,27 +18,27 @@
</v-btn>
</v-card-row>
</v-card>
</v-col>
</v-flex>
<v-col xs6>
<v-flex xs6>
<v-text-field
name="url"
label="Image location" :required=true :full-width=false
></v-text-field>
</v-col>
</v-flex>
<v-col xs4>
<v-flex xs4>
<v-card-row img="music.jpg" height="300px"></v-card-row>
<v-btn block primary @click.native="snackbar = true" dark>Show Snackbar</v-btn>
<v-btn class="white--text" @click.native="snackbar = true">Snackbar?</v-btn>
</v-col>
</v-flex>
<v-snackbar v-model="snackbar">
Hello, I'm a snackbar
<v-btn flat class="pink--text" @click.native="snackbar = false">
<v-icon>highlight_off</v-icon>
</v-btn>
</v-snackbar>
</v-row>
</v-layout>
</template>
<script>{

16
src/vue-poc/templates/people.vue
View file

@ -1,19 +1,19 @@
<!DOCTYPE html>
<template id="people">
<v-container fluid>
<v-row >Look at all the people who work here!
<v-layout >Look at all the people who work here!
<v-btn light default v-on:click.native="reverseMessage">Reverse Message</v-btn>
<p>{{ message }}</p>
</v-row>
<v-row>
<v-col xs5>
</v-layout>
<v-layout>
<v-flex xs5>
<v-card-row img="music.jpg" height="300px"></v-card-row>
</v-col>
<v-col xs5>
</v-flex>
<v-flex xs5>
<v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="300px"></v-card-row>
</v-col>
</v-row>
</v-flex>
</v-layout>
</v-container>
</template>

4
tools/compile.xq
View file

@ -20,7 +20,7 @@ declare function local:process($doc)
{
let $tempNode:= Document:getElementsByTagName($doc,"template")=>list:get(xs:int(0))
let $template:= Node:getInnerHTML($tempNode)
let $id:= Element:getAttribute($tempNode,"id")
let $id := Element:getAttribute($tempNode,"id")
let $name:=functx:capitalize-first($id)=>trace("ID")
let $script:= Document:getElementsByTagName($doc,"script")=>list:get(xs:int(0))
@ -30,7 +30,7 @@ let $s:= Node:getInnerHTML($script)=>replace('[''"]#' || $id || '[''"]','`' ||$t
let $js:= ``[const `{$name}`=Vue.extend(`{$s}`
);
]``
return if($id="") then () else $js
return if(empty($id)) then () else $js
};
declare function functx:capitalize-first