sccoreui 4.3.5 → 4.3.6

package/dist/components/froala-editor/FroalaEditor.js

@@ -9,17 +9,41 @@ const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wys
 require("froala-editor/js/plugins.pkgd.min.js");
 // import { SvgComponent } from 'sccoreui';
 // import SvgComponent from '../../directives/svg-component';
-// import { Bold, Italic } from '../../assets/svg/svg';
+const svg_1 = require("../../assets/svg/svg");
 const MyEditor = () => {
     const editorRef = (0, react_1.useRef)(null);
     const html = ``;
     const [editorContent, setEditorContent] = (0, react_1.useState)(html);
-    // const [editorConfig, setEditorConfig] = useState<any>()
     // Callback function to handle content changes
     const handleModelChange = (content) => {
         setEditorContent(content);
     };
     (0, react_1.useEffect)(() => {
+        if (editorRef.current) {
+            editorRef.current.editor.doc.getElementById('bold-1').innerHTML = `${svg_1.Bold}`;
+            editorRef.current.editor.doc.getElementById('italic-1').innerHTML = `${svg_1.Italic}`;
+            // Listen for the 'contentChanged' event
+            editorRef.current.editor.events.on('contentChanged', () => {
+                const currentContent = editorRef.current.html.get();
+                // Define your special keywords
+                const specialKeywords = ['@product', '@category', '@item'];
+                // Iterate through each keyword and check for its presence in the content
+                specialKeywords.forEach(keyword => {
+                    const keywordIndex = currentContent.lastIndexOf(keyword);
+                    if (keywordIndex !== -1 && keywordIndex + keyword.length === currentContent.length) {
+                        // Add a tag when the Enter key is pressed at the end of a special keyword
+                        editorRef.current.events.on('keydown', (e) => {
+                            if (e.which === editorRef.current.editor.KEYCODE.ENTER) {
+                                // Do something special when Enter key is pressed
+                                console.log(`Enter pressed after special keyword: ${keyword}`);
+                                // For demonstration, let's insert a tag for demonstration
+                                editorRef.current.html.insert(`<span class="special-tag">${keyword}</span>`);
+                            }
+                        });
+                    }
+                });
+            });
+        }
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-editor' }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
                 fontFamilySelection: true,
@@ -27,6 +51,7 @@ const MyEditor = () => {
                     'Arial,Helvetica,sans-serif': 'Font 1',
                     'Impact,Charcoal,sans-serif': 'Font 2',
                     'RobotoItalic,Charcoal,sans-serif': 'RobotoItalic',
+                    'Tahoma,Geneva,sans-serif': 'Font 3'
                 },
                 fontFamilyDefaultSelection: 'Font 2',
                 placeholderText: 'placeholder',
@@ -41,6 +66,7 @@ const MyEditor = () => {
                 toolbarButtons: {
                     'fontFamily': {
                         'buttons': ['fontFamily'],
+                        'class': 'customCard',
                     },
                     'moreText': {
                         'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'fontSize', 'subscript', 'superscript', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
@@ -51,9 +77,12 @@ const MyEditor = () => {
                         'buttonsVisible': 2
                     },
                     'moreRich': {
-                        'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html', "javascript"],
+                        'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html'],
                         'buttonsVisible': 2
                     },
+                    'fullscreen': {
+                        'button': 'fullscreen'
+                    },
                 },
             }, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
 };

package/dist/components/treeDropdownSelect/treeDropdownSelect.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const tree_1 = require("primereact/tree");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const sccoreui_1 = require("sccoreui");
-const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode }) => {
+const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode, classNames }) => {
     const onClickNode = (e) => {
         if (clickOnNode)
             clickOnNode(e);
     };
-    return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className: 'treeNoCollaps', nodeTemplate: (node) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex gap-2 align-items-center justify-content-between w-full' }, { children: [" ", (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'treeItem flex gap-2 h-2rem align-items-center  w-full h-full font-semibold' }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chart-breakout-square" }), node.moduleName] })), " ", (node === null || node === void 0 ? void 0 : node.badgeValue) && (0, jsx_runtime_1.jsx)(sccoreui_1.Badge, { className: 'treeBadge w-auto text-gray-700', value: node === null || node === void 0 ? void 0 : node.badgeValue })] })), onNodeClick: (e) => onClickNode(e) }));
+    return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className: `treeNoCollaps ${classNames ? classNames : ''}`, nodeTemplate: (node) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex gap-2 align-items-center justify-content-between w-full' }, { children: [" ", (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'treeItem flex gap-2 h-2rem align-items-center  w-full h-full font-semibold' }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chart-breakout-square" }), node.moduleName] })), " ", (node === null || node === void 0 ? void 0 : node.badgeValue) && (0, jsx_runtime_1.jsx)(sccoreui_1.Badge, { className: 'treeBadge w-auto text-gray-700', value: node === null || node === void 0 ? void 0 : node.badgeValue })] })), onNodeClick: (e) => onClickNode(e) }));
 };
 exports.default = TreeDropdownSelect;

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.CustomSlider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
 exports.StyleClass = exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Stesp = exports.SlideMenu = exports.PanelMenu = exports.Menubar = exports.Menu = exports.Dock = exports.ContextMenu = exports.Toolbar = exports.SplitterPanel = exports.Splitter = exports.ScrollPanel = exports.Panel = exports.Fieldset = exports.DeferredContent = exports.Timeline = exports.TreeTable = exports.Tree = exports.PickList = exports.OrganizationChart = exports.OrderList = exports.DataScroller = exports.TriStateCheckbox = exports.TreeSelect = exports.SelectButton = exports.MultiStateCheckbox = exports.Mention = exports.ListBox = exports.Knob = exports.Editor = exports.CascadeSelect = exports.FilterOperator = exports.FilterMatchMode = exports.Slider = exports.Galleria = exports.SvgComponent = exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
-exports.TextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = void 0;
+exports.TextEditor = exports.FormFields = exports.FormComponent = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -208,8 +208,6 @@ var multi_select_dropdown_1 = require("./components/multi-select-dropdown/multi-
 Object.defineProperty(exports, "MultiSelectDropDown", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_dropdown_1).default; } });
 var date_picker_1 = require("./components/date-picker/date-picker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(date_picker_1).default; } });
-var treeDropdownSelect_1 = require("./components/treeDropdownSelect/treeDropdownSelect");
-Object.defineProperty(exports, "TreeDropdownSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(treeDropdownSelect_1).default; } });
 var form_1 = require("./components/form/form");
 Object.defineProperty(exports, "FormComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(form_1).default; } });
 var form_fields_1 = require("./components/form/form-fields/form-fields");

package/dist/types/components/treeDropdownSelect/treeDropdownSelect.d.ts

@@ -1,3 +1,3 @@
 import { TreeDropdownSelectTypes } from '../types/type';
-declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
+declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode, classNames }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
 export default TreeDropdownSelect;

package/dist/types/components/types/type.d.ts

@@ -153,4 +153,5 @@ export interface TreeDropdownSelectTypes {
     clickOnNode?: any;
     treeData: any;
     expandedKeys: any;
+    classNames?: any;
 }

package/dist/types/index.d.ts

@@ -94,7 +94,6 @@ export { default as StyleClass } from "./components/style-class/styleClass";
 export { default as Terminal } from "./components/terminal/terminal";
 export { default as MultiSelectDropDown } from './components/multi-select-dropdown/multi-select-dropdown';
 export { default as DatePicker } from "./components/date-picker/date-picker";
-export { default as TreeDropdownSelect } from './components/treeDropdownSelect/treeDropdownSelect';
 export { default as FormComponent } from "./components/form/form";
 export { default as FormFields } from "./components/form/form-fields/form-fields";
 export { default as TextEditor } from "./components/froala-editor/FroalaEditor";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",