@indielayer/ui 1.2.0 → 1.4.0

package/docs/pages/component/alert/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XAlert } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Alert'
+const description = 'Alerts are used to communicate a state that affects a system, feature or page.'
+const components = [XAlert]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'accordion'
+const next = 'avatar'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/alert"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/alert/usage.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="space-y-4">
+    <x-alert>Default</x-alert>
+    <x-alert color="primary" outlined>Outlined</x-alert>
+    <x-alert color="sky" type="info" light removable>Hello</x-alert>
+    <x-alert color="error" outlined type="error" light>Error</x-alert>
+    <x-alert color="warning" light type="warning" removable>Warning</x-alert>
+    <x-alert
+      color="emerald"
+      type="success"
+      glow
+      light
+      removable
+      outlined
+    >Success</x-alert>
+    <x-alert color="emerald" type="success">Success</x-alert>
+  </div>
+</template>

package/docs/pages/component/avatar/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XAvatar } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import VariantsDemoCode from './variants.vue?raw'
+import VariantsDemo from './variants.vue'
+import SizeDemoCode from './size.vue?raw'
+import SizeDemo from './size.vue'
+
+const title = 'Avatar'
+const description = 'Avatars are used to represent a user.'
+const components = [XAvatar]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'Size',
+  description: '',
+  code: SizeDemoCode,
+  component: SizeDemo,
+}]
+const back = 'alert'
+const next = 'badge'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/avatar"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/avatar/size.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="space-x-2">
+    <x-avatar size="xs" />
+    <x-avatar size="sm" />
+    <x-avatar />
+    <x-avatar size="lg" />
+    <x-avatar size="xl" />
+  </div>
+</template>

package/docs/pages/component/avatar/usage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="space-x-2">
+    <x-avatar name="John Smith" rounded />
+    <x-avatar name="Andrew Colt" />
+    <x-badge color="green" outlined position="bottom">
+      <x-avatar rounded name="Janet" image="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&q=80" />
+    </x-badge>
+  </div>
+</template>

package/docs/pages/component/avatar/variants.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="space-x-2">
+    <x-avatar name="John Smith" color="slate" />
+    <x-avatar rounded />
+    <x-avatar name="John Smith" color="orange" rounded outlined />
+    <x-avatar name="John Smith" color="sky" outlined />
+  </div>
+</template>

package/docs/pages/component/badge/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XBadge } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Badge'
+const description = 'Badges are used to display a small amount of information.'
+const components = [XBadge]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'avatar'
+const next = 'breadcrumbs'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/badge"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/badge/usage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <x-badge color="pink" outlined size="lg" animated>
+      <x-button color="pink" outlined light size="xl">Notifications</x-button>
+    </x-badge>
+
+    <x-badge
+      color="pink"
+      outlined
+      animated
+      offset-x="-12"
+      offset-y="-10"
+    >
+      Text Example
+    </x-badge>
+
+    <x-badge color="indigo" position="top" align="right">
+      <x-button color="indigo" outlined light>Updates</x-button>
+      <template #content>
+        22323
+      </template>
+    </x-badge>
+
+    <x-badge class="mx-2" align="left">
+      <x-avatar name="John Smith" rounded />
+      <template #content>
+        7
+      </template>
+    </x-badge>
+    <x-badge color="green" class="mx-2" outlined position="bottom">
+      <x-avatar rounded />
+    </x-badge>
+    <x-badge
+      color="green"
+      class="mx-2"
+      outlined
+      position="bottom"
+      align="left"
+    >
+      <x-avatar name="John Smith" rounded />
+    </x-badge>
+    <x-badge color="green" class="mx-2" size="xl" outlined>
+      <x-avatar rounded size="xl" />
+    </x-badge>
+
+    <x-badge color="green" class="mx-2" outlined>
+      <x-avatar name="John Smith" rounded />
+    </x-badge>
+  </div>
+</template>

package/docs/pages/component/breadcrumbs/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XBreadcrumbs } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Breadcrumbs'
+const description = 'Breadcrumbs are used to indicate the current page\'s location within a navigational hierarchy.'
+const components = [XBreadcrumbs]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'badge'
+const next = 'card'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/breadcrumbs"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/breadcrumbs/usage.vue

@@ -0,0 +1,19 @@
+<script setup>
+const simple = [
+  { to: '#', label: 'Breadcrumb item 1' },
+  { to: '#', label: 'Breadcrumb item 2' },
+  { to: '#', label: 'Breadcrumb item 3' },
+  { to: '#', label: 'Breadcrumb item 4' },
+]
+const breadcrumbs = [
+  { to: '#', label: 'Breadcrumb item 1', icon: 'smile' },
+  { to: '#', label: 'Breadcrumb item 2', color: 'purple', shadow: true },
+  { to: '#', label: 'Breadcrumb item 3', icon: 'twitter', color: 'yellow' },
+  { to: '#', label: 'Breadcrumb item 4' },
+]
+</script>
+
+<template>
+  <x-breadcrumbs :items="simple" color="primary" />
+  <x-breadcrumbs :items="breadcrumbs" color="primary" />
+</template>

package/docs/pages/component/button/button-group.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="space-x-4">
+    <x-button-group>
+      <x-button color="gray">Cancel</x-button>
+      <x-button color="primary">Save</x-button>
+    </x-button-group>
+    <x-button-group color="primary" light outlined>
+      <x-button>left</x-button>
+      <x-button>middle</x-button>
+      <x-button>right</x-button>
+    </x-button-group>
+    <x-button-group color="indigo" outlined disabled>
+      <x-button>left</x-button>
+      <x-button>middle</x-button>
+      <x-button>right</x-button>
+    </x-button-group>
+  </div>
+</template>

package/docs/pages/component/button/icons.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="space-x-4">
+    <x-button icon="smile"/>
+    <x-button icon="heart" />
+    <x-button icon="heart">Label</x-button>
+    <x-button icon-right="heart">Label</x-button>
+    <x-button icon="star" icon-right="smile"/>
+  </div>
+</template>

package/docs/pages/component/button/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { XButton, XButtonGroup } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import VariantsDemoCode from './variants.vue?raw'
+import VariantsDemo from './variants.vue'
+import IconsDemoCode from './icons.vue?raw'
+import IconsDemo from './icons.vue'
+import ButtonGroupDemoCode from './button-group.vue?raw'
+import ButtonGroupDemo from './button-group.vue'
+import SizeDemoCode from './size.vue?raw'
+import SizeDemo from './size.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
+
+const title = 'Button'
+const description = 'Used to trigger an action, such as submitting a form, opening a menu, or performing a command.'
+const components = [XButton, XButtonGroup]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'Icons',
+  description: '',
+  code: IconsDemoCode,
+  component: IconsDemo,
+}, {
+  name: 'Size',
+  description: '',
+  code: SizeDemoCode,
+  component: SizeDemo,
+}, {
+  name: 'Button Group',
+  description: '',
+  code: ButtonGroupDemoCode,
+  component: ButtonGroupDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}]
+const back = ''
+const next = 'checkbox'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/button"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/button/size.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="space-x-4">
+    <x-button size="xs">xs</x-button>
+    <x-button size="sm">sm</x-button>
+    <x-button>md</x-button>
+    <x-button size="lg">lg</x-button>
+    <x-button size="xl" icon-right="plus" color="primary">Add new</x-button>
+  </div>
+</template>

package/docs/pages/component/button/states.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="space-x-4">
+    <x-button disabled>Disabled</x-button>
+    <x-button loading>Disabled</x-button>
+  </div>
+</template>

package/docs/pages/component/button/usage.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="grid gap-4 grid-cols-4">
+    <x-button>Default</x-button>
+    <x-button color="primary" icon-right="star">Submit</x-button>
+    <x-button color="primary" light>Light</x-button>
+    <x-button color="primary" ghost>Ghost</x-button>
+    <x-button color="primary" outlined>Outlined</x-button>
+    <x-button color="primary" loading loading-label="Uploading..">Loading</x-button>
+    <x-button color="primary" rounded>filled Rounded</x-button>
+    <x-button color="primary" light outlined>light + outlined</x-button>
+  </div>
+</template>

package/docs/pages/component/button/variants.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-button color="#F46262" light>Custom color</x-button>
+    <x-button color="indigo" light glow>It's glowing</x-button>
+    <x-button color="pink" outlined light glow>Glow</x-button>
+  </div>
+</template>

package/docs/pages/component/card/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XCard } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Card'
+const description = 'Cards are used to display content in an organized manner.'
+const components = [XCard]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'breadcrumbs'
+const next = 'carousel'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/card"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/card/usage.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="space-y-4">
+    <x-card class="p-4">I'm a normal card</x-card>
+    <x-card class="p-4" flat>I'm a flat card</x-card>
+  </div>
+</template>

package/docs/pages/component/carousel/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XCarousel } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Carousel'
+const description = 'A carousel is a rotating set of images.'
+const components = [XCarousel]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'card'
+const next = 'container'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/carousel"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/carousel/usage.vue

@@ -0,0 +1,10 @@
+<template>
+  <x-carousel class="!h-80 rounded-md" class-dots="!justify-start pl-10">
+    <x-carousel-slide>
+      <img src="@/assets/images/photo2.jpeg" alt="" />
+    </x-carousel-slide>
+    <x-carousel-slide>
+      <img src="@/assets/images/photo1.jpeg" alt="" />
+    </x-carousel-slide>
+  </x-carousel>
+</template>

package/docs/pages/component/checkbox/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { XCheckbox } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import VariantsDemoCode from './variants.vue?raw'
+import VariantsDemo from './variants.vue'
+import SizeDemoCode from './size.vue?raw'
+import SizeDemo from './size.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
+
+const title = 'Checkbox'
+const description = 'Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.'
+const components = [XCheckbox]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'Size',
+  description: '',
+  code: SizeDemoCode,
+  component: SizeDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}]
+const back = 'button'
+const next = 'form'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/checkbox"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/checkbox/size.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="space-x-4">
+    <x-checkbox size="xs">xs</x-checkbox>
+    <x-checkbox size="sm">sm</x-checkbox>
+    <x-checkbox>md</x-checkbox>
+    <x-checkbox size="lg">lg</x-checkbox>
+    <x-checkbox size="xl">xl</x-checkbox>
+  </div>
+</template>

package/docs/pages/component/checkbox/states.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-checkbox disabled label="Disabled" />
+    <x-checkbox helper="Helper text">Helper</x-checkbox>
+    <x-checkbox loading>Loading</x-checkbox>
+    <x-checkbox indeterminate>Indeterminate</x-checkbox>
+    <x-checkbox error="Invalid input">Error</x-checkbox>
+  </div>
+</template>

package/docs/pages/component/checkbox/usage.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const checked = ref(true)
+</script>
+
+<template>
+  <div class="grid grid-cols-5">
+
+    <x-checkbox v-model="checked" label="Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, unde." color="primary" />
+    <x-checkbox color="secondary" label="Secondary" />
+    <x-checkbox color="success" label="Success" />
+    <x-checkbox color="warning" label="Warning" />
+    <x-checkbox color="error" label="Error" />
+  </div>
+</template>

package/docs/pages/component/checkbox/variants.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="space-x-4">
+    <x-checkbox glow color="emerald" label="Glow" />
+    <x-checkbox glow color="rose" label="Do you agree?" />
+    <x-checkbox glow color="amber" label="Maybe not?" />
+    <x-checkbox glow color="sky" label="All the T&C? Really?" />
+  </div>
+</template>

package/docs/pages/component/container/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XContainer } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Container'
+const description = 'Containers are used to wrap content in an organized manner.'
+const components = [XContainer]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'carousel'
+const next = 'divider'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/container"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/container/usage.vue

@@ -0,0 +1,3 @@
+<template>
+  <x-container>Contained content</x-container>
+</template>

package/docs/pages/component/divider/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XDivider } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import LabelDemoCode from './label.vue?raw'
+import LabelDemo from './label.vue'
+import VerticalDemoCode from './vertical.vue?raw'
+import VerticalDemo from './vertical.vue'
+
+const title = 'Divider'
+const description = 'Dividers are used to separate content.'
+const components = [XDivider]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Label',
+  description: '',
+  code: LabelDemoCode,
+  component: LabelDemo,
+}, {
+  name: 'Vertical',
+  description: '',
+  code: VerticalDemoCode,
+  component: VerticalDemo,
+}]
+const back = 'container'
+const next = 'drawer'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/divider"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/divider/label.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="text-center">
+    <p class="text-2xl">Top</p>
+    <x-divider class="my-2" label="OR" />
+    <p class="text-2xl">Bottom</p>
+  </div>
+  <div class="text-center flex items-center mt-10">
+    <p class="text-2xl w-full">Left</p>
+    <x-divider class="mx-2 h-28" vertical label="OR" />
+    <p class="text-2xl w-full">Right</p>
+  </div>
+</template>