@alphacifer/slidev-addon-theme 0.0.5 → 0.0.6

package/components/horiz-card/HorizCardBadge.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  createHorizCardBadgePath,
+  HORIZ_CARD_KEY,
+} from '../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HorizCardBadge',
+});
+
+export interface IHorizCardBadgeProps {
+  /**
+   * Badge fill color. Overrides context color.
+   */
+  readonly color?: string;
+  /**
+   * Badge text or step number. Overrides context step.
+   */
+  readonly step?: string | number;
+}
+
+const props = withDefaults(defineProps<IHorizCardBadgeProps>(), {
+  step: undefined,
+  color: undefined,
+});
+
+const context = inject(HORIZ_CARD_KEY, undefined);
+
+const resolvedColor = computed(() => {
+  return props.color ?? context?.color.value ?? '#ea583a';
+});
+
+const resolvedStep = computed(() => {
+  return props.step ?? context?.step.value ?? '01';
+});
+
+const badgePath = createHorizCardBadgePath({
+  width: 84,
+  height: 58,
+  tipRadius: 8,
+  topRadius: 12,
+  sideHeight: 46,
+  bottomRadius: 8,
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-horiz-card-badge inline-flex items-center justify-center select-none',
+);
+</script>
+
+<template>
+  <div v-bind="forwardedAttrs()" :class="className()">
+    <svg
+      class="w-[84px] h-[58px] overflow-visible drop-shadow-sm"
+      viewBox="0 0 84 58"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path :d="badgePath" :fill="resolvedColor" />
+      <text
+        x="42"
+        y="27"
+        text-anchor="middle"
+        dominant-baseline="central"
+        fill="#ffffff"
+        class="font-sans font-bold text-[25px] tracking-tight"
+      >
+        <slot>{{ resolvedStep }}</slot>
+      </text>
+    </svg>
+  </div>
+</template>

package/components/horiz-card/HorizCardContent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { HORIZ_CARD_KEY } from '../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HorizCardContent',
+});
+
+export interface IHorizCardContentProps {
+  /**
+   * Content text color. Overrides context textColor.
+   */
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IHorizCardContentProps>(), {
+  color: undefined,
+});
+
+const context = inject(HORIZ_CARD_KEY, undefined);
+
+const contentColor = computed(() => {
+  return props.color ?? context?.textColor.value ?? undefined;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-horiz-card-content font-sans text-xs leading-relaxed text-slate-600 dark:text-slate-300 opacity-90',
+);
+</script>
+
+<template>
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="contentColor ? { color: contentColor } : undefined"
+  >
+    <slot>
+      Lorem ipsum dolor sit amet, nibh est. A magna maecenas, quam magna nec
+      quis, lorem nunc. Suspendisse viverra sodales mauris, cras pharetra proin
+      egestas.
+    </slot>
+  </p>
+</template>

package/components/horiz-card/HorizCardHeading.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { HORIZ_CARD_KEY } from '../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HorizCardHeading',
+});
+
+export interface IHorizCardHeadingProps {
+  /**
+   * Title text color. Overrides context titleColor.
+   */
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IHorizCardHeadingProps>(), {
+  color: undefined,
+});
+
+const context = inject(HORIZ_CARD_KEY, undefined);
+
+const headingColor = computed(() => {
+  return (
+    props.color ??
+    context?.titleColor.value ??
+    context?.color.value ??
+    '#ea583a'
+  );
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-horiz-card-heading font-sans font-bold text-xl tracking-tight leading-tight',
+);
+</script>
+
+<template>
+  <h3
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{ color: headingColor }"
+  >
+    <slot>Lorem Ipsum</slot>
+  </h3>
+</template>

package/components/horiz-card/HorizCardIcon.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { HORIZ_CARD_KEY, hexToRgba } from '../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HorizCardIcon',
+});
+
+export interface IHorizCardIconProps {
+  /**
+   * Optional icon class (e.g. 'i-carbon-search') or component.
+   */
+  readonly icon?: string | object;
+  /**
+   * Foreground icon color. Overrides context color.
+   */
+  readonly color?: string;
+  /**
+   * Circular background color. Overrides context lightColor.
+   */
+  readonly lightColor?: string;
+  /**
+   * Circle size in pixels or CSS string.
+   * @default 96
+   */
+  readonly size?: number | string;
+}
+
+const props = withDefaults(defineProps<IHorizCardIconProps>(), {
+  size: 96,
+  icon: undefined,
+  color: undefined,
+  lightColor: undefined,
+});
+
+const context = inject(HORIZ_CARD_KEY, undefined);
+
+const resolvedColor = computed(() => {
+  return props.color ?? context?.color.value ?? '#ea583a';
+});
+
+const resolvedLightColor = computed(() => {
+  if (props.lightColor) {
+    return props.lightColor;
+  }
+
+  if (context?.lightColor.value) {
+    return context.lightColor.value;
+  }
+
+  return hexToRgba({
+    hex: resolvedColor.value,
+    alpha: 0.16,
+  });
+});
+
+const resolvedSize = computed(() => {
+  if (typeof props.size === 'number') {
+    return `${props.size}px`;
+  }
+
+  return props.size;
+});
+
+const isStringIcon = computed(() => typeof props.icon === 'string');
+const isComponentIcon = computed(() => {
+  return typeof props.icon === 'object' && props.icon !== null;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-horiz-card-icon rounded-full flex items-center justify-center flex-shrink-0 transition-transform duration-300 select-none',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{
+      width: resolvedSize,
+      height: resolvedSize,
+      backgroundColor: resolvedLightColor,
+      color: resolvedColor,
+    }"
+  >
+    <slot>
+      <component
+        :is="props.icon"
+        v-if="isComponentIcon"
+        class="text-4xl"
+        :style="{ color: resolvedColor }"
+      />
+      <div
+        v-else-if="isStringIcon"
+        :class="props.icon"
+        class="text-4xl"
+        :style="{ color: resolvedColor }"
+      />
+      <!-- Default search icon matching the reference card -->
+      <svg
+        v-else
+        class="w-12 h-12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="11" cy="11" r="7" />
+        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke-width="3" stroke-linecap="round" />
+      </svg>
+    </slot>
+  </div>
+</template>