@fewangsit/wangsvue-fats 1.0.0-alpha.33 → 1.0.0-alpha.35

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

@@ -1,245 +1,245 @@
 import { Slot } from 'vue';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { BadgeProps } from '../badge/Badge.vue.d';
-import { WangsIcons } from '../icon/Icon.vue.d';
+import { BadgeProps } from '../../components/badge/Badge.vue.d';
+import { WangsIcons } from '../../components/icon/Icon.vue.d';
 
 export type OptionValue = string | number | boolean | Record<string, any>;
 
 export type Option = {
-    label?: string;
-    value?: OptionValue;
-    visible?: boolean;
-    icon?: WangsIcons;
-    [key: string]: any;
+  label?: string;
+  value?: OptionValue;
+  visible?: boolean;
+  icon?: WangsIcons;
+  [key: string]: any;
 };
 
 /**
  * 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;
+  /**
+   * 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
  */
 export interface DropdownProps {
-    /**
-     * Don't use modelValue with useValidator at the same time.
-     * 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?: Option[] | string[] | Record<string, any>;
-
-    /**
-     * Allows `null` to be treated as a valid selectable option in the dropdown.
-     *
-     * When enabled, `null` can be included in the options list and selected by the user.
-     */
-    allowNullOption?: boolean;
-
-    /**
-     * 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 | 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.
-     *
-     * @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;
+  /**
+   * Don't use modelValue with useValidator at the same time.
+   * 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?: Option[] | string[] | Record<string, any>;
+
+  /**
+   * Allows `null` to be treated as a valid selectable option in the dropdown.
+   *
+   * When enabled, `null` can be included in the options list and selected by the user.
+   */
+  allowNullOption?: boolean;
+
+  /**
+   * 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 | 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.
+   *
+   * @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;
 }
 
 export interface DropdownSlots {
-    'value': Slot<{ value: string; originalValue: any }>;
-    'option': Slot<{ option: Option }>;
-    'addon-left': Slot;
-    'addon-right': Slot;
+  'value': Slot<{ value: string; originalValue: any }>;
+  'option': Slot<{ option: Option }>;
+  'addon-left': Slot;
+  'addon-right': Slot;
 }
 
 /**
  * Dropdown component emits
  */
 export type DropdownEmits = {
-    /**
-     * Emits when an option selected.
-     */
-    'update:modelValue': [value: OptionValue | undefined];
-
-    /**
-     * Emits when overlay shown.
-     */
-    'show': [];
+  /**
+   * Emits when an option selected.
+   */
+  'update:modelValue': [value: OptionValue | undefined];
+
+  /**
+   * Emits when overlay shown.
+   */
+  'show': [];
 };
 
 /**
@@ -253,22 +253,22 @@ export type DropdownEmits = {
  * @group Component
  */
 declare class Dropdown extends ClassComponent<
-    DropdownProps,
-    DropdownSlots,
-    DropdownEmits
+  DropdownProps,
+  DropdownSlots,
+  DropdownEmits
 > {
-    /**
-     * Shows the overlay.
-     *
-     * @memberof MultiSelect
-     */
-    showOverlay(): void;
+  /**
+   * Shows the overlay.
+   *
+   * @memberof MultiSelect
+   */
+  showOverlay(): void;
 }
 
 declare module '@vue/runtime-core' {
-    interface GlobalComponents {
-        Dropdown: GlobalComponentConstructor<Dropdown>;
-    }
+  interface GlobalComponents {
+    Dropdown: GlobalComponentConstructor<Dropdown>;
+  }
 }
 
 export default Dropdown;