@frollo/frollo-web-ui 0.0.2 → 0.0.3

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
-import { Plugin } from 'vue';
+import { PropType, Plugin } from 'vue';
 
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -29,6 +29,102 @@ declare const _default: vue.DefineComponent<{
     };
 }>>, {}>;
 
+declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+interface ButtonDefinition {
+    text: string;
+    background: string;
+    border: string;
+}
+declare type ButtonDefinitionList = {
+    [key in ButtonVariantName]: ButtonDefinition;
+};
+declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+declare type ButtonSizes = {
+    [key in ButtonSize]: string;
+};
+interface FwButtonProps {
+    to?: string | object;
+    href?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariantName;
+}
+declare const _default: vue.DefineComponent<{
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: StringConstructor;
+    /**
+     * The size of the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
+     */
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the button.
+     * Accepts 'primary', 'secondary', 'tertiary', 'error', 'success'
+     */
+    variant: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    textColorClass: vue.ComputedRef<string>;
+    bgColorClass: vue.ComputedRef<string>;
+    sizeClass: vue.ComputedRef<string>;
+    borderClass: vue.ComputedRef<string>;
+    onClick: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    onMouseover: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: StringConstructor;
+    /**
+     * The size of the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
+     */
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the button.
+     * Accepts 'primary', 'secondary', 'tertiary', 'error', 'success'
+     */
+    variant: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onMouseover?: ((...args: any[]) => any) | undefined;
+    onMouseout?: ((...args: any[]) => any) | undefined;
+    onFocusin?: ((...args: any[]) => any) | undefined;
+    onFocusout?: ((...args: any[]) => any) | undefined;
+}, {
+    size: ButtonSize;
+    variant: ButtonVariantName;
+}>;
+
 declare const install: Exclude<Plugin['install'], undefined>;
 
-export { _default as FwCard, install as default };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default as FwButton, FwButtonProps, _default$1 as FwCard, install as default };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
+    "./tailwind.config.js": "./tailwind.config.js",
     ".": {
       "import": "./frollo-web-ui.esm.js",
       "require": "./cjs/index.js"
@@ -22,7 +23,7 @@
     "test:single": "jest --config jest.config.js --coverage --watchAll",
     "lint": "eslint --cache ./ --ext .js,.ts,.vue",
     "lint:fix": "eslint --cache ./ --fix --ext .js,.ts,.vue",
-    "tw-config-export": "mkdir -p ./dist && tailwind-config-viewer export ./dist/twconfig-viewer",
+    "tw-config-export": "mkdir -p ./dist && tailwind-config-viewer export ./dist/twconfig-viewer && rimraf ./dist/twconfig-viewer/favicon.ico",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },

package/tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
       primary: 'var(--colorPrimary)',
       secondary: 'var(--colorSecondary)',
       tertiary: 'var(--colorTertiary)',
+      white: '#ffffff',
+      black: '#000000',
+      transparent: 'transparent',
       body: '#2C3E50',
       error: '#eb5757',
       success: '#00c48c',
@@ -13,7 +16,6 @@ module.exports = {
         light: '#bcbcbc',
         lightest: '#f5f5f5'
       }
-
     },
     fontSize: {
       xs: ['12px', '1.5'],

package/types/components/fw-button/fw-button.vue.d.ts

@@ -0,0 +1,97 @@
+import { PropType } from 'vue';
+export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+export interface ButtonDefinition {
+    text: string;
+    background: string;
+    border: string;
+}
+export declare type ButtonDefinitionList = {
+    [key in ButtonVariantName]: ButtonDefinition;
+};
+export declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export declare type ButtonSizes = {
+    [key in ButtonSize]: string;
+};
+export interface FwButtonProps {
+    to?: string | object;
+    href?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariantName;
+}
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: StringConstructor;
+    /**
+     * The size of the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
+     */
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the button.
+     * Accepts 'primary', 'secondary', 'tertiary', 'error', 'success'
+     */
+    variant: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    textColorClass: import("vue").ComputedRef<string>;
+    bgColorClass: import("vue").ComputedRef<string>;
+    sizeClass: import("vue").ComputedRef<string>;
+    borderClass: import("vue").ComputedRef<string>;
+    onClick: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    onMouseover: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: StringConstructor;
+    /**
+     * The size of the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
+     */
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The colour variant of the button.
+     * Accepts 'primary', 'secondary', 'tertiary', 'error', 'success'
+     */
+    variant: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onMouseover?: ((...args: any[]) => any) | undefined;
+    onMouseout?: ((...args: any[]) => any) | undefined;
+    onFocusin?: ((...args: any[]) => any) | undefined;
+    onFocusout?: ((...args: any[]) => any) | undefined;
+}, {
+    size: ButtonSize;
+    variant: ButtonVariantName;
+}>;
+export default _default;

package/types/components/fw-button/index.d.ts

@@ -0,0 +1,2 @@
+import FwButton from './fw-button.vue';
+export { FwButton };

package/types/components/index.d.ts

@@ -1 +1,2 @@
-export { FwCard } from './fw-card';
+export * from './fw-card';
+export * from './fw-button';

package/types/index-types.esm.d.ts

@@ -0,0 +1,5 @@
+import install from './index.esm';
+export default install;
+export * from './components';
+export * from './components/fw-card/fw-card.vue';
+export * from './components/fw-button/fw-button.vue';