@frollo/frollo-web-ui 1.2.0 → 1.2.2

package/icons/icons.stories.ts

@@ -19,9 +19,9 @@ const Template = () => ({
   </div>`,
   setup() {
     const extractFilename = (path: string) => {
-      const pathArray = path.split('/');
-      const lastIndex = pathArray.length - 1;
-      return pathArray[lastIndex].slice(0, -4);
+      const pathArray = path?.split('/');
+      const lastIndex = pathArray?.length - 1;
+      if (lastIndex) return pathArray[lastIndex].slice(0, -4);
     };
     return {
       icons,

package/index.d.ts

@@ -1,5 +1,6 @@
 import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
+import * as vee_validate from 'vee-validate';
 export { Form as FwForm } from 'vee-validate';
 import * as _vue_shared from '@vue/shared';
 
@@ -17,7 +18,7 @@ declare interface FwInputProps {
     tabindex?: string;
 }
 
-declare const _default$c: vue.DefineComponent<{
+declare const _default$d: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -168,7 +169,7 @@ declare const _default$c: vue.DefineComponent<{
     tabindex: string;
 }>;
 
-declare const _default$b: vue.DefineComponent<{
+declare const _default$c: vue.DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -222,6 +223,130 @@ declare const _default$b: vue.DefineComponent<{
     };
 }>>, {}>;
 
+declare interface FwDropdownOption {
+    label: string;
+    value: string;
+}
+declare interface FwDropdownProps {
+    name: string;
+    label?: string;
+    rules?: string | Record<string, unknown> | (() => boolean);
+    options: FwDropdownOption[];
+    hint?: string;
+    placeholder?: string;
+}
+
+declare const _default$b: vue.DefineComponent<{
+    /**
+     * The select v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * Validation rules. Accepts an object, string schema or validation function.
+     */
+    rules: {
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
+    };
+    /**
+     * An array of options for the dropdown menu.
+     */
+    options: {
+        type: PropType<FwDropdownOption[]>;
+        required: true;
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+    /**
+     * Custom placeholder text
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}, {
+    menuButtonClass: string;
+    menuClass: string;
+    menuItemClass: string;
+    menuItemActiveClass: (option: FwDropdownOption) => "bg-white" | "bg-none";
+    errors: vue.Ref<string[]>;
+    errorMessage: vue.Ref<string | undefined>;
+    meta: vee_validate.FieldMeta<unknown>;
+    fieldVal: vue.Ref<unknown>;
+    isOpen: vue.Ref<boolean>;
+    selectValue: vue.WritableComputedRef<string | undefined>;
+    selectOption: (option: FwDropdownOption) => void;
+    selectedOption: vue.Ref<FwDropdownOption | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The select v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * Validation rules. Accepts an object, string schema or validation function.
+     */
+    rules: {
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
+    };
+    /**
+     * An array of options for the dropdown menu.
+     */
+    options: {
+        type: PropType<FwDropdownOption[]>;
+        required: true;
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+    /**
+     * Custom placeholder text
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>>, {
+    placeholder: string;
+}>;
+
 declare const _default$a: vue.DefineComponent<{
     /**
      * The header title of the card
@@ -823,10 +948,11 @@ declare const _default$3: vue.DefineComponent<{
 }>;
 
 declare type FwTableItem = Record<string, string | number>;
-declare type FwTableFormatFunction = (value: string | number) => string;
+declare type FwTableFormatFunction = (value: string | number | object) => string;
 declare type FwTableItemOptions = Record<string, {
     formatter?: FwTableFormatFunction;
     isSortable?: boolean;
+    disabled?: boolean;
 }>;
 declare type FwTableSort = 'asc' | 'desc';
 declare interface FwTableProps {
@@ -853,6 +979,7 @@ declare const _default$2: vue.DefineComponent<{
     sortedIcon: (sortDir: string, column: string) => "text-body" | "text-grey-light";
     formattedText: (row: FwTableItem, column: string) => string | number;
     isColumnSortable: (column: string) => boolean | undefined;
+    isDisabled: (column: string) => boolean;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     items: {
         type: PropType<FwTableItem[]>;
@@ -957,4 +1084,4 @@ declare interface FwCheckboxProps {
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$9 as FwButton, FwButtonProps, _default$a as FwCard, FwCardProps, _default$b as FwCheckbox, FwCheckboxProps, __default__$1 as FwEmailPulse, _default$c as FwInput, FwInputProps, FwInputType, _default$5 as FwModal, FwModalProps, _default$8 as FwNavigationMenu, _default$4 as FwProgressBar, __default__ as FwSuccessPulse, _default$6 as FwTab, _default$2 as FwTable, FwTableFormatFunction, _default$1 as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default as FwTableRow, FwTableSort, _default$7 as FwTabs, _default$3 as FwTag, FwTagProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, install as default, modalService };
+export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$9 as FwButton, FwButtonProps, _default$a as FwCard, FwCardProps, _default$c as FwCheckbox, FwCheckboxProps, _default$b as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$d as FwInput, FwInputProps, FwInputType, _default$5 as FwModal, FwModalProps, _default$8 as FwNavigationMenu, _default$4 as FwProgressBar, __default__ as FwSuccessPulse, _default$6 as FwTab, _default$2 as FwTable, FwTableFormatFunction, _default$1 as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default as FwTableRow, FwTableSort, _default$7 as FwTabs, _default$3 as FwTag, FwTagProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, install as default, modalService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

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

@@ -0,0 +1,113 @@
+import { PropType } from 'vue';
+import { FwDropdownOption } from './index.types';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The select v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * Validation rules. Accepts an object, string schema or validation function.
+     */
+    rules: {
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
+    };
+    /**
+     * An array of options for the dropdown menu.
+     */
+    options: {
+        type: PropType<FwDropdownOption[]>;
+        required: true;
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+    /**
+     * Custom placeholder text
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}, {
+    menuButtonClass: string;
+    menuClass: string;
+    menuItemClass: string;
+    menuItemActiveClass: (option: FwDropdownOption) => "bg-white" | "bg-none";
+    errors: import("vue").Ref<string[]>;
+    errorMessage: import("vue").Ref<string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    fieldVal: import("vue").Ref<unknown>;
+    isOpen: import("vue").Ref<boolean>;
+    selectValue: import("vue").WritableComputedRef<string | undefined>;
+    selectOption: (option: FwDropdownOption) => void;
+    selectedOption: import("vue").Ref<FwDropdownOption | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The select v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * Validation rules. Accepts an object, string schema or validation function.
+     */
+    rules: {
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
+    };
+    /**
+     * An array of options for the dropdown menu.
+     */
+    options: {
+        type: PropType<FwDropdownOption[]>;
+        required: true;
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+    /**
+     * Custom placeholder text
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>>, {
+    placeholder: string;
+}>;
+export default _default;

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

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

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

@@ -0,0 +1,12 @@
+export declare interface FwDropdownOption {
+    label: string;
+    value: string;
+}
+export declare interface FwDropdownProps {
+    name: string;
+    label?: string;
+    rules?: string | Record<string, unknown> | (() => boolean);
+    options: FwDropdownOption[];
+    hint?: string;
+    placeholder?: string;
+}

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

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     sortedIcon: (sortDir: string, column: string) => "text-body" | "text-grey-light";
     formattedText: (row: FwTableItem, column: string) => string | number;
     isColumnSortable: (column: string) => boolean | undefined;
+    isDisabled: (column: string) => boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<FwTableItem[]>;

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

@@ -1,8 +1,9 @@
 export declare type FwTableItem = Record<string, string | number>;
-export declare type FwTableFormatFunction = (value: string | number) => string;
+export declare type FwTableFormatFunction = (value: string | number | object) => string;
 export declare type FwTableItemOptions = Record<string, {
     formatter?: FwTableFormatFunction;
     isSortable?: boolean;
+    disabled?: boolean;
 }>;
 export declare type FwTableSort = 'asc' | 'desc';
 export declare interface FwTableProps {

package/types/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './fw-form';
 export * from './fw-input';
 export * from './fw-checkbox';
+export * from './fw-dropdown';
 export * from './fw-card';
 export * from './fw-button';
 export * from './fw-navigation-menu';

package/types/components/index.types.d.ts

@@ -7,3 +7,4 @@ export * from '../components/fw-modal/index.types';
 export * from '../components/fw-progress-bar/index.types';
 export * from '../components/fw-tag/index.types';
 export * from '../components/fw-table/index.types';
+export * from '../components/fw-dropdown/index.types';