windly-ui 1.0.2 → 1.0.3

package/dist/runtime/components/Button.vue

@@ -0,0 +1,125 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed } from "vue";
+import { useUiClasses } from "./useUiClasses";
+import { uiProps } from "./uiProps";
+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
+});
+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]} ${sizeClass[size.value]}`;
+  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]}` : ` ${paddingClass.default[size.value]}`;
+  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}` : ""}`;
+});
+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;
+});
+function onClick() {
+  if (!loading.value && !disable.value && !props.to) {
+    emit("click");
+  }
+}
+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/dist/runtime/components/Button.vue.d.ts

@@ -0,0 +1,199 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unelevated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stacked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    gradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color2: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconColor: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unelevated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stacked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    gradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color2: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconColor: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    dense: boolean;
+    label: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    icon: string;
+    to: string | Record<string, any>;
+    outline: boolean;
+    flat: boolean;
+    unelevated: boolean;
+    stacked: boolean;
+    gradient: boolean;
+    color2: string;
+    iconColor: string;
+    iconPosition: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,83 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    dense: boolean;
+    color: string;
+    borderColor: string;
+    flat: boolean;
+    square: boolean;
+    bordered: boolean;
+    width: string;
+}, {}, {}, {}, 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/Card.vue

@@ -0,0 +1,71 @@
+<script setup>
+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) => val.startsWith("#");
+const cardStyle = computed(() => {
+  const style = {
+    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/dist/runtime/components/Card.vue.d.ts

@@ -0,0 +1,83 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    dense: boolean;
+    color: string;
+    borderColor: string;
+    flat: boolean;
+    square: boolean;
+    bordered: boolean;
+    width: string;
+}, {}, {}, {}, 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;
+    };
+};