vueless 0.0.170 → 0.0.172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.170",
+  "version": "0.0.172",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-table/composables/attrs.composable.js

@@ -8,7 +8,13 @@ export function useAttrs(
   { tableRows, isNesting, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { stickyHeaderCell, headerCell } = config.value;
+  const { stickyHeaderCell, headerCell, footerRow, bodyCell, headerCellGeneral } = config.value;
+
+  const cvaHeaderCellGeneral = cva({
+    base: headerCellGeneral.base,
+    variants: headerCellGeneral.variants,
+    compoundVariants: headerCellGeneral.compoundVariants,
+  });
 
   const cvaCustomHeaderItem = cva({
     base: stickyHeaderCell.base,
@@ -22,9 +28,23 @@ export function useAttrs(
     compoundVariants: headerCell.compoundVariants,
   });
 
-  const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
+  const cvaFooterRow = cva({
+    base: footerRow.base,
+    variants: footerRow.variants,
+    compoundVariants: footerRow.compoundVariants,
+  });
+
+  const cvaBodyCell = cva({
+    base: bodyCell.base,
+    variants: bodyCell.variants,
+    compoundVariants: bodyCell.compoundVariants,
+  });
 
+  const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
+  const footerRowClasses = computed(() => cvaFooterRow({ compact: props.compact }));
+  const bodyCellClasses = computed(() => cvaBodyCell({ compact: props.compact }));
+  const headerCellGeneralClasses = computed(() => cvaHeaderCellGeneral({ compact: props.compact }));
 
   const wrapperAttrs = getAttrs("wrapper");
   const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
@@ -53,7 +73,7 @@ export function useAttrs(
     isComponent: true,
   });
   const bodyAttrs = getAttrs("body");
-  const bodyCellAttrsRaw = getAttrs("bodyCell", { isComponent: true });
+  const bodyCellAttrsRaw = getAttrs("bodyCell", { classes: bodyCellClasses });
   const bodyCheckboxAttrs = getAttrs("bodyCheckbox", { isComponent: true });
   const bodyCellDateSeparatorAttrs = getAttrs("bodyCellDateSeparator");
   const bodyDateSeparatorAttrs = getAttrs("bodyDateSeparator", { isComponent: true });
@@ -61,14 +81,13 @@ export function useAttrs(
   const bodyCellSecondaryAttrs = getAttrs("bodyCellSecondary");
   const bodyCellSecondaryEmptyAttrs = getAttrs("bodyCellSecondaryEmpty");
   const footerAttrsRaw = getAttrs("footer");
-  const footerRowAttrs = getAttrs("footerRow");
-  const footerCellAttrs = getAttrs("footerCell", { isComponent: true });
+  const footerRowAttrs = getAttrs("footerRow", { classes: footerRowClasses });
   const stickyFooterRowAttrs = getAttrs("stickyFooterRow");
   const bodyEmptyStateAttrs = getAttrs("bodyEmptyState", { isComponent: true });
   const bodyRowBeforeAttrsRaw = getAttrs("bodyRowBefore");
-  const bodyRowBeforeCellAttrs = getAttrs("bodyRowBeforeCell", { isComponent: true });
+  const bodyRowBeforeCellAttrsRaw = getAttrs("bodyRowBeforeCell");
   const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
-  const bodyRowAfterCellAttrs = getAttrs("bodyRowAfterCell", { isComponent: true });
+  const bodyRowAfterCellAttrsRaw = getAttrs("bodyRowAfterCell");
   const bodyCellNestedWrapperAttrsRaw = getAttrs("bodyCellNestedWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
@@ -78,6 +97,16 @@ export function useAttrs(
     class: cx([bodyCellAttrsRaw.value.class, classes || ""]),
   }));
 
+  const bodyRowBeforeCellAttrs = computed(() => ({
+    ...bodyRowBeforeAttrsRaw.value,
+    class: cx([bodyCellAttrs.value().class, bodyRowBeforeCellAttrsRaw.value.class]),
+  }));
+
+  const bodyRowAfterCellAttrs = computed(() => ({
+    ...bodyRowAfterCellAttrsRaw.value,
+    class: cx([bodyCellAttrs.value().class, bodyRowAfterCellAttrsRaw.value.class]),
+  }));
+
   const bodyRowAttrs = computed(() => (row) => ({
     ...bodyRowAttrsRaw.value,
     class: cx([bodyRowAttrsRaw.value.class, row]),
@@ -85,7 +114,7 @@ export function useAttrs(
 
   const headerCellAttrs = computed(() => (classes) => ({
     ...headerCellAttrsRaw.value,
-    class: cx([config.value.headerCellGeneral, headerCellAttrsRaw.value.class, classes]),
+    class: cx([headerCellGeneralClasses.value, headerCellAttrsRaw.value.class, classes]),
   }));
 
   const stickyHeaderActionsCounterAttrs = computed(() => ({
@@ -151,7 +180,7 @@ export function useAttrs(
 
   const stickyHeaderCellAttrs = computed(() => (classes) => ({
     ...stickyHeaderCellAttrsRaw.value,
-    class: cx([config.value.headerCellGeneral, stickyHeaderCellAttrsRaw.value.class, classes]),
+    class: cx([headerCellGeneralClasses.value, stickyHeaderCellAttrsRaw.value.class, classes]),
   }));
 
   const bodyRowDateSeparatorAttrs = (rowIndex) => {
@@ -188,7 +217,6 @@ export function useAttrs(
     bodyRowDateSeparatorAttrs,
     bodyCellNestedWrapperAttrs,
     bodyCellAttrs,
-    footerCellAttrs,
     stickyHeaderCounterAttrs,
     stickyHeaderActionsCounterAttrs,
     headerCounterAttrs,

package/ui.data-table/configs/default.config.js

@@ -1,6 +1,13 @@
 export default /*tw*/ {
   wrapper: "relative",
-  headerCellGeneral: "p-4 text-sm font-normal text-gray-500 text-left",
+  headerCellGeneral: {
+    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left",
+    variants: {
+      compact: {
+        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+      },
+    },
+  },
   headerCounterGeneral: "mr-3 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",
@@ -28,7 +35,14 @@ export default /*tw*/ {
   bodyRowAfter: "!p-0",
   bodyRowAfterCell: "py-1",
   bodyRowDateSeparator: "",
-  bodyCell: "",
+  bodyCell: {
+    base: "p-[1.125rem] py-5 first:p-5 truncate align-top last:p-5",
+    variants: {
+      compact: {
+        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+      },
+    },
+  },
   bodyCellSecondary: "mt-1 text-xs text-gray-500",
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
@@ -43,8 +57,14 @@ export default /*tw*/ {
   bodyDateSeparator: "",
   bodyEmptyState: "my-8",
   footer: "group/footer border-t border-solid border-gray-200",
-  footerRow: "",
-  footerCell: "",
+  footerRow: {
+    base: "[&_td]:p-[1.125rem] [&_td]:py-5 first:[&_td]:p-5",
+    variants: {
+      compact: {
+        true: "[&_td]:p-4",
+      },
+    },
+  },
   stickyFooter: "relative group/footer-fixed",
   stickyFooterRow: `
     fixed bottom-0 -ml-px border border-b border-gray-200 bg-white

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

@@ -2,7 +2,6 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 import { getRandomId } from "../service.ui";
 
 import UTable from "../ui.data-table";
-import UTableCell from "../ui.data-table-cell";
 import UButton from "../ui.button";
 import ULink from "../ui.button-link";
 import UMoney from "../ui.text-money";
@@ -110,7 +109,7 @@ const EmptyTemplate = (args) => ({
 });
 
 const SlotTemplate = (args) => ({
-  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge, URow },
+  components: { UTable, UButton, ULink, UMoney, UBadge, URow },
   setup() {
     return { args };
   },
@@ -166,12 +165,12 @@ stickyFooter.args = {
   stickyFooter: true,
   slotTemplate: `
     <template #footer>
-      <UTableCell>
+      <td>
         <p>
           🤘🤘🤘
           Lorem ipsum dolor sit amet.
         </p>
-      </UTableCell>
+      </td>
     </template>
   `,
 };
@@ -201,8 +200,8 @@ slotDefault.args = {
   `,
 };
 
-export const slotTheadActions = SlotTemplate.bind({});
-slotTheadActions.args = {
+export const slotHeaderActions = SlotTemplate.bind({});
+slotHeaderActions.args = {
   numberOfRows: 50,
   stickyHeader: true,
   selectable: true,
@@ -227,8 +226,8 @@ slotTheadActions.args = {
   `,
 };
 
-export const slotbodyRowBefore = SlotTemplate.bind({});
-slotbodyRowBefore.args = {
+export const slotBeforeFirstRow = SlotTemplate.bind({});
+slotBeforeFirstRow.args = {
   slotTemplate: `
     <template #before-first-row>
       <p>
@@ -241,8 +240,8 @@ slotbodyRowBefore.args = {
   `,
 };
 
-export const slotbodyRowAfter = SlotTemplate.bind({});
-slotbodyRowAfter.args = {
+export const slotAfterLastRow = SlotTemplate.bind({});
+slotAfterLastRow.args = {
   slotTemplate: `
     <template #after-last-row>
       <p>
@@ -255,18 +254,18 @@ slotbodyRowAfter.args = {
   `,
 };
 
-export const slotTfoot = SlotTemplate.bind({});
-slotTfoot.args = {
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
   slotTemplate: `
-    <template #tfoot>
-      <UTableCell>
+    <template #footer>
+      <td>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit,
           sed do eiusmod tempor incididunt ut labore et dolore magna
           aliqua. Ut enim ad minim veniam, quis nostrud exercitation
           ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </p>
-      </UTableCell>
+      </td>
     </template>
   `,
 };

package/ui.data-table/index.vue

@@ -76,15 +76,14 @@
       <table v-bind="tableAttrs">
         <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs">
-            <UTableCell
+            <td
               v-if="hasSlotContent($slots['before-header'])"
               :colspan="colsCount"
-              :compact="compact"
               v-bind="headerCellAttrs()"
             >
               <!-- @slot Use it to add something before header row. -->
               <slot name="before-header" :cols-count="colsCount" />
-            </UTableCell>
+            </td>
           </tr>
 
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
@@ -132,18 +131,14 @@
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">
           <template v-for="(row, rowIndex) in tableRows" :key="row.id">
-            <tr v-if="rowIndex === firstRow" v-bind="bodyRowBeforeAttrs">
-              <UTableCell
-                v-if="hasSlotContent($slots['before-first-row'])"
-                :colspan="colsCount"
-                :compact="compact"
-                v-bind="bodyRowBeforeCellAttrs"
-              >
+            <tr
+              v-if="rowIndex === firstRow && hasSlotContent($slots['before-first-row'])"
+              v-bind="bodyRowBeforeAttrs"
+            >
+              <td :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs">
                 <!-- @slot Use it to add something before first row. -->
                 <slot name="before-first-row" />
-              </UTableCell>
-
-              <td v-else :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs" />
+              </td>
             </tr>
 
             <tr
@@ -165,11 +160,7 @@
               :data-cy="`${dataCy}-row`"
               @click="onClickRow(row)"
             >
-              <UTableCell
-                v-if="selectable"
-                :compact="compact"
-                v-bind="bodyCellAttrs(config.bodyCellCheckbox)"
-              >
+              <td v-if="selectable" v-bind="bodyCellAttrs(config.bodyCellCheckbox)">
                 <UCheckbox
                   v-model="selectedRows"
                   :data-id="row.id"
@@ -179,12 +170,11 @@
                   v-bind="bodyCheckboxAttrs"
                   @click.stop
                 />
-              </UTableCell>
+              </td>
 
-              <UTableCell
+              <td
                 v-for="(value, key, index) in TableService.getFilteredRow(row, columns)"
                 :key="index"
-                :compact="compact"
                 v-bind="bodyCellAttrs(getCellClasses(key))"
               >
                 <template v-if="hasSlotContent($slots[`cell-${key}`])">
@@ -245,21 +235,17 @@
                     {{ value || HYPHEN_SYMBOL }}
                   </div>
                 </template>
-              </UTableCell>
+              </td>
             </tr>
 
-            <tr v-if="rowIndex === lastRow" v-bind="bodyRowAfterAttrs">
-              <UTableCell
-                v-if="hasSlotContent($slots['after-last-row'])"
-                :compact="compact"
-                :colspan="colsCount"
-                v-bind="bodyRowAfterCellAttrs"
-              >
+            <tr
+              v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
+              v-bind="bodyRowAfterAttrs"
+            >
+              <td :colspan="colsCount" v-bind="bodyRowAfterCellAttrs">
                 <!-- @slot Use it to add something after last row. -->
                 <slot name="after-last-row" />
-              </UTableCell>
-
-              <td v-else :colspan="colsCount" v-bind="bodyRowAfterCellAttrs" />
+              </td>
             </tr>
           </template>
         </tbody>
@@ -282,14 +268,14 @@
 
         <tfoot v-if="hasSlotContent($slots['footer'])" v-bind="footerClassesAttrs">
           <tr ref="footerRowRef" v-bind="footerRowAttrs">
-            <UTableCell v-if="selectable" :compact="compact" v-bind="footerCellAttrs" />
+            <td v-if="selectable" />
 
             <!-- @slot Use it to add something in table footer. -->
             <slot name="footer" :cols-count="colsCount" />
           </tr>
 
           <tr ref="stickyFooterRowRef" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
-            <UTableCell v-if="selectable" :compact="compact" v-bind="footerCellAttrs" />
+            <td v-if="selectable" />
 
             <!-- @slot Use it to add something in table footer. -->
             <slot name="footer" :cols-count="colsCount" />
@@ -319,7 +305,6 @@ import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
 import ULoaderTop from "../ui.loader-top";
-import UTableCell from "../ui.data-table-cell";
 
 import UIService from "../service.ui";
 
@@ -523,7 +508,6 @@ const {
   bodyCellNestedWrapperAttrs,
   headerCellAttrs,
   bodyCellAttrs,
-  footerCellAttrs,
   stickyHeaderActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
@@ -595,7 +579,7 @@ onBeforeUnmount(() => {
 });
 
 function onWindowResize() {
-  tableWidth.value = tableWrapperRef.value.offsetWidth;
+  tableWidth.value = tableWrapperRef.value?.offsetWidth || 0;
 
   setHeaderCellWidth();
   setFooterCellWidth();

package/ui.form-input-file/configs/default.config.js

@@ -35,7 +35,7 @@ export default /*tw*/ {
     },
   },
   placeholder: {
-    base: "pr-4 text-gray-700 flex-grow",
+    base: "pr-4 text-gray-700 flex-grow w-full",
     variants: {
       size: {
         sm: "text-sm",
@@ -49,12 +49,13 @@ export default /*tw*/ {
   chooseFileIconName: "attach_file",
   clearIcon: "",
   clearIconName: "close",
-  removeItemIcon: "",
+  removeItemIcon: "ml-2",
   removeItemIconName: "close",
   dropzoneWrapperHover: "border-gray-400 border-dashed",
   dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
   input: "sr-only pointer-events-none size-0 opacity-0",
   buttonWrapper: "flex gap-4 items-center",
+  fileList: "w-full",
   i18n: {
     sizeError: "File size is too big.",
     formatError: "Format is not supported.",

package/ui.form-input-file/index.stories.js

@@ -40,6 +40,28 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
+const SlotTemplate = (args) => ({
+  components: { UInputFile },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      files: [],
+      error: args.error || "",
+    };
+  },
+  template: `
+    <UInputFile 
+      v-bind="args"
+      v-model="files"
+      v-model:error="error"
+    >
+      ${args.slotTemplate}
+    </UInputFile>
+  `,
+});
+
 const LabelAlignTemplate = (args, { argTypes } = {}) => ({
   components: { UInputFile, URow },
   setup() {
@@ -98,3 +120,12 @@ sizes.args = {};
 
 export const labelAlign = LabelAlignTemplate.bind({});
 labelAlign.args = {};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      🥸
+    </template>
+  `,
+};

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.170",
+  "version": "0.0.172",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6730,48 +6730,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UTableCell",
-          "description": "",
-          "attributes": [
-            {
-              "name": "compact",
-              "description": "Makes the cell more narrow.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "config",
-              "description": "Sets component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/ui.data-table-cell/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UTabs",
           "description": "",

package/ui.data-table-cell/composables/attrs.composable.js

@@ -1,24 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { tableCell } = config.value;
-
-  const cvaTableCell = cva({
-    base: tableCell.base,
-    variants: tableCell.variants,
-    compoundVariants: tableCell.compoundVariants,
-  });
-
-  const tableCellClasses = computed(() => cvaTableCell({ compact: props.compact }));
-
-  const tableCellAttrs = getAttrs("tableCell", { classes: tableCellClasses });
-
-  return {
-    tableCellAttrs,
-  };
-}

package/ui.data-table-cell/configs/default.config.js

@@ -1,19 +0,0 @@
-export default /*tw*/ {
-  tableCell: {
-    base: `
-      p-[1.125rem] py-5 first:p-5 group-[]/body:truncate group-[]/body:align-top
-      group-[]/body:last:p-5 !overflow-visible
-    `,
-    variants: {
-      compact: {
-        true: `
-          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3
-          group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
-        `,
-      },
-    },
-  },
-  defaultVariants: {
-    compact: false,
-  },
-};

package/ui.data-table-cell/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const UTableCell = "UTableCell";

package/ui.data-table-cell/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <td :data-cy="dataCy" v-bind="tableCellAttrs">
-    <slot />
-  </td>
-</template>
-
-<script setup>
-import UIService from "../service.ui";
-
-import { UTableCell } from "./constants";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UTableCell", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Makes the cell more narrow.
-   */
-  compact: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UTableCell).default.compact,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { tableCellAttrs } = useAttrs(props);
-</script>