vueless 0.0.424 → 0.0.425

package/directives/vTooltip.js

@@ -25,12 +25,26 @@ export default {
   mounted(el, bindings) {
     if (isSSR) return;
 
-    tippy(el, merge(settings, bindings.value || {}));
+    if (typeof bindings.value === "string" && bindings.value.length) {
+      tippy(el, merge(settings, { content: bindings.value }));
+
+      return;
+    }
+
+    if (bindings.value.content && bindings.value.content.length) {
+      tippy(el, merge(settings, bindings.value || {}));
+    }
   },
 
   updated(el, bindings) {
     if (!el._tippy || isSSR) return;
 
+    if (typeof bindings.value === "string") {
+      el._tippy.setProps(merge(settings, { content: bindings.value }));
+
+      return;
+    }
+
     el._tippy.setProps(merge(settings, bindings.value || {}));
   },
 

package/package.json

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

package/preset.tailwind.js

@@ -6,6 +6,10 @@ import {
   GRAY_COLOR,
   COOL_COLOR,
   DARK_MODE_SELECTOR,
+  DEFAULT_ROUNDING,
+  DEFAULT_RING,
+  DEFAULT_RING_OFFSET,
+  DEFAULT_GRAY_COLOR,
 } from "./constants.js";
 
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
@@ -82,6 +86,16 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-rounding)",
       },
     },
+    configViewer: {
+      themeReplacements: {
+        // TODO: Set colors from vueless.config.{js|ts} if it present.
+        "var(--vl-ring)": DEFAULT_RING,
+        "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
+        "var(--vl-rounding)": DEFAULT_ROUNDING,
+        ...getReplacementColors(GRAY_COLOR, DEFAULT_GRAY_COLOR),
+        ...getReplacementColors(BRAND_COLOR, DEFAULT_GRAY_COLOR),
+      },
+    },
   },
 };
 
@@ -133,3 +147,29 @@ function getPalette(color) {
 
   return palette;
 }
+
+/**
+ * Prepare a color object for theme replacement to fix missing css color variables in `tailwind-config-viewer`.
+ * @param { String } color (gray | brand)
+ * @param { String } tailwindColor any tailwind color with pallet.
+ * @returns { Object } - `tailwind-config-viewer` color replacement object.
+ */
+function getReplacementColors(color, tailwindColor) {
+  const customColors = {
+    ...colors,
+    [BRAND_COLOR]: brandColors || {},
+    [GRAY_COLOR]: grayColors || {},
+    [COOL_COLOR]: { ...(colors[GRAY_COLOR] || {}) },
+  };
+
+  let varsPalette = {
+    [twColorWithOpacity(`--vl-color-${color}-default`)]: customColors[tailwindColor][600],
+  };
+
+  COLOR_SHADES.forEach((shade) => {
+    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] =
+      customColors[tailwindColor][shade];
+  });
+
+  return varsPalette;
+}

package/ui.data-table/UTableRow.vue

@@ -36,7 +36,7 @@
           :name="getToggleIconName(row)"
           color="brand"
           v-bind="toggleIconConfig"
-          @click="onClickToggleRowChild(row.row?.id || row.id)"
+          @click="onClickToggleIcon"
         />
       </div>
 
@@ -88,7 +88,7 @@
   </template>
 
   <UTableRow
-    v-if="row.row && !row.row.isHidden && !row.nestedData"
+    v-if="isSingleNestedRow && row.row && !row.row.isHidden && !row.nestedData"
     v-bind="$attrs"
     v-model:selected-rows="selectedRows"
     :attrs="attrs"
@@ -101,6 +101,25 @@
     @toggle-row-visibility="onClickToggleRowChild"
     @click="onClick"
   />
+
+  <template v-if="!isSingleNestedRow && row.row.length && !row.nestedData">
+    <template v-for="nestedRow in row.row" :key="nestedRow.id">
+      <UTableRow
+        v-if="!nestedRow.isHidden"
+        v-bind="$attrs"
+        v-model:selected-rows="selectedRows"
+        :attrs="attrs"
+        :columns="columns"
+        :row="nestedRow"
+        :data-test="dataTest"
+        :nested-level="nestedLevel + 1"
+        :config="config"
+        :selectable="selectable"
+        @toggle-row-visibility="onClickToggleRowChild"
+        @click="onClick"
+      />
+    </template>
+  </template>
 </template>
 
 <script setup>
@@ -187,6 +206,8 @@ const toggleIconConfig = computed(() =>
 
 const shift = computed(() => (props.row.row ? 1.5 : 2));
 
+const isSingleNestedRow = computed(() => !Array.isArray(props.row.row));
+
 const getToggleIconName = computed(() => (row) => {
   const isHidden = row.row?.isHidden || row.nestedData?.isHidden;
 
@@ -268,4 +289,14 @@ function setElementTitle(element) {
     element.removeAttribute("title");
   }
 }
+
+function onClickToggleIcon() {
+  if (isSingleNestedRow.value) {
+    onClickToggleRowChild(props.row.row.id);
+
+    return;
+  }
+
+  props.row.row.forEach(({ id }) => onClickToggleRowChild(id));
+}
 </script>

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

@@ -67,33 +67,53 @@ function getNestedRow() {
     key_2: "Some data",
     key_3: "Numbers",
     key_4: "Statistics",
-    row: {
-      id: getRandomId(),
-      isChecked: false,
-      isHidden: true,
-      key_1: "Nesting",
-      key_2: "Nesting",
-      key_3: "Nesting",
-      key_4: "Nesting",
-      row: {
+    row: [
+      {
         id: getRandomId(),
         isChecked: false,
         isHidden: true,
-        key_1: "Second level nesting",
-        key_2: "Second level nesting",
-        key_3: "Second level nesting",
-        key_4: "Second level nesting",
+        key_1: "Nesting",
+        key_2: "Nesting",
+        key_3: "Nesting",
+        key_4: "Nesting",
         row: {
           id: getRandomId(),
           isChecked: false,
           isHidden: true,
-          key_1: "Third level nesting",
-          key_2: "Third level nesting",
-          key_3: "Third level nesting",
-          key_4: "Third level nesting",
+          key_1: "Second level nesting",
+          key_2: "Second level nesting",
+          key_3: "Second level nesting",
+          key_4: "Second level nesting",
         },
       },
-    },
+      {
+        id: getRandomId(),
+        isChecked: false,
+        isHidden: true,
+        key_1: "Nesting",
+        key_2: "Nesting",
+        key_3: "Nesting",
+        key_4: "Nesting",
+        row: {
+          id: getRandomId(),
+          isChecked: false,
+          isHidden: true,
+          key_1: "Second level nesting",
+          key_2: "Second level nesting",
+          key_3: "Second level nesting",
+          key_4: "Second level nesting",
+          row: {
+            id: getRandomId(),
+            isChecked: false,
+            isHidden: true,
+            key_1: "Third level nesting",
+            key_2: "Third level nesting",
+            key_3: "Third level nesting",
+            key_4: "Third level nesting",
+          },
+        },
+      },
+    ],
   };
 }
 

package/ui.data-table/utilTable.js

@@ -24,19 +24,23 @@ export function syncRowCheck(row, selectedRows) {
 
 export function toggleRowVisibility(row, targetRowId) {
   if (row.id === targetRowId) {
-    if ("isHidden" in row) {
+    if (Object.hasOwn(row, "isHidden")) {
       row.isHidden = !row.isHidden;
-    } else if (row.nestedData && "isHidden" in row.nestedData) {
+    } else if (row.nestedData && Object.hasOwn(row.nestedData, "isHidden")) {
       row.nestedData.isHidden = !row.nestedData.isHidden;
     }
 
     return;
   }
 
-  if (row.row) {
+  if (row.row && !Array.isArray(row.row)) {
     toggleRowVisibility(row.row, targetRowId);
   }
 
+  if (row.row && Array.isArray(row.row)) {
+    row.row.forEach((nestedRow) => toggleRowVisibility(nestedRow, targetRowId));
+  }
+
   if (row.nestedData) {
     toggleRowVisibility(row.nestedData, targetRowId);
   }

package/ui.form-calendar/config.js

@@ -7,14 +7,14 @@ export default /*tw*/ {
   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",
-  dateInRange: "bg-brand/15 !text-brand-900 hover:bg-brand/30 rounded-none",
+  dateInRange: "bg-brand/15 font-semibold !text-brand-900 hover:bg-brand/30 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
   lastDateInRange: "rounded-l-none",
   anotherMonthDate: "text-gray-400",
   activeDate: "bg-brand-100",
-  selectedDate: "",
-  currentDate: "border-2 border-brand-600",
+  selectedDate: "font-semibold",
+  currentDate: "border-2 border-brand-600 font-semibold",
   day: "{UButton} size-9 w-full font-normal",
   currentDay: "",
   dayInRange: "",

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

@@ -127,82 +127,43 @@
     </div>
 
     <div v-if="isDatePeriodOutOfRange" v-bind="periodDateListAttrs">
-      <template v-for="(date, index) in periodDateList" :key="date.title">
+      <template v-for="date in periodDateList" :key="date.title">
         <UButton
-          v-if="getDatePeriodState(date, index).isActive"
-          no-ring
+          v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
           size="sm"
-          color="grayscale"
           variant="thirdary"
-          :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="periodDateActiveAttrs"
-          :label="String(date.title)"
-          :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
-          @click="selectDate(date), toggleMenu()"
-        />
-
-        <UButton
-          v-else-if="getDatePeriodState(date, index).isFirstInRange && !isListType"
+          color="brand"
           no-ring
-          size="sm"
-          color="grayscale"
-          variant="thirdary"
+          filled
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="firstPeriodGridDateAttrs"
+          v-bind="periodDateCurrentSelectedAttrs"
           :label="String(date.title)"
-          :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
         />
 
         <UButton
-          v-else-if="getDatePeriodState(date, index).isFirstInRange && isListType"
-          no-ring
+          v-else-if="getDatePeriodState(date).isSelected"
           size="sm"
-          color="grayscale"
           variant="thirdary"
-          :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="firstPeriodListDateAttrs"
-          :label="String(date.title)"
-          :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
-          @click="selectDate(date), toggleMenu()"
-        />
-
-        <UButton
-          v-else-if="getDatePeriodState(date, index).isLastInRange && !isListType"
+          color="brand"
           no-ring
-          size="sm"
-          color="grayscale"
-          variant="thirdary"
+          filled
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="lastPeriodGridDateAttrs"
+          v-bind="periodDateSelectedAttrs"
           :label="String(date.title)"
-          :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
         />
 
         <UButton
-          v-else-if="getDatePeriodState(date, index).isLastInRange && isListType"
-          no-ring
+          v-else-if="getDatePeriodState(date).isCurrentDate"
           size="sm"
-          color="grayscale"
-          variant="thirdary"
-          :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="lastPeriodListDateAttrs"
-          :label="String(date.title)"
-          :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
-          @click="selectDate(date), toggleMenu()"
-        />
-
-        <UButton
-          v-else-if="getDatePeriodState(date, index).isInRange"
+          variant="secondary"
+          color="brand"
           no-ring
-          size="sm"
-          color="grayscale"
-          variant="thirdary"
+          filled
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="periodDateInRangeAttrs"
+          v-bind="periodDateCurrentAttrs"
           :label="String(date.title)"
-          :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
         />
 
@@ -296,12 +257,9 @@ const {
   rangeSwitchButtonAttrs,
   rangeSwitchTitleAttrs,
   periodDateListAttrs,
-  periodDateActiveAttrs,
-  firstPeriodGridDateAttrs,
-  firstPeriodListDateAttrs,
-  lastPeriodGridDateAttrs,
-  lastPeriodListDateAttrs,
-  periodDateInRangeAttrs,
+  periodDateSelectedAttrs,
+  periodDateCurrentSelectedAttrs,
+  periodDateCurrentAttrs,
   periodDateAttrs,
 } = props.attrs;
 
@@ -312,8 +270,6 @@ const periods = computed(() => [
   { name: PERIOD.year, title: props.locale.year },
 ]);
 
-const isListType = computed(() => props.isPeriod.quarter || props.isPeriod.week);
-
 const rangeSwitchTitle = computed(() => {
   if (props.isPeriod.month || props.isPeriod.quarter) {
     return String(activeDate.value.getFullYear());
@@ -387,7 +343,7 @@ function selectCustomRange() {
   };
 }
 
-function getDatePeriodState(date, index) {
+function getDatePeriodState(date) {
   const localStart = new Date(localValue.value.from);
   const localEnd = new Date(localValue.value.to);
 
@@ -399,38 +355,9 @@ function getDatePeriodState(date, index) {
   localStart.setHours(0, 0, 0, 0);
   localEnd.setHours(23, 59, 59, 999);
 
-  const startDateInRangeIndex = periodDateList.value.findIndex((periodDate) => {
-    return localStart <= periodDate.endRange && localStart >= periodDate.startRange;
-  });
-
-  const endDateInRangeIndex = periodDateList.value.findIndex((periodDate) => {
-    return localEnd >= periodDate.startRange && localEnd <= periodDate.endRange;
-  });
-
-  let isInRange = index >= startDateInRangeIndex && index <= endDateInRangeIndex;
-
-  if (!~startDateInRangeIndex || !~endDateInRangeIndex) {
-    isInRange =
-      (index >= startDateInRangeIndex && startDateInRangeIndex > -1) ||
-      (index <= endDateInRangeIndex && endDateInRangeIndex > -1);
-  }
-
-  if (
-    !~startDateInRangeIndex &&
-    periodDateList.value.at(0).startRange > localStart &&
-    !~endDateInRangeIndex &&
-    periodDateList.value.at(0).endRange < localEnd
-  ) {
-    isInRange = true;
-  }
-
-  const isSingleItem =
-    startDateInRangeIndex === endDateInRangeIndex && ~endDateInRangeIndex && ~startDateInRangeIndex;
-
-  const isFirstInRange = startDateInRangeIndex === index;
-  const isLastInRange = endDateInRangeIndex === index;
-  const isActive = localValue.value.from === date.startRange;
+  const isSelected = localStart - date.startRange === 0 && localEnd - date.endRange === 0;
+  const isCurrentDate = date.startRange <= new Date() && new Date() <= date.endRange;
 
-  return { isInRange, isSingleItem, isFirstInRange, isLastInRange, isActive };
+  return { isSelected, isCurrentDate };
 }
 </script>

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

@@ -60,13 +60,9 @@ export default /*tw*/ {
   periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateQuarterList: "",
   periodDate: "w-full",
-  periodDateInRange: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
-  edgePeriodDate: "rounded-dynamic bg-brand-200 text-brand-900 hover:bg-brand-200",
-  firstPeriodGridDate: "rounded-r-none",
-  lastPeriodGridDate: "rounded-l-none",
-  firstPeriodListDate: "rounded-b-none",
-  lastPeriodListDate: "rounded-t-none",
-  periodDateActive: "bg-gray-100",
+  periodDateSelected: "",
+  periodDateCurrent: "border-2 border-brand-600",
+  periodDateCurrentSelected: "",
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
   rangeInputFirst: {

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

@@ -19,12 +19,7 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
     description: Boolean(props.description),
   }));
 
-  const extendingKeys = [
-    "buttonWrapperActive",
-    "buttonActive",
-    "edgePeriodDate",
-    "periodDateMonthList",
-  ];
+  const extendingKeys = ["buttonWrapperActive", "buttonActive", "periodDateMonthList"];
   const extendingKeysClasses = getExtendingKeysClasses(
     [
       ...extendingKeys,
@@ -34,6 +29,8 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
       "periodDateWeekList",
       "periodDateQuarterList",
       "periodDateYearList",
+      "periodDateSelected",
+      "periodDateCurrent",
     ],
     mutatedProps,
   );
@@ -65,34 +62,20 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
     periodDateYearList: {
       base: computed(() => [extendingKeysClasses.periodDateList.value]),
     },
-    periodDateActive: {
+    periodDateSelected: {
       base: computed(() => [extendingKeysClasses.periodDate.value]),
     },
-    periodDateInRange: {
-      base: computed(() => [extendingKeysClasses.periodDate.value]),
-    },
-    firstPeriodGridDate: {
-      base: computed(() => [
-        extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.edgePeriodDate.value,
-      ]),
-    },
-    firstPeriodListDate: {
-      base: computed(() => [
-        extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.edgePeriodDate.value,
-      ]),
-    },
-    lastPeriodGridDate: {
+    periodDateCurrent: {
       base: computed(() => [
         extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.edgePeriodDate.value,
+        extendingKeysClasses.periodDateCurrent.value,
       ]),
     },
-    lastPeriodListDate: {
+    periodDateCurrentSelected: {
       base: computed(() => [
         extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.edgePeriodDate.value,
+        extendingKeysClasses.periodDateSelected.value,
+        extendingKeysClasses.periodDateCurrent.value,
       ]),
     },
   });

package/web-types.json

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