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

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

@@ -1,66 +1,6 @@
-import { ClassComponent } from '../ts-helpers';
+import { BadgeProps as BaseBadgeProps } from '../.././components/badge/Badge.vue.d';
+export * from '../.././components/badge/Badge.vue.d';
 
-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'];
+export interface BadgeProps extends Omit<BaseBadgeProps, 'severity'> {
+  severity: BaseBadgeProps['severity'] | 'fixed-primary' | 'supply-primary';
 }
-
-/**
- * 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,40 +1,19 @@
-import { Slot } from 'vue';
-import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
-import { ClassComponent } from '../ts-helpers.d';
+import { BadgeGroupProps as BaseBadgeGroupProps, ObjectBadge as BaseObjectBadge } from '../.././components/badgegroup/BadgeGroup.vue.d';
+export * from '../.././components/badgegroup/BadgeGroup.vue.d';
 
-export interface BadgeGroupProps
-  extends Omit<BadgeProps, 'label' | 'disabled' | 'removable'> {
-  labels: string[];
-  /**
-   * 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 type ObjectBadge = {
+  text: string;
+  severity: BaseObjectBadge['severity'] | 'fixed-primary' | 'supply-primary';
+};
 
-export interface BadgeGroupSlots {
+export interface BadgeGroupProps
+  extends Omit<BaseBadgeGroupProps, 'severity' | 'labels'> {
+  severity?:
+    | BaseBadgeGroupProps['severity']
+    | 'fixed-primary'
+    | 'supply-primary';
   /**
-   * Slot for custom more dialog content
+   * Support data type object to determine severity for specific text
    */
-  dialogcontent: Slot<{ labels: string[] }>;
+  labels: string[] | ObjectBadge[];
 }
-
-export default class Badge extends ClassComponent<
-  BadgeGroupProps,
-  BadgeGroupSlots,
-  unknown
-> {}

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

@@ -1,185 +1,6 @@
-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';
+import { ButtonProps as BaseButtonProps } from '../.././components/button/Button.vue.d';
+export * from '../.././components/button/Button.vue.d';
 
-/**
- * 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;
+export interface ButtonProps extends BaseButtonProps {
+  severity: BaseButtonProps['severity'] | 'fixed-primary' | 'supply-primary';
 }
-
-/**
- * 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/dialogconfirm/DialogConfirm.vue.d.ts

@@ -1,153 +1,10 @@
-import { Slot } from 'vue';
-import { WangsIcons } from '../icon/Icon.vue.d';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { DialogConfirmProps as BaseDialogConfirmProps } from '../.././components/dialogconfirm/DialogConfirm.vue.d';
+export * from '../.././components/dialogconfirm/DialogConfirm.vue.d';
 
-type ConfirmDialogSeverity = 'success' | 'danger';
-
-export interface DialogConfirmLocaleConfig {
-  actionableCloseButtonLabel?: string;
-  nonActionableCloseButtonLabel?: string;
-  /**
-   * @example Are you sure?
-   */
-  defaultConfirmMessage?: string;
-
-  /**
-   * @example Yakin
-   */
-  defaultConfirmLabel?: string;
+export interface DialogConfirmProps
+  extends Omit<BaseDialogConfirmProps, 'confirmButtonSeverity'> {
+  confirmButtonSeverity:
+    | BaseDialogConfirmProps['confirmButtonSeverity']
+    | 'fixed-primary'
+    | 'supply-primary';
 }
-
-/**
- * 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 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/icon/Icon.vue.d.ts

@@ -32,6 +32,7 @@ export type WangsIcons =
   | 'assignment'
   | 'attachment-2'
   | 'audit'
+  | 'barcode'
   | 'barricade-line'
   | 'bell'
   | 'bell-alert'
@@ -51,6 +52,7 @@ export type WangsIcons =
   | 'checkbox-circle'
   | 'checkbox-circle-fill'
   | 'checkbox-blank-circle'
+  | 'checkbox-blank-circle-fill'
   | 'checkbox-multiple'
   | 'close'
   | 'close-circle'
@@ -143,6 +145,7 @@ export type WangsIcons =
   | 'profile'
   | 'qr'
   | 'qr-scan'
+  | 'reception'
   | 'refresh'
   | 'replace-tag'
   | 'report-tag'
@@ -162,6 +165,7 @@ export type WangsIcons =
   | 'sort-asc'
   | 'sort-desc'
   | 'supplier-return'
+  | 'internal-return'
   | 'spinner'
   | 'stack'
   | 'star'

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

@@ -14,7 +14,7 @@ export type ImageCompressorPayload = {
     fileName: string;
     file: File;
     size: string;
-    type: 'image/webp';
+    type: 'image/webp' | 'image/jpeg' | 'image/jpg';
   };
   message?: string;
 };
@@ -130,6 +130,12 @@ export interface ImageCompressorProps {
    * @default true
    */
   showValidatorMessage?: boolean;
+  /**
+   * Specify the file type for the uploaded image result.
+   *
+   * @default 'webp'
+   */
+  fileType?: 'webp' | 'jpeg' | 'jpg';
 }
 
 export interface ImageCompressorSlots {

package/components/index.d.ts

@@ -30,7 +30,7 @@ export { default as DialogSelectTree } from '.././components/dialogselecttree/Di
 export { default as Dropdown } from './dropdown/Dropdown.vue';
 export { default as Editor } from './editor/Editor.vue';
 export { default as FileUpload } from './fileupload/FileUpload.vue';
-export { default as FilterContainer } from '../../admin-tagsamurai/components/filtercontainer/FilterContainer.vue';
+export { default as FilterContainer } from './filtercontainer/FilterContainer.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';

package/components/ts-helpers.d.ts

@@ -61,3 +61,23 @@ export declare type DefaultPassThrough<T = void> =
   | undefined;
 
 export declare type HintedString<T extends string> = (string & {}) | T;
+
+export declare type PresetAttributes = {
+  class?: any;
+  style?: any;
+  [key: string]: any;
+};
+
+export declare type PresetMethodOptions = {
+  instance: any;
+  props: any;
+  state: any;
+  context: any;
+  attrs: any;
+  parent: any;
+  global: object | undefined;
+};
+
+export declare type PresetOptionMethodType<Opt = PresetMethodOptions> = (
+  options: Partial<Opt>,
+) => PresetAttributes;

package/components/username/UserName.vue.d.ts

@@ -1,39 +1,97 @@
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PresetAttributes,
+  PresetOptionMethodType,
+} from '../ts-helpers';
 
-/**
- * Defines valid properties in UserName component.
- */
-export interface UserNameProps {
+export interface UserNamePresetOptions {
+  root: PresetAttributes;
+  displayname: PresetOptionMethodType;
+  panel: {
+    background: PresetAttributes;
+    username: PresetAttributes;
+    useremail: PresetAttributes;
+    positiondivision: PresetAttributes;
+    userdetaillink: PresetAttributes;
+    contentwrapper: PresetAttributes;
+    detailwrapper: PresetAttributes;
+  };
+}
+
+export interface UserNameLocaleConfig {
   /**
-   * @default 'picture' - Show user profile picture instead of user icon
+   * The anchor text for user detail link on user panel
    */
-  type?: 'icon' | 'picture';
+  detailUserAnchorText?: string;
+}
+
+export interface UserNameComponentConfigs {
   /**
-   * The full user Object
+   * @example `/tim-member/member/{userId}/detail-member`
+   */
+  detailUserPath: string;
+
+  /**
+   * @default 'picture' - Show user profile picture instead of user icon
    */
-  user?: Record<string, any>;
+  type?: 'icon' | 'picture';
+
   /**
    * Specify the field of user to be used as display name
    *
    * @example 'name.fullName'
-   *
-   * @default 'nickName'
    */
   userNameField?: string;
   /**
    * Specify the field of user to be used as display picture
    *
    * @example 'image.profile'
-   *
-   * @default 'profilePicture'
    */
   profilePictureField?: string;
+
+  /**
+   * Function to get user detail on panel shown
+   * @param userId The user id
+   * @returns Full user detail object
+   */
+  getUserDetail: (
+    userId: string,
+  ) => UserNameProps['user'] | Promise<UserNameProps['user']>;
+}
+
+export interface GeneralUser {
+  _id: string;
+  profilePicture?: string;
+  firstName?: string;
+  lastName?: string;
+  fullName?: string;
+  email?: string;
+  nickName?: string;
+  position?: string;
+  division?: string;
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in UserName component.
+ */
+export interface UserNameProps extends Partial<UserNameComponentConfigs> {
+  /**
+   * The full user Object
+   */
+  user?: GeneralUser;
   /**
    * Specify if the component can be emptyable
    *
    * @default false
    */
   emptyable?: boolean;
+
+  /**
+   * When it sets to false, the props.user will be used
+   */
+  fetchDetailOnPanelShow?: boolean;
 }
 
 /**

package/package.json

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