@headless-adminapp/fluent 0.0.17-alpha.26 → 0.0.17-alpha.27

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -34,7 +34,9 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
     };
     const isValid = (0, react_1.useMemo)(() => {
         return (!!selectedOption &&
-            values.filter(Boolean).length === selectedOption.controls.length);
+            values.filter((value) => {
+                return value !== null && value !== undefined;
+            }).length === selectedOption.controls.length);
     }, [selectedOption, values]);
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { style: { paddingBlock: 8 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',

package/PageEntityForm/StandardControl.js

@@ -19,13 +19,14 @@ const LookupControl_1 = require("../form/controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("../form/controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("../form/controls/MultiSelectLookupControl");
 const NumberControl_1 = require("../form/controls/NumberControl");
+const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
 const StandardControl = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const { attribute, label: _label, isError, 
     // errorMessage,
     name, value, onBlur, onChange, 
@@ -78,11 +79,15 @@ const StandardControl = (props) => {
                     const Control = (_f = componentStore_1.componentStore.getComponent('Form.TextAreaControl')) !== null && _f !== void 0 ? _f : TextAreaControl_1.TextAreaControl;
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
+                case 'richtext': {
+                    const Control = (_g = componentStore_1.componentStore.getComponent('Form.RichTextControl')) !== null && _g !== void 0 ? _g : RichTextControl_1.RichTextControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
         case 'number': {
-            const Control = (_g = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _g !== void 0 ? _g : NumberControl_1.NumberControl;
+            const Control = (_h = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _h !== void 0 ? _h : NumberControl_1.NumberControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'date': {
@@ -97,11 +102,11 @@ const StandardControl = (props) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                const Control = (_h = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _h !== void 0 ? _h : DateTimeControl_1.DateTimeControl;
+                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _j !== void 0 ? _j : DateTimeControl_1.DateTimeControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
             else {
-                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _j !== void 0 ? _j : DateControl_1.DateControl;
+                const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _k !== void 0 ? _k : DateControl_1.DateControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
         }
@@ -116,35 +121,35 @@ const StandardControl = (props) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _k !== void 0 ? _k : DateRangeControl_1.DateRangeControl;
+            const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _l !== void 0 ? _l : DateRangeControl_1.DateRangeControl;
             return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
         }
         case 'money': {
-            const Control = (_l = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _l !== void 0 ? _l : CurrencyControl_1.CurrencyControl;
+            const Control = (_m = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _m !== void 0 ? _m : CurrencyControl_1.CurrencyControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'lookup': {
-            const Control = (_m = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _m !== void 0 ? _m : LookupControl_1.LookupControl;
+            const Control = (_o = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _o !== void 0 ? _o : LookupControl_1.LookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'lookups': {
-            const Control = (_o = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _o !== void 0 ? _o : MultiSelectLookupControl_1.MultiSelectLookupControl;
+            const Control = (_p = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _p !== void 0 ? _p : MultiSelectLookupControl_1.MultiSelectLookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'boolean': {
-            const Control = (_p = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _p !== void 0 ? _p : SwitchControl_1.SwitchControl;
+            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _q !== void 0 ? _q : SwitchControl_1.SwitchControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'choice': {
-            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _q !== void 0 ? _q : SelectControl_1.default;
+            const Control = (_r = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _r !== void 0 ? _r : SelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'choices': {
-            const Control = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _r !== void 0 ? _r : MultiSelectControl_1.default;
+            const Control = (_s = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _s !== void 0 ? _s : MultiSelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'attachments': {
-            const Control = (_s = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _s !== void 0 ? _s : AttachmentsControl_1.AttachmentsControl;
+            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _t !== void 0 ? _t : AttachmentsControl_1.AttachmentsControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {

package/form/controls/CurrencyControl.js

@@ -4,18 +4,48 @@ exports.CurrencyControl = CurrencyControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
+const react_1 = require("react");
 function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
 readOnly, }) {
-    var _a;
     const symbol = (0, locale_1.useCurrencySymbol)();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
-        // invalid={error}
-        // icon={<div>₹</div>}
-        // startDecorator={<div>₹</div>}
-        contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
+    const internalValueRef = (0, react_1.useRef)(internalValue);
+    internalValueRef.current = internalValue;
+    (0, react_1.useEffect)(() => {
+        let _value = '';
+        if (typeof value === 'number') {
+            _value = value.toString();
+        }
+        if (!_value && internalValueRef.current === '-') {
+            return;
+        }
+        if (internalValueRef.current !== _value) {
+            setInternalValue(_value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        if (!value) {
+            setInternalValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        setInternalValue(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
             width: '100%',
         } }));
 }

package/form/controls/RichTextControl.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface RichTextControlProps extends ControlProps<string> {
+}
+export declare const RichTextControl: FC<RichTextControlProps>;

package/form/controls/RichTextControl.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
+const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
+};
+exports.RichTextControl = RichTextControl;

package/form/controls/SwitchControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface SwitchControlProps extends ControlProps<boolean> {
 }
-export declare function SwitchControl({}: SwitchControlProps): null;
+export declare function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }: SwitchControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/SwitchControl.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
-function SwitchControl({}) {
-    return null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Switch, { checked: value !== null && value !== void 0 ? value : false, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked), id: id, name: name, disabled: disabled, readOnly: readOnly, onBlur: onBlur, onFocus: onFocus }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.26",
+  "version": "0.0.17-alpha.27",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -17,10 +17,10 @@
     "url": "https://github.com/headless-adminapp/adminapp/issues"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && sass src/styles/index.scss dist/styles.css --no-source-map",
     "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
     "ts-check": "tsc --noEmit",
-    "copy-files": "cp package.json dist && cp src/index.css dist",
+    "copy-files": "cp package.json dist",
     "prepublishOnly": "pnpm run build && pnpm run copy-files",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -42,8 +42,10 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
+    "react-quill": "^2.0.0",
+    "sass": "1.81.0",
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "038654b9eb117468f483652a99089cd92764d9d0"
+  "gitHead": "249b7141dedc93a334d3d918d134bd167cecd6ae"
 }

package/styles.css

@@ -0,0 +1,100 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.TextControl_readonly:after {
+  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
+}
+
+.FormBody_scrollview > div {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacingVerticalM);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.fui-MenuItem__icon > svg,
+.fui-Button__icon > svg {
+  width: inherit;
+  height: inherit;
+}
+
+.hdlapp_rte {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--colorNeutralBackground3);
+  overflow: hidden;
+  border-radius: var(--borderRadiusMedium);
+  border: 1px solid transparent;
+}
+.hdlapp_rte:focus-within {
+  border-color: var(--colorNeutralForeground2BrandSelected);
+}
+.hdlapp_rte .ql-snow .ql-picker {
+  color: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow .ql-stroke {
+  stroke: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar {
+  border: none;
+}
+.hdlapp_rte .ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 1px solid var(--colorNeutralBackground1Hover);
+}
+.hdlapp_rte .ql-container.ql-snow {
+  border: none;
+}

package/index.css

@@ -1,27 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-.TextControl_readonly:after {
-  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
-}
-
-.FormBody_scrollview > div {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacingVerticalM);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-.fui-MenuItem__icon > svg,
-.fui-Button__icon > svg {
-  width: inherit;
-  height: inherit;
-}