@oruga-ui/oruga-next/dist/cjs/sidebar.cjs.map

UI components for Vue.js and CSS framework agnostic

{"version":3,"file":"sidebar.cjs","sources":["../../src/components/sidebar/Sidebar.vue","../../src/components/sidebar/useSidebarProgrammatic.ts","../../src/components/sidebar/index.ts"],"sourcesContent":["<script setup lang=\"ts\" generic=\"C extends Component\">\nimport {\n    ref,\n    computed,\n    watch,\n    onMounted,\n    useTemplateRef,\n    type Component,\n} from \"vue\";\n\nimport { getDefault } from \"@/utils/config\";\nimport { isClient } from \"@/utils/ssr\";\nimport {\n    defineClasses,\n    useClickOutside,\n    useEventListener,\n    useMatchMedia,\n    usePreventScrolling,\n    useTrapFocus,\n    useTeleportDefault,\n} from \"@/composables\";\nimport type { CloseEventArgs } from \"../programmatic\";\n\nimport type { SidebarProps } from \"./props\";\n\n/**\n * A sidebar to use as overlay.\n * @displayName Sidebar\n * @style _sidebar.scss\n */\ndefineOptions({\n    isOruga: true,\n    name: \"OSidebar\",\n    configField: \"sidebar\",\n    inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<SidebarProps<C>>(), {\n    override: undefined,\n    active: false,\n    overlay: () => getDefault(\"sidebar.overlay\", false),\n    inline: false,\n    position: () => getDefault(\"sidebar.position\", \"left\"),\n    fullheight: () => getDefault(\"sidebar.fullheight\", false),\n    fullwidth: () => getDefault(\"sidebar.fullwidth\", false),\n    reduce: () => getDefault(\"sidebar.reduce\", false),\n    mobile: () => getDefault(\"sidebar.mobile\"),\n    expandOnHover: () => getDefault(\"sidebar.expandOnHover\", false),\n    animation: () => getDefault(\"sidebar.animation\"),\n    cancelable: () => getDefault(\"sidebar.cancelable\", [\"escape\", \"outside\"]),\n    trapFocus: () => getDefault(\"sidebar.trapFocus\", true),\n    clipScroll: () => getDefault(\"sidebar.clipScroll\", false),\n    mobileBreakpoint: () => getDefault(\"sidebar.mobileBreakpoint\"),\n    teleport: () => getDefault(\"sidebar.teleport\", false),\n    component: undefined,\n    props: undefined,\n    events: undefined,\n});\n\nconst emits = defineEmits<{\n    /**\n     * active prop two-way binding\n     * @param value {boolean} - updated active prop\n     */\n    \"update:active\": [value: boolean];\n    /**\n     * on component close event\n     * @param value {string} - close event method\n     */\n    close: [...args: [] | [string] | CloseEventArgs<C>];\n}>();\n\nconst { vTrapFocus } = useTrapFocus();\n\nconst rootRef = useTemplateRef(\"rootElement\");\nconst contentRef = useTemplateRef(\"contentElement\");\n\nconst isActive = defineModel<boolean>(\"active\", { default: false });\n\nconst { isMobile } = useMatchMedia(props.mobileBreakpoint);\n\nconst _teleport = computed(() =>\n    typeof props.teleport === \"boolean\"\n        ? { to: useTeleportDefault(), disabled: !props.teleport }\n        : { to: props.teleport, disabled: false },\n);\n\nconst transitionName = computed(() => {\n    if (props.animation) return props.animation;\n\n    const vertical = props.position === \"top\" || props.position === \"bottom\";\n    const right = props.position === \"right\";\n    const open = right ? !isActive.value : isActive.value;\n\n    return open\n        ? vertical\n            ? \"slide-down\"\n            : \"slide-next\"\n        : vertical\n          ? \"slide-up\"\n          : \"slide-prev\";\n});\n\nconst hideOnMobile = computed(\n    () => props.mobile === \"hidden\" && isMobile.value,\n);\n\nconst toggleScroll = usePreventScrolling(props.clipScroll);\n\nwatch(\n    isActive,\n    (value) => {\n        if (props.overlay) toggleScroll(value);\n    },\n    { flush: \"post\" },\n);\n\nonMounted(() => {\n    if (isActive.value && props.overlay) toggleScroll(true);\n});\n\n// --- Events Feature ---\n\nif (isClient) {\n    // register onKeyPress event listener when is active\n    useEventListener(rootRef, \"keyup\", onKeyPress, { trigger: isActive });\n\n    if (!props.overlay)\n        // register outside click event listener when is active\n        useClickOutside(contentRef, clickedOutside, { trigger: isActive });\n}\n\n/** Keypress event that is bound to the document. */\nfunction onKeyPress(event: KeyboardEvent): void {\n    if (!isActive.value) return;\n    if (event.key === \"Escape\" || event.key === \"Esc\") cancel(\"escape\");\n}\n\n/** Close fixed sidebar if clicked outside. */\nfunction clickedOutside(event: Event): void {\n    if (props.inline || !isActive.value || isAnimating.value) return;\n    if (\n        props.overlay ||\n        (contentRef.value && !event.composedPath().includes(contentRef.value))\n    )\n        event.preventDefault();\n    cancel(\"outside\");\n}\n\n/**\n * Check if method is cancelable.\n * Call close() with action `cancel`.\n * @param method Cancel method\n */\nfunction cancel(method: string): void {\n    // check if method is cancelable\n    if (\n        (typeof props.cancelable === \"boolean\" && !props.cancelable) ||\n        !props.cancelable ||\n        (Array.isArray(props.cancelable) && !props.cancelable.includes(method))\n    )\n        return;\n    close(method);\n}\n\n/** set active to false and emit close event */\nfunction close(...args: [] | [string] | CloseEventArgs<C>): void {\n    isActive.value = false;\n    emits(\"close\", ...args);\n}\n\n// --- Animation Feature ---\n\nconst isAnimating = ref(!props.active);\n\n/** Transition after-enter hook */\nfunction afterEnter(): void {\n    isAnimating.value = false;\n}\n\n/** Transition before-leave hook */\nfunction beforeLeave(): void {\n    isAnimating.value = true;\n}\n\n// --- Computed Component Classes ---\n\nconst rootClasses = defineClasses(\n    [\"rootClass\", \"o-sidebar\"],\n    [\"mobileClass\", \"o-sidebar--mobile\", null, isMobile],\n    [\"activeClass\", \"o-sidebar--active\", null, isActive],\n    [\n        \"teleportClass\",\n        \"o-sidebar--teleport\",\n        null,\n        computed(() => !!props.teleport),\n    ],\n    [\"inlineClass\", \"o-sidebar--inline\", null, computed(() => props.inline)],\n);\n\nconst overlayClasses = defineClasses([\"overlayClass\", \"o-sidebar__overlay\"]);\n\nconst contentClasses = defineClasses(\n    [\"contentClass\", \"o-sidebar__content\"],\n    [\n        \"positionClass\",\n        \"o-sidebar__content--\",\n        computed(() => props.position),\n        computed(() => !!props.position),\n    ],\n    [\n        \"fullheightClass\",\n        \"o-sidebar__content--fullheight\",\n        null,\n        computed(() => props.fullheight),\n    ],\n    [\n        \"fullwidthClass\",\n        \"o-sidebar__content--fullwidth\",\n        null,\n        computed(\n            () =>\n                props.fullwidth ||\n                (isMobile.value && props.mobile === \"expanded\"),\n        ),\n    ],\n    [\n        \"reduceClass\",\n        \"o-sidebar__content--reduced\",\n        null,\n        computed(\n            () =>\n                props.reduce || (isMobile.value && props.mobile === \"reduced\"),\n        ),\n    ],\n    [\n        \"expandOnHoverClass\",\n        \"o-sidebar__content--hover-expand\",\n        null,\n        computed(\n            () =>\n                props.expandOnHover &&\n                (!isMobile.value || props.mobile !== \"expanded\"),\n        ),\n    ],\n    [\"visibleClass\", \"o-sidebar__content--visible\", null, isActive],\n    [\n        \"hiddenClass\",\n        \"o-sidebar__content--hidden\",\n        null,\n        computed(() => !isActive.value),\n    ],\n);\n// --- Expose Public Functionalities ---\n\n/** expose functionalities for programmatic usage */\ndefineExpose({ close });\n</script>\n\n<template>\n    <Teleport :to=\"_teleport.to\" :disabled=\"_teleport.disabled\">\n        <div\n            v-show=\"!hideOnMobile\"\n            ref=\"rootElement\"\n            v-bind=\"$attrs\"\n            v-trap-focus=\"trapFocus && isActive && !inline\"\n            data-oruga=\"sidebar\"\n            :class=\"rootClasses\">\n            <div\n                v-if=\"overlay && isActive\"\n                :class=\"overlayClasses\"\n                :tabindex=\"-1\"\n                @click=\"clickedOutside\" />\n\n            <transition\n                :name=\"transitionName\"\n                @after-enter=\"afterEnter\"\n                @before-leave=\"beforeLeave\">\n                <div\n                    v-show=\"isActive\"\n                    ref=\"contentElement\"\n                    :class=\"contentClasses\">\n                    <!--\n                        @slot Sidebar default content, default is component prop\n                        @binding {(...args): void} close - function to close the component\n                    -->\n                    <slot :close=\"close\">\n                        <!-- injected component for programmatic usage -->\n                        <component\n                            :is=\"component\"\n                            v-if=\"component\"\n                            v-bind=\"$props.props\"\n                            v-on=\"$props.events || {}\"\n                            @close=\"close\" />\n                    </slot>\n                </div>\n            </transition>\n        </div>\n    </Teleport>\n</template>\n","import {\n    type Component,\n    type ComponentInternalInstance,\n    type MaybeRefOrGetter,\n} from \"vue\";\nimport {\n    InstanceRegistry,\n    ComponentProgrammatic,\n    type ProgrammaticComponentOptions,\n    type ProgrammaticExpose,\n} from \"../programmatic\";\n\nimport Sidebar from \"./Sidebar.vue\";\n\nimport type { SidebarProps } from \"./props\";\n\ndeclare module \"../../index\" {\n    interface OrugaProgrammatic {\n        sidebar: typeof SidebarProgrammatic;\n    }\n}\n\n/** sidebar component programmatic instance registry */\nconst registry = new InstanceRegistry<ComponentInternalInstance>();\n\n/** useSidebarProgrammatic composable options */\nexport type SidebarProgrammaticOptions<C extends Component> = Readonly<\n    SidebarProps<C>\n> &\n    ProgrammaticComponentOptions<typeof Sidebar<C>>;\n\nconst SidebarProgrammatic = {\n    /** Returns the number of registered active instances. */\n    count: registry.count,\n    /**\n     * Create a new programmatic sidebar component instance.\n     * @param options sidebar component props object\n     * @param target specify a target the component get rendered into - default is `document.body`\n     * @returns ProgrammaticExpose\n     */\n    open<C extends Component>(\n        options: SidebarProgrammaticOptions<C>,\n        target?: MaybeRefOrGetter<string | HTMLElement | null>,\n    ): ProgrammaticExpose<typeof Sidebar<C>> {\n        const componentProps: SidebarProps<C> = {\n            active: true, // set the active default state to true\n            ...options,\n        };\n\n        // create programmatic component\n        return ComponentProgrammatic.open(Sidebar, {\n            registry, // custom programmatic instance registry\n            target, // target the component get rendered into\n            props: componentProps, // component specific props\n            onClose: options.onClose, // on close event handler\n        });\n    },\n    /** Close the last registred instance in the sidebar programmatic instance registry. */\n    close(...args: unknown[]): void {\n        registry.last()?.exposed?.close(...args);\n    },\n    /** Close all instances in the programmatic sidebar instance registry. */\n    closeAll(...args: unknown[]): void {\n        registry.walk((entry) => entry.exposed?.close(...args));\n    },\n};\n\nexport default SidebarProgrammatic;\n","import type { App, Plugin } from \"vue\";\n\nimport Sidebar from \"./Sidebar.vue\";\nimport SidebarProgrammatic from \"./useSidebarProgrammatic\";\n\nimport {\n    registerComponent,\n    registerComponentProgrammatic,\n} from \"@/utils/plugins\";\n\n/** export sidebar specific types */\nexport type { SidebarProgrammaticOptions } from \"./useSidebarProgrammatic\";\n\n/** export sidebar plugin */\nexport default {\n    install(app: App) {\n        registerComponent(app, Sidebar);\n        registerComponentProgrammatic(app, \"sidebar\", SidebarProgrammatic);\n    },\n} as Plugin;\n\n/** export sidebar components & composables */\nexport { Sidebar as OSidebar, SidebarProgrammatic };\n"],"names":["useTrapFocus","useTemplateRef","_useModel","useMatchMedia","computed","useTeleportDefault","usePreventScrolling","watch","onMounted","isClient","useEventListener","useClickOutside","ref","defineClasses","InstanceRegistry","ComponentProgrammatic","Sidebar","registerComponent","registerComponentProgrammatic"],"mappings":"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"}