{"id":21916877,"url":"https://github.com/zenoo/formulajs","last_synced_at":"2026-02-26T23:33:57.671Z","repository":{"id":34241011,"uuid":"171894577","full_name":"Zenoo/FormulaJS","owner":"Zenoo","description":"Generate formulas on the fly","archived":false,"fork":false,"pushed_at":"2023-03-06T06:20:38.000Z","size":1163,"stargazers_count":2,"open_issues_count":6,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-28T23:51:56.306Z","etag":null,"topics":["formula","generator"],"latest_commit_sha":null,"homepage":"","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/Zenoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-21T15:15:30.000Z","updated_at":"2024-12-14T23:28:31.000Z","dependencies_parsed_at":"2023-01-15T05:33:09.144Z","dependency_job_id":null,"html_url":"https://github.com/Zenoo/FormulaJS","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FFormulaJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FFormulaJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FFormulaJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FFormulaJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zenoo","download_url":"https://codeload.github.com/Zenoo/FormulaJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235828182,"owners_count":19051398,"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":["formula","generator"],"created_at":"2024-11-28T19:21:20.304Z","updated_at":"2025-10-09T14:30:27.958Z","avatar_url":"https://github.com/Zenoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FormulaJS\n\n[![last commit](https://img.shields.io/github/last-commit/Zenoo/FormulaJS.svg)](LICENSE)\n[![MIT License](https://img.shields.io/github/license/Zenoo/FormulaJS.svg)](https://github.com/Zenoo/FormulaJS/commits/master)\n![Size](https://img.shields.io/github/size/Zenoo/FormulaJS/formula.min.js.svg)\n[![NPM Package](https://img.shields.io/npm/v/@zenoo/formula-js.svg)](https://www.npmjs.com/package/@zenoo/formula-js)\n![Maintenance](https://img.shields.io/maintenance/yes/2025.svg)\n\nGenerate formulas on the fly\n\n[![Demo](https://github.com/Zenoo/FormulaJS/raw/master/FormulaJS-demo.gif)](https://jsfiddle.net/Zenoo0/msgnwf2a/)\n\n### Doc\n\n- **Installation**\n\nSimply import `formula.min.js` \u0026 `formula.min.css` into your HTML by downloading it or using a CDN.\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@zenoo/formula-js@0.6.2/formula.min.css\"\u003e\n\u003cscript src=\"https://unpkg.com/@zenoo/formula-js@0.6.2/formula.min.js\"\u003e\u003c/script\u003e\n```\n\n- **Demo**\n\nA demo is available on this [JSFiddle](https://jsfiddle.net/Zenoo0/msgnwf2a/)\n\n- **Usage**\n\nInitialize your Formula by specifying a `wrapper` and some additional options:\n\n```js\nconst formula = new Formula(\"#wrapper\");\n// OR\nconst formula = new Formula(wrapperElement);\n// OR\nconst formula = new Formula(wrapperElement, options);\n```\n\nYou can change the cursor position by clicking on an existing tag or pressing the left/right arrow keys.\n\n- **Options**\n\nThe available options and their default values are:\n\n```js\n{\n  separators: [' ', 'Enter'], // Characters that will process the inputted String into a new tag\n  closers: '+-*/()%^',        // A chain of characters that will always trigger a new separate tag\n  lang: {                     // Dictionary holder (The attribute 'field' is the only one needed right now)\n    field: 'Custom Field'\n  },\n  customFields: undefined,    // Custom Fields to display, see below\n  onFieldExpand: function(field){ ... } // Callback REQUIRED if you use the 'children: true' Field property. Expects a Field-like object to be returned\n  onUpdate: function(value){ ... } // Callback triggered whenever the Formula gets updated. It's first parameter is the String representation of the Formula\n}\n```\n\n- **Custom Fields**\n\nIf you want to allow the user to pick from some predefined properties, you can use the `customFields` attribute:\n\n```js\n// Basic usage\nconst customFields = {\n  firstField: {\n    name: \"Pretty name\",\n  },\n  whatever: {\n    name: \"Prettier name\",\n  },\n};\n\n// Tree-like usage (you can deep-nest)\nconst customFields = {\n  firstField: {\n    name: \"Pretty name\",\n    children: {\n      nestedField: {\n        name: \"Hey ya\",\n      },\n    },\n  },\n  whatever: {\n    name: \"Prettier name\",\n  },\n};\n\n// Dynamic tree-like usage\nconst customFields = {\n  firstField: {\n    name: \"Pretty name\",\n    children: true, // When using a Boolean as the children value, you have to use the 'onFieldExpand' callback, see below\n    customData: {\n      // This optional object will be returned as the second argument of the 'onFieldExpand' callback\n      whateverIWant: \":D\",\n    },\n  },\n  whatever: {\n    name: \"Prettier name\",\n  },\n};\n```\n\n- **Dynamic fields**\n\nUsing `children: true` as a Field property forces you to specify the `onFieldExpand` callback. It will be called every time a new subtree is opened by the user.\n\n- The first parameter of this callback returns the field Node the user opened:\n\n```HTML\n\u003cli class=\"formula-js-field\" data-field=\"test\" data-name=\"Hey\"\u003eHey\u003cspan class=\"children\"\u003e\u003c/span\u003e\u003c/li\u003e\n```\n\nThe `data-field` and `data-name` attribute will allow you to build the subtree accordingly.\n\n- The second parameter of this callback returns whatever you passed inside the `customData` attribute of your `Field`\n\nThe `onFieldExpand` callback expects a Promise that resolves with a Field-like object to be returned, which will be used to build the subtree.\n\n```js\n// Example\nonFieldExpand: (field) =\u003e {\n  const path = field.getAttribute(\"data-field\"),\n    children = grabChildren(path);\n\n  return Promise.resolve(\n    children.map((child) =\u003e ({\n      name: prettyName(child),\n      children: hasChildren(child),\n    }))\n  );\n};\n```\n\n- **Methods**\n\nThe full documentation is available on [https://zenoo.github.io/FormulaJS/](https://zenoo.github.io/FormulaJS/).\n\n- **`.get()`**\n- **`.set(formulaString)`**\n- **`.add(formulaString)`**\n- **`.addField(fieldPath)`**\n- **`.clear()`**\n- **`.destroy()`**\n\n## Authors\n\n- **Zenoo** - _Initial work_ - [Zenoo.fr](http://zenoo.fr)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenoo%2Fformulajs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzenoo%2Fformulajs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenoo%2Fformulajs/lists"}