rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Refactor Buefy forms a bit more, to copy grid pattern

Browse source 
i.e. each page can modify the component dynamically before it's registered
This commit is contained in:
Lance Edgar 2019-05-23 14:45:23 -05:00
parent 5bd4f84389
commit 5998941741
5 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
tailbone/static/js/tailbone.buefy.form.js Normal file
View file

@ -0,0 +1,7 @@
let TailboneForm = {
template: '#tailbone-form-template',
methods: {}
}
let TailboneFormData = {}

17
tailbone/templates/form.mako
View file

@ -31,17 +31,20 @@
</div> </div>
</%def> </%def>
<%def name="make_buefy_form_app()"> <%def name="modify_tailbone_form()">
## NOTE: if you override this, must use <script> tags
</%def>
<%def name="make_tailbone_form_app()">
${self.modify_tailbone_form()}
<script type="text/javascript"> <script type="text/javascript">
const BuefyForm = { TailboneForm.data = function() { return TailboneFormData }
template: '#buefy-form-template'
}
Vue.component('buefy-form', BuefyForm) Vue.component('tailbone-form', TailboneForm)
new Vue({ new Vue({
el: '#buefy-form-app' el: '#tailbone-form-app'
}) })
</script> </script>
@ -51,5 +54,5 @@
${self.render_form_complete()} ${self.render_form_complete()}
% if form.use_buefy: % if form.use_buefy:
${self.make_buefy_form_app()} ${self.make_tailbone_form_app()}
% endif % endif

8
tailbone/templates/forms/deform_buefy.mako
View file

@ -1,6 +1,6 @@
## -*- coding: utf-8; -*- ## -*- coding: utf-8; -*-
<script type="text/x-template" id="buefy-form-template"> <script type="text/x-template" id="tailbone-form-template">
<div> <div>
% if not form.readonly: % if not form.readonly:
${h.form(form.action_url, id=dform.formid, method='post', enctype='multipart/form-data', **form_kwargs)} ${h.form(form.action_url, id=dform.formid, method='post', enctype='multipart/form-data', **form_kwargs)}
@ -12,7 +12,7 @@
% if form.readonly or (field not in dform and field in form.readonly_fields): % if form.readonly or (field not in dform and field in form.readonly_fields):
<b-field horizontal <b-field horizontal
label="${form.get_label(field)}"> label="${form.get_label(field)}">
${form.render_field_value(field)} ${form.render_field_value(field) or h.HTML.tag('span')}
</b-field> </b-field>
% elif field in dform: % elif field in dform:
@ -59,6 +59,6 @@
</script> </script>
<div id="buefy-form-app"> <div id="tailbone-form-app">
<buefy-form></buefy-form> <tailbone-form></tailbone-form>
</div> </div>

2
tailbone/templates/master/view.mako
View file

@ -84,5 +84,5 @@ ${self.render_form_complete()}
% endif % endif
% if form.use_buefy: % if form.use_buefy:
${self.make_buefy_form_app()} ${self.make_tailbone_form_app()}
% endif % endif

1
tailbone/templates/themes/falafel/base.mako
View file

@ -291,6 +291,7 @@
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))} ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))}
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + '?ver={}'.format(tailbone.__version__))} ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + '?ver={}'.format(tailbone.__version__))}
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + '?ver={}'.format(tailbone.__version__))} ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + '?ver={}'.format(tailbone.__version__))}
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.form.js') + '?ver={}'.format(tailbone.__version__))}
<script type="text/javascript"> <script type="text/javascript">
var session_timeout = ${request.get_session_timeout() or 'null'}; var session_timeout = ${request.get_session_timeout() or 'null'};