windly-ui 1.0.0 → 1.0.2

package/app/pages/index.vue

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

@@ -1,19 +0,0 @@
-// 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/public/robots.txt

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

package/tailwind.config.ts

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

@@ -1,18 +0,0 @@
-{
-  // 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

@@ -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>

package/ui-library/components/Breadcrumbs.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-
-type BreadcrumbItem = {
-  label: string
-  icon?: string
-  caption?: string
-  to?: string | object
-  href?: string
-  target?: string
-  tag?: string
-  exact?: boolean
-  replace?: boolean
-  activeClass?: string
-  exactActiveClass?: string
-  disable?: boolean
-}
-
-const props = defineProps({
-  items: {
-    type: Array as () => BreadcrumbItem[],
-    required: true,
-  },
-  separator: {
-    type: String,
-    default: '/',
-  },
-  gutter: {
-    type: String,
-    default: '0.5rem',
-  },
-  align: {
-    type: String,
-    default: 'start', // start | center | end
-  },
-  activeColor: {
-    type: String,
-    default: 'primary',
-  },
-  separatorColor: {
-    type: String,
-    default: 'grey-6',
-  },
-})
-
-const route = useRoute()
-
-const alignmentClass = computed(() => {
-  switch (props.align) {
-    case 'center':
-      return 'justify-center'
-    case 'end':
-      return 'justify-end'
-    default:
-      return 'justify-start'
-  }
-})
-
-function resolveTag(item: BreadcrumbItem) {
-  if (item.disable) return item.tag || 'span'
-  if (item.href) return 'a'
-  if (item.to) return RouterLink
-  return item.tag || 'span'
-}
-
-function resolveProps(item: BreadcrumbItem) {
-  if (item.href) {
-    return {
-      href: item.href,
-      target: item.target,
-    }
-  }
-
-  if (item.to) {
-    return {
-      to: item.to,
-      exact: item.exact,
-      replace: item.replace,
-      activeClass: item.activeClass,
-      exactActiveClass: item.exactActiveClass,
-    }
-  }
-
-  return {}
-}
-
-function isActive(item: BreadcrumbItem) {
-  if (!item.to) return false
-  return route.path === item.to
-}
-</script>
-
-<template>
-  <nav
-    class="flex items-center"
-    :class="alignmentClass"
-    aria-label="Breadcrumbs"
-  >
-    <template v-for="(item, index) in items" :key="index">
-      <!-- Item -->
-      <component
-        :is="resolveTag(item)"
-        v-bind="resolveProps(item)"
-        class="flex items-center gap-1"
-        :class="[
-          item.disable && 'opacity-50 pointer-events-none',
-          isActive(item) && `text-${activeColor}`,
-        ]"
-      >
-        <span v-if="item.icon && item.icon !== 'none'" class="material-icons">
-          {{ item.icon }}
-        </span>
-
-        <span>{{ item.label }}</span>
-
-        <small
-          v-if="item.caption"
-          class="block text-xs opacity-70"
-        >
-          {{ item.caption }}
-        </small>
-      </component>
-
-      <!-- Separator -->
-      <span
-        v-if="index < items.length - 1"
-        class="select-none"
-        :style="{ marginInline: gutter }"
-        :class="`text-${separatorColor}`"
-      >
-        <slot name="separator">
-          {{ separator }}
-        </slot>
-      </span>
-    </template>
-  </nav>
-</template>