@schematize/util-ui-components
Advanced tools
A collection of reusable UI components for the Schematize platform. This package provides essential UI building blocks including tables, file dropzones, permission selectors, and utility functions for data handling.
@schematize/refs: Reference utilities for cross-platform compatibility@schematize/instance.js: Instance management and utilities@schematize/ui.js: Core UI framework and DOM manipulation@schematize/util-common: Common utility functionsnpm install @schematize/util-ui-components
import {
table,
fileDropzone,
permissionsSelectorTree
} from '@schematize/util-ui-components';
Creates a full-featured data table component with sorting, filtering, pagination, and resizable columns.
el (Element): The DOM element to render the table intoattributes (Object): HTML attributes to apply to the table elementcallback (Function): Optional callback function called after table creationconfig (Object): Configuration object containing:
columns (Array): Array of column definitions. Each column object can contain:
title (String): Column header textpath (Array): Property path array for data access (e.g., ['name'] or ['user', 'profile', 'firstName'])type (Function): Data type constructor for filtering (String, Number, Boolean, Date)width (Number): Column width percentage (optional)cell (Function): Custom cell renderer function that receives the cell element and returns DOM elementscompareFn (Function): Custom comparison function for sorting (optional)rows (Function): An initializer function. This is similar as to what you would call for repeat when using @schematize/ui.js.pageSize (Number): Number of rows per page (default: 100)filter (Object): Initial filter statesort (Array): Initial sort configurationObject: The table DOM elementconst tableComponent = table(el, {
className: 'table',
}, 0, {
rows: (u) => (
listen(_, ['items', [SYMBOL_ALL_PROPERTIES, 'change']], u, 1)
),
columns: [{
title: 'ID',
path: ['__id__'],
type: String,
width: 30,
}, {
title: 'Name',
path: ['name'],
type: String,
}],
});
Creates a drag-and-drop file upload component with image preview and validation capabilities.
el (Element): The DOM element to render the dropzone intoattributes (Object): HTML attributes to apply to the dropzone elementcallback (Function): Optional callback function called after dropzone creationuploadCallback (Function): Callback function called when files are uploadederrorCallback (Function): Callback function called when upload errors occurObject: The file dropzone DOM elementfileDropzone(el, {}, (el, _ = el._) => (
set(_, 'imageMaxWidth', 256),
set(_, 'imageMaxHeight', 256)
), (data) => (
set(_.item, 'avatar', imageToDataURL(data[0]))
), (err) => (
_.showToast({
m: err.message,
t: 'error',
d: 10000,
})
))
Creates a hierarchical permission selection component with visual tree representation using SVG.
el (Element): The DOM element to render the tree intoattributes (Object): HTML attributes to apply to the tree elementcb (Function): Callback function called when permissions changeconfig (Object): Configuration object containing:
permissions (Array): Array of permission objects with hierarchyselected (Array): Initially selected permissionsreadonly (Boolean): Whether the tree is read-onlyObject: The permissions selector tree DOM elementpermissionsSelectorTree(el, {}, (el, _ = el._) => (
listen(_, ['mode'], () => (
set(_, 'disabled', (_['mode'] !== 'edit'))
), 1),
on(_, 'change', () => (
asn(_['packageAccess'], {
r: _.r,
c: _.c,
u: _.u,
d: _.d,
})
)),
listen(_, ['packageAccess', [SYMBOL_ALL_PROPERTIES, 'change']], (v) => (
asn(_, {
r: v.r,
c: v.c,
u: v.u,
d: v.d,
})
), 1)
), { r: 1, c: 1, u: 1, d: 1, a: 0 })
Converts a File object to a data URL using the FileReader API.
file (File): The File object to convertPromise<string>: Promise that resolves to the data URL stringconst dataURL = await readFileAsDataURL(fileInput.files[0]);
console.log('Data URL:', dataURL);
Resizes an image represented as a data URL to specified dimensions while maintaining aspect ratio.
dataURL (String): The data URL of the image to resizewidth (Number): Target width in pixels (optional, maintains aspect ratio if not provided)height (Number): Target height in pixels (optional, maintains aspect ratio if not provided)type (String): Output image type (e.g., 'image/jpeg', 'image/png')Promise<string>: Promise that resolves to the resized image data URLconst resizedImage = await resizeDataURL(originalDataURL, 300, 200, 'image/jpeg');
console.log('Resized image:', resizedImage);
Converts an item with a getAsString method to a Promise-based data URL.
item (Object): Object with a getAsString method that accepts a callbackPromise<string>: Promise that resolves to the data URL stringconst dataURL = await getAsString(someItem);
console.log('Converted to data URL:', dataURL);
getAsString methodThis package is built using ES modules and requires a modern JavaScript environment. The components are designed to work with the Schematize UI framework and use reactive state management.
MIT
Benjamin Bytheway
FAQs
Schematize UI Components Library
We found that @schematize/util-ui-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.