vueless 0.0.554 → 0.0.556

package/ui.form-date-picker-range/config.ts

@@ -12,13 +12,21 @@ export default /*tw*/ {
       },
     },
   },
-  buttonWrapper: `
-    flex rounded-dynamic max-md:justify-between
-    focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
-  `,
-  button: "{UButton} shrink-0 grow rounded-none",
-  buttonActive: "",
-  buttonWrapperActive: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
+  buttonWrapper: {
+    base: `
+      flex rounded-dynamic max-md:justify-between
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
+    `,
+    variants: {
+      opened: {
+        true: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
+      },
+    },
+  },
+  button: {
+    component: "{UButton}",
+    base: "shrink-0 grow rounded-none",
+  },
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
     last:rounded-dynamic last:rounded-l-none
@@ -57,19 +65,25 @@ export default /*tw*/ {
   },
   periodRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
-  periodButtonActive: "!bg-gray-800/20",
+  periodButtonActive: "{>periodButton} !bg-gray-800/20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
   rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",
-  periodDateList: "",
-  periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
-  periodDateWeekList: "",
-  periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
-  periodDateQuarterList: "",
+  periodDateList: {
+    base: "grid grid-rows-1 gap-0.5",
+    variants: {
+      month: {
+        true: "grid-cols-3",
+      },
+      year: {
+        true: "grid-cols-3",
+      },
+    },
+  },
   periodDate: "w-full",
-  periodDateSelected: "",
-  periodDateCurrent: "border-2 border-brand-600",
-  periodDateCurrentSelected: "",
+  periodDateSelected: "{>periodDate}",
+  periodDateCurrent: "{>periodDate} border-2 border-brand-600",
+  periodDateCurrentSelected: "{>periodDate} {>periodDateSelected} {>periodDateCurrent}",
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
   rangeInputFirst: {

package/ui.form-date-picker-range/useAttrs.ts

@@ -22,79 +22,22 @@ export default function useAttrs(
   props: UDatePickerRangeProps<unknown>,
   { isShownMenu, isTop, isRight, isPeriod }: DatePickerRangeState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
     openDirectionX: isRight.value ? Direction.Right : Direction.Left,
     error: Boolean(props.error),
     description: Boolean(props.description),
+    /* component state, not a props */
+    opened: isShownMenu.value,
+    week: isPeriod.value.week,
+    month: isPeriod.value.month,
+    quarter: isPeriod.value.quarter,
+    year: isPeriod.value.year,
   }));
 
-  const extendingKeys = ["buttonWrapperActive", "buttonActive", "periodDateMonthList"];
-  const extendingKeysClasses = getExtendingKeysClasses(
-    [
-      ...extendingKeys,
-      "periodButton",
-      "periodDateList",
-      "periodDate",
-      "periodDateWeekList",
-      "periodDateQuarterList",
-      "periodDateYearList",
-      "periodDateSelected",
-      "periodDateCurrent",
-    ],
-    mutatedProps,
-  );
-
-  // TODO: Declare types for getKeysAttrs return value, this could be implemented using generic;
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    buttonWrapper: {
-      extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonWrapperActive.value]),
-    },
-    button: {
-      extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonActive.value]),
-    },
-    periodDateList: {
-      extend: computed(() => [
-        isPeriod.value.week && extendingKeysClasses.periodDateWeekList.value,
-        isPeriod.value.month && extendingKeysClasses.periodDateMonthList.value,
-        isPeriod.value.quarter && extendingKeysClasses.periodDateQuarterList.value,
-        isPeriod.value.year && extendingKeysClasses.periodDateYearList.value,
-      ]),
-    },
-    periodButtonActive: {
-      base: computed(() => [extendingKeysClasses.periodButton.value]),
-    },
-    periodDateWeekList: {
-      base: computed(() => [extendingKeysClasses.periodDateList.value]),
-    },
-    periodDateQuarterList: {
-      base: computed(() => [extendingKeysClasses.periodDateList.value]),
-    },
-    periodDateYearList: {
-      base: computed(() => [extendingKeysClasses.periodDateList.value]),
-    },
-    periodDateSelected: {
-      base: computed(() => [extendingKeysClasses.periodDate.value]),
-    },
-    periodDateCurrent: {
-      base: computed(() => [
-        extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.periodDateCurrent.value,
-      ]),
-    },
-    periodDateCurrentSelected: {
-      base: computed(() => [
-        extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.periodDateSelected.value,
-        extendingKeysClasses.periodDateCurrent.value,
-      ]),
-    },
-  });
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
   watchEffect(() => {
@@ -106,9 +49,5 @@ export default function useAttrs(
     }
   });
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...keysAttrs };
 }

package/ui.form-input/UInput.vue

@@ -113,6 +113,7 @@ const VALIDATION_RULES_REG_EX = {
 <script setup>
 import { ref, computed, onMounted, useSlots, useId } from "vue";
 
+import { hasSlotContent } from "../utils/helper.ts";
 import { useMutationObserver } from "../composables/useMutationObserver.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -358,7 +359,6 @@ const {
   leftIconAttrs,
   rightIconAttrs,
   rightIconWrapperAttrs,
-  hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
 const iconSize = computed(() => {

package/ui.form-input/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.form-input-file/UInputFile.vue

@@ -96,11 +96,11 @@ import UButton from "../ui.button/UButton.vue";
 import UFiles from "../ui.text-files/UFiles.vue";
 
 import { getDefault } from "../utils/ui.ts";
-import { getFileMbSize } from "./utilFileForm.js";
-
-import useAttrs from "./useAttrs.js";
+import { hasSlotContent } from "../utils/helper.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
+import useAttrs from "./useAttrs.js";
+import { getFileMbSize } from "./utilFileForm.js";
 import { UInputFile } from "./constants.js";
 import defaultConfig from "./config.js";
 
@@ -247,7 +247,6 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonsAttrs,
-  hasSlotContent,
 } = useAttrs(props);
 
 const i18nGlobal = tm(UInputFile);

package/ui.form-input-file/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.form-input-money/useAttrs.js

@@ -3,13 +3,7 @@ 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 keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-input-number/useAttrs.js

@@ -3,13 +3,7 @@ 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 keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-input-rating/UInputRating.vue

@@ -54,9 +54,11 @@
 <script setup>
 import { computed, ref } from "vue";
 
+import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UInputRating } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -174,16 +176,8 @@ const emit = defineEmits([
 
 const hovered = ref(null);
 
-const {
-  config,
-  inputLabelAttrs,
-  containerAttrs,
-  counterAttrs,
-  totalAttrs,
-  starsAttrs,
-  starAttrs,
-  hasSlotContent,
-} = useAttrs(props);
+const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+  useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {

package/ui.form-input-rating/useAttrs.js

@@ -2,13 +2,7 @@ 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 keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-input-search/useAttrs.js

@@ -3,13 +3,7 @@ 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 keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-label/useAttrs.js

@@ -4,17 +4,11 @@ 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),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-radio/useAttrs.ts

@@ -16,7 +16,7 @@ export default function useAttrs(
   props: URadioProps,
   { radioColor, radioSize }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     color: radioColor.value,
@@ -25,11 +25,5 @@ export default function useAttrs(
     error: Boolean(props.error),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-radio-group/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { URadioGroupProps, Config } from "./types.ts";
 
 export default function useAttrs(props: URadioGroupProps): 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.form-select/USelect.vue

@@ -318,7 +318,7 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { createDebounce } from "../utils/helper.ts";
+import { createDebounce, hasSlotContent } from "../utils/helper.ts";
 import { getDefault } from "../utils/ui.ts";
 import { isMac } from "../utils/platform.ts";
 
@@ -599,38 +599,8 @@ const isTop = computed(() => {
   return preferredOpenDirection.value === DIRECTION.top;
 });
 
-const selectedLabel = computed(() => {
-  return isLocalValue.value ? getOptionLabel(localValue.value) : "";
-});
-
 const elementId = props.id || useId();
 
-const {
-  config,
-  hasSlotContent,
-  selectLabelAttrs,
-  wrapperAttrs,
-  innerWrapperAttrs,
-  leftIconWrapperAttrs,
-  rightIconWrapperAttrs,
-  leftIconAttrs,
-  rightIconAttrs,
-  beforeCaretAttrs,
-  afterCaretAttrs,
-  toggleAttrs,
-  clearAttrs,
-  clearMultipleTextAttrs,
-  clearMultipleAttrs,
-  searchAttrs,
-  searchInputAttrs,
-  selectedLabelsAttrs,
-  selectedLabelAttrs,
-  dropdownListAttrs,
-  toggleIconAttrs,
-  clearIconAttrs,
-  clearMultipleIconAttrs,
-} = useAttrs(props, { isTop, isOpen, selectedLabel });
-
 const i18nGlobal = tm(USelect);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
@@ -705,13 +675,6 @@ const localValue = computed(() => {
     : [];
 });
 
-const isEmpty = computed(() => {
-  return (
-    (filteredOptions.value.length === 0 && search) ||
-    (props.multiple && localValue.value.length === props.options.length)
-  );
-});
-
 const isLocalValue = computed(() => {
   if (props.multiple) return Boolean(localValue.value.length);
 
@@ -720,6 +683,42 @@ const isLocalValue = computed(() => {
     : Boolean(String(localValue.value));
 });
 
+const selectedLabel = computed(() => {
+  return isLocalValue.value ? getOptionLabel(localValue.value) : "";
+});
+
+const isEmpty = computed(() => {
+  return (
+    (filteredOptions.value.length === 0 && search) ||
+    (props.multiple && localValue.value.length === props.options.length)
+  );
+});
+
+const {
+  config,
+  selectLabelAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  leftIconWrapperAttrs,
+  rightIconWrapperAttrs,
+  leftIconAttrs,
+  rightIconAttrs,
+  beforeCaretAttrs,
+  afterCaretAttrs,
+  toggleAttrs,
+  clearAttrs,
+  clearMultipleTextAttrs,
+  clearMultipleAttrs,
+  searchAttrs,
+  searchInputAttrs,
+  selectedLabelsAttrs,
+  selectedLabelAttrs,
+  dropdownListAttrs,
+  toggleIconAttrs,
+  clearIconAttrs,
+  clearMultipleIconAttrs,
+} = useAttrs(props, { isTop, isOpen, selectedLabel });
+
 const onSearchChange = createDebounce(function (query) {
   emit("searchChange", query);
 }, 300);

package/ui.form-select/config.js

@@ -1,7 +1,15 @@
 export default /*tw*/ {
-  selectLabel: "{ULabel}",
-  selectLabelActive: "group/active",
-  selectLabelOpenDirectionTop: "group/top",
+  selectLabel: {
+    component: "{ULabel}",
+    variants: {
+      opened: {
+        true: "group/active",
+      },
+      openedTop: {
+        true: "group/top",
+      },
+    },
+  },
   wrapper: {
     base: `
       py-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
@@ -20,6 +28,9 @@ export default /*tw*/ {
       disabled: {
         true: "bg-gray-100 pointer-events-none",
       },
+      opened: {
+        true: "z-[inherit]",
+      },
     },
     compoundVariants: [
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
@@ -27,7 +38,6 @@ export default /*tw*/ {
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
-  wrapperActive: "z-[inherit]",
   innerWrapper: {
     base: "px-3 flex min-h-full w-full overflow-hidden justify-between",
     variants: {
@@ -62,11 +72,11 @@ export default /*tw*/ {
     ],
   },
   leftIconWrapper: "pr-1.5",
-  rightIconWrapper: "pr-3",
+  rightIconWrapper: "{>caret} pr-3",
   leftIcon: "{UIcon}",
   rightIcon: "{UIcon}",
-  beforeCaret: "",
-  afterCaret: "mr-3",
+  beforeCaret: "{>caret}",
+  afterCaret: "{>caret} mr-3",
   caret: {
     base: "flex items-center mt-0",
     compoundVariants: [
@@ -75,9 +85,9 @@ export default /*tw*/ {
       { labelAlign: "topInside", size: "lg", label: true, class: "-mt-[1.125rem]" },
     ],
   },
-  toggle: "mr-3",
+  toggle: "{>caret} mr-3",
   toggleIcon: "{UIcon} transition duration-300 group-[]/active:rotate-180",
-  clear: "",
+  clear: "{>caret}",
   clearIcon: "{UIcon}",
   clearMultiple: "flex items-center",
   clearMultipleIcon: "{UIcon}",
@@ -89,8 +99,17 @@ export default /*tw*/ {
       { size: "lg", class: "text-base" },
     ],
   },
-  search: "flex w-0",
-  searchActive: "w-full",
+  search: {
+    base: "flex w-0",
+    variants: {
+      selected: {
+        false: "w-full",
+      },
+      opened: {
+        true: "w-full",
+      },
+    },
+  },
   searchInput: {
     base: `
         p-0 font-normal !leading-none text-gray-900 relative w-full border-none bg-transparent

package/ui.form-select/useAttrs.js

@@ -4,60 +4,16 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     error: Boolean(props.error),
     label: Boolean(props.label),
+    /* component state, not a props */
+    selected: Boolean(selectedLabelValue.value),
+    opened: isOpen.value,
+    openedTop: isTop.value,
   }));
 
-  const extendingKeys = [
-    "caret",
-    "searchActive",
-    "wrapperActive",
-    "selectLabelActive",
-    "selectLabelOpenDirectionTop",
-  ];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
-
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    selectLabel: {
-      extend: computed(() => [
-        isOpen.value && extendingKeysClasses.selectLabelActive.value,
-        isTop.value && extendingKeysClasses.selectLabelOpenDirectionTop.value,
-      ]),
-    },
-    wrapper: {
-      extend: computed(() => [isOpen.value && extendingKeysClasses.wrapperActive.value]),
-    },
-    toggle: {
-      base: computed(() => [extendingKeysClasses.caret.value]),
-    },
-    clear: {
-      base: computed(() => [extendingKeysClasses.caret.value]),
-    },
-    beforeCaret: {
-      base: computed(() => [extendingKeysClasses.caret.value]),
-    },
-    afterCaret: {
-      base: computed(() => [extendingKeysClasses.caret.value]),
-    },
-    rightIconWrapper: {
-      base: computed(() => [extendingKeysClasses.caret.value]),
-    },
-    search: {
-      extend: computed(() => [
-        (!selectedLabelValue.value || isOpen.value) && extendingKeysClasses.searchActive.value,
-      ]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-switch/useAttrs.js

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