vueless 1.2.8-beta.1 → 1.2.8-beta.10

package/constants.d.ts

@@ -9,6 +9,8 @@ export const OUTLINE: "outline";
 export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
 export const LETTER_SPACING: "letter-spacing";
+export const LIGHT_THEME: "light-theme";
+export const DARK_THEME: "dark-theme";
 export const COLOR_MODE_KEY: "vl-color-mode";
 export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
@@ -28,6 +30,7 @@ export const DEFAULT_DISABLED_OPACITY: 50;
 export const DEFAULT_LETTER_SPACING: 0;
 export const PRIMARY_COLORS: string[];
 export const STATE_COLORS: string[];
+export const LAYOUT_COLORS: string[];
 export const NEUTRAL_COLORS: string[];
 export const COLOR_SHADES: number[];
 export const DEFAULT_LIGHT_THEME: {

package/constants.js

@@ -17,6 +17,8 @@ export const OUTLINE = "outline";
 export const ROUNDING = "rounding";
 export const DISABLED_OPACITY = "disabled-opacity";
 export const LETTER_SPACING = "letter-spacing";
+export const LIGHT_THEME = "light-theme";
+export const DARK_THEME = "dark-theme";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
@@ -70,6 +72,7 @@ export const STATE_COLORS = [
   NEUTRAL_COLOR,
   GRAYSCALE_COLOR,
 ];
+export const LAYOUT_COLORS = ["text", "border", "bg"];
 export const NEUTRAL_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 

package/icons/storybook/rocket_launch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m188.91-556.74 101.7 43.33q17.28-33.85 36.71-67.18 19.42-33.32 40.98-63.89l-76.37-15.28-103.02 103.02Zm156.39 84.11 131.33 131.56q58.44-27.43 107.48-59.59 49.04-32.17 79.8-62.93 80.05-80.28 117.81-163.84Q819.48-711 823.2-819.2q-108.2 3.72-191.77 41.48-83.56 37.76-163.6 117.81-30.76 30.76-62.93 79.8-32.16 49.04-59.6 107.48Zm231.16-99.59q-19.76-19.76-19.76-48.66 0-28.9 19.76-48.66 19.76-19.53 48.54-19.53 28.78 0 48.54 19.53 19.53 19.76 19.53 48.66 0 28.9-19.53 48.66Q653.78-552.7 625-552.7q-28.78 0-48.54-19.52ZM560.5-184.91l103.26-103.02-15.28-76.37q-30.57 21.56-63.89 41.1-33.33 19.55-67.18 36.59l43.09 101.7Zm331.26-702.61q8.52 143.17-35.08 257.09-43.59 113.91-142.11 212.67-1.48 1.24-2.96 2.84-1.48 1.59-2.72 2.83l22 110.48q3.48 17.15-1.74 33.19-5.22 16.03-17.65 28.46L537.87-65.33l-88.83-206.84-172.87-172.87-206.84-88.83L244.2-707.5q12.43-12.43 28.34-17.65 15.92-5.22 33.07-1.74l110.48 22q1.24-1.24 2.71-2.1 1.48-.86 2.96-2.1 98.76-99 212.79-142.98 114.04-43.97 257.21-35.45ZM141.59-324.04q36.91-36.92 89.56-37.3 52.65-.38 89.33 36.3 36.43 36.43 36.05 89.2-.38 52.77-37.05 89.45-27.68 27.67-85.64 45.63-57.97 17.96-168.64 32 14.04-110.67 31.5-169.26 17.45-58.59 44.89-86.02Zm47.98 48.74q-13.77 14.76-23.93 44.84-10.16 30.09-18.16 78.66 48.56-8 78.65-18.41 30.09-10.4 44.61-24.16 18.28-16.04 18.54-40.35.26-24.3-16.78-42.58-18.28-17.05-42.59-16.55-24.3.5-40.34 18.55Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.1",
+  "version": "1.2.8-beta.10",
   "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

@@ -109,7 +109,6 @@ const { getDataTest, accordionItemAttrs, accordionAttrs } = useUI<Config>(defaul
       <UAccordionItem
         v-for="(option, index) in options"
         :key="index"
-        :model-value="selectedItem"
         :value="option.value"
         :title="option.title"
         :description="option.description"

package/ui.container-accordion/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   accordion: "flex flex-col w-full divide-y divide-muted",
-  accordionItem: "{UAccordionItem} py-5 first:pt-0 last:pb-0",
+  accordionItem: "{UAccordionItem}",
   defaults: {
     size: "md",
     disabled: false,

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

@@ -8,6 +8,7 @@ import {
 } from "../../utils/storybook";
 
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
+import UAccordionItem from "../../ui.container-accordion-item/UAccordionItem.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UCol from "../../ui.container-col/UCol.vue";
@@ -68,7 +69,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
+  components: { UAccordion, UAccordionItem, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args" v-model="args.modelValue">
@@ -110,3 +111,14 @@ Sizes.args = {
     },
   ],
 };
+
+export const DefaultSlot: StoryFn<UAccordionArgs> = (args: UAccordionArgs, { argTypes }) => ({
+  components: { UAccordion, UAccordionItem },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UAccordion v-model="args.modelValue">
+      <UAccordionItem title="Custom Accordion Item 1" description="Custom Accordion Item 1" value="1" />
+      <UAccordionItem title="Custom Accordion Item 2" description="Custom Accordion Item 2" value="2" />
+    </UAccordion>
+  `,
+});

package/ui.container-accordion-item/UAccordionItem.vue

@@ -122,7 +122,13 @@ const {
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs" ref="title">
-        {{ title }}
+        <!--
+          @slot Use it to add custom title content.
+          @binding {string} title
+        -->
+        <slot name="title" :title="title">
+          {{ title }}
+        </slot>
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
@@ -140,11 +146,18 @@ const {
       </div>
 
       <div
-        v-if="description"
+        v-if="description || hasSlotContent(slots['description'])"
         :id="`description-${elementId}`"
         v-bind="descriptionAttrs"
-        v-text="description"
-      />
+      >
+        <!--
+          @slot Use it to add custom description content.
+          @binding {string} description
+        -->
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </div>
 
       <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->

package/ui.container-accordion-item/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "group cursor-pointer",
+    base: "group cursor-pointer py-5 first:pt-0 last:pb-0",
     variants: {
       disabled: {
         true: "cursor-not-allowed text-default/(--vl-disabled-opacity)",

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

@@ -58,11 +58,12 @@ const EnumTemplate: StoryFn<UAccordionItemArgs> = (args: UAccordionItemArgs, { a
   components: { UAccordionItem, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol gap="xl">
+    <UCol gap="lg">
       <UAccordionItem
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        class="py-0"
       />
     </UCol>
   `,
@@ -112,3 +113,27 @@ ToggleSlot.args = {
     </template>
   `,
 };
+
+export const TitleSlot = DefaultTemplate.bind({});
+TitleSlot.args = {
+  slotTemplate: `
+    <template #title="{ title }">
+      <URow gap="xs" align="center">
+        <UIcon name="rocket_launch" size="xs" color="primary" />
+        <span>{{ title }}</span>
+      </URow>
+    </template>
+  `,
+};
+
+export const DescriptionSlot = DefaultTemplate.bind({});
+DescriptionSlot.args = {
+  slotTemplate: `
+    <template #description="{ description }">
+      <URow gap="xs" align="start">
+        <UIcon name="info" size="xs" color="accented" />
+        <span>{{ description }}</span>
+      </URow>
+    </template>
+  `,
+};

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -176,6 +176,104 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
 
+    // Title slot
+    it("renders custom content in title slot", () => {
+      const title = "Original Title";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      expect(component.text()).not.toContain(title);
+    });
+
+    // Title slot bindings
+    it("provides title binding to title slot", () => {
+      const title = "Test Title";
+      const slotClass = "custom-title";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `
+            <template #default="{ title }">
+              <div class="${slotClass}" :data-title="title"></div>
+            </template>
+          `,
+        },
+      });
+
+      const titleElement = component.find(`.${slotClass}`);
+
+      expect(titleElement.exists()).toBe(true);
+      expect(titleElement.attributes("data-title")).toBe(title);
+    });
+
+    // Description slot
+    it("renders custom content in description slot", () => {
+      const description = "Original Description";
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      expect(component.text()).not.toContain(description);
+    });
+
+    // Description slot bindings
+    it("provides description binding to description slot", () => {
+      const description = "Test Description";
+      const slotClass = "custom-description";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `
+            <template #default="{ description }">
+              <div class="${slotClass}" :data-description="description"></div>
+            </template>
+          `,
+        },
+      });
+
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+      expect(descriptionElement.attributes("data-description")).toBe(description);
+    });
+
+    // Description slot with empty prop
+    it("renders description slot even when description prop is empty", () => {
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: {},
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+    });
+
     // Default slot
     it("renders default slot content when accordion is opened", async () => {
       const slotContent = "Custom accordion content";
@@ -221,6 +319,94 @@ describe("UAccordionItem", () => {
 
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
+
+    // Slot interactions with accordion behavior
+    it("title slot content is clickable and toggles accordion", async () => {
+      const title = "Test Title";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      const titleElement = component.find(`.${slotClass}`);
+
+      expect(titleElement.exists()).toBe(true);
+
+      await titleElement.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeTruthy();
+      expect(emitted?.[0]).toEqual([expect.any(String), true]);
+    });
+
+    it("description slot content is not clickable and does not toggle accordion", async () => {
+      const description = "Test Description";
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+
+      await descriptionElement.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeFalsy();
+    });
+
+    it("title slot preserves accordion toggle functionality", async () => {
+      const title = "Test Title";
+      const description = "Test Description";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title, description },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+
+      await component.find(`.${slotClass}`).trigger("click");
+      expect(component.find("[id^='description-']").classes()).toContain("opacity-100");
+
+      await component.find(`.${slotClass}`).trigger("click");
+      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+    });
+
+    it("description slot content is always visible when slot is provided", () => {
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: {},
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      // Description slot content should be visible even without description prop
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+      expect(descriptionElement.text()).toBe(slotContent);
+    });
   });
 
   // Events

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -55,6 +55,12 @@ const emit = defineEmits([
    * @property {string} query
    */
   "searchChange",
+
+  /**
+   * Triggers when the search v-model updates.
+   * @property {string} query
+   */
+  "update:search",
 ]);
 
 type UListboxRef = InstanceType<typeof UListbox>;
@@ -76,6 +82,11 @@ const dropdownValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const dropdownSearch = computed({
+  get: () => props.search ?? "",
+  set: (value: string) => emit("update:search", value),
+});
+
 const selectedOptions = computed(() => {
   if (props.multiple) {
     return props.options.filter((option) => {
@@ -153,7 +164,7 @@ function hideOptions() {
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  if (!props.multiple) hideOptions();
+  if (!props.multiple && props.closeOnSelect) hideOptions();
 }
 
 defineExpose({
@@ -243,17 +254,55 @@ const { getDataTest, config, wrapperAttrs, dropdownBadgeAttrs, listboxAttrs, tog
       v-if="isShownOptions"
       ref="dropdown-list"
       v-model="dropdownValue"
+      v-model:search="dropdownSearch"
       :searchable="searchable"
       :multiple="multiple"
       :size="size"
       :color="color"
       :options="options"
+      :options-limit="optionsLimit"
+      :visible-options="visibleOptions"
       :label-key="labelKey"
       :value-key="valueKey"
+      :group-label-key="groupLabelKey"
+      :group-value-key="groupValueKey"
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
       @search-change="onSearchChange"
-    />
+      @update:search="(value) => emit('update:search', value)"
+    >
+      <template #before-option="{ option, index }">
+        <!--
+            @slot Use it to add something before option.
+            @binding {object} option
+            @binding {number} index
+          -->
+        <slot name="before-option" :option="option" :index="index" />
+      </template>
+
+      <template #option="{ option, index }">
+        <!--
+            @slot Use it to customize the option.
+            @binding {object} option
+            @binding {number} index
+          -->
+        <slot name="option" :option="option" :index="index" />
+      </template>
+
+      <template #after-option="{ option, index }">
+        <!--
+            @slot Use it to add something after option.
+            @binding {object} option
+            @binding {number} index
+          -->
+        <slot name="after-option" :option="option" :index="index" />
+      </template>
+
+      <template #empty>
+        <!-- @slot Use it to add something instead of empty state. -->
+        <slot name="empty" />
+      </template>
+    </UListbox>
   </div>
 </template>

package/ui.dropdown-badge/config.ts

@@ -38,12 +38,16 @@ export default /*tw*/ {
     variant: "solid",
     labelKey: "label",
     valueKey: "id",
+    groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",
+    optionsLimit: 0,
+    visibleOptions: 8,
+    labelDisplayCount: 2,
     round: false,
     searchable: false,
     multiple: false,
-    labelDisplayCount: 2,
+    closeOnSelect: true,
     /* icons */
     toggleIcon: "keyboard_arrow_down",
   },