@indielayer/ui 1.3.0 → 1.5.0

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XScroll } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import HorizontalDemoCode from './horizontal.vue?raw'
+import HorizontalDemo from './horizontal.vue'
+
+const title = 'Scroll'
+const description = 'Scroll is used to scroll through a list of items with added features like inner shadows to indicate there is more to scroll.'
+const components = [XScroll]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Horizontal',
+  description: '',
+  code: HorizontalDemoCode,
+  component: HorizontalDemo,
+}]
+const back = 'tooltip'
+const next = 'spacer'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/scroll"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <x-scroll class="h-20">
+    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.
+  </x-scroll>
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XSelect } 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'
+
+const title = 'Select'
+const description = 'Selects allow the user to select one or more options from a set.'
+const components = [XSelect]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}]
+const back = 'radio'
+const next = 'slider'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/select"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,22 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-select v-model="selected" label="Disabled" disabled :options="options"/>
+    <x-select v-model="selected" label="Read Only" readonly :options="options"/>
+    <x-select v-model="selected" label="Loading" loading :options="options"/>
+    <x-select v-model="selected" label="Error" error="Invalid input" :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: 'A',
+      options: [
+        { value: 'A', label: 'Option A' },
+        { value: 'B', label: 'Option B' },
+      ],
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <x-select
+      v-model="selected"
+      label="Simple native select"
+      placeholder="Placeholder"
+      :options="options"
+      helper="Helper text"
+      tooltip="Tooltip here"
+      native
+    />
+    <x-select
+      v-model="selected"
+      label="Dropdown select"
+      placeholder="Placeholder"
+      :options="options"
+    />
+    <x-select
+      v-model="selectedMultiple"
+      label="Multi select"
+      placeholder="Let's go baby"
+      :options="options"
+      multiple
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: null,
+      selectedMultiple: ['A', 'B'],
+      options: [
+        { value: 'A', label: 'Option Ao qoiw oqi jdoqiwd oqid joqiw jdoijoi' },
+        { value: 'B', label: 'Option B' },
+      ],
+    }
+  },
+  created() {
+    for (let i = 0; i < 20; i++) {
+      this.options.push({ value: i, label: 'Option ' + i })
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex items-center space-x-4">
+    <x-select v-model="selected" :options="options" placeholder="xs" size="xs" />
+    <x-select v-model="selected" :options="options" placeholder="sm" size="sm" />
+    <x-select v-model="selected" :options="options" placeholder="md"/>
+    <x-select v-model="selected" :options="options" placeholder="lg" size="lg" />
+    <x-select v-model="selected" :options="options" placeholder="xl" size="xl" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: '',
+      options: [
+        { value: 'A', label: 'Option A' },
+        { value: 'B', label: 'Option B' },
+      ],
+    } 
+  },
+}
+</script>

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

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

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

@@ -0,0 +1,10 @@
+<template>
+  <div class="flex">
+    <x-skeleton class="w-14 h-14 rounded-full flex-shrink-0 mr-2"/>
+    <div class="w-full">
+      <x-skeleton/>
+      <x-skeleton class="mt-2"/>
+    </div>
+  </div>
+  <x-skeleton class="w-full h-20 mt-2"/>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XSlider } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Slider'
+const description = 'Sliders are used to select a value from a range.'
+const components = [XSlider]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'select'
+const next = 'textarea'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/slider"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(0)
+</script>
+
+<template>
+  <div class="grid gap-2 grid-cols-3">
+    <x-slider v-model="value" label="Slider 1" class="w-full">
+      <template #prefix="ctx">
+        <div class="w-12 text-sm">{{ ctx.value }}%</div>
+      </template>
+    </x-slider>
+    <x-slider v-model="value" label="Slider 2 (gradient)" gradient/>
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XSpacer } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Spacer'
+const description = 'Spacer is used to add space between elements inside a display flex wrapper.'
+const components = [XSpacer]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'scroll'
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/spacer"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex items-center border p-4 rounded-md space-x-4">
+    <div>Hi!</div>
+    <x-spacer/>
+    <div>Am I spaced enough?</div>
+    <x-button>Yes!</x-button>
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XSpinner } 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 = 'Spinner'
+const description = 'Spinners are used to indicate that an operation is in progress.'
+const components = [XSpinner]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}]
+const back = 'slider'
+const next = 'table'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/spinner"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <x-spinner/>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex items-center space-x-4">
+    <x-spinner size="xs" />
+    <x-spinner size="sm" />
+    <x-spinner />
+    <x-spinner size="lg" />
+    <x-spinner size="xl" />
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XStepper } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Stepper'
+const description = 'Stepper is a navigation component that guides users through the steps of a task.'
+const components = [XStepper]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'spinner'
+const next = 'table'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/stepper"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const step = ref(1)
+const steps = [
+  { label: 'Initial step', description: 'This is the description', status: 'complete' },
+  { label: 'One more step i know', status: 'incomplete' },
+  { label: 'Almost there', status: 'error' },
+  { label: 'Lets go' },
+  { label: 'Finish line', disabled: true },
+]
+</script>
+
+<template>
+  <x-stepper v-model="step" :steps="steps">
+    <div v-if="step === 0">Initial step!</div>
+    <div v-if="step === 1">One more step!</div>
+    <div v-if="step === 2">Almost there!</div>
+    <div v-if="step === 3">Finish line!</div>
+  </x-stepper>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
+
+const title = 'Table'
+const description = 'Tables are used to display data in a tabular format.'
+const components = [XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}]
+const back = 'spinner'
+const next = 'tabs'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/table"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type TableHeader } from '@indielayer/ui'
+import { ref } from 'vue'
+
+const headers: TableHeader[] = [
+  { text: '#', value: 'id', sortable: true, align: 'center' },
+  { text: 'Title', value: 'title' },
+  { text: 'Description', value: 'description' },
+  { text: 'Published', value: 'published', sortable: true },
+  { text: 'Status', value: 'status' },
+]
+
+const items = ref([])
+</script>
+
+<template>
+  <x-table :headers="headers" :items="items">
+    <template #empty>
+      <div class="p-4">
+        <div class="p-8 border-dashed border rounded-lg text-center">
+          Empty state slot
+        </div>
+      </div>
+    </template>
+  </x-table>
+
+  <x-table :headers="headers" :items="items" loading/>
+</template>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { useNotifications, type TableHeader } from '@indielayer/ui'
+import { computed, ref } from 'vue'
+
+const notifications = useNotifications('notifica')
+
+const headers: TableHeader[] = [
+  { text: '#', value: 'id', sortable: true, align: 'center' },
+  { text: 'Title', value: 'title' },
+  { text: 'Description', value: 'description', truncate: true, width: 400 },
+  { text: 'Published', value: 'published', sortable: true },
+  { text: 'Status', value: 'status' },
+]
+
+type Book = {
+  id: number;
+  title: string;
+  description: string;
+  published: number;
+  status: string;
+}
+
+const items = ref<Book[]>([{
+  id: 1,
+  title: 'Book of Magic',
+  description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.',
+  published: Date.now() - 1000,
+  status: 'Tag label',
+}, {
+  id: 2,
+  title: 'Another book',
+  description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.',
+  published: Date.now() - 5000,
+  status: 'Tag label',
+}, {
+  id: 3,
+  title: 'Clever cove',
+  description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.',
+  published: Date.now() - 3000,
+  status: 'Tag label',
+}])
+
+const sort = ref([])
+
+function formatDate(val: any) {
+  return (new Date(val)).toISOString()
+}
+
+const itemsSorted = computed<Book[]>(() => {
+  const ite = items.value.slice(0)
+
+  return ite.sort((a: any, b: any) => {
+    for (const s of sort.value) {
+      const [key, asc] = (s as string).split(',')
+
+      if (a[key] > b[key]) return asc === '-1' ? -1 : 1
+      if (a[key] < b[key]) return asc === '-1' ? 1 : -1
+    }
+
+    return 0
+  })
+})
+</script>
+
+<template>
+  <x-table
+    v-model:sort="sort"
+    expandable
+    :headers="headers"
+    :items="itemsSorted"
+  >
+    <template #expanded-row="{ item }">
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+    </template>
+
+    <template #item-published="{ item }">
+      {{ formatDate(item.published) }}
+    </template>
+    <template #item-status="{ item }">
+      <x-tag size="sm" color="primary" rounded>{{ item.status }}</x-tag>
+    </template>
+  </x-table>
+  <x-table
+    v-model:sort="sort"
+    class="my-10"
+    dense
+    striped
+    :headers="headers"
+    :items="itemsSorted"
+    @click-row="notifications?.log('open')"
+  >
+    <template #item-published="{ item }">
+      {{ formatDate(item.published) }}
+    </template>
+    <template #item-status="{ item }">
+      <x-tag size="sm" color="pink" rounded>{{ item.status }}</x-tag>
+    </template>
+  </x-table>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XTabGroup, XTab } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Tabs'
+const description = 'Tabs are used to navigate through a set of views.'
+const components = [XTabGroup, XTab]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'table'
+const next = 'tag'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/tabs"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>