# @markusand/ui-components

> UI components for Vue 3

Latest version **1.3.4** (published 2023-05-24) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @markusand/ui-components
pnpm add @markusand/ui-components
yarn add @markusand/ui-components
bun add @markusand/ui-components
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.3.4 |
| Published | 2023-05-24 |
| First published | 2022-11-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 150.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | markusand |

## Links

- npm: https://www.npmjs.com/package/@markusand/ui-components
- npm.io page: https://npm.io/package/@markusand/ui-components

## Dependencies (3)

- [date-fns](https://npm.io/package/date-fns.md) ^2.29.3
- [reset-css](https://npm.io/package/reset-css.md) ^5.0.1
- [vue-slider-component](https://npm.io/package/vue-slider-component.md) ^4.1.0-beta.2

## Recent versions

- 1.3.4 (latest) — 2023-05-24
- 1.3.3 — 2023-05-19
- 1.3.2 — 2023-05-19
- 1.3.1 — 2023-04-10
- 1.3.0 — 2023-04-08
- 1.2.1 — 2023-03-26
- 1.2.0 — 2022-12-29
- 1.1.0 — 2022-12-05
- 1.0.3 — 2022-11-24
- 1.0.2 — 2022-11-19
- 1.0.1 — 2022-11-15
- 1.0.0 — 2022-11-09

## README

# Vue 3 UI components

## Install

## Components

### Avatar

Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.

Display an image that represents a person or an object, or displays the name initials as fallback. If wrapped in an `avatar-group` element, avatars are overlapped.

```html
<Avatar :src="user.avatar" :initials="user.name" />
```

#### Props

| prop | type | default | description |
|---|---|---|---|
| src | `string`, `null` | `undefined` | Image url |
| initials | `string` | `undefined` | Name from  where extract fallback initials |

#### Events

None

#### Slots

None

#### CSS custom properties

`--avatar-size: 2rem`  
`--avatar-radius: 15%`

### Button

```html
<Button primary @click="doSomething">Do it!</Button>
```

#### Props

| prop | type | default | description |
|---|---|---|---|
| primary | `boolean` | `undefined` |  |
| alert | `boolean` | `undefined` | |
| outline | `boolean` | `undefined` | |
| flat | `boolean`  | `undefined` | |
| block | `boolean` | `undefined` | |
| loading | `boolean` | `undefined` | |
| disabled | `boolean` | `undefined` | |
| submit | `boolean` | `undefined` | |
| reset | `boolean` | `undefined` | |

#### Events

None

#### Slots

`default`

#### CSS custom properties

`--button-padding: 0.5rem`  
`--button-margin: 1px`  
`--button-border-radius: 4px`  
`--button-color: #f8f8f8`  
`--button-font-color: #606068`  
`--button-border: 1px solid #c8c8cf`

### Collapser

```html
<Collapser>
  <template #title>Title</template>
  <section>Content</section>
</Collapser>
```

#### Props

| prop | type | default | description |
|---|---|---|---|
| disabled | `boolean` | `undefined` |  |
| open | `boolean` | `undefined` | |

#### Events

`toggle`

#### Slots

`title` Title

`default` Content

#### CSS custom properties

`--collapser-padding: 0.75rem`  
`--collapser-border: 1px solid #0001`

---
_Source: https://npm.io/package/@markusand/ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._