@bobbykim/mcl-cards 0.5.0 → 0.7.0

package/lib/mcl-card-c/MclCardC.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import type {
-  ColorPalette,
-  CrossOrigin,
-  HeadingSize,
-  OpacityRange,
-} from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    imageSource: string
-    imageAlt?: string
-    title?: string
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    highlightOpacity?: OpacityRange
-    displayTitle?: boolean
-    cardColor?: ColorPalette
-    imageCors?: CrossOrigin
-  }>(),
-  {
-    titleSize: 'md',
-    titleColor: 'dark-3',
-    displayHighlight: false,
-    highlightColor: 'light-3',
-    highlightOpacity: 80,
-    displayTitle: false,
-    cardColor: 'primary',
-    imageCors: 'anonymous',
-  }
-)
-
-const slots = defineSlots<{
-  'card-body': any
-}>()
-const cardFlipped = ref<boolean>(false)
-const emit = defineEmits<{
-  (e: 'card-click', event: Event): void
-}>()
-
-const cardClass = computed(() => {
-  const classArray: string[] = [generateClass('BGCOLOR', props.cardColor)]
-  if (cardFlipped.value) {
-    classArray.push('flip-card')
-  }
-
-  return classArray.join(' ')
-})
-const titleClass = (
-  tSize: HeadingSize,
-  tColor: ColorPalette,
-  dHl: boolean,
-  hlColor: ColorPalette,
-  hlOpacity: OpacityRange
-): string => {
-  /**
-   * @tSize - titleSize
-   * @tColor - titleColor
-   * @dHl - displayHighlight
-   * @hlColor - highlightColor
-   * @hlOpacity - highlightOpacity
-   */
-  const classArray: string[] = [
-    generateClass('H3', tSize),
-    generateClass('TEXTCOLOR', tColor),
-  ]
-  if (dHl) {
-    classArray.push('px-xs py-2xs mb-2xs rounded')
-    classArray.push(generateClass('BGCOLOR', hlColor))
-    classArray.push(generateClass('BGOPACITY', hlOpacity))
-  }
-  return classArray.join(' ')
-}
-const handleCardClick = (e: Event) => {
-  e.preventDefault()
-  if (cardFlipped.value) {
-    emit('card-click', e)
-  }
-  cardFlipped.value = true
-}
-</script>
-
-<template>
-  <div
-    class="relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden"
-    :class="cardClass"
-    @click="handleCardClick"
-  >
-    <img
-      :src="imageSource"
-      :alt="imageAlt"
-      :class="[
-        cardFlipped ? 'opacity-100' : 'opacity-0',
-        'absolute inset-0 object-cover object-center transition-opacity delay-500 duration-[800ms] grayscale-0 hover:grayscale',
-      ]"
-      :crossorigin="imageCors"
-    />
-    <div
-      :class="[
-        cardFlipped ? 'cursor-pointer opacity-100' : 'opacity-0',
-        'relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]',
-      ]"
-    >
-      <h3
-        v-if="displayTitle"
-        class="relative self-start"
-        :class="
-          titleClass(
-            titleSize,
-            titleColor,
-            displayHighlight,
-            highlightColor,
-            highlightOpacity
-          )
-        "
-      >
-        <span>
-          {{ title }}
-        </span>
-      </h3>
-      <slot name="card-body" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.perspective {
-  -webkit-perspective: 1800px;
-  perspective: 1800px;
-}
-.card {
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  -webkit-transform: rotateY(0deg);
-  transform: rotateY(0deg);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-.flip-card {
-  -webkit-transform: rotateY(360deg);
-  transform: rotateY(360deg);
-}
-</style>

package/lib/mcl-card-c/MclCardC.vue.d.ts

@@ -1,84 +0,0 @@
-import type { ColorPalette, CrossOrigin, HeadingSize, OpacityRange } from '@bobbykim/manguito-theme';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    imageSource: string;
-    imageAlt?: string | undefined;
-    title?: string | undefined;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    highlightOpacity?: OpacityRange | undefined;
-    displayTitle?: boolean | undefined;
-    cardColor?: ColorPalette | undefined;
-    imageCors?: CrossOrigin | undefined;
-}>, {
-    titleSize: string;
-    titleColor: string;
-    displayHighlight: boolean;
-    highlightColor: string;
-    highlightOpacity: number;
-    displayTitle: boolean;
-    cardColor: string;
-    imageCors: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (event: Event) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    imageSource: string;
-    imageAlt?: string | undefined;
-    title?: string | undefined;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    highlightOpacity?: OpacityRange | undefined;
-    displayTitle?: boolean | undefined;
-    cardColor?: ColorPalette | undefined;
-    imageCors?: CrossOrigin | undefined;
-}>, {
-    titleSize: string;
-    titleColor: string;
-    displayHighlight: boolean;
-    highlightColor: string;
-    highlightOpacity: number;
-    displayTitle: boolean;
-    cardColor: string;
-    imageCors: string;
-}>>> & {
-    "onCard-click"?: ((event: Event) => any) | undefined;
-}, {
-    titleColor: ColorPalette;
-    titleSize: HeadingSize;
-    imageCors: CrossOrigin;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    highlightOpacity: OpacityRange;
-    displayTitle: boolean;
-    cardColor: ColorPalette;
-}, {}>, Readonly<{
-    'card-body': any;
-}> & {
-    'card-body': 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-d/MclCardD.vue

@@ -1,268 +0,0 @@
-<script setup lang="ts">
-import type {
-  ColorPalette,
-  CrossOrigin,
-  CtaTarget,
-  HeadingSize,
-  Range,
-} from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import { computed } from 'vue'
-import type { CardClickEvent } from '../common/index.types'
-import type { ColorMap } from './index.types'
-
-// gradient color options objects
-const fromColorClasses: ColorMap = {
-  primary: 'from-primary',
-  secondary: 'from-secondary',
-  success: 'from-success',
-  info: 'from-info',
-  warning: 'from-warning',
-  danger: 'from-danger',
-  'light-1': 'from-light-1',
-  'light-2': 'from-light-2',
-  'light-3': 'from-light-3',
-  'light-4': 'from-light-4',
-  'dark-1': 'from-dark-1',
-  'dark-2': 'from-dark-2',
-  'dark-3': 'from-dark-3',
-  'dark-4': 'from-dark-4',
-  black: 'from-black',
-  white: 'from-white',
-  transparent: 'from-transparent',
-}
-const viaColorClasses: ColorMap = {
-  primary: 'via-primary',
-  secondary: 'via-secondary',
-  success: 'via-success',
-  info: 'via-info',
-  warning: 'via-warning',
-  danger: 'via-danger',
-  'light-1': 'via-light-1',
-  'light-2': 'via-light-2',
-  'light-3': 'via-light-3',
-  'light-4': 'via-light-4',
-  'dark-1': 'via-dark-1',
-  'dark-2': 'via-dark-2',
-  'dark-3': 'via-dark-3',
-  'dark-4': 'via-dark-4',
-  black: 'via-black',
-  white: 'via-white',
-  transparent: 'via-transparent',
-}
-const toColorClasses: ColorMap = {
-  primary: 'to-primary',
-  secondary: 'to-secondary',
-  success: 'to-success',
-  info: 'to-info',
-  warning: 'to-warning',
-  danger: 'to-danger',
-  'light-1': 'to-light-1',
-  'light-2': 'to-light-2',
-  'light-3': 'to-light-3',
-  'light-4': 'to-light-4',
-  'dark-1': 'to-dark-1',
-  'dark-2': 'to-dark-2',
-  'dark-3': 'to-dark-3',
-  'dark-4': 'to-dark-4',
-  black: 'to-black',
-  white: 'to-white',
-  transparent: 'to-transparent',
-}
-
-const props = withDefaults(
-  defineProps<{
-    displayImage?: boolean
-    imageSource?: string
-    imageAlt?: string
-    imageCors?: CrossOrigin
-    title: string
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-    bgColor?: ColorPalette
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    ctaText?: string
-    ctaLink: string
-    ctaLinkTarget?: CtaTarget
-    ctaAsLink?: boolean
-    ctaButton?: boolean
-    ctaButtonColor?: ColorPalette
-    ctaButtonBlock?: boolean
-    borderWidth?: Range<1, 10>
-    borderColor?: ColorPalette
-    gradient1?: ColorPalette
-    gradient2?: ColorPalette
-    customColor?: ColorMap
-  }>(),
-  {
-    displayImage: true,
-    imageAlt: '',
-    imageCors: 'anonymous',
-    titleSize: 'md',
-    titleColor: 'dark-4',
-    bgColor: 'light-1',
-    displayHighlight: true,
-    highlightColor: 'primary',
-    ctaText: 'Read more',
-    ctaLinkTarget: '_self',
-    ctaAsLink: true,
-    ctaButton: false,
-    ctaButtonColor: 'warning',
-    ctaButtonBlock: false,
-    borderWidth: 3,
-    borderColor: 'light-3',
-    gradient1: 'primary',
-    gradient2: 'secondary',
-  }
-)
-
-const slots = defineSlots<{
-  default: any
-}>()
-const emit = defineEmits<{
-  (e: 'card-click', event: Event, item: CardClickEvent): void
-}>()
-
-const titleClass = (size: HeadingSize, color: ColorPalette): string => {
-  /**
-   * @param {HeadingSize} size - titleSize
-   * @param {ColorPalette} color - titleColor
-   */
-
-  const classArray: string[] = [
-    generateClass('H2', size),
-    generateClass('TEXTCOLOR', color),
-  ]
-  return classArray.join(' ')
-}
-const buttonClass = (
-  dBtn: boolean,
-  color: ColorPalette,
-  block: boolean
-): string => {
-  /**
-   * @param {boolean} - dBtn = ctaButton
-   * @param {ColorPalette} - color = ctaButtonColor
-   * @param {boolean} - block = ctaButtonBlock
-   */
-  const classArray: string[] = []
-  const lightColor: string[] = ['light-1', 'light-2', 'light-3', 'light-4']
-  if (!dBtn) {
-    classArray.push('mcl-link')
-  }
-  if (dBtn) {
-    classArray.push('btn')
-    classArray.push(generateClass('BTNCOLOR', color))
-  }
-  if (dBtn && block) {
-    classArray.push('btn-full')
-  }
-  if (dBtn && !lightColor.includes(color)) {
-    classArray.push('text-white')
-  }
-  return classArray.join(' ')
-}
-
-const borderVariable = computed(() => {
-  return {
-    '--border-width': `${props.borderWidth}px`,
-  }
-})
-
-const gradientClass = computed<string>(() => {
-  const gradientBorerColor: string = fromColorClasses[props.borderColor]
-  const gradient1Color: string = viaColorClasses[props.gradient1]
-  const gradient2Color: string = toColorClasses[props.gradient2]
-  let classArray: string[] = [
-    generateClass('BORDER', props.borderColor),
-    gradientBorerColor,
-    gradient1Color,
-    gradient2Color,
-  ]
-
-  return classArray.join(' ')
-})
-
-const handleCardClick = (e: Event) => {
-  /**
-   * @param {Event} e - click event
-   * @param {Boolean} link - ctaAsLink
-   */
-
-  const { title, ctaLink, ctaLinkTarget, ctaAsLink } = props
-  const cardEvent: CardClickEvent = {
-    title,
-    url: ctaLink,
-    target: ctaLinkTarget ? ctaLinkTarget : '_self',
-  }
-  !ctaAsLink && e.preventDefault()
-  emit('card-click', e, cardEvent)
-}
-</script>
-
-<template>
-  <div
-    class="card [--border-angle:0deg] bg-[conic-gradient(from_var(--border-angle),var(--tw-gradient-stops))] from-20% overflow-hidden rounded-md max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 border"
-    :class="gradientClass"
-    :style="borderVariable"
-  >
-    <div class="flex flex-col rounded-md overflow-hidden">
-      <img
-        v-if="displayImage"
-        :src="imageSource"
-        :crossorigin="imageCors"
-        class="object-cover object-top max-h-[200px]"
-        :alt="imageAlt"
-      />
-      <div class="p-xs" :class="generateClass('BGCOLOR', bgColor)">
-        <h3 class="mb-xs" :class="titleClass(titleSize, titleColor)">
-          {{ title }}
-        </h3>
-        <div
-          v-if="displayHighlight"
-          class="mb-xs h-3xs w-md"
-          :class="generateClass('BGCOLOR', highlightColor)"
-        ></div>
-        <div>
-          <slot></slot>
-        </div>
-        <div class="mt-xs" :class="{ 'mb-2xs': !ctaButton }">
-          <a
-            :href="ctaLink"
-            :target="ctaLinkTarget"
-            :class="buttonClass(ctaButton, ctaButtonColor, ctaButtonBlock)"
-            @click="handleCardClick"
-            >{{ ctaText }}</a
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.card {
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-  padding: var(--border-width);
-
-  animation: bg-spin 4s linear infinite;
-  @keyframes bg-spin {
-    to {
-      --border-angle: 360deg;
-    }
-  }
-
-  &:hover {
-    animation-play-state: paused;
-  }
-}
-
-@property --border-angle {
-  syntax: '<angle>';
-  inherits: true;
-  initial-value: 0deg;
-}
-</style>

package/lib/mcl-card-d/MclCardD.vue.d.ts

@@ -1,138 +0,0 @@
-import type { ColorPalette, CrossOrigin, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
-import type { CardClickEvent } from '../common/index.types';
-import type { ColorMap } from './index.types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    displayImage?: boolean | undefined;
-    imageSource?: string | undefined;
-    imageAlt?: string | undefined;
-    imageCors?: CrossOrigin | undefined;
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    ctaText?: string | undefined;
-    ctaLink: string;
-    ctaLinkTarget?: CtaTarget | undefined;
-    ctaAsLink?: boolean | undefined;
-    ctaButton?: boolean | undefined;
-    ctaButtonColor?: ColorPalette | undefined;
-    ctaButtonBlock?: boolean | undefined;
-    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    borderColor?: ColorPalette | undefined;
-    gradient1?: ColorPalette | undefined;
-    gradient2?: ColorPalette | undefined;
-    customColor?: ColorMap | undefined;
-}>, {
-    displayImage: boolean;
-    imageAlt: string;
-    imageCors: string;
-    titleSize: string;
-    titleColor: string;
-    bgColor: string;
-    displayHighlight: boolean;
-    highlightColor: string;
-    ctaText: string;
-    ctaLinkTarget: string;
-    ctaAsLink: boolean;
-    ctaButton: boolean;
-    ctaButtonColor: string;
-    ctaButtonBlock: boolean;
-    borderWidth: number;
-    borderColor: string;
-    gradient1: string;
-    gradient2: string;
-}>, {}, 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<{
-    displayImage?: boolean | undefined;
-    imageSource?: string | undefined;
-    imageAlt?: string | undefined;
-    imageCors?: CrossOrigin | undefined;
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    ctaText?: string | undefined;
-    ctaLink: string;
-    ctaLinkTarget?: CtaTarget | undefined;
-    ctaAsLink?: boolean | undefined;
-    ctaButton?: boolean | undefined;
-    ctaButtonColor?: ColorPalette | undefined;
-    ctaButtonBlock?: boolean | undefined;
-    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    borderColor?: ColorPalette | undefined;
-    gradient1?: ColorPalette | undefined;
-    gradient2?: ColorPalette | undefined;
-    customColor?: ColorMap | undefined;
-}>, {
-    displayImage: boolean;
-    imageAlt: string;
-    imageCors: string;
-    titleSize: string;
-    titleColor: string;
-    bgColor: string;
-    displayHighlight: boolean;
-    highlightColor: string;
-    ctaText: string;
-    ctaLinkTarget: string;
-    ctaAsLink: boolean;
-    ctaButton: boolean;
-    ctaButtonColor: string;
-    ctaButtonBlock: boolean;
-    borderWidth: number;
-    borderColor: string;
-    gradient1: string;
-    gradient2: string;
-}>>> & {
-    "onCard-click"?: ((event: Event, item: CardClickEvent) => any) | undefined;
-}, {
-    bgColor: ColorPalette;
-    titleColor: ColorPalette;
-    titleSize: HeadingSize;
-    borderColor: ColorPalette;
-    displayImage: boolean;
-    imageAlt: string;
-    imageCors: CrossOrigin;
-    ctaAsLink: boolean;
-    ctaText: string;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    ctaLinkTarget: CtaTarget;
-    ctaButton: boolean;
-    ctaButtonColor: ColorPalette;
-    ctaButtonBlock: boolean;
-    borderWidth: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-    gradient1: ColorPalette;
-    gradient2: ColorPalette;
-}, {}>, 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-d/index.types.d.ts

@@ -1,4 +0,0 @@
-import type { ColorPalette } from '@bobbykim/manguito-theme';
-export type ColorMap = {
-    [key in ColorPalette]: string;
-};

package/lib/mcl-card-d/index.types.js

@@ -1 +0,0 @@
-export {};

package/lib/mcl-card-d/index.types.ts

@@ -1,5 +0,0 @@
-import type { ColorPalette } from '@bobbykim/manguito-theme'
-
-export type ColorMap = {
-  [key in ColorPalette]: string
-}

package/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["./**/*.ts", "./**/*.vue"],
-  "exclude": ["node_modules", "./**/*.vue.d.ts"]
-}

package/tsconfig.ts.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["./**/*.ts"],
-  "exclude": ["node_modules", "./**/*.vue.d.ts", "./**/*.vue"],
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declaration": true
-  }
-}

package/tsconfig.vue.json

@@ -1,9 +0,0 @@
-{
-"extends": "../../../tsconfig.json",
-"include": ["./**/*.vue"],
-"exclude": ["node_modules"],
-"compilerOptions": {
-"declaration": true,
-"emitDeclarationOnly": true
-}
-}