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

package/components/menu/Menu.vue.d.ts

@@ -0,0 +1,390 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ *
+ * Menu is a navigation / command component that supports dynamic and static positioning.
+ *
+ * [Live Demo](https://www.WangsVue.org/menu/)
+ *
+ * @module menu
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { MenuItem } from '../menuitem';
+import {
+    ClassComponent,
+    GlobalComponentConstructor,
+    PassThrough,
+} from '../ts-helpers';
+
+export declare type MenuPassThroughOptionType =
+    | MenuPassThroughAttributes
+    | ((
+          options: MenuPassThroughMethodOptions,
+      ) => MenuPassThroughAttributes | string)
+    | string
+    | null
+    | undefined;
+
+export declare type MenuPassThroughTransitionType =
+    | TransitionProps
+    | ((options: MenuPassThroughMethodOptions) => TransitionProps)
+    | undefined;
+
+export interface MenuLocaleConfig {
+    /**
+     * The label of menu when no selectable menu available.
+     */
+    noOptionLabel?: string;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenuPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: MenuProps;
+    /**
+     * Defines current inline state.
+     */
+    state: MenuState;
+    /**
+     * Defines current options.
+     */
+    context: MenuContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenuProps.pt}
+ */
+export interface MenuPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list's DOM element.
+     */
+    menu?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the submenu header's DOM element.
+     */
+    submenuHeader?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the action's DOM element.
+     */
+    action?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the icon's DOM element.
+     */
+    icon?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    label?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator's DOM element.
+     */
+    separator?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the start of the component.
+     */
+    start?: MenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the end of the component.
+     */
+    end?: MenuPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link basecomponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: MenuPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Menu component.
+ */
+export interface MenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Focused option index.
+     */
+    focusedOptionIndex: number;
+    /**
+     * Selected option index.
+     */
+    selectedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid router binding props in Menu component.
+ */
+export interface MenuRouterBindProps {
+    /**
+     * Action element binding
+     */
+    action: object;
+    /**
+     * Icon element binding
+     */
+    icon: object;
+    /**
+     * Label element binding
+     */
+    label: object;
+}
+
+/**
+ * Defines valid properties in Menu component.
+ */
+export interface MenuProps {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Defines if menu would displayed as a popup.
+     * @defaultValue true
+     */
+    popup?: boolean | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+     * @defaultValue body
+     */
+    appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+     * @deprecated since v3.40.0.
+     * @defaultValue true
+     */
+    exact?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | string | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {MenuPassThroughOptions}
+     */
+    pt?: PassThrough<MenuPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Menu component.
+ */
+export interface MenuSlots {
+    /**
+     * Custom start template.
+     */
+    start(): VNode[];
+    /**
+     * Custom end template.
+     */
+    end(): VNode[];
+    /**
+     * Custom item template.
+     * @param {Object} scope - item slot's params.
+     */
+    item(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: MenuRouterBindProps;
+    }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom item template.
+     * @param {Object} scope - submenuheader slot's params.
+     */
+    submenuheader(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in Menu component.
+ */
+export type MenuEmits = {
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus: [event: Event];
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur: [event: Event];
+};
+
+/**
+ * **WangsVue - Menu**
+ *
+ * _Menu is a navigation / command component that supports dynamic and static positioning._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
+    /**
+     * Toggles the visibility of the overlay.
+     * @param {Event} event - Browser event.
+     *
+     * @memberof Menu
+     */
+    toggle(event: Event): void;
+    /**
+     * Shows the overlay.
+     * @param {Event} event - Browser event.
+     * @param {*} [target] - Target element
+     *
+     * @memberof Menu
+     */
+    show(event: Event, target?: any): void;
+    /**
+     * Hides the overlay.
+     *
+     * @memberof Menu
+     */
+    hide(): void;
+}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Menu: GlobalComponentConstructor<Menu>;
+    }
+}
+
+export default Menu;

package/components/menu/helpers/filterMenu.helper.d.ts

@@ -0,0 +1,15 @@
+import { MenuItem } from '../../menuitem';
+/**
+ * Filters the menu items to return only the visible ones.
+ * If no visible menu items are found, it returns a menu with a label 'No Option Available'.
+ *
+ * @param menuItems - The array of menu items to filter.
+ * @param noOptionLabel - The label of menu to be shown when no available option. The value is from locale configuration each project.
+ *
+ * @returns - The array of visible menu items or an array with a single menu item with label 'No Option Available'.
+ */
+declare const filterVisibleMenu: (
+    menuItems: MenuItem[],
+    noOptionLabel?: string,
+) => MenuItem[];
+export default filterVisibleMenu;

package/components/menu/helpers/index.d.ts

@@ -0,0 +1 @@
+export { default as filterVisibleMenu } from './filterMenu.helper';

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

@@ -0,0 +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;
+            }>
+        >
+    >,
+    {},
+    {}
+>;
+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;
+          };
+};

package/components/menuitem/index.d.ts

@@ -0,0 +1,106 @@
+import { WangsIcons } from '../icon/Icon.vue.d';
+
+/**
+ *
+ * WangsVue menu components share a common api to specify the menuitems and submenus.
+ *
+ * @module menuitem
+ *
+ */
+
+/**
+ * Custom command event.
+ *  @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;
+}
+
+/**
+ * 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;
+}