voiptime-components 1.23.18 → 1.23.20
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/README.md +1 -2
- package/dist/components/icon/icons.d.ts +0 -323
- package/dist/components/icon/icons.d.ts.map +1 -1
- package/dist/index.cjs.js +3 -3
- package/dist/index.css +1 -1
- package/dist/index.es.js +824 -824
- package/dist/index.umd.js +3 -3
- package/package.json +1 -2
- package/src/assets/_grid.scss +109 -0
- package/src/assets/main.scss +3 -0
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "1.23.
|
|
7
|
+
"version": "1.23.20",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"main": "dist/index.umd.js",
|
|
10
10
|
"module": "dist/index.es.js",
|
|
@@ -37,7 +37,6 @@
|
|
|
37
37
|
"build:demo": "vite build --config vite.demo.config.ts",
|
|
38
38
|
"prepare": "npm run build",
|
|
39
39
|
"preview": "vite preview",
|
|
40
|
-
"generate-icons": "node scripts/generate-icons.cjs",
|
|
41
40
|
"fetch-icons": "node scripts/fetch-figma-icons.cjs",
|
|
42
41
|
"fetch-icons:offline": "node scripts/fetch-figma-icons.cjs --offline",
|
|
43
42
|
"generate-icon-groups": "node scripts/generate-icon-groups.cjs"
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
// ── Сітка карток (.vt-card-grid) ──────────────────────────────────────────────
|
|
2
|
+
//
|
|
3
|
+
// Розкладка кількох .vt-page__card на сторінці через CSS Grid.
|
|
4
|
+
//
|
|
5
|
+
// .vt-card-grid — всі діти в один рядок, однакової ширини
|
|
6
|
+
// .vt-card-grid--cols-{1..12} — N однакових колонок, діти переносяться рядами
|
|
7
|
+
// .vt-card-grid--rows-head — перший рядок по висоті контенту, решта ділять залишок
|
|
8
|
+
// .vt-card-grid--rows-foot — останній (другий) рядок по висоті контенту
|
|
9
|
+
// .vt-card-grid--rows-auto — всі рядки по контенту, сітка скролиться
|
|
10
|
+
// .vt-card-grid--gap-{none|sm|lg}
|
|
11
|
+
// .vt-card-grid--responsive — на вузьких екранах все в одну колонку
|
|
12
|
+
//
|
|
13
|
+
// .vt-card-grid__span-{1..12} — скільки колонок займає картка
|
|
14
|
+
// .vt-card-grid__span-full — на всю ширину
|
|
15
|
+
// .vt-card-grid__row-span-{1..6} — скільки рядків займає картка
|
|
16
|
+
//
|
|
17
|
+
// Нестандартні треки — через CSS-змінні інлайном:
|
|
18
|
+
// style="--vt-grid-cols: 300px minmax(0, 1fr); --vt-grid-rows: 120px minmax(0, 1fr)"
|
|
19
|
+
|
|
20
|
+
$vt-grid-max-cols: 12;
|
|
21
|
+
$vt-grid-max-rows: 6;
|
|
22
|
+
|
|
23
|
+
.vt-card-grid {
|
|
24
|
+
display: grid;
|
|
25
|
+
grid-auto-flow: var(--vt-grid-flow, column);
|
|
26
|
+
grid-template-columns: var(--vt-grid-cols, none);
|
|
27
|
+
grid-template-rows: var(--vt-grid-rows, none);
|
|
28
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
29
|
+
grid-auto-rows: var(--vt-grid-auto-rows, minmax(0, 1fr));
|
|
30
|
+
gap: var(--vt-gap-base);
|
|
31
|
+
flex: 1 1 0;
|
|
32
|
+
min-height: 0;
|
|
33
|
+
min-width: 0;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
|
|
36
|
+
// Картки займають всю клітинку і не роздувають трек контентом
|
|
37
|
+
> .vt-page__card {
|
|
38
|
+
height: auto;
|
|
39
|
+
min-height: 0;
|
|
40
|
+
min-width: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@for $i from 1 through $vt-grid-max-cols {
|
|
44
|
+
&--cols-#{$i} {
|
|
45
|
+
--vt-grid-flow: row;
|
|
46
|
+
--vt-grid-cols: repeat(#{$i}, minmax(0, 1fr));
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Тонкий рядок зверху (фільтр / статистика), решта рядків ділять висоту
|
|
51
|
+
&--rows-head {
|
|
52
|
+
--vt-grid-rows: auto;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Тонкий рядок знизу під основним контентом
|
|
56
|
+
&--rows-foot {
|
|
57
|
+
--vt-grid-rows: minmax(0, 1fr) auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Всі рядки по контенту — сторінка скролиться всередині сітки
|
|
61
|
+
&--rows-auto {
|
|
62
|
+
--vt-grid-auto-rows: auto;
|
|
63
|
+
align-content: start;
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&--gap-none {
|
|
68
|
+
gap: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&--gap-sm {
|
|
72
|
+
gap: var(--vt-gap-sm);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&--gap-lg {
|
|
76
|
+
gap: var(--vt-gap-lg);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&__span-full {
|
|
80
|
+
grid-column: 1 / -1;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@for $i from 1 through $vt-grid-max-cols {
|
|
84
|
+
&__span-#{$i} {
|
|
85
|
+
grid-column: span #{$i};
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@for $i from 1 through $vt-grid-max-rows {
|
|
90
|
+
&__row-span-#{$i} {
|
|
91
|
+
grid-row: span #{$i};
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&--responsive {
|
|
96
|
+
@media (max-width: 768px) {
|
|
97
|
+
--vt-grid-flow: row;
|
|
98
|
+
--vt-grid-cols: minmax(0, 1fr);
|
|
99
|
+
--vt-grid-auto-rows: auto;
|
|
100
|
+
align-content: start;
|
|
101
|
+
overflow-y: auto;
|
|
102
|
+
|
|
103
|
+
> * {
|
|
104
|
+
grid-column: 1 / -1;
|
|
105
|
+
grid-row: auto;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|