@bagelink/vue 1.15.80 → 1.15.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.80",
+  "version": "1.15.82",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglCard' })
+import type { GradientDirProp, GradientProp } from '@bagelink/vue'
 import { computed } from 'vue'
+import { useGradientVariant } from '@bagelink/vue'
 
 const props = defineProps<{
 	label?: string
@@ -17,6 +19,13 @@ const props = defineProps<{
 	overflowX?: boolean
 	overflowY?: boolean
 	frame?: boolean
+	/** Theme tone used as the gradient's first stop (e.g. `color="green"`). */
+	color?: string
+	/** Paint the card with a gradient. `true` = auto (a darker shade of `color`);
+	    a tone list like "green" or "blue purple pink" sets explicit stops. */
+	gradient?: GradientProp
+	/** Gradient direction — a named dir (`to-br`) or an angle in degrees. */
+	gradientDir?: GradientDirProp
 	bg?:
 		| 'gray'
 		| 'light'
@@ -31,6 +40,16 @@ const props = defineProps<{
 		| 'transparent'
 }>()
 
+const { isGradient, gradientStyle } = useGradientVariant({
+	gradient: () => props.gradient,
+	gradientDir: () => props.gradientDir,
+	color: () => props.color,
+})
+
+// A `pair-*` class is required to activate the `.gradient` paint rule. Mirror
+// Btn: default to the auto case (primary) when no color is given.
+const pairClass = computed(() => isGradient.value ? `pair-${props.color || 'primary'}` : undefined)
+
 const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (props.href !== undefined && props.href !== '') { obj.href = props.href }
@@ -47,7 +66,7 @@ const is = computed(() => {
 
 <template>
 	<component
-		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
+		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="[{
 			thin,
 			'border bg-transparent': outline,
 			'h-100': h100,
@@ -55,7 +74,8 @@ const is = computed(() => {
 			'overflow-x': overflowX,
 			'overflow-y': overflowY,
 			'card_frame': frame,
-		}"
+			'gradient': isGradient,
+		}, pairClass]" :style="gradientStyle"
 	>
 		<span v-if="label" class="card_label block label">
 			{{ label }}