npm - @apexcura/ui-components - Versions diffs - 0.0.7-Beta1 → 0.0.7-Beta10 - Mend

@apexcura/ui-components 0.0.7-Beta1 → 0.0.7-Beta10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | undefined;
+    value?: string | number | boolean | any[];
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -16,13 +16,16 @@ type ElementType = {
     name?: string;
     suffix?: React.ReactNode;
     maxLength?: number;
+    fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
+    options: any[];
+    onFocusHandler: () => void;
 };
-interface ElementExecuterProps$2 extends ElementType {
+interface ElementExecuterProps$3 extends ElementType {
     onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
+declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 interface InputData {
     placeholder?: string;
@@ -36,24 +39,31 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
-interface ElementExecuterProps$1 extends ElementType {
+interface ElementExecuterProps$2 extends ElementType {
     onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
+declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
-interface ElementExecuterProps extends ElementType {
+interface ElementExecuterProps$1 extends ElementType {
     onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
+declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
-declare const RadioElement: (props: ElementType) => void;
+declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
 declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
-declare const CkEditor: React$1.FC;
+interface ElementExecuterProps extends ElementType {
+    onChange: (value: string | number | boolean | any[]) => void;
+}
+declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
+declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
+declare const MultipleSelectElement: () => React$1.JSX.Element;
 declare const ButtonElement: () => React$1.JSX.Element;
-export { ButtonElement, CheckboxElement, CkEditor, NumberElement, PasswordElement, RadioElement, SelectElement, TextElement, TextareaElement };
+export { ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | undefined;
+    value?: string | number | boolean | any[];
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -16,13 +16,16 @@ type ElementType = {
     name?: string;
     suffix?: React.ReactNode;
     maxLength?: number;
+    fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
+    options: any[];
+    onFocusHandler: () => void;
 };
-interface ElementExecuterProps$2 extends ElementType {
+interface ElementExecuterProps$3 extends ElementType {
     onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
+declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 interface InputData {
     placeholder?: string;
@@ -36,24 +39,31 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
-interface ElementExecuterProps$1 extends ElementType {
+interface ElementExecuterProps$2 extends ElementType {
     onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
+declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
-interface ElementExecuterProps extends ElementType {
+interface ElementExecuterProps$1 extends ElementType {
     onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
+declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
-declare const RadioElement: (props: ElementType) => void;
+declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
 declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
-declare const CkEditor: React$1.FC;
+interface ElementExecuterProps extends ElementType {
+    onChange: (value: string | number | boolean | any[]) => void;
+}
+declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
+declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
+declare const MultipleSelectElement: () => React$1.JSX.Element;
 declare const ButtonElement: () => React$1.JSX.Element;
-export { ButtonElement, CheckboxElement, CkEditor, NumberElement, PasswordElement, RadioElement, SelectElement, TextElement, TextareaElement };
+export { ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.js CHANGED Viewed

@@ -33,10 +33,12 @@ __export(src_exports, {
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
   CkEditor: () => CkEditor,
+  MultipleSelectElement: () => MultipleSelectElement,
   NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  SingleSelectElement: () => SingleSelectElement,
   TextElement: () => TextElement,
   TextareaElement: () => TextareaElement
 });
@@ -149,11 +151,6 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
-var options = [
-  { label: "female", value: "female" },
-  { label: "male", value: "male" },
-  { label: "other", value: "other" }
-];
 var labelRender = (props) => {
   const { label, value } = props;
   if (label) {
@@ -162,7 +159,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -171,7 +168,7 @@ var SelectElement = (props) => {
     import_antd5.Select,
     {
       labelRender,
-      options,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -181,7 +178,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
@@ -190,12 +187,12 @@ var SelectElement = (props) => {
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
 var RadioElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange3 = (e) => {
     if (props && props.onChange) {
       props.onChange(e.target.value);
     }
   };
-  /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange3 }, "D"));
 };
 // src/Components/Checkbox.tsx
@@ -207,17 +204,17 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
-  const handleChange = (list) => {
+  const handleChange3 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
-      props.onChange(checkedList);
+      props.onChange(list);
     }
   };
   const onHandleAllChanges = (e) => {
-    setCheckedList(e.target.checked ? plainOptions : []);
+    const newList = e.target.checked ? plainOptions : [];
+    setCheckedList(newList);
     if (props.onChange) {
-      props.onChange(checkedList);
+      props.onChange(newList);
     }
   };
   return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
@@ -227,7 +224,6 @@ var CheckboxElement = (props) => {
       id: props.name,
       style: props.styles,
       className: props.classNames,
-      indeterminate,
       onChange: onHandleAllChanges,
       checked: checkAll
     },
@@ -240,7 +236,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange3
     }
   ));
 };
@@ -249,17 +245,20 @@ var CheckboxElement = (props) => {
 var import_react8 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_react9 = __toESM(require("react"));
-var CkEditor = () => {
+var CkEditor = (props) => {
   const editorRef = (0, import_react8.useRef)(null);
   const log = () => {
     if (editorRef.current) {
-      console.log(editorRef.current.getContent());
+      let content = editorRef.current.getContent();
+      if (props.onChange) {
+        props.onChange(content);
+      }
     }
   };
   return /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement(
     import_tinymce_react.Editor,
     {
-      apiKey: "your-api-key",
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
         if (editor)
           editorRef.current = editor;
@@ -295,19 +294,93 @@ var CkEditor = () => {
   ), /* @__PURE__ */ import_react9.default.createElement("button", { onClick: log }, "Log editor content"));
 };
-// src/Components/Button.tsx
+// src/Components/Select/SingleSelectElement.tsx
 var import_react10 = __toESM(require("react"));
 var import_antd8 = require("antd");
-var ButtonElement = () => /* @__PURE__ */ import_react10.default.createElement(import_antd8.Flex, { gap: "small" }, /* @__PURE__ */ import_react10.default.createElement(import_antd8.Button, { type: "primary" }, "Primary Button"));
+var onSearch = (value) => {
+  console.log("search:", value);
+};
+var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
+var SingleSelectElement = (props) => {
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_antd8.Select,
+    {
+      showSearch: true,
+      placeholder: props.placeholder,
+      optionFilterProp: "children",
+      onChange: handleChange,
+      onSearch,
+      filterOption,
+      onFocus: props.onFocusHandler,
+      options: props.options
+    }
+  );
+};
+// src/Components/Select/MultipleSelectElement.tsx
+var import_react11 = __toESM(require("react"));
+var import_antd9 = require("antd");
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_antd9.Select,
+    {
+      mode: "multiple",
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ import_react11.default.createElement(import_antd9.Space, null, /* @__PURE__ */ import_react11.default.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
+    }
+  );
+};
+// src/Components/Button.tsx
+var import_react12 = __toESM(require("react"));
+var import_antd10 = require("antd");
+var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, { gap: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { type: "primary" }, "Primary Button"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButtonElement,
   CheckboxElement,
   CkEditor,
+  MultipleSelectElement,
   NumberElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  SingleSelectElement,
   TextElement,
   TextareaElement
 });

package/dist/index.mjs CHANGED Viewed

@@ -105,11 +105,6 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 import React5 from "react";
 import { Select } from "antd";
-var options = [
-  { label: "female", value: "female" },
-  { label: "male", value: "male" },
-  { label: "other", value: "other" }
-];
 var labelRender = (props) => {
   const { label, value } = props;
   if (label) {
@@ -118,7 +113,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ React5.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -127,7 +122,7 @@ var SelectElement = (props) => {
     Select,
     {
       labelRender,
-      options,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -137,7 +132,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
@@ -146,12 +141,12 @@ var SelectElement = (props) => {
 import React6 from "react";
 import { Radio } from "antd";
 var RadioElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange3 = (e) => {
     if (props && props.onChange) {
       props.onChange(e.target.value);
     }
   };
-  /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange3 }, "D"));
 };
 // src/Components/Checkbox.tsx
@@ -163,17 +158,17 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState2(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
-  const handleChange = (list) => {
+  const handleChange3 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
-      props.onChange(checkedList);
+      props.onChange(list);
     }
   };
   const onHandleAllChanges = (e) => {
-    setCheckedList(e.target.checked ? plainOptions : []);
+    const newList = e.target.checked ? plainOptions : [];
+    setCheckedList(newList);
     if (props.onChange) {
-      props.onChange(checkedList);
+      props.onChange(newList);
     }
   };
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
@@ -183,7 +178,6 @@ var CheckboxElement = (props) => {
       id: props.name,
       style: props.styles,
       className: props.classNames,
-      indeterminate,
       onChange: onHandleAllChanges,
       checked: checkAll
     },
@@ -196,7 +190,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange3
     }
   ));
 };
@@ -205,17 +199,20 @@ var CheckboxElement = (props) => {
 import { useRef } from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import React8 from "react";
-var CkEditor = () => {
+var CkEditor = (props) => {
   const editorRef = useRef(null);
   const log = () => {
     if (editorRef.current) {
-      console.log(editorRef.current.getContent());
+      let content = editorRef.current.getContent();
+      if (props.onChange) {
+        props.onChange(content);
+      }
     }
   };
   return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
     Editor,
     {
-      apiKey: "your-api-key",
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
         if (editor)
           editorRef.current = editor;
@@ -251,18 +248,92 @@ var CkEditor = () => {
   ), /* @__PURE__ */ React8.createElement("button", { onClick: log }, "Log editor content"));
 };
-// src/Components/Button.tsx
+// src/Components/Select/SingleSelectElement.tsx
 import React9 from "react";
+import { Select as Select2 } from "antd";
+var onSearch = (value) => {
+  console.log("search:", value);
+};
+var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
+var SingleSelectElement = (props) => {
+  return /* @__PURE__ */ React9.createElement(
+    Select2,
+    {
+      showSearch: true,
+      placeholder: props.placeholder,
+      optionFilterProp: "children",
+      onChange: handleChange,
+      onSearch,
+      filterOption,
+      onFocus: props.onFocusHandler,
+      options: props.options
+    }
+  );
+};
+// src/Components/Select/MultipleSelectElement.tsx
+import React10 from "react";
+import { Select as Select3, Space as Space2 } from "antd";
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
+  return /* @__PURE__ */ React10.createElement(
+    Select3,
+    {
+      mode: "multiple",
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ React10.createElement(Space2, null, /* @__PURE__ */ React10.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
+    }
+  );
+};
+// src/Components/Button.tsx
+import React11 from "react";
 import { Button as Button2, Flex as Flex2 } from "antd";
-var ButtonElement = () => /* @__PURE__ */ React9.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React9.createElement(Button2, { type: "primary" }, "Primary Button"));
+var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
 export {
   ButtonElement,
   CheckboxElement,
   CkEditor,
+  MultipleSelectElement,
   NumberElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  SingleSelectElement,
   TextElement,
   TextareaElement
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.7-Beta1",
+  "version": "0.0.7-Beta10",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",