webcake-ui-kit 1.0.2 → 1.0.5
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
CHANGED
|
@@ -12,7 +12,7 @@ Ship the same components to Vue 2.7 _and_ Vue 3 — from a single source, with o
|
|
|
12
12
|
[](https://www.npmjs.com/package/webcake-ui-kit)
|
|
13
13
|
[](https://vuejs.org/)
|
|
14
14
|
[](#-why-ship-raw-sfc)
|
|
15
|
-
[](LICENSE)
|
|
16
16
|
|
|
17
17
|
<br />
|
|
18
18
|
|
|
@@ -35,7 +35,7 @@ Most Vue component libraries force you to **pick a side**. Choose Vue 2 → you'
|
|
|
35
35
|
**webcake-ui-kit refuses that tradeoff.** Every component is hand-authored under strict dual-compatibility rules so the _same import_ compiles, renders, and behaves identically on **Vue 2.7** and **Vue 3.4+** — from a codebase you can grep, fork, and theme as if it were your own.
|
|
36
36
|
|
|
37
37
|
```js
|
|
38
|
-
import {
|
|
38
|
+
import { WkButton, WkDialog, WkInput } from 'webcake-ui-kit'
|
|
39
39
|
// ✅ Vue 2.7 — works
|
|
40
40
|
// ✅ Vue 3.x — works
|
|
41
41
|
// ✅ Same API. Same styles. Same behavior. One source of truth.
|
|
@@ -92,14 +92,14 @@ import 'webcake-ui-kit/styles'
|
|
|
92
92
|
```js
|
|
93
93
|
// main.js
|
|
94
94
|
import { createApp } from 'vue'
|
|
95
|
-
import {
|
|
95
|
+
import { WkButton, WkDialog, WkInput } from 'webcake-ui-kit'
|
|
96
96
|
import 'webcake-ui-kit/styles'
|
|
97
97
|
import App from './App.vue'
|
|
98
98
|
|
|
99
99
|
const app = createApp(App)
|
|
100
|
-
app.component('
|
|
101
|
-
app.component('
|
|
102
|
-
app.component('
|
|
100
|
+
app.component('WkButton', WkButton)
|
|
101
|
+
app.component('WkDialog', WkDialog)
|
|
102
|
+
app.component('WkInput', WkInput)
|
|
103
103
|
app.mount('#app')
|
|
104
104
|
```
|
|
105
105
|
|
|
@@ -109,13 +109,13 @@ app.mount('#app')
|
|
|
109
109
|
```js
|
|
110
110
|
// main.js
|
|
111
111
|
import Vue from 'vue'
|
|
112
|
-
import {
|
|
112
|
+
import { WkButton, WkDialog, WkInput } from 'webcake-ui-kit'
|
|
113
113
|
import 'webcake-ui-kit/styles'
|
|
114
114
|
import App from './App.vue'
|
|
115
115
|
|
|
116
|
-
Vue.component('
|
|
117
|
-
Vue.component('
|
|
118
|
-
Vue.component('
|
|
116
|
+
Vue.component('WkButton', WkButton)
|
|
117
|
+
Vue.component('WkDialog', WkDialog)
|
|
118
|
+
Vue.component('WkInput', WkInput)
|
|
119
119
|
|
|
120
120
|
new Vue({ render: h => h(App) }).$mount('#app')
|
|
121
121
|
```
|
|
@@ -129,11 +129,11 @@ new Vue({ render: h => h(App) }).$mount('#app')
|
|
|
129
129
|
```vue
|
|
130
130
|
<template>
|
|
131
131
|
<div>
|
|
132
|
-
<
|
|
132
|
+
<WkButton variant="primary" @click="open = true">Open dialog</WkButton>
|
|
133
133
|
|
|
134
|
-
<
|
|
135
|
-
<
|
|
136
|
-
</
|
|
134
|
+
<WkDialog v-model="open" title="Hello from webcake 👋">
|
|
135
|
+
<WkInput v-model="name" placeholder="Your name" />
|
|
136
|
+
</WkDialog>
|
|
137
137
|
</div>
|
|
138
138
|
</template>
|
|
139
139
|
|
|
@@ -203,23 +203,24 @@ Every component, every variant, every prop — browsable before you `npm install
|
|
|
203
203
|
|
|
204
204
|
## 🧩 Components
|
|
205
205
|
|
|
206
|
+
All exports are prefixed with **`Wk`** to avoid global name collisions and to be greppable across consumer apps.
|
|
207
|
+
|
|
206
208
|
<div align="center">
|
|
207
209
|
|
|
208
|
-
| Forms
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
|
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
218
|
-
|
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
| RichSwitchGroup | | | |
|
|
210
|
+
| Forms | Overlays | Layout | Display |
|
|
211
|
+
| :------------------------ | :------------ | :------------------ | :----------- |
|
|
212
|
+
| WkButton | WkDialog | WkAccordion | WkBadge |
|
|
213
|
+
| WkButtonGroup | WkAlertDialog | WkAccordionItem | WkTag |
|
|
214
|
+
| WkInput | WkTooltip\* | WkTabs | WkDivider |
|
|
215
|
+
| WkCheckbox | | WkBreadcrumb | WkSpinner |
|
|
216
|
+
| WkCheckboxGroup | | WkPagination | WkTypography |
|
|
217
|
+
| WkRadio / WkRadioGroup | | WkSidebarItem | |
|
|
218
|
+
| WkSelect / WkSelectOption | | WkSidebarGroupLabel | |
|
|
219
|
+
| WkSwitch / WkSwitchGroup | | | |
|
|
220
|
+
| WkToggle / WkToggleGroup | | | |
|
|
221
|
+
| WkSlider | | | |
|
|
222
|
+
| WkRichCheckboxGroup | | | |
|
|
223
|
+
| WkRichSwitchGroup | | | |
|
|
223
224
|
|
|
224
225
|
<sub>\* coming soon · _more on the way_</sub>
|
|
225
226
|
|
|
@@ -351,7 +352,7 @@ Before opening one:
|
|
|
351
352
|
|
|
352
353
|
## 📜 License
|
|
353
354
|
|
|
354
|
-
**
|
|
355
|
+
**MIT** © Webcake Team — use it, fork it, ship it.
|
|
355
356
|
|
|
356
357
|
---
|
|
357
358
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webcake-ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "UI Kit for Vue 2 && 3 - Pure Options API",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"./WkTag": "./src/components/tag/Tag.vue",
|
|
45
45
|
"./WkToggle": "./src/components/toggle/Toggle.vue",
|
|
46
46
|
"./WkToggleGroup": "./src/components/toggle-group/ToggleGroup.vue",
|
|
47
|
+
"./WkTypography": "./src/components/typography/Typography.vue",
|
|
47
48
|
"./components/*": "./src/components/*",
|
|
48
49
|
"./package.json": "./package.json"
|
|
49
50
|
},
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
:is="resolvedTag"
|
|
4
|
+
:class="[
|
|
5
|
+
'ui-typography',
|
|
6
|
+
`wk-${variant}`,
|
|
7
|
+
weight ? `wk-weight-${weight}` : null,
|
|
8
|
+
align !== 'inherit' ? `wk-text-${align}` : null
|
|
9
|
+
]"
|
|
10
|
+
:style="rootStyle"
|
|
11
|
+
>
|
|
12
|
+
<slot>{{ text }}</slot>
|
|
13
|
+
</component>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
const VARIANTS = [
|
|
18
|
+
'heading-1',
|
|
19
|
+
'heading-2',
|
|
20
|
+
'heading-3',
|
|
21
|
+
'heading-4',
|
|
22
|
+
'paragraph-large',
|
|
23
|
+
'paragraph-regular',
|
|
24
|
+
'paragraph-small',
|
|
25
|
+
'paragraph-mini',
|
|
26
|
+
'caption',
|
|
27
|
+
'caption-mini',
|
|
28
|
+
'monospaced'
|
|
29
|
+
]
|
|
30
|
+
|
|
31
|
+
const DEFAULT_TAGS = {
|
|
32
|
+
'heading-1': 'h1',
|
|
33
|
+
'heading-2': 'h2',
|
|
34
|
+
'heading-3': 'h3',
|
|
35
|
+
'heading-4': 'h4',
|
|
36
|
+
'paragraph-large': 'p',
|
|
37
|
+
'paragraph-regular': 'p',
|
|
38
|
+
'paragraph-small': 'p',
|
|
39
|
+
'paragraph-mini': 'p',
|
|
40
|
+
caption: 'span',
|
|
41
|
+
'caption-mini': 'span',
|
|
42
|
+
monospaced: 'span'
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const COLORS = [
|
|
46
|
+
'',
|
|
47
|
+
'primary-fg',
|
|
48
|
+
'secondary-fg',
|
|
49
|
+
'muted-fg',
|
|
50
|
+
'accent-fg',
|
|
51
|
+
'inverse-fg',
|
|
52
|
+
'destructive',
|
|
53
|
+
'destructive-text'
|
|
54
|
+
]
|
|
55
|
+
|
|
56
|
+
const WEIGHTS = ['', 'regular', 'medium', 'bold']
|
|
57
|
+
const ALIGNS = ['inherit', 'left', 'center', 'right']
|
|
58
|
+
|
|
59
|
+
export default {
|
|
60
|
+
name: 'Typography',
|
|
61
|
+
props: {
|
|
62
|
+
variant: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: 'paragraph-regular',
|
|
65
|
+
validator: v => VARIANTS.indexOf(v) !== -1
|
|
66
|
+
},
|
|
67
|
+
as: {
|
|
68
|
+
type: String,
|
|
69
|
+
default: ''
|
|
70
|
+
},
|
|
71
|
+
weight: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: '',
|
|
74
|
+
validator: v => WEIGHTS.indexOf(v) !== -1
|
|
75
|
+
},
|
|
76
|
+
color: {
|
|
77
|
+
type: String,
|
|
78
|
+
default: '',
|
|
79
|
+
validator: v => COLORS.indexOf(v) !== -1
|
|
80
|
+
},
|
|
81
|
+
align: {
|
|
82
|
+
type: String,
|
|
83
|
+
default: 'inherit',
|
|
84
|
+
validator: v => ALIGNS.indexOf(v) !== -1
|
|
85
|
+
},
|
|
86
|
+
text: {
|
|
87
|
+
type: String,
|
|
88
|
+
default: ''
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
emits: [],
|
|
92
|
+
computed: {
|
|
93
|
+
resolvedTag() {
|
|
94
|
+
return this.as || DEFAULT_TAGS[this.variant] || 'span'
|
|
95
|
+
},
|
|
96
|
+
rootStyle() {
|
|
97
|
+
if (!this.color) return null
|
|
98
|
+
return { '--ui-typography-color': 'var(--' + this.color + ')' }
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<style src="./typography.css" scoped></style>
|
package/src/index.js
CHANGED
|
@@ -27,3 +27,4 @@ export { default as WkTabs } from './components/tabs/Tabs.vue'
|
|
|
27
27
|
export { default as WkTag } from './components/tag/Tag.vue'
|
|
28
28
|
export { default as WkToggle } from './components/toggle/Toggle.vue'
|
|
29
29
|
export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
|
|
30
|
+
export { default as WkTypography } from './components/typography/Typography.vue'
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
--heading-4-letter-spacing: 0px;
|
|
36
36
|
|
|
37
37
|
/* ========================= Monospaced ========================= */
|
|
38
|
-
--monospaced-font-family: var(--font-family-
|
|
38
|
+
--monospaced-font-family: var(--font-family-monospace);
|
|
39
39
|
--monospaced-font-size: 16px;
|
|
40
40
|
--monospaced-line-height: 24px;
|
|
41
41
|
--monospaced-font-weight: 400;
|
|
@@ -86,4 +86,106 @@
|
|
|
86
86
|
--paragraph-mini-line-height: 16px;
|
|
87
87
|
--paragraph-mini-letter-spacing: 0px;
|
|
88
88
|
--paragraph-mini-spacing: 12px;
|
|
89
|
+
|
|
90
|
+
/* ========================= Font shorthand bundles =========================
|
|
91
|
+
One `font:` value per text style — composes weight, size/line-height and
|
|
92
|
+
family from the split tokens above. Note: the CSS `font` shorthand does
|
|
93
|
+
NOT include letter-spacing, so utility classes apply it separately. */
|
|
94
|
+
--font-heading-1: var(--heading-1-font-weight) var(--heading-1-font-size) / var(--heading-1-line-height)
|
|
95
|
+
var(--heading-1-font-family);
|
|
96
|
+
--font-heading-2: var(--heading-2-font-weight) var(--heading-2-font-size) / var(--heading-2-line-height)
|
|
97
|
+
var(--heading-2-font-family);
|
|
98
|
+
--font-heading-3: var(--heading-3-font-weight) var(--heading-3-font-size) / var(--heading-3-line-height)
|
|
99
|
+
var(--heading-3-font-family);
|
|
100
|
+
--font-heading-4: var(--heading-4-font-weight) var(--heading-4-font-size) / var(--heading-4-line-height)
|
|
101
|
+
var(--heading-4-font-family);
|
|
102
|
+
|
|
103
|
+
--font-paragraph-large: var(--paragraph-font-weight) var(--paragraph-large-font-size) /
|
|
104
|
+
var(--paragraph-large-line-height) var(--paragraph-large-font-family);
|
|
105
|
+
--font-paragraph-regular: var(--paragraph-font-weight) var(--paragraph-regular-font-size) /
|
|
106
|
+
var(--paragraph-regular-line-height) var(--paragraph-regular-font-family);
|
|
107
|
+
--font-paragraph-small: var(--paragraph-font-weight) var(--paragraph-small-font-size) /
|
|
108
|
+
var(--paragraph-small-line-height) var(--paragraph-small-font-family);
|
|
109
|
+
--font-paragraph-mini: var(--paragraph-font-weight) var(--paragraph-mini-font-size) /
|
|
110
|
+
var(--paragraph-mini-line-height) var(--paragraph-mini-font-family);
|
|
111
|
+
|
|
112
|
+
--font-caption: var(--caption-font-weight) var(--caption-font-size) / var(--caption-line-height)
|
|
113
|
+
var(--caption-font-family);
|
|
114
|
+
--font-caption-mini: var(--caption-mini-font-weight) var(--caption-mini-font-size) / var(--caption-mini-line-height)
|
|
115
|
+
var(--caption-mini-font-family);
|
|
116
|
+
--font-monospaced: var(--monospaced-font-weight) var(--monospaced-font-size) / var(--monospaced-line-height)
|
|
117
|
+
var(--monospaced-font-family);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* ========================= Utility classes =========================
|
|
121
|
+
Apply a typography style via class instead of inline CSS.
|
|
122
|
+
Use the weight modifier classes after a paragraph class to override
|
|
123
|
+
weight (paragraph defaults to 400, --medium = 500, --bold = 600). */
|
|
124
|
+
.wk-heading-1 {
|
|
125
|
+
font: var(--font-heading-1);
|
|
126
|
+
letter-spacing: var(--heading-1-letter-spacing);
|
|
127
|
+
}
|
|
128
|
+
.wk-heading-2 {
|
|
129
|
+
font: var(--font-heading-2);
|
|
130
|
+
letter-spacing: var(--heading-2-letter-spacing);
|
|
131
|
+
}
|
|
132
|
+
.wk-heading-3 {
|
|
133
|
+
font: var(--font-heading-3);
|
|
134
|
+
letter-spacing: var(--heading-3-letter-spacing);
|
|
135
|
+
}
|
|
136
|
+
.wk-heading-4 {
|
|
137
|
+
font: var(--font-heading-4);
|
|
138
|
+
letter-spacing: var(--heading-4-letter-spacing);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.wk-paragraph-large {
|
|
142
|
+
font: var(--font-paragraph-large);
|
|
143
|
+
letter-spacing: var(--paragraph-large-letter-spacing);
|
|
144
|
+
}
|
|
145
|
+
.wk-paragraph-regular {
|
|
146
|
+
font: var(--font-paragraph-regular);
|
|
147
|
+
letter-spacing: var(--paragraph-regular-letter-spacing);
|
|
148
|
+
}
|
|
149
|
+
.wk-paragraph-small {
|
|
150
|
+
font: var(--font-paragraph-small);
|
|
151
|
+
letter-spacing: var(--paragraph-small-letter-spacing);
|
|
152
|
+
}
|
|
153
|
+
.wk-paragraph-mini {
|
|
154
|
+
font: var(--font-paragraph-mini);
|
|
155
|
+
letter-spacing: var(--paragraph-mini-letter-spacing);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.wk-caption {
|
|
159
|
+
font: var(--font-caption);
|
|
160
|
+
letter-spacing: var(--caption-letter-spacing);
|
|
161
|
+
}
|
|
162
|
+
.wk-caption-mini {
|
|
163
|
+
font: var(--font-caption-mini);
|
|
164
|
+
letter-spacing: var(--caption-mini-letter-spacing);
|
|
165
|
+
}
|
|
166
|
+
.wk-monospaced {
|
|
167
|
+
font: var(--font-monospaced);
|
|
168
|
+
letter-spacing: var(--monospaced-letter-spacing);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Weight overrides — declared after variants so they win at equal specificity. */
|
|
172
|
+
.wk-weight-regular {
|
|
173
|
+
font-weight: var(--paragraph-font-weight);
|
|
174
|
+
}
|
|
175
|
+
.wk-weight-medium {
|
|
176
|
+
font-weight: var(--paragraph-medium-font-weight);
|
|
177
|
+
}
|
|
178
|
+
.wk-weight-bold {
|
|
179
|
+
font-weight: var(--paragraph-bold-font-weight);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* Alignment helpers. */
|
|
183
|
+
.wk-text-left {
|
|
184
|
+
text-align: left;
|
|
185
|
+
}
|
|
186
|
+
.wk-text-center {
|
|
187
|
+
text-align: center;
|
|
188
|
+
}
|
|
189
|
+
.wk-text-right {
|
|
190
|
+
text-align: right;
|
|
89
191
|
}
|