@bobbykim/manguito-theme 0.15.0 → 0.17.0

package/{theme → lib/theme}/index.d.ts

@@ -1,16 +1,16 @@
 import MCLTheme from './theme.js';
-import type { ColorPalette, HeadingSize, BodyText, FontWeight, Range, OpacityRange, SpacingLevel, Alignment } from './theme.types.js';
+import type { Alignment, BodyText, ColorPalette, FontWeight, HeadingSize, OpacityRange, Range, SpacingLevel } from './theme.types.js';
 /**
  * @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 colorType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "FCTEXTCOLOR", "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"];
+declare const allType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "FCTEXTCOLOR", "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];
@@ -35,6 +35,7 @@ declare class GenerateMCLClass extends MCLTheme {
     getActiveBgColorClass(): string;
     getTextColorClass(): string;
     getHoverTextColorClass(): string;
+    getFocusTextColorClass(): string;
     getDisabledTextColorClass(): string;
     getSvgFillColorClass(): string;
     getRingColorClass(): string;

package/{theme → lib/theme}/index.js

@@ -13,6 +13,7 @@ export const colorType = [
     'ACTIVEBG',
     'TEXTCOLOR',
     'HVTEXTCOLOR',
+    'FCTEXTCOLOR',
     'DISABLEDTEXTCOLOR',
     'SVGFILL',
     'RINGCOLOR',
@@ -100,6 +101,8 @@ class GenerateMCLClass extends MCLTheme {
                 return this.getTextColorClass();
             case 'HVTEXTCOLOR':
                 return this.getHoverTextColorClass();
+            case 'FCTEXTCOLOR':
+                return this.getFocusTextColorClass();
             case 'DISABLEDTEXTCOLOR':
                 return this.getDisabledTextColorClass();
             case 'SVGFILL':
@@ -282,6 +285,12 @@ class GenerateMCLClass extends MCLTheme {
         }
         return MCLTheme.hoverTextColor[this.classValue];
     }
+    getFocusTextColorClass() {
+        if (!this.validateColorType) {
+            return ' ';
+        }
+        return MCLTheme.focusTextColor[this.classValue];
+    }
     getDisabledTextColorClass() {
         if (!this.validateColorType) {
             return ' ';

package/{theme → lib/theme}/index.ts

@@ -1,13 +1,13 @@
 import MCLTheme from './theme.js'
 import type {
-  ColorPalette,
-  HeadingSize,
+  Alignment,
   BodyText,
+  ColorPalette,
   FontWeight,
-  Range,
+  HeadingSize,
   OpacityRange,
+  Range,
   SpacingLevel,
-  Alignment,
 } from './theme.types.js'
 
 /**
@@ -25,6 +25,7 @@ export const colorType = [
   'ACTIVEBG',
   'TEXTCOLOR',
   'HVTEXTCOLOR',
+  'FCTEXTCOLOR',
   'DISABLEDTEXTCOLOR',
   'SVGFILL',
   'RINGCOLOR',
@@ -132,6 +133,8 @@ class GenerateMCLClass extends MCLTheme {
         return this.getTextColorClass()
       case 'HVTEXTCOLOR':
         return this.getHoverTextColorClass()
+      case 'FCTEXTCOLOR':
+        return this.getFocusTextColorClass()
       case 'DISABLEDTEXTCOLOR':
         return this.getDisabledTextColorClass()
       case 'SVGFILL':
@@ -314,6 +317,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.hoverTextColor[this.classValue as ColorPalette]
   }
+  getFocusTextColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.focusTextColor[this.classValue as ColorPalette]
+  }
   getDisabledTextColorClass(): string {
     if (!this.validateColorType) {
       return ' '

package/{theme → lib/theme}/theme.d.ts

@@ -3,7 +3,7 @@
  * @Interface - Classes for color, header text, body text, border color, border width(top, left).
  * @Export RDSTheme - an abstract class
  */
-import type { ColorPalette, HeadingSize, BodyText, FontWeight, Range, OpacityRange, SpacingLevel, Alignment as Position } from './theme.types.js';
+import type { BodyText, ColorPalette, FontWeight, HeadingSize, OpacityRange, Alignment as Position, Range, SpacingLevel } from './theme.types.js';
 export type ColorClass = {
     [key in ColorPalette]: string;
 };
@@ -37,6 +37,7 @@ declare abstract class MCLTheme {
     protected static bgActiveColor: ColorClass;
     protected static textColor: ColorClass;
     protected static hoverTextColor: ColorClass;
+    protected static focusTextColor: ColorClass;
     protected static disabledTextColor: ColorClass;
     protected static svgFillColor: ColorClass;
     protected static ringColor: ColorClass;

package/{theme → lib/theme}/theme.js

@@ -159,6 +159,26 @@ class MCLTheme {
         white: 'hover:text-white',
         transparent: 'hover:text-transparent',
     };
+    // focus text color class
+    static focusTextColor = {
+        primary: 'focus:text-primary',
+        secondary: 'focus:text-secondary',
+        success: 'focus:text-success',
+        danger: 'focus:text-danger',
+        info: 'focus:text-info',
+        warning: 'focus:text-warning',
+        'light-1': 'focus:text-light-1',
+        'light-2': 'focus:text-light-2',
+        'light-3': 'focus:text-light-3',
+        'light-4': 'focus:text-light-4',
+        'dark-1': 'focus:text-dark-1',
+        'dark-2': 'focus:text-dark-2',
+        'dark-3': 'focus:text-dark-3',
+        'dark-4': 'focus:text-dark-4',
+        black: 'focus:text-black',
+        white: 'focus:text-white',
+        transparent: 'focus:text-transparent',
+    };
     // disabled text color class
     static disabledTextColor = {
         primary: 'disabled:text-primary',

package/{theme → lib/theme}/theme.ts

@@ -4,14 +4,14 @@
  * @Export RDSTheme - an abstract class
  */
 import type {
-  ColorPalette,
-  HeadingSize,
   BodyText,
+  ColorPalette,
   FontWeight,
-  Range,
+  HeadingSize,
   OpacityRange,
-  SpacingLevel,
   Alignment as Position,
+  Range,
+  SpacingLevel,
 } from './theme.types.js'
 
 export type ColorClass = {
@@ -200,6 +200,26 @@ abstract class MCLTheme {
     white: 'hover:text-white',
     transparent: 'hover:text-transparent',
   }
+  // focus text color class
+  protected static focusTextColor: ColorClass = {
+    primary: 'focus:text-primary',
+    secondary: 'focus:text-secondary',
+    success: 'focus:text-success',
+    danger: 'focus:text-danger',
+    info: 'focus:text-info',
+    warning: 'focus:text-warning',
+    'light-1': 'focus:text-light-1',
+    'light-2': 'focus:text-light-2',
+    'light-3': 'focus:text-light-3',
+    'light-4': 'focus:text-light-4',
+    'dark-1': 'focus:text-dark-1',
+    'dark-2': 'focus:text-dark-2',
+    'dark-3': 'focus:text-dark-3',
+    'dark-4': 'focus:text-dark-4',
+    black: 'focus:text-black',
+    white: 'focus:text-white',
+    transparent: 'focus:text-transparent',
+  }
   // disabled text color class
   protected static disabledTextColor: ColorClass = {
     primary: 'disabled:text-primary',

package/lib/tooltip/index.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => 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<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     direction: {
         type: PropType<Direction>;
         default: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.15.0",
+  "version": "0.17.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",
@@ -8,7 +8,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc"
+    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
   },
   "dependencies": {
     "@vueuse/core": "^10.8.0",
@@ -30,5 +30,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "69d6ee1c4f91a74b226cb46182845201141805fa"
+  "gitHead": "f4be01699f747aba1f831a1f796f8e41e6fcd676"
 }

package/tsconfig.json

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

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

@@ -1,3 +0,0 @@
-export interface CollapseEvent {
-    visible: boolean;
-}

package/lib/collapse/index.types.ts

@@ -1,3 +0,0 @@
-export interface CollapseEvent {
-  visible: boolean
-}