rimelight-components 1.4.4 → 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.
- package/dist/runtime/components/app/Footer.vue +3 -3
- package/dist/runtime/components/backgrounds/AnimateGrid.vue +3 -3
- package/dist/runtime/components/swatches/ColorSwatch.vue +8 -8
- package/dist/runtime/components/swatches/ImageSwatch.d.vue.ts +10 -0
- package/dist/runtime/components/swatches/ImageSwatch.vue +70 -0
- package/dist/runtime/components/swatches/ImageSwatch.vue.d.ts +10 -0
- package/package.json +1 -1
|
@@ -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>
|
|
@@ -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>
|
|
@@ -39,20 +39,20 @@ const color = computed(() => {
|
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
41
|
<template>
|
|
42
|
-
<UCard variant="subtle" class="w-
|
|
42
|
+
<UCard variant="subtle" class="w-full rounded-none xl:w-fit">
|
|
43
43
|
<template #header v-if="name">
|
|
44
44
|
<h3 class="text-lg font-bold">{{ name }}</h3>
|
|
45
45
|
</template>
|
|
46
|
-
<div class="gap-sm flex flex-row">
|
|
46
|
+
<div class="gap-sm flex flex-col items-center xl:flex-row xl:items-start">
|
|
47
47
|
<div class="aspect-square size-48" :style="{ backgroundColor: color }" />
|
|
48
|
-
<div class="gap-sm flex flex-col justify-center">
|
|
48
|
+
<div class="gap-sm flex w-full flex-col justify-center">
|
|
49
49
|
<UButton
|
|
50
50
|
v-if="hex"
|
|
51
51
|
variant="outline"
|
|
52
52
|
size="sm"
|
|
53
53
|
icon="lucide:copy"
|
|
54
54
|
label="Copy HEX"
|
|
55
|
-
class="w-
|
|
55
|
+
class="w-full xl:w-36"
|
|
56
56
|
@click="copyToClipboard(hex)"
|
|
57
57
|
/>
|
|
58
58
|
<UButton
|
|
@@ -61,7 +61,7 @@ const color = computed(() => {
|
|
|
61
61
|
size="sm"
|
|
62
62
|
icon="lucide:copy"
|
|
63
63
|
label="Copy RGB"
|
|
64
|
-
class="w-
|
|
64
|
+
class="w-full xl:w-36"
|
|
65
65
|
@click="copyToClipboard(rgb)"
|
|
66
66
|
/>
|
|
67
67
|
<UButton
|
|
@@ -70,7 +70,7 @@ const color = computed(() => {
|
|
|
70
70
|
size="sm"
|
|
71
71
|
icon="lucide:copy"
|
|
72
72
|
label="Copy HSL"
|
|
73
|
-
class="w-
|
|
73
|
+
class="w-full xl:w-36"
|
|
74
74
|
@click="copyToClipboard(hsl)"
|
|
75
75
|
/>
|
|
76
76
|
<UButton
|
|
@@ -79,7 +79,7 @@ const color = computed(() => {
|
|
|
79
79
|
size="sm"
|
|
80
80
|
icon="lucide:copy"
|
|
81
81
|
label="Copy OKLCH"
|
|
82
|
-
class="w-
|
|
82
|
+
class="w-full xl:w-36"
|
|
83
83
|
@click="copyToClipboard(oklch)"
|
|
84
84
|
/>
|
|
85
85
|
<UButton
|
|
@@ -88,7 +88,7 @@ const color = computed(() => {
|
|
|
88
88
|
size="sm"
|
|
89
89
|
icon="lucide:copy"
|
|
90
90
|
label="Copy CMYK"
|
|
91
|
-
class="w-
|
|
91
|
+
class="w-full xl:w-36"
|
|
92
92
|
@click="copyToClipboard(cmyk)"
|
|
93
93
|
/>
|
|
94
94
|
</div>
|
|
@@ -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,70 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed } from "#imports";
|
|
3
|
+
const { name, jpg, png, webp, svg } = defineProps({
|
|
4
|
+
name: { type: String, required: false },
|
|
5
|
+
jpg: { type: String, required: false },
|
|
6
|
+
png: { type: String, required: false },
|
|
7
|
+
webp: { type: String, required: false },
|
|
8
|
+
svg: { type: String, required: false }
|
|
9
|
+
});
|
|
10
|
+
const image = computed(() => {
|
|
11
|
+
if (webp) return webp;
|
|
12
|
+
if (png) return png;
|
|
13
|
+
if (jpg) return jpg;
|
|
14
|
+
if (svg) return svg;
|
|
15
|
+
return void 0;
|
|
16
|
+
});
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<UCard variant="subtle" class="w-full rounded-none xl:w-fit">
|
|
21
|
+
<template #header v-if="name">
|
|
22
|
+
<h3 class="text-lg font-bold">{{ name }}</h3>
|
|
23
|
+
</template>
|
|
24
|
+
<div class="gap-sm flex flex-col items-center xl:flex-row xl:items-start">
|
|
25
|
+
<NuxtImg :src="image" class="size-48" />
|
|
26
|
+
<div class="gap-sm flex w-full flex-col justify-center">
|
|
27
|
+
<UButton
|
|
28
|
+
v-if="jpg"
|
|
29
|
+
variant="outline"
|
|
30
|
+
size="sm"
|
|
31
|
+
icon="lucide:download"
|
|
32
|
+
label="Download JPG"
|
|
33
|
+
class="w-full xl:w-36"
|
|
34
|
+
:to="jpg"
|
|
35
|
+
target="_blank"
|
|
36
|
+
/>
|
|
37
|
+
<UButton
|
|
38
|
+
v-if="png"
|
|
39
|
+
variant="outline"
|
|
40
|
+
size="sm"
|
|
41
|
+
icon="lucide:download"
|
|
42
|
+
label="Download PNG"
|
|
43
|
+
class="w-full xl:w-36"
|
|
44
|
+
:to="png"
|
|
45
|
+
target="_blank"
|
|
46
|
+
/>
|
|
47
|
+
<UButton
|
|
48
|
+
v-if="webp"
|
|
49
|
+
variant="outline"
|
|
50
|
+
size="sm"
|
|
51
|
+
icon="lucide:download"
|
|
52
|
+
label="Download WEBP"
|
|
53
|
+
class="w-full xl:w-36"
|
|
54
|
+
:to="webp"
|
|
55
|
+
target="_blank"
|
|
56
|
+
/>
|
|
57
|
+
<UButton
|
|
58
|
+
v-if="svg"
|
|
59
|
+
variant="outline"
|
|
60
|
+
size="sm"
|
|
61
|
+
icon="lucide:download"
|
|
62
|
+
label="Download SVG"
|
|
63
|
+
class="w-full xl:w-36"
|
|
64
|
+
:to="svg"
|
|
65
|
+
target="_blank"
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</UCard>
|
|
70
|
+
</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;
|