vueless 0.0.548 → 0.0.550

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.548",
+  "version": "0.0.550",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -43,6 +43,8 @@ import UIconConfig from "./ui.image-icon/config.ts";
 import UCheckboxConfig from "./ui.form-checkbox/config.ts";
 import UCheckboxGroupConfig from "./ui.form-checkbox-group/config.ts";
 import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config.ts";
+import URadioConfig from "./ui.form-radio/config.ts";
+import URadioGroupConfig from "./ui.form-radio-group/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -199,6 +201,8 @@ export interface Components {
   UCheckbox?: Partial<typeof UCheckboxConfig>;
   UCheckboxGroup?: Partial<typeof UCheckboxGroupConfig>;
   UCheckboxMultiState?: Partial<typeof UCheckboxMultiStateConfig>;
+  URadio?: Partial<typeof URadioConfig>;
+  URadioGroup?: Partial<typeof URadioGroupConfig>;
 }
 
 export interface Directives {

package/ui.button/UButton.vue

@@ -10,7 +10,7 @@ import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.ts";
 import { UButton } from "./constants.ts";
 
-import type { UButtonProps } from "./types.ts";
+import type { UButtonProps, LoaderSize, IconSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -37,7 +37,7 @@ const { isDarkMode } = useDarkMode();
 const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
   useAttrs(props);
 
-const buttonRef = ref(null);
+const buttonRef = ref<HTMLElement | null>(null);
 const buttonStyle = ref({});
 const buttonWidth = ref(0);
 
@@ -51,7 +51,7 @@ const loaderSize = computed(() => {
     xl: "lg",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as LoaderSize;
 });
 
 const iconSize = computed(() => {
@@ -64,7 +64,7 @@ const iconSize = computed(() => {
     xl: "sm",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
 const iconColor = computed(() => {
@@ -92,7 +92,7 @@ watch(
 );
 
 watchEffect(() => {
-  props.loading && buttonRef.value.blur();
+  props.loading && buttonRef?.value?.blur();
 });
 
 defineExpose({

package/ui.button/types.ts

@@ -2,6 +2,9 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type LoaderSize = "sm" | "md" | "lg";
+export type IconSize = "2xs" | "xs" | "sm" | "md";
+
 export interface UButtonProps {
   /**
    * Button variant.

package/ui.button-link/ULink.vue

@@ -59,19 +59,27 @@ const emit = defineEmits([
 ]);
 
 const isPresentRoute = computed(() => {
-  for (const key in props.to) return true;
+  return typeof props.to === "string" || typeof props.to === "object";
+});
+
+const safeTo = computed(() => {
+  if (!props.to) {
+    return "/";
+  }
 
-  return false;
+  return props.to;
 });
 
-const { route, isActive, isExactActive } = useLink({
+const useLinkOptions = {
   activeClass: props.activeClass,
   ariaCurrentValue: props.ariaCurrentValue,
   exactActiveClass: props.exactActiveClass,
   custom: props.custom,
   replace: props.replace,
-  to: isPresentRoute.value ? props.to : "/",
-});
+  to: safeTo.value,
+};
+
+const { route, isActive, isExactActive } = useLink(useLinkOptions);
 
 const wrapperRef = ref(null);
 
@@ -88,26 +96,26 @@ const prefixedHref = computed(() => {
     link: "",
   };
 
-  return props.href ? `${types[props.type]}${props.href}` : null;
+  return props.href ? `${types[props.type]}${props.href}` : undefined;
 });
 
-function onClick(event) {
+function onClick(event: MouseEvent) {
   emit("click", event);
 }
 
-function onMouseover(event) {
+function onMouseover(event: MouseEvent) {
   emit("mouseover", event);
 }
 
-function onFocus(event) {
+function onFocus(event: FocusEvent) {
   emit("focus", event);
 }
 
-function onKeydown(event) {
+function onKeydown(event: KeyboardEvent) {
   emit("keydown", event);
 }
 
-function onBlur(event) {
+function onBlur(event: FocusEvent) {
   emit("blur", event);
 }
 

package/ui.button-toggle/UToggle.vue

@@ -58,20 +58,19 @@ const type = computed(() => {
   return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
 });
 
-function updateSelectedValue(value, checked) {
+function updateSelectedValue(value: string | number, checked: boolean) {
   if (type.value === TYPE_RADIO) {
     selectedValue.value = value;
 
     return;
   }
 
-  if (checked) {
-    const items = selectedValue.value || [];
-
-    items.push(value);
-    selectedValue.value = items;
+  if (Array.isArray(selectedValue.value)) {
+    selectedValue.value = checked
+      ? [...selectedValue.value, value]
+      : selectedValue.value.filter((item) => String(item) !== String(value));
   } else {
-    selectedValue.value = selectedValue.value.filter((item) => String(item) !== String(value));
+    selectedValue.value = [value];
   }
 }
 

package/ui.button-toggle/types.ts

@@ -2,6 +2,11 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export interface UToggleOption {
+  value: string | number;
+  label: string;
+}
+
 export interface UToggleProps {
   /**
    * Selected value.
@@ -11,7 +16,7 @@ export interface UToggleProps {
   /**
    * Toggle item options.
    */
-  options?: Array<string | number>;
+  options?: UToggleOption[];
 
   /**
    * Toggle variant.

package/ui.button-toggle-item/UToggleItem.vue

@@ -10,7 +10,9 @@ import useAttrs from "./useAttrs.ts";
 import defaultConfig from "./config.ts";
 import { UToggleItem } from "./constants.ts";
 
-import type { UToggleItemProps } from "./types.ts";
+import type { UToggleItemProps, ToggleInjectValues, ToggleContextType } from "./types.ts";
+
+type ButtonSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
 defineOptions({ inheritAttrs: false });
 
@@ -27,23 +29,40 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-/* eslint-disable prettier/prettier, vue/max-len */
-const getToggleName = inject("getToggleName", () => "toggle");
-const getToggleType = inject("getToggleType", () => getDefault(defaultConfig, UToggleItem).type);
-const getToggleSize = inject("getToggleSize", () => getDefault(defaultConfig, UToggleItem).size);
-const getToggleRound = inject("getToggleRound", () => getDefault(defaultConfig, UToggleItem).round);
-const getToggleBlock = inject("getToggleBlock", () => getDefault(defaultConfig, UToggleItem).block);
-const getToggleSquare = inject("getToggleSquare", () => getDefault(defaultConfig, UToggleItem).square);
-const getToggleVariant = inject("getToggleVariant", () => getDefault(defaultConfig, UToggleItem).variant);
-const getToggleSeparated = inject("getToggleSeparated", () => true);
-const getToggleDisabled = inject("getToggleDisabled", () => props.disabled || getDefault(defaultConfig, UToggleItem).disabled);
-/* eslint-enable prettier/prettier, vue/max-len */
-
-const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
+/* eslint-disable prettier/prettier */
+const getToggleName = inject<() => string>("getToggleName", () => "toggle");
+const getToggleType = inject<() => string>("getToggleType", () =>
+  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).type || TYPE_RADIO
+);
+const getToggleSize = inject<() => ButtonSize>("getToggleSize", () =>
+  (getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).size || "md") as ButtonSize
+);
+const getToggleRound = inject<() => boolean>("getToggleRound", () =>
+  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).round || false
+);
+const getToggleBlock = inject<() => boolean>("getToggleBlock", () =>
+  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).block || false
+);
+const getToggleSquare = inject<() => boolean>("getToggleSquare", () =>
+  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).square || false
+);
+const getToggleVariant = inject<string>("getToggleVariant",
+  getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).variant || "secondary"
+);
+const getToggleSeparated = inject<boolean>("getToggleSeparated", true);
+const getToggleDisabled = inject<() => boolean>("getToggleDisabled", () =>
+  props.disabled || getDefault<ToggleInjectValues>(defaultConfig, UToggleItem).disabled || false
+);
+/* eslint-enable prettier/prettier */
+
+const { selectedValue, updateSelectedValue } = inject<ToggleContextType>("toggleSelectedValue", {
+  selectedValue: ref(""),
+  updateSelectedValue: () => {},
+});
 
 const elementId = props.id || useId();
 
-const selectedItem = ref("");
+const selectedItem = ref<string | boolean>("");
 
 const isSelected = computed(() => {
   return Array.isArray(selectedValue?.value)
@@ -58,19 +77,23 @@ const { toggleButtonAttrs, toggleInputAttrs } = useAttrs(props, {
 });
 
 onMounted(() => {
+  const propValueString = props.value?.toString() ?? "";
+
   selectedItem.value =
     getToggleType() === TYPE_RADIO
-      ? selectedValue?.value || selectedItem.value
-      : selectedValue?.value?.includes(props.value) || "";
+      ? (selectedValue?.value ?? "")
+      : Boolean(selectedValue?.value?.includes(propValueString));
 });
 
 function onClickSetValue() {
+  const propValueString = props.value?.toString() ?? "";
+
   selectedItem.value =
     getToggleType() === TYPE_RADIO
-      ? props.value
-      : selectedValue?.value?.includes(props.value) || "";
+      ? propValueString
+      : Boolean(selectedValue?.value?.includes(propValueString));
 
-  updateSelectedValue && updateSelectedValue(props.value, !selectedItem.value);
+  updateSelectedValue && updateSelectedValue(propValueString, !selectedItem.value);
 
   emit("update:modelValue", props.value);
 }
@@ -80,7 +103,7 @@ function onClickSetValue() {
   <UButton
     tabindex="0"
     :for="elementId"
-    :no-ring="!getToggleSeparated()"
+    :no-ring="!getToggleSeparated"
     color="grayscale"
     variant="secondary"
     :label="label"

package/ui.button-toggle-item/types.ts

@@ -1,7 +1,26 @@
 import defaultConfig from "./config.ts";
 
+import type { Ref } from "vue";
+
+type UpdateSelectedValue = (value: string | number, checked: boolean) => void;
+
 export type Config = Partial<typeof defaultConfig>;
 
+export interface ToggleInjectValues {
+  type?: string;
+  size?: string;
+  round?: boolean;
+  block?: boolean;
+  square?: boolean;
+  variant?: string;
+  disabled?: boolean;
+}
+
+export interface ToggleContextType {
+  selectedValue: Ref<string>;
+  updateSelectedValue: UpdateSelectedValue;
+}
+
 export interface UToggleItemProps {
   /**
    * Selected value.

package/ui.button-toggle-item/useAttrs.ts

@@ -8,7 +8,7 @@ import type { UToggleItemProps, Config } from "./types.ts";
 
 type itemState = {
   isSelected: Ref<boolean>;
-  separated: Ref<boolean>;
+  separated: boolean;
   variant: string;
 };
 

package/ui.container-modal-confirm/types.ts

@@ -27,9 +27,7 @@ export interface UModalConfirmProps {
    * Confirm button color.
    */
   confirmColor?:
-    | "brand"
     | "grayscale"
-    | "gray"
     | "red"
     | "orange"
     | "amber"
@@ -47,7 +45,9 @@ export interface UModalConfirmProps {
     | "fuchsia"
     | "pink"
     | "rose"
-    | "white";
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Set the disabled accept-button.

package/ui.data-table/UTable.vue

@@ -206,7 +206,6 @@ const {
   tableWrapperAttrs,
   headerRowAttrs,
   bodyRowAfterAttrs,
-  bodyRowAfterCellAttrs,
   bodyRowBeforeAttrs,
   bodyRowBeforeCellAttrs,
   footerAttrs,
@@ -576,17 +575,11 @@ defineExpose({
       <table v-bind="tableAttrs">
         <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs">
-            <td
-              v-if="hasSlotContent($slots['before-header'])"
-              :colspan="colsCount"
-              v-bind="headerCellBaseAttrs"
-            >
-              <!--
+            <!--
                 @slot Use it to add something before header row.
                 @binding {number} cols-count
               -->
-              <slot name="before-header" :cols-count="colsCount" />
-            </td>
+            <slot name="before-header" :cols-count="colsCount" />
           </tr>
 
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
@@ -710,10 +703,8 @@ defineExpose({
               v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
               v-bind="bodyRowAfterAttrs"
             >
-              <td :colspan="colsCount" v-bind="bodyRowAfterCellAttrs">
-                <!-- @slot Use it to add something after last row. -->
-                <slot name="after-last-row" />
-              </td>
+              <!-- @slot Use it to add something after last row. -->
+              <slot name="after-last-row" :cols-count="colsCount" />
             </tr>
           </template>
         </tbody>

package/ui.data-table/config.ts

@@ -47,7 +47,6 @@ export default /*tw*/ {
   bodyRowBefore: "!p-0",
   bodyRowBeforeCell: "py-1",
   bodyRowAfter: "!p-0",
-  bodyRowAfterCell: "py-1",
   bodyRowDateDivider: "",
   bodyCellBase: {
     base: "p-[1.125rem] py-5 truncate align-top",

package/ui.data-table/useAttrs.ts

@@ -78,9 +78,6 @@ export default function useAttrs(
     bodyRowBeforeCell: {
       base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
     },
-    bodyRowAfterCell: {
-      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
-    },
     footer: {
       extend: computed(() => [isFooterSticky.value && extendingKeysClasses.stickyFooter.value]),
     },

package/ui.dropdown-button/UDropdownButton.vue

@@ -13,7 +13,7 @@ import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.ts";
 import { UDropdownButton, BUTTON_VARIANT } from "./constants.ts";
 
-import type { UDropdownButtonProps } from "./types.ts";
+import type { UDropdownButtonProps, IconSize, DropdownSize } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -60,7 +60,6 @@ const iconColor = computed(() => {
   return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
 });
 
-type IconSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 const iconSize = computed(() => {
   const sizes = {
     "2xs": "xs",
@@ -74,7 +73,6 @@ const iconSize = computed(() => {
   return sizes[props.size] as IconSize;
 });
 
-type DropdownSize = "sm" | "md" | "lg";
 const dropdownSize = computed(() => {
   const sizes = {
     "2xs": "sm",

package/ui.dropdown-button/types.ts

@@ -4,6 +4,9 @@ import type { Option } from "../ui.dropdown-list/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type IconSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+export type DropdownSize = "sm" | "md" | "lg";
+
 export interface UDropdownButtonProps {
   /**
    * Button label.

package/ui.dropdown-link/UDropdownLink.vue

@@ -13,7 +13,7 @@ import { UDropdownLink } from "./constants.ts";
 import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.ts";
 
-import type { UDropdownLinkProps } from "./types.ts";
+import type { UDropdownLinkProps, IconSize } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -56,7 +56,6 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
   { isShownOptions },
 );
 
-type IconSize = "sm" | "2xs" | "xs";
 const iconSize = computed(() => {
   const sizes = {
     sm: "2xs",

package/ui.dropdown-link/types.ts

@@ -4,6 +4,8 @@ import type { Option } from "../ui.dropdown-list/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type IconSize = "sm" | "2xs" | "xs";
+
 export interface UDropdownLinkProps {
   /**
    * Link label.

package/ui.form-checkbox/UCheckbox.vue

@@ -12,7 +12,7 @@ import { UCheckbox } from "./constants.ts";
 import useAttrs from "./useAttrs.ts";
 
 import type { UnknownObject } from "../types.ts";
-import type { UCheckboxProps } from "./types.ts";
+import type { UCheckboxProps, IconSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -73,7 +73,7 @@ const iconSize = computed(() => {
     lg: "sm",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
 const isBinary = computed(() => !Array.isArray(props.modelValue));

package/ui.form-checkbox/types.ts

@@ -4,6 +4,8 @@ import type { UnknownObject, UnknownArray } from "../types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type IconSize = "2xs" | "xs" | "sm";
+
 export interface UCheckboxProps {
   /**
    * Checkbox value.
@@ -54,7 +56,6 @@ export interface UCheckboxProps {
    * Checkbox color.
    */
   color?:
-    | "brand"
     | "grayscale"
     | "red"
     | "orange"
@@ -72,7 +73,9 @@ export interface UCheckboxProps {
     | "purple"
     | "fuchsia"
     | "pink"
-    | "rose";
+    | "rose"
+    | "gray"
+    | "brand";
 
   /**
    * Checkbox size.

package/ui.form-checkbox-group/types.ts

@@ -40,9 +40,7 @@ export interface UCheckboxGroupProps {
    * Checkbox group color.
    */
   color?:
-    | "brand"
     | "grayscale"
-    | "gray"
     | "red"
     | "orange"
     | "amber"
@@ -59,7 +57,9 @@ export interface UCheckboxGroupProps {
     | "purple"
     | "fuchsia"
     | "pink"
-    | "rose";
+    | "rose"
+    | "gray"
+    | "brand";
 
   /**
    * Name for each checkbox.

package/ui.form-checkbox-multi-state/types.ts

@@ -29,7 +29,6 @@ export interface UCheckboxMultiStateProps {
    * Checkbox color.
    */
   color?:
-    | "brand"
     | "grayscale"
     | "red"
     | "orange"
@@ -47,7 +46,9 @@ export interface UCheckboxMultiStateProps {
     | "purple"
     | "fuchsia"
     | "pink"
-    | "rose";
+    | "rose"
+    | "gray"
+    | "brand";
 
   /**
    * Label placement.