{"id":20671109,"url":"https://github.com/allnulled/ui-script-language","last_synced_at":"2025-10-15T12:14:33.210Z","repository":{"id":208040783,"uuid":"720692921","full_name":"allnulled/ui-script-language","owner":"allnulled","description":"UI Script is a shorter \u0026 simpler substitute for HTML syntax. Comes with a set of components.","archived":false,"fork":false,"pushed_at":"2023-12-18T12:48:33.000Z","size":780,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T19:16:42.662Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/allnulled.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-19T09:45:51.000Z","updated_at":"2023-11-30T21:26:27.000Z","dependencies_parsed_at":"2023-12-18T13:53:34.850Z","dependency_job_id":"b231aa13-840a-49c5-80a9-a893c48e618b","html_url":"https://github.com/allnulled/ui-script-language","commit_stats":null,"previous_names":["allnulled/ui-script-language"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fui-script-language","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fui-script-language/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fui-script-language/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fui-script-language/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allnulled","download_url":"https://codeload.github.com/allnulled/ui-script-language/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242889597,"owners_count":20201989,"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":[],"created_at":"2024-11-16T20:25:04.604Z","updated_at":"2025-10-15T12:14:28.159Z","avatar_url":"https://github.com/allnulled.png","language":"JavaScript","readme":"# UI-Script\n\n\n**UI-Script** is a shorter \u0026 simpler substitute for HTML syntax.\n\n![Shield](https://img.shields.io/badge/Set_of_components-+20-green) ![Shield](https://img.shields.io/badge/HTML_substitute-optionally-green) ![Shield](https://img.shields.io/badge/Supports_es6_import_syntax-yes-green) ![Shield](https://img.shields.io/badge/Supports_es5_require_syntax-yes-green) ![Shield](https://img.shields.io/badge/Installable_by_command_line-2_binaries-green) ![Shield](https://img.shields.io/badge/Packed_with-browserify-green) ![Shield](https://img.shields.io/badge/Installable_via-npm-green) ![Shield](https://img.shields.io/badge/Binary_1-uiscript-green) ![Shield](https://img.shields.io/badge/Binary_2-xcomponents-green)\n\n\n# Index\n\n- [UI-Script](#ui-script)\n- [Index](#index)\n- [Online version](#online-version)\n- [Documentation](#documentation)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Binaries usage](#binaries-usage)\n  - [Usage of `uiscript`](#usage-of-uiscript)\n  - [Usage of `xcomponents`](#usage-of-xcomponents)\n- [Extra information](#extra-information)\n  - [Use Windows 7 programmatic dialogs](#use-windows-7-programmatic-dialogs)\n  - [More than 25 components](#more-than-25-components)\n\n# Online version\n\nYou have a free tester online version here:\n\n- [https://allnulled.github.io/ui-script-language](https://allnulled.github.io/ui-script-language)\n\n\n# Documentation\n\nThe documentation can be found:\n\n- On NPM at [https://npmjs.com/@allnulled/ui-script](https://npmjs.com/@allnulled/ui-script)\n- On Github at [https://github.com/allnulled/ui-script-language](https://github.com/allnulled/ui-script-language)\n\n# Installation\n\nBefore starting, import the package via `npm`:\n\n```\nnpm install --save @allnulled/ui-script\n```\n\nFirst, you import the CSS file for general and per-component styling:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./node_modules/@allnulled/ui-script/docs/lib/ui-script/ui-script.css\" /\u003e\n```\n\nSecond, you import the JS file for general and per-component logic:\n\n```html\n\u003cscript src=\"./node_modules/@allnulled/ui-script/docs/lib/ui-script/ui-script.js\"\u003e\u003c/script\u003e\n```\n\n# Usage\n\nOnce you have done this, 2 variables are added into the global scope `window`:\n  - `uiscript_api` and\n  - `uiscript_components`.\n\nHowever, you can use `import` statement too to retrieve the `uiscript_api`.\n\nThe `uiscript_api` comes packed like this:\n\n```js\nwindow.uiscript_api = {\n    ast: { parser: ast_parser },\n    parser,\n    components: window.uiscript_components\n};\n```\n\nThe `uiscript_api.parser.parse(uiscript)` function returns HTML syntax from `uiscript` syntax.\n\nThe `uiscript_api.ast.parser.parse(uiscript)` function returns an object syntax from `uiscript` syntax.\n\nThe `uiscript_api.components` holds the `uiscript_components` object.\n\nThe `uiscript_components` holds all the ui-script (Vue2) components of the library, this is:\n\n- [**xbreadcrumb**](./docs/lib/ui-script/components/xbreadcrumb/xbreadcrumb.md)\n- [**xbutton**](./docs/lib/ui-script/components/xbutton/xbutton.md)\n- [**xdialogport**](./docs/lib/ui-script/components/xdialogport/xdialogport.md). Imports a special API for Windows 7 dialogs based on Vue.js v2 components usage.\n- [**xform**](./docs/lib/ui-script/components/xform/xform.md)\n- [**xformfield**](./docs/lib/ui-script/components/xformfield/xformfield.md)\n- [**xjumbotron**](./docs/lib/ui-script/components/xjumbotron/xjumbotron.md)\n- [**xlabel**](./docs/lib/ui-script/components/xlabel/xlabel.md)\n- [**xlayout**](./docs/lib/ui-script/components/xlayout/xlayout.md)\n- [**xlayoutnopaddingbottom**](./docs/lib/ui-script/components/xlayoutnopaddingbottom/xlayoutnopaddingbottom.md)\n- [**xlayoutnopaddingtop**](./docs/lib/ui-script/components/xlayoutnopaddingtop/xlayoutnopaddingtop.md)\n- [**xlink**](./docs/lib/ui-script/components/xlink/xlink.md)\n- [**xpage**](./docs/lib/ui-script/components/xpage/xpage.md)\n- [**xpanel**](./docs/lib/ui-script/components/xpanel/xpanel.md)\n- [**xparagraph**](./docs/lib/ui-script/components/xparagraph/xparagraph.md)\n- [**xstatic**](./docs/lib/ui-script/components/xstatic/xstatic.md)\n- [**xsubtitle**](./docs/lib/ui-script/components/xsubtitle/xsubtitle.md)\n- [**xtable**](./docs/lib/ui-script/components/xtable/xtable.md)\n- [**xtablecell**](./docs/lib/ui-script/components/xtablecell/xtablecell.md)\n- [**xtablerow**](./docs/lib/ui-script/components/xtablerow/xtablerow.md)\n- [**xtester**](./docs/lib/ui-script/components/xtester/xtester.md)\n- [**xtitle**](./docs/lib/ui-script/components/xtitle/xtitle.md)\n- [**xwindow**](./docs/lib/ui-script/components/xwindow/xwindow.md)\n- [**xwindowbody**](./docs/lib/ui-script/components/xwindowbody/xwindowbody.md)\n- [**xwindowfooter**](./docs/lib/ui-script/components/xwindowfooter/xwindowfooter.md)\n- [**xwindowfooteritem**](./docs/lib/ui-script/components/xwindowfooteritem/xwindowfooteritem.md)\n- [**xwindowtitle**](./docs/lib/ui-script/components/xwindowtitle/xwindowtitle.md)\n\n# Examples\n\nThe following example demonstrates how to create a new Vue.js v2 component from UI-Scripting markup.\n\n```html\n\u003cscript\u003e\nVue.component(\"CustomComponent\", {\n    template: uiscript_api.parser.parse(`\n      !div {\n       !xwindow {\n        !xwindowtitle {{ Título de la ventana }}\n        !xwindowbody {\n         !xtitle {{ Título de página }}\n         !xsubtitle {{ Subttulo de página }}\n         !xbreadcrumb {{ Ruta » a » subdireccion }}\n         !xpanel {\n          !xform {\n           !xformfield {{ Usuario: }}\n           !xformfield {{ Contraseña: }}\n          }\n         }\n         !xlayoutnopaddingtop [style=\"text-align: right;\"] {\n          !xbutton {{ Entrar }}\n         }\n        }\n        !xwindowfooter {\n         !xwindowfooteritem {{ Pie de ventana }}\n        }\n       }\n      }\n    `)\n});\n\u003c/script\u003e\n```\n\n# Binaries usage\n\n## Usage of `uiscript`\n\nTo parse `uiscript` code into `html` you can simply:\n\n```sh\nuiscript file1.uis file2.uis file3.uis\n```\n\nThis will output the equivalent `html` files beside each.\n\n## Usage of `xcomponents`\n\nTo create a setup of files (`lib` folder) you can simply:\n\n```sh\nxcomponents docs\n```\n\nThis will create a `lib` folder inside the `docs` folder with:\n\n  - `calo`: [`castelog`](https://github.com/allnulled/castelog) import statement.\n  - `win7`: [`win7`](https://khang-nd.github.io/7.css/) CSS library.\n  - `ui-script`: [`ui-script`](.) JS and CSS files, and the whole component API too, in case you need to modify it.\n\n# Extra information\n\n## Use Windows 7 programmatic dialogs\n\nThe `xdialogport` provides a special API for Windows 7 based dialogs with very easy asynchronous methods. Visit its documentation [here](./docs/lib/ui-script/components/xdialogport/xdialogport.md) to take full advantage of this API.\n\nAs easy as:\n\n```js\nconst confirmation_1 = await Vue.prototype.$dialogs.confirm(\"Did you like it?\", \"Question\", \"A daily custion\", \"Yes\", \"No\");\nconst confirmation_2 = await Vue.prototype.$dialogs.confirm({\n  html: \"Did you like it?\",\n  title: \"Question\",\n  footer: \"A daily custion\",\n  button_accept: \"Yes\",\n  button_reject: \"No\"\n});\n```\n\n## More than 25 components\n\nThe most of them are just CSS. But useful anyway to wrap the contents of your templates.\n\n1. **xbreadcrumb**\n1. **xbutton**\n1. **xdialogport**\n1. **xdialogcurrent**\n1. **xform**\n1. **xformfield**\n1. **xjumbotron**\n1. **xlabel**\n1. **xlayout**\n1. **xlayoutnopaddingbottom**\n1. **xlayoutnopaddingtop**\n1. **xlink**\n1. **xpage**\n1. **xpanel**\n1. **xparagraph**\n1. **xstatic**\n1. **xsubtitle**\n1. **xtable**\n1. **xtablecell**\n1. **xtablerow**\n1. **xtester**\n1. **xtitle**\n1. **xwindow**\n1. **xwindowbody**\n1. **xwindowfooter**\n1. **xwindowfooteritem**\n1. **xwindowtitle**","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fui-script-language","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallnulled%2Fui-script-language","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fui-script-language/lists"}