@fewangsit/wangsvue-fats 1.0.0-alpha.31 → 1.0.0-alpha.32

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

@@ -0,0 +1,229 @@
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface ImageCompressorLocaleConfig {
+  cropDialogHeader: string;
+  /**
+   * @example 'Gunakan Ctrl + Scroll untuk perbesar atau perkecil gambar'
+   */
+  cropperCtrlScrollInfo: string;
+  /**
+   * @example 'Gunakan dua jari untuk untuk perbesar atau perkecil gambar'
+   */
+  cropperTwoFingerInfo: string;
+
+  /**
+   * @example 'Maks. 1 MB'
+   */
+  maxSizeRequirement: string;
+
+  /**
+   * @example 'Hanya mendukung format gambar'
+   */
+  imageTypeRequirement: string;
+
+  cancelCropLabel: string;
+  changeImageLabel: string;
+  applyCropLabel: string;
+}
+
+export type Image = {
+  src: string | null;
+  type: string | null;
+};
+
+export type ImageCompressorPayload = {
+  canvas: HTMLCanvasElement | undefined;
+  compressed: {
+    blob: string | Blob;
+    base64: string;
+    fileName: string;
+    file: File;
+    size: string;
+    type: 'image/webp' | 'image/jpeg' | 'image/jpg';
+  };
+  message?: string;
+};
+
+export interface ImageCompressorProps {
+  /**
+   * Specify the user initial name for the Image Placeholder
+   *
+   * max-length: 3
+   */
+  initialName?: string;
+  /**
+   * Specify the input type, wether single ro multiple image input.
+   *
+   * @default false - single input.
+   */
+  multiple?: boolean;
+  /**
+   * The default image index 0 / 1
+   */
+  defaultImage?: number;
+  /**
+   * Disable the image input.
+   *
+   * @todo add disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * Display a compressed Blob image or a string objectURL of a Blob when mounted.
+   */
+  compressedBlob?: string | Blob | (string | Blob)[];
+  /**
+   * Display an image with the URL instead.
+   */
+  imagePreviewUrl?: string | string[];
+  /**
+   * Specify the size image input and preview size.
+   *
+   * - small: 30px
+   * - medium: 80px
+   * - big: 125*125 px
+   *
+   * @todo Add small size. Currently only support big size.
+   * @default 'big'
+   */
+  imagePreviewSize?: 'small' | 'medium' | 'big';
+  /**
+   * Specify the rounded level.
+   *
+   * If true, the image will be full rounded.
+   *
+   * @default 'false'
+   */
+  rounded?: boolean;
+  /**
+   * Specify whether the image able to be deleted or not (in case image only able to added and edited)
+   *
+   * @default true
+   */
+  useDeleteButton?: boolean;
+  /**
+   * Specify whether the image input will be used as field within Form validation.
+   *
+   */
+  useValidator?: boolean;
+  /**
+   * Specify if the field is required or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Set the invalid state and display the custom validator message.
+   */
+  invalid?: boolean;
+  /**
+   * Set custom validation message.
+   */
+  validatorMessage?: string | CustomValidation;
+  /**
+   * The field label.
+   *
+   * @default undefined - if props.useValidator not presents.
+   * @default 'Photo' - if props.useValidator presents.
+   */
+  label?: string;
+  /**
+   * Specify the field name to make the input available on form validation payload.
+   *
+   * @default 'imageInput'
+   */
+  fieldName?: string;
+  /**
+   * Display field information as tooltip.
+   */
+  fieldInfo?: string;
+  /**
+   * Show the image requirement info section.
+   *
+   * @default true
+   */
+  showInfo?: boolean;
+  /**
+   * Change the requirements of the photo
+   *
+   * @default undefined - will use maxSizeRequirement, imageTypeRequirement from LocaleConfig
+   */
+  customRequirements?: string[];
+  /**
+   * Show dialog confirmation before delete the image.
+   */
+  confirmOnDelete?: boolean;
+  /**
+   * On clicking delete button, emit the delete function instead of deleting the image.
+   * Useful when showing custom dialog confirmation.
+   */
+  emitDeleteFn?: boolean;
+  /**
+   * Show the validation message section.
+   *
+   * @default true
+   */
+  showValidatorMessage?: boolean;
+  /**
+   * Specify the file type for the uploaded image result.
+   *
+   * @default 'webp'
+   */
+  fileType?: 'webp' | 'jpeg' | 'jpg';
+}
+
+export interface ImageCompressorSlots {
+  [key: string]: unknown;
+}
+
+export type ImageCompressorEmits = {
+  /**
+   * On apply the image cropper.
+   */
+  'apply': [value: ImageCompressorPayload];
+  /**
+   * On apply image from props.
+   */
+  'applyProp': [];
+  'update:defaultImage': [index?: number];
+  /**
+   * On delete button clicked.
+   *
+   * When confirmOnDelete / emitDelete is true, this emit will be emitted with a delete function.
+   * You need to call the function inside your own delete funcition to clear the image.
+   *
+   * @param deleteFn - the function delete
+   * @param index - the index of image to be deleted
+   */
+  'delete': [deleteFn?: (index?: number) => void, index?: number];
+};
+
+/**
+ * **WangsVue - ImageCompressor**
+ *
+ * _Handle image input and compression._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class ImageCompressor extends ClassComponent<
+  ImageCompressorProps,
+  ImageCompressorSlots,
+  ImageCompressorEmits
+> {
+  /**
+   * Exposed function to assign image from props.
+   *
+   * @param isDelete
+   */
+  assignPreviewImagesFromProp(isDelete?: boolean): Promise<void>;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    ImageCompressor: GlobalComponentConstructor<ImageCompressor>;
+  }
+}
+
+export default ImageCompressor;

package/components/index.d.ts

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

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;