@globalbrain/sefirot 3.18.0 → 3.19.1
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/lib/components/SCardBlock.vue +17 -5
- package/lib/mixins/Doc.ts +15 -0
- package/lib/mixins/Fundamental.ts +40 -0
- package/lib/styles/utilities.css +145 -78
- package/package.json +4 -4
|
@@ -4,29 +4,41 @@ import { type CardBlockSize, provideCardBlockSize } from '../composables/Card'
|
|
|
4
4
|
|
|
5
5
|
export type { CardBlockSize as Size }
|
|
6
6
|
|
|
7
|
+
export type Bg =
|
|
8
|
+
| 'elv-1'
|
|
9
|
+
| 'elv-2'
|
|
10
|
+
| 'elv-3'
|
|
11
|
+
| 'elv-4'
|
|
12
|
+
| 'none'
|
|
13
|
+
|
|
7
14
|
// @deprecated Use CSS utility classes instead.
|
|
8
15
|
export type Space = 'compact' | 'wide' | 'xwide'
|
|
9
16
|
|
|
10
|
-
const props = defineProps<{
|
|
17
|
+
const props = withDefaults(defineProps<{
|
|
11
18
|
size?: CardBlockSize
|
|
19
|
+
bg?: Bg
|
|
12
20
|
|
|
13
21
|
// @deprecated Use CSS utility classes instead.
|
|
14
22
|
space?: Space
|
|
15
|
-
}>()
|
|
23
|
+
}>(), {
|
|
24
|
+
bg: 'elv-3'
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
const _bg = computed(() => {
|
|
28
|
+
return props.bg !== 'none' ? `s-bg-${props.bg}` : null
|
|
29
|
+
})
|
|
16
30
|
|
|
17
31
|
provideCardBlockSize(computed(() => props.size ?? null))
|
|
18
32
|
</script>
|
|
19
33
|
|
|
20
34
|
<template>
|
|
21
|
-
<div class="SCardBlock" :class="[size,
|
|
35
|
+
<div class="SCardBlock" :class="[size, _bg]">
|
|
22
36
|
<slot />
|
|
23
37
|
</div>
|
|
24
38
|
</template>
|
|
25
39
|
|
|
26
40
|
<style scoped lang="postcss">
|
|
27
41
|
.SCardBlock {
|
|
28
|
-
background-color: var(--c-bg-elv-3);
|
|
29
|
-
|
|
30
42
|
&.compact { padding: 12px; }
|
|
31
43
|
&.wide { padding: 16px; }
|
|
32
44
|
&.xwide { padding: 24px; }
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type App } from 'vue'
|
|
2
|
+
import SDoc from '../components/SDoc.vue'
|
|
3
|
+
import SDocSection from '../components/SDocSection.vue'
|
|
4
|
+
|
|
5
|
+
export function mixin(app: App): void {
|
|
6
|
+
app.component('SDoc', SDoc)
|
|
7
|
+
app.component('SDocSection', SDocSection)
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
declare module 'vue' {
|
|
11
|
+
export interface GlobalComponents {
|
|
12
|
+
SDoc: typeof SDoc
|
|
13
|
+
SDocSection: typeof SDocSection
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { type App } from 'vue'
|
|
2
|
+
import SContent from '../components/SContent.vue'
|
|
3
|
+
import SDivider from '../components/SDivider.vue'
|
|
4
|
+
import SIcon from '../components/SIcon.vue'
|
|
5
|
+
import SLink from '../components/SLink.vue'
|
|
6
|
+
import SModal from '../components/SModal.vue'
|
|
7
|
+
import STrans from '../components/STrans.vue'
|
|
8
|
+
import { mixin as mixinCard } from './Card'
|
|
9
|
+
import { mixin as mixinControl } from './Control'
|
|
10
|
+
import { mixin as mixinDesc } from './Desc'
|
|
11
|
+
import { mixin as mixinDoc } from './Doc'
|
|
12
|
+
import { mixin as mixinGrid } from './Grid'
|
|
13
|
+
import { mixin as mixinHead } from './Head'
|
|
14
|
+
|
|
15
|
+
export function mixin(app: App): void {
|
|
16
|
+
mixinCard(app)
|
|
17
|
+
mixinControl(app)
|
|
18
|
+
mixinDesc(app)
|
|
19
|
+
mixinDoc(app)
|
|
20
|
+
mixinGrid(app)
|
|
21
|
+
mixinHead(app)
|
|
22
|
+
|
|
23
|
+
app.component('SContent', SContent)
|
|
24
|
+
app.component('SDivider', SDivider)
|
|
25
|
+
app.component('SIcon', SIcon)
|
|
26
|
+
app.component('SLink', SLink)
|
|
27
|
+
app.component('SModal', SModal)
|
|
28
|
+
app.component('STrans', STrans)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
declare module 'vue' {
|
|
32
|
+
export interface GlobalComponents {
|
|
33
|
+
SContent: typeof SContent
|
|
34
|
+
SDivider: typeof SDivider
|
|
35
|
+
SIcon: typeof SIcon
|
|
36
|
+
SLink: typeof SLink
|
|
37
|
+
SModal: typeof SModal
|
|
38
|
+
STrans: typeof STrans
|
|
39
|
+
}
|
|
40
|
+
}
|
package/lib/styles/utilities.css
CHANGED
|
@@ -1,49 +1,75 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
.s-bg-elv-4 { background-color: var(--c-bg-elv-4); }
|
|
1
|
+
/**
|
|
2
|
+
* Display
|
|
3
|
+
* -------------------------------------------------------------------------- */
|
|
5
4
|
|
|
6
|
-
.s-block
|
|
5
|
+
.s-block { display: block; }
|
|
6
|
+
.s-flex { display: flex; }
|
|
7
|
+
.s-grid { display: grid; }
|
|
8
|
+
.s-inline { display: inline; }
|
|
9
|
+
.s-inline-block { display: inline-block; }
|
|
10
|
+
.s-inline-flex { display: inline-flex; }
|
|
11
|
+
.s-inline-grid { display: inline-grid; }
|
|
12
|
+
.s-hidden { display: none; }
|
|
7
13
|
|
|
8
|
-
.s-
|
|
14
|
+
.s-overflow-hidden { overflow: hidden; }
|
|
9
15
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
.s-
|
|
15
|
-
.s-
|
|
16
|
+
/**
|
|
17
|
+
* Flex & Grid
|
|
18
|
+
* -------------------------------------------------------------------------- */
|
|
19
|
+
|
|
20
|
+
.s-flex-row { flex-direction: row; }
|
|
21
|
+
.s-flex-row-reverse { flex-direction: row-reverse; }
|
|
22
|
+
.s-flex-col { flex-direction: column; }
|
|
23
|
+
.s-flex-col-reverse { flex-direction: column-reverse; }
|
|
24
|
+
.s-flex-wrap { flex-wrap: wrap; }
|
|
25
|
+
.s-flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
|
26
|
+
.s-flex-nowrap { flex-wrap: nowrap; }
|
|
27
|
+
|
|
28
|
+
.s-justify-normal { justify-content: normal; }
|
|
29
|
+
.s-justify-start { justify-content: flex-start; }
|
|
30
|
+
.s-justify-center { justify-content: center; }
|
|
31
|
+
.s-justify-end { justify-content: flex-end; }
|
|
32
|
+
.s-justify-around { justify-content: space-around; }
|
|
33
|
+
.s-justify-between { justify-content: space-between; }
|
|
34
|
+
.s-justify-evenly { justify-content: space-evenly; }
|
|
35
|
+
.s-justify-stretch { justify-content: stretch; }
|
|
36
|
+
|
|
37
|
+
.s-items-start { align-items: flex-start; }
|
|
38
|
+
.s-items-center { align-items: center; }
|
|
39
|
+
.s-items-end { align-items: flex-end; }
|
|
40
|
+
.s-items-baseline { align-items: baseline; }
|
|
41
|
+
.s-items-stretch { align-items: stretch; }
|
|
16
42
|
|
|
17
|
-
.s-
|
|
18
|
-
.s-
|
|
19
|
-
|
|
20
|
-
.s-
|
|
21
|
-
.s-
|
|
22
|
-
.s-font-w-600 { font-weight: 600; }
|
|
23
|
-
.s-font-w-700 { font-weight: 700; }
|
|
24
|
-
.s-font-w-800 { font-weight: 800; }
|
|
25
|
-
.s-font-w-900 { font-weight: 900; }
|
|
43
|
+
.s-grow { flex-grow: 1; }
|
|
44
|
+
.s-grow-0 { flex-grow: 0; }
|
|
45
|
+
|
|
46
|
+
.s-shrink { flex-shrink: 1; }
|
|
47
|
+
.s-shrink-0 { flex-shrink: 0; }
|
|
26
48
|
|
|
27
49
|
.s-gap-4 { gap: 4px; }
|
|
28
50
|
.s-gap-8 { gap: 8px; }
|
|
29
51
|
.s-gap-12 { gap: 12px; }
|
|
30
52
|
.s-gap-16 { gap: 16px; }
|
|
31
53
|
|
|
32
|
-
.s-
|
|
33
|
-
|
|
34
|
-
.s-
|
|
35
|
-
.s-
|
|
36
|
-
|
|
37
|
-
.s-
|
|
38
|
-
|
|
39
|
-
.s-
|
|
40
|
-
.s-
|
|
41
|
-
.s-
|
|
42
|
-
.s-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
54
|
+
.s-order-1 { order: 1; }
|
|
55
|
+
.s-order-2 { order: 2; }
|
|
56
|
+
.s-order-3 { order: 3; }
|
|
57
|
+
.s-order-4 { order: 4; }
|
|
58
|
+
.s-order-6 { order: 6; }
|
|
59
|
+
.s-order-7 { order: 7; }
|
|
60
|
+
.s-order-8 { order: 8; }
|
|
61
|
+
.s-order-9 { order: 9; }
|
|
62
|
+
.s-order-10 { order: 10; }
|
|
63
|
+
.s-order-11 { order: 11; }
|
|
64
|
+
.s-order-12 { order: 12; }
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Spacing
|
|
68
|
+
* -------------------------------------------------------------------------- */
|
|
69
|
+
|
|
70
|
+
.s-m-auto { margin: auto; }
|
|
71
|
+
.s-my-auto { margin-top: auto; margin-bottom: auto; }
|
|
72
|
+
.s-mx-auto { margin-right: auto; margin-left: auto; }
|
|
47
73
|
|
|
48
74
|
.s-p-8 { padding: 8px; }
|
|
49
75
|
.s-p-12 { padding: 12px; }
|
|
@@ -54,6 +80,42 @@
|
|
|
54
80
|
.s-p-56 { padding: 56px; }
|
|
55
81
|
.s-p-64 { padding: 64px; }
|
|
56
82
|
|
|
83
|
+
.s-py-8 { padding-top: 8px; padding-bottom: 8px; }
|
|
84
|
+
.s-py-12 { padding-top: 12px; padding-bottom: 12px; }
|
|
85
|
+
.s-py-16 { padding-top: 16px; padding-bottom: 16px; }
|
|
86
|
+
.s-py-24 { padding-top: 24px; padding-bottom: 24px; }
|
|
87
|
+
.s-py-32 { padding-top: 32px; padding-bottom: 32px; }
|
|
88
|
+
.s-py-48 { padding-top: 48px; padding-bottom: 48px; }
|
|
89
|
+
.s-py-56 { padding-top: 56px; padding-bottom: 56px; }
|
|
90
|
+
.s-py-64 { padding-top: 64px; padding-bottom: 64px; }
|
|
91
|
+
|
|
92
|
+
.s-px-8 { padding-right: 8px; padding-left: 8px; }
|
|
93
|
+
.s-px-12 { padding-right: 12px; padding-left: 12px; }
|
|
94
|
+
.s-px-16 { padding-right: 16px; padding-left: 16px; }
|
|
95
|
+
.s-px-24 { padding-right: 24px; padding-left: 24px; }
|
|
96
|
+
.s-px-32 { padding-right: 32px; padding-left: 32px; }
|
|
97
|
+
.s-px-48 { padding-right: 48px; padding-left: 48px; }
|
|
98
|
+
.s-px-56 { padding-right: 56px; padding-left: 56px; }
|
|
99
|
+
.s-px-64 { padding-right: 64px; padding-left: 64px; }
|
|
100
|
+
|
|
101
|
+
.s-pt-8 { padding-top: 8px; }
|
|
102
|
+
.s-pt-12 { padding-top: 12px; }
|
|
103
|
+
.s-pt-16 { padding-top: 16px; }
|
|
104
|
+
.s-pt-24 { padding-top: 24px; }
|
|
105
|
+
.s-pt-32 { padding-top: 32px; }
|
|
106
|
+
.s-pt-48 { padding-top: 48px; }
|
|
107
|
+
.s-pt-56 { padding-top: 56px; }
|
|
108
|
+
.s-pt-64 { padding-top: 64px; }
|
|
109
|
+
|
|
110
|
+
.s-pr-8 { padding-right: 8px; }
|
|
111
|
+
.s-pr-12 { padding-right: 12px; }
|
|
112
|
+
.s-pr-16 { padding-right: 16px; }
|
|
113
|
+
.s-pr-24 { padding-right: 24px; }
|
|
114
|
+
.s-pr-32 { padding-right: 32px; }
|
|
115
|
+
.s-pr-48 { padding-right: 48px; }
|
|
116
|
+
.s-pr-56 { padding-right: 56px; }
|
|
117
|
+
.s-pr-64 { padding-right: 64px; }
|
|
118
|
+
|
|
57
119
|
.s-pb-8 { padding-bottom: 8px; }
|
|
58
120
|
.s-pb-12 { padding-bottom: 12px; }
|
|
59
121
|
.s-pb-16 { padding-bottom: 16px; }
|
|
@@ -72,53 +134,58 @@
|
|
|
72
134
|
.s-pl-56 { padding-left: 56px; }
|
|
73
135
|
.s-pl-64 { padding-left: 64px; }
|
|
74
136
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
.s-
|
|
80
|
-
.s-
|
|
81
|
-
.s-
|
|
82
|
-
.s-
|
|
83
|
-
|
|
84
|
-
.s-
|
|
85
|
-
.s-
|
|
86
|
-
.s-
|
|
87
|
-
.s-
|
|
88
|
-
.s-
|
|
89
|
-
.s-
|
|
90
|
-
.s-
|
|
91
|
-
.s-
|
|
137
|
+
/**
|
|
138
|
+
* Sizing
|
|
139
|
+
* -------------------------------------------------------------------------- */
|
|
140
|
+
|
|
141
|
+
.s-w-256 { width: 256px; }
|
|
142
|
+
.s-w-320 { width: 320px; }
|
|
143
|
+
.s-w-512 { width: 512px; }
|
|
144
|
+
.s-w-full { max-width: 100%; }
|
|
145
|
+
|
|
146
|
+
.s-max-w-256 { max-width: 256px; }
|
|
147
|
+
.s-max-w-320 { max-width: 320px; }
|
|
148
|
+
.s-max-w-512 { max-width: 512px; }
|
|
149
|
+
.s-max-w-prose { max-width: 65ch; }
|
|
150
|
+
.s-max-w-full { max-width: 100%; }
|
|
151
|
+
.s-max-w-xs { max-width: 320px; }
|
|
152
|
+
.s-max-w-sm { max-width: 512px; }
|
|
153
|
+
.s-max-w-md { max-width: 768px; }
|
|
154
|
+
.s-max-w-lg { max-width: 960px; }
|
|
155
|
+
.s-max-w-xl { max-width: 1216px; }
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* Typography
|
|
159
|
+
* -------------------------------------------------------------------------- */
|
|
92
160
|
|
|
93
|
-
.s-
|
|
94
|
-
.s-
|
|
95
|
-
.s-
|
|
96
|
-
.s-
|
|
97
|
-
.s-
|
|
98
|
-
.s-
|
|
99
|
-
.s-px-56 { padding-right: 56px; padding-left: 56px; }
|
|
100
|
-
.s-px-64 { padding-right: 64px; padding-left: 64px; }
|
|
101
|
-
|
|
102
|
-
.s-py-8 { padding-top: 8px; padding-bottom: 8px; }
|
|
103
|
-
.s-py-12 { padding-top: 12px; padding-bottom: 12px; }
|
|
104
|
-
.s-py-16 { padding-top: 16px; padding-bottom: 16px; }
|
|
105
|
-
.s-py-24 { padding-top: 24px; padding-bottom: 24px; }
|
|
106
|
-
.s-py-32 { padding-top: 32px; padding-bottom: 32px; }
|
|
107
|
-
.s-py-48 { padding-top: 48px; padding-bottom: 48px; }
|
|
108
|
-
.s-py-56 { padding-top: 56px; padding-bottom: 56px; }
|
|
109
|
-
.s-py-64 { padding-top: 64px; padding-bottom: 64px; }
|
|
161
|
+
.s-font-12 { font-size: 12px; }
|
|
162
|
+
.s-font-14 { font-size: 14px; }
|
|
163
|
+
.s-font-16 { font-size: 16px; }
|
|
164
|
+
.s-font-20 { font-size: 20px; }
|
|
165
|
+
.s-font-24 { font-size: 24px; }
|
|
166
|
+
.s-font-32 { font-size: 32px; }
|
|
110
167
|
|
|
111
|
-
.s-
|
|
112
|
-
.s-
|
|
168
|
+
.s-font-w-100 { font-weight: 100; }
|
|
169
|
+
.s-font-w-200 { font-weight: 200; }
|
|
170
|
+
.s-font-w-300 { font-weight: 300; }
|
|
171
|
+
.s-font-w-400 { font-weight: 400; }
|
|
172
|
+
.s-font-w-500 { font-weight: 500; }
|
|
173
|
+
.s-font-w-600 { font-weight: 600; }
|
|
174
|
+
.s-font-w-700 { font-weight: 700; }
|
|
175
|
+
.s-font-w-800 { font-weight: 800; }
|
|
176
|
+
.s-font-w-900 { font-weight: 900; }
|
|
113
177
|
|
|
114
178
|
.s-text-1 { color: var(--c-text-1); }
|
|
115
179
|
.s-text-2 { color: var(--c-text-2); }
|
|
116
180
|
.s-text-3 { color: var(--c-text-3); }
|
|
117
181
|
|
|
118
|
-
.s-
|
|
119
|
-
|
|
120
|
-
|
|
182
|
+
.s-nowrap { white-space: nowrap; }
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* Backgrounds
|
|
186
|
+
* -------------------------------------------------------------------------- */
|
|
121
187
|
|
|
122
|
-
.s-
|
|
123
|
-
.s-
|
|
124
|
-
.s-
|
|
188
|
+
.s-bg-elv-1 { background-color: var(--c-bg-elv-1); }
|
|
189
|
+
.s-bg-elv-2 { background-color: var(--c-bg-elv-2); }
|
|
190
|
+
.s-bg-elv-3 { background-color: var(--c-bg-elv-3); }
|
|
191
|
+
.s-bg-elv-4 { background-color: var(--c-bg-elv-4); }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@globalbrain/sefirot",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.19.1",
|
|
4
4
|
"packageManager": "pnpm@8.12.1",
|
|
5
5
|
"description": "Vue Components for Global Brain Design System.",
|
|
6
6
|
"author": "Kia Ishii <ka.ishii@globalbrains.com>",
|
|
@@ -63,6 +63,8 @@
|
|
|
63
63
|
"@tanstack/vue-virtual": "3.0.0-beta.62",
|
|
64
64
|
"@tinyhttp/content-disposition": "^2.2.0",
|
|
65
65
|
"@tinyhttp/cookie": "^2.1.0",
|
|
66
|
+
"@types/file-saver": "^2.0.7",
|
|
67
|
+
"@types/qs": "^6.9.11",
|
|
66
68
|
"dayjs": "^1.11.10",
|
|
67
69
|
"file-saver": "^2.0.5",
|
|
68
70
|
"ofetch": "^1.3.3",
|
|
@@ -76,12 +78,10 @@
|
|
|
76
78
|
"@iconify/vue": "^4.1.1",
|
|
77
79
|
"@release-it/conventional-changelog": "^8.0.1",
|
|
78
80
|
"@types/body-scroll-lock": "^3.1.2",
|
|
79
|
-
"@types/file-saver": "^2.0.7",
|
|
80
81
|
"@types/lodash-es": "^4.17.12",
|
|
81
82
|
"@types/markdown-it": "^13.0.7",
|
|
82
83
|
"@types/node": "^20.10.5",
|
|
83
|
-
"@
|
|
84
|
-
"@vitejs/plugin-vue": "^4.5.2",
|
|
84
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
85
85
|
"@vitest/coverage-v8": "^1.1.0",
|
|
86
86
|
"@vue/test-utils": "^2.4.3",
|
|
87
87
|
"@vuelidate/core": "^2.0.3",
|