windly-ui 1.0.0

package/app/pages/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <DocMegaSection 
+    title="Mini WYSIWYG Editor"
+    sub-title="Demonstrates advanced Vue reactivity, history tracking, and DOM syncing."
+    class="mx-4"
+  >
+    <DocComponent 
+      title="Reactive Editor with Undo/Redo"
+      caption="A minimal rich-text editor built using contenteditable and Vue's Composition API."
+    >
+      <div class="grid md:grid-cols-2 gap-6">
+        <div class="space-y-3">
+          <div class="flex gap-2">
+            <UIButton label="Undo" @click="undo" :disable="historyIndex <= 0" />
+            <UIButton label="Redo" @click="redo" :disable="historyIndex >= history.length - 1" />
+            <UIButton label="Clear" @click="clearEditor" color="red-400" />
+            <UIButton label="Copy HTML" @click="copyHTML" color="green-500" />
+          </div>
+
+          <div
+            ref="editorRef"
+            contenteditable
+            class="border rounded-md p-4 min-h-[200px] bg-white focus:outline-none"
+            @input="handleInput"
+          ></div>
+        </div>
+
+        <div>
+          <h4 class="font-semibold mb-2">Live HTML Output</h4>
+          <pre class="bg-gray-900 text-green-400 p-4 rounded-md text-sm overflow-auto">
+            {{ html }}
+          </pre>
+        </div>
+      </div>
+    </DocComponent>
+  </DocMegaSection>
+</template>
+<script setup>
+  import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const editorRef = ref(null)
+const html = ref("")
+
+const history = ref([""])
+const historyIndex = ref(0)
+
+const MAX_HISTORY = 30
+
+let isProgrammaticUpdate = false
+
+let debounceTimer = null
+const debounce = (fn, delay = 300) => {
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(fn, delay)
+}
+
+const handleInput = () => {
+  if (isProgrammaticUpdate) return
+
+  debounce(() => {
+    const value = editorRef.value.innerHTML
+
+    if (value === history.value[historyIndex.value]) return
+
+    history.value = history.value.slice(0, historyIndex.value + 1)
+
+    history.value.push(value)
+
+    if (history.value.length > MAX_HISTORY) {
+      history.value.shift() 
+    } else {
+      historyIndex.value++
+    }
+
+    historyIndex.value = history.value.length - 1
+
+    html.value = value
+  })
+}
+
+const updateEditorFromHistory = () => {
+  const value = history.value[historyIndex.value]
+
+  isProgrammaticUpdate = true
+
+  html.value = value
+  editorRef.value.innerHTML = value
+
+  setTimeout(() => {
+    isProgrammaticUpdate = false
+  }, 0)
+}
+
+const undo = () => {
+  if (historyIndex.value > 0) {
+    historyIndex.value--
+    updateEditorFromHistory()
+  }
+}
+
+const redo = () => {
+  if (historyIndex.value < history.value.length - 1) {
+    historyIndex.value++
+    updateEditorFromHistory()
+  }
+}
+
+const clearEditor = () => {
+  history.value = [""]
+  historyIndex.value = 0
+  updateEditorFromHistory()
+}
+
+const copyHTML = async () => {
+  await navigator.clipboard.writeText(html.value)
+}
+
+const handleKeydown = (e) => {
+  if (e.ctrlKey && e.key.toLowerCase() === "z") {
+    e.preventDefault()
+    undo()
+  }
+
+  if (e.ctrlKey && e.key.toLowerCase() === "y") {
+    e.preventDefault()
+    redo()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeydown)
+})
+</script>

package/nuxt.config.ts

@@ -0,0 +1,19 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import UiLibraryModule from './ui-library/module'
+
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/tailwindcss', UiLibraryModule],
+  css: ['~/assets/css/tailwind.css'],
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  app: {
+    head: {
+      link: [
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/icon?family=Material+Icons'
+        }
+      ]
+    }
+  }
+})

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "windly-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^4.2.2",
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.14.0"
+  }
+}

package/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

package/tailwind.config.ts

@@ -0,0 +1,28 @@
+// tailwind.config.js
+export default {
+  content: [
+    './app/**/*.{vue,js,ts}',
+    './ui-library/components/**/*.{vue,js,ts}'
+  ],
+  safelist: [
+    'bg-white',
+    'text-white',
+    'border-white',
+    'ring-white',
+    'hover:bg-white',
+    'hover:text-white',
+    'bg-black',
+    'text-black',
+    'border-black',
+    'ring-black',
+    'hover:bg-black',
+    'hover:text-black',
+    {
+      pattern:
+        /(bg|text|border|ring|to|from)-(white|black|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)?/,
+      variants: ['hover', 'focus', 'active']
+    }
+  ],
+  theme: { extend: {} },
+  plugins: []
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

package/ui-library/components/Accordion.vue

@@ -0,0 +1,118 @@
+<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

@@ -0,0 +1,121 @@
+<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

@@ -0,0 +1,116 @@
+<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>