Repository: rough-stuff/wired-elements
Branch: master
Commit: 0802655b6a02
Files: 102
Total size: 412.9 KB
Directory structure:
gitextract_am60jkcx/
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs/
│ ├── wired-button.md
│ ├── wired-calendar.md
│ ├── wired-card.md
│ ├── wired-checkbox.md
│ ├── wired-combo.md
│ ├── wired-dialog.md
│ ├── wired-divider.md
│ ├── wired-fab.md
│ ├── wired-icon-button.md
│ ├── wired-image.md
│ ├── wired-input.md
│ ├── wired-item.md
│ ├── wired-link.md
│ ├── wired-listbox.md
│ ├── wired-progress-ring.md
│ ├── wired-progress.md
│ ├── wired-radio-group.md
│ ├── wired-radio.md
│ ├── wired-search-input.md
│ ├── wired-slider.md
│ ├── wired-spinner.md
│ ├── wired-tabs.md
│ ├── wired-textarea.md
│ ├── wired-toggle.md
│ └── wired-video.md
├── examples/
│ ├── button.html
│ ├── calendar.html
│ ├── card.html
│ ├── checkbox.html
│ ├── combo.html
│ ├── dialog.html
│ ├── divider.html
│ ├── fab.html
│ ├── icon-button.html
│ ├── image.html
│ ├── input.html
│ ├── link.html
│ ├── listbox.html
│ ├── progress-ring.html
│ ├── progress.html
│ ├── radio.html
│ ├── search-input.html
│ ├── slider.html
│ ├── spinner.html
│ ├── tabs.html
│ ├── textarea.html
│ ├── toggle.html
│ └── video.html
├── experimental/
│ ├── icon.html
│ ├── iconset-generator.html
│ ├── wired-icon/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── WiredIcon.ts
│ │ │ └── wired-icon.ts
│ │ └── tsconfig.json
│ └── wired-mat-icon/
│ ├── CONTRIBUTING.md
│ ├── README.md
│ ├── generate/
│ │ └── index.html
│ ├── package.json
│ ├── src/
│ │ ├── WiredMatIcon.ts
│ │ ├── iconset/
│ │ │ ├── iconset-full.ts
│ │ │ └── index.ts
│ │ └── wired-mat-icon.ts
│ └── tsconfig.json
├── package.json
├── src/
│ ├── wired-base.ts
│ ├── wired-button.ts
│ ├── wired-calendar.ts
│ ├── wired-card.ts
│ ├── wired-checkbox.ts
│ ├── wired-combo.ts
│ ├── wired-dialog.ts
│ ├── wired-divider.ts
│ ├── wired-elements.ts
│ ├── wired-fab.ts
│ ├── wired-icon-button.ts
│ ├── wired-image.ts
│ ├── wired-input.ts
│ ├── wired-item.ts
│ ├── wired-lib.ts
│ ├── wired-link.ts
│ ├── wired-listbox.ts
│ ├── wired-progress-ring.ts
│ ├── wired-progress.ts
│ ├── wired-radio-group.ts
│ ├── wired-radio.ts
│ ├── wired-search-input.ts
│ ├── wired-slider.ts
│ ├── wired-spinner.ts
│ ├── wired-tab.ts
│ ├── wired-tabs.ts
│ ├── wired-textarea.ts
│ ├── wired-toggle.ts
│ └── wired-video.ts
├── tsconfig.json
└── tslint.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
github: pshihn
open_collective: rough
================================================
FILE: .gitignore
================================================
node_modules
lib
packages
================================================
FILE: .npmignore
================================================
node_modules
examples
.github
tsconfig.json
tslint.json
packages
================================================
FILE: CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
## [3.0.0] - April 21, 2021
* Moved from lit-elment to lit 2.0 as the base Web Component class
* Moved multi-package monorepo to a single package that has all the elements exported
## [2.0.0] - October 19, 2019
* New component: **wired-video** Video player with the hand-drawn look
* New component: **wired-calendar** is a calendar component contributed by [@elingerojo](https://github.com/elingerojo)
* New component: **wired-dialog** emulates dialogs
* New component: **wired-divider** Draws a sketchy horizontal line between two sections
* New component: **wired-image** Image component that frames the image in a sketchy border
* New component: **wired-link** Akin to `` tag, a link with href, and a sketchy underline
* New component: **wired-search-input** is a text input emulating a search input
* **wired-card** now supports a sketchy filled background
* **wired-slider** is more accessible, now built on top of input range.
* Elements are more responsive to size changes using the Resize observer
* **wired-textarea** does not auto-grow anymore.
## [1.0.0] - April 24, 2019
* New component: **wired-fab** mimics the floating action button proposed in Material design
* New component: **wired-spinner** to show pending progress in a sketchy way
* New component: **wired-tabs**

* Selection in Combo and List is now shown with a sketchy zig-zag fill in the style of [rough.js](https://roughjs.com)

* Sketchy fill also applied to progress boxes
* Better Accessibility on all components
* Refactored code to use TypeScript and latest [Lit Element](https://lit-element.polymer-project.org/)
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 Preet Shihn
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# wired-elements 👉 [wiredjs.com](https://wiredjs.com)
Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

## Try now
Play with wired-elements:
[Wired Elements](https://codesandbox.io/s/wired-elements-vanilla-4bpny)
#### Try it with a framework
[Wired Elements in React](https://codesandbox.io/s/xrll5wyl8w)
[Wired Elements in Vue](https://codesandbox.io/s/vj389y9375)
[Wired Elements in Svelte](https://codesandbox.io/s/wired-elements-svelte-4hfkb)
## Install
The package (wired-elements) exports all components in the **_wired_** category. List of all wired elements can be found [here](https://github.com/rough-stuff/wired-elements/tree/master/src).
Add wired-elements to your project:
```
npm i wired-elements
```
Or load the ES module directly through unpkg
```html
```
## Usage
Import into your module script:
```javascript
import { WiredButton, WiredInput } from "wired-elements"
```
or
```javascript
import { WiredButton } from 'wired-elements/lib/wired-button.js';
import { WiredInput } from 'wired-elements/lib/wired-input.js';
```
#### Use it in your HTML:
```html
Elevation: 1 Elevation: 3
Dialog content here
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/rough/contribute)]
## License
[MIT License](https://github.com/rough-stuff/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)
================================================
FILE: docs/wired-button.md
================================================
# wired-button
Hand-drawn sketchy Button web component.
For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/)
## Usage
Add wired-elements to your JavaScript project:
```
npm i wired-elements
```
Import module in your code:
```javascript
import { WiredButton } from 'wired-elements';
// or
import { WiredButton } from 'wired-elements/lib/wired-button.js';
```
Or load directly into your HTML page:
```html
```
Use it in your HTML:
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
``` ## Properties **elevation** - Number between 1 and 5 (inclusive) represents number of lines drawn. Default value is 1. ## License [MIT License](https://github.com/rough-stuff/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster) ================================================ FILE: docs/wired-fab.md ================================================ # wired-fab Hand-drawn sketchy Floating Action Button (FAB) For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/) ## Usage AAdd wired-elements to your JavaScript project: ``` npm i wired-elements ``` Import module in your code: ```javascript import { WiredFab } from 'wired-elements'; // or import { WiredFab } from 'wired-elements/lib/wired-fab.js'; ``` Or load directly into your HTML page: ```html ``` Use it in your HTML: ```htmlLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.