slidev-theme-gtlabo 2.1.7 → 2.1.8
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/components/AlertBox.vue +58 -0
- package/components/HighlightText.vue +40 -0
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!-- AlertBox.vue -->
|
|
2
|
+
<template>
|
|
3
|
+
<div :class="[
|
|
4
|
+
'border-l-8 p-3 shadow-md rounded-r-lg gap-4 flex items-center',
|
|
5
|
+
variants[variant].bg,
|
|
6
|
+
variants[variant].border,
|
|
7
|
+
]">
|
|
8
|
+
<div :class="['w-10 h-10 flex-shrink-0 ml-2', variants[variant].iconColor]">
|
|
9
|
+
<slot name="icon">
|
|
10
|
+
<lucide-frown v-if="variant === 'warning'" class="w-10 h-10" />
|
|
11
|
+
<lucide-lightbulb v-else-if="variant === 'info'" class="w-10 h-10" />
|
|
12
|
+
<lucide-circle-check v-else-if="variant === 'success'" class="w-10 h-10" />
|
|
13
|
+
<lucide-search-check v-else-if="variant === 'result'" class="w-10 h-10" />
|
|
14
|
+
<lucide-circle-x v-else class="w-10 h-10" />
|
|
15
|
+
</slot>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="text-2xl font-bold text-slate-800 leading-relaxed">
|
|
18
|
+
<slot />
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script setup>
|
|
24
|
+
const props = defineProps({
|
|
25
|
+
variant: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: 'warning',
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
const variants = {
|
|
32
|
+
warning: {
|
|
33
|
+
bg: 'bg-slate-50',
|
|
34
|
+
border: 'border-slate-600',
|
|
35
|
+
iconColor: 'text-red-500',
|
|
36
|
+
},
|
|
37
|
+
info: {
|
|
38
|
+
bg: 'bg-gradient-to-r from-slate-50 to-white',
|
|
39
|
+
border: 'border-indigo-600',
|
|
40
|
+
iconColor: 'text-yellow-500',
|
|
41
|
+
},
|
|
42
|
+
success: {
|
|
43
|
+
bg: 'bg-green-50',
|
|
44
|
+
border: 'border-green-600',
|
|
45
|
+
iconColor: 'text-green-500',
|
|
46
|
+
},
|
|
47
|
+
error: {
|
|
48
|
+
bg: 'bg-red-50',
|
|
49
|
+
border: 'border-red-600',
|
|
50
|
+
iconColor: 'text-red-500',
|
|
51
|
+
},
|
|
52
|
+
result: {
|
|
53
|
+
bg: 'bg-gradient-to-r from-slate-50 to-white',
|
|
54
|
+
border: 'border-indigo-600',
|
|
55
|
+
iconColor: 'text-green-500',
|
|
56
|
+
},
|
|
57
|
+
}
|
|
58
|
+
</script>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!-- HighlightText.vue として保存 -->
|
|
2
|
+
<template>
|
|
3
|
+
<span :class="[
|
|
4
|
+
'mx-1',
|
|
5
|
+
'font-bold',
|
|
6
|
+
variants[variant].text,
|
|
7
|
+
variants[variant].decoration,
|
|
8
|
+
]">
|
|
9
|
+
<slot />
|
|
10
|
+
</span>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script setup>
|
|
14
|
+
const props = defineProps({
|
|
15
|
+
variant: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: 'orange',
|
|
18
|
+
validator: (v) => ['orange', 'indigo', 'red', 'green'].includes(v),
|
|
19
|
+
},
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
const variants = {
|
|
23
|
+
orange: {
|
|
24
|
+
text: 'text-orange-700',
|
|
25
|
+
decoration: 'border-b-4 border-orange-300',
|
|
26
|
+
},
|
|
27
|
+
indigo: {
|
|
28
|
+
text: 'text-indigo-700',
|
|
29
|
+
decoration: 'underline decoration-indigo-300 decoration-4 underline-offset-8',
|
|
30
|
+
},
|
|
31
|
+
red: {
|
|
32
|
+
text: 'text-red-700',
|
|
33
|
+
decoration: 'border-b-4 border-red-300',
|
|
34
|
+
},
|
|
35
|
+
green: {
|
|
36
|
+
text: 'text-green-700',
|
|
37
|
+
decoration: 'border-b-4 border-green-300',
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
</script>
|