Mekari Pixel

https://docs.mekari.design/components
Admin
Mekari Pixel is a design system with 105+ reusable UI components built for Vue and Nuxt...
Tokens:118,525
Snippets:478
Trust Score:5.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Basic MpTooltip Playground Example (Vue 3)

Source: https://docs.mekari.design/components/tooltip

A basic example showcasing the MpTooltip component in a Vue 3 setup. It includes importing necessary components and a template demonstrating a tooltip with a hoverable text element. This serves as a starting point for integrating tooltips.

```vue
<script setup lang="ts">
  import { MpTooltip, MpFlex, MpText } from '@mekari/pixel3'
</script>

<template>
  <MpFlex>
    <MpTooltip
      id="tooltip-playground"
      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis est finibus ligula tincidunt, ac lacinia urna ultricies."
    >
      <MpText> Hover me </MpText>
    </MpTooltip>
  </MpFlex>
</template>
```

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

### MpText Component Usage Examples

Source: https://docs.mekari.design/components/text

Examples demonstrating how to use the MpText component with different props.

```APIDOC
## MpText Component Usage Examples

### Description

This section provides practical examples of using the `MpText` component for various styling needs.

### Size Variations

#### Example 1: H1 Title

```html
<template>
  <MpText size="h1">This is title with size h1</MpText>
</template>

<script setup lang="ts">
  import { MpText } from '@mekari/pixel3'
</script>
```

#### Example 2: H2 Title

```html
<template>
  <MpText size="h2">This is title with size h2</MpText>
</template>

<script setup lang="ts">
  import { MpText } from '@mekari/pixel3'
</script>
```

### General Text Display

#### Example 3: Basic Paragraph

```html
<template>
  <MpText>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus accusantium aperiam
    consequuntur cupiditate enim harum hic, maiores nemo numquam odit optio possimus quo repellendus
    sunt tenetur unde veritatis voluptates.
  </MpText>
</template>

<script setup lang="ts">
  import { MpText } from '@mekari/pixel3'
</script>
```

```

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

### Badge Usage Examples

Source: https://docs.mekari.design/components/badge

Provides examples of how to use the MpBadge component with different variants, colors, and sizes.

```APIDOC
## Badge Usage Examples

### Variant

This example demonstrates the usage of the `MpBadge` component with different `for` prop values.

```html
<script setup lang="ts">
  import { MpBadge } from '@mekari/pixel3'
</script>

<template>
  <div style="display: flex; gap: 4px; align-items: center">
    <MpBadge for="additionalInformation" type="information"> Active </MpBadge>
    <MpBadge for="tableStatus" type="information"> Active </MpBadge>
    <MpBadge for="indicator" type="information"> </MpBadge>
  </div>
</template>
```

### Variant Color

This example showcases the `MpBadge` component with various `type` prop values to represent different status colors.

```html
<script setup lang="ts">
  import { MpBadge } from '@mekari/pixel3'
</script>

<template>
  <div style="display: flex; gap: 4px">
    <MpBadge for="tableStatus" type="completed"> Active </MpBadge>
    <MpBadge for="tableStatus" type="warning"> Locked </MpBadge>
    <MpBadge for="tableStatus" type="critical"> Voided </MpBadge>
    <MpBadge for="tableStatus" type="announcement"> Inactive </MpBadge>
    <MpBadge for="tableStatus" type="information"> Requested </MpBadge>
  </div>

  <div style="display: flex; gap: 4px; margin-top: 16px">
    <MpBadge for="additionalInformation" type="completed"> Active </MpBadge>
    <MpBadge for="additionalInformation" type="warning"> Locked </MpBadge>
    <MpBadge for="additionalInformation" type="critical"> Voided </MpBadge>
    <MpBadge for="additionalInformation" type="announcement"> Inactive </MpBadge>
    <MpBadge for="additionalInformation" type="information"> Requested </MpBadge>
  </div>

  <div style="display: flex; gap: 4px; margin-top: 16px">
    <MpBadge for="indicator" type="completed" />
    <MpBadge for="indicator" type="warning" />
    <MpBadge for="indicator" type="critical" />
    <MpBadge for="indicator" type="information" />
    <MpBadge for="indicator" type="announcement" />
  </div>
</template>
```

### Size

This example demonstrates how to adjust the size of the `MpBadge` component using the `size` prop.

```html
<script setup lang="ts">
  import { MpBadge } from '@mekari/pixel3'
</script>

<template>
  <div style="display: flex; gap: 4px">
    <MpBadge size="sm"> Requested </MpBadge>
    <MpBadge size="md"> Requested </MpBadge>
  </div>
</template>
```
```

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

### Modal Playground Example (Vue 3)

Source: https://docs.mekari.design/components/modal

A Vue 3 playground example showcasing the implementation of the Modal component. It includes basic setup with refs for controlling modal visibility and event handlers for open and close actions.

```vue
<script setup lang="ts">
  import {
    MpButton,
    MpButtonGroup,
    MpModal,
    MpModalBody,
    MpModalCloseButton,
    MpModalContent,
    MpModalFooter,
    MpModalHeader,
    MpModalOverlay,
    MpText
  } from '@mekari/pixel3'
  import { ref } from 'vue'

  const isOpen = ref(false)

  function onOpen() {
    console.log('onOpen =>', true)
  }

  function onClose() {
    if (isOpen.value) {
      console.log('onClose =>', true)
      isOpen.value = false
    }
  }
</script>

<template>
  <div>
    <MpButton data-testid="show-modal" @click="isOpen = true"> Show </MpButton>

    <MpModal
      id="modal-playground"
      :is-open="isOpen"
      @open="onOpen"
      @close="onClose"
      :is-keep-alive="true"
      scroll-behavior="auto"
    >
      <MpModalContent>
        <MpModalHeader>
          Approve subscription request?

          <MpModalCloseButton />
        </MpModalHeader>
        <MpModalBody>
          <MpText
            >Once approved, we will send notification & payment link to
            rizalchandra@mekari.com</MpText
          >
        </MpModalBody>
        <MpModalFooter>
          <!-- Only need class vp-raw in Pixel docs -->
          <MpButtonGroup class="vp-raw">
            <MpButton variant="secondary" @click="onClose"> Cancel </MpButton>
            <MpButton> Approve </MpButton>
          </MpButtonGroup>
        </MpModalFooter>
      </MpModalContent>

      <MpModalOverlay />
    </MpModal>
  </div>
</template>

```

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

### MpFlex Component Usage Example (Vue.js)

Source: https://docs.mekari.design/components/flex

An example demonstrating the usage of the MpFlex component within a Vue.js template. It showcases how to apply various props like direction, alignment, and spacing to structure content. The example includes nested MpFlex components and MpText for content display.

```html
<template>
  <MpFlex
    id="container-flex"
    as="section"
    width="full"
    height="auto"
    bg="brand.mekari"
    direction="row"
    justify="center"
    align="center"
    gap="8"
    p="8"
    rounded="md"
  >
    <MpFlex
      width="50%"
      height="200px"
      bg="white"
      justify="center"
      align="center"
      rounded="sm"
      :_nextTheme="{ bg: 'background.neutral' }"
    >
      <MpText>Item 1</MpText>
    </MpFlex>
    <MpFlex
      width="50%"
      height="200px"
      bg="white"
      justify="center"
      align="center"
      rounded="sm"
      :_nextTheme="{ bg: 'background.neutral' }"
    >
      <MpText>Item 2</MpText>
    </MpFlex>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpFlex, MpText } from '@mekari/pixel3'
</script>
```

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

### Autocomplete Playground Example (Vue)

Source: https://docs.mekari.design/components/autocomplete

A Vue.js playground example demonstrating the MpAutocomplete component. It shows how to set up options, bind the selected value, and configure various props like searchability, keep-alive, and clearability.

```vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { MpAutocomplete } from '@mekari/pixel3'

  const options = Array.from(Array(200).keys()).map((v) => `Option ${v}`)
  const selected = ref()
</script>

<template>
  <MpAutocomplete
    id="playground"
    v-model="selected"
    :data="options"
    is-searchable
    :is-keep-alive="false"
    is-clearable
  />
</template>
```

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

### MpImage Usage Examples

Source: https://docs.mekari.design/components/image

Examples demonstrating different layout options for the MpImage component.

```APIDOC
## MpImage Usage Examples

### Description
Demonstrates various layout configurations for the MpImage component.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```html
<template>
  <MpFlex direction="column" gap="4">
    <div>
      <MpText weight="semiBold"> Intrinsic Layout </MpText>
      <MpText>
        When use intrinsic layout, the image will first render wrapper element accordingly with
        width and height of image, this useful to achieve zero CLS (cumulative layout shift).
        <b>don't forget to pass value for props width and height.</b>
      </MpText>
      <MpImage
        id="layout-intrinsic"
        src="https://placehold.co/600x200"
        srcset="https://placehold.co/300x100"
        type-srcset="image/png"
        media-srcset="(orientation: portrait)"
        :width="600"
        :height="200"
      />
    </div>
    <div>
      <MpText weight="semiBold"> Fixed Layout </MpText>
      <MpText>
        When use fixed layout, the image dimensions will not change as the viewport changes (no
        responsiveness) similar to the native img element.
        <b>don't forget to pass value for props width and height.</b>
      </MpText>
      <MpImage
        id="layout-fixed"
        src="https://placehold.co/200x200"
        layout="fixed"
        :width="200"
        :height="200"
        :is-lazy="false"
      />
    </div>
    <div>
      <MpText weight="semiBold"> Responsive Layout </MpText>
      <MpText>
        When use responsive layout, the image will have auto dimensions based on assets width and
        height.
        <b>don't forget to pass value for props width and height.</b>
      </MpText>
      <MpImage
        id="layout-responsive"
        src="https://placehold.co/1000x200"
        layout="responsive"
        :width="1000"
        :height="200"
      />
    </div>
    <div style="position: relative">
      <MpText weight="semiBold"> Fill Layout </MpText>
      <MpText>
        When use fill layout, the image will stretch both width and height to the dimensions of its
        parent element, This is usually paired with the objectFit property.
      </MpText>
      <MpFlex
        position="relative"
        width="400px"
        height="200px"
        border-width="1"
        border-color="gray.400"
      >
        <MpImage
          id="layout-fill"
          src="https://placehold.co/600x200"
          layout="fill"
          object-fit="contain"
          object-position="right top"
        />
      </MpFlex>
    </div>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpImage, MpText, MpFlex } from '@mekari/pixel3'
</script>
```

### Response
#### Success Response (200)
N/A (Component renders UI elements)

#### Response Example
N/A
```

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

### Basic MpTextarea Playground Setup (Vue)

Source: https://docs.mekari.design/components/textarea

A basic setup for the MpTextarea component using Vue.js and the Composition API. It shows how to import and render the component within a template.

```html
<script setup lang="ts">
  import { MpTextarea } from '@mekari/pixel3'
</script>

<template>
  <MpTextarea id="textarea-playground" data-playground="root" />
</template>
```

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

### Basic MpSelect Usage Example (Vue 3)

Source: https://docs.mekari.design/components/select

A basic example of how to use the MpSelect component in Vue 3. It shows how to bind a value using v-model and includes options for the select input. The `is-clearable` prop is also demonstrated.

```vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { MpSelect } from '@mekari/pixel3'

  const value = ref('')
</script>

<template>
  <MpSelect id="select-wtm" v-model="value" is-clearable>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </MpSelect>
</template>
```

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

### Basic MpText Usage with Template (Vue.js)

Source: https://docs.mekari.design/components/text

This example demonstrates the basic usage of the MpText component within a Vue.js template. It includes the necessary script setup for importing the component and displays placeholder text.

```html
<template>
  <MpText>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus accusantium aperiam
    consequuntur cupiditate enim harum hic, maiores nemo numquam odit optio possimus quo repellendus
    sunt tenetur unde veritatis voluptates.
  </MpText>
</template>

<script setup lang="ts">
  import { MpText } from '@mekari/pixel3'
</script>
```

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

### MpTextlink Usage Examples

Source: https://docs.mekari.design/components/textlink

Examples demonstrating different ways to use the MpTextlink component, including variants, icons, and states.

```APIDOC
## MpTextlink Usage Examples

### Variant

Demonstrates the different visual variants available for the text link.

```html
<template>
  <MpFlex gap="4">
    <MpTextlink variant="primary"> Primary link </MpTextlink>
    <MpTextlink variant="secondary"> Secondary link </MpTextlink>
    <MpTextlink variant="danger"> Danger link </MpTextlink>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpTextlink, MpFlex } from '@mekari/pixel3'
</script>
```

### With Icon

Shows how to add icons to the left or right of the text link.

```html
<template>
  <MpFlex gap="4">
    <MpTextlink variant="primary" left-icon="add-circular">Add item</MpTextlink>
    <MpTextlink variant="danger" left-icon="minus-circular">Remove item</MpTextlink>
    <MpTextlink variant="secondary" right-icon="chevrons-down">Dropdown</MpTextlink>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpTextlink, MpFlex } from '@mekari/pixel3'
</script>
```

### Other States (Loading and Disabled)

Illustrates the loading and disabled states of the text link.

```html
<template>
  <MpFlex gap="4">
    <MpTextlink is-loading>Loading</MpTextlink>
    <MpTextlink is-disabled left-icon="download">Disable</MpTextlink>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpTextlink, MpFlex } from '@mekari/pixel3'
</script>
```
```

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

### Tabs Playground Example with Vue.js and TypeScript

Source: https://docs.mekari.design/components/tabs

A Vue.js playground example demonstrating the default usage of the Tabs component. It includes importing necessary components and setting up a basic tab structure with content for each tab. This example utilizes TypeScript for type safety.

```html
<script setup lang="ts">
  import { MpTabs, MpTabList, MpTab, MpTabPanels, MpTabPanel, MpText, css } from '@mekari/pixel3'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8">
    <!-- Default -->
    <MpTabs id="tabs-playground">
      <MpTabList>
        <MpTab> Tab 1 </MpTab>
        <MpTab> Tab 2 </MpTab>
        <MpTab> Tab 3 </MpTab>
        <MpTab> Tab 4 </MpTab>
        <MpTab> Tab 5 </MpTab>
      </MpTabList>

      <MpTabPanels>
        <MpTabPanel>
          <MpText>Content 1</MpText>
        </MpTabPanel>
        <MpTabPanel>
          <MpText>Content 2</MpText>
        </MpTabPanel>
        <MpTabPanel>
          <MpText>Content 3</MpText>
        </MpTabPanel>
        <MpTabPanel>
          <MpText>Content 4</MpText>
        </MpTabPanel>
        <MpTabPanel>
          <MpText>Content 5</MpText>
        </MpTabPanel>
      </MpTabPanels>
    </MpTabs>
  </div>
</template>

```

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

### Drawer Playground Example (Vue.js)

Source: https://docs.mekari.design/components/drawer

A Vue.js example demonstrating the usage of the MpDrawer component. It includes a button to open the drawer, controls for its visibility, and event handlers for opening and closing. The example utilizes other Mekari Pixel components like MpButton and MpButtonGroup.

```vue
<script setup lang="ts">
  import {
    MpButton,
    MpButtonGroup,
    MpDrawer,
    MpDrawerBody,
    MpDrawerCloseButton,
    MpDrawerContent,
    MpDrawerFooter,
    MpDrawerHeader,
    MpDrawerOverlay
  } from '@mekari/pixel3'
  import { ref } from 'vue'

  const isOpen = ref(false)

  function onOpen() {
    console.log('onOpen =>', true)
  }

  function onClose() {
    if (isOpen.value) {
      console.log('onClose =>', true)
      isOpen.value = false
    }
  }
</script>

<template>
  <div>
    <MpButton data-testid="open-drawer" @click="isOpen = true"> Open Drawer </MpButton>

    <MpDrawer
      id="drawer-playground"
      :is-open="isOpen"
      @open="onOpen"
      @close="onClose"
      :is-keep-alive="true"
      placement="right"
    >
      <MpDrawerContent>
        <MpDrawerHeader>
          Drawer title

          <MpDrawerCloseButton />
        </MpDrawerHeader>
        <MpDrawerBody> Drawer Content </MpDrawerBody>
        <MpDrawerFooter>
          <!-- Only need class vp-raw in Pixel docs -->
          <MpButtonGroup class="vp-raw">
            <MpButton variant="secondary" @click="onClose"> Cancel </MpButton>
            <MpButton> Approve </MpButton>
          </MpButtonGroup>
        </MpDrawerFooter>
      </MpDrawerContent>

      <MpDrawerOverlay />
    </MpDrawer>
  </div>
</template>

```

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

### Basic MpCheckbox Usage Example (Vue 3)

Source: https://docs.mekari.design/components/checkbox

A simple Vue 3 template and script setup demonstrating the basic usage of the MpCheckbox component. It shows how to bind the checked state using `v-model` and display the current state.

```vue
<template>
  <MpCheckbox v-model:is-checked="isChecked" id="playground-0w23">
    Checked: {{ isChecked }}
  </MpCheckbox>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { MpCheckbox } from '@mekari/pixel3'

  const isChecked = ref(false)
</script>
```

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

### Basic Chart Playground Example (Vue.js)

Source: https://docs.mekari.design/components/chart

A Vue.js template demonstrating the basic usage of the MpChart component. It includes sample data and options for configuring the chart, such as title and data points. This example is useful for quickly testing and visualizing chart functionalities.

```html
<template>
  <MpChart title="Playground Chart" :data="data" :options="options" is-debug />
</template>
```

```javascript
<script setup lang="ts">
  import { MpChart } from '@mekari/pixel3'

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei'],
    datasets: [
      {
        label: 'Employees',
        data: [100, 200, 300, 400, 500]
      }
    ]
  }

  const options = {
    scales: {
      y: {
        min: 0,
        max: 500,
        ticks: {
          stepSize: 100
        }
      }
    }
  }
</script>
```

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

### MpTooltip with Icons Usage Example (Vue 3)

Source: https://docs.mekari.design/components/tooltip

Illustrates how to use the MpTooltip component with MpIcon components in Vue 3. This example shows different placements of tooltips relative to icons, providing contextual information for each icon.

```vue
<script setup lang="ts">
  import { MpTooltip, MpIcon, MpFlex } from '@mekari/pixel3'
</script>

<template>
  <MpFlex justify="space-around" gap="4">
    <MpTooltip id="tooltip-icon-1" label="Upload" placement="top">
      <MpIcon name="upload" />
    </MpTooltip>

    <MpTooltip id="tooltip-icon-2" label="Delete" placement="right">
      <MpIcon name="delete" />
    </MpTooltip>

    <MpTooltip id="tooltip-icon-3" label="Edit" placement="bottom">
      <MpIcon name="edit" />
    </MpTooltip>

    <MpTooltip id="tooltip-icon-4" label="Info" placement="left">
      <MpIcon name="info" />
    </MpTooltip>
  </MpFlex>
</template>
```

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

### MpIcon Component: Size Examples (Vue.js)

Source: https://docs.mekari.design/components/icon

Illustrates how to control the size of the MpIcon component. This example requires importing MpIcon and MpFlex from '@mekari/pixel3'. It shows the 'md' and 'sm' size variants of the 'profile' icon.

```html
<template>
  <MpFlex gap="10">
    <MpIcon name="profile" size="md" />
    <MpIcon name="profile" size="sm" />
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpIcon, MpFlex } from '@mekari/pixel3'
</script>
```

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

### Basic MpInputTag Usage Example

Source: https://docs.mekari.design/components/input-tag

A basic example demonstrating how to use the MpInputTag component within a Vue template. It includes importing the component and setting up a script for its usage.

```html
<template>
  <MpInputTag />
</template>

<script setup lang="ts">
  import { MpInputTag } from '@mekari/pixel3'
</script>
```

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

### Vue.js Date Picker Playground Example

Source: https://docs.mekari.design/components/date-picker

A Vue.js example demonstrating the usage of the MpDatePicker component. It shows how to bind a date value using v-model and display the selected date. This example utilizes MpFlex and MpText components for layout and text display.

```vue
<template>
  <MpFlex direction="column" gap="4">
    <MpDatePicker id="date-picker-playground" v-model="value" format="YYYY" />

    <MpText> Selected : {{ value }} </MpText>
  </MpFlex>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { MpFlex, MpText, MpDatePicker } from '@mekari/pixel3'

  const value = ref(new Date(2024, 10, 10))
</script>
```

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

### Free Tag Usage Example

Source: https://docs.mekari.design/components/input-tag

Example of how to use the MpInputTag component to create free tags with suggestions.

```APIDOC
## Usage: Free Tag

### Description
This example demonstrates how to use the `MpInputTag` component to allow users to create free tags, with a predefined list of suggestions.

### Code Example

```html
<template>
  <div :class="css({ width: '200px' })">
    <MpInputTag
      id="input-tag-with-free-tag"
      placeholder="Create new tag"
      :max-tags="3"
      :suggestions="suggestions"
      :key-code="['Enter', ';', ',']"
      :is-show-suggestions="true"
      :is-show-input="isShowInput"
      @change="handleChange"
      @input="handleInput"
      @select="handleSelect"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { MpInputTag, css, DataInterface } from '@mekari/pixel3'

  const isShowInput = ref(true)
  const suggestions = ['Jakarta', 'Medan', 'Bandung', 'Surabaya']

  function handleChange(data: DataInterface[]) {
    console.log('DATA:', data)
    isShowInput.value = data.length !== 3
  }
  function handleInput(val: string) {
    console.log('INPUT:', val)
  }
  function handleSelect(val: string) {
    console.log('SELECT:', val)
  }
</script>
```

### Parameters

- **`id`**: `"input-tag-with-free-tag"` (string) - Unique identifier for the input tag.
- **`placeholder`**: `"Create new tag"` (string) - Placeholder text displayed when the input is empty.
- **`max-tags`**: `3` (number) - Maximum number of tags allowed.
- **`suggestions`**: `['Jakarta', 'Medan', 'Bandung', 'Surabaya']` (Array<string>) - List of available suggestions.
- **`key-code`**: `['Enter', ';', ',']` (Array<string>) - Key codes that trigger tag creation.
- **`is-show-suggestions`**: `true` (boolean) - Makes the suggestions list visible.
- **`is-show-input`**: `isShowInput` (ref<boolean>) - Controls the visibility of the input field, dynamically updated based on the number of tags.

### Events

- **`@change`**: `handleChange` - Callback function triggered when the tags change. It receives the updated data array.
- **`@input`**: `handleInput` - Callback function triggered when the input value changes. It receives the current input string.
- **`@select`**: `handleSelect` - Callback function triggered when a suggestion is selected. It receives the selected suggestion string.
```

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

### MpLoader Component Playground Example

Source: https://docs.mekari.design/components/loader

A Vue.js playground example demonstrating the MpLoader component. It shows how to import and use MpLoader with custom size and spacing props within a Vue template.

```html
<script setup lang="ts">
  import { MpLoader, css } from '@mekari/pixel3'
</script>

<template>
  <div :class="css({ p: 4 })">
    <MpLoader :size="20" :spacing="8" />
  </div>
</template>
```

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

### MpIcon Component: Variant Examples (Vue.js)

Source: https://docs.mekari.design/components/icon

Demonstrates how to use the MpIcon component with different visual variants. It requires importing MpIcon and MpFlex from '@mekari/pixel3'. The example shows an 'outline' and a 'fill' variant of the 'profile' icon.

```html
<template>
  <MpFlex gap="4">
    <MpIcon name="profile" variant="outline" color="blue.400" />
    <MpIcon name="profile" variant="fill" color="blue.400" />
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpIcon, MpFlex } from '@mekari/pixel3'
</script>
```

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

### Basic Popover Example (Vue 3)

Source: https://docs.mekari.design/components/popover

A basic implementation of the Popover component in Vue 3. This example demonstrates how to set up a trigger button and content for the popover, utilizing the MpPopover, MpPopoverTrigger, and MpPopoverContent components. It also shows the use of the `css` utility for styling.

```html
<script setup lang="ts">
  import { MpPopover, MpPopoverTrigger, MpPopoverContent, MpButton, css } from '@mekari/pixel3'
</script>

<template>
  <MpPopover id="popover-playground">
    <MpPopoverTrigger>
      <MpButton>Show popover</MpButton>
    </MpPopoverTrigger>

    <MpPopoverContent
      :class="
        css({
          p: 4,
          width: 65,
          maxWidth: 65,
          maxHeight: '300px',
          _nextTheme: {
            color: 'text.default'
          }
        })
      "
    >
      Basic Popover with placement
    </MpPopoverContent>
  </MpPopover>
</template>
```

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

### Timeline Component Usage Example (Vue.js)

Source: https://docs.mekari.design/components/timeline

A Vue.js example demonstrating how to use the MpTimeline component. It includes importing necessary components and utilities, setting up the component's script, and rendering a timeline item with approval status, date, and content.

```html
<script setup lang="ts">
import {
  MpTimeline,
  MpTimelineItem,
  MpTimelineTitle,
  MpTimelineCaption,
  MpTimelineContent,
  MpText
} from '@mekari/pixel3'
import { usePixelTheme } from '@mekari/pixel3-utils'

const { isNextTheme } = usePixelTheme()
</script>

<template>
  <div>
    <MpTimeline>
      <MpTimelineItem status="approved" is-hide-top-connector>
        <MpTimelineTitle>
          <MpText font-size="md" line-height="md" weight="semiBold" style="font-weight: 600">
            Need Approval
            <MpText as="span" :color="isNextTheme ? 'text.secondary' : 'gray.400'" weight="regular">
              by
            </MpText>
            Jessie
          </MpText>
        </MpTimelineTitle>
        <MpTimelineCaption> 02 Apr 2022, 21:12 PM </MpTimelineCaption>
        <MpTimelineContent>
          <MpText>
            Complete all components, specs and space. so it is ready to review to all designers and
            move to pixel docs 2.0.
          </MpText>
        </MpTimelineContent>
      </MpTimelineItem>
    </MpTimeline>
  </div>
</template>
```

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

### Import Tour Component from Pixel3

Source: https://docs.mekari.design/components/tour

Demonstrates how to import the 'tour' object from the '@mekari/pixel3' package. This is the primary step to utilize the Tour component in your project. Ensure the package is installed.

```javascript
import { tour } from '@mekari/pixel3'
```

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

### Basic Toast Notification Example (Vue 3)

Source: https://docs.mekari.design/components/toast

A simple example demonstrating how to trigger a success toast notification with a title and position using the `toast.notify` function within a Vue 3 setup. It also includes a button to clear all active toasts.

```vue
<script setup lang="tsx">
  import { toast, MpFlex, MpButton } from '@mekari/pixel3'

  function handleShow() {
    toast.notify({
      id: 'toast-wtm',
      position: 'top-center',
      variant: 'success',
      title: 'Setting is imported.'
    })
  }

  function handleClear() {
    toast.closeAll()
  }
</script>

<template>
  <MpFlex gap="2">
    <MpButton variant="primary" data-testid="show-toast-wtm" @click="handleShow">Show</MpButton>
    <MpButton variant="secondary" @click="handleClear">Clear all</MpButton>
  </MpFlex>
</template>
```

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

### Render Icon with MpIcon Component

Source: https://docs.mekari.design/components/icon

A Vue.js playground example showcasing how to use the MpIcon component to render an icon with the name 'profile'. It includes the necessary template and script setup.

```html
<template>
  <MpIcon name="profile" />
</template>

<script setup lang="ts">
  import { MpIcon } from '@mekari/pixel3'
</script>
```

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

### Basic MpSlider Usage (Vue Template)

Source: https://docs.mekari.design/components/slider

A basic example of using the MpSlider component within a Vue.js template. It shows the component's tag and the necessary script setup for importing it.

```html
<template>
  <MpSlider />
</template>

<script setup lang="ts">
  import { MpSlider } from '@mekari/pixel3'
</script>
```

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

### Input Usage: Size

Source: https://docs.mekari.design/components/input

Example demonstrating different sizes of the MpInput component.

```APIDOC
## Usage: Size

### Description
Demonstrates the different sizes available for the Input component.

### Request Example
```html
<script setup lang="ts">
  import { MpFlex, MpInput } from '@mekari/pixel3'
</script>

<template>
  <MpFlex gap="2">
    <MpInput id="input-wtm" size="sm" />
    <MpInput id="input-0tn" />
  </MpFlex>
  <MpFlex gap="2">
    <MpInput id="input-w3s" variant="unstyled" size="sm" />
    <MpInput id="input-ri9" variant="unstyled" />
  </MpFlex>
</template>
```
```

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

### Mekari Table Example with Data (Vue.js)

Source: https://docs.mekari.design/components/table

Demonstrates how to implement a table using Mekari Design Components in a Vue.js application. It includes a template for the table structure and a script setup section to define and populate the employee data.

```html
<template>
  <MpTableContainer>
    <MpTable>
      <MpTableHead>
        <MpTableRow>
          <MpTableCell scope="col"> Employee name </MpTableCell>
          <MpTableCell scope="col"> Start effective date </MpTableCell>
          <MpTableCell scope="col"> Benefit group </MpTableCell>
          <MpTableCell scope="col"> Benefit limitation </MpTableCell>
        </MpTableRow>
      </MpTableHead>
      <MpTableBody>
        <MpTableRow v-for="employee in employees" :key="employee.id">
          <MpTableCell as="td" scope="row">
            {{ employee.name }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.effective_date }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.benefit_group }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.benefit_limitation }}
          </MpTableCell>
        </MpTableRow>
      </MpTableBody>
    </MpTable>
  </MpTableContainer>
</template>

<script setup lang="ts">
  import {
    MpTable,
    MpTableHead,
    MpTableBody,
    MpTableRow,
    MpTableCell,
    MpTableContainer
  } from '@mekari/pixel3'

  const employees = [
    {
      id: 1,
      name: 'Andy Bernard',
      effective_date: '1 Jan 2020',
      benefit_group: 'Leader',
      benefit_limitation: 'Rp150.000.000'
    },
    {
      id: 2,
      name: 'Angela Martin',
      effective_date: '-',
      benefit_group: 'Staff',
      benefit_limitation: '-'
    },
    {
      id: 3,
      name: 'Dwight Schrute',
      effective_date: '1 Jan 2021',
      benefit_group: 'Management',
      benefit_limitation: 'Rp200.000.000'
    },
    {
      id: 4,
      name: 'Jim Helpert',
      effective_date: '1 Jan 2021',
      benefit_group: 'Management',
      benefit_limitation: 'Rp200.000.000'
    },
    {
      id: 5,
      name: 'Kevin Malone',
      effective_date: '23 Sep 2020',
      benefit_group: 'Accounting',
      benefit_limitation: 'Rp50.000.000'
    }
  ]
</script>
```

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

### MpTooltip with Portal Usage Example (Vue 3)

Source: https://docs.mekari.design/components/tooltip

Shows how to enable portal rendering for the MpTooltip component in Vue 3 using the `use-portal` prop. This is useful for ensuring tooltips are rendered outside their parent DOM hierarchy, preventing overflow issues and improving stacking context.

```vue
<script setup lang="ts">
  import { MpTooltip, MpIcon } from '@mekari/pixel3'
</script>

<template>
  <div>
    <MpTooltip
      id="tooltip-portal"
      use-portal
      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis est finibus ligula tincidunt, ac lacinia urna ultricies."
    >
      <MpIcon name="info" />
    </MpTooltip>
  </div>
</template>
```

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

### Mekari Tour API Reference

Source: https://docs.mekari.design/components/tour

This section outlines the API for the Mekari tour functionality. It details the parameters for the `tour` function, including `isStartTour`, `steps`, and `options`. The `steps` array allows configuration of individual tour elements, while the `options` object provides global tour settings.

```javascript
// Use tour function with steps and options parameter to show tour on your applications
tour(isStartTour, steps, options)

steps: [
  {
    target: '#tour-dashboard-1', // define target element, using web API document.querySelector() under the hood, if not defined Tour will render as intro.
    options: { // option object receive any valid Popper.js configuration
      placement: 'bottom' // placement of content, default to bottom
    },
    isHighlighted: true, // show highlighted target element
    highlightColor: 'pink', // variant of highlight color, available pink, blue and black
    isScrollIntoElement: true, // scrolling into target element, using web API scrollTo() under the hood
    offset: 0 // set top offset when scrolling into target element, default to 16
    render: (next, prev, close) => void // render of tour, return next, prev and close functions
  },
]

options: {
  id: 'tour', // id for MpTour
  stepIndex: 0, // represent index for first tour, default to 0
  isDisableScroll: false, // if true, disabled scrolling event in body
  isManual: true, // if true, handle MpTour event manually
  isDebug: true, // if true, show debug info in console
  next: nextFunction, // function for handle next action, return step index
  prev: prevFunction, // function for handle back action, return step index
  close: closeFunction, // function for handle back action, return step index
}

```

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

### Configure Accordion Icon Position (Vue.js)

Source: https://docs.mekari.design/components/accordion

This snippet demonstrates how to control the position of the accordion icon using the 'icon-position' attribute on the MpAccordionItem component. It utilizes Vue.js and the '@mekari/pixel3' library. The example shows default icon placement and explicitly setting it to 'start'.

```vue
<script setup lang="ts">
  import {
    MpAccordion,
    MpAccordionHeader,
    MpAccordionIcon,
    MpAccordionItem,
    MpAccordionPanel,
    MpText,
    css
  } from '@mekari/pixel3'

  const headerTextClass = css({
    flex: '1',
    textAlign: 'left',
    fontWeight: 'semiBold'
  })
</script>

<template>
  <div>
    <MpAccordion is-allow-multiple id="accordion-icon-position">
      <MpAccordionItem id="accordion-item-1">
        <MpAccordionHeader>
          <MpText size="h2" :class="headerTextClass">Header 1</MpText>

          <MpAccordionIcon />
        </MpAccordionHeader>

        <MpAccordionPanel>
          <MpText color="inherit">
            Minimizing human error through automatic recording of transactions between POS and
            Mekari products.
          </MpText>
        </MpAccordionPanel>
      </MpAccordionItem>

      <MpAccordionItem id="accordion-item-2" icon-position="start">
        <MpAccordionHeader>
          <MpAccordionIcon name="chevrons-right" />

          <MpText size="h2" :class="headerTextClass">Header 2</MpText>
        </MpAccordionHeader>

        <MpAccordionPanel>
          <MpText color="inherit">
            Minimizing human error through automatic recording of transactions between POS and
            Mekari products.
          </MpText>
        </MpAccordionPanel>
      </MpAccordionItem>

      <MpAccordionItem id="accordion-item-3">
        <MpAccordionHeader>
          <MpText size="h2" :class="headerTextClass">Header 3</MpText>

          <MpAccordionIcon />
        </MpAccordionHeader>

        <MpAccordionPanel>
          <MpText color="inherit">
            Minimizing human error through automatic recording of transactions between POS and
            Mekari products.
          </MpText>
        </MpAccordionPanel>
      </MpAccordionItem>
    </MpAccordion>
  </div>
</template>
```

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

### Display and Clear Toasts with Variants (Vue 3)

Source: https://docs.mekari.design/components/toast

Demonstrates how to use the `toast.notify` function to display different types of toasts (success, error, greeting) and `toast.closeAll` to dismiss them. This example utilizes Vue 3's `<script setup>` syntax and includes `MpFlex` and `MpButton` components for UI interaction.

```vue
<script setup lang="ts">
  import { toast, MpFlex, MpButton } from '@mekari/pixel3'

  function handleShowSuccess() {
    toast.notify({
      id: 'toast-wtm',
      position: 'top-center',
      variant: 'success',
      title: 'Setting is imported.'
    })
  }

  function handleShowError() {
    toast.notify({
      id: 'toast-0tn',
      position: 'top-center',
      variant: 'error',
      title: 'Server error, please try again.'
    })
  }

  function handleShowGreeting() {
    toast.notify({
      id: 'toast-h7d',
      position: 'top-center',
      variant: 'greeting',
      title: '🌤️ Good morning, Fajar'
    })
  }

  function handleClear() {
    toast.closeAll()
  }
</script>

<template>
  <MpFlex gap="2">
    <MpButton variant="primary" data-testid="show-toast-wtm" @click="handleShowSuccess"
      >Show success</MpButton
    >
    <MpButton variant="danger" data-testid="show-toast-0tn" @click="handleShowError"
      >Show error</MpButton
    >
    <MpButton variant="ghost" data-testid="show-toast-h7d" @click="handleShowGreeting"
      >Show greeting</MpButton
    >
    <MpButton variant="secondary" @click="handleClear">Clear all</MpButton>
  </MpFlex>
</template>
```
Tokens:
Raw