windly-ui 1.0.1 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -142,6 +142,30 @@ 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>
+# 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.
+
+## Key Features
+
+- Tailwind-first design: components accept Tailwind utility classes directly.
+- Auto-imported components via Nuxt 4's component system.
+- Lightweight, framework-native Vue 3 components.
+
+## Example Usage
+
 ```vue
 <template>
   <UICard bordered>
@@ -158,51 +182,51 @@ No unnecessary abstractions or overhead.
 </template>
 ```
 
----
+## Local test and packaging
 
-## Advanced Example
+1. Build the module (the `prepare` script runs this automatically on `npm pack` and `npm publish`):
 
-```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>
+```bash
+npm run build
 ```
 
----
+2. Create a local tarball for testing:
 
-## Goals
+```bash
+npm pack
+```
 
-* 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
+3. In another project, install the generated tarball (replace the filename with the one produced by `npm pack`):
 
----
+```bash
+npm install /path/to/windly-ui-1.0.2.tgz
+```
 
-## Future Improvements
+4. Add the module to `nuxt.config` in the consuming project:
 
-* Theme system (dark mode, tokens)
-* Component playground with live prop editing
-* Accessibility improvements (ARIA support)
-* Animation utilities
-* Plugin system for extending components
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'windly-ui'
+  ]
+})
+```
 
----
+## Publish
+
+1. Bump the version in `package.json`.
+2. Ensure you are logged into npm: `npm login`.
+3. Publish:
 
-## Summary
+```bash
+npm publish --access public
+```
 
-This UI library is a developer-focused toolkit for building modern Nuxt applications quickly without sacrificing flexibility or control.
+## Notes
 
-It combines:
+- The package auto-registers components under the `UI` prefix (for example `UIButton`, `UICard`).
+- The `plugin.ts` also registers the most common components explicitly.
 
-* Vue 3 reactivity
-* Tailwind CSS flexibility
-* Clean and consistent component design
+## License
 
-Build fast, customize freely, and stay in control.
+MIT

package/package.json

@@ -1,27 +1,59 @@
 {
   "name": "windly-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
+  "description": "A Nuxt 4 module providing a small Tailwind-based UI component library",
   "type": "module",
-  "private": false,
-
+  "main": "./ui-library/dist/module.mjs",
+  "exports": {
+    ".": "./ui-library/dist/module.mjs"
+  },
   "files": [
-    "ui-library",
-    "README.md"
+    "ui-library/dist",
+    "README.md",
+    "LICENSE"
   ],
-
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+  "build": "nuxt-module-build ui-library",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "pack": "npm pack",
+    "pack:local": "npm run build && npm pack --pack-destination ./pack",
+    "lint": "echo \"no lint configured\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/windly-ui.git"
+  },
+  "keywords": [
+    "nuxt-module",
+    "nuxt",
+    "vue",
+    "tailwind",
+    "ui-library"
+  ],
+  "author": "Your Name <you@example.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/your-username/windly-ui/issues"
   },
-  "dependencies": {
+  "homepage": "https://github.com/your-username/windly-ui#readme",
+  "peerDependencies": {
     "nuxt": "^4.2.2",
-    "vue": "^3.5.26",
-    "vue-router": "^4.6.4"
+    "vue": "^3.5.26"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "^latest",
     "@nuxtjs/tailwindcss": "^6.14.0"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./ui-library/dist/*"]
+    }
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/ui-library/dist/module.d.mts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/ui-library/dist/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "ui-library",
+  "configKey": "uiLibrary",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/ui-library/dist/module.mjs

@@ -0,0 +1,22 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "ui-library",
+    configKey: "uiLibrary"
+  },
+  setup(_, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./components"),
+      prefix: "UI",
+      // This will prefix components with <UIButton />, <UICard /> etc.
+      pathPrefix: false,
+      // Don't include folder names as prefix
+      extensions: ["vue"],
+      watch: nuxt.options.dev
+    });
+  }
+});
+
+export { module$1 as default };

package/ui-library/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/ui-library/components/Accordion.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-type TriggerType = 'click' | 'hover'
-type ToggleSide = 'left' | 'right'
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    caption?: string
-    modelValue?: boolean
-    defaultOpen?: boolean
-    trigger?: TriggerType
-    disabled?: boolean
-    dense?: boolean
-    toggleSide?: ToggleSide
-    margin?: boolean
-  }>(),
-  {
-    defaultOpen: false,
-    trigger: 'click',
-    disabled: false,
-    dense: false,
-    toggleSide: 'right',
-    margin: true
-  }
-)
-
-const emit = defineEmits < {
-  (e: 'update:modelValue', value: boolean): void
-}> ()
-
-const isControlled = computed(() => props.modelValue !== undefined)
-const isOpen = ref < boolean > (props.defaultOpen ?? false)
-
-watch(
-    () => props.modelValue,
-    val => {
-        if (isControlled.value && typeof val === 'boolean') {
-            isOpen.value = val
-        }
-    },
-    { immediate: true }
-)
-
-const setOpen = (val: boolean) => {
-    if (props.disabled) return
-    isOpen.value = val
-    emit('update:modelValue', val)
-}
-
-const toggle = () => setOpen(!isOpen.value)
-
-const headerEvents = computed<Record<string, (() => void) | undefined>>(() => {
-  if (props.trigger === 'hover') {
-    return {
-      mouseenter: () => setOpen(true),
-      mouseleave: () => setOpen(false),
-      click: undefined
-    }
-  }
-
-  return {
-    mouseenter: undefined,
-    mouseleave: undefined,
-    click: toggle
-  }
-})
-
-</script>
-
-<template>
-    <div class="flex flex-col rounded-md border transition-opacity" :class="[
-        dense ? 'text-sm' : '',
-        disabled ? 'opacity-50 pointer-events-none' : ''
-    ]">
-
-        <!-- Header -->
-        <div v-on="headerEvents" class="flex items-center cursor-pointer select-none gap-3" :class="[
-            margin
-                ? (dense ? 'p-2' : 'p-3')
-                : (dense ? 'py-2' : 'py-3'),
-            isOpen ? 'border-b' : ''
-        ]">
-
-            <!-- Toggle (left) -->
-            <UIButton v-if="toggleSide === 'left'" icon="chevron_right" flat dense class="transition-transform"
-                :class="isOpen ? 'rotate-90' : ''" />
-
-            <!-- Header content -->
-            <div class="flex-1">
-                <slot name="header">
-                    <h3 class="font-semibold">
-                        {{ title }}
-                    </h3>
-                    <p v-if="caption" class="text-gray-500 text-xs">
-                        {{ caption }}
-                    </p>
-                </slot>
-            </div>
-
-            <!-- Toggle (right) -->
-            <UIButton v-if="toggleSide === 'right'" icon="chevron_right" flat dense class="transition-transform"
-                :class="isOpen ? 'rotate-90' : ''" />
-        </div>
-
-        <!-- Content -->
-        <transition enter-active-class="transition-all duration-300 ease-out"
-            leave-active-class="transition-all duration-200 ease-in" enter-from-class="opacity-0 max-h-0"
-            enter-to-class="opacity-100 max-h-[1000px]" leave-from-class="opacity-100 max-h-[1000px]"
-            leave-to-class="opacity-0 max-h-0">
-            <div v-show="isOpen" class="overflow-hidden pb-3" :class="margin ? 'px-3' : 'px-none'">
-                <slot />
-            </div>
-        </transition>
-
-    </div>
-</template>

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>