rough-stuff / wired-elements Goto Github PK

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.

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

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

Well, I know, but still… :p

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

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.

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

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?

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 =)

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);
}

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

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

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/

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

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?

It seems that every wired element I tested has a focus ring. It goes away when I add outline: none;. Is this a problem or is it intended?

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

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!

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.

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.

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! 😄

window.ShadyCSS.prepareTemplateDom is not a function

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

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

<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>

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

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-***" ?

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).

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

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?

when i use it in chrome 67.0.3396.62, it report error from console that " Relative references must start with either "/", "./", or "../". "
my web server is tomcat
i hope u can fixed all "import" Sentence

Hello idk if this is the right place, but how to use this ? :S I'm pretty confused I thought it was as simple as the readme x))

Thanks and have a nice day

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

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

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

Failed to modify the code from this file

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

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

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.

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

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>

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

The same component works fine in chrome

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

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

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

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?

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.

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!

These are needed on almost every project.

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