@indielayer/ui 1.17.0 → 1.18.0

package/README.md

@@ -12,11 +12,11 @@
 Vue 3 & Nuxt 3 UI Components built with Tailwind 3. **Build and prototype fast web applications.** 🚀
 
 ## 📖 Documentation
-Read the <a href="https://indielayer.com/ui/docs">Online Documentation</a>.
+Read the <a href="https://indielayer.com">Online Documentation</a>.
 
 ## Quickstart
 ```bash
-npm init @indielayer/ui@latest
+pnpm create @indielayer/ui@latest
 ```
 
 ---

package/docs/assets/css/tailwind.css

@@ -38,6 +38,12 @@ body {
   }
 }
 
+@layer components {
+  .docs-container {
+    @apply max-w-screen-2xl mx-auto w-full px-4 md:px-8 mt-8 md:mt-16;
+  }
+}
+
 .inset-center {
   position: absolute;
   top: 50%;

package/docs/components/common/CodePreview.vue

@@ -24,17 +24,22 @@ function toggleCode() {
   expandedSync.value = !expandedSync.value
 }
 
-function copy(text?: string) {
+async function copy(text?: string) {
   if (!text) return
 
-  const el = document.createElement('textarea')
+  try {
+    await navigator.clipboard.writeText(text)
+    notifications?.success('Copied to clipboard!')
+  } catch {
+    const el = document.createElement('textarea')
 
-  el.value = text
-  document.body.appendChild(el)
-  el.select()
-  document.execCommand('copy')
-  document.body.removeChild(el)
-  notifications?.success('Copied to clipboard!')
+    el.value = text
+    document.body.appendChild(el)
+    el.select()
+    document.execCommand('copy')
+    document.body.removeChild(el)
+    notifications?.success('Copied to clipboard!')
+  }
 }
 </script>
 
@@ -50,7 +55,7 @@ function copy(text?: string) {
           ghost
           size="sm"
           :href="`${github}/${title?.toLowerCase()}.vue`"
-          target="blank"
+          target="_blank"
         />
         <template #tooltip>
           Edit on <span class="text-gray-300">GitHub</span>

package/docs/components/common/DocsFeatures.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const features = [
+  {
+    icon: 'check-circle',
+    title: 'Accessible by default',
+    description: 'Keyboard-friendly components and sensible ARIA patterns out of the box.',
+  },
+  {
+    icon: 'palette',
+    title: 'Tailwind themes',
+    description: 'Base and Carbon theme variants with a shared preset for your design tokens.',
+  },
+  {
+    icon: 'cube',
+    title: 'Tree-shakeable',
+    description: 'Import only the components you need, or register the full library in one line.',
+  },
+  {
+    icon: 'code',
+    title: 'Vue 3 and Nuxt 3',
+    description: 'First-class Vue plugin plus a Nuxt module for SSR-ready setups.',
+  },
+]
+</script>
+
+<template>
+  <section class="docs-features -mx-4 lg:-mx-8 px-4 lg:px-8 mb-10">
+    <div class="docs-container">
+      <div class="text-overline text-primary-600 dark:text-primary-400 mb-3">Why Indielayer UI</div>
+      <h2 class="text-h3 mb-8 text-gray-900 dark:text-white">Everything you need to ship faster</h2>
+
+      <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+        <div v-for="feature in features" :key="feature.title" class="min-w-0">
+          <x-icon :icon="feature.icon" size="lg" class="text-primary-500 mb-3"/>
+          <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ feature.title }}</h3>
+          <p class="text-sm text-gray-600 dark:text-gray-400 m-0 leading-relaxed">{{ feature.description }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/docs/components/common/DocsHero.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { version } from '@indielayer/ui'
+import ComponentsIndex from '../../search/components.json'
+import ExampleBlocks from './ExampleBlocks.vue'
+
+const componentCount = ComponentsIndex.length
+
+const panelRef = ref<HTMLElement | null>(null)
+const isHovering = ref(false)
+const tiltX = ref(5)
+const tiltY = ref(-8)
+const prefersReducedMotion = ref(false)
+
+const REST_TILT_X = 5
+const REST_TILT_Y = -8
+const MAX_TILT_X = 10
+const MAX_TILT_Y = 14
+
+const panelTransform = computed(() => {
+  if (prefersReducedMotion.value) return undefined
+
+  return `perspective(1200px) rotateX(${tiltX.value}deg) rotateY(${tiltY.value}deg)`
+})
+
+let motionQuery: MediaQueryList | null = null
+
+function onMotionPreferenceChange(event: MediaQueryListEvent) {
+  prefersReducedMotion.value = event.matches
+}
+
+function updateTiltFromPointer(event: PointerEvent) {
+  if (!panelRef.value || prefersReducedMotion.value) return
+
+  const rect = panelRef.value.getBoundingClientRect()
+  const x = (event.clientX - rect.left) / rect.width - 0.5
+  const y = (event.clientY - rect.top) / rect.height - 0.5
+
+  tiltY.value = x * MAX_TILT_Y
+  tiltX.value = -y * MAX_TILT_X
+}
+
+function onPanelEnter() {
+  if (prefersReducedMotion.value) return
+
+  isHovering.value = true
+  tiltX.value = 0
+  tiltY.value = 0
+}
+
+function onPanelMove(event: PointerEvent) {
+  if (!isHovering.value) return
+
+  updateTiltFromPointer(event)
+}
+
+function onPanelLeave() {
+  isHovering.value = false
+  tiltX.value = REST_TILT_X
+  tiltY.value = REST_TILT_Y
+}
+
+onMounted(() => {
+  motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+  prefersReducedMotion.value = motionQuery.matches
+  motionQuery.addEventListener('change', onMotionPreferenceChange)
+})
+
+onUnmounted(() => {
+  motionQuery?.removeEventListener('change', onMotionPreferenceChange)
+})
+
+function scrollToInstallation() {
+  const el = document.getElementById('installation')
+  const main = document.getElementById('main')
+
+  if (el && main) {
+    main.scrollTo({ top: el.offsetTop - 24, behavior: 'smooth' })
+  }
+}
+</script>
+
+<template>
+  <section class="docs-hero relative mb-6 -mt-2 -mx-4 lg:-mx-8 px-4 lg:px-8">
+    <div class="docs-container grid lg:grid-cols-2 gap-10 lg:gap-8 items-center pb-10 lg:pb-14">
+      <div class="min-w-0">
+        <div class="flex items-center gap-4 mb-8">
+          <img
+            src="@/assets/images/logo_mini.svg"
+            width="52"
+            height="49"
+            alt=""
+            class="shrink-0 drop-shadow-sm"
+          />
+          <div>
+            <div class="flex items-center gap-2 flex-wrap">
+              <span class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">Indielayer UI</span>
+              <x-tag size="xs" color="primary" filled rounded>v{{ version }}</x-tag>
+            </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400 m-0 mt-0.5">Vue 3 component library</p>
+          </div>
+        </div>
+
+        <h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-gray-900 dark:text-white leading-[1.1] mb-5 max-w-xl">
+          Composable UI blocks for modern Vue apps
+        </h1>
+
+        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-lg mb-8 leading-relaxed m-0">
+          Accessible, themeable building blocks for Vue 3. Prototype production-quality UIs without rebuilding the basics.
+        </p>
+
+        <div class="flex flex-wrap items-center gap-6 mb-8 text-base">
+          <div class="flex items-center">
+            <x-icon icon="vue" size="xl"/>
+            <div class="ml-2">
+              <div class="font-semibold text-gray-900 dark:text-white">Vue.js 3</div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">Performant UI</div>
+            </div>
+          </div>
+          <x-divider vertical class="!h-5 hidden sm:block"/>
+          <div class="flex items-center">
+            <x-icon icon="nuxt" size="xl"/>
+            <div class="ml-2">
+              <div class="font-semibold text-gray-900 dark:text-white">Nuxt.js 3</div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">SSR Ready</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap gap-3 mb-8">
+          <x-button color="primary" to="/component/button" icon-right="arrow-right">
+            Browse components
+          </x-button>
+          <x-button outlined icon="book" @click="scrollToInstallation">
+            Installation
+          </x-button>
+          <x-button ghost icon="github" href="https://github.com/indielayer/ui" target="_blank">GitHub</x-button>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <x-tag size="sm" outlined rounded>{{ componentCount }}+ components</x-tag>
+          <x-tag size="sm" outlined rounded>Vue 3</x-tag>
+          <x-tag size="sm" outlined rounded>Nuxt 3</x-tag>
+          <x-tag size="sm" outlined rounded>Tailwind CSS 3</x-tag>
+        </div>
+      </div>
+
+      <div
+        class="docs-hero-panel hidden lg:block w-full min-w-0"
+        :class="{ 'docs-hero-panel-hover': isHovering }"
+      >
+        <div
+          ref="panelRef"
+          class="docs-hero-panel-tilt"
+          :style="{ transform: panelTransform }"
+          @pointerenter="onPanelEnter"
+          @pointermove="onPanelMove"
+          @pointerleave="onPanelLeave"
+        >
+          <div class="docs-hero-panel-surface rounded-xl border border-gray-200 bg-white shadow-lg shadow-gray-200/60 dark:border-gray-700 dark:bg-gray-950 dark:shadow-2xl dark:shadow-primary-500/10 max-h-[640px] overflow-y-auto p-6">
+            <example-blocks />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="postcss" scoped>
+.docs-hero {
+  background: radial-gradient(50% 100% at 25% 100%, #f8fafc 0%, rgb(248 250 252 / 0%) 100%);
+}
+
+html.dark .docs-hero {
+  background: radial-gradient(50% 100% at 25% 100%, rgb(16 185 129 / 16%) 0%, rgb(248 250 252 / 0%) 100%);
+}
+
+.docs-hero-panel:not(.docs-hero-panel-hover) {
+  animation: docs-hero-float 6s ease-in-out infinite;
+}
+
+.docs-hero-panel-hover {
+  animation: none;
+}
+
+.docs-hero-panel-tilt {
+  transform-style: preserve-3d;
+  transition: transform 0.2s ease-out;
+  will-change: transform;
+}
+
+.docs-hero-panel-surface {
+  transform: translateZ(0);
+}
+
+@keyframes docs-hero-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .docs-hero-panel {
+    animation: none;
+  }
+
+  .docs-hero-panel-tilt {
+    transition: none;
+  }
+}
+</style>

package/docs/components/common/DocumentPage.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useDocMeta } from '../../composables/useDocMeta'
 
 const props = defineProps({
   components: {
     type: [Array, String],
     default: () => [],
   },
-  headings: {
-    type: Array,
-    default: () => [],
-  },
   title: String,
   description: String,
   back: String,
@@ -21,6 +19,14 @@ const props = defineProps({
   },
 })
 
+const route = useRoute()
+
+useDocMeta({
+  title: props.title || 'Component',
+  description: props.description,
+  path: route.path,
+})
+
 const headers = [
   { text: 'Name', value: 'name' },
   { text: 'Type', value: 'type' },
@@ -94,7 +100,6 @@ const componentsProperties = computed(() => {
       if (comp[property]) properties[componentName][property] = Object.keys(comp[property]).map((k) => ({ name: k }))
     })
 
-    // vue 3 events
     if (comp['emits']) properties[componentName]['emits'] = Array.isArray(comp['emits']) ? comp['emits'].map((k) => ({ name: k })) : Object.keys(comp['emits']).map((k) => ({ name: k }))
     if (comp['expose']) properties[componentName]['methods'] = comp['expose'].map((k) => ({ name: k }))
   })
@@ -102,124 +107,106 @@ const componentsProperties = computed(() => {
   return properties
 })
 
-const anchors = ref([])
-const currentAnchor = ref(null)
+const backTo = computed(() => (props.back ? `/component/${props.back}` : null))
+const nextTo = computed(() => (props.next ? `/component/${props.next}` : null))
 </script>
 
 <template>
-  <div class="w-full flex document-page">
-    <div class="min-w-0 flex-auto">
-      <div class="text-4xl font-semibold">
-        {{ title }}
-        <x-tooltip>
-          <x-link :href="`${github}/index.vue`" target="blank" color="#94a3b8">
-            <x-icon icon="edit" size="sm" />
-          </x-link>
-          <template #tooltip>
-            Edit on <span class="text-gray-300">GitHub</span>
-          </template>
-        </x-tooltip>
+  <div class="document-page w-full">
+    <div class="text-4xl font-semibold">
+      {{ title }}
+      <x-tooltip>
+        <x-link :href="`${github}/index.vue`" target="_blank" color="#94a3b8">
+          <x-icon icon="edit" size="sm" />
+        </x-link>
+        <template #tooltip>
+          Edit on <span class="text-gray-300">GitHub</span>
+        </template>
+      </x-tooltip>
+    </div>
+    <div class="text-lg my-2 text-gray-500 dark:text-gray-400">{{ description }}</div>
+    <div class="mt-6 space-y-12">
+      <slot></slot>
+
+      <div v-for="demo in demos" :key="demo.name" class="demo-block">
+        <code-preview
+          :title="demo.name"
+          :description="demo.description"
+          :code="demo.code"
+          :github="github"
+        >
+          <component :is="demo.component" />
+        </code-preview>
       </div>
-      <div class="text-lg my-2 text-gray-500">{{ description }}</div>
-      <div class="mt-4">
-        <slot></slot>
-
-        <div v-for="demo in demos" :key="demo.name">
-          <code-preview
-            :title="demo.name"
-            :description="demo.description"
-            :code="demo.code"
-            :github="github"
-          >
-            <component :is="demo.component" />
-          </code-preview>
-        </div>
 
-        <div v-if="componentsProperties">
-          <h2 id="api" class="!text-2xl !mt-20"><a class="anchor" href="#api">#</a>API</h2>
+      <div v-if="componentsProperties">
+        <h2 id="api" class="!text-2xl !mt-4"><a class="anchor" href="#api">#</a>API</h2>
 
-          <section
-            v-for="(component, componentName) in componentsProperties"
-            :key="componentName"
+        <section
+          v-for="(component, componentName) in componentsProperties"
+          :key="componentName"
+        >
+          <h3
+            :id="String(componentName).toLowerCase()"
+            class="mt-10 dark:text-gray-300 text-gray-800 text-2xl border-b-2 dark:border-gray-600 pb-2"
+          >
+            {{ componentName }}
+          </h3>
+          <div
+            v-for="(properties, propertyName) in component"
+            :key="propertyName"
           >
-            <h3 class="mt-10 dark:text-gray-300 text-gray-800 text-2xl border-b-2 dark:border-gray-600 pb-2">
-              {{ componentName }}
-            </h3>
-            <div
-              v-for="(properties, propertyName) in component"
-              :key="propertyName"
-            >
-              <div>
-                <h4 class="mt-6 mb-2 text-gray-800 dark:text-gray-300 text-xl capitalize">
-                  {{ propertyName }}
-                </h4>
-
-                <div class="text-sm font-light">
-                  <x-table
-                    :headers="propertyName === 'props' ? headers : headersSimple"
-                    :items="properties"
-                  >
-                    <template #item-name="{ item }">
-                      <div class="text-primary-500">{{ item.name }}</div>
-                    </template>
-                    <template #item-type="{ item }">
-                      <div v-for="t in item.type" :key="t">{{ t }}</div>
-                    </template>
-                    <template #item-required="{ item }">
-                      <div>{{ item.required ? 'true' : '' }}</div>
-                    </template>
-                    <template #item-validator="{ item }">
-                      <div class="space-x-2">
-                        <span v-for="validator in item.validator" :key="validator">{{ validator }}</span>
-                      </div>
-                    </template>
-                  </x-table>
-                </div>
+            <div>
+              <h4
+                :id="`${String(componentName).toLowerCase()}-${propertyName}`"
+                class="mt-6 mb-2 text-gray-800 dark:text-gray-300 text-xl capitalize"
+              >
+                {{ propertyName }}
+              </h4>
+
+              <div class="text-sm font-light">
+                <x-table
+                  :headers="propertyName === 'props' ? headers : headersSimple"
+                  :items="properties"
+                >
+                  <template #item-name="{ item }">
+                    <div class="text-primary-500">{{ item.name }}</div>
+                  </template>
+                  <template #item-type="{ item }">
+                    <div v-for="t in item.type" :key="t">{{ t }}</div>
+                  </template>
+                  <template #item-required="{ item }">
+                    <div>{{ item.required ? 'true' : '' }}</div>
+                  </template>
+                  <template #item-validator="{ item }">
+                    <div class="space-x-2">
+                      <span v-for="validator in item.validator" :key="validator">{{ validator }}</span>
+                    </div>
+                  </template>
+                </x-table>
               </div>
             </div>
-
-          </section>
-        </div>
+          </div>
+        </section>
       </div>
-
-      <!-- <div class="flex my-10">
-            <x-button
-              v-if="back"
-              :to="back"
-              outlined
-              class="capitalize"
-              icon="arrow-left"
-            >{{ back }}</x-button>
-            <x-spacer/>
-            <x-button
-              v-if="next"
-              :to="next"
-              outlined
-              class="capitalize"
-              icon-right="arrow-right"
-            >{{ next }}</x-button>
-          </div> -->
     </div>
 
-    <div v-if="anchors.length > 0" class="hidden xl:text-sm xl:block flex-none w-64 pl-8 mr-8">
-      <div class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) pt-10 pb-6 top-0">
-        <div class="mb-8">
-          <h5 class="text-gray-900 dark:text-gray-100 uppercase tracking-wide font-semibold mb-3 text-sm lg:text-xs">On this page</h5>
-          <ul class="overflow-x-hidden text-gray-500 dark:text-gray-400 font-medium">
-            <li v-for="(anchor, index) in anchors" :key="index">
-              <a
-                :href="`#${anchor.id}`"
-                class="block transform transition-colors duration-200 py-2 hover:text-gray-900"
-                :class="{
-                  'text-gray-900 dark:text-gray-200': anchor.id === currentAnchor,
-                }"
-              >
-                {{ anchor.name }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
+    <div v-if="backTo || nextTo" class="flex my-12 pt-8 border-t dark:border-gray-700">
+      <x-button
+        v-if="backTo"
+        :to="backTo"
+        outlined
+        class="capitalize"
+        icon-left="arrow-left"
+      >{{ back }}</x-button>
+      <x-spacer/>
+      <x-button
+        v-if="nextTo"
+        :to="nextTo"
+        outlined
+        class="capitalize"
+        icon-right="arrow-right"
+      >{{ next }}</x-button>
     </div>
   </div>
 </template>