Mekari Design

https://storybook.mekari.design/
Admin
Mekari Design is a comprehensive design system providing a collection of reusable UI components,...
Tokens:9,684
Snippets:92
Trust Score:5.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Mekari Pixel Nuxt Module

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=stor_ad21f8_5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Installs packages required for integrating Mekari Pixel with a Nuxt.js application, including the Nuxt module and its dependencies like `@nuxtjs/emotion`.

```bash
yarn add @mekari/pixel @mekari/pixel-nuxt @nuxtjs/emotion@0.1.0

```

--------------------------------

### Install Mekari Pixel, Nuxt Pixel, and Emotion for Nuxt App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story

Installs packages required for Mekari Design System integration in a Nuxt.js application. Includes the core pixel package, the Nuxt integration package, and a specific version of emotion for Nuxt 2 compatibility.

```bash
yarn add @mekari/pixel @mekari/pixel-nuxt @nuxtjs/emotion@0.1.0
```

--------------------------------

### Setup ThemeProvider for Vue CLI App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story

Configures the root of a Vue.js application to use the Mekari Design System's ThemeProvider and MpReset for consistent styling. This involves wrapping the main App component with ThemeProvider and using Vue.use to register the Pixel plugin.

```javascript
import Vue from 'vue'
import App from './App.vue'
import Pixel, { ThemeProvider, MpReset } from '@mekari/pixel'

Vue.use(Pixel)

new Vue({
  render: (h) => h(ThemeProvider, [h(MpReset), h(App)]),
}).$mount('#app')
```

--------------------------------

### Install Mekari Pixel in Vue CLI App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=stor_ad21f8_5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Installs the necessary packages for using Mekari Pixel components in a Vue.js project created with Vue CLI. Requires `@mekari/pixel` and `@emotion/css`.

```bash
yarn add @mekari/pixel @emotion/css
```

--------------------------------

### Setup Mekari Pixel ThemeProvider in Vue App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=stor_ad21f8_5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Configures the root of a Vue.js application to use the Mekari Pixel ThemeProvider and MpReset for consistent styling. This involves importing necessary components and wrapping the application.

```javascript
import Vue from 'vue'
import App from './App.vue'
import Pixel, { ThemeProvider, MpReset } from '@mekari/pixel'

Vue.use(Pixel)

new Vue({
  render: (h) => h(ThemeProvider, [h(MpReset), h(App)]),
}).$mount('#app')

```

--------------------------------

### Setup ThemeProvider and Use Mekari Components in Nuxt App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story

Configures the root of a Nuxt.js application with Mekari's ThemeProvider and MpReset. It also shows how to import and use Mekari components like MpButton, including using Nuxt-specific features like `as="nuxt-link"`.

```vue
<template>
  <ThemeProvider>
    <MpReset />
    <Nuxt />
    <MpButton as="nuxt-link" to="/"> Getting started! </MpButton>
  </ThemeProvider>
</template>

<script>
  import { ThemeProvider, MpReset, MpButton } from '@mekari/pixel'

  export default {
    name: 'App',
    components: {
      ThemeProvider,
      MpReset,
      MpButton,
    },
  }
</script>
```

--------------------------------

### Vue Button Component Implementation

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

This Vue.js component demonstrates how to implement various button styles and states using Mekari Pixel UI components. It includes examples for different variants, sizes, loading and disabled states, icon integration, full-width buttons, and color schemes. The component relies on the '@mekari/pixel' library for its UI elements.

```vue
<template>
  <mp-box p="6">
    <mp-stack spacing="4">
      <!-- Variant buttons -->
      <mp-stack direction="row" spacing="2">
        <mp-button variant="primary">Primary</mp-button>
        <mp-button variant="secondary">Secondary</mp-button>
        <mp-button variant="outline">Outline</mp-button>
        <mp-button variant="ghost">Ghost</mp-button>
        <mp-button variant="link">Link</mp-button>
      </mp-stack>

      <!-- Size variations -->
      <mp-stack direction="row" spacing="2" align="center">
        <mp-button size="sm" variant="primary">Small</mp-button>
        <mp-button size="md" variant="primary">Medium</mp-button>
        <mp-button size="lg" variant="primary">Large</mp-button>
      </mp-stack>

      <!-- State variations -->
      <mp-stack direction="row" spacing="2">
        <mp-button variant="primary" :is-loading="true">
          Loading
        </mp-button>
        <mp-button variant="primary" :is-disabled="true">
          Disabled
        </mp-button>
      </mp-stack>

      <!-- Icon buttons -->
      <mp-stack direction="row" spacing="2">
        <mp-button variant="primary" left-icon="add">
          Add Item
        </mp-button>
        <mp-button variant="outline" right-icon="arrow-right">
          Next
        </mp-button>
        <mp-button-icon icon="settings" aria-label="Settings" />
      </mp-stack>

      <!-- Full width button -->
      <mp-button variant="primary" is-full-width>
        Full Width Button
      </mp-button>

      <!-- Color scheme variations -->
      <mp-stack direction="row" spacing="2">
        <mp-button variant="primary" color-scheme="blue">Blue</mp-button>
        <mp-button variant="primary" color-scheme="green">Green</mp-button>
        <mp-button variant="primary" color-scheme="red">Red</mp-button>
        <mp-button variant="primary" color-scheme="orange">Orange</mp-button>
      </mp-stack>
    </mp-stack>
  </mp-box>
</template>

<script>
import { MpBox, MpStack, MpButton, MpButtonIcon } from '@mekari/pixel'

export default {
  components: { MpBox, MpStack, MpButton, MpButtonIcon }
}
</script>
```

--------------------------------

### TypeScript: Defining Global Type for $toast

Source: https://storybook.mekari.design/iframe_id=guides-recipe--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story&viewmode%5B2%5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Provides an example of how to declare a global type for the $toast function within Vue's global interface for TypeScript projects using '@mekari/pixel'.

```typescript
import Vue from 'vue'

declare module '@mekari/pixel'
declare module 'vue/types/vue' {
  interface Vue {
    $toast: Function
  }
}
```

--------------------------------

### Configure Mekari Pixel Nuxt Module

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=stor_ad21f8_5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Registers the Mekari Pixel Nuxt module and the `@nuxtjs/emotion` module in the Nuxt.js configuration file (`nuxt.config.js`) to enable component styling.

```javascript
export default {
  modules: ['@mekari/pixel-nuxt', '@nuxtjs/emotion'],
}

```

--------------------------------

### Configure Nuxt Modules for Mekari Pixel

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story

Registers the `@mekari/pixel-nuxt` and `@nuxtjs/emotion` modules in the `nuxt.config.js` file. This enables the Nuxt integration for Mekari Design System components and their styles to be generated during the server build.

```javascript
export default {
  modules: ['@mekari/pixel-nuxt', '@nuxtjs/emotion'],
}
```

--------------------------------

### Use Mekari Pixel ThemeProvider in Nuxt App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=stor_ad21f8_5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Sets up the Mekari Pixel ThemeProvider and MpReset within a Nuxt.js application, allowing the use of Mekari Pixel components and integrating with Nuxt routing.

```vue
<template>
  <ThemeProvider>
    <MpReset />
    <Nuxt />
    <MpButton as="nuxt-link" to="/"> Getting started! </MpButton>
  </ThemeProvider>
</template>

<script>
  import { ThemeProvider, MpReset, MpButton } from '@mekari/pixel'

  export default {
    name: 'App',
    components: {
      ThemeProvider,
      MpReset,
      MpButton,
    },
  }
</script>

```

--------------------------------

### Use Mekari Components in Vue CLI App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story

Demonstrates how to import and use Mekari Design System components, such as MpBox and MpButton, within a Vue.js template. Ensure components are imported into the script section and registered.

```vue
<template>
  <mp-box>
    <mp-button> Getting started! </mp-button>
  </mp-box>
</template>

<script>
  import { MpBox, MpButton } from '@mekari/pixel'

  export default {
    name: 'App',
    components: {
      MpBox,
      MpButton,
    },
  }
</script>
```

--------------------------------

### Responsive Styling with Breakpoint Props in Vue

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Illustrates how to create responsive layouts in Mekari Design System using breakpoint-aware props. These props accept an object where keys define breakpoints (e.g., 'base', 'md', 'lg') and values define styles for those breakpoints. This allows for dynamic adjustments to padding, width, display, text alignment, and grid columns across different screen sizes. It requires importing Mekari Box, Text, and Grid components.

```vue
<template>
  <mp-box>
    <!-- Responsive padding: base(16px), md(24px), lg(32px) -->
    <mp-box
      :p="{ base: '4', md: '6', lg: '8' }"
      bg="blue.50"
      mb="4"
    >
      Responsive padding
    </mp-box>

    <!-- Responsive width and display -->
    <mp-box
      :width="{ base: 'full', md: '80', lg: '64' }"
      :display="{ base: 'block', md: 'flex' }"
      :flex-direction="{ md: 'row' }"
      bg="white"
      shadow="md"
      border-radius="md"
      overflow="hidden"
      mb="4"
    >
      <mp-box
        :width="{ base: 'full', md: '50%' }"
        p="4"
        bg="gray.50"
      >
        Left Panel
      </mp-box>
      <mp-box
        :width="{ base: 'full', md: '50%' }"
        p="4"
      >
        Right Panel
      </mp-box>
    </mp-box>

    <!-- Responsive text alignment -->
    <mp-text
      :text-align="{ base: 'center', md: 'left' }"
      :font-size="{ base: 'lg', md: 'xl', lg: '2xl' }"
      font-weight="semibold"
    >
      Responsive Typography
    </mp-text>

    <!-- Responsive grid -->
    <mp-grid
      :template-columns="{ base: '1', md: '2', lg: '3' }"
      gap="4"
      mt="4"
    >
      <mp-box p="4" bg="green.50" border-radius="md">Item 1</mp-box>
      <mp-box p="4" bg="green.50" border-radius="md">Item 2</mp-box>
      <mp-box p="4" bg="green.50" border-radius="md">Item 3</mp-box>
    </mp-grid>
  </mp-box>
</template>

<script>
import { MpBox, MpText, MpGrid } from '@mekari/pixel'

export default {
  components: { MpBox, MpText, MpGrid }
}
</script>
```

--------------------------------

### Pixel 2 Design Tokens - Spacing and Sizing

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Demonstrates the use of Pixel 2's spacing scale and sizing utilities for consistent layout and dimensions in Vue.js applications, including responsive properties.

```vue
<template>
  <mp-box>
    <!-- Spacing scale: 0.5 = 2px, 1 = 4px, 2 = 8px, 4 = 16px, 8 = 32px -->
    <mp-box p="4" mb="4" bg="gray.50">
      Padding: 16px (p="4")
    </mp-box>

    <mp-stack spacing="4">
      <mp-box p="2" bg="blue.50">Spacing: 8px between items</mp-box>
      <mp-box p="2" bg="blue.50">Spacing: 8px between items</mp-box>
      <mp-box p="2" bg="blue.50">Spacing: 8px between items</mp-box>
    </mp-stack>

    <!-- Width and height sizing -->
    <mp-box
      width="64"
      height="32"
      bg="green.400"
      mt="4"
      border-radius="md"
    >
      Width: 256px, Height: 128px
    </mp-box>

    <!-- Responsive sizing -->
    <mp-box
      width="full"
      p="6"
      bg="gray.25"
      mt="4"
    >
      Full width container with 24px padding
    </mp-box>
  </mp-box>
</template>

<script>
import { MpBox, MpStack } from '@mekari/pixel'

export default {
  components: { MpBox, MpStack }
}
</script>
```

--------------------------------

### Use Pixel 2 Components in Vue CLI

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Demonstrates the usage of Pixel 2 components like MpBox and MpButton within a Vue CLI application. Imports necessary components and includes event handling.

```vue
<template>
  <mp-box>
    <mp-button variant="primary" @click="handleClick">
      Get Started
    </mp-button>
  </mp-box>
</template>

<script>
import { MpBox, MpButton } from '@mekari/pixel'

export default {
  name: 'App',
  components: {
    MpBox,
    MpButton,
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>
```

--------------------------------

### Component Composition with 'as' Prop in Vue

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Demonstrates how to use the 'as' prop to render Mekari components as different HTML elements (e.g., 'form', 'h1', 'a') or other Vue components (e.g., 'router-link', 'nuxt-link'). This allows for flexible component reuse and semantic HTML structure. It requires importing the necessary Mekari components.

```vue
<template>
  <mp-box>
    <!-- Button as router link -->
    <mp-button
      as="router-link"
      to="/about"
      variant="primary"
      mb="4"
    >
      Navigate to About
    </mp-button>

    <!-- Button as nuxt link -->
    <mp-button
      as="nuxt-link"
      to="/dashboard"
      variant="outline"
      mb="4"
    >
      Go to Dashboard
    </mp-button>

    <!-- Box as form element -->
    <mp-box
      as="form"
      @submit.prevent="handleSubmit"
      p="4"
      bg="gray.50"
      border-radius="md"
    >
      <mp-form-control>
        <mp-form-label>Email</mp-form-label>
        <mp-input type="email" v-model="email" />
      </mp-form-control>

      <mp-button type="submit" variant="primary" mt="4">
        Submit
      </mp-button>
    </mp-box>

    <!-- Text as heading -->
    <mp-text
      as="h1"
      font-size="2xl"
      font-weight="semibold"
      mt="6"
    >
      This is a heading
    </mp-text>

    <!-- Box as anchor -->
    <mp-box
      as="a"
      href="https://mekari.com"
      target="_blank"
      color="blue.400"
      text-decoration="underline"
      display="inline-block"
      mt="2"
    >
      External Link
    </mp-box>
  </mp-box>
</template>

<script>
import { MpBox, MpButton, MpText, MpFormControl, MpFormLabel, MpInput } from '@mekari/pixel'

export default {
  components: { MpBox, MpButton, MpText, MpFormControl, MpFormLabel, MpInput },
  data() {
    return {
      email: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted with email:', this.email)
    }
  }
}
</script>
```

--------------------------------

### Vue: Using 'as prop' with MpButton

Source: https://storybook.mekari.design/iframe_id=guides-recipe--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=story&viewmode%5B2%5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Demonstrates how to use the 'as prop' to render an MpButton as a router-link component in Vue. This allows combining props from both MpButton and router-link.

```Vue
<template>
  <mp-button as="router-link" to="/about">About page button</mp-button>
</template>
```

--------------------------------

### Use Mekari Pixel Components in Vue App

Source: https://storybook.mekari.design/iframe_id=guides-getting-started--page&viewmode=story&viewmode%5B0%5D=story&viewmode%5B1%5D=stor_ad21f8_5D=story&viewmode%5B3%5D=story&viewmode%5B4%5D=story&viewmode%5B5%5D=story&viewmode%5B6%5D=story

Demonstrates how to import and use Mekari Pixel components, such as MpBox and MpButton, within a Vue.js component's template and script sections.

```vue
<template>
  <mp-box>
    <mp-button> Getting started! </mp-button>
  </mp-box>
</template>

<script>
  import { MpBox, MpButton } from '@mekari/pixel'

  export default {
    name: 'App',
    components: {
      MpBox,
      MpButton,
    },
  }
</script>

```

--------------------------------

### Apply Typography Tokens using Vue.js

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

This snippet demonstrates how to apply typography design tokens for font size, weight, and line height using Vue.js components from the @mekari/pixel library. It covers various text styles, including headings, body text, secondary text, helper text, and monospace for code.

```vue
<template>
  <mp-box>
    <!-- Font sizes: xs(10px), sm(12px), md(14px), lg(16px), xl(20px), 2xl(24px) -->
    <mp-text font-size="2xl" font-weight="semibold" mb="4">
      Heading Text (24px, 600)
    </mp-text>

    <mp-text font-size="lg" line-height="md" mb="2">
      Body text at 16px with 1.4 line height
    </mp-text>

    <mp-text font-size="md" color="gray.600" mb="4">
      Secondary text at 14px
    </mp-text>

    <mp-text font-size="sm" color="gray.400">
      Helper text at 12px
    </mp-text>

    <!-- Monospace font for code -->
    <mp-box
      as="code"
      font-family="mono"
      font-size="sm"
      bg="gray.50"
      p="2"
      mt="4"
      border-radius="sm"
    >
      const example = 'monospace font'
    </mp-box>
  </mp-box>
</template>

<script>
import { MpBox, MpText } from '@mekari/pixel'

export default {
  components: { MpBox, MpText }
}
</script>
```

--------------------------------

### Pixel 2 Design Tokens - Colors

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Illustrates the usage of Pixel 2's color design tokens for consistent theming in Vue.js applications, showcasing primary, status, brand, and alpha colors.

```vue
<template>
  <mp-box>
    <!-- Primary colors -->
    <mp-box bg="blue.400" color="white" p="4" mb="2">
      Primary Blue (#4B61DD)
    </mp-box>

    <!-- Status colors -->
    <mp-box bg="green.500" color="white" p="4" mb="2">
      Success Green (#4FB262)
    </mp-box>

    <mp-box bg="red.500" color="white" p="4" mb="2">
      Error Red (#C83E39)
    </mp-box>

    <mp-box bg="orange.500" color="white" p="4" mb="2">
      Warning Orange (#DE9400)
    </mp-box>

    <!-- Brand colors -->
    <mp-box bg="brand.mekari" color="white" p="4" mb="2">
      Mekari Brand (#651FFF)
    </mp-box>

    <mp-box bg="brand.jurnal" color="dark" p="4" mb="2">
      Jurnal Brand (#40C3FF)
    </mp-box>

    <!-- Alpha colors for overlays -->
    <mp-box bg="blackAlpha.800" color="white" p="4" mb="2">
      Overlay Background (rgba(0, 0, 0, 0.80))
    </mp-box>
  </mp-box>
</template>

<script>
import { MpBox } from '@mekari/pixel'

export default {
  components: { MpBox }
}
</script>
```

--------------------------------

### Use Pixel 2 Components in Nuxt.js

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Demonstrates integrating Pixel 2 components within a Nuxt.js application, including ThemeProvider, MpReset, and Nuxt-link compatible MpButton.

```vue
<template>
  <ThemeProvider>
    <MpReset />
    <Nuxt />
    <mp-box padding="4">
      <mp-button as="nuxt-link" to="/dashboard" variant="primary">
        Go to Dashboard
      </mp-button>
    </mp-box>
  </ThemeProvider>
</template>

<script>
import { ThemeProvider, MpReset, MpBox, MpButton } from '@mekari/pixel'

export default {
  name: 'App',
  components: {
    ThemeProvider,
    MpReset,
    MpBox,
    MpButton,
  },
}
</script>
```

--------------------------------

### Configure Pixel 2 in Nuxt.js

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Configures Pixel 2 for server-side rendering in Nuxt.js by adding the '@mekari/pixel-nuxt' and '@nuxtjs/emotion' modules to the nuxt.config.js file.

```javascript
// nuxt.config.js
export default {
  modules: ['@mekari/pixel-nuxt', '@nuxtjs/emotion'],
}
```

--------------------------------

### Vue.js Modal and Drawer Components

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

This snippet demonstrates the usage of Mekari's modal and drawer components in a Vue.js application. It covers opening/closing modals for confirmations and drawers for input forms, along with necessary component imports and data management.

```vue
<template>
  <mp-box>
    <mp-button @click="isOpen = true" variant="primary">
      Open Modal
    </mp-button>

    <mp-modal
      :is-open="isOpen"
      @close="isOpen = false"
      size="md"
      :is-centered="true"
    >
      <mp-modal-overlay />
      <mp-modal-content>
        <mp-modal-header>
          <mp-heading size="lg">Confirm Action</mp-heading>
          <mp-modal-close-button />
        </mp-modal-header>

        <mp-modal-body>
          <mp-text>
            Are you sure you want to delete this item? This action cannot be undone.
          </mp-text>
        </mp-modal-body>

        <mp-modal-footer>
          <mp-button-group spacing="2">
            <mp-button variant="ghost" @click="isOpen = false">
              Cancel
            </mp-button>
            <mp-button
              variant="primary"
              color-scheme="red"
              @click="handleDelete"
            >
              Delete
            </mp-button>
          </mp-button-group>
        </mp-modal-footer>
      </mp-modal-content>
    </mp-modal>

    <!-- Drawer variant -->
    <mp-button @click="isDrawerOpen = true" variant="outline" ml="2">
      Open Drawer
    </mp-button>

    <mp-drawer
      :is-open="isDrawerOpen"
      @close="isDrawerOpen = false"
      placement="right"
      size="md"
    >
      <mp-drawer-overlay />
      <mp-drawer-content>
        <mp-drawer-header>
          <mp-heading size="md">Settings</mp-heading>
          <mp-drawer-close-button />
        </mp-drawer-header>

        <mp-drawer-body>
          <mp-stack spacing="4">
            <mp-form-control>
              <mp-form-label>Name</mp-form-label>
              <mp-input placeholder="Enter name" />
            </mp-form-control>

            <mp-form-control>
              <mp-form-label>Email</mp-form-label>
              <mp-input type="email" placeholder="Enter email" />
            </mp-form-control>
          </mp-stack>
        </mp-drawer-body>

        <mp-drawer-footer>
          <mp-button variant="primary" is-full-width>
            Save Changes
          </mp-button>
        </mp-drawer-footer>
      </mp-drawer-content>
    </mp-drawer>
  </mp-box>
</template>

<script>
import {
  MpBox,
  MpButton,
  MpButtonGroup,
  MpModal,
  MpModalOverlay,
  MpModalContent,
  MpModalHeader,
  MpModalBody,
  MpModalFooter,
  MpModalCloseButton,
  MpDrawer,
  MpDrawerOverlay,
  MpDrawerContent,
  MpDrawerHeader,
  MpDrawerBody,
  MpDrawerFooter,
  MpDrawerCloseButton,
  MpHeading,
  MpText,
  MpStack,
  MpFormControl,
  MpFormLabel,
  MpInput
} from '@mekari/pixel'

export default {
  components: {
    MpBox,
    MpButton,
    MpButtonGroup,
    MpModal,
    MpModalOverlay,
    MpModalContent,
    MpModalHeader,
    MpModalBody,
    MpModalFooter,
    MpModalCloseButton,
    MpDrawer,
    MpDrawerOverlay,
    MpDrawerContent,
    MpDrawerHeader,
    MpDrawerBody,
    MpDrawerFooter,
    MpDrawerCloseButton,
    MpHeading,
    MpText,
    MpStack,
    MpFormControl,
    MpFormLabel,
    MpInput
  },
  data() {
    return {
      isOpen: false,
      isDrawerOpen: false
    }
  },
  methods: {
    handleDelete() {
      console.log('Item deleted')
      this.isOpen = false
    }
  }
}
</script>
```

--------------------------------

### Apply Shadow Tokens using Vue.js

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

This snippet shows how to apply shadow design tokens for creating visual hierarchy and elevation using Vue.js components. It demonstrates various shadow scales (sm, md, lg, xl) and special shadows like 'outline' and 'inner'.

```vue
<template>
  <mp-box>
    <mp-stack spacing="4">
      <!-- Shadow scale: sm, md, lg, xl, 2xl -->
      <mp-box p="4" bg="white" shadow="sm" border-radius="md">
        Small shadow for subtle elevation
      </mp-box>

      <mp-box p="4" bg="white" shadow="md" border-radius="md">
        Medium shadow for cards
      </mp-box>

      <mp-box p="4" bg="white" shadow="lg" border-radius="md">
        Large shadow for modals
      </mp-box>

      <mp-box p="4" bg="white" shadow="xl" border-radius="md">
        XL shadow for popovers
      </mp-box>

      <!-- Focus outline shadow -->
      <mp-button shadow="outline">
        Button with focus outline
      </mp-button>

      <!-- Inner shadow -->
      <mp-box p="4" bg="gray.50" shadow="inner" border-radius="md" mt="4">
        Inner shadow for pressed state
      </mp-box>
    </mp-stack>
  </mp-box>
</template>

<script>
import { MpBox, MpStack, MpButton } from '@mekari/pixel'

export default {
  components: { MpBox, MpStack, MpButton }
}
</script>
```

--------------------------------

### Apply Border Radius Tokens using Vue.js

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

This snippet illustrates the application of border radius design tokens for consistent visual styling in Vue.js applications. It showcases different radius scales (xs, sm, md, lg, xl, full) applied to various box elements.

```vue
<template>
  <mp-box>
    <mp-stack spacing="4">
      <!-- Radius scale: xs(2px), sm(4px), md(6px), lg(8px), xl(12px), full(9999px) -->
      <mp-box p="4" bg="blue.400" color="white" border-radius="xs">
        Extra Small Radius (2px)
      </mp-box>

      <mp-box p="4" bg="blue.400" color="white" border-radius="sm">
        Small Radius (4px)
      </mp-box>

      <mp-box p="4" bg="blue.400" color="white" border-radius="md">
        Medium Radius (6px) - Default for most components
      </mp-box>

      <mp-box p="4" bg="blue.400" color="white" border-radius="lg">
        Large Radius (8px)
      </mp-box>

      <mp-box p="4" bg="blue.400" color="white" border-radius="xl">
        Extra Large Radius (12px)
      </mp-box>

      <mp-box
        width="20"
        height="20"
        bg="green.400"
        border-radius="full"
        display="flex"
        align-items="center"
        justify-content="center"
        color="white"
      >
        Full
      </mp-box>
    </mp-stack>
  </mp-box>
</template>

<script>
import { MpBox, MpStack } from '@mekari/pixel'

export default {
  components: { MpBox, MpStack }
}
</script>
```

--------------------------------

### Vue Component with Pixel 2 Button Integration

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

A Vue.js component demonstrating the usage of Pixel 2's MpButton and MpBox components. It utilizes TypeScript for props and event handling, showcasing dynamic loading states for the button.

```vue
<template>
  <mp-box>
    <mp-button v-bind="buttonProps" @click="handleClick">
      Click Me
    </mp-button>
  </mp-box>
</template>

<script lang="ts">
import Vue from 'vue'
import { MpBox, MpButton } from '@mekari/pixel'
import { ButtonProps } from '@/types/pixel'

export default Vue.extend({
  name: 'TypedComponent',
  components: { MpBox, MpButton },
  data(): { buttonProps: ButtonProps } {
    return {
      buttonProps: {
        variant: 'primary',
        size: 'md',
        colorScheme: 'blue',
        isLoading: false
      }
    }
  },
  methods: {
    handleClick(): void {
      console.log('Button clicked')
      this.buttonProps.isLoading = true

      setTimeout(() => {
        this.buttonProps.isLoading = false
      }, 2000)
    }
  }
})
</script>
```

--------------------------------

### TypeScript Type Definitions for Pixel 2 Components

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Defines custom TypeScript interfaces for Pixel 2 components like Button, Input, and Modal, including options for toasts. These types enhance code maintainability and developer experience by providing type safety.

```typescript
// types/pixel.d.ts
import Vue from 'vue'

declare module '@mekari/pixel'

declare module 'vue/types/vue' {
  interface Vue {
    $toast: (options: ToastOptions) => void
  }
}

interface ToastOptions {
  title: string
  description?: string
  status?: 'success' | 'error' | 'warning' | 'info'
  duration?: number | null
  isClosable?: boolean
  position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'
  render?: (h: any) => any
}

// Component prop types
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link'
  size?: 'sm' | 'md' | 'lg'
  colorScheme?: string
  isLoading?: boolean
  isDisabled?: boolean
  isFullWidth?: boolean
  leftIcon?: string
  rightIcon?: string
}

export interface InputProps {
  value?: string | number
  type?: string
  placeholder?: string
  isDisabled?: boolean
  isReadOnly?: boolean
  isInvalid?: boolean
  size?: 'sm' | 'md' | 'lg'
}

export interface ModalProps {
  isOpen: boolean
  onClose: () => void
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
  isCentered?: boolean
  closeOnOverlayClick?: boolean
  closeOnEsc?: boolean
}
```

--------------------------------

### Vue Table Component with User Data

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

A Vue.js component demonstrating the Mekari Design Table. It displays user data with features like avatars, badges for roles and status, and action buttons. Includes basic data, role color mapping, and event handlers for edit/delete actions. Requires Mekari Pixel UI components for rendering.

```vue
<template>
  <mp-box p="6">
    <mp-table variant="simple">
      <mp-table-caption placement="top">
        <mp-stack direction="row" justify="space-between" mb="4">
          <mp-heading size="md">User Management</mp-heading>
          <mp-button size="sm" variant="primary" left-icon="add">
            Add User
          </mp-button>
        </mp-stack>
      </mp-table-caption>

      <mp-thead>
        <mp-tr>
          <mp-th>Name</mp-th>
          <mp-th>Email</mp-th>
          <mp-th>Role</mp-th>
          <mp-th>Status</mp-th>
          <mp-th is-numeric>Actions</mp-th>
        </mp-tr>
      </mp-thead>

      <mp-tbody>
        <mp-tr v-for="user in users" :key="user.id">
          <mp-td>
            <mp-stack direction="row" spacing="2" align="center">
              <mp-avatar :name="user.name" size="sm" />
              <mp-text font-weight="semibold">{{ user.name }}</mp-text>
            </mp-stack>
          </mp-td>
          <mp-td>{{ user.email }}</mp-td>
          <mp-td>
            <mp-badge :color-scheme="getRoleColor(user.role)">
              {{ user.role }}
            </mp-badge>
          </mp-td>
          <mp-td>
            <mp-badge
              :color-scheme="user.isActive ? 'green' : 'gray'"
              variant="subtle"
            >
              {{ user.isActive ? 'Active' : 'Inactive' }}
            </mp-badge>
          </mp-td>
          <mp-td is-numeric>
            <mp-button-group size="sm" spacing="1">
              <mp-button-icon
                icon="edit"
                variant="ghost"
                aria-label="Edit"
                @click="handleEdit(user)"
              />
              <mp-button-icon
                icon="delete"
                variant="ghost"
                color-scheme="red"
                aria-label="Delete"
                @click="handleDelete(user)"
              />
            </mp-button-group>
          </mp-td>
        </mp-tr>
      </mp-tbody>

      <mp-tfoot>
        <mp-tr>
          <mp-td colspan="5">
            <mp-stack direction="row" justify="space-between" align="center">
              <mp-text font-size="sm" color="gray.600">
                Showing {{ users.length }} of 100 users
              </mp-text>
              <mp-button-group spacing="1">
                <mp-button size="sm" variant="outline" :is-disabled="true">
                  Previous
                </mp-button>
                <mp-button size="sm" variant="outline">
                  Next
                </mp-button>
              </mp-button-group>
            </mp-stack>
          </mp-td>
        </mp-tr>
      </mp-tfoot>
    </mp-table>
  </mp-box>
</template>

<script>
import {
  MpBox,
  MpStack,
  MpHeading,
  MpText,
  MpButton,
  MpButtonGroup,
  MpButtonIcon,
  MpTable,
  MpTableCaption,
  MpThead,
  MpTbody,
  MpTfoot,
  MpTr,
  MpTh,
  MpTd,
  MpAvatar,
  MpBadge
} from '@mekari/pixel'

export default {
  components: {
    MpBox,
    MpStack,
    MpHeading,
    MpText,
    MpButton,
    MpButtonGroup,
    MpButtonIcon,
    MpTable,
    MpTableCaption,
    MpThead,
    MpTbody,
    MpTfoot,
    MpTr,
    MpTh,
    MpTd,
    MpAvatar,
    MpBadge
  },
  data() {
    return {
      users: [
        { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', isActive: true },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', isActive: true },
        { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Viewer', isActive: false }
      ]
    }
  },
  methods: {
    getRoleColor(role) {
      const colors = {
        'Admin': 'purple',
        'User': 'blue',
        'Viewer': 'gray'
      }
      return colors[role] || 'gray'
    },
    handleEdit(user) {
      console.log('Edit user:', user)
    },
    handleDelete(user) {
      console.log('Delete user:', user)
    }
  }
}
</script>
```

--------------------------------

### Vue.js Form Component Implementation

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Demonstrates how to implement a form using Mekari Pixel Vue.js components. It includes various input types like text, email, select, checkbox, and radio buttons, along with validation and submission handling. Requires '@mekari/pixel' for component usage.

```vue
<template>
  <mp-box max-width="lg" mx="auto" p="6">
    <mp-box as="form" @submit.prevent="handleSubmit">
      <mp-stack spacing="4">
        <!-- Text Input -->
        <mp-form-control :is-invalid="errors.username" is-required>
          <mp-form-label>Username</mp-form-label>
          <mp-input
            v-model="form.username"
            placeholder="Enter username"
            @blur="validateUsername"
          />
          <mp-form-helper-text v-if="!errors.username">
            Choose a unique username
          </mp-form-helper-text>
          <mp-form-error-message v-if="errors.username">
            {{ errors.username }}
          </mp-form-error-message>
        </mp-form-control>

        <!-- Email Input -->
        <mp-form-control :is-invalid="errors.email" is-required>
          <mp-form-label>Email</mp-form-label>
          <mp-input
            type="email"
            v-model="form.email"
            placeholder="email@example.com"
          />
          <mp-form-error-message v-if="errors.email">
            {{ errors.email }}
          </mp-form-error-message>
        </mp-form-control>

        <!-- Select -->
        <mp-form-control is-required>
          <mp-form-label>Role</mp-form-label>
          <mp-select v-model="form.role" placeholder="Select role">
            <option value="admin">Admin</option>
            <option value="user">User</option>
            <option value="viewer">Viewer</option>
          </mp-select>
        </mp-form-control>

        <!-- Checkbox -->
        <mp-form-control>
          <mp-checkbox v-model="form.acceptTerms">
            I accept the terms and conditions
          </mp-checkbox>
        </mp-form-control>

        <!-- Radio Group -->
        <mp-form-control>
          <mp-form-label>Notification Preference</mp-form-label>
          <mp-radio-group v-model="form.notification">
            <mp-radio value="email">Email</mp-radio>
            <mp-radio value="sms">SMS</mp-radio>
            <mp-radio value="both">Both</mp-radio>
          </mp-radio-group>
        </mp-form-control>

        <!-- Submit Button -->
        <mp-button
          type="submit"
          variant="primary"
          :is-loading="isSubmitting"
          :is-disabled="!isFormValid"
        >
          Submit
        </mp-button>
      </mp-stack>
    </mp-box>
  </mp-box>
</template>

<script>
import {
  MpBox,
  MpStack,
  MpFormControl,
  MpFormLabel,
  MpFormHelperText,
  MpFormErrorMessage,
  MpInput,
  MpSelect,
  MpCheckbox,
  MpRadio,
  MpRadioGroup,
  MpButton
} from '@mekari/pixel'

export default {
  components: {
    MpBox,
    MpStack,
    MpFormControl,
    MpFormLabel,
    MpFormHelperText,
    MpFormErrorMessage,
    MpInput,
    MpSelect,
    MpCheckbox,
    MpRadio,
    MpRadioGroup,
    MpButton
  },
  data() {
    return {
      form: {
        username: '',
        email: '',
        role: '',
        acceptTerms: false,
        notification: 'email'
      },
      errors: {},
      isSubmitting: false
    }
  },
  computed: {
    isFormValid() {
      return this.form.username &&
             this.form.email &&
             this.form.role &&
             Object.keys(this.errors).length === 0
    }
  },
  methods: {
    validateUsername() {
      if (this.form.username.length < 3) {
        this.errors = { ...this.errors, username: 'Username must be at least 3 characters' }
      } else {
        const { username, ...rest } = this.errors
        this.errors = rest
      }
    },
    async handleSubmit() {
      this.isSubmitting = true
      try {
        // API call
        await new Promise(resolve => setTimeout(resolve, 1000))
        console.log('Form submitted:', this.form)
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>
```

--------------------------------

### Display Toast Notifications in Vue

Source: https://context7.com/context7/storybook_mekari_design/llms.txt

Demonstrates how to display various types of toast notifications (success, error, warning, info, custom) using the Mekari Pixel Vue components. It shows how to trigger toasts with different statuses, durations, closability, and positions, including custom rendering.

```vue
<template>
  <mp-box p="6">
    <mp-stack spacing="2">
      <mp-button @click="showSuccess" variant="primary">
        Show Success
      </mp-button>
      <mp-button @click="showError" variant="outline">
        Show Error
      </mp-button>
      <mp-button @click="showWarning" variant="outline">
        Show Warning
      </mp-button>
      <mp-button @click="showInfo" variant="outline">
        Show Info
      </mp-button>
      <mp-button @click="showCustom" variant="ghost">
        Show Custom Toast
      </mp-button>
    </mp-stack>
  </mp-box>
</template>

<script>
import { MpBox, MpStack, MpButton } from '@mekari/pixel'

export default {
  components: { MpBox, MpStack, MpButton },
  methods: {
    showSuccess() {
      this.$toast({
        title: 'Success!',
        description: 'Your changes have been saved.',
        status: 'success',
        duration: 3000,
        isClosable: true,
        position: 'top-right'
      })
    },
    showError() {
      this.$toast({
        title: 'Error occurred',
        description: 'Unable to process your request. Please try again.',
        status: 'error',
        duration: 5000,
        isClosable: true,
        position: 'top-right'
      })
    },
    showWarning() {
      this.$toast({
        title: 'Warning',
        description: 'Please review your information before submitting.',
        status: 'warning',
        duration: 4000,
        isClosable: true,
        position: 'top-right'
      })
    },
    showInfo() {
      this.$toast({
        title: 'Information',
        description: 'New features are now available.',
        status: 'info',
        duration: 3000,
        isClosable: true,
        position: 'bottom'
      })
    },
    showCustom() {
      this.$toast({
        title: 'Custom Toast',
        description: 'This toast will stay until closed.',
        duration: null, // Won't auto-dismiss
        isClosable: true,
        position: 'top',
        render: (h) => {
          return h('mp-box', {
            props: {
              p: '4',
              bg: 'blue.400',
              color: 'white',
              borderRadius: 'md'
            }
          }, 'Custom rendered toast content')
        }
      })
    }
  }
}
</script>
```
Tokens:
Raw