@fewangsit/wangsvue-gsts 1.0.0-alpha.9 → 2.0.0-alpha.10

package/{components/icon/Icon.vue.d.ts → icon/index.d.ts}

@@ -1,8 +1,7 @@
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
 export type WangsIconseverities =
   | 'danger'
-  | 'info'
   | 'warning'
   | 'primary'
   | 'success'
@@ -12,26 +11,21 @@ export type WangsIconseverities =
  * 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'
+  | 'apps-2-line'
   | 'asset-view'
   | 'asset'
   | 'assignment'
   | 'attachment-2'
   | 'audit'
+  | 'bank-card-line'
   | 'barcode'
   | 'barricade-line'
   | 'bell'
@@ -41,75 +35,56 @@ export type WangsIcons =
   | '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-3'
   | 'file-list'
-  | 'file-settings'
   | 'file-shield-line'
   | 'file-shield-2'
   | 'file-up'
   | 'file-user'
   | 'filter-fill'
   | 'filter'
+  | 'fingerprint-line'
   | 'folder'
-  | 'group'
-  | 'hand-coin'
+  | 'folder-add-line'
+  | 'gate'
   | 'handheld'
-  | 'history'
-  | 'image-add'
   | 'indeterminate-circle-fill'
-  | 'info'
   | 'information-line'
   | 'infrared-thermometer'
-  | 'list-check'
   | 'link'
   | 'luggage-cart'
   | 'csv'
@@ -119,33 +94,34 @@ export type WangsIcons =
   | 'line-chart'
   | 'link-unlink-m'
   | 'list-settings'
-  | 'loader-4'
+  | 'lock-line'
   | 'logout-box-r'
   | 'mail-open'
-  | 'mail-send'
+  | 'magic-line'
   | 'map-2'
   | 'map-pin'
   | 'menu'
   | 'menu-unfold'
+  | 'mind-map'
   | 'minus'
   | 'money-cny-box'
-  | 'more'
+  | 'money-dollar-circle'
   | 'move-to'
   | 'nfc'
   | 'node-tree'
   | 'note'
   | 'notification'
+  | 'organization-chart'
   | 'pdf'
   | 'pair-tag'
-  | 'pencil'
   | 'phone'
-  | 'printer'
   | 'printer-cloud'
   | 'price-tag-3'
   | 'profile'
   | 'qr'
   | 'qr-scan'
-  | 'refresh'
+  | 'reception'
+  | 'recycle-bin'
   | 'replace-tag'
   | 'report-tag'
   | 'repair-ticketing'
@@ -154,25 +130,23 @@ export type WangsIcons =
   | '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'
+  | 'table'
   | 'time'
   | 'ticket'
   | 'tools'
   | 'tracking'
+  | 'truck-line'
   | 'unassign'
   | 'upload-2'
   | 'upload-cloud-2'
@@ -180,14 +154,10 @@ export type WangsIcons =
   | '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'
@@ -197,11 +167,8 @@ export type WangsIcons =
   | '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'
@@ -216,10 +183,63 @@ export type WangsIcons =
   | 'timer-line'
   | 'star-fill'
   | 'focus-2-line'
-  | 'focus-3-line';
+  | 'global-line'
+  | 'focus-3-line'
+  | 'add-line' // Preferred
+  | 'arrow-down-s-line' // Preferred
+  | 'arrow-drop-down-line' // Preferred
+  | 'folder-line' // Preferred
+  | 'arrow-left-double-line' // Preferred
+  | 'arrow-left-line' // Preferred
+  | 'arrow-up-down-line' // Preferred
+  | 'arrow-up-s-line' // Preferred
+  | 'calendar-line' // Preferred
+  | 'chat-1' // Preferred
+  | 'chat-3-line' // Preferred
+  | 'check-line' // Preferred
+  | 'checkbox-circle-line' // Preferred
+  | 'close-circle-line' // Preferred
+  | 'close-line' // Preferred
+  | 'delete-back-2-line' // Preferred
+  | 'delete-bin-6-line' // Preferred
+  | 'download-2-line' // Preferred
+  | 'edit-2-line' // Preferred
+  | 'error-warning-fill' // Preferred
+  | 'error-warning-line' // Preferred
+  | 'exchange-line' // Preferred
+  | 'external-link-line' // Preferred
+  | 'eye-off-line' // Preferred
+  | 'file-copy-line' // Preferred
+  | 'file-edit-line' // Preferred
+  | 'file-info-line' // Preferred
+  | 'file-list-2-line' // Preferred
+  | 'file-settings-line' // Preferred
+  | 'group-line' // Preferred
+  | 'global-line' // Preferred
+  | 'hand-coin-line' // Preferred
+  | 'history-line' // Preferred
+  | 'image-add-line' // Preferred
+  | 'list-check-2' // Preferred
+  | 'loader-4-line' // Preferred
+  | 'mail-line' // Preferred
+  | 'mail-send-line' // Preferred
+  | 'more-fill' // Preferred
+  | 'pencil-line' // Preferred
+  | 'printer-line' // Preferred
+  | 'refresh-line' // Preferred
+  | 'save-line' // Preferred
+  | 'search-2-line' // Preferred
+  | 'search-eye-line' // Preferred
+  | 'settings-4-line' // Preferred
+  | 'star-line' // Preferred
+  | 'subtract-line' // Preferred
+  | 'team-line' // Preferred
+  | 'user-search-line' // Preferred
+  | 'user-settings-line' // Preferred
+  | 'whatsapp-line'; // Preferred
 
 export interface IconProps {
-  icon: WangsIcons;
+  icon: WangsIcons | null;
   severity?: WangsIconseverities;
   /**
    * Show info on hover.
@@ -229,7 +249,7 @@ export interface IconProps {
    * Set the position of tooltip.
    */
   tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   class?: any;
 }
 

package/{components/image/Image.vue.d.ts → image/index.d.ts}

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  *
  * Displays an image with preview.
@@ -9,13 +8,14 @@
  *
  */
 import { TransitionProps, VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import {
   ClassComponent,
   GlobalComponentConstructor,
   PassThrough,
-} from '../ts-helpers';
+} from '../ts-helpers.d';
 
 export declare type ImagePassThroughOptionType =
   | ImagePassThroughAttributes
@@ -195,6 +195,13 @@ export interface ImageProps {
    * The thumbnail image.
    */
   src?: string | Blob;
+
+  /**
+   * Wether use preview full image functionality
+   *
+   * @default true
+   */
+  preview?: boolean;
   /**
    * The thumbnail image width.
    *
@@ -263,23 +270,42 @@ export interface ImageProps {
   unstyled?: boolean;
 
   /**
-   * Get image url for specifics project from its server.
-   * @returns The full URL of the image from the server.
-   * @param path - the Image path from API Response JSON
-   * @param width - the image width in pixels
-   * @param height - the image height in pixels
+   * Returns the full image URL or a ObjetctURL from Blob for an image resource, based on the provided path and dimensions.
+   *
+   * If the image is publicly accessible, this typically returns a fully qualified URL.
+   * If the image requires authentication or protected access, this may return a ObjetctURL from Blob (e.g., Base64-encoded).
+   *
+   * @param path - The image path as provided in the API response JSON. Can be null or undefined.
+   * @param width - Optional width of the image in pixels.
+   * @param height - Optional height of the image in pixels.
+   *
+   * @returns A string representing either the full image URL or a ObjetctURL from Blob. Returns `undefined` if the path is invalid.
+   * @example res.blob().then((blob) => resolve(URL.createObjectURL(blob)))
+   *
    */
   getImageURL?: (
     path?: string | null,
     width?: number,
     height?: number,
-  ) => string | undefined;
+    returnURLOnly?: boolean, // Default is undefined or will return Promise when using Auth, when it manually sets to true, return the url only
+  ) => string | undefined | Promise<string | undefined>;
 
   /**
    * The placeholder to be shown when the image failed to load, or the src is not provided.
    * It should be preserved by project configuration.
    */
   placeholder?: string | undefined;
+
+  /**
+   * Use default value for width and height if not specified. The default size is 125px.
+   * @defaultValue true
+   */
+  useDefaultSize?: boolean;
+
+  /**
+   * The size of thumbnail image (in px) if props.width is undefined and props.useDefaultSize is false.
+   */
+  thumbnailSize?: number;
 }
 
 /**
@@ -368,7 +394,7 @@ export interface ImageSlots {
  * _Displays an image with preview._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group Component
  *

package/{components/imagecompressor/ImageCompressor.vue.d.ts → imagecompressor/index.d.ts}

@@ -1,5 +1,31 @@
-import { CustomValidation } from '../form/Form.vue.d';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { CustomValidation } from '../form';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
+
+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;
@@ -115,6 +141,12 @@ export interface ImageCompressorProps {
    * @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.
    */
@@ -136,6 +168,10 @@ export interface ImageCompressorProps {
    * @default 'webp'
    */
   fileType?: 'webp' | 'jpeg' | 'jpg';
+  /**
+   * @default normal
+   */
+  type?: 'inline-table' | 'normal';
 }
 
 export interface ImageCompressorSlots {
@@ -152,6 +188,10 @@ export type ImageCompressorEmits = {
    */
   'applyProp': [];
   'update:defaultImage': [index?: number];
+  /**
+   * Emits on every changes in `field.value`
+   */
+  'update:fieldValue': [value?: File[] | File];
   /**
    * On delete button clicked.
    *
@@ -170,7 +210,7 @@ export type ImageCompressorEmits = {
  * _Handle image input and compression._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group Component
  *

package/{components/inlinemessage/InlineMessage.vue.d.ts → inlinemessage/index.d.ts}

@@ -6,7 +6,7 @@
  *
  */
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
 export declare type InlineMessagePassThroughOptionType =
   | InlineMessagePassThroughAttributes
@@ -136,6 +136,9 @@ export interface InlineMessageProps {
    * The message section additional class.
    */
   messageWrapperClass?: string | string[];
+  listClass?: string | string[];
+  itemWrapperClass?: string | string[];
+  itemClass?: string | string[];
   /**
    * Whether to show the loading state of the component.
    *

package/{components/inputbadge/InputBadge.vue.d.ts → inputbadge/index.d.ts}

@@ -1,5 +1,7 @@
-import { CustomValidation } from '../form/Form.vue.d';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { BadgeProps } from '../badge';
+import { CustomValidation } from '../form';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
 /**
  * InputBadge component props
@@ -32,6 +34,37 @@ export interface InputBadgeProps {
    * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
    */
   existingValues?: string[];
+  /**
+   * Values that can be edited by the user.
+   * Any new added label will considered as editable. You dont need to pass a reactive value this prop and update whenever new label is added.
+   *
+   * @default undefined - All values are editable.
+   */
+  editableValues?: string[];
+  /**
+   * List of values that can be removed. If not removable, the remove icon will be either disabled or hidden.
+   *
+   * Any new added label will considered as removable. You dont need to pass a reactive value this prop and update whenever new label is added.
+   * @default undefined - All values are removable.
+   */
+  removableValues?: string[];
+
+  /**
+   * Specify the variant of the remove button on each badge.
+   * By default, the remove button is hidden if the badge is not removable.
+   * You can set this to 'disabled' to show the remove button but disable it.
+   * @default hidden
+   *
+   * See {@link BadgeProps.disableRemoveButton}
+   */
+  removeButtonVariant?: 'disabled' | 'hidden';
+
+  /**
+   * While editing the badgem if it left empty, the badge will be restored to the previous value.
+   * @default false -  The badge removed.
+   */
+  restoreValueOnEmpty?: boolean;
+
   /**
    * Determines if the field is mandatory
    */
@@ -103,13 +136,13 @@ export type InputBadgeEmits = {
  * _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)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group Component
  */
 declare class InputBadge extends ClassComponent<
   InputBadgeProps,
-  Record<string, unknown>,
+  unknown,
   InputBadgeEmits
 > {}
 

package/inputcurrency/helpers/index.d.ts

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

package/{components/inputcurrency/InputCurrency.vue.d.ts → inputcurrency/index.d.ts}

@@ -1,5 +1,5 @@
-import { CustomValidation } from '../form/Form.vue.d';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { CustomValidation } from '../form';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
 export type CurrencyFormat = {
   name?: string;
@@ -31,18 +31,10 @@ export interface InputCurrencyLocaleConfig {
  */
 export interface InputCurrencyProps {
   /**
-   * Number modelValue of the input.
+   * Used for two-way data binding outside form integration, or sets initial value for form field.
    */
   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.
    */
@@ -98,28 +90,6 @@ export interface InputCurrencyProps {
    */
   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.
    */
@@ -148,10 +118,10 @@ export type InputCurrencyEmits = {
 /**
  * **WangsVue - InputCurrency**
  *
- * _Handle input Currency with form validation._
+ * _Handle input Currency with form validation. This component is an extension from InputNumber with mode currency._
  *
  * --- ---
- * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
  *
  * @group form
  */

package/inputemail/index.d.ts

@@ -0,0 +1,30 @@
+import { InputTextEmits, InputTextProps } from '../inputtext';
+import { ClassComponent } from '../ts-helpers.d';
+
+/**
+ * InputEmail component props
+ */
+export interface InputEmailProps extends Omit<InputTextProps, 'type'> {}
+
+/**
+ * InputEmail component emits
+ */
+export interface InputEmailEmits extends InputTextEmits {}
+
+/**
+ * **WangsVue - InputEmail**
+ *
+ * _Handle input email with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare class InputEmail extends ClassComponent<
+  InputEmailProps,
+  unknown,
+  InputEmailEmits
+> {}
+
+export default InputEmail;