Here is a small sample of using Vuetify. How can I correctly translate it into brython ?
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
//https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
})
</script>
</body>
</html>
I can't correctly translate js part of the code to brython. I expect to get working brython sample with Vuetify.
I saw samples of using pure Vue from brython and I like to see the same with Vuetify, because with Vuetify I can use ready components, just fill new html tags and fill json.
I found. Javascript objects are called through window.
'''
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/brython#3/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython#3/brython_stdlib.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body onload="brython(1)">
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
<script type="text/python">
#https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
from browser import document, window
Vue = window.Vue
app = Vue.new({
'el': '#app',
'vuetify': window.Vuetify.new(),
'data': {
'colors': [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4'
],
'slides': [
'First',
'Second',
'Third',
'Fourth',
'Fifth'
]
}
})
</script>
</body>
</html>
'''
Related
I have a problem with my single page application(SPA) using Vue 3, Vue Router 4 & Laravel 8, my problem is that the components is not loading.
I made sure I installed vue-router, I don't know why the code can't run. The links are not even clickable. I have been on this for over 3 days now and still I haven't found the solution to the problem
This is my code.
app.js
require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
Vue.component('home', require('./components/Home.vue').default);
Vue.component('about', require('./components/About.vue').default);
Vue.component('contact', require('./components/Contact.vue').default);
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});
routes.js
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
export default{
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
}
contact.vue
<template>
<h1>This is the contact us page.</h1>
</template>
<script>
export default {
}
</script>
about.vue
<template>
<h1 class="big">This is the about us page.</h1>
</template>
<script>
export default {
}
</script>
home.vue
<template>
<h1 class="big">This is the home page.</h1>
</template>
<script>
export default {
}
</script>
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
#yield('content')
</div>
</html>
welcome.blade.php
#extends('layouts.app')
#section('content')
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
#endsection
web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function(){
return view('welcome');
})->where('any', '.*');
The links are not clickable
I have removed the extra div that make You confused.
#extends('layouts.app')
#section('content')
<div id="app">
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
</div>
#endsection
The transition Does not work in inertia page . if add appLayout between transition tag . its working . but all content gives transition.
Dashboard.vue
<template>
<admin-layout>
<h1>Admin Dashboard</h1>
</admin-layout>
</template>
adminLayout.vue
<section class="adminPanel" :style="contentStyle">
<AdminSvg/>
<header-admin :style="headerStyle"/>
<transition name="slide-fade">
<div class="content">
<slot></slot>
</div>
</transition>
<sidebar-admin :style="sidebarStyle"/>
</section>
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
#inertia
</body>
</html>
Vue transition works when the element that is wrapped by the transition tag changes (inserted or removed). Since inertia uses the backend route, simulating a page change should help with this. - This is not optimal but it works!
<section class="adminPanel" :style="contentStyle">
<AdminSvg/>
<header-admin :style="headerStyle"/>
<transition name="slide-fade">
<div v-if="content-trigger" class="content">
<slot></slot>
</div>
</transition>
<sidebar-admin :style="sidebarStyle"/>
</section>
<style>
/* durations and timing functions.*/
.slide-fade-enter-active {
transition: all .5s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
<script>
export default {
data() {
return {
content-trigger:false
}
},
mounted(){
this.content-trigger = true;
}
}
</script>
Here is a simple solution that can help.
In the Layout component, Use the $page.url of the current url as a key 🎉.
<transition name="fade" mode="out-in" appear>
<div :key="$page.url">
<slot />
</div>
</transition>
I am new to Vuetify and vue. I am using vue and vuetify but due some reason I am not able open my page.The error I am getting when I run my project:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at resources/js/components/appContainer.vue
My code:
appContainer.vue
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
>
<v-list dense>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-contact-mail</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Contact</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
app
color="indigo"
dark
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer
color="indigo"
app
>
<span class="white--text">© 2019</span>
</v-footer>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from './plugins/vuetify'
Vue.use(Vuetify);
Vue.component('app-container', require('./components/appContainer.vue').default);
const app = new Vue({
Vuetify,
Vue,
el: '#app',
});
spa.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app-container></app-container>
</div>
</body>
</html>
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Seems like you haven't given an export name for your app-container element. Try the below.
appContainer.vue
<template>
...
</template>
<script>
export default {
name: 'app-container'
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
Try to change the drawer from null to false:
data: () => ({
drawer: false,
}),
Please make your component name camelcase.
Like Vue.component('appContainer',require('./components/apContainer.vue').default);
I'm testing ckeditor.
I'm trying to create a ckeditor which fits the "div" where it's placed.
This is what I've tried, but only works on startup and not with resize window.
Is there an easy way to fit ckeditor the div where it's places?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/menu.css">
<script src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script>
function iniciar()
{
e= CKEDITOR.replace( 'editor1',
{ uiColor: '#CCEAEE' ,
on: { 'instanceReady' : function( evt )
{redimensionar();}
}
} );
}
var r;
function redimensionar(p1)
{
if (p1==1)
{ console.log("e: " + $("#").width() +','+$("#c1").height());
console.log("c1: " + $("#c1").width() +','+$("#c1").height());
e.resize($("#c1").width(),$("#c1").height());
}
else
{ if (r)
clearTimeout(r);
r=setTimeout(redimensionar, 500, 1);
}
}
</script>
</head>
<body class="easyui-layout" onload="iniciar()" onresize="redimensionar()">
<!-- Norte -->
<div data-options="region:'north'" style="height:10%">
My title
</div>
<!-- Centro -->
<div id="c1" data-options="region:'center'" style="height:80%; background:skyblue;">
<textarea id="editor1" >
<p>This is some <strong>sample text</strong>. You are using CKEditor.</p>
<p><iframe align="middle" frameborder="1" height="500" id="portada" longdesc="La gran portada" name="Portada" scrolling="yes" src="portada.html" style="background: green" title="La portada" width="500">Contenido iframe.</iframe></p>
<p> </p>
</textarea>
</div>
<!-- Pie -->
<div data-options="region:'south'" style="height:30px">
Foot
</div>
</body>
</html>
Is there any alternative which can make struts2 jqgrid better in IE6. The images are sample images.
In my application I have developed several grids using plugins All are working fine in all browsers but looking weird in IE6
You can find the differences between them IN IE6 header columns looks weird and that hide/unhide button also missing ..
Please help me how to fix this thing My application has to work in IE6
versoins I am using
Struts2-core 2.3.8
Struts2-jquery-grid-3.6.1
Struts2 jQuery-3.6.1
This one is the html code by clicking on view source
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="struts2,jquery, hibernate, plugin,showcase, grid" />
<meta http-equiv="description" content="Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins" />
<title>Struts2 jQuery Grid Plugin Showcase - 3.7.0</title>
<link href="/struts2-jquery-grid-showcase-3.7.0/styles/flexible-grids.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="/struts2-jquery-grid-showcase-3.7.0/yaml/core/iehacks.min.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-ui.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.form.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.subscribe.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/struts2/jquery.struts2.min.js?s2j=3.7.0"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.7.0";
jQuery.struts2_jquery.debug = true;
jQuery.struts2_jquery.loadAtOnce = true;
jQuery.scriptPath = "/struts2-jquery-grid-showcase-3.7.0/struts/";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.7.0");
});
</script>
<link id="jquery_theme_link" rel="stylesheet" href="themes/showcase/jquery-ui.css?s2j=3.7.0" type="text/css"/>
<script type="text/javascript">
var employee_detail_url = '/struts2-jquery-grid-showcase-3.7.0/employees-detail.action;jsessionid=3934431750DCFB5887508B8F186FD38D';
</script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/js/showcase.js; jsessionid=3934431750DCFB5887508B8F186FD38D"></script>
</head>
<body>
<header class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-wbox" style="padding: 5px 0 0 0;">
<div>
<h1 class="ui-state-default" style="background: none; border: none; margin: 0;">Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins</h1>
<h4 class="ui-state-default" style="background: none; border: none;">Struts2 jQuery Plugin - Version 3.7.0 / Full Hibernate Plugin - Version 2.2.1 GA</h4>
</div>
</div>
</header>
<nav id="nav" class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-hlist">
<ul id="navlist">
<li><a id="gridlink" href="javascript:void(0)">Grid (Editable)</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridlink = {};
options_gridlink.jqueryaction = "anchor";
options_gridlink.id = "gridlink";
options_gridlink.targets = "main_content";
options_gridlink.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridlink'),options_gridlink);
});
</script></li>
<li><a id="gridsubgridlink" href="javascript:void(0)">Grid with Subgrid</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridsubgridlink = {};
options_gridsubgridlink.jqueryaction = "anchor";
options_gridsubgridlink.id = "gridsubgridlink";
options_gridsubgridlink.targets = "main_content";
options_gridsubgridlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- subgrid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridsubgridlink'),options_gridsubgridlink);
});
</script></li>
<li><a id="griddndlink" href="javascript:void(0)">Grid with Drag and Drop</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_griddndlink = {};
options_griddndlink.jqueryaction = "anchor";
options_griddndlink.id = "griddndlink";
options_griddndlink.targets = "main_content";
options_griddndlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- dnd.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#griddndlink'),options_griddndlink);
});
</script></li>
<li>Struts2 jQuery Plugin</li>
<li>Full Hibernate Plugin</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<div class="ym-wrapper">
<div id="main_content"
class="ym-wbox"
>
<img id="indicator" src="images/indicator.gif" alt="Loading..."/>
</div><script type='text/javascript'>
jQuery(document).ready(function () {
var options_main_content = {};
options_main_content.jqueryaction = "container";
options_main_content.id = "main_content";
options_main_content.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#main_content'),options_main_content);
});
</script>
</div>
</div>
<footer>
<div class="ym-wrapper">
<div class="ym-wbox">
<p style="text-align: center;">
Written by Johannes Geppert and José Yoshiriro<br/>
Layout based on YAML
</p>
</div>
</div>
</footer>
</body>