vueless 0.0.604 → 0.0.605

package/composables/useUI.ts

@@ -53,11 +53,12 @@ export default function useUI<T>(
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = Object.keys(defaultConfig || {})[0];
-  const propsConfig = props.config as ComponentConfig<T>;
   const config = ref({}) as Ref<ComponentConfig<T>>;
   const attrs = useAttrs();
 
   watchEffect(() => {
+    const propsConfig = props.config as ComponentConfig<T>;
+
     config.value = getMergedConfig({
       defaultConfig,
       globalConfig,
@@ -139,9 +140,7 @@ export default function useUI<T>(
     /* Delete value key to prevent v-model overwrite. */
     delete commonAttrs.value;
 
-    watch(config, updateVuelessAttrs, { immediate: true });
-    watch(props, updateVuelessAttrs);
-    watch(classes, updateVuelessAttrs);
+    watch([config, props, classes], updateVuelessAttrs, { immediate: true });
 
     /**
      * Updating Vueless attributes.
@@ -177,6 +176,8 @@ export default function useUI<T>(
 
       if (extendsKeys.length) {
         extendsKeys.forEach((key) => {
+          if (key === configKey) return;
+
           extendsClasses = [
             ...extendsClasses,
             ...getExtendsClasses(key),
@@ -195,6 +196,7 @@ export default function useUI<T>(
     function getExtendsConfigAttr(configKey: string) {
       let extendsConfigAttr: NestedComponent = {};
 
+      const propsConfig = props.config as ComponentConfig<T>;
       const extendsKeys = getExtendsKeys(config.value[configKey]);
 
       if (extendsKeys.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.604",
+  "version": "0.0.605",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button/UButton.vue

@@ -119,9 +119,9 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
       <slot name="right" :icon-name="rightIcon">
         <UIcon
           v-if="rightIcon"
-          internal
-          color="inherit"
           :name="rightIcon"
+          color="inherit"
+          internal
           v-bind="rightIconAttrs"
         />
       </slot>

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -102,7 +102,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
         <slot :label="label" :opened="isShownOptions" />
       </template>
 
-      <template #right="{ iconColor }">
+      <template #right="{ iconSize }">
         <!--
           @slot Use it to add something after the label.
           @binding {boolean} opened
@@ -111,8 +111,8 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
           <UIcon
             v-if="!noIcon"
             internal
-            :color="iconColor"
-            :size="size"
+            color="inherit"
+            :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"

package/ui.dropdown-button/config.ts

@@ -1,11 +1,10 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: {
-    base: "{UButton}",
+    base: "{UButton} transition",
     variants: {
       opened: {
         true: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
-        false: "reactive-fix", // todo: remove it later
       },
     },
     compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],

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

@@ -63,7 +63,9 @@ const userFormatDate = ref("");
 const formattedDate = ref("");
 const customView = ref(View.Day);
 
-const datepickerInputRef = useTemplateRef<typeof UInput>("input");
+type UInputRef = InstanceType<typeof UInput>;
+
+const datepickerInputRef = useTemplateRef<UInputRef>("input");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const calendarRef = useTemplateRef<ComponentExposed<typeof UCalendar>>("calendar");
 
@@ -258,6 +260,7 @@ const mutatedProps = computed(() => ({
 const {
   config,
   wrapperAttrs,
+  rightIconAttrs,
   datepickerInputAttrs,
   datepickerInputActiveAttrs,
   datepickerCalendarAttrs,
@@ -318,7 +321,7 @@ watchEffect(() => {
           @binding {string} icon-size
         -->
         <slot name="right-icon" :icon-name="iconName" :icon-size="iconSize">
-          <UIcon :name="iconName" :size="iconSize" color="gray" />
+          <UIcon :name="iconName" :size="iconSize" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
 

package/ui.form-date-picker/config.ts

@@ -12,6 +12,7 @@ export default /*tw*/ {
       },
     },
   },
+  rightIcon: "{UIcon}",
   datepickerCalendar: {
     base: "{UCalendar} absolute mb-3 z-40",
     variants: {

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -543,6 +543,7 @@ const mutatedProps = computed(() => ({
 const {
   config,
   wrapperAttrs,
+  rightIconAttrs,
   datepickerCalendarAttrs,
   datepickerInputAttrs,
   menuAttrs,
@@ -551,7 +552,7 @@ const {
   shiftRangeButtonAttrs,
   rangeInputWrapperAttrs,
   rangeInputErrorAttrs,
-  datepickerActiveInputAttrs,
+  datepickerInputActiveAttrs,
   rangeInputFirstAttrs,
   rangeInputLastAttrs,
   periodRowAttrs,
@@ -595,8 +596,9 @@ watchEffect(() => {
       readonly
       :left-icon="leftIcon"
       :right-icon="rightIcon || config.defaults.calendarIcon"
-      v-bind="isShownMenu ? datepickerActiveInputAttrs : datepickerInputAttrs"
+      v-bind="isShownMenu ? datepickerInputActiveAttrs : datepickerInputAttrs"
       @focus="activate"
+      @keydown.esc="deactivate"
     >
       <template #left>
         <!-- @slot Use it to add something before the date. -->
@@ -608,14 +610,14 @@ watchEffect(() => {
         <slot name="left-icon" />
       </template>
 
-      <template #right-icon>
+      <template #right-icon="{ iconName, iconSize }">
         <!--
           @slot Use it add an icon after the date.
           @binding {string} icon-name
           @binding {string} icon-size
         -->
-        <slot name="right-icon" :icon-name="rightIcon" :icon-size="size">
-          <UIcon :name="rightIcon" :size="size" color="gray" />
+        <slot name="right-icon" :icon-name="iconName" :icon-size="size">
+          <UIcon :name="iconName" :size="iconSize" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
 

package/ui.form-date-picker-range/config.ts

@@ -12,6 +12,7 @@ export default /*tw*/ {
       },
     },
   },
+  rightIcon: "{UIcon}",
   buttonWrapper: {
     base: `
       flex rounded-dynamic max-md:justify-between
@@ -211,7 +212,6 @@ export default /*tw*/ {
     labelAlign: "topInside",
     openDirectionX: "auto",
     openDirectionY: "auto",
-    timepicker: false,
     disabled: false,
     dateFormat: undefined,
     maxDate: undefined,

package/ui.form-date-picker-range/storybook/stories.ts

@@ -31,6 +31,7 @@ export default {
   title: "Form Inputs & Controls / Date Picker Range",
   component: UDatePickerRange,
   args: {
+    label: "Datepicker range",
     modelValue: {
       from: new Date(2022, 1, 14),
       to: new Date(2022, 2, 20),
@@ -41,15 +42,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDatePickerRangeName),
       story: {
         height: "620px",
       },
     },
-    parameters: {
-      docs: {
-        ...getDocsDescription(UDatePickerRangeName),
-      },
-    },
   },
 } as Meta;
 

package/ui.form-date-picker-range/types.ts

@@ -124,11 +124,6 @@ export interface UDatePickerRangeProps<TModelValue> {
    */
   dateFormat?: string;
 
-  /**
-   * Same as date format, but used when timepicker is enabled.
-   */
-  dateTimeFormat?: string;
-
   /**
    * User-friendly date format (it will be shown in UI).
    */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.604",
+  "version": "0.0.605",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3282,15 +3282,6 @@
                 "type": "string"
               }
             },
-            {
-              "name": "dateTimeFormat",
-              "required": false,
-              "description": "Same as date format, but used when timepicker is enabled.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
             {
               "name": "userDateFormat",
               "required": false,