proto-daisy-ui 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +10 -0
- package/dist/cjs/dealers-a8306eb8.js +15 -0
- package/dist/cjs/index-b1631310.js +1219 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/loader.cjs.js +21 -0
- package/dist/cjs/proto-button-d349703f.js +9 -0
- package/dist/cjs/proto-daisy-ui.cjs.entry.js +25 -0
- package/dist/cjs/proto-daisy-ui.cjs.js +19 -0
- package/dist/cjs/proto-demo.cjs.entry.js +20 -0
- package/dist/cjs/proto-hero.cjs.entry.js +21 -0
- package/dist/cjs/proto-home.cjs.entry.js +24 -0
- package/dist/cjs/proto-list.cjs.entry.js +58 -0
- package/dist/cjs/proto-shell.cjs.entry.js +120 -0
- package/dist/cjs/store-74bb495b.js +332 -0
- package/dist/collection/collection-manifest.json +17 -0
- package/dist/collection/components/functional/index.js +1 -0
- package/dist/collection/components/functional/proto-button.js +6 -0
- package/dist/collection/components/proto-daisy-ui/proto-daisy-ui.css +2023 -0
- package/dist/collection/components/proto-daisy-ui/proto-daisy-ui.js +20 -0
- package/dist/collection/components/proto-demo/proto-demo.css +0 -0
- package/dist/collection/components/proto-demo/proto-demo.js +14 -0
- package/dist/collection/components/proto-hero/proto-hero.css +3 -0
- package/dist/collection/components/proto-hero/proto-hero.js +43 -0
- package/dist/collection/components/proto-home/proto-home.css +0 -0
- package/dist/collection/components/proto-home/proto-home.js +26 -0
- package/dist/collection/components/proto-list/proto-list.css +0 -0
- package/dist/collection/components/proto-list/proto-list.js +64 -0
- package/dist/collection/components/proto-shell/proto-footer.js +20 -0
- package/dist/collection/components/proto-shell/proto-header.js +81 -0
- package/dist/collection/components/proto-shell/proto-shell.css +3 -0
- package/dist/collection/components/proto-shell/proto-shell.js +47 -0
- package/dist/collection/index.js +1 -0
- package/dist/collection/utils/bag.js +23 -0
- package/dist/collection/utils/dealers.js +13 -0
- package/dist/collection/utils/index.js +5 -0
- package/dist/collection/utils/store.js +115 -0
- package/dist/collection/utils/tw-version.js +4 -0
- package/dist/collection/utils/types.js +1 -0
- package/dist/components/dealers.js +13 -0
- package/dist/components/index.d.ts +27 -0
- package/dist/components/index.js +7 -0
- package/dist/components/proto-button.js +7 -0
- package/dist/components/proto-daisy-ui.d.ts +11 -0
- package/dist/components/proto-daisy-ui.js +39 -0
- package/dist/components/proto-demo.d.ts +11 -0
- package/dist/components/proto-demo.js +33 -0
- package/dist/components/proto-hero.d.ts +11 -0
- package/dist/components/proto-hero.js +36 -0
- package/dist/components/proto-home.d.ts +11 -0
- package/dist/components/proto-home.js +37 -0
- package/dist/components/proto-list.d.ts +11 -0
- package/dist/components/proto-list.js +71 -0
- package/dist/components/proto-shell.d.ts +11 -0
- package/dist/components/proto-shell.js +135 -0
- package/dist/components/store.js +329 -0
- package/dist/esm/dealers-752f9914.js +13 -0
- package/dist/esm/index-832d1e38.js +1192 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/loader.js +17 -0
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/css-shim.js +1 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/esm/proto-button-c929a8fb.js +7 -0
- package/dist/esm/proto-daisy-ui.entry.js +21 -0
- package/dist/esm/proto-daisy-ui.js +17 -0
- package/dist/esm/proto-demo.entry.js +16 -0
- package/dist/esm/proto-hero.entry.js +17 -0
- package/dist/esm/proto-home.entry.js +20 -0
- package/dist/esm/proto-list.entry.js +54 -0
- package/dist/esm/proto-shell.entry.js +116 -0
- package/dist/esm/store-6cbf6338.js +329 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/proto-daisy-ui/index.esm.js +0 -0
- package/dist/proto-daisy-ui/p-0cbc124a.js +1 -0
- package/dist/proto-daisy-ui/p-4c1c4093.entry.js +1 -0
- package/dist/proto-daisy-ui/p-78473e80.js +1 -0
- package/dist/proto-daisy-ui/p-82c6ae5e.entry.js +1 -0
- package/dist/proto-daisy-ui/p-98b063cb.js +1 -0
- package/dist/proto-daisy-ui/p-bba460f2.entry.js +1 -0
- package/dist/proto-daisy-ui/p-d7d5a047.entry.js +1 -0
- package/dist/proto-daisy-ui/p-e274e36c.entry.js +1 -0
- package/dist/proto-daisy-ui/p-eeb6284e.entry.js +1 -0
- package/dist/proto-daisy-ui/p-f445bcf9.js +2 -0
- package/dist/proto-daisy-ui/proto-daisy-ui.esm.js +1 -0
- package/dist/types/components/functional/index.d.ts +1 -0
- package/dist/types/components/functional/proto-button.d.ts +4 -0
- package/dist/types/components/proto-daisy-ui/proto-daisy-ui.d.ts +4 -0
- package/dist/types/components/proto-demo/proto-demo.d.ts +3 -0
- package/dist/types/components/proto-hero/proto-hero.d.ts +4 -0
- package/dist/types/components/proto-home/proto-home.d.ts +3 -0
- package/dist/types/components/proto-list/proto-list.d.ts +3 -0
- package/dist/types/components/proto-shell/proto-footer.d.ts +4 -0
- package/dist/types/components/proto-shell/proto-header.d.ts +4 -0
- package/dist/types/components/proto-shell/proto-shell.d.ts +4 -0
- package/dist/types/components.d.ts +106 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/stencil-public-runtime.d.ts +1565 -0
- package/dist/types/utils/bag.d.ts +10 -0
- package/dist/types/utils/dealers.d.ts +6 -0
- package/dist/types/utils/index.d.ts +5 -0
- package/dist/types/utils/store.d.ts +12 -0
- package/dist/types/utils/tw-version.d.ts +3 -0
- package/dist/types/utils/types.d.ts +8 -0
- package/loader/cdn.js +3 -0
- package/loader/index.cjs.js +3 -0
- package/loader/index.d.ts +12 -0
- package/loader/index.es2017.js +3 -0
- package/loader/index.js +4 -0
- package/loader/package.json +10 -0
- package/package.json +53 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Component, h } from '@stencil/core';
|
|
2
|
+
import { actions, state } from '../../utils';
|
|
3
|
+
export class ProtoDaisyUi {
|
|
4
|
+
componentDidLoad() {
|
|
5
|
+
actions.initApp();
|
|
6
|
+
}
|
|
7
|
+
render() {
|
|
8
|
+
const { login, theme } = state;
|
|
9
|
+
const TAG = login ? 'proto-hero' : 'proto-shell';
|
|
10
|
+
return h(TAG, { theme: theme });
|
|
11
|
+
}
|
|
12
|
+
static get is() { return "proto-daisy-ui"; }
|
|
13
|
+
static get encapsulation() { return "shadow"; }
|
|
14
|
+
static get originalStyleUrls() { return {
|
|
15
|
+
"$": ["proto-daisy-ui.css"]
|
|
16
|
+
}; }
|
|
17
|
+
static get styleUrls() { return {
|
|
18
|
+
"$": ["proto-daisy-ui.css"]
|
|
19
|
+
}; }
|
|
20
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Component, h } from '@stencil/core';
|
|
2
|
+
import { ProtoButton } from '../functional';
|
|
3
|
+
export class ProtoDemo {
|
|
4
|
+
render() {
|
|
5
|
+
return h(ProtoButton, null, "Foobar");
|
|
6
|
+
}
|
|
7
|
+
static get is() { return "proto-demo"; }
|
|
8
|
+
static get originalStyleUrls() { return {
|
|
9
|
+
"$": ["proto-demo.css"]
|
|
10
|
+
}; }
|
|
11
|
+
static get styleUrls() { return {
|
|
12
|
+
"$": ["proto-demo.css"]
|
|
13
|
+
}; }
|
|
14
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Component, h, Prop } from '@stencil/core';
|
|
2
|
+
import { actions } from '../../utils';
|
|
3
|
+
export class ProtoHero {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.theme = 'light';
|
|
6
|
+
}
|
|
7
|
+
render() {
|
|
8
|
+
return (h("div", { class: "flex min-h-screen flex-col bg-clrs-slate font-sans", "data-theme": this.theme },
|
|
9
|
+
h("div", { class: "hero min-h-screen bg-base-200" },
|
|
10
|
+
h("div", { class: "hero-content text-center" },
|
|
11
|
+
h("div", { class: "max-w-md" },
|
|
12
|
+
h("h1", { class: "text-5xl font-bold" }, "Hello there"),
|
|
13
|
+
h("p", { class: "py-6" }, "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi."),
|
|
14
|
+
h("button", { class: "btn btn-primary", onClick: () => actions.updateApp('proto-home') }, "Get Started"))))));
|
|
15
|
+
}
|
|
16
|
+
static get is() { return "proto-hero"; }
|
|
17
|
+
static get originalStyleUrls() { return {
|
|
18
|
+
"$": ["proto-hero.css"]
|
|
19
|
+
}; }
|
|
20
|
+
static get styleUrls() { return {
|
|
21
|
+
"$": ["proto-hero.css"]
|
|
22
|
+
}; }
|
|
23
|
+
static get properties() { return {
|
|
24
|
+
"theme": {
|
|
25
|
+
"type": "string",
|
|
26
|
+
"mutable": false,
|
|
27
|
+
"complexType": {
|
|
28
|
+
"original": "string",
|
|
29
|
+
"resolved": "string",
|
|
30
|
+
"references": {}
|
|
31
|
+
},
|
|
32
|
+
"required": false,
|
|
33
|
+
"optional": false,
|
|
34
|
+
"docs": {
|
|
35
|
+
"tags": [],
|
|
36
|
+
"text": ""
|
|
37
|
+
},
|
|
38
|
+
"attribute": "theme",
|
|
39
|
+
"reflect": false,
|
|
40
|
+
"defaultValue": "'light'"
|
|
41
|
+
}
|
|
42
|
+
}; }
|
|
43
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Component, h } from '@stencil/core';
|
|
2
|
+
import { ProtoButton } from '../functional';
|
|
3
|
+
import { dealers, state } from '../../utils';
|
|
4
|
+
export class ProtoHome {
|
|
5
|
+
render() {
|
|
6
|
+
const { pick } = state;
|
|
7
|
+
const dealer = dealers[pick];
|
|
8
|
+
return (h("div", { class: "mr-8 flex flex-col flex-nowrap items-start gap-2" },
|
|
9
|
+
h("div", { class: "alert alert-info shadow-lg" },
|
|
10
|
+
h("div", null,
|
|
11
|
+
h("svg", { fill: "none", viewBox: "0 0 24 24", class: "h-6 w-6 flex-shrink-0 stroke-current" },
|
|
12
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })),
|
|
13
|
+
h("span", null,
|
|
14
|
+
"Welcome... [ ",
|
|
15
|
+
dealer.name,
|
|
16
|
+
" ]"))),
|
|
17
|
+
h(ProtoButton, null, "Home")));
|
|
18
|
+
}
|
|
19
|
+
static get is() { return "proto-home"; }
|
|
20
|
+
static get originalStyleUrls() { return {
|
|
21
|
+
"$": ["proto-home.css"]
|
|
22
|
+
}; }
|
|
23
|
+
static get styleUrls() { return {
|
|
24
|
+
"$": ["proto-home.css"]
|
|
25
|
+
}; }
|
|
26
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Component, h } from '@stencil/core';
|
|
2
|
+
const keys = [
|
|
3
|
+
{
|
|
4
|
+
label: 'Name',
|
|
5
|
+
prop: 'name',
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: 'Job',
|
|
9
|
+
prop: 'job',
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: 'Favorite Color',
|
|
13
|
+
prop: 'color',
|
|
14
|
+
},
|
|
15
|
+
];
|
|
16
|
+
const data = [
|
|
17
|
+
{
|
|
18
|
+
name: 'Cy Ganderton',
|
|
19
|
+
job: 'Quality Control Specialist',
|
|
20
|
+
color: 'Blue',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: 'Hart Hagerty',
|
|
24
|
+
job: 'Desktop Support Technician',
|
|
25
|
+
color: 'Purple',
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: 'Brice Swyre',
|
|
29
|
+
job: 'Tax Accountant',
|
|
30
|
+
color: 'Red',
|
|
31
|
+
},
|
|
32
|
+
];
|
|
33
|
+
export class ProtoList {
|
|
34
|
+
render() {
|
|
35
|
+
return (h("div", { class: "overflow-x-auto" },
|
|
36
|
+
h("table", { class: "table-compact table w-full" },
|
|
37
|
+
h("thead", null,
|
|
38
|
+
h("tr", null,
|
|
39
|
+
h("th", null),
|
|
40
|
+
keys.map(({ label }) => {
|
|
41
|
+
return h("th", null, label);
|
|
42
|
+
}))),
|
|
43
|
+
h("tbody", null, data.map((obj, indx) => {
|
|
44
|
+
return (h("tr", { class: "hover" },
|
|
45
|
+
h("th", null, indx + 1),
|
|
46
|
+
keys.map(({ prop }) => {
|
|
47
|
+
return h("td", null, obj[prop]);
|
|
48
|
+
})));
|
|
49
|
+
})),
|
|
50
|
+
h("tfoot", null,
|
|
51
|
+
h("tr", null,
|
|
52
|
+
h("th", null),
|
|
53
|
+
keys.map(({ label }) => {
|
|
54
|
+
return h("th", null, label);
|
|
55
|
+
}))))));
|
|
56
|
+
}
|
|
57
|
+
static get is() { return "proto-list"; }
|
|
58
|
+
static get originalStyleUrls() { return {
|
|
59
|
+
"$": ["proto-list.css"]
|
|
60
|
+
}; }
|
|
61
|
+
static get styleUrls() { return {
|
|
62
|
+
"$": ["proto-list.css"]
|
|
63
|
+
}; }
|
|
64
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
const ProtoFooter = (_props, _children) => {
|
|
3
|
+
return (h("footer", { class: "footer w-auto items-center bg-neutral p-4 text-neutral-content" },
|
|
4
|
+
h("div", { class: "grid-flow-col items-center" },
|
|
5
|
+
h("svg", { width: "36", height: "36", viewBox: "0 0 24 24", "fill-rule": "evenodd", "clip-rule": "evenodd", class: "fill-current" },
|
|
6
|
+
h("path", { d: "M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z" })),
|
|
7
|
+
h("p", null, "Copyright \u00A9 2022 - All right reserved")),
|
|
8
|
+
h("div", { class: "grid-flow-col gap-4 md:place-self-center md:justify-self-end" },
|
|
9
|
+
h("a", null,
|
|
10
|
+
h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", class: "fill-current" },
|
|
11
|
+
h("path", { d: "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" }))),
|
|
12
|
+
h("a", null,
|
|
13
|
+
h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", class: "fill-current" },
|
|
14
|
+
h("path", { d: "M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" }))),
|
|
15
|
+
h("a", null,
|
|
16
|
+
h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", class: "fill-current" },
|
|
17
|
+
h("path", { d: "M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" }))))));
|
|
18
|
+
};
|
|
19
|
+
export { ProtoFooter };
|
|
20
|
+
export default ProtoFooter;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
import { actions, dealers, state } from '../../utils';
|
|
3
|
+
const clickHandler = (mfe = undefined) => {
|
|
4
|
+
return _event => {
|
|
5
|
+
console.log('-- mfe:', mfe);
|
|
6
|
+
actions.updateApp(mfe);
|
|
7
|
+
document.activeElement.blur();
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
const clickPick = (indx) => {
|
|
11
|
+
return _event => {
|
|
12
|
+
console.log('-- pick:', indx);
|
|
13
|
+
actions.updatePick(indx);
|
|
14
|
+
document.activeElement.blur();
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
const clickTheme = (theme) => {
|
|
18
|
+
return _event => {
|
|
19
|
+
console.log('-- theme:', theme);
|
|
20
|
+
actions.updateTheme(theme);
|
|
21
|
+
document.activeElement.blur();
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
const ProtoHeader = (_props, _children) => {
|
|
25
|
+
const { pick, themes } = state;
|
|
26
|
+
const dealer = dealers[pick];
|
|
27
|
+
return (h("div", { class: "navbar m-1 w-auto rounded-md bg-base-100" },
|
|
28
|
+
h("div", { class: "flex-none" },
|
|
29
|
+
h("div", { class: "dropdown" },
|
|
30
|
+
h("button", { class: "btn btn-ghost btn-square drawer-button" },
|
|
31
|
+
h("svg", { fill: "none", viewBox: "0 0 24 24", class: "inline-block h-5 w-5 stroke-current" },
|
|
32
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M4 6h16M4 12h16M4 18h16" }))),
|
|
33
|
+
h("ul", { class: "dropdown-content menu mt-1 rounded-md bg-accent p-2 text-accent-content" },
|
|
34
|
+
h("li", null,
|
|
35
|
+
h("button", { class: "btn-ghost", onClick: clickHandler('proto-home') },
|
|
36
|
+
h("svg", { class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
|
|
37
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" })))),
|
|
38
|
+
h("li", null,
|
|
39
|
+
h("button", { class: "btn-ghost", onClick: clickHandler('proto-demo') },
|
|
40
|
+
h("svg", { class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
|
|
41
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })))),
|
|
42
|
+
h("li", null,
|
|
43
|
+
h("button", { class: "btn-ghost", onClick: clickHandler('proto-list') },
|
|
44
|
+
h("svg", { class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
|
|
45
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }))))))),
|
|
46
|
+
h("div", { class: "flex-1" },
|
|
47
|
+
h("a", { class: "btn btn-ghost text-xl normal-case" }, "daisyUI")),
|
|
48
|
+
h("div", { class: "flex-none" },
|
|
49
|
+
h("div", { class: "dropdown dropdown-end" },
|
|
50
|
+
h("button", { class: "btn btn-ghost normal-case" }, dealer.name),
|
|
51
|
+
h("ul", { tabindex: "0", class: "dropdown-content menu menu-compact mt-1 w-52 rounded-md bg-secondary p-2 text-secondary-content shadow " }, dealers.map((obj, indx) => {
|
|
52
|
+
const active = indx === pick ? 'active' : undefined;
|
|
53
|
+
return (h("li", null,
|
|
54
|
+
h("a", { class: active, onClick: clickPick(indx) }, obj.name)));
|
|
55
|
+
})))),
|
|
56
|
+
h("div", { class: "divider divider-horizontal flex-none" }),
|
|
57
|
+
h("div", { class: "flex-none" },
|
|
58
|
+
h("div", { class: "dropdown dropdown-end" },
|
|
59
|
+
h("button", { class: "btn btn-ghost normal-case" }, state.theme),
|
|
60
|
+
h("ul", { tabindex: "0", class: "dropdown-content menu menu-compact mt-1 w-52 rounded-md bg-secondary p-2 text-secondary-content shadow " }, themes.map(theme => {
|
|
61
|
+
const active = theme === state.theme ? 'active' : undefined;
|
|
62
|
+
return (h("li", null,
|
|
63
|
+
h("a", { class: active, onClick: clickTheme(theme) }, theme)));
|
|
64
|
+
})))),
|
|
65
|
+
h("div", { class: "flex-none" },
|
|
66
|
+
h("div", { class: "dropdown dropdown-end" },
|
|
67
|
+
h("button", { class: "btn btn-ghost btn-square" },
|
|
68
|
+
h("svg", { fill: "none", viewBox: "0 0 24 24", class: "inline-block h-5 w-5 stroke-current" },
|
|
69
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" }))),
|
|
70
|
+
h("ul", { tabindex: "0", class: "dropdown-content menu menu-compact mt-1 w-52 rounded-md bg-secondary p-2 text-secondary-content shadow " },
|
|
71
|
+
h("li", null,
|
|
72
|
+
h("a", { class: "justify-between" },
|
|
73
|
+
"Profile",
|
|
74
|
+
h("span", { class: "badge" }, "New"))),
|
|
75
|
+
h("li", null,
|
|
76
|
+
h("a", null, "Settings...")),
|
|
77
|
+
h("li", null,
|
|
78
|
+
h("a", { onClick: clickHandler() }, "Logout")))))));
|
|
79
|
+
};
|
|
80
|
+
export { ProtoHeader };
|
|
81
|
+
export default ProtoHeader;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Component, h, Prop } from '@stencil/core';
|
|
2
|
+
import { ProtoHeader } from './proto-header';
|
|
3
|
+
import { ProtoFooter } from './proto-footer';
|
|
4
|
+
import { state } from '../../utils';
|
|
5
|
+
export class ProtoShell {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.theme = 'light';
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
const TAG = state.mfe;
|
|
11
|
+
console.log('-- render:', TAG);
|
|
12
|
+
return (h("div", { class: "flex min-h-screen flex-col font-sans", "data-theme": this.theme },
|
|
13
|
+
h(ProtoHeader, null),
|
|
14
|
+
h("div", { class: "flex-auto p-4 pt-0" },
|
|
15
|
+
h("div", { class: "divider mt-0" }),
|
|
16
|
+
h("div", null,
|
|
17
|
+
h(TAG, null))),
|
|
18
|
+
h(ProtoFooter, null)));
|
|
19
|
+
}
|
|
20
|
+
static get is() { return "proto-shell"; }
|
|
21
|
+
static get originalStyleUrls() { return {
|
|
22
|
+
"$": ["proto-shell.css"]
|
|
23
|
+
}; }
|
|
24
|
+
static get styleUrls() { return {
|
|
25
|
+
"$": ["proto-shell.css"]
|
|
26
|
+
}; }
|
|
27
|
+
static get properties() { return {
|
|
28
|
+
"theme": {
|
|
29
|
+
"type": "string",
|
|
30
|
+
"mutable": false,
|
|
31
|
+
"complexType": {
|
|
32
|
+
"original": "string",
|
|
33
|
+
"resolved": "string",
|
|
34
|
+
"references": {}
|
|
35
|
+
},
|
|
36
|
+
"required": false,
|
|
37
|
+
"optional": false,
|
|
38
|
+
"docs": {
|
|
39
|
+
"tags": [],
|
|
40
|
+
"text": ""
|
|
41
|
+
},
|
|
42
|
+
"attribute": "theme",
|
|
43
|
+
"reflect": false,
|
|
44
|
+
"defaultValue": "'light'"
|
|
45
|
+
}
|
|
46
|
+
}; }
|
|
47
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const KEY = 'proto-daisy-ui';
|
|
2
|
+
const LOGIN = 'login';
|
|
3
|
+
const MFE = 'mfe';
|
|
4
|
+
const PICK = 'pick';
|
|
5
|
+
const THEME = 'theme';
|
|
6
|
+
// Examples:
|
|
7
|
+
// get(MFE)
|
|
8
|
+
// get(PICK)
|
|
9
|
+
//
|
|
10
|
+
const bag = {
|
|
11
|
+
get: (tag) => {
|
|
12
|
+
const key = tag ? `${KEY}-${tag}` : KEY;
|
|
13
|
+
const json = localStorage.getItem(key);
|
|
14
|
+
return json ? JSON.parse(json) : undefined;
|
|
15
|
+
},
|
|
16
|
+
store: (tag, value) => {
|
|
17
|
+
const key = tag ? `${KEY}-${tag}` : KEY;
|
|
18
|
+
const json = JSON.stringify(value === undefined ? null : value);
|
|
19
|
+
localStorage.setItem(key, json);
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
export { bag, LOGIN, MFE, PICK, THEME };
|
|
23
|
+
export default bag;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const dealers = [
|
|
2
|
+
{ id: 'brookhaven', name: 'Brookhaven' },
|
|
3
|
+
{ id: 'buckhead', name: 'Buckhead' },
|
|
4
|
+
{ id: 'dawsonville', name: 'Dawsonville' },
|
|
5
|
+
{ id: 'decatur', name: 'Decatur' },
|
|
6
|
+
{ id: 'kennesaw', name: 'Kennesaw' },
|
|
7
|
+
{ id: 'marietta', name: 'Marietta' },
|
|
8
|
+
{ id: 'peachtree', name: 'Peachtree' },
|
|
9
|
+
{ id: 'perimeter', name: 'Perimeter' },
|
|
10
|
+
{ id: 'stoneMountain', name: 'Stone Mountain' },
|
|
11
|
+
];
|
|
12
|
+
export { dealers };
|
|
13
|
+
export default dealers;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { createStore } from '@stencil/store';
|
|
2
|
+
import mitt from 'mitt';
|
|
3
|
+
import { bag, LOGIN, MFE, PICK, THEME } from './bag';
|
|
4
|
+
const themes = [
|
|
5
|
+
'light',
|
|
6
|
+
'dark',
|
|
7
|
+
'aqua',
|
|
8
|
+
'business',
|
|
9
|
+
'corporate',
|
|
10
|
+
'fantasy',
|
|
11
|
+
'night',
|
|
12
|
+
'winter',
|
|
13
|
+
'wireframe',
|
|
14
|
+
];
|
|
15
|
+
// --------------------------------------------------------[ mutable store ]
|
|
16
|
+
const storeDef = {
|
|
17
|
+
login: true,
|
|
18
|
+
mfe: 'proto-home',
|
|
19
|
+
pick: 0,
|
|
20
|
+
theme: 'dark',
|
|
21
|
+
themes,
|
|
22
|
+
};
|
|
23
|
+
const { state } = createStore(storeDef);
|
|
24
|
+
const emitter = mitt();
|
|
25
|
+
// --------------------------------------------------------[ utility ]
|
|
26
|
+
const clearStore = (login = false) => {
|
|
27
|
+
state.login = login;
|
|
28
|
+
state.pick = 0;
|
|
29
|
+
state.mfe = 'proto-home';
|
|
30
|
+
state.theme = 'dark';
|
|
31
|
+
state.themes = themes;
|
|
32
|
+
};
|
|
33
|
+
// --------------------------------------------------------[ processing ]
|
|
34
|
+
const processApp = (next) => {
|
|
35
|
+
state.mfe = next;
|
|
36
|
+
if (next) {
|
|
37
|
+
bag.store(LOGIN, false);
|
|
38
|
+
state.login = false;
|
|
39
|
+
emitter.emit('app', { mfe: next });
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
bag.store(LOGIN, true);
|
|
43
|
+
state.login = true;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const processLogin = (next) => {
|
|
47
|
+
state.login = next;
|
|
48
|
+
if (next) {
|
|
49
|
+
emitter.emit('login', { login: next });
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const processPick = (next) => {
|
|
53
|
+
state.pick = next;
|
|
54
|
+
if (next) {
|
|
55
|
+
emitter.emit('pick', { pick: next });
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
const processTheme = (next) => {
|
|
59
|
+
state.theme = next;
|
|
60
|
+
console.log(next);
|
|
61
|
+
if (next) {
|
|
62
|
+
emitter.emit('theme', { theme: next });
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
// --------------------------------------------------------[ actions ]
|
|
66
|
+
const initApp = () => {
|
|
67
|
+
clearStore();
|
|
68
|
+
// this retrieves the last data we stored in the bag...
|
|
69
|
+
const login = bag.get(LOGIN);
|
|
70
|
+
const data = bag.get(MFE);
|
|
71
|
+
const pick = bag.get(PICK);
|
|
72
|
+
const theme = bag.get(THEME);
|
|
73
|
+
console.log('-- data:', data);
|
|
74
|
+
if (theme) {
|
|
75
|
+
processTheme(theme);
|
|
76
|
+
if (login !== undefined) {
|
|
77
|
+
processLogin(login);
|
|
78
|
+
}
|
|
79
|
+
if (login === false && data) {
|
|
80
|
+
console.log('-- app:', data);
|
|
81
|
+
processApp(data);
|
|
82
|
+
}
|
|
83
|
+
if (pick) {
|
|
84
|
+
processPick(pick);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
refresh();
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
const refresh = () => {
|
|
92
|
+
clearStore(true);
|
|
93
|
+
bag.store(PICK, 0);
|
|
94
|
+
};
|
|
95
|
+
const updateApp = (mfe) => {
|
|
96
|
+
bag.store(MFE, mfe);
|
|
97
|
+
processApp(mfe);
|
|
98
|
+
};
|
|
99
|
+
const updatePick = (pick) => {
|
|
100
|
+
bag.store(PICK, pick);
|
|
101
|
+
processPick(pick);
|
|
102
|
+
};
|
|
103
|
+
const updateTheme = (theme) => {
|
|
104
|
+
bag.store(THEME, theme);
|
|
105
|
+
processTheme(theme);
|
|
106
|
+
};
|
|
107
|
+
const actions = {
|
|
108
|
+
initApp,
|
|
109
|
+
refresh,
|
|
110
|
+
updateApp,
|
|
111
|
+
updatePick,
|
|
112
|
+
updateTheme,
|
|
113
|
+
};
|
|
114
|
+
export { state, actions, emitter };
|
|
115
|
+
export default state;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const dealers = [
|
|
2
|
+
{ id: 'brookhaven', name: 'Brookhaven' },
|
|
3
|
+
{ id: 'buckhead', name: 'Buckhead' },
|
|
4
|
+
{ id: 'dawsonville', name: 'Dawsonville' },
|
|
5
|
+
{ id: 'decatur', name: 'Decatur' },
|
|
6
|
+
{ id: 'kennesaw', name: 'Kennesaw' },
|
|
7
|
+
{ id: 'marietta', name: 'Marietta' },
|
|
8
|
+
{ id: 'peachtree', name: 'Peachtree' },
|
|
9
|
+
{ id: 'perimeter', name: 'Perimeter' },
|
|
10
|
+
{ id: 'stoneMountain', name: 'Stone Mountain' },
|
|
11
|
+
];
|
|
12
|
+
|
|
13
|
+
export { dealers as d };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* ProtoDaisyUi custom elements */
|
|
2
|
+
export { ProtoDaisyUi as ProtoDaisyUi } from '../types/components/proto-daisy-ui/proto-daisy-ui';
|
|
3
|
+
export { ProtoDemo as ProtoDemo } from '../types/components/proto-demo/proto-demo';
|
|
4
|
+
export { ProtoHero as ProtoHero } from '../types/components/proto-hero/proto-hero';
|
|
5
|
+
export { ProtoHome as ProtoHome } from '../types/components/proto-home/proto-home';
|
|
6
|
+
export { ProtoList as ProtoList } from '../types/components/proto-list/proto-list';
|
|
7
|
+
export { ProtoShell as ProtoShell } from '../types/components/proto-shell/proto-shell';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Used to manually set the base path where assets can be found.
|
|
11
|
+
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
12
|
+
* such as "setAssetPath(import.meta.url)". Other options include
|
|
13
|
+
* "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
|
|
14
|
+
* dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
|
|
15
|
+
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
16
|
+
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
17
|
+
* will have to ensure the static assets are copied to its build directory.
|
|
18
|
+
*/
|
|
19
|
+
export declare const setAssetPath: (path: string) => void;
|
|
20
|
+
|
|
21
|
+
export interface SetPlatformOptions {
|
|
22
|
+
raf?: (c: FrameRequestCallback) => number;
|
|
23
|
+
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
24
|
+
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
25
|
+
}
|
|
26
|
+
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
27
|
+
export * from '../types';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
2
|
+
export { ProtoDaisyUi, defineCustomElement as defineCustomElementProtoDaisyUi } from './proto-daisy-ui.js';
|
|
3
|
+
export { ProtoDemo, defineCustomElement as defineCustomElementProtoDemo } from './proto-demo.js';
|
|
4
|
+
export { ProtoHero, defineCustomElement as defineCustomElementProtoHero } from './proto-hero.js';
|
|
5
|
+
export { ProtoHome, defineCustomElement as defineCustomElementProtoHome } from './proto-home.js';
|
|
6
|
+
export { ProtoList, defineCustomElement as defineCustomElementProtoList } from './proto-list.js';
|
|
7
|
+
export { ProtoShell, defineCustomElement as defineCustomElementProtoShell } from './proto-shell.js';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface ProtoDaisyUi extends Components.ProtoDaisyUi, HTMLElement {}
|
|
4
|
+
export const ProtoDaisyUi: {
|
|
5
|
+
prototype: ProtoDaisyUi;
|
|
6
|
+
new (): ProtoDaisyUi;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|