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

package/components/imagecompressor/ImageInputInfo.vue.d.ts

@@ -0,0 +1,55 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<
+    __VLS_TypePropsToOption<{
+        customRequirements?: string[];
+        showInfo: boolean;
+        showAddButton?: boolean;
+    }>,
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {
+        addPhoto: () => void;
+    },
+    string,
+    import('vue').PublicProps,
+    Readonly<
+        import('vue').ExtractPropTypes<
+            __VLS_TypePropsToOption<{
+                customRequirements?: string[];
+                showInfo: boolean;
+                showAddButton?: boolean;
+            }>
+        >
+    > & {
+        onAddPhoto?: () => any;
+    },
+    {},
+    {}
+>;
+declare const _default: __VLS_WithTemplateSlots<
+    typeof __VLS_component,
+    ReturnType<typeof __VLS_template>
+>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+          };
+};

package/components/index.d.ts

@@ -0,0 +1,58 @@
+export { default as ApproverInfo } from './approverinfo/ApproverInfo.vue.d';
+export { default as Badge } from './badge/Badge.vue.d';
+export { default as BadgeGroup } from './badgegroup/BadgeGroup.vue.d';
+export { default as BaseTree } from './basetree/BaseTree.vue.d';
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.vue.d';
+export { default as Button } from './button/Button.vue.d';
+export { default as ButtonBulkAction } from './buttonbulkaction/ButtonBulkAction.vue.d';
+export { default as ButtonCopy } from './buttoncopy/ButtonCopy.vue.d';
+export { default as ButtonDownload } from './buttondownload/ButtonDownload.vue.d';
+export { default as ButtonFilter } from './buttonfilter/ButtonFilter.vue.d';
+export { default as ButtonRadio } from './buttonradio/ButtonRadio.vue.d';
+export { default as ButtonScan } from './buttonscan/ButtonScan.vue.d';
+export { default as ButtonSearch } from './buttonsearch/ButtonSearch.vue.d';
+export { default as ButtonSelectTree } from './buttonselecttree/ButtonSelectTree.vue.d';
+export { default as ButtonSync } from './buttonsync/ButtonSync.vue.d';
+export { default as ButtonToggle } from './buttontoggle/ButtonToggle.vue.d';
+export { default as Calendar } from './calendar/Calendar.vue.d';
+export { default as Card } from './card/Card.vue.d';
+export { default as Checkbox } from './checkbox/Checkbox.vue.d';
+export { default as DataTable } from './datatable/DataTable.vue.d';
+export { default as Dialog } from './dialog/Dialog.vue.d';
+export { default as DialogConfirm } from './dialogconfirm/DialogConfirm.vue.d';
+export { default as DialogForm } from './dialogform/DialogForm.vue.d';
+export { default as DialogSelectTree } from './dialogselecttree/DialogSelectTree.vue.d';
+export { default as Dropdown } from './dropdown/Dropdown.vue.d';
+export { default as FileUpload } from './fileupload/FileUpload.vue.d';
+export { default as Form } from './form/Form.vue.d';
+export { default as Icon } from './icon/Icon.vue.d';
+export { default as Image } from './image/Image.vue.d';
+export { default as ImageCompressor } from './imagecompressor/ImageCompressor.vue.d';
+export { default as InputBadge } from './inputbadge/InputBadge.vue.d';
+export { default as InputCurrency } from './inputcurrency/InputCurrency.vue.d';
+export { default as InputEmail } from './inputemail/InputEmail.vue.d';
+export { default as InputNumber } from './inputnumber/InputNumber.vue.d';
+export { default as InputPassword } from './inputpassword/InputPassword.vue.d';
+export { default as InputPhoneNumber } from './inputphonenumber/InputPhoneNumber.vue.d';
+export { default as InputRangeNumber } from './inputrangenumber/InputRangeNumber.vue.d';
+export { default as InputText } from './inputtext/InputText.vue.d';
+export { default as InputURL } from './inputurl/InputURL.vue.d';
+export { default as InvisibleField } from './invisiblefield/InvisibleField.vue.d';
+export { default as LiteDropdown } from './litedropdown/LiteDropdown.vue.d';
+export { default as Loading } from './loading/Loading.vue.d';
+export { default as Menu } from './menu/Menu.vue.d';
+export { default as MultiSelect } from './multiselect/MultiSelect.vue.d';
+export { default as OverlayPanel } from './overlaypanel/OverlayPanel.vue.d';
+export { default as TabMenu } from './tabmenu/TabMenu.vue.d';
+export { default as Textarea } from './textarea/Textarea.vue.d';
+export { default as Timeline } from './timeline/Timeline.vue.d';
+export { default as Toast } from './toast/Toast.vue.d';
+export { default as ToggleSwitch } from './toggleswitch/ToggleSwitch.vue.d';
+export { default as Tree } from './tree/Tree.vue.d';
+export { default as UserName } from './username/UserName.vue.d';
+
+export { default as AssetInfo } from './assetinfo/AssetInfo.vue.d';
+export { default as ButtonViewLog } from './buttonviewlog/ButtonViewLog.vue.d';
+export { default as UserWithIcon } from './userwithicon/UserWithIcon.vue.d';
+export { default as FilterContainer } from './filtercontainer/FilterContainer.vue.d';
+export { default as InputSearch } from './inputsearch/InputSearch.vue.d';

package/components/inputbadge/InputBadge.vue.d.ts

@@ -0,0 +1,122 @@
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * InputBadge component props
+ */
+export interface InputBadgeProps {
+    /**
+     * The type of input, whether input text or input email
+     *
+     * @default text
+     */
+    type?: 'text' | 'email';
+    /**
+     * The model value. Used for input without validation.
+     */
+    modelValue?: string[];
+    /**
+     * Sets the initial value of the field.
+     * This will only available with option 'useValidator'.
+     *
+     * In use case like edit form, you need to display the previous inputted value.
+     */
+    initialValue?: string[];
+    /**
+     * Determines if the field uses a validator
+     */
+    useValidator?: boolean;
+    /**
+     * 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[];
+    /**
+     * Determines if the field is mandatory
+     */
+    mandatory?: boolean;
+    /**
+     * Set custom validator message.
+     */
+    validatorMessage?: string | CustomValidation;
+    /**
+     * Whether shows the invalid message or not.
+     * The validator message will be shown if useValidator true and the field label is specified.
+     *
+     * Sets this props to 'false' to force the validator message always hidden.
+     *
+     * @default true
+     */
+    showValidatorMessage?: boolean;
+    /**
+     * Set the invalid state.
+     *
+     * @default - If field is mandatory, the field will be considered invalid if the input is empty.
+     */
+    invalid?: 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 'inputBadge'
+     */
+    fieldName?: string;
+    /**
+     * The text input placholder.
+     *
+     * @default 'Enter value'
+     */
+    placeholder?: string;
+    /**
+     * Disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * The field input label. Tell the user what input is this.
+     */
+    label?: string;
+    /**
+     * Show information to user about the field.
+     */
+    fieldInfo?: string;
+    /**
+     * If true, deleted badges will be replaced with `null` to preserve their index position.
+     * Otherwise, the badge will be fully removed, shifting subsequent items.
+     */
+    preserveDeletedIndex?: boolean;
+}
+
+/**
+ * InputBadge component emits
+ */
+export type InputBadgeEmits = {
+    /**
+     * Emits when a new label added.
+     */
+    'update:modelValue': [value: string[] | undefined];
+};
+
+/**
+ * **WangsVue - InputBadge**
+ *
+ * _InputBadge is input text that changes it value into Badge component on Enter key pressed._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class InputBadge extends ClassComponent<
+    InputBadgeProps,
+    Record<string, unknown>,
+    InputBadgeEmits
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputBadge: GlobalComponentConstructor<InputBadge>;
+    }
+}
+
+export default InputBadge;

package/components/inputcurrency/InputCurrency.vue.d.ts

@@ -0,0 +1,170 @@
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type CurrencyFormat = {
+    name?: string;
+    label: string;
+    currency: string;
+    symbol: string;
+    locale: string;
+};
+
+export interface CurrencyValue {
+    currency: string; // Currency ISO Code
+    value?: number;
+}
+
+/**
+ * Configuration interface for locale-specific settings of the InputCurrency component.
+ */
+export interface InputCurrencyLocaleConfig {
+    /**
+     * Error message to display when the input is empty.
+     *
+     * @example '{label} must not be empty' - 'Amount must not be empty'
+     */
+    emptyInputErrorMessage?: string;
+}
+
+/**
+ * InputCurrency component props
+ */
+export interface InputCurrencyProps {
+    /**
+     * Number modelValue of the input.
+     */
+    modelValue?: CurrencyValue;
+
+    /**
+     * 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?: number;
+
+    /**
+     * The input label. Tell the user what input is this.
+     */
+    label?: string;
+
+    /**
+     * Max input number value.
+     */
+    max?: number;
+
+    /**
+     * 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 'numberInput'
+     */
+    fieldName?: string;
+
+    /**
+     * Wether this input field is required or not.
+     */
+    mandatory?: boolean;
+
+    /**
+     * Set custom validator message.
+     * It is rarely use, this component has handled the validator message.
+     *
+     * @example: '{label} is required'
+     * @example: { empty: '{label} field is required' }
+     */
+    validatorMessage?: string | CustomValidation<'empty'>;
+
+    /**
+     * Custom invalid state.
+     */
+    invalid?: boolean;
+
+    /**
+     * Specify the input placeholder.
+     *
+     * @default 'Enter {label}' or 'Enter number'
+     */
+    placeholder?: string;
+
+    /**
+     * Disabled the input.
+     */
+    disabled?: boolean;
+
+    /**
+     * Displays increment/decrement buttons.
+     */
+    showButtons?: boolean;
+
+    /**
+     * The width of input.
+     */
+    size?: 'small' | 'normal' | 'full';
+
+    /**
+     * Defines the behavior of the component.
+     * @defaultValue currency
+     */
+    mode?: 'decimal' | 'currency';
+
+    /**
+     * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
+     * @defaultValue true
+     */
+    useGrouping?: boolean;
+
+    /**
+     * Show information about the field.
+     */
+    fieldInfo?: string;
+    inputnNumberId?: string;
+}
+
+/**
+ * InputCurrency component emits
+ */
+export type InputCurrencyEmits = {
+    /**
+     * Emits when the input has loosen focus.
+     * The model value is the valid value from given min and max number.
+     *
+     * If the inputted number is above max, return the max. And vice versa.
+     */
+    'update:modelValue': [payload?: CurrencyValue];
+
+    /**
+     * If you need to check validation, you can use this events.
+     */
+    'input': [payload?: number];
+};
+
+/**
+ * **WangsVue - InputCurrency**
+ *
+ * _Handle input Currency with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare class InputCurrency extends ClassComponent<
+    InputCurrencyProps,
+    unknown,
+    InputCurrencyEmits
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputCurrency: GlobalComponentConstructor<InputCurrency>;
+    }
+}
+
+export default InputCurrency;

package/components/inputcurrency/helpers/currency.helper.d.ts

@@ -0,0 +1,8 @@
+import { CurrencyFormat } from '../InputCurrency.vue.d';
+declare const getCurrency: (code?: string) => CurrencyFormat;
+declare const formatCurrency: (
+    value?: number | string | null,
+    currency?: string,
+    prefix?: boolean,
+) => string;
+export { getCurrency, formatCurrency };

package/components/inputemail/InputEmail.vue.d.ts

@@ -0,0 +1,25 @@
+import { DefineComponent } from 'vue';
+import { InputTextEmits, InputTextProps } from '../inputtext/InputText.vue.d';
+
+/**
+ * InputEmail component props
+ */
+export type InputEmailProps = Omit<InputTextProps, 'type'>;
+
+/**
+ * InputEmail component emits
+ */
+export type InputEmailEmits = InputTextEmits;
+/**
+ * **WangsVue - InputEmail**
+ *
+ * _Handle input email with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const InputEmail: DefineComponent<InputEmailProps, InputEmailEmits>;
+
+export default InputEmail;