@mantine-vue/mantine-header 1.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/cjs/index.cjs +293 -0
- package/cjs/index.cjs.map +1 -0
- package/esm/index.mjs +284 -0
- package/esm/index.mjs.map +1 -0
- package/lib/ColorSchemeControl.d.ts +3 -0
- package/lib/DirectionControl.d.ts +3 -0
- package/lib/DiscordControl.d.ts +13 -0
- package/lib/GithubControl.d.ts +13 -0
- package/lib/HeaderControl.d.ts +37 -0
- package/lib/HeaderControls.d.ts +87 -0
- package/lib/SearchControl/SearchControl.d.ts +3 -0
- package/lib/SearchControl/index.d.ts +1 -0
- package/lib/SearchMobileControl.d.ts +14 -0
- package/lib/SupportControl.d.ts +3 -0
- package/lib/icons/DiscordIcon.d.ts +16 -0
- package/lib/icons/GithubIcon.d.ts +16 -0
- package/lib/index.d.mts +9 -0
- package/lib/index.d.ts +9 -0
- package/package.json +42 -0
- package/styles.css +160 -0
- package/styles.layer.css +162 -0
package/cjs/index.cjs
ADDED
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let vue = require("vue");
|
|
3
|
+
let _mantine_vue_core = require("@mantine-vue/core");
|
|
4
|
+
let _phosphor_icons_vue = require("@phosphor-icons/vue");
|
|
5
|
+
var HeaderControl_module_default = { control: "_control_1fscv_1" };
|
|
6
|
+
//#endregion
|
|
7
|
+
//#region src/HeaderControl.ts
|
|
8
|
+
var HeaderControl = (0, vue.defineComponent)({
|
|
9
|
+
name: "HeaderControl",
|
|
10
|
+
inheritAttrs: false,
|
|
11
|
+
props: {
|
|
12
|
+
tooltip: {
|
|
13
|
+
type: String,
|
|
14
|
+
required: true
|
|
15
|
+
},
|
|
16
|
+
component: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: "button"
|
|
19
|
+
},
|
|
20
|
+
"aria-label": {
|
|
21
|
+
type: String,
|
|
22
|
+
default: void 0
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
setup(props, { attrs, slots }) {
|
|
26
|
+
return () => (0, vue.h)(_mantine_vue_core.Tooltip, { label: props.tooltip }, () => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
|
|
27
|
+
...attrs,
|
|
28
|
+
component: props.component,
|
|
29
|
+
class: [HeaderControl_module_default.control, attrs.class],
|
|
30
|
+
"aria-label": props["aria-label"] || props.tooltip
|
|
31
|
+
}, () => slots.default?.()));
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
var ColorSchemeControl_module_default = {
|
|
35
|
+
icon: "_icon_1aq4n_1",
|
|
36
|
+
dark: "_dark_1aq4n_6",
|
|
37
|
+
light: "_light_1aq4n_16"
|
|
38
|
+
};
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/ColorSchemeControl.ts
|
|
41
|
+
var ColorSchemeControl = (0, vue.defineComponent)({
|
|
42
|
+
name: "ColorSchemeControl",
|
|
43
|
+
setup() {
|
|
44
|
+
const { setColorScheme } = (0, _mantine_vue_core.useMantineColorScheme)();
|
|
45
|
+
const computedColorScheme = (0, _mantine_vue_core.useComputedColorScheme)("light", { getInitialValueInEffect: true });
|
|
46
|
+
return () => (0, vue.h)(HeaderControl, {
|
|
47
|
+
onClick: () => setColorScheme(computedColorScheme.value === "light" ? "dark" : "light"),
|
|
48
|
+
tooltip: `${computedColorScheme.value === "dark" ? "Light" : "Dark"} mode`,
|
|
49
|
+
"aria-label": "Toggle color scheme"
|
|
50
|
+
}, () => [(0, vue.h)(_phosphor_icons_vue.PhSun, { class: [ColorSchemeControl_module_default.icon, ColorSchemeControl_module_default.light] }), (0, vue.h)(_phosphor_icons_vue.PhMoon, { class: [ColorSchemeControl_module_default.icon, ColorSchemeControl_module_default.dark] })]);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/DirectionControl.ts
|
|
55
|
+
var DirectionControl = (0, vue.defineComponent)({
|
|
56
|
+
name: "DirectionControl",
|
|
57
|
+
setup() {
|
|
58
|
+
const { toggleDirection, dir } = (0, _mantine_vue_core.useDirection)();
|
|
59
|
+
return () => (0, vue.h)(HeaderControl, {
|
|
60
|
+
onClick: () => toggleDirection(),
|
|
61
|
+
tooltip: `${dir.value === "ltr" ? "RTL" : "LTR"} direction`
|
|
62
|
+
}, () => (0, vue.h)(dir.value === "rtl" ? _phosphor_icons_vue.PhTextAlignLeft : _phosphor_icons_vue.PhTextAlignRight, { style: {
|
|
63
|
+
width: (0, _mantine_vue_core.rem)(22),
|
|
64
|
+
height: (0, _mantine_vue_core.rem)(22),
|
|
65
|
+
pointerEvents: "none"
|
|
66
|
+
} }));
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
//#endregion
|
|
70
|
+
//#region src/icons/DiscordIcon.ts
|
|
71
|
+
var DiscordIcon = (0, vue.defineComponent)({
|
|
72
|
+
name: "DiscordIcon",
|
|
73
|
+
props: { size: {
|
|
74
|
+
type: [String, Number],
|
|
75
|
+
default: void 0
|
|
76
|
+
} },
|
|
77
|
+
setup(props, { attrs }) {
|
|
78
|
+
return () => (0, vue.h)(_mantine_vue_core.Box, {
|
|
79
|
+
component: "svg",
|
|
80
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
81
|
+
fill: "none",
|
|
82
|
+
viewBox: "0 0 256 199",
|
|
83
|
+
...attrs,
|
|
84
|
+
style: [{
|
|
85
|
+
width: (0, _mantine_vue_core.rem)(props.size),
|
|
86
|
+
height: (0, _mantine_vue_core.rem)(props.size)
|
|
87
|
+
}, attrs.style]
|
|
88
|
+
}, () => (0, vue.h)("path", {
|
|
89
|
+
fill: "currentColor",
|
|
90
|
+
d: "M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"
|
|
91
|
+
}));
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
var DiscordControl_module_default = { discord: "_discord_cld8z_1" };
|
|
95
|
+
//#endregion
|
|
96
|
+
//#region src/DiscordControl.ts
|
|
97
|
+
var DiscordControl = (0, vue.defineComponent)({
|
|
98
|
+
name: "DiscordControl",
|
|
99
|
+
props: { link: {
|
|
100
|
+
type: String,
|
|
101
|
+
required: true
|
|
102
|
+
} },
|
|
103
|
+
setup(props) {
|
|
104
|
+
return () => (0, vue.h)(HeaderControl, {
|
|
105
|
+
tooltip: "Discord",
|
|
106
|
+
component: "a",
|
|
107
|
+
href: props.link,
|
|
108
|
+
class: DiscordControl_module_default.discord
|
|
109
|
+
}, () => (0, vue.h)(DiscordIcon, { size: 20 }));
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
//#endregion
|
|
113
|
+
//#region src/icons/GithubIcon.ts
|
|
114
|
+
var GithubIcon = (0, vue.defineComponent)({
|
|
115
|
+
name: "GithubIcon",
|
|
116
|
+
props: { size: {
|
|
117
|
+
type: [String, Number],
|
|
118
|
+
default: void 0
|
|
119
|
+
} },
|
|
120
|
+
setup(props, { attrs }) {
|
|
121
|
+
return () => (0, vue.h)(_mantine_vue_core.Box, {
|
|
122
|
+
component: "svg",
|
|
123
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
124
|
+
viewBox: "0 0 16 16",
|
|
125
|
+
fill: "currentColor",
|
|
126
|
+
...attrs,
|
|
127
|
+
style: [{
|
|
128
|
+
width: (0, _mantine_vue_core.rem)(props.size),
|
|
129
|
+
height: (0, _mantine_vue_core.rem)(props.size)
|
|
130
|
+
}, attrs.style]
|
|
131
|
+
}, () => (0, vue.h)("path", {
|
|
132
|
+
"fill-rule": "evenodd",
|
|
133
|
+
d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
|
134
|
+
}));
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
//#endregion
|
|
138
|
+
//#region src/GithubControl.ts
|
|
139
|
+
var GithubControl = (0, vue.defineComponent)({
|
|
140
|
+
name: "GithubControl",
|
|
141
|
+
props: { link: {
|
|
142
|
+
type: String,
|
|
143
|
+
required: true
|
|
144
|
+
} },
|
|
145
|
+
setup(props) {
|
|
146
|
+
return () => (0, vue.h)(HeaderControl, {
|
|
147
|
+
tooltip: "Source code",
|
|
148
|
+
component: "a",
|
|
149
|
+
href: props.link
|
|
150
|
+
}, () => (0, vue.h)(GithubIcon, { size: 22 }));
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
var SearchControl_module_default = {
|
|
154
|
+
root: "_root_1atp3_1",
|
|
155
|
+
shortcut: "_shortcut_1atp3_25"
|
|
156
|
+
};
|
|
157
|
+
//#endregion
|
|
158
|
+
//#region src/SearchControl/SearchControl.ts
|
|
159
|
+
var SearchControl = (0, vue.defineComponent)({
|
|
160
|
+
name: "SearchControl",
|
|
161
|
+
inheritAttrs: false,
|
|
162
|
+
setup(_props, { attrs }) {
|
|
163
|
+
return () => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
|
|
164
|
+
...attrs,
|
|
165
|
+
class: [SearchControl_module_default.root, attrs.class]
|
|
166
|
+
}, () => (0, vue.h)(_mantine_vue_core.Group, { gap: "xs" }, () => [
|
|
167
|
+
(0, vue.h)(_phosphor_icons_vue.PhMagnifyingGlass, { style: {
|
|
168
|
+
width: (0, _mantine_vue_core.rem)(15),
|
|
169
|
+
height: (0, _mantine_vue_core.rem)(15)
|
|
170
|
+
} }),
|
|
171
|
+
(0, vue.h)(_mantine_vue_core.Text, {
|
|
172
|
+
fz: "sm",
|
|
173
|
+
c: "dimmed",
|
|
174
|
+
pr: 80
|
|
175
|
+
}, () => "Search"),
|
|
176
|
+
(0, vue.h)(_mantine_vue_core.Text, {
|
|
177
|
+
fw: 700,
|
|
178
|
+
class: SearchControl_module_default.shortcut
|
|
179
|
+
}, () => "Ctrl + K")
|
|
180
|
+
]));
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
var SupportControl_module_default = { support: "_support_1ym9d_1" };
|
|
184
|
+
//#endregion
|
|
185
|
+
//#region src/SupportControl.ts
|
|
186
|
+
var SupportControl = (0, vue.defineComponent)({
|
|
187
|
+
name: "SupportControl",
|
|
188
|
+
setup() {
|
|
189
|
+
return () => (0, vue.h)(HeaderControl, {
|
|
190
|
+
component: "a",
|
|
191
|
+
href: "",
|
|
192
|
+
tooltip: "Sponsor",
|
|
193
|
+
"aria-label": "Sponsor",
|
|
194
|
+
class: SupportControl_module_default.support
|
|
195
|
+
}, () => (0, vue.h)(_phosphor_icons_vue.PhHeart, {
|
|
196
|
+
weight: "fill",
|
|
197
|
+
style: {
|
|
198
|
+
width: (0, _mantine_vue_core.rem)(22),
|
|
199
|
+
height: (0, _mantine_vue_core.rem)(22)
|
|
200
|
+
}
|
|
201
|
+
}));
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
//#endregion
|
|
205
|
+
//#region src/HeaderControls.ts
|
|
206
|
+
var HeaderControls = (0, vue.defineComponent)({
|
|
207
|
+
name: "HeaderControls",
|
|
208
|
+
inheritAttrs: false,
|
|
209
|
+
props: {
|
|
210
|
+
onSearch: {
|
|
211
|
+
type: Function,
|
|
212
|
+
default: void 0
|
|
213
|
+
},
|
|
214
|
+
githubLink: {
|
|
215
|
+
type: String,
|
|
216
|
+
default: void 0
|
|
217
|
+
},
|
|
218
|
+
withDirectionToggle: {
|
|
219
|
+
type: Boolean,
|
|
220
|
+
default: true
|
|
221
|
+
},
|
|
222
|
+
withSearch: {
|
|
223
|
+
type: Boolean,
|
|
224
|
+
default: true
|
|
225
|
+
},
|
|
226
|
+
withGithub: {
|
|
227
|
+
type: Boolean,
|
|
228
|
+
default: true
|
|
229
|
+
},
|
|
230
|
+
withDiscord: {
|
|
231
|
+
type: Boolean,
|
|
232
|
+
default: true
|
|
233
|
+
},
|
|
234
|
+
discordLink: {
|
|
235
|
+
type: String,
|
|
236
|
+
required: true
|
|
237
|
+
},
|
|
238
|
+
withColorScheme: {
|
|
239
|
+
type: Boolean,
|
|
240
|
+
default: true
|
|
241
|
+
},
|
|
242
|
+
withSupport: {
|
|
243
|
+
type: Boolean,
|
|
244
|
+
default: true
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
setup(props, { attrs }) {
|
|
248
|
+
return () => (0, vue.h)(_mantine_vue_core.Tooltip.Group, {
|
|
249
|
+
openDelay: 600,
|
|
250
|
+
closeDelay: 100
|
|
251
|
+
}, () => (0, vue.h)(_mantine_vue_core.Group, {
|
|
252
|
+
gap: "xs",
|
|
253
|
+
...attrs
|
|
254
|
+
}, () => [
|
|
255
|
+
props.withSearch ? (0, vue.h)(SearchControl, { onClick: props.onSearch }) : null,
|
|
256
|
+
props.withDiscord ? (0, vue.h)(DiscordControl, { link: props.discordLink }) : null,
|
|
257
|
+
props.withSupport ? (0, vue.h)(SupportControl) : null,
|
|
258
|
+
props.withGithub ? (0, vue.h)(GithubControl, { link: props.githubLink }) : null,
|
|
259
|
+
props.withDirectionToggle ? (0, vue.h)(DirectionControl) : null,
|
|
260
|
+
props.withColorScheme ? (0, vue.h)(ColorSchemeControl) : null
|
|
261
|
+
]));
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
//#endregion
|
|
265
|
+
//#region src/SearchMobileControl.ts
|
|
266
|
+
var SearchMobileControl = (0, vue.defineComponent)({
|
|
267
|
+
name: "SearchMobileControl",
|
|
268
|
+
props: { onSearch: {
|
|
269
|
+
type: Function,
|
|
270
|
+
required: true
|
|
271
|
+
} },
|
|
272
|
+
setup(props) {
|
|
273
|
+
return () => (0, vue.h)(HeaderControl, {
|
|
274
|
+
onClick: () => props.onSearch(),
|
|
275
|
+
tooltip: "Search"
|
|
276
|
+
}, () => (0, vue.h)(_phosphor_icons_vue.PhMagnifyingGlass, { style: {
|
|
277
|
+
width: (0, _mantine_vue_core.rem)(22),
|
|
278
|
+
height: (0, _mantine_vue_core.rem)(22)
|
|
279
|
+
} }));
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
//#endregion
|
|
283
|
+
exports.ColorSchemeControl = ColorSchemeControl;
|
|
284
|
+
exports.DirectionControl = DirectionControl;
|
|
285
|
+
exports.DiscordControl = DiscordControl;
|
|
286
|
+
exports.GithubControl = GithubControl;
|
|
287
|
+
exports.HeaderControl = HeaderControl;
|
|
288
|
+
exports.HeaderControls = HeaderControls;
|
|
289
|
+
exports.SearchControl = SearchControl;
|
|
290
|
+
exports.SearchMobileControl = SearchMobileControl;
|
|
291
|
+
exports.SupportControl = SupportControl;
|
|
292
|
+
|
|
293
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../src/HeaderControl.module.css","../src/HeaderControl.ts","../src/ColorSchemeControl.module.css","../src/ColorSchemeControl.ts","../src/DirectionControl.ts","../src/icons/DiscordIcon.ts","../src/DiscordControl.module.css","../src/DiscordControl.ts","../src/icons/GithubIcon.ts","../src/GithubControl.ts","../src/SearchControl/SearchControl.module.css","../src/SearchControl/SearchControl.ts","../src/SupportControl.module.css","../src/SupportControl.ts","../src/HeaderControls.ts","../src/SearchMobileControl.ts"],"sourcesContent":[".control {\n width: 34px;\n height: 34px;\n border-radius: var(--mantine-radius-md);\n border: 1px solid;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @mixin light {\n border-color: var(--mantine-color-gray-3);\n color: var(--mantine-color-gray-7);\n background-color: var(--mantine-color-white);\n\n @mixin hover {\n background-color: var(--mantine-color-gray-0);\n }\n }\n\n @mixin dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-white);\n background-color: var(--mantine-color-dark-6);\n\n @mixin hover {\n background-color: var(--mantine-color-dark-5);\n }\n }\n}\n","import { Tooltip, UnstyledButton } from '@mantine-vue/core'\nimport { defineComponent, h } from 'vue'\nimport classes from './HeaderControl.module.css'\n\n// Renders as a <button> by default, or as any element via the `component`\n// prop, e.g. `a` for link-style controls. UnstyledButton is already\n// polymorphic through its own `component` prop, so we forward it the same way.\nexport interface HeaderControlProps {\n tooltip: string\n component?: string\n 'aria-label'?: string\n}\n\nexport const HeaderControl = defineComponent({\n name: 'HeaderControl',\n inheritAttrs: false,\n props: {\n tooltip: { type: String, required: true },\n component: { type: String, default: 'button' },\n 'aria-label': { type: String, default: undefined },\n },\n setup(props, { attrs, slots }) {\n return () =>\n h(Tooltip, { label: props.tooltip }, () =>\n h(\n UnstyledButton,\n {\n ...attrs,\n component: props.component,\n class: [classes.control, attrs.class],\n 'aria-label': props['aria-label'] || props.tooltip,\n },\n () => slots.default?.(),\n ),\n )\n },\n})\n",".icon {\n width: 22px;\n height: 22px;\n}\n\n.dark {\n @mixin dark {\n display: none;\n }\n\n @mixin light {\n display: block;\n }\n}\n\n.light {\n @mixin light {\n display: none;\n }\n\n @mixin dark {\n display: block;\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { useComputedColorScheme, useMantineColorScheme } from '@mantine-vue/core'\nimport { PhMoon, PhSun } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\nimport classes from './ColorSchemeControl.module.css'\n\nexport const ColorSchemeControl = defineComponent({\n name: 'ColorSchemeControl',\n setup() {\n const { setColorScheme } = useMantineColorScheme()\n const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })\n\n return () =>\n h(\n HeaderControl,\n {\n onClick: () => setColorScheme(computedColorScheme.value === 'light' ? 'dark' : 'light'),\n tooltip: `${computedColorScheme.value === 'dark' ? 'Light' : 'Dark'} mode`,\n 'aria-label': 'Toggle color scheme',\n },\n () => [\n h(PhSun, { class: [classes.icon, classes.light] }),\n h(PhMoon, { class: [classes.icon, classes.dark] }),\n ],\n )\n },\n})\n","import { defineComponent, h } from 'vue'\nimport { rem, useDirection } from '@mantine-vue/core'\nimport { PhTextAlignLeft, PhTextAlignRight } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\n\nexport const DirectionControl = defineComponent({\n name: 'DirectionControl',\n setup() {\n const { toggleDirection, dir } = useDirection()\n\n return () =>\n h(\n HeaderControl,\n {\n onClick: () => toggleDirection(),\n tooltip: `${dir.value === 'ltr' ? 'RTL' : 'LTR'} direction`,\n },\n () =>\n h(dir.value === 'rtl' ? PhTextAlignLeft : PhTextAlignRight, {\n style: { width: rem(22), height: rem(22), pointerEvents: 'none' },\n }),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { Box, rem } from '@mantine-vue/core'\n\nexport const DiscordIcon = defineComponent({\n name: 'DiscordIcon',\n props: {\n size: { type: [String, Number] as PropType<string | number>, default: undefined },\n },\n setup(props, { attrs }) {\n return () =>\n h(\n Box,\n {\n component: 'svg',\n xmlns: 'http://www.w3.org/2000/svg',\n fill: 'none',\n viewBox: '0 0 256 199',\n ...attrs,\n style: [{ width: rem(props.size), height: rem(props.size) }, attrs.style as any],\n },\n () =>\n h('path', {\n fill: 'currentColor',\n d: 'M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z',\n }),\n )\n },\n})\n",".discord {\n --discord-color: #5865f2;\n --discord-color-hover: #4f5bd5;\n\n [data-mantine-color-scheme] & {\n background-color: var(--discord-color);\n border-color: var(--discord-color);\n color: var(--mantine-color-white);\n\n @mixin hover {\n background-color: var(--discord-color-hover);\n border-color: var(--discord-color-hover);\n }\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { HeaderControl } from './HeaderControl'\nimport { DiscordIcon } from './icons/DiscordIcon'\nimport classes from './DiscordControl.module.css'\n\nexport const DiscordControl = defineComponent({\n name: 'DiscordControl',\n props: {\n link: { type: String, required: true },\n },\n setup(props) {\n return () =>\n h(\n HeaderControl,\n { tooltip: 'Discord', component: 'a', href: props.link, class: classes.discord },\n () => h(DiscordIcon, { size: 20 }),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { Box, rem } from '@mantine-vue/core'\n\nexport const GithubIcon = defineComponent({\n name: 'GithubIcon',\n props: {\n size: { type: [String, Number] as PropType<string | number>, default: undefined },\n },\n setup(props, { attrs }) {\n return () =>\n h(\n Box,\n {\n component: 'svg',\n xmlns: 'http://www.w3.org/2000/svg',\n viewBox: '0 0 16 16',\n fill: 'currentColor',\n ...attrs,\n style: [{ width: rem(props.size), height: rem(props.size) }, attrs.style as any],\n },\n () =>\n h('path', {\n 'fill-rule': 'evenodd',\n d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z',\n }),\n )\n },\n})\n","import { defineComponent, h } from 'vue'\nimport { HeaderControl } from './HeaderControl'\nimport { GithubIcon } from './icons/GithubIcon'\n\nexport const GithubControl = defineComponent({\n name: 'GithubControl',\n props: {\n link: { type: String, required: true },\n },\n setup(props) {\n return () =>\n h(HeaderControl, { tooltip: 'Source code', component: 'a', href: props.link }, () =>\n h(GithubIcon, { size: 22 }),\n )\n },\n})\n",".root {\n height: 34px;\n padding-left: var(--mantine-spacing-sm);\n padding-right: 4px;\n border-radius: var(--mantine-radius-md);\n color: var(--mantine-color-placeholder);\n border: 1px solid;\n\n @mixin light {\n border-color: var(--mantine-color-gray-3);\n background-color: var(--mantine-color-white);\n }\n\n @mixin dark {\n border-color: var(--mantine-color-dark-4);\n background-color: var(--mantine-color-dark-6);\n }\n\n @mixin rtl {\n padding-left: 4px;\n padding-right: var(--mantine-spacing-sm);\n }\n}\n\n.shortcut {\n font-size: 11px;\n line-height: 1;\n padding: 4px 7px;\n border-radius: var(--mantine-radius-sm);\n border: 1px solid;\n font-weight: bold;\n\n @mixin light {\n color: var(--mantine-color-gray-7);\n border-color: var(--mantine-color-gray-2);\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin dark {\n color: var(--mantine-color-dark-0);\n border-color: var(--mantine-color-dark-7);\n background-color: var(--mantine-color-dark-7);\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { Group, rem, Text, UnstyledButton } from '@mantine-vue/core'\nimport { PhMagnifyingGlass } from '@phosphor-icons/vue'\nimport classes from './SearchControl.module.css'\n\nexport const SearchControl = defineComponent({\n name: 'SearchControl',\n inheritAttrs: false,\n setup(_props, { attrs }) {\n return () =>\n h(UnstyledButton, { ...attrs, class: [classes.root, attrs.class] }, () =>\n h(Group, { gap: 'xs' }, () => [\n h(PhMagnifyingGlass, { style: { width: rem(15), height: rem(15) } }),\n h(Text, { fz: 'sm', c: 'dimmed', pr: 80 }, () => 'Search'),\n h(Text, { fw: 700, class: classes.shortcut }, () => 'Ctrl + K'),\n ]),\n )\n },\n})\n",".support {\n @mixin light {\n color: var(--mantine-color-red-8);\n }\n\n @mixin dark {\n color: var(--mantine-color-white);\n background-color: var(--mantine-color-red-9);\n border-color: var(--mantine-color-red-9);\n\n @mixin hover {\n background-color: var(--mantine-color-red-8);\n border-color: var(--mantine-color-red-8);\n }\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { rem } from '@mantine-vue/core'\nimport { PhHeart } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\nimport classes from './SupportControl.module.css'\n\nexport const SupportControl = defineComponent({\n name: 'SupportControl',\n setup() {\n return () =>\n h(\n HeaderControl,\n {\n component: 'a',\n href: '',\n tooltip: 'Sponsor',\n 'aria-label': 'Sponsor',\n class: classes.support,\n },\n () => h(PhHeart, { weight: 'fill', style: { width: rem(22), height: rem(22) } }),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { Group, Tooltip } from '@mantine-vue/core'\nimport { ColorSchemeControl } from './ColorSchemeControl'\nimport { DirectionControl } from './DirectionControl'\nimport { DiscordControl } from './DiscordControl'\nimport { GithubControl } from './GithubControl'\nimport { SearchControl } from './SearchControl'\nimport { SupportControl } from './SupportControl'\n\nexport const HeaderControls = defineComponent({\n name: 'HeaderControls',\n inheritAttrs: false,\n props: {\n onSearch: { type: Function as PropType<() => void>, default: undefined },\n githubLink: { type: String, default: undefined },\n withDirectionToggle: { type: Boolean, default: true },\n withSearch: { type: Boolean, default: true },\n withGithub: { type: Boolean, default: true },\n withDiscord: { type: Boolean, default: true },\n discordLink: { type: String, required: true },\n withColorScheme: { type: Boolean, default: true },\n withSupport: { type: Boolean, default: true },\n },\n setup(props, { attrs }) {\n return () =>\n h(Tooltip.Group, { openDelay: 600, closeDelay: 100 }, () =>\n h(Group, { gap: 'xs', ...attrs }, () => [\n props.withSearch ? h(SearchControl, { onClick: props.onSearch }) : null,\n props.withDiscord ? h(DiscordControl, { link: props.discordLink }) : null,\n props.withSupport ? h(SupportControl) : null,\n props.withGithub ? h(GithubControl, { link: props.githubLink! }) : null,\n props.withDirectionToggle ? h(DirectionControl) : null,\n props.withColorScheme ? h(ColorSchemeControl) : null,\n ]),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { rem } from '@mantine-vue/core'\nimport { PhMagnifyingGlass } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\n\nexport const SearchMobileControl = defineComponent({\n name: 'SearchMobileControl',\n props: {\n onSearch: { type: Function as PropType<() => void>, required: true },\n },\n setup(props) {\n return () =>\n h(HeaderControl, { onClick: () => props.onSearch(), tooltip: 'Search' }, () =>\n h(PhMagnifyingGlass, { style: { width: rem(22), height: rem(22) } }),\n )\n },\n})\n"],"mappings":"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"}
|
package/esm/index.mjs
ADDED
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
import { Box, Group, Text, Tooltip, UnstyledButton, rem, useComputedColorScheme, useDirection, useMantineColorScheme } from "@mantine-vue/core";
|
|
3
|
+
import { PhHeart, PhMagnifyingGlass, PhMoon, PhSun, PhTextAlignLeft, PhTextAlignRight } from "@phosphor-icons/vue";
|
|
4
|
+
var HeaderControl_module_default = { control: "_control_1fscv_1" };
|
|
5
|
+
//#endregion
|
|
6
|
+
//#region src/HeaderControl.ts
|
|
7
|
+
var HeaderControl = defineComponent({
|
|
8
|
+
name: "HeaderControl",
|
|
9
|
+
inheritAttrs: false,
|
|
10
|
+
props: {
|
|
11
|
+
tooltip: {
|
|
12
|
+
type: String,
|
|
13
|
+
required: true
|
|
14
|
+
},
|
|
15
|
+
component: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: "button"
|
|
18
|
+
},
|
|
19
|
+
"aria-label": {
|
|
20
|
+
type: String,
|
|
21
|
+
default: void 0
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
setup(props, { attrs, slots }) {
|
|
25
|
+
return () => h(Tooltip, { label: props.tooltip }, () => h(UnstyledButton, {
|
|
26
|
+
...attrs,
|
|
27
|
+
component: props.component,
|
|
28
|
+
class: [HeaderControl_module_default.control, attrs.class],
|
|
29
|
+
"aria-label": props["aria-label"] || props.tooltip
|
|
30
|
+
}, () => slots.default?.()));
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
var ColorSchemeControl_module_default = {
|
|
34
|
+
icon: "_icon_1aq4n_1",
|
|
35
|
+
dark: "_dark_1aq4n_6",
|
|
36
|
+
light: "_light_1aq4n_16"
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
//#region src/ColorSchemeControl.ts
|
|
40
|
+
var ColorSchemeControl = defineComponent({
|
|
41
|
+
name: "ColorSchemeControl",
|
|
42
|
+
setup() {
|
|
43
|
+
const { setColorScheme } = useMantineColorScheme();
|
|
44
|
+
const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
|
|
45
|
+
return () => h(HeaderControl, {
|
|
46
|
+
onClick: () => setColorScheme(computedColorScheme.value === "light" ? "dark" : "light"),
|
|
47
|
+
tooltip: `${computedColorScheme.value === "dark" ? "Light" : "Dark"} mode`,
|
|
48
|
+
"aria-label": "Toggle color scheme"
|
|
49
|
+
}, () => [h(PhSun, { class: [ColorSchemeControl_module_default.icon, ColorSchemeControl_module_default.light] }), h(PhMoon, { class: [ColorSchemeControl_module_default.icon, ColorSchemeControl_module_default.dark] })]);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
//#endregion
|
|
53
|
+
//#region src/DirectionControl.ts
|
|
54
|
+
var DirectionControl = defineComponent({
|
|
55
|
+
name: "DirectionControl",
|
|
56
|
+
setup() {
|
|
57
|
+
const { toggleDirection, dir } = useDirection();
|
|
58
|
+
return () => h(HeaderControl, {
|
|
59
|
+
onClick: () => toggleDirection(),
|
|
60
|
+
tooltip: `${dir.value === "ltr" ? "RTL" : "LTR"} direction`
|
|
61
|
+
}, () => h(dir.value === "rtl" ? PhTextAlignLeft : PhTextAlignRight, { style: {
|
|
62
|
+
width: rem(22),
|
|
63
|
+
height: rem(22),
|
|
64
|
+
pointerEvents: "none"
|
|
65
|
+
} }));
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
//#endregion
|
|
69
|
+
//#region src/icons/DiscordIcon.ts
|
|
70
|
+
var DiscordIcon = defineComponent({
|
|
71
|
+
name: "DiscordIcon",
|
|
72
|
+
props: { size: {
|
|
73
|
+
type: [String, Number],
|
|
74
|
+
default: void 0
|
|
75
|
+
} },
|
|
76
|
+
setup(props, { attrs }) {
|
|
77
|
+
return () => h(Box, {
|
|
78
|
+
component: "svg",
|
|
79
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
80
|
+
fill: "none",
|
|
81
|
+
viewBox: "0 0 256 199",
|
|
82
|
+
...attrs,
|
|
83
|
+
style: [{
|
|
84
|
+
width: rem(props.size),
|
|
85
|
+
height: rem(props.size)
|
|
86
|
+
}, attrs.style]
|
|
87
|
+
}, () => h("path", {
|
|
88
|
+
fill: "currentColor",
|
|
89
|
+
d: "M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"
|
|
90
|
+
}));
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
var DiscordControl_module_default = { discord: "_discord_cld8z_1" };
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/DiscordControl.ts
|
|
96
|
+
var DiscordControl = defineComponent({
|
|
97
|
+
name: "DiscordControl",
|
|
98
|
+
props: { link: {
|
|
99
|
+
type: String,
|
|
100
|
+
required: true
|
|
101
|
+
} },
|
|
102
|
+
setup(props) {
|
|
103
|
+
return () => h(HeaderControl, {
|
|
104
|
+
tooltip: "Discord",
|
|
105
|
+
component: "a",
|
|
106
|
+
href: props.link,
|
|
107
|
+
class: DiscordControl_module_default.discord
|
|
108
|
+
}, () => h(DiscordIcon, { size: 20 }));
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
//#endregion
|
|
112
|
+
//#region src/icons/GithubIcon.ts
|
|
113
|
+
var GithubIcon = defineComponent({
|
|
114
|
+
name: "GithubIcon",
|
|
115
|
+
props: { size: {
|
|
116
|
+
type: [String, Number],
|
|
117
|
+
default: void 0
|
|
118
|
+
} },
|
|
119
|
+
setup(props, { attrs }) {
|
|
120
|
+
return () => h(Box, {
|
|
121
|
+
component: "svg",
|
|
122
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
123
|
+
viewBox: "0 0 16 16",
|
|
124
|
+
fill: "currentColor",
|
|
125
|
+
...attrs,
|
|
126
|
+
style: [{
|
|
127
|
+
width: rem(props.size),
|
|
128
|
+
height: rem(props.size)
|
|
129
|
+
}, attrs.style]
|
|
130
|
+
}, () => h("path", {
|
|
131
|
+
"fill-rule": "evenodd",
|
|
132
|
+
d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
|
133
|
+
}));
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
//#endregion
|
|
137
|
+
//#region src/GithubControl.ts
|
|
138
|
+
var GithubControl = defineComponent({
|
|
139
|
+
name: "GithubControl",
|
|
140
|
+
props: { link: {
|
|
141
|
+
type: String,
|
|
142
|
+
required: true
|
|
143
|
+
} },
|
|
144
|
+
setup(props) {
|
|
145
|
+
return () => h(HeaderControl, {
|
|
146
|
+
tooltip: "Source code",
|
|
147
|
+
component: "a",
|
|
148
|
+
href: props.link
|
|
149
|
+
}, () => h(GithubIcon, { size: 22 }));
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
var SearchControl_module_default = {
|
|
153
|
+
root: "_root_1atp3_1",
|
|
154
|
+
shortcut: "_shortcut_1atp3_25"
|
|
155
|
+
};
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/SearchControl/SearchControl.ts
|
|
158
|
+
var SearchControl = defineComponent({
|
|
159
|
+
name: "SearchControl",
|
|
160
|
+
inheritAttrs: false,
|
|
161
|
+
setup(_props, { attrs }) {
|
|
162
|
+
return () => h(UnstyledButton, {
|
|
163
|
+
...attrs,
|
|
164
|
+
class: [SearchControl_module_default.root, attrs.class]
|
|
165
|
+
}, () => h(Group, { gap: "xs" }, () => [
|
|
166
|
+
h(PhMagnifyingGlass, { style: {
|
|
167
|
+
width: rem(15),
|
|
168
|
+
height: rem(15)
|
|
169
|
+
} }),
|
|
170
|
+
h(Text, {
|
|
171
|
+
fz: "sm",
|
|
172
|
+
c: "dimmed",
|
|
173
|
+
pr: 80
|
|
174
|
+
}, () => "Search"),
|
|
175
|
+
h(Text, {
|
|
176
|
+
fw: 700,
|
|
177
|
+
class: SearchControl_module_default.shortcut
|
|
178
|
+
}, () => "Ctrl + K")
|
|
179
|
+
]));
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
var SupportControl_module_default = { support: "_support_1ym9d_1" };
|
|
183
|
+
//#endregion
|
|
184
|
+
//#region src/SupportControl.ts
|
|
185
|
+
var SupportControl = defineComponent({
|
|
186
|
+
name: "SupportControl",
|
|
187
|
+
setup() {
|
|
188
|
+
return () => h(HeaderControl, {
|
|
189
|
+
component: "a",
|
|
190
|
+
href: "",
|
|
191
|
+
tooltip: "Sponsor",
|
|
192
|
+
"aria-label": "Sponsor",
|
|
193
|
+
class: SupportControl_module_default.support
|
|
194
|
+
}, () => h(PhHeart, {
|
|
195
|
+
weight: "fill",
|
|
196
|
+
style: {
|
|
197
|
+
width: rem(22),
|
|
198
|
+
height: rem(22)
|
|
199
|
+
}
|
|
200
|
+
}));
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
//#endregion
|
|
204
|
+
//#region src/HeaderControls.ts
|
|
205
|
+
var HeaderControls = defineComponent({
|
|
206
|
+
name: "HeaderControls",
|
|
207
|
+
inheritAttrs: false,
|
|
208
|
+
props: {
|
|
209
|
+
onSearch: {
|
|
210
|
+
type: Function,
|
|
211
|
+
default: void 0
|
|
212
|
+
},
|
|
213
|
+
githubLink: {
|
|
214
|
+
type: String,
|
|
215
|
+
default: void 0
|
|
216
|
+
},
|
|
217
|
+
withDirectionToggle: {
|
|
218
|
+
type: Boolean,
|
|
219
|
+
default: true
|
|
220
|
+
},
|
|
221
|
+
withSearch: {
|
|
222
|
+
type: Boolean,
|
|
223
|
+
default: true
|
|
224
|
+
},
|
|
225
|
+
withGithub: {
|
|
226
|
+
type: Boolean,
|
|
227
|
+
default: true
|
|
228
|
+
},
|
|
229
|
+
withDiscord: {
|
|
230
|
+
type: Boolean,
|
|
231
|
+
default: true
|
|
232
|
+
},
|
|
233
|
+
discordLink: {
|
|
234
|
+
type: String,
|
|
235
|
+
required: true
|
|
236
|
+
},
|
|
237
|
+
withColorScheme: {
|
|
238
|
+
type: Boolean,
|
|
239
|
+
default: true
|
|
240
|
+
},
|
|
241
|
+
withSupport: {
|
|
242
|
+
type: Boolean,
|
|
243
|
+
default: true
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
setup(props, { attrs }) {
|
|
247
|
+
return () => h(Tooltip.Group, {
|
|
248
|
+
openDelay: 600,
|
|
249
|
+
closeDelay: 100
|
|
250
|
+
}, () => h(Group, {
|
|
251
|
+
gap: "xs",
|
|
252
|
+
...attrs
|
|
253
|
+
}, () => [
|
|
254
|
+
props.withSearch ? h(SearchControl, { onClick: props.onSearch }) : null,
|
|
255
|
+
props.withDiscord ? h(DiscordControl, { link: props.discordLink }) : null,
|
|
256
|
+
props.withSupport ? h(SupportControl) : null,
|
|
257
|
+
props.withGithub ? h(GithubControl, { link: props.githubLink }) : null,
|
|
258
|
+
props.withDirectionToggle ? h(DirectionControl) : null,
|
|
259
|
+
props.withColorScheme ? h(ColorSchemeControl) : null
|
|
260
|
+
]));
|
|
261
|
+
}
|
|
262
|
+
});
|
|
263
|
+
//#endregion
|
|
264
|
+
//#region src/SearchMobileControl.ts
|
|
265
|
+
var SearchMobileControl = defineComponent({
|
|
266
|
+
name: "SearchMobileControl",
|
|
267
|
+
props: { onSearch: {
|
|
268
|
+
type: Function,
|
|
269
|
+
required: true
|
|
270
|
+
} },
|
|
271
|
+
setup(props) {
|
|
272
|
+
return () => h(HeaderControl, {
|
|
273
|
+
onClick: () => props.onSearch(),
|
|
274
|
+
tooltip: "Search"
|
|
275
|
+
}, () => h(PhMagnifyingGlass, { style: {
|
|
276
|
+
width: rem(22),
|
|
277
|
+
height: rem(22)
|
|
278
|
+
} }));
|
|
279
|
+
}
|
|
280
|
+
});
|
|
281
|
+
//#endregion
|
|
282
|
+
export { ColorSchemeControl, DirectionControl, DiscordControl, GithubControl, HeaderControl, HeaderControls, SearchControl, SearchMobileControl, SupportControl };
|
|
283
|
+
|
|
284
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/HeaderControl.module.css","../src/HeaderControl.ts","../src/ColorSchemeControl.module.css","../src/ColorSchemeControl.ts","../src/DirectionControl.ts","../src/icons/DiscordIcon.ts","../src/DiscordControl.module.css","../src/DiscordControl.ts","../src/icons/GithubIcon.ts","../src/GithubControl.ts","../src/SearchControl/SearchControl.module.css","../src/SearchControl/SearchControl.ts","../src/SupportControl.module.css","../src/SupportControl.ts","../src/HeaderControls.ts","../src/SearchMobileControl.ts"],"sourcesContent":[".control {\n width: 34px;\n height: 34px;\n border-radius: var(--mantine-radius-md);\n border: 1px solid;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @mixin light {\n border-color: var(--mantine-color-gray-3);\n color: var(--mantine-color-gray-7);\n background-color: var(--mantine-color-white);\n\n @mixin hover {\n background-color: var(--mantine-color-gray-0);\n }\n }\n\n @mixin dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-white);\n background-color: var(--mantine-color-dark-6);\n\n @mixin hover {\n background-color: var(--mantine-color-dark-5);\n }\n }\n}\n","import { Tooltip, UnstyledButton } from '@mantine-vue/core'\nimport { defineComponent, h } from 'vue'\nimport classes from './HeaderControl.module.css'\n\n// Renders as a <button> by default, or as any element via the `component`\n// prop, e.g. `a` for link-style controls. UnstyledButton is already\n// polymorphic through its own `component` prop, so we forward it the same way.\nexport interface HeaderControlProps {\n tooltip: string\n component?: string\n 'aria-label'?: string\n}\n\nexport const HeaderControl = defineComponent({\n name: 'HeaderControl',\n inheritAttrs: false,\n props: {\n tooltip: { type: String, required: true },\n component: { type: String, default: 'button' },\n 'aria-label': { type: String, default: undefined },\n },\n setup(props, { attrs, slots }) {\n return () =>\n h(Tooltip, { label: props.tooltip }, () =>\n h(\n UnstyledButton,\n {\n ...attrs,\n component: props.component,\n class: [classes.control, attrs.class],\n 'aria-label': props['aria-label'] || props.tooltip,\n },\n () => slots.default?.(),\n ),\n )\n },\n})\n",".icon {\n width: 22px;\n height: 22px;\n}\n\n.dark {\n @mixin dark {\n display: none;\n }\n\n @mixin light {\n display: block;\n }\n}\n\n.light {\n @mixin light {\n display: none;\n }\n\n @mixin dark {\n display: block;\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { useComputedColorScheme, useMantineColorScheme } from '@mantine-vue/core'\nimport { PhMoon, PhSun } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\nimport classes from './ColorSchemeControl.module.css'\n\nexport const ColorSchemeControl = defineComponent({\n name: 'ColorSchemeControl',\n setup() {\n const { setColorScheme } = useMantineColorScheme()\n const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })\n\n return () =>\n h(\n HeaderControl,\n {\n onClick: () => setColorScheme(computedColorScheme.value === 'light' ? 'dark' : 'light'),\n tooltip: `${computedColorScheme.value === 'dark' ? 'Light' : 'Dark'} mode`,\n 'aria-label': 'Toggle color scheme',\n },\n () => [\n h(PhSun, { class: [classes.icon, classes.light] }),\n h(PhMoon, { class: [classes.icon, classes.dark] }),\n ],\n )\n },\n})\n","import { defineComponent, h } from 'vue'\nimport { rem, useDirection } from '@mantine-vue/core'\nimport { PhTextAlignLeft, PhTextAlignRight } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\n\nexport const DirectionControl = defineComponent({\n name: 'DirectionControl',\n setup() {\n const { toggleDirection, dir } = useDirection()\n\n return () =>\n h(\n HeaderControl,\n {\n onClick: () => toggleDirection(),\n tooltip: `${dir.value === 'ltr' ? 'RTL' : 'LTR'} direction`,\n },\n () =>\n h(dir.value === 'rtl' ? PhTextAlignLeft : PhTextAlignRight, {\n style: { width: rem(22), height: rem(22), pointerEvents: 'none' },\n }),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { Box, rem } from '@mantine-vue/core'\n\nexport const DiscordIcon = defineComponent({\n name: 'DiscordIcon',\n props: {\n size: { type: [String, Number] as PropType<string | number>, default: undefined },\n },\n setup(props, { attrs }) {\n return () =>\n h(\n Box,\n {\n component: 'svg',\n xmlns: 'http://www.w3.org/2000/svg',\n fill: 'none',\n viewBox: '0 0 256 199',\n ...attrs,\n style: [{ width: rem(props.size), height: rem(props.size) }, attrs.style as any],\n },\n () =>\n h('path', {\n fill: 'currentColor',\n d: 'M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z',\n }),\n )\n },\n})\n",".discord {\n --discord-color: #5865f2;\n --discord-color-hover: #4f5bd5;\n\n [data-mantine-color-scheme] & {\n background-color: var(--discord-color);\n border-color: var(--discord-color);\n color: var(--mantine-color-white);\n\n @mixin hover {\n background-color: var(--discord-color-hover);\n border-color: var(--discord-color-hover);\n }\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { HeaderControl } from './HeaderControl'\nimport { DiscordIcon } from './icons/DiscordIcon'\nimport classes from './DiscordControl.module.css'\n\nexport const DiscordControl = defineComponent({\n name: 'DiscordControl',\n props: {\n link: { type: String, required: true },\n },\n setup(props) {\n return () =>\n h(\n HeaderControl,\n { tooltip: 'Discord', component: 'a', href: props.link, class: classes.discord },\n () => h(DiscordIcon, { size: 20 }),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { Box, rem } from '@mantine-vue/core'\n\nexport const GithubIcon = defineComponent({\n name: 'GithubIcon',\n props: {\n size: { type: [String, Number] as PropType<string | number>, default: undefined },\n },\n setup(props, { attrs }) {\n return () =>\n h(\n Box,\n {\n component: 'svg',\n xmlns: 'http://www.w3.org/2000/svg',\n viewBox: '0 0 16 16',\n fill: 'currentColor',\n ...attrs,\n style: [{ width: rem(props.size), height: rem(props.size) }, attrs.style as any],\n },\n () =>\n h('path', {\n 'fill-rule': 'evenodd',\n d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z',\n }),\n )\n },\n})\n","import { defineComponent, h } from 'vue'\nimport { HeaderControl } from './HeaderControl'\nimport { GithubIcon } from './icons/GithubIcon'\n\nexport const GithubControl = defineComponent({\n name: 'GithubControl',\n props: {\n link: { type: String, required: true },\n },\n setup(props) {\n return () =>\n h(HeaderControl, { tooltip: 'Source code', component: 'a', href: props.link }, () =>\n h(GithubIcon, { size: 22 }),\n )\n },\n})\n",".root {\n height: 34px;\n padding-left: var(--mantine-spacing-sm);\n padding-right: 4px;\n border-radius: var(--mantine-radius-md);\n color: var(--mantine-color-placeholder);\n border: 1px solid;\n\n @mixin light {\n border-color: var(--mantine-color-gray-3);\n background-color: var(--mantine-color-white);\n }\n\n @mixin dark {\n border-color: var(--mantine-color-dark-4);\n background-color: var(--mantine-color-dark-6);\n }\n\n @mixin rtl {\n padding-left: 4px;\n padding-right: var(--mantine-spacing-sm);\n }\n}\n\n.shortcut {\n font-size: 11px;\n line-height: 1;\n padding: 4px 7px;\n border-radius: var(--mantine-radius-sm);\n border: 1px solid;\n font-weight: bold;\n\n @mixin light {\n color: var(--mantine-color-gray-7);\n border-color: var(--mantine-color-gray-2);\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin dark {\n color: var(--mantine-color-dark-0);\n border-color: var(--mantine-color-dark-7);\n background-color: var(--mantine-color-dark-7);\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { Group, rem, Text, UnstyledButton } from '@mantine-vue/core'\nimport { PhMagnifyingGlass } from '@phosphor-icons/vue'\nimport classes from './SearchControl.module.css'\n\nexport const SearchControl = defineComponent({\n name: 'SearchControl',\n inheritAttrs: false,\n setup(_props, { attrs }) {\n return () =>\n h(UnstyledButton, { ...attrs, class: [classes.root, attrs.class] }, () =>\n h(Group, { gap: 'xs' }, () => [\n h(PhMagnifyingGlass, { style: { width: rem(15), height: rem(15) } }),\n h(Text, { fz: 'sm', c: 'dimmed', pr: 80 }, () => 'Search'),\n h(Text, { fw: 700, class: classes.shortcut }, () => 'Ctrl + K'),\n ]),\n )\n },\n})\n",".support {\n @mixin light {\n color: var(--mantine-color-red-8);\n }\n\n @mixin dark {\n color: var(--mantine-color-white);\n background-color: var(--mantine-color-red-9);\n border-color: var(--mantine-color-red-9);\n\n @mixin hover {\n background-color: var(--mantine-color-red-8);\n border-color: var(--mantine-color-red-8);\n }\n }\n}\n","import { defineComponent, h } from 'vue'\nimport { rem } from '@mantine-vue/core'\nimport { PhHeart } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\nimport classes from './SupportControl.module.css'\n\nexport const SupportControl = defineComponent({\n name: 'SupportControl',\n setup() {\n return () =>\n h(\n HeaderControl,\n {\n component: 'a',\n href: '',\n tooltip: 'Sponsor',\n 'aria-label': 'Sponsor',\n class: classes.support,\n },\n () => h(PhHeart, { weight: 'fill', style: { width: rem(22), height: rem(22) } }),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { Group, Tooltip } from '@mantine-vue/core'\nimport { ColorSchemeControl } from './ColorSchemeControl'\nimport { DirectionControl } from './DirectionControl'\nimport { DiscordControl } from './DiscordControl'\nimport { GithubControl } from './GithubControl'\nimport { SearchControl } from './SearchControl'\nimport { SupportControl } from './SupportControl'\n\nexport const HeaderControls = defineComponent({\n name: 'HeaderControls',\n inheritAttrs: false,\n props: {\n onSearch: { type: Function as PropType<() => void>, default: undefined },\n githubLink: { type: String, default: undefined },\n withDirectionToggle: { type: Boolean, default: true },\n withSearch: { type: Boolean, default: true },\n withGithub: { type: Boolean, default: true },\n withDiscord: { type: Boolean, default: true },\n discordLink: { type: String, required: true },\n withColorScheme: { type: Boolean, default: true },\n withSupport: { type: Boolean, default: true },\n },\n setup(props, { attrs }) {\n return () =>\n h(Tooltip.Group, { openDelay: 600, closeDelay: 100 }, () =>\n h(Group, { gap: 'xs', ...attrs }, () => [\n props.withSearch ? h(SearchControl, { onClick: props.onSearch }) : null,\n props.withDiscord ? h(DiscordControl, { link: props.discordLink }) : null,\n props.withSupport ? h(SupportControl) : null,\n props.withGithub ? h(GithubControl, { link: props.githubLink! }) : null,\n props.withDirectionToggle ? h(DirectionControl) : null,\n props.withColorScheme ? h(ColorSchemeControl) : null,\n ]),\n )\n },\n})\n","import { defineComponent, h, type PropType } from 'vue'\nimport { rem } from '@mantine-vue/core'\nimport { PhMagnifyingGlass } from '@phosphor-icons/vue'\nimport { HeaderControl } from './HeaderControl'\n\nexport const SearchMobileControl = defineComponent({\n name: 'SearchMobileControl',\n props: {\n onSearch: { type: Function as PropType<() => void>, required: true },\n },\n setup(props) {\n return () =>\n h(HeaderControl, { onClick: () => props.onSearch(), tooltip: 'Search' }, () =>\n h(PhMagnifyingGlass, { style: { width: rem(22), height: rem(22) } }),\n )\n },\n})\n"],"mappings":"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"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const ColorSchemeControl: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
2
|
+
[key: string]: any;
|
|
3
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const DirectionControl: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
2
|
+
[key: string]: any;
|
|
3
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const DiscordControl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
link: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
9
|
+
link: {
|
|
10
|
+
type: StringConstructor;
|
|
11
|
+
required: true;
|
|
12
|
+
};
|
|
13
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const GithubControl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
link: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
9
|
+
link: {
|
|
10
|
+
type: StringConstructor;
|
|
11
|
+
required: true;
|
|
12
|
+
};
|
|
13
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export interface HeaderControlProps {
|
|
2
|
+
tooltip: string;
|
|
3
|
+
component?: string;
|
|
4
|
+
'aria-label'?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const HeaderControl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
7
|
+
tooltip: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
required: true;
|
|
10
|
+
};
|
|
11
|
+
component: {
|
|
12
|
+
type: StringConstructor;
|
|
13
|
+
default: string;
|
|
14
|
+
};
|
|
15
|
+
'aria-label': {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
default: undefined;
|
|
18
|
+
};
|
|
19
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
20
|
+
[key: string]: any;
|
|
21
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
22
|
+
tooltip: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
required: true;
|
|
25
|
+
};
|
|
26
|
+
component: {
|
|
27
|
+
type: StringConstructor;
|
|
28
|
+
default: string;
|
|
29
|
+
};
|
|
30
|
+
'aria-label': {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
default: undefined;
|
|
33
|
+
};
|
|
34
|
+
}>> & Readonly<{}>, {
|
|
35
|
+
component: string;
|
|
36
|
+
'aria-label': string;
|
|
37
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
export declare const HeaderControls: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
onSearch: {
|
|
4
|
+
type: PropType<() => void>;
|
|
5
|
+
default: undefined;
|
|
6
|
+
};
|
|
7
|
+
githubLink: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
default: undefined;
|
|
10
|
+
};
|
|
11
|
+
withDirectionToggle: {
|
|
12
|
+
type: BooleanConstructor;
|
|
13
|
+
default: boolean;
|
|
14
|
+
};
|
|
15
|
+
withSearch: {
|
|
16
|
+
type: BooleanConstructor;
|
|
17
|
+
default: boolean;
|
|
18
|
+
};
|
|
19
|
+
withGithub: {
|
|
20
|
+
type: BooleanConstructor;
|
|
21
|
+
default: boolean;
|
|
22
|
+
};
|
|
23
|
+
withDiscord: {
|
|
24
|
+
type: BooleanConstructor;
|
|
25
|
+
default: boolean;
|
|
26
|
+
};
|
|
27
|
+
discordLink: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
required: true;
|
|
30
|
+
};
|
|
31
|
+
withColorScheme: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
35
|
+
withSupport: {
|
|
36
|
+
type: BooleanConstructor;
|
|
37
|
+
default: boolean;
|
|
38
|
+
};
|
|
39
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
40
|
+
[key: string]: any;
|
|
41
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
42
|
+
onSearch: {
|
|
43
|
+
type: PropType<() => void>;
|
|
44
|
+
default: undefined;
|
|
45
|
+
};
|
|
46
|
+
githubLink: {
|
|
47
|
+
type: StringConstructor;
|
|
48
|
+
default: undefined;
|
|
49
|
+
};
|
|
50
|
+
withDirectionToggle: {
|
|
51
|
+
type: BooleanConstructor;
|
|
52
|
+
default: boolean;
|
|
53
|
+
};
|
|
54
|
+
withSearch: {
|
|
55
|
+
type: BooleanConstructor;
|
|
56
|
+
default: boolean;
|
|
57
|
+
};
|
|
58
|
+
withGithub: {
|
|
59
|
+
type: BooleanConstructor;
|
|
60
|
+
default: boolean;
|
|
61
|
+
};
|
|
62
|
+
withDiscord: {
|
|
63
|
+
type: BooleanConstructor;
|
|
64
|
+
default: boolean;
|
|
65
|
+
};
|
|
66
|
+
discordLink: {
|
|
67
|
+
type: StringConstructor;
|
|
68
|
+
required: true;
|
|
69
|
+
};
|
|
70
|
+
withColorScheme: {
|
|
71
|
+
type: BooleanConstructor;
|
|
72
|
+
default: boolean;
|
|
73
|
+
};
|
|
74
|
+
withSupport: {
|
|
75
|
+
type: BooleanConstructor;
|
|
76
|
+
default: boolean;
|
|
77
|
+
};
|
|
78
|
+
}>> & Readonly<{}>, {
|
|
79
|
+
onSearch: () => void;
|
|
80
|
+
githubLink: string;
|
|
81
|
+
withDirectionToggle: boolean;
|
|
82
|
+
withSearch: boolean;
|
|
83
|
+
withGithub: boolean;
|
|
84
|
+
withDiscord: boolean;
|
|
85
|
+
withColorScheme: boolean;
|
|
86
|
+
withSupport: boolean;
|
|
87
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const SearchControl: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
2
|
+
[key: string]: any;
|
|
3
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SearchControl } from './SearchControl';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
export declare const SearchMobileControl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
onSearch: {
|
|
4
|
+
type: PropType<() => void>;
|
|
5
|
+
required: true;
|
|
6
|
+
};
|
|
7
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
10
|
+
onSearch: {
|
|
11
|
+
type: PropType<() => void>;
|
|
12
|
+
required: true;
|
|
13
|
+
};
|
|
14
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const SupportControl: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
2
|
+
[key: string]: any;
|
|
3
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
export declare const DiscordIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
size: {
|
|
4
|
+
type: PropType<string | number>;
|
|
5
|
+
default: undefined;
|
|
6
|
+
};
|
|
7
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
10
|
+
size: {
|
|
11
|
+
type: PropType<string | number>;
|
|
12
|
+
default: undefined;
|
|
13
|
+
};
|
|
14
|
+
}>> & Readonly<{}>, {
|
|
15
|
+
size: string | number;
|
|
16
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
export declare const GithubIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
size: {
|
|
4
|
+
type: PropType<string | number>;
|
|
5
|
+
default: undefined;
|
|
6
|
+
};
|
|
7
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
10
|
+
size: {
|
|
11
|
+
type: PropType<string | number>;
|
|
12
|
+
default: undefined;
|
|
13
|
+
};
|
|
14
|
+
}>> & Readonly<{}>, {
|
|
15
|
+
size: string | number;
|
|
16
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
package/lib/index.d.mts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { ColorSchemeControl } from './ColorSchemeControl';
|
|
2
|
+
export { DirectionControl } from './DirectionControl';
|
|
3
|
+
export { DiscordControl } from './DiscordControl';
|
|
4
|
+
export { GithubControl } from './GithubControl';
|
|
5
|
+
export { HeaderControl } from './HeaderControl';
|
|
6
|
+
export { HeaderControls } from './HeaderControls';
|
|
7
|
+
export { SearchMobileControl } from './SearchMobileControl';
|
|
8
|
+
export { SearchControl } from './SearchControl';
|
|
9
|
+
export { SupportControl } from './SupportControl';
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { ColorSchemeControl } from './ColorSchemeControl';
|
|
2
|
+
export { DirectionControl } from './DirectionControl';
|
|
3
|
+
export { DiscordControl } from './DiscordControl';
|
|
4
|
+
export { GithubControl } from './GithubControl';
|
|
5
|
+
export { HeaderControl } from './HeaderControl';
|
|
6
|
+
export { HeaderControls } from './HeaderControls';
|
|
7
|
+
export { SearchMobileControl } from './SearchMobileControl';
|
|
8
|
+
export { SearchControl } from './SearchControl';
|
|
9
|
+
export { SupportControl } from './SupportControl';
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mantine-vue/mantine-header",
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "Components used in headers of *.mantine.dev websites (Vue port of @mantinex/mantine-header)",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"files": [
|
|
7
|
+
"cjs",
|
|
8
|
+
"esm",
|
|
9
|
+
"lib",
|
|
10
|
+
"styles.css",
|
|
11
|
+
"styles.layer.css",
|
|
12
|
+
"styles"
|
|
13
|
+
],
|
|
14
|
+
"sideEffects": [
|
|
15
|
+
"*.css"
|
|
16
|
+
],
|
|
17
|
+
"main": "./cjs/index.cjs",
|
|
18
|
+
"module": "./esm/index.mjs",
|
|
19
|
+
"types": "./lib/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./lib/index.d.mts",
|
|
24
|
+
"default": "./esm/index.mjs"
|
|
25
|
+
},
|
|
26
|
+
"require": {
|
|
27
|
+
"types": "./lib/index.d.ts",
|
|
28
|
+
"default": "./cjs/index.cjs"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@mantine-vue/core": "workspace:*",
|
|
34
|
+
"@phosphor-icons/vue": "^2.2",
|
|
35
|
+
"vue": "^3.5.0"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"@mantine-vue/core": "1.1.1",
|
|
39
|
+
"@phosphor-icons/vue": "^2.2",
|
|
40
|
+
"vue": "^3.5.0"
|
|
41
|
+
}
|
|
42
|
+
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
._control_1fscv_1 {
|
|
2
|
+
width: calc(2.125rem * var(--mantine-scale));
|
|
3
|
+
height: calc(2.125rem * var(--mantine-scale));
|
|
4
|
+
border-radius: var(--mantine-radius-md);
|
|
5
|
+
border: calc(0.0625rem * var(--mantine-scale)) solid;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-mantine-color-scheme='light'] ._control_1fscv_1 {
|
|
12
|
+
border-color: var(--mantine-color-gray-3);
|
|
13
|
+
color: var(--mantine-color-gray-7);
|
|
14
|
+
background-color: var(--mantine-color-white);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (hover: hover) {
|
|
18
|
+
|
|
19
|
+
[data-mantine-color-scheme='light'] ._control_1fscv_1:hover {
|
|
20
|
+
background-color: var(--mantine-color-gray-0);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@media (hover: none) {
|
|
25
|
+
|
|
26
|
+
[data-mantine-color-scheme='light'] ._control_1fscv_1:active {
|
|
27
|
+
background-color: var(--mantine-color-gray-0);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-mantine-color-scheme='dark'] ._control_1fscv_1 {
|
|
32
|
+
border-color: var(--mantine-color-dark-4);
|
|
33
|
+
color: var(--mantine-color-white);
|
|
34
|
+
background-color: var(--mantine-color-dark-6);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (hover: hover) {
|
|
38
|
+
|
|
39
|
+
[data-mantine-color-scheme='dark'] ._control_1fscv_1:hover {
|
|
40
|
+
background-color: var(--mantine-color-dark-5);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (hover: none) {
|
|
45
|
+
|
|
46
|
+
[data-mantine-color-scheme='dark'] ._control_1fscv_1:active {
|
|
47
|
+
background-color: var(--mantine-color-dark-5);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
._icon_1aq4n_1 {
|
|
51
|
+
width: calc(1.375rem * var(--mantine-scale));
|
|
52
|
+
height: calc(1.375rem * var(--mantine-scale));
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[data-mantine-color-scheme='dark'] ._dark_1aq4n_6 {
|
|
56
|
+
display: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-mantine-color-scheme='light'] ._dark_1aq4n_6 {
|
|
60
|
+
display: block;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[data-mantine-color-scheme='light'] ._light_1aq4n_16 {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-mantine-color-scheme='dark'] ._light_1aq4n_16 {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
._discord_cld8z_1 {
|
|
71
|
+
--discord-color: #5865f2;
|
|
72
|
+
--discord-color-hover: #4f5bd5;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
[data-mantine-color-scheme] ._discord_cld8z_1 {
|
|
76
|
+
background-color: var(--discord-color);
|
|
77
|
+
border-color: var(--discord-color);
|
|
78
|
+
color: var(--mantine-color-white);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@media (hover: hover) {
|
|
82
|
+
|
|
83
|
+
[data-mantine-color-scheme] ._discord_cld8z_1:hover {
|
|
84
|
+
background-color: var(--discord-color-hover);
|
|
85
|
+
border-color: var(--discord-color-hover);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@media (hover: none) {
|
|
90
|
+
|
|
91
|
+
[data-mantine-color-scheme] ._discord_cld8z_1:active {
|
|
92
|
+
background-color: var(--discord-color-hover);
|
|
93
|
+
border-color: var(--discord-color-hover);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
._root_1atp3_1 {
|
|
97
|
+
height: calc(2.125rem * var(--mantine-scale));
|
|
98
|
+
padding-left: var(--mantine-spacing-sm);
|
|
99
|
+
padding-right: calc(0.25rem * var(--mantine-scale));
|
|
100
|
+
border-radius: var(--mantine-radius-md);
|
|
101
|
+
color: var(--mantine-color-placeholder);
|
|
102
|
+
border: calc(0.0625rem * var(--mantine-scale)) solid;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-mantine-color-scheme='light'] ._root_1atp3_1 {
|
|
106
|
+
border-color: var(--mantine-color-gray-3);
|
|
107
|
+
background-color: var(--mantine-color-white);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-mantine-color-scheme='dark'] ._root_1atp3_1 {
|
|
111
|
+
border-color: var(--mantine-color-dark-4);
|
|
112
|
+
background-color: var(--mantine-color-dark-6);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
[dir="rtl"] ._root_1atp3_1 {
|
|
116
|
+
padding-left: calc(0.25rem * var(--mantine-scale));
|
|
117
|
+
padding-right: var(--mantine-spacing-sm);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
._shortcut_1atp3_25 {
|
|
121
|
+
font-size: calc(0.6875rem * var(--mantine-scale));
|
|
122
|
+
line-height: 1;
|
|
123
|
+
padding: calc(0.25rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale));
|
|
124
|
+
border-radius: var(--mantine-radius-sm);
|
|
125
|
+
border: calc(0.0625rem * var(--mantine-scale)) solid;
|
|
126
|
+
font-weight: bold;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[data-mantine-color-scheme='light'] ._shortcut_1atp3_25 {
|
|
130
|
+
color: var(--mantine-color-gray-7);
|
|
131
|
+
border-color: var(--mantine-color-gray-2);
|
|
132
|
+
background-color: var(--mantine-color-gray-0);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
[data-mantine-color-scheme='dark'] ._shortcut_1atp3_25 {
|
|
136
|
+
color: var(--mantine-color-dark-0);
|
|
137
|
+
border-color: var(--mantine-color-dark-7);
|
|
138
|
+
background-color: var(--mantine-color-dark-7);
|
|
139
|
+
}
|
|
140
|
+
[data-mantine-color-scheme='light'] ._support_1ym9d_1 {
|
|
141
|
+
color: var(--mantine-color-red-8);
|
|
142
|
+
}
|
|
143
|
+
[data-mantine-color-scheme='dark'] ._support_1ym9d_1 {
|
|
144
|
+
color: var(--mantine-color-white);
|
|
145
|
+
background-color: var(--mantine-color-red-9);
|
|
146
|
+
border-color: var(--mantine-color-red-9);
|
|
147
|
+
}
|
|
148
|
+
@media (hover: hover) {
|
|
149
|
+
[data-mantine-color-scheme='dark'] ._support_1ym9d_1:hover {
|
|
150
|
+
background-color: var(--mantine-color-red-8);
|
|
151
|
+
border-color: var(--mantine-color-red-8);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@media (hover: none) {
|
|
155
|
+
[data-mantine-color-scheme='dark'] ._support_1ym9d_1:active {
|
|
156
|
+
background-color: var(--mantine-color-red-8);
|
|
157
|
+
border-color: var(--mantine-color-red-8);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
/*$vite$:1*/
|
package/styles.layer.css
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
@layer mantine {
|
|
2
|
+
._control_1fscv_1 {
|
|
3
|
+
width: calc(2.125rem * var(--mantine-scale));
|
|
4
|
+
height: calc(2.125rem * var(--mantine-scale));
|
|
5
|
+
border-radius: var(--mantine-radius-md);
|
|
6
|
+
border: calc(0.0625rem * var(--mantine-scale)) solid;
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
[data-mantine-color-scheme='light'] ._control_1fscv_1 {
|
|
13
|
+
border-color: var(--mantine-color-gray-3);
|
|
14
|
+
color: var(--mantine-color-gray-7);
|
|
15
|
+
background-color: var(--mantine-color-white);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@media (hover: hover) {
|
|
19
|
+
|
|
20
|
+
[data-mantine-color-scheme='light'] ._control_1fscv_1:hover {
|
|
21
|
+
background-color: var(--mantine-color-gray-0);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@media (hover: none) {
|
|
26
|
+
|
|
27
|
+
[data-mantine-color-scheme='light'] ._control_1fscv_1:active {
|
|
28
|
+
background-color: var(--mantine-color-gray-0);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-mantine-color-scheme='dark'] ._control_1fscv_1 {
|
|
33
|
+
border-color: var(--mantine-color-dark-4);
|
|
34
|
+
color: var(--mantine-color-white);
|
|
35
|
+
background-color: var(--mantine-color-dark-6);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media (hover: hover) {
|
|
39
|
+
|
|
40
|
+
[data-mantine-color-scheme='dark'] ._control_1fscv_1:hover {
|
|
41
|
+
background-color: var(--mantine-color-dark-5);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (hover: none) {
|
|
46
|
+
|
|
47
|
+
[data-mantine-color-scheme='dark'] ._control_1fscv_1:active {
|
|
48
|
+
background-color: var(--mantine-color-dark-5);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
._icon_1aq4n_1 {
|
|
52
|
+
width: calc(1.375rem * var(--mantine-scale));
|
|
53
|
+
height: calc(1.375rem * var(--mantine-scale));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-mantine-color-scheme='dark'] ._dark_1aq4n_6 {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
[data-mantine-color-scheme='light'] ._dark_1aq4n_6 {
|
|
61
|
+
display: block;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[data-mantine-color-scheme='light'] ._light_1aq4n_16 {
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[data-mantine-color-scheme='dark'] ._light_1aq4n_16 {
|
|
69
|
+
display: block;
|
|
70
|
+
}
|
|
71
|
+
._discord_cld8z_1 {
|
|
72
|
+
--discord-color: #5865f2;
|
|
73
|
+
--discord-color-hover: #4f5bd5;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[data-mantine-color-scheme] ._discord_cld8z_1 {
|
|
77
|
+
background-color: var(--discord-color);
|
|
78
|
+
border-color: var(--discord-color);
|
|
79
|
+
color: var(--mantine-color-white);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@media (hover: hover) {
|
|
83
|
+
|
|
84
|
+
[data-mantine-color-scheme] ._discord_cld8z_1:hover {
|
|
85
|
+
background-color: var(--discord-color-hover);
|
|
86
|
+
border-color: var(--discord-color-hover);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (hover: none) {
|
|
91
|
+
|
|
92
|
+
[data-mantine-color-scheme] ._discord_cld8z_1:active {
|
|
93
|
+
background-color: var(--discord-color-hover);
|
|
94
|
+
border-color: var(--discord-color-hover);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
._root_1atp3_1 {
|
|
98
|
+
height: calc(2.125rem * var(--mantine-scale));
|
|
99
|
+
padding-left: var(--mantine-spacing-sm);
|
|
100
|
+
padding-right: calc(0.25rem * var(--mantine-scale));
|
|
101
|
+
border-radius: var(--mantine-radius-md);
|
|
102
|
+
color: var(--mantine-color-placeholder);
|
|
103
|
+
border: calc(0.0625rem * var(--mantine-scale)) solid;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
[data-mantine-color-scheme='light'] ._root_1atp3_1 {
|
|
107
|
+
border-color: var(--mantine-color-gray-3);
|
|
108
|
+
background-color: var(--mantine-color-white);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
[data-mantine-color-scheme='dark'] ._root_1atp3_1 {
|
|
112
|
+
border-color: var(--mantine-color-dark-4);
|
|
113
|
+
background-color: var(--mantine-color-dark-6);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[dir="rtl"] ._root_1atp3_1 {
|
|
117
|
+
padding-left: calc(0.25rem * var(--mantine-scale));
|
|
118
|
+
padding-right: var(--mantine-spacing-sm);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
._shortcut_1atp3_25 {
|
|
122
|
+
font-size: calc(0.6875rem * var(--mantine-scale));
|
|
123
|
+
line-height: 1;
|
|
124
|
+
padding: calc(0.25rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale));
|
|
125
|
+
border-radius: var(--mantine-radius-sm);
|
|
126
|
+
border: calc(0.0625rem * var(--mantine-scale)) solid;
|
|
127
|
+
font-weight: bold;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[data-mantine-color-scheme='light'] ._shortcut_1atp3_25 {
|
|
131
|
+
color: var(--mantine-color-gray-7);
|
|
132
|
+
border-color: var(--mantine-color-gray-2);
|
|
133
|
+
background-color: var(--mantine-color-gray-0);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
[data-mantine-color-scheme='dark'] ._shortcut_1atp3_25 {
|
|
137
|
+
color: var(--mantine-color-dark-0);
|
|
138
|
+
border-color: var(--mantine-color-dark-7);
|
|
139
|
+
background-color: var(--mantine-color-dark-7);
|
|
140
|
+
}
|
|
141
|
+
[data-mantine-color-scheme='light'] ._support_1ym9d_1 {
|
|
142
|
+
color: var(--mantine-color-red-8);
|
|
143
|
+
}
|
|
144
|
+
[data-mantine-color-scheme='dark'] ._support_1ym9d_1 {
|
|
145
|
+
color: var(--mantine-color-white);
|
|
146
|
+
background-color: var(--mantine-color-red-9);
|
|
147
|
+
border-color: var(--mantine-color-red-9);
|
|
148
|
+
}
|
|
149
|
+
@media (hover: hover) {
|
|
150
|
+
[data-mantine-color-scheme='dark'] ._support_1ym9d_1:hover {
|
|
151
|
+
background-color: var(--mantine-color-red-8);
|
|
152
|
+
border-color: var(--mantine-color-red-8);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
@media (hover: none) {
|
|
156
|
+
[data-mantine-color-scheme='dark'] ._support_1ym9d_1:active {
|
|
157
|
+
background-color: var(--mantine-color-red-8);
|
|
158
|
+
border-color: var(--mantine-color-red-8);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
/*$vite$:1*/
|
|
162
|
+
}
|