@fewangsit/wangsvue-gsts 1.0.0-alpha.4 → 1.0.0-alpha.5

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,56 +1,19 @@
-import { Slot } from 'vue';
-import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
-import { ClassComponent, HintedString } 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 type ObjectBadge = {
   text: string;
-  severity: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
+  severity: BaseObjectBadge['severity'] | 'fixed-primary' | 'supply-primary';
 };
 
 export interface BadgeGroupProps
-  extends Omit<BadgeProps, 'label' | 'disabled' | 'removable'> {
+  extends Omit<BaseBadgeGroupProps, 'severity' | 'labels'> {
+  severity?:
+    | BaseBadgeGroupProps['severity']
+    | 'fixed-primary'
+    | 'supply-primary';
   /**
    * 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,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/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'

package/package.json

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

package/utils/toast.util.d.ts

@@ -1,114 +1,3 @@
-import { WangsIcons } from '../components/icon/Icon.vue.d';
-export type ToastSeverity = 'success' | 'error' | 'info';
-export interface ToastParams {
-    /**
-     * The main message to display in the toast. Will be formatted based on template message.
-     */
-    message: string;
-    /**
-     * Indicates whether the message is customized and does not follow the default message template.
-     * If true, custom formatting will be applied.
-     */
-    customMessage?: boolean;
-    /**
-     * The severity level of the toast message.
-     * Can be 'success', 'error', or 'info'.
-     */
-    severity?: ToastSeverity;
-    /**
-     * The icon to display in the toast.
-     */
-    icon?: WangsIcons;
-    /**
-     * The custom CSS class to apply to the icon.
-     */
-    iconClass?: any;
-    /**
-     * The error object from a catch statement, used to provide additional details for error toasts.
-     * Accepts any type of error object.
-     */
-    error?: unknown;
-    /**
-     * The duration for which the toast will be displayed, in milliseconds.
-     * Set to 0 to show the message infinitely.
-     *
-     * @default 3000 - 3 seconds
-     */
-    life?: number;
-    /**
-     * The name of the message group to which this toast belongs.
-     */
-    group?: string;
-    /**
-     * Unique identifier of the toast message.
-     */
-    messageId?: string;
-}
-export interface ToastMethod {
-    add(params: ToastParams): void;
-    /**
-     * Clears the messages that belongs to the group.
-     * @param {string} group - Name of the message group.
-     */
-    removeGroup(group: string): void;
-    removeAllGroups(): void;
-}
-/**
- * Configuration options for the `useToast` hook.
- */
-export interface UseToastConfig {
-    /**
-     * Default message templates for each severity level.
-     * Keys represent the severity, and values are the template strings.
-     *
-     * @example
-     * {
-     *   success: 'Success, {message}',
-     *   error: 'Error, {message} {additionalMessage}',
-     *   info: 'Info, {message} {additionalMessage}',
-     * }
-     */
-    template?: Record<string, string>;
-    /**
-     * Icons for each severity level.
-     * Keys represent the severity, and values are the corresponding icon identifiers.
-     *
-     * @example
-     * {
-     *   success: 'emotion-happy-fill',
-     *   error: 'emotion-unhappy-fill',
-     * }
-     */
-    icons?: Record<string, WangsIcons>;
-}
-/**
- * Hook to create and manage toast notifications.
- *
- * @param {UseToastConfig} config - Configuration object for the toast notifications.
- * Refer to {@link UseToastConfig} for the structure and details of this object.
- *
- * @returns {ToastMethod} A method to trigger toast notifications.
- * The method accepts {@link ToastParams} to customize individual notifications.
- *
- * @example
- * const toast = useToast({
- *   template: {
- *     success: 'Success, {message}',
- *     error: 'Error, {message} {additionalMessage}',
- *     info: 'Info, {message} {additionalMessage}',
- *   },
- *   icons: {
- *     success: 'emotion-happy-fill',
- *     error: 'emotion-unhappy-fill',
- *   }
- * });
- *
- * // Overiding the default config with ToastParams
- * toast.add({
- *   message: 'Operation completed successfully!',
- *   customMessage: true,
- *   icon: 'custom-success-icon',
- * });
- */
-declare const useToast: ({ icons, template }?: UseToastConfig) => ToastMethod;
+import { ToastMethod } from '.././utils';
+declare const useToast: () => ToastMethod;
 export default useToast;