@fewangsit/wangsvue-fats 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -1,235 +1,245 @@
 import { Slot } from 'vue';
-import { DropdownOption, OptionValue } from 'lib/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 '../badge/Badge.vue.d';
+import { WangsIcons } from '../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;
+};
 
 /**
  * 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?: DropdownOption[] | 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: DropdownOption }>;
-  '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': [];
 };
 
 /**
@@ -243,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;