windly-ui 1.0.3 → 1.0.4

package/dist/runtime/components/Select.vue

@@ -2,74 +2,98 @@
 defineOptions({
   name: "UISelect"
 });
-import {
-  computed,
-  ref,
-  watch
-} from "vue";
+import { computed, ref, watch } from "vue";
 const props = defineProps({
-  filter: { type: Boolean, required: false, default: false },
   modelValue: { type: [String, Number, Boolean], required: false, default: "" },
-  label: { type: String, required: true },
-  id: { type: String, required: false, default: void 0 },
-  options: { type: Array, required: true },
-  placeholder: { type: String, required: false, default: "Search or select..." },
-  disabled: { type: Boolean, required: false, default: false },
-  required: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" },
   hint: { type: String, required: false, default: "" },
-  flat: { type: Boolean, required: false, default: false },
-  bordered: { type: Boolean, required: false, default: true },
+  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" },
-  borderColor: { type: String, required: false, default: "gray-300" },
-  bgColor: { type: String, required: false, default: "white" },
-  textColor: { type: String, required: false, default: "black" }
+  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 searchQuery = ref("");
 const showDropdown = ref(false);
-const isHex = (val) => {
-  return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+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 roundedClass = computed(() => {
-  const map = {
-    none: "rounded-none",
-    sm: "rounded-sm",
-    md: "rounded-md",
-    lg: "rounded-lg",
-    xl: "rounded-xl",
-    full: "rounded-full"
-  };
-  return map[props.rounded];
-});
-const selectClasses = computed(() => [
-  "block w-full px-3 py-2 transition-all focus:outline-none",
-  roundedClass.value,
-  props.flat ? "shadow-none" : "shadow-sm",
-  props.bordered ? !isHex(
-    props.borderColor
-  ) ? `border border-${props.borderColor}` : "border" : "border-0",
-  !isHex(props.bgColor) ? `bg-${props.bgColor}` : "",
-  !isHex(
-    props.textColor
-  ) ? `text-${props.textColor}` : "",
-  props.disabled ? "opacity-50 cursor-not-allowed" : ""
-]);
-const selectStyles = computed(() => {
-  const style = {};
-  if (isHex(props.bgColor)) {
-    style.backgroundColor = props.bgColor;
+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";
   }
-  if (isHex(
-    props.borderColor
+  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
   )) {
-    style.borderColor = props.borderColor;
+    classes += ` w-${props.width}`;
+  }
+  if (!props.width) {
+    classes += " w-full";
   }
-  if (isHex(
-    props.textColor
+  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
   )) {
-    style.color = props.textColor;
+    styles.width = props.width;
   }
-  return style;
+  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();
@@ -79,122 +103,169 @@ const filteredOptions = computed(() => {
 });
 watch(
   () => props.modelValue,
-  (val) => {
+  (value) => {
     const selected = props.options.find(
-      (opt) => opt.value === val
+      (o) => o.value === value
     );
-    if (selected) {
-      searchQuery.value = selected.text;
-    }
+    searchQuery.value = selected?.text ?? "";
   },
   {
     immediate: true
   }
 );
-const selectOption = (option) => {
+function selectOption(option) {
   searchQuery.value = option.text;
   emit(
     "update:modelValue",
     option.value
   );
   showDropdown.value = false;
-};
-const handleChange = (event) => {
+}
+function handleChange(event) {
   const target = event.target;
-  emit(
-    "update:modelValue",
-    target.value
+  const selected = props.options.find(
+    (option) => String(option.value) === target.value
   );
-};
-const handleBlur = () => {
+  if (selected) {
+    emit(
+      "update:modelValue",
+      selected.value
+    );
+  }
+}
+function handleBlur() {
   setTimeout(() => {
     showDropdown.value = false;
-  }, 100);
-};
+  }, 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="relative my-5">
-    <!-- Label -->
-    <label v-if="label" :for="id" class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-300">
-      {{ label }}
-    </label>
-
+  <div
+    class="select-container"
+    :class="{
+  dense: !outlined || dense,
+  [`input-${size}`]: size
+}"
+  >
     <!-- Filterable Select -->
-    <div v-if="filter" class="relative">
-      <input v-model="
-  searchQuery
-" :placeholder="
-  placeholder
-" :disabled="
-  disabled
-" :required="
-  required
-" :class="
-  selectClasses
-" :style="
-  selectStyles
-" @focus="
-  showDropdown = true
-" @blur="
-  handleBlur
-" @input="
-  showDropdown = true
-">
+    <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"
+      />
 
-      <!-- Dropdown -->
-      <ul v-if="
-  showDropdown
+      <label
+        class="label"
+        :class="
+  color && !isHex(color) ? `text-${color}` : ''
 "
-        class="absolute z-10 mt-1 w-full max-h-48 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg">
-        <li v-for="option in filteredOptions" :key="
-  option.value.toString()
-" class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" @mousedown.prevent="
-  selectOption(
-    option
-  )
-">
+        :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-4 py-2 text-gray-500">
+        <li
+          v-if="filteredOptions.length === 0"
+          class="px-3 py-2 text-sm text-gray-500"
+        >
           No results found
         </li>
       </ul>
     </div>
 
     <!-- Native Select -->
-    <select v-else :id="id" :value="
-  modelValue
-" :disabled="
-  disabled
-" :required="
-  required
-" :class="
-  selectClasses
-" :style="
-  selectStyles
-" @change="
-  handleChange
-">
-      <option disabled value="">
-        {{ placeholder }}
-      </option>
+    <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>
 
-      <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>
 
-    <!-- Hint -->
-    <p v-if="hint" class="mt-1 text-sm text-gray-500">
+    <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

@@ -2,23 +2,27 @@ interface SelectOption {
     text: string;
     value: string | number | boolean;
 }
-type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type Rounded = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type Size = "sm" | "md" | "lg";
 type __VLS_Props = {
-    filter?: boolean;
     modelValue?: string | number | boolean;
-    label: string;
-    id?: string;
-    options: SelectOption[];
+    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;
-    hint?: string;
-    flat?: boolean;
-    bordered?: boolean;
-    rounded?: Rounded;
-    borderColor?: string;
-    bgColor?: string;
-    textColor?: string;
+    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;
@@ -27,17 +31,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     modelValue: string | number | boolean;
     disabled: boolean;
+    dense: boolean;
+    label: string;
     filter: boolean;
-    textColor: string;
-    rounded: Rounded;
-    borderColor: string;
     required: boolean;
+    color: string;
+    rounded: Rounded;
+    size: Size;
     flat: boolean;
     id: string;
     placeholder: string;
-    bordered: boolean;
-    bgColor: 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/Table.d.vue.ts

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     separator: Separator;
     flat: boolean;
     bordered: boolean;
-    bgColor: string;
     striped: boolean;
+    bgColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     separator: Separator;
     flat: boolean;
     bordered: boolean;
-    bgColor: string;
     striped: boolean;
+    bgColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -195,8 +195,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     placeholder: string;
     readonly: boolean;
     error: boolean;
-    errorMessage: string;
     hint: string;
+    errorMessage: string;
     maxlength: number;
     rows: number;
     maxRows: number;

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

@@ -195,8 +195,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     placeholder: string;
     readonly: boolean;
     error: boolean;
-    errorMessage: string;
     hint: string;
+    errorMessage: string;
     maxlength: number;
     rows: number;
     maxRows: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "./dist/module.mjs",
   "exports": {