windly-ui 1.0.0

package/README.md

@@ -0,0 +1,208 @@
+# Tailwind-Based UI Library for Nuxt 4
+
+A lightweight, modular UI component library built specifically for Nuxt 4 applications, powered by Tailwind CSS.
+
+---
+
+## Overview
+
+This UI library is designed to accelerate frontend development by providing reusable, customizable, and auto-imported components. It focuses on simplicity, flexibility, and a smooth developer experience while staying fully aligned with Tailwind CSS principles.
+
+---
+
+## Key Features
+
+### Tailwind-First Design
+
+All components accept Tailwind utility classes directly via:
+
+* `class`
+* `:class`
+
+This gives full control over styling without requiring overrides or complex theming systems.
+
+---
+
+### Auto Import (Nuxt 4 Native)
+
+Components are automatically available across your application.
+
+Example:
+
+```vue
+<UIButton label="Click Me" />
+```
+
+---
+
+### Fully Reactive Components
+
+Built using the Vue 3 Composition API:
+
+* `ref`
+* `computed`
+* `watch`
+* `provide / inject`
+
+---
+
+### Consistent API Design
+
+All components follow predictable and consistent patterns:
+
+* `v-model` support where applicable
+* Props for variants such as color, size, and state
+* Slots for flexible customization
+
+---
+
+## Component Categories
+
+### Form Controls
+
+* UIInput
+* UITextarea
+* UIButton
+* UIToggle
+* UICheckbox
+* UIRadio
+* UIDropdown
+* UIChip
+
+---
+
+### Navigation
+
+* UIBreadcrumbs
+* UITabs + UITabPanel
+* UIAccordion
+
+---
+
+### Feedback and Popups
+
+* UITooltip
+* UIDialog
+
+---
+
+### Data Display
+
+* UICard
+* UIAvatar
+* UIBadge
+
+---
+
+### Planned Components
+
+* UIList
+* UITable
+* UIScrollArea
+* UIImage
+* UIIcon
+* UIDivider
+
+---
+
+## Design Philosophy
+
+### Minimal but Powerful
+
+Components are intentionally lightweight while still supporting complex use cases through composition.
+
+---
+
+### Developer Control First
+
+There is no rigid styling system. Tailwind utilities are used directly for full flexibility.
+
+---
+
+### Composition over Configuration
+
+Instead of relying on large sets of props, the library encourages:
+
+* Slots
+* Composition patterns
+* Vue reactivity
+
+---
+
+### Framework-Native Experience
+
+Built specifically for:
+
+* Nuxt 4
+* Vue 3
+
+No unnecessary abstractions or overhead.
+
+---
+
+## Example Usage
+
+```vue
+<template>
+  <UICard bordered>
+    <template #header>
+      <h3 class="text-lg font-semibold">Welcome</h3>
+    </template>
+
+    <p>This is a simple card using the UI library.</p>
+
+    <template #footer>
+      <UIButton label="Action" />
+    </template>
+  </UICard>
+</template>
+```
+
+---
+
+## Advanced Example
+
+```vue
+<UITabs v-model="activeTab">
+  <UITabPanel name="first" label="Overview">
+    <p>Overview content</p>
+  </UITabPanel>
+
+  <UITabPanel name="second" label="Details">
+    <p>Details content</p>
+  </UITabPanel>
+</UITabs>
+```
+
+---
+
+## Goals
+
+* Provide a clean alternative to heavy UI frameworks
+* Showcase advanced Vue patterns in a simple way
+* Enable rapid prototyping with Tailwind
+* Keep the system small, composable, and extensible
+
+---
+
+## Future Improvements
+
+* Theme system (dark mode, tokens)
+* Component playground with live prop editing
+* Accessibility improvements (ARIA support)
+* Animation utilities
+* Plugin system for extending components
+
+---
+
+## Summary
+
+This UI library is a developer-focused toolkit for building modern Nuxt applications quickly without sacrificing flexibility or control.
+
+It combines:
+
+* Vue 3 reactivity
+* Tailwind CSS flexibility
+* Clean and consistent component design
+
+Build fast, customize freely, and stay in control.

package/app/app.vue

@@ -0,0 +1,10 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage/>
+  </NuxtLayout>
+</template>
+<style>
+body {
+  font-family: "Poppins", sans-serif;
+}
+</style>

package/app/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/app/components/doc/component.vue

@@ -0,0 +1,34 @@
+<script setup>
+    const props = defineProps({
+        title: {
+            type: String
+        },
+        caption: {
+            type: String,
+            default: ""
+        }
+    })
+    const sectionId = props.title.split(' ').join('-').toLocaleLowerCase()
+    const copySectionLink = async () => {
+        const url = `${window.location.origin}${window.location.pathname}#${sectionId}`
+
+        try {
+            await navigator.clipboard.writeText(url)
+            console.log('Link copied:', url)
+        } catch (err) {
+            console.error('Failed to copy link', err)
+        }
+        }
+</script>
+<template>
+    <div :id="sectionId" class="flex flex-col my-10">
+        <h4 class="text-3xl font-semibold text-gray-700 cursor-pointer" @click="copySectionLink"># {{title}}</h4>
+        <div v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">{{caption}}</div>
+        <div class="my-6">
+            <UICodeBlock :title="title">
+                <slot />
+            </UICodeBlock>
+        </div>
+        <hr/>
+    </div>
+</template>

package/app/components/doc/megaSection.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    subTitle: {
+        type: String,
+        default: ""
+    },
+    caption: {
+        type: String,
+        default: ""
+    },
+})
+
+const sectionId = computed(() =>
+    props.title.split(' ').join('-').toLowerCase()
+)
+
+const copySectionLink = async (e) => {
+    e.stopPropagation()
+
+    const url = `${window.location.origin}${window.location.pathname}#${sectionId.value}`
+
+    try {
+        await navigator.clipboard.writeText(url)
+        console.log('Link copied:', url)
+    } catch (err) {
+        console.error('Failed to copy link', err)
+    }
+}
+</script>
+<template>
+    <section :id="sectionId">
+        <div class="flex flex-col my-10">
+            <UIAccordion class="!border-0" :default-open="true" :margin="false">
+                <template #header>
+                    <h3 class="flex items-center gap-2 text-5xl font-semibold text-sky-500 group select-none">
+                    {{ title }}
+                        <span class="hidden group-hover:block text-xl hover:opacity-100" @click="copySectionLink">
+                            #
+                        </span>
+                    </h3>
+                    <div class="font-light text-gray-700">{{ subTitle }}</div>
+                </template>
+                    <p v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">
+                        {{ caption }}
+                    </p>
+                    <slot />
+            </UIAccordion>
+        </div>
+    </section>
+</template>

package/app/components/doc/section.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    subTitle: {
+        type: String,
+        default: ""
+    },
+    caption: {
+        type: String,
+        default: ""
+    },
+})
+
+const sectionId = computed(() =>
+    props.title.split(' ').join('-').toLowerCase()
+)
+
+const copySectionLink = async (e) => {
+    e.stopPropagation()
+
+    const url = `${window.location.origin}${window.location.pathname}#${sectionId.value}`
+
+    try {
+        await navigator.clipboard.writeText(url)
+        console.log('Link copied:', url)
+    } catch (err) {
+        console.error('Failed to copy link', err)
+    }
+}
+</script>
+<template>
+    <section :id="sectionId">
+        <div class="flex flex-col my-10">
+            <UIAccordion :default-open="true">
+                <template #header>
+                    <h3 class="flex items-center gap-2 text-5xl font-semibold text-sky-500 group select-none">
+                    {{ title }}
+                        <span class="hidden group-hover:block text-xl hover:opacity-100" @click="copySectionLink">
+                            #
+                        </span>
+                    </h3>
+                    <div class="font-light text-gray-700">{{ subTitle }}</div>
+                </template>
+                    <p v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">
+                        {{ caption }}
+                    </p>
+                    <slot />
+            </UIAccordion>
+        </div>
+    </section>
+</template>