windly-ui 1.0.1 → 1.0.3

package/dist/runtime/components/Tooltip.vue

@@ -0,0 +1,144 @@
+<script setup>
+defineOptions({
+  name: "UITooltip",
+  inheritAttrs: false
+});
+import { computed, ref } from "vue";
+const props = defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+  placement: {
+    type: String,
+    default: "top",
+    validator: (v) => ["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) => val.startsWith("#");
+const showTooltip = () => {
+  visible.value = true;
+};
+const hideTooltip = () => {
+  visible.value = false;
+};
+const tooltipStyle = computed(() => {
+  const style = {};
+  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 = {};
+  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 .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.tooltip-arrow{font-size:1.5rem;line-height:1;position:absolute}
+</style>

package/dist/runtime/components/Tooltip.vue.d.ts

@@ -0,0 +1,63 @@
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    placement: {
+        type: () => TooltipPlacement;
+        default: string;
+        validator: (v: string) => any;
+    };
+    arrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    textColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    placement: {
+        type: () => TooltipPlacement;
+        default: string;
+        validator: (v: string) => any;
+    };
+    arrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    textColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    textColor: string;
+    color: string;
+    placement: TooltipPlacement;
+    arrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/uiProps.d.ts

@@ -0,0 +1,38 @@
+export declare const uiProps: {
+    readonly contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    readonly rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    readonly size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    readonly iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+};

package/{ui-library/components/uiProps.ts → dist/runtime/components/uiProps.js}

@@ -7,5 +7,5 @@ export const uiProps = {
   color: { type: String, default: "blue-900" },
   rounded: { type: String, default: "md" },
   size: { type: String, default: "md" },
-  iconSize: { type: String, default: "lg" },
-} as const;
+  iconSize: { type: String, default: "lg" }
+};

package/dist/runtime/components/useUiClasses.d.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes } from "vue";
+import { uiProps } from "./uiProps.js";
+type UiProps = ExtractPropTypes<typeof uiProps>;
+export declare function useUiClasses(props: Partial<UiProps>): {
+    contentClass: import("vue").Ref<string, string>;
+    contentStyle: import("vue").Ref<string, string>;
+    textColor: import("vue").Ref<string, string>;
+    disable: import("vue").Ref<boolean, boolean>;
+    loading: import("vue").Ref<boolean, boolean>;
+    color: import("vue").Ref<string, string>;
+    rounded: import("vue").Ref<string, string>;
+    size: import("vue").Ref<string, string>;
+    iconSize: import("vue").Ref<string, string>;
+    roundedClass: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    sizeClass: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    iconSizeClasses: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    colorClass: import("vue").ComputedRef<string>;
+    computedContentClass: import("vue").ComputedRef<string>;
+    isColorDark: (color: string) => boolean;
+    isHex: (color: string) => boolean;
+    isTailwindColor: (color: string) => boolean;
+    shadeTailwind: (color: string, delta?: number) => string;
+    shadeHex: (hex: string, amount?: number) => string;
+};
+export {};

package/{ui-library/components/useUiClasses.ts → dist/runtime/components/useUiClasses.js}

@@ -1,10 +1,5 @@
 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>) {
+export function useUiClasses(props) {
   const safeProps = {
     contentClass: "",
     contentStyle: "",
@@ -15,9 +10,8 @@ export function useUiClasses(props: Partial<UiProps>) {
     rounded: "md",
     size: "md",
     iconSize: "md",
-    ...props,
+    ...props
   };
-
   const {
     contentClass,
     contentStyle,
@@ -27,10 +21,8 @@ export function useUiClasses(props: Partial<UiProps>) {
     color,
     rounded,
     size,
-    iconSize,
+    iconSize
   } = toRefs(safeProps);
-
-  // Classes maps
   const roundedClass = {
     none: "rounded-none",
     xs: "rounded-xs",
@@ -38,100 +30,73 @@ export function useUiClasses(props: Partial<UiProps>) {
     md: "rounded",
     lg: "rounded-lg",
     xl: "rounded-xl",
-    full: "rounded-full",
+    full: "rounded-full"
   };
-
   const sizeClass = {
     sm: "text-xs",
     md: "text-base",
-    lg: "text-xl",
+    lg: "text-xl"
   };
-
   const iconSizeClasses = {
     xs: "text-xs",
     sm: "text-sm",
     md: "text-base",
     lg: "text-lg",
-    xl: "text-xl",
+    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(" ");
+    return contentClass.value.split(" ").map((cls) => cls.startsWith("!") ? cls : `!${cls}`).join(" ");
   });
-
-  function isTailwindColorDark(color: string): boolean {
-    const match = color.match(/-(\d{2,3})$/);
+  function isTailwindColorDark(color2) {
+    const match = color2.match(/-(\d{2,3})$/);
     if (!match) return false;
     return Number(match[1]) >= 400;
   }
-
-  function isHexColorDark(hex: string): boolean {
+  function isHexColorDark(hex) {
     let c = hex.replace("#", "");
-
     if (c.length === 3) {
-      c = c.split("").map(x => x + x).join("");
+      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 isHex(color2) {
+    return /^#([0-9A-F]{3}){1,2}$/i.test(color2);
   }
-
-  function isTailwindColor(color: string) {
-    return /^[a-z]+-\d{2,3}$/.test(color);
+  function isTailwindColor(color2) {
+    return /^[a-z]+-\d{2,3}$/.test(color2);
   }
-
-  const isColorDark = (color: string): boolean => {
-    if (!color) return false;
-    return color.startsWith("#")
-      ? isHexColorDark(color)
-      : isTailwindColorDark(color);
+  const isColorDark = (color2) => {
+    if (!color2) return false;
+    return color2.startsWith("#") ? isHexColorDark(color2) : isTailwindColorDark(color2);
   };
-
-  function shadeTailwind(color: string, delta = 100) {
-    const [name, shade] = color.split("-");
+  function shadeTailwind(color2, delta = 100) {
+    const [name, shade] = color2.split("-");
     const nextShade = Math.min(900, Math.max(100, Number(shade) + delta));
     return `${name}-${nextShade}`;
   }
-
-  function shadeHex(hex: string, amount = -10) {
+  function shadeHex(hex, amount = -10) {
     let c = hex.substring(1);
     if (c.length === 3) {
-      c = c.split("").map(x => x + x).join("");
+      c = c.split("").map((x) => x + x).join("");
     }
-
     const num = parseInt(c, 16);
-    let r = (num >> 16) & 255;
-    let g = (num >> 8) & 255;
+    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 `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
   }
-
   return {
     // props
     contentClass,

package/dist/runtime/composables/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/composables/plugin.js

@@ -0,0 +1,3 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((nuxtApp) => {
+});

package/dist/runtime/tailwind-color.d.ts

@@ -0,0 +1,2 @@
+declare const tailwindColor: string[];
+export default tailwindColor;