@indielayer/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,69 @@
+<script setup>
+const menu1 = [{
+  label: 'Open',
+  active: false,
+  value: 'a',
+  disabled: true,
+}, {
+  label: 'Close',
+  active: false,
+  value: 'b',
+}, {
+  divider: true,
+}, {
+  label: 'Sign out',
+  active: false,
+  value: 'c',
+}]
+const menu2 = [{
+  label: 'Menu item 1',
+  value: '',
+  target: '_blank',
+  href: 'https://indielayer.com',
+}, {
+  to: 'menu',
+  label: 'Menu item 2',
+  value: '',
+  icon: 'smile',
+  exact: true,
+}, {
+  label: 'Menu item 3',
+  value: '',
+  exact: true,
+  items: [{
+    label: 'derp',
+  }],
+}, {
+  divider: true,
+}, {
+  label: 'Sub-menu (non-collapsible)',
+  loading: false,
+  collapsible: false,
+  items: [{
+    label: 'Option',
+    value: '',
+    icon: 'smile',
+  }, {
+    label: 'Links (sub-menu collapsible)',
+    value: '',
+    items: [{
+      to: 'menu',
+      label: 'Link to \'menu\'',
+      value: '',
+    }],
+  }],
+}, {
+  label: 'Last menu item',
+  value: '',
+  icon: 'heart',
+  exact: '',
+  onClick: () => {},
+  disabled: false,
+}]
+</script>
+
+<template>
+  <x-menu :items="menu1" />
+  <x-divider class="my-8"/>
+  <x-menu :items="menu2" />
+</template>

package/docs/pages/component/modal/composed.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useNotifications } from '@indielayer/ui'
+
+const show = ref(false)
+
+const notifications = useNotifications('notifica')
+
+const email = ref('')
+const password = ref('')
+const description = ref('')
+
+const rules = {
+  isEmail: (v: string) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+  isRequired: (v: string) => !!v  || 'Field is required',
+}
+
+function onSubmit(isValid: boolean) {
+  if (isValid) notifications?.success('Valid! Sumitted.')
+  else notifications?.error('Invalid! Form has errors')
+}
+</script>
+
+<template>
+  <x-modal
+    v-model="show"
+    show-close
+    backdrop
+    is-form
+    title="Modal title"
+    label="Modal label"
+    description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, fugit."
+    @submit="onSubmit"
+  >
+    <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"
+    />
+    <x-textarea
+      v-model="description"
+      name="description"
+      label="Description"
+      placeholder="Description"
+    />
+
+    <!-- <template #tertiary-action>
+      <x-button color="gray" size="lg">Tertiary</x-button>
+    </template> -->
+    <template #secondary-action>
+      <x-button color="gray" size="lg" tabindex="-1" @click="show = false">Cancel</x-button>
+    </template>
+    <template #primary-action>
+      <x-button color="primary" size="lg" type="submit">Confirm</x-button>
+    </template>
+  </x-modal>
+
+  <x-button class="mr-2" @click="show = true">Open modal</x-button>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XModal } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import ComposedDemoCode from './composed.vue?raw'
+import ComposedDemo from './composed.vue'
+
+const title = 'Modal'
+const description = 'Modals are used to display content on top of the current page.'
+const components = [XModal]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Composed',
+  description: '',
+  code: ComposedDemoCode,
+  component: ComposedDemo,
+}]
+const back = 'menu'
+const next = 'notifications'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/modal"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const show = ref(false)
+const show1 = ref(false)
+const show2 = ref(false)
+const show3 = ref(false)
+</script>
+
+<template>
+  <x-modal v-model="show" show-close backdrop>
+    <template #image>
+      <x-image src="https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" alt=""/>
+    </template>
+    <template #header>
+      Modal Header
+    </template>
+
+    <div>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
+    </div>
+
+    <template #actions>
+      <div class="text-right space-x-4">
+        <x-button>Cancel</x-button>
+        <x-button color="success">Confirm</x-button>
+      </div>
+    </template>
+  </x-modal>
+
+  <x-modal v-model="show1" backdrop>
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
+  </x-modal>
+
+  <x-modal v-model="show2" backdrop>
+    <template #header>
+      Modal Header
+    </template>
+
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
+
+    <template #actions>
+      <div class="text-right space-x-4">
+        <x-button>Cancel</x-button>
+        <x-button color="success">Confirm</x-button>
+      </div>
+    </template>
+  </x-modal>
+
+  <x-modal v-model="show3" show-close>
+    <template #header>
+      Modal Title
+    </template>
+
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
+  </x-modal>
+
+  <x-button class="mr-2" @click="show = true">complete</x-button>
+  <x-button class="mr-2" @click="show1 = true">content only</x-button>
+  <x-button class="mr-2" @click="show2 = true">title & content</x-button>
+  <x-button class="mr-2" @click="show3 = true">header & content</x-button>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XNotifications } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Notifications'
+const description = 'Notifications are used to display a message to the user.'
+const components = [XNotifications]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'modal'
+const next = 'pagination'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/notifications"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,56 @@
+<script setup>
+import { useNotifications } from '@indielayer/ui'
+
+const notification = useNotifications('notifica')
+
+const log = () => {notification.log('Default notification.')}
+const info = () => {notification.info('Starwars is a movie.')}
+const error = () => {notification.error('Disk is full!')}
+const warn = () => {notification.warn('Disk is almost full.')}
+const success = () => {notification.success('File saved!')}
+const custom = () => {
+  notification.info({
+    timeout: 0,
+    title: 'Notification title',
+    message: 'Subtitle text goes here.',
+    iconColor: 'primary',
+    align: 'right',
+    position: 'bottom',
+    action: {
+      label: 'Hello',
+      onClick: () => {
+        console.log('Hello!')
+      },
+    },
+  })
+}
+const custom2 = () => {
+  notification.info({
+    timeout: 0,
+    title: 'Notification title',
+    message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem accusamus quisquam deleniti error possimus ipsa, fugit maiores. Fuga, non ab id odit praesentium earum optio tempore veniam, eligendi deleniti culpa neque aliquam blanditiis distinctio perferendis delectus ut aut. Sapiente repellendus culpa magnam ullam placeat et sunt laborum minus inventore. Cupiditate, totam soluta. Numquam placeat illum provident culpa corporis quis exercitationem, praesentium dicta quisquam quaerat voluptatem soluta dignissimos, enim dolores, saepe ullam. Dolorem, quo porro officiis aspernatur odit neque at minima totam eius! Cum aliquid repudiandae molestias, dolore accusantium qui ratione iusto, consequatur mollitia quaerat at ipsa voluptatibus quia minima? Nobis?',
+    iconColor: 'primary',
+    align: 'right',
+    position: 'top',
+    action: {
+      label: 'Hello',
+      color: 'pink',
+      onClick: () => {
+        console.log('Hello!')
+      },
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="space-x-4">
+    <x-button @click="log">Log</x-button>
+    <x-button @click="info">Info</x-button>
+    <x-button @click="error">Error</x-button>
+    <x-button @click="warn">Warn</x-button>
+    <x-button @click="success">Success</x-button>
+    <x-button @click="custom">Custom</x-button>
+    <x-button @click="custom2">Custom2</x-button>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XPagination } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Pagination'
+const description = 'Pagination is used to navigate through a list of items.'
+const components = [XPagination]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'notifications'
+const next = 'popover'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/pagination"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,17 @@
+<script setup>
+import { ref } from 'vue'
+const totalPages = 10
+const page = ref(1)
+</script>
+
+<template>
+  <div class="space-y-10">
+    <x-pagination v-model="page" :total-pages="totalPages" variant="quick" />
+    <x-pagination v-model="page" :total-pages="totalPages" />
+    <x-pagination v-model="page" :total-pages="totalPages" variant="dots" />
+    <div>
+      <p class="font-bold mb-2">Pagination with links (?page) query string</p>
+      <x-pagination v-model="page" :total-pages="totalPages" links />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XPopover, XPopoverContainer } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Popover'
+const description = 'Popover is used to display content in a small overlay.'
+const components = [XPopover, XPopoverContainer]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'pagination'
+const next = 'progress'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/popover"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="space-x-2">
+    <x-popover placement="top-start">
+      <x-button>Click me to open popover</x-button>
+      <template #content>
+        <x-popover-container class="p-2">
+          example
+        </x-popover-container>
+      </template>
+    </x-popover>
+
+    <x-popover align="top" position="left">
+      <x-avatar class="cursor-pointer shadow" name="John Smith" />
+      <template #content>
+        <x-popover-container class="p-2">
+          another one
+        </x-popover-container>
+      </template>
+    </x-popover>
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XProgress } 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 = 'Progress'
+const description = 'Progress is used to show the progress of an operation.'
+const components = [XProgress]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}]
+const back = 'popover'
+const next = 'skeleton'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/progress"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <x-progress :percentage="10" color="amber"/>
+    <x-progress :percentage="50" color="primary"/>
+    <x-progress :percentage="100" color="success"/>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <x-progress :percentage="percentage" gradient color="sky" />
+    <x-progress :percentage="percentage" color="rose" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+const percentage = ref(0)
+
+onMounted(() => {
+  const interval = setInterval(() => {
+    percentage.value += 5
+    if (percentage.value >= 100) clearTimeout(interval)
+  }, 100)
+})
+</script>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { XRadio } 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 = 'Radio'
+const description = 'Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.'
+const components = [XRadio]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}, {
+  name: 'Size',
+  description: '',
+  code: SizeDemoCode,
+  component: SizeDemo,
+}]
+const back = 'input'
+const next = 'select'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/radio"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref('a')
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-radio v-model="selected" size="xs" value="a" label="Option A" />
+    <x-radio v-model="selected" size="sm" value="b" label="Option B" />
+    <x-radio v-model="selected" size="md" value="c" label="Option C" />
+    <x-radio v-model="selected" size="lg" value="d" label="Option D" />
+    <x-radio v-model="selected" size="xl" value="e" label="Option E" />
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-radio v-model="selected" disabled value="a" label="Disabled" />
+    <x-radio v-model="selected" loading value="b" label="Loading" />
+    <x-radio v-model="selected" error="Invalid input" value="a" label="Error" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { selected: 'a' } },
+}
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-radio v-model="selected" name="inputName" value="a" label="Option A" />
+    <x-radio v-model="selected" name="inputName" value="b" label="Option B" />
+    <x-radio v-model="selected" name="inputName" value="c" label="Option C" />
+    <x-radio v-model="selected" name="inputName" value="d" label="Option D" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { selected: 'a' } },
+}
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-radio
+      v-model="selected"
+      value="a"
+      color="rose"
+      label="Option A"
+    >
+      option extra content
+    </x-radio>
+    <x-radio
+      v-model="selected"
+      value="b"
+      color="amber"
+      glow
+      label="Option B"
+    >Glow</x-radio>
+    <x-radio
+      v-model="selected"
+      value="c"
+      color="sky"
+      glow
+      label="Option C"
+    >Glow</x-radio>
+    <x-radio
+      v-model="selected"
+      value="d"
+      color="indigo"
+      glow
+      label="Option D"
+    >Glow</x-radio>
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { selected: 'a' } },
+}
+</script>

package/docs/pages/component/scroll/horizontal.vue

@@ -0,0 +1,14 @@
+<template>
+  <x-scroll horizontal>
+    <div class="w-screen">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, quod fuga deleniti eaque sit nemo, labore, quisquam est esse quidem corrupti quia illo totam. Dicta laborum hic cupiditate distinctio quas totam sed sunt sint mollitia nostrum, provident quasi quam, suscipit atque rem ut saepe quae! In ipsum, minus non deleniti quasi temporibus qui autem voluptates! Architecto iusto unde placeat mollitia doloremque amet vel necessitatibus sapiente ipsa tenetur temporibus quidem perferendis sunt, quibusdam porro minima error impedit! Voluptatum ratione porro praesentium est veniam commodi, veritatis nemo voluptates atque iste, neque illum nesciunt aspernatur reprehenderit. Deleniti, aspernatur iusto accusamus nulla quos magni.
+    </div>
+  </x-scroll>
+
+  <div class="text-lg mt-10">Horizontal scroll with Mousewheel</div>
+  <x-scroll horizontal mousewheel>
+    <div class="w-screen">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, quod fuga deleniti eaque sit nemo, labore, quisquam est esse quidem corrupti quia illo totam. Dicta laborum hic cupiditate distinctio quas totam sed sunt sint mollitia nostrum, provident quasi quam, suscipit atque rem ut saepe quae! In ipsum, minus non deleniti quasi temporibus qui autem voluptates! Architecto iusto unde placeat mollitia doloremque amet vel necessitatibus sapiente ipsa tenetur temporibus quidem perferendis sunt, quibusdam porro minima error impedit! Voluptatum ratione porro praesentium est veniam commodi, veritatis nemo voluptates atque iste, neque illum nesciunt aspernatur reprehenderit. Deleniti, aspernatur iusto accusamus nulla quos magni.
+    </div>
+  </x-scroll>
+</template>