vueless 0.0.554 → 0.0.556

package/ui.form-textarea/UTextarea.vue

@@ -53,8 +53,10 @@
 <script setup>
 import { computed, onMounted, ref, watch, useSlots, useId } from "vue";
 
-import ULabel from "../ui.form-label/ULabel.vue";
 import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+
+import ULabel from "../ui.form-label/ULabel.vue";
 
 import { UTextarea } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -232,14 +234,8 @@ const slots = useSlots();
 
 const elementId = props.id || useId();
 
-const {
-  textareaAttrs,
-  textareaLabelAttrs,
-  textareaWrapperAttrs,
-  leftSlotAttrs,
-  rightSlotAttrs,
-  hasSlotContent,
-} = useAttrs(props);
+const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
+  useAttrs(props);
 
 const textareaRef = ref(null);
 const labelComponentRef = ref(null);

package/ui.form-textarea/useAttrs.js

@@ -4,18 +4,12 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     error: Boolean(props.error),
     label: Boolean(props.label),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.image-avatar/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UAvatarProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UAvatarProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.image-icon/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UIconProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UIconProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.loader/config.ts

@@ -16,7 +16,7 @@ export default /*tw*/ {
     },
   },
   ellipse: {
-    base: "absolute rounded-full bg-{color}-600 ease-[cubic-bezier(0,1,1,0)]",
+    base: "absolute rounded-full bg-{color}-600 ease-[cubic-bezier(0,1,1,0)] vueless-loader-ellipse",
     variants: {
       color: {
         white: "bg-white",
@@ -30,6 +30,7 @@ export default /*tw*/ {
           [&:nth-child(2)]:left-1
           [&:nth-child(3)]:left-4
           [&:nth-child(4)]:left-7
+          vueless-loader-ellipse-sm
         `,
         md: `
           size-2.5
@@ -37,6 +38,7 @@ export default /*tw*/ {
           [&:nth-child(2)]:left-1.5
           [&:nth-child(3)]:left-6
           [&:nth-child(4)]:left-[2.625rem]
+          vueless-loader-ellipse-md
         `,
         lg: `
           size-4
@@ -44,6 +46,7 @@ export default /*tw*/ {
           [&:nth-child(2)]:left-2
           [&:nth-child(3)]:left-8
           [&:nth-child(4)]:left-14
+          vueless-loader-ellipse-lg
         `,
       },
     },

package/ui.loader/useAttrs.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
@@ -7,21 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { ULoaderProps, Config } from "./types.ts";
 
 export default function useAttrs(props: ULoaderProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-    "loader",
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config, "loader");
 
-  const keysAttrs = getKeysAttrs({}, [], {
-    ellipse: {
-      extend: computed(() => ["vueless-loader-ellipse", `vueless-loader-ellipse-${props.size}`]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.loader-overlay/useAttrs.ts

@@ -6,17 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { ULoaderOverlayProps, Config } from "./types.ts";
 
 export default function useAttrs(props: ULoaderOverlayProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-    "overlay",
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config, "overlay");
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.loader-progress/ULoaderProgress.vue

@@ -2,7 +2,6 @@
 import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
-import { isMobileApp } from "../utils/platform.ts";
 import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.ts";
 import { useLoaderProgress } from "./useLoaderProgress.ts";
 import useAttrs from "./useAttrs.ts";
@@ -16,6 +15,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<ULoaderProgressProps>(), {
   color: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).color,
+  size: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).size,
   loading: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).loading,
 });
 
@@ -34,7 +34,7 @@ const {
   addRequestUrl,
 } = useLoaderProgress();
 
-const { stripeAttrs } = useAttrs(props, { isMobileApp });
+const { stripeAttrs } = useAttrs(props);
 
 const isStarted = computed(() => {
   return typeof status.value === "number";

package/ui.loader-progress/config.ts

@@ -1,19 +1,25 @@
 export default /*tw*/ {
   stripe: {
-    base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-600",
+    base: "top-0 left-0 right-0 fixed transition-all ease-linear bg-{color}-600",
     variants: {
       color: {
         white: "bg-white",
         grayscale: "bg-gray-900",
       },
+      size: {
+        xs: "h-px",
+        sm: "h-0.5",
+        md: "h-[3px]",
+        lg: "h-1",
+      },
       error: {
         true: "bg-red-600",
       },
     },
   },
-  stripeMobile: "",
   defaults: {
     color: "brand",
+    size: "md",
     loading: false,
   },
 };

package/ui.loader-progress/types.ts

@@ -34,6 +34,11 @@ export interface ULoaderProgressProps {
    */
   resources?: string | string[];
 
+  /**
+   * Progress size.
+   */
+  size?: "xs" | "sm" | "md" | "lg";
+
   /**
    * Loader state (shown / hidden).
    */

package/ui.loader-progress/useAttrs.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
@@ -6,31 +5,8 @@ import defaultConfig from "./config.ts";
 import type { UseAttrs } from "../types.ts";
 import type { ULoaderProgressProps, Config } from "./types.ts";
 
-type ComponentState = {
-  isMobileApp: boolean;
-};
+export default function useAttrs(props: ULoaderProgressProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-export default function useAttrs(
-  props: ULoaderProgressProps,
-  { isMobileApp }: ComponentState,
-): UseAttrs<Config> {
-  const { config, getKeysAttrs, getExtendingKeysClasses, hasSlotContent } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
-
-  const extendingKeys = ["stripeMobile"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    stripe: {
-      extend: computed(() => [isMobileApp && extendingKeysClasses.linkWithChild.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.navigation-pagination/config.ts

@@ -8,12 +8,12 @@ export default /*tw*/ {
       },
     },
   },
-  firstButton: "{UButton}",
-  lastButton: "{UButton}",
-  prevButton: "{UButton}",
-  nextButton: "{UButton}",
-  inactiveButton: "{UButton}",
-  activeButton: "{UButton}",
+  firstButton: "{UButton} {>paginationButton}",
+  lastButton: "{UButton} {>paginationButton}",
+  prevButton: "{UButton} {>paginationButton}",
+  nextButton: "{UButton} {>paginationButton}",
+  inactiveButton: "{UButton} {>paginationButton}",
+  activeButton: "{UButton} {>paginationButton}",
   lastIcon: "{UIcon}",
   firstIcon: "{UIcon}",
   prevIcon: "{UIcon}",

package/ui.navigation-pagination/useAttrs.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
@@ -7,38 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UPaginationProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UPaginationProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const extendingKeys = ["paginationButton"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    firstButton: {
-      base: computed(() => [extendingKeysClasses.paginationButton.value]),
-    },
-    lastButton: {
-      base: computed(() => [extendingKeysClasses.paginationButton.value]),
-    },
-    prevButton: {
-      base: computed(() => [extendingKeysClasses.paginationButton.value]),
-    },
-    nextButton: {
-      base: computed(() => [extendingKeysClasses.paginationButton.value]),
-    },
-    activeButton: {
-      base: computed(() => [extendingKeysClasses.paginationButton.value]),
-    },
-    inactiveButton: {
-      base: computed(() => [extendingKeysClasses.paginationButton.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.navigation-progress/config.ts

@@ -78,7 +78,6 @@ export default /*tw*/ {
       },
     },
   },
-  stepFirst: "text-gray-500",
   step: {
     base: "text-{color}-600 flex justify-end w-full transition",
     variants: {
@@ -99,6 +98,9 @@ export default /*tw*/ {
         xl: "text-xl",
         "2xl": "text-2xl",
       },
+      value: {
+        false: "text-gray-500",
+      },
     },
   },
   defaults: {

package/ui.navigation-progress/useAttrs.ts

@@ -7,23 +7,11 @@ import type { UseAttrs } from "../types.ts";
 import type { UProgressProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UProgressProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const extendingKeys = ["stepFirst"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const mutatedProps = computed(() => ({
+    value: Boolean(props.value),
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    step: {
-      base: computed(() => [!props.value && extendingKeysClasses.stepFirst.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.navigation-tab/config.ts

@@ -10,9 +10,11 @@ export default /*tw*/ {
       disabled: {
         true: "text-gray-400 cursor-not-allowed",
       },
+      selected: {
+        true: "border-b-2 text-brand-700 border-brand-700",
+      },
     },
   },
-  tabActive: "border-b-2 text-brand-700 border-brand-700",
   defaults: {
     size: "md",
     disabled: false,

package/ui.navigation-tab/useAttrs.ts

@@ -16,27 +16,13 @@ export default function useAttrs(
   props: UTabProps,
   { selected, size }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     size: size.value,
+    /* component state, not a props */
+    selected: selected.value,
   }));
 
-  const extendingKeys = ["tabActive"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    tab: {
-      extend: computed(() => [selected.value && extendingKeysClasses.tabActive.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.navigation-tabs/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UTabsProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UTabsProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.other-dot/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UDotProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UDotProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-alert/UAlert.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
+
 import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -45,7 +47,6 @@ const {
   closeButtonAttrs,
   closeIconAttrs,
   contentWrapperAttrs,
-  hasSlotContent,
 } = useAttrs(props);
 
 onMounted(() => {

package/ui.text-alert/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UAlertProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UAlertProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-badge/useAttrs.ts

@@ -1,5 +1,6 @@
 import { computed, useSlots } from "vue";
 import useUI from "../composables/useUI.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import defaultConfig from "./config.ts";
 
@@ -7,7 +8,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UBadgeProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UBadgeProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
   const slots = useSlots();
 
   const mutatedProps = computed(() => ({
@@ -16,11 +17,5 @@ export default function useAttrs(props: UBadgeProps): UseAttrs<Config> {
     rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.text-block/UText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import { UText } from "./constants.ts";
 import defaultConfig from "./config.ts";
@@ -16,7 +17,7 @@ const props = withDefaults(defineProps<UTextProps>(), {
   dataTest: "",
 });
 
-const { wrapperAttrs, htmlAttrs, hasSlotContent } = useAttrs(props);
+const { wrapperAttrs, htmlAttrs } = useAttrs(props);
 </script>
 
 <template>

package/ui.text-block/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UTextProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UTextProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-empty/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UEmptyProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UEmptyProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-file/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UFileProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UFileProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-files/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UFilesProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UFilesProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-header/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UHeaderProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UHeaderProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.text-money/UMoney.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import { UMoney } from "./constants.ts";
 import defaultConfig from "./config.ts";
@@ -36,7 +37,6 @@ const {
   slotLeftAttrs,
   symbolAttrs,
   slotRightAttrs,
-  hasSlotContent,
 } = useAttrs(props);
 
 const currencySymbolPosition = computed(() => {