windly-ui 1.0.1 → 1.0.2

package/ui-library/components/Tooltip.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'UITooltip',
-  inheritAttrs: false,
-})
-
-import { computed, ref } from 'vue'
-
-type TooltipPlacement =
-  | 'top'
-  | 'right'
-  | 'bottom'
-  | 'left'
-
-const props = defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  placement: {
-    type: String as () => TooltipPlacement,
-    default: 'top',
-
-    validator: (v: string) =>
-      ['top', 'right', 'bottom', 'left'].includes(v),
-  },
-  arrow: {
-    type: Boolean,
-    default: true,
-  },
-  color: {
-    type: String,
-    default: 'gray-800',
-  },
-  textColor: {
-    type: String,
-    default: 'white',
-  },
-})
-
-const baseClasses = computed(() => ('px-3 py-2 text-sm rounded-lg shadow-lg whitespace-nowrap'))
-
-const visible = ref(false)
-
-const isHex = (val: string) => val.startsWith('#')
-
-const showTooltip = () => {
-  visible.value = true
-}
-
-const hideTooltip = () => {
-  visible.value = false
-}
-
-const tooltipStyle = computed(() => {
-  const style: Record<string, string> = {}
-
-  if (isHex(props.color)) {
-    style.backgroundColor = props.color
-  }
-
-  if (isHex(props.textColor)) {
-    style.color = props.textColor
-  }
-
-  return style
-})
-
-const tooltipClasses = computed(() => [
-  baseClasses.value,
-
-  !isHex(props.color)
-    ? `bg-${props.color}`
-    : '',
-
-  !isHex(props.textColor)
-    ? `text-${props.textColor}`
-    : '',
-])
-
-const placementClasses = computed(() => {
-  switch (props.placement) {
-    case 'top':
-      return 'bottom-full left-1/2 -translate-x-1/2 mb-3'
-
-    case 'right':
-      return 'left-full top-1/2 -translate-y-1/2 ml-3'
-
-    case 'bottom':
-      return 'top-full left-1/2 -translate-x-1/2 mt-3'
-
-    case 'left':
-      return 'right-full top-1/2 -translate-y-1/2 mr-3'
-
-    default:
-      return ''
-  }
-})
-
-const arrowClasses = computed(() => {
-  switch (props.placement) {
-    case 'top':
-      return 'left-1/2 -translate-x-1/2 bottom-0 -mb-3.5'
-
-    case 'right':
-      return 'top-1/2 -translate-y-1/2 left-0 -ml-3.5'
-
-    case 'bottom':
-      return 'left-1/2 -translate-x-1/2 top-0 -mt-3.5'
-
-    case 'left':
-      return 'top-1/2 -translate-y-1/2 right-0 -mr-3.5'
-
-    default:
-      return ''
-  }
-})
-
-const arrowIcon = computed(() => {
-  switch (props.placement) {
-    case 'top':
-      return 'arrow_drop_down'
-
-    case 'right':
-      return 'arrow_left'
-
-    case 'bottom':
-      return 'arrow_drop_up'
-
-    case 'left':
-      return 'arrow_right'
-
-    default:
-      return ''
-  }
-})
-
-const arrowStyle = computed(() => { 
-  const style: Record<string, string> = {} 
-  if (isHex(props.color)) 
-    style.color = props.color
-  return style 
-})
-</script>
-
-<template>
-  <div
-    class="relative inline-block"
-    tabindex="0"
-    @mouseenter="showTooltip"
-    @mouseleave="hideTooltip"
-    @focus="showTooltip"
-    @blur="hideTooltip"
-  >
-    <!-- Trigger -->
-    <slot />
-
-    <!-- Tooltip -->
-    <transition name="fade">
-      <div
-        v-if="visible"
-        role="tooltip"
-        class="absolute z-50"
-        :class="[tooltipClasses, placementClasses]"
-        :style="tooltipStyle"
-        v-bind="$attrs"
-      >
-        <!-- Arrow -->
-        <i
-          v-if="arrow"
-          class="material-icons tooltip-arrow"
-          :class="[ arrowClasses, !isHex(props.color) ? `text-${props.color}` : '', ]" 
-          :style="arrowStyle"
-        >
-          {{ arrowIcon }}
-        </i>
-
-        {{ text }}
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-</style>

package/ui-library/components/plugin.ts

@@ -1,8 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-import Button from './Button.vue'
-import Accordian from './Accordion.vue'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component('UIButton', Button)
-  nuxtApp.vueApp.component('UIAccordian', Accordian)
-})

package/ui-library/components/uiProps.ts

@@ -1,11 +0,0 @@
-export const uiProps = {
-  contentClass: { type: String, default: "" },
-  contentStyle: { type: String, default: "" },
-  textColor: { type: String, default: "" },
-  disable: { type: Boolean, default: false },
-  loading: { type: Boolean, default: false },
-  color: { type: String, default: "blue-900" },
-  rounded: { type: String, default: "md" },
-  size: { type: String, default: "md" },
-  iconSize: { type: String, default: "lg" },
-} as const;

package/ui-library/components/useUiClasses.ts

@@ -1,159 +0,0 @@
-import { computed, toRefs } from "vue";
-import type { ExtractPropTypes } from "vue";
-import { uiProps } from "./uiProps";
-
-type UiProps = ExtractPropTypes<typeof uiProps>;
-
-export function useUiClasses(props: Partial<UiProps>) {
-  const safeProps = {
-    contentClass: "",
-    contentStyle: "",
-    textColor: "",
-    disable: false,
-    loading: false,
-    color: "",
-    rounded: "md",
-    size: "md",
-    iconSize: "md",
-    ...props,
-  };
-
-  const {
-    contentClass,
-    contentStyle,
-    textColor,
-    disable,
-    loading,
-    color,
-    rounded,
-    size,
-    iconSize,
-  } = toRefs(safeProps);
-
-  // Classes maps
-  const roundedClass = {
-    none: "rounded-none",
-    xs: "rounded-xs",
-    sm: "rounded-sm",
-    md: "rounded",
-    lg: "rounded-lg",
-    xl: "rounded-xl",
-    full: "rounded-full",
-  };
-
-  const sizeClass = {
-    sm: "text-xs",
-    md: "text-base",
-    lg: "text-xl",
-  };
-
-  const iconSizeClasses = {
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-    xl: "text-xl",
-  };
-
-  // Computed for color class
-  const colorClass = computed(() => {
-    if (!color.value) return "";
-    return color.value.includes("#") ? `[${color.value}]` : color.value;
-  });
-
-  // Computed for content class with ! prefix
-  const computedContentClass = computed(() => {
-    if (!contentClass.value) return "";
-    return contentClass.value
-      .split(" ")
-      .map((cls: string) => (cls.startsWith("!") ? cls : `!${cls}`))
-      .join(" ");
-  });
-
-  function isTailwindColorDark(color: string): boolean {
-    const match = color.match(/-(\d{2,3})$/);
-    if (!match) return false;
-    return Number(match[1]) >= 400;
-  }
-
-  function isHexColorDark(hex: string): boolean {
-    let c = hex.replace("#", "");
-
-    if (c.length === 3) {
-      c = c.split("").map(x => x + x).join("");
-    }
-
-    const r = parseInt(c.substring(0, 2), 16);
-    const g = parseInt(c.substring(2, 4), 16);
-    const b = parseInt(c.substring(4, 6), 16);
-
-    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
-    return luminance < 140;
-  }
-
-  function isHex(color: string) {
-    return /^#([0-9A-F]{3}){1,2}$/i.test(color);
-  }
-
-  function isTailwindColor(color: string) {
-    return /^[a-z]+-\d{2,3}$/.test(color);
-  }
-
-  const isColorDark = (color: string): boolean => {
-    if (!color) return false;
-    return color.startsWith("#")
-      ? isHexColorDark(color)
-      : isTailwindColorDark(color);
-  };
-
-  function shadeTailwind(color: string, delta = 100) {
-    const [name, shade] = color.split("-");
-    const nextShade = Math.min(900, Math.max(100, Number(shade) + delta));
-    return `${name}-${nextShade}`;
-  }
-
-  function shadeHex(hex: string, amount = -10) {
-    let c = hex.substring(1);
-    if (c.length === 3) {
-      c = c.split("").map(x => x + x).join("");
-    }
-
-    const num = parseInt(c, 16);
-    let r = (num >> 16) & 255;
-    let g = (num >> 8) & 255;
-    let b = num & 255;
-
-    r = Math.min(255, Math.max(0, r + amount));
-    g = Math.min(255, Math.max(0, g + amount));
-    b = Math.min(255, Math.max(0, b + amount));
-
-    return `#${((1 << 24) + (r << 16) + (g << 8) + b)
-      .toString(16)
-      .slice(1)}`;
-  }
-
-  return {
-    // props
-    contentClass,
-    contentStyle,
-    textColor,
-    disable,
-    loading,
-    color,
-    rounded,
-    size,
-    iconSize,
-    // class maps
-    roundedClass,
-    sizeClass,
-    iconSizeClasses,
-    // computed
-    colorClass,
-    computedContentClass,
-    isColorDark,
-    isHex,
-    isTailwindColor,
-    shadeTailwind,
-    shadeHex
-  };
-}

package/ui-library/module.ts

@@ -1,20 +0,0 @@
-import { defineNuxtModule, addComponentsDir, createResolver } from '@nuxt/kit'
-
-export default defineNuxtModule({
-  meta: {
-    name: 'ui-library',
-    configKey: 'uiLibrary'
-  },
-  setup(_, nuxt) {
-    const resolver = createResolver(import.meta.url)
-
-    // Auto-register all components from the ui-library/components folder
-    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
-    })
-  }
-})