vueless 0.0.535 → 0.0.537

package/package.json

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

package/types.ts

@@ -41,6 +41,9 @@ import UTabConfig from "./ui.navigation-tab/config.ts";
 import UTabsConfig from "./ui.navigation-tabs/config.ts";
 import UAvatarConfig from "./ui.image-avatar/config.ts";
 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 type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -152,6 +155,7 @@ export interface Config extends ThemeConfig {
 }
 
 export type UnknownObject = Record<string, unknown>;
+export type UnknownArray = Array<unknown>;
 export type ComponentNames = keyof Components; // keys union
 export type Strategies = "merge" | "replace" | "override";
 export type Gray = "gray";
@@ -217,6 +221,9 @@ export interface Components {
   UTabs?: Partial<typeof UTabsConfig>;
   UAvatar?: Partial<typeof UAvatarConfig>;
   UIcon?: Partial<typeof UIconConfig>;
+  UCheckbox?: Partial<typeof UCheckboxConfig>;
+  UCheckboxGroup?: Partial<typeof UCheckboxGroupConfig>;
+  UCheckboxMultiState?: Partial<typeof UCheckboxMultiStateConfig>;
 }
 
 export interface Directives {

package/ui.button/UButton.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watchEffect, useId, watch } from "vue";
 
 import { useDarkMode } from "../composables/useDarkMode.ts";

package/ui.button/types.ts

@@ -93,7 +93,7 @@ export interface UButtonProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.button-link/ULink.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref } from "vue";
 import { RouterLink, useLink } from "vue-router";
 import { getDefault } from "../utils/ui.ts";

package/ui.button-link/types.ts

@@ -104,7 +104,7 @@ export interface ULinkProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.button-toggle/UToggle.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, provide, readonly } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.button-toggle/types.ts

@@ -76,7 +76,7 @@ export interface UToggleProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, inject, onMounted, ref, useId } from "vue";
 
 import UButton from "../ui.button/UButton.vue";

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

@@ -31,7 +31,7 @@ export interface UToggleItemProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-accordion/UAccordion.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.container-accordion/types.ts

@@ -26,7 +26,7 @@ export interface UAccordionProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-card/UCard.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, useSlots } from "vue";
 
 import UHeader from "../ui.text-header/UHeader.vue";

package/ui.container-card/types.ts

@@ -16,7 +16,7 @@ export interface UCardProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-col/UCol.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getDefault } from "../utils/ui.ts";
 
 import { UCol } from "./constants.ts";

package/ui.container-col/types.ts

@@ -45,7 +45,7 @@ export interface UColProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-divider/UDivider.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getDefault } from "../utils/ui.ts";
 
 import { UDivider } from "./constants.ts";

package/ui.container-divider/types.ts

@@ -46,7 +46,7 @@ export interface UDividerProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-group/UGroup.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getDefault } from "../utils/ui.ts";
 import UDivider from "../ui.container-divider/UDivider.vue";
 import UHeader from "../ui.text-header/UHeader.vue";

package/ui.container-group/types.ts

@@ -26,7 +26,7 @@ export interface UGroupProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-modal/UModal.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, useSlots, watch, ref, useId } from "vue";
 
 import { getDefault } from "../utils/ui.ts";

package/ui.container-modal/types.ts

@@ -73,7 +73,7 @@ export interface UModalProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { merge } from "lodash-es";
 

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

@@ -97,7 +97,7 @@ export interface UModalConfirmProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-page/UPage.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, useSlots, onMounted } from "vue";
 
 import useBreakpoint from "../composables/useBreakpoint.ts";

package/ui.container-page/types.ts

@@ -48,7 +48,7 @@ export interface UPageProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-row/URow.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getDefault } from "../utils/ui.ts";
 
 import { URow } from "./constants.ts";

package/ui.container-row/types.ts

@@ -50,7 +50,7 @@ export interface URowProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.data-table/UTable.vue

@@ -205,14 +205,14 @@ const {
   bodyRowDateDividerAttrs,
   headerCellBaseAttrs,
   headerCellCheckboxAttrs,
-  stickyHeaderActionsCheckboxAttrs,
+  headerActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
   headerCounterAttrs,
   bodyEmptyStateAttrs,
   bodyDateDividerAttrs,
   bodyCellDateDividerAttrs,
-  stickyHeaderActionsCounterAttrs,
+  headerActionsCounterAttrs,
   stickyHeaderCounterAttrs,
   stickyHeaderLoaderAttrs,
   tableAttrs,
@@ -496,14 +496,14 @@ defineExpose({
           v-model="selectAll"
           size="md"
           :partial="!isSelectedAllRows"
-          v-bind="stickyHeaderActionsCheckboxAttrs"
+          v-bind="headerActionsCheckboxAttrs"
           :data-test="`${dataTest}-select-all`"
         />
       </div>
 
       <div
         v-if="selectedRows.length"
-        v-bind="stickyHeaderActionsCounterAttrs"
+        v-bind="headerActionsCounterAttrs"
         v-text="selectedRows.length"
       />
 
@@ -529,14 +529,14 @@ defineExpose({
           v-model="selectAll"
           size="md"
           :partial="!isSelectedAllRows"
-          v-bind="stickyHeaderActionsCheckboxAttrs"
+          v-bind="headerActionsCheckboxAttrs"
           :data-test="`${dataTest}-select-all`"
         />
       </div>
 
       <div
         v-if="selectedRows.length"
-        v-bind="stickyHeaderActionsCounterAttrs"
+        v-bind="headerActionsCounterAttrs"
         v-text="selectedRows.length"
       />
 

package/ui.data-table/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
-  stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
+  stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
   stickyHeaderRow: "border-gray-200 bg-white",
   stickyHeaderCell: "flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "{UCheckbox}",
@@ -14,9 +14,10 @@ export default /*tw*/ {
     },
   },
   stickyHeaderLoader: "{ULoaderProgress}",
-  stickyHeaderActions: "rounded-t-lg border-blue-200 bg-blue-50",
-  stickyHeaderActionsCheckbox: "{UCheckbox}",
-  stickyHeaderActionsCounter: "-ml-1.5",
+  stickyHeaderActions: "rounded-none",
+  headerActions: "rounded-t-dynamic border-blue-200 bg-blue-50",
+  headerActionsCheckbox: "{UCheckbox}",
+  headerActionsCounter: "-ml-1.5",
   tableWrapper: "border border-gray-200 rounded-dynamic bg-white",
   table: "min-w-full border-none text-sm w-full table-auto",
   header: "border-b border-gray-200",

package/ui.data-table/useAttrs.ts

@@ -25,6 +25,7 @@ export default function useAttrs(
 
   const extendingKeys = [
     "headerCounterBase",
+    "headerActions",
     "stickyHeaderActions",
     "stickyHeaderRow",
     "stickyFooter",
@@ -42,7 +43,7 @@ export default function useAttrs(
         const classes = [];
 
         if (isShownActionsHeader.value) {
-          classes.push(extendingKeysClasses.stickyHeaderActions.value);
+          classes.push(extendingKeysClasses.headerActions.value);
         }
 
         if (isShownActionsHeader.value && isHeaderSticky.value) {
@@ -65,7 +66,7 @@ export default function useAttrs(
     stickyHeaderCounter: {
       base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
     },
-    stickyHeaderActionsCounter: {
+    headerActionsCounter: {
       base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
     },
     headerCellCheckbox: {