vueless 0.0.337 → 0.0.339

package/directives/vTooltip.js

@@ -1,34 +1,37 @@
 import tippy from "tippy.js";
 import { merge } from "lodash-es";
 
-// Fix for SSR
-import "tippy.js/dist/tippy.css";
-import "tippy.js/themes/light.css";
-import "tippy.js/animations/shift-away.css";
-
 import { vuelessConfig } from "../utils/utilUI.js";
 import { isCSR, isSSR } from "../utils/utilHelper.js";
 
-const globalSettings = vuelessConfig?.directive?.tooltip || {};
-const defaultSettings = {
-  arrow: true,
-  theme: "light",
-  animation: "shift-away",
-};
+let settings = {};
 
-const mergedSettings = merge(defaultSettings, globalSettings);
+if (isCSR) {
+  import("tippy.js/dist/tippy.css");
+  import("tippy.js/themes/light.css");
+  import("tippy.js/animations/shift-away.css");
 
-isCSR && tippy.setDefaultProps(mergedSettings);
+  const defaultSettings = {
+    arrow: true,
+    theme: "light",
+    animation: "shift-away",
+  };
+
+  settings = merge(defaultSettings, vuelessConfig?.directive?.tooltip || {});
+  tippy.setDefaultProps(settings);
+}
 
 export default {
   mounted(el, bindings) {
-    isCSR && tippy(el, merge(mergedSettings, bindings.value || {}));
+    if (isSSR) return;
+
+    tippy(el, merge(settings, bindings.value || {}));
   },
 
   updated(el, bindings) {
     if (!el._tippy || isSSR) return;
 
-    el._tippy.setProps(merge(mergedSettings, bindings.value || {}));
+    el._tippy.setProps(merge(settings, bindings.value || {}));
   },
 
   unmounted(el) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.337",
+  "version": "0.0.339",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.59",
+    "@vueless/plugin-vite": "^0.0.60",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.15",
     "autoprefixer": "^10.4.19",

package/ui.button-toggle-item/UToggleItem.vue

@@ -53,7 +53,7 @@ import { computed, inject, onMounted, ref } from "vue";
 import UButton from "../ui.button/UButton.vue";
 import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { TYPE_RADIO } from "../ui.button-toggle/constants";
+import { TYPE_RADIO } from "../ui.button-toggle/constants.js";
 
 import useAttrs from "./useAttrs.js";
 import defaultConfig from "./config.js";

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -51,6 +51,7 @@
 
     <UDropdownList
       v-if="isShownOptions"
+      ref="dropdownListRef"
       v-model="selectedItem"
       :size="size"
       :options="options"
@@ -58,13 +59,12 @@
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
-      @click="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { provide, ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
@@ -208,10 +208,9 @@ const emit = defineEmits([
   "select",
 ]);
 
-provide("hideDropdownOptions", hideOptions);
-
 const isShownOptions = ref(false);
 const selectedItem = ref("");
+const dropdownListRef = ref(null);
 
 const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
   props,
@@ -222,17 +221,19 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
 
 watch(selectedItem, () => {
   emit("select", selectedItem.value);
+
+  hideOptions();
 });
 
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
 }
-
-function onClickList() {
-  hideOptions();
-}
 </script>

package/ui.dropdown-badge/storybook/stories.js

@@ -14,9 +14,9 @@ export default {
   args: {
     label: "Dropdown",
     options: [
-      { label: "option 1", value: "1" },
-      { label: "option 2", value: "2" },
-      { label: "option 3", value: "3" },
+      { label: "option 1", id: "1" },
+      { label: "option 2", id: "2" },
+      { label: "option 3", id: "3" },
     ],
   },
   argTypes: {

package/ui.dropdown-list/UDropdownList.vue

@@ -6,7 +6,7 @@
     v-bind="wrapperAttrs"
     @keydown.self.down.prevent="pointerForward"
     @keydown.self.up.prevent="pointerBackward"
-    @keydown.enter.tab.stop.self="addPointerElement"
+    @keydown.enter.stop.self="addPointerElement"
   >
     <ul :id="`listbox-${id}`" v-bind="listAttrs" role="listbox">
       <li

package/utils/utilTheme.js

@@ -14,7 +14,7 @@ import {
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
-} from "../constants";
+} from "../constants.js";
 
 export function themeInit() {
   const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");

package/utils/utilUI.js

@@ -7,29 +7,27 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
-} from "../constants";
+} from "../constants.js";
 
 /**
  Load Vueless config from the project root.
  Both for server and client side renderings.
- IIFE is used to cache the results.
+ IIFE for SSR is used to prevent top level await issue.
  */
-export const vuelessConfig = (() => {
-  let config = {};
+export let vuelessConfig = {};
 
-  if (isSSR) {
-    // TODO: test it in SSR, maybe `await` is needed
-    config = import(/* @vite-ignore */ `${process.cwd()}/vueless.config.js`).default;
-  }
-
-  if (isCSR) {
-    config = Object.values(
-      import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
-    )[0];
-  }
+if (isSSR) {
+  (async () =>
+    (vuelessConfig = (
+      await import(/* @vite-ignore */ `${process.cwd()}/vueless.config.js?${Date.now()}`)
+    ).default))();
+}
 
-  return config;
-})();
+if (isCSR) {
+  vuelessConfig = Object.values(
+    import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
+  )[0];
+}
 
 /**
  Extend twMerge (tailwind merge) by vueless and user config:

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.337",
+  "version": "0.0.339",
   "contributions": {
     "html": {
       "description-markup": "markdown",