@bobbykim/manguito-theme 0.7.0 → 0.8.0

package/lib/sidebar/Sidebar.vue.d.ts

@@ -0,0 +1,121 @@
+import { ColorPalette, DirectionX } from '../../';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    titleColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    noBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    backdropColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    placement: {
+        type: import("vue").PropType<DirectionX>;
+        default: string;
+    };
+    width: {
+        type: import("vue").PropType<string | number>;
+        default: number;
+    };
+}, {
+    toggle: () => void;
+    open: () => void;
+    close: (e: Event) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    titleColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    noBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    backdropColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    placement: {
+        type: import("vue").PropType<DirectionX>;
+        default: string;
+    };
+    width: {
+        type: import("vue").PropType<string | number>;
+        default: number;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    className: string;
+    titleColor: ColorPalette;
+    noBackdrop: boolean;
+    noHeader: boolean;
+    color: ColorPalette;
+    backdropColor: ColorPalette;
+    placement: DirectionX;
+    width: string | number;
+}, {}>, {
+    header?(_: {
+        close: (e: Event) => void;
+        status: true;
+    }): any;
+    body?(_: {
+        close: (e: Event) => void;
+        status: true;
+    }): any;
+    footer?(_: {
+        close: (e: Event) => void;
+        status: true;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/tooltip/index.d.ts

@@ -0,0 +1,62 @@
+import { PropType } from 'vue';
+import type { Direction, ColorPalette } from '../../';
+declare const _default: import("vue").DefineComponent<{
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    textColor: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    textColor: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    direction: Direction;
+    color: ColorPalette;
+    textColor: ColorPalette;
+    width: string | number;
+    customClass: string;
+}, {}>;
+export default _default;

package/lib/tooltip/index.js

@@ -0,0 +1,71 @@
+import { defineComponent, h, computed } from 'vue';
+import generateClass from '../../';
+export default defineComponent({
+    props: {
+        direction: {
+            type: String,
+            default: 'right',
+        },
+        color: {
+            type: String,
+            default: 'dark-3',
+        },
+        textColor: {
+            type: String,
+            default: 'white',
+        },
+        width: {
+            type: [Number, String],
+            default: 80,
+        },
+        customClass: {
+            type: String,
+            default: '',
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props) {
+        const defaultClassList = 'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip';
+        const colorClass = computed(() => {
+            /**
+             * @param {ColorPalette} color - props
+             * @param {ColorPalette} textolor - props
+             */
+            const { color, textColor } = props;
+            const classArray = [
+                generateClass('BGCOLOR', color),
+                generateClass('TEXTCOLOR', textColor),
+            ];
+            return classArray.join(' ');
+        });
+        const tooltipWidth = computed(() => {
+            return { width: `${props.width}px` };
+        });
+        const tooltipDirection = computed(() => {
+            switch (props.direction) {
+                case 'left':
+                    return 'tooltip-left';
+                case 'top':
+                    return 'tooltip-top';
+                case 'bottom':
+                    return 'tooltip-bottom';
+                default:
+                    return 'tooltip-right';
+            }
+        });
+        return () => h('div', {
+            class: [
+                defaultClassList,
+                props.customClass,
+                tooltipDirection.value,
+                colorClass.value,
+            ],
+            role: 'tooltip',
+            innerHTML: props.title,
+            style: [tooltipWidth.value],
+        });
+    },
+});

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "main": "index.ts",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vue-tsc --project tsconfig.vue.json && tsc"
+  },
   "author": {
     "name": "Bobby Kim",
     "url": "https://www.devbobbykim.com/"
@@ -17,5 +20,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "576d9aa7a55803b0dd7391bf81d00081848135ec"
+  "gitHead": "97c70699ec57726f77f021927b61f83715847f33"
 }

package/theme/index.d.ts

@@ -0,0 +1,94 @@
+import MCLTheme from './theme.js';
+import type { ColorPalette, HeadingSize, BodyText, FontWeight, Range, OpacityRange, SpacingLevel, Alignment } from './theme.types';
+/**
+ * @TailwindCSS - Good practice is to let all of used classes to be in full instead of generated dynamically using methods such as string literal.
+ * @Interface - ClassType to define the case, and Input type to generate tailwind clssname.
+ * @Export GenerateMCLClass - extends MCLTheme class
+ */
+export declare const colorType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OFFSETRING", "DUMMYCOLOR", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR"];
+export declare const textType: readonly ["H1", "H2", "H3", "H4", "BODYTEXT", "FONTWEIGHT", "TEXTALIGN"];
+export declare const borderWidthType: readonly ["BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW"];
+export declare const scaleType: readonly ["BGOPACITY", "OPACITY"];
+export declare const spacingType: readonly ["MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
+declare const allType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OFFSETRING", "DUMMYCOLOR", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR", "H1", "H2", "H3", "H4", "BODYTEXT", "FONTWEIGHT", "TEXTALIGN", "BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW", "BGOPACITY", "OPACITY", "MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
+export type ClassType = (typeof allType)[number];
+export type ColorClassType = (typeof colorType)[number];
+export type TextClassType = (typeof textType)[number];
+export type BorderWidthClassType = (typeof borderWidthType)[number];
+export type ScaleClassType = (typeof scaleType)[number];
+export type SpacingClassType = (typeof spacingType)[number];
+export type InputType = ColorPalette | HeadingSize | BodyText | FontWeight | Range<1, 12> | OpacityRange | SpacingLevel | Alignment;
+declare class GenerateMCLClass extends MCLTheme {
+    classType: ClassType;
+    classValue: InputType;
+    constructor(classType: ClassType, classValue: InputType);
+    generateColorClass(): string;
+    generateTextClass(): string;
+    generateBorderWidthClass(): string;
+    generateScaleClass(): string;
+    generateSpacingClass(): string;
+    getBgColorClass(): string;
+    getHoverBgColorClass(): string;
+    getFocusBgColorClass(): string;
+    getBeforeBgColorClass(): string;
+    getAfterBgColorClass(): string;
+    getActiveBgColorClass(): string;
+    getTextColorClass(): string;
+    getHoverTextColorClass(): string;
+    getDisabledTextColorClass(): string;
+    getSvgFillColorClass(): string;
+    getRingColorClass(): string;
+    getFocusRingColorClass(): string;
+    getActiveRingColorClass(): string;
+    getRingOffsetColorClass(): string;
+    getBtnColorClass(): string;
+    getListColorClass(): string;
+    getBorderColorClass(): string;
+    getBorderXColorClass(): string;
+    getBorderYColorClass(): string;
+    getBorderTopColorClass(): string;
+    getBorderBottomColorClass(): string;
+    getBorderLeftColorClass(): string;
+    getBorderRightColorClass(): string;
+    getH1Class(): string;
+    getH2Class(): string;
+    getH3Class(): string;
+    getH4Class(): string;
+    getBodyTextSizeClass(): string;
+    getFontWeightClass(): string;
+    getTextAlignClass(): string;
+    getBorderWidthClass(): string;
+    getBorderXWidthClass(): string;
+    getBorderYWidthClass(): string;
+    getBorderTopWidthClass(): string;
+    getBorderBottomWidthClass(): string;
+    getBorderLeftWidthClass(): string;
+    getBorderRightWidthClass(): string;
+    getOpacityClass(): string;
+    getBgOpacityClass(): string;
+    getMarginClass(): string;
+    getMarginXClass(): string;
+    getMarginYClass(): string;
+    getMarginTopClass(): string;
+    getMarginBottomClass(): string;
+    getMarginLeftClass(): string;
+    getMarginRightClass(): string;
+    getPaddingClass(): string;
+    getPaddingXClass(): string;
+    getPaddingYClass(): string;
+    getPaddingTopClass(): string;
+    getPaddingBottomClass(): string;
+    getPaddingLeftClass(): string;
+    getPaddingRightClass(): string;
+    getGapClass(): string;
+    validateColorType(): boolean;
+    validateSpaceType(): boolean;
+    validateHeadingTextSizeType(): boolean;
+    validateBodyTextSizeType(): boolean;
+    validateFontWeightType(): boolean;
+    validateOpacityType(): boolean;
+    validateRangeType(): boolean;
+    validateAlignment(): boolean;
+    dummyMethod(): any;
+}
+export default GenerateMCLClass;