vueless 1.1.1-beta.8 → 1.1.1-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.1.1-beta.8",
+  "version": "1.1.1-beta.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-accordion/UAccordion.vue

@@ -67,6 +67,7 @@ const {
   descriptionAttrs,
   bodyAttrs,
   titleAttrs,
+  contentAttrs,
   toggleIconAttrs,
   accordionDividerAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
@@ -94,6 +95,11 @@ const {
       </div>
 
       <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
+
+      <div v-if="isOpened" v-bind="contentAttrs">
+        <!-- @slot Use it to add accordion content. -->
+        <slot />
+      </div>
     </div>
 
     <UDivider v-bind="accordionDividerAttrs" />

package/ui.container-accordion/config.ts

@@ -24,6 +24,7 @@ export default /*tw*/ {
       },
     },
   },
+  content: "",
   toggleIcon: {
     base: "{UIcon} transition duration-300",
     variants: {

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

@@ -10,6 +10,7 @@ import {
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types.ts";
@@ -41,7 +42,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink },
+  components: { UAccordion, ULink, UButton, UCol },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args">
@@ -113,6 +114,20 @@ Accordions.args = {};
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", description: "{enumValue}" };
 
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
+  description: "",
+  slotTemplate: `
+    <template #default>
+      <UCol gap="sm">
+        <ULink label="Email services" />
+        <ULink label="VPN" />
+        <ULink label="SEO Tools" />
+      </UCol>
+    </template>
+  `,
+};
+
 export const ToggleSlot = DefaultTemplate.bind({});
 ToggleSlot.args = {
   slotTemplate: `

package/ui.data-table/UTable.vue

@@ -378,9 +378,7 @@ function onChangeLocalSelectedRows(selectedRows: Row[]) {
 
   selectAll.value = !!selectedRows.length;
 
-  if (!isEqual(localSelectedRows.value, props.selectedRows)) {
-    emit("update:selectedRows", localSelectedRows.value);
-  }
+  emit("update:selectedRows", localSelectedRows.value);
 }
 
 function clearSelectedItems() {

package/ui.form-listbox/UListbox.vue

@@ -471,7 +471,7 @@ const {
             <span
               :style="getMarginForSubCategory(option.level)"
               v-bind="optionContentAttrs"
-              :title="String(option.label)"
+              :title="String(option[labelKey])"
               v-text="option[labelKey]"
             />
           </slot>

package/ui.form-listbox/storybook/stories.ts

@@ -26,11 +26,11 @@ export default {
   component: UListbox,
   args: {
     options: [
-      { label: "New York", id: ["1"] },
-      { label: "Los Angeles", id: ["2"] },
-      { label: "Chicago", id: ["3"] },
-      { label: "Houston", id: ["4"] },
-      { label: "San Francisco", id: ["5"] },
+      { label: "New York", id: 1 },
+      { label: "Los Angeles", id: 2 },
+      { label: "Chicago", id: 3 },
+      { label: "Houston", id: 4 },
+      { label: "San Francisco", id: 5 },
     ],
   },
   argTypes: {

package/ui.form-select/config.ts

@@ -118,7 +118,7 @@ export default /*tw*/ {
   clear: "{>toggle}",
   clearIcon: "{UIcon} {>selectIcon}",
   placeholder: {
-    base: "flex items-center text-muted !leading-none",
+    base: "flex items-center text-muted !leading-none shrink-0",
     variants: {
       size: {
         sm: "text-small",

package/ui.form-select/storybook/stories.ts

@@ -38,11 +38,11 @@ export default {
     label: "Choose a city",
     modelValue: null,
     options: [
-      { label: "New York", id: "1" },
-      { label: "Los Angeles", id: "2" },
-      { label: "Chicago", id: "3" },
-      { label: "Houston", id: "4" },
-      { label: "San Francisco", id: "5" },
+      { label: "New York", id: 1 },
+      { label: "Los Angeles", id: 2 },
+      { label: "Chicago", id: 3 },
+      { label: "Houston", id: 4 },
+      { label: "San Francisco", id: 5 },
     ],
   },
   argTypes: {

package/ui.navigation-pagination/UPagination.vue

@@ -124,6 +124,7 @@ const {
   nextButtonAttrs,
   activeButtonAttrs,
   inactiveButtonAttrs,
+  ellipsisAttrs,
   lastIconAttrs,
   firstIconAttrs,
   prevIconAttrs,
@@ -181,13 +182,7 @@ const {
     </UButton>
 
     <template v-for="page in pageButtons" :key="page">
-      <UButton
-        v-if="!isFinite(page.number)"
-        square
-        disabled
-        variant="ghost"
-        v-bind="inactiveButtonAttrs"
-      >
+      <UButton v-if="!isFinite(page.number)" square disabled variant="ghost" v-bind="ellipsisAttrs">
         <!-- @slot Use it to add something instead of the ellipsis. -->
         <slot name="ellipsis">&hellip;</slot>
       </UButton>

package/ui.navigation-pagination/config.ts

@@ -19,6 +19,7 @@ export default /*tw*/ {
   nextButton: "{>paginationButton}",
   inactiveButton: "{>paginationButton}",
   activeButton: "{>paginationButton}",
+  ellipsis: "{>paginationButton} {>inactiveButton}",
   paginationIcon: {
     base: "{UIcon}",
     defaults: {

package/ui.navigation-pagination/tests/UPagination.test.ts

@@ -12,7 +12,7 @@ describe("UPagination.vue", () => {
   describe("Props", () => {
     // Variant prop
     it("applies the correct variant to buttons", async () => {
-      const variants = ["solid", "outlined", "soft", "ghost"];
+      const variants = ["solid", "outlined", "subtle", "soft", "ghost"];
 
       variants.forEach((variant) => {
         const component = mount(UPagination, {

package/ui.navigation-pagination/types.ts

@@ -27,7 +27,7 @@ export interface Props {
   /**
    * Pagination variant.
    */
-  variant?: "solid" | "outlined" | "soft" | "ghost";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "ghost";
 
   /**
    * Pagination size.