@fewangsit/wangsvue-fats 1.0.0-alpha.21 → 1.0.0-alpha.23

package/components/menuitem/MenuItem.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { WangsIcons } from 'lib/components/icon/Icon.vue.d';
+import { MenuRouterBindProps } from '../menu/Menu.vue.d';
+import { MenuItem } from '.';
+import Icon from '../icon/Icon.vue';
+
+const props = defineProps<{
+  item: MenuItem;
+  routerProps: MenuRouterBindProps;
+}>();
+</script>
+
+<template>
+  <router-link
+    v-slot="{ href, navigate }"
+    v-if="props.item.route"
+    :to="props.item.route"
+    custom
+  >
+    <a :href="href" v-bind="routerProps?.action" @click="navigate">
+      <Icon
+        v-if="props.item.icon"
+        v-bind="routerProps?.icon"
+        :icon="props.item.icon"
+      />
+      <span v-bind="routerProps?.label">{{ props.item.label }}</span>
+    </a>
+  </router-link>
+
+  <a
+    v-else-if="props.item.url"
+    :href="props.item.url"
+    :target="props.item.target"
+    v-bind="routerProps?.action"
+    @click.stop
+  >
+    <Icon
+      v-if="props.item.icon"
+      v-bind="routerProps?.icon"
+      :icon="props.item.icon as WangsIcons"
+    />
+    <span v-bind="routerProps?.label">{{ props.item.label }}</span>
+  </a>
+
+  <a
+    v-else
+    v-bind="routerProps?.action"
+    aria-hidden="true"
+    data-pc-section="action"
+    tabindex="-1"
+  >
+    <Icon
+      v-if="props.item.icon"
+      :icon="props.item.icon as WangsIcons"
+      :severity="props.item.danger ? 'danger' : undefined"
+      v-bind="routerProps?.icon"
+    />
+
+    <span
+      v-bind="
+        $preset.menu?.label({
+          props: { danger: props.item.danger },
+        })
+      "
+      data-pc-section="label"
+    >
+      {{ props.item.label }}
+    </span>
+  </a>
+</template>

package/components/menuitem/MenuItem.vue.d.ts

@@ -1,19 +1,39 @@
 import { MenuRouterBindProps } from '../menu/Menu.vue.d';
 import { MenuItem } from '.';
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
-    item: MenuItem;
-    routerProps: MenuRouterBindProps;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
-    item: MenuItem;
-    routerProps: MenuRouterBindProps;
-}>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<
+    __VLS_TypePropsToOption<{
+        item: MenuItem;
+        routerProps: MenuRouterBindProps;
+    }>,
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').PublicProps,
+    Readonly<
+        import('vue').ExtractPropTypes<
+            __VLS_TypePropsToOption<{
+                item: MenuItem;
+                routerProps: MenuRouterBindProps;
+            }>
+        >
+    >,
+    {},
+    {}
+>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+          }
+        : {
+              type: import('vue').PropType<T[K]>;
+              required: true;
+          };
 };

package/components/menuitem/index.d.ts

@@ -13,94 +13,94 @@ import { WangsIcons } from '../icon/Icon.vue.d';
  *  @todo next release should be able to change see menuItem.command
  */
 export interface MenuItemCommandEvent {
-  /**
-   * Browser event.
-   */
-  originalEvent: Event;
-  /**
-   * Menuitem instance.
-   */
-  item: MenuItem;
-  /**
-   * Optional
-   */
-  [key: string]: any;
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Menuitem instance.
+     */
+    item: MenuItem;
+    /**
+     * Optional
+     */
+    [key: string]: any;
 }
 
 /**
  * Defines model of MenuItem API.
  */
 export interface MenuItem {
-  /**
-   * Property name or getter function to use as the label of an item.
-   */
-  label?: string | ((...args: any) => string) | undefined;
-  /**
-   * Icon of the item.
-   */
-  icon?: WangsIcons | undefined;
-  /**
-   * Callback to execute when item is clicked.
-   * @param {MenuItemCommandEvent} event - Custom command event.
-   * @todo next release should be able to change
-   */
-  command?: (event: MenuItemCommandEvent) => void;
-  /**
-   * External link to navigate when item is clicked.
-   */
-  url?: string | undefined;
-  /**
-   * Specifies where to open the linked document.
-   */
-  target?: string | undefined;
-  /**
-   * Internal/ vue router link to navigate when item is clicked.
-   */
-  route?: string | undefined;
-  /**
-   * 	An array of children menuitems.
-   */
-  items?: MenuItem[] | undefined;
-  /**
-   * A boolean or a function to return a boolean to specify if the item is disabled.
-   * @defaultValue false
-   */
-  disabled?: boolean | ((...args: any) => boolean) | undefined;
-  /**
-   * A boolean or a function to return a boolean to specify if the item is visible.
-   * @defaultValue true
-   */
-  visible?: boolean | ((...args: any) => boolean) | undefined;
-  /**
-   * A boolean or to specify if the item has danger severity.
-   * @defaultValue false
-   */
-  danger?: boolean | undefined;
-  /**
-   * Defines the item as a separator.
-   * @defaultValue false
-   */
-  separator?: boolean | undefined;
-  /**
-   * Inline style of the menuitem.
-   */
-  style?: any;
-  /**
-   * Style class of the menuitem.
-   */
-  class?: any;
-  /**
-   * Unique identifier of an item.
-   */
-  key?: string | undefined;
-  /**
-   * Specify if the there is additional slot for the selected menuitem.
-   * Only work on BulkAction when BulkActionProps.selectMenuType is "dropdown".
-   *
-   */
-  useAdditionSlot?: boolean;
-  /**
-   * Optional
-   */
-  [key: string]: any;
+    /**
+     * Property name or getter function to use as the label of an item.
+     */
+    label?: string | ((...args: any) => string) | undefined;
+    /**
+     * Icon of the item.
+     */
+    icon?: WangsIcons | undefined;
+    /**
+     * Callback to execute when item is clicked.
+     * @param {MenuItemCommandEvent} event - Custom command event.
+     * @todo next release should be able to change
+     */
+    command?: (event: MenuItemCommandEvent) => void;
+    /**
+     * External link to navigate when item is clicked.
+     */
+    url?: string | undefined;
+    /**
+     * Specifies where to open the linked document.
+     */
+    target?: string | undefined;
+    /**
+     * Internal/ vue router link to navigate when item is clicked.
+     */
+    route?: string | undefined;
+    /**
+     * 	An array of children menuitems.
+     */
+    items?: MenuItem[] | undefined;
+    /**
+     * A boolean or a function to return a boolean to specify if the item is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | ((...args: any) => boolean) | undefined;
+    /**
+     * A boolean or a function to return a boolean to specify if the item is visible.
+     * @defaultValue true
+     */
+    visible?: boolean | ((...args: any) => boolean) | undefined;
+    /**
+     * A boolean or to specify if the item has danger severity.
+     * @defaultValue false
+     */
+    danger?: boolean | undefined;
+    /**
+     * Defines the item as a separator.
+     * @defaultValue false
+     */
+    separator?: boolean | undefined;
+    /**
+     * Inline style of the menuitem.
+     */
+    style?: any;
+    /**
+     * Style class of the menuitem.
+     */
+    class?: any;
+    /**
+     * Unique identifier of an item.
+     */
+    key?: string | undefined;
+    /**
+     * Specify if the there is additional slot for the selected menuitem.
+     * Only work on BulkAction when BulkActionProps.selectMenuType is "dropdown".
+     *
+     */
+    useAdditionSlot?: boolean;
+    /**
+     * Optional
+     */
+    [key: string]: any;
 }

package/components/multiselect/MultiSelect.vue.d.ts

@@ -1,159 +1,161 @@
-import { DropdownLocaleConfig } from '../dropdown/Dropdown.vue.d';
+import {
+    DropdownLocaleConfig,
+    Option,
+    OptionValue,
+} from '../dropdown/Dropdown.vue.d';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-import { MultiSelectOption, OptionValue } from 'lib/types/options.type';
-
 export type MultiSelectLocaleConfig = DropdownLocaleConfig & {};
 
 /**
  * MultiSelect component props
  */
 export interface MultiSelectProps {
-  modelValue?: OptionValue[];
-
-  /**
-   * If you deals with form validation on edit form action, you can set the initial value of the field.
-   */
-  initialValue?: OptionValue[];
-
-  /**
-   * The field label. Tell the user what field input is this.
-   */
-  label?: string;
-
-  /**
-   * List of options to display.
-   */
-  options?: MultiSelectOption[] | string[];
-
-  /**
-   * 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;
-
-  /**
-   * 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'>;
-
-  /**
-   * 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 'multiSelect'
-   */
-  fieldName?: string;
-
-  /**
-   * Default text to display when no option is selected.
-   *
-   * @default `Select ${label}`
-   */
-  placeholder?: string;
-
-  /**
-   * Whether the MultiSelect 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;
-
-  /**
-   * Hide the input and controls the overlay state from parent component.
-   */
-  controls?: boolean;
-
-  /**
-   * Disabled state.
-   */
-  disabled?: boolean;
-
-  /**
-   * Wether show the Dropdown option search or not.
-   *
-   * @default true,
-   */
-  filter?: boolean;
-
-  /**
-   * The filter input Placeholder
-   *
-   * @default 'Search' from Global Locale Config
-   */
-  filterPlaceholder?: string;
-
-  /**
-   * Defines how the selected items are displayed.
-   *
-   * @default 'chip'
-   */
-  display?: 'comma' | 'chip';
-
-  /**
-   * Label to display after exceeding max selected labels.
-   */
-  selectedItemsLabel?: string;
-
-  /**
-   * Decides how many selected item labels to show at most.
-   */
-  maxSelectedLabels?: number;
+    modelValue?: OptionValue[];
+
+    /**
+     * If you deals with form validation on edit form action, you can set the initial value of the field.
+     */
+    initialValue?: OptionValue[];
+
+    /**
+     * The field label. Tell the user what field input is this.
+     */
+    label?: string;
+
+    /**
+     * List of options to display.
+     */
+    options?: Option[] | string[];
+
+    /**
+     * 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;
+
+    /**
+     * 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'>;
+
+    /**
+     * 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 'multiSelect'
+     */
+    fieldName?: string;
+
+    /**
+     * Default text to display when no option is selected.
+     *
+     * @default `Select ${label}`
+     */
+    placeholder?: string;
+
+    /**
+     * Whether the MultiSelect 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;
+
+    /**
+     * Hide the input and controls the overlay state from parent component.
+     */
+    controls?: boolean;
+
+    /**
+     * Disabled state.
+     */
+    disabled?: boolean;
+
+    /**
+     * Wether show the Dropdown option search or not.
+     *
+     * @default true,
+     */
+    filter?: boolean;
+
+    /**
+     * The filter input Placeholder
+     *
+     * @default 'Search' from Global Locale Config
+     */
+    filterPlaceholder?: string;
+
+    /**
+     * Defines how the selected items are displayed.
+     *
+     * @default 'chip'
+     */
+    display?: 'comma' | 'chip';
+
+    /**
+     * Label to display after exceeding max selected labels.
+     */
+    selectedItemsLabel?: string;
+
+    /**
+     * Decides how many selected item labels to show at most.
+     */
+    maxSelectedLabels?: number;
 }
 
 /**
  * MultiSelect component emits
  */
 export type MultiSelectEmits = {
-  /**
-   * Emits when an option selected.
-   */
-  'update:modelValue': [value: OptionValue[] | undefined];
-
-  /**
-   * Emits when overlay shown.
-   */
-  'show': [];
-
-  /**
-   * Emits when overlay hidden.
-   */
-  'hide': [];
+    /**
+     * Emits when an option selected.
+     */
+    'update:modelValue': [value: OptionValue[] | undefined];
+
+    /**
+     * Emits when overlay shown.
+     */
+    'show': [];
+
+    /**
+     * Emits when overlay hidden.
+     */
+    'hide': [];
 };
 
 /**
@@ -164,29 +166,29 @@ export type MultiSelectEmits = {
  * @group Component
  */
 declare class MultiSelect extends ClassComponent<
-  MultiSelectProps,
-  unknown,
-  MultiSelectEmits
+    MultiSelectProps,
+    unknown,
+    MultiSelectEmits
 > {
-  /**
-   * Shows the overlay.
-   *
-   * @memberof MultiSelect
-   */
-  showOverlay(): void;
-
-  /**
-   * Hides the overlay.
-   *
-   * @memberof MultiSelect
-   */
-  hideHideOverlay(): void;
+    /**
+     * Shows the overlay.
+     *
+     * @memberof MultiSelect
+     */
+    showOverlay(): void;
+
+    /**
+     * Hides the overlay.
+     *
+     * @memberof MultiSelect
+     */
+    hideHideOverlay(): void;
 }
 
 declare module '@vue/runtime-core' {
-  interface GlobalComponents {
-    MultiSelect: GlobalComponentConstructor<MultiSelect>;
-  }
+    interface GlobalComponents {
+        MultiSelect: GlobalComponentConstructor<MultiSelect>;
+    }
 }
 
 export default MultiSelect;