vueless 0.0.424 → 0.0.426

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.426",
   "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

@@ -18,9 +18,9 @@
     <td
       v-for="(value, key, index) in getFilteredRow(row, columns)"
       :key="index"
-      v-bind="getCellAttrs(key, row, index)"
+      v-bind="getCellAttrs(row, index)"
       :class="
-        cx([getCellAttrs(key, row, index).class, columns[index].tdClass, getCellClasses(row, key)])
+        cx([getCellAttrs(row, index).class, columns[index].tdClass, getCellClasses(row, key)])
       "
     >
       <div
@@ -36,42 +36,20 @@
           :name="getToggleIconName(row)"
           color="brand"
           v-bind="toggleIconConfig"
-          @click="onClickToggleRowChild(row.row?.id || row.id)"
+          @click="onClickToggleIcon"
         />
       </div>
 
-      <div
-        v-if="isCellObject(value)"
-        :class="cx([bodyCellPrimaryAttrs.class, getCellContentClasses(row, key)])"
-      >
-        <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
-            {{ getCellPrimaryContent(value) }}
-          </div>
-
-          <div v-bind="bodyCellSecondaryAttrs">
-            <template v-if="Array.isArray(value.secondary)">
-              <div v-for="(secondary, idx) in value.secondary" ref="cellRef" :key="idx">
-                <span v-bind="bodyCellSecondaryEmptyAttrs">
-                  {{ secondary }}
-                </span>
-              </div>
-            </template>
-
-            <div v-else ref="cellRef">
-              {{ value.secondary }}
-            </div>
-          </div>
-        </slot>
-      </div>
-
-      <template v-else>
-        <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
-            {{ value || value === 0 ? value : HYPHEN_SYMBOL }}
-          </div>
-        </slot>
-      </template>
+      <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
+        <div
+          v-bind="bodyCellContentAttrs"
+          ref="cellRef"
+          :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
+          :data-test="`${dataTest}-${key}-cell`"
+        >
+          {{ value.value || value || HYPHEN_SYMBOL }}
+        </div>
+      </slot>
     </td>
   </tr>
 
@@ -88,7 +66,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 +79,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>
@@ -169,9 +166,7 @@ const cellRef = ref([]);
 useMutationObserver(cellRef, setCellTitle, { childList: true });
 
 const {
-  bodyCellPrimaryAttrs,
-  bodyCellSecondaryAttrs,
-  bodyCellSecondaryEmptyAttrs,
+  bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
   bodyCheckboxAttrs,
   bodyCellNestedAttrs,
@@ -187,6 +182,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;
 
@@ -209,19 +206,7 @@ function getCellContentClasses(row, key) {
   return typeof cellClasses === "function" ? cellClasses(row[key].value, row) : cellClasses;
 }
 
-function isCellObject(value) {
-  return typeof value === "object" && value !== null && ("primary" in value || "value" in value);
-}
-
-function getCellPrimaryContent(value) {
-  if (typeof value === "object" && value !== null) {
-    return value.primary || value.value || HYPHEN_SYMBOL;
-  }
-
-  return value || HYPHEN_SYMBOL;
-}
-
-function getCellAttrs(key, row, cellIndex) {
+function getCellAttrs(row, cellIndex) {
   const isNestedRow = (row.row || row.nestedData || props.nestedLevel > 0) && cellIndex === 0;
 
   return isNestedRow ? bodyCellNestedRowAttrs.value : bodyCellBaseAttrs.value;
@@ -268,4 +253,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/config.js

@@ -57,9 +57,7 @@ export default /*tw*/ {
     },
   },
   bodyCellNestedRow: "flex",
-  bodyCellPrimary: "text-ellipsis overflow-hidden",
-  bodyCellSecondary: "mt-1 text-xs text-gray-500 overflow-hidden text-ellipsis",
-  bodyCellSecondaryEmpty: "inline-block",
+  bodyCellContent: "text-ellipsis overflow-hidden",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateDivider: "",
   bodyCellNested: "mr-2 mt-0.5",

package/ui.data-table/storybook/Docs.mdx

@@ -20,12 +20,13 @@ Keys you have/may to provide to component in row object.
 
 <Markdown>
 {`
-|  Key name         | Description                    | Type           | Required     |
-| ------------------| ------------------------------ | ---------------| ------------ |
-| id                | A unique identifier for row    | String, Number | true         |
-| isChecked         | Indicates if row checked       | Boolean        | false        |
-| isHidden          | Indicated if nested row hidden | Boolean        | false        |
-| rowDate           | Row date for date divider      | String, Date   | false        |
+|  Key name         | Description                        | Type           | Required     |
+| ------------------| ---------------------------------- | ---------------| ------------ |
+| id                | A unique identifier for row        | String, Number | true         |
+| content           | Content to be rendered in the cell | Any            | false        |
+| isChecked         | Indicates if row checked           | Boolean        | false        |
+| isHidden          | Indicated if nested row hidden     | Boolean        | false        |
+| rowDate           | Row date for date divider          | String, Date   | false        |
 `}
 </Markdown>
 

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",
+          },
+        },
+      },
+    ],
   };
 }
 
@@ -257,72 +277,6 @@ RowAndCellClasses.args = {
   ],
 };
 
-export const PrimaryAndSecondaryContent = DefaultTemplate.bind({});
-PrimaryAndSecondaryContent.args = {
-  rows: [
-    {
-      id: getRandomId(),
-      isChecked: false,
-      key_1: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_2: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_3: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_4: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-    },
-    {
-      id: getRandomId(),
-      isChecked: false,
-      key_1: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_2: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_3: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_4: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-    },
-    {
-      id: getRandomId(),
-      isChecked: false,
-      key_1: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_2: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_3: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-      key_4: {
-        primary: "Primary",
-        secondary: "Secondary",
-      },
-    },
-  ],
-};
-
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};
 

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.426",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8498,6 +8498,9 @@
                 },
                 {
                   "name": "row"
+                },
+                {
+                  "name": "index"
                 }
               ]
             },