windly-ui 1.0.2 → 1.0.3

package/dist/runtime/components/Toggle.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({
+  name: "UIToggle"
+});
+const props = defineProps({
+  modelValue: { type: [Boolean, String, Number], required: false, default: false },
+  label: { type: String, required: false, default: "" },
+  labelPosition: { type: String, required: false, default: "right" },
+  customClasses: { type: String, required: false, default: "" },
+  trueColor: { type: String, required: false, default: "blue-500" },
+  falseColor: { type: String, required: false, default: "gray-300" },
+  size: { type: String, required: false, default: "medium" },
+  activeValue: { type: [String, Number, Boolean], required: false, default: true },
+  inactiveValue: { type: [String, Number, Boolean], required: false, default: false },
+  activeIcon: { type: String, required: false, default: "" },
+  inactiveIcon: { type: String, required: false, default: "" },
+  disable: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isHex = (val) => {
+  return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+};
+const isActive = computed(
+  () => props.modelValue === props.activeValue
+);
+const toggleSize = computed(() => {
+  switch (props.size) {
+    case "small":
+      return {
+        bg: "w-10 h-5",
+        dot: "w-4 h-4 top-0.5 left-0.5",
+        translate: "translate-x-5"
+      };
+    case "large":
+      return {
+        bg: "w-16 h-9",
+        dot: "w-7 h-7 top-1 left-1",
+        translate: "translate-x-7"
+      };
+    case "medium":
+    default:
+      return {
+        bg: "w-14 h-8",
+        dot: "w-6 h-6 top-1 left-1",
+        translate: "translate-x-6"
+      };
+  }
+});
+const toggleBgClasses = computed(
+  () => [
+    !isHex(props.trueColor) && isActive.value ? `bg-${props.trueColor}` : "",
+    !isHex(props.falseColor) && !isActive.value ? `bg-${props.falseColor}` : ""
+  ]
+);
+const toggleBgStyle = computed(
+  () => {
+    const style = {};
+    if (isActive.value && isHex(props.trueColor)) {
+      style.backgroundColor = props.trueColor;
+    }
+    if (!isActive.value && isHex(props.falseColor)) {
+      style.backgroundColor = props.falseColor;
+    }
+    return style;
+  }
+);
+const toggle = () => {
+  if (props.disable)
+    return;
+  const newValue = isActive.value ? props.inactiveValue : props.activeValue;
+  emit(
+    "update:modelValue",
+    newValue
+  );
+};
+</script>
+
+<template>
+  <div
+    :class="[
+  'toggle-container flex items-center',
+  customClasses
+]"
+    :style="{
+  flexDirection: labelPosition === 'top' || labelPosition === 'bottom' ? 'column' : 'row'
+}"
+  >
+    <!-- Top Label -->
+    <span
+      v-if="
+  label && labelPosition === 'top'
+"
+      class="mb-2 font-medium text-gray-700 dark:text-gray-300"
+    >
+      {{ label }}
+    </span>
+
+    <!-- Left Label -->
+    <span
+      v-if="
+  label && labelPosition === 'left'
+"
+      class="mr-3 font-medium text-gray-700 dark:text-gray-300"
+    >
+      {{ label }}
+    </span>
+
+    <!-- Toggle -->
+    <div
+      :class="[
+  'relative inline-flex items-center cursor-pointer',
+  {
+    'opacity-50 pointer-events-none': disable
+  }
+]"
+      @click="toggle"
+    >
+      <!-- Background -->
+      <span
+        :class="[
+  'block rounded-full transition-colors duration-300 ease-in-out',
+  toggleSize.bg,
+  toggleBgClasses
+]"
+        :style="toggleBgStyle"
+      />
+
+      <!-- Dot -->
+      <span
+        :class="[
+  'toggle-dot absolute rounded-full bg-white transition-transform duration-300 ease-in-out shadow-md hover:glow-effect flex items-center justify-center',
+  toggleSize.dot,
+  {
+    [toggleSize.translate]: isActive
+  }
+]"
+      >
+        <span
+          class="material-icons text-sm"
+        >
+          {{
+            isActive ? activeIcon : inactiveIcon
+          }}
+        </span>
+      </span>
+    </div>
+
+    <!-- Bottom Label -->
+    <span
+      v-if="
+  label && labelPosition === 'bottom'
+"
+      class="mt-2 font-medium text-gray-700 dark:text-gray-300"
+    >
+      {{ label }}
+    </span>
+
+    <!-- Right Label -->
+    <span
+      v-if="
+  label && labelPosition === 'right'
+"
+      class="ml-3 font-medium text-gray-700 dark:text-gray-300"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.toggle-container{-webkit-user-select:none;-moz-user-select:none;user-select:none}.glow-effect{box-shadow:0 0 10px rgba(0,0,0,.15),0 0 10px rgba(0,0,255,.3);transition:box-shadow .3s ease-in-out}.material-icons{color:currentColor;font-size:1rem}
+</style>

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

@@ -0,0 +1,36 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type ToggleSize = 'small' | 'medium' | 'large';
+type __VLS_Props = {
+    modelValue?: boolean | string | number;
+    label?: string;
+    labelPosition?: LabelPosition;
+    customClasses?: string;
+    trueColor?: string;
+    falseColor?: string;
+    size?: ToggleSize;
+    activeValue?: string | number | boolean;
+    inactiveValue?: string | number | boolean;
+    activeIcon?: string;
+    inactiveIcon?: string;
+    disable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {
+    modelValue: boolean | string | number;
+    label: string;
+    disable: boolean;
+    size: ToggleSize;
+    labelPosition: LabelPosition;
+    customClasses: string;
+    trueColor: string;
+    falseColor: string;
+    activeValue: string | number | boolean;
+    inactiveValue: string | number | boolean;
+    activeIcon: string;
+    inactiveIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Tooltip.d.vue.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/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/dist/runtime/components/uiProps.js

@@ -0,0 +1,11 @@
+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" }
+};

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/dist/runtime/components/useUiClasses.js

@@ -0,0 +1,124 @@
+import { computed, toRefs } from "vue";
+export function useUiClasses(props) {
+  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);
+  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"
+  };
+  const colorClass = computed(() => {
+    if (!color.value) return "";
+    return color.value.includes("#") ? `[${color.value}]` : color.value;
+  });
+  const computedContentClass = computed(() => {
+    if (!contentClass.value) return "";
+    return contentClass.value.split(" ").map((cls) => cls.startsWith("!") ? cls : `!${cls}`).join(" ");
+  });
+  function isTailwindColorDark(color2) {
+    const match = color2.match(/-(\d{2,3})$/);
+    if (!match) return false;
+    return Number(match[1]) >= 400;
+  }
+  function isHexColorDark(hex) {
+    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(color2) {
+    return /^#([0-9A-F]{3}){1,2}$/i.test(color2);
+  }
+  function isTailwindColor(color2) {
+    return /^[a-z]+-\d{2,3}$/.test(color2);
+  }
+  const isColorDark = (color2) => {
+    if (!color2) return false;
+    return color2.startsWith("#") ? isHexColorDark(color2) : isTailwindColorDark(color2);
+  };
+  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, 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/dist/runtime/composables/plugin.d.ts

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