{"id":18355680,"url":"https://github.com/allenhwkim/elements-x","last_synced_at":"2025-04-06T12:32:06.682Z","repository":{"id":43677124,"uuid":"288549055","full_name":"allenhwkim/elements-x","owner":"allenhwkim","description":"Collection of Customizable Custom Elements","archived":false,"fork":false,"pushed_at":"2025-02-25T14:04:37.000Z","size":44996,"stargazers_count":24,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-21T23:51:15.353Z","etag":null,"topics":["ace-editor","barcode-generator","calendar","color-picker","custom-elements","data-table","dialog","flag","highlightjs","mapbox","pagination","qrcode","tabs","typing-effect"],"latest_commit_sha":null,"homepage":"https://elements-x.com","language":"TypeScript","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/allenhwkim.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":"2020-08-18T19:43:56.000Z","updated_at":"2024-12-30T18:43:54.000Z","dependencies_parsed_at":"2025-01-09T23:35:10.807Z","dependency_job_id":"1898c54c-3291-4b58-b223-374b63d9cfd3","html_url":"https://github.com/allenhwkim/elements-x","commit_stats":null,"previous_names":["allenhwkim/elements-x"],"tags_count":173,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Felements-x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Felements-x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Felements-x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Felements-x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allenhwkim","download_url":"https://codeload.github.com/allenhwkim/elements-x/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247484398,"owners_count":20946384,"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":["ace-editor","barcode-generator","calendar","color-picker","custom-elements","data-table","dialog","flag","highlightjs","mapbox","pagination","qrcode","tabs","typing-effect"],"created_at":"2024-11-05T22:07:41.453Z","updated_at":"2025-04-06T12:32:06.658Z","avatar_url":"https://github.com/allenhwkim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elements-x\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1437734/100136034-78959200-2e58-11eb-8125-260b78054a10.png\" width=\"600\" /\u003e\n\n## npm usage \n[Example](https://stackblitz.com/edit/elements-x)\n1. Install elements-x, `$ npm install elements-X -D`\n2. Import into your code to define all custom elements, `import 'elements-x`\n3. Use it like html tags, e.g. `\u003cx-clock run\u003e\u003c/x-clock\u003e`\n\n## browser usage\n[Example](https://unpkg.com/elements-x/dist/lib/test.html)\n```\n\u003chead\u003e\n  \u003cscript type=\"module\" src=\"https://unpkg.com/elements-x\"\u003e\u003c/script\u003e \n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cx-calendar\u003e\u003c/x-calendar\u003e\n\u003c/body\u003e\n```\n\n## Import\n```\n/* To import all elements and define custom elements */\nimport 'elements-x';\n\n/* To import and define all core elements */\nimport 'elements-x/dist/lib/core.umd.js'; \n\n/* To import and define all extended elements */\nimport 'elements-x/dist/lib/extended.umd.js'; \n\n/* To import and define only one element */\nwindow.X = {override: true};\nimport { Calendar } from 'elements-x';\n// import { Calendar } from './my-own-calendar';\ncustomElements.define('x-calendar', Calendar);\n```\n\n## Core elements\n * Calendar\n * ComboBox (Input with dropdown)\n * Dropdown (Display as dropdown underneath of input or button)\n * File\n * List (Show hierarchy and select from it)\n * Map (Openlayer map)\n * Masked (Input with mask)\n * Pagination \n * Resize\n * Table (array of inputs, or table-structured inputs)\n\n## Extended elements\n * BarCode\n * Clock\n * Highlight (Code syntax prettifier)\n * Json (Collapsible JSON viewer) \n * Monaco (Code editor)\n * QRCode\n * Sidebar\n * Stepper(form stepper)\n * Formflow (Form flow diagram with Reactflow)\n * Formdesigner (A page designer with GrapesJs)\n\n## Deployment\n  * When `main` branch is updated, it is built and deployed by [Netlify](https://app.netlify.com/sites/vigilant-lalande-2441c3/configuration/deploys#continuous-deployment) automatically.\n  * When deployed, it's published to https://elements-x.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Felements-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallenhwkim%2Felements-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Felements-x/lists"}