open-index/open-npm huggingface dataset:
npm package: @morpheme/layouts
Description: Morpheme layout Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Layouts

> Deprecated

Morpheme Layouts Component.

## Installation

npm

```
npm i @morpheme/layouts
```

yarn

```
yarn add @morpheme/layouts
```

pnpm

```
pnpm i @morpheme/layouts
```

## Usage

```vue
<script setup lang="ts">
import {Auth, Base, Default, SidebarMenu} from '@morpheme/layouts';
</script>

<template>
  <Auth />
  <Base />
  <Default />
  <SidebarMenu />
</template>
```

## Documentation

View `Layouts` documentation [here](https://gits-ui.web.app/?path=/story/components-layouts--default).

## License

MIT
npm package: @morpheme/list
Description: Morpheme List Component
Author: Warsono
Latest version: 1.0.1

# Morpheme List

Morpheme List component is used for creating list, grouping list and creating menus.

## Installation

npm

```
npm i @morpheme/list
```

yarn

```
yarn add @morpheme/list
```

pnpm

```
pnpm i @morpheme/list
```

## Usage

This package provides 5 components: `List`, `ListItem`, `ListItemDivider`, `ListItemHeader`, `ListCollapse`.

### Basic Usage

```vue
<script setup lang="ts">
import {List, ListItem, ListItemDivider} from '@morpheme/list';
import '@morpheme/list/dist/style.css';
</script>

<template>
  <List>
    <ListItem>Item 1</ListItem>
    <ListItem>Item 2</ListItem>
    <ListItemDivider />
    <ListItem>Item 3</ListItem>
    <ListItemDivider />
    <ListItem>Item 4</ListItem>
    <ListItem>Item 5</ListItem>
  </List>
</template>
```

### List with icons

```vue
<template>
  <List v-bind="args">
    <ListItem prepend-icon="ri:user-line"> Item 1 </ListItem>
    <ListItem prepend-icon="ri:search-line"> Item 2 </ListItem>
    <ListItemDivider />
    <ListItem append-icon="ri:search-line"> Item 3 </ListItem>
    <ListItem append-icon="ri:search-line"> Item 4 </ListItem>
    <ListItemDivider />
    <ListItem prepend-icon="ri:home-line" append-icon="ri:search-line">
      Item 5
    </ListItem>
    <ListItem prepend-icon="ri:user-line" append-icon="ri:arrow-downs-line">
      Item 6
    </ListItem>
  </List>
</template>
```

### Collapsing List

```vue
<template>
  <List>
    <ListItem prepend-icon="ri:home-2-line"> Home </ListItem>
    <ListCollapse>
      <template #activator="{isOpen, toggle}">
        <ListItem
          prepend-icon="ri:book-line"
          append-icon="ri:arrow-down-s-line"
          :append-icon-class="isOpen ? 'rotate-180' : ''"
          @click="toggle"
        >
          Blog
        </ListItem>
      </template>
      <List>
        <ListItem> Add New Post </ListItem>
        <ListItem> View Comments </ListItem>
      </List>
    </ListCollapse>
    <ListCollapse>
      <template #activator="{isOpen, toggle}">
        <ListItem
          prepend-icon="ri:user-line"
          append-icon="ri:arrow-down-s-line"
          :append-icon-class="isOpen ? 'rotate-180' : ''"
          @click="toggle"
        >
          Shop
        </ListItem>
      </template>
      <List>
        <ListItem> View Dashboard </ListItem>
        <ListItem> Sales </ListItem>
      </List>
    </ListCollapse>
  </List>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-listgroup--basic-list).

## License

MIT
npm package: @morpheme/logo
Description: Morpheme Logo Component
Author: Warsono
Latest version: 1.0.0

# Morpheme Logo

Morpheme Logo Component.

## Installation

npm

```
npm i @morpheme/logo
```

yarn

```
yarn add @morpheme/logo
```

pnpm

```
pnpm i @morpheme/logo
```

## Usage

```vue
<script setup lang="ts">
import VLogo from '@morpheme/logo';
import '@morpheme/logo/dist/style.css';
</script>

<template>
  <VLogo />
</template>
```

## Documentation

View `VLogo` documentation [here](https://gits-ui.web.app/?path=/story/components-logo--default).

## License

MIT
npm package: @morpheme/menu
Description: Morpheme Menu Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Menu

Morpheme Menu Component.

## Installation

npm

```
npm i @morpheme/menu
```

yarn

```
yarn add @morpheme/menu
```

pnpm

```
pnpm i @morpheme/menu
```

## Usage

```vue
<script setup lang="ts">
// import styles
import '@morpheme/menu/dist/style.css';
// import component
import VMenu from '@morpheme/menu';
</script>

<template>
  <VMenu />
</template>
```

## Documentation

View `VMenu` documentation [here](https://gits-ui.web.app/?path=/story/components-menu--default).

## License

MIT
npm package: @morpheme/menus
Description: Menus component for Vue.js
Author: Warsono
Latest version: 1.0.1

# Morpheme Menus

Morpheme Menus Component.

## Installation

npm

```
npm i @morpheme/menus
```

yarn

```
yarn add @morpheme/menus
```

pnpm

```
pnpm i @morpheme/menus
```

## Usage

```vue
<script setup lang="ts">
// import styles
import '@morpheme/menus/dist/style.css';
// import component
import Menus from '@morpheme/menus';
</script>

<template>
  <Menus />
</template>
```

## Documentation

View `Menus` documentation [here](https://gits-ui.web.app/?path=/story/components-menus--default).

## License

MIT
npm package: @morpheme/modal
Description: Morpheme Modal Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Modal

Vue modal component. Based on `@headlessui/vue` dialog.

## Installation

npm

```
npm i @morpheme/modal
```

yarn

```
yarn add @morpheme/modal
```

pnpm

```
pnpm i @morpheme/modal
```

## Basic Usage

```vue
<script setup lang="ts">
import VModal from '@morpheme/modal';
import '@morpheme/modal/dist/style.css';
</script>

<template>
  <VModal>
    <template #activator="{open}">
      <v-btn @click="open">Click Me</v-btn>
    </template>

    Lorem ipsum dolor sit amet
  </VModal>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-modal--default).

## License

MIT
npm package: @morpheme/multi-select
Description: Vue Multi Select Component
Author: Warsono
Latest version: 1.0.1

# Multi Select

Vue Multi Select Component.

## Installation

npm

```
npm i @morpheme/multi-select
```

yarn

```
yarn add @morpheme/multi-select
```

pnpm

```
pnpm i @morpheme/multi-select
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VMultiSelect from '@morpheme/multi-select';
import '@morpheme/multi-select/dist/style.css';

const items = ref([
  {
    text: 'Item 1',
    value: 1,
  },
  {
    text: 'Item 2',
    value: 2,
  },
  {
    text: 'Item 2',
    value: 2,
  },
]);

const selected = ref();
</script>

<template>
  <VMultiSelect v-model="selected" :items="items" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-multi-select--default).

## License

MIT
npm package: @morpheme/nav-drawer
Description: Vue Navigation Drawer Component
Author: Warsono
Latest version: 1.0.1

# NavDrawer

Navigation Drawer Component.

## Installation

Install with your own prefered package manager:

```
# with NPM
npm i @morpheme/nav-drawer

# Or with Yarn
yarn add @morpheme/nav-drawer

# Or with PNPM
pnpm i @morpheme/nav-drawer
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VNavDrawer from '@morpheme/nav-drawer';
import '@morpheme/nav-drawer/dist/style.css';

const isOpen = ref(true);
</script>

<template>
  <VNavDrawer v-model="isOpen">
    <p>Hello World</p>
  </VNavDrawer>
</template>
```

## Documentation

View `VNavDrawer` documentation [here](https://gits-ui.web.app/?path=/story/components-nav-drawer--default).

## License

MIT
npm package: @morpheme/navbar
Description: Morpheme Navbar Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Navbar Component

> Reusable Navbar Component

## Installation

npm

```
npm i @morpheme/navbar
```

yarn

```
yarn add @morpheme/navbar
```

pnpm

```
pnpm i @morpheme/navbar
```

## Usage

```vue
<script setup lang="ts">
import Navbar from '@morpheme/navbar';
</script>

<template>
  <Navbar />
</template>
```

## Documentation

View `Navbar` documentation [here](https://gits-ui.web.app/?path=/story/components-navbar--default).

## License

MIT