rough-stuff / wired-elements Goto Github PK

View Code? Open in Web Editor NEW

9.7K 129.0 317.0 1.87 MB

Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

Home Page: https://wiredjs.com

License: MIT License

TypeScript 94.74% JavaScript 1.32% HTML 3.94%

webcomponents lit-element wireframes wireframe web-components lit-html prototyping

wired-elements's Introduction

wired-elements 👉 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

Try it with a framework

Wired Elements in React

Wired Elements in Vue

Wired Elements in Svelte

Install

The package (wired-elements) exports all components in the wired category. List of all wired elements can be found here.

Add wired-elements to your project:

npm i wired-elements

Or load the ES module directly through unpkg

<script type="module" src="https://unpkg.com/wired-elements?module"></script>

Usage

Import into your module script:

import { WiredButton, WiredInput } from "wired-elements"

import { WiredButton } from 'wired-elements/lib/wired-button.js';
import { WiredInput } from 'wired-elements/lib/wired-input.js';

Use it in your HTML:

<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>

Learn about web components here.

Component API

To view details of each component - properties, events, css-properties, etc, are provided in the docs folder.

Demo

Demo of all components is available at wiredjs.com.

Credits

wired-elements was built using RoughJS and Lit.

Contributors

Become a sponsor of the Rough suite of libraries

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT License (c) Preet Shihn

wired-elements's People

Contributors

Stargazers

Watchers

Forkers

cristianespinoza tomasolander kod3r cmpscabral hunainaslam jean shaunstanislauslau clorton neo4reo huydeerpets oxyo amorist fkky n89nanda wsry888 saldi henfee prinzpiuz mikedopp ferankliu adikewl ecanro koolhead17 wooodhead pan-j shuidong linecode ir-coder ninoninkovic xiacijie ekas nullnotfound umphp jdrew1303 cqgsm morristech ezhangle tngamemo jorgeaml gxbsst yulongge bigironball difraxion-github d-dorr tsoliangwu0130 xjmforweb kkkmmu ssffdry marufsiddiqui chikara-chan joncv davidrielo autotom muxuezi thwintersun honestant papajia roshanweb shamash2014 feluocheng naereen sunxiuguo hhy5277 atfd 8bitgamer umarmughal ashvin777 joeljvari raylouis zhengyange loki315zx kingsleylao rhodesman shiveshabhishek jooooooop gaohongwei11 horaceluo firefoxxy8 dbugshe2 co0kie abbas-farahani gitmurali ssthouse tonyle9 5-digits rachmadideni abelce zivwang awesome-javascript lienviws david88chambers shinhwe whiteorz wxmfront tussion brondanidevelop pedrohm guaje7villa cristijora yunjincangqiong

wired-elements's Issues

wired-card doesn't respect max-width

I have some wired-card elements inside a CSS grid. They are not respecting the width of the columns they are inside of.

wired-card {
    max-width: 100%;
}

The grid code is:

.card-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
}

No sketch displayed

On Chrome, Opera & Safari. It loads up with no sketch displayed, only when I started clicking the item.

https://codepen.io/binhbbbb/pen/MENdqK?editors=1000

responsive resizing on card?

When I resize my page, the card doesn't resize dynamically. Can I trigger it somehow?

	<body>
		<main>
			<wired-card elevation="2">Here's my content</wired-card>
		</main>
	</body>

and some css to show responsiveness

	body,html { height:100vh;}
	body{display:flex;}
	main{flex:1;position:relative}
	wired-card{position:absolute;top:10px;left:10px;width:calc(100%-20px);height:calc(100%-20px)}

I didn't see any particular handlers for observing or responding to resize events on these components - perhaps I'm missing something?

how to support the table elements

an interesting UI framework, I want to know how to support a table elements in my web page, I'm not good at HTML/CSS/JS and can't find any introduce to a table emement.

Feature request: add a variable font that mimics handwriting

I couldn't find any, but perhaps someone is working on this. It would give an extra level of randomness/uniqueness to the mockups.

Production Build Error

Failed to modify the code from this file

./node_modules/@polymer/lit-element/lit-elelment.js:12

in Firefox - Error: customElements is not defined

Firefox Quantum 60.0.1 (64-bits)

[...]
Error in 0.5.2/wired-button.js (86:1)
customElements is not defined
[...]

Apart from that: Nice project =)

New control: Navigation sidebar

I think a navigation sidebard, with a tree view option would be nice control to have. I don't know if this is appropriate for a self-contained control, but I sure wish it was because I always seem to spend time on these in the past.

New control: Toast

Again, need this on almost every project. If these are not in scope, just close it.

See reference: https://materializecss.com/toasts.html

can't get value from wired-input work with v-model

something wrong when it work with Vue
I can't get value when I uesd v-model combine wired-input
but if I use input I can get the value from input

<template>
<wired-input placeholder="Hero name" type="text" v-model="name"></wired-input>
<wired-button @click="print">Click Me</wired-button>
</template>

<script>
import { WiredButton, WiredInput } from "wired-elements";
export default{
data(){
return {
name:''
}
}


methods:{
print(){
alert(this.score);
}
}
</script>

wired-slider cut off in Chrome

Tested in Firefox/Safari/Chrome on Mac and could only see it in Chrome (67.0.3396.87).

Slider circle seems to be cut in half randomly at its left-most position. Doesn't seem to happen at its right-most position.

New control: Search input control

I'm always in need of search input control, with either the button next to it or the magnifying glass inside the input.

wired-card calls non-existing this._requestRender()

<wired-card> calls this._requestRender() when the slotchange event is fired. However, that method does not exist on the elemnt.

https://github.com/wiredjs/wired-elements/blob/da4f150c04a336df41e228b794f14663f54b6d6f/packages/wired-card/wired-card.js#L55

<wired-card> depends on Lit Element ^0.5.1. I've checked the source code of Lit Element, and it looks like they renamed it to this.requestRender():

https://github.com/Polymer/lit-element/blob/fb90e7640777cab01c9eac2006cde558c34b041d/src/lit-element.ts#L261

(I did a quick search and noticed a few more places that call _requestRender().

I was using <wired-card> by importing it form unpkg:

<script type='module' src='https://unpkg.com/[email protected]/wired-card.js?module'></script>

New element: circular button (with icon?)

Request for Paginated table

The element looks great for web project. Mine isn't an issue is more of a request for a paginated Table.

Suggestion: make button backgrounds look "colored in"🖌

It'd be cool if there were an option for wired-button and similar elements with solid background colors to render the background as an svg path that looks like a thick pen/brush stroke, rather than a solid rectangle. I think this would help it feel a lot "sketchier."

Thanks for making these awesome components! 😄

Anyone aware of a similar library/fork that uses React SFC's and doesn't use webcomponents?

Firstly - I love love love this library and have already pulled it into be part of our key work flow with clients.

However I also love React SFC's and would love it if i could use a wired-elements sfc library.

If I had the time I would consider making a fork honorary this library as the root and mirror improvements into it.

Is anyone aware of someone that is already doing this?

Crashes react SSR

Wired Elements accesses window object which makes it unsuitable with server-side rendering, which just crash.

Well, I know, but still… :p

New control: Date/Time dropdown

This is the critical control and almost always needed. It's a date control, and usually has a dropdown calendar to pick a date or date range (most of the time just a signle date).

New control: Range silder

Instead of a signle point slider, a range slider with two points is sometimes a nice option.

See this: https://materializecss.com/range.html

wired-slider drag issue on firefox

Firefox version 60.0.1 (64-bit)
Slider drag feature presents a buggy behavior:

The same component works fine in chrome

New control: Calendar

I don't know if controls like this are in scope, but is also a nice to have control.

New Element: Menus

New element: Spinner

How to make it compatible with Firefox browser

window.ShadyCSS.prepareTemplateDom is not a function

Disabled select can be opened

I was on the showcase (https://wiredjs.com/showcase.html) in the wired-combo section and I noticed that the disabled element can be opened if you click on its small triangle. It seems like a bug to me.

Just wanted to let you know
Really nice work btw

CodePen friendly packages would be great

Just like LitElement's official demo at CodePen, it would be great to try it out out of the box, this great wired-elements, without downloading packages, setting up local development environments, etc..

LitElements provides its built assets within its repository so I can just use them from CodePen with unpkg.com CDN.

it would be great if wired-elements also provides the same way :D

why no support vue.js

I really want to use the wired.js component in the vue.js project. Can I support it?

Error: customElements is not defined

when I type this to import WiredCard:
import { WiredCard } from "wired-card";
there are a error in FF:
ReferenceError: customElements is not defined
but totally normal operation in chrome.

I am sure the error is caused by wired-js:
customElements.define('wired-card', WiredCard);

what can I do to solve it?thanks!

Accessibility for components

Would a PR be accepted that added accessible outlines, tab navigation and screen readability to these components?

Please quit helping others hack me

Adopt monorepo structure

The current setup is each component has its own standalone package.
We should think about adopting monorepo structure where we would have to maintain only one repo. This makes maintenance and debugging better and easier.

I would love to contribute adopting monorepo or yarn workspaces for the project.

wired-input with v-model

I might be making a newbie mistake but when I try to use wired-input connected with v-model in vuejs the model isn't updating.

https://jsfiddle.net/flacito/x9bta40r/23/

How to resize buttons

After using the wired-button, I realized the button width and height is a fixed path.
How can I change the width of the button?

Support Typescript + React

This doesn't appear to work in a Typescript project using React. If I use the lower case <wired-button>, Typescript gives the error, Property 'wired-button' does not exist on type 'JSX.IntrinsicElements'. If I use <WiredButton> as if it were a React component, I get a runtime error, TypeError: Class constructor WiredButton cannot be invoked without 'new'. Is there any way to fix one/both of these errors, or modify the library so it can be used in Typescript + React projects?

Not working on IE11

Is this due to lit-html not supporting IE11 in some edge cases?

New control: Header Navigation bar

I think a navigation header, with a few dropdowns on the right and something on the left, with the option to colapse into a menu dropdown as you see on mobile, would be nice control to have.

Again, I don't know if this is appropriate for a self-contained control, but I sure wish it was because I always seem to spend time on these in the past.

New control: Preloader

You have a progress bar, but this is a preloader and shows of course something is happening...

Reference: https://materializecss.com/preloader.html

New Control - Tabs

New controls: bar/line/circle/pie chart

I don't know if charting is on the table or not, but these charting controls are useful.

Using with React

I tried importing a wired element but React throws an error:

NotSupportedError
Failed to construct 'CustomElement': The result must not have attributes

https://codesandbox.io/s/pp4q7kw9q7

Do I need to do something else to make it compatible with react? thanks!

New control: file picker

Again, don't know if this kinda thing is in scope, but I'm almost always building a control that allows one to pick a file or files from the desktop or a URL.

Changing to wired breaks Joomla

I am using this in a custom Joomla template but changing "input" to "wired-input" breaks Joomla form. Joomla expects < input >. Is there a way I can achieve the wired effect by using a css class instead of changing them to "wired-***" ?

in Firefox: TypeError: Error resolving module specifier: @polymer/lit-element/lit-element.js

I am trying to use the wired-checkbox-Element, but ran into a few problems. Would love to use those, because I think wired-elements look pretty neat :)

1. Version -> TypeError

Installed with npm i wired-checkbox and copied the tag. Btw, I think it would be nicer if the path would include the node-modules directory, so you don't have work it out yourself ...

The HTML looks like this:

<html` lang="en">
<head>
  <meta charset="UTF-8">
  <script type="module" src="node_modules/wired-checkbox/wired-checkbox.js"></script>
</head>
<body>
  <wired-checkbox text="Checkbox One"></wired-checkbox>
</body>
</html>

When I open it up in the Browser the console logs TypeError: Error resolving module specifier: @polymer/lit-element/lit-element.js

2. Version -> ReferenceError

I looked for known Issues and stumbled upon this one.
After copying <script type="module" src="https://unpkg.com/wired-button@latest/wired-button.js?module"></script> from the jsfiddle sample (which works) and changing it to be wired-checkbox it throws Reference Error: customElements is not defined

New control: Modals

These are needed on almost every project.

See for reference: https://materializecss.com/modals.html

playground error

https://stackblitz.com/edit/wired-elements?file=index.html

Error in 0.6.0/wired-button.js (86:1)
customElements is not defined
Evaluating https://unpkg.com/[email protected]/wired-button.js
Evaluating https://unpkg.com/[email protected]/wired-elements.js
Evaluating index.js
Booting application

rough-stuff / wired-elements Goto Github PK

wired-elements's Introduction

wired-elements 👉 wiredjs.com

Try now

Try it with a framework

Install

Usage

Use it in your HTML:

Component API

Demo

Credits

Contributors

Financial Contributors

Individuals

Organizations

License

wired-elements's People

Contributors

Stargazers

Watchers

Forkers

wired-elements's Issues

1. Version -> TypeError

2. Version -> ReferenceError

Recommend Projects

Recommend Topics

Recommend Org