sccoreui 4.3.7 → 4.4.9

package/dist/App.scss

@@ -507,8 +507,24 @@ div:has(ul.date_filter) .p-datepicker-footer {
   width: 18.063rem;
 }
 
-#fontFamily-1 {
-  border: 1px solid var(--gray-300);
+button[data-cmd='fontFamily']{
+  border: 1px solid var(--gray-300) !important;
+  &::before {
+    content: '';
+    border: 2px solid gray;
+    border-left: 0;
+    border-top: 0;
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    right: 8px;
+    top: 39%;
+    transform: rotate(45deg);
+  }
+}
+
+button[data-cmd='fontFamily'] {
+  // border: 1px solid var(--gray-300);
 }
 
 .fr-toolbar .fr-btn-grp {
@@ -624,16 +640,16 @@ button#formatOLOptions-1.fr-active::before {
 }
 
 #fontFamily-1:before {
-  content: '';
-  border: 2px solid gray;
-  border-left: 0;
-  border-top: 0;
-  width: 6px;
-  height: 6px;
-  position: absolute;
-  right: 8px;
-  top: 39%;
-  transform: rotate(45deg);
+  // content: '';
+  // border: 2px solid gray;
+  // border-left: 0;
+  // border-top: 0;
+  // width: 6px;
+  // height: 6px;
+  // position: absolute;
+  // right: 8px;
+  // top: 39%;
+  // transform: rotate(45deg);
 }
 
 .fr-toolbar .fr-btn-grp {
@@ -642,6 +658,10 @@ button#formatOLOptions-1.fr-active::before {
 }
 
 
+.fr-buttons.fr-tabs{
+  display: none;
+}
+
 
 /// Custon treeDropdownSelect style
 .treeNoCollaps {

package/dist/components/custom-color-picker/color-picker.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_color_1 = require("react-color");
+const CustomColorPicker = ({ onChange, defaultValue }) => {
+    const [color, setColor] = (0, react_1.useState)(defaultValue);
+    const handleColorChange = (newColor) => {
+        setColor(newColor.hex);
+        onChange(newColor);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_color_1.ChromePicker, { color: color, onChange: handleColorChange }) }));
+};
+exports.default = CustomColorPicker;

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

@@ -9,51 +9,43 @@ 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';
-const svg_1 = require("../../assets/svg/svg");
-const MyEditor = () => {
+// import { Bold, Italic } from '../../assets/svg/svg';
+const FroalaTextEditor = ({ onChange }) => {
     const editorRef = (0, react_1.useRef)(null);
     const html = ``;
     const [editorContent, setEditorContent] = (0, react_1.useState)(html);
     // Callback function to handle content changes
     const handleModelChange = (content) => {
         setEditorContent(content);
+        onChange(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>`);
-                            }
-                        });
-                    }
-                });
-            });
-        }
-    }, []);
+    // const handleKeyUp = () => {
+    //   // Access the current content of the editor
+    //   debugger
+    //   const content = editorRef.current.editor.html.get();
+    //   // Implement logic to recognize special words or patterns in 'content'
+    //   // For example, if you want to detect the word 'special':
+    //   if (content.toLowerCase().includes('special')) {
+    //     // Do something special
+    //     console.log('Special word detected!');
+    //   }
+    // };
+    // useEffect(() => {
+    //   if (editorRef.current) {
+    //     // editorRef.current.editor.doc.getElementById('bold-1').innerHTML = `${Bold}`
+    //     // editorRef.current.editor.doc.getElementById('italic-1').innerHTML = `${Italic}`;
+    //     editorRef.current.editor.events.on('keyup', handleKeyUp);
+    //   }
+    // }, []);
     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,
                 fontFamily: {
-                    'Arial,Helvetica,sans-serif': 'Font 1',
-                    'Impact,Charcoal,sans-serif': 'Font 2',
+                    'Arial,Helvetica,sans-serif': 'sans-serif',
+                    'Impact,Charcoal,sans-serif': 'RobotoBold',
                     'RobotoItalic,Charcoal,sans-serif': 'RobotoItalic',
-                    'Tahoma,Geneva,sans-serif': 'Font 3'
+                    // 'Tahoma,Geneva,sans-serif': 'Font 3'
                 },
-                fontFamilyDefaultSelection: 'Font 2',
+                fontFamilyDefaultSelection: 'sans-serif',
                 placeholderText: 'placeholder',
                 key: "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==",
                 charCounterCount: false,
@@ -86,4 +78,4 @@ const MyEditor = () => {
                 },
             }, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
 };
-exports.default = MyEditor;
+exports.default = FroalaTextEditor;

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.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = 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"));
@@ -215,5 +215,5 @@ Object.defineProperty(exports, "FormComponent", { enumerable: true, get: functio
 var form_fields_1 = require("./components/form/form-fields/form-fields");
 Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return tslib_1.__importDefault(form_fields_1).default; } });
 var FroalaEditor_1 = require("./components/froala-editor/FroalaEditor");
-Object.defineProperty(exports, "TextEditor", { enumerable: true, get: function () { return tslib_1.__importDefault(FroalaEditor_1).default; } });
+Object.defineProperty(exports, "FroalaTextEditor", { enumerable: true, get: function () { return tslib_1.__importDefault(FroalaEditor_1).default; } });
 client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/types/components/custom-color-picker/color-picker.d.ts

@@ -0,0 +1,3 @@
+import { CustomColorPickerTypes } from '../types/type';
+declare const CustomColorPicker: ({ onChange, defaultValue }: CustomColorPickerTypes) => import("react/jsx-runtime").JSX.Element;
+export default CustomColorPicker;

package/dist/types/components/froala-editor/FroalaEditor.d.ts

@@ -1,5 +1,6 @@
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/js/plugins.pkgd.min.js';
-declare const MyEditor: any;
-export default MyEditor;
+import { FroalaTextEditorTypes } from '../types/type';
+declare const FroalaTextEditor: ({ onChange }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
+export default FroalaTextEditor;

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

@@ -155,3 +155,10 @@ export interface TreeDropdownSelectTypes {
     expandedKeys: any;
     classNames?: any;
 }
+export interface CustomColorPickerTypes {
+    onChange?: any;
+    defaultValue: string;
+}
+export interface FroalaTextEditorTypes {
+    onChange?: any;
+}

package/dist/types/index.d.ts

@@ -97,7 +97,7 @@ 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";
+export { default as FroalaTextEditor } from "./components/froala-editor/FroalaEditor";
 import { DropdownChangeEvent } from "primereact/dropdown";
 import { ColorPickerChangeEvent } from "primereact/colorpicker";
 import { SliderChangeEvent } from "primereact/slider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "4.3.7",
+  "version": "4.4.9",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -39,6 +39,7 @@
     "primereact": "^9.5.0",
     "quill": "^1.3.7",
     "react": "^18.2.0",
+    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-froala-wysiwyg": "^4.1.2",
     "react-phone-number-input": "^3.3.6",