windly-ui 1.0.8 → 1.1.0

package/dist/runtime/components/Toggle.vue

@@ -6,165 +6,113 @@ defineOptions({
 const props = defineProps({
   modelValue: { type: [Boolean, String, Number], required: false, default: false },
   label: { type: String, required: false, default: "" },
+  hint: { type: String, required: false, default: "" },
   labelPosition: { type: String, required: false, default: "right" },
   customClasses: { type: String, required: false, default: "" },
   trueColor: { type: String, required: false, default: "blue-500" },
   falseColor: { type: String, required: false, default: "gray-300" },
-  size: { type: String, required: false, default: "medium" },
+  size: { type: String, required: false, default: "md" },
   activeValue: { type: [String, Number, Boolean], required: false, default: true },
   inactiveValue: { type: [String, Number, Boolean], required: false, default: false },
   activeIcon: { type: String, required: false, default: "" },
   inactiveIcon: { type: String, required: false, default: "" },
-  disable: { type: Boolean, required: false, default: false }
+  disabled: { type: Boolean, required: false, default: false },
+  error: { type: Boolean, required: false, default: false },
+  errorMessage: { type: String, required: false, default: "" }
 });
 const emit = defineEmits(["update:modelValue"]);
-const isHex = (val) => {
-  return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
-};
-const isActive = computed(
-  () => props.modelValue === props.activeValue
-);
+const isHex = (val) => val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+const isActive = computed(() => props.modelValue === props.activeValue);
 const toggleSize = computed(() => {
   switch (props.size) {
-    case "small":
-      return {
-        bg: "w-10 h-5",
-        dot: "w-4 h-4 top-0.5 left-0.5",
-        translate: "translate-x-5"
-      };
-    case "large":
-      return {
-        bg: "w-16 h-9",
-        dot: "w-7 h-7 top-1 left-1",
-        translate: "translate-x-7"
-      };
-    case "medium":
+    case "sm":
+      return { bg: "w-10 h-5", dot: "w-4 h-4 top-0.5 left-0.5", translate: "translate-x-5" };
+    case "lg":
+      return { bg: "w-16 h-9", dot: "w-7 h-7 top-1 left-1", translate: "translate-x-7" };
+    case "md":
     default:
-      return {
-        bg: "w-14 h-8",
-        dot: "w-6 h-6 top-1 left-1",
-        translate: "translate-x-6"
-      };
+      return { bg: "w-14 h-8", dot: "w-6 h-6 top-1 left-1", translate: "translate-x-6" };
   }
 });
-const toggleBgClasses = computed(
-  () => [
-    !isHex(props.trueColor) && isActive.value ? `bg-${props.trueColor}` : "",
-    !isHex(props.falseColor) && !isActive.value ? `bg-${props.falseColor}` : ""
-  ]
-);
-const toggleBgStyle = computed(
-  () => {
-    const style = {};
-    if (isActive.value && isHex(props.trueColor)) {
-      style.backgroundColor = props.trueColor;
-    }
-    if (!isActive.value && isHex(props.falseColor)) {
-      style.backgroundColor = props.falseColor;
-    }
-    return style;
-  }
-);
+const toggleBgClasses = computed(() => [
+  !isHex(props.trueColor) && isActive.value ? `bg-${props.trueColor}` : "",
+  !isHex(props.falseColor) && !isActive.value ? `bg-${props.falseColor}` : ""
+]);
+const toggleBgStyle = computed(() => {
+  const style = {};
+  if (isActive.value && isHex(props.trueColor)) style.backgroundColor = props.trueColor;
+  if (!isActive.value && isHex(props.falseColor)) style.backgroundColor = props.falseColor;
+  return style;
+});
 const toggle = () => {
-  if (props.disable)
-    return;
+  if (props.disabled) return;
   const newValue = isActive.value ? props.inactiveValue : props.activeValue;
-  emit(
-    "update:modelValue",
-    newValue
-  );
+  emit("update:modelValue", newValue);
 };
 </script>
 
 <template>
-  <div
-    :class="[
-  'toggle-container flex items-center',
-  customClasses
-]"
-    :style="{
-  flexDirection: labelPosition === 'top' || labelPosition === 'bottom' ? 'column' : 'row'
-}"
-  >
-    <!-- Top Label -->
-    <span
-      v-if="
-  label && labelPosition === 'top'
-"
-      class="mb-2 font-medium text-gray-700 dark:text-gray-300"
+  <div class="flex flex-col gap-1">
+    <div
+      :class="['toggle-container flex items-center', customClasses]"
+      :style="{ flexDirection: labelPosition === 'top' || labelPosition === 'bottom' ? 'column' : 'row' }"
     >
-      {{ label }}
-    </span>
+      <span v-if="label && labelPosition === 'top'" class="mb-2 font-medium text-gray-700 dark:text-gray-300">
+        {{ label }}
+      </span>
 
-    <!-- Left Label -->
-    <span
-      v-if="
-  label && labelPosition === 'left'
-"
-      class="mr-3 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
+      <span v-if="label && labelPosition === 'left'" class="mr-3 font-medium text-gray-700 dark:text-gray-300">
+        {{ label }}
+      </span>
 
-    <!-- Toggle -->
-    <div
-      :class="[
-  'relative inline-flex items-center cursor-pointer',
-  {
-    'opacity-50 pointer-events-none': disable
-  }
-]"
-      @click="toggle"
-    >
-      <!-- Background -->
-      <span
+      <div
+        role="switch"
+        tabindex="0"
+        :aria-checked="isActive"
+        :aria-disabled="disabled"
         :class="[
+  'relative inline-flex items-center cursor-pointer rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+  error ? 'focus-visible:ring-red-500' : 'focus-visible:ring-blue-500',
+  { 'opacity-50 pointer-events-none': disabled }
+]"
+        @click="toggle"
+        @keydown.enter.prevent="toggle"
+        @keydown.space.prevent="toggle"
+      >
+        <span
+          :class="[
   'block rounded-full transition-colors duration-300 ease-in-out',
   toggleSize.bg,
-  toggleBgClasses
+  toggleBgClasses,
+  error ? 'ring-2 ring-red-400' : ''
 ]"
-        :style="toggleBgStyle"
-      />
+          :style="toggleBgStyle"
+        />
 
-      <!-- Dot -->
-      <span
-        :class="[
+        <span
+          :class="[
   'toggle-dot absolute rounded-full bg-white transition-transform duration-300 ease-in-out shadow-md hover:glow-effect flex items-center justify-center',
   toggleSize.dot,
-  {
-    [toggleSize.translate]: isActive
-  }
+  { [toggleSize.translate]: isActive }
 ]"
-      >
-        <span
-          class="material-icons text-sm"
         >
-          {{
-            isActive ? activeIcon : inactiveIcon
-          }}
+          <span class="material-icons text-sm">
+            {{ isActive ? activeIcon : inactiveIcon }}
+          </span>
         </span>
+      </div>
+
+      <span v-if="label && labelPosition === 'bottom'" class="mt-2 font-medium text-gray-700 dark:text-gray-300">
+        {{ label }}
       </span>
-    </div>
 
-    <!-- Bottom Label -->
-    <span
-      v-if="
-  label && labelPosition === 'bottom'
-"
-      class="mt-2 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
+      <span v-if="label && labelPosition === 'right'" class="ml-3 font-medium text-gray-700 dark:text-gray-300">
+        {{ label }}
+      </span>
+    </div>
 
-    <!-- Right Label -->
-    <span
-      v-if="
-  label && labelPosition === 'right'
-"
-      class="ml-3 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
+    <span v-if="error && errorMessage" class="text-xs text-red-500">{{ errorMessage }}</span>
+    <span v-else-if="hint" class="text-xs text-gray-400 dark:text-gray-500">{{ hint }}</span>
   </div>
 </template>
 

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

package/dist/runtime/components/Tooltip.vue

@@ -4,6 +4,7 @@ defineOptions({
   inheritAttrs: false
 });
 import { computed, ref } from "vue";
+const tooltipId = `ui-tooltip-${Math.random().toString(36).slice(2, 10)}`;
 const props = defineProps({
   text: {
     type: String,
@@ -105,6 +106,7 @@ const arrowStyle = computed(() => {
   <div
     class="relative inline-block"
     tabindex="0"
+    :aria-describedby="visible ? tooltipId : void 0"
     @mouseenter="showTooltip"
     @mouseleave="hideTooltip"
     @focus="showTooltip"
@@ -117,6 +119,7 @@ const arrowStyle = computed(() => {
     <transition name="fade">
       <div
         v-if="visible"
+        :id="tooltipId"
         role="tooltip"
         class="absolute z-50"
         :class="[tooltipClasses, placementClasses]"

package/dist/runtime/components/uiProps.d.ts

@@ -11,7 +11,7 @@ export declare const uiProps: {
         readonly type: StringConstructor;
         readonly default: "";
     };
-    readonly disable: {
+    readonly disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ export declare const uiProps: {
     };
     readonly color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     readonly rounded: {
         readonly type: StringConstructor;

package/dist/runtime/components/uiProps.js

@@ -2,9 +2,9 @@ export const uiProps = {
   contentClass: { type: String, default: "" },
   contentStyle: { type: String, default: "" },
   textColor: { type: String, default: "" },
-  disable: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
-  color: { type: String, default: "blue-900" },
+  color: { type: String, default: "indigo-400" },
   rounded: { type: String, default: "md" },
   size: { type: String, default: "md" },
   iconSize: { type: String, default: "lg" }

package/dist/runtime/components/useUiClasses.d.ts

@@ -5,7 +5,7 @@ export declare function useUiClasses(props: Partial<UiProps>): {
     contentClass: any;
     contentStyle: any;
     textColor: any;
-    disable: any;
+    disabled: any;
     loading: any;
     color: any;
     rounded: any;
@@ -21,9 +21,11 @@ export declare function useUiClasses(props: Partial<UiProps>): {
         full: string;
     };
     sizeClass: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     iconSizeClasses: {
         xs: string;

package/dist/runtime/components/useUiClasses.js

@@ -4,7 +4,7 @@ export function useUiClasses(props) {
     contentClass: "",
     contentStyle: "",
     textColor: "",
-    disable: false,
+    disabled: false,
     loading: false,
     color: "",
     rounded: "md",
@@ -16,7 +16,7 @@ export function useUiClasses(props) {
     contentClass,
     contentStyle,
     textColor,
-    disable,
+    disabled,
     loading,
     color,
     rounded,
@@ -33,9 +33,11 @@ export function useUiClasses(props) {
     full: "rounded-full"
   };
   const sizeClass = {
-    sm: "text-xs",
+    xs: "text-xs",
+    sm: "text-sm",
     md: "text-base",
-    lg: "text-xl"
+    lg: "text-lg",
+    xl: "text-xl"
   };
   const iconSizeClasses = {
     xs: "text-xs",
@@ -102,7 +104,7 @@ export function useUiClasses(props) {
     contentClass,
     contentStyle,
     textColor,
-    disable,
+    disabled,
     loading,
     color,
     rounded,