@wener/console/lib/daisy/DaisyDropdownMenu.stories.js

Base console UI toolkit

import React from "react";
import { DaisyDropdownMenu } from "./DaisyDropdownMenu.js";
var meta = {
    title: "daisy/DaisyDropdownMenu",
    component: DaisyDropdownMenu.Composite,
    parameters: {
        layout: "centered"
    },
    tags: [
        "autodocs"
    ]
};
export default meta;
var basicItems = [
    {
        label: "Profile",
        icon: "\uD83D\uDC64"
    },
    {
        label: "Settings",
        icon: "\u2699\uFE0F"
    },
    {
        type: "separator"
    },
    {
        label: "Logout",
        icon: "\uD83D\uDEAA"
    }
];
var complexItems = [
    {
        type: "label",
        label: "Account"
    },
    {
        label: "Profile",
        icon: "\uD83D\uDC64"
    },
    {
        label: "Billing",
        icon: "\uD83D\uDCB3"
    },
    {
        label: "Settings",
        icon: "\u2699\uFE0F"
    },
    {
        type: "separator"
    },
    {
        type: "label",
        label: "Actions"
    },
    {
        label: "New Project",
        icon: "\u2795"
    },
    {
        label: "Import",
        icon: "\uD83D\uDCE5"
    },
    {
        label: "Export",
        icon: "\uD83D\uDCE4"
    },
    {
        type: "separator"
    },
    {
        label: "Help",
        icon: "\u2753"
    },
    {
        label: "Logout",
        icon: "\uD83D\uDEAA"
    }
];
export var Basic = {
    args: {
        items: basicItems,
        children: /*#__PURE__*/ React.createElement("button", {
            className: "btn"
        }, "Menu")
    }
};
export var WithTrigger = {
    render: function () {
        return /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Composite, {
            items: basicItems,
            trigger: /*#__PURE__*/ React.createElement("button", {
                className: "btn btn-primary"
            }, "Open Menu")
        });
    }
};
export var Complex = {
    args: {
        items: complexItems,
        children: /*#__PURE__*/ React.createElement("button", {
            className: "btn btn-outline"
        }, "Actions")
    }
};
export var WithPortal = {
    args: {
        items: basicItems,
        portal: true,
        children: /*#__PURE__*/ React.createElement("button", {
            className: "btn btn-secondary"
        }, "Portal Menu")
    }
};
export var CustomTrigger = {
    render: function () {
        return /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Composite, {
            items: basicItems
        }, /*#__PURE__*/ React.createElement("div", {
            className: "avatar"
        }, /*#__PURE__*/ React.createElement("div", {
            className: "ring-primary ring-offset-base-100 w-10 rounded-full ring ring-offset-2"
        }, /*#__PURE__*/ React.createElement("img", {
            src: "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp",
            alt: "Avatar"
        }))));
    }
};
export var ManualComposition = {
    render: function () {
        return /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Root, null, /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Trigger, null, "Manual Menu"), /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Portal, null, /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Positioner, null, /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Popup, {
            className: "menu menu-sm rounded-box bg-base-200 z-30 w-52"
        }, /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Item, null, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Item 1"))), /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Item, null, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Item 2"))), /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Separator, {
            className: "bg-base-300 m-[5px] h-px"
        }), /*#__PURE__*/ React.createElement(DaisyDropdownMenu.Item, null, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Item 3")))))));
    }
};