codehouse-maybe-ui v1.0.32

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

CodyButton