@dpa-id-components/dpa-shared-components 4.0.1-0 → 4.0.1-2
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/dist/UseTailwindBreakpoints.stories.ts +22 -0
- package/dist/UseTailwindBreakpoints.vue +12 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/dpa-shared-components.mjs +2117 -2015
- package/dist/dpa-shared-components.umd.js +6 -6
- package/dist/screens.js +13 -0
- package/dist/screens.json +7 -0
- package/dist/tailwind/screens.d.ts +8 -0
- package/dist/tailwind/tailwind.config.d.cts +206 -0
- package/dist/tailwind/useTailwindBreakpoints.d.ts +9 -0
- package/dist/tailwind.config.cjs +37 -42
- package/dist/useTailwindBreakpoints.ts +19 -0
- package/package.json +2 -1
package/dist/screens.js
ADDED
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
export namespace theme {
|
|
2
|
+
export const inset: {
|
|
3
|
+
0: number;
|
|
4
|
+
"1/2": string;
|
|
5
|
+
full: string;
|
|
6
|
+
};
|
|
7
|
+
export { screens };
|
|
8
|
+
export const fontSize: {
|
|
9
|
+
xs: string;
|
|
10
|
+
sm: string;
|
|
11
|
+
base: string;
|
|
12
|
+
lg: string;
|
|
13
|
+
xl: string;
|
|
14
|
+
"2xl": string;
|
|
15
|
+
"3xl": string;
|
|
16
|
+
"4xl": string;
|
|
17
|
+
"5xl": string;
|
|
18
|
+
"6xl": string;
|
|
19
|
+
"7xl": string;
|
|
20
|
+
};
|
|
21
|
+
export const spacing: {
|
|
22
|
+
px: string;
|
|
23
|
+
0: string;
|
|
24
|
+
0.5: string;
|
|
25
|
+
1: string;
|
|
26
|
+
1.5: string;
|
|
27
|
+
2: string;
|
|
28
|
+
2.5: string;
|
|
29
|
+
3: string;
|
|
30
|
+
3.5: string;
|
|
31
|
+
4: string;
|
|
32
|
+
5: string;
|
|
33
|
+
6: string;
|
|
34
|
+
7: string;
|
|
35
|
+
8: string;
|
|
36
|
+
9: string;
|
|
37
|
+
10: string;
|
|
38
|
+
11: string;
|
|
39
|
+
12: string;
|
|
40
|
+
14: string;
|
|
41
|
+
16: string;
|
|
42
|
+
20: string;
|
|
43
|
+
24: string;
|
|
44
|
+
28: string;
|
|
45
|
+
32: string;
|
|
46
|
+
36: string;
|
|
47
|
+
37: string;
|
|
48
|
+
40: string;
|
|
49
|
+
41: string;
|
|
50
|
+
44: string;
|
|
51
|
+
48: string;
|
|
52
|
+
52: string;
|
|
53
|
+
56: string;
|
|
54
|
+
60: string;
|
|
55
|
+
64: string;
|
|
56
|
+
72: string;
|
|
57
|
+
80: string;
|
|
58
|
+
96: string;
|
|
59
|
+
};
|
|
60
|
+
export namespace extend {
|
|
61
|
+
export namespace outline {
|
|
62
|
+
const blue: string[];
|
|
63
|
+
}
|
|
64
|
+
export namespace fontFamily {
|
|
65
|
+
const sans: string[];
|
|
66
|
+
const marketing: string[];
|
|
67
|
+
}
|
|
68
|
+
export namespace spacing_1 {
|
|
69
|
+
const inherit: string;
|
|
70
|
+
const half: string;
|
|
71
|
+
const inputFocused: string;
|
|
72
|
+
}
|
|
73
|
+
export { spacing_1 as spacing };
|
|
74
|
+
export const duration: {
|
|
75
|
+
0: string;
|
|
76
|
+
};
|
|
77
|
+
export const colors: {
|
|
78
|
+
transparent: string;
|
|
79
|
+
black: string;
|
|
80
|
+
white: string;
|
|
81
|
+
gray: {
|
|
82
|
+
100: string;
|
|
83
|
+
200: string;
|
|
84
|
+
300: string;
|
|
85
|
+
400: string;
|
|
86
|
+
500: string;
|
|
87
|
+
600: string;
|
|
88
|
+
700: string;
|
|
89
|
+
800: string;
|
|
90
|
+
900: string;
|
|
91
|
+
};
|
|
92
|
+
blue: {
|
|
93
|
+
default: string;
|
|
94
|
+
dark: string;
|
|
95
|
+
};
|
|
96
|
+
red: {
|
|
97
|
+
default: string;
|
|
98
|
+
dark: string;
|
|
99
|
+
};
|
|
100
|
+
pink: {
|
|
101
|
+
default: string;
|
|
102
|
+
dark: string;
|
|
103
|
+
};
|
|
104
|
+
purple: {
|
|
105
|
+
default: string;
|
|
106
|
+
dark: string;
|
|
107
|
+
};
|
|
108
|
+
cyan: {
|
|
109
|
+
default: string;
|
|
110
|
+
dark: string;
|
|
111
|
+
};
|
|
112
|
+
teal: {
|
|
113
|
+
default: string;
|
|
114
|
+
dark: string;
|
|
115
|
+
};
|
|
116
|
+
green: {
|
|
117
|
+
default: string;
|
|
118
|
+
dark: string;
|
|
119
|
+
};
|
|
120
|
+
yellow: {
|
|
121
|
+
default: string;
|
|
122
|
+
dark: string;
|
|
123
|
+
};
|
|
124
|
+
orange: {
|
|
125
|
+
default: string;
|
|
126
|
+
dark: string;
|
|
127
|
+
};
|
|
128
|
+
"alert-red": {
|
|
129
|
+
default: string;
|
|
130
|
+
dark: string;
|
|
131
|
+
};
|
|
132
|
+
"alert-green": {
|
|
133
|
+
default: string;
|
|
134
|
+
dark: string;
|
|
135
|
+
};
|
|
136
|
+
"neon-green": string;
|
|
137
|
+
rainbow: {
|
|
138
|
+
red: string;
|
|
139
|
+
"red-dark": string;
|
|
140
|
+
orange: string;
|
|
141
|
+
purple: string;
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
export const opacity: {
|
|
145
|
+
60: string;
|
|
146
|
+
20: string;
|
|
147
|
+
};
|
|
148
|
+
export namespace boxShadow {
|
|
149
|
+
const _default: string;
|
|
150
|
+
export { _default as default };
|
|
151
|
+
export const negative: string;
|
|
152
|
+
export const md: string;
|
|
153
|
+
export const lg: string;
|
|
154
|
+
}
|
|
155
|
+
const inset_1: {
|
|
156
|
+
0: number;
|
|
157
|
+
auto: string;
|
|
158
|
+
1: string;
|
|
159
|
+
3: string;
|
|
160
|
+
4: string;
|
|
161
|
+
5: string;
|
|
162
|
+
12: string;
|
|
163
|
+
16: string;
|
|
164
|
+
full: string;
|
|
165
|
+
};
|
|
166
|
+
export { inset_1 as inset };
|
|
167
|
+
export namespace screens_1 {
|
|
168
|
+
namespace print {
|
|
169
|
+
const raw: string;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
export { screens_1 as screens };
|
|
173
|
+
export const lineHeight: {
|
|
174
|
+
3: string;
|
|
175
|
+
4: string;
|
|
176
|
+
5: string;
|
|
177
|
+
6: string;
|
|
178
|
+
7: string;
|
|
179
|
+
8: string;
|
|
180
|
+
9: string;
|
|
181
|
+
10: string;
|
|
182
|
+
};
|
|
183
|
+
export const width: {
|
|
184
|
+
4.5: string;
|
|
185
|
+
};
|
|
186
|
+
export const height: {
|
|
187
|
+
4.5: string;
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
export const maxHeight: {
|
|
191
|
+
60: string;
|
|
192
|
+
};
|
|
193
|
+
}
|
|
194
|
+
export namespace variants {
|
|
195
|
+
const opacity_1: string[];
|
|
196
|
+
export { opacity_1 as opacity };
|
|
197
|
+
const outline_1: string[];
|
|
198
|
+
export { outline_1 as outline };
|
|
199
|
+
export const display: string[];
|
|
200
|
+
export const textColor: string[];
|
|
201
|
+
export const textDecoration: string[];
|
|
202
|
+
}
|
|
203
|
+
export const plugins: (typeof import("@tailwindcss/typography") | {
|
|
204
|
+
handler: import("tailwindcss/types/config").PluginCreator;
|
|
205
|
+
config?: Partial<import("tailwindcss/types/config").Config> | undefined;
|
|
206
|
+
})[];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare const _default: () => {
|
|
2
|
+
currentBreakpoint: import("vue").ComputedRef<string[]>;
|
|
3
|
+
sm: import("vue").ComputedRef<boolean>;
|
|
4
|
+
md: import("vue").ComputedRef<boolean>;
|
|
5
|
+
lg: import("vue").ComputedRef<boolean>;
|
|
6
|
+
xl: import("vue").ComputedRef<boolean>;
|
|
7
|
+
xxl: import("vue").ComputedRef<boolean>;
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|
package/dist/tailwind.config.cjs
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
|
+
const screens = require("./screens");
|
|
2
|
+
|
|
1
3
|
module.exports = {
|
|
2
4
|
theme: {
|
|
3
5
|
inset: {
|
|
4
6
|
0: 0,
|
|
5
7
|
"1/2": "50%",
|
|
6
|
-
full: "100%"
|
|
7
|
-
},
|
|
8
|
-
screens: {
|
|
9
|
-
sm: "640px",
|
|
10
|
-
md: "768px",
|
|
11
|
-
lg: "1024px",
|
|
12
|
-
xl: "1280px",
|
|
13
|
-
xxl: "1600px"
|
|
8
|
+
full: "100%",
|
|
14
9
|
},
|
|
10
|
+
screens,
|
|
15
11
|
fontSize: {
|
|
16
12
|
xs: "12px",
|
|
17
13
|
sm: "14px",
|
|
@@ -23,7 +19,7 @@ module.exports = {
|
|
|
23
19
|
"4xl": "36px",
|
|
24
20
|
"5xl": "48px",
|
|
25
21
|
"6xl": "60px",
|
|
26
|
-
"7xl": "72px"
|
|
22
|
+
"7xl": "72px",
|
|
27
23
|
},
|
|
28
24
|
spacing: {
|
|
29
25
|
px: "1px",
|
|
@@ -62,23 +58,23 @@ module.exports = {
|
|
|
62
58
|
64: "256px",
|
|
63
59
|
72: "288px",
|
|
64
60
|
80: "320px",
|
|
65
|
-
96: "384px"
|
|
61
|
+
96: "384px",
|
|
66
62
|
},
|
|
67
63
|
extend: {
|
|
68
64
|
outline: {
|
|
69
|
-
blue: ["2px solid rgba(0, 62, 219, 0.5)", "2px"]
|
|
65
|
+
blue: ["2px solid rgba(0, 62, 219, 0.5)", "2px"],
|
|
70
66
|
},
|
|
71
67
|
fontFamily: {
|
|
72
68
|
sans: ["Inter", "sans-serif"],
|
|
73
|
-
marketing: ["Futura", "sans-serif"]
|
|
69
|
+
marketing: ["Futura", "sans-serif"],
|
|
74
70
|
},
|
|
75
71
|
spacing: {
|
|
76
72
|
inherit: "inherit",
|
|
77
73
|
half: "2px", // 2px,
|
|
78
|
-
inputFocused: "15px"
|
|
74
|
+
inputFocused: "15px",
|
|
79
75
|
},
|
|
80
76
|
duration: {
|
|
81
|
-
0: "0ms"
|
|
77
|
+
0: "0ms",
|
|
82
78
|
},
|
|
83
79
|
colors: {
|
|
84
80
|
transparent: "rgba(255, 255, 255, 0)",
|
|
@@ -94,69 +90,69 @@ module.exports = {
|
|
|
94
90
|
600: "#7E7E7E",
|
|
95
91
|
700: "#757575",
|
|
96
92
|
800: "#4D4D4D",
|
|
97
|
-
900: "#212121"
|
|
93
|
+
900: "#212121",
|
|
98
94
|
},
|
|
99
95
|
blue: {
|
|
100
96
|
default: "#003edb",
|
|
101
|
-
dark: "#0030aa"
|
|
97
|
+
dark: "#0030aa",
|
|
102
98
|
},
|
|
103
99
|
red: {
|
|
104
100
|
default: "#E53935",
|
|
105
|
-
dark: "#AB000D"
|
|
101
|
+
dark: "#AB000D",
|
|
106
102
|
},
|
|
107
103
|
pink: {
|
|
108
104
|
default: "#F5138D",
|
|
109
|
-
dark: "#BD0060"
|
|
105
|
+
dark: "#BD0060",
|
|
110
106
|
},
|
|
111
107
|
purple: {
|
|
112
108
|
default: "#8E24AA",
|
|
113
|
-
dark: "#5C007A"
|
|
109
|
+
dark: "#5C007A",
|
|
114
110
|
},
|
|
115
111
|
cyan: {
|
|
116
112
|
default: "#00ACC1",
|
|
117
|
-
dark: "#007C91"
|
|
113
|
+
dark: "#007C91",
|
|
118
114
|
},
|
|
119
115
|
teal: {
|
|
120
116
|
default: "#00897B",
|
|
121
|
-
dark: "#005B4F"
|
|
117
|
+
dark: "#005B4F",
|
|
122
118
|
},
|
|
123
119
|
green: {
|
|
124
120
|
default: "#30DF7B",
|
|
125
|
-
dark: "#00AC4D"
|
|
121
|
+
dark: "#00AC4D",
|
|
126
122
|
},
|
|
127
123
|
yellow: {
|
|
128
124
|
default: "#F9F500",
|
|
129
|
-
dark: "#C1BE00"
|
|
125
|
+
dark: "#C1BE00",
|
|
130
126
|
},
|
|
131
127
|
orange: {
|
|
132
128
|
default: "#FFB300",
|
|
133
|
-
dark: "#C68400"
|
|
129
|
+
dark: "#C68400",
|
|
134
130
|
},
|
|
135
131
|
"alert-red": {
|
|
136
132
|
default: "#F53000",
|
|
137
|
-
dark: "#BA2400"
|
|
133
|
+
dark: "#BA2400",
|
|
138
134
|
},
|
|
139
135
|
"alert-green": {
|
|
140
136
|
default: "#00D200",
|
|
141
|
-
dark: "#00AA00"
|
|
137
|
+
dark: "#00AA00",
|
|
142
138
|
},
|
|
143
139
|
"neon-green": "#00E281",
|
|
144
140
|
rainbow: {
|
|
145
141
|
red: "#E53935",
|
|
146
142
|
"red-dark": "#AB000D",
|
|
147
143
|
orange: "#FFB300",
|
|
148
|
-
purple: "#8E24AA"
|
|
149
|
-
}
|
|
144
|
+
purple: "#8E24AA",
|
|
145
|
+
},
|
|
150
146
|
},
|
|
151
147
|
opacity: {
|
|
152
148
|
60: "0.6",
|
|
153
|
-
20: "0.2"
|
|
149
|
+
20: "0.2",
|
|
154
150
|
},
|
|
155
151
|
boxShadow: {
|
|
156
152
|
default: "0px 1px 1px rgba(0, 0, 0, 0.1)",
|
|
157
153
|
negative: "0px -1px 1px rgba(0, 0, 0, 0.1)",
|
|
158
154
|
md: "0px 1px 5px rgba(0, 0, 0, 0.1)",
|
|
159
|
-
lg: "0px 2px 6px rgba(0, 0, 0, 0.25)"
|
|
155
|
+
lg: "0px 2px 6px rgba(0, 0, 0, 0.25)",
|
|
160
156
|
},
|
|
161
157
|
inset: {
|
|
162
158
|
0: 0,
|
|
@@ -167,10 +163,10 @@ module.exports = {
|
|
|
167
163
|
5: "20px",
|
|
168
164
|
12: "48px",
|
|
169
165
|
16: "64px",
|
|
170
|
-
full: "100%"
|
|
166
|
+
full: "100%",
|
|
171
167
|
},
|
|
172
168
|
screens: {
|
|
173
|
-
print: { raw: "print" }
|
|
169
|
+
print: { raw: "print" },
|
|
174
170
|
},
|
|
175
171
|
lineHeight: {
|
|
176
172
|
3: "12px",
|
|
@@ -180,29 +176,28 @@ module.exports = {
|
|
|
180
176
|
7: "28px",
|
|
181
177
|
8: "32px",
|
|
182
178
|
9: "36px",
|
|
183
|
-
10: "40px"
|
|
179
|
+
10: "40px",
|
|
184
180
|
},
|
|
185
181
|
width: {
|
|
186
|
-
|
|
182
|
+
4.5: "18px",
|
|
187
183
|
},
|
|
188
184
|
height: {
|
|
189
|
-
|
|
190
|
-
}
|
|
185
|
+
4.5: "18px",
|
|
186
|
+
},
|
|
191
187
|
},
|
|
192
188
|
maxHeight: {
|
|
193
|
-
60: "240px"
|
|
194
|
-
}
|
|
195
|
-
|
|
189
|
+
60: "240px",
|
|
190
|
+
},
|
|
196
191
|
},
|
|
197
192
|
variants: {
|
|
198
193
|
opacity: ["responsive", "hover", "focus", "group-hover"],
|
|
199
194
|
outline: ["focus", "focus-visible"],
|
|
200
195
|
display: ["responsive", "group-hover"],
|
|
201
196
|
textColor: ["responsive", "hover", "focus", "group-hover", "group-focus"],
|
|
202
|
-
textDecoration: ["group-hover"]
|
|
197
|
+
textDecoration: ["group-hover"],
|
|
203
198
|
},
|
|
204
199
|
plugins: [
|
|
205
200
|
require("@tailwindcss/typography"),
|
|
206
|
-
require("@tailwindcss/container-queries")
|
|
207
|
-
]
|
|
201
|
+
require("@tailwindcss/container-queries"),
|
|
202
|
+
],
|
|
208
203
|
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useBreakpoints } from "@vueuse/core";
|
|
2
|
+
import { computed } from "vue";
|
|
3
|
+
import screens from "./screens.json";
|
|
4
|
+
|
|
5
|
+
export default () => {
|
|
6
|
+
const breakpoints = useBreakpoints({
|
|
7
|
+
...screens,
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
const currentBreakpoint = breakpoints.current();
|
|
11
|
+
|
|
12
|
+
const sm = computed(() => currentBreakpoint.value.includes("sm"));
|
|
13
|
+
const md = computed(() => currentBreakpoint.value.includes("md"));
|
|
14
|
+
const lg = computed(() => currentBreakpoint.value.includes("lg"));
|
|
15
|
+
const xl = computed(() => currentBreakpoint.value.includes("xl"));
|
|
16
|
+
const xxl = computed(() => currentBreakpoint.value.includes("xxl"));
|
|
17
|
+
|
|
18
|
+
return { currentBreakpoint, sm, md, lg, xl, xxl };
|
|
19
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dpa-id-components/dpa-shared-components",
|
|
3
|
-
"version": "4.0.1-
|
|
3
|
+
"version": "4.0.1-2",
|
|
4
4
|
"description": "Shared Vue components library for dpa projects",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
"@tailwindcss/line-clamp": "^0.4.0",
|
|
95
95
|
"@tailwindcss/typography": "^0.5.8",
|
|
96
96
|
"@vuepic/vue-datepicker": "^5.0.0",
|
|
97
|
+
"@vueuse/core": "^10.1.2",
|
|
97
98
|
"date-fns": "^2.29.3",
|
|
98
99
|
"uuid": "^9.0.0",
|
|
99
100
|
"vue": "^3.2.45"
|