windly-ui 1.0.2 → 1.0.4

package/dist/runtime/components/Select.vue

@@ -0,0 +1,271 @@
+<script setup>
+defineOptions({
+  name: "UISelect"
+});
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean], required: false, default: "" },
+  label: { type: String, required: false, default: "" },
+  hint: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "Select..." },
+  filter: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "" },
+  rounded: { type: String, required: false, default: "md" },
+  dense: { type: Boolean, required: false, default: false },
+  width: { type: String, required: false, default: "" },
+  outlined: { type: Boolean, required: false, default: false },
+  borderless: { type: Boolean, required: false, default: false },
+  flat: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false, default: void 0 },
+  options: { type: Array, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const showDropdown = ref(false);
+const searchQuery = ref("");
+const isHex = (val) => val.startsWith("#");
+const roundedMap = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
+const computedClass = computed(() => {
+  let classes = "input block transition-all duration-300";
+  if (props.borderless) {
+    classes += " border-none bg-transparent";
+  } else if (props.outlined) {
+    classes += " border";
+  } else {
+    classes += " border-0 border-b";
+  }
+  classes += ` ${roundedMap[props.rounded] ?? roundedMap.md}`;
+  if (!props.flat) {
+    classes += " shadow-sm";
+  }
+  if (props.disabled) {
+    classes += " opacity-50 cursor-not-allowed";
+  }
+  if (props.readonly) {
+    classes += " pointer-events-none";
+  }
+  switch (props.size) {
+    case "sm":
+      classes += " text-sm";
+      break;
+    case "lg":
+      classes += " text-lg";
+      break;
+    default:
+      classes += " text-base";
+  }
+  if (props.color && !isHex(props.color)) {
+    classes += ` border-${props.color} focus:ring-${props.color}`;
+  }
+  if (props.width && !CSS.supports(
+    "width",
+    props.width
+  )) {
+    classes += ` w-${props.width}`;
+  }
+  if (!props.width) {
+    classes += " w-full";
+  }
+  if (props.modelValue !== "" && props.modelValue !== null && props.modelValue !== void 0) {
+    classes += " has-value";
+  }
+  return classes;
+});
+const computedStyle = computed(() => {
+  const styles = {};
+  if (props.width && CSS.supports(
+    "width",
+    props.width
+  )) {
+    styles.width = props.width;
+  }
+  if (props.color && isHex(props.color)) {
+    styles["--tw-ring-color"] = props.color;
+    styles.borderColor = props.color;
+  }
+  return styles;
+});
+const filteredOptions = computed(() => {
+  const query = searchQuery.value.toLowerCase();
+  return props.options.filter(
+    (option) => option.text.toLowerCase().includes(query)
+  );
+});
+watch(
+  () => props.modelValue,
+  (value) => {
+    const selected = props.options.find(
+      (o) => o.value === value
+    );
+    searchQuery.value = selected?.text ?? "";
+  },
+  {
+    immediate: true
+  }
+);
+function selectOption(option) {
+  searchQuery.value = option.text;
+  emit(
+    "update:modelValue",
+    option.value
+  );
+  showDropdown.value = false;
+}
+function handleChange(event) {
+  const target = event.target;
+  const selected = props.options.find(
+    (option) => String(option.value) === target.value
+  );
+  if (selected) {
+    emit(
+      "update:modelValue",
+      selected.value
+    );
+  }
+}
+function handleBlur() {
+  setTimeout(() => {
+    showDropdown.value = false;
+  }, 150);
+}
+const inputAttrs = computed(() => {
+  const attrs = {};
+  if (props.placeholder)
+    attrs.placeholder = props.placeholder;
+  if (props.disabled)
+    attrs.disabled = props.disabled;
+  if (props.readonly)
+    attrs.readonly = props.readonly;
+  if (props.required)
+    attrs.required = props.required;
+  return attrs;
+});
+</script>
+
+<template>
+  <div
+    class="select-container"
+    :class="{
+  dense: !outlined || dense,
+  [`input-${size}`]: size
+}"
+  >
+    <!-- Filterable Select -->
+    <div
+      v-if="filter"
+      class="relative"
+    >
+      <input
+        v-model="searchQuery"
+        v-bind="inputAttrs"
+        :class="computedClass"
+        :style="computedStyle"
+        @focus="showDropdown = true"
+        @input="showDropdown = true"
+        @blur="handleBlur"
+      />
+
+      <label
+        class="label"
+        :class="
+  color && !isHex(color) ? `text-${color}` : ''
+"
+        :style="
+  color ? {
+    color: isHex(color) ? color : void 0
+  } : {
+    color: '#9ca3af'
+  }
+"
+      >
+        {{ label }}
+      </label>
+
+      <!-- Dropdown -->
+      <ul
+        v-if="showDropdown"
+        class="absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg"
+      >
+        <li
+          v-for="option in filteredOptions"
+          :key="option.value.toString()"
+          class="cursor-pointer px-3 py-2 transition-colors hover:bg-gray-100"
+          @mousedown.prevent="selectOption(option)"
+        >
+          {{ option.text }}
+        </li>
+
+        <li
+          v-if="filteredOptions.length === 0"
+          class="px-3 py-2 text-sm text-gray-500"
+        >
+          No results found
+        </li>
+      </ul>
+    </div>
+
+    <!-- Native Select -->
+    <template v-else>
+      <select
+        :id="id"
+        :value="modelValue"
+        v-bind="inputAttrs"
+        :class="computedClass"
+        :style="computedStyle"
+        @change="handleChange"
+      >
+        <option
+          disabled
+          value=""
+        >
+          {{ placeholder }}
+        </option>
+
+        <option
+          v-for="option in options"
+          :key="option.value.toString()"
+          :value="option.value"
+        >
+          {{ option.text }}
+        </option>
+      </select>
+
+      <label
+        class="label"
+        :class="
+  color && !isHex(color) ? `text-${color}` : ''
+"
+        :style="
+  color ? {
+    color: isHex(color) ? color : void 0
+  } : {
+    color: '#9ca3af'
+  }
+"
+      >
+        {{ label }}
+      </label>
+    </template>
+
+    <p
+      v-if="hint"
+      class="hint-text"
+    >
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.select-container{margin:20px 0 10px;position:relative}.select-container.dense{margin:10px 0}.input{background:transparent;padding:10px;width:100%}.select-container.dense .input{padding:6px 10px}.input:focus{outline:none}select.input{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:2.5rem}.label{left:10px;padding:0 5px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:top .2s ease,font-size .2s ease,color .2s ease,transform .2s ease}.input:-moz-placeholder+.label{left:5px;top:-20px;transform:none;z-index:2}.input.has-value+.label,.input:focus+.label,.input:placeholder-shown+.label,select.input.has-value+.label,select.input:focus+.label{left:5px;top:-20px;transform:none;z-index:2}.select-container.dense .input.has-value+.label,.select-container.dense .input:focus+.label,.select-container.dense select.input.has-value+.label,.select-container.dense select.input:focus+.label{top:-10px}.select-container.input-lg .input.has-value+.label,.select-container.input-lg .input:focus+.label,.select-container.input-lg select.input.has-value+.label,.select-container.input-lg select.input:focus+.label{top:-24px}.select-container.input-sm .label{font-size:14px}.select-container.input-md .label{font-size:16px}.select-container.input-lg .label{font-size:18px}.select-container.input-sm .input.has-value+.label,.select-container.input-sm .input:focus+.label,.select-container.input-sm select.input.has-value+.label,.select-container.input-sm select.input:focus+.label{font-size:12px}.select-container.input-md .input.has-value+.label,.select-container.input-md .input:focus+.label,.select-container.input-md select.input.has-value+.label,.select-container.input-md select.input:focus+.label{font-size:14px}.select-container.input-lg .input.has-value+.label,.select-container.input-lg .input:focus+.label,.select-container.input-lg select.input.has-value+.label,.select-container.input-lg select.input:focus+.label{font-size:16px}.hint-text{color:#6b7280;font-size:12px;margin-left:5px;margin-top:4px}ul{background:#fff;border:1px solid #d1d5db;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);max-height:240px;overflow-y:auto}li{transition:background-color .2s}li:hover{background:#f3f4f6}.dark .label,.dark ul{background:#1f2937}.dark ul{border-color:#374151}.dark li:hover{background:#374151}.dark .hint-text{color:#9ca3af}
+</style>

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

@@ -0,0 +1,51 @@
+interface SelectOption {
+    text: string;
+    value: string | number | boolean;
+}
+type Rounded = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type Size = "sm" | "md" | "lg";
+type __VLS_Props = {
+    modelValue?: string | number | boolean;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    filter?: boolean;
+    size?: Size;
+    color?: string;
+    rounded?: Rounded;
+    dense?: boolean;
+    width?: string;
+    outlined?: boolean;
+    borderless?: boolean;
+    flat?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    id?: string;
+    options: SelectOption[];
+};
+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: string | number | boolean;
+    disabled: boolean;
+    dense: boolean;
+    label: string;
+    filter: boolean;
+    required: boolean;
+    color: string;
+    rounded: Rounded;
+    size: Size;
+    flat: boolean;
+    id: string;
+    placeholder: string;
+    width: string;
+    readonly: boolean;
+    hint: string;
+    outlined: boolean;
+    borderless: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,218 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  steps: { type: Array, required: true },
+  modelValue: { type: Number, required: false, default: 0 },
+  vertical: { type: Boolean, required: false, default: false },
+  completedColor: { type: String, required: false, default: "green-500" },
+  activeColor: { type: String, required: false, default: "blue-500" },
+  inactiveColor: { type: String, required: false, default: "gray-300" },
+  connectorCompletedColor: { type: String, required: false, default: "green-500" },
+  connectorInactiveColor: { type: String, required: false, default: "gray-300" },
+  inactiveSteps: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["update:modelValue"]);
+const currentStep = computed(
+  () => props.modelValue
+);
+const normalizedSteps = computed(
+  () => props.steps.map((step) => {
+    if (typeof step === "string") {
+      return {
+        label: step
+      };
+    }
+    return step;
+  })
+);
+const isHex = (val) => val.startsWith("#");
+const isInactiveStep = (index) => {
+  return props.inactiveSteps.includes(
+    index
+  );
+};
+const stepState = (index) => {
+  if (isInactiveStep(index)) {
+    return "inactive";
+  }
+  if (index < currentStep.value) {
+    return "completed";
+  }
+  if (index === currentStep.value) {
+    return "active";
+  }
+  return "pending";
+};
+const stepClasses = (index) => {
+  const state = stepState(index);
+  switch (state) {
+    case "completed":
+      return [
+        !isHex(
+          props.completedColor
+        ) ? `bg-${props.completedColor}` : "",
+        "text-white"
+      ];
+    case "active":
+      return [
+        !isHex(
+          props.activeColor
+        ) ? `bg-${props.activeColor}` : "",
+        "text-white"
+      ];
+    case "inactive":
+      return [
+        !isHex(
+          props.inactiveColor
+        ) ? `bg-${props.inactiveColor}` : "",
+        "text-gray-500 opacity-60 cursor-not-allowed"
+      ];
+    case "pending":
+    default:
+      return [
+        !isHex(
+          props.inactiveColor
+        ) ? `bg-${props.inactiveColor}` : "",
+        "text-gray-600"
+      ];
+  }
+};
+const stepStyle = (index) => {
+  const style = {};
+  const state = stepState(index);
+  const colorMap = {
+    completed: props.completedColor,
+    active: props.activeColor,
+    inactive: props.inactiveColor,
+    pending: props.inactiveColor
+  };
+  const color = colorMap[state];
+  if (isHex(color)) {
+    style.backgroundColor = color;
+  }
+  return style;
+};
+const connectorClasses = (index) => {
+  const completed = index < currentStep.value && !isInactiveStep(index + 1);
+  const color = completed ? props.connectorCompletedColor : props.connectorInactiveColor;
+  return [
+    !isHex(color) ? `bg-${color}` : ""
+  ];
+};
+const connectorStyle = (index) => {
+  const style = {};
+  const completed = index < currentStep.value && !isInactiveStep(index + 1);
+  const color = completed ? props.connectorCompletedColor : props.connectorInactiveColor;
+  if (isHex(color)) {
+    style.backgroundColor = color;
+  }
+  return style;
+};
+const labelClasses = (index) => {
+  if (isInactiveStep(index)) {
+    return "text-gray-400 opacity-60 cursor-not-allowed";
+  }
+  if (index === currentStep.value) {
+    return "text-black dark:text-white";
+  }
+  return "text-gray-500";
+};
+const navigate = (index) => {
+  if (isInactiveStep(index)) {
+    return;
+  }
+  emit(
+    "update:modelValue",
+    index
+  );
+};
+</script>
+
+<template>
+  <div :class="{
+  flex: vertical,
+  block: !vertical
+}">
+    <!-- Steps -->
+    <div :class="{
+  'flex flex-col items-start': vertical,
+  'flex items-start justify-between': !vertical
+}">
+      <div v-for="(
+step, index
+        ) in normalizedSteps" :key="index" :class="{
+  'relative flex-1 flex items-start': !vertical,
+  'relative flex flex-col items-start': vertical
+}">
+        <div :class="{
+  'flex items-center': vertical,
+  'flex flex-col items-center': !vertical
+}">
+          <!-- Step Indicator -->
+          <div @click="
+  navigate(index)
+" :class="[
+  'flex items-center justify-center w-10 h-10 rounded-full font-bold z-10 transition-colors',
+  stepClasses(index)
+]" :style="
+  stepStyle(index)
+">
+            <template v-if="step.icon">
+              <span class="material-icons">
+                {{ step.icon }}
+              </span>
+            </template>
+
+            <template v-else>
+              {{ index + 1 }}
+            </template>
+          </div>
+
+          <!-- Label -->
+          <div class="text-center text-sm font-medium mx-2" :class="[
+  vertical ? 'ml-4' : 'mt-2',
+  labelClasses(index)
+]" @click="
+  navigate(index)
+">
+            {{ step.label }}
+          </div>
+        </div>
+
+        <!-- Connector -->
+        <div v-if="
+  index !== normalizedSteps.length - 1
+" :class="{
+  'flex-1 h-[1px] mt-5 relative': !vertical,
+  'w-[1px] h-16 ml-5 relative': vertical
+}">
+          <div class="absolute w-full h-full" :class="
+  connectorClasses(
+    index
+  )
+" :style="[
+  connectorStyle(
+    index
+  ),
+  {
+    top: vertical ? '50%' : '',
+    transform: 'translateY(-50%)'
+  }
+]" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div :class="{
+  'ml-4': vertical,
+  'mt-4': !vertical
+}">
+      <slot :step="currentStep" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.material-icons{font-size:1.5rem}
+</style>

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;
+    };
+};