Skip to content

Commit ac3be65

Browse files
rkaraivanovrkaraivanov
authored
Types, internal changes and latest dependencies (#11)
* refactor: Types, API and internal changes
1 parent eaf5377 commit ac3be65

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1559
-1432
lines changed

‎demo/demo.ts

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import { html, render } from 'lit';
2+
import {
3+
configureTheme,
4+
IgcAvatarComponent,
5+
IgcRatingComponent,
6+
IgcSelectComponent,
7+
IgcSwitchComponent,
8+
defineComponents,
9+
} from 'igniteui-webcomponents';
10+
import '../src/index';
11+
import { ColumnConfiguration } from '../src/index';
12+
import { Theme } from 'igniteui-webcomponents/theming/types';
13+
14+
defineComponents(IgcAvatarComponent, IgcRatingComponent, IgcSelectComponent, IgcSwitchComponent);
15+
16+
type User = {
17+
id: number;
18+
name: string;
19+
age: number;
20+
subscribed: boolean;
21+
satisfaction: number;
22+
priority: string;
23+
email: string;
24+
avatar: string;
25+
};
26+
27+
const choices = ['low', 'standard', 'high'];
28+
const themes: Theme[] = ['bootstrap', 'material', 'fluent', 'indigo'];
29+
30+
function getElement<T>(qs: string): T {
31+
return document.querySelector(qs) as T;
32+
}
33+
34+
function generateData(length: number): User[] {
35+
return [...Array(length)].map(
36+
(_, idx) =>
37+
({
38+
id: idx,
39+
name: `User - ${getRandomInt(length)}`,
40+
age: getRandomInt(100),
41+
subscribed: !!getRandomInt(2),
42+
satisfaction: getRandomInt(5),
43+
priority: oneOf(choices),
44+
email: `user${idx}@org.com`,
45+
avatar: getAvatar(),
46+
} as User),
47+
);
48+
}
49+
50+
function getRandomInt(max: number) {
51+
return Math.floor(Math.random() * max);
52+
}
53+
54+
function oneOf<T>(collection: T[]) {
55+
return collection.at(getRandomInt(collection.length));
56+
}
57+
58+
function getAvatar() {
59+
const [type, idx] = [getRandomInt(2) % 2 ? 'women' : 'men', getRandomInt(100)];
60+
return `https://static.infragistics.com/xplatform/images/people/${type}/${idx}.jpg`;
61+
}
62+
63+
async function setTheme(theme?: Theme) {
64+
theme = theme ?? (getElement<IgcSelectComponent>(IgcSelectComponent.tagName).value as Theme);
65+
const variant = getElement<IgcSwitchComponent>(IgcSwitchComponent.tagName).checked
66+
? 'dark'
67+
: 'light';
68+
69+
await import(
70+
/* @vite-ignore */
71+
`/node_modules/igniteui-webcomponents/themes/${variant}/${theme}.css?${Date.now()}`
72+
);
73+
74+
Array.from(document.head.querySelectorAll('style[type="tet/css"]'))
75+
.slice(0, -1)
76+
.forEach(s => s.remove());
77+
78+
configureTheme(theme);
79+
}
80+
81+
const themeChoose = html`
82+
<div class="sample-drop-down">
83+
<igc-select
84+
value="bootstrap"
85+
outlined
86+
label="Choose theme"
87+
same-width
88+
flip
89+
@igcChange=${({ detail }) => setTheme(detail.value)}
90+
>
91+
${themes.map(theme => html`<igc-select-item .value=${theme}>${theme}</igc-select-item>`)}
92+
</igc-select>
93+
<igc-switch
94+
label-position="after"
95+
@igcChange=${() => setTheme()}
96+
>Dark variant</igc-switch
97+
>
98+
</div>
99+
`;
100+
101+
const columns: ColumnConfiguration<User>[] = [
102+
{ key: 'id', headerText: 'User ID', resizable: true, type: 'number', filter: true, sort: true },
103+
{
104+
key: 'name',
105+
cellTemplate: params => html`<igc-input .value=${params.value}></igc-input>`,
106+
filter: true,
107+
sort: true,
108+
},
109+
{
110+
key: 'avatar',
111+
cellTemplate: params =>
112+
html`<igc-avatar
113+
shape="circle"
114+
.src=${params.value}
115+
></igc-avatar>`,
116+
},
117+
{
118+
key: 'satisfaction',
119+
type: 'number',
120+
sort: true,
121+
filter: true,
122+
cellTemplate: params =>
123+
html`<igc-rating
124+
readonly
125+
.value=${params.value}
126+
></igc-rating>`,
127+
},
128+
{
129+
key: 'priority',
130+
cellTemplate: params =>
131+
html`<igc-select
132+
outlined
133+
.value=${params.value}
134+
>${choices.map(
135+
choice => html`<igc-select-item .value=${choice}>${choice}</igc-select-item>`,
136+
)}</igc-select
137+
>`,
138+
sort: {
139+
comparer: (a, b) => choices.indexOf(a) - choices.indexOf(b),
140+
},
141+
},
142+
{
143+
key: 'age',
144+
},
145+
{
146+
key: 'email',
147+
},
148+
{
149+
key: 'subscribed',
150+
type: 'boolean',
151+
sort: true,
152+
filter: true,
153+
cellTemplate: params => html`<igc-checkbox
154+
label-position="before"
155+
?checked=${params.value}
156+
></igc-checkbox>`,
157+
},
158+
];
159+
160+
const data = generateData(1e4);
161+
162+
document.addEventListener('DOMContentLoaded', async () => {
163+
render(
164+
html`${themeChoose}<apex-grid
165+
.data=${data}
166+
.columns=${columns}
167+
></apex-grid>`,
168+
document.getElementById('demo')!,
169+
);
170+
await setTheme('bootstrap');
171+
});

‎demo/index.html

Lines changed: 5 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -46,179 +46,10 @@
4646
</head>
4747
<body class="ig-typography">
4848
<div id="demo"></div>
49-
50-
<script type="module">
51-
import { html, render } from 'lit';
52-
import '../src/index.ts';
53-
import {
54-
defineComponents,
55-
IgcAvatarComponent,
56-
IgcInputComponent,
57-
IgcCheckboxComponent,
58-
IgcRatingComponent,
59-
IgcButtonComponent,
60-
IgcSelectComponent,
61-
IgcSwitchComponent,
62-
configureTheme,
63-
} from 'igniteui-webcomponents';
64-
65-
defineComponents(
66-
IgcInputComponent,
67-
IgcCheckboxComponent,
68-
IgcAvatarComponent,
69-
IgcRatingComponent,
70-
IgcButtonComponent,
71-
IgcSelectComponent,
72-
IgcSwitchComponent,
73-
);
74-
75-
function getRandomInt(max) {
76-
return Math.floor(Math.random() * max);
77-
}
78-
79-
const standard = props => {
80-
const change = e => console.log(`Changed to ${e.target.value}`);
81-
return html` <igc-input
82-
.value=${props.value}
83-
@igcChange=${change}
84-
>
85-
</igc-input>`;
86-
};
87-
88-
const booleanTemplate = props => {
89-
return html`<igc-checkbox
90-
label-position="before"
91-
?checked=${props.value}
92-
.value=${props.value}
93-
></igc-checkbox>`;
94-
};
95-
96-
const avatarTemplate = props => {
97-
return html`<igc-avatar
98-
shape="circle"
99-
.src=${props.value}
100-
></igc-avatar>`;
101-
};
102-
103-
const satisfactionTemplate = props => {
104-
return html`<igc-rating
105-
readonly
106-
.value=${props.value}
107-
></igc-rating>`;
108-
};
109-
110-
const priorityTemplate = props => {
111-
return html`<igc-select
112-
outlined
113-
.value=${props.value}
114-
>
115-
${choices.map(each => html`<igc-select-item .value=${each}>${each}</igc-select-item>`)}
116-
</igc-select>`;
117-
};
118-
119-
const data = [];
120-
const choices = ['low', 'standard', 'high'];
121-
const columns = [
122-
{
123-
key: 'id',
124-
headerText: 'User ID',
125-
resizable: true,
126-
hidden: false,
127-
type: 'number',
128-
filter: true,
129-
sort: {
130-
caseSensitive: true,
131-
},
132-
},
133-
{ key: 'name', cellTemplate: standard, filter: true, sort: true, resizable: true },
134-
{ key: 'avatar', cellTemplate: avatarTemplate, resizable: true },
135-
{ key: 'satisfaction', sort: true, resizable: true, cellTemplate: satisfactionTemplate },
136-
{
137-
key: 'priority',
138-
sort: {
139-
comparer: (a, b) => choices.indexOf(a) - choices.indexOf(b),
140-
},
141-
cellTemplate: priorityTemplate,
142-
},
143-
{ key: 'age', resizable: true },
144-
{ key: 'email', resizable: true },
145-
{
146-
key: 'subscribed',
147-
type: 'boolean',
148-
cellTemplate: booleanTemplate,
149-
sort: true,
150-
filter: true,
151-
resizable: true,
152-
},
153-
];
154-
155-
for (let i = 0; i < 1e4; i++) {
156-
data.push({
157-
id: i,
158-
name: `User - ${getRandomInt(1e4)}`,
159-
age: getRandomInt(75),
160-
subscribed: Boolean(Math.round(Math.random() * i) % 2),
161-
satisfaction: getRandomInt(5),
162-
priority: choices.at(getRandomInt(3)),
163-
email: `user${i}@organization.com`,
164-
avatar: `https://static.infragistics.com/xplatform/images/people/${
165-
getRandomInt(2) % 2 ? 'women' : 'men'
166-
}/${getRandomInt(100)}.jpg`,
167-
});
168-
}
169-
170-
async function setTheme(theme) {
171-
theme = theme ?? document.querySelector('igc-select').value;
172-
const variant = document.querySelector('igc-switch')?.checked ? 'dark' : 'light';
173-
174-
await import(
175-
/* @vite-ignore */
176-
`/node_modules/igniteui-webcomponents/themes/${variant}/${theme}.css?${Date.now()}`
177-
);
178-
179-
Array.from(document.head.querySelectorAll('style[type="text/css"]'))
180-
.slice(0, -1)
181-
.forEach(style => style.remove());
182-
183-
configureTheme(theme);
184-
}
185-
186-
const themeChooser = () => {
187-
const themes = ['bootstrap', 'material', 'fluent', 'indigo'];
188-
189-
return html`
190-
<div class="sample-drop-down">
191-
<igc-select
192-
outlined
193-
placeholder="Choose a theme..."
194-
label="Choose theme"
195-
value="bootstrap"
196-
same-width
197-
flip
198-
type="outlined"
199-
@igcChange=${e => setTheme(e.detail.value)}
200-
>
201-
${themes.map(each => html`<igc-select-item .value=${each}>${each}</igc-select-item>`)}
202-
</igc-select>
203-
204-
<igc-switch
205-
@igcChange=${() => setTheme()}
206-
label-position="after"
207-
>Dark variant</igc-switch
208-
>
209-
</div>
210-
`;
211-
};
212-
213-
render(
214-
html`${themeChooser()}
215-
<apex-grid
216-
.columns=${columns}
217-
.data=${data}
218-
></apex-grid>`,
219-
document.querySelector('#demo'),
220-
);
221-
await setTheme('bootstrap');
222-
</script>
49+
<script
50+
defer
51+
type="module"
52+
src="./demo.ts"
53+
></script>
22354
</body>
22455
</html>

0 commit comments

Comments
 (0)