{"id":13802166,"url":"https://github.com/totaljs/flowcomponents","last_synced_at":"2025-06-27T00:34:48.452Z","repository":{"id":46266335,"uuid":"90230436","full_name":"totaljs/flowcomponents","owner":"totaljs","description":"Open repository for Flow components","archived":false,"fork":false,"pushed_at":"2023-01-04T17:36:11.000Z","size":551,"stargazers_count":88,"open_issues_count":0,"forks_count":39,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-05-28T15:12:16.117Z","etag":null,"topics":["components","flow","nodejs","totaljs"],"latest_commit_sha":null,"homepage":"https://www.totaljs.com/flow/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/totaljs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-04T06:43:35.000Z","updated_at":"2023-08-28T21:24:23.000Z","dependencies_parsed_at":"2023-02-02T19:31:50.964Z","dependency_job_id":null,"html_url":"https://github.com/totaljs/flowcomponents","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2Fflowcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2Fflowcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2Fflowcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2Fflowcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/totaljs","download_url":"https://codeload.github.com/totaljs/flowcomponents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253942686,"owners_count":21988111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","flow","nodejs","totaljs"],"created_at":"2024-08-04T00:01:37.940Z","updated_at":"2025-05-13T12:32:32.691Z","avatar_url":"https://github.com/totaljs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Total.js Flow Components\n\nThis repository contains all __Total.js Flow components__.\n\n__Requirements__:\n\n- install Node.js platform +v10\n- install Total.js framework `$ npm install total4`\n- important __Flow 6.0__\n\n## Creating own components\n\n- clone an existing component\n- keep unique identificators\n- each component has to contain a test file `YOURCOMPONENTNAME-run.js`\n- keep readme 1:1 with readme in the component declaration\n\n## How to install a component to my Total.js Flow?\n\n- choose your component from this repository\n- upload `componentname.js` (via database icon in designer)\n- don't upload `readme.md` and `componentname-run.js`\n\n---\n\n## Component API\n\n- __IMPORTANT__: `exports.id` can contain `a-z` `0-9` chars only.\n\n```javascript\n// {String}, IMPORTANT a component version\nexports.version = '0.0.1';\n\n// {String}, IMPORTANT (lower case without diacritics)\nexports.id = 'component';\n\n// {String}, optional (default: \"component name\")\nexports.title = 'A component name (for human)';\n\n// {String}, optional (default: \"#656D78\")\nexports.color = '#656D78'; // use darker colors because the font color is \"white\"\n\n// {Boolean}, optional (default: false)\nexports.click = true;\n\n// {Number}, optional (default: 0)\n// +v3.0.0\nexports.input = 0;\n\n// or {Array of Colors}, input will have 2 inputs (red and blue)\n// +v3.0.0\nexports.input = ['red', 'blue'];\n\n// {Number}, optional (default: 0)\nexports.output = 1;\n\n// or {Array of Colors}, output will have 2 outputs (red and blue)\nexports.output = ['red', 'blue'];\n\n// {String}, optional (default: \"Common\")\nexports.group = 'Common';\n\n// {String}, optional (default: \"Unknown\")\nexports.author = 'Peter Širka';\n\n// {String}, optional (default: \"\")\n// Font-Awesome icon without \"fa-\"\nexports.icon = 'home';\n\n// {String or Object}, optional (default: undefined)\nexports.status = 'DEFAULT STATUS TEXT';\n// or\nexports.status = { text: 'DEFAULT STATUS TEXT', color: 'red' };\n\n// {String Array}\n// optional (default: undefined), NPM dependencies\nexports.npm = ['sqlagent', 'mqtt'];\n\n// {Object}, optional (default \"undefined\")\n// Default options for new and existing instances\nexports.options = { enabled: true };\n\n// Disables data cloning\nexports.cloning = false;\n\n// {Boolean}, optional (default: true)\n// +v4.0.0\n// hides stats under component box in designer UI\nexports.traffic = false;\n\n// {String}, optional (format: 'yyyy-MM-dd HH:mm')\n// +v4.0.0\n// Updated date\nexports.dateupdated = '2017-17-10';\n\nexports.install = function(component) {\n\n\t// =====================\n\t// DELEGATES\n\t// =====================\n\n\t// A close delegate (optional)\n\t// - \"callback\" argument must be executed!\n\tcomponent.close = function(callback) {\n\t\t// This instance will be killed.\n\t\t// use this if some asyncronous work needs to be done\n\t\t// alternatively use component.on('close',...\n\t};\n\n\n\t// =====================\n\t// EVENTS\n\t// =====================\n\n\tcomponent.on('click', function() {\n\t\t// optional\n\t\t// the component was clicked on in the designer\n\t\t// usefull for enabling/disabling some behavior or triggering some actions\n\t});\n\n\tcomponent.on('data', function(message) {\n\n\t\t// RAW DATA\n\t\t// returns {Object}\n\t\tmessage.data;\n\n\t\t// Write value to data repository\n\t\t// returns {Message}\n\t\tmessage.set('key', 'value');\n\n\t\t// Read value from data repository\n\t\t// returns {Object}\n\t\tmessage.get('key');\n\n\t\t// Remove value from data repository\n\t\t// returns {Message}\n\t\tmessage.rem('key');\n\n\t\t// {Object Array} Array of all components the message has passed through (previous components)\n\t\tmessage.tracking;\n\n\t\t// {Object} Parent component (first component which started the flow)\n\t\tmessage.parent;\n\n\t\t// {Boolean} Is completed?\n\t\tmessage.completed;\n\n\t\t// {DateTime}\n\t\tmessage.begin;\n\n\t\t// How can I modify data?\n\t\tmessage.data = { newdata: true };\n\n\t\t// send this message :-)\n\t\tcomponent.send(message);\n\t});\n\n\tcomponent.on('\u003cinput-number\u003e', function(message) {\n\t\t// message as specified above in 'data' event\n\t\t// input 0 to event '0' and so on\n\t});\n\n\tcomponent.on('options', function(new_options, old_options) {\n\t\t// optional\n\t\t// options have changed in the designer\n\t\t// instance.options holds the new_options already\n\t});\n\n\tcomponent.on('variables', function(variables) {\n\t\t// +v3.0.0\n\t\t// optional\n\t\t// global variables have been changed\n\t\t// instance.variable(key)\n\t});\n\n\tcomponent.on('close', function() {\n\t\t// optional\n\t\t// This instance will be killed\n\t});\n\n\tcomponent.on('reinit', function() {\n\t\t// optional\n\t\t// Designer has been updated, but this instance still persists\n\t\t// This instance can have new connections.\n\t});\n\n\tcomponent.on('signal', function(data, parent) {\n\t\t// optional\n\t\t// Captured signal\n\t\t// @data {Object} - optional, can be \"null\", or \"undefined\"\n\t\t// @parent {Component} - a component which created this signal\n\t});\n\n\tcomponent.on('service', function(counter) {\n\t\t// optional\n\t\t// Service called each 1 minute\n\t});\n\n\t// =====================\n\t// METHODS\n\t// =====================\n\n\tcomponent.status(message, [color]);\n\t// Sends a status to designer\n\t// @message: {String/Object} - string will be formatted as markdown and object as JSON\n\t// color: {String} - \"black\" (default: \"gray\")\n\n\tcomponent.debug(message, [style]);\n\t// Sends a debug message\n\t// @message: {String/Object} - string will be formatted as markdown and object as JSON\n\t// style: {String} - \"info\", \"warning\", \"error\" (default: \"info\")\n\n\tcomponent.hasConnection(index);\n\t// Calculates connections\n\t// @index: {Number}\n\t// returns {Number}\n\n\tvar message = component.send([index], data);\n\tmessage.set('repositorykey', 'value');\n\tconsole.log(message.get('repositorykey'));\n\t// Sends data\n\t// @index: {Number} - optional, the output index (otherwise all outputs)\n\t// @data: {String/Object}\n\t// returns Message;\n\n\tvar message = component.send2([index], data);\n\tif (message) {\n\t\t// message will be sent\n\t} else {\n\t\t// no connections\n\t}\n\t// +v3.0.0\n\t// Alias for component.send() but with a check of connections\n\n\tcomponent.set(key, value);\n\t// Writes a value to a private key-value store (data are stored on HDD)\n\t// @key {String}\n\t// @value {Object}\n\t// returns {Component}\n\n\tcomponent.get(key);\n\t// Reads a value from a private key-value store (data are stored on HDD)\n\t// @key {String}\n\t// returns {Object}\n\n\tcomponent.make(data);\n\t// Creates a new FlowData/Message instance.\n\t// @data {Object}\n\t// returns {Message}\n\n\tcomponent.rem(key);\n\t// Removes a value from a private key-value store (data are stored on HDD)\n\t// @key {String}\n\t// returns {Component}\n\n\tcomponent.variable(key);\n\t// +v3.0.0\n\t// Reads a value from global variables\n\t// @key {String}\n\t// returns {Object}\n\n\tcomponent.signal([index], [data]);\n\t// Sends a signal to first connection (it emits \"signal\" event in target connection)\n\t// @index {Number} - optional, an output index (default: \"undefined\" --\u003e all connections)\n\t// @data {Object} - optional, an additional data\n\t// returns {Component}\n\n\tcomponent.click();\n\t// Performs click event.\n\t// returns {Component}\n\n\tcomponent.log([a], [b], [c], [d]);\n\t// Writes some info into the log file\n\t// returns {Component}\n\n\tcomponent.error(err, [parent|response|component]);\n\t// Creates error\n\t// returns {Component}\n\n\tcomponent.save();\n\t// Saves current options, useful when options are changed internally. Options from settings form are saved automatically\n\t// returns {Component}\n\n\tcomponent.reconfig();\n\t// If the component options changes on the server (not by recieving new options from designer) then use this to update options in designer\n\n\t// =====================\n\t// PROPERTIES\n\t// =====================\n\n\tcomponent.custom;\n\t// {Object} - empty object for custom variables and methods\n\n\tcomponent.name;\n\t// {String} - readonly, a component name (USER-DEFINED)\n\n\tcomponent.reference;\n\t// {String} - readonly, a component reference (USER-DEFINED)\n\n\tcomponent.options;\n\t// {Object} - readonly, custom settings\n\n\tcomponent.state;\n\t// {Object} - readonly, latest state\n\n\tcomponent.connections;\n\t// {Object} - readonly, all connections\n};\n\nexports.uninstall = function() {\n\t// OPTIONAL\n};\n```\n\n## Message\n\nWhen is the message instance created?\n\n```javascript\n// FIRST CASE:\ncomponent.on('data', function(message) {\n\t// Properties:\n\tmessage.id;               // {Number} A message identificator\n\tmessage.index;            // {Number} An input number\n\tmessage.begin;            // {Date} when it started\n\tmessage.data;             // {Anything} user defined data\n\tmessage.completed;        // {Boolean} is sending completed?\n\tmessage.tracking;         // {Array of Instances} all instances in order which they modified data\n\tmessage.parent;           // {Component} a parent instance\n\n\t// Methods (private message repository):\n\tmessage.set(key, value);  // Sets a key-value to message repository (doesn't modify data)\n\tmessage.get(key);         // Gets a key-value (doesn't read data from \"data\")\n\tmessage.rem(key);         // Removes a key-value (doesn't read data from \"data\")\n\tmessage.rewrite(data);    // Rewrites the current with new\n});\n\n// SECOND CASE\nvar message = component.send('YOUR-DATA-TO-CHILD-CONNECTIONS');\n```\n\n## Multiple inputs\n\n```javascript\n// data from all inputs go to 'data' event\ncomponent.on('data', function(message) {\n\t// message as specified above\n\tmessage.index; // Input number\n});\n\n// data from specific input go also to the corresponding event -\u003e input 0 to event '0'\ncomponent.on('0', function(message) {\n\t// message as specified above\n});\n```\n\n---\n\n## Client-Side\n\n### Events\n\n```javascript\nON('open.componentname', function(component, options) {\n\t// Settings will be open\n});\n\nON('save.componentname', function(component, options) {\n\t// Settings will be save\n});\n\nON('select.componentname', function(component) {\n\t// A component has been selected in designer.\n});\n\nON('click.componentname', function(component) {\n\t// Performed \"click\"\n});\n\nON('add.componentname', function(component) {\n\t// A component has been added.\n});\n\nON('rem.componentname', function(component) {\n\t// A component has been removed.\n});\n\nON('apply', function() {\n\t// Designer will be sent to server and then will be applied\n});\n```\n\n### Good to know\n\n__How to change count of outputs/inputs dynamically?__\n\n`v3.0.0` This is possible on client-side only.\n\n```javascript\nON('save.componentname', function(component, options) {\n\n\tcomponent.output = 5;\n\t// component.input = 3;\n\n\t// or\n\tcomponent.output = ['green', 'red', 'blue'];\n\t// component.input = ['green', 'red', 'blue'];\n\n\t// or set output to default\n\tcomponent.output = null;\n\t// component.input = null;\n});\n```\n\n### Components: jComponent +v17.0.0\n\nBellow jComponents can be used in `Settings form`:\n\n- autocomplete (declared `body`)\n- binder (declared in `body`)\n- calendar (declared in `body`)\n- checkbox\n- checkboxlist\n- codemirror\n- colorpicker (declared in `body`)\n- confirm (declared in `body`)\n- contextmenu (declared in `body`)\n- datepicker (declared in `body`)\n- directory\n- dragdropfiles\n- dropdown\n- dropdowncheckbox\n- error\n- exec (declared in `body`)\n- filereader\n- form\n- importer\n- input\n- keyvalue\n- loading\n- menu (declared in `body`)\n- timepicker (declared in `body`)\n- message (declared in `body`)\n- multioptions\n- nosqlcounter\n- repeater\n- repeater-group\n- shorcuts (declared in `body`)\n- search\n- selectbox\n- textbox\n- textboxlist\n- validation\n- visible\n\n__References:__\n\n- [Componentator.com](https://componentator.com/)\n- [jComponents on Github](https://github.com/totaljs/jComponent)\n\n\n---\n\n## Support\n\nTotal.js Support is applied for components which are from developers: __Peter Širka__ and __Martin Smola__. Do you want own components? [Contact us](https://www.totaljs.com/contact/).\n\n## Contact\n\n- contact form \u003chttps://www.totaljs.com/contact/\u003e\n- \u003cinfo@totaljs.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotaljs%2Fflowcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotaljs%2Fflowcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotaljs%2Fflowcomponents/lists"}