windly-ui 1.0.1 → 1.0.2

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>

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>

package/ui-library/components/Card.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-import { computed } from 'vue'
-
-const props = defineProps({
-  flat: { type: Boolean, default: false },
-  square: { type: Boolean, default: false },
-  dense: { type: Boolean, default: false },
-  bordered: { type: Boolean, default: true },
-
-  color: { type: String, default: 'white' },
-  borderColor: { type: String, default: 'gray-200' },
-
-  width: { type: String, default: '100%' },
-})
-
-const isHex = (val: string) => val.startsWith('#')
-
-const cardStyle = computed(() => {
-  const style: Record<string, string> = {
-    width: props.width,
-    maxWidth: '80vw',
-  }
-
-  if (isHex(props.color)) {
-    style.backgroundColor = props.color
-  }
-
-  if (props.bordered && isHex(props.borderColor)) {
-    style.borderColor = props.borderColor
-  }
-
-  return style
-})
-
-const cardClass = computed(() => [
-  'transition-shadow duration-300',
-  props.flat ? 'shadow-none' : 'shadow-md',
-  props.square ? 'rounded-none' : 'rounded-md',
-  props.bordered ? 'border' : '',
-  !isHex(props.borderColor) && props.bordered
-    ? `border-${props.borderColor}`
-    : '',
-  !isHex(props.color) ? `bg-${props.color}` : '',
-])
-
-const sectionPadding = computed(() =>
-  props.dense ? 'p-0' : 'p-4'
-)
-</script>
-
-<template>
-  <div
-    :class="cardClass"
-    :style="cardStyle"
-    v-bind="$attrs"
-  >
-    <!-- Header -->
-    <div
-      v-if="$slots.header"
-      :class="sectionPadding"
-      class="border-b border-gray-200"
-    >
-      <slot name="header" />
-    </div>
-
-    <!-- Content -->
-    <div :class="sectionPadding">
-      <slot />
-    </div>
-
-    <!-- Footer -->
-    <div
-      v-if="$slots.footer"
-      :class="sectionPadding"
-      class="border-t border-gray-200"
-    >
-      <slot name="footer" />
-    </div>
-  </div>
-</template>

package/ui-library/components/Checkbox.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
-import { computed } from 'vue'
-import { useUiClasses } from './useUiClasses'
-import { uiProps } from './uiProps'
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: any): void
-}>()
-
-const props = defineProps({
-  modelValue: { required: true },
-
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-
-  trueValue: { default: true },
-  falseValue: { default: false },
-  intermediateValue: { default: null },
-
-  checkedIcon: { type: String, default: 'check' },
-  uncheckedIcon: { type: String, default: null },
-  intermediateIcon: { type: String, default: 'remove' },
-
-  checkedColor: { type: String, default: '' },
-  uncheckedColor: { type: String, default: 'gray-400' },
-
-  dense: { type: Boolean, default: false },
-
-  ...uiProps,
-})
-
-const {
-  disable,
-  color,
-  size,
-  rounded,
-  roundedClass,
-} = useUiClasses(props)
-
-const isChecked = computed(
-  () => props.modelValue === props.trueValue
-)
-
-const isIntermediate = computed(
-  () => props.modelValue === props.intermediateValue
-)
-
-const boxSizeClass = computed(() => {
-  const map = {
-    sm: 'w-4 h-4',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6',
-  } as const
-  
-  return map[size.value as keyof typeof map]
-})
-
-const labelSizeClass = computed(() => {
-  const map = {
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-xl',
-  } as const
-  
-  return map[size.value as keyof typeof map]
-})
-
-const boxColorClass = computed(() => {
-  if (isChecked.value) {
-    return `bg-${props.checkedColor || color.value} border-${props.checkedColor || color.value}`
-  }
-
-  if (isIntermediate.value) {
-    return `bg-${color.value} border-${color.value}`
-  }
-
-  return `bg-transparent border-${props.uncheckedColor}`
-})
-
-const containerClass = computed(() =>
-  `
-  inline-flex items-center gap-2
-  ${disable.value ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
-  `
-)
-
-function toggle() {
-  if (disable.value) return
-
-  if (isChecked.value || isIntermediate.value) {
-    emit('update:modelValue', props.falseValue)
-  } else {
-    emit('update:modelValue', props.trueValue)
-  }
-}
-</script>
-<template>
-  <label
-    :class="containerClass"
-    role="checkbox"
-    :aria-checked="isIntermediate ? 'mixed' : isChecked"
-  >
-    <input
-      type="checkbox"
-      class="hidden"
-      :name="name"
-      :disabled="disable"
-      @change="toggle"
-    />
-
-    <span
-      :class="[
-        'flex items-center justify-center border transition-all duration-200 p-2',
-        boxSizeClass,
-        roundedClass[rounded as keyof typeof roundedClass],
-        boxColorClass,
-      ]"
-      @click.prevent="toggle"
-    >
-      <i
-        v-if="isChecked && checkedIcon"
-        :class="labelSizeClass"
-        class="material-icons text-white"
-      >
-        {{ checkedIcon }}
-      </i>
-      <i
-        v-else-if="isIntermediate && intermediateIcon"
-        :class="labelSizeClass"
-        class="material-icons text-white"
-      >
-        {{ intermediateIcon }}
-      </i>
-      <i
-        v-else-if="uncheckedIcon"
-        :class="labelSizeClass"
-        class="material-icons text-gray-400"
-      >
-        {{ uncheckedIcon }}
-      </i>
-    </span>
-    <span v-if="label" class="select-none" :class="labelSizeClass">
-      {{ label }}
-    </span>
-  </label>
-</template>

package/ui-library/components/CodeBlock.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { ref, useSlots, computed, isVNode } from 'vue'
-
-defineProps<{
-    title?: string
-}>()
-
-const activeTab = ref('example')
-const slots = useSlots()
-
-import type { VNode } from 'vue'
-
-function stringifyProps(props: unknown): string {
-    if (!props || typeof props !== 'object') {
-        return ''
-    }
-
-    return Object.entries(props as Record<string, any>)
-        .filter(([key]) => !key.startsWith('on')) // 🔥 KEY FIX
-        .map(([key, value]) => {
-            if (value === true) return key
-            if (value === false || value == null) return ''
-            return `${key}="${String(value)}"`
-        })
-        .filter(Boolean)
-        .join(' ')
-}
-
-function renderVNode(vnode: VNode): string {
-    if (typeof vnode.children === 'string') {
-        return vnode.children
-    }
-
-    if (vnode.type === Symbol.for('v-fgt')) {
-        return (vnode.children as VNode[])
-            .map(renderVNode)
-            .join('')
-    }
-
-    if (typeof vnode.type === 'object') {
-        const typeAny = vnode.type as any
-        const name = typeAny.__name || typeAny.name || typeAny.displayName || 'Component'
-        const props = stringifyProps(vnode.props as any)
-        return `<${name}${props ? ' ' + props : ''} />`
-    }
-
-    if (typeof vnode.type === 'string') {
-        const children = Array.isArray(vnode.children)
-            ? vnode.children
-                  .map(child => (isVNode(child) ? renderVNode(child) : (typeof child === 'string' ? child : '')))
-                  .join('')
-            : (typeof vnode.children === 'string' ? vnode.children : '')
-        return `<${vnode.type}>${children}</${vnode.type}>`
-    }
-
-    return ''
-}
-
-const slotCode = computed(() => {
-    const vnodes = slots.default?.() || []
-    return vnodes.map(renderVNode).join('')
-})
-
-const buttonIcon = ref('content_copy')
-
-const copyCode = async () => {
-    await navigator.clipboard.writeText(slotCode.value)
-
-    buttonIcon.value = 'check'
-    setTimeout(() => {
-        buttonIcon.value = 'content_copy'
-    }, 2000)
-}
-</script>
-<template>
-    <div class="border rounded-lg bg-white overflow-hidden">
-        <!-- Header -->
-        <div class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
-            <h3 v-if="title" class="font-medium text-gray-700">
-                {{ title }}
-            </h3>
-
-            <UIButton flat :icon="buttonIcon" size="sm" class="text-gray-600" @click="copyCode" />
-        </div>
-
-        <!-- Tabs -->
-        <UITabs v-model="activeTab">
-            <UITabPanel name="example" label="Example">
-                <div class="p-4">
-                    <slot />
-                </div>
-            </UITabPanel>
-
-            <UITabPanel name="code" label="Code">
-                <pre class="p-4 bg-gray-900 text-gray-100 text-sm overflow-x-auto"><code>{{ slotCode }}</code></pre>
-            </UITabPanel>
-        </UITabs>
-    </div>
-</template>