vueless 0.0.316 → 0.0.318

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -1,6 +1,8 @@
 import { computed, useSlots } from "vue";
+
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
+
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {

package/ui.button/configs/default.config.js

@@ -49,7 +49,7 @@ export default /*tw*/ {
         true: "!ring-0 !ring-offset-0",
       },
       loading: {
-        true: "pointer-events-none gap-0 !ring-0",
+        true: "pointer-events-none gap-0",
       },
       block: {
         true: "w-full",

package/ui.button/index.vue

@@ -11,7 +11,7 @@
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
       <div tabindex="-1" class="invisible w-0" v-text="label" />
-      <ULoader :loading="loading" :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
+      <ULoader :loading="loading" :size="loaderSize" :color="iconColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
@@ -21,13 +21,13 @@
         @binding {string} icon-size
         @binding {string} icon-color
       -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="componentColor">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="leftIcon"
           internal
           :name="leftIcon"
           :size="iconSize"
-          :color="componentColor"
+          :color="iconColor"
           v-bind="leftIconAttrs"
         />
       </slot>
@@ -44,14 +44,14 @@
         :label="label"
         :icon-name="icon"
         :icon-size="iconSize"
-        :icon-color="componentColor"
+        :icon-color="iconColor"
       >
         <UIcon
           v-if="icon"
           internal
           :name="icon"
           :size="iconSize"
-          :color="componentColor"
+          :color="iconColor"
           v-bind="centerIconAttrs"
         />
         <template v-else>
@@ -65,13 +65,13 @@
         @binding {string} icon-size
         @binding {string} icon-color
       -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="componentColor">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="rightIcon"
           internal
           :name="rightIcon"
           :size="iconSize"
-          :color="componentColor"
+          :color="iconColor"
           v-bind="rightIconAttrs"
         />
       </slot>
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watchEffect } from "vue";
 
 import { getRandomId, getDefault } from "../service.ui";
 import ULoader from "../ui.loader";
@@ -284,7 +284,11 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-const componentColor = computed(() => {
+const iconColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
+
+watchEffect(() => {
+  props.loading && buttonRef.value.blur();
+});
 </script>

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -28,12 +28,15 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "badge") {
+    if (key === "dropdownBadge") {
       const badgeAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...badgeAttrs.value,
-        class: cx([badgeAttrs.value.class, isShownOptions.value && config.value.badgeActive]),
+        class: cx([
+          badgeAttrs.value.class,
+          isShownOptions.value && config.value.dropdownBadgeActive,
+        ]),
       }));
     }
   }

package/ui.dropdown-badge/configs/default.config.js

@@ -1,20 +1,11 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  dropdownBadge: {
-    component: "{UBadge}",
-    base: "cursor-pointer",
-    variants: {
-      size: {
-        sm: "pr-1",
-        md: "pr-1.5",
-        lg: "pr-1.5",
-      },
-    },
-  },
+  dropdownBadge: "{UBadge}",
   dropdownBadgeActive: "group",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
-    base: "{UDropdownList} w-fit",
+    component: "{UDropdownList}",
+    base: "w-fit",
     variants: {
       listYPosition: {
         top: "bottom-6 mb-6",
@@ -29,12 +20,12 @@ export default /*tw*/ {
   defaults: {
     color: "brand",
     size: "md",
-    weight: "medium",
     variant: "primary",
     labelKey: "label",
     valueKey: "id",
     listYPosition: "bottom",
     listXPosition: "left",
+    round: false,
     noIcon: false,
     /* icons */
     dropdownIcon: "keyboard_arrow_down",

package/ui.dropdown-badge/index.vue

@@ -5,11 +5,13 @@
       :label="label"
       :size="size"
       :color="color"
-      :weight="weight"
       :variant="variant"
       v-bind="dropdownBadgeAttrs"
-      :data-test="`${dataTest}-badge`"
+      tabindex="0"
+      :data-test="dataTest"
       @click="onClickBadge"
+      @keydown.enter="onClickBadge"
+      @keydown.space.prevent="onClickBadge"
     >
       <template #left>
         <!--
@@ -28,7 +30,7 @@
         <slot :label="label" :opened="isShownOptions" />
       </template>
 
-      <template #right>
+      <template #right="{ iconColor, iconSize }">
         <!--
           @slot Use it to add something after the label.
           @binding {boolean} isOpened
@@ -37,11 +39,11 @@
           <UIcon
             v-if="!noIcon"
             internal
-            :color="color"
+            :color="iconColor"
             :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-caret`"
+            :data-test="`${dataTest}-dropdown`"
           />
         </slot>
       </template>
@@ -62,7 +64,7 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch } from "vue";
+import { provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UBadge from "../ui.text-badge";
@@ -88,6 +90,30 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownBadge).labelKey,
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownBadge).valueKey,
+  },
+
   /**
    * Badge variant.
    * @values primary, secondary, thirdary
@@ -116,12 +142,11 @@ const props = defineProps({
   },
 
   /**
-   * Badge font weight.
-   * @values regular, medium, bold
+   * Set badge corners rounded.
    */
-  weight: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).weight,
+  round: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UDropdownBadge).round,
   },
 
   /**
@@ -132,30 +157,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownBadge).noIcon,
   },
 
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).valueKey,
-  },
-
   /**
    * The position of dropdown list on the y-axis.
    * @values top, bottom
@@ -220,16 +221,6 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
   },
 );
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size];
-});
-
 watch(selectedItem, () => {
   emit("select", selectedItem.value);
 });

package/ui.dropdown-button/index.vue

@@ -11,7 +11,7 @@
       :disabled="disabled"
       :filled="filled || isShownOptions"
       v-bind="dropdownButtonAttrs"
-      :data-test="`${dataTest}-button`"
+      :data-test="dataTest"
       @click="onClickButton"
     >
       <template #left>
@@ -44,7 +44,7 @@
             :color="iconColor"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-caret`"
+            :data-test="`${dataTest}-dropdown`"
           />
         </slot>
       </template>
@@ -85,19 +85,35 @@ defineOptions({ name: "UDropdownButton", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Selected value.
+   * Button label.
    */
-  modelValue: {
-    type: [String, Number],
+  label: {
+    type: String,
     default: "",
   },
 
   /**
-   * Button label.
+   * Options list.
    */
-  label: {
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
     type: String,
-    default: "",
+    default: getDefault(defaultConfig, UDropdownButton).labelKey,
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownButton).valueKey,
   },
 
   /**
@@ -167,30 +183,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownButton).noIcon,
   },
 
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).valueKey,
-  },
-
   /**
    * The position of dropdown list on the y-axis.
    * @values top, bottom

package/ui.dropdown-link/composables/attrs.composable.js

@@ -28,12 +28,12 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "link") {
+    if (key === "dropdownLink") {
       const linkAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...linkAttrs.value,
-        class: cx([linkAttrs.value.class, isShownOptions.value && config.value.linkActive]),
+        class: cx([linkAttrs.value.class, isShownOptions.value && config.value.dropdownLinkActive]),
       }));
     }
   }

package/ui.dropdown-link/configs/default.config.js

@@ -1,6 +1,5 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  trigger: "flex items-center relative space-x-0.5",
   dropdownLink: "{ULink}",
   dropdownLinkActive: "group",
   dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",

package/ui.dropdown-link/index.vue

@@ -1,57 +1,57 @@
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
-    <div v-bind="triggerAttrs">
-      <ULink
-        :id="id"
-        :size="size"
-        :label="label"
-        :color="color"
-        :dashed="dashed"
-        :no-ring="noRing"
-        :disabled="disabled"
-        :underlined="underlined"
-        :data-test="`${dataTest}-link`"
-        v-bind="dropdownLinkAttrs"
-        @click="onClickLink"
-      >
-        <template #left>
-          <!--
+    <ULink
+      :id="id"
+      :size="size"
+      :label="label"
+      :color="color"
+      :dashed="dashed"
+      :no-ring="noRing"
+      :disabled="disabled"
+      :underlined="underlined"
+      v-bind="dropdownLinkAttrs"
+      :data-test="dataTest"
+      @click="onClickLink"
+      @keydown.enter="onClickLink"
+      @keydown.space.prevent="onClickLink"
+    >
+      <template #left>
+        <!--
           @slot Use it to add something before the label.
           @binding {boolean} isOpened
         -->
-          <slot name="left" :opened="isShownOptions" />
-        </template>
+        <slot name="left" :opened="isShownOptions" />
+      </template>
 
-        <template #default>
-          <!--
+      <template #default>
+        <!--
             @slot Use it to add something instead of the default label.
             @binding {string} label
             @binding {boolean} isOpened
           -->
-          <slot :label="label" />
-        </template>
+        <slot :label="label" />
+      </template>
 
-        <template #right>
-          <!--
+      <template #right>
+        <!--
             @slot Use it to add something after the label.
             @binding {boolean} isOpened
           -->
-          <slot name="right" :opened="isShownOptions">
-            <UIcon
-              v-if="!noIcon"
-              internal
-              interactive
-              :color="color"
-              :size="iconSize"
-              :name="config.defaults.dropdownIcon"
-              :data-test="`${dataTest}-caret`"
-              v-bind="dropdownIconAttrs"
-              @click="onClickLink"
-            />
-          </slot>
-        </template>
-      </ULink>
-    </div>
+        <slot name="right" :opened="isShownOptions">
+          <UIcon
+            v-if="!noIcon"
+            internal
+            interactive
+            :color="color"
+            :size="iconSize"
+            :name="config.defaults.dropdownIcon"
+            v-bind="dropdownIconAttrs"
+            :data-test="`${dataTest}-dropdown`"
+            @click="onClickLink"
+          />
+        </slot>
+      </template>
+    </ULink>
 
     <UDropdownList
       v-if="isShownOptions"
@@ -81,7 +81,6 @@ import vClickOutside from "../directive.clickOutside";
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
 import useAttrs from "./composables/attrs.composable";
-import { UDropdownButton } from "../ui.dropdown-button/constants/index.js";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDropdownLink", inheritAttrs: false });
@@ -95,6 +94,30 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownLink).labelKey,
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownLink).valueKey,
+  },
+
   /**
    * Link color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -153,30 +176,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownLink).noIcon,
   },
 
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).valueKey,
-  },
-
   /**
    * The position of dropdown list on the y-axis.
    * @values top, bottom
@@ -234,21 +233,16 @@ provide("hideDropdownOptions", hideOptions);
 const isShownOptions = ref(false);
 const selectedItem = ref("");
 
-const {
-  config,
-  wrapperAttrs,
-  dropdownLinkAttrs,
-  dropdownListAttrs,
-  dropdownIconAttrs,
-  triggerAttrs,
-} = useAttrs(props, { isShownOptions });
+const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
+  props,
+  { isShownOptions },
+);
 
 const iconSize = computed(() => {
   const sizes = {
-    xs: "2xs",
-    sm: "xs",
-    md: "sm",
-    lg: "md",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];

package/ui.form-calendar/index.vue

@@ -140,7 +140,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { merge } from "lodash-es";
 
 import UButton from "../ui.button";
@@ -543,16 +543,26 @@ watch(
   },
 );
 
-onMounted(() => {
-  if (selectedDate.value && isTimepickerEnabled.value) {
-    hoursRef.value.value = String(selectedDate.value.getHours()).padStart(2, "0");
-    minutesRef.value.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
-    secondsRef.value.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
-  }
+let isInit = false;
 
-  emit("userDateChange", userFormattedDate.value);
-  emit("formattedDateChange", userFormattedDate.value);
-});
+const unwatchInit = watch(
+  () => selectedDate.value,
+  () => {
+    if (isInit) unwatchInit();
+
+    if (selectedDate.value && isTimepickerEnabled.value) {
+      hoursRef.value.value = String(selectedDate.value.getHours()).padStart(2, "0");
+      minutesRef.value.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
+      secondsRef.value.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
+
+      emit("formattedDateChange", userFormattedDate.value);
+      emit("userDateChange", userFormattedDate.value);
+
+      isInit = true;
+    }
+  },
+  { deep: true },
+);
 
 function getCurrentValueType(value) {
   if (props.range && value === null) {

package/ui.text-alert/configs/default.config.js

@@ -1,11 +1,11 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 flex flex-col rounded-dynamic",
+    base: "border p-4 flex flex-col rounded-dynamic",
     variants: {
       variant: {
-        primary: "bg-{color}-600 text-white",
-        secondary: "bg-transparent border border-{color}-600 text-{color}-600",
-        thirdary: "bg-{color}-50 text-{color}-600",
+        primary: "bg-{color}-600 text-white border-transparent",
+        secondary: "border-{color}-600 text-{color}-600",
+        thirdary: "bg-{color}-50 text-{color}-600 border-transparent",
       },
       size: {
         xs: "text-2xs",
@@ -15,7 +15,7 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { variant: "thirdary", bordered: true, class: "border border-{color}-100" },
+      { variant: "thirdary", bordered: true, class: "border-{color}-100" },
       { color: "white", variant: "primary", class: "text-gray-900 bg-white" },
       { color: "white", variant: "secondary", class: "text-gray-900 border-gray-200" },
       { color: "white", variant: "thirdary", class: "text-gray-900 bg-white" },