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

package/components/inputtext/InputText.vue.d.ts

@@ -0,0 +1,352 @@
+/**
+ *
+ * InputText renders a text field to enter data.
+ *
+ * [Live Demo](https://www.WangsVue.org/inputtext/)
+ *
+ * @module inputtext
+ *
+ */
+import { InputHTMLAttributes, Slot } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { ClassComponent, Nullable } from '../ts-helpers';
+import { CustomValidation } from '../form/Form.vue.d';
+export declare type InputTextPassThroughOptionType<T = any> =
+    | InputTextPassThroughAttributes
+    | ((
+          options: InputTextPassThroughMethodOptions<T>,
+      ) => InputTextPassThroughAttributes | string)
+    | string
+    | null
+    | undefined;
+
+export interface InputTextLocaleConfig {
+    /**
+     * @example 'Email format is incorrect'
+     */
+    emailFormatInvalidText?: string;
+
+    /**
+     * @example 'URL format is incorrect'
+     */
+    urlFormatInvalidText?: string;
+
+    /**
+     * @example '{label} sudah ada' - label will be replaced with props.label
+     */
+    alreadyExistInvalidText?: string;
+
+    /**
+     * @example '{label} must not be empty' - label will be replaced with props.label
+     */
+    emptyInvalidText?: string;
+
+    /**
+     * @example 'Max. {maxLength} characters' - maxLength will be replaced with props.maxLength
+     */
+    exceedMaxLengthInvalidText?: string;
+
+    /**
+     * @example 'Cannot include any special characters'
+     */
+    includeSpecialCharsInvalidText?: string;
+
+    /**
+     * @example 'Tulis {label}' - label can be ommited, and if exist will be replaced with props.label
+     */
+    defaultPlaceholder?: string;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputTextPassThroughMethodOptions<T = any> {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+
+    /**
+     * Defines valid properties.
+     */
+    props: InputTextProps;
+
+    /**
+     * Defines current options.
+     */
+    context: InputTextContext;
+
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
+
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputTextProps.pt}
+ */
+export interface InputTextPassThroughOptions<T = any> {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputTextPassThroughOptionType<T>;
+
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputTextPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current options in InputText component.
+ */
+export interface InputTextContext {
+    /**
+     * Current filled state of the component as a boolean.
+     * @defaultValue false
+     */
+    filled: boolean;
+
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in InputText component.
+ */
+export interface InputTextProps extends /* @vue-ignore */ InputHTMLAttributes {
+    allowedCharacters?: RegExp;
+
+    /**
+     * Determine whether inputted text should be automatically converted to uppercase or not.
+     *
+     * @default false
+     */
+    autoUppercase?: boolean;
+
+    /**
+     * String modelValue of the input.
+     */
+    modelValue?: Nullable<string>;
+
+    /**
+     * Sets the initial value of the field.
+     * This will only available with option 'useValidator'.
+     *
+     * In usecase like edit form, you need to display the previous inputted value.
+     */
+    value?: string;
+
+    /**
+     * Exisitng values to be checkeed with validation 'exist' - check the validatorMessage props
+     *
+     * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
+     */
+    existingValues?: string[];
+
+    /**
+     * Check avaialability of the value.
+     *
+     * @returns {boolean} - Return true if the value is available, otherwise false.
+     */
+    checkAvailability?: (value: string) => Promise<boolean> | boolean;
+
+    /**
+     * The maximun character length allowed.
+     *
+     * @default 30 - for inputText;
+     * @default unlimited - for textarea and inputurl;
+     * @default 60 - for InputEmail
+     *
+     * Pass Infinity to allow unlimited length.
+     * @example `:max-length="Infinity"`
+     */
+    maxLength?: number;
+
+    /**
+     * The input label. Tell the user what input is this.
+     */
+    label?: string;
+
+    /**
+     * Wether the input should be validated with vee-validator or not.
+     * If you use this component within form input, you need to set this props as true.
+     */
+    useValidator?: boolean;
+
+    /**
+     * This prop is required if you use this component in a form input.
+     * Specify the unique field name, match with your needs for API request.
+     *
+     * @default 'textInput'
+     */
+    fieldName?: string;
+
+    /**
+     * Wether this input field is required or not.
+     */
+    mandatory?: boolean;
+
+    /**
+     * Invalid input state.
+     */
+    invalid?: boolean;
+
+    /**
+     * Set manual invalid input container state.
+     *
+     * @todo: review the usage of this props
+     */
+    manualInvalidContainer?: boolean;
+
+    /**
+     * Set custom validator message.
+     * Will be show if invalid="true" or in some conditions. {@link Condition}
+     *
+     * @example: 'This field is required'
+     * @example: { empty: 'This field is required', invalidFormat: 'Email format incorrect' }
+     */
+    validatorMessage?:
+        | string
+        | CustomValidation<'empty' | 'exceed' | 'invalidFormat' | 'exist'>;
+
+    /**
+     * Classes for validator message in input field.
+     */
+    validatorMessageClass?: string;
+
+    /**
+     * Specify the input placeholder.
+     *
+     * @default 'Enter {label}' or 'Enter {type}'
+     */
+    placeholder?: string;
+
+    /**
+     * Specify the validation type. Wether 'email' or 'text' validation.
+     */
+    type?: 'email' | 'text' | 'url' | 'initialname' | 'repositoryname';
+
+    /**
+     * Disabled the input.
+     */
+    disabled?: boolean;
+
+    /**
+     * Show information to user about the field.
+     */
+    fieldInfo?: string;
+
+    /**
+     * Specify classes for input.
+     */
+    inputClass?: string;
+
+    /**
+     * Specify classes for input container.
+     */
+    inputContainerClass?: string;
+
+    /**
+     * Specify classes for label.
+     */
+    labelClass?: string;
+
+    /**
+     * Auto blur while input value has reached the max length.
+     *
+     * @deprecated This will be removed in the next major update. Use {@link preventInputOnMaxLength} instead.
+     */
+    blurOnReachMaxLength?: boolean;
+
+    /**
+     * Prevent input once the max length is reached, allowing only backspace.
+     *
+     * @default false
+     */
+    preventInputOnMaxLength?: boolean;
+
+    /**
+     * Validate the input on blur event.
+     *
+     * @default false - on input event
+     */
+    validateOnBlur?: boolean;
+
+    /**
+     * For Input URL, whether validate the protocol http/https
+     *
+     * @default true
+     */
+    useProtocol?: boolean;
+
+    /**
+     * Allow user to input special characters
+     *
+     * @default true
+     */
+    allowSpecialCharacters?: boolean;
+
+    /**
+     * Wether the input should be wrapped with InputGroup Component or not.
+     * Currently used for InputPhoneNumber.
+     */
+    useInputGroup?: boolean;
+
+    /**
+     * Unique id for input number element
+     */
+    inputId?: string;
+}
+
+/**
+ * Defines valid emits in InputText component.
+ */
+export type InputTextEmits = {
+    /**
+     * Emitted when the value changes.
+     * @param {string} value - New value.
+     */
+    'update:modelValue': [value: string | undefined];
+    'blur': [payload?: Nullable<string>];
+    'input': [payload?: Nullable<string>];
+};
+
+export type InputTextSlots = {
+    'addon-left': Slot;
+    'addon-right': Slot;
+};
+
+/**
+ * **WangsVue - InputText**
+ *
+ * _InputText renders a text field to enter data._
+ *
+ * --- ---
+ *
+ * @group Component
+ */
+declare class InputText extends ClassComponent<
+    InputTextProps,
+    InputTextSlots,
+    InputTextEmits
+> {}
+
+export default InputText;

package/components/inputurl/InputURL.vue.d.ts

@@ -0,0 +1,36 @@
+import { Slot } from 'vue';
+import { ClassComponent } from '../ts-helpers';
+import { InputTextEmits, InputTextProps } from '../inputtext/InputText.vue.d';
+
+/**
+ * InputURL component props
+ */
+export type InputURLProps = Omit<InputTextProps, 'type'>;
+
+/**
+ * InputURL component emits
+ */
+export type InputURLEmits = InputTextEmits;
+
+export type InputURLSlots = {
+    'addon-left': Slot;
+    'addon-right': Slot;
+};
+
+/**
+ * **WangsVue - InputURL**
+ *
+ * _Handle input url with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare class InputURL extends ClassComponent<
+    InputURLProps,
+    InputURLSlots,
+    InputURLEmits
+> {}
+
+export default InputURL;

package/components/invisiblefield/InvisibleField.vue.d.ts

@@ -0,0 +1,32 @@
+import { ClassComponent, Nullable } from '../ts-helpers';
+
+export type FieldValue =
+    | Nullable<string>
+    | Nullable<number>
+    | string
+    | string[]
+    | number
+    | number[]
+    | boolean
+    | undefined
+    | null
+    | object;
+
+export interface InvisibleFieldProps {
+    value?: FieldValue;
+    fieldName?: string;
+}
+
+declare class InvisibleField extends ClassComponent<
+    InvisibleFieldProps,
+    unknown,
+    unknown
+> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        InvisibleField: typeof InvisibleField;
+    }
+}
+
+export default InvisibleField;

package/components/litedropdown/LiteDropdown.vue.d.ts

@@ -0,0 +1,96 @@
+import { Option, OptionValue } from '../dropdown/Dropdown.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { DropdownChangeEvent } from 'primevue/dropdown';
+
+/**
+ * Lite dropdown component props
+ */
+export interface LiteDropdownProps {
+    modelValue: OptionValue | undefined;
+    options: Option[] | undefined;
+    /**
+     * Specify the property name of option to be used as label.
+     *
+     * @default undefined - the label will be sets to the option itself.
+     */
+    optionLabel: string;
+    /**
+     * Specify the property name of option to be used as value.
+     *
+     * @default undefined - the value will be sets to the option itself.
+     */
+    optionValue: string;
+    /**
+     * Determines if the field is mandatory
+     */
+    mandatory?: boolean;
+    /**
+     * Default text to display when no option is selected.
+     *
+     * @default `Pilih data`
+     */
+    placeholder?: string;
+    /**
+     * Whether the dropdown is in loading state.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * Set disabled state for input dropdown.
+     */
+    disabled?: boolean;
+    /**
+     * Wether show the Dropdown option search or not.
+     *
+     * @default true,
+     */
+    filter?: boolean;
+    /**
+     * The filter input Placeholder
+     *
+     * @default 'Cari'
+     */
+    filterPlaceholder?: string;
+}
+
+/**
+ * Lite dropdown component emits
+ */
+export type LiteDropdownEmits = {
+    /**
+     * Emits when an option selected.
+     */
+    'update:modelValue': [value: OptionValue | undefined];
+    /**
+     * Emits when overlay shown.
+     */
+    'show': [];
+    /**
+     * Emits when there is a change on the dropdown value.
+     */
+    'change': [value: DropdownChangeEvent];
+};
+
+/**
+ * **WangsVue - LiteDropwdown**
+ *
+ * _LiteDropdown, a lite version of the Dropdown component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class LiteDropdown extends ClassComponent<
+    LiteDropdownProps,
+    unknown,
+    LiteDropdownEmits
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Dropdown: GlobalComponentConstructor<LiteDropdown>;
+    }
+}
+
+export default LiteDropdown;

package/components/loading/Loading.vue.d.ts

@@ -0,0 +1,47 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * Attributes for Loading pass-through customization.
+ */
+export interface LoadingPresetAttributes {
+    class?: any;
+    style?: any;
+    [key: string]: any;
+}
+
+export interface LoadingPresetOptions {
+    root: LoadingPresetAttributes;
+    animation: LoadingPresetAttributes;
+}
+
+/**
+ * **TSVue - Loading**
+ *
+ * _Tag Samurai Loading Overlay Animation._
+ *
+ * #### Example
+ *
+ * Script:
+ * ```ts
+ * import { Loading, useLoadingStore } from 'wangsvue';
+ *
+ * const { setLoading } = useLoadingStore();
+ *
+ * onMounted(() => {
+ *    setLoading(true);
+ * });
+ * ```
+ * ---
+ * Template:
+ * ```html
+ * <Loading />
+ * ```
+ *
+ * --- ---
+ * ![TSVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const Loading: DefineComponent;
+
+export default Loading;

package/components/loading/store/loading.store.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+export interface LoadingStore {
+    loading: Ref<boolean>;
+    message: Ref<string | undefined>;
+    setLoading: (state: boolean, message?: string) => void;
+}
+declare const useLoadingStore: () => LoadingStore;
+export default useLoadingStore;