@frollo/frollo-web-ui 0.0.7 → 0.0.8

package/icons/alert.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 1.875C17.5604 1.875 22.125 6.37852 22.125 12C22.125 17.5918 17.5964 22.125 12 22.125C6.41044 22.125 1.875 17.5987 1.875 12C1.875 6.41236 6.40322 1.875 12 1.875ZM12 0.375C5.58014 0.375 0.375 5.58202 0.375 12C0.375 18.4217 5.58014 23.625 12 23.625C18.4199 23.625 23.625 18.4217 23.625 12C23.625 5.58202 18.4199 0.375 12 0.375ZM11.4614 6H12.5385C12.8584 6 13.1139 6.26634 13.1006 6.58594L12.7725 14.4609C12.7599 14.7622 12.512 15 12.2104 15H11.7895C11.488 15 11.2401 14.7622 11.2275 14.4609L10.8994 6.58594C10.8861 6.26634 11.1416 6 11.4614 6ZM12 15.9375C11.2751 15.9375 10.6875 16.5251 10.6875 17.25C10.6875 17.9749 11.2751 18.5625 12 18.5625C12.7249 18.5625 13.3125 17.9749 13.3125 17.25C13.3125 16.5251 12.7249 15.9375 12 15.9375Z" />
+</svg>

package/icons/email-filled.svg

@@ -0,0 +1,4 @@
+<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
+  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
+</svg>

package/icons/generate.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 42 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 42 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="M39.668 11.0859L30.9141 2.33203C29.9648 1.38281 28.5938 0.75 27.3281 0.75H5.70703C2.96484 0.855469 0.75 3.07031 0.75 5.91797V49.793C0.75 52.5352 2.96484 54.75 5.70703 54.75H36.1875C38.9297 54.75 41.25 52.5352 41.25 49.793V14.6719C41.25 13.4062 40.6172 12.0352 39.668 11.0859ZM27.75 4.23047C27.9609 4.33594 28.2773 4.44141 28.4883 4.65234L37.3477 13.5117C37.5586 13.7227 37.6641 14.0391 37.7695 14.3555H27.75V4.23047ZM37.875 49.793C37.875 50.6367 37.0312 51.4805 36.1875 51.4805H5.70703C4.86328 51.4805 4.01953 50.6367 4.01953 49.793V5.91797C4.01953 4.96875 4.86328 4.125 5.70703 4.125H24.375V15.1992C24.375 16.5703 25.4297 17.625 26.9062 17.625H37.875V49.793ZM21 21V34.5H34.3945C34.5 34.5 34.3945 34.5 34.3945 34.5C34.3945 27.1172 28.3828 21.1055 21 21ZM24.375 25.0078C27.2227 26.0625 29.4375 28.2773 30.4922 31.125H24.375V25.0078ZM19.3125 44.625C14.5664 44.625 10.875 40.9336 10.875 36.1875C10.875 32.1797 13.7227 28.8047 17.625 27.9609V24.5859C11.8242 25.4297 7.5 30.2812 7.5 36.1875C7.5 42.7266 12.7734 48 19.3125 48C25.2188 48 30.0703 43.6758 30.9141 37.875H27.5391C26.6953 41.7773 23.3203 44.625 19.3125 44.625Z" />
 </svg>

package/icons/index.ts

@@ -2,10 +2,14 @@ import ViewSvg from './view.svg';
 import GenerateSvg from './generate.svg';
 import ManageSvg from './manage.svg';
 import NotFoundSvg from './not-found.svg';
+import EmailFilledSvg from './email-filled.svg';
+import AlertSvg from './alert.svg';
 
 export {
   ViewSvg,
   GenerateSvg,
   ManageSvg,
-  NotFoundSvg
+  NotFoundSvg,
+  EmailFilledSvg,
+  AlertSvg
 };

package/icons/manage.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 54 42" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="M11.25 27C11.25 25.7812 10.2188 24.75 9 24.75C7.6875 24.75 6.75 25.7812 6.75 27C6.75 28.3125 7.6875 29.25 9 29.25C10.2188 29.25 11.25 28.3125 11.25 27ZM27 11.25C28.2188 11.25 29.25 10.3125 29.25 9C29.25 7.78125 28.2188 6.75 27 6.75C25.6875 6.75 24.75 7.78125 24.75 9C24.75 10.3125 25.6875 11.25 27 11.25ZM14.25 12C12.9375 12 12 13.0312 12 14.25C12 15.5625 12.9375 16.5 14.25 16.5C15.4688 16.5 16.5 15.5625 16.5 14.25C16.5 13.0312 15.4688 12 14.25 12ZM40.6875 13.125C40.0312 12.6562 39.0938 12.75 38.5312 13.3125L29.4375 24.5625C28.6875 24.2812 27.8438 24 27 24C23.625 24 21 26.7188 21 30C21 33.375 23.625 36 27 36C30.2812 36 33 33.375 33 30C33 28.6875 32.5312 27.4688 31.7812 26.5312L40.875 15.2812C41.4375 14.625 41.25 13.6875 40.6875 13.125ZM30 30C30 31.6875 28.5938 33 27 33C25.3125 33 24 31.6875 24 30C24 28.4062 25.3125 27 27 27C28.5938 27 30 28.4062 30 30ZM45 24.75C43.6875 24.75 42.75 25.7812 42.75 27C42.75 28.3125 43.6875 29.25 45 29.25C46.2188 29.25 47.25 28.3125 47.25 27C47.25 25.7812 46.2188 24.75 45 24.75ZM54 27C54 12.0938 41.9062 0 27 0C12 0 0 12.0938 0 27C0 31.9688 1.3125 36.6562 3.65625 40.5938C4.125 41.5312 5.15625 42 6.1875 42H47.7188C48.75 42 49.7812 41.5312 50.25 40.5938C52.5938 36.6562 54 31.9688 54 27ZM51 27C51 31.3125 49.875 35.4375 47.7188 39L6.1875 39.0938C4.125 35.4375 3 31.3125 3 27C3 13.7812 13.6875 3 27 3C40.2188 3 51 13.7812 51 27Z" />
 </svg>

package/icons/not-found.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 404 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 404 146" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="M130 113.6H107.2V143H75.6002V113.6H0.200195V91.8001L66.2002 3.00009H100.2L39.0002 87.2001H76.6002V61.0001H107.2V87.2001H130V113.6Z"/>
   <path d="M199.691 145.4C188.091 145.4 177.757 142.533 168.691 136.8C159.624 131.067 152.491 122.8 147.291 112C142.224 101.067 139.691 88.0668 139.691 73.0001C139.691 57.9334 142.224 45.0001 147.291 34.2001C152.491 23.2668 159.624 14.9334 168.691 9.20009C177.757 3.46676 188.091 0.600098 199.691 0.600098C211.291 0.600098 221.624 3.46676 230.691 9.20009C239.757 14.9334 246.824 23.2668 251.891 34.2001C257.091 45.0001 259.691 57.9334 259.691 73.0001C259.691 88.0668 257.091 101.067 251.891 112C246.824 122.8 239.757 131.067 230.691 136.8C221.624 142.533 211.291 145.4 199.691 145.4ZM199.691 118C208.224 118 214.891 114.333 219.691 107C224.624 99.6668 227.091 88.3334 227.091 73.0001C227.091 57.6668 224.624 46.3334 219.691 39.0001C214.891 31.6668 208.224 28.0001 199.691 28.0001C191.291 28.0001 184.624 31.6668 179.691 39.0001C174.891 46.3334 172.491 57.6668 172.491 73.0001C172.491 88.3334 174.891 99.6668 179.691 107C184.624 114.333 191.291 118 199.691 118Z"/>
   <path d="M403.633 113.6H380.833V143H349.233V113.6H273.833V91.8001L339.833 3.00009H373.833L312.633 87.2001H350.233V61.0001H380.833V87.2001H403.633V113.6Z"/>

package/icons/view.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 52 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 52 34" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="M25.973 19.9375C29.0491 19.9375 31.598 17.4766 31.598 14.3125C31.598 11.2363 29.0491 8.6875 25.973 8.6875C25.8851 8.6875 25.7972 8.77539 25.7093 8.77539C25.7972 9.21484 25.8851 9.6543 25.8851 10.1816C25.8851 12.4668 24.0394 14.3125 21.7542 14.3125C21.2269 14.3125 20.7874 14.2246 20.348 14.1367C20.348 14.2246 20.348 14.3125 20.348 14.3125C20.348 17.4766 22.8089 19.9375 25.973 19.9375ZM50.9339 15.8945C46.1878 6.57812 36.6956 0.25 25.973 0.25C15.1624 0.25 5.67024 6.57812 0.924145 15.8945C0.748363 16.2461 0.660473 16.6855 0.660473 17.125C0.660473 17.6523 0.748363 18.0918 0.924145 18.4434C5.67024 27.7598 15.1624 34 25.973 34C36.6956 34 46.1878 27.7598 50.9339 18.4434C51.1097 18.0918 51.1976 17.6523 51.1976 17.2129C51.1976 16.6855 51.1097 16.2461 50.9339 15.8945ZM25.973 3.0625C32.1253 3.0625 37.223 8.16016 37.223 14.3125C37.223 20.5527 32.1253 25.5625 25.973 25.5625C19.7327 25.5625 14.723 20.5527 14.723 14.3125C14.723 8.16016 19.7327 3.15039 25.973 3.0625ZM25.973 31.1875C16.4808 31.1875 7.8675 25.8262 3.47297 17.125C5.93391 12.291 9.88899 8.24805 14.8109 5.78711C12.9652 8.16016 11.9105 11.1484 11.9105 14.3125C11.9105 22.1348 18.1507 28.375 25.973 28.375C33.7073 28.375 40.0355 22.1348 40.0355 14.3125C40.0355 11.1484 38.8929 8.16016 37.0472 5.78711C41.9691 8.24805 45.9241 12.291 48.473 17.125C43.9906 25.8262 35.3773 31.1875 25.973 31.1875Z" />
 </svg>

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
 
-declare const _default$2: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -70,7 +70,7 @@ interface FwButtonProps {
     size?: ButtonSize;
     variant?: ButtonVariantName;
 }
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -153,7 +153,7 @@ interface NavMenuItem {
     href?: string;
     label: string;
 }
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -191,8 +191,111 @@ declare const _default: vue.DefineComponent<{
     onAction?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
+declare type InputType = 'text' | 'password';
+interface FwInputProps {
+    value: string;
+    name: string;
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    rules?: string | object | Function;
+}
+declare const _default: vue.DefineComponent<{
+    /**
+     * The input v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The input type. Accepts `text` | `password`
+     */
+    type: {
+        type: PropType<InputType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+}, {
+    inputValue: vue.WritableComputedRef<string>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The input v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The input type. Accepts `text` | `password`
+     */
+    type: {
+        type: PropType<InputType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    type: InputType;
+    placeholder: string;
+}>;
+
 declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default$1 as FwButton, FwButtonProps, _default$2 as FwCard, _default as FwNavigationMenu, NavMenuItem, install as default };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default$2 as FwButton, FwButtonProps, _default$3 as FwCard, _default as FwInput, FwInputProps, _default$1 as FwNavigationMenu, InputType, NavMenuItem, install as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -76,8 +76,10 @@
     "tailwindcss": "^3.0.23",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5",
+    "vee-validate": "^4.5.9",
     "vue-loader": "^16.8.3",
-    "vue-style-loader": "^4.1.3"
+    "vue-style-loader": "^4.1.3",
+    "yup": "^0.32.11"
   },
   "homepage": "https://github.com/frollous/frollo-web-ui#readme",
   "repository": {

package/tailwind.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  content: ['./src/**/*.{vue,ts}'],
   theme: {
     colors: {
       primary: 'var(--colorPrimary)',
@@ -9,13 +8,13 @@ module.exports = {
       black: '#000000',
       transparent: 'transparent',
       body: '#000000',
-      error: '#eb5757',
-      success: '#00c48c',
       grey: {
         base: '#4b4b4b',
         light: '#bcbcbc',
         lightest: '#f5f5f5'
-      }
+      },
+      error: '#eb5757',
+      success: '#00c48c'
     },
     fontSize: {
       xs: ['12px', '1.5'],
@@ -42,14 +41,6 @@ module.exports = {
       boxShadow: {
         'card': '0px 1px 7px rgba(0, 0, 0, 0.1714)'
       }
-    },
-    configViewer: {
-      themeReplacements: {
-        'var(--colorPrimary)': '#6923ff',
-        'var(--colorSecondary)': '#000000',
-        'var(--colorTertiary)': '#ffffff'
-      }
     }
-  },
-  plugins: []
+  }
 };

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

@@ -0,0 +1,104 @@
+import { PropType } from 'vue';
+export declare type InputType = 'text' | 'password';
+export interface FwInputProps {
+    value: string;
+    name: string;
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    rules?: string | object | Function;
+}
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The input v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The input type. Accepts `text` | `password`
+     */
+    type: {
+        type: PropType<InputType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+}, {
+    inputValue: import("vue").WritableComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The input v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The input type. Accepts `text` | `password`
+     */
+    type: {
+        type: PropType<InputType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    type: InputType;
+    placeholder: string;
+}>;
+export default _default;

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

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

package/types/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './fw-card';
 export * from './fw-button';
 export * from './fw-navigation-menu';
+export * from './fw-input';

package/types/icons/index.d.ts

@@ -2,4 +2,6 @@ import ViewSvg from './view.svg';
 import GenerateSvg from './generate.svg';
 import ManageSvg from './manage.svg';
 import NotFoundSvg from './not-found.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg };
+import EmailFilledSvg from './email-filled.svg';
+import AlertSvg from './alert.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg };

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

@@ -5,3 +5,4 @@ declare module '@frollo/frollo-web-ui/icons' { }
 export * from './components/fw-card/fw-card.vue';
 export * from './components/fw-button/fw-button.vue';
 export * from './components/fw-navigation-menu/fw-navigation-menu.vue';
+export * from './components/fw-input/fw-input.vue';