windly-ui 1.0.1 → 1.0.3

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

@@ -0,0 +1,46 @@
+interface StepItem {
+    label: string;
+    name?: string;
+    icon?: string;
+    iconColor?: string;
+}
+type Step = string | StepItem;
+type __VLS_Props = {
+    steps: Step[];
+    modelValue?: number;
+    vertical?: boolean;
+    completedColor?: string;
+    activeColor?: string;
+    inactiveColor?: string;
+    connectorCompletedColor?: string;
+    connectorInactiveColor?: string;
+    inactiveSteps?: number[];
+};
+declare var __VLS_1: {
+    step: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    modelValue: number;
+    activeColor: string;
+    vertical: boolean;
+    completedColor: string;
+    inactiveColor: string;
+    connectorCompletedColor: string;
+    connectorInactiveColor: string;
+    inactiveSteps: number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/TabPanel.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    name: string;
+    label: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/TabPanel.vue

@@ -0,0 +1,21 @@
+<template>
+    <div v-show="isActive">
+        <slot />
+    </div>
+</template>
+
+<script setup>
+import { inject, computed, onMounted } from "vue";
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, required: true }
+});
+const tabs = inject("tabs");
+onMounted(() => {
+  tabs?.registerTab({
+    name: props.name,
+    label: props.label
+  });
+});
+const isActive = computed(() => tabs?.modelValue.value === props.name);
+</script>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    name: string;
+    label: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/Table.d.vue.ts

@@ -0,0 +1,40 @@
+type Separator = "none" | "horizontal" | "vertical" | "cell";
+type Rounded = "none" | "sm" | "md" | "lg" | "xl";
+type __VLS_Props = {
+    flat?: boolean;
+    bordered?: boolean;
+    striped?: boolean;
+    dense?: boolean;
+    hover?: boolean;
+    rounded?: Rounded;
+    separator?: Separator;
+    borderColor?: string;
+    bgColor?: string;
+};
+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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hover: boolean;
+    dense: boolean;
+    rounded: Rounded;
+    borderColor: string;
+    separator: Separator;
+    flat: boolean;
+    bordered: boolean;
+    bgColor: string;
+    striped: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/Table.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  flat: { type: Boolean, required: false, default: false },
+  bordered: { type: Boolean, required: false, default: false },
+  striped: { type: Boolean, required: false, default: false },
+  dense: { type: Boolean, required: false, default: false },
+  hover: { type: Boolean, required: false, default: true },
+  rounded: { type: String, required: false, default: "md" },
+  separator: { type: String, required: false, default: "horizontal" },
+  borderColor: { type: String, required: false, default: "border-gray-200 dark:border-gray-700" },
+  bgColor: { type: String, required: false, default: "bg-white dark:bg-gray-900" }
+});
+const roundedClass = computed(() => {
+  const map = {
+    none: "",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl"
+  };
+  return map[props.rounded];
+});
+const wrapperClass = computed(() => [
+  "w-full overflow-x-auto",
+  roundedClass.value,
+  props.bordered ? `border ${props.borderColor}` : "",
+  props.flat ? "shadow-none" : "shadow-sm",
+  props.bgColor
+]);
+const separatorClass = computed(() => {
+  switch (props.separator) {
+    case "vertical":
+      return [
+        "[&_th]:border-r",
+        "[&_td]:border-r",
+        props.borderColor
+      ];
+    case "cell":
+      return [
+        "[&_th]:border",
+        "[&_td]:border",
+        props.borderColor
+      ];
+    case "none":
+      return [];
+    case "horizontal":
+    default:
+      return [
+        "[&_tr]:border-b",
+        props.borderColor
+      ];
+  }
+});
+const tableClass = computed(() => [
+  "w-full border-collapse",
+  separatorClass.value
+]);
+const headerClass = computed(() => [
+  "bg-gray-50 dark:bg-gray-800"
+]);
+const bodyClass = computed(() => [
+  props.striped ? "[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800/40" : "",
+  props.hover ? "[&_tr:hover]:bg-gray-100 dark:[&_tr:hover]:bg-gray-700" : "",
+  props.dense ? "[&_td]:py-2 [&_th]:py-2" : "[&_td]:py-3 [&_th]:py-3"
+]);
+const footerClass = computed(() => [
+  "bg-gray-50 dark:bg-gray-900"
+]);
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <table :class="tableClass">
+      <thead
+        v-if="$slots.header"
+        :class="headerClass"
+      >
+        <slot name="header" />
+      </thead>
+      <tbody :class="bodyClass">
+        <slot />
+      </tbody>
+      <tfoot
+        v-if="$slots.footer"
+        :class="footerClass"
+      >
+        <slot name="footer" />
+      </tfoot>
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+type Separator = "none" | "horizontal" | "vertical" | "cell";
+type Rounded = "none" | "sm" | "md" | "lg" | "xl";
+type __VLS_Props = {
+    flat?: boolean;
+    bordered?: boolean;
+    striped?: boolean;
+    dense?: boolean;
+    hover?: boolean;
+    rounded?: Rounded;
+    separator?: Separator;
+    borderColor?: string;
+    bgColor?: string;
+};
+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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hover: boolean;
+    dense: boolean;
+    rounded: Rounded;
+    borderColor: string;
+    separator: Separator;
+    flat: boolean;
+    bordered: boolean;
+    bgColor: string;
+    striped: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/Tabs.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    modelValue: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/Tabs.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, reactive, watch, nextTick, provide, computed, onMounted } from "vue";
+const props = defineProps({
+  modelValue: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const tabs = ref([]);
+const tabRefs = ref([]);
+const tabsEl = ref(null);
+const indicatorStyle = ref({
+  width: "0px",
+  transform: "translateX(0px)"
+});
+function updateIndicator(index) {
+  const tab = tabRefs.value[index];
+  if (!tab || !tabsEl.value) return;
+  indicatorStyle.value = {
+    width: `${tab.offsetWidth}px`,
+    transform: `translateX(${tab.offsetLeft}px)`
+  };
+}
+function setActive(name, index) {
+  emit("update:modelValue", name);
+  nextTick(() => updateIndicator(index));
+}
+function registerTab(tab) {
+  tabs.value.push(tab);
+}
+onMounted(() => {
+  watch(
+    () => props.modelValue,
+    async () => {
+      await nextTick();
+      const index = tabs.value.findIndex((t) => t.name === props.modelValue);
+      if (index !== -1) updateIndicator(index);
+    },
+    { immediate: true }
+  );
+});
+provide("tabs", {
+  modelValue: computed(() => props.modelValue),
+  registerTab
+});
+</script>
+
+<template>
+    <!-- Tabs Header -->
+    <div ref="tabsEl" class="relative flex border-b bg-gray-100">
+        <span class="absolute bottom-0 h-0.5 bg-blue-600 transition-all duration-300 ease-out"
+            :style="indicatorStyle" />
+
+        <button v-for="(tab, index) in tabs" :key="tab.name" :ref="(el) => tabRefs[index] = el"
+            @click="setActive(tab.name, index)" class="relative px-4 py-2 text-sm font-medium transition-colors" :class="modelValue === tab.name ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'">
+            {{ tab.label }}
+        </button>
+    </div>
+
+    <!-- Content -->
+    <div class="relative">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    modelValue: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/Textarea.d.vue.ts

@@ -0,0 +1,208 @@
+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";
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoGrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    hint: {
+        type: StringConstructor;
+        default: string;
+    };
+    showWordCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCharCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxlength: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...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";
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoGrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    hint: {
+        type: StringConstructor;
+        default: string;
+    };
+    showWordCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCharCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxlength: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    label: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    placeholder: string;
+    readonly: boolean;
+    error: boolean;
+    errorMessage: string;
+    hint: string;
+    maxlength: number;
+    rows: number;
+    maxRows: number;
+    autoGrow: boolean;
+    showWordCount: boolean;
+    showCharCount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;