snice 1.14.3 → 2.1.0
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/bin/templates/base/tsconfig.json +5 -4
- package/components/accordion/demo.html +403 -0
- package/components/accordion/snice-accordion-item.css +85 -0
- package/components/accordion/snice-accordion-item.ts +226 -0
- package/components/accordion/snice-accordion.css +31 -0
- package/components/accordion/snice-accordion.ts +182 -0
- package/components/accordion/snice-accordion.types.ts +32 -0
- package/components/alert/demo.html +445 -0
- package/components/alert/snice-alert.css +195 -0
- package/components/alert/snice-alert.ts +141 -0
- package/components/alert/snice-alert.types.ts +12 -0
- package/components/avatar/demo.html +598 -0
- package/components/avatar/snice-avatar.css +131 -0
- package/components/avatar/snice-avatar.ts +136 -0
- package/components/avatar/snice-avatar.types.ts +13 -0
- package/components/badge/demo.html +523 -0
- package/components/badge/snice-badge.css +161 -0
- package/components/badge/snice-badge.ts +117 -0
- package/components/badge/snice-badge.types.ts +16 -0
- package/components/breadcrumbs/demo.html +404 -0
- package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
- package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
- package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
- package/components/breadcrumbs/snice-crumb.ts +26 -0
- package/components/button/demo.html +42 -0
- package/components/button/snice-button.css +230 -0
- package/components/button/snice-button.ts +169 -0
- package/components/button/snice-button.types.ts +25 -0
- package/components/card/demo.html +525 -0
- package/components/card/snice-card.css +140 -0
- package/components/card/snice-card.ts +102 -0
- package/components/card/snice-card.types.ts +10 -0
- package/components/checkbox/demo.html +253 -0
- package/components/checkbox/snice-checkbox.css +164 -0
- package/components/checkbox/snice-checkbox.ts +223 -0
- package/components/checkbox/snice-checkbox.types.ts +22 -0
- package/components/chip/demo.html +383 -0
- package/components/chip/snice-chip.css +195 -0
- package/components/chip/snice-chip.ts +139 -0
- package/components/chip/snice-chip.types.ts +15 -0
- package/components/date-picker/README.md +233 -0
- package/components/date-picker/demo.html +191 -0
- package/components/date-picker/snice-date-picker.css +330 -0
- package/components/date-picker/snice-date-picker.ts +777 -0
- package/components/date-picker/snice-date-picker.types.ts +83 -0
- package/components/divider/demo.html +233 -0
- package/components/divider/snice-divider.css +155 -0
- package/components/divider/snice-divider.ts +69 -0
- package/components/divider/snice-divider.types.ts +15 -0
- package/components/drawer/demo.html +328 -0
- package/components/drawer/snice-drawer.css +476 -0
- package/components/drawer/snice-drawer.ts +287 -0
- package/components/drawer/snice-drawer.types.ts +17 -0
- package/components/global.d.ts +14 -0
- package/components/input/demo.html +303 -0
- package/components/input/snice-input.css +257 -0
- package/components/input/snice-input.ts +442 -0
- package/components/input/snice-input.types.ts +59 -0
- package/components/input/test.html +77 -0
- package/components/layout/README.md +260 -0
- package/components/layout/demo.html +538 -0
- package/components/layout/snice-layout-blog.css +129 -0
- package/components/layout/snice-layout-blog.ts +48 -0
- package/components/layout/snice-layout-card.css +104 -0
- package/components/layout/snice-layout-card.ts +35 -0
- package/components/layout/snice-layout-centered.css +51 -0
- package/components/layout/snice-layout-centered.ts +22 -0
- package/components/layout/snice-layout-dashboard.css +98 -0
- package/components/layout/snice-layout-dashboard.ts +45 -0
- package/components/layout/snice-layout-fullscreen.css +72 -0
- package/components/layout/snice-layout-fullscreen.ts +34 -0
- package/components/layout/snice-layout-landing.css +92 -0
- package/components/layout/snice-layout-landing.ts +47 -0
- package/components/layout/snice-layout-minimal.css +16 -0
- package/components/layout/snice-layout-minimal.ts +19 -0
- package/components/layout/snice-layout-sidebar.css +117 -0
- package/components/layout/snice-layout-sidebar.ts +48 -0
- package/components/layout/snice-layout-split.css +103 -0
- package/components/layout/snice-layout-split.ts +29 -0
- package/components/layout/snice-layout.css +72 -0
- package/components/layout/snice-layout.ts +35 -0
- package/components/layout/snice-layout.types.ts +5 -0
- package/components/login/demo-auth-controller.ts +185 -0
- package/components/login/demo.html +470 -0
- package/components/login/snice-login.css +204 -0
- package/components/login/snice-login.ts +337 -0
- package/components/login/snice-login.types.ts +34 -0
- package/components/modal/demo.html +291 -0
- package/components/modal/snice-modal.css +203 -0
- package/components/modal/snice-modal.ts +233 -0
- package/components/modal/snice-modal.types.ts +21 -0
- package/components/pagination/demo.html +395 -0
- package/components/pagination/snice-pagination.ts +333 -0
- package/components/pagination/snice-pagination.types.ts +21 -0
- package/components/progress/demo.html +510 -0
- package/components/progress/snice-progress.css +267 -0
- package/components/progress/snice-progress.ts +247 -0
- package/components/progress/snice-progress.types.ts +19 -0
- package/components/radio/demo.html +287 -0
- package/components/radio/snice-radio.css +171 -0
- package/components/radio/snice-radio.ts +218 -0
- package/components/radio/snice-radio.types.ts +21 -0
- package/components/select/demo.html +511 -0
- package/components/select/snice-option.ts +52 -0
- package/components/select/snice-option.types.ts +14 -0
- package/components/select/snice-select.css +392 -0
- package/components/select/snice-select.ts +796 -0
- package/components/select/snice-select.types.ts +55 -0
- package/components/skeleton/demo.html +514 -0
- package/components/skeleton/snice-skeleton.css +109 -0
- package/components/skeleton/snice-skeleton.ts +126 -0
- package/components/skeleton/snice-skeleton.types.ts +11 -0
- package/components/switch/demo.html +284 -0
- package/components/switch/snice-switch.css +221 -0
- package/components/switch/snice-switch.ts +229 -0
- package/components/switch/snice-switch.types.ts +23 -0
- package/components/symbols.ts +23 -0
- package/components/table/demo-table-controller.ts +100 -0
- package/components/table/demo.html +480 -0
- package/components/table/snice-cell-boolean.ts +112 -0
- package/components/table/snice-cell-date.ts +210 -0
- package/components/table/snice-cell-duration.ts +91 -0
- package/components/table/snice-cell-filesize.ts +90 -0
- package/components/table/snice-cell-number.ts +165 -0
- package/components/table/snice-cell-progress.ts +83 -0
- package/components/table/snice-cell-rating.ts +82 -0
- package/components/table/snice-cell-sparkline.ts +253 -0
- package/components/table/snice-cell-text.ts +125 -0
- package/components/table/snice-cell.css +296 -0
- package/components/table/snice-cell.ts +473 -0
- package/components/table/snice-column.ts +353 -0
- package/components/table/snice-header.css +243 -0
- package/components/table/snice-header.ts +261 -0
- package/components/table/snice-progress.ts +66 -0
- package/components/table/snice-rating.ts +45 -0
- package/components/table/snice-row.css +255 -0
- package/components/table/snice-row.ts +331 -0
- package/components/table/snice-table.css +241 -0
- package/components/table/snice-table.ts +737 -0
- package/components/table/snice-table.types.ts +158 -0
- package/components/tabs/demo.html +487 -0
- package/components/tabs/snice-tab-panel.css +264 -0
- package/components/tabs/snice-tab-panel.ts +47 -0
- package/components/tabs/snice-tab.css +96 -0
- package/components/tabs/snice-tab.ts +65 -0
- package/components/tabs/snice-tabs.css +189 -0
- package/components/tabs/snice-tabs.ts +332 -0
- package/components/tabs/snice-tabs.types.ts +28 -0
- package/components/theme/theme.css +234 -0
- package/components/toast/demo.html +329 -0
- package/components/toast/snice-toast-container.ts +256 -0
- package/components/toast/snice-toast.css +213 -0
- package/components/toast/snice-toast.ts +276 -0
- package/components/toast/snice-toast.types.ts +35 -0
- package/components/tooltip/demo.html +350 -0
- package/components/tooltip/snice-tooltip-portal.css +79 -0
- package/components/tooltip/snice-tooltip.css +117 -0
- package/components/tooltip/snice-tooltip.ts +612 -0
- package/components/tooltip/snice-tooltip.types.ts +32 -0
- package/components/transitions.ts +94 -0
- package/components/tsconfig.json +18 -0
- package/dist/index.cjs +441 -329
- package/dist/index.cjs.map +1 -1
- package/dist/index.cjs.min.map +1 -1
- package/dist/index.esm.js +441 -329
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +3 -3
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +441 -329
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +3 -3
- package/dist/index.iife.min.js.map +1 -1
- package/dist/symbols.esm.js +1 -1
- package/dist/transitions.esm.js +1 -1
- package/dist/types/controller.d.ts +1 -1
- package/dist/types/element.d.ts +10 -10
- package/dist/types/events.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/observe.d.ts +1 -1
- package/dist/types/request-response.d.ts +2 -3
- package/dist/types/router.d.ts +1 -1
- package/package.json +9 -3
- package/dist/index.cjs.min +0 -15
- package/dist/symbols.cjs +0 -103
- package/dist/transitions.cjs +0 -219
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
export type TableSize = 'small' | 'medium' | 'large';
|
|
2
|
+
export type TableVariant = 'default' | 'striped' | 'bordered';
|
|
3
|
+
export type ColumnAlign = 'left' | 'center' | 'right';
|
|
4
|
+
export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'currency' | 'percent' |
|
|
5
|
+
'rating' | 'progress' | 'sparkline' | 'accounting' | 'scientific' | 'fraction' |
|
|
6
|
+
'duration' | 'filesize' | 'custom';
|
|
7
|
+
export type SortDirection = 'asc' | 'desc' | null;
|
|
8
|
+
|
|
9
|
+
export interface NumberFormat {
|
|
10
|
+
decimals?: number;
|
|
11
|
+
thousandsSeparator?: boolean;
|
|
12
|
+
prefix?: string;
|
|
13
|
+
suffix?: string;
|
|
14
|
+
negativeStyle?: 'parentheses' | 'red' | 'minus';
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface DateFormat {
|
|
18
|
+
format?: 'short' | 'medium' | 'long' | 'full' | 'custom';
|
|
19
|
+
customFormat?: string;
|
|
20
|
+
locale?: string;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface CellStyle {
|
|
24
|
+
backgroundColor?: string;
|
|
25
|
+
color?: string;
|
|
26
|
+
fontWeight?: 'normal' | 'bold' | 'lighter';
|
|
27
|
+
fontStyle?: 'normal' | 'italic';
|
|
28
|
+
fontSize?: string;
|
|
29
|
+
textDecoration?: 'none' | 'underline' | 'line-through';
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export interface ConditionalFormat {
|
|
33
|
+
condition: (value: any, row?: any) => boolean;
|
|
34
|
+
style?: CellStyle;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export interface BooleanFormat {
|
|
39
|
+
trueValue?: string;
|
|
40
|
+
falseValue?: string;
|
|
41
|
+
useSymbols?: boolean;
|
|
42
|
+
trueSymbol?: string;
|
|
43
|
+
falseSymbol?: string;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export interface RatingFormat {
|
|
47
|
+
max?: number;
|
|
48
|
+
symbol?: string;
|
|
49
|
+
emptySymbol?: string;
|
|
50
|
+
color?: string;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export interface ProgressFormat {
|
|
54
|
+
max?: number;
|
|
55
|
+
showPercentage?: boolean;
|
|
56
|
+
color?: string;
|
|
57
|
+
backgroundColor?: string;
|
|
58
|
+
height?: string;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export interface SparklineFormat {
|
|
62
|
+
type?: 'line' | 'bar' | 'area';
|
|
63
|
+
color?: string;
|
|
64
|
+
width?: number;
|
|
65
|
+
height?: number;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export interface ColumnDefinition {
|
|
69
|
+
key: string;
|
|
70
|
+
label: string;
|
|
71
|
+
type?: ColumnType;
|
|
72
|
+
align?: ColumnAlign;
|
|
73
|
+
width?: string;
|
|
74
|
+
sortable?: boolean;
|
|
75
|
+
filterable?: boolean;
|
|
76
|
+
formatter?: (value: any, row?: any) => string;
|
|
77
|
+
|
|
78
|
+
// Excel-like formatting
|
|
79
|
+
numberFormat?: NumberFormat;
|
|
80
|
+
dateFormat?: DateFormat;
|
|
81
|
+
booleanFormat?: BooleanFormat;
|
|
82
|
+
ratingFormat?: RatingFormat;
|
|
83
|
+
progressFormat?: ProgressFormat;
|
|
84
|
+
sparklineFormat?: SparklineFormat;
|
|
85
|
+
style?: CellStyle;
|
|
86
|
+
conditionalFormats?: ConditionalFormat[];
|
|
87
|
+
|
|
88
|
+
// Display options
|
|
89
|
+
wrap?: boolean;
|
|
90
|
+
ellipsis?: boolean;
|
|
91
|
+
tooltip?: boolean | ((value: any, row?: any) => string);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export interface TableSort {
|
|
95
|
+
column: string;
|
|
96
|
+
direction: SortDirection;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export interface SniceTableElement extends HTMLElement {
|
|
100
|
+
size: TableSize;
|
|
101
|
+
variant: TableVariant;
|
|
102
|
+
striped: boolean;
|
|
103
|
+
hoverable: boolean;
|
|
104
|
+
bordered: boolean;
|
|
105
|
+
stickyHeader: boolean;
|
|
106
|
+
sortable: boolean;
|
|
107
|
+
selectable: boolean;
|
|
108
|
+
clickable: boolean;
|
|
109
|
+
loading: boolean;
|
|
110
|
+
data: any[];
|
|
111
|
+
columns: ColumnDefinition[];
|
|
112
|
+
showSearch: boolean;
|
|
113
|
+
showPagination: boolean;
|
|
114
|
+
pageSize: number;
|
|
115
|
+
currentPage: number;
|
|
116
|
+
totalItems: number;
|
|
117
|
+
setData(data: any[]): void;
|
|
118
|
+
sort(column: string): void;
|
|
119
|
+
getSelectedRows(): any[];
|
|
120
|
+
search(query: string): void;
|
|
121
|
+
goToPage(page: number): void;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
export interface SniceHeaderElement extends HTMLElement {
|
|
125
|
+
sticky: boolean;
|
|
126
|
+
columns: ColumnDefinition[];
|
|
127
|
+
selectable: boolean;
|
|
128
|
+
sortable: boolean;
|
|
129
|
+
currentSort: TableSort;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
export interface SniceColumnElement extends HTMLElement {
|
|
133
|
+
key: string;
|
|
134
|
+
label: string;
|
|
135
|
+
type: ColumnType;
|
|
136
|
+
align: ColumnAlign;
|
|
137
|
+
width: string;
|
|
138
|
+
sortable: boolean;
|
|
139
|
+
filterable: boolean;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export interface SniceRowElement extends HTMLElement {
|
|
143
|
+
selected: boolean;
|
|
144
|
+
hoverable: boolean;
|
|
145
|
+
clickable: boolean;
|
|
146
|
+
data: any;
|
|
147
|
+
index: number;
|
|
148
|
+
columns: ColumnDefinition[];
|
|
149
|
+
selectable: boolean;
|
|
150
|
+
updateCells(): void;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
export interface SniceCellElement extends HTMLElement {
|
|
154
|
+
align: ColumnAlign;
|
|
155
|
+
type: ColumnType;
|
|
156
|
+
value: any;
|
|
157
|
+
column: ColumnDefinition;
|
|
158
|
+
}
|
|
@@ -0,0 +1,487 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Tabs Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="../theme/theme.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
padding: 40px;
|
|
11
|
+
font-family: var(--snice-font-family);
|
|
12
|
+
background: var(--snice-color-background);
|
|
13
|
+
color: var(--snice-color-text);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.section {
|
|
17
|
+
margin-bottom: 60px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h2 {
|
|
21
|
+
color: var(--snice-color-text);
|
|
22
|
+
margin-bottom: 20px;
|
|
23
|
+
font-size: var(--snice-font-size-2xl);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
h3 {
|
|
27
|
+
color: var(--snice-color-text-secondary);
|
|
28
|
+
margin-bottom: 16px;
|
|
29
|
+
font-size: var(--snice-font-size-lg);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.demo-content {
|
|
33
|
+
padding: var(--snice-spacing-md);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.demo-content h4 {
|
|
37
|
+
margin-top: 0;
|
|
38
|
+
color: var(--snice-color-text);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.demo-content p {
|
|
42
|
+
color: var(--snice-color-text-secondary);
|
|
43
|
+
line-height: var(--snice-line-height-normal);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.icon {
|
|
47
|
+
width: 16px;
|
|
48
|
+
height: 16px;
|
|
49
|
+
margin-right: 4px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.controls {
|
|
53
|
+
margin-bottom: 20px;
|
|
54
|
+
display: flex;
|
|
55
|
+
gap: 10px;
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
button {
|
|
60
|
+
padding: 8px 16px;
|
|
61
|
+
background: var(--snice-color-primary);
|
|
62
|
+
color: var(--snice-color-text-inverse);
|
|
63
|
+
border: none;
|
|
64
|
+
border-radius: var(--snice-border-radius-md);
|
|
65
|
+
font-family: var(--snice-font-family);
|
|
66
|
+
font-size: var(--snice-font-size-md);
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
transition: background-color var(--snice-transition-fast) ease;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
button:hover {
|
|
72
|
+
background: var(--snice-color-primary-hover);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
select {
|
|
76
|
+
padding: 8px;
|
|
77
|
+
font-family: var(--snice-font-family);
|
|
78
|
+
font-size: var(--snice-font-size-md);
|
|
79
|
+
border: 1px solid var(--snice-color-border);
|
|
80
|
+
border-radius: var(--snice-border-radius-md);
|
|
81
|
+
background: var(--snice-color-background);
|
|
82
|
+
color: var(--snice-color-text);
|
|
83
|
+
}
|
|
84
|
+
</style>
|
|
85
|
+
</head>
|
|
86
|
+
<body>
|
|
87
|
+
<h2>Tabs Component Demo</h2>
|
|
88
|
+
|
|
89
|
+
<div class="section">
|
|
90
|
+
<h3>Basic Tabs (with Fade Transition)</h3>
|
|
91
|
+
<snice-tabs transition="fade">
|
|
92
|
+
<snice-tab slot="nav">General</snice-tab>
|
|
93
|
+
<snice-tab slot="nav">Account</snice-tab>
|
|
94
|
+
<snice-tab slot="nav">Security</snice-tab>
|
|
95
|
+
<snice-tab slot="nav">Notifications</snice-tab>
|
|
96
|
+
|
|
97
|
+
<snice-tab-panel name="general">
|
|
98
|
+
<div class="demo-content">
|
|
99
|
+
<h4>General Settings</h4>
|
|
100
|
+
<p>Configure your general application preferences and display options.</p>
|
|
101
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
102
|
+
</div>
|
|
103
|
+
</snice-tab-panel>
|
|
104
|
+
|
|
105
|
+
<snice-tab-panel name="account">
|
|
106
|
+
<div class="demo-content">
|
|
107
|
+
<h4>Account Settings</h4>
|
|
108
|
+
<p>Manage your account information, profile details, and preferences.</p>
|
|
109
|
+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
110
|
+
</div>
|
|
111
|
+
</snice-tab-panel>
|
|
112
|
+
|
|
113
|
+
<snice-tab-panel name="security">
|
|
114
|
+
<div class="demo-content">
|
|
115
|
+
<h4>Security Settings</h4>
|
|
116
|
+
<p>Configure security options, two-factor authentication, and access controls.</p>
|
|
117
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
|
118
|
+
</div>
|
|
119
|
+
</snice-tab-panel>
|
|
120
|
+
|
|
121
|
+
<snice-tab-panel name="notifications">
|
|
122
|
+
<div class="demo-content">
|
|
123
|
+
<h4>Notification Settings</h4>
|
|
124
|
+
<p>Manage your notification preferences and alert configurations.</p>
|
|
125
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
126
|
+
</div>
|
|
127
|
+
</snice-tab-panel>
|
|
128
|
+
</snice-tabs>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="section">
|
|
132
|
+
<h3>Tabs with Icons (Scale Transition)</h3>
|
|
133
|
+
<snice-tabs transition="scale">
|
|
134
|
+
<snice-tab slot="nav">
|
|
135
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
|
136
|
+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
137
|
+
</svg>
|
|
138
|
+
Home
|
|
139
|
+
</snice-tab>
|
|
140
|
+
<snice-tab slot="nav">
|
|
141
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
|
142
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
143
|
+
</svg>
|
|
144
|
+
Profile
|
|
145
|
+
</snice-tab>
|
|
146
|
+
<snice-tab slot="nav">
|
|
147
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
|
148
|
+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
149
|
+
</svg>
|
|
150
|
+
Favorites
|
|
151
|
+
</snice-tab>
|
|
152
|
+
<snice-tab slot="nav">
|
|
153
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
|
154
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1.81.45 1.61 1.67 1.61 1.16 0 1.6-.64 1.6-1.46 0-.84-.68-1.22-1.88-1.54-2.29-.61-3.05-1.86-3.05-3.27 0-1.28.89-2.56 2.81-2.93V4.5h2.67v2.52c1.33.31 2.6 1.16 2.76 2.86h-1.96c-.09-.52-.39-1.34-1.47-1.34-1.09 0-1.5.71-1.5 1.34 0 .71.52 1.09 2.05 1.52 2.18.58 2.88 1.7 2.88 3.27-.01 1.71-1.37 2.85-3.19 3.42z"/>
|
|
155
|
+
</svg>
|
|
156
|
+
Settings
|
|
157
|
+
</snice-tab>
|
|
158
|
+
|
|
159
|
+
<snice-tab-panel>
|
|
160
|
+
<div class="demo-content">
|
|
161
|
+
<h4>Home</h4>
|
|
162
|
+
<p>Welcome to your dashboard. Here you can see an overview of your recent activity.</p>
|
|
163
|
+
</div>
|
|
164
|
+
</snice-tab-panel>
|
|
165
|
+
|
|
166
|
+
<snice-tab-panel>
|
|
167
|
+
<div class="demo-content">
|
|
168
|
+
<h4>Profile</h4>
|
|
169
|
+
<p>View and edit your profile information.</p>
|
|
170
|
+
</div>
|
|
171
|
+
</snice-tab-panel>
|
|
172
|
+
|
|
173
|
+
<snice-tab-panel>
|
|
174
|
+
<div class="demo-content">
|
|
175
|
+
<h4>Favorites</h4>
|
|
176
|
+
<p>Your saved items and bookmarks appear here.</p>
|
|
177
|
+
</div>
|
|
178
|
+
</snice-tab-panel>
|
|
179
|
+
|
|
180
|
+
<snice-tab-panel>
|
|
181
|
+
<div class="demo-content">
|
|
182
|
+
<h4>Settings</h4>
|
|
183
|
+
<p>Configure your application preferences.</p>
|
|
184
|
+
</div>
|
|
185
|
+
</snice-tab-panel>
|
|
186
|
+
</snice-tabs>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<div class="section">
|
|
190
|
+
<h3>Closable Tabs</h3>
|
|
191
|
+
<snice-tabs id="closable-tabs">
|
|
192
|
+
<snice-tab slot="nav" closable>Document 1</snice-tab>
|
|
193
|
+
<snice-tab slot="nav" closable>Document 2</snice-tab>
|
|
194
|
+
<snice-tab slot="nav" closable>Document 3</snice-tab>
|
|
195
|
+
<snice-tab slot="nav">Settings (Not Closable)</snice-tab>
|
|
196
|
+
|
|
197
|
+
<snice-tab-panel>
|
|
198
|
+
<div class="demo-content">
|
|
199
|
+
<h4>Document 1</h4>
|
|
200
|
+
<p>This tab can be closed using the X button.</p>
|
|
201
|
+
</div>
|
|
202
|
+
</snice-tab-panel>
|
|
203
|
+
|
|
204
|
+
<snice-tab-panel>
|
|
205
|
+
<div class="demo-content">
|
|
206
|
+
<h4>Document 2</h4>
|
|
207
|
+
<p>This tab can also be closed.</p>
|
|
208
|
+
</div>
|
|
209
|
+
</snice-tab-panel>
|
|
210
|
+
|
|
211
|
+
<snice-tab-panel>
|
|
212
|
+
<div class="demo-content">
|
|
213
|
+
<h4>Document 3</h4>
|
|
214
|
+
<p>Another closable tab.</p>
|
|
215
|
+
</div>
|
|
216
|
+
</snice-tab-panel>
|
|
217
|
+
|
|
218
|
+
<snice-tab-panel>
|
|
219
|
+
<div class="demo-content">
|
|
220
|
+
<h4>Settings</h4>
|
|
221
|
+
<p>This tab cannot be closed.</p>
|
|
222
|
+
</div>
|
|
223
|
+
</snice-tab-panel>
|
|
224
|
+
</snice-tabs>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div class="section">
|
|
228
|
+
<h3>Disabled Tabs</h3>
|
|
229
|
+
<snice-tabs>
|
|
230
|
+
<snice-tab slot="nav">Active Tab</snice-tab>
|
|
231
|
+
<snice-tab slot="nav" disabled>Disabled Tab</snice-tab>
|
|
232
|
+
<snice-tab slot="nav">Another Active Tab</snice-tab>
|
|
233
|
+
|
|
234
|
+
<snice-tab-panel>
|
|
235
|
+
<div class="demo-content">
|
|
236
|
+
<h4>Active Content</h4>
|
|
237
|
+
<p>This tab is active and clickable.</p>
|
|
238
|
+
</div>
|
|
239
|
+
</snice-tab-panel>
|
|
240
|
+
|
|
241
|
+
<snice-tab-panel>
|
|
242
|
+
<div class="demo-content">
|
|
243
|
+
<h4>Disabled Content</h4>
|
|
244
|
+
<p>You shouldn't be able to see this content.</p>
|
|
245
|
+
</div>
|
|
246
|
+
</snice-tab-panel>
|
|
247
|
+
|
|
248
|
+
<snice-tab-panel>
|
|
249
|
+
<div class="demo-content">
|
|
250
|
+
<h4>Another Active Content</h4>
|
|
251
|
+
<p>This tab is also active and clickable.</p>
|
|
252
|
+
</div>
|
|
253
|
+
</snice-tab-panel>
|
|
254
|
+
</snice-tabs>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="section">
|
|
258
|
+
<h3>Tab Placement</h3>
|
|
259
|
+
|
|
260
|
+
<div class="controls">
|
|
261
|
+
<label>Placement:</label>
|
|
262
|
+
<select id="placement-select">
|
|
263
|
+
<option value="top">Top</option>
|
|
264
|
+
<option value="bottom">Bottom</option>
|
|
265
|
+
<option value="start">Start (Left)</option>
|
|
266
|
+
<option value="end">End (Right)</option>
|
|
267
|
+
</select>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<snice-tabs id="placement-tabs" placement="top">
|
|
271
|
+
<snice-tab slot="nav">First</snice-tab>
|
|
272
|
+
<snice-tab slot="nav">Second</snice-tab>
|
|
273
|
+
<snice-tab slot="nav">Third</snice-tab>
|
|
274
|
+
|
|
275
|
+
<snice-tab-panel>
|
|
276
|
+
<div class="demo-content">
|
|
277
|
+
<h4>First Panel</h4>
|
|
278
|
+
<p>Tab placement can be changed dynamically.</p>
|
|
279
|
+
</div>
|
|
280
|
+
</snice-tab-panel>
|
|
281
|
+
|
|
282
|
+
<snice-tab-panel>
|
|
283
|
+
<div class="demo-content">
|
|
284
|
+
<h4>Second Panel</h4>
|
|
285
|
+
<p>Try changing the placement using the dropdown above.</p>
|
|
286
|
+
</div>
|
|
287
|
+
</snice-tab-panel>
|
|
288
|
+
|
|
289
|
+
<snice-tab-panel>
|
|
290
|
+
<div class="demo-content">
|
|
291
|
+
<h4>Third Panel</h4>
|
|
292
|
+
<p>Tabs can be positioned at top, bottom, left (start), or right (end).</p>
|
|
293
|
+
</div>
|
|
294
|
+
</snice-tab-panel>
|
|
295
|
+
</snice-tabs>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div class="section">
|
|
299
|
+
<h3>Many Tabs with Scroll</h3>
|
|
300
|
+
<snice-tabs>
|
|
301
|
+
<snice-tab slot="nav">Tab 1</snice-tab>
|
|
302
|
+
<snice-tab slot="nav">Tab 2</snice-tab>
|
|
303
|
+
<snice-tab slot="nav">Tab 3</snice-tab>
|
|
304
|
+
<snice-tab slot="nav">Tab 4</snice-tab>
|
|
305
|
+
<snice-tab slot="nav">Tab 5</snice-tab>
|
|
306
|
+
<snice-tab slot="nav">Tab 6</snice-tab>
|
|
307
|
+
<snice-tab slot="nav">Tab 7</snice-tab>
|
|
308
|
+
<snice-tab slot="nav">Tab 8</snice-tab>
|
|
309
|
+
<snice-tab slot="nav">Tab 9</snice-tab>
|
|
310
|
+
<snice-tab slot="nav">Tab 10</snice-tab>
|
|
311
|
+
<snice-tab slot="nav">Tab 11</snice-tab>
|
|
312
|
+
<snice-tab slot="nav">Tab 12</snice-tab>
|
|
313
|
+
<snice-tab slot="nav">Tab 13</snice-tab>
|
|
314
|
+
<snice-tab slot="nav">Tab 14</snice-tab>
|
|
315
|
+
<snice-tab slot="nav">Tab 15</snice-tab>
|
|
316
|
+
|
|
317
|
+
<snice-tab-panel>
|
|
318
|
+
<div class="demo-content">
|
|
319
|
+
<h4>Content 1</h4>
|
|
320
|
+
<p>When there are many tabs, scroll buttons appear to navigate.</p>
|
|
321
|
+
</div>
|
|
322
|
+
</snice-tab-panel>
|
|
323
|
+
|
|
324
|
+
<snice-tab-panel>
|
|
325
|
+
<div class="demo-content">
|
|
326
|
+
<h4>Content 2</h4>
|
|
327
|
+
</div>
|
|
328
|
+
</snice-tab-panel>
|
|
329
|
+
|
|
330
|
+
<snice-tab-panel>
|
|
331
|
+
<div class="demo-content">
|
|
332
|
+
<h4>Content 3</h4>
|
|
333
|
+
</div>
|
|
334
|
+
</snice-tab-panel>
|
|
335
|
+
|
|
336
|
+
<snice-tab-panel>
|
|
337
|
+
<div class="demo-content">
|
|
338
|
+
<h4>Content 4</h4>
|
|
339
|
+
</div>
|
|
340
|
+
</snice-tab-panel>
|
|
341
|
+
|
|
342
|
+
<snice-tab-panel>
|
|
343
|
+
<div class="demo-content">
|
|
344
|
+
<h4>Content 5</h4>
|
|
345
|
+
</div>
|
|
346
|
+
</snice-tab-panel>
|
|
347
|
+
|
|
348
|
+
<snice-tab-panel>
|
|
349
|
+
<div class="demo-content">
|
|
350
|
+
<h4>Content 6</h4>
|
|
351
|
+
</div>
|
|
352
|
+
</snice-tab-panel>
|
|
353
|
+
|
|
354
|
+
<snice-tab-panel>
|
|
355
|
+
<div class="demo-content">
|
|
356
|
+
<h4>Content 7</h4>
|
|
357
|
+
</div>
|
|
358
|
+
</snice-tab-panel>
|
|
359
|
+
|
|
360
|
+
<snice-tab-panel>
|
|
361
|
+
<div class="demo-content">
|
|
362
|
+
<h4>Content 8</h4>
|
|
363
|
+
</div>
|
|
364
|
+
</snice-tab-panel>
|
|
365
|
+
|
|
366
|
+
<snice-tab-panel>
|
|
367
|
+
<div class="demo-content">
|
|
368
|
+
<h4>Content 9</h4>
|
|
369
|
+
</div>
|
|
370
|
+
</snice-tab-panel>
|
|
371
|
+
|
|
372
|
+
<snice-tab-panel>
|
|
373
|
+
<div class="demo-content">
|
|
374
|
+
<h4>Content 10</h4>
|
|
375
|
+
</div>
|
|
376
|
+
</snice-tab-panel>
|
|
377
|
+
|
|
378
|
+
<snice-tab-panel>
|
|
379
|
+
<div class="demo-content">
|
|
380
|
+
<h4>Content 11</h4>
|
|
381
|
+
</div>
|
|
382
|
+
</snice-tab-panel>
|
|
383
|
+
|
|
384
|
+
<snice-tab-panel>
|
|
385
|
+
<div class="demo-content">
|
|
386
|
+
<h4>Content 12</h4>
|
|
387
|
+
</div>
|
|
388
|
+
</snice-tab-panel>
|
|
389
|
+
|
|
390
|
+
<snice-tab-panel>
|
|
391
|
+
<div class="demo-content">
|
|
392
|
+
<h4>Content 13</h4>
|
|
393
|
+
</div>
|
|
394
|
+
</snice-tab-panel>
|
|
395
|
+
|
|
396
|
+
<snice-tab-panel>
|
|
397
|
+
<div class="demo-content">
|
|
398
|
+
<h4>Content 14</h4>
|
|
399
|
+
</div>
|
|
400
|
+
</snice-tab-panel>
|
|
401
|
+
|
|
402
|
+
<snice-tab-panel>
|
|
403
|
+
<div class="demo-content">
|
|
404
|
+
<h4>Content 15</h4>
|
|
405
|
+
</div>
|
|
406
|
+
</snice-tab-panel>
|
|
407
|
+
</snice-tabs>
|
|
408
|
+
</div>
|
|
409
|
+
|
|
410
|
+
<div class="section">
|
|
411
|
+
<h3>Programmatic Control (Slide Transition)</h3>
|
|
412
|
+
|
|
413
|
+
<div class="controls">
|
|
414
|
+
<button onclick="selectTab(0)">Select First</button>
|
|
415
|
+
<button onclick="selectTab(1)">Select Second</button>
|
|
416
|
+
<button onclick="selectTab(2)">Select Third</button>
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
<snice-tabs id="programmatic-tabs" transition="slide">
|
|
420
|
+
<snice-tab slot="nav">First</snice-tab>
|
|
421
|
+
<snice-tab slot="nav">Second</snice-tab>
|
|
422
|
+
<snice-tab slot="nav">Third</snice-tab>
|
|
423
|
+
|
|
424
|
+
<snice-tab-panel>
|
|
425
|
+
<div class="demo-content">
|
|
426
|
+
<h4>First Panel</h4>
|
|
427
|
+
<p>Use the buttons above to programmatically select tabs.</p>
|
|
428
|
+
</div>
|
|
429
|
+
</snice-tab-panel>
|
|
430
|
+
|
|
431
|
+
<snice-tab-panel>
|
|
432
|
+
<div class="demo-content">
|
|
433
|
+
<h4>Second Panel</h4>
|
|
434
|
+
<p>Tabs can be controlled via JavaScript.</p>
|
|
435
|
+
</div>
|
|
436
|
+
</snice-tab-panel>
|
|
437
|
+
|
|
438
|
+
<snice-tab-panel>
|
|
439
|
+
<div class="demo-content">
|
|
440
|
+
<h4>Third Panel</h4>
|
|
441
|
+
<p>This enables dynamic tab switching based on application logic.</p>
|
|
442
|
+
</div>
|
|
443
|
+
</snice-tab-panel>
|
|
444
|
+
</snice-tabs>
|
|
445
|
+
</div>
|
|
446
|
+
|
|
447
|
+
<script type="module">
|
|
448
|
+
import './snice-tabs.ts';
|
|
449
|
+
import './snice-tab.ts';
|
|
450
|
+
import './snice-tab-panel.ts';
|
|
451
|
+
|
|
452
|
+
// Placement control
|
|
453
|
+
document.getElementById('placement-select').addEventListener('change', (e) => {
|
|
454
|
+
const tabs = document.getElementById('placement-tabs');
|
|
455
|
+
tabs.placement = e.target.value;
|
|
456
|
+
});
|
|
457
|
+
|
|
458
|
+
// Programmatic control
|
|
459
|
+
window.selectTab = function(index) {
|
|
460
|
+
const tabs = document.getElementById('programmatic-tabs');
|
|
461
|
+
tabs.show(index);
|
|
462
|
+
};
|
|
463
|
+
|
|
464
|
+
// Listen for tab changes
|
|
465
|
+
document.querySelector('snice-tabs').addEventListener('@snice/tab-change', (e) => {
|
|
466
|
+
console.log('Tab changed:', e.detail);
|
|
467
|
+
});
|
|
468
|
+
|
|
469
|
+
// Handle closable tabs
|
|
470
|
+
document.getElementById('closable-tabs').addEventListener('@snice/close', (e) => {
|
|
471
|
+
const tab = e.detail.tab;
|
|
472
|
+
const tabs = tab.parentElement.parentElement;
|
|
473
|
+
const index = Array.from(tabs.querySelectorAll('snice-tab')).indexOf(tab);
|
|
474
|
+
|
|
475
|
+
// Remove tab and panel
|
|
476
|
+
tab.remove();
|
|
477
|
+
const panels = tabs.querySelectorAll('snice-tab-panel');
|
|
478
|
+
if (panels[index]) {
|
|
479
|
+
panels[index].remove();
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
// Reset tabs
|
|
483
|
+
tabs.setupTabs();
|
|
484
|
+
});
|
|
485
|
+
</script>
|
|
486
|
+
</body>
|
|
487
|
+
</html>
|