xmlui 0.7.14 → 0.7.15

package/dist/scripts/src/components/Items/Items.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemsComponentRenderer = exports.ItemsMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container_helpers_1 = require("../container-helpers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const ItemsNative_1 = require("./ItemsNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Items";
+exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component maps sequential data items into component instances, representing ` +
+        `each data item as a particular component.`,
+    props: {
+        items: (0, metadata_helpers_1.dComponent)(`This property contains the list of data items this component renders.`),
+        data: (0, ComponentDefs_1.d)(`This property contains the list of data items (obtained from a data source) this component renders.`),
+        reverse: (0, ComponentDefs_1.d)(`This property reverses the order in which data is mapped to template components.`),
+        itemTemplate: (0, metadata_helpers_1.dComponent)("The component template to display a single item"),
+    },
+    contextVars: {
+        $item: (0, metadata_helpers_1.dComponent)("This value represents the current iteration item while the component renders its children."),
+        $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current iteration index (zero-based) while rendering children."),
+        $isFirst: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its first item."),
+        $isLast: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its last item."),
+    },
+    opaque: true,
+});
+exports.itemsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ItemsMd, (rendererContext) => {
+    const { node, renderChild, extractValue, layoutContext } = rendererContext;
+    return ((0, jsx_runtime_1.jsx)(ItemsNative_1.Items, { items: extractValue(node.props.items) || extractValue(node.props.data), reverse: extractValue(node.props.reverse), renderItem: (contextVars, key) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: node.children || node.props.itemTemplate, renderChild: renderChild, layoutContext: layoutContext }, key));
+        } }));
+});

package/dist/scripts/src/components/Items/ItemsNative.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Items = Items;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lodash_es_1 = require("lodash-es");
+// =====================================================================================================================
+// React Items component implementation
+function Items({ items, renderItem, reverse = false, }) {
+    const itemsToRender = (0, react_1.useMemo)(() => {
+        if (!items) {
+            return [];
+        }
+        let normalizedItems = items;
+        if ((0, lodash_es_1.isPlainObject)(items)) {
+            normalizedItems = Object.values(items);
+        }
+        return reverse ? [...normalizedItems].reverse() : normalizedItems;
+    }, [items, reverse]);
+    if (!itemsToRender || !Array.isArray(itemsToRender)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: itemsToRender.map((item, index) => renderItem({
+            $item: item,
+            $itemIndex: index,
+            $isFirst: index === 0,
+            $isLast: index === itemsToRender.length - 1,
+        }, index)) }));
+}

package/dist/scripts/src/components/Link/Link.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localLinkComponentRenderer = exports.LinkMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const LinkNative_1 = require("./LinkNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const abstractions_1 = require("@components/abstractions");
+const COMP = "Link";
+exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
+    description: `A \`${COMP}\` component represents a navigation target within the app or a ` +
+        `reference to an external web URL.`,
+    props: {
+        to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        active: (0, ComponentDefs_1.d)(`Indicates whether this link is active or not. If so, it will have a distinct visual appearance.`, null, "boolean", false),
+        target: (0, ComponentDefs_1.d)(`This property specifies where to open the link represented by the \`${COMP}\`. This ` +
+            `property accepts the following values (in accordance with the HTML standard):`, abstractions_1.LinkTargetMd, "string", "_self"),
+        label: (0, metadata_helpers_1.dLabel)(),
+        icon: (0, ComponentDefs_1.d)(`This property allows you to add an icon (specify the icon's name) to the link.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Link_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-text-${COMP}--hover--active`]: `$color-text-${COMP}--active`,
+        [`color-text-decoration-${COMP}--hover`]: "$color-surface-400A80",
+        [`color-text-decoration-${COMP}--active`]: "$color-surface200",
+        [`font-weight-${COMP}--active`]: "$font-weight-bold",
+        [`color-decoration-${COMP}`]: "$color-surface-400",
+        [`offset-decoration-${COMP}`]: "$space-1",
+        [`line-decoration-${COMP}`]: "underline",
+        [`style-decoration-${COMP}`]: "dashed",
+        [`thickness-decoration-${COMP}`]: "$space-0_5",
+        [`color-outline-${COMP}--focus`]: "$color-outline--focus",
+        [`thickness-outline-${COMP}--focus`]: "$thickness-outline--focus",
+        [`style-outline-${COMP}--focus`]: "$style-outline--focus",
+        [`offset-outline-${COMP}--focus`]: "$offset-outline--focus",
+        [`font-size-${COMP}`]: "inherit",
+        [`gap-icon-${COMP}`]: "$gap-tight",
+        [`padding-icon-${COMP}`]: "$space-0_5",
+        light: {
+            [`color-text-${COMP}`]: "$color-primary-500",
+            [`color-text-${COMP}--active`]: "$color-primary-500",
+        },
+        dark: {
+            [`color-text-${COMP}`]: "$color-primary-500",
+            [`color-text-${COMP}--active`]: "$color-primary-500",
+        },
+    },
+});
+/**
+ * This function define the renderer for the Limk component.
+ */
+exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LinkMd, ({ node, extractValue, lookupEventHandler, renderChild, layoutCss }) => {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: extractValue(node.props.to), icon: extractValue(node.props.icon), active: extractValue.asOptionalBoolean(node.props.active, false), target: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.target), style: layoutCss, disabled: !extractValue.asOptionalBoolean((_b = node.props.enabled) !== null && _b !== void 0 ? _b : true), children: node.props.label
+            ? extractValue.asDisplayText(node.props.label)
+            : renderChild(node.children) }));
+});

package/dist/scripts/src/components/Link/LinkNative.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const react_2 = require("react");
+const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const IconNative_1 = require("@components/Icon/IconNative");
+const component_utils_1 = require("@components/component-utils");
+const LocalLink = ({ to, children, icon, active, onClick, target, disabled, style }) => {
+    const iconLink = !!icon && !children;
+    const smartTo = (0, react_2.useMemo)(() => {
+        return (0, component_utils_1.createUrlWithQueryParams)(to);
+    }, [to]);
+    const Node = !to ? "div" : react_1.Link;
+    return ((0, jsx_runtime_1.jsxs)(Node, { to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+            [Link_module_scss_1.default.iconLink]: iconLink,
+            [Link_module_scss_1.default.active]: active,
+            [Link_module_scss_1.default.disabled]: disabled,
+        }), children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: Link_module_scss_1.default.iconWrapper, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon }) })), children] }));
+};
+exports.LocalLink = LocalLink;

package/dist/scripts/src/components/List/List.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dynamicHeightListComponentRenderer = exports.ListMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const List_module_scss_1 = __importDefault(require("./List.module.scss"));
+const container_helpers_1 = require("@components/container-helpers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ListNative_1 = require("./ListNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const abstractions_1 = require("@components/abstractions");
+const COMP = "List";
+exports.ListMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component is a robust layout container that renders associated data items ` +
+        `as a list of components. \`${COMP}\` is virtualized; it renders only items that are visible ` +
+        `in the viewport.`,
+    props: {
+        data: (0, ComponentDefs_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
+            `that the \`List\` can display.`),
+        items: (0, ComponentDefs_1.d)(`You can use \`items\` as an alias for the \`data\` property. ` +
+            `When you bind the list to a data source (e.g. an API endpoint), ` +
+            `the \`data\` acts as the property that accepts a URL to fetch information from an API.` +
+            `When both \`items\` and \`data\` are used, \`items\` has priority.`),
+        loading: (0, ComponentDefs_1.d)(`This property delays the rendering of children until it is set to \`false\`, or the ` +
+            `component receives usable list items via the [\`data\`](#data) property.`),
+        limit: (0, ComponentDefs_1.d)(`This property limits the number of items displayed in the \`${COMP}\`.`),
+        scrollAnchor: (0, ComponentDefs_1.d)(`This property pins the scroll position to a specified location of the list. Available values are shown below.`, abstractions_1.scrollAnchoringValues, "string", "top"),
+        groupBy: (0, ComponentDefs_1.d)(`This property sets which attribute of the data is used to group the list items. ` +
+            `If the attribute does not appear in the data, it will be ignored.`),
+        orderBy: (0, ComponentDefs_1.d)(`This property enables the ordering of list items by specifying an attribute in the data.`),
+        availableGroups: (0, ComponentDefs_1.d)(`This property is an array of group names that the \`${COMP}\` will display.`),
+        groupHeaderTemplate: (0, metadata_helpers_1.dComponent)(`Enables the customization of how the groups are displayed, similarly to the ` +
+            `[\`itemTemplate\`](#itemtemplate). You can use the \`$item\` context variable to access ` +
+            `an item group and map its individual attributes.`),
+        groupFooterTemplate: (0, metadata_helpers_1.dComponent)(`Enables the customization of how the the footer of each group is displayed. ` +
+            `Combine with [\`groupHeaderTemplate\`](#groupHeaderTemplate) to customize sections. You can use ` +
+            `the \`$item\` context variable to access an item group and map its individual attributes.`),
+        itemTemplate: (0, metadata_helpers_1.dComponent)(`This property allows the customization of mapping data items to components. You can use ` +
+            `the \`$item\` context variable to access an item and map its individual attributes.`),
+        emptyListTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the template to display when the list is empty.`),
+        pageInfo: (0, ComponentDefs_1.d)(`This property contains the current page information. Setting this property also enures the ` +
+            `\`${COMP}\` uses pagination.`),
+        idKey: (0, ComponentDefs_1.d)(`Denotes which attribute of an item acts as the ID or key of the item. Default is \`"id"\`.`),
+        selectedIndex: (0, ComponentDefs_1.d)(`This property scrolls to a specific item indicated by its index.`),
+        groupsInitiallyExpanded: (0, ComponentDefs_1.d)(`This Boolean property defines whether the list groups are initially expanded.`),
+        defaultGroups: (0, ComponentDefs_1.d)(`This property adds a list of default groups for the \`${COMP}\` and displays the group ` +
+            `headers in the specified order. If the data contains group headers not in this list, ` +
+            `those headers are also displayed (after the ones in this list); however, their order ` +
+            `is not deterministic.`),
+        hideEmptyGroups: (0, ComponentDefs_1.d)("This boolean property indicates if empty groups should be hidden (no header and footer are displayed).", null, "boolean", true),
+        borderCollapse: (0, ComponentDefs_1.d)("Collapse items borders", null, "boolean", true)
+    },
+    contextVars: {
+        $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the data list.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
+});
+exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ListMd, ({ node, extractValue, renderChild, lookupAction, layoutCss, layoutContext, lookupEventHandler, registerComponentApi, }) => {
+    var _a;
+    const itemTemplate = node.props.itemTemplate || node.children;
+    const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
+    return ((0, jsx_runtime_1.jsx)(ListNative_1.DynamicHeightList, { registerComponentApi: registerComponentApi, style: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), groupBy: extractValue(node.props.groupBy), orderBy: extractValue(node.props.orderBy), availableGroups: extractValue(node.props.availableGroups), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), requestFetchNextPage: lookupEventHandler("requestFetchNextPage"), selectedIndex: extractValue(node.props.selectedIndex), resetSelectedIndex: lookupAction((_a = node.events) === null || _a === void 0 ? void 0 : _a.resetSelectedIndex), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded), defaultGroups: extractValue(node.props.defaultGroups), borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true), itemRenderer: itemTemplate &&
+            ((item) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext }));
+            }), sectionRenderer: node.props.groupBy
+            ? (item) => {
+                var _a, _b, _c;
+                return ((_b = (_a = item.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || !hideEmptyGroups ? ((0, jsx_runtime_1.jsx)(ListNative_1.MemoizedSection, { node: (_c = node.props.groupHeaderTemplate) !== null && _c !== void 0 ? _c : { type: "Fragment" }, renderChild: renderChild, item: item })) : null;
+            }
+            : undefined, sectionFooterRenderer: node.props.groupFooterTemplate
+            ? (item) => {
+                var _a, _b, _c;
+                return ((_b = (_a = item.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || !hideEmptyGroups ? ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: (_c = node.props.groupFooterTemplate) !== null && _c !== void 0 ? _c : { type: "Fragment" }, item: item, renderChild: renderChild, itemKey: "$group", contextKey: "$group" })) : null;
+            }
+            : undefined }));
+});