open-index/open-npm huggingface dataset:
npm package: @jkwamlah/z-avatar
Description: A vue based implementation of modern dynamic avatars that bring the best experience and simplicity. It supports enough props to satisfy mind-blowing customizations. Get concise avatars with distinct colors and text.
Latest version: 0.0.2

# Z-Status-Pill
A vue based implementation of modern dynamic avatars that bring the best experience and simplicity.
It supports enough props to satisfy mind-blowing customizations. Get concise avatars with distinct colors and text.

### Installation
> ``` 
> yarn add z-avatar
> ```
>  ```
> npm i z-avatar
> ```


name: {
    type: String,
    default: ''
},
background: {
    type: String,
    default: ''
},
textColor: {
    type: String,
    default: ''
},
avatarStyleObject: {
    type: Object,
    default: () => [{}]
},


## Props
```vue
name: {
  type: String,
  default: '',
},
background: {
  type: String,
  default: '',
},
textColor: {
  type: String,
  default: '',
},
avatarStyleObject: {
  type: Object,
  default: () => [{}],
},
> ```


## Computed
```vue
computed: {
  getInitials()
}
```

## Usage

###Example 1
```vue
<z-table-data
  width="20%"
  :data="row.name"
>
  <template #avatar>
    <z-avatar
    :name="row.name"
    :background="getAvatarBackgroundColor()"
    ></z-avatar>
  </template>
</z-table-data>
```

###Example 2
```vue
<z-avatar
  name="Jonadab Kwamlah"
  background="#FACFE5"
/>
```
npm package: @jkwamlah/z-button
Description: A vue based implementation of modern dynamic buttons that bring the best experience and simplicity. It supports enough props to satisfy mind-blowing customizations.
Latest version: 0.0.3

# Z-Button
A vue based implementation of modern dynamic buttons that bring the best experience and simplicity.
It supports enough props to satisfy mind-blowing customizations.

### Installation
> ``` 
> yarn add @jkwamlah/z-button
> ```
>  ```
> npm i @jkwamlah/z-button
>```

## Props
```
buttonStyleObject: {
  type: Object,
  default: () => ({})
},
textStyleObject: {
  type: Object,
  default: () => ({})
},
buttonType: {
  type: String,
  default: ''
},
buttonText: {
  type: String,
  default: ''
},
dataToggle: {
  type: String,
  default: ''
},
dataTarget: {
  type: String,
  default: ''
},
icon: {
  type: String,
  default: ''
},
iconStyleObject: {
  type: Object,
  default: () => {}
},
loading: {
  type: Boolean,
  default: false
}
```

## Methods
```
methods: {
  handleButtonClick() {
    this.$emit('button-clicked')
  }
}
```

## Usage

###Example 1
```vue
<z-button 
    icon="icon-bookmarks-document" 
    :button-style-object="buttonStyleObject"
/>
```

###Example 2
```vue
<z-button
    :buttonStyleObject="buttonStyleObject"
    :textStyleObject="buttonTextStyleObject"
    button-type="button"
    button-text="view"
    @click.native.stop="handleButtonClick()"
/>
```
npm package: @jkwamlah/z-table
Description: A vue based implementation of modern dynamic tables that bring the best experience and simplicity. It supports enough props to satisfy mind-blowing customizations.
Latest version: 0.0.3

# Zb-Table
A vue based implementation of modern dynamic tables that bring the best experience and simplicity.
It supports enough props to satisfy mind-blowing customizations.

### Installation
```
npm i @jkwamlah/z-table
```
```
yarn add @jkwamlah/z-table
```

## Props
```vue
columns: {
  type: Array,
  default: () => ([])
},
pagination: {
  type: Boolean,
  default: false
},
numberOfRows: {
  type: String,
  default: ''
},
height: {
  type: String,
  default: ''
},
actualHeight: {
  type: String,
  default: '253.2'
},
rowData: {
  type: Array,
  default: () => ([{}])
},
```

## Usage

```vue
<z-table
    :columns="tableColumns"
    :number-of-rows="tableRows.length.toString()"
    :pagination="true"
  >
    <template>
      <tr
        v-for="(row, rowKey) in tableRows"
        @click.stop="handleShow(rowKey)"
        :style="{marginBottom: setLineAndSpace(rowKey) ? '1.31rem' : '1.25rem',
        paddingBottom: setLineAndSpace(rowKey) ? '1.31rem' : '',
        borderBottom: setLineAndSpace(rowKey) ? '#F3F3F3 0.06rem solid': ''}"
        class="d-flex align-items-center"
      >
        <z-table-data
          width="6%"
        >
          <template>
            <z-switch></z-switch>
          </template>
        </z-table-data>
        <z-table-data
          width="3%"
          :data="row.id"
        />
        <z-table-data
          width="20%"
          :data="row.name"
        />
        <z-table-data
          width="21%"
          :data="row.company"
        />
        <z-table-data
          width="10%"
          :data="row.netSalary"
        />
        <z-table-data
          width="15%"
          :data="row.balance"
        />
        <z-table-data
          width="10%"
          :data="'GHS ' + row.affordability"
        >
          <template>
            <span class="mr-4" @click.prevent="handleIconClicked(rowKey)">
              <i class="icon-pencil"></i>
            </span>
          </template>
        </z-table-data>
        <z-table-data
          width="9%"
          @icon-clicked="handleIconClicked"
        >
          <template>
            <z-pill
              :status="row.approval"
              :background-color="row.approval === 'approved' ? '#F2FDD3' : '#FFE5D4'"
              :status-indicator-color="row.approval === 'approved' ? '#8DE028' : '#FF3C2B'"
            />
          </template>
        </z-table-data>
        <z-table-data
          width="3%"
        >
          <template>
            <z-button
              :buttonStyleObject="kycButtonStyleObject"
              :textStyleObject="kycButtonTextStyleObject"
              button-type="button"
              button-text="view"
            ></z-button>
          </template>
        </z-table-data>
      </tr>
    </template>
  </z-table>