windly-ui 1.0.1 → 1.0.3

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -1,27 +1,25 @@
 {
   "name": "windly-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
-  "private": false,
-
+  "main": "./dist/module.mjs",
+  "exports": {
+    ".": "./dist/module.mjs"
+  },
   "files": [
-    "ui-library",
-    "README.md"
+    "dist"
   ],
-
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "build": "nuxt-module-build build",
+    "prepublishOnly": "npm run build"
   },
-  "dependencies": {
-    "nuxt": "^4.2.2",
-    "vue": "^3.5.26",
-    "vue-router": "^4.6.4"
+  "peerDependencies": {
+    "nuxt": "^4.0.0"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxt/module-builder": "^1.0.0",
+    "@nuxt/kit": "^4.0.0",
+    "typescript": "^5.8.0",
+    "vue-tsc": "^2.2.0"
   }
 }

package/README.md

@@ -1,208 +0,0 @@
-# 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/ui-library/components/Avatar.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-import { computed } from 'vue'
-import { useUiClasses } from './useUiClasses'
-import { uiProps } from "./uiProps";
-
-const props = defineProps({
-  image: { type: String, default: '' },
-  altText: { type: String, default: 'Avatar' },
-  initials: { type: String, default: '' },
-  borderColor: { type: String, default: '#fff' },
-  borderThickness: { type: Number, default: 2 },
-  shadow: { type: Boolean, default: false },
-  ...uiProps
-})
-
-// Use composable
-const {
-  // props
-  contentClass,
-  contentStyle,
-  textColor,
-  color,
-  size,
-  // computed
-  colorClass,
-  computedContentClass,
-  isColorDark,
-  isHex,
-  isTailwindColor
-} = useUiClasses(props)
-
-const sizeClass = computed(() => {
-  const map = {
-    sm: 'avatar-sm',
-    md: 'avatar-md',
-    lg: 'avatar-lg'
-  } as const
-
-  return map[size.value as keyof typeof map]
-})
-
-const shadowClass = computed(() =>
-  props.shadow ? 'shadow-lg' : ''
-)
-
-const avatarClass = computed(() => {
-  return [
-    computedContentClass.value,
-    sizeClass.value,
-    shadowClass.value,
-    isTailwindColor(textColor.value) ? `text-${textColor.value}` : `text-${isColorDark(color.value) ? 'white' : 'gray-700'}`,
-    isTailwindColor(color.value) ? `bg-${color.value}` : ""
-  ].filter((c) => !["", "!"].includes(c))
-})
-
-const avatarStyle = computed(() => ({
-  backgroundColor: isHex(color.value) && color.value,
-  color: isHex(textColor.value) && textColor.value,
-  borderColor: props.borderColor,
-  borderWidth: `${props.borderThickness}px`,
-  borderStyle: 'solid',
-  ...contentStyle.value
-}))
-</script>
-
-<template>
-  <div class="avatar" :class="avatarClass" :style="avatarStyle">
-    <img v-if="image" :src="image" :alt="altText" class="avatar-image" />
-    <span v-else class="avatar-initials">
-      {{ initials || '..' }}
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.avatar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-}
-
-.avatar-sm {
-  width: 40px;
-  height: 40px;
-  font-size: 0.875rem;
-}
-
-.avatar-md {
-  width: 60px;
-  height: 60px;
-  font-size: 1rem;
-}
-
-.avatar-lg {
-  width: 80px;
-  height: 80px;
-  font-size: 1.25rem;
-}
-
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar-initials {
-  font-weight: bold;
-}
-
-.shadow-lg {
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-</style>

package/ui-library/components/Badge.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-import { useSlots, computed } from 'vue'
-import { useUiClasses } from './useUiClasses'
-import { uiProps } from "./uiProps";
-
-const slots = useSlots()
-
-const props = defineProps({
-  content: { type: String, default: '' },
-  icon: { type: String, default: '' },
-  position: { type: String, default: 'superscript' },
-  show: { type: Boolean, default: true },
-  ...uiProps
-})
-
-// Use composable
-const {
-  // props
-  contentClass,
-  contentStyle,
-  color,
-  size,
-  rounded,
-  // computed
-  colorClass,
-  computedContentClass,
-  isColorDark,
-  isHex,
-  isTailwindColor
-} = useUiClasses(props)
-
-const hasSlots = computed(() => {
-  return !!slots.default?.()
-})
-
-const sizeClass = computed(() => {
-  const map = {
-    xs: 'w-auto min-w-2 h-2.5 text-[7px]',
-    sm: 'w-auto min-w-3 h-3 text-[10px]',
-    md: 'w-auto min-w-4 h-4 text-xs',
-    lg: 'w-auto min-w-6 h-6 text-sm'
-  } as const
-
-  return map[size.value as keyof typeof map]
-})
-
-const roundedClass = computed(() => {
-  const map = {
-    xs: 'rounded-xs',
-    sm: 'rounded-sm',
-    md: 'rounded',
-    lg: 'rounded-lg',
-    full: 'rounded-full'
-  } as const
-
-  return map[rounded.value as keyof typeof map]
-})
-
-const positionClasses = computed(() =>
-  props.position === 'superscript' && hasSlots.value
-    ? 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2'
-    : ''
-)
-
-const badgeClass = computed(() => {
-  return [
-    'inline-flex items-center justify-center font-bold',
-    computedContentClass.value,
-    sizeClass.value,
-    roundedClass.value,
-    positionClasses.value,
-    isColorDark(color.value) ? 'text-white' : 'text-gray-700',
-    isTailwindColor(color.value) ? `bg-${color.value}` : ""
-  ].filter((c) => !["", "!"].includes(c))
-})
-
-const badgeStyle = computed(() => {
-  const style = contentStyle.value
-  return {
-    backgroundColor: isHex(color.value) ? color.value : undefined,
-    ...(typeof style === 'object' && style ? style : {})
-  }
-})
-</script>
-
-<template>
-  <div class="flex">
-    <div v-if="hasSlots" class="relative">
-      <slot />
-      <span v-if="show" :class="[
-        badgeClass
-      ]" :style="[badgeStyle]">
-        <span v-if="icon" class="p-1 material-icons">{{ icon }}</span>
-        <span v-if="content" class="p-1">{{ content }}</span>
-      </span>
-    </div>
-    <div v-else>
-      <span v-if="show" :class="[
-        badgeClass
-      ]" :style="[badgeStyle]">
-        <span v-if="icon" class="p-1 material-icons">{{ icon }}</span>
-        <span v-if="content" class="p-1">{{ content }}</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.material-icons {
-  font-size: 1em;
-}
-</style>

package/ui-library/components/Button.vue

@@ -1,154 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-    inheritAttrs: false,
-})
-
-import { computed } from 'vue'
-import { useUiClasses } from './useUiClasses'
-import { uiProps } from "./uiProps";
-
-// Props
-const props = defineProps({
-    label: { type: String, default: null },
-    to: { type: [String, Object], default: null },
-    outline: { type: Boolean, default: false },
-    flat: { type: Boolean, default: false },
-    unelevated: { type: Boolean, default: false },
-    dense: { type: Boolean, default: false },
-    stacked: { type: Boolean, default: false },
-    gradient: { type: Boolean, default: false },
-    color2: { type: String, default: '' },
-    icon: { type: String, default: null },
-    iconColor: { type: String, default: null },
-    iconPosition: { type: String, default: 'start' },
-    ...uiProps
-})
-
-// Use composable
-const {
-    // props
-    contentClass,
-    contentStyle,
-    textColor,
-    disable,
-    loading,
-    color,
-    rounded,
-    size,
-    iconSize,
-    // class maps
-    roundedClass,
-    sizeClass,
-    iconSizeClasses,
-    // computed
-    colorClass,
-    computedContentClass,
-    isColorDark,
-    isHex,
-    isTailwindColor,
-    shadeTailwind,
-    shadeHex
-} = useUiClasses(props)
-
-const paddingClass = {
-    default: {
-        sm: "py-1 px-3 min-h-8 h-auto w-auto" + (props.label ? " min-w-16" : ""),
-        md: "py-2 px-6 min-h-10 h-auto w-auto" + (props.label ? " min-w-28":""),
-        lg: "py-3 px-8 min-h-12 h-auto w-auto" + (props.label ? " min-w-36":""),
-    },
-    dense: {
-        sm: "py-0.5 px-2 min-h-6 h-auto w-auto" + (props.label ? " min-w-16":""),
-        md: "py-1 px-4 min-h-8 h-auto w-auto" + (props.label ? " min-w-24":""),
-        lg: "py-1.5 px-6 min-h-10 h-auto w-auto" + (props.label ? " min-w-32":""),
-    },
-};
-
-const computedClass = computed(() => {
-    let cls = `transition-all duration-300 text-nowrap ${roundedClass[(rounded.value as keyof typeof roundedClass)]} ${sizeClass[(size.value as keyof typeof sizeClass)]}`;
-
-    if (props.outline)
-        cls += ` border bg-white border-${colorClass.value} text-${colorClass.value} hover:bg-${colorClass.value} hover:text-white`;
-
-    if (props.flat)
-        cls += ` bg-transparent text-${colorClass.value} hover:bg-${colorClass.value} hover:bg-opacity-10 shadow-none`;
-
-    cls += props.dense ? ` ${paddingClass.dense[size.value as keyof typeof paddingClass.dense]}` : ` ${paddingClass.default[size.value as keyof typeof paddingClass.default]}`;
-    cls += props.unelevated ? " no-shadow" : " shadow-md";
-    cls += props.stacked ? " flex flex-col items-center justify-center gap-2" : " flex items-center justify-center gap-2";
-    cls += disable.value ? " opacity-50 cursor-not-allowed" : " cursor-pointer";
-    cls += loading.value ? " opacity-75 cursor-progress" : "";
-    cls += props.gradient
-        ? ` bg-gradient-to-br from-${color.value} to-${computedColor2.value} hover:bg-gradient-to-tl text-${computedTextColor.value}`
-        : !props.flat && !props.outline
-            ? ` bg-${color.value} hover:bg-${computedColor2.value} text-${computedTextColor.value}`
-            : "";
-
-    return cls;
-});
-
-const computedIconClass = computed(() => {
-    return `material-icons ${iconSizeClasses[props.iconPosition === 'start' ? 'lg' : 'md']} ${props.iconColor ? `text-${props.iconColor}` : ''}`
-})
-
-// Computed props for v-bind
-const computedProps = computed(() => ({
-    class: computedClass.value,
-    disabled: disable.value || loading.value
-}))
-
-const computedTextColor = computed(() => {
-    if (textColor.value) {
-        return textColor.value;
-    }
-
-    if (props.outline || props.flat) {
-        return color.value;
-    }
-
-    const darkBg = isColorDark(color.value);
-    return darkBg ? "white" : "gray-900"
-})
-
-const computedColor2 = computed(() => {
-    if (props.color2) return props.color2
-
-    if (isTailwindColor(color.value)) {
-        return shadeTailwind(color.value, 100)
-    }
-
-    if (isHex(color.value)) {
-        return shadeHex(color.value, -20)
-    }
-
-    return color.value
-})
-
-// Click handler
-function onClick() {
-    if (!loading.value && !disable.value && !props.to) {
-        emit('click')
-    }
-}
-
-// Emit function for script setup
-const emit = defineEmits(['click'])
-</script>
-
-<template>
-    <!-- Router Link if "to" prop is provided -->
-    <router-link v-if="to" v-bind="computedProps" :to="to">
-        <!-- Icon (start position) -->
-        <i v-if="icon && iconPosition === 'start'" :class="computedIconClass">{{ icon }}</i>
-        <!-- Label -->
-        <span v-if="label" class="label">{{ label }}</span>
-        <!-- Icon (end position) -->
-        <i v-if="icon && iconPosition === 'end'" :class="computedIconClass">{{ icon }}</i>
-    </router-link>
-
-    <!-- Normal button if no "to" prop -->
-    <button v-else v-bind="computedProps" @click="onClick">
-        <i v-if="icon && iconPosition === 'start'" :class="computedIconClass">{{ icon }}</i>
-        <span v-if="label" class="label">{{ label }}</span>
-        <i v-if="icon && iconPosition === 'end'" :class="computedIconClass">{{ icon }}</i>
-    </button>
-</template>