amotify 0.1.30 → 0.1.32

package/dist/fn/Input/Chips/_.js

@@ -1 +1,349 @@
-import{b as u,c as h,d as N}from"../../../chunk-VY3566IV.js";import{jsx as a,jsxs as b}from"react/jsx-runtime";import{useState as v,useEffect as L,useRef as H}from"react";import{$$ as B,$$fromRoot as T}from"../../../@utils/_";import Q from"../../../atoms/Box";import P from"../../../atoms/FAI";import X from"../../../mols/Row";import U from"../../Button";import Y from"../../Sheet";import{Wrapper as Z,BoxWrapper as j,CommonEffects as ee,DefaultStyles as te}from"../core";import ne from"../Hidden";import W from"./Selector";function oe(e){let{value:r,params:c}=e,{required:o}=c,s=[];return o&&!r.length&&s.push({type:"invalid",label:"\u4E00\u3064\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),{ok:!s.filter(({type:f})=>f=="invalid").length,notice:s}}const le=e=>{let $=e,{required:r,form:c,name:o,checkValidationAtFirst:s,onValidate:f,onUpdateValue:O,onUpdateValidValue:M,value:F=[],limit:A,leftIndicator:ie,rightIndicator:pe,leftIcon:ue,rightIcon:re,SelectedCellComponent:g,AddButtonComponent:x,componentID:ce,defaultOptions:se,enableFormSubmit:de}=$,q=N($,["required","form","name","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","limit","leftIndicator","rightIndicator","leftIcon","rightIcon","SelectedCellComponent","AddButtonComponent","componentID","defaultOptions","enableFormSubmit"]);x=x;let[p]=v(B.uuid.gen()),[d,R]=v({componentID:e.componentID||"",dataValue:F.map(t=>t),eventID:B.uuid.gen(),eventType:"init"}),[D,z]=v({ok:!1,notice:[]}),[n,G]=v([...F]);ee({params:e,val_status:d,set_status:R,val_validate:D,set_validate:z,DefaultValidation:oe,onUpdateValue:O,onUpdateValidValue:M,ExtraOverrideParams:{formatValue:n,dataValue:n.map(t=>t)},ExtraStoreParams:{searchTimer:null}});const C=t=>{G(t),R(h(u({},d),{dataValue:t.map(i=>i),eventID:B.uuid.gen(),eventType:"update"}))};let E=`[data-chips-input-wrapper="${p}"]`;const y=()=>{W.openSelector({parent:E,gravityPoint:e.selectorGravityPoint,SelectorCellComponent:e.SelectorCellComponent,selectorID:p,options:e.defaultOptions||[],selected:n,limit:e.limit,onDynamicSearch:e.onDynamicSearch,onUpdated:t=>{C(t.values)},onClosed:()=>{T(E).focus()}})};let I=A&&A<=n.length;const _=H(!1);L(()=>{_.current?I&&(Y.close(p),T(`[data-chips-input-wrapper="${p}"]`).focus()):_.current=!0},[n]);let J=n.map(t=>{let{value:i,label:k}=t;g=g;const S=()=>{let l=n.findIndex(w=>w.value==i);if(l==-1)return;let m=[...n];m.splice(l,1),C(m),m.length||setTimeout(()=>{T(`[data-chips-input-wrapper="${p}"]`).focus()},200)};return a(g,{value:i,label:k,removeCallback:S,defaultRemoveButton:a(U.Button.Sub.S,{flexSizing:"none",color:"cloud",backgroundColor:"cloud",flexCenter:!0,isRounded:!0,freeCSS:{aspectRatio:"1/1"},onClick:()=>{S()},children:a(P.Times,{})}),openCallback:()=>{y()}},JSON.stringify(i))});return b(j,{val_status:d,set_status:R,val_validate:D,params:e,children:[a(ne,{"data-value":JSON.stringify(d.dataValue.map(t=>t.value)),name:o,form:c,"data-input-type":"chips-"+["single","multi"][+(e.limit!=1)],"data-validation":D.ok,componentID:d.componentID,"data-focusor":p}),b("button",h(u({"data-chips-input-wrapper":p,onKeyDown:t=>{let{key:i,ctrlKey:k,metaKey:S,keyCode:l}=t,m=k||S;if(l>=48&&l<=57||l>=65&&l<=90||l>=96&&l<=105){if(I)return;y()}else if(i!="Tab"){if(i=="Backspace"){if(!n.length)return;if(m)C([]);else{let K=[...n];K.pop(),C(K)}}}},onClick:()=>{I||y()}},q),{children:[I?null:a(x,{selected:n,openCallback:y}),J]}))]})},ae=e=>{let c=[...e.value||[]].splice(0,e.limit||65535);return a(le,h(u({SelectedCellComponent:o=>{let{value:s,label:f,removeCallback:O}=o;return b(X.Left,{ssCardBox:!0,padding:"1/3",gap:0,isRounded:!0,textAlign:"left",children:[a(Q,{padding:[0,"1/2"],children:f}),o.defaultRemoveButton]})},AddButtonComponent:o=>e.limit&&e.limit<=o.selected.length?null:b(U.Button.Sub.R,{color:"cloud",padding:"1/2",onClick:()=>{o.openCallback()},children:[a(P.Plus,{}),"\u8FFD\u52A0\u3059\u308B"]})},e),{value:c}))},V=e=>{e=u({},e),e=u({gap:1,display:"flex",horizontalAlign:"left",verticalAlign:"center",flexWrap:!0},e);let r=te.Boxish(e);return a(Z,{componentID:e.componentID,children:ae,params:r})};V.fn=W;export{V as Chips,V as default};
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-JJ3PEWPN.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useRef
+} from "react";
+import {
+  $$,
+  $$fromRoot
+} from "../../../@utils/_";
+import Box from "../../../atoms/Box";
+import FAI from "../../../atoms/FAI";
+import Row from "../../../mols/Row";
+import Button from "../../Button";
+import Sheet from "../../Sheet";
+import {
+  Wrapper,
+  BoxWrapper,
+  CommonEffects,
+  DefaultStyles
+} from "../core";
+import Hidden from "../Hidden";
+import Selector from "./Selector";
+function DefaultValidation(props) {
+  let {
+    value,
+    params
+  } = props;
+  let {
+    required
+  } = params;
+  let notice = [];
+  if (required && !value.length) {
+    notice.push({ type: "invalid", label: "\u4E00\u3064\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044" });
+  }
+  return {
+    ok: !notice.filter(({ type }) => type == "invalid").length,
+    notice
+  };
+}
+const Core = (params) => {
+  let _a = params, {
+    required,
+    form,
+    name,
+    checkValidationAtFirst,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    value = [],
+    limit,
+    leftIndicator,
+    rightIndicator,
+    leftIcon,
+    rightIcon,
+    SelectedCellComponent,
+    AddButtonComponent,
+    componentID,
+    defaultOptions,
+    enableFormSubmit,
+    onDynamicSearch
+  } = _a, others = __objRest(_a, [
+    "required",
+    "form",
+    "name",
+    "checkValidationAtFirst",
+    "onValidate",
+    "onUpdateValue",
+    "onUpdateValidValue",
+    "value",
+    "limit",
+    "leftIndicator",
+    "rightIndicator",
+    "leftIcon",
+    "rightIcon",
+    "SelectedCellComponent",
+    "AddButtonComponent",
+    "componentID",
+    "defaultOptions",
+    "enableFormSubmit",
+    "onDynamicSearch"
+  ]);
+  AddButtonComponent = AddButtonComponent;
+  let [val_selectorID] = useState($$.uuid.gen());
+  let [val_status, set_status] = useState({
+    componentID: params.componentID || "",
+    dataValue: value.map((val) => val),
+    eventID: $$.uuid.gen(),
+    eventType: "init"
+  });
+  let [val_validate, set_validate] = useState({
+    ok: false,
+    notice: []
+  });
+  let [val_selected, set_selected] = useState([...value]);
+  CommonEffects({
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    DefaultValidation,
+    onUpdateValue,
+    onUpdateValidValue,
+    ExtraOverrideParams: {
+      formatValue: val_selected,
+      dataValue: val_selected.map((val) => val)
+    },
+    ExtraStoreParams: {
+      searchTimer: null
+    }
+  });
+  const UpdateValue = (values) => {
+    set_selected(values);
+    set_status(__spreadProps(__spreadValues({}, val_status), {
+      dataValue: values.map((val) => val),
+      eventID: $$.uuid.gen(),
+      eventType: "update"
+    }));
+  };
+  let Query = `[data-chips-input-wrapper="${val_selectorID}"]`;
+  const OpenSelector = () => {
+    Selector.openSelector({
+      parent: Query,
+      gravityPoint: params.selectorGravityPoint,
+      SelectorCellComponent: params.SelectorCellComponent,
+      selectorID: val_selectorID,
+      options: params.defaultOptions || [],
+      selected: val_selected,
+      limit: params.limit,
+      onDynamicSearch: params.onDynamicSearch,
+      onUpdated: (args) => {
+        UpdateValue(args.values);
+      },
+      onClosed: () => {
+        $$fromRoot(Query).focus();
+      }
+    });
+  };
+  let isFully = limit && limit <= val_selected.length;
+  const mounted = useRef(false);
+  useEffect(() => {
+    if (mounted.current) {
+      if (isFully) {
+        Sheet.close(val_selectorID);
+        $$fromRoot(`[data-chips-input-wrapper="${val_selectorID}"]`).focus();
+      }
+    } else {
+      mounted.current = true;
+    }
+  }, [val_selected]);
+  let Selected = val_selected.map((s) => {
+    let { value: value2, label } = s;
+    SelectedCellComponent = SelectedCellComponent;
+    const removeCallback = () => {
+      let findIndex = val_selected.findIndex((v) => v.value == value2);
+      if (findIndex == -1)
+        return;
+      let newSelected = [...val_selected];
+      newSelected.splice(findIndex, 1);
+      UpdateValue(newSelected);
+      if (!newSelected.length) {
+        setTimeout(() => {
+          $$fromRoot(`[data-chips-input-wrapper="${val_selectorID}"]`).focus();
+        }, 200);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      SelectedCellComponent,
+      {
+        value: value2,
+        label,
+        removeCallback,
+        defaultRemoveButton: /* @__PURE__ */ jsx(
+          Button.Button.Sub.S,
+          {
+            flexSizing: "none",
+            color: "cloud",
+            backgroundColor: "cloud",
+            flexCenter: true,
+            isRounded: true,
+            freeCSS: {
+              aspectRatio: "1/1"
+            },
+            onClick: () => {
+              removeCallback();
+            },
+            children: /* @__PURE__ */ jsx(FAI.Times, {})
+          }
+        ),
+        openCallback: () => {
+          OpenSelector();
+        }
+      },
+      JSON.stringify(value2)
+    );
+  });
+  return /* @__PURE__ */ jsxs(
+    BoxWrapper,
+    {
+      val_status,
+      set_status,
+      val_validate,
+      params,
+      children: [
+        /* @__PURE__ */ jsx(
+          Hidden,
+          {
+            "data-value": JSON.stringify(val_status.dataValue.map((v) => v.value)),
+            name,
+            form,
+            "data-input-type": "chips-" + ["single", "multi"][Number(params.limit != 1)],
+            "data-validation": val_validate.ok,
+            componentID: val_status.componentID,
+            "data-focusor": val_selectorID
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          __spreadProps(__spreadValues({
+            "data-chips-input-wrapper": val_selectorID,
+            onKeyDown: (e) => {
+              let { key, ctrlKey, metaKey, keyCode } = e;
+              let auxKey = ctrlKey || metaKey;
+              let isString = keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90 || keyCode >= 96 && keyCode <= 105;
+              if (isString) {
+                if (isFully)
+                  return;
+                OpenSelector();
+              } else if (key == "Tab") {
+              } else if (key == "Backspace") {
+                if (!val_selected.length)
+                  return;
+                if (auxKey) {
+                  UpdateValue([]);
+                } else {
+                  let newSelected = [...val_selected];
+                  newSelected.pop();
+                  UpdateValue(newSelected);
+                }
+              }
+            },
+            onClick: () => {
+              if (isFully)
+                return;
+              OpenSelector();
+            }
+          }, others), {
+            children: [
+              !isFully && /* @__PURE__ */ jsx(
+                AddButtonComponent,
+                {
+                  selected: val_selected,
+                  openCallback: OpenSelector
+                }
+              ),
+              Selected
+            ]
+          })
+        )
+      ]
+    }
+  );
+};
+const ChipsInput = (params) => {
+  let DefaultValues = [...params.value || []];
+  let Values = DefaultValues.splice(0, params.limit || 65535);
+  return /* @__PURE__ */ jsx(
+    Core,
+    __spreadProps(__spreadValues({
+      SelectedCellComponent: (params2) => {
+        let {
+          value,
+          label,
+          removeCallback
+        } = params2;
+        return /* @__PURE__ */ jsxs(
+          Row.Left,
+          {
+            ssCardBox: true,
+            padding: "1/3",
+            gap: 0,
+            isRounded: true,
+            textAlign: "left",
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  padding: [0, "1/2"],
+                  children: label
+                }
+              ),
+              params2.defaultRemoveButton
+            ]
+          }
+        );
+      },
+      AddButtonComponent: (props) => {
+        if (params.limit && params.limit <= props.selected.length)
+          return null;
+        return /* @__PURE__ */ jsxs(
+          Button.Button.Sub.R,
+          {
+            color: "cloud",
+            padding: "1/2",
+            onClick: () => {
+              props.openCallback();
+            },
+            children: [
+              /* @__PURE__ */ jsx(FAI.Plus, {}),
+              "\u8FFD\u52A0\u3059\u308B"
+            ]
+          }
+        );
+      }
+    }, params), {
+      value: Values
+    })
+  );
+};
+const Chips = (rawParams) => {
+  rawParams = __spreadValues({}, rawParams);
+  rawParams = __spreadValues({
+    gap: 1,
+    display: "flex",
+    horizontalAlign: "left",
+    verticalAlign: "center",
+    flexWrap: true
+  }, rawParams);
+  let params = DefaultStyles.Boxish(rawParams);
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      componentID: rawParams.componentID,
+      children: ChipsInput,
+      params
+    }
+  );
+};
+Chips.fn = Selector;
+export {
+  Chips,
+  Chips as default
+};

package/dist/fn/Input/Contenteditable.d.ts

@@ -6,7 +6,7 @@ declare namespace Contenteditable {
         tone?: InputTypes.BoxTone;
         tabIndex?: number;
         id?: string;
-        children?: string;
+        children?: ReactElement;
         leftIndicator?: ReactElement | false;
         rightIndicator?: ReactElement | false;
         leftIcon?: ReactElement | false;

package/dist/fn/Input/Contenteditable.js

@@ -1 +1,160 @@
-import{b as n,c as u,d as y}from"../../chunk-VY3566IV.js";import{jsx as s}from"react/jsx-runtime";import{useState as T}from"react";import{$$ as h}from"../../@utils/_";import{Wrapper as x,BoxWrapper as _,SubmitForm as k,CommonEffects as L,DefaultStyles as F}from"./core";function B(t){let{value:e,params:o}=t,{required:i}=o,a=[];return i&&!e&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:c})=>c=="invalid").length,notice:a}}const H=t=>{let g=t,{componentID:e,tone:o,required:i,form:a,enableFormSubmit:c,checkValidationAtFirst:M,onInput:f,onKeyDown:I,onValidate:W,onUpdateValue:D,onUpdateValidValue:C,children:m="",leftIndicator:q,rightIndicator:A,leftIcon:K,rightIcon:U}=g,R=y(g,["componentID","tone","required","form","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","children","leftIndicator","rightIndicator","leftIcon","rightIcon"]),V={componentID:e,dataValue:m,eventType:"init",eventID:h.uuid.gen()},[l,r]=T(V),[d,v]=T({ok:!1,notice:[]});return L({params:t,val_status:l,set_status:r,val_validate:d,set_validate:v,onUpdateValue:D,onUpdateValidValue:C,DefaultValidation:B}),s(_,{val_status:l,set_status:r,val_validate:d,params:t,children:s("div",u(n({contentEditable:!0,"data-form":a,"data-name":t.name,"data-input-type":"contenteditable","data-validation":d.ok,"data-value":l.dataValue,"data-component-id":l.componentID,onKeyDown:p=>{I&&I(p),c&&k(p)},onInput:p=>{let S=p.currentTarget,{innerHTML:$,innerText:E}=S;d.ok&&v({ok:!1,notice:[]}),r(u(n({},l),{dataValue:E,eventType:"update",eventID:h.uuid.gen()})),f&&f(p)}},R),{children:m}))})},b=t=>{var o,i;t=n({},t),t.rightIcon&&(t.paddingRight=(o=t.paddingRight)!=null?o:3),t.leftIcon&&(t.paddingLeft=(i=t.paddingLeft)!=null?i:3),t=u(n({},t),{freeCSS:n({whiteSpace:"pre-wrap"},t.freeCSS)});let e=F.Boxish(t);return e.rows=e.rows||5,s(x,{componentID:t.componentID,children:H,params:e})};export{b as Contenteditable,b as default};
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-JJ3PEWPN.js";
+import { jsx } from "react/jsx-runtime";
+import {
+  useState
+} from "react";
+import {
+  $$
+} from "../../@utils/_";
+import {
+  Wrapper,
+  BoxWrapper,
+  SubmitForm,
+  CommonEffects,
+  DefaultStyles
+} from "./core";
+function DefaultValidation(props) {
+  let { value, params } = props;
+  let { required } = params;
+  let notice = [];
+  if (required && !value) {
+    notice.push({ type: "invalid", label: "\u5FC5\u9808\u9805\u76EE\u3067\u3059" });
+  }
+  return {
+    ok: !notice.filter(({ type }) => type == "invalid").length,
+    notice
+  };
+}
+const ContenteditableInput = (params) => {
+  let _a = params, {
+    componentID,
+    tone,
+    required,
+    form,
+    value,
+    enableFormSubmit,
+    checkValidationAtFirst,
+    onInput,
+    onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    children = "",
+    leftIndicator,
+    rightIndicator,
+    leftIcon,
+    rightIcon
+  } = _a, others = __objRest(_a, [
+    "componentID",
+    "tone",
+    "required",
+    "form",
+    "value",
+    "enableFormSubmit",
+    "checkValidationAtFirst",
+    "onInput",
+    "onKeyDown",
+    "onValidate",
+    "onUpdateValue",
+    "onUpdateValidValue",
+    "children",
+    "leftIndicator",
+    "rightIndicator",
+    "leftIcon",
+    "rightIcon"
+  ]);
+  let Default_Status = {
+    componentID,
+    dataValue: value,
+    eventType: "init",
+    eventID: $$.uuid.gen()
+  };
+  let [val_status, set_status] = useState(Default_Status);
+  let [val_validate, set_validate] = useState({
+    ok: false,
+    notice: []
+  });
+  CommonEffects({
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    onUpdateValue,
+    onUpdateValidValue,
+    DefaultValidation
+  });
+  return /* @__PURE__ */ jsx(
+    BoxWrapper,
+    {
+      val_status,
+      set_status,
+      val_validate,
+      params,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          contentEditable: true,
+          "data-form": form,
+          "data-name": params.name,
+          "data-input-type": "contenteditable",
+          "data-validation": val_validate.ok,
+          "data-value": val_status.dataValue,
+          "data-component-id": val_status.componentID,
+          onKeyDown: (event) => {
+            !!onKeyDown && onKeyDown(event);
+            !!enableFormSubmit && SubmitForm(event);
+          },
+          onInput: (event) => {
+            let contentEditor = event.currentTarget;
+            let {
+              innerHTML,
+              innerText
+            } = contentEditor;
+            if (val_validate.ok)
+              set_validate({ ok: false, notice: [] });
+            set_status(__spreadProps(__spreadValues({}, val_status), {
+              dataValue: innerText,
+              eventType: "update",
+              eventID: $$.uuid.gen()
+            }));
+            onInput && onInput(event);
+          }
+        }, others), {
+          children
+        })
+      )
+    }
+  );
+};
+const Contenteditable = (rawParams) => {
+  var _a, _b;
+  rawParams = __spreadValues({}, rawParams);
+  if (rawParams.rightIcon)
+    rawParams.paddingRight = (_a = rawParams.paddingRight) != null ? _a : 3;
+  if (rawParams.leftIcon)
+    rawParams.paddingLeft = (_b = rawParams.paddingLeft) != null ? _b : 3;
+  rawParams = __spreadProps(__spreadValues({}, rawParams), {
+    freeCSS: __spreadValues({
+      whiteSpace: "pre-wrap"
+    }, rawParams.freeCSS)
+  });
+  let params = DefaultStyles.Boxish(rawParams);
+  params.rows = params.rows || 5;
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      componentID: rawParams.componentID,
+      children: ContenteditableInput,
+      params
+    }
+  );
+};
+export {
+  Contenteditable,
+  Contenteditable as default
+};