If I use spa.min.css version, that came with spa.min.js 14.5, then font awesome directory is /fonts/.
If I use spa.min.css version, that comes with [email protected], then font awesome directory is /webfonts/.

this is a breaking change..

P.S. font file names changes too

Hi,

I found a bug with helper command. Isn't compatible with command extended by jQuery selector, e.g. text.

Testing code:

<!-- text command -->
<ui-bind path="myvar" config="text;helper:toUpperCase" class="block"><b></b></ui-bind>
<ui-bind path="myvar" config="text b;helper:toUpperCase" class="block"><b></b></ui-bind>
<ui-bind path="myvar" config="text b:value;helper:toUpperCase" class="block"><b></b></ui-bind>
<ui-bind path="myvar" config="text b:Thelpers.toUpperCase(value)" class="block">Right solution: <b></b></ui-bind>
<hr />
<!-- html command -->
<ui-bind path="myvar" config="html;helper:toUpperCase" class="block"><b></b></ui-bind>
<ui-bind path="myvar" config="html b;helper:toUpperCase" class="block"><b></b></ui-bind>
<ui-bind path="myvar" config="html b:value;helper:toUpperCase" class="block"><b></b></ui-bind>
<ui-bind path="myvar" config="html b:Thelpers.toUpperCase(value)" class="block">Right solution: <b></b></ui-bind>
<script>
	var myvar = 'Hello world!';
	Thelpers.toUpperCase = function(val) {
		return val ? val.toUpperCase() : val;
	};
</script>

Hello,

I found something odd. One can't inject <ui-bind> to a section tag.

Testing code:

<script>
	customElements.define('is-section', class extends HTMLDivElement {
		constructor() {
			super();
			setTimeout(NEWUIBIND, 2, this);
		}
	}, { extends: 'section' });
</script>

<h2>Static tabs</h2>
	<ui-component name="tabmenu" path="tab">
		<ul class="tabmenu">
			<li data-value="tab1">Tab 1</li>
			<li data-value="tab2">Tab 2</li>
			<li data-value="tab3">Tab 3</li>
		</ul>
	</ui-component>

	<section is="is-section" path="tab" config="show:value==='tab1'" class="block hidden">
		TAB 1 content
	</section>
	<section is="is-section" path="tab" config="show:value==='tab2'" class="block hidden">
		TAB 2 content
	</section>
	<section is="is-section" path="tab" config="show:value==='tab3'" class="block hidden">
		TAB 3 content
	</section>

<script>
	var tab = 'tab1';
	var tabs = [{ name: 'Tab 1', value: 'tab1' }, { name: 'Tab2', value: 'tab2' }, { name: 'Tab 3', value: 'tab3' }];
</script>

When I change the section to div it starts working. There is a error in cosole

Uncaught TypeError: Illegal constructor: localName does not match the HTML element interface

Thanks

Hi, I created a Plugin with text fields. This Plugin sends a websocket to the webserver that then sends http requests to a different endpoint. I got all the websocket and http request call code working, so that's not a problem. I just can't seem to access the values of the UI elements in the Plugin.

I checked https://wiki.totaljs.com/jcomponent/07-plugins and saw that I can WATCH when the values change, but I just need the values when I click a button.

Example accessing text value within a component in Flow UI.
Component name: test
Element name: name

GET("settings.test.name");

I'm trying not to use the anonymous scopes, so my question is what path should I access to get values of UI elements' values in a plugin using the GET method.

I try to support user-defined functions in component data validation.

for example.

some-component.html:

component.element.on('change', async function(){
  let isValid = await EXEC(config.validCheck, this.value);
  if ( !isValid ) return console.error('is not valid');
});

some-user-js.js:

window.validationCheck = function(value){ return !!value; }

index.html:

<div data-jc="some-component" data-jc-config="validCheck:validationCheck"></div>

but, EXEC() is only return self. Is there a way?

and I wonder if there is a way to use callback or await. because data validation is depends on server response. e.g.) duplicate user ID check

Hi, I'm trying to change the value of a j-Textbox depending on the chosen value of a j-Input.

I can use __change command and detect whether a user chooses a value on j-Input. What I want to do next is to display different type of data on j-Textbox depending on the chosen value in j-Input.

I'm just not really sure how to display data based on other jcomponent values. I've tried using __text for the textbox, but it will change the label of the textbox instead of its value and I cannot get __val command to work at all.

Is there an easy way to dynamically display data based off of other components?

JSFiddle Example

Thanks in advance!

In the example in the file app-global.js a global variable STRING is used in a function Number.prototype.format but it's not defined anywhere which causes error:
Uncaught ReferenceError: STRING is not defined

the two demos do not exist:

<li><a href="http://clientside.totaljs.com/jcomponent.html"><strong>DEMO EXAMPLE</strong></a></li>
<li><a href="http://clientside.totaljs.com/jctajr.html"><strong>IMPORTANT DEMO: jComponent + Tangular + jRouting</strong> = jctajr.js</a></li>

both are 404's

Hello, ui-bind check doesn't work with a scope (with/without). I have the latest spa.min.js
When I replace config check for e.g. exec, the method is called as usual.

<ui-bind class="block" path="common.message" config="check:common.running;text"></ui-bind>

<ui-plugin path="testform">

	<!-- doesn't work (testform/check isn't called)-->
	<ui-bind class="block" path="common.message" config="check:testform/check;text"></ui-bind>

	<!-- doesn't work (console error) -->
	<ui-bind class="block" path="common.message" config="check:?/check;text"></ui-bind>

</ui-plugin>

<script>

	var common = {};
	common.message = 'Current time: ' + (new Date().format('HH:mm:ss'));
	common.running = true;

	setInterval(function() {
		SET('common.message', 'Current time: ' + (new Date().format('HH:mm:ss')));
	}, 1000);

	// first case, works
	setInterval(function() {
		TOGGLE('common.running');
	}, 5000);

	// second case, doesn't work
	PLUGIN('testform', function(exports) {
		
		exports.check = function(value, path) {
			console.log(value, path);
			return true;
		};

	});
</script>

I'm using jComponent to build my SPA web app, but when I use data-jc in a ajax loaded html file ,then the component not working correctly.
So please get me some advice , thanks !

Hey there,

I'm trying to get a value from a generated Textbox within a jComponent.
I have the following code:

exports.id = 'test';
exports.title = 'test_01';
exports.group = 'comms';
exports.color = '#0000FF';
exports.click = true;
exports.output =  0;                   
exports.input = 0;
exports.version = '1.0.0';
exports.author = 'auto-generated by TModule.py';

exports.html = '<div data-jc="exec">

<div style="padding:50px">

  <div data-jc="textbox" data-jc-path="form.Name" data-jc-bind="">Name</div>

  <br />
  <button class="exec" onclick="console.log(GET('form.Name'))">Ok</button>
  
</div>

</div>;

exports.readme = # Test
exports.install = function(instance) {

        instance.reconfigure = function() {

        };

    instance.connections;
    instance.on('options', instance.reconfigure);
    instance.reconfigure();
};

How can i get the value from the textbox with the path 'form.name' after clicking on the 'OK' button?

Thanks in advance

greetings
C0usterOne

Than

In example variable message will pass direct to Vue object without define as global variable.
Is there way to do that for jComponent?

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hi,

Here is testing code

var list = [
	'<div><h1>Test</h1></div>',
	'<div data---="time"></div>',
	'<div data-bind="!test__text"></div>',
	'<ui-component name="time"></ui-component>',
	'<ui-bind path="!test" config="text"></ui-bind>'
];
for (var i = 0; i < list.length; i++)
	console.log(list[i].COMPILABLE(), list[i]);

Results:

false '<div><h1>Test</h1></div>'
true '<div data---="time"></div>'
true '<div data-bind="!test__text"></div>'
false '<ui-component name="time"></ui-component>'
false '<ui-bind path="!test" config="text"></ui-bind>'