windly-ui 1.0.9 → 1.1.0

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

@@ -9,7 +9,7 @@ type __VLS_Props = {
     name?: string;
     hint?: string;
     icon?: string;
-    disable?: boolean;
+    disabled?: boolean;
     color?: string;
     size?: RadioSize;
     rounded?: Rounded;
@@ -24,13 +24,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
 }>, {
     modelValue: string | number | boolean;
+    disabled: boolean;
     name: string;
     color: string;
     size: RadioSize;
     flat: boolean;
     icon: string;
     borderColor: string;
-    disable: boolean;
     rounded: Rounded;
     id: string;
     bordered: boolean;

package/dist/runtime/components/Radio.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   name: { type: String, required: false, default: "" },
   hint: { type: String, required: false, default: "" },
   icon: { type: String, required: false, default: "" },
-  disable: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
   color: { type: String, required: false, default: "blue-500" },
   size: { type: String, required: false, default: "md" },
   rounded: { type: String, required: false, default: "full" },
@@ -76,7 +76,7 @@ const radioClasses = computed(
     sizeClasses.value.radio,
     roundedClass.value,
     props.flat ? "shadow-none" : "shadow-sm",
-    props.disable ? "opacity-50" : "",
+    props.disabled ? "opacity-50" : "",
     props.bordered && !isHex(
       props.borderColor
     ) ? `border-${props.borderColor}` : "",
@@ -117,7 +117,7 @@ const iconStyle = computed(
   }
 );
 const toggle = () => {
-  if (props.disable)
+  if (props.disabled)
     return;
   emit(
     "update:modelValue",
@@ -139,7 +139,7 @@ const toggle = () => {
   isChecked
 "
       :disabled="
-  disable
+  disabled
 "
       class="sr-only"
       @change="toggle"
@@ -153,13 +153,13 @@ const toggle = () => {
   isChecked
 "
       :aria-disabled="
-  disable
+  disabled
 "
       :class="[
   'flex items-center cursor-pointer select-none',
   labelPositionClass,
   {
-    'opacity-50 pointer-events-none': disable
+    'opacity-50 pointer-events-none': disabled
   }
 ]"
       @click.prevent="
@@ -203,7 +203,7 @@ const toggle = () => {
     size === 'sm' ? 'w-2 h-2' : size === 'lg' ? 'w-3 h-3' : 'w-2.5 h-2.5'
   ]
 "
-          :style="isHex(props.color) ? { backgroundColor: props.color } : {}"
+          :style="isHex(props.color) && isChecked ? { backgroundColor: props.color } : {}"
         />
       </span>
 
@@ -214,6 +214,8 @@ const toggle = () => {
         {{ label }}
       </span>
     </label>
+
+    <span v-if="hint" class="ml-2 text-xs text-gray-400 dark:text-gray-500">{{ hint }}</span>
   </div>
 </template>
 

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

@@ -9,7 +9,7 @@ type __VLS_Props = {
     name?: string;
     hint?: string;
     icon?: string;
-    disable?: boolean;
+    disabled?: boolean;
     color?: string;
     size?: RadioSize;
     rounded?: Rounded;
@@ -24,13 +24,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
 }>, {
     modelValue: string | number | boolean;
+    disabled: boolean;
     name: string;
     color: string;
     size: RadioSize;
     flat: boolean;
     icon: string;
     borderColor: string;
-    disable: boolean;
     rounded: Rounded;
     id: string;
     bordered: boolean;

package/dist/runtime/components/ScrollArea.vue

@@ -34,3 +34,7 @@ const scrollClass = computed(() => [
     <slot />
   </div>
 </template>
+
+<style scoped>
+.scrollbar-hide{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-hide::-webkit-scrollbar{display:none}
+</style>

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

@@ -42,8 +42,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     rounded: Rounded;
     id: string;
     placeholder: string;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
     outlined: boolean;
     borderless: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Select.vue

@@ -27,6 +27,14 @@ const emit = defineEmits(["update:modelValue"]);
 const showDropdown = ref(false);
 const searchQuery = ref("");
 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",
@@ -65,12 +73,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-2 focus:ring-${props.color}`;
   }
-  if (props.width && !CSS.supports(
-    "width",
-    props.width
-  )) {
+  if (props.width && !supportsWidthValue(props.width)) {
     classes += ` w-${props.width}`;
   }
   if (!props.width) {
@@ -83,10 +88,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/Select.vue.d.ts

@@ -42,8 +42,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     rounded: Rounded;
     id: string;
     placeholder: string;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
     outlined: boolean;
     borderless: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,5 +1,8 @@
 type __VLS_Props = {
     modelValue: string;
+    color?: string;
+    headerClass?: string;
+    contentClass?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -9,7 +12,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    color: string;
+    contentClass: string;
+    headerClass: string;
+}, {}, {}, {}, 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;

package/dist/runtime/components/Tabs.vue

@@ -1,9 +1,20 @@
 <script setup>
-import { ref, reactive, watch, nextTick, provide, computed, onMounted } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+import { ref, reactive, watch, nextTick, provide, computed, onMounted, useAttrs } from "vue";
 const props = defineProps({
-  modelValue: { type: String, required: true }
+  modelValue: { type: String, required: true },
+  color: { type: String, required: false, default: "blue-600" },
+  headerClass: { type: String, required: false, default: "" },
+  contentClass: { type: String, required: false, default: "" }
 });
 const emit = defineEmits(["update:modelValue"]);
+const attrs = useAttrs();
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
 const tabs = ref([]);
 const tabRefs = ref([]);
 const tabsEl = ref(null);
@@ -45,18 +56,22 @@ provide("tabs", {
 
 <template>
     <!-- Tabs Header -->
-    <div ref="tabsEl" class="relative flex border-b bg-gray-100">
-        <span class="absolute bottom-0 h-0.5 bg-blue-600 transition-all duration-300 ease-out"
+    <div ref="tabsEl" class="relative flex border-b bg-gray-100 dark:bg-gray-800 dark:border-gray-700"
+        :class="[headerClass, attrs.class]" role="tablist" v-bind="rootAttrs">
+        <span class="absolute bottom-0 h-0.5 transition-all duration-300 ease-out" :class="`bg-${color}`"
             :style="indicatorStyle" />
 
         <button v-for="(tab, index) in tabs" :key="tab.name" :ref="(el) => tabRefs[index] = el"
-            @click="setActive(tab.name, index)" class="relative px-4 py-2 text-sm font-medium transition-colors" :class="modelValue === tab.name ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'">
+            role="tab" :aria-selected="modelValue === tab.name" :tabindex="modelValue === tab.name ? 0 : -1"
+            @click="setActive(tab.name, index)"
+            class="relative px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
+            :class="[modelValue === tab.name ? `text-${color}` : 'text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100', `focus-visible:ring-${color}`]">
             {{ tab.label }}
         </button>
     </div>
 
     <!-- Content -->
-    <div class="relative">
+    <div class="relative" :class="contentClass">
         <slot />
     </div>
 </template>

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

@@ -1,5 +1,8 @@
 type __VLS_Props = {
     modelValue: string;
+    color?: string;
+    headerClass?: string;
+    contentClass?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -9,7 +12,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    color: string;
+    contentClass: string;
+    headerClass: string;
+}, {}, {}, {}, 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;

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