Skip to content

Commit 826c6d7

Browse files
ZiZIGYZiZIGY
committed
added tour and pagination
1 parent bf3c1cb commit 826c6d7

30 files changed

+3321
-111
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
"docs/@capsule/components/capsule-kbd/vscode.data.json",
1919
"docs/@capsule/components/capsule-aspect-ratio/vscode.data.json",
2020
"docs/@capsule/components/capsule-progress/vscode.data.json",
21-
"docs/@capsule/components/capsule-comparison/vscode.data.json"
21+
"docs/@capsule/components/capsule-comparison/vscode.data.json",
22+
"docs/@capsule/components/capsule-pagination/vscode.data.json",
23+
"docs/@capsule/components/capsule-circular-progress/vscode.data.json",
24+
"docs/@capsule/components/capsule-tour/vscode.data.json"
2225
]
2326
}

‎docs/.vitepress/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export default defineConfig({
8383
{ text: 'Chip', link: '/components/chip' },
8484
{ text: 'Kbd', link: '/components/kbd' },
8585
{ text: 'Breadcrumb', link: '/components/breadcrumb' },
86+
{ text: 'Pagination', link: '/components/pagination' },
8687
{ text: 'Skeleton', link: '/components/skeleton' },
8788
{ text: 'Divider', link: '/components/divider' },
8889
{ text: 'Alert', link: '/components/alert' },
@@ -97,6 +98,7 @@ export default defineConfig({
9798
{ text: 'Progress', link: '/components/progress' },
9899
{ text: 'Comparison', link: '/components/comparison' },
99100
{ text: 'Tooltip', link: '/components/tooltip' },
101+
{ text: 'Tour', link: '/components/tour' },
100102
],
101103
},
102104
{
@@ -149,6 +151,7 @@ export default defineConfig({
149151
{ text: 'Chip', link: '/ru/components/chip' },
150152
{ text: 'Kbd', link: '/ru/components/kbd' },
151153
{ text: 'Breadcrumb', link: '/ru/components/breadcrumb' },
154+
{ text: 'Pagination', link: '/ru/components/pagination' },
152155
{ text: 'Skeleton', link: '/ru/components/skeleton' },
153156
{ text: 'Divider', link: '/ru/components/divider' },
154157
{ text: 'Alert', link: '/ru/components/alert' },
@@ -163,6 +166,7 @@ export default defineConfig({
163166
{ text: 'Progress', link: '/ru/components/progress' },
164167
{ text: 'Comparison', link: '/ru/components/comparison' },
165168
{ text: 'Tooltip', link: '/ru/components/tooltip' },
169+
{ text: 'Tour', link: '/ru/components/tour' },
166170
],
167171
},
168172
{

‎docs/@capsule/components/capsule-circular-progress/capsule-circular-progress.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { LitElement, html } from '../../lit';
2+
3+
class CapsuleCircularProgress extends LitElement {
4+
static properties = {
5+
value: { type: Number, reflect: true },
6+
max: { type: Number, reflect: true },
7+
size: { type: String, reflect: true },
8+
color: { type: String, reflect: true },
9+
};
10+
11+
constructor() {
12+
super();
13+
this.value = 0;
14+
this.max = 100;
15+
this.size = 'md';
16+
this.color = 'primary';
17+
}
18+
19+
createRenderRoot() {
20+
return this;
21+
}
22+
23+
connectedCallback() {
24+
super.connectedCallback();
25+
this.setAttribute('role', 'progressbar');
26+
this._updateProgress();
27+
}
28+
29+
updated(changedProperties) {
30+
if (changedProperties.has('value') || changedProperties.has('max')) {
31+
this._updateProgress();
32+
}
33+
}
34+
35+
firstUpdated() {
36+
this._updateProgress();
37+
}
38+
39+
render() {
40+
return html`
41+
<svg
42+
class="circular-progress-svg"
43+
viewBox="22 22 44 44"
44+
part="svg"
45+
>
46+
<circle
47+
class="circular-progress-circle-bg"
48+
part="circle-bg"
49+
cx="44"
50+
cy="44"
51+
r="20.2"
52+
fill="none"
53+
stroke-width="3.6"
54+
></circle>
55+
<circle
56+
class="circular-progress-circle"
57+
part="circle"
58+
cx="44"
59+
cy="44"
60+
r="20.2"
61+
fill="none"
62+
stroke-width="3.6"
63+
></circle>
64+
</svg>
65+
`;
66+
}
67+
68+
_calculatePercentage() {
69+
const max = Number(this.max) || 100;
70+
if (!max || max === 0) return 0;
71+
const value = Number(this.value) || 0;
72+
const percentage = (value / max) * 100;
73+
return Math.min(Math.max(percentage, 0), 100);
74+
}
75+
76+
_updateProgress() {
77+
const percentage = this._calculatePercentage();
78+
const value = Number(this.value) || 0;
79+
const max = Number(this.max) || 100;
80+
const circumference = 2 * Math.PI * 20.2;
81+
const offset = circumference - (percentage / 100) * circumference;
82+
83+
this.setAttribute('aria-valuenow', value);
84+
this.setAttribute('aria-valuemin', '0');
85+
this.setAttribute('aria-valuemax', max);
86+
this.setAttribute('aria-label', `Progress: ${percentage.toFixed(0)}%`);
87+
88+
// Set value attribute for CSS content: attr(value) usage
89+
this.setAttribute('data-value', value);
90+
this.setAttribute('data-percentage', percentage.toFixed(0));
91+
92+
// Set CSS variables for smooth CSS animation
93+
this.style.setProperty('--progress-offset', `${offset}px`);
94+
this.style.setProperty('--progress-circumference', `${circumference}px`);
95+
}
96+
}
97+
98+
customElements.define('capsule-circular-progress', CapsuleCircularProgress);

‎docs/@capsule/components/capsule-circular-progress/capsule-circular-progress.style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
capsule-circular-progress {
2+
display: inline-block;
3+
position: relative;
4+
width: 1em;
5+
height: 1em;
6+
font-size: 48px;
7+
}
8+
9+
capsule-circular-progress .circular-progress-svg {
10+
width: 100%;
11+
height: 100%;
12+
display: block;
13+
transform: rotate(-90deg);
14+
}
15+
16+
capsule-circular-progress .circular-progress-circle-bg {
17+
stroke: var(--capsule-color-surface-variant);
18+
opacity: 0.3;
19+
}
20+
21+
capsule-circular-progress .circular-progress-circle {
22+
stroke: var(--capsule-color-primary);
23+
stroke-dasharray: var(--progress-circumference, 126.92px);
24+
stroke-dashoffset: var(--progress-offset, 126.92px);
25+
transition: stroke-dashoffset var(--capsule-transition);
26+
}
27+
28+
/* Sizes */
29+
capsule-circular-progress[size='xs'] {
30+
font-size: 24px;
31+
}
32+
33+
capsule-circular-progress[size='sm'] {
34+
font-size: 32px;
35+
}
36+
37+
capsule-circular-progress[size='md'] {
38+
font-size: 48px;
39+
}
40+
41+
capsule-circular-progress[size='lg'] {
42+
font-size: 64px;
43+
}
44+
45+
capsule-circular-progress[size='xl'] {
46+
font-size: 80px;
47+
}
48+
49+
/* Colors */
50+
capsule-circular-progress[color='primary'] .circular-progress-circle {
51+
stroke: var(--capsule-color-primary);
52+
}
53+
54+
capsule-circular-progress[color='secondary'] .circular-progress-circle {
55+
stroke: var(--capsule-color-secondary);
56+
}
57+
58+
capsule-circular-progress[color='success'] .circular-progress-circle {
59+
stroke: var(--capsule-color-success);
60+
}
61+
62+
capsule-circular-progress[color='error'] .circular-progress-circle {
63+
stroke: var(--capsule-color-error);
64+
}
65+
66+
capsule-circular-progress[color='warning'] .circular-progress-circle {
67+
stroke: var(--capsule-color-warning);
68+
}
69+
70+
capsule-circular-progress[color='info'] .circular-progress-circle {
71+
stroke: var(--capsule-color-info);
72+
}
73+

‎docs/@capsule/components/capsule-circular-progress/register.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './capsule-circular-progress.js';
2+

‎docs/@capsule/components/capsule-circular-progress/vscode.data.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"version": 1.1,
3+
"tags": [
4+
{
5+
"name": "capsule-circular-progress",
6+
"attributes": [
7+
{
8+
"name": "value",
9+
"description": "Current progress value",
10+
"valueSet": "number"
11+
},
12+
{
13+
"name": "max",
14+
"description": "Maximum value (default: 100)",
15+
"valueSet": "number"
16+
},
17+
{
18+
"name": "size",
19+
"description": "Size of the circular progress indicator",
20+
"values": [
21+
{
22+
"name": "xs"
23+
},
24+
{
25+
"name": "sm"
26+
},
27+
{
28+
"name": "md"
29+
},
30+
{
31+
"name": "lg"
32+
},
33+
{
34+
"name": "xl"
35+
}
36+
]
37+
},
38+
{
39+
"name": "color",
40+
"description": "Color theme for the progress indicator",
41+
"values": [
42+
{
43+
"name": "primary"
44+
},
45+
{
46+
"name": "secondary"
47+
},
48+
{
49+
"name": "success"
50+
},
51+
{
52+
"name": "error"
53+
},
54+
{
55+
"name": "warning"
56+
},
57+
{
58+
"name": "info"
59+
}
60+
]
61+
}
62+
]
63+
}
64+
]
65+
}
66+

0 commit comments

Comments
 (0)