@bobbykim/mcl-cards 0.5.0 → 0.7.0

package/lib/mcl-card-a/MclCardA.vue

@@ -1,251 +0,0 @@
-<script setup lang="ts">
-import type {
-  ColorPalette,
-  CrossOrigin,
-  CtaTarget,
-  HeadingSize,
-} from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import type { CardClickEvent } from '../common/index.types'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-    borderColor?: ColorPalette
-    bgColor?: ColorPalette
-    displayImage?: boolean
-    imageSource?: string
-    imageAlt?: string
-    imageCors?: CrossOrigin
-    displayCta?: boolean
-    ctaAsLink?: boolean
-    ctaText?: string
-    ctaColor?: ColorPalette
-    ctaLink?: string
-    ctaTarget?: CtaTarget
-    displayLabel?: boolean
-    labelText?: string
-    labelTextColor?: ColorPalette
-    labelColor?: ColorPalette
-    enlargeOnHover?: boolean
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    rounded?: boolean
-    displayShadow?: boolean
-  }>(),
-  {
-    titleSize: 'md',
-    titleColor: 'dark-3',
-    borderColor: 'light-3',
-    bgColor: 'light-1',
-    displayImage: true,
-    imageCors: 'anonymous',
-    displayCta: true,
-    ctaAsLink: true,
-    ctaColor: 'primary',
-    ctaLink: '#',
-    ctaTarget: '_self',
-    ctaText: 'cta text',
-    displayLabel: true,
-    labelText: 'Lorem ipsum',
-    labelTextColor: 'light-1',
-    labelColor: 'dark-4',
-    displayHighlight: true,
-    highlightColor: 'primary',
-    enlargeOnHover: false,
-    rounded: true,
-    displayShadow: true,
-  }
-)
-
-const slots = defineSlots<{
-  default: any
-}>()
-const emit = defineEmits<{
-  (e: 'card-click', event: Event, item: CardClickEvent): void
-  (e: 'card-btn-click', event: Event, item: CardClickEvent): void
-}>()
-
-const getBorderClass = (
-  border: ColorPalette,
-  bg: ColorPalette,
-  rounded: boolean,
-  enlarge: boolean,
-  shadow: boolean
-): string => {
-  /**
-   * @border - borderColor
-   * @bg - bgColor
-   * @rounded - rounded
-   * @enlarge - enlargeOnHover
-   * @shadow - displayShadow
-   */
-
-  const classArray = [
-    generateClass('BORDER', border),
-    generateClass('BGCOLOR', bg),
-  ]
-
-  if (rounded) {
-    classArray.push('rounded-md')
-  } else {
-    classArray.push('rounded-sm')
-  }
-  if (enlarge) {
-    classArray.push('hover:scale-105 transition ease-in duration-300')
-  }
-  if (shadow) {
-    classArray.push('drop-shadow-md')
-  }
-
-  return classArray.join(' ')
-}
-const getTitleClass = (
-  size: HeadingSize,
-  color: ColorPalette,
-  hl: boolean
-): string => {
-  /**
-   * @size - titleSize
-   * @color - titleColor
-   * @hl - displayHighlight
-   */
-
-  const classArray = [
-    generateClass('H3', size),
-    generateClass('TEXTCOLOR', color),
-  ]
-
-  if (hl) {
-    classArray.push('mb-2xs')
-  } else {
-    classArray.push('mb-xs')
-  }
-
-  return classArray.join(' ')
-}
-const getLabelClass = (tColor: ColorPalette, bColor: ColorPalette): string => {
-  /**
-   * @tColor - labelTextColor
-   * @bColor - labelColor
-   */
-  const classArray = [
-    generateClass('TEXTCOLOR', tColor),
-    generateClass('BGCOLOR', bColor),
-  ]
-  return classArray.join(' ')
-}
-const getCtaClass = (color: ColorPalette, round: boolean): string => {
-  /**
-   * @color - ctaColor
-   * @round - rounded
-   */
-  const classArray: string[] = [generateClass('BTNCOLOR', color)]
-
-  const lightColor: string[] = ['light-1', 'light-2', 'light-3', 'light-4']
-
-  let textColor = lightColor.includes(color) ? 'text-black' : 'text-white'
-
-  classArray.push(textColor)
-
-  if (round) {
-    classArray.push('btn-round')
-  }
-
-  return classArray.join(' ')
-}
-const handleButtonClick = (e: Event): void => {
-  const { title, ctaLink, ctaTarget, ctaAsLink } = props
-  const cardEvent: CardClickEvent = {
-    title,
-    url: ctaLink,
-    target: ctaTarget ? ctaTarget : '_self',
-  }
-  !ctaAsLink && e.preventDefault()
-  emit('card-btn-click', e, cardEvent)
-}
-const handleCardClick = (e: Event): void => {
-  const { title, ctaLink, ctaTarget } = props
-  const cardEvent: CardClickEvent = {
-    title,
-    url: ctaLink,
-    target: ctaTarget ? ctaTarget : '_self',
-  }
-  emit('card-click', e, cardEvent)
-}
-</script>
-
-<template>
-  <div
-    class="overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer"
-    :class="
-      getBorderClass(
-        borderColor,
-        bgColor,
-        rounded,
-        enlargeOnHover,
-        displayShadow
-      )
-    "
-    @click="handleCardClick"
-  >
-    <div class="relative" v-if="displayImage">
-      <img
-        :src="imageSource"
-        :alt="imageAlt"
-        :crossorigin="imageCors"
-        class="object-cover object-top h-[220px] min-w-full"
-      />
-      <span
-        v-if="displayLabel"
-        class="py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]"
-        :class="getLabelClass(labelTextColor, labelColor)"
-        v-html="labelText"
-      ></span>
-    </div>
-    <div class="content-height flex flex-col justify-between">
-      <div class="min-h-[100px] p-0">
-        <div class="px-xs pt-sm">
-          <span
-            v-if="!displayImage && displayLabel"
-            class="py-3xs px-2xs mb-2xs inline-block font-bold text-xs"
-            :class="getLabelClass(labelTextColor, labelColor)"
-            v-html="labelText"
-          ></span>
-          <h3
-            :class="getTitleClass(titleSize, titleColor, displayHighlight)"
-            v-html="title"
-          ></h3>
-          <div
-            v-if="displayHighlight"
-            class="mb-xs h-3xs w-md"
-            :class="generateClass('BGCOLOR', highlightColor)"
-          ></div>
-          <div class="mb-sm cursor-default" @click.stop>
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-      <div class="pb-sm border-0 cursor-default" v-if="displayCta" @click.stop>
-        <div class="w-full px-xs">
-          <a
-            :href="ctaLink"
-            :target="ctaTarget"
-            class="btn btn-full"
-            :class="getCtaClass(ctaColor, rounded)"
-            @click="handleButtonClick($event)"
-            >{{ ctaText }}</a
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.content-height {
-  height: calc(100% - 200px);
-}
-</style>

package/lib/mcl-card-a/MclCardA.vue.d.ts

@@ -1,152 +0,0 @@
-import type { ColorPalette, CrossOrigin, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
-import type { CardClickEvent } from '../common/index.types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    borderColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    displayImage?: boolean | undefined;
-    imageSource?: string | undefined;
-    imageAlt?: string | undefined;
-    imageCors?: CrossOrigin | undefined;
-    displayCta?: boolean | undefined;
-    ctaAsLink?: boolean | undefined;
-    ctaText?: string | undefined;
-    ctaColor?: ColorPalette | undefined;
-    ctaLink?: string | undefined;
-    ctaTarget?: CtaTarget | undefined;
-    displayLabel?: boolean | undefined;
-    labelText?: string | undefined;
-    labelTextColor?: ColorPalette | undefined;
-    labelColor?: ColorPalette | undefined;
-    enlargeOnHover?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    rounded?: boolean | undefined;
-    displayShadow?: boolean | undefined;
-}>, {
-    titleSize: string;
-    titleColor: string;
-    borderColor: string;
-    bgColor: string;
-    displayImage: boolean;
-    imageCors: string;
-    displayCta: boolean;
-    ctaAsLink: boolean;
-    ctaColor: string;
-    ctaLink: string;
-    ctaTarget: string;
-    ctaText: string;
-    displayLabel: boolean;
-    labelText: string;
-    labelTextColor: string;
-    labelColor: string;
-    displayHighlight: boolean;
-    highlightColor: string;
-    enlargeOnHover: boolean;
-    rounded: boolean;
-    displayShadow: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (event: Event, item: CardClickEvent) => void;
-    "card-btn-click": (event: Event, item: CardClickEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    borderColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    displayImage?: boolean | undefined;
-    imageSource?: string | undefined;
-    imageAlt?: string | undefined;
-    imageCors?: CrossOrigin | undefined;
-    displayCta?: boolean | undefined;
-    ctaAsLink?: boolean | undefined;
-    ctaText?: string | undefined;
-    ctaColor?: ColorPalette | undefined;
-    ctaLink?: string | undefined;
-    ctaTarget?: CtaTarget | undefined;
-    displayLabel?: boolean | undefined;
-    labelText?: string | undefined;
-    labelTextColor?: ColorPalette | undefined;
-    labelColor?: ColorPalette | undefined;
-    enlargeOnHover?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    rounded?: boolean | undefined;
-    displayShadow?: boolean | undefined;
-}>, {
-    titleSize: string;
-    titleColor: string;
-    borderColor: string;
-    bgColor: string;
-    displayImage: boolean;
-    imageCors: string;
-    displayCta: boolean;
-    ctaAsLink: boolean;
-    ctaColor: string;
-    ctaLink: string;
-    ctaTarget: string;
-    ctaText: string;
-    displayLabel: boolean;
-    labelText: string;
-    labelTextColor: string;
-    labelColor: string;
-    displayHighlight: boolean;
-    highlightColor: string;
-    enlargeOnHover: boolean;
-    rounded: boolean;
-    displayShadow: boolean;
-}>>> & {
-    "onCard-click"?: ((event: Event, item: CardClickEvent) => any) | undefined;
-    "onCard-btn-click"?: ((event: Event, item: CardClickEvent) => any) | undefined;
-}, {
-    bgColor: ColorPalette;
-    titleColor: ColorPalette;
-    titleSize: HeadingSize;
-    borderColor: ColorPalette;
-    displayImage: boolean;
-    imageCors: CrossOrigin;
-    displayCta: boolean;
-    ctaAsLink: boolean;
-    ctaText: string;
-    ctaColor: ColorPalette;
-    ctaLink: string;
-    ctaTarget: CtaTarget;
-    displayLabel: boolean;
-    labelText: string;
-    labelTextColor: ColorPalette;
-    labelColor: ColorPalette;
-    enlargeOnHover: boolean;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    rounded: boolean;
-    displayShadow: boolean;
-}, {}>, Readonly<{
-    default: any;
-}> & {
-    default: any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/lib/mcl-card-b/MclCardB.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import type {
-  ColorPalette,
-  CrossOrigin,
-  CtaTarget,
-  HeadingSize,
-} from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import type { CardClickEvent } from '../common/index.types'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-    titleBlockColor?: ColorPalette
-    borderColor?: ColorPalette
-    imageSource?: string
-    imageAlt?: string
-    imageCors?: CrossOrigin
-    displayGrayScale?: boolean
-    ctaAsLink?: boolean
-    ctaLink?: string
-    ctaTarget?: CtaTarget
-    rounded?: boolean
-  }>(),
-  {
-    titleSize: 'md',
-    titleColor: 'light-1',
-    titleBlockColor: 'dark-4',
-    borderColor: 'light-3',
-    displayGrayScale: true,
-    imageCors: 'anonymous',
-    ctaAsLink: false,
-    ctaLink: '#',
-    ctaTarget: '_self',
-    rounded: false,
-  }
-)
-
-const slots = defineSlots<{
-  default: any
-}>()
-const emit = defineEmits<{
-  (e: 'card-click', event: Event, item: CardClickEvent): void
-}>()
-
-const getBorderClass = (bColor: ColorPalette, rounded: boolean): string => {
-  /**
-   * @bColor - borderColor
-   * @rounded - rounded
-   */
-  const classArray = [generateClass('BORDER', bColor)]
-  if (rounded) {
-    classArray.push('rounded-md')
-  } else {
-    classArray.push('rounded-sm')
-  }
-
-  return classArray.join(' ')
-}
-
-const handleHoverEffect = (dGray: boolean): string => {
-  /**
-   * @dgray - displayGrayScale
-   */
-  if (dGray) {
-    return '[@media(hover:hover)]:grayscale peer-hover:grayscale-0'
-  }
-  return ''
-}
-
-const handleTitleClass = (
-  tSize: HeadingSize,
-  tColor: ColorPalette,
-  tBgColor: ColorPalette
-): string => {
-  /**
-   * @tSize - titleSize
-   * @tColor - titleColor
-   * @tBgColor - titleBlockColor
-   */
-
-  const classArray = [
-    generateClass('H3', tSize),
-    generateClass('TEXTCOLOR', tColor),
-    generateClass('BGCOLOR', tBgColor),
-  ]
-
-  return classArray.join(' ')
-}
-
-const handleCardClick = (e: Event): void => {
-  /**
-   * @e - Event
-   */
-  const { title, ctaLink, ctaTarget, ctaAsLink } = props
-  !ctaAsLink && e.preventDefault()
-  const cardEvent: CardClickEvent = {
-    title,
-    url: ctaLink,
-    target: ctaTarget ? ctaTarget : '_self',
-  }
-  console.log(cardEvent)
-  emit('card-click', e, cardEvent)
-}
-</script>
-
-<template>
-  <div
-    class="relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border border-light-3"
-    :class="getBorderClass(borderColor, rounded)"
-  >
-    <a :href="ctaLink" :target="ctaTarget" @click="handleCardClick($event)">
-      <div
-        class="absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200"
-      >
-        <h3
-          v-html="title"
-          class="inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide"
-          :class="handleTitleClass(titleSize, titleColor, titleBlockColor)"
-        ></h3>
-        <slot></slot>
-      </div>
-      <img
-        :src="imageSource"
-        :alt="imageAlt"
-        :crossorigin="imageCors"
-        class="relative z-10 object-cover aspect-[3/4] transition-all duration-200"
-        :class="handleHoverEffect(displayGrayScale)"
-      />
-    </a>
-  </div>
-</template>

package/lib/mcl-card-b/MclCardB.vue.d.ts

@@ -1,95 +0,0 @@
-import type { ColorPalette, CrossOrigin, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
-import type { CardClickEvent } from '../common/index.types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    titleBlockColor?: ColorPalette | undefined;
-    borderColor?: ColorPalette | undefined;
-    imageSource?: string | undefined;
-    imageAlt?: string | undefined;
-    imageCors?: CrossOrigin | undefined;
-    displayGrayScale?: boolean | undefined;
-    ctaAsLink?: boolean | undefined;
-    ctaLink?: string | undefined;
-    ctaTarget?: CtaTarget | undefined;
-    rounded?: boolean | undefined;
-}>, {
-    titleSize: string;
-    titleColor: string;
-    titleBlockColor: string;
-    borderColor: string;
-    displayGrayScale: boolean;
-    imageCors: string;
-    ctaAsLink: boolean;
-    ctaLink: string;
-    ctaTarget: string;
-    rounded: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (event: Event, item: CardClickEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    titleBlockColor?: ColorPalette | undefined;
-    borderColor?: ColorPalette | undefined;
-    imageSource?: string | undefined;
-    imageAlt?: string | undefined;
-    imageCors?: CrossOrigin | undefined;
-    displayGrayScale?: boolean | undefined;
-    ctaAsLink?: boolean | undefined;
-    ctaLink?: string | undefined;
-    ctaTarget?: CtaTarget | undefined;
-    rounded?: boolean | undefined;
-}>, {
-    titleSize: string;
-    titleColor: string;
-    titleBlockColor: string;
-    borderColor: string;
-    displayGrayScale: boolean;
-    imageCors: string;
-    ctaAsLink: boolean;
-    ctaLink: string;
-    ctaTarget: string;
-    rounded: boolean;
-}>>> & {
-    "onCard-click"?: ((event: Event, item: CardClickEvent) => any) | undefined;
-}, {
-    titleColor: ColorPalette;
-    titleSize: HeadingSize;
-    borderColor: ColorPalette;
-    imageCors: CrossOrigin;
-    ctaAsLink: boolean;
-    ctaLink: string;
-    ctaTarget: CtaTarget;
-    rounded: boolean;
-    titleBlockColor: ColorPalette;
-    displayGrayScale: boolean;
-}, {}>, Readonly<{
-    default: any;
-}> & {
-    default: any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};