amotify 0.1.32 → 0.1.34

package/dist/fn/Input/Slider.js

@@ -1,538 +1 @@
-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
-};
+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})]})]})},H=a=>(a=I({},a),d(X,{componentID:a.componentID,children:ee,params:q(a)}));export{H as Slider,H as default};