Created
August 1, 2019 13:47
-
-
Save shak18/412a35abcac07b75159793eeb7b26d52 to your computer and use it in GitHub Desktop.
Addon for VVVEB if you rely on bulma for your web site
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Develop for ES6 usage if youree going to use it on ES5 just remove the imports and change the usages of Inputs.TextInput to TextInput and so on with the rest | |
| import {Vvveb} from './builder' | |
| import * as Inputs from './inputs' | |
| var bgcolorClasses = ["is-primary", "is-success", "is-danger", "is-warning", "is-info", "is-light", "is-dark", "is-facebook", "is-twitter", "is-white", "is-black"] | |
| var bgcolorSelectOptions = | |
| [{ | |
| value: "Default", | |
| text: "" | |
| }, | |
| { | |
| value: "is-primary", | |
| text: "Primary" | |
| }, { | |
| value: "is-success", | |
| text: "Success" | |
| }, { | |
| value: "is-danger", | |
| text: "Danger" | |
| }, { | |
| value: "is-warning", | |
| text: "Warning" | |
| }, { | |
| value: "is-info", | |
| text: "Info" | |
| }, { | |
| value: "is-facebook", | |
| text: "Facebook" | |
| }, { | |
| value: "is-twitter", | |
| text: "Twitter" | |
| }, { | |
| value: "is-light", | |
| text: "Light" | |
| }, { | |
| value: "is-dark", | |
| text: "Dark" | |
| }, { | |
| value: "is-white", | |
| text: "White" | |
| }, { | |
| value: "is-black", | |
| text: "Black" | |
| }]; | |
| function changeNodeName(node, newNodeName) | |
| { | |
| var newNode; | |
| newNode = document.createElement(newNodeName); | |
| var attributes = node.get(0).attributes; | |
| for (i = 0, len = attributes.length; i < len; i++) { | |
| newNode.setAttribute(attributes[i].nodeName, attributes[i].nodeValue); | |
| } | |
| $(newNode).append($(node).contents()); | |
| $(node).replaceWith(newNode); | |
| return newNode; | |
| } | |
| Vvveb.ComponentsGroup['Bulma'] = | |
| ["html/container", "html/box", "html/gridrow", "html/gridcolumn", "html/heading", "html/image", "html/jumbotron", "html/section", "html/alert", "html/card", "html/cardtext", "html/button", "html/buttongroup", "html/listgroup", "html/hr", "html/taglabel", "html/badge", "html/progress", "html/navbar", "html/navbaritem", "html/navbardivider", "html/navbarmenu", "html/breadcrumbs", "html/pagination", "html/form", "html/textinput", "html/textareainput", "html/selectinput", "html/fileinput", "html/checkbox", "html/radiobutton", "html/table", "html/paragraph", "html/link", "html/video"]; | |
| var base_sort = 100;//start sorting for base component from 100 to allow extended properties to be first | |
| var style_section = 'style'; | |
| Vvveb.Components.add("_base", { | |
| name: "Elemento", | |
| properties: [{ | |
| key: "element_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort:base_sort++, | |
| data: {header:"General"}, | |
| }, { | |
| name: "Id", | |
| key: "id", | |
| htmlAttr: "id", | |
| sort: base_sort++, | |
| inline:true, | |
| col:6, | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Clase", | |
| key: "class", | |
| htmlAttr: "class", | |
| sort: base_sort++, | |
| inline:true, | |
| col:6, | |
| inputtype: Inputs.TextInput | |
| } | |
| ] | |
| }); | |
| //display | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [ | |
| { | |
| key: "display_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Display"}, | |
| }, { | |
| name: "Display", | |
| key: "display", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["block", "inline", "inline-block", "none"], | |
| data: { | |
| options: [{ | |
| value: "block", | |
| text: "Block" | |
| }, { | |
| value: "inline", | |
| text: "Inline" | |
| }, { | |
| value: "inline-block", | |
| text: "Inline Block" | |
| }, { | |
| value: "none", | |
| text: "none" | |
| }] | |
| } | |
| }, { | |
| name: "Posicion", | |
| key: "position", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["static", "fixed", "relative", "absolute"], | |
| data: { | |
| options: [{ | |
| value: "static", | |
| text: "Static" | |
| }, { | |
| value: "fixed", | |
| text: "Fixed" | |
| }, { | |
| value: "relative", | |
| text: "Relative" | |
| }, { | |
| value: "absolute", | |
| text: "Absolute" | |
| }] | |
| } | |
| }, { | |
| name: "Arriba", | |
| key: "top", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| parent:"", | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Izquierda", | |
| key: "left", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| parent:"", | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Abajo", | |
| key: "bottom", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| parent:"", | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Derecha", | |
| key: "right", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| parent:"", | |
| inputtype: Inputs.CssUnitInput | |
| },{ | |
| name: "Flotante", | |
| key: "float", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:12, | |
| inline:true, | |
| inputtype: Inputs.RadioButtonInput, | |
| data: { | |
| extraclass:"btn-group-sm btn-group-fullwidth", | |
| options: [{ | |
| value: "none", | |
| icon:"la la-close", | |
| //text: "None", | |
| title: "Ninguno", | |
| checked:true, | |
| }, { | |
| value: "left", | |
| //text: "Left", | |
| title: "Izquierda", | |
| icon:"la la-align-left", | |
| checked:false, | |
| }, { | |
| value: "right", | |
| //text: "Right", | |
| title: "Derecha", | |
| icon:"la la-align-right", | |
| checked:false, | |
| }], | |
| } | |
| }, { | |
| name: "Opacidad", | |
| key: "opacity", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:12, | |
| inline:true, | |
| parent:"", | |
| inputtype: Inputs.RangeInput, | |
| data:{ | |
| max: 1, //max zoom level | |
| min:0, | |
| step:0.1 | |
| }, | |
| }, { | |
| name: "Color de Background", | |
| key: "background-color", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| htmlAttr: "style", | |
| inputtype: Inputs.ColorInput, | |
| }, { | |
| name: "Color de Texto", | |
| key: "color", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| htmlAttr: "style", | |
| inputtype: Inputs.ColorInput, | |
| }] | |
| }); | |
| //Typography | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [ | |
| { | |
| key: "typography_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Tipografía"}, | |
| }, { | |
| name: "Fuente de texto", | |
| key: "font-family", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "Panton", | |
| text: "Panton" | |
| }, { | |
| value: 'Lucida Sans Unicode", "Lucida Grande", sans-serif', | |
| text: 'Lucida Grande' | |
| }, { | |
| value: "Arial, Helvetica, sans-serif", | |
| text: "Arial" | |
| }, { | |
| value: '"Times New Roman", Times, serif', | |
| text: 'Times New Roman' | |
| }, { | |
| value: "Georgia, serif", | |
| text: "Georgia, serif" | |
| }, { | |
| value: "Tahoma, Geneva, sans-serif", | |
| text: "Tahoma" | |
| }, { | |
| value: 'Verdana, Geneva, sans-serif', | |
| text: 'Verdana' | |
| }, { | |
| value: 'Arial Black, Gadget, sans-serif', | |
| text: 'Arial Black' | |
| }, { | |
| value: 'Trebuchet MS, Helvetica, sans-serif', | |
| text: 'Trebuchet' | |
| }] | |
| } | |
| }, { | |
| name: "Grosor del Texto", | |
| key: "font-weight", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "300", | |
| text: "Delgado" | |
| }, { | |
| value: "400", | |
| text: "Normal" | |
| }, { | |
| value: "500", | |
| text: "Medio" | |
| }, { | |
| value: "600", | |
| text: "Semi-Bold" | |
| }, { | |
| value: "700", | |
| text: "Bold" | |
| }, { | |
| value: "800", | |
| text: "Extra-Bold" | |
| }, { | |
| value: "900", | |
| text: "Ultra-Bold" | |
| }], | |
| } | |
| }, { | |
| name: "Alineado del texto", | |
| key: "text-align", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:12, | |
| inline:true, | |
| inputtype: Inputs.RadioButtonInput, | |
| data: { | |
| extraclass:"is-fullwidth", | |
| options: [{ | |
| value: "none", | |
| icon:"la la-close", | |
| //text: "None", | |
| title: "Ninguno", | |
| checked:true, | |
| }, { | |
| value: "left", | |
| //text: "Left", | |
| title: "Izquierda", | |
| icon:"la la-align-left", | |
| checked:false, | |
| }, { | |
| value: "center", | |
| //text: "Center", | |
| title: "Centrado", | |
| icon:"la la-align-center", | |
| checked:false, | |
| }, { | |
| value: "right", | |
| //text: "Right", | |
| title: "Derecha", | |
| icon:"la la-align-right", | |
| checked:false, | |
| }, { | |
| value: "justify", | |
| //text: "justify", | |
| title: "Justficado", | |
| icon:"la la-align-justify", | |
| checked:false, | |
| }], | |
| }, | |
| }, { | |
| name: "Interlineado", | |
| key: "line-height", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Espacio en letras", | |
| key: "letter-spacing", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Decoración de texto", | |
| key: "text-decoration-line", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:12, | |
| inline:true, | |
| inputtype: Inputs.RadioButtonInput, | |
| data: { | |
| extraclass:"is-fullwidth", | |
| options: [{ | |
| value: "none", | |
| icon:"la la-close", | |
| //text: "None", | |
| title: "Niguna", | |
| checked:true, | |
| }, { | |
| value: "underline", | |
| //text: "Left", | |
| title: "Subrayado", | |
| icon:"la la-long-arrow-down", | |
| checked:false, | |
| }, { | |
| value: "overline", | |
| //text: "Right", | |
| title: "Sobrerayado", | |
| icon:"la la-long-arrow-up", | |
| checked:false, | |
| }, { | |
| value: "line-through", | |
| //text: "Right", | |
| title: "Tachado", | |
| icon:"la la-strikethrough", | |
| checked:false, | |
| }, { | |
| value: "underline overline", | |
| //text: "justify", | |
| title: "Entre lineas", | |
| icon:"la la-arrows-v", | |
| checked:false, | |
| }], | |
| }, | |
| }, { | |
| name: "Color de Decoración", | |
| key: "text-decoration-color", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| htmlAttr: "style", | |
| inputtype: Inputs.ColorInput, | |
| }, { | |
| name: "Estilo de decoración", | |
| key: "text-decoration-style", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "solid", | |
| text: "Solido" | |
| }, { | |
| value: "wavy", | |
| text: "Ondeado" | |
| }, { | |
| value: "dotted", | |
| text: "Punteado" | |
| }, { | |
| value: "dashed", | |
| text: "Punteado de linea" | |
| }, { | |
| value: "double", | |
| text: "Doble" | |
| }], | |
| } | |
| }] | |
| }) | |
| //Size | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [{ | |
| key: "size_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Tamaño", expanded:false}, | |
| }, { | |
| name: "Ancho", | |
| key: "width", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Alto", | |
| key: "height", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Ancho minimo", | |
| key: "min-width", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Alto minimo", | |
| key: "min-height", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Ancho maximo", | |
| key: "max-width", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Alto maximo", | |
| key: "max-height", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }] | |
| }); | |
| //Margin | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [{ | |
| key: "margins_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Margenes", expanded:false}, | |
| }, { | |
| name: "Arriba", | |
| key: "margin-top", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Derecha", | |
| key: "margin-right", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Abajo", | |
| key: "margin-bottom", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Izquierda", | |
| key: "margin-left", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }] | |
| }); | |
| //Padding | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [{ | |
| key: "paddings_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Relleno (padding)", expanded:false}, | |
| }, { | |
| name: "Arriba", | |
| key: "padding-top", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Derecha", | |
| key: "padding-right", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Abajo", | |
| key: "padding-bottom", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Izuierda", | |
| key: "padding-left", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }] | |
| }); | |
| //Border | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [{ | |
| key: "border_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Bordes", expanded:false}, | |
| }, { | |
| name: "Estilo", | |
| key: "border-style", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:12, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "solid", | |
| text: "Solido" | |
| }, { | |
| value: "dotted", | |
| text: "Punteado" | |
| }, { | |
| value: "dashed", | |
| text: "Punteado de linea" | |
| }], | |
| } | |
| }, { | |
| name: "Ancho", | |
| key: "border-width", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Color", | |
| key: "border-color", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| htmlAttr: "style", | |
| inputtype: Inputs.ColorInput, | |
| }] | |
| }); | |
| //Border radius | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [{ | |
| key: "border_radius_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Curva del borde", expanded:false}, | |
| }, { | |
| name: "Arriba-Izquierda", | |
| key: "border-top-left-radius", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Arriba-Derecha", | |
| key: "border-top-right-radius", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Abajo-Izquierda", | |
| key: "border-bottom-left-radius", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }, { | |
| name: "Abajo-Derecha", | |
| key: "border-bottom-right-radius", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| section: style_section, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.CssUnitInput | |
| }] | |
| }); | |
| //Background image | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [{ | |
| key: "background_image_header", | |
| inputtype: Inputs.SectionInput, | |
| name:false, | |
| sort: base_sort++, | |
| section: style_section, | |
| data: {header:"Imagen de Background", expanded:false}, | |
| },{ | |
| name: "Imagen", | |
| key: "Image", | |
| sort: base_sort++, | |
| section: style_section, | |
| //htmlAttr: "style", | |
| inputtype: Inputs.ImageInput, | |
| init: function(node) { | |
| var image = $(node).css("background-image").replace(/^url\(['"]?(.+)['"]?\)/, '$1'); | |
| return image; | |
| }, | |
| onChange: function(node, value) { | |
| $(node).css('background-image', 'url(' + value + ')'); | |
| return node; | |
| } | |
| }, { | |
| name: "Repetir", | |
| key: "background-repeat", | |
| sort: base_sort++, | |
| section: style_section, | |
| htmlAttr: "style", | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "repeat-x", | |
| text: "repeat-x" | |
| }, { | |
| value: "repeat-y", | |
| text: "repeat-y" | |
| }, { | |
| value: "no-repeat", | |
| text: "no-repeat" | |
| }], | |
| } | |
| }, { | |
| name: "Tamaño", | |
| key: "background-size", | |
| sort: base_sort++, | |
| section: style_section, | |
| htmlAttr: "style", | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "contain", | |
| text: "contain" | |
| }, { | |
| value: "cover", | |
| text: "cover" | |
| }], | |
| } | |
| }, { | |
| name: "Posicion x", | |
| key: "background-position-x", | |
| sort: base_sort++, | |
| section: style_section, | |
| htmlAttr: "style", | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "center", | |
| text: "centro" | |
| }, { | |
| value: "right", | |
| text: "derecha" | |
| }, { | |
| value: "left", | |
| text: "izquierda" | |
| }], | |
| } | |
| }, { | |
| name: "Posicion y", | |
| key: "background-position-y", | |
| sort: base_sort++, | |
| section: style_section, | |
| htmlAttr: "style", | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "center", | |
| text: "centro" | |
| }, { | |
| value: "top", | |
| text: "arriba" | |
| }, { | |
| value: "bottom", | |
| text: "abajo" | |
| }], | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/container", { | |
| classes: ["container"], | |
| image: process.env.ASSET_PATH + "img/icons/container.svg", | |
| html: `<div class="container" style="min-height:150px; font-family: 'Panton'"> | |
| <div class="m-5">Container</div> | |
| </div>`, | |
| name: "Contenedor", | |
| properties: [ | |
| { | |
| name: "Type", | |
| key: "type", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["is-fluid", "is-fullhd", "is-widescreen"], | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-fluid", | |
| text: "Fluido" | |
| }, { | |
| value: "is-fullhd", | |
| text: "Fluido Full-HD" | |
| }, { | |
| value: "is-widescreen", | |
| text: "Fluido WideScreen" | |
| }] | |
| } | |
| }, | |
| { | |
| name: "Background", | |
| key: "background", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }, | |
| { | |
| name: "Color de Background", | |
| key: "background-color", | |
| htmlAttr: "style", | |
| inputtype: Inputs.ColorInput, | |
| }, | |
| { | |
| name: "Color de texto", | |
| key: "color", | |
| htmlAttr: "style", | |
| inputtype: Inputs.ColorInput, | |
| }], | |
| }); | |
| Vvveb.Components.extend("_base", "html/heading", { | |
| image: process.env.ASSET_PATH + "img/icons/heading.svg", | |
| name: "Cabecera", | |
| nodes: ["h1", "h2","h3", "h4","h5","h6"], | |
| html: "<h1>Cabecera</h1>", | |
| properties: [ | |
| { | |
| name: "Elemento", | |
| key: "size", | |
| inputtype: Inputs.SelectInput, | |
| onChange: function(node, value) { | |
| $(node).removeClass('is-1 is-2 is-3 is-4 is-5 is-6').addClass('is-' + value); | |
| return changeNodeName(node, "h" + value); | |
| }, | |
| init: function(node) { | |
| var regex; | |
| regex = /H(\d)/.exec(node.nodeName); | |
| if (regex && regex[1]) { | |
| return regex[1] | |
| } | |
| return 1 | |
| }, | |
| data:{ | |
| options: [{ | |
| value: "1", | |
| text: "1" | |
| }, { | |
| value: "2", | |
| text: "2" | |
| }, { | |
| value: "3", | |
| text: "3" | |
| }, { | |
| value: "4", | |
| text: "4" | |
| }, { | |
| value: "5", | |
| text: "5" | |
| }, { | |
| value: "6", | |
| text: "6" | |
| }] | |
| }, | |
| },{ | |
| name: "Tipo", | |
| key: "type", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["title", "subtitle"], | |
| data: { | |
| options: [{ | |
| value: "title", | |
| text: "Titulo" | |
| }, { | |
| value: "subtitle", | |
| text: "Subtitulo" | |
| }] | |
| } | |
| },{ | |
| name: "Alinear texto", | |
| key: "text-align", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["", "has-text-left", "has-text-centered", "has-text-right", "has-text-justified"], | |
| inputtype: Inputs.RadioButtonInput, | |
| data: { | |
| extraclass:"", | |
| options: [{ | |
| value: "", | |
| icon:"la la-close", | |
| title: "None", | |
| checked:true, | |
| }, { | |
| value: "Izquierda", | |
| title: "has-text-left", | |
| icon:"la la-align-left", | |
| checked:false, | |
| }, { | |
| value: "has-text-centered", | |
| title: "Centro", | |
| icon:"la la-align-center", | |
| checked:false, | |
| }, { | |
| value: "has-text-right", | |
| title: "Derecha", | |
| icon:"la la-align-right", | |
| checked:false, | |
| }, { | |
| value: "has-text-justified", | |
| title: "Justificado", | |
| icon:"la la-align-justify", | |
| checked:false, | |
| }], | |
| }, | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/link", { | |
| nodes: ["a"], | |
| name: "Link", | |
| html: '<a href="#" class="d-inline-block"><span>Link</span></a>', | |
| image: process.env.ASSET_PATH + "img/icons/link.svg", | |
| properties: [{ | |
| name: "Url", | |
| key: "href", | |
| htmlAttr: "href", | |
| inputtype: Inputs.LinkInput | |
| }, { | |
| name: "Abrir en", | |
| key: "target", | |
| htmlAttr: "target", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["_self", "_blank"], | |
| data: { | |
| options: [{ | |
| value: "_self", | |
| text: "La misma pagina" | |
| }, { | |
| value: "_blank", | |
| text: "Nueva página" | |
| }] | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/image", { | |
| nodes: ["img"], | |
| name: "Imagen", | |
| html: '<figure class="image"><img src="' + process.env.ASSET_PATH + 'img/icons/image.svg" height="128" width="128"></figure>', | |
| init(node) { | |
| var actions = [ | |
| { | |
| title: 'Seleccionar imagen', | |
| icon: 'check_circle', | |
| onClick: (item) => { | |
| console.log(node) | |
| if(!! item.ruta && !! node) { | |
| node.src = item.ruta; | |
| } | |
| window.vueApp.bus.$emit('image-selector-close', actions); | |
| } | |
| } | |
| ]; | |
| window.vueApp.bus.$emit('image-selector-open', actions); | |
| }, | |
| image: process.env.ASSET_PATH + "img/icons/image.svg", | |
| properties: [{ | |
| name: "Imagen", | |
| key: "src", | |
| htmlAttr: "src", | |
| inputtype: Inputs.ImageInput | |
| }, { | |
| name: "Ancho", | |
| key: "width", | |
| htmlAttr: "width", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Alto", | |
| key: "height", | |
| htmlAttr: "height", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Descripcion", | |
| key: "alt", | |
| htmlAttr: "alt", | |
| inputtype: Inputs.TextInput | |
| }] | |
| }); | |
| Vvveb.Components.add("html/hr", { | |
| image: process.env.ASSET_PATH + "img/icons/hr.svg", | |
| nodes: ["hr"], | |
| name: "Linea Horizontal", | |
| html: "<hr>" | |
| }); | |
| Vvveb.Components.extend("_base", "html/label", { | |
| name: "Label", | |
| nodes: ["label"], | |
| html: '<label for="">Label</label>', | |
| properties: [{ | |
| name: "Para el Id", | |
| htmlAttr: "for", | |
| key: "for", | |
| inputtype: Inputs.TextInput | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/button", { | |
| classes: ["button"], | |
| name: "Botón", | |
| image: process.env.ASSET_PATH + "img/icons/button.svg", | |
| html: '<button type="button" class="button">Default</button>', | |
| properties: [{ | |
| name: "Url", | |
| key: "href", | |
| htmlAttr: "href", | |
| inputtype: Inputs.LinkInput | |
| }, { | |
| name: "Abrir en...", | |
| key: "target", | |
| htmlAttr: "target", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["_self", "_blank"], | |
| data: { | |
| options: [{ | |
| value: "_self", | |
| text: "La misma pagina" | |
| }, { | |
| value: "_blank", | |
| text: "Nueva página" | |
| }] | |
| } | |
| }, { | |
| name: "Coloración", | |
| key: "type", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: bgcolorClasses, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }, { | |
| name: "Tamaño", | |
| key: "size", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ['is-small', 'is-normal', 'is-medium', 'is-large'], | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-small", | |
| text: "small" | |
| }, { | |
| value: "is-normal", | |
| text: "normal" | |
| }, { | |
| value: "is-medium", | |
| text: "medium" | |
| }, { | |
| value: "is-large", | |
| text: "Large" | |
| }] | |
| } | |
| }, { | |
| name: "Alargado", | |
| key: "fullwidth", | |
| htmlAttr: "class", | |
| inputtype: Inputs.ToggleInput, | |
| validValues: ["is-fullwidth"], | |
| data: { | |
| on: "is-fullwidth", | |
| off: "" | |
| } | |
| }, { | |
| name: "Contorneado", | |
| key: "outlined", | |
| htmlAttr: "class", | |
| inputtype: Inputs.ToggleInput, | |
| validValues: ["is-outlined"], | |
| data: { | |
| on: "is-outlined", | |
| off: "" | |
| } | |
| }, { | |
| name: "Invertido", | |
| key: "inverted", | |
| htmlAttr: "class", | |
| inputtype: Inputs.ToggleInput, | |
| validValues: ["is-inverted"], | |
| data: { | |
| on: "is-inverted", | |
| off: "" | |
| } | |
| }, { | |
| name: "Redondeado", | |
| key: "rounded", | |
| htmlAttr: "class", | |
| inputtype: Inputs.ToggleInput, | |
| validValues: ["is-rounded"], | |
| data: { | |
| on: "is-rounded", | |
| off: "" | |
| } | |
| }, { | |
| name: "Deshabilitar", | |
| key: "disabled", | |
| htmlAttr: "class", | |
| inputtype: Inputs.ToggleInput, | |
| validValues: ["disabled"], | |
| data: { | |
| on: "disabled", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/buttongroup", { | |
| classes: ["buttons","has-addons"], | |
| name: "Grupo de botones", | |
| image: process.env.ASSET_PATH + "img/icons/button_group.svg", | |
| html: ` <div class="buttons has-addons"> | |
| <a class="button"> | |
| <span>Izquierda</span> | |
| </a> | |
| <a class="button"> | |
| <span>Centro</span> | |
| </a> | |
| <a class="button"> | |
| <span>Derecha</span> | |
| </a> | |
| </div>`, | |
| properties: [{ | |
| name: "Posición del grupo", | |
| key: "size", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["is-center", "is-right"], | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default (Izquierda)" | |
| }, { | |
| value: "is-centered", | |
| text: "Centrado" | |
| }, { | |
| value: "is-right", | |
| text: "Derecha" | |
| }] | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base","html/alert", { | |
| classes: ["notification"], | |
| name: "Notificación", | |
| image: process.env.ASSET_PATH + "img/icons/alert.svg", | |
| html: ` <div class="notification"> | |
| <button class="delete" onclick="this.parent().remove()"></button> | |
| Lorem ipsum dolor sit amet, consectetur | |
| adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, | |
| consectetur adipiscing elit | |
| </div>`, | |
| properties: [{ | |
| name: "Tipo/Coloración", | |
| key: "type", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/badge", { | |
| classes: ["tag"], | |
| image: process.env.ASSET_PATH + "img/icons/badge.svg", | |
| name: "Tag", | |
| html: '<span class="tag is-primary">Tag primario</span>', | |
| properties: [{ | |
| name: "Coloración", | |
| key: "color", | |
| htmlAttr: "class", | |
| validValues:bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/card", { | |
| classes: ["card"], | |
| image: process.env.ASSET_PATH + "img/icons/panel.svg", | |
| name: "Card (Con imagen)", | |
| html: ` <div class="card"> | |
| <div class="card-image"> | |
| <figure class="image is-4by3"> | |
| <img src="${process.env.ASSET_PATH}img/icons/image.svg" alt="Placeholder image"> | |
| </figure> | |
| </div> | |
| <div class="card-content"> | |
| <div class="media"> | |
| <div class="media-left"> | |
| <figure class="image is-48x48"> | |
| <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image"> | |
| </figure> | |
| </div> | |
| <div class="media-content"> | |
| <p class="title is-4">John Smith</p> | |
| <p class="subtitle is-6">@johnsmith</p> | |
| </div> | |
| </div> | |
| <div class="content"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| Phasellus nec iaculis mauris. <a>@bulmaio</a>. | |
| <a href="#">#css</a> <a href="#">#responsive</a> | |
| <br> | |
| <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> | |
| </div> | |
| </div> | |
| </div>` | |
| }); | |
| Vvveb.Components.extend("_base", "html/cardtext", { | |
| classes: ["card"], | |
| image: process.env.ASSET_PATH + "img/icons/panel.svg", | |
| name: "Card (Header & Footer)", | |
| html: ` <div class="card"> | |
| <div class="card-header"> | |
| <p class="card-header-title"> | |
| Header | |
| </p> | |
| </div> | |
| <div class="card-content"> | |
| <div class="content"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| Phasellus nec iaculis mauris. <a>@bulmaio</a>. | |
| <a href="#">#css</a> <a href="#">#responsive</a> | |
| </div> | |
| </div> | |
| <footer class="card-footer"> | |
| <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> | |
| </footer> | |
| </div>` | |
| }); | |
| Vvveb.Components.extend("_base", "html/listgroup", { | |
| name: "Lista", | |
| image: process.env.ASSET_PATH + "img/icons/list_group.svg", | |
| classes: ["list"], | |
| html: ` <div class="list is-hoverable"> | |
| <span class="list-item"> | |
| Inactivo | |
| </span> | |
| <span class="list-item"> | |
| Inactivo | |
| </span> | |
| <span class="list-item is-active"> | |
| Activo | |
| </span> | |
| </div>` | |
| }); | |
| Vvveb.Components.extend("_base", "html/listitem", { | |
| name: "Item de lista", | |
| classes: ["list-item"], | |
| html: '<span class="list-item"><Inactivo</span>', | |
| properties: [{ | |
| name: "Activo", | |
| key: "is-active", | |
| htmlAttr: "class", | |
| validValues: ["", "is-active"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-active", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/breadcrumbs", { | |
| classes: ["breadcrumb"], | |
| name: "Breadcrumbs", | |
| image: process.env.ASSET_PATH + "img/icons/breadcrumbs.svg", | |
| html: ` <nav class="breadcrumb" aria-label="breadcrumbs"> | |
| <ul> | |
| <li class="breadcrumb-item"><a href="#">Bulma</a></li> | |
| <li class="breadcrumb-item"><a href="#">Documentation</a></li> | |
| <li class="breadcrumb-item"><a href="#">Components</a></li> | |
| <li class="breadcrumb-item is-active"><a href="#" aria-current="page">Breadcrumb</a></li> | |
| </ul> | |
| </nav>` | |
| }); | |
| Vvveb.Components.extend("_base", "html/breadcrumbitem", { | |
| classes: ["breadcrumb-item"], | |
| name: "Item de Breadcrumbs", | |
| html: '<li class="breadcrumb-item"><a href="#">Library</a></li>', | |
| properties: [{ | |
| name: "Activo", | |
| key: "is-active", | |
| htmlAttr: "class", | |
| validValues: ["", "is-active"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-active", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/pagination", { | |
| classes: ["pagination"], | |
| name: "Paginación", | |
| image: process.env.ASSET_PATH + "img/icons/pagination.svg", | |
| html: `<nav class="pagination" role="navigation" aria-label="pagination"> | |
| <ul class="pagination-list"> | |
| <li> | |
| <a class="pagination-link" aria-label="Ir a pagina 1">1</a> | |
| </li> | |
| <li> | |
| <a class="pagination-link" aria-label="Ir a pagina 2">2</a> | |
| </li> | |
| <li> | |
| <a class="pagination-link is-current" aria-label="Pagina 3" aria-current="page">3</a> | |
| </li> | |
| <li> | |
| <a class="pagination-link" aria-label="Ir a pagina 4">4</a> | |
| </li> | |
| <li> | |
| <a class="pagination-link" aria-label="Ir a pagina 5">5</a> | |
| </li> | |
| </ul> | |
| </nav>`, | |
| properties: [{ | |
| name: "Tamaño", | |
| key: "size", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["is-small", "is-medium", "is-large"], | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-small", | |
| text: "Pequeño" | |
| }, { | |
| value: "is-medium", | |
| text: "Mediano" | |
| }, { | |
| value: "is-large", | |
| text: "Grande" | |
| }] | |
| } | |
| },{ | |
| name: "Alignment", | |
| key: "alignment", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["is-centered", "is-right"], | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-centered", | |
| text: "Centrado" | |
| }, { | |
| value: "is-right", | |
| text: "Derecha" | |
| }] | |
| } | |
| }, { | |
| name: "Redondeado", | |
| key: "is-rounded", | |
| htmlAttr: "class", | |
| validValues: ["", "is-rounded"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-rounded", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/pageitem", { | |
| classes: ["li-pagination-link"], | |
| html: '<li class="li-pagination-link"><a class="pagination-link" href="#">1</a></li>', | |
| name: "Pagination Item", | |
| properties: [{ | |
| name: "Link To", | |
| key: "href", | |
| htmlAttr: "href", | |
| child:".pagination-link", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Disabled", | |
| key: "disabled", | |
| htmlAttr: "class", | |
| validValues: ["disabled"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "disabled", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/progress", { | |
| classes: ["progress"], | |
| name: "Progress Bar", | |
| image: process.env.ASSET_PATH + "img/icons/progressbar.svg", | |
| html: '<progress class="progress" value="25" max="100">25%</progress>', | |
| properties: [ | |
| { | |
| name: "Valor", | |
| key: "val", | |
| inputtype: Inputs.NumberInput, | |
| onChange: function(node, value) { | |
| let $node = $(node); | |
| $node.val(value); | |
| $node.html(!! value || value === 0 ? (value.toString() + '%') : 'Indeterminado') | |
| }, | |
| }, | |
| { | |
| name: "Coloración", | |
| key: "background", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/jumbotron", { | |
| classes: ["hero"], | |
| image: process.env.ASSET_PATH + "img/icons/jumbotron.svg", | |
| name: "Seccion/Hero", | |
| html: ` <section class="hero"> | |
| <div class="hero-body"> | |
| <div class="container"> | |
| <h1 class="title"> | |
| Titulo | |
| </h1> | |
| <h2 class="subtitle"> | |
| Subtitulo | |
| </h2> | |
| </div> | |
| </div> | |
| </section>`, | |
| properties: [{ | |
| name: "Background", | |
| key: "background", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }, { | |
| name: "BG Difuminado", | |
| key: "is-bold", | |
| htmlAttr: "class", | |
| validValues: ["is-bold"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-bold", | |
| off: "" | |
| } | |
| }, | |
| { | |
| name: "Tamaño", | |
| key: "background", | |
| htmlAttr: "class", | |
| validValues: ["is-medium", "is-large", "is-fullheight"], | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-medium", | |
| text: "Mediano" | |
| }, { | |
| value: "is-large", | |
| text: "Grande" | |
| }, { | |
| value: "is-fullheight", | |
| text: "Alto de página" | |
| }] | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/section", { | |
| classes: ["section"], | |
| image: process.env.ASSET_PATH + "img/icons/jumbotron.svg", | |
| name: "Seccion/Regular", | |
| html: ` <section class="section"> | |
| <div class="container"> | |
| <h1 class="title">Seccion</h1> | |
| <h2 class="subtitle"> | |
| A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading | |
| </h2> | |
| </div> | |
| </section>`, | |
| }); | |
| Vvveb.Components.extend("_base", "html/navbar", { | |
| classes: ["navbar"], | |
| image: process.env.ASSET_PATH + "img/icons/navbar.svg", | |
| name: "Barra de navegación", | |
| html: ` <nav class="navbar" role="navigation" aria-label="main navigation"> | |
| <div class="navbar-brand"> | |
| <a class="navbar-item" href="#"> | |
| <strong>Titulo</strong> | |
| </a> | |
| <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> | |
| <span aria-hidden="true"></span> | |
| <span aria-hidden="true"></span> | |
| <span aria-hidden="true"></span> | |
| </a> | |
| </div> | |
| <div id="navbarBasicExample" class="navbar-menu"> | |
| <div class="navbar-start"> | |
| <a class="navbar-item">Inicio</a> | |
| <a class="navbar-item">Elemento</a> | |
| <div class="navbar-item has-dropdown is-hoverable"> | |
| <a class="navbar-link">Mas</a> | |
| <div class="navbar-dropdown"> | |
| <a class="navbar-item">Mas</a> | |
| <a class="navbar-item">Items</a> | |
| <hr class="navbar-divider"> | |
| <a class="navbar-item">Anidados</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="navbar-end"> | |
| <div class="navbar-item"> | |
| <div class="buttons"> | |
| <a class="button is-primary"> | |
| <strong>Boton</strong> | |
| </a> | |
| <a class="button is-light">Boton</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav>`, | |
| properties: [{ | |
| name: "Coloración", | |
| key: "color", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }, { | |
| name: "Posición", | |
| key: "placement", | |
| htmlAttr: "class", | |
| validValues: ["is-fixed-top", "is-fixed-bottom"], | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-fixed-top", | |
| text: "Fixed Top" | |
| }, { | |
| value: "is-fixed-bottom", | |
| text: "Fixed Bottom" | |
| }] | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("html/link", "html/navbaritem", { | |
| classes: ["navbar-item"], | |
| image: process.env.ASSET_PATH + "img/icons/link.svg", | |
| name: "Item de navegacion", | |
| html: `<a href="#" class="navbar-item">Item</a>`, | |
| }); | |
| Vvveb.Components.extend("html/link", "html/navbardivider", { | |
| classes: ["navbar-divider"], | |
| image: process.env.ASSET_PATH + "img/icons/hr.svg", | |
| name: "Divisor de menu", | |
| html: `<hr class="navbar-divider">`, | |
| }); | |
| Vvveb.Components.extend("html/link", "html/navbarmenu", { | |
| classes: ["navbar-item", "has-dropdown"], | |
| image: process.env.ASSET_PATH + "img/icons/list_group.svg", | |
| name: "Menu de navegacion", | |
| html: ` <div class="navbar-item has-dropdown is-hoverable"> | |
| <a class="navbar-link">Menu</a> | |
| <div class="navbar-dropdown"> | |
| <a class="navbar-item">Elemento 1</a> | |
| <a class="navbar-item">Elemento 2</a> | |
| <hr class="navbar-divider"> | |
| <div class="navbar-item">Elemento 3</div> | |
| </div> | |
| </div>`, | |
| }); | |
| Vvveb.Components.extend("_base", "html/form", { | |
| nodes: ["form"], | |
| image: process.env.ASSET_PATH + "img/icons/form.svg", | |
| name: "Formulario", | |
| html: ` <form> | |
| <div class="field"> | |
| <label class="label">Nombre</label> | |
| <div class="control"> | |
| <input class="input" type="text" placeholder="Nombre"> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label class="label">Sexo</label> | |
| <div class="control"> | |
| <div class="select"> | |
| <select> | |
| <option>M</option> | |
| <option>F</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label class="label">Mensaje</label> | |
| <div class="control"> | |
| <textarea class="textarea" placeholder="Mensaje"></textarea> | |
| </div> | |
| </div> | |
| </form>`, | |
| properties: [ | |
| // { | |
| // name: "Estilo horizontal", | |
| // key: "style", | |
| // htmlAttr: "class", | |
| // child: ".field", | |
| // validValues: ["is-horizontal"], | |
| // inputtype: Inputs.ToggleInput, | |
| // data: { | |
| // on: "is-horizontal", | |
| // off: "" | |
| // } | |
| // }, | |
| { | |
| name: "Acción", | |
| key: "action", | |
| htmlAttr: "action", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Metodo", | |
| key: "method", | |
| htmlAttr: "method", | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "get", | |
| text: "GET" | |
| }, { | |
| value: "post", | |
| text: "POST" | |
| }] | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/textinput", { | |
| name: "Input de texto", | |
| attributes: {"type":"text"}, | |
| image: process.env.ASSET_PATH + "img/icons/text_input.svg", | |
| html: ` <div class="field"> | |
| <label class="label">Texto</label> | |
| <div class="control"> | |
| <input class="input" type="text" placeholder="Input de texto"> | |
| </div> | |
| </div>`, | |
| properties: [{ | |
| name: "Value", | |
| key: "value", | |
| htmlAttr: "value", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Placeholder", | |
| key: "placeholder", | |
| htmlAttr: "placeholder", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Coloración", | |
| key: "color", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/selectinput", { | |
| nodes: ["select"], | |
| name: "Input de selección", | |
| image: process.env.ASSET_PATH + "img/icons/select_input.svg", | |
| html: ` <div class="field"> | |
| <label class="label">Selector</label> | |
| <div class="control"> | |
| <div class="select"> | |
| <select> | |
| <option>Item 1</option> | |
| <option>Item 2</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div>`, | |
| beforeInit: function (node) | |
| { | |
| var properties = []; | |
| var i = 0; | |
| $(node).find('option').each(function() { | |
| data = {"value": this.value, "text": this.text}; | |
| i++; | |
| properties.push({ | |
| name: "Opcion " + i, | |
| key: "option" + i, | |
| //index: i - 1, | |
| optionNode: this, | |
| inputtype: Inputs.TextValueInput, | |
| data: data, | |
| onChange: function(node, value, input) { | |
| var option = $(this.optionNode); | |
| //if remove button is clicked remove option and render row properties | |
| if (input.nodeName == 'BUTTON') | |
| { | |
| option.remove(); | |
| Vvveb.Components.render("html/selectinput"); | |
| return node; | |
| } | |
| if (input.name == "value") option.attr("value", value); | |
| else if (input.name == "text") option.text(value); | |
| return node; | |
| }, | |
| }); | |
| }); | |
| //remove all option properties | |
| this.properties = this.properties.filter(function(item) { | |
| return item.key.indexOf("option") === -1; | |
| }); | |
| //add remaining properties to generated column properties | |
| properties.push(this.properties[0]); | |
| this.properties = properties; | |
| return node; | |
| }, | |
| properties: [{ | |
| name: "Opcion", | |
| key: "option1", | |
| inputtype: Inputs.TextValueInput | |
| }, { | |
| name: "Opcion", | |
| key: "option2", | |
| inputtype: Inputs.TextValueInput | |
| }, { | |
| name: "", | |
| key: "addChild", | |
| inputtype: Inputs.ButtonInput, | |
| data: {text:"Agregar Opcion", icon:"la-plus"}, | |
| onChange: function(node) | |
| { | |
| $(node).append('<option value="value">Opcion</option>'); | |
| //render component properties again to include the new column inputs | |
| Vvveb.Components.render("html/selectinput"); | |
| return node; | |
| } | |
| }, { | |
| name: "Coloración", | |
| key: "color", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/textareainput", { | |
| name: "Area de texto", | |
| nodes: ["textarea"], | |
| image: process.env.ASSET_PATH + "img/icons/text_area.svg", | |
| html: ` <div class="field"> | |
| <div class="control"> | |
| <textarea class="textarea" placeholder="Area de texto"></textarea> | |
| </div> | |
| </div>`, | |
| properties: [{ | |
| name: "Coloración", | |
| key: "color", | |
| htmlAttr: "class", | |
| validValues: bgcolorClasses, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: bgcolorSelectOptions | |
| } | |
| }, { | |
| name: "Tamaño", | |
| key: "size", | |
| htmlAttr: "class", | |
| validValues: ['is-small', 'is-medium', 'is-large'], | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "Default" | |
| }, { | |
| value: "is-small", | |
| text: "Pequeño" | |
| }, { | |
| value: "is-medium", | |
| text: "Mediano" | |
| }, { | |
| value: "is-large", | |
| text: "Grande" | |
| }] | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/radiobutton", { | |
| name: "Input de radio", | |
| attributes: {"type":"radio"}, | |
| image: process.env.ASSET_PATH + "img/icons/radio.svg", | |
| html: ` <div class="control"> | |
| <label class="radio"> | |
| <input type="radio" name="answer"> | |
| Item | |
| </label> | |
| </div>`, | |
| properties: [{ | |
| name: "Nombre", | |
| key: "name", | |
| htmlAttr: "name", | |
| inputtype: Inputs.TextInput | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/checkbox", { | |
| name: "Input de Checkbox", | |
| attributes: {"type":"checkbox"}, | |
| image: process.env.ASSET_PATH + "img/icons/checkbox.svg", | |
| html: '<label class="checkbox"><input type="checkbox"> Checkbox</label>', | |
| properties: [{ | |
| name: "Nombre", | |
| key: "name", | |
| htmlAttr: "name", | |
| inputtype: Inputs.TextInput | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/fileinput", { | |
| name: "Selector de archivos", | |
| attributes: {"type":"file"}, | |
| image: process.env.ASSET_PATH + "img/icons/text_input.svg", | |
| html: ` | |
| <div class="file"> | |
| <label class="file-label"> | |
| <input class="file-input" type="file" name="resume"> | |
| <span class="file-cta"> | |
| <span class="file-icon"> | |
| <i class=mdi mdi-upload"></i> | |
| </span> | |
| <span class="file-label"> | |
| Elije un archivo... | |
| </span> | |
| </span> | |
| </label> | |
| </div>` | |
| }); | |
| Vvveb.Components.extend("_base", "html/box", { | |
| name: "Box", | |
| classes: ['box'], | |
| image: process.env.ASSET_PATH + "img/icons/container.svg", | |
| html: ` | |
| <div class="box"> | |
| <p> | |
| <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small> | |
| <br> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. | |
| </p> | |
| </div>` | |
| }); | |
| Vvveb.Components.extend("_base", "html/table", { | |
| nodes: ["table"], | |
| classes: ["table"], | |
| image: process.env.ASSET_PATH + "img/icons/table.svg", | |
| name: "Tabla", | |
| html: '<table class="table">\ | |
| <thead>\ | |
| <tr>\ | |
| <th>#</th>\ | |
| <th>Nombre</th>\ | |
| <th>Apellido</th>\ | |
| <th>Twitter</th>\ | |
| </tr>\ | |
| </thead>\ | |
| <tbody>\ | |
| <tr>\ | |
| <th>1</th>\ | |
| <td>Mark</td>\ | |
| <td>Otto</td>\ | |
| <td>@mdo</td>\ | |
| </tr>\ | |
| <tr>\ | |
| <th>2</th>\ | |
| <td>Jacob</td>\ | |
| <td>Thornton</td>\ | |
| <td>@fat</td>\ | |
| </tr>\ | |
| <tr>\ | |
| <th>3</th>\ | |
| <td>Larry</td>\ | |
| <td>the Bird</td>\ | |
| <td>@twitter</td>\ | |
| </tr>\ | |
| </tbody>\ | |
| </table>', | |
| properties: [ | |
| { | |
| name: "Responsiva", | |
| key: "responsive", | |
| htmlAttr: "class", | |
| validValues: ["is-responsive"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-responsive", | |
| off: "" | |
| } | |
| }, | |
| { | |
| name: "Bordes", | |
| key: "is-bordered", | |
| htmlAttr: "class", | |
| validValues: ["is-bordered"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-bordered", | |
| off: "" | |
| } | |
| }, | |
| { | |
| name: "Lineas", | |
| key: "is-striped", | |
| htmlAttr: "class", | |
| validValues: ["is-striped"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-striped", | |
| off: "" | |
| } | |
| }, | |
| { | |
| name: "Compacta", | |
| key: "is-narrow", | |
| htmlAttr: "class", | |
| validValues: ["is-narrow"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-narrow", | |
| off: "" | |
| } | |
| }, | |
| { | |
| name: "Marcable", | |
| key: "is-hoverable", | |
| htmlAttr: "class", | |
| validValues: ["is-hoverable"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-hoverable", | |
| off: "" | |
| } | |
| }, | |
| { | |
| name: "Ancho completo", | |
| key: "is-fullwidth", | |
| htmlAttr: "class", | |
| validValues: ["is-fullwidth"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-fullwidth", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/tablerow", { | |
| nodes: ["tr"], | |
| name: "Fila de tabla", | |
| html: "<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>", | |
| properties: [{ | |
| name: "Marcada", | |
| key: "is-selected", | |
| htmlAttr: "class", | |
| validValues: ["is-selected"], | |
| inputtype: Inputs.ToggleInput, | |
| data: { | |
| on: "is-selected", | |
| off: "" | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/tablecell", { | |
| nodes: ["td"], | |
| name: "Celda de tabla", | |
| html: "<td>Cell</td>" | |
| }); | |
| Vvveb.Components.extend("_base", "html/tableheadercell", { | |
| nodes: ["th"], | |
| name: "Celda de cabecera", | |
| html: "<th>Head</th>" | |
| }); | |
| Vvveb.Components.extend("_base", "html/tablehead", { | |
| nodes: ["thead"], | |
| name: "Cabecera de tabla", | |
| html: "<thead><tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr></thead>" | |
| }); | |
| Vvveb.Components.extend("_base", "html/tablebody", { | |
| nodes: ["tbody"], | |
| name: "Cuerpo de tabla", | |
| html: "<tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr></tbody>" | |
| }); | |
| Vvveb.Components.add("html/gridcolumn", { | |
| name: "Columna (Grid)", | |
| image: process.env.ASSET_PATH + "img/icons/grid_row.svg", | |
| classes: ["column"], | |
| html: '<div class="column"><h3>Columna</h3></div>', | |
| properties: [{ | |
| name: "Column", | |
| key: "column", | |
| inputtype: Inputs.GridInput, | |
| data: {hide_remove:true}, | |
| // beforeInit: function(node) { | |
| // var _class = $(node).attr("class"); | |
| // var reg = /col-([^-\$ ]*)?-?(\d+)/g; | |
| // var match; | |
| // while ((match = reg.exec(_class)) != null) { | |
| // this.data["col" + ((match[1] != undefined)?"_" + match[1]:"")] = match[2]; | |
| // } | |
| // }, | |
| onChange: function(node, value, input) { | |
| var _class = node.attr("class"); | |
| //remove previous breakpoint column size | |
| _class = _class.replace(new RegExp(input.name + '-\\d+?'), ''); | |
| //add new column size | |
| if (value) _class += ' ' + input.name + '-' + value; | |
| node.attr("class", _class); | |
| return node; | |
| }, | |
| }] | |
| }); | |
| Vvveb.Components.add("html/gridrow", { | |
| name: "3 Columnas (Grid)", | |
| image: process.env.ASSET_PATH + "img/icons/grid_row.svg", | |
| classes: ["row"], | |
| html: `<div class="columns"> | |
| <div class="column"> | |
| <h3 class="subtitle is-3">Columna 1</h3> | |
| </div> | |
| <div class="column"> | |
| <h3 class="subtitle is-3">Columna 2</h3> | |
| </div> | |
| <div class="column"> | |
| <h3 class="subtitle is-3">Columna 3</h3> | |
| </div> | |
| </div>`, | |
| children :[{ | |
| name: "html/gridcolumn", | |
| classes: ["column"], | |
| }], | |
| beforeInit: function (node) | |
| { | |
| var properties = []; | |
| var i = 0; | |
| var j = 0; | |
| $(node).find('[class*="column"]').each(function() { | |
| var _class = $(this).attr("class"); | |
| var reg = /col-([^-\$ ]*)?-?(\d+)/g; | |
| var match; | |
| var data = {}; | |
| while ((match = reg.exec(_class)) != null) { | |
| data["col" + ((match[1] != undefined)?"_" + match[1]:"")] = match[2]; | |
| } | |
| i++; | |
| properties.push({ | |
| name: "Column " + i, | |
| key: "column" + i, | |
| //index: i - 1, | |
| columnNode: this, | |
| col:12, | |
| inline:true, | |
| inputtype: Inputs.GridInput, | |
| data: data, | |
| onChange: function(node, value, input) { | |
| //column = $('[class*="col-"]:eq(' + this.index + ')', node); | |
| var column = $(this.columnNode); | |
| //if remove button is clicked remove column and render row properties | |
| if (input.nodeName == 'BUTTON') | |
| { | |
| column.remove(); | |
| Vvveb.Components.render("html/gridrow"); | |
| return node; | |
| } | |
| //if select input then change column class | |
| _class = column.attr("class"); | |
| //remove previous breakpoint column size | |
| _class = _class.replace(new RegExp(input.name + '-\\d+?'), ''); | |
| //add new column size | |
| if (value) _class += ' ' + input.name + '-' + value; | |
| column.attr("class", _class); | |
| //console.log(this, node, value, input, input.name); | |
| return node; | |
| }, | |
| }); | |
| }); | |
| //remove all column properties | |
| this.properties = this.properties.filter(function(item) { | |
| return item.key.indexOf("column") === -1; | |
| }); | |
| //add remaining properties to generated column properties | |
| properties.push(this.properties[0]); | |
| this.properties = properties; | |
| return node; | |
| }, | |
| properties: [{ | |
| name: "Column", | |
| key: "column1", | |
| inputtype: Inputs.GridInput | |
| }, { | |
| name: "Column", | |
| key: "column1", | |
| inline:true, | |
| col:12, | |
| inputtype: Inputs.GridInput | |
| }, { | |
| name: "", | |
| key: "addChild", | |
| inputtype: Inputs.ButtonInput, | |
| data: {text:"Add column", icon:"la la-plus"}, | |
| onChange: function(node) | |
| { | |
| $(node).append('<div class="col-3">Col-3</div>'); | |
| //render component properties again to include the new column inputs | |
| Vvveb.Components.render("html/gridrow"); | |
| return node; | |
| } | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/paragraph", { | |
| nodes: ["p"], | |
| name: "Parrafo", | |
| image: process.env.ASSET_PATH + "img/icons/paragraph.svg", | |
| html: '<p>Lorem ipsum</p>', | |
| properties: [{ | |
| name: "Alinear texto", | |
| key: "text-align", | |
| htmlAttr: "class", | |
| inputtype: Inputs.SelectInput, | |
| validValues: ["", "has-text-left", "has-text-centered", "has-text-right", "has-text-justified"], | |
| inputtype: Inputs.RadioButtonInput, | |
| data: { | |
| extraclass:"", | |
| options: [{ | |
| value: "", | |
| icon:"la la-close", | |
| //text: "None", | |
| title: "None", | |
| checked:true, | |
| }, { | |
| value: "Izquierda", | |
| //text: "Left", | |
| title: "has-text-left", | |
| icon:"la la-align-left", | |
| checked:false, | |
| }, { | |
| value: "has-text-centered", | |
| //text: "Center", | |
| title: "Centro", | |
| icon:"la la-align-center", | |
| checked:false, | |
| }, { | |
| value: "has-text-right", | |
| //text: "Right", | |
| title: "Derecha", | |
| icon:"la la-align-right", | |
| checked:false, | |
| }, { | |
| value: "has-text-justified", | |
| //text: "Right", | |
| title: "Justificado", | |
| icon:"la la-align-justify", | |
| checked:false, | |
| }], | |
| }, | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "html/video", { | |
| nodes: ["video"], | |
| name: "Video", | |
| html: '<video width="320" height="240" playsinline loop autoplay><source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"><video>', | |
| dragHtml: '<img width="320" height="240" src="' + Vvveb.baseUrl + 'icons/video.svg">', | |
| image: process.env.ASSET_PATH + "img/icons/video.svg", | |
| properties: [{ | |
| name: "Liga", | |
| child: "source", | |
| key: "src", | |
| htmlAttr: "src", | |
| inputtype: Inputs.LinkInput | |
| },{ | |
| name: "Ancho", | |
| key: "width", | |
| htmlAttr: "width", | |
| inputtype: Inputs.TextInput | |
| }, { | |
| name: "Alto", | |
| key: "height", | |
| htmlAttr: "height", | |
| inputtype: Inputs.TextInput | |
| },{ | |
| name: "Mute", | |
| key: "muted", | |
| htmlAttr: "muted", | |
| inputtype: Inputs.CheckboxInput | |
| },{ | |
| name: "Repetir", | |
| key: "loop", | |
| htmlAttr: "loop", | |
| inputtype: Inputs.CheckboxInput | |
| },{ | |
| name: "Autoplay", | |
| key: "autoplay", | |
| htmlAttr: "autoplay", | |
| inputtype: Inputs.CheckboxInput | |
| },{ | |
| name: "Play inline", | |
| key: "playsinline", | |
| htmlAttr: "playsinline", | |
| inputtype: Inputs.CheckboxInput | |
| },{ | |
| name: "Controles", | |
| key: "controls", | |
| htmlAttr: "controls", | |
| inputtype: Inputs.CheckboxInput | |
| }] | |
| }); | |
| Vvveb.Components.extend("_base", "_base", { | |
| properties: [ | |
| { | |
| name: "Tipografia", | |
| key: "font-family", | |
| htmlAttr: "style", | |
| sort: base_sort++, | |
| col:6, | |
| inline:true, | |
| inputtype: Inputs.SelectInput, | |
| data: { | |
| options: [{ | |
| value: "", | |
| text: "extended" | |
| }, { | |
| value: "Ggoogle ", | |
| text: "google" | |
| }] | |
| } | |
| }] | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment