totaljs / components Goto Github PK
View Code? Open in Web Editor NEWComponents for Componentator
License: MIT License
Components for Componentator
License: MIT License
Hello,
I've been facing an issue when using a textbox component inside a repeater-group component.
What I'm trying to achieve is retrieving form items from a server then displaying the proper components for the form.
After I open the component settings form and once the data is retrieved, it takes about 2 to 3 seconds for the textbox components to render, then if I save the settings form and open it again, the textbox components don't render at all!
I've provided the test component code that I used to reproduce this issue.
exports.id = 'repeatergrouptest';
exports.title = 'Repeater Group Test';
exports.group = 'Form';
exports.color = '#888600';
exports.icon = 'code';
exports.input = true;
exports.output = 0;
exports.version = '1.0.0';
exports.author = '';
exports.options = {
datasource: [],
formId: null,
};
exports.readme = ``;
exports.html = `
<div class="padding">
<div data-jc="textbox" data-jc-path="formId">Form</div>
<div style="margin-top:40px;" data-jc="repeater-group__datasource__group:group">
<script type="text/html">
<div>
<div data-jc="textbox" data-jc-path="datasource[$index].name" data-jc-config="disabled:true;">Name</div>
<div data-jc="textbox" data-jc-path="datasource[$index].defaultValue">Value</div>
<br />
</div>
</script>
<script type="text/html">
<div style="font-size:16px;font-weight:bold;margin-bottom:10px">{{ group }} ({{ index + 1 }}/{{ length }})</div>
<div>
{{ body | raw }}
</div>
</script>
</div>
</div>
<script>
ON('open.repeatergrouptest', function(component, options) {
var datasource = [];
setTimeout(() => {
datasource.push({ name: 'Name 1', defaultValue: 'Jeans', group: 'group1'});
datasource.push({ name: 'Name 2', defaultValue: 'Shoes', group: 'group1'});
datasource.push({ name: 'Name 3', defaultValue: 'Shoes', group: 'group2'});
datasource.push({ name: 'Name 4', defaultValue: 'Jeans', group: 'group2'});
SET('settings.repeatergrouptest.datasource', datasource);
}, 1000);
});
</script>
`;
exports.install = function (instance) {};
Thanks!
example:
in
<div data---="flow__flowmodel__width:6000;height:6000;grid:26;gridcolor:red;gridstroke:4;infopath:floweditor.info;undopath:floweditor.undo;redopath:floweditor.redo"></div>
gridcolor:red;gridstroke:4 doesnot work
Hi,
Is there any way to dynamically set the currency?
Example of the template:
{ name: 'total', text: 'Total', currency: '{{ currency }}', width: 100 },
and the value could look like this
[
{ id: '5', total: '100', currency: 'usd' }
]
Thank you
I have tried a j-Input component with minvalue,maxvalue, but it does not work correctly.
I see that self.frocedvalidation
maybe is not correct if type
is number
.
self.forcedvalidation = function() {
if (!config.forcevalidation)
return false;
var val = self.get();
return (self.type === 'phone' || self.type === 'email') && (val != null && (typeof(val) === 'string' && val.length !== 0));
};
I think it should:
self.forcedvalidation = function() {
if (!config.forcevalidation)
return false;
var val = self.get();
return (self.type === 'number' && (config.minvalue || config.maxvalue)) ||
((self.type === 'phone' || self.type === 'email') && (val != null && (typeof(val) === 'string' && val.length !== 0)));
};
Regards,
not working: component.js
line 19
Hi,
I figured out that the name="up"
and name="down"
buttons don't work. My code is from the example
<ui-component name="listform" path="users" config="autofocus:1">
<!-- LIST RENDERING -->
<script type="text/html">
<div>{{ name }}</div>
</script>
<!-- FORM RENDERING -->
<script type="text/html">
<div class="padding">
<ui-component name="input" path="?.name" config="required:1" default="''" class="m">Name</ui-component>
<ui-component name="validate" path="?">
<button name="submit"><i class="ti ti-save"></i>Save</button>
<button name="remove">Remove</button>
<button name="cancel">Cancel</button>
<button name="down">Down</button>
<button name="up">Up</button>
</ui-component>
</div>
</script>
<!-- FOOTER -->
<script type="text/html">
<div style="margin-top:10px"><button name="create"><i class="ti ti-plus-circle green"></i>Create new</button></div>
</script>
</ui-component>
<hr />
<ui-bind path="users" config="text:STRINGIFY(value)" style="font-family:monospace" class="block"></ui-bind>
</div>
<script>
var users = [{ name: 'Total.js' }, { name: 'Flow' }, { name: 'jComponent' }];
</script>
Thanks
Hello, how do I exactly serialize/deserialize data with J-Flow component?
I want to save it in a database - for example in JSON field.
Also is it possible add metadata to nodes?
Hi,
I've a problem with j-WizardExpert. The validation doesn't work, it's always enabled: false
.
<style>
button { background-color: white; border: 1px solid #E0E0E0; font-size: 12px; padding: 5px 15px; }
button:hover { background-color: #F8F8F8; }
button:disabled { background-color: #F0F0F0; cursor: not-allowed; color: #A0A0A0; }
</style>
<script>
customElements.define('is-button', class extends HTMLButtonElement {
constructor() {
super();
setTimeout(NEWUIBIND, 2, this);
}
}, { extends: 'button' });
</script>
<div style="border:1px solid #E0E0E0;width:300px;height:150px;padding:20px;margin-bottom:20px">
<ui-component name="wizardexpert" path="currentstep" config="output:currentoutput;next:nextstep;back:prevstep;exec:steps_finish">
<script type="text/plain">
{
'step1': { url: 'step1.html', next: 'step2', validate: false },
'step2': { url: 'step2.html', next: 'step3' },
'step3': { url: 'step3.html' }
}
</script>
</ui-component>
</div>
<nav>
<ui-component name="validation" path="outputdata">
<button is="is-button" path="prevstep" config="enabled:value && value.enabled;click:steps_back" disabled>Back</button>
<button is="is-button" path="nextstep" config="enabled:!value||value.enabled;html:value?'Next':'Finish';click:steps_next" disabled>Next</button>
</ui-component>
</nav>
<script type="text/html" id="step1">
WELCOME
</script>
<script type="text/html" id="step2">
<ui-component name="input" path="?.name" config="required:1">Type your name</ui-component>
</script>
<script type="text/html" id="step3">
FINISH
</script>
<script>
var currentstep = 'step1';
var currentoutput = {};
ON('request', function(options) {
// Hijack response
if (options.url.indexOf('step') !== -1)
options.respond($('#' + options.url.replace('.html', '')).html());
});
function steps_next() {
SET('currentstep', 'NEXT');
}
function steps_back() {
SET('currentstep', 'BACK');
}
function steps_finish() {
alert('DONE: ' + STRINGIFY(currentoutput));
}
</script>
Thank you
Hello,
Is there a way to use j-Rules and j-DatePicker, j-TimePicker and j-Directory on filters?
Validate function is not working, when type is not defined OR type is string/number
<div data---="input__form.phone__placeholder:+421;validate:checkphone">Phone</div>
<script>
function checkphone() {
// this function is never called
console.log('Validating..');
return false;
}
</script>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.