vueless 0.0.454 → 0.0.456

package/package.json

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

package/ui.data-table/UTable.vue

@@ -2,7 +2,7 @@
   <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div
       v-show="isHeaderSticky || isShownActionsHeader"
-      ref="stickyHeaderRowRef"
+      ref="sticky-header-row"
       :style="tableRowWidthStyle"
       v-bind="stickyHeaderAttrs"
     >
@@ -82,7 +82,7 @@
       />
     </div>
 
-    <div ref="tableWrapperRef" v-bind="tableWrapperAttrs">
+    <div ref="table-wrapper" v-bind="tableWrapperAttrs">
       <table v-bind="tableAttrs">
         <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs">
@@ -101,7 +101,7 @@
 
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
 
-          <tr ref="headerRowRef" v-bind="headerRowAttrs">
+          <tr ref="header-row" v-bind="headerRowAttrs">
             <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
               <UCheckbox
                 v-model="selectAll"
@@ -241,7 +241,7 @@
         </tbody>
 
         <tfoot v-if="hasSlotContent($slots['footer'])" v-bind="footerAttrs">
-          <tr ref="footerRowRef" v-bind="footerRowAttrs">
+          <tr ref="footer-row" v-bind="footerRowAttrs">
             <td v-if="selectable" />
 
             <!--
@@ -251,7 +251,7 @@
             <slot name="footer" :cols-count="colsCount" />
           </tr>
 
-          <tr ref="stickyFooterRowRef" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
+          <tr ref="sticky-footer-row" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
             <td v-if="selectable" />
 
             <!--
@@ -277,6 +277,7 @@ import {
   onMounted,
   onUpdated,
   onBeforeUnmount,
+  useTemplateRef,
 } from "vue";
 import { merge } from "lodash-es";
 
@@ -422,11 +423,11 @@ const tableWidth = ref(0);
 const tableHeight = ref(0);
 const pagePositionY = ref(0);
 
-const headerRowRef = ref(null);
-const footerRowRef = ref(null);
-const tableWrapperRef = ref(null);
-const stickyFooterRowRef = ref(null);
-const stickyHeaderRowRef = ref(null);
+const headerRowRef = useTemplateRef("header-row");
+const footerRowRef = useTemplateRef("footer-row");
+const tableWrapperRef = useTemplateRef("table-wrapper");
+const stickyFooterRowRef = useTemplateRef("sticky-footer-row");
+const stickyHeaderRowRef = useTemplateRef("sticky-header-row");
 
 const i18nGlobal = tm(UTable);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));

package/ui.data-table/UTableRow.vue

@@ -31,21 +31,27 @@
         :style="getNestedShift()"
         v-bind="bodyCellNestedAttrs"
       >
-        <UIcon
-          v-if="isShownToggleIcon"
-          size="xs"
-          internal
-          interactive
-          :name="getToggleIconName(row)"
-          color="brand"
-          v-bind="toggleIconConfig"
-          @click.stop="onClickToggleIcon"
-        />
-
+        <div
+          ref="toggle-wrapper"
+          v-bind="bodyCellNestedExpandIconWrapperAttrs"
+          :style="{ width: getIconWidth() }"
+        >
+          <UIcon
+            v-if="isShownToggleIcon"
+            size="xs"
+            internal
+            interactive
+            :data-row-toggle-icon="row.id"
+            :name="getToggleIconName(row)"
+            color="brand"
+            v-bind="toggleIconConfig"
+            @click.stop="onClickToggleIcon"
+          />
+        </div>
         <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
           <div
             v-bind="bodyCellContentAttrs"
-            ref="cellRef"
+            ref="cell"
             :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
             :data-test="`${dataTest}-${key}-cell`"
           >
@@ -58,7 +64,7 @@
         <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
           <div
             v-bind="bodyCellContentAttrs"
-            ref="cellRef"
+            ref="cell"
             :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
             :data-test="`${dataTest}-${key}-cell`"
           >
@@ -147,11 +153,11 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useSlots } from "vue";
+import { computed, onMounted, useSlots, useTemplateRef } from "vue";
 import { cx } from "../utils/utilUI.js";
 import useUI from "../composables/useUI.js";
 
-import { HYPHEN_SYMBOL } from "../constants.js";
+import { HYPHEN_SYMBOL, PX_IN_REM } from "../constants.js";
 import { getFilteredRow } from "./utilTable.js";
 
 import { useMutationObserver } from "../composables/useMutationObserver.js";
@@ -207,7 +213,8 @@ const emit = defineEmits(["toggleRowVisibility", "click", "click-cell"]);
 
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
-const cellRef = ref([]);
+const cellRef = useTemplateRef("cell");
+const toggleWrapperRef = useTemplateRef("toggle-wrapper");
 const slots = useSlots();
 
 useMutationObserver(cellRef, setCellTitle, { childList: true });
@@ -220,6 +227,7 @@ const {
   bodyCellNestedExpandIconAttrs,
   bodyCellNestedCollapseIconAttrs,
   bodyCellBaseAttrs,
+  bodyCellNestedExpandIconWrapperAttrs,
 } = props.attrs;
 
 const toggleIconConfig = computed(() =>
@@ -251,7 +259,13 @@ const isShownToggleIcon = computed(() => {
   );
 });
 
-const getToggleIconName = computed(() => (row) => {
+onMounted(() => {
+  if (cellRef.value) {
+    cellRef.value.forEach(setElementTitle);
+  }
+});
+
+function getToggleIconName(row) {
   const isHiddenNestedRow = Array.isArray(row.row)
     ? row.row.some((nestedRow) => nestedRow.isHidden)
     : row.row?.isHidden;
@@ -259,11 +273,18 @@ const getToggleIconName = computed(() => (row) => {
   const isHidden = isHiddenNestedRow || row.nestedData?.isHidden;
 
   return isHidden ? props.config.defaults.expandIcon : props.config.defaults.collapseIcon;
-});
+}
 
-onMounted(() => {
-  cellRef.value.forEach(setElementTitle);
-});
+function getIconWidth() {
+  const icon = document.querySelector(`[data-row-toggle-icon='${props.row.id}']`);
+  const currentWrapperWidth = toggleWrapperRef.value?.at(0)?.getBoundingClientRect()?.width;
+
+  if (icon) {
+    return `${icon.getBoundingClientRect().width / PX_IN_REM}rem`;
+  }
+
+  return `${currentWrapperWidth / PX_IN_REM || 1}rem`;
+}
 
 function getCellClasses(row, key) {
   const cellClasses = row[key]?.class || "";

package/ui.data-table/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "relative",
+  wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
@@ -18,7 +18,7 @@ export default /*tw*/ {
   stickyHeaderActionsCheckbox: "{UCheckbox}",
   stickyHeaderActionsCounter: "-ml-2",
   tableWrapper: "border border-gray-200 rounded-dynamic bg-white",
-  table: "min-w-full border-none text-sm w-full table-fixed",
+  table: "min-w-full border-none text-sm w-full table-auto",
   header: "border-b border-gray-200",
   headerRow: "",
   headerCellBase: {
@@ -60,6 +60,7 @@ export default /*tw*/ {
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateDivider: "",
   bodyCellNested: "mr-2 flex gap-0.5",
+  bodyCellNestedExpandIconWrapper: "",
   bodyCellNestedExpandIcon: {
     component: "{UIcon}",
     wrapper: "rounded-sm",

package/ui.data-table/storybook/stories.js

@@ -228,7 +228,6 @@ NestedContent.args = {
       };
     }
   },
-  selectable: true,
   slotTemplate: `
     <template #nested-content="{ row }">
       <div class="p-4 bg-gray-100">

package/ui.form-calendar/UCalendar.vue

@@ -312,12 +312,6 @@ const emit = defineEmits([
    * @property {string} value
    */
   "userDateChange",
-
-  /**
-   * Triggers when the date format applied to the input changes.
-   * @property {string} value
-   */
-  "formattedDateChange",
 ]);
 
 const { tm } = useLocale();
@@ -519,10 +513,6 @@ const selectedDateTo = computed(() => {
     : undefined;
 });
 
-const formattedDate = computed(() => {
-  return formatDate(selectedDate.value, actualDateFormat.value, locale.value);
-});
-
 const userFormattedDate = computed(() => {
   const date = formatDate(selectedDate.value, actualUserFormat.value, userFormatLocale.value);
   const dateTo = props.range
@@ -547,10 +537,6 @@ watch(userFormattedDate, () => {
   emit("userDateChange", userFormattedDate.value);
 });
 
-watch(formattedDate, () => {
-  emit("formattedDateChange", userFormattedDate.value);
-});
-
 // This watcher force updates value when range props changed
 watch(
   () => props.range,
@@ -573,7 +559,6 @@ const unwatchInit = watch(
       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;

package/ui.form-calendar/config.js

@@ -6,7 +6,14 @@ export default /*tw*/ {
   dayView: "",
   weekDays: "grid grid-cols-7 justify-items-center gap-1",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
-  days: "grid grid-cols-7 justify-items-center gap-1",
+  days: {
+    base: "grid grid-cols-7 justify-items-center gap-1",
+    variants: {
+      range: {
+        true: "gap-0 gap-y-0.5",
+      },
+    },
+  },
   dateInRange: "bg-brand/15 font-semibold !text-brand-900 hover:bg-brand/30 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
@@ -20,9 +27,9 @@ export default /*tw*/ {
   dayInRange: "",
   currentDayInRange: "",
   anotherMonthDay: "",
-  firstDayInRange: "",
+  firstDayInRange: "font-semibold",
   anotherMonthFirstDayInRange: "",
-  lastDayInRange: "",
+  lastDayInRange: "font-semibold",
   currentLastDayInRange: "",
   currentFirstDayInRange: "",
   anotherMonthLastDayInRange: "",

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

@@ -65,7 +65,6 @@
         v-bind="calendarAttrs"
         @keydown.esc="deactivate"
         @user-date-change="onUserFormatDateChange"
-        @formatted-date-change="onFormattedDateChange"
         @input="onInput"
         @blur="onBlur"
         @submit="onSubmit"
@@ -355,10 +354,6 @@ function onUserFormatDateChange(value) {
   userFormatDate.value = formatUserDate(value) || "";
 }
 
-function onFormattedDateChange(value) {
-  formattedDate.value = value || "";
-}
-
 function onSubmit() {
   deactivate();
 }
@@ -402,7 +397,6 @@ function onInput() {
     calendarRef.value?.wrapperRef?.blur();
     emit("input", {
       value: localValue.value,
-      formattedDate: formattedDate.value,
       userFormatDate: formatUserDate(userFormatDate.value),
     });
   });

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

@@ -279,6 +279,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePickerRange).dateFormat,
   },
 
+  /**
+   * User-friendly date format (it will be shown in UI).
+   */
+  userDateFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePickerRange).userDateFormat,
+  },
+
   /**
    * Datepicker size.
    * @values sm, md, lg
@@ -498,7 +506,13 @@ const clickOutsideOptions = computed(() => {
   };
 });
 
-const { userFormatDate } = useUserFormat(localValue, userFormatLocale, isPeriod, isVariant);
+const { userFormatDate } = useUserFormat(
+  localValue,
+  userFormatLocale,
+  isPeriod,
+  locale,
+  props.userDateFormat,
+);
 
 watch(
   calendarValue,

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

@@ -3,7 +3,14 @@ export default /*tw*/ {
   input: "{UInput}",
   activeInput: {
     component: "{UInput}",
-    wrapper: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+    wrapper: {
+      base: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      variants: {
+        error: {
+          true: "ring-red-500/15",
+        },
+      },
+    },
   },
   buttonWrapper: `
     flex rounded-dynamic max-md:justify-between
@@ -96,7 +103,6 @@ export default /*tw*/ {
     component: "{UCalendar}",
     wrapper: "p-0 pt-2 w-full border-none shadow-none rounded-none",
     navigation: "pb-0 mb-0 border-none",
-    days: "gap-0 gap-y-0.5",
     day: "w-full",
   },
   i18n: {
@@ -185,6 +191,7 @@ export default /*tw*/ {
     },
   },
   defaults: {
+    userDateFormat: "j F Y",
     size: "md",
     variant: "button",
     labelAlign: "topInside",

package/ui.form-date-picker-range/useUserFormat.js

@@ -1,12 +1,9 @@
 import { computed } from "vue";
 
-import useBreakpoint from "../composables/useBreakpoint.js";
-
 import { isSameMonth } from "../ui.form-calendar/utilDate.js";
+import { formatDate } from "../ui.form-calendar/utilCalendar.js";
 
-export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant) {
-  const { isMobileBreakpoint } = useBreakpoint();
-
+export function useUserFormat(localValue, userFormatLocale, isPeriod, locale, userDateFormat) {
   const userFormatDate = computed(() => {
     if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
 
@@ -19,7 +16,6 @@ export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant)
 
     if (isDefaultTitle) {
       let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      let startYear = from.getFullYear();
       let endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
       let endYear = to?.getFullYear();
 
@@ -27,54 +23,34 @@ export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant)
         startMonthName = "";
       }
 
-      if (startYear.year === endYear) {
-        startYear = "";
-      }
+      const isDateToSameMonth = isSameMonth(from, to);
+      const isDateToSameYear = from.getFullYear() === to.getFullYear();
 
-      const isDatesToSameMonth = isSameMonth(from, to);
-      const isDatesToSameYear = from.getFullYear() === to.getFullYear();
+      let fromFormat = userDateFormat;
 
-      let fromTitle = `${from.getDate()} ${startMonthName} ${startYear}`;
-
-      if (isDatesToSameMonth && isDatesToSameYear) {
-        fromTitle = from.getDate();
+      if (isDateToSameMonth && isDateToSameYear) {
+        fromFormat = fromFormat.replace(/[YyMmFnU]/g, "");
       }
 
-      if (!isDatesToSameMonth && isDatesToSameYear) {
-        fromTitle = `${from.getDate()} ${startMonthName}`;
+      if (!isDateToSameMonth && isDateToSameYear) {
+        fromFormat = fromFormat.replace(/[Yy]/g, "");
       }
 
-      const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
+      const fromTitle = from ? formatDate(from, fromFormat, locale.value) : "";
+      const toTitle = to ? formatDate(to, userDateFormat, locale.value) : "";
 
       title = `${fromTitle} – ${toTitle}`;
     }
 
     if (isPeriod.value.month) {
-      const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      const startYear = from.getFullYear();
-
-      title = `${startMonthName} ${startYear}`;
+      title = formatDate(from, "F Y", locale.value);
     }
 
     if (isPeriod.value.quarter || isPeriod.value.year) {
-      const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      const endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
-      const endYear = to?.getFullYear();
-
-      const fromTitle = `${from.getDate()} ${startMonthName}`;
-      const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
-
-      title = `${fromTitle} – ${toTitle}`;
-    }
-
-    if (isMobileBreakpoint.value && !isPeriod.value.month && isVariant.value.button) {
-      const startDay = String(from.getDate()).padStart(2, "0");
-      const endDay = String(to?.getDate())?.padStart(2, "0");
-      const startMonth = String(from.getMonth()).padStart(2, "0");
-      const endMonth = String(to?.getMonth())?.padStart(2, "0");
+      const fromFormat = userDateFormat.replace(/[Yy]/g, "");
 
-      const fromTitle = `${startDay}.${startMonth}`;
-      const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear()}` : "";
+      const fromTitle = from ? formatDate(from, fromFormat, locale.value) : "";
+      const toTitle = to ? formatDate(to, userDateFormat, locale.value) : "";
 
       title = `${fromTitle} – ${toTitle}`;
     }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.454",
+  "version": "0.0.456",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1058,18 +1058,6 @@
                   "name": "value"
                 }
               ]
-            },
-            {
-              "name": "formattedDateChange",
-              "description": "Triggers when the date format applied to the input changes.",
-              "properties": [
-                {
-                  "type": [
-                    "string"
-                  ],
-                  "name": "value"
-                }
-              ]
             }
           ],
           "exposes": [
@@ -2683,6 +2671,15 @@
                 "type": "string"
               }
             },
+            {
+              "name": "userDateFormat",
+              "description": "User-friendly date format (it will be shown in UI).",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "j F Y"
+            },
             {
               "name": "size",
               "description": "Datepicker size.",