@feedmepos/ui-library 1.8.4 → 1.8.5

package/dist/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 1.8.5
+
+- `FmCustomizeFields`
+  - **New component** for customizing and reordering visible fields in tables/lists
+  - Drag-and-drop functionality for reordering fields
+  - Toggle visibility for each field with switch controls
+  - Search functionality to filter fields
+  - "Hide all" / "Show all" button for bulk visibility control
+  - Support for fields that cannot be hidden (`canHide: false`)
+  - Full i18n support (English, Thai, Simplified Chinese, Traditional Chinese)
+
 # 1.8.4
 
 - `FmAdvancedSort`

package/dist/components/button/FmButton.vue.d.ts

@@ -68,10 +68,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     appendIcon: string;
     loading: boolean;
 }>>>, {
-    type: "button" | "reset" | "submit";
+    size: "md" | "lg";
+    type: "reset" | "submit" | "button";
     label: string;
     disabled: boolean;
-    size: "md" | "lg";
     variant: "plain" | "primary" | "secondary" | "destructive" | "tertiary" | "fab" | FmButtonVariant;
     loading: boolean;
     icon: string;

package/dist/components/chart/bar/FmBar.vue.d.ts

@@ -109,8 +109,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: undefined;
     width: undefined;
 }>>>, {
-    legend: Partial<LegendOptions<"bar">>;
     name: string;
+    legend: Partial<LegendOptions<"bar">>;
     width: string;
     height: string;
     tooltip: Partial<TooltipOptions<"bar">>;

package/dist/components/chart/line/FmLine.vue.d.ts

@@ -109,8 +109,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: undefined;
     width: undefined;
 }>>>, {
-    legend: Partial<LegendOptions<"line">>;
     name: string;
+    legend: Partial<LegendOptions<"line">>;
     width: string;
     height: string;
     tooltip: Partial<TooltipOptions<"line">>;

package/dist/components/chart/pie/FmPie.vue.d.ts

@@ -96,12 +96,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: undefined;
     width: undefined;
 }>>>, {
+    name: string;
     legend: Partial<LegendOptions<"pie" | "doughnut">>;
     text: string;
-    name: string;
+    textColor: string;
     width: string;
     height: string;
-    textColor: string;
     paragraph: string;
     maintainAspectRatio: boolean;
     datalabels: Partial<FmChartDataLabelsOptions>;

package/dist/components/chip/FmChip.vue.d.ts

@@ -40,12 +40,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onChip-closed"?: (() => any) | undefined;
 }, {
     label: string;
-    selected: boolean;
     disabled: boolean;
     variant: FmChipVariant;
     icon: string;
     selectable: boolean;
     rightIcon: string;
+    selected: boolean;
     removable: boolean;
     compact: boolean;
 }, {}>, {

package/dist/components/dialog/FmDialogContent.vue.d.ts

@@ -25,9 +25,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     modelValue: boolean;
     contentClass: any;
-    maxHeight: string | number;
     minWidth: string | number;
     maxWidth: string | number;
+    maxHeight: string | number;
     closeButton: boolean;
     contentScrollable: boolean;
     isComponent: any;

package/dist/components/form/calendar/date-picker/FmDatePicker.vue.d.ts

@@ -39,9 +39,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
 }, {}>, {
     "trigger-button"?(_: {
         invalid: boolean;

package/dist/components/form/calendar/date-picker/FmDatePickerDesktop.vue.d.ts

@@ -39,9 +39,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
 }, {}>, {
     label?(_: {}): any;
     "trigger-button"?(_: {

package/dist/components/form/calendar/date-picker/FmDatePickerMobile.vue.d.ts

@@ -39,9 +39,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
 }, {}>, {
     label?(_: {}): any;
     "trigger-button"?(_: {

package/dist/components/form/calendar/date-range-picker/FmDateRangePicker.vue.d.ts

@@ -52,9 +52,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     compare: boolean;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
     showPredefinedRange: boolean;
     predefinedRange: import("./common").FmCalendarPredefinedRange[];
 }, {}>, {

package/dist/components/form/calendar/date-range-picker/FmDateRangePickerDesktop.vue.d.ts

@@ -55,9 +55,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
     compare: boolean;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
     showPredefinedRange: boolean;
     predefinedRange: FmCalendarPredefinedRange[];
 }, {}>, {

package/dist/components/form/calendar/date-range-picker/FmDateRangePickerField.vue.d.ts

@@ -27,8 +27,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showValidBorder: boolean;
     isComparing: boolean;
 }>>>, {
-    disabled: boolean;
     invalid: boolean;
+    disabled: boolean;
     focused: boolean;
     showValidBorder: boolean;
     analytic: boolean;

package/dist/components/form/calendar/date-range-picker/FmDateRangePickerMobile.vue.d.ts

@@ -55,9 +55,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
     compare: boolean;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
     showPredefinedRange: boolean;
     predefinedRange: FmCalendarPredefinedRange[];
 }, {}>, {

package/dist/components/form/field/FmField.vue.d.ts

@@ -31,9 +31,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconOutlined: boolean;
     size: string;
 }>>>, {
-    disabled: boolean;
     invalid: boolean;
     size: "sm" | "md";
+    disabled: boolean;
     focused: boolean;
     tag: string;
     prependIcon: string;

package/dist/components/form/search/FmSearch.vue.d.ts

@@ -74,9 +74,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     helperState: "error" | "none" | "success" | "warning";
     placeholder: string;
     maxWidth: string | number;
-    maxLength: number;
-    minLength: number;
     showValidBorder: boolean;
+    minLength: number;
+    maxLength: number;
     inputmode: "text" | "search" | "none" | "email" | "tel" | "url" | "decimal" | "numeric";
     readonly: boolean;
     showWordCount: boolean;

package/dist/components/form/simple-calendar/simple-date-picker/FmSimpleDatePicker.vue.d.ts

@@ -36,9 +36,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rules: import("../../../..").ValidationRule[];
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
 }, {}>, {
     "trigger-button"?(_: {
         invalid: boolean;

package/dist/components/form/simple-calendar/simple-date-picker/FmSimpleDatePickerDesktop.vue.d.ts

@@ -39,9 +39,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
 }, {}>, {
     label?(_: {}): any;
     "trigger-button"?(_: {

package/dist/components/form/simple-calendar/simple-date-picker/FmSimpleDatePickerMobile.vue.d.ts

@@ -39,9 +39,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
 }, {}>, {
     label?(_: {}): any;
     "trigger-button"?(_: {

package/dist/components/form/simple-calendar/simple-date-range-picker/FmSimpleDateRangePicker.vue.d.ts

@@ -51,9 +51,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rules: import("../../../..").ValidationRule[];
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
     showPredefinedRange: boolean;
     predefinedRange: import("./common").FmCalendarPredefinedRange[];
 }, {}>, {

package/dist/components/form/simple-calendar/simple-date-range-picker/FmSimpleDateRangePickerDesktop.vue.d.ts

@@ -56,9 +56,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
     showPredefinedRange: boolean;
     predefinedRange: FmCalendarPredefinedRange[];
     defaultCompareType: CompareType;

package/dist/components/form/simple-calendar/simple-date-range-picker/FmSimpleDateRangePickerField.vue.d.ts

@@ -27,8 +27,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showValidBorder: boolean;
     isComparing: boolean;
 }>>>, {
-    disabled: boolean;
     invalid: boolean;
+    disabled: boolean;
     focused: boolean;
     showValidBorder: boolean;
     analytic: boolean;

package/dist/components/form/simple-calendar/simple-date-range-picker/FmSimpleDateRangePickerMobile.vue.d.ts

@@ -56,9 +56,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     zIndex: number;
-    max: string;
-    min: string;
     showValidBorder: boolean;
+    min: string;
+    max: string;
     showPredefinedRange: boolean;
     predefinedRange: FmCalendarPredefinedRange[];
     defaultCompareType: CompareType;

package/dist/components/form/stepper-field/FmStepperField.vue.d.ts

@@ -82,11 +82,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placeholder: string;
     prependIcon: string;
     appendIcon: string;
-    max: number;
-    min: number;
-    step: number;
     showValidBorder: boolean;
+    min: number;
+    max: number;
     inputmode: "decimal" | "numeric";
+    step: number;
     prependText: string;
     appendText: string;
     isCurrency: boolean;

package/dist/components/form/text-field/FmTextField.vue.d.ts

@@ -102,10 +102,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placeholder: string;
     prependIcon: string;
     appendIcon: string;
-    maxLength: number;
-    minLength: number;
     showValidBorder: boolean;
-    inputmode: "text" | "search" | "none" | "email" | "tel" | "password" | "url" | "decimal" | "numeric";
+    minLength: number;
+    maxLength: number;
+    inputmode: "text" | "search" | "none" | "email" | "password" | "tel" | "url" | "decimal" | "numeric";
     readonly: boolean;
     showWordCount: boolean;
     formatter: (value: string) => string;

package/dist/components/form/textarea/FmTextarea.vue.d.ts

@@ -65,9 +65,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     helperText: string;
     helperState: "error" | "none" | "success" | "warning";
     placeholder: string;
-    maxLength: number;
-    minLength: number;
     showValidBorder: boolean;
+    minLength: number;
+    maxLength: number;
     readonly: boolean;
     showWordCount: boolean;
     autofocus: boolean;

package/dist/components/icon/FmIcon.vue.d.ts

@@ -34,8 +34,8 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    size: "sm" | "md" | "lg" | "xl";
     color: string;
     outline: boolean;
+    size: "sm" | "md" | "lg" | "xl";
 }, {}>;
 export default _default;

package/dist/components/menu/menu-component/FmMenu.vue.d.ts

@@ -101,11 +101,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled: boolean;
     placement: Placement;
     zIndex: number;
+    width: number;
+    maxHeight: number;
     trigger: "click" | "hover";
     closeOnClick: boolean;
     closeOnMouseLeave: boolean;
-    width: number;
-    maxHeight: number;
     inPopover: boolean;
     flipPadding: {
         bottom?: number | undefined;

package/dist/components/menu/menu-item/FmMenuItem.vue.d.ts

@@ -46,8 +46,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label: string;
     disabled: boolean;
     modelValue: boolean;
-    icon: string;
     indeterminate: boolean;
+    icon: string;
     sublabel: string;
     selectable: boolean;
     expandable: boolean;

package/dist/components/progress-indicator/FmCircularProgress.vue.d.ts

@@ -24,8 +24,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: string;
     color: string;
 }>>>, {
-    size: "md" | "lg" | "xl" | "xxl";
     color: string;
+    size: "md" | "lg" | "xl" | "xxl";
     currentStep: string | number;
     totalSteps: string | number;
     indeterminate: boolean;

package/dist/components/snackbar/FmSnackbar.vue.d.ts

@@ -81,15 +81,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onOnDismiss?: (() => any) | undefined;
     onOnAction?: (() => any) | undefined;
 }, {
-    title: string;
     color: string;
+    title: string;
     variant: SnackbarVariant;
     zIndex: number;
+    spinner: boolean;
+    bgColor: string;
     description: string;
     dismissable: boolean;
     action: string;
-    bgColor: string;
-    spinner: boolean;
 }, {}>, {
     actions?(_: {}): any;
 }>;

package/dist/components/stepper/FmStep.vue.d.ts

@@ -50,8 +50,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    disabled: () => boolean;
     error: () => boolean;
+    disabled: () => boolean;
     description: string;
 }, {}>, {
     default?(_: {}): any;

package/dist/components/tab/FmCollapsibleTab.vue.d.ts

@@ -43,9 +43,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>>, {
     label: string;
     disabled: boolean;
-    children: FmCollapsibleTabProps[];
     value: string | number;
     modelValue: string;
+    children: FmCollapsibleTabProps[];
     icon: string;
     active: boolean;
     indentation: number;

package/dist/components/tab/FmTab.vue.d.ts

@@ -33,9 +33,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     label: string;
     disabled: boolean;
-    children: FmTabProps[];
     value: any;
     modelValue: any;
+    children: FmTabProps[];
     icon: string;
     vertical: boolean;
     badge: number;

package/dist/components/table/FmCustomizeFields.vue.d.ts

@@ -0,0 +1,71 @@
+export interface CustomizeField {
+    /** Unique identifier for the field */
+    id: string;
+    /** Display label for the field */
+    label: string;
+    /** Whether the field is visible */
+    visible: boolean;
+    /** Position/order of the field (0-based index) */
+    position: number;
+    /** Icon name (Material Symbols) */
+    icon?: string;
+    /** Whether the field can be hidden (if false, toggle is disabled) */
+    canHide?: boolean;
+}
+export interface FmCustomizeFieldsProps {
+    /** Array of field configurations */
+    modelValue: CustomizeField[];
+    /** Title text for the header */
+    title?: string;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Whether to show the search input */
+    searchable?: boolean;
+    /** Whether to show the "Hide all" / "Show all" toggle button */
+    showToggleAllButton?: boolean;
+    /** Text for the "Hide all" button */
+    hideAllText?: string;
+    /** Text for the "Show all" button */
+    showAllText?: string;
+    /** Text for the "Shown" label */
+    shownLabel?: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FmCustomizeFieldsProps>, {
+    showCloseButton: boolean;
+    searchable: boolean;
+    showToggleAllButton: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CustomizeField[]) => void;
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FmCustomizeFieldsProps>, {
+    showCloseButton: boolean;
+    searchable: boolean;
+    showToggleAllButton: boolean;
+}>>> & {
+    "onUpdate:modelValue"?: ((value: CustomizeField[]) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}, {
+    searchable: boolean;
+    showCloseButton: boolean;
+    showToggleAllButton: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/table/FmTable.vue.d.ts

@@ -153,7 +153,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     pageCount: number;
     pageSize: number;
-    selection: "multiple" | "single";
+    selection: "single" | "multiple";
     rowData: any[];
     columnDefs: ColumnDef<any>[];
     columnFilter: ColumnFiltersState;

package/dist/components/table/FmTableCheckbox.vue.d.ts

@@ -4,7 +4,16 @@ export interface FmTableCheckboxProps {
     indeterminate?: boolean;
     onChange: () => void;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<FmTableCheckboxProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FmTableCheckboxProps>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FmTableCheckboxProps>, {
+    disabled: boolean;
+    indeterminate: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FmTableCheckboxProps>, {
+    disabled: boolean;
+    indeterminate: boolean;
+}>>>, {
+    disabled: boolean;
+    indeterminate: boolean;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -15,3 +24,11 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/tabs/FmCollapsibleTabs.vue.d.ts

@@ -12,8 +12,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     vertical: boolean;
     items: () => never[];
 }>>>, {
-    items: FmCollapsibleTabProps[];
     modelValue: string;
+    items: FmCollapsibleTabProps[];
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;