codehouse-maybe-ui

1,026
Install
npm install codehouse-maybe-ui
Latest Version:1.0.32
Vue:3
Last Updated:Oct 20, 2021
Links: npm
Maintainer: tnorthern96

Codyhouse-Maybe-UI

Installation

npm i codehouse-maybe-ui

OR

yarn add codehouse-maybe-ui

Initialization in Vue3 app

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

<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

<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)
import { AppTheme, FeatureV9Item, ... } from 'codehouse-maybe-ui'
As well as composables
import useTheme from 'codehouse-maybe-ui/src/composables/useTheme'

Available components in Codehouse

FeatureV9

Form Props

Prop Type Default Description
items Array ( FeatureV9Item[] ) () => [] Feature list to render

CodyButton

Form Props

Prop Type Default Description
variant String ( Variant ) accent Variant type the button should render
size String ( Size ) '' Size the button should render
icon Boolean false Will the button have a icon?

Version History

Version Released Vue License
1.0.32 ^3.0.5
1.0.31 ^3.0.5
1.0.30 ^3.0.5
1.0.29 ^3.0.5
1.0.28 ^3.0.5