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

package/components/form/Form.vue.d.ts

@@ -0,0 +1,316 @@
+import {
+    FieldContext,
+    FieldState,
+    GenericObject,
+    MaybeArray,
+} from 'vee-validate';
+import { Ref, Slot } from 'vue';
+import {
+    ClassComponent,
+    GlobalComponentConstructor,
+    Nullable,
+    HintedString,
+} from '../ts-helpers';
+
+export type Condition =
+    | 'empty'
+    | 'exceed'
+    | 'invalidFormat'
+    | 'exist'
+    | 'mismatch';
+
+export type CustomValidation<T extends Partial<Condition> = Condition> =
+    Partial<Record<T, string>>;
+
+type FieldValue =
+    | Nullable<string>
+    | Nullable<number>
+    | string
+    | string[]
+    | number
+    | number[]
+    | boolean
+    | undefined
+    | null
+    | object;
+
+export type FieldValidation<T = FieldValue | undefined> =
+    | {
+          value: T;
+          errorMessage?: Ref<string | undefined>;
+          setErrors?: (errors?: string | string[]) => void;
+          handleReset?: () => void;
+          validate?: () => void;
+          setValue?: (value: any, shouldValidate?: boolean) => void;
+      }
+    | (Omit<FieldContext, 'value'> & {
+          value: T;
+      });
+
+export type FormValue =
+    | string
+    | boolean
+    | number
+    | File
+    | GenericObject
+    | MaybeArray<any>;
+
+/**
+ * Generic form payload, able to receive types from outside
+ */
+export type FormPayload<FormValuesType = Record<string, FormValue>> = {
+    stayAfterSubmit: boolean;
+    formValues: FormValuesType;
+};
+
+/**
+ * Props for Form component
+ */
+export interface FormProps {
+    /**
+     * The template for form buttons.
+     */
+    buttonsTemplate?: ('cancel' | 'clear' | 'save' | 'submit')[];
+
+    /**
+     * Conditionally disable submit button.
+     */
+    disableSubmit?: boolean;
+
+    /**
+     * Custom button cancel label.
+     */
+    cancelBtnLabel?: string;
+
+    /**
+     * Custom button clear label.
+     */
+    clearBtnLabel?: string;
+
+    /**
+     * The number of columns per row.
+     * @default 1;
+     */
+    columnPerRow?: number;
+
+    /**
+     * Determines whether form footer should be hidden or not
+     */
+    hideFooter?: boolean;
+
+    /**
+     * Determines if the stay checkbox should be hidden.
+     */
+    hideStayCheckbox?: boolean;
+
+    /**
+     * Invalid form state.
+     */
+    invalid?: boolean;
+
+    /**
+     * Prevent form resets after submitted. Default behaviour is form resetted after submit.
+     *
+     * @default true
+     */
+    resetAfterSubmit?: boolean;
+
+    /**
+     * Custom button save label.
+     */
+    saveBtnLabel?: string;
+
+    /**
+     * Custom button submit label.
+     */
+    submitBtnLabel?: string;
+
+    /**
+     * Custom label for stay checkbox.
+     */
+    stayCheckboxLabel?: string;
+
+    /**
+     * Custom submit form validator message.
+     */
+    validatorMessage?: string;
+
+    /**
+     * Determine whether button template "Save" should also behave like "Submit" (use validations)
+     *
+     * @default false
+     */
+    validateOnSave?: boolean;
+
+    /**
+     * Defines the style of the cancel button.
+     */
+    cancelBtnSeverity?: HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+    >;
+
+    /**
+     * Defines the style of the submit button.
+     */
+    saveBtnSeverity?: HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+    >;
+
+    /**
+     * Defines the style of the submit button.
+     */
+    submitBtnSeverity?: HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+    >;
+}
+
+/**
+ * Slots for Form component
+ */
+export interface FormSlots {
+    /**
+     * The fields slot for the form. Here is where you can put your form fields.
+     */
+    fields: Slot<{ formValues: GenericObject; key?: number }>;
+}
+
+/**
+ * Emits for Form component
+ */
+export type FormEmits = {
+    /**
+     * Emitted when button template `Cancel` clicked (doesn't matter its label)
+     */
+    cancel: [];
+
+    /**
+     * Emitted when button template `Clear` clicked (doesn't matter its label)
+     */
+    clear: [];
+
+    /**
+     * Emitted when button template `Save` clicked (doesn't matter its label)
+     */
+    save: [values: FormPayload];
+
+    /**
+     * Emitted when button template `Submit` clicked (doesn't matter its label)
+     */
+    submit: [values: FormPayload];
+};
+
+/**
+ * **WangsVue - Form**
+ *
+ * _Form is a component for creating forms with 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 Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
+    /**
+     * Exposed errors of form
+     */
+    errors: Partial<Record<string, string>>;
+
+    /**
+     * The ref of form element.
+     */
+    formElement: HTMLFormElement;
+
+    /**
+     * Whether to show validator or not
+     */
+    showValidator: boolean;
+
+    /**
+     * Whether to keep the dialog remains visible or not after submit.
+     */
+    stayAfterSubmit: boolean;
+
+    /**
+     * Exposed function to clears the form fields.
+     */
+    clearField: () => void;
+
+    /**
+     * Exposed function to clears the specific field.
+     */
+    resetField: (field: string, state?: Partial<FieldState>) => void;
+
+    /**
+     * Exposed function that handle submit inside form component
+     */
+    submit: (e?: Event | undefined) => Promise<void | undefined>;
+
+    /**
+     * Callback invoked on Button Submit clicked
+     */
+    onSubmitClicked: () => void;
+
+    /**
+     * Callback invoked on Button Save clicked
+     */
+    onSaveClicked: () => void;
+
+    /**
+     * Exposed function to set the outer fields wrapper height.
+     */
+    setOuterFieldsWrapperHeight: () => void;
+
+    /**
+     * Set the form values.
+     */
+    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;
+
+    /**
+     * The form values
+     */
+    values: GenericObject;
+}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Form: GlobalComponentConstructor<Form>;
+    }
+}
+
+export default Form;

package/components/icon/Icon.vue.d.ts

@@ -0,0 +1,256 @@
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type WangsIconseverities =
+    | 'danger'
+    | 'info'
+    | 'warning'
+    | 'primary'
+    | 'success'
+    | 'secondary';
+
+/**
+ * List of all available icons.
+ */
+export type WangsIcons =
+    | 'add'
+    | 'admin-line'
+    | 'arrow-down'
+    | 'arrow-down-fill'
+    | 'arrow-drop-down'
+    | 'arrow-go-back'
+    | 'arrow-up-s'
+    | 'arrow-up-down'
+    | 'arrow-left'
+    | 'arrow-left-double'
+    | 'arrow-left-right'
+    | 'arrow-right'
+    | 'arrow-right-circle-line'
+    | 'arrow-right-double'
+    | 'arrow-right-fill'
+    | 'asset-view'
+    | 'asset'
+    | 'assignment'
+    | 'attachment-2'
+    | 'audit'
+    | 'barcode'
+    | 'barricade-line'
+    | 'bell'
+    | 'bell-alert'
+    | 'borrow'
+    | 'building'
+    | 'building-2'
+    | 'building-4'
+    | 'calculator'
+    | 'calendar'
+    | 'calendar-event'
+    | 'calendar-todo'
+    | 'chat'
+    | 'chat-check'
+    | 'change-tag'
+    | 'check'
+    | 'checkout'
+    | 'check-double-fill'
+    | 'checkbox-circle'
+    | 'checkbox-circle-fill'
+    | 'checkbox-blank-circle'
+    | 'checkbox-blank-circle-fill'
+    | 'checkbox-multiple'
+    | 'close'
+    | 'close-circle'
+    | 'close-circle-fill'
+    | 'cloud-line'
+    | 'coins'
+    | 'completion'
+    | 'dashboard'
+    | 'database'
+    | 'delete-back'
+    | 'delete-bin'
+    | 'delete-bin-7'
+    | 'device'
+    | 'disposal'
+    | 'download'
+    | 'dropbox'
+    | 'dragable-menu'
+    | 'edit'
+    | 'ellipsis-h'
+    | 'emotion-happy-fill'
+    | 'emotion-unhappy-fill'
+    | 'error'
+    | 'error-fill'
+    | 'exchange'
+    | 'expired'
+    | 'extension-borrow'
+    | 'eye'
+    | 'eye-off'
+    | 'flag'
+    | 'file-add'
+    | 'file-copy'
+    | 'file-copy-2-line'
+    | 'file-edit'
+    | 'file-history'
+    | 'file-history-fill'
+    | 'file-info'
+    | 'files'
+    | 'file-lines'
+    | 'file-list-2'
+    | 'file-list'
+    | 'file-settings'
+    | 'file-shield-line'
+    | 'file-shield-2'
+    | 'file-up'
+    | 'file-user'
+    | 'filter-fill'
+    | 'filter'
+    | 'folder'
+    | 'folder-add-line'
+    | 'group'
+    | 'hand-coin'
+    | 'handheld'
+    | 'history'
+    | 'image-add'
+    | 'indeterminate-circle-fill'
+    | 'info'
+    | 'information-line'
+    | 'infrared-thermometer'
+    | 'list-check'
+    | 'link'
+    | 'luggage-cart'
+    | 'csv'
+    | 'xls'
+    | 'doc'
+    | 'data'
+    | 'line-chart'
+    | 'link-unlink-m'
+    | 'list-settings'
+    | 'loader-4'
+    | 'logout-box-r'
+    | 'mail-open'
+    | 'mail-send'
+    | 'magic-line'
+    | 'map-2'
+    | 'map-pin'
+    | 'menu'
+    | 'menu-unfold'
+    | 'minus'
+    | 'money-cny-box'
+    | 'money-dollar-circle'
+    | 'more'
+    | 'move-to'
+    | 'nfc'
+    | 'node-tree'
+    | 'note'
+    | 'notification'
+    | 'pdf'
+    | 'pair-tag'
+    | 'pencil'
+    | 'phone'
+    | 'printer'
+    | 'printer-cloud'
+    | 'price-tag-3'
+    | 'profile'
+    | 'qr'
+    | 'qr-scan'
+    | 'reception'
+    | 'refresh'
+    | 'replace-tag'
+    | 'report-tag'
+    | 'repair-ticketing'
+    | 'rfid'
+    | 'round-keyboard-arrow-left'
+    | 'round-keyboard-arrow-right'
+    | 'round-keyboard-double-arrow-left'
+    | 'round-keyboard-double-arrow-right'
+    | 'search'
+    | 'search-line'
+    | 'search-eye'
+    | 'send-plane-line'
+    | 'settings'
+    | 'shopping-cart-2'
+    | 'smartphone'
+    | 'sort-asc'
+    | 'sort-desc'
+    | 'supplier-return'
+    | 'internal-return'
+    | 'spinner'
+    | 'stack'
+    | 'star'
+    | 'store'
+    | 'subtract'
+    | 'time'
+    | 'ticket'
+    | 'tools'
+    | 'tracking'
+    | 'unassign'
+    | 'upload-2'
+    | 'upload-cloud-2'
+    | 'user'
+    | 'user-add'
+    | 'user-follow'
+    | 'user-received-2-line'
+    | 'user-search'
+    | 'user-settings'
+    | 'user-shared-2-line'
+    | 'user-star'
+    | 'user-unfollow'
+    | 'verification'
+    | 'team'
+    | 'mail'
+    | 'timer'
+    | 'format-clear'
+    | 'code-line'
+    | 'link-m'
+    | 'list-ordered'
+    | 'bold'
+    | 'italic'
+    | 'underline'
+    | 'list-unordered'
+    | 'external-link'
+    | 'whatsapp'
+    | 'chat-1-line'
+    | 'chat-1-fill'
+    | 'attachment-2'
+    | 'save'
+    | 'chat-new-line'
+    | 'code-box-line'
+    | 'file-chart-line'
+    | 'bar-chart-line'
+    | 'bug-2-line'
+    | 'run-line'
+    | 'user-unfollow-line'
+    | 'archive-line'
+    | 'shield-user-line'
+    | 'emotion-happy-line'
+    | 'list-settings-line'
+    | 'timer-line'
+    | 'star-fill'
+    | 'focus-2-line'
+    | 'global-line'
+    | 'focus-3-line';
+
+export interface IconProps {
+    icon: WangsIcons | null;
+    severity?: WangsIconseverities;
+    /**
+     * Show info on hover.
+     */
+    info?: string;
+    /**
+     * Set the position of tooltip.
+     */
+    tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    class?: any;
+}
+
+/**
+ * Display icon with svg backrgounds
+ */
+declare class Icon extends ClassComponent<IconProps, unknown, unknown> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Icon: GlobalComponentConstructor<Icon>;
+    }
+}
+
+export default Icon;