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

package/ui.other-theme-color-toggle/UThemeColorToggle.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, computed, useId, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { setTheme } from "../utils/theme";
 
 import UDivider from "../ui.container-divider/UDivider.vue";
-import UColorPicker from "../ui.form-color-picker/UColorPicker.vue";
+import UColorToggle from "../ui.form-color-toggle/UColorToggle.vue";
 
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
@@ -86,7 +86,7 @@ const {
 
 <template>
   <div :id="elementId" ref="list" v-bind="listAttrs" :data-test="getDataTest()">
-    <UColorPicker
+    <UColorToggle
       v-model="selectedPrimaryColor"
       :size="size"
       :colors="primaryColors"
@@ -100,7 +100,7 @@ const {
       v-bind="colorDividerAttrs"
     />
 
-    <UColorPicker
+    <UColorToggle
       v-model="selectedNeutralColor"
       :size="size"
       :colors="neutralColors"

package/ui.other-theme-color-toggle/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   list: "flex flex-wrap gap-0.5",
-  primaryColorPicker: "{UColorPicker}",
-  grayColorPicker: "{UColorPicker}",
+  primaryColorPicker: "{UColorToggle}",
+  grayColorPicker: "{UColorToggle}",
   colorDivider: "{UDivider} py-2",
   defaults: {
     size: "md",

package/ui.other-theme-color-toggle/tests/UThemeColorToggle.test.ts

@@ -2,7 +2,7 @@ import { mount } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
 
 import UThemeColorToggle from "../UThemeColorToggle.vue";
-import UColorPicker from "../../ui.form-color-picker/UColorPicker.vue";
+import UColorToggle from "../../ui.form-color-toggle/UColorToggle.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 
 import type { Props } from "../types";
@@ -29,7 +29,7 @@ describe("UThemeColorToggle.vue", () => {
           },
         });
 
-        const colorPickers = component.findAllComponents(UColorPicker);
+        const colorPickers = component.findAllComponents(UColorToggle);
 
         expect(colorPickers.length).toBe(2);
 
@@ -50,7 +50,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const primaryColorPicker = component.findAllComponents(UColorPicker)[0];
+      const primaryColorPicker = component.findAllComponents(UColorToggle)[0];
 
       expect(primaryColorPicker.props("modelValue")).toBe(primary);
     });
@@ -66,7 +66,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const neutralColorPicker = component.findAllComponents(UColorPicker)[1];
+      const neutralColorPicker = component.findAllComponents(UColorToggle)[1];
 
       expect(neutralColorPicker.props("modelValue")).toBe(neutral);
     });
@@ -81,7 +81,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const primaryColorPicker = component.findAllComponents(UColorPicker)[0];
+      const primaryColorPicker = component.findAllComponents(UColorToggle)[0];
 
       expect(primaryColorPicker.props("colors")).toEqual(primaryColors);
     });
@@ -96,7 +96,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const neutralColorPicker = component.findAllComponents(UColorPicker)[1];
+      const neutralColorPicker = component.findAllComponents(UColorToggle)[1];
 
       expect(neutralColorPicker.props("colors")).toEqual(neutralColors);
     });
@@ -112,7 +112,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const primaryColorPicker = component.findAllComponents(UColorPicker)[0];
+      const primaryColorPicker = component.findAllComponents(UColorToggle)[0];
 
       expect(primaryColorPicker.props("labels")).toEqual(primaryLabels);
     });
@@ -128,7 +128,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const neutralColorPicker = component.findAllComponents(UColorPicker)[1];
+      const neutralColorPicker = component.findAllComponents(UColorToggle)[1];
 
       expect(neutralColorPicker.props("labels")).toEqual(neutralLabels);
     });
@@ -207,7 +207,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const primaryColorPicker = component.findAllComponents(UColorPicker)[0];
+      const primaryColorPicker = component.findAllComponents(UColorToggle)[0];
 
       primaryColorPicker.vm.$emit("update:modelValue", newColor);
 
@@ -226,7 +226,7 @@ describe("UThemeColorToggle.vue", () => {
         },
       });
 
-      const neutralColorPicker = component.findAllComponents(UColorPicker)[1];
+      const neutralColorPicker = component.findAllComponents(UColorToggle)[1];
 
       neutralColorPicker.vm.$emit("update:modelValue", newColor);
 

package/ui.skeleton/USkeleton.vue

@@ -1,6 +1,6 @@
 <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.skeleton-choice/USkeletonChoice.vue

@@ -1,6 +1,6 @@
 <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.skeleton-input/USkeletonInput.vue

@@ -1,6 +1,6 @@
 <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.skeleton-text/USkeletonText.vue

@@ -1,6 +1,6 @@
 <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.text-alert/UAlert.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -27,6 +28,12 @@ const emit = defineEmits([
   "hide",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const isShownAlert = ref(true);
@@ -126,6 +133,7 @@ const {
           size="xs"
           :color="closeButtonColor"
           variant="ghost"
+          :aria-label="localeMessages.closeAlert"
           v-bind="closeButtonAttrs"
           :data-test="getDataTest('button')"
           @click="onClickClose"

package/ui.text-alert/config.ts

@@ -41,6 +41,10 @@ export default /*tw*/ {
   },
   closeIcon: "{>icon}",
   alertIcon: "{>icon}",
+  /* These are used for a11y. */
+  i18n: {
+    closeAlert: "Close alert",
+  },
   defaults: {
     variant: "subtle",
     color: "primary",

package/ui.text-badge/UBadge.vue

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

package/ui.text-block/UText.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.text-block/config.ts

@@ -1,6 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
+      flex flex-col
       font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
@@ -22,10 +23,10 @@ export default /*tw*/ {
         inherit: "text-inherit",
       },
       size: {
-        xs: "text-tiny space-y-1",
-        sm: "text-small space-y-2",
-        md: "text-medium space-y-3",
-        lg: "text-large space-y-4",
+        xs: "text-tiny gap-1",
+        sm: "text-small gap-2",
+        md: "text-medium gap-3",
+        lg: "text-large gap-4",
       },
       align: {
         left: "text-left",

package/ui.text-empty/UEmpty.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 UIcon from "../ui.image-icon/UIcon.vue";

package/ui.text-file/UFile.vue

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

package/ui.text-files/UFiles.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 UFile from "../ui.text-file/UFile.vue";

package/ui.text-header/UHeader.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.text-notify/UNotify.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults, vuelessConfig } from "../utils/ui";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 

package/ui.text-number/UNumber.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";