@react-querybuilder/bulma - npm Package Compare versions

Comparing version 4.1.3 to 4.2.0

dist/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var _=Object.defineProperty,T=Object.defineProperties;var j=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var g=(e,t,l)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,k=(e,t)=>{for(var l in t||(t={}))y.call(t,l)&&g(e,l,t[l]);if(s)for(var l of s(t))b.call(t,l)&&g(e,l,t[l]);return e},B=(e,t)=>T(e,j(t));var N=(e,t)=>{var l={};for(var a in e)y.call(e,a)&&t.indexOf(a)<0&&(l[a]=e[a]);if(e!=null&&s)for(var a of s(e))t.indexOf(a)<0&&b.call(e,a)&&(l[a]=e[a]);return l};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var h=require("react");function C(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var n=C(h);const x=({className:e,handleOnClick:t,label:l,title:a,disabled:c})=>n.default.createElement("button",{className:`${e} button is-small`,title:a,onClick:u=>t(u),disabled:c},l);x.displayName="BulmaActionElement";const A=({className:e,handleOnChange:t,label:l,checked:a,title:c,disabled:u})=>n.default.createElement("label",{className:`${e} checkbox`,title:c},n.default.createElement("input",{type:"checkbox",disabled:u,checked:a,onChange:m=>t(m.target.checked)}),l);A.displayName="BulmaNotToggle";const I=e=>Array.isArray(e)&&e.length>0&&"options"in e[0],M=e=>I(e)?e.map(t=>n.default.createElement("optgroup",{key:t.label,label:t.label},t.options.map(l=>n.default.createElement("option",{key:l.name,value:l.name},l.label)))):Array.isArray(e)?e.map(t=>n.default.createElement("option",{key:t.name,value:t.name},t.label)):null,d=({className:e,handleOnChange:t,options:l,value:a,title:c,disabled:u})=>n.default.createElement("div",{title:c,className:`${e} select is-small`},n.default.createElement("select",{value:a,disabled:u,onChange:m=>t(m.target.value)},M(l)));d.displayName="BulmaValueSelector";const V=R=>{var p=R,{fieldData:e,operator:t,value:l,handleOnChange:a,title:c,className:u,type:m,inputType:i,values:f,disabled:r}=p,$=N(p,["fieldData","operator","value","handleOnChange","title","className","type","inputType","values","disabled"]);var E;if(h.useEffect(()=>{i==="number"&&!["between","notBetween","in","notIn"].includes(t)&&typeof l=="string"&&l.includes(",")&&a("")},[i,t,l,a]),t==="null"||t==="notNull")return null;const w=(E=e==null?void 0:e.placeholder)!=null?E:"",S=["between","notBetween","in","notIn"].includes(t)?"text":i||"text";switch(m){case"select":return n.default.createElement(d,B(k({},$),{title:c,className:u,handleOnChange:a,options:f,value:l,disabled:r}));case"checkbox":return n.default.createElement("label",{title:c,className:`${u} checkbox`},n.default.createElement("input",{type:"checkbox",checked:!!l,disabled:r,onChange:o=>a(o.target.checked)}));case"radio":return n.default.createElement("div",{className:`${u} control`,title:c},f.map(o=>n.default.createElement("label",{key:o.name,className:"radio"},n.default.createElement("input",{type:"radio",value:o.name,checked:l===o.name,onChange:()=>a(o.name),disabled:r}),o.label)));default:return n.default.createElement("div",{className:`${u} control`},n.default.createElement("input",{type:S,value:l,title:c,disabled:r,className:"input is-small",placeholder:w,onChange:o=>a(o.target.value)}))}};V.displayName="BulmaValueEditor";exports.BulmaActionElement=x;exports.BulmaNotToggle=A;exports.BulmaValueEditor=V;exports.BulmaValueSelector=d;
+"use strict";var h=Object.defineProperty,v=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var x=(e,t,l)=>t in e?h(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,S=(e,t)=>{for(var l in t||(t={}))B.call(t,l)&&x(e,l,t[l]);if(E)for(var l of E(t))N.call(t,l)&&x(e,l,t[l]);return e},$=(e,t)=>v(e,G(t));var w=(e,t)=>{var l={};for(var c in e)B.call(e,c)&&t.indexOf(c)<0&&(l[c]=e[c]);if(e!=null&&E)for(var c of E(e))t.indexOf(c)<0&&N.call(e,c)&&(l[c]=e[c]);return l};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var d=require("react");function _(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var o=_(d);const m=({className:e,handleOnClick:t,label:l,title:c,disabled:n,disabledTranslation:a})=>o.default.createElement("button",{type:"button",className:`${e} button is-small`,title:a&&n?a.title:c,onClick:u=>t(u),disabled:n&&!a},a&&n?a.label:l);m.displayName="BulmaActionElement";const y=({className:e,handleOnChange:t,label:l,checked:c,title:n,disabled:a})=>o.default.createElement("label",{className:`${e} checkbox`,title:n},o.default.createElement("input",{type:"checkbox",disabled:a,checked:c,onChange:u=>t(u.target.checked)}),l);y.displayName="BulmaNotToggle";const j=e=>Array.isArray(e)&&e.length>0&&"options"in e[0],M=e=>j(e)?e.map(t=>o.default.createElement("optgroup",{key:t.label,label:t.label},t.options.map(l=>o.default.createElement("option",{key:l.name,value:l.name},l.label)))):Array.isArray(e)?e.map(t=>o.default.createElement("option",{key:t.name,value:t.name},t.label)):null,i=({className:e,handleOnChange:t,options:l,value:c,title:n,disabled:a,multiple:u})=>{const f=d.useMemo(()=>u?p=>t([...p.target.options].filter(s=>s.selected).map(s=>s.value).join(",")):p=>t(p.target.value),[t,u]);return o.default.createElement("div",{title:n,className:`${e} select is-small`},o.default.createElement("select",{value:u&&c?c.split(","):c,multiple:!!u,disabled:a,onChange:f},M(l)))};i.displayName="BulmaValueSelector";const b=I=>{var g=I,{fieldData:e,operator:t,value:l,handleOnChange:c,title:n,className:a,type:u,inputType:f,values:p,disabled:s}=g,R=w(g,["fieldData","operator","value","handleOnChange","title","className","type","inputType","values","disabled"]);var A;if(d.useEffect(()=>{f==="number"&&!["between","notBetween","in","notIn"].includes(t)&&typeof l=="string"&&l.includes(",")&&c("")},[f,t,l,c]),t==="null"||t==="notNull")return null;const k=(A=e==null?void 0:e.placeholder)!=null?A:"",V=["between","notBetween","in","notIn"].includes(t)?"text":f||"text";switch(u){case"select":case"multiselect":return o.default.createElement(i,$(S({},R),{title:n,className:a,handleOnChange:c,options:p,value:l,disabled:s,multiple:u==="multiselect"}));case"textarea":return o.default.createElement("div",{className:`${a} control`},o.default.createElement("textarea",{value:l,title:n,disabled:s,className:"textarea",placeholder:k,onChange:r=>c(r.target.value)}));case"switch":case"checkbox":return o.default.createElement("label",{title:n,className:`${a} checkbox`},o.default.createElement("input",{type:"checkbox",checked:!!l,disabled:s,onChange:r=>c(r.target.checked)}));case"radio":return o.default.createElement("div",{className:`${a} control`,title:n},p.map(r=>o.default.createElement("label",{key:r.name,className:"radio"},o.default.createElement("input",{type:"radio",value:r.name,checked:l===r.name,onChange:()=>c(r.name),disabled:s}),r.label)))}return o.default.createElement("div",{className:`${a} control`},o.default.createElement("input",{type:V,value:l,title:n,disabled:s,className:"input is-small",placeholder:k,onChange:r=>c(r.target.value)}))};b.displayName="BulmaValueEditor";const C={notToggle:y,valueEditor:b,addGroupAction:m,addRuleAction:m,cloneGroupAction:m,cloneRuleAction:m,combinatorSelector:i,fieldSelector:i,operatorSelector:i,lockRuleAction:m,lockGroupAction:m,removeGroupAction:m,removeRuleAction:m,valueSourceSelector:i};exports.BulmaActionElement=m;exports.BulmaNotToggle=y;exports.BulmaValueEditor=b;exports.BulmaValueSelector=i;exports.bulmaControlElements=C;

dist/index.es.js

@@ -32,3 +32,3 @@ var __defProp = Object.defineProperty;
 };
-import React, { useEffect } from "react";
+import React, { useMemo, useEffect } from "react";
 const BulmaActionElement = ({
@@ -39,9 +39,11 @@ className,
   title,
-  disabled
+  disabled,
+  disabledTranslation
 }) => /* @__PURE__ */ React.createElement("button", {
+  type: "button",
   className: `${className} button is-small`,
-  title,
+  title: disabledTranslation && disabled ? disabledTranslation.title : title,
   onClick: (e) => handleOnClick(e),
-  disabled
-}, label);
+  disabled: disabled && !disabledTranslation
+}, disabledTranslation && disabled ? disabledTranslation.label : label);
 BulmaActionElement.displayName = "BulmaActionElement";
@@ -82,11 +84,21 @@ const BulmaNotToggle = ({
   title,
-  disabled
-}) => /* @__PURE__ */ React.createElement("div", {
-  title,
-  className: `${className} select is-small`
-}, /* @__PURE__ */ React.createElement("select", {
-  value,
   disabled,
-  onChange: (e) => handleOnChange(e.target.value)
-}, toOptions(options)));
+  multiple
+}) => {
+  const onChange = useMemo(() => {
+    if (multiple) {
+      return (e) => handleOnChange([...e.target.options].filter((o) => o.selected).map((o) => o.value).join(","));
+    }
+    return (e) => handleOnChange(e.target.value);
+  }, [handleOnChange, multiple]);
+  return /* @__PURE__ */ React.createElement("div", {
+    title,
+    className: `${className} select is-small`
+  }, /* @__PURE__ */ React.createElement("select", {
+    value: multiple && value ? value.split(",") : value,
+    multiple: !!multiple,
+    disabled,
+    onChange
+  }, toOptions(options)));
+};
 BulmaValueSelector.displayName = "BulmaValueSelector";
@@ -130,2 +142,3 @@ const BulmaValueEditor = (_a) => {
     case "select":
+    case "multiselect":
       return /* @__PURE__ */ React.createElement(BulmaValueSelector, __spreadProps(__spreadValues({}, props), {
@@ -137,4 +150,17 @@ title,
         value,
-        disabled
+        disabled,
+        multiple: type === "multiselect"
       }));
+    case "textarea":
+      return /* @__PURE__ */ React.createElement("div", {
+        className: `${className} control`
+      }, /* @__PURE__ */ React.createElement("textarea", {
+        value,
+        title,
+        disabled,
+        className: "textarea",
+        placeholder: placeHolderText,
+        onChange: (e) => handleOnChange(e.target.value)
+      }));
+    case "switch":
     case "checkbox":
@@ -164,17 +190,32 @@ return /* @__PURE__ */ React.createElement("label", {
       }), v.label)));
-    default:
-      return /* @__PURE__ */ React.createElement("div", {
-        className: `${className} control`
-      }, /* @__PURE__ */ React.createElement("input", {
-        type: inputTypeCoerced,
-        value,
-        title,
-        disabled,
-        className: "input is-small",
-        placeholder: placeHolderText,
-        onChange: (e) => handleOnChange(e.target.value)
-      }));
   }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `${className} control`
+  }, /* @__PURE__ */ React.createElement("input", {
+    type: inputTypeCoerced,
+    value,
+    title,
+    disabled,
+    className: "input is-small",
+    placeholder: placeHolderText,
+    onChange: (e) => handleOnChange(e.target.value)
+  }));
 };
 BulmaValueEditor.displayName = "BulmaValueEditor";
-export { BulmaActionElement, BulmaNotToggle, BulmaValueEditor, BulmaValueSelector };
+const bulmaControlElements = {
+  notToggle: BulmaNotToggle,
+  valueEditor: BulmaValueEditor,
+  addGroupAction: BulmaActionElement,
+  addRuleAction: BulmaActionElement,
+  cloneGroupAction: BulmaActionElement,
+  cloneRuleAction: BulmaActionElement,
+  combinatorSelector: BulmaValueSelector,
+  fieldSelector: BulmaValueSelector,
+  operatorSelector: BulmaValueSelector,
+  lockRuleAction: BulmaActionElement,
+  lockGroupAction: BulmaActionElement,
+  removeGroupAction: BulmaActionElement,
+  removeRuleAction: BulmaActionElement,
+  valueSourceSelector: BulmaValueSelector
+};
+export { BulmaActionElement, BulmaNotToggle, BulmaValueEditor, BulmaValueSelector, bulmaControlElements };

dist/types/BulmaActionElement.d.ts

 /// <reference types="react" />
 import type { ActionProps } from 'react-querybuilder';
 export declare const BulmaActionElement: {
-    ({ className, handleOnClick, label, title, disabled, }: ActionProps): JSX.Element;
+    ({ className, handleOnClick, label, title, disabled, disabledTranslation, }: ActionProps): JSX.Element;
     displayName: string;
 };

dist/types/BulmaValueSelector.d.ts

 /// <reference types="react" />
 import type { ValueSelectorProps } from 'react-querybuilder';
 export declare const BulmaValueSelector: {
-    ({ className, handleOnChange, options, value, title, disabled, }: ValueSelectorProps): JSX.Element;
+    ({ className, handleOnChange, options, value, title, disabled, multiple, }: ValueSelectorProps): JSX.Element;
     displayName: string;
 };

dist/types/index.d.ts

@@ -1,4 +0,7 @@
-export { BulmaActionElement } from './BulmaActionElement';
-export { BulmaNotToggle } from './BulmaNotToggle';
-export { BulmaValueEditor } from './BulmaValueEditor';
-export { BulmaValueSelector } from './BulmaValueSelector';
+import type { Controls } from 'react-querybuilder';
+import { BulmaActionElement } from './BulmaActionElement';
+import { BulmaNotToggle } from './BulmaNotToggle';
+import { BulmaValueEditor } from './BulmaValueEditor';
+import { BulmaValueSelector } from './BulmaValueSelector';
+export declare const bulmaControlElements: Partial<Controls>;
+export { BulmaActionElement, BulmaNotToggle, BulmaValueEditor, BulmaValueSelector };

package.json

 {
   "name": "@react-querybuilder/bulma",
   "description": "Custom Bulma components for react-querybuilder",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "publishConfig": {
@@ -16,3 +16,4 @@ "access": "public"
     "type": "git",
-    "url": "https://github.com/react-querybuilder/react-querybuilder"
+    "url": "https://github.com/react-querybuilder/react-querybuilder.git",
+    "directory": "packages/bulma"
   },
@@ -29,3 +30,3 @@ "license": "MIT",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.1.3",
+    "react-querybuilder": "^4.2.0",
     "typescript": "^4.5.0"
@@ -38,3 +39,3 @@ },
   },
-  "gitHead": "2d472fc8c1b9fea5d209135ee0d2774120f566da"
+  "gitHead": "eac79b859bfd36754f0fa4d72f55bb959357dc5d"
 }

README.md

 ## @react-querybuilder/bulma
 
-Official [Bulma](https://bulma.io/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
+Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [Bulma](https://bulma.io/).
 
@@ -19,8 +19,3 @@ To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/react-querybuilder/) and choose "Bulma" from the Style drop-down.
 import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
-import {
-  BulmaActionElement,
-  BulmaNotToggle,
-  BulmaValueEditor,
-  BulmaValueSelector,
-} from '@react-querybuilder/bulma';
+import { bulmaControlElements } from '@react-querybuilder/bulma';
 import 'bulma/bulma.sass';
@@ -41,15 +36,3 @@
       onQueryChange={q => setQuery(q)}
-      controlElements={{
-        addGroupAction: BulmaActionElement,
-        addRuleAction: BulmaActionElement,
-        cloneGroupAction: BulmaActionElement,
-        cloneRuleAction: BulmaActionElement,
-        combinatorSelector: BulmaValueSelector,
-        fieldSelector: BulmaValueSelector,
-        notToggle: BulmaNotToggle,
-        operatorSelector: BulmaValueSelector,
-        removeGroupAction: BulmaActionElement,
-        removeRuleAction: BulmaActionElement,
-        valueEditor: BulmaValueEditor,
-      }}
+      controlElements={bulmaControlElements}
     />
@@ -56,0 +39,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

16416

14.21%

Lines of code

268

21.27%

Worsened metrics

Number of lines in readme file

48

-26.15%

No dependency changes