vueless 1.2.8-beta.13 → 1.2.8-beta.15

package/index.d.ts

@@ -17,7 +17,7 @@ export {
 } from "./utils/helper";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";

package/index.ts

@@ -23,7 +23,7 @@ export {
 } from "./utils/helper";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.13",
+  "version": "1.2.8-beta.15",
   "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.dropdown-badge/UDropdownBadge.vue

@@ -66,6 +66,7 @@ const emit = defineEmits([
 type UListboxRef = InstanceType<typeof UListbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<UListboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -162,9 +163,23 @@ function hideOptions() {
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
   if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 defineExpose({
@@ -197,7 +212,7 @@ const { getDataTest, config, wrapperAttrs, dropdownBadgeAttrs, listboxAttrs, tog
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"
   >

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
+import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import useUI from "../composables/useUI";
@@ -63,11 +63,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-provide("hideDropdownOptions", hideOptions);
-
 type UListboxRef = InstanceType<typeof UListbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<UListboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -148,9 +147,23 @@ function getFullOptionLabels(value: Option | Option[]) {
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
   if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 function onClickButton() {
@@ -199,7 +212,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"
   >

package/ui.dropdown-link/UDropdownLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
+import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import useUI from "../composables/useUI";
@@ -63,11 +63,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-provide("hideDropdownOptions", hideOptions);
-
 type ULisboxRef = InstanceType<typeof ULisbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<ULisboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -166,9 +165,23 @@ function hideOptions() {
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
   if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 defineExpose({
@@ -201,7 +214,7 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, listboxAttrs, togg
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     tabindex="1"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"

package/utils/node/tailwindSafelist.js

@@ -233,7 +233,14 @@ function getClassesToSafelist(config) {
   const safelistItems = [];
 
   for (const key in config) {
-    if (key === SYSTEM_CONFIG_KEY.defaults || SYSTEM_CONFIG_KEY.props) continue;
+    const nonClassKeys = [
+      SYSTEM_CONFIG_KEY.defaults,
+      SYSTEM_CONFIG_KEY.props,
+      SYSTEM_CONFIG_KEY.i18n,
+      SYSTEM_CONFIG_KEY.colors,
+    ];
+
+    if (nonClassKeys.some((item) => key === item)) continue;
 
     if (Object.hasOwn(config, key)) {
       const classes = config[key];

package/utils/theme.ts

@@ -334,10 +334,10 @@ export function setTheme(config: ThemeConfig = {}) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function normalizeThemeConfig(theme: any): MergedThemeConfig {
   return {
-    colorMode: String(theme.colorMode) as ColorMode,
+    colorMode: String(theme.colorMode ?? "") as ColorMode,
     isColorModeAuto: !!toNumber(theme.isColorModeAuto),
-    primary: String(theme.primary),
-    neutral: String(theme.neutral),
+    primary: String(theme.primary ?? ""),
+    neutral: String(theme.neutral ?? ""),
     text: {
       xs: toNumber(theme.text?.xs),
       sm: toNumber(theme.text?.sm),
@@ -696,7 +696,7 @@ function getDarkTheme(darkTheme?: Partial<VuelessCssVariables>) {
  * Generate and apply Vueless CSS variables.
  * @return string - Vueless CSS variables string.
  */
-function setRootCSSVariables(vars: RootCSSVariableOptions) {
+export function setRootCSSVariables(vars: RootCSSVariableOptions) {
   let darkVariables: Partial<VuelessCssVariables> = {};
 
   let variables: Partial<VuelessCssVariables> = {