windly-ui 1.0.9 → 1.1.1

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

@@ -1,10 +1,6 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
         required: true;
@@ -57,7 +53,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     height: string;
     width: string;
     persistent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
-};
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/dist/runtime/components/Dialog.vue

@@ -1,5 +1,10 @@
+<script>
+const openStack = [];
+let nextInstanceId = 0;
+</script>
+
 <script setup>
-import { computed, watch, onBeforeUnmount } from "vue";
+import { computed, watch, onBeforeUnmount, ref } from "vue";
 import { useRouter } from "vue-router";
 const props = defineProps({
   isOpen: {
@@ -26,15 +31,26 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:isOpen"]);
 const router = useRouter();
+const instanceId = ++nextInstanceId;
+const zIndex = ref(50);
 const close = () => emit("update:isOpen", false);
 const handleOutsideClick = () => {
   if (!props.persistent) close();
 };
+const isTopMost = () => openStack[openStack.length - 1] === instanceId;
 const handleEscKey = (event) => {
-  if (event.key === "Escape" && !props.persistent) {
+  if (event.key === "Escape" && !props.persistent && isTopMost()) {
     close();
   }
 };
+const registerOpen = () => {
+  if (!openStack.includes(instanceId)) openStack.push(instanceId);
+  zIndex.value = 50 + openStack.indexOf(instanceId) * 10;
+};
+const registerClose = () => {
+  const index = openStack.indexOf(instanceId);
+  if (index !== -1) openStack.splice(index, 1);
+};
 const positionClasses = computed(() => {
   switch (props.position) {
     case "top":
@@ -53,8 +69,10 @@ watch(
   () => props.isOpen,
   (open) => {
     if (open) {
+      registerOpen();
       document.addEventListener("keydown", handleEscKey);
     } else {
+      registerClose();
       document.removeEventListener("keydown", handleEscKey);
     }
   }
@@ -65,14 +83,15 @@ const removeGuard = router.beforeEach((to, from, next) => {
 });
 onBeforeUnmount(() => {
   document.removeEventListener("keydown", handleEscKey);
+  registerClose();
   removeGuard?.();
 });
 </script>
 
 <template>
   <transition name="fade">
-    <div v-if="isOpen" class="fixed inset-0 z-50 flex bg-black bg-opacity-60" role="dialog" aria-modal="true"
-      @click.self="handleOutsideClick" :class="positionClasses">
+    <div v-if="isOpen" class="fixed inset-0 flex bg-black bg-opacity-60" role="dialog" aria-modal="true"
+      @click.self="handleOutsideClick" :class="positionClasses" :style="{ zIndex }">
       <div :style="{ width: width, height: height }">
         <slot />
       </div>

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

@@ -1,10 +1,6 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
         required: true;
@@ -57,7 +53,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     height: string;
     width: string;
     persistent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
-};
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/dist/runtime/components/Divider.vue

@@ -38,7 +38,7 @@ const dividerClass = computed(() => [
   props.vertical ? "h-full border-l" : "w-full border-t",
   props.type === "dashed" ? "border-dashed" : "",
   props.type === "dotted" ? "border-dotted" : "",
-  props.inset ? "mx-4" : "",
+  props.inset ? props.vertical ? "my-4" : "mx-4" : "",
   !isHex(props.color) ? `border-${props.color}` : ""
 ]);
 </script>

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

@@ -9,11 +9,11 @@ type __VLS_Props = {
     borderColor?: string;
     flat?: boolean;
 };
-declare var __VLS_1: {}, __VLS_9: {};
+declare var __VLS_1: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_1) => any;
 } & {
-    menu?: (props: typeof __VLS_9) => any;
+    menu?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     flat: boolean;

package/dist/runtime/components/Dropdown.vue

@@ -4,6 +4,7 @@ defineOptions({
 });
 import {
   computed,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref
@@ -19,34 +20,79 @@ const props = defineProps({
 });
 const isOpen = ref(false);
 const dropdownRef = ref(null);
+const menuRef = ref(null);
+const menuPositionStyle = ref({});
 const isHex = (val) => {
   return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
 };
-const toggle = () => {
+function updatePosition() {
+  const trigger = dropdownRef.value;
+  if (!trigger) return;
+  const rect = trigger.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const gap = 8;
+  const style = {
+    position: "fixed",
+    zIndex: "9999"
+  };
+  if (props.align === "right") {
+    style.right = `${Math.max(viewportWidth - rect.right, 0)}px`;
+  } else {
+    style.left = `${Math.max(rect.left, 0)}px`;
+  }
+  const estimatedMenuHeight = menuRef.value?.offsetHeight ?? 0;
+  const fitsBelow = rect.bottom + gap + estimatedMenuHeight <= viewportHeight;
+  if (fitsBelow) {
+    style.top = `${rect.bottom + gap}px`;
+  } else {
+    style.bottom = `${Math.max(viewportHeight - rect.top + gap, 0)}px`;
+  }
+  menuPositionStyle.value = style;
+}
+const toggle = async () => {
   isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    await nextTick();
+    updatePosition();
+  }
 };
 const close = () => {
   isOpen.value = false;
 };
 const handleClickOutside = (event) => {
-  const target = event.target;
-  if (dropdownRef.value && !dropdownRef.value.contains(
-    target
-  )) {
+  const path = event.composedPath();
+  const clickedTrigger = dropdownRef.value && path.includes(dropdownRef.value);
+  const clickedMenu = menuRef.value && path.includes(menuRef.value);
+  if (!clickedTrigger && !clickedMenu) {
+    close();
+  }
+};
+const handleEscape = (event) => {
+  if (event.key === "Escape" && isOpen.value) {
     close();
   }
 };
+const handleReposition = () => {
+  if (isOpen.value) updatePosition();
+};
 onMounted(() => {
   document.addEventListener(
     "click",
     handleClickOutside
   );
+  document.addEventListener("keydown", handleEscape);
+  window.addEventListener("resize", handleReposition);
+  window.addEventListener("scroll", handleReposition, true);
 });
 onBeforeUnmount(() => {
   document.removeEventListener(
     "click",
     handleClickOutside
   );
+  document.removeEventListener("keydown", handleEscape);
+  window.removeEventListener("resize", handleReposition);
+  window.removeEventListener("scroll", handleReposition, true);
 });
 const roundedClass = computed(
   () => {
@@ -62,8 +108,7 @@ const roundedClass = computed(
   }
 );
 const dropdownClasses = computed(() => [
-  "absolute mt-2 z-50 transition-all overflow-hidden",
-  props.align === "right" ? "right-0" : "left-0",
+  "transition-all overflow-hidden",
   props.width,
   roundedClass.value,
   props.bordered && !isHex(props.borderColor) ? `border border-${props.borderColor}` : "",
@@ -75,7 +120,7 @@ const dropdownStyle = computed(
     if (props.bordered && isHex(props.borderColor)) {
       style.border = `1px solid ${props.borderColor}`;
     }
-    return style;
+    return { ...style, ...menuPositionStyle.value };
   }
 );
 const menuClasses = computed(
@@ -93,32 +138,35 @@ const menuClasses = computed(
     class="relative inline-block"
   >
     <!-- Trigger -->
-    <div @click="toggle">
+    <div aria-haspopup="true" :aria-expanded="isOpen" @click="toggle">
       <slot name="trigger" />
     </div>
 
     <!-- Dropdown -->
-    <transition
-      name="fade-slide"
-    >
-      <div
-        v-if="isOpen"
-        :class="
+    <Teleport to="body">
+      <transition
+        name="fade-slide"
+      >
+        <div
+          v-if="isOpen"
+          ref="menuRef"
+          :class="
   dropdownClasses
 "
-        :style="
+          :style="
   dropdownStyle
 "
-      >
-        <div
-          :class="
+        >
+          <div
+            :class="
   menuClasses
 "
-        >
-          <slot name="menu" />
+          >
+            <slot name="menu" />
+          </div>
         </div>
-      </div>
-    </transition>
+      </transition>
+    </Teleport>
   </div>
 </template>
 

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

@@ -9,11 +9,11 @@ type __VLS_Props = {
     borderColor?: string;
     flat?: boolean;
 };
-declare var __VLS_1: {}, __VLS_9: {};
+declare var __VLS_1: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_1) => any;
 } & {
-    menu?: (props: typeof __VLS_9) => any;
+    menu?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     flat: boolean;

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

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     multiple: boolean;
     width: string;
     rounded: Rounded;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
     fileType: string;
     outlined: boolean;
     borderless: boolean;

package/dist/runtime/components/FileUploader.vue

@@ -35,6 +35,14 @@ const files = computed({
   )
 });
 const isHex = (val) => val.startsWith("#");
+function supportsWidthValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("width", value);
+  }
+  return /^-?\d*\.?\d+(px|%|rem|em|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/.test(
+    value.trim()
+  ) || /^(calc|var|min|max|clamp)\(/.test(value.trim());
+}
 const roundedMap = {
   none: "rounded-none",
   sm: "rounded-sm",
@@ -88,12 +96,9 @@ const computedClass = computed(() => {
       classes += " text-base";
   }
   if (props.color && !isHex(props.color)) {
-    classes += ` border-${props.color} focus:ring-${props.color}`;
+    classes += ` border-${props.color} focus:ring-0 `;
   }
-  if (props.width && !CSS.supports(
-    "width",
-    props.width
-  )) {
+  if (props.width && !supportsWidthValue(props.width)) {
     classes += ` w-${props.width}`;
   }
   if (!props.width) {
@@ -106,10 +111,7 @@ const computedClass = computed(() => {
 });
 const computedStyle = computed(() => {
   const styles = {};
-  if (props.width && CSS.supports(
-    "width",
-    props.width
-  )) {
+  if (props.width && supportsWidthValue(props.width)) {
     styles.width = props.width;
   }
   if (props.color && isHex(props.color)) {

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

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     multiple: boolean;
     width: string;
     rounded: Rounded;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
     fileType: string;
     outlined: boolean;
     borderless: boolean;

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

@@ -1,4 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    overlay?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     src: {
         type: StringConstructor;
         required: true;
@@ -73,5 +77,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     fit: string;
     borderType: 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/Image.vue

@@ -50,7 +50,22 @@ function onError() {
 </script>
 
 <template>
+  <div v-if="$slots.overlay" class="relative inline-block">
+    <img
+      :src="imageSrc"
+      :alt="alt"
+      :class="imageClass"
+      :style="imageStyle"
+      @error="onError"
+      v-bind="$attrs"
+    >
+    <div class="absolute inset-0 pointer-events-none">
+      <slot name="overlay" />
+    </div>
+  </div>
+
   <img
+    v-else
     :src="imageSrc"
     :alt="alt"
     :class="imageClass"

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

@@ -1,4 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    overlay?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     src: {
         type: StringConstructor;
         required: true;
@@ -73,5 +77,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     fit: string;
     borderType: 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/Input.d.vue.ts

@@ -28,6 +28,8 @@ type __VLS_Props = {
     readonly?: boolean;
     autocomplete?: string;
     validateOn?: ValidateOn;
+    error?: boolean;
+    errorMessage?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -49,10 +51,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     width: string;
     rounded: string;
     placeholder: string;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
+    error: boolean;
     outlined: boolean;
     borderless: boolean;
+    errorMessage: string;
     case: "upper" | "lower" | "capitalize" | "normal" | null;
     allow: ValidationRule[];
     deny: ValidationRule[];

package/dist/runtime/components/Input.vue

@@ -26,14 +26,16 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },
   autocomplete: { type: String, required: false, default: "off" },
-  validateOn: { type: String, required: false, default: "input" }
+  validateOn: { type: String, required: false, default: "input" },
+  error: { type: Boolean, required: false, default: false },
+  errorMessage: { type: String, required: false, default: "" }
 });
 const emit = defineEmits(["update:modelValue", "valid", "invalid"]);
 const validationError = ref("");
 const NATIVE_PATTERNS = {
   email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
   url: /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/\S*)?$/i,
-  tel: /^\+?[1-9]\d{6,14}$/
+  tel: /^\+?[\d\s().-]{7,20}$/
 };
 const RULE_PATTERNS = {
   alphabets: /^[A-Za-z]+$/,
@@ -49,6 +51,14 @@ const RULE_PATTERNS = {
   uppercase: /^[A-Z]+$/,
   lowercase: /^[a-z]+$/
 };
+const CHAR_CLASS_SOURCE = {
+  alphabets: "A-Za-z",
+  numbers: "0-9",
+  spaces: "\\s",
+  punctuation: `.,!?;:'"()\\-`,
+  uppercase: "A-Z",
+  lowercase: "a-z"
+};
 function validate(value) {
   validationError.value = "";
   if (props.required && !value.trim()) {
@@ -76,7 +86,17 @@ function validate(value) {
     validationError.value = `Invalid ${props.type} format.`;
     return false;
   }
-  for (const rule of props.allow) {
+  const allowCharRules = props.allow.filter((rule) => CHAR_CLASS_SOURCE[rule]);
+  const allowFormatRules = props.allow.filter((rule) => !CHAR_CLASS_SOURCE[rule]);
+  if (allowCharRules.length && value) {
+    const unionSource = allowCharRules.map((rule) => CHAR_CLASS_SOURCE[rule]).join("");
+    const unionRegex = new RegExp(`^[${unionSource}]*$`);
+    if (!unionRegex.test(value)) {
+      validationError.value = `Only ${allowCharRules.join(", ")} characters are allowed.`;
+      return false;
+    }
+  }
+  for (const rule of allowFormatRules) {
     const regex = RULE_PATTERNS[rule];
     if (regex && value && !regex.test(value)) {
       validationError.value = `Failed validation: ${rule}`;
@@ -84,8 +104,17 @@ function validate(value) {
     }
   }
   for (const rule of props.deny) {
+    const charSource = CHAR_CLASS_SOURCE[rule];
+    if (charSource) {
+      const presenceRegex = new RegExp(`[${charSource}]`);
+      if (value && presenceRegex.test(value)) {
+        validationError.value = `${rule} characters are not permitted.`;
+        return false;
+      }
+      continue;
+    }
     const regex = RULE_PATTERNS[rule];
-    if (regex && regex.test(value)) {
+    if (regex && value && regex.test(value)) {
       validationError.value = `Contains unsupported value: ${rule}`;
       return false;
     }
@@ -125,6 +154,16 @@ function handleBlur(event) {
   runValidation(target.value);
 }
 const isHex = (val) => val.startsWith("#");
+function supportsWidthValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("width", value);
+  }
+  return /^-?\d*\.?\d+(px|%|rem|em|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/.test(
+    value.trim()
+  ) || /^(calc|var|min|max|clamp)\(/.test(value.trim());
+}
+const hasError = computed(() => Boolean(props.error) || Boolean(validationError.value));
+const errorText = computed(() => props.errorMessage || validationError.value);
 const roundedMap = {
   none: "rounded-none",
   sm: "rounded-sm",
@@ -163,12 +202,12 @@ const computedClass = computed(() => {
   } else if (props.case === "capitalize") {
     classes += " capitalize";
   }
-  if (validationError.value) {
-    classes += " border-red-500";
+  if (hasError.value) {
+    classes += " border-red-500 focus:ring-0 ";
   } else {
-    classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-${props.color} ` : ""}`;
+    classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-0 ` : ""}`;
   }
-  if (props.width && !CSS.supports("width", props.width)) {
+  if (props.width && !supportsWidthValue(props.width)) {
     classes += `w-${props.width} `;
   }
   if (!props.width) classes += "w-full ";
@@ -178,7 +217,7 @@ const computedClass = computed(() => {
 });
 const computedStyle = computed(() => {
   let styles = {};
-  if (props.width && CSS.supports("width", props.width)) {
+  if (props.width && supportsWidthValue(props.width)) {
     styles["width"] = props.width;
   }
   if (props.color && isHex(props.color)) {
@@ -210,7 +249,7 @@ const inputAttrs = computed(() => {
       :style="computedStyle"
       @input="handleInput"
       @blur="handleBlur"
-      v-bind="inputAttrs",
+      v-bind="inputAttrs"
     />
 
     <label class="label" :class="color && !isHex(color) ? `text-${color}` : ''" :style="color ? { color: isHex(color) ? color : '' } : { color: '#9ca3af' }">
@@ -221,21 +260,21 @@ const inputAttrs = computed(() => {
       <UIButton v-if="type === 'password'" :icon="visibility ? 'visibility_off' : 'visibility'" flat dense color="gray-400"  @click="visibility = !visibility" />
     </div>
     <p
-      v-if="hint && !validationError"
+      v-if="hint && !hasError"
       class="hint-text"
     >
       {{ hint }}
     </p>
 
     <p
-      v-if="validationError"
+      v-if="hasError"
       class="error-text"
     >
-      {{ validationError }}
+      {{ errorText }}
     </p>
   </div>
 </template>
 
 <style scoped>
-.input-container{margin:20px 0 10px;position:relative}.input-container.dense{margin:10px 0}.input-container .input{padding:10px}.input-container.dense .input{padding:6px 10px}.input:focus{outline:none}.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-container:has(input[type=date]) .label,.input-container:has(input[type=datetime-local]) .label,.input-container:has(input[type=month]) .label,.input-container:has(input[type=time]) .label,.input-container:has(input[type=week]) .label{left:5px;top:-20%;transform:none;z-index:1}.input-container.input-lg.dense .input:-moz-placeholder+.label,.input:-moz-placeholder+.label{left:5px;top:-20px;transform:none;z-index:1}.input-container.input-lg.dense .input.has-value+.label,.input-container.input-lg.dense .input:focus+.label,.input-container.input-lg.dense .input:placeholder-shown+.label,.input.has-value+.label,.input:focus+.label,.input:placeholder-shown+.label{left:5px;top:-20px;transform:none;z-index:1}.input-container.dense .input:-moz-placeholder+.label{top:-10px}.input-container.dense .input.has-value+.label,.input-container.dense .input:focus+.label,.input-container.dense .input:placeholder-shown+.label{top:-10px}.input-container.input-lg .input:-moz-placeholder+.label{top:-24px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{top:-24px}.input-container.input-sm .label{font-size:14px}.input-container.input-md .label{font-size:16px}.input-container.input-lg .label{font-size:18px}.input-container.input-sm .input:-moz-placeholder+.label{font-size:12px}.input-container.input-sm .input.has-value+.label,.input-container.input-sm .input:focus+.label,.input-container.input-sm .input:placeholder-shown+.label{font-size:12px}.input-container.input-md .input:-moz-placeholder+.label{font-size:14px}.input-container.input-md .input.has-value+.label,.input-container.input-md .input:focus+.label,.input-container.input-md .input:placeholder-shown+.label{font-size:14px}.input-container.input-lg .input:-moz-placeholder+.label{font-size:16px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{font-size:16px}.hint-text{color:#6b7280;font-size:12px;margin-left:5px}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444}
+.input-container{box-sizing:border-box;margin:20px 0 10px;min-width:0;position:relative;width:100%}.input-container.dense{margin:10px 0}.input-container .input{padding:10px}.input-container.dense .input{padding:6px 10px}.input:focus{outline:none}.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-container:has(input[type=date]) .label,.input-container:has(input[type=datetime-local]) .label,.input-container:has(input[type=month]) .label,.input-container:has(input[type=time]) .label,.input-container:has(input[type=week]) .label{left:5px;top:-20%;transform:none;z-index:1}.input-container.input-lg.dense .input:-moz-placeholder+.label,.input:-moz-placeholder+.label{left:5px;top:-20px;transform:none;z-index:1}.input-container.input-lg.dense .input.has-value+.label,.input-container.input-lg.dense .input:focus+.label,.input-container.input-lg.dense .input:placeholder-shown+.label,.input.has-value+.label,.input:focus+.label,.input:placeholder-shown+.label{left:5px;top:-20px;transform:none;z-index:1}.input-container.dense .input:-moz-placeholder+.label{top:-10px}.input-container.dense .input.has-value+.label,.input-container.dense .input:focus+.label,.input-container.dense .input:placeholder-shown+.label{top:-10px}.input-container.input-lg .input:-moz-placeholder+.label{top:-24px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{top:-24px}.input-container.input-sm .label{font-size:14px}.input-container.input-md .label{font-size:16px}.input-container.input-lg .label{font-size:18px}.input-container.input-sm .input:-moz-placeholder+.label{font-size:12px}.input-container.input-sm .input.has-value+.label,.input-container.input-sm .input:focus+.label,.input-container.input-sm .input:placeholder-shown+.label{font-size:12px}.input-container.input-md .input:-moz-placeholder+.label{font-size:14px}.input-container.input-md .input.has-value+.label,.input-container.input-md .input:focus+.label,.input-container.input-md .input:placeholder-shown+.label{font-size:14px}.input-container.input-lg .input:-moz-placeholder+.label{font-size:16px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{font-size:16px}.hint-text{color:#6b7280;font-size:12px;margin-left:5px;overflow-wrap:anywhere;word-break:break-word}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444;overflow-wrap:anywhere;word-break:break-word}
 </style>

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

@@ -28,6 +28,8 @@ type __VLS_Props = {
     readonly?: boolean;
     autocomplete?: string;
     validateOn?: ValidateOn;
+    error?: boolean;
+    errorMessage?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -49,10 +51,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     width: string;
     rounded: string;
     placeholder: string;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
+    error: boolean;
     outlined: boolean;
     borderless: boolean;
+    errorMessage: string;
     case: "upper" | "lower" | "capitalize" | "normal" | null;
     allow: ValidationRule[];
     deny: ValidationRule[];