vueless 1.2.8-beta.14 → 1.2.8-beta.16

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.14",
+  "version": "1.2.8-beta.16",
   "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");
 
@@ -157,14 +158,29 @@ function onClickBadge() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
 
 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 +213,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() {
@@ -165,6 +178,7 @@ function onClickButton() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
@@ -199,7 +213,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");
 
@@ -161,14 +160,29 @@ function onClickLink() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
 
 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 +215,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/ui.form-listbox/UListbox.vue

@@ -103,11 +103,7 @@ const selectedValue = computed({
 
     return props.modelValue;
   },
-  set: (value) => {
-    if (searchModel.value) searchModel.value = "";
-
-    emit("update:modelValue", value);
-  },
+  set: (value) => emit("update:modelValue", value),
 });
 
 const addOptionKeyCombination = computed(() => {

package/ui.form-select/USelect.vue

@@ -266,6 +266,7 @@ function deactivate() {
   wrapperRef.value?.blur();
 
   isOpen.value = false;
+  dropdownSearch.value = "";
 
   nextTick(() => emit("close", localValue.value, elementId));
 }

package/utils/theme.ts

@@ -51,18 +51,6 @@ import type {
 } from "../types";
 import { ColorMode } from "../types";
 
-declare interface RootCSSVariableOptions {
-  primary: PrimaryColors | string;
-  neutral: NeutralColors | string;
-  text: ThemeConfigText;
-  rounding: ThemeConfigRounding;
-  outline: ThemeConfigOutline;
-  letterSpacing: number;
-  disabledOpacity: number;
-  lightTheme: Partial<VuelessCssVariables>;
-  darkTheme: Partial<VuelessCssVariables>;
-}
-
 declare interface SetColorMode {
   colorMode: `${ColorMode}`;
   isColorModeAuto: boolean;
@@ -334,10 +322,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,20 +684,20 @@ 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: MergedThemeConfig) {
   let darkVariables: Partial<VuelessCssVariables> = {};
 
   let variables: Partial<VuelessCssVariables> = {
-    "--vl-text-xs": `${vars.text.xs / PX_IN_REM}rem`,
-    "--vl-text-sm": `${vars.text.sm / PX_IN_REM}rem`,
-    "--vl-text-md": `${vars.text.md / PX_IN_REM}rem`,
-    "--vl-text-lg": `${vars.text.lg / PX_IN_REM}rem`,
+    "--vl-text-xs": `${Number(vars.text?.xs ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-sm": `${Number(vars.text?.sm ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-md": `${Number(vars.text?.md ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-lg": `${Number(vars.text?.lg ?? 0) / PX_IN_REM}rem`,
     "--vl-outline-sm": `${vars.outline.sm}px`,
     "--vl-outline-md": `${vars.outline.md}px`,
     "--vl-outline-lg": `${vars.outline.lg}px`,
-    "--vl-rounding-sm": `${vars.rounding.sm / PX_IN_REM}rem`,
-    "--vl-rounding-md": `${vars.rounding.md / PX_IN_REM}rem`,
-    "--vl-rounding-lg": `${vars.rounding.lg / PX_IN_REM}rem`,
+    "--vl-rounding-sm": `${Number(vars.rounding.sm ?? 0) / PX_IN_REM}rem`,
+    "--vl-rounding-md": `${Number(vars.rounding.md ?? 0) / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${Number(vars.rounding.lg ?? 0) / PX_IN_REM}rem`,
     "--vl-letter-spacing": `${vars.letterSpacing}em`,
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };
@@ -724,7 +712,7 @@ function setRootCSSVariables(vars: RootCSSVariableOptions) {
       `var(--color-${vars.neutral}-${shade})`;
   }
 
-  const [light, dark] = generateCSSColorVariables(vars.lightTheme, vars.darkTheme);
+  const [light, dark] = generateCSSColorVariables(vars.lightTheme ?? {}, vars.darkTheme ?? {});
 
   variables = { ...variables, ...light };
   darkVariables = { ...darkVariables, ...dark };