@fewangsit/wangsvue-fats 1.0.0-alpha.22 → 1.0.0-alpha.24

package/components/button/Button.vue.d.ts

@@ -0,0 +1,193 @@
+import { ButtonHTMLAttributes, VNode } from 'vue';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { TooltipOptions } from 'primevue/tooltip';
+import {
+    GlobalComponentConstructor,
+    ClassComponent,
+    HintedString,
+} from '../ts-helpers';
+
+/**
+ * Defines valid properties in Button component.
+ */
+export interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
+    /**
+     * Inline style of the button.
+     */
+    style?: any;
+    /**
+     * Style class of the button.
+     */
+    class?: any;
+    /**
+     * Text of the button.
+     */
+    label?: string | undefined;
+    /**
+     * Name of the icon.
+     */
+    icon?: WangsIcons | undefined;
+    /**
+     * Position of the icon.
+     * @defaultValue left
+     */
+    iconPos?: 'left' | 'right' | 'top' | 'bottom' | undefined;
+    /**
+     * Style class of the icon.
+     */
+    iconClass?: string | undefined;
+    /**
+     * Tooltip/information to show on button hover.
+     */
+    tooltip?: string | TooltipOptions;
+    /**
+     * Set the position of tooltip.
+     * @default bottom
+     */
+    tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Value of the badge.
+     */
+    badge?: string | undefined;
+    /**
+     * Style class of the badge.
+     */
+    badgeClass?: string | undefined;
+    /**
+     * Severity type of the badge.
+     */
+    badgeSeverity?:
+        | HintedString<
+              | 'secondary'
+              | 'info'
+              | 'success'
+              | 'warning'
+              | 'danger'
+              | 'contrast'
+          >
+        | null
+        | undefined;
+    /**
+     * Whether the button is in loading state.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Icon to display in loading state.
+     */
+    loadingIcon?: string | undefined;
+    /**
+     *  Add a link style to the button.
+     * @defaultValue false
+     */
+    link?: boolean | undefined;
+    /**
+     * Defines the style of the button.
+     */
+    severity?:
+        | HintedString<
+              | 'secondary'
+              | 'success'
+              | 'info'
+              | 'warning'
+              | 'help'
+              | 'danger'
+              | 'contrast'
+          >
+        | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @defaultValue false
+     */
+    raised?: boolean | undefined;
+    /**
+     * Add a circular border radius to the button.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    text?: boolean | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @defaultValue false
+     */
+    outlined?: boolean | undefined;
+    /**
+     * Defines the size of the button.
+     */
+    size?: 'small' | 'large' | undefined;
+    /**
+     * Add a plain textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    plain?: boolean | undefined;
+}
+
+/**
+ * Defines current options in Button component.
+ */
+export interface ButtonContext {
+    /**
+     * Current disabled state of the element as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid slots in Button component.
+ */
+export interface ButtonSlots {
+    /**
+     * Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
+     */
+    default(): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+}
+
+/**
+ * **WangsVue - Button**
+ *
+ * _Button is an extension to standard button element with icons and theming._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/table)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class Button extends ClassComponent<
+    ButtonProps,
+    ButtonSlots,
+    Record<string, unknown>
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Button: GlobalComponentConstructor<Button>;
+    }
+}
+
+export default Button;

package/components/buttonbulkaction/ButtonBulkAction.vue.d.ts

@@ -0,0 +1,104 @@
+import { DefineComponent } from 'vue';
+import { MenuItem } from '../menuitem';
+
+export interface ButtonBulkActionLocaleConfig {
+    /**
+     * @example `{length} data selected`
+     */
+    currentSelectionMessage?: string;
+
+    /**
+     * @description Label for when all records have been selected.
+     * @example 'Select all ({totalRecords} data)' - totalRecords - The total number of records available to select.
+     */
+    allRecordSelected?: string;
+
+    /**
+     * @description Label for the "Select All" option in a bulk action button.
+     * @example `Select all ({totalRecords} items)` - totalRecords - The total number of records available to select.
+     */
+    selectAllRecords?: string;
+}
+
+export interface ButtonBulkActionProps {
+    /**
+     * Disable the button.
+     */
+    disabled?: boolean;
+    /**
+     * An array of data objects to be included in an action.
+     * Use as 'v-model:selectedData' to automatically reset on Cancel or Apply.
+     */
+    selectedData: Record<string, any>[];
+    /**
+     * The total selectable data. This is optional when working with dynamic data table,
+     * just define tableName, the component will handle the rest for you
+     *
+     */
+    totalRecords?: number;
+    options: MenuItem[];
+    /**
+     * Multiple bulk action mounted at the same time will cause unexpected behavior.
+     *
+     * You need to set the appropriate id the same with the table-name where the bulkaction used for.
+     */
+    tableName?: string;
+    /**
+     * Specify the select manue type. Default to overlay-panel
+     *
+     * @default overlay-panel
+     * @default dropdown - for wangsvue-acts
+     *
+     * @options dropdown overlay-panel
+     */
+    selectMenuType?: 'dropdown' | 'overlay-panel';
+    /**
+     * Specify the name/label for selected data.
+     *
+     * @example 'Asset(s)' will be displayed as '3 Asset(s) Selected'
+     * @default 'Data' for all packages
+     */
+    naming?: string;
+}
+
+export interface ButtonBulkActionSlots {
+    /**
+     * Use additional slot like input field.
+     * The button Apply will be shown if the selected option use additional slot.
+     *
+     * @slotprops selectedOption the current selected option/action. you can do conditional based on this slotprops.
+     */
+    addition(selectedOption: MenuItem): () => any;
+}
+
+export type ButtonBulkActionEmits = {
+    /**
+     * Emits when Apply button is clicked.
+     *
+     * By default, 'command' on MenuItem will be executed.
+     * With this event, You can do additional actions.
+     */
+    'apply': [];
+    /**
+     * Emits when Cancel or Apply button is clicked.
+     */
+    'update:selectedData': [datas: Record<string, unknown>[]];
+};
+
+/**
+ * **WangsVue - ButtonBulkAction**
+ *
+ * _ButtonBulkAction is a component for handling bulk action for multiple data at once._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group buttons
+ */
+declare const ButtonBulkAction: DefineComponent<
+    ButtonBulkActionProps,
+    ButtonBulkActionSlots,
+    ButtonBulkActionEmits
+>;
+
+export default ButtonBulkAction;

package/components/buttoncopy/ButtonCopy.vue.d.ts

@@ -0,0 +1,26 @@
+import { DefineComponent } from 'vue';
+
+export interface ButtonCopyProps {
+    /**
+     * Text to be copied.
+     */
+    text: string;
+}
+
+/**
+ * **WangsVue - ButtonCopy**
+ *
+ * _ButtonCopy is a component for copying text to the clipboard._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group buttons
+ */
+declare const ButtonCopy: DefineComponent<
+    ButtonCopyProps,
+    Record<string, unknown>,
+    Record<string, unknown>
+>;
+
+export default ButtonCopy;

package/components/buttondownload/ButtonDownload.vue.d.ts

@@ -0,0 +1,49 @@
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
+
+export interface ButtonDownloadProps {
+    fileName: string;
+    /**
+     * Text of the button.
+     */
+    label?: string;
+    /**
+     * Specify which table to be exported.
+     * When it is not specified, the default name of data table will be used.
+     *
+     * @default 'datatable'
+     */
+    tableName?: string;
+    /**
+     * If you want to download multiple table in 1 excel
+     */
+    multiTableNames?: string[];
+    /**
+     * Texts below table in downloaded excel
+     */
+    additionalTextBelowTable?: (string | string[])[];
+}
+
+/**
+ * **WangsVue - ButtonDownload**
+ *
+ * _Trigger DataTable Export Excel_
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/button)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class ButtonDownload extends ClassComponent<
+    ButtonDownloadProps,
+    Record<string, unknown>,
+    Record<string, unknown>
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        ButtonDownload: GlobalComponentConstructor<ButtonDownload>;
+    }
+}
+
+export default ButtonDownload;

package/components/buttonfilter/ButtonFilter.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent } from 'vue';
+
+export interface ButtonFilterProps {
+    /**
+     * Integrate with datatable with table name
+     */
+    tableName?: string;
+}
+
+declare const ButtonFilter: DefineComponent<ButtonFilterProps>;
+
+export default ButtonFilter;

package/components/buttonradio/ButtonRadio.vue.d.ts

@@ -0,0 +1,257 @@
+import { StyleValue } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export declare type ButtonRadioPassThroughOptionType =
+    | ButtonRadioPassThroughAttributes
+    | ((
+          options: ButtonRadioPassThroughMethodOptions,
+      ) => ButtonRadioPassThroughAttributes | string)
+    | string
+    | null
+    | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonRadioPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+
+    /**
+     * Defines valid properties.
+     */
+    props: ButtonRadioProps;
+
+    /**
+     * Defines current inline state.
+     */
+    state: ButtonRadioState;
+
+    /**
+     * Defines current options.
+     */
+    context: ButtonRadioContext;
+
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonRadioProps.pt}
+ */
+export interface ButtonRadioPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: ButtonRadioPassThroughOptionType;
+
+    /**
+     * Used to pass attributes to the input's DOM element.
+     */
+    input?: ButtonRadioPassThroughOptionType;
+
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: ButtonRadioPassThroughOptionType;
+
+    /**
+     * Used to pass attributes to the icon's DOM element.
+     */
+    icon?: ButtonRadioPassThroughOptionType;
+
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ButtonRadioPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ButtonRadio component.
+ */
+export interface ButtonRadioState {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in ButtonRadio component.
+ */
+export interface ButtonRadioProps {
+    /**
+     * The label for the input element
+     */
+    label?: string;
+
+    /**
+     * Value of the input.
+     */
+    value?: any;
+
+    /**
+     * Value binding of the input.
+     */
+    modelValue?: any;
+
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+
+    /**
+     * Allows to select a boolean value.
+     * @default false
+     */
+    binary?: boolean;
+
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
+
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: StyleValue | undefined;
+
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: string | object | undefined;
+
+    /**
+     * Tooltip info about the checkbox.
+     */
+    tooltip?: string;
+
+    /**
+     * Tooltip position.
+     *
+     * @default 'top'
+     */
+    tooltipPos?: 'top' | 'right' | 'left' | 'bottom';
+}
+
+/**
+ * Defines current options in ButtonRadio component.
+ */
+export interface ButtonRadioContext {
+    /**
+     * Current checked state of the item as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid emits in ButtonRadio component.
+ */
+export type ButtonRadioEmits = {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue': [value: any];
+
+    /**
+     * Callback to invoke on radio button value change.
+     * @param {Event} event - Browser event.
+     */
+    'change': [event: Event];
+
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    'focus': [event: Event];
+
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    'blur': [event: Event];
+};
+
+/**
+ * **WangsVue - ButtonRadio**
+ *
+ * _ButtonRadio is an extension to standard radio button element with theming._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/buttonradio)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class ButtonRadio extends ClassComponent<
+    ButtonRadioProps,
+    unknown,
+    ButtonRadioEmits
+> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        ButtonRadio: GlobalComponentConstructor<ButtonRadio>;
+    }
+}
+
+export default ButtonRadio;