{"id":18276368,"url":"https://github.com/runthis/swapform","last_synced_at":"2025-04-12T20:30:25.590Z","repository":{"id":57376009,"uuid":"354382451","full_name":"runthis/swapform","owner":"runthis","description":"A front-end improvement to Bootstrap forms with animations and a Material design","archived":false,"fork":false,"pushed_at":"2025-03-02T01:17:04.000Z","size":104,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T14:44:58.407Z","etag":null,"topics":["animation","autoheight","bootstrap","css","forms"],"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/runthis.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-04-03T19:58:30.000Z","updated_at":"2024-12-28T02:03:48.000Z","dependencies_parsed_at":"2024-02-28T04:27:10.123Z","dependency_job_id":"31689f29-c5af-46c5-a971-6cbff3e52a6a","html_url":"https://github.com/runthis/swapform","commit_stats":{"total_commits":65,"total_committers":1,"mean_commits":65.0,"dds":0.0,"last_synced_commit":"d5c6e0cd95d0e81c42a9a0b59a6b396dec59d3d2"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runthis%2Fswapform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runthis%2Fswapform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runthis%2Fswapform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runthis%2Fswapform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/runthis","download_url":"https://codeload.github.com/runthis/swapform/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248629062,"owners_count":21136187,"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":["animation","autoheight","bootstrap","css","forms"],"created_at":"2024-11-05T12:15:53.553Z","updated_at":"2025-04-12T20:30:25.568Z","avatar_url":"https://github.com/runthis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.swapform.com/\"\u003e\n    \u003cimg src=\"https://www.swapform.com/img/swap-7.gif\" alt=\"Swapform in action\" width=\"320\" height=\"80\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A front-end improvement to Bootstrap forms with a Material design.\n  \u003cbr\u003e\n  Supports Bootstrap versions \u003cstrong\u003e3\u003c/strong\u003e, \u003cstrong\u003e4\u003c/strong\u003e and \u003cstrong\u003e5\u003c/strong\u003e.\n  \u003cbr\u003e\n  \u003ca href=\"https://www.swapform.com/#docs\"\u003e\u003cstrong\u003eDocumentation »\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/runthis/swapform/issues/new\"\u003eReport bug\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/runthis/swapform/issues/new\"\u003eRequest feature\u003c/a\u003e\n\u003c/p\u003e\n\n[![Build](https://github.com/runthis/swapform/actions/workflows/build.yml/badge.svg)](https://github.com/runthis/swapform/actions/workflows/build.yml)\n[![version](https://img.shields.io/github/package-json/version/runthis/swapform)](https://www.npmjs.com/package/swapform)\n![bootstrap version](https://img.shields.io/npm/dependency-version/swapform/peer/bootstrap)\n[![JS gzip size](https://img.badgesize.io/runthis/swapform/master/dist/js/swapform.min.js?compression=gzip\u0026label=JS%20gzip%20size)](https://github.com/runthis/swapform/blob/master/dist/js/swapform.min.js)\n[![CSS gzip size](https://img.badgesize.io/runthis/swapform/master/dist/css/swapform.min.css?compression=gzip\u0026label=CSS%20gzip%20size)](https://github.com/runthis/swapform/blob/master/dist/css/swapform.min.css)\n[![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/swapform)](https://snyk.io/vuln/search?type=npm\u0026q=swapform)\n[![license](https://img.shields.io/npm/l/swapform)](https://github.com/runthis/swapform/blob/master/LICENSE)\n[![CodeQL](https://github.com/runthis/swapform/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/runthis/swapform/actions/workflows/codeql-analysis.yml)\n\n\n\n\n## Table of contents\n\n- [Quick start](#quick-start)\n- [What's included](#whats-included)\n- [Documentation](#documentation)\n- [Screenshots](#screenshots)\n- [Builds](#builds)\n- [Todo](#todo)\n- [Creator](#creator)\n\n\n\n## Quick start\n\n- Use a cdn:\n  - **JavaScript** *(pick a provider)*:\n    - unpkg: \u003chttps://unpkg.com/swapform@1.1.2/dist/js/swapform.min.js\u003e\n    - jsdelivr: \u003chttps://cdn.jsdelivr.net/npm/swapform@1.1.2/dist/js/swapform.min.js\u003e\n  - **CSS** *(pick a provider)*:\n    - unpkg: \u003chttps://unpkg.com/swapform@1.1.2/dist/css/swapform.min.css\u003e\n    - jsdelivr: \u003chttps://cdn.jsdelivr.net/npm/swapform@1.1.2/dist/css/swapform.min.css\u003e\n\n- Use [npm](https://www.npmjs.com/):\n  - `npm install swapform`\n\n- Download a zip:\n  - \u003chttps://github.com/runthis/swapform/archive/refs/heads/master.zip\u003e\n\n\n\n## What's included\n\n```text\nswapform/\n└── dist/\n    ├── css/\n    │   ├── swapform.css\n    │   ├── swapform.css.map\n    │   ├── swapform.min.css\n    │   └── swapform.min.css.map\n    └── js/\n        ├── swapform.js\n        ├── swapform.js.map\n        ├── swapform.min.js\n        └── swapform.min.js.map\n```\n\n\n\n## Documentation\n\nQuite simply, wrap an input or textarea in a `\u003cdiv\u003e` element with an `sf-form` class. Then add the `sf-label` class to the `\u003clabel\u003e` element. Swapform will automatically perform everything else.\n\n\n### Input examples\n\n#### Basic\n    \u003cdiv class=\"sf-form\"\u003e\n        \u003clabel class=\"sf-label\"\u003eEnter username\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n![Basic swap](https://www.swapform.com/img/swap-8.gif)\n\n#### Swapping label when focused\n    \u003cdiv class=\"sf-form\"\u003e\n        \u003clabel class=\"sf-label\" data-description=\"Who are you?\"\u003eEnter username\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n![Basic swap](https://www.swapform.com/img/swap-9.gif)\n\n#### Swapping multiple labels when focused and when input value is filled\n    \u003cdiv class=\"sf-form\"\u003e\n        \u003clabel class=\"sf-label\" data-description=\"Who are you?\" data-filled=\"That's what she said\"\u003e\n            Enter username\n        \u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\n![Basic swap](https://www.swapform.com/img/swap-10.gif)\n\n### Textarea examples\n\nThe `\u003ctextarea\u003e` element supports the same swapping methods outlined above, and also supports automatic height expansion, fixed heights and multiple sizes. Below is a table listing the available classes for a `\u003ctextarea\u003e` depending on the features and size desired.\n\n![Expanding Textarea](https://www.swapform.com/img/swap-11.gif)\n\n\n#### Classes for fixed heights and auto-expanding heights\n\n| Class                 | Suffix     | Sizes               |  Description                                               |\n| --------------------- | ---------- | ------------------- | ---------------------------------------------------------- |\n| `sf-textarea-`        | sm, md, lg | 160px, 320px, 640px | Automatically expands to a maximum height based on content |\n| `sf-textarea-fixed-`  | sm, md, lg | 160px, 320px, 640px | Has a fixed height                                         |\n\n\n#### Basic, medium, fixed height\n\n*Class:* `sf-textarea-fixed-md`\n\n    \u003cdiv class=\"sf-form\"\u003e\n        \u003clabel class=\"sf-label\"\u003eTell me a story\u003c/label\u003e\n        \u003ctextarea class=\"form-control sf-textarea-fixed-md\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n\n\n#### Basic, large, expanding height\n\n*Class:* `sf-textarea-lg`\n\n    \u003cdiv class=\"sf-form\"\u003e\n        \u003clabel class=\"sf-label\"\u003eTell me a story\u003c/label\u003e\n        \u003ctextarea class=\"form-control sf-textarea-lg\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n\n\n#### Basic, large, expanding height, with swapping texts\n\n*Class:* `sf-textarea-lg`\n\n*Focused:* `Surprise me!`\n\n*Filled:* `Cool story bro`\n\n\n    \u003cdiv class=\"sf-form\"\u003e\n        \u003clabel class=\"sf-label\" data-description=\"Surprise me!\" data-filled=\"Cool story bro\"\u003eTell me a story\u003c/label\u003e\n        \u003ctextarea class=\"form-control sf-textarea-lg\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n\n\n\n\n### Supported classes\n\n#### Basic\n\n| Class     | Description                                                                |\n| --------- | ------------------------------------------------------------------------------ |\n| `sf-form` | Used to wrap around a `\u003clabel\u003e` with an accompanying `\u003cinput\u003e` or `\u003ctextarea\u003e` |\n\n\n#### Labels\n\n| Class         | Description                                                                          |\n| ------------- | ------------------------------------------------------------------------------------ |\n| `sf-label-sm` | Should be used when using **`form-control-sm`** in your input/textarea elements      |\n| `sf-label`    | Should be used when using regular **`form-control`** in your input/textarea elements |\n| `sf-label-lg` | Should be used when using **`form-control-lg`** in your input/textarea elements      |\n\n\n#### Textarea\n\n| Class                  | Description                       |\n| ---------------------- | --------------------------------- |\n| `sf-textarea-sm`       | Auto expanding height up to 160px |\n| `sf-textarea-md`       | Auto expanding height up to 320px |\n| `sf-textarea-lg`       | Auto expanding height up to 640px |\n| `sf-textarea`          | Auto expanding height infinitely  |\n| `sf-textarea-fixed-sm` | Fixed height, 160px               |\n| `sf-textarea-fixed-md` | Fixed height, 320px               |\n| `sf-textarea-fixed-lg` | Fixed height, 640px               |\n\n\n\n\n### Supported data attributes\n\nThese are used on `\u003cinput\u003e` or `\u003ctextarea\u003e` elements. The `color` and `file` input types are not supported at this time.\n\n| Option              | Description                                                                                 |\n| ------------------- | ------------------------------------------------------------------------------------------- |\n| `data-description`  | The value is swapped in when a form input or textarea is focused                            |\n| `data-filled`       | The value is swapped in when a form input or textarea has a value and is no longer focused  |\n\n\n\n## Screenshots\n\n\n\n**Basic**\n\n![Basic swap](https://www.swapform.com/img/swap-2.gif)\n\n\n**Using HTML**\n\n![HTML Swap](https://www.swapform.com/img/swap-4.gif)\n\n\n**Using emojis**\n\n![Emoji Swap](https://www.swapform.com/img/swap-6.gif)\n\n\n**Auto expanding textarea**\n\n![Expanding Textarea](https://www.swapform.com/img/swap-5.gif)\n\n\n\n## Builds\n\nIf you are using the [npm build](https://www.npmjs.com/package/swapform), you can rebuild the compiled assets after making any desired changes by running any of the following commands:\n\n\n| Option             | Description                                                                               |\n| ----------------- | ----------------------------------------------------------------------------------------- |\n| `css-compile`     | Generates a non-minified version of the css and stores it in `./dist/css/swapform.css`      |\n| `css-minify`      | Generates a minified version of the css and stores it in `./dist/css/swapform.min.css`      |\n| `js-compile-dev`  | Generates a non-minified version of the javascript and stores it in `./js/dist/swapform.js` |\n| `js-minify-dev`   | Generates a minified version of the javascript and stores it in `./js/dist/swapform.min.js` |\n| `js-compile-prod` | Generates a non-minified version of the javascript and stores it in `./dist/js/swapform.js` |\n| `js-minify-prod`  | Generates a minified version of the javascript and stores it in `./dist/js/swapform.min.js` |\n\n*All the above commands also generate source maps*\n\n\n\n## Todo\n\n- Add a new method to detect errors on form validation and allow handling\n\n\n\n## Creator\n\n**Robert Miller**\n\n- \u003chttps://www.robertjessemiller.com/\u003e\n- \u003chttps://github.com/runthis\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunthis%2Fswapform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunthis%2Fswapform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunthis%2Fswapform/lists"}