{"id":20170225,"url":"https://github.com/marcodpt/views","last_synced_at":"2025-03-03T04:15:52.186Z","repository":{"id":111253387,"uuid":"376813068","full_name":"marcodpt/views","owner":"marcodpt","description":"Hyperapp views with bootstrap5 and fontawesome5","archived":false,"fork":false,"pushed_at":"2022-04-04T19:51:36.000Z","size":104,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T15:27:03.430Z","etag":null,"topics":["bootstrap","bootstrap5","font-awesome","fontawesome5","hyperapp","ui","views"],"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/marcodpt.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":"2021-06-14T12:20:32.000Z","updated_at":"2022-04-04T19:51:16.000Z","dependencies_parsed_at":"2023-03-13T13:42:59.805Z","dependency_job_id":null,"html_url":"https://github.com/marcodpt/views","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fviews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fviews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fviews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fviews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/views/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241605820,"owners_count":19989612,"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":["bootstrap","bootstrap5","font-awesome","fontawesome5","hyperapp","ui","views"],"created_at":"2024-11-14T01:17:45.910Z","updated_at":"2025-03-03T04:15:52.180Z","avatar_url":"https://github.com/marcodpt.png","language":"JavaScript","readme":"# views\n\u003e [Hyperapp](https://github.com/jorgebucaran/hyperapp) views with\n[bootstrap5](https://getbootstrap.com/) and\n[fontawesome5](https://fontawesome.com/)\n\n[Tests](https://marcodpt.github.io/component/tests.html?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fviews%2Ftests.js)\n\nThis is my hyperapp views that I use in production. Have fun :)\n\n## Usage\n```js\nimport {\n  fas,\n  spinner,\n  data,\n  link,\n  field\n} from 'https://cdn.jsdelivr.net/gh/marcodpt/views/index.js'\n\nfas({\n  name: 'icons'\n})\n//\u003ci class=\"fas fa-icons\"\u003e\u003c/i\u003e\n\nfas({\n  name: '@amazon',\n  spin: true,\n  size: '2x'\n})\n//\u003ci class=\"fab fa-amazon fa-spin fa-2x\"\u003e\u003c/i\u003e\n\nspinner({})\n//\u003ci class=\"fas fa-spinner fa-spin\"\u003e\u003c/i\u003e\n\nspinner({\n  size: '5x'\n})\n//\u003ci class=\"fas fa-spinner fa-spin fa-5x\"\u003e\u003c/i\u003e\n\nlink({\n  title: 'Insert',\n  icon: 'pencil-alt'\n})\n//\u003cspan\u003e\u003ci class=\"fas fa-pencil-alt\"\u003e\u003c/i\u003e Insert\u003c/span\u003e\n\nlink({\n  title: 'Insert',\n  icon: 'pencil-alt',\n  href: '#post'\n})\n//\u003ca href=\"#post\"\u003e\u003ci class=\"fas fa-pencil-alt\"\u003e\u003c/i\u003e Insert\u003c/a\u003e\n\nlink({\n  title: 'Insert',\n  type: 'success',\n  icon: 'pencil-alt',\n  href: '#post'\n})\n//\u003ca class=\"btn btn-success\" href=\"#post\"\u003e\n// \u003ci class=\"fas fa-pencil-alt\"\u003e\u003c/i\u003e Insert\n//\u003c/a\u003e\n\ndata({\n  data: \"Hello world!\"\n})\n//\u003cspan style=\"white-space:pre-wrap\"\u003eHello world!\u003c/span\u003e\n\ndata({\n  data: \"Hello world!\",\n  type: \"info\"\n})\n//\u003cdiv \n//  class=\"alert alert-info\"\n//  role=\"alert\"\n//\u003e\n//  \u003cspan style=\"white-space:pre-wrap\"\u003eHello world!\u003c/span\u003e\n//\u003c/div\u003e\n\ndata({\n  data: \"Hello world!\",\n  href: \"#hello\",\n  title: \"msg\"\n})\n//\u003ca\n//  href=\"#hello\"\n//  title=\"msg\"\n//  style=\"white-space:pre-wrap\"\n//\u003eHello world!\u003c/a\u003e\n\ndata({\n  data: \"my data\",\n  href: \"#hello\",\n  title: \"Get your data!\",\n  mime: 'text/csv',\n  name: \"download.csv\"\n})\n//\u003ca\n//  href=\"data:text/csv;charset=utf-8,my%20data\"\n//  title=\"Get your data!\"\n//  download=\"download.csv\"\n//  style=\"white-space:pre-wrap;word-break:break-all\"\n//\u003eGet your data!\u003c/a\u003e\n\ndata({\n  title: \"Girl in a jacket\",\n  mime: 'image/jpeg',\n  src: \"https://www.w3schools.com/tags/img_girl.jpg\"\n})\n// \u003cimg\n//  class=\"w-100\"\n//  src=\"https://www.w3schools.com/tags/img_girl.jpg\"\n//  alt=\"Girl in a jacket\"\n//  title=\"Girl in a jacket\"\n// /\u003e\n\nfield({}),\n// \u003cinput class=\"form-control\" type=\"text\" /\u003e\n\nfield({\n  name: \"test\",\n  type: \"date\",\n  value: \"2021-07-15\",\n  change: showVal,\n  disabled: true,\n  error: 'y'\n})\n// \u003cinput\n//  class=\"form-control is-invalid\"\n//  type=\"date\"\n//  value=\"2021-07-15\"\n//  name=\"test\"\n//  disabled\n// /\u003e\n\nfield({\n  name: \"test\",\n  type: \"textarea\",\n  placeholder: \"\",\n  value: \"Hello,\\nmy name is Mario!\",\n  rows: 4,\n  change: showVal,\n  error: ''\n})\n//\u003ctextarea\n//  class=\"form-control is-valid\"\n//  name=\"test\"\n//  placeholder=\"\"\n//  rows=\"4\"\n//  value=\"Hello,\\nmy name is Mario!\"\n//\u003e\u003c/textarea\u003e\n\nfield({\n  name: \"test\",\n  options: null\n})\n//\u003cselect class=\"form-control\" name=\"test\" disabled\u003e\n//  \u003coption value=\"\" selected disabled\u003e\\u231B\u003c/option\u003e\n//\u003c/select\u003e\n\nfield({\n  name: \"test\",\n  options: ['car', 'bike', 'plane']\n})\n//\u003cselect class=\"form-control\" name=\"test\"\u003e\n//  \u003coption value=\"car\" label=\"car\"\u003e\u003c/option\u003e\n//  \u003coption value=\"bike\" label=\"bike\"\u003e\u003c/option\u003e\n//  \u003coption value=\"plane\" label=\"plane\"\u003e\u003c/option\u003e\n//  \u003coption value=\"\" selected disabled\u003e\\u2304\u003c/option\u003e\n//\u003c/select\u003e\n\nfield({\n  name: \"test\",\n  options: [\n    {value: 1, label: 'car'}, \n    {value: 2, label: 'bike'},\n    {value: 3, label: 'plane'},\n    {value: 4, label: 'skate'}\n  ],\n  value: 3\n})\n//\u003cselect class=\"form-control\" name=\"test\"\u003e\n//  \u003coption value=\"1\" label=\"car\"\u003e\u003c/option\u003e\n//  \u003coption value=\"2\" label=\"bike\"\u003e\u003c/option\u003e\n//  \u003coption value=\"3\" label=\"plane\" selected\u003e\u003c/option\u003e\n//  \u003coption value=\"4\" label=\"skate\"\u003e\u003c/option\u003e\n//\u003c/select\u003e\n```\n\n## Contributing\nYes please! It is a very simple project, no guidelines, any\ncontribution is greatly appreciated!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fviews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fviews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fviews/lists"}