amotify 0.1.31 → 0.1.32

package/dist/fn/Input/Slider.js

@@ -1 +1,538 @@
-import{b as I,c as T,d as B}from"../../chunk-VY3566IV.js";import{jsx as d,jsxs as M}from"react/jsx-runtime";import{useState as A,useEffect as P}from"react";import{$$ as c,$$fromRoot as L,useStore as E,GenerateClassName as q}from"../../@utils/_";import x from"../../atoms/Box";import F from"../../atoms/Flex";import O from"../../mols/Column";import G from"../Button";import{Wrapper as X,BoxWrapper as j,SubmitForm as J,CommonEffects as Q}from"./core";import Y from"./Hidden";import{InputSliderClasses as v}from"../../@styles/componentClasses/_";function Z(a){let{value:e,params:o}=a,{required:n}=o,s=[];return n&&!e&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!s.filter(({type:i})=>i=="invalid").length,notice:s}}const N=a=>{let{value:e,val_status:o}=a,{min:n,max:s,step:i}=o;e=Math.max(e,n),e=Math.min(e,s);let t=e/s*s;return t=Math.round(t/i),{stepValue:t*i,stepIndex:t,positionLeft:t*i/s*100+"%"}},z={IndicatorLabels:a=>{let{componentID:e,min:o,max:n,step:s,customLegends:i}=a,r=[],t=Math.round(o/s),p=Math.round(n/s),f=p-t+1;for(var u=t;u<=p;u++){let l=u*s;l=Math.max(l,o),l=Math.min(l,n);let g=l/n*100+"%";r.push(d(x,{className:v("Label"),id:"Legend-"+e+"-"+u,display:u==t||u==p?"flex":"none",position:"absolute",top:0,unitHeight:1,unitWidth:1.5,transition:"middle",fontColor:"1.clear",freeCSS:{left:g,whiteSpace:"nowrap",textAlign:"center"},verticalAlign:"center",horizontalAlign:"center",children:i?i(l):l.rank()},l))}return P(()=>{const l=()=>{let g=L("#Labels-"+e),{width:S}=g.position(),C=Math.round(S/50)-1,y=Math.round(f/C);for(let m=t+1;m<p;m++)L("#Legend-"+e+"-"+m).css({display:m%y==0?"flex":"none"})};return c(window).addEvent({eventID:"SliderResizeCallback-"+e,eventType:"resize",callback:()=>{l()}}),l(),()=>{c(window).removeEvent("SliderResizeCallback-"+e)}},[]),d(F,{className:v("Labels"),verticalAlign:"center",horizontalAlign:"between",fontSize:"0.xs",position:"relative",unitHeight:1,id:"Labels-"+e,children:d(x,{position:"absolute",top:0,left:0,bottom:0,freeCSS:{right:12*1.5},children:r})})},Rail:a=>{let{val_status:e,set_status:o,DotData:n,form:s,enableFormSubmit:i}=a,{componentID:r}=e;return M(F,{className:v("Rail"),position:"relative",paddingLeft:"1/2",unitHeight:1.5,verticalAlign:"center",freeCSS:{minWidth:"10rem",zIndex:1,cursor:"pointer"},onMouseDown:t=>{t.stopPropagation(),b.Effects.Start(t,{val_status:e,set_status:o,DotData:n})},onTouchStart:t=>{t.stopPropagation(),b.Effects.Start(t,{val_status:e,set_status:o,DotData:n})},children:[d(x,{className:v("Bar"),backgroundColor:"4.layer.darken",position:"relative",borderRadius:"sphere",transition:"middle",flexSizing:"none",unitHeight:"2/3",width:1,id:r+"_Bar",children:d(x,{className:v("BarColor"),position:"relative",height:1,width:0,left:0,transition:"long",borderRadius:"inherit",backgroundColor:a.color,opacity:"middle",overflow:"hidden",freeCSS:{width:n.positionLeft},id:r+"_BarColor"})}),d(x,{className:v("BallWrap"),position:"absolute",top:0,left:0,bottom:0,freeCSS:{right:12*1.5},children:d(G.Button.Plain,{className:v("Ball"),position:"absolute",backgroundColor:a.color,top:0,left:0,ssSphere:1.5,freeCSS:{zIndex:2,left:n.positionLeft},"data-form-name":s,id:r+"_Ball",onKeyDown:t=>{b.KeyDownEvent({event:t,val_status:e,set_status:o,DotData:n}),i&&J(t)}})})]})}},b={Effects:{Start:(a,e)=>{c(document).addEvent({eventID:"SliderMouseMove",eventType:"mousemove",callback:o=>{b.Effects.Move(o,e)},options:{passive:!1}}).addEvent({eventID:"SliderTouchMove",eventType:"touchmove",callback:o=>{b.Effects.Move(o,e)},options:{passive:!1}}).addEvent({eventID:"SliderMouseUp",eventType:"mouseup",callback:()=>{b.Effects.End()}}).addEvent({eventID:"SliderTouchEnd",eventType:"touchend",callback:()=>{b.Effects.End()}})},Move:(a,e)=>{let o=c.getCursor(a).x,{val_status:n,set_status:s}=e,{componentID:i,min:r,max:t}=n,p=L("#"+i+"_Ball"),f=L("#"+i+"_Bar"),u=L("#"+i+"_BarColor"),{width:l,left:g}=f.position(),S=(o-g)/l;S=Math.max(S,0),S=Math.min(S,1);let C=S*t,y=N({value:C,val_status:n}),m=y.positionLeft,D=y.stepValue;p.css({left:m}),u.css({width:m});let{prevValue:_}=E.get(i);return D!=_&&(E.update({key:i,value:{prevValue:D}}),s(T(I({},n),{dataValue:D,eventType:"update",eventID:c.uuid.gen()}))),a.preventDefault(),a.stopPropagation(),!1},End:()=>{c(document).removeEvent(["SliderMouseMove","SliderTouchMove","SliderMouseUp","SliderTouchEnd"])}},KeyDownEvent:a=>{let{event:e,val_status:o,set_status:n}=a,{min:s,max:i,step:r}=o,{key:t,metaKey:p,ctrlKey:f}=e,u=f||p,l=o.dataValue;t.match(/Arrow/)&&(e.preventDefault(),t.match(/Left|Up/)?u?l=s:l-=r:t.match(/Right|Down/)&&(u?l=i:l+=r),l=Math.max(Math.min(l,i),s),E.update({key:o.componentID,value:{prevValue:l}}),n(T(I({},o),{dataValue:l,eventType:"update",eventID:c.uuid.gen()})))}},ee=a=>{let k=a,{color:e="theme",required:o,form:n="",legends:{enable:s=!0,custom:i,showAlways:r=!1}={},min:t,max:p,step:f,enableFormSubmit:u,checkValidationAtFirst:l,onChange:g,onKeyDown:S,onValidate:C,onUpdateValue:y,onUpdateValidValue:m,value:D="",className:_}=k,K=B(k,["color","required","form","legends","min","max","step","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","className"]),W={componentID:a.componentID||"",dataValue:D,min:t,max:p,step:f,eventType:"init",eventID:c.uuid.gen()},[h,V]=A(W),[w,U]=A({ok:!1,notice:[]});Q({params:a,val_status:h,set_status:V,val_validate:w,set_validate:U,onUpdateValue:y,onUpdateValidValue:m,DefaultValidation:Z,ExtraOverrideParams:{dataValue:D},ExtraStoreParams:{prevValue:h.dataValue,setValueByForeign:$=>{V(T(I({},h),{dataValue:$,eventType:"update",eventID:c.uuid.gen()}))}}});let R=N({value:h.dataValue,val_status:h});return M(j,{val_status:h,set_status:V,val_validate:w,params:a,children:[d(Y,I({value:R.stepValue,form:n,"data-value":R.stepValue,"data-validation":w.ok,"data-input-type":"slider"},K)),M(O,{gap:"1/2",flexSizing:"auto",className:[v("Wrap"),_,v("ShowLegendsAlways_"+r)].join(" "),children:[d(z.Rail,{color:e,val_status:h,set_status:V,DotData:R,form:n,enableFormSubmit:u}),s?d(z.IndicatorLabels,{componentID:h.componentID,min:t,max:p,step:f,customLegends:i}):null]})]})},H=a=>(a=I({},a),d(X,{componentID:a.componentID,children:ee,params:q(a)}));export{H as Slider,H as default};
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-JJ3PEWPN.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect
+} from "react";
+import {
+  $$,
+  $$fromRoot,
+  useStore,
+  GenerateClassName
+} from "../../@utils/_";
+import Box from "../../atoms/Box";
+import Flex from "../../atoms/Flex";
+import Column from "../../mols/Column";
+import Button from "../Button";
+import {
+  Wrapper,
+  BoxWrapper,
+  SubmitForm,
+  CommonEffects
+} from "./core";
+import Hidden from "./Hidden";
+import { InputSliderClasses } from "../../@styles/componentClasses/_";
+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 DataLeveling = (props) => {
+  let { value, val_status } = props;
+  let { min, max, step } = val_status;
+  value = Math.max(value, min);
+  value = Math.min(value, max);
+  let rawValue = value / max;
+  let stepValue = rawValue * max;
+  stepValue = Math.round(stepValue / step);
+  return {
+    stepValue: stepValue * step,
+    stepIndex: stepValue,
+    positionLeft: stepValue * step / max * 100 + "%"
+  };
+};
+const Comps = {
+  IndicatorLabels: (props) => {
+    let {
+      componentID,
+      min,
+      max,
+      step,
+      customLegends
+    } = props;
+    let Labels = [];
+    let minStep = Math.round(min / step);
+    let maxStep = Math.round(max / step);
+    let steps = maxStep - minStep + 1;
+    for (var index = minStep; index <= maxStep; index++) {
+      let value = index * step;
+      value = Math.max(value, min);
+      value = Math.min(value, max);
+      let left = value / max * 100 + "%";
+      Labels.push(/* @__PURE__ */ jsx(
+        Box,
+        {
+          className: InputSliderClasses("Label"),
+          id: "Legend-" + componentID + "-" + index,
+          display: index == minStep || index == maxStep ? "flex" : "none",
+          position: "absolute",
+          top: 0,
+          unitHeight: 1,
+          unitWidth: 1.5,
+          transition: "middle",
+          fontColor: "1.clear",
+          freeCSS: {
+            left,
+            whiteSpace: "nowrap",
+            textAlign: "center"
+          },
+          verticalAlign: "center",
+          horizontalAlign: "center",
+          children: customLegends ? customLegends(value) : value.rank()
+        },
+        value
+      ));
+    }
+    useEffect(() => {
+      const LabelLeveling = () => {
+        let Labels2 = $$fromRoot("#Labels-" + componentID);
+        let {
+          width
+        } = Labels2.position();
+        let maxLabelCount = Math.round(width / 50) - 1;
+        let labelStep = Math.round(steps / maxLabelCount);
+        for (let index2 = minStep + 1; index2 < maxStep; index2++) {
+          $$fromRoot("#Legend-" + componentID + "-" + index2).css({
+            display: index2 % labelStep == 0 ? "flex" : "none"
+          });
+        }
+      };
+      $$(window).addEvent({
+        eventID: "SliderResizeCallback-" + componentID,
+        eventType: "resize",
+        callback: () => {
+          LabelLeveling();
+        }
+      });
+      LabelLeveling();
+      return () => {
+        $$(window).removeEvent("SliderResizeCallback-" + componentID);
+      };
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        className: InputSliderClasses("Labels"),
+        verticalAlign: "center",
+        horizontalAlign: "between",
+        fontSize: "0.xs",
+        position: "relative",
+        unitHeight: 1,
+        id: "Labels-" + componentID,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            freeCSS: {
+              right: 12 * 1.5
+            },
+            children: Labels
+          }
+        )
+      }
+    );
+  },
+  Rail: (props) => {
+    let {
+      val_status,
+      set_status,
+      DotData,
+      form,
+      enableFormSubmit
+    } = props;
+    let {
+      componentID
+    } = val_status;
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        className: InputSliderClasses("Rail"),
+        position: "relative",
+        paddingLeft: "1/2",
+        unitHeight: 1.5,
+        verticalAlign: "center",
+        freeCSS: {
+          minWidth: "10rem",
+          zIndex: 1,
+          cursor: "pointer"
+        },
+        onMouseDown: (event) => {
+          event.stopPropagation();
+          Hooks.Effects.Start(event, {
+            val_status,
+            set_status,
+            DotData
+          });
+        },
+        onTouchStart: (event) => {
+          event.stopPropagation();
+          Hooks.Effects.Start(event, {
+            val_status,
+            set_status,
+            DotData
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: InputSliderClasses("Bar"),
+              backgroundColor: "4.layer.darken",
+              position: "relative",
+              borderRadius: "sphere",
+              transition: "middle",
+              flexSizing: "none",
+              unitHeight: "2/3",
+              width: 1,
+              id: componentID + "_Bar",
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: InputSliderClasses("BarColor"),
+                  position: "relative",
+                  height: 1,
+                  width: 0,
+                  left: 0,
+                  transition: "long",
+                  borderRadius: "inherit",
+                  backgroundColor: props.color,
+                  opacity: "middle",
+                  overflow: "hidden",
+                  freeCSS: {
+                    width: DotData.positionLeft
+                  },
+                  id: componentID + "_BarColor"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: InputSliderClasses("BallWrap"),
+              position: "absolute",
+              top: 0,
+              left: 0,
+              bottom: 0,
+              freeCSS: {
+                right: 12 * 1.5
+              },
+              children: /* @__PURE__ */ jsx(
+                Button.Button.Plain,
+                {
+                  className: InputSliderClasses("Ball"),
+                  position: "absolute",
+                  backgroundColor: props.color,
+                  top: 0,
+                  left: 0,
+                  ssSphere: 1.5,
+                  freeCSS: {
+                    zIndex: 2,
+                    left: DotData.positionLeft
+                  },
+                  "data-form-name": form,
+                  id: componentID + "_Ball",
+                  onKeyDown: (event) => {
+                    Hooks.KeyDownEvent({
+                      event,
+                      val_status,
+                      set_status,
+                      DotData
+                    });
+                    if (enableFormSubmit)
+                      SubmitForm(event);
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+const Hooks = {
+  Effects: {
+    Start: (event, info) => {
+      $$(document).addEvent({
+        eventID: "SliderMouseMove",
+        eventType: "mousemove",
+        callback: (event2) => {
+          Hooks.Effects.Move(event2, info);
+        },
+        options: { passive: false }
+      }).addEvent({
+        eventID: "SliderTouchMove",
+        eventType: "touchmove",
+        callback: (event2) => {
+          Hooks.Effects.Move(event2, info);
+        },
+        options: { passive: false }
+      }).addEvent({
+        eventID: "SliderMouseUp",
+        eventType: "mouseup",
+        callback: () => {
+          Hooks.Effects.End();
+        }
+      }).addEvent({
+        eventID: "SliderTouchEnd",
+        eventType: "touchend",
+        callback: () => {
+          Hooks.Effects.End();
+        }
+      });
+    },
+    Move: (event, info) => {
+      let mouseX = $$.getCursor(event).x;
+      let {
+        val_status,
+        set_status
+      } = info;
+      let {
+        componentID,
+        min,
+        max
+      } = val_status;
+      let Ball = $$fromRoot("#" + componentID + "_Ball");
+      let Bar = $$fromRoot("#" + componentID + "_Bar");
+      let BarColor = $$fromRoot("#" + componentID + "_BarColor");
+      let { width: barWidth, left: barLeft } = Bar.position();
+      let Left = (mouseX - barLeft) / barWidth;
+      Left = Math.max(Left, 0);
+      Left = Math.min(Left, 1);
+      let LeftRawValue = Left * max;
+      let resultValues = DataLeveling({
+        value: LeftRawValue,
+        val_status
+      });
+      let left = resultValues.positionLeft;
+      let stepValue = resultValues.stepValue;
+      Ball.css({ left });
+      BarColor.css({ width: left });
+      let { prevValue } = useStore.get(componentID);
+      if (stepValue != prevValue) {
+        useStore.update({
+          key: componentID,
+          value: {
+            prevValue: stepValue
+          }
+        });
+        set_status(__spreadProps(__spreadValues({}, val_status), {
+          dataValue: stepValue,
+          eventType: "update",
+          eventID: $$.uuid.gen()
+        }));
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    },
+    End: () => {
+      $$(document).removeEvent(["SliderMouseMove", "SliderTouchMove", "SliderMouseUp", "SliderTouchEnd"]);
+    }
+  },
+  KeyDownEvent: (props) => {
+    let {
+      event,
+      val_status,
+      set_status
+    } = props;
+    let { min, max, step } = val_status;
+    let { key, metaKey, ctrlKey } = event;
+    let auxKey = ctrlKey || metaKey;
+    let nextValue = val_status.dataValue;
+    if (!key.match(/Arrow/))
+      return;
+    event.preventDefault();
+    if (key.match(/Left|Up/)) {
+      if (auxKey)
+        nextValue = min;
+      else
+        nextValue -= step;
+    } else if (key.match(/Right|Down/)) {
+      if (auxKey)
+        nextValue = max;
+      else
+        nextValue += step;
+    }
+    nextValue = Math.max(Math.min(nextValue, max), min);
+    useStore.update({
+      key: val_status.componentID,
+      value: {
+        prevValue: nextValue
+      }
+    });
+    set_status(__spreadProps(__spreadValues({}, val_status), {
+      dataValue: nextValue,
+      eventType: "update",
+      eventID: $$.uuid.gen()
+    }));
+  }
+};
+const SliderInput = (params) => {
+  let _a = params, {
+    color = "theme",
+    required,
+    form = "",
+    legends: {
+      enable: showLegends = true,
+      custom: customLegends,
+      showAlways: showLegendsAlways = false
+    } = {},
+    min,
+    max,
+    step,
+    enableFormSubmit,
+    checkValidationAtFirst,
+    onChange,
+    onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    value = "",
+    className
+  } = _a, others = __objRest(_a, [
+    "color",
+    "required",
+    "form",
+    "legends",
+    "min",
+    "max",
+    "step",
+    "enableFormSubmit",
+    "checkValidationAtFirst",
+    "onChange",
+    "onKeyDown",
+    "onValidate",
+    "onUpdateValue",
+    "onUpdateValidValue",
+    "value",
+    "className"
+  ]);
+  let Default_Status = {
+    componentID: params.componentID || "",
+    dataValue: value,
+    min,
+    max,
+    step,
+    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,
+    ExtraOverrideParams: {
+      dataValue: value
+    },
+    ExtraStoreParams: {
+      prevValue: val_status.dataValue,
+      setValueByForeign: (value2) => {
+        set_status(__spreadProps(__spreadValues({}, val_status), {
+          dataValue: value2,
+          eventType: "update",
+          eventID: $$.uuid.gen()
+        }));
+      }
+    }
+  });
+  let DotData = DataLeveling({
+    value: val_status.dataValue,
+    val_status
+  });
+  return /* @__PURE__ */ jsxs(
+    BoxWrapper,
+    {
+      val_status,
+      set_status,
+      val_validate,
+      params,
+      children: [
+        /* @__PURE__ */ jsx(
+          Hidden,
+          __spreadValues({
+            value: DotData.stepValue,
+            form,
+            "data-value": DotData.stepValue,
+            "data-validation": val_validate.ok,
+            "data-input-type": "slider"
+          }, others)
+        ),
+        /* @__PURE__ */ jsxs(
+          Column,
+          {
+            gap: "1/2",
+            flexSizing: "auto",
+            className: [
+              InputSliderClasses("Wrap"),
+              className,
+              InputSliderClasses("ShowLegendsAlways_" + showLegendsAlways)
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx(
+                Comps.Rail,
+                {
+                  color,
+                  val_status,
+                  set_status,
+                  DotData,
+                  form,
+                  enableFormSubmit
+                }
+              ),
+              !!showLegends && /* @__PURE__ */ jsx(
+                Comps.IndicatorLabels,
+                {
+                  componentID: val_status.componentID,
+                  min,
+                  max,
+                  step,
+                  customLegends
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const Slider = (rawParams) => {
+  rawParams = __spreadValues({}, rawParams);
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      componentID: rawParams.componentID,
+      children: SliderInput,
+      params: GenerateClassName(rawParams)
+    }
+  );
+};
+export {
+  Slider,
+  Slider as default
+};