@fewangsit/wangsvue 1.5.196-alpha.0 → 1.5.196-alpha.1

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

@@ -4,6 +4,56 @@ import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
 
+/**
+ * Configuration interface for localizing dropdown component placeholders and error messages.
+ */
+export interface DropdownLocaleConfig {
+  /**
+   * Placeholder text for the filter input field.
+   *
+   * @default undefined
+   */
+  filterPlaceholder?: string;
+
+  /**
+   * Placeholder text displayed while the dropdown is loading.
+   *
+   * @example 'Loading...'
+   * @default undefined
+   */
+  loadingPlaceholder?: string;
+
+  /**
+   * Placeholder text for the input field when no selection has been made.
+   *
+   * This text can include a placeholder `{label}` which will be replaced with the value of `props.label`.
+   *
+   * @example 'Select {label}' - If `props.label` is 'Option', the placeholder will be 'Select Option'.
+   * @example 'Select {lowercaseLabel}' - If `props.label` is 'Option', the placeholder will be 'Select option'.
+   * @default undefined
+   */
+  inputPlaceholder?: string;
+
+  /**
+   * Error message displayed when no selection has been made.
+   *
+   * This message can include placeholders:
+   * - `{label}`: Replaced with the value of `props.label`.
+   * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
+   *
+   * @example
+   * // If `props.label` is 'Label', the error message will be:
+   * '{label} must be picked' - 'Label must be picked'
+   *
+   * @example
+   * // If `props.label` is 'user', the error message will be:
+   * 'You must pick {formattedLabel}' - 'You must pick a user'
+   *
+   * @default undefined
+   */
+  emptySelectionErrorMessage?: string;
+}
+
 /**
  * Dropdown component props
  */
@@ -13,79 +63,99 @@ export interface DropdownProps {
    * It may lead unexpected behavior.
    */
   modelValue?: OptionValue;
+
   /**
    * If you deals with form validation on edit form action, you can set the initial value of the field.
    */
   initialValue?: OptionValue;
+
   /**
    * The input label. Tell the user what input is this.
    */
   label?: string;
+
   /**
    * List of options to display.
    */
   options?: DropdownOption[] | string[] | Record<string, any>;
+
   /**
    * Specify the property name of option to be used as label.
    *
    * @default undefined - the label will be sets to the option itself.
    */
   optionLabel?: string;
+
   /**
    * Specify the property name of option to be used as value.
    *
    * @default undefined - the value will be sets to the option itself.
    */
   optionValue?: string;
+
   /**
    * Define the value style, whether badge or plain text
    *
    * @default 'plain'
    */
   valueType?: 'badge' | 'plain';
+
   /**
    * Bind the badge property to the dropdown value
    */
   badgeValueProps?: Omit<BadgeProps, 'label'>;
+
   /**
    * Set the input border style
    *
    * @default 'default'
    */
   inputBorder?: 'none' | 'default';
+
   /**
    * A property to uniquely identify an option.
    */
   dataKey?: string | undefined;
+
   /**
    * Determines if the field uses a validator
    */
   useValidator?: boolean;
+
   /**
    * Determines if the field is mandatory
    */
   mandatory?: boolean;
+
   /**
    * Show the text (opsional)
    *
    * @default true if mandatory true
    */
   showOptionalText?: boolean;
+
   /**
    * Set custom validator message.
    * It is rarely use, this component has handled the validator message.
+   *
+   *
+   * @example: 'This field is required'
+   * @example: { empty: 'This field is required' }
    */
-  validatorMessage?: string;
+  validatorMessage?: string | CustomValidation<'empty'>;
+
   /**
    * Wether to format the message
    *
    * @default true
    */
   formatValidatorMessage?: boolean;
+
   /**
    * Set custom invalid state.
    */
   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.
@@ -93,39 +163,44 @@ export interface DropdownProps {
    * @default 'dropdown'
    */
   fieldName?: string;
+
   /**
    * Default text to display when no option is selected.
    *
    * @default `Select ${label}`
    */
   placeholder?: string;
+
   /**
    * Whether the dropdown is in loading state.
    * @defaultValue false
    */
   loading?: boolean;
+
   /**
    * Show icon 'info' on the right side of label.
    * Show information to user about the field on icon hover.
    */
   fieldInfo?: string;
+
   /**
    * Set disabled state for input dropdown.
    */
   disabled?: boolean;
+
   /**
    * Whether show the Dropdown option search or not.
    *
    * @default true,
    */
   filter?: boolean;
+
   /**
    * The filter input Placeholder
    *
    * @default 'Search'
    */
   filterPlaceholder?: string;
-  customValidation?: CustomValidation;
 }
 
 export interface DropdownSlots {
@@ -143,6 +218,7 @@ export type DropdownEmits = {
    * Emits when an option selected.
    */
   'update:modelValue': [value: OptionValue | undefined];
+
   /**
    * Emits when overlay shown.
    */

package/components/form/Form.vue.d.ts

@@ -15,7 +15,8 @@ export type Condition =
   | 'exist'
   | 'mismatch';
 
-export type CustomValidation = Partial<Record<Condition, string>>;
+export type CustomValidation<T extends Partial<Condition> = Condition> =
+  Partial<Record<T, string>>;
 
 type FieldValue =
   | Nullable<string>
@@ -59,49 +60,60 @@ export interface FormProps {
    * The template for form buttons.
    */
   buttonsTemplate?: ('clear' | 'submit' | 'cancel')[];
+
   /**
    * Custom button cancel label.
    */
   cancelBtnLabel?: string;
+
   /**
    * Custom button clear label.
    */
   clearBtnLabel?: string;
+
   /**
    * The number of columns per row.
    * @default 1;
    */
   columnPerRow?: number;
+
   /**
    * Determines whether form footer should be hidden or not
    */
   hideFooter?: boolean;
+
   /**
    * Determines if the stay checkbox should be hidden.
    */
   hideStayCheckbox?: boolean;
+
   /**
    * Invalid form state.
    */
   invalid?: boolean;
+
   /**
    * Prevent form resets after submitted. Default behaviour is form resetted after submit.
    *
    * @default true
    */
   resetAfterSubmit?: boolean;
+
   /**
    * Custom button submit label.
    */
   submitBtnLabel?: string;
+
   /**
    * Custom label for stay checkbox.
    */
   stayCheckboxLabel?: string;
+
   /**
    * Custom submit form validator message.
    */
   validatorMessage?: string;
+
   /**
    * Defines the style of the cancel button.
    */
@@ -114,6 +126,7 @@ export interface FormProps {
     | 'danger'
     | 'contrast'
   >;
+
   /**
    * Defines the style of the submit button.
    */
@@ -146,10 +159,12 @@ export type FormEmits = {
    * Emitted when button template `Cancel` clicked (doesn't matter its label)
    */
   cancel: [];
+
   /**
    * Emitted when button template `Clear` clicked (doesn't matter its label)
    */
   clear: [];
+
   /**
    * Emitted when button template `Submit` clicked (doesn't matter its label)
    */
@@ -172,30 +187,37 @@ declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
    * Exposed errors of form
    */
   errors: Partial<Record<string, string>>;
+
   /**
    * The ref of form element.
    */
   formElement: HTMLFormElement;
+
   /**
    * Whether to show validator or not
    */
   showValidator: boolean;
+
   /**
    * Whether to keep the dialog remains visible or not after submit.
    */
   stayAfterSubmit: CheckboxModelValue;
+
   /**
    * Exposed function to clears the form fields.
    */
   clearField: () => void;
+
   /**
    * Exposed function to clears the specific field.
    */
   resetField: (field: string, state?: Partial<FieldState>) => void;
+
   /**
    * Exposed function that handle submit inside form component
    */
   submit: (e?: Event | undefined) => Promise<void | undefined>;
+
   /**
    * Exposed function to set the outer fields wrapper height.
    */

package/components/helpers/label.d.ts

@@ -0,0 +1,15 @@
+import { SetupContext, VNode } from 'vue';
+interface LabelProps {
+    label: string;
+}
+/**
+ * For input like checkbox, radiobutton, toggleswitch, etc.
+ *
+ * Conditionally wrap the input with label element when props.label is defined.
+ *
+ * @param propsData
+ * @param setupContext
+ * @returns
+ */
+declare const Label: (propsData: LabelProps, setupContext?: SetupContext) => VNode;
+export default Label;

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

@@ -15,8 +15,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOp
     touchResize?: unknown;
     wheelResize?: unknown;
 }>>> & {
-    onMove?: (e: any) => any;
     onResize?: (e: any) => any;
+    onMove?: (e: any) => any;
 }, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/index.d.ts

@@ -29,6 +29,7 @@ export { default as ButtonFilter } from './buttonfilter/ButtonFilter.vue';
 export { default as ButtonRadio } from './buttonradio/ButtonRadio.vue';
 export { default as ButtonSearch } from './buttonsearch/ButtonSearch.vue';
 export { default as ButtonToggle } from './buttontoggle/ButtonToggle.vue';
+export { default as ToggleSwitch } from './toggleswitch/ToggleSwitch.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';

package/components/inputcurrency/InputCurrency.vue.d.ts

@@ -1,4 +1,5 @@
-import { DefineComponent } from 'vue';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export type CurrencyFormat = {
   name?: string;
@@ -13,6 +14,18 @@ export interface CurrencyValue {
   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
  */
@@ -21,6 +34,7 @@ export interface InputCurrencyProps {
    * Number modelValue of the input.
    */
   modelValue?: CurrencyValue;
+
   /**
    * Sets the initial value of the field.
    * This will only available with option 'useValidator'.
@@ -28,19 +42,23 @@ export interface InputCurrencyProps {
    * 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.
@@ -48,47 +66,60 @@ export interface InputCurrencyProps {
    * @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;
+  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.
    */
@@ -107,6 +138,7 @@ export type InputCurrencyEmits = {
    * 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.
    */
@@ -123,9 +155,16 @@ export type InputCurrencyEmits = {
  *
  * @group form
  */
-declare const InputCurrency: DefineComponent<
+declare class InputCurrency extends ClassComponent<
   InputCurrencyProps,
+  unknown,
   InputCurrencyEmits
->;
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    InputCurrency: GlobalComponentConstructor<InputCurrency>;
+  }
+}
 
 export default InputCurrency;