@fewangsit/wangsvue-gsts 1.0.0-alpha.11 → 1.0.0-alpha.13

package/components/animation/Animation.vue.d.ts

@@ -1,4 +1,4 @@
-import { ClassComponent } from 'lib/components/ts-helpers.d';
+import { ClassComponent } from '../../components/ts-helpers.d';
 
 export interface AnimationDefaultConfig {
   libPath: 'supplyasset' | 'workspace' | 'admin';

package/components/badge/Badge.vue.d.ts

@@ -1,6 +1,66 @@
-import { BadgeProps as BaseBadgeProps } from '../.././components/badge/Badge.vue.d';
-export * from '../.././components/badge/Badge.vue.d';
+import { ClassComponent } from '../ts-helpers';
 
-export interface BadgeProps extends Omit<BaseBadgeProps, 'severity'> {
-  severity: BaseBadgeProps['severity'] | 'fixed-primary' | 'supply-primary';
+export interface BadgeComponentConfigs {
+  /**
+   * The component configurasion to set the severity based on given label. If provided, props.severity might be omitted.
+   *
+   * @param label The badge label
+   * @returns The matched severity of given label
+   */
+  getSeverity?: (label?: string) => BadgeProps['severity'];
 }
+
+/**
+ * Props for Badge component
+ */
+export interface BadgeProps extends BadgeComponentConfigs {
+  /**
+   * The text to be displayed.
+   */
+  label: string;
+  /**
+   * Whether the badge text is editable.
+   */
+  editable?: boolean;
+  /**
+   * Sets the severity level for styling purposes. This prop might be omitted if getSeverity is provided.
+   */
+  severity?: 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'primary';
+  /**
+   * Specifies the format for text truncation rules based on the usage context.
+   */
+  format?: 'username' | 'nowrap';
+  /**
+   * Whether to show the remove icon or not. Clicking the remove icon will emit 'remove' event.
+   */
+  removable?: boolean;
+  /**
+   * Whether to set badge become disabled.
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Emits for Badge component
+ */
+export type BadgeEmits = {
+  'remove': [];
+  /**
+   * Emits when the text is edited.
+   * Only available when props.editable=true
+   */
+  'update:label': [label: string | null];
+};
+
+/**
+ * **WangsVue - Badge**
+ *
+ * _Badge is a component for displaying a text with optional remove functionality._
+ *
+ * @group components
+ */
+export default class Badge extends ClassComponent<
+  BadgeProps,
+  unknown,
+  BadgeEmits
+> {}

package/components/badgegroup/BadgeGroup.vue.d.ts

@@ -1,19 +1,56 @@
-import { BadgeGroupProps as BaseBadgeGroupProps, ObjectBadge as BaseObjectBadge } from '../.././components/badgegroup/BadgeGroup.vue.d';
-export * from '../.././components/badgegroup/BadgeGroup.vue.d';
+import { Slot } from 'vue';
+import { BadgeProps } from '../../components/badge/Badge.vue.d';
+import { ClassComponent, HintedString } from '../ts-helpers.d';
 
 export type ObjectBadge = {
   text: string;
-  severity: BaseObjectBadge['severity'] | 'fixed-primary' | 'supply-primary';
+  severity: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
 };
 
 export interface BadgeGroupProps
-  extends Omit<BaseBadgeGroupProps, 'severity' | 'labels'> {
-  severity?:
-    | BaseBadgeGroupProps['severity']
-    | 'fixed-primary'
-    | 'supply-primary';
+  extends Omit<BadgeProps, 'label' | 'disabled' | 'removable'> {
   /**
    * Support data type object to determine severity for specific text
    */
   labels: string[] | ObjectBadge[];
+  /**
+   * Determine whether severity of text "more" is customizable
+   *
+   * @default undefined
+   */
+  textMoreSeverity?: HintedString<
+    'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'contrast'
+  >;
+  /**
+   * The text shown on the more button
+   *
+   * @default 'more'
+   */
+  textMore?: string;
+  /**
+   * Maximum number of label to be shown.
+   */
+  limit?: number;
+  /**
+   * The dialog header shown on more button clicked
+   */
+  headerLabel?: string;
+  /**
+   * Specify if the badge should be emptyable
+   * @default false
+   */
+  emptyable?: boolean;
 }
+
+export interface BadgeGroupSlots {
+  /**
+   * Slot for custom more dialog content
+   */
+  dialogcontent: Slot<{ labels: string[] }>;
+}
+
+export default class Badge extends ClassComponent<
+  BadgeGroupProps,
+  BadgeGroupSlots,
+  unknown
+> {}

package/components/button/Button.vue.d.ts

@@ -1,6 +1,185 @@
-import { ButtonProps as BaseButtonProps } from '../.././components/button/Button.vue.d';
-export * from '../.././components/button/Button.vue.d';
+import { ButtonHTMLAttributes, VNode } from 'vue';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { TooltipOptions } from 'primevue/tooltip';
+import { GlobalComponentConstructor } from '../ts-helpers.d';
+import { ClassComponent, HintedString } from '../ts-helpers';
 
-export interface ButtonProps extends BaseButtonProps {
-  severity: BaseButtonProps['severity'] | 'fixed-primary' | 'supply-primary';
+/**
+ * Defines valid properties in Button component.
+ */
+export interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
+  /**
+   * Inline style of the button.
+   */
+  style?: any;
+  /**
+   * Style class of the button.
+   */
+  class?: any;
+  /**
+   * Text of the button.
+   */
+  label?: string | undefined;
+  /**
+   * Name of the icon.
+   */
+  icon?: WangsIcons | undefined;
+  /**
+   * Position of the icon.
+   * @defaultValue left
+   */
+  iconPos?: 'left' | 'right' | 'top' | 'bottom' | undefined;
+  /**
+   * Style class of the icon.
+   */
+  iconClass?: string | undefined;
+  /**
+   * Tooltip/information to show on button hover.
+   */
+  tooltip?: string | TooltipOptions;
+  /**
+   * Set the position of tooltip.
+   * @default bottom
+   */
+  tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * Value of the badge.
+   */
+  badge?: string | undefined;
+  /**
+   * Style class of the badge.
+   */
+  badgeClass?: string | undefined;
+  /**
+   * Severity type of the badge.
+   */
+  badgeSeverity?:
+    | HintedString<
+        'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'contrast'
+      >
+    | null
+    | undefined;
+  /**
+   * Whether the button is in loading state.
+   * @defaultValue false
+   */
+  loading?: boolean | undefined;
+  /**
+   * Icon to display in loading state.
+   */
+  loadingIcon?: string | undefined;
+  /**
+   *  Add a link style to the button.
+   * @defaultValue false
+   */
+  link?: boolean | undefined;
+  /**
+   * Defines the style of the button.
+   */
+  severity?:
+    | HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+      >
+    | undefined;
+  /**
+   * Add a shadow to indicate elevation.
+   * @defaultValue false
+   */
+  raised?: boolean | undefined;
+  /**
+   * Add a circular border radius to the button.
+   * @defaultValue false
+   */
+  rounded?: boolean | undefined;
+  /**
+   * Add a textual class to the button without a background initially.
+   * @defaultValue false
+   */
+  text?: boolean | undefined;
+  /**
+   * Add a border class without a background initially.
+   * @defaultValue false
+   */
+  outlined?: boolean | undefined;
+  /**
+   * Defines the size of the button.
+   */
+  size?: 'small' | 'large' | undefined;
+  /**
+   * Add a plain textual class to the button without a background initially.
+   * @defaultValue false
+   */
+  plain?: boolean | undefined;
 }
+
+/**
+ * Defines current options in Button component.
+ */
+export interface ButtonContext {
+  /**
+   * Current disabled state of the element as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Defines valid slots in Button component.
+ */
+export interface ButtonSlots {
+  /**
+   * Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
+   */
+  default(): VNode[];
+  /**
+   * Custom icon template.
+   * @param {Object} scope - icon slot's params.
+   */
+  icon(scope: {
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+  /**
+   * Custom loading icon template.
+   * @param {Object} scope - loading icon slot's params.
+   */
+  loadingicon(scope: {
+    /**
+     * Style class of the loading icon.
+     */
+    class: string;
+  }): VNode[];
+}
+
+/**
+ * **WangsVue - Button**
+ *
+ * _Button is an extension to standard button element with icons and theming._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/table)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class Button extends ClassComponent<
+  ButtonProps,
+  ButtonSlots,
+  Record<string, unknown>
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Button: GlobalComponentConstructor<Button>;
+  }
+}
+
+export default Button;

package/components/datatable/DataTable.vue.d.ts

@@ -1,8 +1,8 @@
-import { DialogConfirmProps } from 'lib/components/dialogconfirm/DialogConfirm.vue.d';
-import { MenuItem } from 'lib/components/menuitem';
+import { DialogConfirmProps } from '../../components/dialogconfirm/DialogConfirm.vue.d';
+import { MenuItem } from '../../components/menuitem';
 import { ClassComponent, HintedString } from '../ts-helpers.d';
 import { Component } from 'vue';
-import { DateOptions } from 'lib/utils/date.util';
+import { DateOptions } from '../../utils/date.util';
 
 export type ChildGroup = {
   groupHeader: string;

package/components/dialogconfirm/DialogConfirm.vue.d.ts

@@ -1,10 +1,160 @@
-import { DialogConfirmProps as BaseDialogConfirmProps } from '../.././components/dialogconfirm/DialogConfirm.vue.d';
-export * from '../.././components/dialogconfirm/DialogConfirm.vue.d';
+import { Slot } from 'vue';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export interface DialogConfirmProps
-  extends Omit<BaseDialogConfirmProps, 'confirmButtonSeverity'> {
-  confirmButtonSeverity:
-    | BaseDialogConfirmProps['confirmButtonSeverity']
-    | 'fixed-primary'
-    | 'supply-primary';
+type ConfirmDialogSeverity = 'success' | 'danger';
+
+export interface DialogConfirmLocaleConfig {
+  actionableCloseButtonLabel?: string;
+  nonActionableCloseButtonLabel?: string;
+  /**
+   * @example Are you sure?
+   */
+  defaultConfirmMessage?: string;
+
+  /**
+   * @example Yakin
+   */
+  defaultConfirmLabel?: string;
 }
+
+/**
+ * Props for DialogConfirm component
+ */
+export interface DialogConfirmProps {
+  /**
+   * The header of the dialog.
+   */
+  header: string;
+  /**
+   * The severity of the dialog.
+   * The severity will determine the dialog icons and color scheme.
+   */
+  severity: ConfirmDialogSeverity;
+  /**
+   * The severity of the confirm button.
+   * The severity will determine the confirm button color scheme in case button severity is different from header/dialog severity.
+   *
+   * @default undefined - to fallback to props.severity
+   */
+  confirmButtonSeverity?: ConfirmDialogSeverity;
+  /**
+   * The boolean modelValue to show dialog.
+   */
+  visible: boolean;
+
+  /**
+   * Determines if the dialog should close after confirm.
+   * @default true
+   */
+  closeAfterConfirm?: boolean;
+  /**
+   * The label of the close/cancel button.
+   */
+  closeLabel?: string;
+  /**
+   * To hide/show the confirm button.
+   *
+   * Set to 'false' Make the confirm dialog cannot be confirmed.
+   *
+   * @default true;
+   */
+  actionable?: boolean;
+  /**
+   * The label of the confirm button.
+   */
+  confirmLabel?: string;
+  /**
+   * Custom header icon. Default is 'error' icon for danger severity, and 'checkbox-circle' for success severity.
+   */
+  headerIcon?: WangsIcons;
+  /**
+   * The lists to be displayed in the dialog.
+   */
+  list?: (string | object)[] | Set<string | object>;
+  /**
+   * The label of the list if your list item is an object.
+   * Choose a property from the item to be displayed on the list.
+   */
+  listLabel?: string;
+  /**
+   * The confirmation message.
+   */
+  message?: string;
+  /**
+   * Whether show icon header or not.
+   * @default true;
+   */
+  showIcon?: boolean;
+  /**
+   * Whether show close button or not (footer button that has label, not close button with icon 'X').
+   * @default true;
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * Set class for content element.
+   */
+  contentClass?: any;
+}
+
+/**
+ * Slots for DialogConfirm component
+ */
+export interface DialogConfirmSlots {
+  /**
+   * The body slot for the dialog. Here is where you can put your dialog body.
+   */
+  body?: Slot | string;
+  /**
+   * The footer slot for the dialog. Here is where you can put your dialog footer.
+   * Use this slot if you need to custom the dialog buttons.
+   */
+  footer?: Slot | string;
+}
+
+/**
+ * Emits for DialogConfirm component
+ */
+export type DialogConfirmEmits = {
+  /**
+   * Emits when close button clicked.
+   */
+  'close': [];
+  /**
+   * Emits when Confirm button clicked.
+   */
+  'confirm': [];
+  /**
+   * Emits when dialog closed.
+   */
+  'hide': [];
+  /**
+   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+   */
+  'update:visible': [state: boolean];
+};
+
+/**
+ * **WangsVue - DialogConfirm**
+ *
+ * _DialogConfirm is a component for creating confirmation dialogs._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class DialogConfirm extends ClassComponent<
+  DialogConfirmProps,
+  DialogConfirmSlots,
+  DialogConfirmEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    DialogConfirm: GlobalComponentConstructor<DialogConfirm>;
+  }
+}
+
+export default DialogConfirm;

package/components/dropdown/Dropdown.vue.d.ts

@@ -1,8 +1,8 @@
 import { Slot } from 'vue';
-import { DropdownOption, OptionValue } from 'lib/types/options.type';
+import { DropdownOption, OptionValue } from '../../types/options.type';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
+import { BadgeProps } from '../../components/badge/Badge.vue.d';
 
 /**
  * Configuration interface for localizing dropdown component placeholders and error messages.

package/components/filtercontainer/FilterContainer.vue.d.ts

@@ -1,4 +1,4 @@
-import { MultiSelectOption } from 'lib/types/options.type';
+import { MultiSelectOption } from '../../types/options.type';
 import { DefineComponent, Slot } from 'vue';
 import { CalendarProps } from '../calendar/Calendar.vue.d';
 import { QueryParams } from '../datatable/DataTable.vue.d';
@@ -14,8 +14,8 @@ export interface MultiSelectFilterField extends MultiSelectProps {
   optionField?: string; // @example - actionOptions
   params?: QueryParams; // Additional QueryParams for the fetchOptionFn
   fetchOptionFn?:
-    | ((args?: any) => MultiSelectOption[]) // Sync function to fetch options
-    | ((args?: any) => Promise<MultiSelectOption[]>); // Async function
+    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
+    | ((args?: any) => Promise<MultiSelectOption[] | undefined>); // Async function
 }
 
 export interface DropdownFilterField extends DropdownProps {
@@ -24,8 +24,8 @@ export interface DropdownFilterField extends DropdownProps {
   optionField?: string; // @example - actionOptions
   params?: QueryParams; // Additional QueryParams for the fetchOptionFn
   fetchOptionFn?:
-    | ((args?: any) => MultiSelectOption[]) // Sync function to fetch options
-    | ((args?: any) => Promise<MultiSelectOption[]>); // Async function
+    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
+    | ((args?: any) => Promise<MultiSelectOption[]> | undefined); // Async function
 }
 
 export interface RangeNumberFilterField extends InputRangeNumberProps {

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

@@ -3,7 +3,7 @@ import { ClassComponent } from '../ts-helpers';
 import {
   InputTextEmits,
   InputTextProps,
-} from 'lib/components/inputtext/InputText.vue.d';
+} from '../../components/inputtext/InputText.vue.d';
 
 /**
  * InputURL component props

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

@@ -1,4 +1,4 @@
-import { DropdownOption, OptionValue } from 'lib/types/options.type';
+import { DropdownOption, OptionValue } from '../../types/options.type';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { DropdownChangeEvent } from 'primevue/dropdown';
 

package/components/multiselect/MultiSelect.vue.d.ts

@@ -2,7 +2,7 @@ import { DropdownLocaleConfig } from '../dropdown/Dropdown.vue.d';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-import { MultiSelectOption, OptionValue } from 'lib/types/options.type';
+import { MultiSelectOption, OptionValue } from '../../types/options.type';
 
 export type MultiSelectLocaleConfig = DropdownLocaleConfig & {};
 

package/components/tree/Tree.vue.d.ts

@@ -1,7 +1,7 @@
 import { Slot } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { TreeSelectionKeys } from 'primevue/tree';
-import { MenuItem } from 'lib/components/menuitem';
+import { MenuItem } from '../../components/menuitem';
 import { BaseTreeProps, TreeNode } from '../basetree/BaseTree.vue.d';
 import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-gsts",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "author": "Wangsit FE Developer",
   "description": "Global Settings Tagsamurai VueJS Component Library",
   "type": "module",