Installation

npm install sdp-uix

Configuration

Setup tailwind compiler in tailwind.config.js

import defaultTheme from 'sdp-uix/themes/tw-config';
module.exports = {
    ...
    content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
        './node_modules/sdp-uix/**/*.{js,ts,vue}'
    ],    
    theme: {
        extend: defaultTheme
    }
}

Setup primevue in main.js

import 'sdp-uix/themes/tw-fonts'; //# To append font family on browser
import PrimeVue from "primevue/config";
import pt from 'sdp-uix/themes/primevue-preset';
import ToastService from 'primevue/toastservice';
import Tooltip from 'primevue/tooltip';
import KeyFilter from 'primevue/keyfilter';
import ConfirmationService from 'primevue/confirmationservice';
import SdpComponent from 'sdp-uix/components/vue';

const app = createApp(/* Your main component */);

app.use(PrimeVue, { unstyled: true, pt });
app.use(SdpComponent);
app.use(ToastService);
app.use(ConfirmationService);

app.directive('tooltip', Tooltip);
app.directive('keyfilter', KeyFilter);

app.config.globalProperties.$primevue.config.locale.dateFormat = 'yy-mm-dd';

Setup tailwind global variable in tailwind.css

@import 'sdp-uix/themes/tw-variables/root.css';
@import 'sdp-uix/themes/tw-variables/base.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Utility Functions

🧩 show_diff

Compares two objects and returns their differences.

import { show_diff } from 'sdp-uix/utils';

const obj1 = { name: 'John', age: 30 };
const obj2 = { name: 'John', age: 31 };

const differences = show_diff(obj1, obj2);
console.log(differences);
// Output: { age: { oldValue: 30, newValue: 31 } }

🧩 byte_format

Formats byte values into human-readable strings with appropriate units.

import { byte_format } from 'sdp-uix/utils';

const size = 1024 * 1024 * 3.5; // 3.5 MB in bytes

const formatted = byte_format(size);
console.log(formatted); // Output: "3.5 MB"

// With options for decimal places
const formattedWithOptions = byte_format(size, { decimals: 0 });
console.log(formattedWithOptions); // Output: "4 MB"

🧩 get_date_range

Get date range

import { get_date_range } from 'sdp-uix/utils';

const dates = get_date_range();

console.log(dates);
/* Output: [{
    "id": "today",
    "label": "Today",
    "range": [
        "2025-05-18T16:00:00.000Z",
        "2025-05-19T15:59:59.999Z"
    ]
}] */

🧩 date_range_label

Get date range

import { date_range_label } from 'sdp-uix/utils';

const label = date_range_label("2025-05-18T16:00:00.000Z", "2025-05-19T15:59:59.999Z");

console.log(label);
/* Output: 28 Apr 2025 - 27 May 2025 */

🧩 get_file_name_from_azure_url

Extracts the file name from an Azure blob storage URL.

import { get_file_name_from_azure_url } from 'sdp-uix/utils';

const fileName = get_file_name_from_azure_url('https://myaccount.blob.core.windows.net/container/folder/file.pdf');

console.log(fileName); // Output: "file.pdf"

🧩 get_file_extension_azure_url

Extracts the file extension from an Azure blob storage URL.

import { get_file_extension_azure_url } from 'sdp-uix/utils';

const extension = get_file_extension_azure_url('https://myaccount.blob.core.windows.net/container/folder/document.pdf');

console.log(extension); // Output: "pdf"

🧩 parse_malaysian_nric

Parses Malaysian National Registration Identity Card (NRIC) numbers to extract information such as date of birth, gender, and place of birth.

import { parse_malaysian_nric } from 'sdp-uix/utils';

const nricInfo = parse_malaysian_nric('900101-01-1234');

console.log(nricInfo);
/* Output:
{
    birthDate: Date(1990-01-01), // JavaScript Date object
    gender: 'Male',
    placeOfBirth: 'Johor',
    age: 34, // Calculated based on current date
    isValid: true
}
*/

🧩 data_get

Safely gets a value from a nested object using a path string or array of keys.

import { data_get } from 'sdp-uix/utils';

const obj = { 
    user: { 
        profile: { 
            name: 'John',
            address: {
                city: 'New York'
            }
        }
    }
};

// Get value with dot notation path
const name = data_get(obj, 'user.profile.name');
console.log(name); // Output: "John"

// With default value for missing properties
const country = data_get(obj, 'user.profile.address.country', 'USA');
console.log(country); // Output: "USA" (uses default value)

🧩 data_set

Sets a value at a given path in an object, creating intermediate properties if they don't exist.

import { data_set } from 'sdp-uix/utils';

const obj = { user: { profile: {} } };

// Set value with dot notation path
data_set(obj, 'user.profile.name', 'John');
data_set(obj, 'user.profile.address.city', 'New York');

console.log(obj);
/* Output:
    {
        user: {
            profile: {
            name: 'John',
                address: {
                    city: 'New York'
                }
            }
        }
    }
*/

🧩 is_empty

Checks if a value is empty (null, undefined, empty string, empty array, empty object, etc.).

import { is_empty } from 'sdp-uix/utils';

console.log(is_empty(null));        // true
console.log(is_empty(undefined));    // true
console.log(is_empty(''));          // true
console.log(is_empty([]));          // true
console.log(is_empty({}));          // true
console.log(is_empty(0));           // false
console.log(is_empty('text'));      // false
console.log(is_empty([1, 2, 3]));   // false
console.log(is_empty({ a: 1 }));    // false

🧩 debounce

Creates a debounced function that delays invoking the provided function until after a specified wait time has elapsed since the last time it was invoked.

import { debounce } from 'sdp-uix/utils';

const handleSearch = (query) => {
    console.log(`Searching for: ${query}`);
    // Perform API search...
};

// Create a debounced version of the search function
// that will only execute after 300ms of inactivity
const debouncedSearch = debounce(handleSearch, 300);

// In a React component or event handler
function onInputChange(e) {
    const query = e.target.value;
    debouncedSearch(query);  // Will only trigger search after typing stops
}

// Example with leading option
const immediateLogger = debounce(
    (message) => console.log(message),
    500,
    { leading: true }  // Will execute on the leading edge of the timeout
);

🧩 number manipulator

To provides precision-safe arithmetic helpers built on top of decimal.js

import { bcaddx, bcsubx, bcmulx, bcdivx, bcsumx } from "sdp-uix/utils";

// Addition
console.log(bcaddx(0.1, 0.2, 2));  
// 0.30

// Subtraction
console.log(bcsubx(10, 3, 2));     
// 7.00

// Multiplication
console.log(bcmulx(2.5, 4, 2));    
// 10.00

// Division
console.log(bcdivx(10, 4, 3));     
// 2.500

// Summation over array
const items = [
    { budget: { amount: 1.1} },
    { budget: { amount: 3.1} },
    { budget: { amount: 4.1} }
];

console.log(bcsumx(items, "budget.amount", 2));  
// 6.60

SDP Components Usage

<SDPLabel :required="true" label="OBS No." />
<SDPBadge severity="green" label="Success" />
<SDPPreloader class="hidden" />