open-index/open-npm huggingface dataset:
npm package: @gitrules/js-client
Description: JavaScript client for gitrules
Author: Derek Worthen
Latest version: 0.0.3

# @GitRules/JS-Client

A JavScript wrapper to https://github.com/gitrules/gitrules

## Install

```bash
npm install -g @gitrules/js-client
```

You should then be able to run `gitrules` commands.

```
gitrules --help
```

## Updating to a newer version of the GitRules Protocol

A new version of this package needs to be released whenever [GitRules](https://github.com/gitrules/gitrules) releases a new version.

### Update process

1. Update the `archive-downloader.variables.version` field in `package.json` to the new version of GitRules.
2. Update the `version` field in `package.json` (typically matching the new version of GitRules)
3. When these changes make it to the main branch, a GitHub action will automatically deploy a new npm package.
npm package: @gits-id/alert
Description: GITS Alert component is a flexible alert component that can be used to display various types of messages to the user.
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Alert

GITS Alert component is a flexible alert component that can be used to display various types of messages to the user.

## Installation

Install with your prefered package manager.

With NPM:

```
npm i @gits-id/alert
```

With Yarn:

```
yarn add @gits-id/alert
```

With PNPM:

```
pnpm i @gits-id/alert
```

## Usage

To use the component, you can simply include it in your template like this:

```vue
<script setup lang="ts">
// import component
import VAlert from '@gits-id/alert';
// import styles (includes dark mode)
import '@gits-id/alert/dist/style.css';
// or import the SASS styles
import '@gits-id/alert/src/VAlert.scss';
// if are using SASS bundle and want to add dark mode support,
// uncomment this line
// import '@gits-id/alert/src/VAlert.dark.scss';
</script>

<template>
  <VAlert color="primary"> Hello World </VAlert>
</template>
```

## Documentation

View full documentation [here](https://gitsindonesia.github.io/ui-component/components/alert).

## License

MIT
npm package: @gits-id/app-bar
Description: The AppBar, also known as a Navigation Bar, is a component used to display content at the top of a page.
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS AppBar

The AppBar, also known as a Navigation Bar, is a component used to display content at the top of a page.

## Installation

Install with your prefered package manager.

With NPM:

```
npm i @gits-id/alert
```

With Yarn:

```
yarn add @gits-id/alert
```

With PNPM:

```
pnpm i @gits-id/alert
```

## Usage

To use the component, you can simply include it in your template like this:

```vue
<script setup lang="ts">
// import component
import AppBar from '@gits-id/app-bar';
// import styles
import '@gits-id/app-bar/dist/style.css';
</script>

<template>
  <AppBar> Hello World </AppBar>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-app-bar--default).

## License

MIT
npm package: @gits-id/autocomplete
Description: GITS Autocomplete Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Autocomplete Component

Autocomplete Component.

## Installation

npm

```bash
npm i @gits-id/autocomplete
```

yarn

```bash
yarn add @gits-id/autocomplete
```

pnpm

```bash
pnpm i @gits-id/autocomplete
```

## Usage

```html
<script setup lang="ts">
  import Autocomplete from '@gits-id/autocomplete';
  import {ref} from 'vue';

  const items = [
    {value: 1, text: 'Wade Cooper'},
    {value: 2, text: 'Arlene Mccoy'},
    {value: 3, text: 'Devon Webb'},
    {value: 4, text: 'Tom Cook'},
    {value: 5, text: 'Tanya Fox'},
    {value: 6, text: 'Hellen Schmidt'},
  ];

  const selected = ref();
</script>

<template>
  <Autocomplete v-model="selected" :items="items" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-autocomplete--default).

## License

MIT
npm package: @gits-id/avatar
Description: Avatar Component
Author: Warsono
Latest version: 1.0.0-beta.4

# Avatar Component

## Installation

npm

```
npm i @gits-id/avatar
```

yarn

```
yarn add @gits-id/avatar
```

pnpm

```
pnpm i @gits-id/avatar
```

## Usage

```vue
<script setup lang="ts">
// import component
import Avatar from '@gits-id/avatar';
// import style
import '@gits-id/avatar/dist/style.css';
</script>

<template>
  <Avatar color="primary" name="John Doe" />
  <Avatar color="primary" src="path-to-image.png" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-avatar--variants).

## License

MIT
npm package: @gits-id/badge
Description: GITS Badge Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Badge Component

> Badge Component

## Installation

npm

```
npm i @gits-id/badge
```

yarn

```
yarn add @gits-id/badge
```

pnpm

```
pnpm i @gits-id/badge
```

## Usage

```vue
<script setup lang="ts">
import Badge from '@gits-id/badge';
</script>

<template>
  <Badge color="primary"> Text </Badge>
</template>
```

## Documentation

View `Badge` documentation [here](https://gits-ui.web.app/?path=/story/components-badge--default).

## License

MIT
npm package: @gits-id/bottom-sheet
Description: GITS UI Bottom Sheet Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS UI - Bottom Sheet

Bottom Sheet Component.

## Installation

npm

```
npm i @gits-id/bottom-sheet
```

yarn

```
yarn add @gits-id/bottom-sheet
```

pnpm

```
pnpm i @gits-id/bottom-sheet
```

## Basic Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import {BottomSheet, BottomSheetBody} from '@gits-id/bottom-sheet';

const isOpen = ref(false);
</script>

<template>
  <button @click="isOpen = !isOpen">Open Bottom Sheet</button>
  <BottomSheet v-model="isOpen">
    <BottomSheetBody>Hello World!</BottomSheetBody>
  </BottomSheet>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-bottom-sheet--default).

## License

MIT
npm package: @gits-id/breadcrumbs
Description: GITS Breadcrumbs Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Breadcrumbs Component

> Breadcrumbs Component

## Installation

npm

```
npm i @gits-id/breadcrumbs
```

yarn

```
yarn add @gits-id/breadcrumbs
```

pnpm

```
pnpm i @gits-id/breadcrumbs
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import Breadcrumbs from '@gits-id/breadcrumbs';

const items = ref([
  {
    text: 'Home',
    to: '/',
  },
  {
    text: 'Users',
    to: '/users',
  },
]);
</script>

<template>
  <Breadcrumbs :items="items" />
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/button
Description: GITS Button Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Button Component

> Button Component

## Installation

via npm

```
npm i @gits-id/button
```

via yarn

```
yarn add @gits-id/button
```

via pnpm

```
pnpm i @gits-id/button
```

## Usage

```html
<script setup lang="ts">
  import Button from '@gits-id/button';
</script>

<button color="primary">Click Me</button>
```

## Documentation

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

## License

MIT
npm package: @gits-id/card
Description: GITS Card Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Card Component

> Reusable Card Component

## Installation

via npm

```
npm i @gits-id/card
```

via yarn

```
yarn add @gits-id/card
```

via pnpm

```
pnpm i @gits-id/card
```

## Usage

```vue
<script setup lang="ts">
import Card from '@gits-id/card';
</script>

<template>
  <Card title="Header">My Body</Card>
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/collapsible
Description: GITS Collapsible Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Collapsible Component

> Collapsible Component

## Installation

npm

```
npm i @gits-id/collapsible
```

yarn

```
yarn add @gits-id/collapsible
```

pnpm

```
pnpm i @gits-id/collapsible
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import Collapsible from '@gits-id/collapsible';

const isOpen = ref(false);
</script>

<template>
  <Collapsible v-model="isOpen">
    Anim eiusmod ea nostrud do incididunt consequat duis adipisicing
    reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut
    consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi
    elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui.
    Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute
    aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est
    pariatur qui amet cupidatat magna est adipisicing quis ea ea.
  </Collapsible>
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/container
Description: GITS Container Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Container Component

Container Component.

## Installation

npm

```
npm i @gits-id/container
```

yarn

```
yarn add @gits-id/container
```

pnpm

```
pnpm i @gits-id/container
```

## Usage

```vue
<script setup lang="ts">
import Container from '@gits-id/container';
</script>

<template>
  <Container>Text</Container>
</template>
```

## Documentation

View `Container` documentation [here](https://gits-ui.web.app/?path=/story/components-container--default).

## License

MIT
npm package: @gits-id/dropdown
Description: GITS Dropdown Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Dropdown Component

Dropdown Component.

## Installation

npm

```
npm i @gits-id/dropdown
```

yarn

```
yarn add @gits-id/dropdown
```

pnpm

```
pnpm i @gits-id/dropdown
```

## Usage

```vue
<script setup lang="ts">
import Dropdown from '@gits-id/dropdown';
</script>

<template>
  <Dropdown />
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/editor
Description: GITS Rich Text Editor Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Editor

Rich Text Editor Based on Vue 3 CKEditor.

## Installation

via npm

```
npm i @gits-id/editor
```

via yarn

```
yarn add @gits-id/editor
```

via pnpm

```
pnpm i @gits-id/editor
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VEditor from '@gits-id/editor';
import '@gits-id/editor/dist/style.css';

const content = ref('');
</script>

<template>
  <VEditor v-model="content" />
</template>
```

## Documentation

View `Editor` documentation [here](https://gits-ui.web.app/?path=/story/components-editor--default).

## License

MIT
npm package: @gits-id/forms
Description: GITS Form Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Form Component

> Reusable Form Component

## Installation

npm

```
npm i @gits-id/forms
```

yarn

```
yarn add @gits-id/forms
```

pnpm

```
pnpm i @gits-id/forms
```

## Usage

```vue
<script setup lang="ts">
import {Textarea} from '@gits-id/forms';
</script>

<template>
  <Textarea />
</template>
```

## Documentation

View `Form` documentation [here](https://gits-ui.web.app/?path=/story/components-forms--default).

## License

MIT
npm package: @gits-id/icon
Description: GITS Icon Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Icon Component

## Installation

npm

```
npm i @gits-id/icon
```

yarn

```
yarn add @gits-id/icon
```

pnpm

```
pnpm i @gits-id/icon
```

## Usage

```vue
<script setup lang="ts">
import {Icon} from '@gits-id/icon';
</script>

<template>
  <Icon icon="ic:add" />
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/iconsax
Description: Vue Iconsax
Author: Warsono
Latest version: 1.0.0-beta.3

# Vue Iconsax

## Installation

npm

```
npm i @gits-id/iconsax
```

yarn

```
yarn add @gits-id/iconsax
```

pnpm

```
pnpm i @gits-id/iconsax
```

## Usage

```vue
<script setup lang="ts">
import Iconsax from '@gits-id/iconsax';
</script>

<template>
  <Iconsax name="airplane" />
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/layouts
Description: GITS layout Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Layouts Component

> Deprecated

Layouts Component.

## Installation

npm

```
npm i @gits-id/layouts
```

yarn

```
yarn add @gits-id/layouts
```

pnpm

```
pnpm i @gits-id/layouts
```

## Usage

```vue
<script setup lang="ts">
import {Auth, Base, Default, SidebarMenu} from '@gits-id/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: @gits-id/list
Description: GITS List Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS List Component

Use `List` component for creating list, grouping list and creating menus.

## Installation

npm

```
npm i @gits-id/list
```

yarn

```
yarn add @gits-id/list
```

pnpm

```
pnpm i @gits-id/list
```

## Usage

This package provides 5 components: `List`, `ListItem`, `ListItemDivider`, `ListItemHeader`, `ListCollapse`.

### Basic Usage

```vue
<script setup lang="ts">
import {List, ListItem, ListItemDivider} from '@gits-id/list';
import '@gits-id/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: @gits-id/logo
Description: GITS Logo Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Logo Component

## Installation

npm

```
npm i @gits-id/logo
```

yarn

```
yarn add @gits-id/logo
```

pnpm

```
pnpm i @gits-id/logo
```

## Usage

```vue
<script setup lang="ts">
import VLogo from '@gits-id/logo';
import '@gits-id/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: @gits-id/menu
Description: GITS Menu Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Menu Component

> Reusable Menu Component

## Installation

npm

```
npm i @gits-id/menu
```

yarn

```
yarn add @gits-id/menu
```

pnpm

```
pnpm i @gits-id/menu
```

## Usage

```vue
<script setup lang="ts">
// import styles
import '@gits-id/menu/dist/style.css';
// import component
import VMenu from '@gits-id/menu';
</script>

<template>
  <VMenu />
</template>
```

## Documentation

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

## License

MIT
npm package: @gits-id/menus
Description: Menus component for Vue.js
Author: Warsono
Latest version: 1.0.0-beta.4

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

# GITS Modal

Vue modal component. Based on `@headlessui/vue` dialog.

## Installation

npm

```
npm i @gits-id/modal
```

yarn

```
yarn add @gits-id/modal
```

pnpm

```
pnpm i @gits-id/modal
```

## Basic Usage

```vue
<script setup lang="ts">
import VModal from '@gits-id/modal';
import '@gits-id/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: @gits-id/multi-select
Description: Vue Multi Select Component
Author: Warsono
Latest version: 1.0.0-beta.4

# Multi Select

Vue Multi Select Component.

## Installation

npm

```
npm i @gits-id/multi-select
```

yarn

```
yarn add @gits-id/multi-select
```

pnpm

```
pnpm i @gits-id/multi-select
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VMultiSelect from '@gits-id/multi-select';
import '@gits-id/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: @gits-id/nav-drawer
Description: Vue Navigation Drawer Component
Author: Warsono
Latest version: 1.0.0-beta.4

# NavDrawer

Navigation Drawer Component.

## Installation

Install with your own prefered package manager:

```
# with NPM
npm i @gits-id/nav-drawer

# Or with Yarn
yarn add @gits-id/nav-drawer

# Or with PNPM
pnpm i @gits-id/nav-drawer
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VNavDrawer from '@gits-id/nav-drawer';
import '@gits-id/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: @gits-id/navbar
Description: GITS Navbar Component
Author: Warsono
Latest version: 1.0.0-beta.4

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