elex/js-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-02-26 01:30

Browse Source
This commit is contained in:
Elex
2023-02-26 01:30:37 +09:00
commit 9a13ccbd17
122 changed files with 32148 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
lit-element-starter-ts/docs/.nojekyll Normal file
View File

139
lit-element-starter-ts/docs/api/index.html Normal file
View File

@@ -0,0 +1,139 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Docs</title>
<link rel="stylesheet" href="../docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="../prism-okaidia.css" rel="stylesheet" />
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="../my-element.bundled.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="">API</a>
<a href="../install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>API</h1>
<h2>&lt;my-element></h2>
<div>
An example element.
</div>
<h3>Attributes</h3>
<table>
<tr>
<th>Name</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Properties</h3>
<table>
<tr>
<th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
<tr>
<td>renderRoot</td><td>undefined</td><td>Node or ShadowRoot into which element DOM should be rendered. Defaults
to an open shadowRoot.</td><td>HTMLElement | ShadowRoot</td><td>undefined</td>
</tr>
<tr>
<td>isUpdatePending</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
</tr>
<tr>
<td>hasUpdated</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
</tr>
<tr>
<td>updateComplete</td><td>undefined</td><td>Returns a Promise that resolves when the element has completed updating.
The Promise value is a boolean that is `true` if the element completed the
update without triggering another update. The Promise result is `false` if
a property was set inside `updated()`. If the Promise is rejected, an
exception was thrown during the update.
To await additional asynchronous work, override the `getUpdateComplete`
method. For example, it is sometimes useful to await a rendered element
before fulfilling this Promise. To do this, first await
`super.getUpdateComplete()`, then any subsequent state.</td><td>Promise<boolean></td><td>undefined</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td></td><td>This element has a slot</td>
</tr>
</table>
<h3>CSS Shadow Parts</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>button</td><td>The button</td>
</tr>
</table>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>

162
lit-element-starter-ts/docs/docs.css Normal file
View File

@@ -0,0 +1,162 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #333;
font-family: 'Open Sans', arial, sans-serif;
min-width: min-content;
min-height: 100vh;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: stretch;
}
#main-wrapper {
flex-grow: 1;
}
main {
max-width: 1024px;
margin: 0 auto;
}
a:visited {
color: inherit;
}
header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 360px;
margin: 0;
background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
color: white;
}
footer {
width: 100%;
min-height: 120px;
background: gray;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px;
margin-top: 64px;
}
h1 {
font-size: 2.5em;
font-weight: 400;
}
h2 {
font-size: 1.6em;
font-weight: 300;
margin: 64px 0 12px;
}
h3 {
font-weight: 300;
}
header h1 {
width: auto;
font-size: 2.8em;
margin: 0;
}
header h2 {
width: auto;
margin: 0;
}
nav {
display: grid;
width: 100%;
max-width: 100%;
grid-template-columns: repeat(auto-fit, 240px);
justify-content: center;
border-bottom: 1px solid #efefef;
}
nav > a {
color: #444;
display: block;
flex: 1;
font-size: 18px;
padding: 20px 0;
text-align: center;
text-decoration: none;
}
nav > a:hover {
text-decoration: underline;
}
nav.collection {
border: none;
}
nav.collection > ul {
padding: 0;
list-style: none;
}
nav.collection > ul > li {
padding: 4px 0;
}
nav.collection > ul > li.selected {
font-weight: 600;
}
nav.collection a {
text-decoration: none;
}
nav.collection a:hover {
text-decoration: underline;
}
section.columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
grid-gap: 48px;
justify-content: center;
}
section.columns > div {
flex: 1;
}
section.examples {
display: grid;
grid-template-columns: 240px minmax(400px, 784px);
grid-gap: 48px;
justify-content: center;
}
section.examples h2:first-of-type {
margin-top: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
font-weight: 600;
}
td, th {
border: solid 1px #aaa;
padding: 4px;
text-align: left;
}

75
lit-element-starter-ts/docs/examples/index.html Normal file
View File

@@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="../docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="../prism-okaidia.css" rel="stylesheet" />
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="../my-element.bundled.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="../">Home</a>
<a href="">Examples</a>
<a href="../api/">API</a>
<a href="../install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Example: Basic</h1>
<section class="examples">
<nav class="collection">
<ul>
<li class=>
<a href="name-property/">Setting the name property</a>
</li>
<li class=selected>
<a href="">A basic example</a>
</li>
</ul>
</nav>
<div>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>

65
lit-element-starter-ts/docs/examples/name-property/index.html Normal file
View File

@@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Name Property</title>
<link rel="stylesheet" href="../../docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="../../prism-okaidia.css" rel="stylesheet" />
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="../../my-element.bundled.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="../../">Home</a>
<a href="../">Examples</a>
<a href="../../api/">API</a>
<a href="../../install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Example: Name Property</h1>
<section class="examples">
<nav class="collection">
<ul>
<li class=selected>
<a href="">Setting the name property</a>
</li>
<li class=>
<a href="../">A basic example</a>
</li>
</ul>
</nav>
<div>
<p><my-element name="Earth"></my-element></p>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>

75
lit-element-starter-ts/docs/index.html Normal file
View File

@@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Home</title>
<link rel="stylesheet" href="docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="prism-okaidia.css" rel="stylesheet" />
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="my-element.bundled.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="">Home</a>
<a href="examples/">Examples</a>
<a href="api/">API</a>
<a href="install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>&lt;my-element&gt;</h1>
<p><code>&lt;my-element&gt;</code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
<h2>As easy as HTML</h2>
<section class="columns">
<div>
<p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
</div>
<div>
<p><my-element></my-element></p>
</div>
</section>
<h2>Configure with attributes</h2>
<section class="columns">
<div>
<p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
</div>
<div>
<p><my-element name="HTML"></my-element></p>
</div>
</section>
<h2>Declarative rendering</h2>
<section class="columns">
<div>
<p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><br> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br> &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2><br> &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element><br> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br> document<span class="token punctuation">.</span>body<br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</div>
<div>
<h2>This is a &lt;my-element&gt;</h2>
<my-element name="lit-html"></my-element>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>

53
lit-element-starter-ts/docs/install/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Install</title>
<link rel="stylesheet" href="../docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="../prism-okaidia.css" rel="stylesheet" />
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="../my-element.bundled.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="../api/">API</a>
<a href="">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Install</h1>
<p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
<h2>Local Installation</h2>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i my-element</code></pre>
<h2>CDN</h2>
<p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
<p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite &quot;bare&quot; module specificers to full URLs.</p>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<h3>JavaScript</h3>
<pre class="language-html"><code class="language-html">import {MyElement} from 'https://unpkg.com/my-element?module';</code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>

52
lit-element-starter-ts/docs/my-element.bundled.js Normal file
View File

File diff suppressed because one or more lines are too long

123
lit-element-starter-ts/docs/prism-okaidia.css Normal file
View File

@@ -0,0 +1,123 @@
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8292a2;
}
.token.punctuation {
color: #f8f8f2;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}