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

package/components/dialogconfirm/DialogConfirm.vue.d.ts

@@ -0,0 +1,164 @@
+import { Slot } from 'vue';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+type ConfirmDialogSeverity = 'success' | 'danger';
+
+export interface DialogConfirmLocaleConfig {
+    actionableCloseButtonLabel?: string;
+    nonActionableCloseButtonLabel?: string;
+    /**
+     * @example Are you sure?
+     */
+    defaultConfirmMessage?: string;
+
+    /**
+     * @example Yakin
+     */
+    defaultConfirmLabel?: string;
+}
+
+/**
+ * Props for DialogConfirm component
+ */
+export interface DialogConfirmProps {
+    /**
+     * The header of the dialog.
+     */
+    header: string;
+    /**
+     * The severity of the dialog.
+     * The severity will determine the dialog icons and color scheme.
+     */
+    severity: ConfirmDialogSeverity;
+    /**
+     * The severity of the confirm button.
+     * The severity will determine the confirm button color scheme in case button severity is different from header/dialog severity.
+     *
+     * @default undefined - to fallback to props.severity
+     */
+    confirmButtonSeverity?: ConfirmDialogSeverity | 'primary';
+    /**
+     * The boolean modelValue to show dialog.
+     */
+    visible: boolean;
+
+    /**
+     * Determines if the dialog should close after confirm.
+     * @default true
+     */
+    closeAfterConfirm?: boolean;
+    /**
+     * The label of the close/cancel button.
+     */
+    closeLabel?: string;
+    /**
+     * To hide/show the confirm button.
+     *
+     * Set to 'false' Make the confirm dialog cannot be confirmed.
+     *
+     * @default true;
+     */
+    actionable?: boolean;
+    /**
+     * The label of the confirm button.
+     */
+    confirmLabel?: string;
+    /**
+     * Props to disable confirm button.
+     */
+    disableConfirmButton?: boolean;
+    /**
+     * Custom header icon. Default is 'error' icon for danger severity, and 'checkbox-circle' for success severity.
+     */
+    headerIcon?: WangsIcons;
+    /**
+     * The lists to be displayed in the dialog.
+     */
+    list?: (string | object)[] | Set<string | object>;
+    /**
+     * The label of the list if your list item is an object.
+     * Choose a property from the item to be displayed on the list.
+     */
+    listLabel?: string;
+    /**
+     * The confirmation message.
+     */
+    message?: string;
+    /**
+     * Whether show icon header or not.
+     * @default true;
+     */
+    showIcon?: boolean;
+    /**
+     * Whether show close button or not (footer button that has label, not close button with icon 'X').
+     * @default true;
+     */
+    showCloseButton?: boolean;
+
+    /**
+     * Set class for content element.
+     */
+    contentClass?: any;
+}
+
+/**
+ * Slots for DialogConfirm component
+ */
+export interface DialogConfirmSlots {
+    /**
+     * The body slot for the dialog. Here is where you can put your dialog body.
+     */
+    body?: Slot | string;
+    /**
+     * The footer slot for the dialog. Here is where you can put your dialog footer.
+     * Use this slot if you need to custom the dialog buttons.
+     */
+    footer?: Slot | string;
+}
+
+/**
+ * Emits for DialogConfirm component
+ */
+export type DialogConfirmEmits = {
+    /**
+     * Emits when close button clicked.
+     */
+    'close': [];
+    /**
+     * Emits when Confirm button clicked.
+     */
+    'confirm': [];
+    /**
+     * Emits when dialog closed.
+     */
+    'hide': [];
+    /**
+     * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+     */
+    'update:visible': [state: boolean];
+};
+
+/**
+ * **WangsVue - DialogConfirm**
+ *
+ * _DialogConfirm is a component for creating confirmation dialogs._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class DialogConfirm extends ClassComponent<
+    DialogConfirmProps,
+    DialogConfirmSlots,
+    DialogConfirmEmits
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        DialogConfirm: GlobalComponentConstructor<DialogConfirm>;
+    }
+}
+
+export default DialogConfirm;

package/components/dialogform/DialogForm.vue.d.ts

@@ -0,0 +1,349 @@
+import { GenericObject } from 'vee-validate';
+import { Slot } from 'vue';
+import FormInstance, { FormPayload, FormProps } from '../form/Form.vue.d';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type DialogFormValue =
+    | string
+    | string[]
+    | number
+    | number[]
+    | boolean
+    | boolean[]
+    | Record<string, unknown>
+    | Record<string, unknown>[];
+
+/**
+ * Generic form payload, able to receive types from outside
+ */
+export type DialogFormPayload<
+    FormValuesType = Record<string, DialogFormValue>,
+> = {
+    stayAfterSubmit: boolean;
+    formValues: FormValuesType;
+};
+
+export interface DialogFormLocaleConfig {
+    /**
+     * @example 'Cancel'
+     */
+    cancelBtnLabel?: string;
+
+    /**
+     * @example 'Clear Field'
+     */
+    clearBtnLabel?: string;
+
+    /**
+     * @example 'Stay after submit'
+     */
+    stayCheckboxLabel?: string;
+
+    /**
+     * @example 'Submit'
+     */
+    submitBtnLabel?: string;
+
+    /**
+     * Set the label for button expand sidebar right when it is expanded.
+     *
+     * @example 'Tutup <'
+     */
+    asideRightExpandedButtonLabel?: string;
+
+    /**
+     * Set the label for button expand sidebar right when it is collapsed.
+     *
+     * @example 'Lihat data yang ada >'
+     */
+    asideRightCollapsedButtonLabel?: string;
+}
+
+/**
+ * Props for DialogForm component
+ */
+export interface DialogFormProps extends FormProps {
+    /**
+     * The template for form buttons.
+     */
+    buttonsTemplate: ('clear' | 'submit' | 'cancel')[];
+
+    /**
+     * The dialog header.
+     */
+    header: string;
+
+    /**
+     * Value binding to show/hide the dialog.
+     */
+    visible: boolean;
+
+    /**
+     * With in pixel
+     *
+     * @default 260
+     */
+    asideRightWidth?: number;
+    class?: string | string[];
+
+    /**
+     * Custom button cancel label.
+     *
+     * @default - The default value from locale configuration {@link DialogFormLocaleConfig.cancelBtnLabel}
+     *
+     */
+    cancelBtnLabel?: string;
+
+    /**
+     * Custom button clear label.
+     *
+     * @default - The default value from locale configuration {@link DialogFormLocaleConfig.clearBtnLabel}
+     */
+    clearBtnLabel?: string;
+
+    /**
+     * Wether show the Close icon or not.
+     */
+    closable?: boolean;
+
+    /**
+     * Close dialog after form validated and submitted.
+     *
+     * @default true
+     */
+    closeOnSubmit?: boolean;
+
+    /**
+     * @deprecated
+     */
+    contentClass?: string | string[];
+
+    /**
+     * Show Date time on header.
+     */
+    dateHeader?: string;
+
+    /**
+     * Set the header icon left beside of the title.
+     */
+    headerIcon?: WangsIcons;
+
+    /**
+     * Sets the invalid state.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+
+    /**
+     * Prevent form resets after submitted. Default is resetted.
+     *
+     * @default true
+     */
+    resetAfterSubmit?: boolean;
+
+    /**
+     * The severity of the dialog.
+     * The severity will determine the dialog icons and color scheme.
+     */
+    severity?: 'success' | 'danger' | 'primary';
+
+    /**
+     * Show or hide the checkbox 'Stay after submit.'
+     *
+     * @default true - if the action is submit.
+     * @default false - if the action is save.
+     */
+    showStayCheckbox?: boolean;
+
+    /**
+     * Custom label for stay checkbox.
+     *
+     * @default - The default value from locale configuration {@link DialogFormLocaleConfig.stayCheckboxLabel}
+     */
+    stayCheckboxLabel?: string;
+
+    /**
+     * Custom button submit label.
+     * @default - The default value from locale configuration {@link DialogFormLocaleConfig.submitBtnLabel}
+     */
+    submitBtnLabel?: string;
+
+    /**
+     * Define the invalid message to be shown on invalid state above the Form submit button.
+     *
+     * @default undefined
+     */
+    validatorMessage?: string;
+
+    /**
+     * Additional validation function.
+     * Within this this function, you need to set the invalid props value.
+     *
+     * If after executing this function the props invalid is true, the form will not be submitted.
+     * Otherwise, 'submit' event will be emitted.
+     *
+     * @param values - the Form values
+     */
+    validationFunction?: (values: GenericObject) => void | Promise<void>;
+
+    /**
+     * Set the dialog size.
+     *
+     * - small: 400px
+     * - medium: 500px
+     * - large: 572px
+     * - semi-xlarge: 600px
+     * - xlarge: 800px
+     *
+     * @default 'small';
+     */
+    width?: 'small' | 'medium' | 'large' | 'semi-xlarge' | 'xlarge';
+}
+
+export interface ConfirmSlots {
+    /**
+     * The Visible state.
+     */
+    visible: boolean;
+
+    /**
+     * Hide the confirm dialog.
+     */
+    hide: () => void;
+
+    /**
+     * The submit function to be called after confirmation.
+     */
+    submit: (submitFn: (value: FormPayload) => Promise<void> | void) => void;
+}
+
+export interface ActionSlots {
+    /**
+     * The submit function to be called after confirmation.
+     */
+    submit: (submitFn: () => Promise<void> | void) => void;
+}
+
+/**
+ * Slots for DialogForm component
+ */
+export interface DialogFormSlots {
+    /**
+     * Slot for action buttons.
+     */
+    'actionButtons': Slot<ActionSlots>;
+
+    /**
+     * Slot for aside right expansion.
+     */
+    'aside-right': Slot;
+
+    /**
+     * Slot for dialog confirm.
+     */
+    'confirm': Slot<ConfirmSlots>;
+
+    /**
+     * The fields slot for the Dialogform. Here is where you can put your Dialogform fields.
+     */
+    'fields': Slot<{ formValues: GenericObject; key?: number }>;
+
+    /**
+     * Slot for dialog header.
+     */
+    'header': Slot;
+}
+
+/**
+ * Emits for DialogForm component
+ */
+export type DialogFormEmits = {
+    /**
+     * Emits when 'Clear Field' button clicked.
+     */
+    'clear': [];
+
+    /**
+     * When dialog is closed by close button.
+     */
+    'close': [];
+
+    /**
+     * Callback to invoke when dialog is hidden.
+     */
+    'hide': [];
+
+    /**
+     * Callback to invoke when dialog is shown.
+     */
+    'show': [];
+
+    /**
+     * Emits when the form validation succes and props.invalid is 'false'.
+     */
+    'submit': [values: DialogFormPayload];
+
+    /**
+     * When dialog is closed.
+     */
+    'update:visible': [state: boolean];
+};
+
+/**
+ * **WangsVue - DialogForm**
+ *
+ * _DialogForm is combination of Form and Dialog. Handles validation on submit using vee-validate.
+ * You need to install vee-validate while using this component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class DialogForm extends ClassComponent<
+    DialogFormProps,
+    DialogFormSlots,
+    DialogFormEmits
+> {
+    /**
+     * Exposed function to clears the form fields.
+     */
+    clearField: () => void;
+
+    /**
+     * The ref of form element.
+     */
+    form: FormInstance;
+
+    /**
+     * Set initial values for all fields.
+     */
+    setValues: (values: GenericObject) => void;
+
+    /**
+     * Set value for specific field.
+     */
+    setFieldValue: <T extends string>(
+        field: T,
+        value: GenericObject[T],
+        shouldValidate?: boolean,
+    ) => void;
+
+    /**
+     * Set errors fields
+     * @param fields - {
+     *   name: 'This name already exists'
+     * }
+     */
+    setErrors(fields: GenericObject): void;
+}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        DialogForm: GlobalComponentConstructor<DialogForm>;
+    }
+}
+
+export default DialogForm;

package/components/dialogselecttree/DialogSelectTree.vue.d.ts

@@ -0,0 +1,136 @@
+import { TreeSelectionKeys } from 'primevue/tree';
+import { TreeNode } from '../basetree/BaseTree.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import TreeInstance, { TreeProps } from '../tree/Tree.vue.d';
+import { Slot } from 'vue';
+
+export interface DialogSelectTreeProps
+    extends Omit<TreeProps, 'type' | 'filter'> {
+    fetchTree?: (
+        type: 'group' | 'category',
+        params?: QueryParams,
+    ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+    params?: QueryParams;
+    visible?: boolean;
+    type?: 'group' | 'category';
+    /**
+     * Specify wether the all tree node should be auto checked once it rendered.
+     * @default false
+     */
+    autoSelectAll?: boolean;
+    header?: string;
+    subHeader?: string;
+    selectionMode?: 'single' | 'checkbox';
+    /**
+     * Current behavior is preventing select if there is no node selected.
+     *
+     * @default true
+     */
+    allowEmptySelection?: boolean;
+    /**
+     * The previously selected tree key to be displayed again.
+     */
+    keys?: number[];
+    /**
+     * The lists to be displayed in the dialog.
+     */
+    lists?: (string | object)[];
+    /**
+     * The label of the list if your list item is an object.
+     * Choose a property from the item to be displayed on the list.
+     */
+    listLabel?: string;
+    /**
+     * Disable node 'All' selection
+     */
+    disableNodeAll?: boolean;
+    /**
+     * @deprecated
+     */
+    exactDisableKey?: number;
+    /**
+     * A list of node keys that should be disabled along with their children.
+     */
+    disableKeys?: number[];
+    /**
+     * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
+     */
+    exactDisableKeys?: number[];
+    /**
+     * Defines the tree is readonly and disabled.
+     */
+    readonly?: boolean;
+    /**
+     * Defines the group tree to showing disposable groups.
+     */
+    showDisposableGroups?: boolean;
+    /**
+     * Defines the tree to be flattened and shows disposable only
+     */
+    flattenDisposableNode?: boolean;
+    /**
+     * Defines the group tree to disable excluded keys
+     */
+    excludedKeys?: number[];
+    /**
+     * Render hidden dialog to trigger fetch tree
+     */
+    hidden?: boolean;
+
+    propagateSelection?: boolean;
+}
+
+export type TreeSelectPayload = {
+    keys: TreeSelectionKeys | undefined;
+    selectedNodes: TreeNode[] | undefined;
+    singleNode: TreeNode | undefined;
+};
+
+export type DialogSelectTreeEmits = {
+    select: [keys?: TreeSelectPayload];
+    hide: [];
+};
+
+export interface DialogSelectTreeSlots {
+    header: Slot<{
+        dialogHeader: string;
+        subHeader?: string;
+        lists?: (string | object)[];
+        listLabel?: string;
+        isLoading: boolean;
+        filter: string;
+        updateFilter: (newFilter?: string) => void; // Hooks to update internal state filter
+    }>;
+
+    /**
+     * Slot to customize tree node item
+     */
+    treenode: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;
+
+    footer: Slot;
+}
+
+/**
+ * **TSVue v2 - DialogSelectTree**
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare class DialogSelectTree extends ClassComponent<
+    DialogSelectTreeProps,
+    DialogSelectTreeSlots,
+    DialogSelectTreeEmits
+> {
+    treeComponent: TreeInstance;
+}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        DialogSelectTree: GlobalComponentConstructor<DialogSelectTree>;
+    }
+}
+
+export default DialogSelectTree;