vueless 0.0.660 → 0.0.662

package/package.json

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

package/ui.data-table/UTable.vue

@@ -38,7 +38,7 @@ import {
 import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Cell, Row, RowId, UTableProps, UTableRowAttrs, Config } from "./types.ts";
-import type { Ref, RendererElement, ComputedRef } from "vue";
+import type { Ref, ComputedRef, VNode } from "vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -68,6 +68,18 @@ const emit = defineEmits([
    */
   "clickCell",
 
+  /**
+   * Tirggers when row expanded.
+   * @property {object} row
+   */
+  "row-expand",
+
+  /**
+   * Tirggers when row collapsed.
+   * @property {object} row
+   */
+  "row-collapse",
+
   /**
    * Triggers when table rows are selected (updated).
    * @property {array} tableRows
@@ -136,7 +148,7 @@ const isFooterSticky = computed(() => {
 const normalizedColumns = computed(() => normalizeColumns(props.columns));
 
 const visibleColumns = computed(() => {
-  return normalizedColumns.value.filter((column) => !column.isHidden);
+  return normalizedColumns.value.filter((column) => column.isShown !== false);
 });
 
 const colsCount = computed(() => {
@@ -177,18 +189,16 @@ const hasSlotContentBeforeFirstRow = computed(() => {
     hasSlotContent(slots["before-first-row"]) &&
     typeof slots["before-first-row"] === "function"
   ) {
-    return slots["before-first-row"]()?.some((item) =>
-      Boolean((item.type as RendererElement)?.render),
-    );
+    return (slots["before-first-row"]({}) as VNode[])?.some((item) => Boolean(item.type));
   }
 
   return false;
 });
 
-const isSelectedAllRows = computed(() => {
-  const rows = getFlatRows(tableRows.value);
+const flatTableRows = computed(() => getFlatRows(tableRows.value));
 
-  return selectedRows.value.length === rows.length;
+const isSelectedAllRows = computed(() => {
+  return selectedRows.value.length === flatTableRows.value.length;
 });
 
 const tableRowAttrs = computed(() => ({
@@ -354,7 +364,7 @@ function onClickCell(cell: Cell, row: Row, key: string | number) {
 
 function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
-    selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);
+    selectedRows.value = flatTableRows.value.map((row) => row.id);
 
     tableRows.value = tableRows.value.map((row) => switchRowCheck({ ...row }, true));
   } else if (!selectAll) {
@@ -386,6 +396,14 @@ function onToggleRowVisibility(rowId: string | number) {
   tableRows.value = tableRows.value.map((row) => toggleRowVisibility({ ...row }, rowId));
 }
 
+function onToggleExpand(row: Row, expanded: boolean) {
+  if (expanded) {
+    emit("row-expand", row);
+  } else {
+    emit("row-collapse", row);
+  }
+}
+
 defineExpose({
   /**
    * Allows to clear selected rows.
@@ -669,6 +687,7 @@ const {
               @click="onClickRow"
               @dblclick="onDoubleClickRow"
               @click-cell="onClickCell"
+              @toggle-expand="onToggleExpand"
               @toggle-row-visibility="onToggleRowVisibility"
             >
               <template
@@ -677,7 +696,7 @@ const {
                 #[`cell-${key}`]="slotValues"
               >
                 <!--
-                  @slot Use it to customise needed table cell.
+                  @slot Use it to customize needed table cell.
                   @binding {string} value
                   @binding {object} row
                   @binding {number} index
@@ -689,6 +708,16 @@ const {
                   :index="index"
                 />
               </template>
+
+              <template #expand="{ row: expandedRow, expanded }">
+                <!--
+                  @slot Use it to customize row expand icon.
+                  @binding {object} row
+                  @binding {boolean} expanded
+                -->
+                <slot name="expand" :row="expandedRow" :expanded="expanded" />
+              </template>
+
               <template #nested-content>
                 <!--
                   @slot Use it to add nested content inside a row.

package/ui.data-table/UTableRow.vue

@@ -11,7 +11,14 @@ import { useMutationObserver } from "../composables/useMutationObserver.ts";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
-import type { Cell, CellObject, Row, RowScopedProps, UTableRowProps } from "./types.ts";
+import type {
+  Cell,
+  CellObject,
+  Row,
+  RowScopedExpandProps,
+  RowScopedProps,
+  UTableRowProps,
+} from "./types.ts";
 
 const NESTED_ROW_SHIFT_REM = 1;
 const LAST_NESTED_ROW_SHIFT_REM = 1.1;
@@ -20,7 +27,7 @@ defineOptions({ internal: true });
 
 const props = defineProps<UTableRowProps>();
 
-const emit = defineEmits(["toggleRowVisibility", "click", "dblclick", "clickCell"]);
+const emit = defineEmits(["toggleRowVisibility", "click", "dblclick", "clickCell", "toggleExpand"]);
 
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
@@ -37,17 +44,17 @@ useMutationObserver(cellRef, setCellTitle, {
 
 const toggleIconConfig = computed(() => {
   const nestedRow = props.row?.row;
-  let isHidden = false;
+  let isShown = false;
 
   if (Array.isArray(nestedRow)) {
-    isHidden = nestedRow.some((row) => row.isHidden);
+    isShown = nestedRow.some((row) => row.isShown);
   } else {
-    isHidden = Boolean(nestedRow?.isHidden);
+    isShown = Boolean(nestedRow?.isShown);
   }
 
-  return isHidden
-    ? props.attrs.bodyCellNestedExpandIconAttrs.value
-    : props.attrs.bodyCellNestedCollapseIconAttrs.value;
+  return isShown
+    ? props.attrs.bodyCellNestedCollapseIconAttrs.value
+    : props.attrs.bodyCellNestedExpandIconAttrs.value;
 });
 
 const isSingleNestedRow = computed(() => !Array.isArray(props.row.row));
@@ -82,14 +89,18 @@ onMounted(() => {
   }
 });
 
-function getToggleIconName(row: Row) {
-  const isHiddenNestedRow = Array.isArray(row.row)
-    ? row.row.some((nestedRow) => nestedRow.isHidden)
-    : row.row?.isHidden;
+function isExpanded(row: Row) {
+  const isShownNestedRow = Array.isArray(row.row)
+    ? row.row.some((nestedRow) => nestedRow.isShown)
+    : row.row?.isShown;
 
-  const isHidden = isHiddenNestedRow || row.nestedData?.isHidden;
+  return Boolean(isShownNestedRow || row.nestedData?.isShown);
+}
 
-  return isHidden ? props.config?.defaults?.expandIcon : props.config?.defaults?.collapseIcon;
+function getToggleIconName(row: Row) {
+  return isExpanded(row)
+    ? props.config?.defaults?.collapseIcon
+    : props.config?.defaults?.expandIcon;
 }
 
 function getIconWidth() {
@@ -221,6 +232,10 @@ function getRowAttrs(rowId: string | number) {
     ? props.attrs.bodyRowCheckedAttrs.value
     : props.attrs.bodyRowAttrs.value;
 }
+
+function onToggleExpand(row: Row, expanded?: boolean) {
+  emit("toggleExpand", row, expanded || isExpanded(row));
+}
 </script>
 
 <template>
@@ -259,22 +274,26 @@ function getRowAttrs(rowId: string | number) {
         v-bind="attrs.bodyCellNestedAttrs.value"
       >
         <div
-          v-show="isShownToggleIcon"
-          ref="toggle-wrapper"
-          v-bind="attrs.bodyCellNestedExpandIconWrapperAttrs.value"
-          :style="{ width: getIconWidth() }"
+          :data-row-toggle-icon="row.id"
+          @click.stop="() => (onClickToggleIcon(), onToggleExpand(row))"
         >
-          <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"
-          />
+          <slot name="expand" :row="row" :expanded="isExpanded(row)">
+            <div
+              v-show="isShownToggleIcon"
+              ref="toggle-wrapper"
+              v-bind="attrs.bodyCellNestedExpandIconWrapperAttrs.value"
+              :style="{ width: getIconWidth() }"
+            >
+              <UIcon
+                size="xs"
+                internal
+                interactive
+                :name="getToggleIconName(row)"
+                color="brand"
+                v-bind="toggleIconConfig"
+              />
+            </div>
+          </slot>
         </div>
         <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
           <div
@@ -309,7 +328,7 @@ function getRowAttrs(rowId: string | number) {
   </tr>
 
   <template
-    v-if="row.nestedData && !row.nestedData.isHidden && hasSlotContent($slots['nested-content'])"
+    v-if="row.nestedData && row.nestedData.isShown && hasSlotContent($slots['nested-content'])"
   >
     <tr :class="row.nestedData.class">
       <td :colspan="columns.length + (selectable ? 1 : 0)">
@@ -321,7 +340,7 @@ function getRowAttrs(rowId: string | number) {
   </template>
 
   <UTableRow
-    v-if="isSingleNestedRow && singleNestedRow && !singleNestedRow.isHidden && !row.nestedData"
+    v-if="isSingleNestedRow && singleNestedRow && singleNestedRow.isShown && !row.nestedData"
     v-bind="{
       ...$attrs,
       ...getRowAttrs(singleNestedRow.id),
@@ -336,6 +355,7 @@ function getRowAttrs(rowId: string | number) {
     :config="config"
     :selectable="selectable"
     :empty-cell-label="emptyCellLabel"
+    @toggle-expand="onToggleExpand"
     @toggle-row-visibility="onClickToggleRowChild"
     @click="onClick"
     @dblclick="onDoubleClick"
@@ -347,12 +367,16 @@ function getRowAttrs(rowId: string | number) {
     >
       <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" :index="index" />
     </template>
+
+    <template #expand="slotValues: RowScopedExpandProps">
+      <slot name="expand" :row="slotValues.row" :expanded="slotValues.expanded" />
+    </template>
   </UTableRow>
 
   <template v-if="!isSingleNestedRow && nestedRows.length && !row.nestedData">
     <template v-for="nestedRow in nestedRows" :key="nestedRow.id">
       <UTableRow
-        v-if="!nestedRow.isHidden"
+        v-if="nestedRow.isShown"
         v-bind="{
           ...$attrs,
           ...getRowAttrs(nestedRow.id),
@@ -367,6 +391,7 @@ function getRowAttrs(rowId: string | number) {
         :config="config"
         :selectable="selectable"
         :empty-cell-label="emptyCellLabel"
+        @toggle-expand="onToggleExpand"
         @toggle-row-visibility="onClickToggleRowChild"
         @click="onClick"
         @dblclick="onDoubleClick"
@@ -384,6 +409,9 @@ function getRowAttrs(rowId: string | number) {
             :index="index"
           />
         </template>
+        <template #expand="slotValues: RowScopedExpandProps">
+          <slot name="expand" :row="slotValues.row" :expanded="slotValues.expanded" />
+        </template>
       </UTableRow>
     </template>
   </template>

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

@@ -20,13 +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         |
-| 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        |
+|  Key name         | Description                        | Type           |
+| ------------------| ---------------------------------- | ---------------|
+| id                | A unique identifier for row        | String, Number |
+| content           | Content to be rendered in the cell | Any            |
+| isChecked         | Indicates if row checked           | Boolean        |
+| isShown           | Indicated if nested row shown      | Boolean        |
+| rowDate           | Row date for date divider          | String, Date   |
 `}
 </Markdown>
 

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

@@ -88,7 +88,7 @@ function getNestedRow() {
       {
         id: getRandomId(),
         isChecked: false,
-        isHidden: true,
+        isShown: false,
         key_1: "Nesting",
         key_2: "Nesting",
         key_3: "Nesting",
@@ -96,7 +96,7 @@ function getNestedRow() {
         row: {
           id: getRandomId(),
           isChecked: false,
-          isHidden: true,
+          isShown: false,
           key_1: "Second level nesting",
           key_2: "Second level nesting",
           key_3: "Second level nesting",
@@ -106,7 +106,7 @@ function getNestedRow() {
       {
         id: getRandomId(),
         isChecked: false,
-        isHidden: true,
+        isShown: false,
         key_1: "Nesting",
         key_2: "Nesting",
         key_3: "Nesting",
@@ -114,7 +114,7 @@ function getNestedRow() {
         row: {
           id: getRandomId(),
           isChecked: false,
-          isHidden: true,
+          isShown: false,
           key_1: "Second level nesting",
           key_2: "Second level nesting",
           key_3: "Second level nesting",
@@ -122,7 +122,7 @@ function getNestedRow() {
           row: {
             id: getRandomId(),
             isChecked: false,
-            isHidden: true,
+            isShown: false,
             key_1: "Third level nesting",
             key_2: "Third level nesting",
             key_3: "Third level nesting",
@@ -155,7 +155,7 @@ function getNestedContentRow(index: number) {
       key_3: "More info",
       nestedData: {
         isChecked: false,
-        isHidden: true,
+        isShown: false,
         rows: [
           {
             id: getRandomId(),
@@ -346,6 +346,21 @@ SlotDefault.args = {
   `,
 };
 
+export const SlotExpand = DefaultTemplate.bind({});
+SlotExpand.args = {
+  row: getNestedRow,
+  slotTemplate: `
+    <template #expand="{ row, isExpanded }">
+      <div v-if="isExpanded">
+        🔼
+      </div>
+      <div v-if="!isExpanded">
+        🔽
+      </div>
+    </template>
+  `,
+};
+
 export const SlotHeaderActions = DefaultTemplate.bind({});
 SlotHeaderActions.parameters = SHORT_STORY_PARAMETERS;
 SlotHeaderActions.args = {
@@ -440,7 +455,7 @@ CellSlots.args = {
     row: [
       {
         id: getRandomId(),
-        isHidden: false,
+        isShown: true,
         link: "some link",
         money: {
           sum: 10,
@@ -454,7 +469,7 @@ CellSlots.args = {
       },
       {
         id: getRandomId(),
-        isHidden: false,
+        isShown: true,
         link: "some link",
         money: {
           sum: 10,

package/ui.data-table/types.ts

@@ -28,7 +28,7 @@ export interface DateDivider {
 export interface Row {
   id: RowId;
   isChecked?: boolean;
-  isHidden?: boolean;
+  isShown?: boolean;
   rowDate?: string | Date;
   row?: Row | Row[];
   nestedData?: Row;
@@ -39,7 +39,7 @@ export interface Row {
 export interface ColumnObject {
   key: string;
   label?: string;
-  isHidden?: string;
+  isShown?: boolean;
   class?: string | ((value: unknown | string, row: Row) => string);
   tdClass?: string;
   thClass?: string;
@@ -52,6 +52,11 @@ export interface RowScopedProps {
   row: Row;
 }
 
+export interface RowScopedExpandProps {
+  expanded: boolean;
+  row: Row;
+}
+
 export interface UTableProps {
   /**
    * Table columns (headers).

package/ui.data-table/utilTable.ts

@@ -10,7 +10,7 @@ export function normalizeColumns(columns: Column[]): ColumnObject[] {
 
 export function mapRowColumns(row: Row, columns: ColumnObject[]): RowData {
   const filteredRow = Object.entries(row).filter((item) => {
-    return columns.some((column) => column.key === item[0] && !column.isHidden);
+    return columns.some((column) => column.key === item[0] && column.isShown !== false);
   });
 
   return Object.fromEntries(filteredRow) as RowData;
@@ -44,10 +44,10 @@ export function addRowId(row: Row) {
 
 export function toggleRowVisibility(row: Row, targetRowId: string | number) {
   if (row.id === targetRowId) {
-    if (row.hasOwnProperty("isHidden")) {
-      row.isHidden = !row.isHidden;
-    } else if (row.nestedData && row.nestedData.hasOwnProperty("isHidden")) {
-      row.nestedData.isHidden = !row.nestedData.isHidden;
+    if (row.hasOwnProperty("isShown")) {
+      row.isShown = !row.isShown;
+    } else if (row.nestedData && row.nestedData.hasOwnProperty("isShown")) {
+      row.nestedData.isShown = !row.nestedData.isShown;
     }
 
     return row;

package/utils/node/loaderIcon.js

@@ -177,13 +177,14 @@ async function findAndCopyIcons(files) {
     }
 
     /* Vueless components props */
-    const uComponentIconNamePattern = `\\b\\w*(name|icon)\\w*\\s*=\\s*(['"])(.*?)\\2`;
+    const iconPropsPattern = `\\b\\w*(name|icon)\\w*\\s*=\\s*(['"])(.*?)\\2`;
+    const uComponentIconNamePattern = /<U\w+\s+.*?\b\w*(name|icon)\w*\s*[:=]\s*(['"])(.*?)\2.*?>/;
     const uComponentIconNameArray = fileContents.match(new RegExp(uComponentIconNamePattern, "g"));
 
     if (!uComponentIconNameArray) return;
 
     for (const match of uComponentIconNameArray) {
-      const groupMatch = match.match(new RegExp(uComponentIconNamePattern));
+      const groupMatch = match.match(new RegExp(iconPropsPattern));
       const iconName = groupMatch ? groupMatch[3] : null;
 
       try {

package/utils/node/tailwindSafelist.js

@@ -222,6 +222,10 @@ async function findComponentColors(componentName, files, vuelessConfigFiles) {
       isComponentExists = Boolean(matchedComponent);
     }
 
+    const propsColors = getPropsColors(fileContent);
+
+    propsColors.forEach((color) => colors.add(color));
+
     if (isDefaultConfig) {
       fileContent.match(objectColorRegExp)?.forEach((colorMatch) => {
         const [, color] = objectColorRegExp.exec(colorMatch) || [];
@@ -260,6 +264,16 @@ async function findComponentColors(componentName, files, vuelessConfigFiles) {
   };
 }
 
+function getPropsColors(inputString) {
+  const colorsMatch = inputString.match(/colors:\s*\[(.*?)\]/s);
+
+  if (colorsMatch && colorsMatch[1]) {
+    return colorsMatch[1].split(",").map((color) => color.trim().replace(/['"]/g, ""));
+  }
+
+  return [];
+}
+
 function isDefaultComponentConfig(filePath, componentName) {
   const componentDirName = filePath.split(path.sep).at(-2);
 

package/assets/icons/vueless/edit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M181.91-182.15h44.24l459.81-458.81-43.76-44-460.29 459.05v43.76Zm-67.89 68.13V-253.5l574.52-573.76q8.24-8.48 19.81-13.22 11.56-4.74 24.11-4.74 11.47 0 22.95 4.74 11.48 4.74 21.2 12.98l51.89 51.17q9.24 9.72 13.48 21.32t4.24 23.31q0 11.72-4.74 23.7-4.74 11.98-12.98 20.46L253.74-114.02H114.02ZM775.17-732.7l-41.24-41.47 41.24 41.47ZM664.2-663.2l-22-21.76 43.76 44-21.76-22.24Z"/></svg>

package/assets/icons/vueless/label.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M846.22-480 674.83-237.89q-14.2 19.67-33.86 31.77-19.67 12.1-43.36 12.1H182.15q-28.1 0-48.12-20.01-20.01-20.02-20.01-48.12v-435.7q0-28.2 20.01-48.28 20.02-20.09 48.12-20.09h415.46q23.69 0 43.36 12.34 19.67 12.34 33.86 31.77L846.22-480Zm-85.29 0L608.56-697.85H182.15v435.7h426.46L760.93-480Zm-578.78 0v217.85-435.7V-480Z"/></svg>

package/assets/icons/vueless/title.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M425.93-154.02v-544.07H194.02v-108.13h572.2v108.13H534.3v544.07H425.93Z"/></svg>