pragmate-ui
Version:
An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.
308 lines (277 loc) • 9.37 kB
JavaScript
import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from 'react';
import * as dependency_2 from 'framer-motion';
import * as dependency_3 from 'pragmate-ui/base';
const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/list"},"type":"code"}, import.meta.url).package();;
__pkg.dependencies.update([['react', dependency_1],['framer-motion', dependency_2],['pragmate-ui/base', dependency_3]]);
const ims = new Map();
/***************************
INTERNAL MODULE: ./draggable
***************************/
ims.set('./draggable', {hash: 2033348794, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableList = DraggableList;
var _react = require("react");
var _framerMotion = require("framer-motion");
function DraggableList({
specs,
control,
index,
...props
}) {
const [items, setItems] = _react.default.useState(props.items);
const onReorder = items => {
setItems(items);
if (props.onReorder) props.onReorder(items);
};
const output = items.map((item, idx) => _react.default.createElement(_framerMotion.Reorder.Item, {
value: item,
key: `${item}`
}, item));
return _react.default.createElement(_framerMotion.Reorder.Group, {
values: items,
onReorder: onReorder
}, output);
}
}});
/*********************************
INTERNAL MODULE: ./html-attributes
*********************************/
ims.set('./html-attributes', {hash: 1750835586, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getAttributes = getAttributes;
/**
* A Set containing common HTML attributes that are used to control element behavior and information.
* This Set is utilized to filter properties from objects to ensure only valid HTML attributes,
* including accessibility attributes (those starting with 'aria-') and custom data attributes (those starting with 'data-'),
* are included. These attributes can influence the HTML rendering and are recognized by web browsers.
*/
const htmlAttributes = new Set(['id', 'class', 'style', 'title', 'data', 'value', 'href', 'src', 'alt', 'onclick', 'onchange', 'onmouseover', 'disabled', 'readonly', 'type', 'placeholder', 'name', 'method', 'action', 'checked', 'selected', 'width', 'height', 'maxlength', 'minlength', 'pattern', 'step', 'required', 'autocomplete', 'autofocus', 'multiple', 'form', 'size', 'srcset', 'for', 'tabindex', 'role', 'aria-label']);
/**
* Filters the properties of an object to include only those that are recognized HTML attributes, with the
* capability to explicitly exclude certain attributes even if they are valid. The function checks for standard
* attributes defined in the `htmlAttributes` set, and dynamically accepts any properties that begin with 'aria-'
* or 'data-'. It excludes any properties listed in the `exclusions` array, regardless of their validity as HTML attributes.
*
* @param {Record<string, any>} props - The object containing properties that may or may not correspond to valid HTML attributes.
* @param {string[]} exclusions - Array of property names to be excluded from the returned object, even if they are valid HTML attributes.
* @returns {Record<string, any>} A new object containing only the properties that are valid HTML attributes and not listed in exclusions.
*/
function getAttributes(props, exclusions = []) {
const filtered = {};
const exclusionSet = new Set(exclusions); // Convert exclusions array to a Set for efficient lookup
for (const prop in props) {
// Check for known attributes or attributes starting with 'aria-' or 'data-' and not in the exclusions list
if ((htmlAttributes.has(prop) || prop.startsWith('aria-') || prop.startsWith('data-')) && !exclusionSet.has(prop)) {
filtered[prop] = props[prop];
}
}
return filtered;
}
}});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {hash: 2732568007, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.List = List;
var _react = require("react");
var _draggable = require("./draggable");
var _item = require("./item");
var _dragable = require("./item/dragable");
var _framerMotion = require("framer-motion");
/*bundle*/function List({
items,
children,
control,
empty,
...props
}) {
const {
className,
index = 'id',
specs,
draggable,
childrenPosition = 'top',
as = 'ul',
// @deprecated
container = 'ul'
} = props;
const Container = _framerMotion.motion[as];
const onTop = childrenPosition === 'top';
const ItemControl = draggable ? _dragable.DraggableItem : _item.ItemList;
if (draggable) return _react.default.createElement(_draggable.DraggableList, {
items: items,
...props
});
if (!Array.isArray(items)) {
console.warn('Invalid "items" prop: Expected an array. Please review the component usage and ensure the "items" prop is correctly passed as an array.');
return null;
}
if (control) {
// console.warn(
// 'The "control" prop is deprecated and will be removed in future versions. Please use children to define the item components.',
// );
}
if (items.length === 0 && empty) {
const Control = empty;
return _react.default.createElement(Control, null);
}
const renderItems = control ? items.map((item, idx) => {
return _react.default.createElement(ItemControl, {
index: index,
key: idx,
specs: specs,
control: control,
item: item,
idx: idx
});
}) : items.map((item, idx) => _react.Children.map(children, child => (0, _react.isValidElement)(child) ? (0, _react.cloneElement)(child, {
key: idx,
index,
specs,
item,
idx
}) : child));
const top = onTop && children ? children : null;
const bottom = !onTop && children ? children : null;
return _react.default.createElement(Container, {
...props,
className: className
}, top, renderItems, bottom);
}
}});
/*******************************
INTERNAL MODULE: ./item/dragable
*******************************/
ims.set('./item/dragable', {hash: 3472479063, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableItem = DraggableItem;
var _framerMotion = require("framer-motion");
var _react = require("react");
var _ = require("./");
function DraggableItem({
as,
...props
}) {
const {
item,
idx
} = props;
const attrs = {
as
};
return _react.default.createElement(_framerMotion.Reorder.Item, {
value: item,
key: idx,
...attrs
}, _react.default.createElement(_.ItemList, {
...props,
item: item,
idx: idx,
as: 'span'
}));
}
}});
/***************************
INTERNAL MODULE: ./item/html
***************************/
ims.set('./item/html', {hash: 2640674525, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HTMLItem = HTMLItem;
var _react = require("react");
var _htmlAttributes = require("../html-attributes");
function HTMLItem({
as = 'li',
children,
...props
}) {
const Control = as;
const {
item
} = props;
const attrs = (0, _htmlAttributes.getAttributes)(props, ['item', 'data']);
return _react.default.createElement(Control, {
...attrs
}, item);
}
}});
/****************************
INTERNAL MODULE: ./item/index
****************************/
ims.set('./item/index', {hash: 1844515837, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ItemList = ItemList;
var _react = require("react");
var _html = require("./html");
/**
* Componente que renderiza un elemento de la lista.
*
* @template T - El tipo de los elementos en la lista.
* @template U - Tipo de las propiedades adicionales opcionales (por defecto un objeto genérico).
*
* @param props - Las propiedades de `ItemList`.
* @returns El elemento renderizado.
*/
function ItemList({
index,
item,
idx,
as = 'li',
control,
specs = {}
}) {
const Control = typeof control === 'string' ? _html.HTMLItem : control;
const elementProps = {
key: item[index] || idx,
index: idx,
item,
data: item,
...specs,
as: typeof control === 'string' ? control : undefined
};
const element = _react.default.createElement(Control, elementProps);
return element;
}
}});
/***********************
INTERNAL MODULE: ./types
***********************/
ims.set('./types', {hash: 2311667739, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
}});
__pkg.exports.descriptor = [{"im":"./index","from":"List","name":"List"}];
export let List;
// Module exports
__pkg.exports.process = function({require, prop, value}) {
(require || prop === 'List') && (List = require ? require('./index').List : value);
};
export const __beyond_pkg = __pkg;
export const hmr = new (function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
});
__pkg.initialise(ims);
//# sourceMappingURL=list.browser.mjs.map