@indielayer/ui 1.17.0 → 1.18.0

package/docs/components/common/ExampleBlocks.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+
+const selected = ref('A')
+const options = [{
+  value: 'A',
+  label: 'Option A',
+}, {
+  value: 'B',
+  label: 'Option B',
+}]
+const toggle = ref(false)
+const tab = ref('A')
+const radio = ref('a')
+const password = ref('')
+const slider = ref(80)
+const isPlaying = ref(false)
+let interval: ReturnType<typeof setInterval> | null = null
+
+function togglePlayer() {
+  if (isPlaying.value) {
+    if (interval) clearInterval(interval)
+    interval = null
+  } else {
+    interval = setInterval(() => {
+      slider.value += 1
+    }, 1000)
+  }
+
+  isPlaying.value = !isPlaying.value
+}
+
+onBeforeUnmount(() => {
+  if (interval) clearInterval(interval)
+})
+</script>
+
+<template>
+  <div class="grid gap-6 grid-cols-1 xl:grid-cols-2 max-w-4xl">
+    <div>
+      <div class="flex items-center">
+        <x-button-group>
+          <x-button icon="menu-alt-1"/>
+          <x-button icon="menu"/>
+          <x-button icon="menu-alt-3"/>
+        </x-button-group>
+
+        <x-spacer/>
+
+        <x-select
+          v-model="selected"
+          :options="options"
+          placeholder="Placeholder"
+          class="w-64 ml-2"
+          hide-footer
+        />
+      </div>
+      <x-card class="p-4 flex items-center mt-4">
+        <x-badge outlined position="bottom">
+          <x-avatar image="https://avatars.githubusercontent.com/u/3942799?v=4" rounded/>
+        </x-badge>
+        <div class="ml-4">
+          <div class="font-bold">John Smith</div>
+          <div class="text-gray-400 text-sm">jsmith@indielayer.com</div>
+        </div>
+      </x-card>
+      <div class="flex space-x-2 mt-4">
+        <x-toggle v-model="toggle"/>
+        <x-spacer/>
+        <x-tag rounded size="sm" :color="toggle ? 'primary' : undefined">{{ toggle ? 'Active' : 'Inactive' }}</x-tag>
+      </div>
+      <div class="mt-4">
+        <div class="grid grid-cols-3 gap-2">
+          <x-button color="primary">Filled</x-button>
+          <x-button color="primary" outlined>Outlined</x-button>
+          <x-button color="primary" light>Light</x-button>
+        </div>
+      </div>
+      <x-card flat class="border mt-4">
+        <div class="p-2 flex items-center">
+          <x-avatar image="https://avatars.githubusercontent.com/u/3942799?v=4" size="lg"/>
+          <div class="ml-4">
+            <div class="font-bold">Holding back</div>
+            <div class="text-gray-400 text-sm">BANKS</div>
+          </div>
+        </div>
+        <x-divider/>
+        <div class="p-6">
+          <div class="flex items-center justify-center mb-6">
+            <x-button icon="rewind" ghost rounded/>
+            <x-button
+              :icon="isPlaying ? 'pause' : 'play'"
+              rounded
+              size="lg"
+              class="mx-2"
+              @click="togglePlayer"
+            />
+            <x-button icon="forward" ghost rounded/>
+          </div>
+          <x-slider v-model="slider" class="w-full">
+            <template #prefix>
+              <div class="w-12 text-sm text-left">3:26</div>
+            </template>
+            <template #suffix>
+              <div class="w-12 text-sm text-right">4:12</div>
+            </template>
+          </x-slider>
+        </div>
+      </x-card>
+    </div>
+    <div>
+      <x-tab-group v-model="tab" grow variant="block">
+        <x-tab label="Profile" value="A"/>
+        <x-tab label="Settings" value="B"/>
+        <x-tab label="Content" value="C"/>
+      </x-tab-group>
+      <div class="mt-3 mb-1">
+        <x-radio
+          v-model="radio"
+          value="a"
+          label="Credit card"
+          class="border p-3 rounded w-full"
+          :class="{ 'bg-emerald-50 dark:bg-gray-800 border-emerald-400 dark:border-emerald-800': radio === 'a'}"
+        >
+          <div class="text-gray-400 font-light text-sm">VISA · · · · 2592</div>
+        </x-radio>
+      </div>
+      <div>
+        <x-radio
+          v-model="radio"
+          value="b"
+          label="Bank account"
+          class="border p-3 rounded w-full"
+          :class="{ 'bg-emerald-50 dark:bg-gray-800 border-emerald-400 dark:border-emerald-800': radio === 'b'}"
+        >
+          <div class="text-gray-400 font-light text-sm">Santander · · · · 1580</div>
+        </x-radio>
+      </div>
+      <div class="my-3">
+        <x-alert type="success" color="success" outlined>User details updated!</x-alert>
+      </div>
+      <div>
+        <x-form :auto-focus="false">
+          <x-input label="Email" type="email" block/>
+          <x-input
+            v-model="password"
+            label="Password"
+            type="password"
+            show-password-toggle
+            block
+          />
+          <x-checkbox label="Keep me logged in"/>
+        </x-form>
+      </div>
+    </div>
+  </div>
+</template>

package/docs/components/toolbar/Toolbar.vue

@@ -2,6 +2,7 @@
 import { inject, ref, unref, watch } from 'vue'
 import { version, type UITheme } from '@indielayer/ui'
 import ToolbarSearch from './ToolbarSearch.vue'
+import ToolbarColorToggle from './ToolbarColorToggle.vue'
 
 const selectTheme = inject('selectTheme', {
   theme: {} as UITheme,
@@ -25,7 +26,7 @@ const isDev = import.meta.env.DEV
 </script>
 
 <template>
-  <x-container fluid class="bg-white dark:bg-secondary-800">
+  <x-container fluid class="bg-white dark:bg-slate-800/60">
     <div class="flex justify-items-center items-center py-2 min-h-[54px]">
       <a href="/" class="flex items-center">
         <img src="@/assets/images/logo_mini.svg" width="26" alt="Indielayer"/>
@@ -40,7 +41,15 @@ const isDev = import.meta.env.DEV
 
       <x-spacer/>
 
-      <div class="flex items-center font-semibold text-sm">
+      <div class="flex items-center font-semibold text-sm gap-1">
+        <x-select
+          v-if="isDev"
+          v-model="selected"
+          :options="options"
+          size="xs"
+          class="hidden md:block w-28"
+        />
+        <toolbar-color-toggle class="hidden sm:flex" />
         <toolbar-search />
         <x-divider vertical class="!h-2 px-2"/>
         <div class="tracking-wide text-xs">v{{ version }}</div>

package/docs/components/toolbar/ToolbarColorToggle.vue

@@ -8,10 +8,10 @@ try {
 
   if (storedMode) {
     colorMode.value = storedMode
-  // } else {
-    // if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    //   colorMode.value = 'dark'
-    // }
+  } else {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      colorMode.value = 'dark'
+    }
   }
 } catch (e) {
   colorMode.value = 'light'

package/docs/components/toolbar/ToolbarSearch.vue

@@ -2,10 +2,17 @@
 import { useEventListener, useMouse } from '@vueuse/core'
 import { computed, ref, watch, nextTick, onMounted } from 'vue'
 import Fuse from 'fuse.js'
-import ComponentsSearchIndex from '../../search/components.json'
+import SearchIndex from '../../search/index.json'
 import type { XInput } from 'src'
 
-const fuse = new Fuse(ComponentsSearchIndex, {
+type SearchItem = {
+  name: string;
+  description: string;
+  url: string;
+  category: 'guide' | 'component';
+}
+
+const fuse = new Fuse(SearchIndex as SearchItem[], {
   keys: [{
     name: 'name',
     weight: 2,
@@ -17,65 +24,63 @@ const fuse = new Fuse(ComponentsSearchIndex, {
 })
 
 type FuseResult = {
-  item: {
-    name: string;
-    description: string;
-    url: string;
-  };
+  item: SearchItem;
   refIndex: number;
   score: number;
 }
 
 const isModalOpen = ref(false)
 const searchInput = ref('')
-const ui = ref<FuseResult[]>([])
+const results = ref<FuseResult[]>([])
 const searchList = ref<HTMLDivElement>()
-const results = ref<HTMLLIElement[]>([])
+const resultElements = ref<HTMLLIElement[]>([])
 const selectedIndex = ref<number>(-1)
 
 const inputEl = ref<InstanceType<typeof XInput> | null>(null)
 
-watch(isModalOpen, (newValue, oldValue) => {
+const searchSections = computed(() => {
+  const guides = results.value.filter((r) => r.item.category === 'guide')
+  const components = results.value.filter((r) => r.item.category === 'component')
+
+  return [
+    { key: 'component', label: 'Components', items: components },
+    { key: 'guide', label: 'Guides', items: guides },
+  ].filter((s) => s.items.length > 0)
+})
+
+watch(isModalOpen, (newValue) => {
   setTimeout(() => {
     if (newValue) inputEl.value?.focus()
   }, 100)
 })
 
-const searchSections = computed(() => [
-  { key:'ui', label: 'UI', items: ui.value },
-])
-
 function clearSearch() {
   selectedIndex.value = -1
-  ui.value = []
+  results.value = []
 }
 
 function openSearch() {
   clearSearch()
-
   searchInput.value = ''
   isModalOpen.value = true
 }
 
 function selectItem(item: HTMLLIElement, index?: number) {
-  if (!item) {
-    return
-  }
-
-  results.value?.[selectedIndex.value]?.setAttribute('aria-selected', 'false')
+  if (!item) return
 
+  resultElements.value?.[selectedIndex.value]?.setAttribute('aria-selected', 'false')
   item.setAttribute('aria-selected', 'true')
-  item.scrollIntoView({ 'block':'nearest' })
+  item.scrollIntoView({ block: 'nearest' })
 
-  if (!index) {
-    index = results.value.findIndex(({ id }) => id === item.id)
+  if (index === undefined) {
+    index = resultElements.value.findIndex(({ id }) => id === item.id)
   }
 
   selectedIndex.value = index
 }
 
 function selectItemByIndex(index: number) {
-  selectItem(results.value?.[index], index)
+  selectItem(resultElements.value?.[index], index)
 }
 
 function selectFirstItem() {
@@ -83,39 +88,29 @@ function selectFirstItem() {
 }
 
 function selectLastItem() {
-  selectItemByIndex(results.value.length - 1)
+  selectItemByIndex(resultElements.value.length - 1)
 }
 
 function selectNextItem() {
-  const totalResults = results.value.length
+  const total = resultElements.value.length
 
-  if (totalResults <= 0) {
-    return
-  }
+  if (total <= 0) return
 
   const nextIndex = selectedIndex.value + 1
 
-  if (nextIndex >= totalResults) {
-    selectFirstItem()
-  } else {
-    selectItemByIndex(nextIndex)
-  }
+  if (nextIndex >= total) selectFirstItem()
+  else selectItemByIndex(nextIndex)
 }
 
 function selectPreviousItem() {
-  const totalResults = results.value.length
+  const total = resultElements.value.length
 
-  if (totalResults <= 0) {
-    return
-  }
+  if (total <= 0) return
 
   const previousIndex = selectedIndex.value - 1
 
-  if (previousIndex >= 0) {
-    selectItemByIndex(previousIndex)
-  } else {
-    selectLastItem()
-  }
+  if (previousIndex >= 0) selectItemByIndex(previousIndex)
+  else selectLastItem()
 }
 
 function keydownInput(e: KeyboardEvent) {
@@ -130,7 +125,7 @@ function keydownInput(e: KeyboardEvent) {
   }
 
   if (e.key === 'Enter') {
-    const item = results.value?.[selectedIndex.value]
+    const item = resultElements.value?.[selectedIndex.value]
 
     if (item) {
       (item.firstElementChild as HTMLLinkElement)?.click()
@@ -142,37 +137,38 @@ const { x: mouseX, y: mouseY } = useMouse({ type: 'page' })
 
 function hoverResult(e: MouseEvent) {
   if (mouseX.value !== e.x || mouseY.value !== e.y) {
-    selectItem(e.target as HTMLLIElement)
+    selectItem(e.currentTarget as HTMLLIElement)
   }
 }
 
 function searchIndexes() {
-  ui.value = fuse.search(searchInput.value, {
-    limit: 10,
-  }) as FuseResult[]
+  if (!searchInput.value.trim()) {
+    results.value = []
+
+    return
+  }
+
+  results.value = fuse.search(searchInput.value, { limit: 12 }) as FuseResult[]
 }
 
 watch(searchSections, async () => {
-  results.value = []
-
+  resultElements.value = []
   await nextTick()
 
   const items = searchList.value?.querySelectorAll('[data-name="list-item"]')
 
   items?.forEach((el) => {
     el.setAttribute('aria-selected', 'false')
-    results.value.push(el as HTMLLIElement)
+    resultElements.value.push(el as HTMLLIElement)
   })
 
-  setTimeout(() => selectFirstItem())
+  if (resultElements.value.length) setTimeout(() => selectFirstItem())
 })
 
 const metaKey = ref('')
 
 onMounted(() => {
-  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-    ? '⌘'
-    : 'Ctrl'
+  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
 })
 
 if (document) {
@@ -206,7 +202,7 @@ if (document) {
           v-model="searchInput"
           type="search"
           aria-controls="search-list"
-          placeholder="Search components"
+          placeholder="Search docs and components"
           hide-footer
           icon-left="search"
           @input="searchIndexes"
@@ -214,10 +210,10 @@ if (document) {
         />
       </div>
     </template>
-    <div id="search-list" ref="searchList">
+    <div id="search-list" ref="searchList" class="max-h-96 overflow-y-auto px-2">
       <template v-for="section in searchSections" :key="section.key">
-        <section v-if="section.items.length > 0">
-          <!-- <x-divider :id="`${section.key}-label`" class="my-2" :label="section.label" /> -->
+        <section v-if="section.items.length > 0" class="mb-2">
+          <x-divider :label="section.label" class="my-2" />
           <ul role="listbox" :aria-labelledby="`${section.key}-label`">
             <li
               v-for="(result) in section.items"
@@ -225,7 +221,7 @@ if (document) {
               :key="result.item.url"
               data-name="list-item"
               role="option"
-              class="aria-selected:bg-secondary-100 dark:aria-selected:bg-secondary-800 rounded p-2 mb-2"
+              class="aria-selected:bg-secondary-100 dark:aria-selected:bg-secondary-800 rounded p-2 mb-1"
               @mouseenter="hoverResult"
             >
               <x-link
@@ -234,12 +230,13 @@ if (document) {
                 @click="isModalOpen = false"
               >
                 <p class="text-base w-full mb-1 mt-0 font-bold">{{ result.item.name }}</p>
-                <p class="text-sm m-0">{{ result.item.description }}</p>
+                <p class="text-sm m-0 text-gray-500 dark:text-gray-400 line-clamp-2">{{ result.item.description }}</p>
               </x-link>
             </li>
           </ul>
         </section>
       </template>
+      <p v-if="searchInput && !results.length" class="text-center text-gray-500 py-8 text-sm">No results found.</p>
     </div>
 
     <template #actions>

package/docs/composables/useDocMeta.ts

@@ -0,0 +1,47 @@
+import { useHead } from '@unhead/vue'
+
+const SITE_URL = 'https://indielayer.com'
+const SITE_NAME = 'Indielayer'
+const DEFAULT_OG_IMAGE = `${SITE_URL}/card.jpg`
+const DEFAULT_KEYWORDS = 'indielayer, vue, vue 3, nuxt, nuxt 3, tailwind css, ui kit, ui library, ui components, component library'
+
+export function useDocMeta(options: {
+  title: string;
+  description?: string;
+  path?: string;
+}) {
+  const pageTitle = options.title === 'Indielayer UI'
+    ? 'Indielayer UI — Vue 3 component library'
+    : `${options.title} — Indielayer UI`
+
+  const description = options.description
+    || 'Vue 3 and Tailwind CSS UI components for fast web applications.'
+  const url = options.path ? `${SITE_URL}${options.path}` : SITE_URL
+
+  useHead({
+    title: pageTitle,
+    meta: [
+      { name: 'description', content: description },
+      { name: 'keywords', content: DEFAULT_KEYWORDS },
+      { property: 'og:site_name', content: SITE_NAME },
+      { property: 'og:title', content: pageTitle },
+      { property: 'og:description', content: description },
+      { property: 'og:url', content: url },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:image', content: DEFAULT_OG_IMAGE },
+      { property: 'og:image:width', content: '1440' },
+      { property: 'og:image:height', content: '731' },
+      { property: 'og:image:type', content: 'image/jpeg' },
+      { property: 'og:image:alt', content: SITE_NAME },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:site', content: '@indielayer' },
+      { name: 'twitter:image', content: DEFAULT_OG_IMAGE },
+      { name: 'twitter:image:alt', content: SITE_NAME },
+      { name: 'twitter:title', content: pageTitle },
+      { name: 'twitter:description', content: description },
+    ],
+    link: [
+      { rel: 'canonical', href: url },
+    ],
+  })
+}

package/docs/icons.ts

@@ -28,6 +28,34 @@ export default {
   moon: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>',
   upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>',
   menu: '<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>',
+  'menu-alt-1': '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>',
+  'menu-alt-3': '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />',
+  rewind: {
+    icon: '<polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon>',
+    filled: true,
+  },
+  play: {
+    icon: '<polygon points="5 3 19 12 5 21 5 3"></polygon>',
+    filled: true,
+  },
+  pause: {
+    icon: '<rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect>',
+    filled: true,
+  },
+  forward: {
+    icon: '<polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon>',
+    filled: true,
+  },
+  vue: {
+    icon: '<path d="M17.2322 0.000135422L13.9992 5.77351L10.7661 0.000135422H-0.000488281L13.9992 24.9999L27.9988 0.000135422H17.2322Z" fill="#41B883"/><path d="M17.2322 0.000144958L13.9992 5.77352L10.7661 0.000144958H5.59937L13.9992 14.9997L22.3989 0.000144958H17.2322Z" fill="#34495E"/>',
+    filled: true,
+    viewBox: '0 0 28 25',
+  },
+  nuxt: {
+    icon: '<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6348 2.10272C14.6734 0.449622 12.2697 0.449592 11.3083 2.10272L0.830082 20.1192C-0.131361 21.7723 1.07044 23.8387 2.99332 23.8387H11.1732C10.3515 23.1206 10.0473 21.8784 10.6691 20.8126L18.6048 7.2094L15.6348 2.10272Z" fill="#80EEC0"/><path d="M22.2744 6.05476C23.0701 4.7022 25.0593 4.7022 25.855 6.05476L34.5264 20.7955C35.3222 22.148 34.3277 23.8387 32.7364 23.8387H15.3931C13.8017 23.8387 12.8071 22.148 13.6028 20.7955L22.2744 6.05476Z" fill="#00DC82"/>',
+    filled: true,
+    viewBox: '0 0 35 24',
+  },
   bold: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" /><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />',
   italic: '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="11" y1="5" x2="17" y2="5"></line><line x1="7" y1="19" x2="13" y2="19"></line><line x1="14" y1="5" x2="10" y2="19"></line>',
   'edit': '<path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>',

package/docs/layouts/default.vue

@@ -24,9 +24,7 @@ const drawer = ref(false)
     </x-drawer>
     <x-notifications>
       <div id="main" class="flex-1 overflow-y-scroll bg-secondary-50 dark:bg-gray-900">
-        <x-container class="py-4 lg:py-8" tag="section">
-          <router-view />
-        </x-container>
+        <router-view />
       </div>
     </x-notifications>
   </div>

package/docs/layouts/simple.vue

@@ -1,3 +1,5 @@
 <template>
-  <router-view />
+  <div class="docs-container">
+    <router-view />
+  </div>
 </template>

package/docs/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createHead } from '@unhead/vue/client'
 import UI, { BaseTheme } from '@indielayer/ui'
 import App from './App.vue'
 import router from './router'
@@ -10,12 +11,15 @@ import CodeSnippet from './components/common/CodeSnippet.vue'
 import MultiSnippet from './components/common/MultiSnippet.vue'
 import CodePreview from './components/common/CodePreview.vue'
 import DocumentPage from './components/common/DocumentPage.vue'
+import DocsHero from './components/common/DocsHero.vue'
 
 // css
 import './assets/css/tailwind.css'
 
 const app = createApp(App)
+const head = createHead()
 
+app.use(head)
 app.use(UI, {
   prefix: 'X',
   icons,
@@ -29,5 +33,6 @@ app.component('CodeSnippet', CodeSnippet)
 app.component('MultiSnippet', MultiSnippet)
 app.component('CodePreview', CodePreview)
 app.component('DocumentPage', DocumentPage)
+app.component('DocsHero', DocsHero)
 
 app.mount('#app')