Refactor

components/lib/props/style/index.js

@@ -1,5 +1,18 @@
 import ObjectUtils from '../../utils/ObjectUtils';
 
+/* Custom Theme */
+const defaultStyleOptions = {
+    //spacing: 2 // 2 * value
+    //spacing: [0, 1, 3, 5, 7]
+    //spacing: (value) => value * 2
+    spacing: {
+        0: 0,
+        1: 2,
+        2: 4,
+        3: 6
+    }
+};
+
 export const getDeclaration = (property, value) => {
     return [property]
         .flat()
@@ -7,26 +20,67 @@ export const getDeclaration = (property, value) => {
         .join('');
 };
 
-const importantRegex = /.*!$/;
+const importantRegex = /!$/;
+
+const formatter = {
+    format(computedValue, value) {
+        return importantRegex.test(value) ? this.important(computedValue) : computedValue;
+    },
+    important(value) {
+        return `${value}!important`;
+    }
+};
 
 export const token = {
-    spacing: (property, options) => {
+    spacing: (property) => {
+        const transform = (key, value, options = {}) => {
+            const spacing = options.spacing; // theming and default spacing
+            let computedValue = `${value}`.replace(importantRegex, '').trim();
+
+            if (ObjectUtils.isNumber(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? +computedValue * spacing : computedValue;
+            } else if (ObjectUtils.isArray(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? spacing[+computedValue] ?? computedValue : computedValue;
+            } else if (ObjectUtils.isObject(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? spacing[+computedValue] ?? computedValue : computedValue;
+            } else if (ObjectUtils.isFunction(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? spacing(+computedValue) : computedValue;
+            }
+
+            return formatter.format(ObjectUtils.css.getVariableValue(computedValue, key), value);
+        };
+
         return {
             type: 'spacing',
             property,
-            transform(value) {
+            transform,
-                return importantRegex.test(value) ? value + 'important' : value;
+            getStyleDeclaration(key, value, options) {
-            },
+                return getDeclaration(property, transform(key, value, defaultStyleOptions));
-            toString(value, options) {
-                return getDeclaration(property, this.transform(value));
             }
         };
     },
     sizing: (property) => {
+        const transform = (key, value, options = {}) => {
+            let computedValue = `${value}`.replace(importantRegex, '').trim();
+
+            try {
+                computedValue = Function(`'use strict'; return ${computedValue}`)();
+            } catch {}
+
+            if (ObjectUtils.isNumber(computedValue)) {
+                computedValue = computedValue <= 1 && computedValue !== 0 ? `${computedValue * 100}%` : computedValue;
+            }
+
+            return formatter.format(ObjectUtils.css.getVariableValue(computedValue, key), value);
+        };
+
         return {
             type: 'sizing',
             property,
-            declaration: (value) => declaration(property, value)
+            transform,
+            getStyleDeclaration(key, value, options) {
+                return getDeclaration(property, transform(key, value, defaultStyleOptions));
+            }
         };
     },
     prop: (property) => {
@@ -47,7 +101,7 @@ export const defineDeclarations = (...args) => {
                     .reduce((acc, [key, value]) => {
                         const v = props[key];
 
-                        ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
+                        ObjectUtils.isNotEmpty(v) && acc.push(value.getStyleDeclaration(key, v, options));
 
                         return acc;
                     }, [])

components/lib/props/style/sizing.js

@@ -1,4 +1,10 @@
-import { t } from '.';
+import width from './width';
+
+export default {
+    ...width
+};
+
+/*import { t } from '.';
 import ObjectUtils from '../../utils/ObjectUtils';
 
 export const WIDTH_DATA = {
@@ -46,3 +52,4 @@ export const SPACING = {
             .join('');
     }
 };
+*/

components/lib/props/style/width/index.js

@@ -1,3 +1,10 @@
+import { token } from '..';
+
+export default {
+    width: token.sizing('width'),
+    w: token.sizing('width')
+};
+
 /* const { styleClass } = require('../../utils');
 const { addFixedSize } = require('../base/size');
 

components/lib/text/BaseText.vue

@@ -2,9 +2,10 @@
 import BaseComponent from 'primevue/basecomponent';
 import TextStyle from 'primevue/text/style';
 import { defineDeclarations } from '../props/style';
+import SIZING from '../props/style/sizing.js';
 import SPACING from '../props/style/spacing.js';
 
-export const styleData = defineDeclarations(SPACING);
+export const styleData = defineDeclarations(SPACING, SIZING);
 
 export default {
     name: 'BaseText',

doc/panel/BasicDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Panel header="Header">
-            <Text px="0!" p="1px">
+            <Text px="0!" p="4" width="md:200 hover:300">
                 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.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </Text>