windly-ui 1.0.8 → 1.1.0

package/dist/runtime/components/Textarea.vue

@@ -2,67 +2,37 @@
 defineOptions({
   inheritAttrs: false
 });
-import { computed, ref, watch, nextTick } from "vue";
+import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 import { useUiClasses } from "./useUiClasses";
-import { uiProps } from "./uiProps";
 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  label: {
-    type: String,
-    default: ""
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  rows: {
-    type: Number,
-    default: 3
-  },
-  maxRows: {
-    type: Number,
-    default: 10
-  },
-  autoGrow: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  },
-  errorMessage: {
-    type: String,
-    default: ""
-  },
-  hint: {
-    type: String,
-    default: ""
-  },
-  showWordCount: {
-    type: Boolean,
-    default: false
-  },
-  showCharCount: {
-    type: Boolean,
-    default: false
-  },
-  maxlength: {
-    type: Number,
-    default: void 0
-  },
-  ...uiProps
+  modelValue: { type: String, required: false, default: "" },
+  label: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "" },
+  rows: { type: Number, required: false, default: 3 },
+  maxRows: { type: Number, required: false, default: 10 },
+  autoGrow: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  error: { type: Boolean, required: false, default: false },
+  errorMessage: { type: String, required: false, default: "" },
+  hint: { type: String, required: false, default: "" },
+  showWordCount: { type: Boolean, required: false, default: false },
+  showCharCount: { type: Boolean, required: false, default: false },
+  maxlength: { type: Number, required: false, default: void 0 },
+  outlined: { type: Boolean, required: false, default: false },
+  borderless: { type: Boolean, required: false, default: false },
+  filled: { type: Boolean, required: false, default: false },
+  flat: { type: Boolean, required: false, default: false },
+  contentClass: { type: String, required: false, default: "" },
+  contentStyle: { type: String, required: false, default: "" },
+  textColor: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false },
+  loading: { type: Boolean, required: false, default: false },
+  color: { type: String, required: false, default: "indigo-400" },
+  rounded: { type: String, required: false, default: "md" },
+  size: { type: String, required: false, default: "md" },
+  iconSize: { type: String, required: false, default: "lg" }
 });
-const emit = defineEmits([
-  "update:modelValue"
-]);
+const emit = defineEmits(["update:modelValue"]);
 const textareaRef = ref();
 const {
   contentClass,
@@ -71,7 +41,7 @@ const {
   textColor,
   rounded,
   size,
-  disable,
+  disabled,
   roundedClass,
   sizeClass,
   computedContentClass,
@@ -88,6 +58,7 @@ const textareaStyle = computed(() => {
   };
   if (isHex(color.value)) {
     style.borderColor = color.value;
+    style["--tw-ring-color"] = color.value;
   }
   if (isHex(textColor.value)) {
     style.color = textColor.value;
@@ -103,22 +74,37 @@ const textareaClass = computed(() => {
   const pClass = paddingClass[pKey] ?? "";
   let cls = `
     w-full
-    border
     transition-all
     duration-300
     focus:outline-none
-    focus:ring-2
     ${rClass}
     ${sClass}
     ${pClass}
   `;
-  if (disable.value) {
+  if (props.borderless) {
+    cls += " border-none bg-transparent";
+  } else if (props.outlined) {
+    cls += " border";
+  } else if (props.filled) {
+    cls += " border-0 border-b bg-gray-100 dark:bg-gray-800";
+  } else {
+    cls += " border-0 border-b";
+  }
+  if (!props.flat) {
+    cls += " shadow-sm";
+  }
+  if (disabled.value) {
     cls += " opacity-50 cursor-not-allowed";
   }
+  if (props.autoGrow) {
+    cls += " resize-none overflow-hidden";
+  }
   if (props.error) {
-    cls += " border-red-500";
+    cls += " border-red-500 focus:ring-0 focus:ring-red-500";
   } else if (!isHex(color.value)) {
-    cls += ` border-${color.value}`;
+    cls += ` border-${color.value} focus:ring-0 focus:ring-${color.value}`;
+  } else {
+    cls += " focus:ring-0";
   }
   if (textColor.value && !isHex(textColor.value)) {
     cls += ` text-${textColor.value}`;
@@ -140,19 +126,52 @@ function updateValue(event) {
   );
 }
 function resizeTextarea() {
-  if (!props.autoGrow) return;
-  if (!textareaRef.value) return;
-  textareaRef.value.style.height = "auto";
-  textareaRef.value.style.height = textareaRef.value.scrollHeight + "px";
+  const el = textareaRef.value;
+  if (!el) return;
+  if (!props.autoGrow) {
+    el.style.height = "";
+    el.style.overflowY = "";
+    return;
+  }
+  el.style.height = "auto";
+  const styles = window.getComputedStyle(el);
+  const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.2 || 20;
+  const paddingTop = parseFloat(styles.paddingTop) || 0;
+  const paddingBottom = parseFloat(styles.paddingBottom) || 0;
+  const borderTop = parseFloat(styles.borderTopWidth) || 0;
+  const borderBottom = parseFloat(styles.borderBottomWidth) || 0;
+  const verticalExtra = paddingTop + paddingBottom + borderTop + borderBottom;
+  const maxHeight = lineHeight * props.maxRows + verticalExtra;
+  const minHeight = lineHeight * props.rows + verticalExtra;
+  const targetHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+  el.style.height = `${targetHeight}px`;
+  el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
 }
 watch(
   () => props.modelValue,
   async () => {
     await nextTick();
     resizeTextarea();
-  },
-  { immediate: true }
+  }
 );
+watch(
+  () => props.autoGrow,
+  async () => {
+    await nextTick();
+    resizeTextarea();
+  }
+);
+function handleWindowResize() {
+  resizeTextarea();
+}
+onMounted(async () => {
+  await nextTick();
+  resizeTextarea();
+  window.addEventListener("resize", handleWindowResize);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleWindowResize);
+});
 </script>
 
 <template>
@@ -161,7 +180,7 @@ watch(
             {{ label }}
         </label>
 
-        <textarea ref="textareaRef" :value="modelValue" :rows="rows" :placeholder="placeholder" :disabled="disable"
+        <textarea ref="textareaRef" :value="modelValue" :rows="rows" :placeholder="placeholder" :disabled="disabled"
             :readonly="readonly" :maxlength="maxlength" :class="textareaClass" :style="textareaStyle"
             @input="updateValue" v-bind="$attrs" />
         <div class="flex justify-between text-xs text-gray-500">
@@ -183,3 +202,7 @@ watch(
         </div>
     </div>
 </template>
+
+<style scoped>
+textarea{-moz-appearance:none;appearance:none;-webkit-appearance:none}textarea:focus{outline:none}
+</style>

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

@@ -1,201 +1,55 @@
-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;
+type __VLS_Props = {
+    modelValue?: string;
+    label?: string;
+    placeholder?: string;
+    rows?: number;
+    maxRows?: number;
+    autoGrow?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    hint?: string;
+    showWordCount?: boolean;
+    showCharCount?: boolean;
+    maxlength?: number;
+    outlined?: boolean;
+    borderless?: boolean;
+    filled?: boolean;
+    flat?: boolean;
+    contentClass?: string;
+    contentStyle?: string;
+    textColor?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    color?: string;
+    rounded?: string;
+    size?: string;
+    iconSize?: string;
+};
+declare const __VLS_export: 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;
 }>, {
     modelValue: string;
+    disabled: boolean;
     label: string;
     color: string;
     size: string;
+    filled: boolean;
+    flat: boolean;
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;
     placeholder: string;
+    hint: string;
     readonly: boolean;
     error: boolean;
-    hint: string;
+    outlined: boolean;
+    borderless: boolean;
     errorMessage: string;
     maxlength: number;
     rows: number;
@@ -203,6 +57,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     autoGrow: boolean;
     showWordCount: boolean;
     showCharCount: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,8 +1,9 @@
 type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
-type ToggleSize = 'small' | 'medium' | 'large';
+type ToggleSize = 'sm' | 'md' | 'lg';
 type __VLS_Props = {
     modelValue?: boolean | string | number;
     label?: string;
+    hint?: string;
     labelPosition?: LabelPosition;
     customClasses?: string;
     trueColor?: string;
@@ -12,7 +13,9 @@ type __VLS_Props = {
     inactiveValue?: string | number | boolean;
     activeIcon?: string;
     inactiveIcon?: string;
-    disable?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | number | boolean) => any;
@@ -20,9 +23,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
 }>, {
     modelValue: boolean | string | number;
+    disabled: boolean;
     label: string;
     size: ToggleSize;
-    disable: boolean;
+    hint: string;
+    error: boolean;
+    errorMessage: string;
     labelPosition: LabelPosition;
     customClasses: string;
     trueColor: string;