@greendrake/ui 0.2.0 → 0.3.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/package.json +5 -5
- package/src/BottomNav.vue +10 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greendrake/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Vue 3 component library: form controls, modals, search, tabs, toasts, layout",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Eugene Greendrake <eugene@greendrake.nz>",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"prettier": "@greendrake/dev-config/prettier",
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@greendrake/domains": "0.
|
|
37
|
-
"@greendrake/scss-kit": "0.
|
|
38
|
-
"@greendrake/util": "0.
|
|
36
|
+
"@greendrake/domains": "0.3.0",
|
|
37
|
+
"@greendrake/scss-kit": "0.3.0",
|
|
38
|
+
"@greendrake/util": "0.3.0",
|
|
39
39
|
"vue-tippy": "^6.7.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"vue-router": "^4.6.4"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@greendrake/dev-config": "0.
|
|
46
|
+
"@greendrake/dev-config": "0.3.0",
|
|
47
47
|
"typescript": "6.0.3",
|
|
48
48
|
"vue": "^3.5.34",
|
|
49
49
|
"vue-router": "^4.6.4",
|
package/src/BottomNav.vue
CHANGED
|
@@ -67,6 +67,9 @@ const emit = defineEmits<{ select: [id: string] }>()
|
|
|
67
67
|
border-top: 1px solid var(--border-color-light);
|
|
68
68
|
&__tab {
|
|
69
69
|
flex: 1 1 0;
|
|
70
|
+
// Holds the tab to its share of the bar however long its label, which
|
|
71
|
+
// the label's own clipping below depends on.
|
|
72
|
+
min-width: 0;
|
|
70
73
|
display: flex;
|
|
71
74
|
flex-direction: column;
|
|
72
75
|
align-items: center;
|
|
@@ -116,6 +119,13 @@ const emit = defineEmits<{ select: [id: string] }>()
|
|
|
116
119
|
&__label {
|
|
117
120
|
font-size: var(--font-xs);
|
|
118
121
|
line-height: 1;
|
|
122
|
+
// One line, always: a label that wrapped would lift its icon off the
|
|
123
|
+
// line the other tabs' icons sit on. One too long for its cell is cut
|
|
124
|
+
// short instead — visibly only; its accessible name stays whole.
|
|
125
|
+
max-width: 100%;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
white-space: nowrap;
|
|
128
|
+
text-overflow: ellipsis;
|
|
119
129
|
// Follow the tab's own colour (muted when inactive, accent when active).
|
|
120
130
|
// Without this the theme's global `a span` link tint paints every label
|
|
121
131
|
// violet, so the active/inactive distinction collapses to just the icon.
|