@indielayer/ui 1.2.0 → 1.4.0

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

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, nulla.</p>
+    <x-divider class="my-2" />
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, impedit?</p>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex items-center justify-center h-28">
+    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, nulla.</p>
+    <x-divider class="mx-4" vertical />
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, impedit?</p>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XDrawer } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Drawer'
+const description = 'Drawers are used to display content in a side panel.'
+const components = [XDrawer]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'divider'
+const next = 'icon'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/drawer"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue'
+
+const el = ref(null)
+const top = ref(false)
+const left = ref(false)
+const right = ref(false)
+const bottom = ref(false)
+const contained = ref(false)
+const breakpoint = ref(false)
+</script>
+
+<template>
+  <div>
+    <div class="space-x-4">
+      <x-button @click="left = !left">Toggle left</x-button>
+      <x-button @click="right = !right">Toggle right</x-button>
+      <x-button @click="bottom = !bottom">Toggle bottom</x-button>
+      <x-button @click="top = !top">Toggle top</x-button>
+    </div>
+    <x-drawer v-model="left">
+      <template #header>
+        <div class="border-b p-4 text-lg font-semibold">Header</div>
+      </template>
+      menu
+      <template #footer>
+        <div class="border-t p-4">
+          <x-button color="pink" block light>Sign out</x-button>
+        </div>
+      </template>
+    </x-drawer>
+    <x-drawer v-model="right" position="right" width="100">
+      content
+    </x-drawer>
+    <x-drawer v-model="bottom" position="bottom">
+      content
+    </x-drawer>
+    <x-drawer v-model="top" position="top">
+      content
+    </x-drawer>
+  </div>
+
+  <x-button class="mt-10" @click="breakpoint = !breakpoint">Toggle drawer with breakpoint</x-button>
+  <x-drawer v-model="breakpoint" position="left" breakpoint="md">
+    <div class="border p-4 my-2">
+      I'm only a drawer on mobile
+    </div>
+  </x-drawer>
+
+  <x-button class="mt-10" @click="contained = !contained">Toggle contained</x-button>
+  <div id="container" ref="el" class="relative h-96 overflow-hidden bg-slate-50 dark:bg-slate-800 border rounded-md my-2">
+    <x-drawer v-model="contained" position="left" teleport-to="#container">
+      drawer inside #container
+    </x-drawer>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XForm } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Form'
+const description = 'Forms are used to collect user input.'
+const components = [XForm]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'checkbox'
+const next = 'formGroup'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/form"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { useNotifications, type SelectOption } from '@indielayer/ui'
+import { ref } from 'vue'
+
+const notifications = useNotifications('notifica')
+
+const email = ref('')
+const password = ref('')
+const description = ref('')
+const checked = ref()
+const selected = ref()
+const country = ref('')
+const countries: SelectOption[] = [
+  { label: 'United States', value: 'us' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Mexico', value: 'mx' },
+]
+const agree = ref(false)
+const rules = {
+  isEmail: (v: string) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+  isRequired: (v: string) => {
+    if (Array.isArray(v)) return !!v.length || 'Field is required'
+
+    return !!v  || 'Field is required'
+  },
+}
+
+function onSubmit(isValid: string) {
+  if (isValid) notifications?.success('Valid! Sumitted.')
+  else notifications?.error('Invalid! Form has errors')
+}
+</script>
+
+<template>
+  <x-form title="Edit user information" description="Almost all fields are required" @submit="onSubmit">
+    <div class="grid grid-cols-2 gap-4">
+      <x-input
+        v-model="email"
+        :rules="[rules.isRequired, rules.isEmail]"
+        name="email"
+        label="Email"
+        placeholder="Enter your email"
+      />
+      <x-input
+        v-model="password"
+        type="password"
+        :rules="[rules.isRequired]"
+        name="password"
+        label="Password"
+        placeholder="Enter your password"
+        helper="Must be between 8 and 10 characters"
+      />
+    </div>
+
+    <x-textarea
+      v-model="description"
+      name="description"
+      label="Description"
+      placeholder="Description"
+    />
+
+    <x-form-group v-model="selected" label="Group of checkboxes" helper="Helper text" :rules="[rules.isRequired]">
+      <x-checkbox value="a" label="Lorem ipsum dolor" />
+      <x-checkbox value="b" label="Second option" />
+    </x-form-group>
+
+    <x-form-group v-model="checked" label="Group of radio buttons" helper="Helper text" :rules="[rules.isRequired]">
+      <x-radio name="inputName" value="a" label="Option A" />
+      <x-radio name="inputName" value="b" label="Option B" />
+    </x-form-group>
+
+    <x-select
+      v-model="country"
+      :rules="[rules.isRequired]"
+      :options="countries"
+      name="country"
+      placeholder="Select another country"
+      label="Country"
+    />
+
+    <x-checkbox
+      v-model="agree"
+      :rules="[rules.isRequired]"
+      name="agree"
+      label="Agree with all the terms"
+      helper="Have you read them?"
+    />
+
+    <template #secondary-action>
+      <x-button color="gray">Cancel</x-button>
+    </template>
+    <template #primary-action>
+      <x-button color="primary" type="submit">Submit</x-button>
+    </template>
+  </x-form>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XFormGroup } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'FormGroup'
+const description = 'A form group is a wrapper for form elements.'
+const components = [XFormGroup]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'form'
+const next = 'input'
+</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/formGroup/usage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useNotifications } from '@indielayer/ui'
+import { ref } from 'vue'
+
+const notifications = useNotifications('notifica')
+
+const selected = ref(['a'])
+const checked = ref()
+
+const rules = {
+  isRequired: (v: string) => {
+    if (Array.isArray(v)) return !!v.length || 'Field is required'
+
+    return !!v  || 'Field is required'
+  },
+}
+
+function onSubmit(isValid: string) {
+  if (isValid) notifications?.success('Valid! Sumitted.')
+  else notifications?.error('Invalid! Form has errors')
+}
+</script>
+
+<template>
+  <x-form title="Form with form groups" @submit="onSubmit">
+    <x-form-group
+      v-model="selected"
+      label="Group of checkboxes"
+      helper="Helper text"
+      :rules="[rules.isRequired]"
+      vertical
+    >
+      <x-checkbox name="selectgroup" value="a" label="Lorem ipsum dolor" />
+      <x-checkbox name="selectgroup" value="b" label="Second option" />
+    </x-form-group>
+
+    <x-form-group v-model="checked" label="Group of radio buttons" helper="Helper text" :rules="[rules.isRequired]">
+      <x-radio name="radiogroup" value="a" label="Option A" />
+      <x-radio name="radiogroup" value="b" label="Option B" />
+    </x-form-group>
+
+    <template #primary-action>
+      <x-button color="primary" type="submit">Submit</x-button>
+    </template>
+  </x-form>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XIcon } 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'
+
+const title = 'Icon'
+const description = 'Icons are used to represent an action or an object.'
+const components = [XIcon]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}]
+const back = 'drawer'
+const next = 'image'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/icon"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <x-icon icon="fullsvg"/>
+  <x-icon icon="smile"/>
+  <x-icon icon="github"/>
+  <x-icon icon="<polyline points=&quot;20 6 9 17 4 12&quot;></polyline>"/>
+</template>

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

@@ -0,0 +1,14 @@
+<template>
+  <x-icon icon="smile" class="text-primary-500" />
+  <x-icon icon="smile" class="text-amber-500" />
+
+  <x-divider class="my-4"/>
+
+  <div class="space-x-4">
+    <x-icon icon="smile" size="xs"/>
+    <x-icon icon="smile" size="sm"/>
+    <x-icon icon="smile"/>
+    <x-icon icon="smile" size="lg"/>
+    <x-icon icon="smile" size="xl"/>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XImage } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Image'
+const description = 'Image is used to load an image file with a skeleton as placeholder and on load display the image.'
+const components = [XImage]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'icon'
+const next = 'link'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/image"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <x-image
+    src="https://images.unsplash.com/photo-1543352634-99a5d50ae78e?auto=format&fit=crop&q=80&w=2671&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    width="256"
+    height="256"
+    alt=""
+  />
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { XInput } 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 StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
+import SizeDemoCode from './size.vue?raw'
+import SizeDemo from './size.vue'
+
+const title = 'Input'
+const description = 'This is a text input component that allows users to enter and edit text.'
+const components = [XInput]
+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 = 'form'
+const next = 'radio'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/input"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,13 @@
+<script setup>
+import { ref } from 'vue'
+const other = ref('Sample text')
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-2">
+    <x-input v-model="other" size="sm"/>
+    <x-input v-model="other" size="md"/>
+    <x-input v-model="other" size="lg"/>
+    <x-input v-model="other" size="xl"/>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup>
+import { ref } from 'vue'
+const name = ref('not a valid input')
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-input value="disabled" disabled label="Disabled"/>
+    <x-input value="readonly" readonly label="Read only"/>
+    <x-input v-model="name" label="Error" error="Invalid input" />
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+const name = ref('')
+</script>
+
+<template>
+  <div class="flex">
+    <x-input
+      v-model="name"
+      label="Label here"
+      placeholder="Placeholder"
+      helper="Helper text here"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup>
+import { ref } from 'vue'
+const password = ref('secret')
+const other = ref('I have an icon')
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <x-input
+      v-model="password"
+      label="Password input"
+      type="password"
+      show-password-toggle
+    />
+    <x-input v-model="other" label="Input with icon" icon-left="smile"/>
+    <x-input v-model="other" label="Icon on the right" icon-right="smile" />
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XLink } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Link'
+const description = 'Links are used to navigate to a different page.'
+const components = [XLink]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'image'
+const next = 'loader'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/link"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    If you don't have an account yet, you can <x-link color="primary">contact our customer success team</x-link> to get started with Indielayer UI, get a <x-link shadow color="pink" external>product demo</x-link>, or request a specific sales inquiry.
+  </div>
+  <div class="mt-4 space-x-2">
+    <x-link to="/component/link">Simple link</x-link>
+    <x-link to="link" underline>Underline</x-link>
+    <x-link to="link" color="orange">Colorfull</x-link>
+    <x-link to="link" shadow color="primary">Shadow</x-link>
+    <x-link href="https://github.com/indielayer/ui" target="_blank" external>External link</x-link>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XLoader } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Loader'
+const description = 'Loader component is used to show a loading state.'
+const components = [XLoader]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'link'
+const next = 'menu'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/loader"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+  <div class="grid gap-4">
+    <x-loader label="Loading" status="active"/>
+    <x-loader label="Failed to load" status="error"/>
+    <x-loader label="Loaded" status="success"/>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XMenu, XMenuItem } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Menu'
+const description = 'Menus are used to display a list of options.'
+const components = [XMenu, XMenuItem]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'link'
+const next = 'modal'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/menu"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>