vueless 0.0.160 → 0.0.162

package/composable.ui/index.js

@@ -58,8 +58,8 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     const commonAttrs = {
       ...attrs,
-      component: isDev && (attrs.component || componentName || null),
-      "config-key": isDev && (attrs["config-key"] || configKey || null),
+      component: isDev ? attrs.component || componentName || null : null,
+      "config-key": isDev ? attrs["config-key"] || configKey || null : null,
       "child-component": isDev && attrs.component ? componentName : null,
       "child-config-key": isDev && attrs.component ? configKey : null,
     };

package/package.json

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

package/preset.tailwind/index.js

@@ -1,12 +1,13 @@
 import forms from "@tailwindcss/forms";
 import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_COLOR } from "./constants/index.js";
 
+const safelist = getSafelist();
+
 /**
  * Generates preset for TailwindCSS base on Vueless config.
  * @returns {Object}
  */
 export function vuelessPreset() {
-  const isProd = process.env.NODE_ENV === "production";
   const brandColor = twColorWithOpacity("--color-brand");
   const { brand, gray } = getVuelessConfigColors();
   const colors = getTailwindConfigColors();
@@ -22,14 +23,6 @@ export function vuelessPreset() {
     brandPalette = grayPalette;
   }
 
-  const prodSafelist = getSafelist();
-  const devSafelist = [
-    {
-      pattern: /^!?(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
-      variants: ["hover", "focus", "focus-within", "active", "disabled"],
-    },
-  ];
-
   return {
     content: [
       "./index.html",
@@ -37,7 +30,7 @@ export function vuelessPreset() {
       "./vueless.config.{js,ts}",
       "./node_modules/vueless/**/*.{js,ts,vue}",
     ],
-    safelist: isProd ? prodSafelist : devSafelist,
+    safelist,
     theme: {
       extend: {
         colors: {

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

@@ -39,20 +39,22 @@ export function useAttrs(
 
   const wrapperClasses = computed(() => cvaWrapper({ compact: props.compact }));
 
-  const customHeaderItemClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
+  const stickyHeaderColumnClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
 
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const customHeaderItemAttrsRaw = getAttrs("stickyHeaderColumn", {
-    classes: customHeaderItemClasses,
+  const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
+  const stickyHeaderColumnAttrsRaw = getAttrs("stickyHeaderColumn", {
+    classes: stickyHeaderColumnClasses,
   });
   const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
   const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
   const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
+  const tableWrapperAttrsRaw = getAttrs("tableWrapper");
   const tableAttrs = getAttrs("table");
   const headerAttrs = getAttrs("header");
-  const headerRowAttrs = getAttrs("headerRow");
+  const headerRowAttrsRaw = getAttrs("headerRow");
   const headerCellAttrsRaw = getAttrs("headerCell", { classes: headerCellClasses });
   const headerSelectAllCheckboxAttrs = getAttrs("headerSelectAllCheckbox", { isComponent: true });
   const tableLoaderAttrs = getAttrs("tableLoader", { isComponent: true });
@@ -66,6 +68,7 @@ export function useAttrs(
   const toggleItemButtonAttrs = getAttrs("toggleItemButton");
   const secondaryRowAttrs = getAttrs("secondaryRow");
   const secondaryRowEmptyAttrs = getAttrs("secondaryRowEmpty");
+  const footerAttrsRaw = getAttrs("footer");
   const footerRowAttrs = getAttrs("footerRow");
   const footerCellAttrs = getAttrs("footerCell", { isComponent: true });
   const footerStickyRowAttrs = getAttrs("footerStickyRow");
@@ -74,6 +77,7 @@ export function useAttrs(
   const beforeFirstRowCellAttrs = getAttrs("beforeFirstRowCell", { isComponent: true });
   const afterLastRowAttrsRaw = getAttrs("afterLastRow");
   const afterLastRowCellAttrs = getAttrs("afterLastRowCell", { isComponent: true });
+  const toggleButtonWrapperAttrsRaw = getAttrs("toggleButtonWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
 
@@ -101,35 +105,35 @@ export function useAttrs(
   }));
 
   const tableWrapperAttrs = computed(() => ({
+    ...tableWrapperAttrsRaw.value,
     class: cx([
-      config.value.innerWrapper,
-      selectedRows.value.length && config.value.innerWrapperSelected,
+      tableWrapperAttrsRaw.value.class,
+      selectedRows.value.length && config.value.tableWrapperSelected,
     ]),
   }));
 
-  const headerRowCellAttrs = computed(() => ({
+  const headerRowAttrs = computed(() => ({
+    ...headerRowAttrsRaw.value,
     class: cx([
-      config.value.headerRow,
+      headerRowAttrsRaw.value.class,
       selectedRows.value.length && !isHeaderSticky.value && config.value.stickyHeaderHidden,
     ]),
   }));
 
-  const stickyHeaderAttrs = computed(() => {
-    // console.log("hasSlotContentTheadActions", hasSlotContentTheadActions.value);
-
-    return {
-      class: cx([
-        config.value.stickyHeader,
-        selectedRows.value.length &&
-          hasSlotContentTheadActions.value &&
-          config.value.stickyHeaderActions,
-        isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
-      ]),
-    };
-  });
+  const stickyHeaderAttrs = computed(() => ({
+    ...stickyHeaderAttrsRaw.value,
+    class: cx([
+      stickyHeaderAttrsRaw.value.class,
+      selectedRows.value.length &&
+        hasSlotContentTheadActions.value &&
+        config.value.stickyHeaderActions,
+      isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
+    ]),
+  }));
 
   const footerClassesAttrs = computed(() => ({
-    class: cx([config.value.footer, isFooterSticky.value && config.value.footerSticky]),
+    ...footerAttrsRaw.value,
+    class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.footerSticky]),
   }));
 
   const afterLastRowAttrs = computed(() => ({
@@ -141,8 +145,8 @@ export function useAttrs(
   }));
 
   const stickyHeaderColumnAttrs = computed(() => (thClass) => ({
-    ...customHeaderItemAttrsRaw.value,
-    class: cx([customHeaderItemAttrsRaw.value.class, thClass]),
+    ...stickyHeaderColumnAttrsRaw.value,
+    class: cx([stickyHeaderColumnAttrsRaw.value.class, thClass]),
   }));
 
   const dateSeparatorRowAttrs = (rowIndex) => {
@@ -158,6 +162,7 @@ export function useAttrs(
   };
 
   const toggleButtonWrapperAttrs = computed(() => (index) => ({
+    ...toggleButtonWrapperAttrsRaw.value,
     class: index === 0 && isNesting.value ? config.value.toggleButtonWrapper : "",
   }));
 
@@ -167,7 +172,8 @@ export function useAttrs(
     stickyHeaderColumnAttrs,
     stickyHeaderAttrs,
     tableWrapperAttrs,
-    headerRowCellAttrs,
+    headerCellAttrs,
+    headerRowAttrs,
     bodyRowAttrs,
     footerClassesAttrs,
     afterLastRowAttrs,
@@ -176,7 +182,6 @@ export function useAttrs(
     beforeFirstRowCellAttrs,
     dateSeparatorRowAttrs,
     toggleButtonWrapperAttrs,
-    headerCellAttrs,
     bodyCellAttrs,
     checkboxBodyWrapperCellAttrs,
     footerCellAttrs,
@@ -190,7 +195,6 @@ export function useAttrs(
     selectedRowsCountAttrs,
     stickyHeaderLoaderAttrs,
     tableAttrs,
-    headerRowAttrs,
     tableLoaderAttrs,
     bodyAttrs,
     toggleItemButtonAttrs,

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

@@ -20,8 +20,8 @@ export default /*tw*/ {
   stickyHeaderColumn: "flex-none text-sm font-normal text-gray-500 p-4 whitespace-nowrap",
   selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
   selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  innerWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
-  innerWrapperSelected: "!rounded-t-none border-t-0",
+  tableWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
+  tableWrapperSelected: "!rounded-t-none border-t-0",
   table: "min-w-full border-none text-sm w-full",
   tableLoader: "absolute !top-auto",
   moreRow: "!px-0 !py-4 first:mx-auto",

package/ui.data-table/index.vue

@@ -492,7 +492,7 @@ const {
   stickyHeaderColumnAttrs,
   stickyHeaderAttrs,
   tableWrapperAttrs,
-  headerRowCellAttrs,
+  headerRowAttrs,
   afterLastRowAttrs,
   afterLastRowCellAttrs,
   beforeFirstRowAttrs,
@@ -515,7 +515,6 @@ const {
   selectedRowsCountAttrs,
   stickyHeaderLoaderAttrs,
   tableAttrs,
-  headerRowAttrs,
   tableLoaderAttrs,
   bodyAttrs,
   toggleItemButtonAttrs,

package/web-types.json

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