Menu

This plugin provides an easy way to launch menus. It's designed to show simple and complex content with a number of properties and slots.

All slots provide the menu controller, which allows you to control the status of the menu.

Learn more about popups and t-menu.

Basic

import { TButton, TCell, TDivider } from "@dija/tohama-components";
import { useMenu } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const menu = useMenu();

    const onClick = (event: MouseEvent) => {
      void menu.show({
        event: event,
        content: () => (
          <TCell py="xs">
            <TButton color="primary" icon="mdi:phone" onClick={() => {}}>
              Call Phone Number
            </TButton>
            <TButton color="success" icon="mdi:account-circle" onClick={() => {}}>
              Update Account
            </TButton>
            <TButton color="alert" icon="mdi:book" onClick={() => {}}>
              Create New Post
            </TButton>
            <TButton color="danger" icon="mdi:star" onClick={() => {}}>
              Favorites
            </TButton>
            <TDivider my="xs" />
            <TButton color="secondary" icon="mdi:account-alert" onClick={() => {}}>
              Review Account
            </TButton>
          </TCell>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={onClick}>
        Launch Menu
      </TButton>
    );
  },
});

Inner Slots

import { TButton, TCard, TCell, TDivider, TText } from "@dija/tohama-components";
import { useMenu } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const menu = useMenu();

    const onClick = (event: MouseEvent) => {
      void menu.show({
        event: event,
        prepend: () => (
          <>
            <TCard design="flat" py="md" px>
              <TText>Select an Option</TText>
            </TCard>
            <TDivider />
          </>
        ),
        append: () => (
          <>
            <TDivider />
            <TCard design="flat" py="md" px>
              <TText size="xs">Account updated yesterday</TText>
            </TCard>
          </>
        ),
        content: () => (
          <TCell py="xs">
            <TButton color="primary" icon="mdi:phone" onClick={() => {}}>
              Call Phone Number
            </TButton>
            <TButton color="success" icon="mdi:account-circle" onClick={() => {}}>
              Update Account
            </TButton>
            <TButton color="alert" icon="mdi:book" onClick={() => {}}>
              Create New Post
            </TButton>
            <TButton color="danger" icon="mdi:star" onClick={() => {}}>
              Favorites
            </TButton>
            <TDivider my="xs" />
            <TButton color="secondary" icon="mdi:account-alert" onClick={() => {}}>
              Review Account
            </TButton>
          </TCell>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={onClick}>
        Launch Menu
      </TButton>
    );
  },
});

Outer Slots

import { TAvatar, TButton, TCard, TCell, TDivider, TFlex, TText } from "@dija/tohama-components";
import { useMenu } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const menu = useMenu();

    const onClick = (event: MouseEvent) => {
      void menu.show({
        event: event,
        size: "lg",
        transition: "slide-x",
        outerPrepend: () => (
          <TAvatar
            design="raised"
            color="primary"
            ratio="1"
            src="https://source.unsplash.com/900x900/?nature"
            onClick={() => {}}
            mb="sm"
            elevated
            rounded
          />
        ),
        outerAppend: () => (
          <TCard design="raised" size="lg" mt="sm" elevated>
            <TFlex align="center" justify="between" py="md" px="lg">
              <TText size="re" weight="normal" leading="tight">
                Kalid Bader
              </TText>
              <TAvatar class="w-8" ratio="1" src="https://source.unsplash.com/1200x700/?nature" circle />
            </TFlex>
          </TCard>
        ),
        content: () => (
          <TCell py="xs">
            <TButton color="danger" icon="mdi:star" onClick={() => {}}>
              Add to Favorites
            </TButton>
            <TDivider my="xs" />
            <TButton color="secondary" icon="mdi:account-circle" onClick={() => {}}>
              View Account
            </TButton>
          </TCell>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={onClick}>
        Launch Menu
      </TButton>
    );
  },
});

Selected: "id"

All slots provide access to the menu controller. This allows you to wait for the user selection, and then handle the menu response. To hide the menu, simply call hide with or without a value.

import { TButton, TCell, TDivider, TText } from "@dija/tohama-components";
import { useMenu } from "@dija/tohama-plugins";
import { defineComponent, ref } from "vue";

type Order = "price" | "id" | "name" | "date";

export default defineComponent({
  setup() {
    const menu = useMenu();

    const order = ref<Order>("id");

    const onClick = async (event: MouseEvent) => {
      const response = await menu.show<Order>({
        event: event,
        prepend: () => (
          <>
            <TText py="sm" px>
              Order By
            </TText>
            <TDivider />
          </>
        ),
        content: ({ controller }) => (
          <TCell py="xs">
            <TButton disabled={order.value === "id"} onClick={() => controller.hide({ value: "id" })}>
              Id
            </TButton>
            <TButton disabled={order.value === "price"} onClick={() => controller.hide({ value: "price" })}>
              Price
            </TButton>
            <TButton disabled={order.value === "name"} onClick={() => controller.hide({ value: "name" })}>
              Name
            </TButton>
            <TButton disabled={order.value === "date"} onClick={() => controller.hide({ value: "date" })}>
              Date
            </TButton>
          </TCell>
        ),
      });

      if (response) {
        order.value = response;
      }
    };

    return () => (
      <>
        <TCard design="raised" p>
          Selected: "{order.value ?? "-"}"
        </TCard>

        <TButton design="flat" onClick={onClick}>
          Launch Menu
        </TButton>
      </>
    );
  },
});

Plugins

Popups

Message Modal

Basic
Inner Slots
Outer Slots
Select Menu

Basic

Inner Slots

Outer Slots

Select Menu

Table of Contents