{"id":25092542,"url":"https://github.com/valkoivo/koicom","last_synced_at":"2025-04-16T01:26:59.068Z","repository":{"id":271617806,"uuid":"914030010","full_name":"valkoivo/koicom","owner":"valkoivo","description":"The KoiCom library focuses on building interfaces using web components with a standardized lifecycle, which streamlines development and facilitates testing.","archived":false,"fork":false,"pushed_at":"2025-04-06T14:07:50.000Z","size":1887,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T14:36:07.182Z","etag":null,"topics":["components","custom-elements","html","javascript","web","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://valkoivo.github.io/koicom/","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/valkoivo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-01-08T20:13:03.000Z","updated_at":"2025-04-06T14:07:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f220f0b-da75-40a7-b1bc-436bcea97ef3","html_url":"https://github.com/valkoivo/koicom","commit_stats":null,"previous_names":["valkoivo/koicom"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valkoivo%2Fkoicom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valkoivo%2Fkoicom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valkoivo%2Fkoicom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valkoivo%2Fkoicom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valkoivo","download_url":"https://codeload.github.com/valkoivo/koicom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249181197,"owners_count":21225863,"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","custom-elements","html","javascript","web","web-components","webcomponents"],"created_at":"2025-02-07T14:19:21.780Z","updated_at":"2025-04-16T01:26:59.051Z","avatar_url":"https://github.com/valkoivo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://valkoivo.github.io/koicom/img/logo_color.png\" alt=\"koicom\" width=\"100\"/\u003e\u003c/p\u003e\n\u003ch2 align=\"center\"\u003eKoiCom\u003c/h2\u003e\n\nA link to the documentation:\n[a link](https://valkoivo.github.io/koicom/index.html)\n\nBluesky:\n[a link](https://bsky.app/profile/valkoivo.bsky.social)\n\nThe KoiCom library focuses on building interfaces using components with a standardized lifecycle, which streamlines development and facilitates testing.\n\nFrontend interfaces built with the KoiCom library can run entirely on the client side (in the browser), interacting with the server only for data exchange.\n\nThe following is an example of a CRUD panel created using the library's basic components.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://valkoivo.github.io/koicom/img/crud.png\" alt=\"koicom crud panel\" width=\"670\"/\u003e\u003c/p\u003e\n\nA link to the CRUD panel:\n[a link](https://valkoivo.github.io/koicom/docs/book/13_example.html)\n\n## Documentation ##\nThe KoiCom library includes documentation and a set of fundamental components.\n\nThe documentation outlines the methodology for developing frontend interfaces and explains the principles behind the selection of specific solutions.\n\nThe fundamental components demonstrate the library's principles and can serve as a basis for building more complex components and interfaces.\n\n## Key Features ##\n\n* The library is built on web-components technology and standardizes the component lifecycle, enabling you to quickly create custom components by following the standard.\n* The component lifecycle emphasizes data exchange between components rather than their visual appearance. You can customize the look of components using your own CSS frameworks.\n* Components are functionally specialized to be easily combined into more complex structures, allowing you to encapsulate elements such as cards, lists, forms, modals, and more.\n* Each component is a combination of individual behaviors, a data object, and a visual representation, giving you the flexibility to mix existing behaviors and rapidly develop new components.\n* Behaviors consist of intuitive, easy-to-understand method sets.\n* Components can be seamlessly swapped, enabling you to test hypotheses and iterate on project versions quickly.\n* Components retain the simplicity of standard HTML elements, eliminating the need to learn new syntax for their implementation.\n\n## Installation ##\nThe KoiCom library does not require package managers for installation.\n\nThe library operates independently of third-party libraries or frameworks. It is built entirely with vanilla JavaScript.\n\nThe library consists of JavaScript files that can be stored anywhere in your project's directory structure and imported directly into your code.\n\nDownload link:\n[a link](https://valkoivo.github.io/koicom/koicom.zip)\n\n## Fundamental Components ##\nBelow are examples of the fundamental components.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://valkoivo.github.io/koicom/img/examples.png\" alt=\"koicom crud panel\" width=\"668\"/\u003e\u003c/p\u003e\n\nWorking examples here: [a link](https://valkoivo.github.io/koicom/index.html)\n\n## Example Code ##\nBelow is an example of a component that displays the product of two numbers as text.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://valkoivo.github.io/koicom/img/multiplication.png\" alt=\"koicom crud panel\" width=\"668\"/\u003e\u003c/p\u003e\n\nThe component is implemented with the code shown below.\n```javascript\nimport { KoiDataElementInteger } from \"../../../../libs/web-components-lib/data_element.js\";\nimport { KoiData, KoiDataCapable } from \"../../../../libs/web-components-lib/data.js\";\nimport { KoiLabelStencil, KoiLabelSocket, KoiLabelSocketConnectable } from \"../../../../libs/web-components-lib/controls/labels/control_label.js\";\n\nclass KoiColorableLabelSocket extends KoiLabelSocket {\n\n\tdisplayError(){\n\t\tsuper.displayError();\n\t\tthis._removeClass('text-bg-secondary');\n\t\tthis._addClass('text-bg-danger');\n\t}\n\n\tdisplayText(text){\n\t\tsuper.displayText(text);\n\t\tthis._removeClass('text-bg-danger');\n\t\tthis._addClass('text-bg-secondary');\n\t}\n\n}\n\nconst KoiColorableLabelSocketConnectable = Sup =\u003e class extends KoiLabelSocketConnectable(Sup) {\n\n\t_constructSocket(){\n\t\treturn new KoiColorableLabelSocket({\n\t\t\tholder: this\n\t\t});\n\t}\n\n}\n\nclass DocsMultiplyLabelData extends KoiData {\n\n\tconstructProperties(){\n\t\tthis._properties = {\n\t\t\tvalue1: new KoiDataElementInteger({\n\t\t\t\tlocalized_name: 'value1',\n\t\t\t\ttype: 'integer',\n\t\t\t\tdefault_value: null,\n\t\t\t\tallow_empty: true\n\t\t\t}),\n\t\t\tvalue2: new KoiDataElementInteger({\n\t\t\t\tlocalized_name: 'value2',\n\t\t\t\ttype: 'integer',\n\t\t\t\tdefault_value: null,\n\t\t\t\tallow_empty: true\n\t\t\t})\n\t\t};\n\t}\n\n\tgetValue1(){\n\t\treturn this._getValueOrDefaultValue('value1');\n\t}\n\n\tgetValue2(){\n\t\treturn this._getValueOrDefaultValue('value2');\n\t}\n\n\tgetMultiplicationProduct(){\n\t\treturn this._getValueOrDefaultValue('value1') * this._getValueOrDefaultValue('value2');\n\t}\n\n}\n\nconst KoiMultiplyTwoIntegersDataCapable = Sup =\u003e class extends KoiDataCapable(Sup) {\n\n\t_constructData(){\n\t\treturn new DocsMultiplyLabelData();\n\t}\n\n}\n\nexport class DocsMultiplyLabel extends KoiMultiplyTwoIntegersDataCapable(\n\tKoiColorableLabelSocketConnectable(\n\t\tKoiLabelStencil\n\t)\n) {\n\n\tstatic getTagName(){\n\t\treturn 'docs-multiply-label';\n\t}\n\n\tstatic getTag({element_id, value1, value2, element_class, debug_mode}){\n\t\tlet tag_name = this.getTagName();\n\t\tlet str_element_class = (element_class != undefined) ? 'class=\"' + element_class + '\"' : 'class=\"mb-3 d-block\"';\n\t\tlet str_debug_mode = debug_mode ? 'debug_mode=\"true\"' : '';\n\t\treturn '\u003c' + tag_name + \n\t\t\t' id=\"' + element_id + \n\t\t\t'\" value1=\"' + value1 + \n\t\t\t'\" value2=\"' + value2 + \n\t\t\t'\" ' + str_element_class + \n\t\t\t' ' + str_debug_mode +\n\t\t\t'\u003e\u003c/' + tag_name + '\u003e';\n\t}\n\n\t_getDataToDisplayInSocket(){\n\t\treturn this.data;\n\t}\n\n\t_generateExpression(data){\n\t\tlet value1 = data.getValue1();\n\t\tlet value2 = data.getValue2();\n\t\tlet product = data.getMultiplicationProduct();\n\t\treturn String(value1) + ' * ' + String(value2) + ' = ' + String(product);\n\t}\n\n\t_convertDataToText(data){\n\t\treturn this._generateExpression(data);\n\t}\n\n}\n```\n\nThe component can be embedded in an HTML document using the following code.\n\n```html\n\u003cdocs-multiply-label id=\"sample_multiply_label_1\" value1=\"2\" value2=\"3\"\u003e\u003c/docs-multiply-label\u003e\n\n\u003cscript type=\"module\"\u003e\nimport { DocsMultiplyLabel } from \"/js/docs/controls/labels/docs_multiply_label.js\";\nif (customElements.get(DocsMultiplyLabel.getTagName()) === undefined) {\n\tcustomElements.define(DocsMultiplyLabel.getTagName(), DocsMultiplyLabel);\n}\n\u003c/script\u003e\n```\n\n## License ##\nMIT © Koi\n\n## Tags ##\njavascript html components web webcomponents web-components custom-elements\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalkoivo%2Fkoicom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalkoivo%2Fkoicom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalkoivo%2Fkoicom/lists"}