rimelight-components 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
<template>
|
|
4
4
|
<footer class="py-8 lg:py-12">
|
|
5
|
-
<UContainer class="flex flex-col justify-between
|
|
5
|
+
<UContainer class="gap-xl flex flex-col justify-between lg:flex-row">
|
|
6
6
|
<div
|
|
7
|
-
class="order-last flex flex-col items-center justify-between
|
|
7
|
+
class="gap-xl order-last flex flex-col items-center justify-between lg:order-1 lg:items-start"
|
|
8
8
|
>
|
|
9
9
|
<slot name="left" />
|
|
10
10
|
</div>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<slot name="center" />
|
|
13
13
|
</div>
|
|
14
14
|
<div
|
|
15
|
-
class="order-first flex flex-col items-center justify-between
|
|
15
|
+
class="gap-xl order-first flex flex-col items-center justify-between lg:order-3 lg:flex-1 lg:items-end"
|
|
16
16
|
>
|
|
17
17
|
<slot name="right" />
|
|
18
18
|
</div>
|
|
@@ -39,59 +39,59 @@ const color = computed(() => {
|
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
41
|
<template>
|
|
42
|
-
<UCard variant="subtle" class="w-
|
|
43
|
-
<template #header v-if="name">
|
|
44
|
-
<h3 class="text-lg font-bold">{{ name }}</h3>
|
|
45
|
-
</template>
|
|
46
|
-
<div class="gap-sm flex flex-row">
|
|
47
|
-
<div class="aspect-square size-48" :style="{ backgroundColor: color }" />
|
|
48
|
-
<div class="gap-sm flex flex-col justify-center">
|
|
49
|
-
<UButton
|
|
50
|
-
v-if="hex"
|
|
51
|
-
variant="outline"
|
|
52
|
-
size="sm"
|
|
53
|
-
icon="lucide:copy"
|
|
54
|
-
label="Copy HEX"
|
|
55
|
-
class="w-36"
|
|
56
|
-
@click="copyToClipboard(hex)"
|
|
57
|
-
/>
|
|
58
|
-
<UButton
|
|
59
|
-
v-if="rgb"
|
|
60
|
-
variant="outline"
|
|
61
|
-
size="sm"
|
|
62
|
-
icon="lucide:copy"
|
|
63
|
-
label="Copy RGB"
|
|
64
|
-
class="w-36"
|
|
65
|
-
@click="copyToClipboard(rgb)"
|
|
66
|
-
/>
|
|
67
|
-
<UButton
|
|
68
|
-
v-if="hsl"
|
|
69
|
-
variant="outline"
|
|
70
|
-
size="sm"
|
|
71
|
-
icon="lucide:copy"
|
|
72
|
-
label="Copy HSL"
|
|
73
|
-
class="w-36"
|
|
74
|
-
@click="copyToClipboard(hsl)"
|
|
75
|
-
/>
|
|
76
|
-
<UButton
|
|
77
|
-
v-if="oklch"
|
|
78
|
-
variant="outline"
|
|
79
|
-
size="sm"
|
|
80
|
-
icon="lucide:copy"
|
|
81
|
-
label="Copy OKLCH"
|
|
82
|
-
class="w-36"
|
|
83
|
-
@click="copyToClipboard(oklch)"
|
|
84
|
-
/>
|
|
85
|
-
<UButton
|
|
86
|
-
v-if="cmyk"
|
|
87
|
-
variant="outline"
|
|
88
|
-
size="sm"
|
|
89
|
-
icon="lucide:copy"
|
|
90
|
-
label="Copy CMYK"
|
|
91
|
-
class="w-36"
|
|
92
|
-
@click="copyToClipboard(cmyk)"
|
|
93
|
-
/>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</UCard>
|
|
42
|
+
<UCard variant="subtle" class="w-full rounded-none xl:w-fit">
|
|
43
|
+
<template #header v-if="name">
|
|
44
|
+
<h3 class="text-lg font-bold">{{ name }}</h3>
|
|
45
|
+
</template>
|
|
46
|
+
<div class="gap-sm flex flex-col items-center xl:flex-row xl:items-start">
|
|
47
|
+
<div class="aspect-square size-48" :style="{ backgroundColor: color }" />
|
|
48
|
+
<div class="gap-sm flex w-full flex-col justify-center">
|
|
49
|
+
<UButton
|
|
50
|
+
v-if="hex"
|
|
51
|
+
variant="outline"
|
|
52
|
+
size="sm"
|
|
53
|
+
icon="lucide:copy"
|
|
54
|
+
label="Copy HEX"
|
|
55
|
+
class="w-full xl:w-36"
|
|
56
|
+
@click="copyToClipboard(hex)"
|
|
57
|
+
/>
|
|
58
|
+
<UButton
|
|
59
|
+
v-if="rgb"
|
|
60
|
+
variant="outline"
|
|
61
|
+
size="sm"
|
|
62
|
+
icon="lucide:copy"
|
|
63
|
+
label="Copy RGB"
|
|
64
|
+
class="w-full xl:w-36"
|
|
65
|
+
@click="copyToClipboard(rgb)"
|
|
66
|
+
/>
|
|
67
|
+
<UButton
|
|
68
|
+
v-if="hsl"
|
|
69
|
+
variant="outline"
|
|
70
|
+
size="sm"
|
|
71
|
+
icon="lucide:copy"
|
|
72
|
+
label="Copy HSL"
|
|
73
|
+
class="w-full xl:w-36"
|
|
74
|
+
@click="copyToClipboard(hsl)"
|
|
75
|
+
/>
|
|
76
|
+
<UButton
|
|
77
|
+
v-if="oklch"
|
|
78
|
+
variant="outline"
|
|
79
|
+
size="sm"
|
|
80
|
+
icon="lucide:copy"
|
|
81
|
+
label="Copy OKLCH"
|
|
82
|
+
class="w-full xl:w-36"
|
|
83
|
+
@click="copyToClipboard(oklch)"
|
|
84
|
+
/>
|
|
85
|
+
<UButton
|
|
86
|
+
v-if="cmyk"
|
|
87
|
+
variant="outline"
|
|
88
|
+
size="sm"
|
|
89
|
+
icon="lucide:copy"
|
|
90
|
+
label="Copy CMYK"
|
|
91
|
+
class="w-full xl:w-36"
|
|
92
|
+
@click="copyToClipboard(cmyk)"
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</UCard>
|
|
97
97
|
</template>
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { useClipboard } from "#imports";
|
|
3
|
-
import { useToast } from "#imports";
|
|
4
2
|
import { computed } from "#imports";
|
|
5
3
|
const { name, jpg, png, webp, svg } = defineProps({
|
|
6
4
|
name: { type: String, required: false },
|
|
@@ -19,20 +17,20 @@ const image = computed(() => {
|
|
|
19
17
|
</script>
|
|
20
18
|
|
|
21
19
|
<template>
|
|
22
|
-
<UCard variant="subtle" class="w-
|
|
20
|
+
<UCard variant="subtle" class="w-full rounded-none xl:w-fit">
|
|
23
21
|
<template #header v-if="name">
|
|
24
22
|
<h3 class="text-lg font-bold">{{ name }}</h3>
|
|
25
23
|
</template>
|
|
26
|
-
<div class="gap-sm flex flex-row">
|
|
24
|
+
<div class="gap-sm flex flex-col items-center xl:flex-row xl:items-start">
|
|
27
25
|
<NuxtImg :src="image" class="size-48" />
|
|
28
|
-
<div class="gap-sm flex flex-col justify-center">
|
|
26
|
+
<div class="gap-sm flex w-full flex-col justify-center">
|
|
29
27
|
<UButton
|
|
30
28
|
v-if="jpg"
|
|
31
29
|
variant="outline"
|
|
32
30
|
size="sm"
|
|
33
31
|
icon="lucide:download"
|
|
34
32
|
label="Download JPG"
|
|
35
|
-
class="w-36"
|
|
33
|
+
class="w-full xl:w-36"
|
|
36
34
|
:to="jpg"
|
|
37
35
|
target="_blank"
|
|
38
36
|
/>
|
|
@@ -42,7 +40,7 @@ const image = computed(() => {
|
|
|
42
40
|
size="sm"
|
|
43
41
|
icon="lucide:download"
|
|
44
42
|
label="Download PNG"
|
|
45
|
-
class="w-36"
|
|
43
|
+
class="w-full xl:w-36"
|
|
46
44
|
:to="png"
|
|
47
45
|
target="_blank"
|
|
48
46
|
/>
|
|
@@ -52,7 +50,7 @@ const image = computed(() => {
|
|
|
52
50
|
size="sm"
|
|
53
51
|
icon="lucide:download"
|
|
54
52
|
label="Download WEBP"
|
|
55
|
-
class="w-36"
|
|
53
|
+
class="w-full xl:w-36"
|
|
56
54
|
:to="webp"
|
|
57
55
|
target="_blank"
|
|
58
56
|
/>
|
|
@@ -62,7 +60,7 @@ const image = computed(() => {
|
|
|
62
60
|
size="sm"
|
|
63
61
|
icon="lucide:download"
|
|
64
62
|
label="Download SVG"
|
|
65
|
-
class="w-36"
|
|
63
|
+
class="w-full xl:w-36"
|
|
66
64
|
:to="svg"
|
|
67
65
|
target="_blank"
|
|
68
66
|
/>
|