@bobbykim/mcl-cards 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-cards@0.3.0...@bobbykim/mcl-cards@0.4.0) (2024-03-21)
+
+
+### Features
+
+* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
+* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
+* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
+
+
+
+
+
+# [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-cards@0.2.0...@bobbykim/mcl-cards@0.3.0) (2024-02-27)
+
+
+### Features
+
+* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
+
+
+
+
+
 # 0.2.0 (2024-02-27)
 
 

package/README.md

@@ -1,16 +1,45 @@
 # @bobbykim/mcl-cards
 
-Add description
-
 ## Demo
 
-[MCL Histoire Page](https://manguito-component-library.vercel.app/story/{%story-link%})
+[MCL Storybook Page](https://manguito-component-library.vercel.app/)
+
+- [MCL Card A](https://manguito-component-library.vercel.app/?path=/docs/components-cards-mclcarda--mclcarda)
+
+- [MCL Card B](https://manguito-component-library.vercel.app/?path=/docs/components-cards-mclcardb--mclcardb)
+
+- [MCL Card C](https://manguito-component-library.vercel.app/?path=/docs/components-cards-mclcardc--mclcardc)
+
+- [MCL Card D](https://manguito-component-library.vercel.app/?path=/docs/components-cards-mclcardd--mclcardd)
 
 ## Install
 
+```sh
+npm i @bobbykim/mcl-cards
+```
+
 ## Usage
 
-`import MclCards from "@bobbykim/mcl-cards"`;
+`import { MclCardA, MclCardB, MclCardC, MclCardD } from "@bobbykim/mcl-cards"`;
+
+```vue
+<script setup lang="ts">
+...
+import { MclCardA, MclCardB, MclCardC, MclCardD } from '@bobbykim/card-alpha'
+...
+</script>
+
+<template>
+  <mcl-card-a></mcl-card-a>
+  <mcl-card-b></mcl-card-b>
+  <mcl-card-c></mcl-card-c>
+  <mcl-card-d></mcl-card-d>
+</template>
+```
+
+## Dependencies
+
+- @bobbykim/manguito-theme
 
 ## Maintainer
 

package/lib/common/index.types.d.ts

@@ -1,6 +1,5 @@
 import type { CtaTarget } from '@bobbykim/manguito-theme';
 export interface CardClickEvent {
-    event: Event;
     title: string;
     url: string;
     target?: CtaTarget;

package/lib/common/index.types.ts

@@ -1,7 +1,6 @@
 import type { CtaTarget } from '@bobbykim/manguito-theme'
 
 export interface CardClickEvent {
-  event: Event
   title: string
   url: string
   target?: CtaTarget

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

@@ -60,7 +60,13 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['card-click', 'card-btn-click'])
+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,
@@ -150,37 +156,24 @@ const getCtaClass = (color: ColorPalette, round: boolean): string => {
 
   return classArray.join(' ')
 }
-const handleButtonClick = (
-  e: Event,
-  title: string,
-  link: string,
-  target: CtaTarget = '_self',
-  btnLink: boolean
-): void => {
-  /**
-   * @title - title
-   * @link - ctaLink
-   * @target - ctaTarget
-   * @btnLink - ctaAsLink
-   */
+const handleButtonClick = (e: Event): void => {
+  const { title, ctaLink, ctaTarget, ctaAsLink } = props
   const cardEvent: CardClickEvent = {
-    event: e,
     title,
-    url: link,
-    target: target ? target : '_self',
+    url: ctaLink,
+    target: ctaTarget ? ctaTarget : '_self',
   }
-  !btnLink && e.preventDefault()
-  emit('card-btn-click', cardEvent)
+  !ctaAsLink && e.preventDefault()
+  emit('card-btn-click', e, cardEvent)
 }
 const handleCardClick = (e: Event): void => {
   const { title, ctaLink, ctaTarget } = props
   const cardEvent: CardClickEvent = {
-    event: e,
     title,
     url: ctaLink,
     target: ctaTarget ? ctaTarget : '_self',
   }
-  emit('card-click', cardEvent)
+  emit('card-click', e, cardEvent)
 }
 </script>
 
@@ -242,9 +235,7 @@ const handleCardClick = (e: Event): void => {
             :target="ctaTarget"
             class="btn btn-full"
             :class="getCtaClass(ctaColor, rounded)"
-            @click="
-              handleButtonClick($event, title, ctaLink, ctaTarget, ctaAsLink)
-            "
+            @click="handleButtonClick($event)"
             >{{ ctaText }}</a
           >
         </div>

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

@@ -1,4 +1,5 @@
 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;
@@ -47,8 +48,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rounded: boolean;
     displayShadow: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (...args: any[]) => void;
-    "card-btn-click": (...args: any[]) => void;
+    "card-click": (event: Event, item: CardClickEvent) => void;
+    "card-btn-click": (event: Event, item: CardClickEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title: string;
     titleSize?: HeadingSize | undefined;
@@ -97,13 +98,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rounded: boolean;
     displayShadow: boolean;
 }>>> & {
-    "onCard-click"?: ((...args: any[]) => any) | undefined;
-    "onCard-btn-click"?: ((...args: any[]) => any) | undefined;
+    "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;
-    bgColor: ColorPalette;
     displayImage: boolean;
     imageCors: CrossOrigin;
     displayCta: boolean;
@@ -121,9 +122,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightColor: ColorPalette;
     rounded: boolean;
     displayShadow: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>, Readonly<{
+    default: any;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -8,7 +8,7 @@ import type {
 import generateClass from '@bobbykim/manguito-theme'
 import type { CardClickEvent } from '../common/index.types'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title: string
     titleSize?: HeadingSize
@@ -38,7 +38,12 @@ withDefaults(
   }
 )
 
-const emit = defineEmits(['card-click'])
+const slots = defineSlots<{
+  default: any
+}>()
+const emit = defineEmits<{
+  (e: 'card-click', event: Event, item: CardClickEvent): void
+}>()
 
 const getBorderClass = (bColor: ColorPalette, rounded: boolean): string => {
   /**
@@ -85,29 +90,19 @@ const handleTitleClass = (
   return classArray.join(' ')
 }
 
-const handleCardClick = (
-  e: Event,
-  title: string,
-  link: string,
-  target: CtaTarget = '_self',
-  ctaLink: boolean
-): void => {
+const handleCardClick = (e: Event): void => {
   /**
    * @e - Event
-   * @title - title
-   * @link - ctaLink
-   * @target - ctaTarget
-   * @ctaLink - ctaAsLink
    */
-  !ctaLink && e.preventDefault()
+  const { title, ctaLink, ctaTarget, ctaAsLink } = props
+  !ctaAsLink && e.preventDefault()
   const cardEvent: CardClickEvent = {
-    event: e,
     title,
-    url: link,
-    target: target ? target : '_self',
+    url: ctaLink,
+    target: ctaTarget ? ctaTarget : '_self',
   }
   console.log(cardEvent)
-  emit('card-click', cardEvent)
+  emit('card-click', e, cardEvent)
 }
 </script>
 
@@ -116,11 +111,7 @@ const handleCardClick = (
     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, title, ctaLink, ctaTarget, ctaAsLink)"
-    >
+    <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"
       >
@@ -141,5 +132,3 @@ const handleCardClick = (
     </a>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -1,4 +1,5 @@
 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;
@@ -25,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     ctaTarget: string;
     rounded: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (...args: any[]) => void;
+    "card-click": (event: Event, item: CardClickEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title: string;
     titleSize?: HeadingSize | undefined;
@@ -52,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     ctaTarget: string;
     rounded: boolean;
 }>>> & {
-    "onCard-click"?: ((...args: any[]) => any) | undefined;
+    "onCard-click"?: ((event: Event, item: CardClickEvent) => any) | undefined;
 }, {
     titleColor: ColorPalette;
     titleSize: HeadingSize;
@@ -64,9 +65,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rounded: boolean;
     titleBlockColor: ColorPalette;
     displayGrayScale: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>, Readonly<{
+    default: any;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import generateClass from '@bobbykim/manguito-theme'
 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<{
@@ -34,8 +34,13 @@ const props = withDefaults(
   }
 )
 
+const slots = defineSlots<{
+  'card-body': any
+}>()
 const cardFlipped = ref<boolean>(false)
-const emit = defineEmits(['card-click'])
+const emit = defineEmits<{
+  (e: 'card-click', event: Event): void
+}>()
 
 const cardClass = computed(() => {
   const classArray: string[] = [generateClass('BGCOLOR', props.cardColor)]

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

@@ -21,7 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     cardColor: string;
     imageCors: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (...args: any[]) => void;
+    "card-click": (event: Event) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     imageSource: string;
     imageAlt?: string | undefined;
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     cardColor: string;
     imageCors: string;
 }>>> & {
-    "onCard-click"?: ((...args: any[]) => any) | undefined;
+    "onCard-click"?: ((event: Event) => any) | undefined;
 }, {
     titleColor: ColorPalette;
     titleSize: HeadingSize;
@@ -54,9 +54,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightOpacity: OpacityRange;
     displayTitle: boolean;
     cardColor: ColorPalette;
-}, {}>, {
-    "card-body"?(_: {}): any;
-}>;
+}, {}>, Readonly<{
+    'card-body': any;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -117,7 +117,12 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['card-click'])
+const slots = defineSlots<{
+  default: any
+}>()
+const emit = defineEmits<{
+  (e: 'card-click', event: Event, item: CardClickEvent): void
+}>()
 
 const titleClass = (size: HeadingSize, color: ColorPalette): string => {
   /**
@@ -187,13 +192,12 @@ const handleCardClick = (e: Event) => {
 
   const { title, ctaLink, ctaLinkTarget, ctaAsLink } = props
   const cardEvent: CardClickEvent = {
-    event: e,
     title,
     url: ctaLink,
     target: ctaLinkTarget ? ctaLinkTarget : '_self',
   }
   !ctaAsLink && e.preventDefault()
-  emit('card-click', cardEvent)
+  emit('card-click', e, cardEvent)
 }
 </script>
 

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

@@ -1,4 +1,5 @@
 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;
@@ -43,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     gradient1: string;
     gradient2: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "card-click": (...args: any[]) => void;
+    "card-click": (event: Event, item: CardClickEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     displayImage?: boolean | undefined;
     imageSource?: string | undefined;
@@ -87,12 +88,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     gradient1: string;
     gradient2: string;
 }>>> & {
-    "onCard-click"?: ((...args: any[]) => any) | undefined;
+    "onCard-click"?: ((event: Event, item: CardClickEvent) => any) | undefined;
 }, {
+    bgColor: ColorPalette;
     titleColor: ColorPalette;
     titleSize: HeadingSize;
     borderColor: ColorPalette;
-    bgColor: ColorPalette;
     displayImage: boolean;
     imageAlt: string;
     imageCors: CrossOrigin;
@@ -107,9 +108,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     borderWidth: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
     gradient1: ColorPalette;
     gradient2: ColorPalette;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>, Readonly<{
+    default: any;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bobbykim/mcl-cards",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "",
   "type": "module",
   "main": "index.ts",
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc"
+    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
   },
   "author": {
     "name": "Bobby Kim",
@@ -21,7 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "^0.14.0"
+    "@bobbykim/manguito-theme": "^0.16.0"
   },
-  "gitHead": "4d94a8d34988d926c8d465891fd7aa535cffdf33"
+  "gitHead": "5b81953e5108fd166c0b89ebc6a24e6de9499635"
 }

package/tsconfig.json

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

package/tsconfig.ts.json

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