rimelight-components 1.4.3 → 1.5.0
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/runtime/components/backgrounds/AnimateGrid.vue +3 -3
- package/dist/runtime/components/swatches/ColorSwatch.d.vue.ts +1 -0
- package/dist/runtime/components/swatches/ColorSwatch.vue +58 -54
- package/dist/runtime/components/swatches/ColorSwatch.vue.d.ts +1 -0
- package/dist/runtime/components/swatches/ImageSwatch.d.vue.ts +10 -0
- package/dist/runtime/components/swatches/ImageSwatch.vue +72 -0
- package/dist/runtime/components/swatches/ImageSwatch.vue.d.ts +10 -0
- package/package.json +1 -1
|
@@ -48,7 +48,7 @@ onMounted(() => {
|
|
|
48
48
|
</script>
|
|
49
49
|
|
|
50
50
|
<template>
|
|
51
|
-
<
|
|
51
|
+
<UContainer :class="cn('relative block', props.class)">
|
|
52
52
|
<div
|
|
53
53
|
:class="
|
|
54
54
|
cn(
|
|
@@ -70,13 +70,13 @@ onMounted(() => {
|
|
|
70
70
|
<NuxtLink :to="item.href" target="_blank" :index="index">
|
|
71
71
|
<UIcon
|
|
72
72
|
:name="item.icon"
|
|
73
|
-
class="icon mx-auto h-
|
|
73
|
+
class="icon mx-auto h-12 w-auto p-2 lg:h-16 lg:p-3"
|
|
74
74
|
:class="item.iconClass"
|
|
75
75
|
/>
|
|
76
76
|
</NuxtLink>
|
|
77
77
|
</div>
|
|
78
78
|
</div>
|
|
79
|
-
</
|
|
79
|
+
</UContainer>
|
|
80
80
|
</template>
|
|
81
81
|
|
|
82
82
|
<style scoped>
|
|
@@ -4,7 +4,8 @@ import { useToast } from "#imports";
|
|
|
4
4
|
import { computed } from "#imports";
|
|
5
5
|
const { copy } = useClipboard();
|
|
6
6
|
const toast = useToast();
|
|
7
|
-
const { hex, rgb, hsl, oklch, cmyk } = defineProps({
|
|
7
|
+
const { name, hex, rgb, hsl, oklch, cmyk } = defineProps({
|
|
8
|
+
name: { type: String, required: false },
|
|
8
9
|
hex: { type: String, required: false },
|
|
9
10
|
rgb: { type: String, required: false },
|
|
10
11
|
hsl: { type: String, required: false },
|
|
@@ -33,61 +34,64 @@ const color = computed(() => {
|
|
|
33
34
|
if (hsl) return hsl;
|
|
34
35
|
if (cmyk) return cmyk;
|
|
35
36
|
if (oklch) return oklch;
|
|
36
|
-
return "primary-500";
|
|
37
|
+
return "var(--color-primary-500)";
|
|
37
38
|
});
|
|
38
39
|
</script>
|
|
39
40
|
|
|
40
41
|
<template>
|
|
41
|
-
<UCard>
|
|
42
|
-
<
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
42
|
+
<UCard variant="subtle" class="w-fit rounded-none">
|
|
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>
|
|
93
97
|
</template>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
name?: string;
|
|
3
|
+
jpg?: string;
|
|
4
|
+
png?: string;
|
|
5
|
+
webp?: string;
|
|
6
|
+
svg?: string;
|
|
7
|
+
};
|
|
8
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
9
|
+
declare const _default: typeof __VLS_export;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useClipboard } from "#imports";
|
|
3
|
+
import { useToast } from "#imports";
|
|
4
|
+
import { computed } from "#imports";
|
|
5
|
+
const { name, jpg, png, webp, svg } = defineProps({
|
|
6
|
+
name: { type: String, required: false },
|
|
7
|
+
jpg: { type: String, required: false },
|
|
8
|
+
png: { type: String, required: false },
|
|
9
|
+
webp: { type: String, required: false },
|
|
10
|
+
svg: { type: String, required: false }
|
|
11
|
+
});
|
|
12
|
+
const image = computed(() => {
|
|
13
|
+
if (webp) return webp;
|
|
14
|
+
if (png) return png;
|
|
15
|
+
if (jpg) return jpg;
|
|
16
|
+
if (svg) return svg;
|
|
17
|
+
return void 0;
|
|
18
|
+
});
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<UCard variant="subtle" class="w-fit rounded-none">
|
|
23
|
+
<template #header v-if="name">
|
|
24
|
+
<h3 class="text-lg font-bold">{{ name }}</h3>
|
|
25
|
+
</template>
|
|
26
|
+
<div class="gap-sm flex flex-row">
|
|
27
|
+
<NuxtImg :src="image" class="size-48" />
|
|
28
|
+
<div class="gap-sm flex flex-col justify-center">
|
|
29
|
+
<UButton
|
|
30
|
+
v-if="jpg"
|
|
31
|
+
variant="outline"
|
|
32
|
+
size="sm"
|
|
33
|
+
icon="lucide:download"
|
|
34
|
+
label="Download JPG"
|
|
35
|
+
class="w-36"
|
|
36
|
+
:to="jpg"
|
|
37
|
+
target="_blank"
|
|
38
|
+
/>
|
|
39
|
+
<UButton
|
|
40
|
+
v-if="png"
|
|
41
|
+
variant="outline"
|
|
42
|
+
size="sm"
|
|
43
|
+
icon="lucide:download"
|
|
44
|
+
label="Download PNG"
|
|
45
|
+
class="w-36"
|
|
46
|
+
:to="png"
|
|
47
|
+
target="_blank"
|
|
48
|
+
/>
|
|
49
|
+
<UButton
|
|
50
|
+
v-if="webp"
|
|
51
|
+
variant="outline"
|
|
52
|
+
size="sm"
|
|
53
|
+
icon="lucide:download"
|
|
54
|
+
label="Download WEBP"
|
|
55
|
+
class="w-36"
|
|
56
|
+
:to="webp"
|
|
57
|
+
target="_blank"
|
|
58
|
+
/>
|
|
59
|
+
<UButton
|
|
60
|
+
v-if="svg"
|
|
61
|
+
variant="outline"
|
|
62
|
+
size="sm"
|
|
63
|
+
icon="lucide:download"
|
|
64
|
+
label="Download SVG"
|
|
65
|
+
class="w-36"
|
|
66
|
+
:to="svg"
|
|
67
|
+
target="_blank"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</UCard>
|
|
72
|
+
</template>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
name?: string;
|
|
3
|
+
jpg?: string;
|
|
4
|
+
png?: string;
|
|
5
|
+
webp?: string;
|
|
6
|
+
svg?: string;
|
|
7
|
+
};
|
|
8
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
9
|
+
declare const _default: typeof __VLS_export;
|
|
10
|
+
export default _default;
|