vueless 0.0.536 → 0.0.538

package/package.json

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

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";
@@ -12,7 +12,6 @@ import type { UGroupProps } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UGroupProps>(), {
-  gap: getDefault<UGroupProps>(defaultConfig, UGroup).gap,
   upperlined: getDefault<UGroupProps>(defaultConfig, UGroup).upperlined,
   underlined: getDefault<UGroupProps>(defaultConfig, UGroup).underlined,
   dataTest: "",

package/ui.container-group/config.ts

@@ -12,21 +12,8 @@ export default /*tw*/ {
   header: "flex items-center justify-between",
   headerLeftFallback: "flex items-center",
   title: "{UHeader} pr-2",
-  content: {
-    base: "flex flex-col items-stretch",
-    variants: {
-      gap: {
-        none: "gap-0",
-        xs: "gap-8",
-        sm: "gap-10",
-        md: "gap-12",
-        lg: "gap-14",
-        xl: "gap-16",
-      },
-    },
-  },
+  content: "",
   defaults: {
-    gap: "md",
     upperlined: false,
     underlined: false,
   },

package/ui.container-group/types.ts

@@ -8,11 +8,6 @@ export interface UGroupProps {
    */
   title?: string;
 
-  /**
-   * The distance between nested elements.
-   */
-  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-
   /**
    * Show line above the header.
    */
@@ -26,7 +21,7 @@ export interface UGroupProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-groups/UGroups.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { getDefault } from "../utils/ui.ts";
+
+import { UGroups } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UGroupsProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UGroupsProps>(), {
+  gap: getDefault<UGroupsProps>(defaultConfig, UGroups).gap,
+  dataTest: "",
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>
+
+<template>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>

package/ui.container-groups/config.ts

@@ -0,0 +1,18 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex flex-col items-stretch",
+    variants: {
+      gap: {
+        none: "gap-0",
+        xs: "gap-8",
+        sm: "gap-10",
+        md: "gap-12",
+        lg: "gap-14",
+        xl: "gap-16",
+      },
+    },
+  },
+  defaults: {
+    gap: "md",
+  },
+};

package/ui.container-groups/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UGroups = "UGroup";

package/ui.container-groups/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-groups/storybook/stories.ts

@@ -0,0 +1,59 @@
+import { getArgTypes, getSlotNames } from "../../utils/storybook.ts";
+
+import UGroups from "../../ui.container-groups/UGroups.vue";
+import UGroup from "../../ui.container-group/UGroup.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UInput from "../../ui.form-input/UInput.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UGroupsProps } from "../types.ts";
+
+interface UGroupsArgs extends UGroupsProps {
+  slotTemplate?: string;
+}
+
+/**
+ * The `UGroups` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-groups)
+ */
+export default {
+  id: "5035",
+  title: "Containers / Groups",
+  component: UGroups,
+  args: {},
+  argTypes: {
+    ...getArgTypes(UGroups.__name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 360,
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UGroupsArgs> = (args: UGroupsArgs) => ({
+  components: { UGroups, UGroup, UCol, UInput },
+  setup() {
+    const slots = getSlotNames(UGroups.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UGroups v-bind="args">
+      ${args.slotTemplate}
+    </UGroups>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  slotTemplate: `
+    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+      <UCol>
+        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="input" label="Label" />
+      </UCol>
+    </UGroup>
+  `,
+};

package/ui.container-groups/types.ts

@@ -0,0 +1,20 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UGroupsProps {
+  /**
+   * The distance between nested elements.
+   */
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-groups/useAttrs.ts

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

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: {

package/ui.form-checkbox/UCheckbox.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
 import { isEqual } from "lodash-es";
 

package/ui.form-checkbox/types.ts

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

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { provide, ref, watch } from "vue";
 import { isEqual } from "lodash-es";
 

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

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

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

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

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

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

package/ui.form-select/config.js

@@ -44,9 +44,9 @@ export default /*tw*/ {
       `,
     variants: {
       size: {
-        sm: "text-xs min-h-4",
-        md: "text-sm min-h-5",
-        lg: "text-base min-h-6",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
       disabled: {
         true: "text-gray-700",

package/ui.image-avatar/UAvatar.vue

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

package/ui.image-avatar/types.ts

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

package/ui.image-icon/UIcon.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, defineAsyncComponent } from "vue";
 import { vTooltip } from "../directives";
 import { getDefault } from "../utils/ui.ts";

package/ui.image-icon/types.ts

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