vueless 1.2.15-beta.2 → 1.2.15-beta.4

package/bin/commands/copy.js

@@ -44,7 +44,6 @@ export async function copyVuelessComponent(options) {
   }
 
   const absoluteSourcePath = path.join(cwd(), VUELESS_PACKAGE_DIR, COMPONENTS[componentName]);
-
   const absoluteDestPath = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR, newComponentName);
 
   if (existsSync(absoluteDestPath)) {
@@ -119,6 +118,7 @@ async function modifyCreatedComponent(destPath, componentName, newComponentName)
       // saving indexes
       const storyIdIndex = getStoryMetaKeyIndex(fileContent, "id");
       const storyTitleIndex = getStoryMetaKeyIndex(fileContent, "title");
+
       const componentImportIndex = lines.findIndex(
         (line) => line.includes(componentName) && line.includes("import"),
       );

package/composables/tests/useUI.test.ts

@@ -53,7 +53,7 @@ vi.mock("vue", async () => {
   };
 });
 
-import useUI from "../useUI";
+import { useUI } from "../useUI";
 import * as uiUtils from "../../utils/ui";
 import { getCurrentInstance, useAttrs } from "vue";
 import type { UnknownObject } from "../../types";

package/composables/useBreakpoint.ts

@@ -21,7 +21,7 @@ enum BreakpointWidth {
   "2xl" = 1536,
 }
 
-export default function useBreakpoint() {
+export function useBreakpoint() {
   let animationId: number | undefined;
 
   const windowWidth = ref(0);

package/composables/useUI.ts

@@ -32,11 +32,7 @@ import type {
  * 3. Component config (:config="{...}" props)
  * 4. Component classes (class="...")
  */
-export default function useUI<T>(
-  defaultConfig: T,
-  mutatedProps?: MutatedProps,
-  topLevelClassKey?: string,
-) {
+export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevelClassKey?: string) {
   const { type, props, parent } = getCurrentInstance() as VuelessComponentInstance;
 
   const componentName = type?.internal

package/constants.d.ts

@@ -166,7 +166,7 @@ export namespace COMPONENTS {
     let UCalendar: string;
     let UDatePicker: string;
     let UDatePickerRange: string;
-    let UColorPicker: string;
+    let UColorToggle: string;
     let ULabel: string;
     let UHeader: string;
     let UText: string;

package/constants.js

@@ -272,7 +272,7 @@ export const COMPONENTS = {
   UCalendar: "ui.form-calendar",
   UDatePicker: "ui.form-date-picker",
   UDatePickerRange: "ui.form-date-picker-range",
-  UColorPicker: "ui.form-color-picker",
+  UColorToggle: "ui.form-color-toggle",
   ULabel: "ui.form-label",
 
   /* Text & Content */

package/index.d.ts

@@ -26,10 +26,10 @@ export { createVuelessAdapter } from "./adapter.locale/vueless";
 export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 /* composables */
 export { useLocale } from "./composables/useLocale";
-export { default as useUI } from "./composables/useUI";
+export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { default as useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
@@ -81,7 +81,7 @@ export { default as URadioGroup } from "./ui.form-radio-group/URadioGroup.vue";
 export { default as UCalendar } from "./ui.form-calendar/UCalendar.vue";
 export { default as UDatePicker } from "./ui.form-date-picker/UDatePicker.vue";
 export { default as UDatePickerRange } from "./ui.form-date-picker-range/UDatePickerRange.vue";
-export { default as UColorPicker } from "./ui.form-color-picker/UColorPicker.vue";
+export { default as UColorToggle } from "./ui.form-color-toggle/UColorToggle.vue";
 export { default as ULabel } from "./ui.form-label/ULabel.vue";
 /* Text & Content */
 export { default as UHeader } from "./ui.text-header/UHeader.vue";

package/index.ts

@@ -32,10 +32,10 @@ export { createVuelessAdapter } from "./adapter.locale/vueless";
 export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 /* composables */
 export { useLocale } from "./composables/useLocale";
-export { default as useUI } from "./composables/useUI";
+export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { default as useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
@@ -87,7 +87,7 @@ export { default as URadioGroup } from "./ui.form-radio-group/URadioGroup.vue";
 export { default as UCalendar } from "./ui.form-calendar/UCalendar.vue";
 export { default as UDatePicker } from "./ui.form-date-picker/UDatePicker.vue";
 export { default as UDatePickerRange } from "./ui.form-date-picker-range/UDatePickerRange.vue";
-export { default as UColorPicker } from "./ui.form-color-picker/UColorPicker.vue";
+export { default as UColorToggle } from "./ui.form-color-toggle/UColorToggle.vue";
 export { default as ULabel } from "./ui.form-label/ULabel.vue";
 /* Text & Content */
 export { default as UHeader } from "./ui.text-header/UHeader.vue";

package/locales/en.json

@@ -1 +1 @@
-{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table."},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}
+{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"switch":"Switch","inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table.","checkbox":"Checkbox"},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}

package/package.json

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

package/types.ts

@@ -48,7 +48,7 @@ import URadioGroupConfig from "./ui.form-radio-group/config";
 import USwitchConfig from "./ui.form-switch/config";
 import UTextareaConfig from "./ui.form-textarea/config";
 import ULabelConfig from "./ui.form-label/config";
-import UColorPickerConfig from "./ui.other-theme-color-toggle/config";
+import UColorToggleConfig from "./ui.form-color-toggle/config";
 import UInputConfig from "./ui.form-input/config";
 import UInputCounterConfig from "./ui.form-input-counter/config";
 import UInputPasswordConfig from "./ui.form-input-password/config";
@@ -315,7 +315,7 @@ export interface Components {
   USwitch: Partial<typeof USwitchConfig>;
   UTextarea: Partial<typeof UTextareaConfig>;
   ULabel: Partial<typeof ULabelConfig>;
-  UColorPicker: Partial<typeof UColorPickerConfig>;
+  UColorToggle: Partial<typeof UColorToggleConfig>;
   UInput: Partial<typeof UInputConfig>;
   UInputCounter: Partial<typeof UInputCounterConfig>;
   UInputPassword: Partial<typeof UInputPasswordConfig>;

package/ui.boilerplate/UBoilerplate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.button/UButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect, useId, watch, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.button-link/ULink.vue

@@ -2,7 +2,7 @@
 import { computed, useSlots, useTemplateRef } from "vue";
 import { RouterLink } from "vue-router";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.button-toggle/UToggle.vue

@@ -3,7 +3,7 @@ import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.container-accordion/UAccordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide, useTemplateRef, ref, watch, onMounted } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UAccordionItem from "../ui.container-accordion-item/UAccordionItem.vue";

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

@@ -3,7 +3,7 @@ import { computed, ref, inject, useId, useSlots, useTemplateRef, toValue, watchE
 
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 
@@ -145,11 +145,7 @@ const {
         </slot>
       </div>
 
-      <div
-        v-if="description || hasSlotContent(slots['description'])"
-        :id="`description-${elementId}`"
-        v-bind="descriptionAttrs"
-      >
+      <div v-if="description || hasSlotContent(slots['description'])" v-bind="descriptionAttrs">
         <!--
           @slot Use it to add custom description content.
           @binding {string} description

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

@@ -91,7 +91,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      expect(component.find(`[id="description-${id}"]`).exists()).toBe(true);
+      expect(component.find(`[vl-key='description']`).exists()).toBe(true);
     });
 
     // DataTest prop
@@ -381,13 +381,13 @@ describe("UAccordionItem", () => {
         },
       });
 
-      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).not.toContain("opacity-100");
 
       await component.find(`.${slotClass}`).trigger("click");
-      expect(component.find("[id^='description-']").classes()).toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).toContain("opacity-100");
 
       await component.find(`.${slotClass}`).trigger("click");
-      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).not.toContain("opacity-100");
     });
 
     it("description slot content is always visible when slot is provided", () => {
@@ -461,7 +461,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      const descriptionElement = component.find("[id^='description-']");
+      const descriptionElement = component.find("[vl-key='description']");
 
       // Initially not opened
       expect(descriptionElement.classes()).not.toContain(openedClass);

package/ui.container-card/UCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.container-col/UCol.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.container-divider/UDivider.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.container-drawer/UDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-group/UGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UHeader from "../ui.text-header/UHeader.vue";

package/ui.container-groups/UGroups.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.container-modal/UModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watch, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-page/UPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, onMounted, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.container-page/config.ts

@@ -64,9 +64,9 @@ export default /*tw*/ {
   description: "mt-1.5 text-large font-normal text-lifted",
   actions: "",
   body: "",
-  footer: "mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-muted",
-  footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",
-  footerRight: "md:flex space-y-4 md:space-x-4 md:space-y-0",
+  footer: "mb-0 mt-14 justify-between pt-8 md:flex gap-4 md:gap-0 md:items-baseline border-t border-muted",
+  footerLeft: "md:flex gap-4",
+  footerRight: "md:flex gap-4",
   defaults: {
     variant: "solid",
     size: "wide",

package/ui.container-row/URow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";

package/ui.data-list/UDataList.vue

@@ -2,7 +2,7 @@
 import { useTemplateRef } from "vue";
 import draggable from "vuedraggable/src/vuedraggable";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 

package/ui.data-list/config.ts

@@ -42,7 +42,7 @@ export default /*tw*/ {
     },
   },
   labelCrossed: "{>label} line-through",
-  customActions: "space-x-5 opacity-50 flex items-center md:opacity-0 group-hover/item:opacity-100",
+  customActions: "flex items-center gap-5 opacity-50 md:opacity-0 group-hover/item:opacity-100",
   divider: "{UDivider}",
   empty: "{UEmpty}",
   nested: "{UDataList} group/nested ml-6",

package/ui.data-table/UTable.vue

@@ -18,7 +18,7 @@ import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults, cx, getMergedConfig } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";

package/ui.data-table/UTableRow.vue

@@ -7,7 +7,7 @@ import { PX_IN_REM } from "../constants";
 import { mapRowColumns } from "./utilTable";
 
 import { useMutationObserver } from "../composables/useMutationObserver";
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";

package/ui.data-table/config.ts

@@ -105,6 +105,8 @@ export default /*tw*/ {
   `,
   i18n: {
     noData: "There is no data in the table.",
+    /* These are used for a11y. */
+    checkbox: "Checkbox",
   },
   defaults: {
     emptyCellLabel: "—",

package/ui.data-table/storybook/stories.ts

@@ -7,6 +7,8 @@ import {
 } from "../../utils/storybook";
 import { getRandomId } from "../../utils/helper";
 
+import defaultConfig from "../config";
+
 import UTable from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
@@ -731,7 +733,7 @@ export const EmptyStateSlot = DefaultTemplate.bind({});
 EmptyStateSlot.args = {
   rows: [],
   config: {
-    i18n: { noData: "Fetching data..." },
+    i18n: { ...defaultConfig.i18n, noData: "Fetching data..." },
     bodyEmptyStateCell: "py-10",
   },
   slotTemplate: `

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -2,7 +2,7 @@
 import { ref, computed, nextTick, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.dropdown-button/UDropdownButton.vue

@@ -2,7 +2,7 @@
 import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.dropdown-link/UDropdownLink.vue

@@ -2,7 +2,7 @@
 import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.form-calendar/UCalendar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
 import { computed, ref, watch, useTemplateRef, nextTick, onMounted } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { isRangeDate } from "./types";
 
@@ -829,6 +829,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.prevYearIcon"
+        :aria-label="localeMessages.previousYear"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('prev-year')"
         @mousedown.prevent.capture
@@ -841,6 +842,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.prevIcon"
+        :aria-label="localeMessages.previousMonth"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('prev')"
         @mousedown.prevent.capture
@@ -866,6 +868,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.nextIcon"
+        :aria-label="localeMessages.nextMonth"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('next')"
         @mousedown.prevent.capture
@@ -879,6 +882,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.nextYearIcon"
+        :aria-label="localeMessages.nextYear"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('next-year')"
         @mousedown.prevent.capture

package/ui.form-calendar/UCalendarDayView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar";
 import {

package/ui.form-calendar/UCalendarMonthView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar";
 import { isSameMonth, isCurrentMonth } from "./utilDate";

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar";
 import { isSameMonth, isCurrentYear } from "./utilDate";

package/ui.form-calendar/config.ts

@@ -144,6 +144,11 @@ export default /*tw*/ {
     },
     timeLabel: "Time",
     okLabel: "Ok",
+    /* These are used for a11y. */
+    previousYear: "Previous Year",
+    nextYear: "Next Year",
+    previousMonth: "Previous Month",
+    nextMonth: "Next Month",
   },
   defaults: {
     userDateFormat: "j F, Y",