# codehouse-maybe-ui

> ```bash npm i codehouse-maybe-ui ```

Latest version **1.0.32** (published 2021-10-20) · 0 weekly downloads

## Install

```sh
npm install codehouse-maybe-ui
pnpm add codehouse-maybe-ui
yarn add codehouse-maybe-ui
bun add codehouse-maybe-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.32 |
| Published | 2021-10-20 |
| First published | 2021-10-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 354 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tnorthern96 |

## Links

- npm: https://www.npmjs.com/package/codehouse-maybe-ui
- npm.io page: https://npm.io/package/codehouse-maybe-ui

## Dependencies (1)

- [codyhouse-framework](https://npm.io/package/codyhouse-framework.md) ^3.0.2

## Recent versions

- 1.0.32 (latest) — 2021-10-20
- 1.0.31 — 2021-10-20
- 1.0.30 — 2021-10-20
- 1.0.29 — 2021-10-20
- 1.0.28 — 2021-10-20
- 1.0.27 — 2021-10-20
- 1.0.26 — 2021-10-20
- 1.0.25 — 2021-10-19
- 1.0.24 — 2021-10-19
- 1.0.23 — 2021-10-19
- 1.0.22 — 2021-10-19
- 1.0.21 — 2021-10-19
- 1.0.20 — 2021-10-19
- 1.0.19 — 2021-10-19
- 1.0.18 — 2021-10-19
- … 18 more at https://npm.io/package/codehouse-maybe-ui/versions

## README

# Codyhouse-Maybe-UI

## Installation

```bash
npm i codehouse-maybe-ui
```

### OR

```bash
yarn add codehouse-maybe-ui
```

## Initialization in Vue3 app

```javascript
import { createApp } from 'vue'
import Cody from 'codehouse-maybe-ui'
import 'codehouse-maybe-ui/src/styles/style.css'

const app = createApp()
app.use(Cody).mount('#app')
```

## Usage

```vue
<template>
  <CodyButton variant="subtle">Hello Cody App</CodyButton>
  <FeatureV9 :items="items"></FeatureV9>
</template>

<script>
import useTheme from 'codehouse-maybe-ui/src/composables/useTheme'
export default {
    setup() {
        const theme = useTheme()
         const items = [
      {
        headerText: "Hello",
        image:
          "https://previews.customer.envatousercontent.com/files/77289437/preview.jpg",
        description: "Lorem ipsum dolor sit amet consectetur.",
        buttonText: "Shop!!",
        buttonVariant: "primary",
        action: theme.toggleTheme,
      },
      {
        headerText: "Hello2",
        image:
          "https://previews.customer.envatousercontent.com/files/77289437/preview.jpg",
        description: "Lorem ipsum dolor sit amet consectetur2.",
        buttonText: "Shop2!!",
        href: "https://stackoverflow.com/questions/43383498/module-has-no-exported-member-export-interface",
      },
    ];
        return {
            items
        }
    }
}
</script>
```

## Typescript

```vue
<template>
  <CodyButton :variant="variant">Hello Cody App</CodyButton>
  <FeatureV9 :items="items" />
</template>

<script>
import { FeatureV9Item, Variant } from 'codehouse-maybe-ui'
import useTheme from 'codehouse-maybe-ui/src/composables/useTheme'
export default {
    setup() {
        const theme = useTheme()
         const items: FeatureV9Item[] = [
      {
        headerText: "Hello",
        image:
          "https://previews.customer.envatousercontent.com/files/77289437/preview.jpg",
        description: "Lorem ipsum dolor sit amet consectetur.",
        buttonText: "Shop!!",
        buttonVariant: "primary",
        action: theme.toggleTheme,
      },
      {
        headerText: "Hello2",
        image:
          "https://previews.customer.envatousercontent.com/files/77289437/preview.jpg",
        description: "Lorem ipsum dolor sit amet consectetur2.",
        buttonText: "Shop2!!",
        href: "https://stackoverflow.com/questions/43383498/module-has-no-exported-member-export-interface",
      },
    ];
    const variant : Variant = 'subtle'
        return {
            items,
            variant
        }
    }
}
</script>
```

#### Codehouse also comes with types for specific component props for better intellisense(typescript only)

```javascript
import { AppTheme, FeatureV9Item, ... } from 'codehouse-maybe-ui'
```

#### As well as composables

```javascript
import useTheme from 'codehouse-maybe-ui/src/composables/useTheme'
```

## Available components in Codehouse

`FeatureV9`

<h2>Form Props</h2>
<table class="styled-table">
    <thead>
        <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>items</td>
            <td>Array ( FeatureV9Item[] )</td>
            <td>() => []</td>
            <td>Feature list to render</td>
        </tr>
    </tbody>
</table>

`CodyButton`

<h2>Form Props</h2>
<table class="styled-table">
    <thead>
        <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>variant</td>
            <td>String ( Variant )</td>
            <td>accent</td>
            <td>Variant type the button should render</td>
        </tr>
        <tr>
            <td>size</td>
            <td>String ( Size )</td>
            <td>''</td>
            <td>Size the button should render</td>
        </tr>
        <tr>
            <td>icon</td>
            <td>Boolean</td>
            <td>false</td>
            <td>Will the button have a icon?</td>
        </tr>
        <tr>
    </tbody>
</table>

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