@shopware-ag/meteor-component-library/dist/common/MtPriorityPlusNavigation.d.ts

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import { PropType } from 'vue';
export interface ItemBase {
    hidden?: boolean;
    [key: string]: any;
}
/**
 * A flexible priority plus navigation component.
 * For reference see: https://css-tricks.com/the-priority-navigation-pattern/
 *
 * @example
 * <mt-priority-plus-navigation
 *  :list="[
 *     { name: 'Home', url: '/' },
 *     { name: 'About', url: '/about' },
 *   ]"
 *   identifier="name"
 *   #default="{ mainItems, moreItems }"
 * >
 *   <template v-for="item in mainItems">
 *      <a
 *        :href="item.url"
 *        :data-priority-plus="item.name"
 *      >
 *        {{ item.name }}
 *      </a>
 *   </template>
 *
 *   <mt-context-button
 *     v-if="moreItems.length"
 *     ref="more-items-button"
 *     :has-error="moreItems.some(i => i.hasError)"
 *   >
 *     <template #button-text>More</template>
 *
 *     <mt-context-menu-item
 *      v-for="item in moreItems"
 *     >
 *     </mt-context-menu-item>
 *   </mt-context-button>
 * </mt-priority-plus-navigation>
 */
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    /**
     * The list of navigation items to display.
     */
    list: {
        type: PropType<ItemBase[]>;
        required: true;
        default(): never[];
    };
    /**
     * The offset factor is used to multiply the width of the last visible item for the more button offset.
     */
    offsetFactor: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * The property used to identify the items in the list.
     */
    identifier: {
        type: StringConstructor;
        required: false;
        default: string;
    };
}>, {}, {
    accumItemWidths: any[];
    hiddenItemIdentifiers: string[];
}, {
    /**
     * The items which are currently displayed.
     */
    mainItems(): ItemBase[];
    /**
     * The items which are currently hidden.
     */
    moreItems(): ItemBase[];
    hasHiddenItems(): boolean;
    /**
     * The HTML elements of the visible items.
     */
    visibleElements(): {
        [key: string]: Element;
    };
    /**
     * The last visible HTML element.
     */
    lastVisibleElement(): Element;
}, {
    storeItemWidths(): void;
    getContainerWidth(): number;
    getLastVisibleItemIndex(): number;
    handleResize(): Promise<void>;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    /**
     * The list of navigation items to display.
     */
    list: {
        type: PropType<ItemBase[]>;
        required: true;
        default(): never[];
    };
    /**
     * The offset factor is used to multiply the width of the last visible item for the more button offset.
     */
    offsetFactor: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * The property used to identify the items in the list.
     */
    identifier: {
        type: StringConstructor;
        required: false;
        default: string;
    };
}>> & Readonly<{}>, {
    list: ItemBase[];
    offsetFactor: number;
    identifier: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;