windly-ui 1.0.2 → 1.0.3

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;

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,185 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed, ref, watch, nextTick } 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
+});
+const emit = defineEmits([
+  "update:modelValue"
+]);
+const textareaRef = ref();
+const {
+  contentClass,
+  contentStyle,
+  color,
+  textColor,
+  rounded,
+  size,
+  disable,
+  roundedClass,
+  sizeClass,
+  computedContentClass,
+  isHex
+} = useUiClasses(props);
+const paddingClass = {
+  sm: "px-3 py-2",
+  md: "px-4 py-3",
+  lg: "px-5 py-4"
+};
+const textareaStyle = computed(() => {
+  const style = {
+    ...typeof contentStyle.value === "object" && contentStyle.value !== null ? contentStyle.value : {}
+  };
+  if (isHex(color.value)) {
+    style.borderColor = color.value;
+  }
+  if (isHex(textColor.value)) {
+    style.color = textColor.value;
+  }
+  return style;
+});
+const textareaClass = computed(() => {
+  const rKey = rounded.value;
+  const sKey = size.value;
+  const pKey = size.value;
+  const rClass = roundedClass[rKey] ?? "";
+  const sClass = sizeClass[sKey] ?? "";
+  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) {
+    cls += " opacity-50 cursor-not-allowed";
+  }
+  if (props.error) {
+    cls += " border-red-500";
+  } else if (!isHex(color.value)) {
+    cls += ` border-${color.value}`;
+  }
+  if (textColor.value && !isHex(textColor.value)) {
+    cls += ` text-${textColor.value}`;
+  }
+  cls += ` ${computedContentClass.value}`;
+  cls += ` ${contentClass.value || ""}`;
+  return cls;
+});
+const wordCount = computed(() => {
+  return props.modelValue.trim().split(/\s+/).filter(Boolean).length;
+});
+const charCount = computed(() => {
+  return props.modelValue.length;
+});
+function updateValue(event) {
+  emit(
+    "update:modelValue",
+    event.target.value
+  );
+}
+function resizeTextarea() {
+  if (!props.autoGrow) return;
+  if (!textareaRef.value) return;
+  textareaRef.value.style.height = "auto";
+  textareaRef.value.style.height = textareaRef.value.scrollHeight + "px";
+}
+watch(
+  () => props.modelValue,
+  async () => {
+    await nextTick();
+    resizeTextarea();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-1">
+        <label v-if="label" class="font-medium">
+            {{ label }}
+        </label>
+
+        <textarea ref="textareaRef" :value="modelValue" :rows="rows" :placeholder="placeholder" :disabled="disable"
+            :readonly="readonly" :maxlength="maxlength" :class="textareaClass" :style="textareaStyle"
+            @input="updateValue" v-bind="$attrs" />
+        <div class="flex justify-between text-xs text-gray-500">
+            <span>
+                {{ error ? errorMessage : hint }}
+            </span>
+            <span class="flex gap-3">
+                <span v-if="showWordCount">
+                    {{ wordCount }} words
+                </span>
+
+                <span v-if="showCharCount">
+                    {{ charCount }}
+                    <template v-if="maxlength">
+                        / {{ maxlength }}
+                    </template>
+                </span>
+            </span>
+        </div>
+    </div>
+</template>

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

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

@@ -0,0 +1,36 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type ToggleSize = 'small' | 'medium' | 'large';
+type __VLS_Props = {
+    modelValue?: boolean | string | number;
+    label?: string;
+    labelPosition?: LabelPosition;
+    customClasses?: string;
+    trueColor?: string;
+    falseColor?: string;
+    size?: ToggleSize;
+    activeValue?: string | number | boolean;
+    inactiveValue?: string | number | boolean;
+    activeIcon?: string;
+    inactiveIcon?: string;
+    disable?: boolean;
+};
+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: boolean | string | number;
+    label: string;
+    disable: boolean;
+    size: ToggleSize;
+    labelPosition: LabelPosition;
+    customClasses: string;
+    trueColor: string;
+    falseColor: string;
+    activeValue: string | number | boolean;
+    inactiveValue: string | number | boolean;
+    activeIcon: string;
+    inactiveIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;