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 gap-xl lg:flex-row">
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 gap-xl lg:order-1 lg:flex-1 lg:items-start"
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 gap-xl lg:order-3 lg:flex-1 lg:items-end"
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-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>
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-fit rounded-none">
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
  />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rimelight-components",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "description": "My new Nuxt module",
5
5
  "repository": "Rimelight Entertainment/rimelight-components",
6
6
  "license": "MIT",