vueless 0.0.342 → 0.0.344

package/composables/useLocale.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import createVuelessAdapter from "../adatper.locale/vueless";
+import createVuelessAdapter from "../adatper.locale/vueless.js";
 
 export const LocaleSymbol = Symbol.for("vueless:locale");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.342",
+  "version": "0.0.344",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.dropdown-badge/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownBadge: "{UBadge}",
-  dropdownBadgeActive: "group",
+  dropdownBadgeActive: "group ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     component: "{UDropdownList}",

package/ui.dropdown-button/UDropdownButton.vue

@@ -52,13 +52,13 @@
 
     <UDropdownList
       v-if="isShownOptions"
+      ref="dropdownListRef"
       v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
-      tabindex="-1"
       :data-test="`${dataTest}-list`"
       @click="onClickList"
     />
@@ -66,7 +66,7 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch, useId } from "vue";
+import { nextTick, computed, provide, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -237,6 +237,7 @@ provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");
+const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
 
@@ -266,6 +267,10 @@ watch(selectedItem, () => {
 
 function onClickButton() {
   isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
 }
 
 function hideOptions() {

package/ui.dropdown-button/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: "{UButton}",
-  dropdownButtonActive: "group",
+  dropdownButtonActive: "group ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     base: "{UDropdownList} w-fit",

package/ui.dropdown-link/UDropdownLink.vue

@@ -55,6 +55,7 @@
 
     <UDropdownList
       v-if="isShownOptions"
+      ref="dropdownListRef"
       v-model="selectedItem"
       :size="size"
       :options="options"
@@ -68,7 +69,7 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch, useId } from "vue";
+import { nextTick, computed, provide, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULink from "../ui.button-link/ULink.vue";
@@ -230,6 +231,7 @@ provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");
+const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
 
@@ -254,6 +256,10 @@ watch(selectedItem, () => {
 
 function onClickLink() {
   isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
 }
 
 function hideOptions() {

package/ui.dropdown-link/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownLink: "{ULink}",
-  dropdownLinkActive: "group",
+  dropdownLinkActive: "group ring-dynamic ring-offset-4 ring-brand-700/15",
   dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",
   dropdownList: {
     base: "{UDropdownList} w-fit",

package/ui.form-date-picker/UDatePicker.vue

@@ -48,7 +48,7 @@
         :timepicker="timepicker"
         :date-format="dateFormat"
         :date-time-format="dateTimeFormat"
-        :user-date-format="userFormat"
+        :user-date-format="userDateFormat"
         :user-date-time-format="userDateTimeFormat"
         :max-date="maxDate"
         :min-date="minDate"
@@ -359,7 +359,7 @@ function onBlur(event) {
 }
 
 function formatUserDate(data) {
-  if (props.userFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
+  if (props.userDateFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
 
   let prefix = "";
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);

package/ui.form-date-picker/storybook/Docs.mdx

@@ -16,7 +16,7 @@ import defaultConfig from "../config.js?raw"
 <Source code={getSource(defaultConfig)} language="jsx" dark />
 
 ## Formatting tokens
-Each character in the table below can be used in `dateFormat` and `userFormat` options to achieve the format you need.
+Each character in the table below can be used in `dateFormat` and `userDateFormat` / `userDateTimeFormat` options to achieve the format you need.
 
 <Markdown>
 {`

package/web-types.json

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