amotify 0.2.74 → 0.2.76
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.
- package/demo/esbuild/public/index.js +30 -30
- package/dist/@utils/config.js +1 -1
- package/dist/@utils/useRefresh.js +1 -1
- package/dist/fn/Button.js +1 -1
- package/dist/fn/Cropper.js +1 -1
- package/dist/fn/Effect/Fade.js +1 -1
- package/dist/fn/Effect/Ripple.js +2 -2
- package/dist/fn/Input/Autocomplete.js +1 -1
- package/dist/fn/Input/Color.js +1 -1
- package/dist/fn/Input/Contenteditable.js +1 -1
- package/dist/fn/Input/DigitCharacters.js +1 -1
- package/dist/fn/Input/Filer.js +1 -1
- package/dist/fn/Input/Hidden.js +1 -1
- package/dist/fn/Input/List.js +1 -1
- package/dist/fn/Input/Segmented.js +1 -1
- package/dist/fn/Input/Select.js +1 -1
- package/dist/fn/Input/Slider.js +1 -1
- package/dist/fn/Input/Switch.js +1 -1
- package/dist/fn/Input/TextField.js +3 -3
- package/dist/fn/Input/Time/Picker.js +1 -1
- package/dist/fn/Input/Time/index.js +1 -1
- package/dist/fn/Input/core.js +1 -1
- package/dist/fn/Loader/mini.js +1 -1
- package/dist/fn/RootViewController.js +1 -1
- package/dist/fn/Sheet.js +1 -1
- package/dist/fn/Snackbar.js +1 -1
- package/dist/fn/SwipeView.js +1 -1
- package/dist/fn/Table/Data.js +1 -1
- package/dist/fn/Table/Drag.js +1 -1
- package/dist/fn/Table/Wrapper.js +1 -1
- package/dist/fn/Tips.js +1 -1
- package/dist/fn/Tooltips.js +1 -1
- package/dist/mols/Accordion.js +1 -1
- package/dist/temps/designBook.js +8 -8
- package/package.json +2 -2
package/dist/@utils/config.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as s,c as h}from"../chunk-C5N2D3ZX.js";import
|
|
1
|
+
import{b as s,c as h}from"../chunk-C5N2D3ZX.js";import d,{UUID as w}from"@mingoo/jsmin";import{useRefresh as f,ColorObjects as b,SetThemeColorTag as u}from".";let n={sessionUID:w(),appRoot:null,darkMode:"light",themeColor:"comun",roundness:2,isSystemDarkmode:()=>window.matchMedia("(prefers-color-scheme: dark)").matches==!0,deviceIs:"",browserIs:"",isPhone:!1,isTouchDevice:!1,isIOS:!1,screen:{breakpoint:834,phonepoint:690,viewHeight:0,viewWidth:0,isBreakpoint:(e=834)=>window.innerWidth<=e,isPhonepoint:(e=690)=>window.innerWidth<=e}};const o={get:()=>n,set:e=>{n=s(s({},n),e)},update:{themeColor:e=>{if(b.find(r=>r.key==e)||(e="comun"),e==o.get().themeColor)return;o.set(h(s({},o.get()),{themeColor:e}));let t=d(document.body);t.removeClass(t.findClass(/^bdsTC/)).addClass("bdsTC_"+e).callback(()=>{u()}),o.restart()},darkMode:e=>{if(["light","dark","dim","auto"].includes(e)||(e="light"),e==o.get().darkMode)return;let t=e=="auto"?o.get().isSystemDarkmode()?"dark":"light":e;o.set(h(s({},o.get()),{darkMode:t}));let r=d(document.body);r.removeClass(r.findClass(/^bdsDM/)).addClass("bdsDM_"+t),o.restart()},roundness:e=>{e>=0&&e<=5||(e=2),e!=o.get().roundness&&(o.set(h(s({},o.get()),{roundness:e})),o.restart())},screen:e=>{o.get().screen=s(s({},o.get().screen),e)}},launch:e=>{const t=window.navigator.userAgent.toLowerCase(),r=t.indexOf("windows nt")!==-1?"windows":t.indexOf("android")!==-1?"android":t.indexOf("iphone")!==-1?"iPhone":t.indexOf("ipad")>-1||t.indexOf("macintosh")>-1&&"ontouchend"in document?"iPad":t.indexOf("mac os x")!==-1?"macOSX":"undefined",p=t.indexOf("msie")!==-1||t.indexOf("trident")!==-1?"ie":t.indexOf("edge")!==-1?"edge":t.indexOf("chrome")!==-1?"chrome":t.indexOf("safari")!==-1?"safari":t.indexOf("firefox")!==-1?"firefox":t.indexOf("opera")!==-1||t.indexOf("opr")!==-1?"opera":"undefined";n.appRoot=e.appRoot||document.body,n.appRoot instanceof HTMLElement&&(n.appRoot.tabIndex=0),d.is.exist(e.roundness)&&o.update.roundness(e.roundness),d.is.exist(e.themeColor)&&o.update.themeColor(e.themeColor),d.is.exist(e.darkMode)&&o.update.darkMode(e.darkMode),n.deviceIs=r,n.browserIs=p,n.isPhone=["Android","iPhone"].includes(r),n.isTouchDevice=window.ontouchstart!==void 0&&0<navigator.maxTouchPoints,n.isIOS=["iPhone","iPad"].includes(r),n.isTouchDevice=window.ontouchstart!==void 0&&0<navigator.maxTouchPoints,n.isIOS=["iPhone","iPad"].includes(r),n.screen={breakpoint:834,phonepoint:690,viewHeight:window.innerHeight,viewWidth:window.innerWidth,isBreakpoint:(i=834)=>window.innerWidth<=i,isPhonepoint:(i=690)=>window.innerWidth<=i},d(document.body).addClass(["AMOTIFY_be_body","usrDevice_"+o.get().deviceIs,"bdsDM_"+o.get().darkMode,"bdsTC_"+o.get().themeColor]),d(window).addEvent({eventType:"load",eventID:"windowLoad",callback:()=>{let i=document.body.style,a=d(document.body),m=Number(a.getStyleProperty("--topNavHeight").removeLetters()||0),l=Number(a.getStyleProperty("--footerNavHeight").removeLetters()||0),g=window.innerHeight-m-l;i.setProperty("--viewHeight",window.innerHeight+"px"),i.setProperty("--contentHeight",g+"px")}}).addEvent({eventType:"resize",eventID:"getDeviceInfo",callback:()=>{o.update.screen({viewHeight:window.innerHeight,viewWidth:window.innerWidth});let i=d(document.body),a=window.innerHeight,m=Number(i.getStyleProperty("--topNavHeight").removeLetters()),l=Number(i.getStyleProperty("--footerNavHeight").removeLetters()),c=a-m-l;i.setStyleProperty("--viewHeight",a+"px").setStyleProperty("--sideNavHeight",c+"px").setStyleProperty("--contentHeight",c+"px")}}),u()},restart:()=>{f.release("RootViewController_"+o.get().sessionUID)}};export{o as Config,o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../chunk-C5N2D3ZX.js";import
|
|
1
|
+
import"../chunk-C5N2D3ZX.js";import{UUID as h}from"@mingoo/jsmin";import e from"./useStore";import{useState as u,useEffect as g}from"react";const d={catch:s=>{let[t]=u(h()),[f,l]=u(h()),[y,n]=u(null),i="RefreshKey_"+t;return g(()=>{var o;e.set({[i]:r=>{l(h()),n(r||null)}});let a=((o=e.get("RefreshKeys_"+s))==null?void 0:o.keys)||[];return a=[...a,t],e.update({["RefreshKeys_"+s]:{keys:a}}),()=>{var c;e.delete(i);let r=((c=e.get("RefreshKeys_"+s))==null?void 0:c.keys)||[],_=r.indexOf(t);_!==-1&&(r.splice(_,1),e.update({["RefreshKeys_"+s]:{keys:r}}))}},[]),y},release:(s,t)=>{var l;let f=((l=e.get("RefreshKeys_"+s))==null?void 0:l.keys)||[];if(f&&f.length)for(let y of f){let n=e.get("RefreshKey_"+y);n&&n(t)}}};export{d as default,d as useRefresh};
|
package/dist/fn/Button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as i,d as B,e as z}from"../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import
|
|
1
|
+
import{b as o,c as i,d as B,e as z}from"../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import L,{UUID as E}from"@mingoo/jsmin";import{pageRouter as k,ReadStyleSet as P}from"../@utils";import{Input as R}from".";import{Box as I}from"../atoms";import{ButtonClasses as c}from"../@styles/componentClasses";const x={Size:(l,t,s,n)=>{let e={fontSize:"inherit"};return s=s||"R",["plain","link"].includes(t)?{}:(s=="xsmall"?e=i(o({},e),{padding:["1/3","2/3"],fontSize:"0.xs",borderRadius:"3.tone.tertiary"}):s=="small"?e=i(o({},e),{padding:["1/2","3/4"],fontSize:"1.mini",borderRadius:"3.tone.tertiary"}):s=="regular"?(e.padding=["3/4",1],t=="prime"&&(e.padding=["3/4",2])):s=="large"&&(e.padding=[1,3],e.fontSize="3.paragraph",e.isSemiBoldFont=!0),e=o({borderRadius:"2.tone.secondary",transition:"middle",position:"relative",textAlign:"center"},e),e)},Tone:(l,t,s,n)=>{let e={display:"inlineBlock",fontWeight:"inherit",fontColor:"inherit",border:"unset"};return t=="plain"||(t=="link"?(e.fontColor="theme",e.textAlign="left",e.backgroundColor="trans"):t=="normal"?e=i(o({},e),{backgroundColor:"trans"}):t=="border"?e=i(o({},e),{backgroundColor:"layer.1",border:"2.normal",borderStyle:"solid",boxShadow:"0.min"}):t=="prime"?(e=i(o({},e),{isSemiBoldFont:!0,fontColor:"white",backgroundColor:n,boxShadow:"0.normal",ssEffectsOnActive:["shrink","push","ripple.white"]}),n=="white"&&(e=i(o({},e),{fontColor:"theme",ssEffectsOnActive:["shrink","push","ripple.cloud"]}))):t=="sub"?e=i(o({},e),{fontColor:n,ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="clear"?e=i(o({},e),{fontColor:n,backgroundColor:"trans",ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="fillToBorder"?e=i(o({},e),{boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:n,fontColor:n,backgroundColor:n}):t=="borderToFill"&&(e=i(o({},e),{fontColor:n,boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:n,backgroundColor:n})),n=="cloud"&&(e.fontColor="3.blur"),t!="link"&&(e=o({position:"relative",ssEffectsOnActive:["shrink","push"]},e))),e}},F=l=>{let t=P(o({isLocked:!1,isActive:!1,isActiveStyles:{},isActiveClassName:"",tabIndex:0,className:"",color:"theme",tone:"border","aria-label":E()},l)),s=t.seed;{let{isLocked:y=!1,isActive:m=!1,isActiveStyles:h={},isActiveClassName:C="",tone:r="border",size:p="regular",color:a="theme",className:T=""}=t;t=o(o(o({},x.Size(l.seed,r,p,a)),x.Tone(l.seed,r,p,a)),t),t.className=[T,c("Wrap"),c("isNeutral_"+!m),c("isLocked_"+y),c("Tone_"+r),c("Color_"+a),c("Tone_"+r+"_Color_"+a)].join(" "),m&&(t=o(o({className:[t.className,C].join(" ")},t),h))}if(s=="button"){let n=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,submitOption:r,onClick:p}=n,a=B(n,["isLocked","isActive","isActiveClassName","isActiveStyles","submitOption","onClick"]);return r&&(r=o({acceptInvalidForm:!1,submitDelegationKey:"auxEnter"},r),a=i(o({},a),{"data-form-submit-button":r.formName,"data-sdfike":L.flatArray(r.submitDelegationKey).join(",")})),d(I,i(o({htmlTag:"button"},a),{onClick:T=>z(void 0,null,function*(){if(y||(p&&p(T),!r))return;let S=yield R.CollectForm(r.formName);!r.acceptInvalidForm&&!S.valid||r.callback(S.data,S.valid)})}))}else if(s=="label"){let e=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,onClick:r}=e,p=B(e,["isLocked","isActive","isActiveClassName","isActiveStyles","onClick"]);return d(I,i(o({htmlTag:"label"},p),{onClick:a=>{y||r&&r(a)}}))}else if(s=="anchor"){let g=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,onClick:r,href:p="",newTab:a,sync:T,shiftQueryParams:S}=g,A=B(g,["isLocked","isActive","isActiveClassName","isActiveStyles","onClick","href","newTab","sync","shiftQueryParams"]);return d(I,i(o({htmlTag:"button"},A),{onClick:b=>{if(y)return;if(r)return r(b);let v=b.ctrlKey||b.metaKey,N=a||!!v,f=p;S&&(f+=location.search),T?k.pushSync(f):k.push(f,!!N)}}))}return null},u=function(l,t){const s=e=>d(F,o({seed:l,tone:t,size:"regular"},e)),n=s;return n.XS=e=>d(s,o({size:"xsmall",tone:t},e)),n.S=e=>d(s,o({size:"small",tone:t},e)),n.R=e=>d(s,o({size:"regular",tone:t},e)),n.L=e=>d(s,o({size:"large",tone:t},e)),n},M=function(l){const s=n=>d(F,o({seed:l,tone:"prime",size:"regular"},n));return s.Plain=u(l,"plain"),s.Link=u(l,"link"),s.Normal=u(l,"normal"),s.Border=u(l,"border"),s.Prime=u(l,"prime"),s.Sub=u(l,"sub"),s.Clear=u(l,"clear"),s.FillToBorder=u(l,"fillToBorder"),s.BorderToFill=u(l,"borderToFill"),s},w=M("button"),D=M("label"),K=M("anchor");export{K as Anchor,w as Button,D as Label};
|
package/dist/fn/Cropper.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as H,c as j,e as z}from"../chunk-C5N2D3ZX.js";import{Fragment as re,jsx as o,jsxs as f}from"react/jsx-runtime";import v from"@mingoo/jsmin";import{$$fromRoot as K,useStore as X}from"../@utils";import{useState as N,useEffect as O}from"react";import{Box as P,FAI as M,Column as k}from"../atoms";import{Row as I,Text as F}from"../mols";import{Button as B}from"./Button";import A from"./Sheet";import V from"./Loader";import q from"./Input";import{faPalette as J}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as Q}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ee}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as te}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as W}from"../@styles/componentClasses";import Y from"./Tooltips";class ae{constructor(t){this.set_scale=t.set_scale,this.val_file=t.val_file,this.develops=t.develops,this.use=t.use,this.componentID=t.componentID,this.scale={current:t.scale.default,default:t.scale.default,min:t.scale.min,max:t.scale.max};let n=t.canvas;this.Canvas={elm:n,ctx:n.getContext("2d")};let i=t.picture.image,{width:e,height:a}=i,r=e/a;this.Picture={elm:i,originDataUrl:i.src,aspect:r,revisedAspect:1,rotate:t.picture.rotate,grayScale:t.picture.grayScale,tone:t.picture.tone},this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:e/2,imageY:a/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let t=this.Canvas.elm,n=this.Picture.elm,i=0,e=0;if(this.use=="square"){let s=t.width/3*2,l=t.height/3*2;i=Math.min(s,l),e=i}else this.use=="wallpaper.horizontal"?(i=t.width*(7/9),e=i/3):this.use=="wallpaper.vertical"&&(e=t.height*(7/9),i=e/2);let{width:a,height:r}=n,p=(t.width-i)/2,u=(t.height-e)/2,y=i/e;this.pst={frame:{x:p,y:u,w:i,h:e,aspect:y},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:r/2,centerX:t.width/2,centerY:t.height/2}}dragEffect(t){let{eventType:n,x:i,y:e}=t;if(n=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:i,y:e},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:r}=this.dragEffectInfo,p=a.x-i,u=a.y-e,y=this.scale.current*this.Picture.revisedAspect/100,s=p/y*r.x,l=u/y*r.y;n=="move"?this.drawImage(this.pst.imageX+s,this.pst.imageY+l):n=="end"&&this.drawImage(this.pst.imageX+=s,this.pst.imageY+=l)}}pinchEffect(t){let{eventType:n,event:i}=t,{x:e,y:a}=v.getCursor(i.touches[0]),{x:r,y:p}=v.getCursor(i.touches[1]),u=r-e,y=p-a;if(n=="start")this.pinchEffectInfo.origin={x:u,y,scale:this.scale.current};else if(n=="move"){let{origin:s}=this.pinchEffectInfo,l=Math.sqrt(Math.pow(s.x,2)+Math.pow(s.y,2)),S=Math.sqrt(Math.pow(u,2)+Math.pow(y,2))/l,C=Number(s.scale*S);this.set_scale(C)}}updateScale(t){let n=t;n=Math.max(n,this.scale.min),n=Math.min(n,this.scale.max),this.scale.current=n,this.drawImage()}updateFilter(t){this.Picture.grayScale=t.grayScale,this.Picture.tone=t.tone,this.Picture.rotate=t.rotate,this.modifyImage()}modifyImage(){return z(this,null,function*(){let{grayScale:t,tone:n,rotate:i}=this.Picture;const e=document.createElement("canvas");let a=e.getContext("2d"),r=yield v.ImageLoader(this.Picture.originDataUrl),p=r.width,u=r.height;(i==90||i==270)&&(p=r.height,u=r.width),e.width=p,e.height=u,t&&(a.filter="grayscale("+t+"%)"),i&&(a.translate(p/2,u/2),a.rotate(i*Math.PI/180),[90,270].includes(i)?a.translate(-u/2,-p/2):a.translate(-p/2,-u/2)),a.drawImage(r,0,0,r.width,r.height);let y=a.getImageData(0,0,e.width,e.height),s=y.data;{t/=100;let C=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][n],x=C[0]/255,b=C[1]/255,c=C[2]/255;for(let m=0;m<u;m++)for(let h=0;h<p;h++){var l=(m*p+h)*4;if(t){let R=.3*s[l]+.59*s[l+1]+.11*s[l+2];for(var g=0;g<3;g++){let T=s[l+g];s[l+g]=T+(R-T)*t}}s[l]*=x,s[l+1]*=b,s[l+2]*=c}}a.putImageData(y,0,0);let S=e.toDataURL("image/jpeg");{let C=yield v.ImageLoader(S),{width:x,height:b}=C,c=x/b;this.Picture=j(H({},this.Picture),{elm:C,aspect:c,revisedAspect:this.pst.frame.aspect>c?this.pst.frame.w/x:this.pst.frame.h/b})}this.drawImage()})}drawImage(t,n){let{use:i,Canvas:{ctx:e,elm:a},pst:{frame:r}}=this,p=t||this.pst.imageX,u=n||this.pst.imageY;{let y=this.scale.current/100,s=this.Picture.revisedAspect*y,l=this.pst.centerX-p*s,g=this.pst.centerY-u*s,S=this.Picture.elm.width*s,C=this.Picture.elm.height*s;{let x=this.pst.frame.x+this.pst.frame.w-S,b=this.pst.frame.x,c=this.pst.frame.y+this.pst.frame.h-C,m=this.pst.frame.y,h=0;l<x&&(h=l-x),l>b&&(h=l-b);let R=0;g<c&&(R=g-c),g>m&&(R=g-m),this.dragEffectInfo.origin.x+=h/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=R/2/this.dragEffectInfo.frameExpandRate.y,l=Math.min(Math.max(l,x),b),g=Math.min(Math.max(g,c),m)}this.pst.outImage={x:l,y:g,w:S,h:C},e.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),e.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,l,g,S,C)}{if(i=="square"){e.fillStyle="rgba( 20,24,20,.3 )",e.beginPath();let l=a.width/3*2,g=a.height/3*2,S=Math.min(l,g),C=Math.max(l,g);e.arc(a.width/2,a.height/2,C,0,Math.PI*2,!0),e.arc(a.width/2,a.height/2,S/2,0,Math.PI*2,!1),e.closePath(),e.fill()}else(i=="wallpaper.horizontal"||i=="wallpaper.vertical")&&(e.fillStyle="rgba( 20,24,20,.3 )");e.beginPath(),e.moveTo(0,0),e.lineTo(a.width,0),e.lineTo(a.width,a.height),e.lineTo(0,a.height),e.lineTo(0,0),e.closePath(),e.lineTo(r.x,r.y),e.lineTo(r.x,r.y+r.h),e.lineTo(r.x+r.w,r.y+r.h),e.lineTo(r.x+r.w,r.y),e.lineTo(r.x,r.y),e.fill();let s=v(document.body).getStyleProperty("--color-theme-hsl");e.lineWidth=4,e.strokeStyle=`hsla( ${s},1 )`,e.strokeRect(r.x,r.y,r.w,r.h)}}export(){return z(this,null,function*(){let{Canvas:t,develops:n,Picture:i,pst:{outImage:e,frame:a}}=this,r=e.w/i.elm.width,p=e.h/i.elm.height,u=(a.x-e.x)/r,y=(a.x-e.x+a.w)/r,s=(a.y-e.y)/p,l=(a.y-e.y+a.h)/p,g=Array.from({length:n.length}),S="image/jpeg";for(let C=0;C<n.length;C++){let{size:x,maxSize:b}=n[C];b=b||{S:1024*20,R:1024*100,L:1024*350}[x];let c={S:140,R:600,L:1200}[x],m=c;this.use=="wallpaper.horizontal"?m=c/3:this.use=="wallpaper.vertical"&&(m=c*2);let h=document.createElement("canvas");h.width=c,h.height=m;let R=h.getContext("2d");if(!R)return;R.clearRect(0,0,c,m),R.drawImage(this.Picture.elm,u,s,y-u,l-s,0,0,c,m);let T=h.toDataURL(S),w=yield T.toBlob(S);if(!w)return;if(w.size>=b){let L=b/w.size;if(T=h.toDataURL(S,L*.92),w=yield T.toBlob(S),!w)return}let U=new File([w],this.val_file.name,{type:S});g[C]=U}return g})}}const Z={Core:d=>{let{val_file:t,options:n,finishedCallback:i,abortCallback:e}=d,{use:a,develops:r=[]}=n,[p]=N(v.uuid.gen());const u={scale:{default:120,min:100,max:400},rotate:0,grayScale:0,tone:0};let[y,s]=N(u.scale.default),[l,g]=N(u.rotate),[S,C]=N(u.grayScale),[x,b]=N(u.tone);return O(()=>{let c="CropperResize";return v(window).addEvent({eventType:"resize",eventID:c,callback:()=>{v.interval.clear("CropperResize"),v.interval.standBy("CropperResize",200,()=>{var L;let m=K("#Canvas-"+p)[0];if(!m)return;let h=(L=X.get(p))==null?void 0:L.Instance;if(!h)return;let R=m.position(),T=R.width/R.height;m.width=2400,m.height=2400/T;let{width:w,height:U}=m;h.pst.centerX=w/2,h.pst.centerY=U/2,h.frameSizing(),h.modifyImage()})}}),()=>{v(window).removeEvent(c)}},[]),O(()=>{X.set({[p]:{}}),z(void 0,null,function*(){V.fn.corner.active(),yield v.pending(()=>{},400);let{target:c}=yield t.convert();if(!c)return;let m=c.result,h=K("#Canvas-"+p)[0];if(!h)return;let R=h.position(),T=R.width/R.height;h.width=2400,h.height=2400/T;let w=new ae({set_scale:s,val_file:t,develops:r,use:a,scale:u.scale,componentID:p,canvas:h,picture:{image:yield v.ImageLoader(m),grayScale:u.grayScale,tone:u.tone,rotate:u.rotate}});X.set({[p]:{Instance:w}});const U=function(E){if(E.preventDefault(),E.touches&&E.touches.length>1)w.pinchEffect({eventType:"start",event:E}),v(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:D=>{D.preventDefault(),w.pinchEffect({eventType:"move",event:D})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:$});else{w.dragEffect(H({eventType:"start"},v.getCursor(E)));let{type:D}=E;v(document).addEvent({eventType:D=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{L("move",_)}}).addEvent({eventType:D=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{L("end",_),$(_)}})}},L=function(E,D){D.preventDefault(),w.dragEffect(H({eventType:E},v.getCursor(D)))},$=function(E){E.preventDefault(),v(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};v(h).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:E=>{E.preventDefault();let D=Number(E.wheelDelta*.04),_=w.scale.current+D;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),s(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:U,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:U,options:{passive:!1}}),setTimeout(()=>{V.fn.corner.stop()},1e3)})},[t.id]),O(()=>{var m;let c=(m=X.get(p))==null?void 0:m.Instance;c&&c.updateScale(y)},[y]),O(()=>{var m;let c=(m=X.get(p))==null?void 0:m.Instance;c&&c.updateFilter({grayScale:S,tone:x,rotate:l})},[S,x,l]),o(A.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:f(k,{className:[W("Wrap"),W("Use_"+a)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[o(P,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:o("canvas",{style:{width:"100%",height:"100%"},width:2400,height:2400,className:W("Canvas"),id:"Canvas-"+p})}),f(I.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[o(Z.SettingRegion,{DefaultOptions:u,val_scale:y,set_scale:s,val_tone:x,set_tone:b,val_grayScale:S,set_grayScale:C,val_rotate:l,set_rotate:g}),f(I.Right,{flexSizing:"none",children:[o(B.Border,{isRounded:!0,onClick:()=>{e()},children:"\u9589\u3058\u308B"}),o(B,{isRounded:!0,boxShadow:"3.remark",onClick:()=>z(void 0,null,function*(){var h;let c=(h=X.get(p))==null?void 0:h.Instance;if(!c)return;V.fn.mini.active("CropperExportation");let m=yield c.export();setTimeout(()=>{V.fn.mini.stop("CropperExportation"),i(m)},3e3)}),children:f(I.Center,{gap:"1/2",children:[o(V.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:d=>{let t=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],n=i=>t[i]||"\u306A\u3057";return f(I.Left,{verticalAlign:"unset",flexWrap:!0,children:[f(k,{gap:"1/3",children:[o(F.Supplement,{children:"Rotate"}),f(I.Left,{flexChilds:"even",gap:"1/6",children:[o(B.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let i=d.val_rotate-90;i<0&&(i+=360),d.set_rotate(i)},children:f(I.Center,{gap:"1/4",children:["90\xB0",o(M,{icon:ee})]})}),o(B.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{d.set_rotate((d.val_rotate+90)%360)},children:f(I.Center,{gap:"1/4",children:[o(M,{icon:te}),"90\xB0"]})})]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Zoom"}),f(B.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperZoomEdit";Y.open({tipsID:e,gravityPoint:3,event:i,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(A.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(B.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{override:"force",value:d.val_scale-100,min:d.DefaultOptions.scale.min-100,max:d.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:a,value:r})=>{v.interval.clear("Cropper.UpdateScale"),v.interval.standBy("Cropper.UpdateScale",250,()=>{d.set_scale(r+100)})},legends:{enable:!0,custom:a=>"x"+Math.round(100+a)/100}})]})})})},children:[d.val_scale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"GrayScale"}),f(B.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperGrayScaleEdit";Y.open({tipsID:e,gravityPoint:3,event:i,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(A.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M,{icon:J,fontColor:"5.translucent"}),"Gray Scale"]})}),o(B.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{value:d.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:a})=>{v.interval.clear("Cropper.GrayScale"),v.interval.standBy("Cropper.GrayScale",250,()=>{d.set_grayScale(a)})},legends:{enable:!0,custom:a=>a+"%"}})]})})})},children:[d.val_grayScale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Tone"}),o(B.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperToneEdit";Y.open({tipsID:e,gravityPoint:3,event:i,closeAtParentBlur:!1,freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let a=[];for(let r=1;r<=10;r++)a.push({value:r,label:f(re,{children:[o(P,{ssSphere:1,className:[W("ToneBall"),W("ToneBall_"+r)].join(" ")}),o(P,{textAlign:"left",flexSizing:0,children:n(r)})]})});return o(A.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M,{icon:Q,fontColor:"5.translucent"}),"Tone"]})}),o(B.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Radio.Normal,{value:d.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(P,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...a],onUpdateValidValue:({value:r})=>{d.set_tone(r)}})]})})}})},children:f(I.Center,{gap:"1/2",children:[o(P,{boxShadow:"2.remark",ssSphere:1,className:[W("ToneBall"),W("ToneBall_"+d.val_tone)].join(" ")}),n(d.val_tone)]})})]})]})}},G={openDialogNEdit:d=>z(void 0,null,function*(){let t=yield q.Filer.fn.openDialog({accept:"image",multiple:!1});G.openEditor(H({imageFile:t[0]},d))}),openEditor:d=>z(void 0,null,function*(){let t="CropperImage";A.open({sheetID:t,type:"normal.middleCenter",size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100vw"},content:o(Z.Core,{val_file:d.imageFile,options:d,finishedCallback:n=>{A.close(t),d.onProcessFinished(n)},abortCallback:()=>{A.close(t)}}),closeAtEscapeKeyDown:!1})})};export{G as Cropper,G as default};
|
|
1
|
+
import{b as H,c as j,e as z}from"../chunk-C5N2D3ZX.js";import{Fragment as ie,jsx as o,jsxs as f}from"react/jsx-runtime";import C,{UUID as J}from"@mingoo/jsmin";import{$$fromRoot as K,useStore as X}from"../@utils";import{useState as N,useEffect as O}from"react";import{Box as P,FAI as M,Column as k}from"../atoms";import{Row as I,Text as F}from"../mols";import{Button as B}from"./Button";import A from"./Sheet";import V from"./Loader";import q from"./Input";import{faPalette as Q}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as ee}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as te}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as ae}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as U}from"../@styles/componentClasses";import Y from"./Tooltips";class re{constructor(t){this.set_scale=t.set_scale,this.val_file=t.val_file,this.develops=t.develops,this.use=t.use,this.componentID=t.componentID,this.scale={current:t.scale.default,default:t.scale.default,min:t.scale.min,max:t.scale.max};let n=t.canvas;this.Canvas={elm:n,ctx:n.getContext("2d")};let i=t.picture.image,{width:e,height:a}=i,r=e/a;this.Picture={elm:i,originDataUrl:i.src,aspect:r,revisedAspect:1,rotate:t.picture.rotate,grayScale:t.picture.grayScale,tone:t.picture.tone},this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:e/2,imageY:a/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let t=this.Canvas.elm,n=this.Picture.elm,i=0,e=0;if(this.use=="square"){let s=t.width/3*2,l=t.height/3*2;i=Math.min(s,l),e=i}else this.use=="wallpaper.horizontal"?(i=t.width*(7/9),e=i/3):this.use=="wallpaper.vertical"&&(e=t.height*(7/9),i=e/2);let{width:a,height:r}=n,p=(t.width-i)/2,u=(t.height-e)/2,y=i/e;this.pst={frame:{x:p,y:u,w:i,h:e,aspect:y},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:r/2,centerX:t.width/2,centerY:t.height/2}}dragEffect(t){let{eventType:n,x:i,y:e}=t;if(n=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:i,y:e},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:r}=this.dragEffectInfo,p=a.x-i,u=a.y-e,y=this.scale.current*this.Picture.revisedAspect/100,s=p/y*r.x,l=u/y*r.y;n=="move"?this.drawImage(this.pst.imageX+s,this.pst.imageY+l):n=="end"&&this.drawImage(this.pst.imageX+=s,this.pst.imageY+=l)}}pinchEffect(t){let{eventType:n,event:i}=t,{x:e,y:a}=C.getCursor(i.touches[0]),{x:r,y:p}=C.getCursor(i.touches[1]),u=r-e,y=p-a;if(n=="start")this.pinchEffectInfo.origin={x:u,y,scale:this.scale.current};else if(n=="move"){let{origin:s}=this.pinchEffectInfo,l=Math.sqrt(Math.pow(s.x,2)+Math.pow(s.y,2)),S=Math.sqrt(Math.pow(u,2)+Math.pow(y,2))/l,v=Number(s.scale*S);this.set_scale(v)}}updateScale(t){let n=t;n=Math.max(n,this.scale.min),n=Math.min(n,this.scale.max),this.scale.current=n,this.drawImage()}updateFilter(t){this.Picture.grayScale=t.grayScale,this.Picture.tone=t.tone,this.Picture.rotate=t.rotate,this.modifyImage()}modifyImage(){return z(this,null,function*(){let{grayScale:t,tone:n,rotate:i}=this.Picture;const e=document.createElement("canvas");let a=e.getContext("2d"),r=yield C.ImageLoader(this.Picture.originDataUrl),p=r.width,u=r.height;(i==90||i==270)&&(p=r.height,u=r.width),e.width=p,e.height=u,t&&(a.filter="grayscale("+t+"%)"),i&&(a.translate(p/2,u/2),a.rotate(i*Math.PI/180),[90,270].includes(i)?a.translate(-u/2,-p/2):a.translate(-p/2,-u/2)),a.drawImage(r,0,0,r.width,r.height);let y=a.getImageData(0,0,e.width,e.height),s=y.data;{t/=100;let v=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][n],x=v[0]/255,b=v[1]/255,c=v[2]/255;for(let m=0;m<u;m++)for(let h=0;h<p;h++){var l=(m*p+h)*4;if(t){let R=.3*s[l]+.59*s[l+1]+.11*s[l+2];for(var g=0;g<3;g++){let T=s[l+g];s[l+g]=T+(R-T)*t}}s[l]*=x,s[l+1]*=b,s[l+2]*=c}}a.putImageData(y,0,0);let S=e.toDataURL("image/jpeg");{let v=yield C.ImageLoader(S),{width:x,height:b}=v,c=x/b;this.Picture=j(H({},this.Picture),{elm:v,aspect:c,revisedAspect:this.pst.frame.aspect>c?this.pst.frame.w/x:this.pst.frame.h/b})}this.drawImage()})}drawImage(t,n){let{use:i,Canvas:{ctx:e,elm:a},pst:{frame:r}}=this,p=t||this.pst.imageX,u=n||this.pst.imageY;{let y=this.scale.current/100,s=this.Picture.revisedAspect*y,l=this.pst.centerX-p*s,g=this.pst.centerY-u*s,S=this.Picture.elm.width*s,v=this.Picture.elm.height*s;{let x=this.pst.frame.x+this.pst.frame.w-S,b=this.pst.frame.x,c=this.pst.frame.y+this.pst.frame.h-v,m=this.pst.frame.y,h=0;l<x&&(h=l-x),l>b&&(h=l-b);let R=0;g<c&&(R=g-c),g>m&&(R=g-m),this.dragEffectInfo.origin.x+=h/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=R/2/this.dragEffectInfo.frameExpandRate.y,l=Math.min(Math.max(l,x),b),g=Math.min(Math.max(g,c),m)}this.pst.outImage={x:l,y:g,w:S,h:v},e.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),e.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,l,g,S,v)}{if(i=="square"){e.fillStyle="rgba( 20,24,20,.3 )",e.beginPath();let l=a.width/3*2,g=a.height/3*2,S=Math.min(l,g),v=Math.max(l,g);e.arc(a.width/2,a.height/2,v,0,Math.PI*2,!0),e.arc(a.width/2,a.height/2,S/2,0,Math.PI*2,!1),e.closePath(),e.fill()}else(i=="wallpaper.horizontal"||i=="wallpaper.vertical")&&(e.fillStyle="rgba( 20,24,20,.3 )");e.beginPath(),e.moveTo(0,0),e.lineTo(a.width,0),e.lineTo(a.width,a.height),e.lineTo(0,a.height),e.lineTo(0,0),e.closePath(),e.lineTo(r.x,r.y),e.lineTo(r.x,r.y+r.h),e.lineTo(r.x+r.w,r.y+r.h),e.lineTo(r.x+r.w,r.y),e.lineTo(r.x,r.y),e.fill();let s=C(document.body).getStyleProperty("--color-theme-hsl");e.lineWidth=4,e.strokeStyle=`hsla( ${s},1 )`,e.strokeRect(r.x,r.y,r.w,r.h)}}export(){return z(this,null,function*(){let{Canvas:t,develops:n,Picture:i,pst:{outImage:e,frame:a}}=this,r=e.w/i.elm.width,p=e.h/i.elm.height,u=(a.x-e.x)/r,y=(a.x-e.x+a.w)/r,s=(a.y-e.y)/p,l=(a.y-e.y+a.h)/p,g=Array.from({length:n.length}),S="image/jpeg";for(let v=0;v<n.length;v++){let{size:x,maxSize:b}=n[v];b=b||{S:1024*20,R:1024*100,L:1024*350}[x];let c={S:140,R:600,L:1200}[x],m=c;this.use=="wallpaper.horizontal"?m=c/3:this.use=="wallpaper.vertical"&&(m=c*2);let h=document.createElement("canvas");h.width=c,h.height=m;let R=h.getContext("2d");if(!R)return;R.clearRect(0,0,c,m),R.drawImage(this.Picture.elm,u,s,y-u,l-s,0,0,c,m);let T=h.toDataURL(S),w=yield T.toBlob(S);if(!w)return;if(w.size>=b){let L=b/w.size;if(T=h.toDataURL(S,L*.92),w=yield T.toBlob(S),!w)return}let W=new File([w],this.val_file.name,{type:S});g[v]=W}return g})}}const Z={Core:d=>{let{val_file:t,options:n,finishedCallback:i,abortCallback:e}=d,{use:a,develops:r=[]}=n,[p]=N(J());const u={scale:{default:120,min:100,max:400},rotate:0,grayScale:0,tone:0};let[y,s]=N(u.scale.default),[l,g]=N(u.rotate),[S,v]=N(u.grayScale),[x,b]=N(u.tone);return O(()=>{let c="CropperResize";return C(window).addEvent({eventType:"resize",eventID:c,callback:()=>{C.interval.clear("CropperResize"),C.interval.standBy("CropperResize",200,()=>{var L;let m=K("#Canvas-"+p)[0];if(!m)return;let h=(L=X.get(p))==null?void 0:L.Instance;if(!h)return;let R=m.position(),T=R.width/R.height;m.width=2400,m.height=2400/T;let{width:w,height:W}=m;h.pst.centerX=w/2,h.pst.centerY=W/2,h.frameSizing(),h.modifyImage()})}}),()=>{C(window).removeEvent(c)}},[]),O(()=>{X.set({[p]:{}}),z(void 0,null,function*(){V.fn.corner.active(),yield C.pending(()=>{},400);let{target:c}=yield t.convert();if(!c)return;let m=c.result,h=K("#Canvas-"+p)[0];if(!h)return;let R=h.position(),T=R.width/R.height;h.width=2400,h.height=2400/T;let w=new re({set_scale:s,val_file:t,develops:r,use:a,scale:u.scale,componentID:p,canvas:h,picture:{image:yield C.ImageLoader(m),grayScale:u.grayScale,tone:u.tone,rotate:u.rotate}});X.set({[p]:{Instance:w}});const W=function(E){if(E.preventDefault(),E.touches&&E.touches.length>1)w.pinchEffect({eventType:"start",event:E}),C(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:D=>{D.preventDefault(),w.pinchEffect({eventType:"move",event:D})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:$});else{w.dragEffect(H({eventType:"start"},C.getCursor(E)));let{type:D}=E;C(document).addEvent({eventType:D=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{L("move",_)}}).addEvent({eventType:D=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{L("end",_),$(_)}})}},L=function(E,D){D.preventDefault(),w.dragEffect(H({eventType:E},C.getCursor(D)))},$=function(E){E.preventDefault(),C(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};C(h).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:E=>{E.preventDefault();let D=Number(E.wheelDelta*.04),_=w.scale.current+D;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),s(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:W,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:W,options:{passive:!1}}),setTimeout(()=>{V.fn.corner.stop()},1e3)})},[t.id]),O(()=>{var m;let c=(m=X.get(p))==null?void 0:m.Instance;c&&c.updateScale(y)},[y]),O(()=>{var m;let c=(m=X.get(p))==null?void 0:m.Instance;c&&c.updateFilter({grayScale:S,tone:x,rotate:l})},[S,x,l]),o(A.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:f(k,{className:[U("Wrap"),U("Use_"+a)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[o(P,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:o("canvas",{style:{width:"100%",height:"100%"},width:2400,height:2400,className:U("Canvas"),id:"Canvas-"+p})}),f(I.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[o(Z.SettingRegion,{DefaultOptions:u,val_scale:y,set_scale:s,val_tone:x,set_tone:b,val_grayScale:S,set_grayScale:v,val_rotate:l,set_rotate:g}),f(I.Right,{flexSizing:"none",children:[o(B.Border,{isRounded:!0,onClick:()=>{e()},children:"\u9589\u3058\u308B"}),o(B,{isRounded:!0,boxShadow:"3.remark",onClick:()=>z(void 0,null,function*(){var h;let c=(h=X.get(p))==null?void 0:h.Instance;if(!c)return;V.fn.mini.active("CropperExportation");let m=yield c.export();setTimeout(()=>{V.fn.mini.stop("CropperExportation"),i(m)},3e3)}),children:f(I.Center,{gap:"1/2",children:[o(V.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:d=>{let t=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],n=i=>t[i]||"\u306A\u3057";return f(I.Left,{verticalAlign:"unset",flexWrap:!0,children:[f(k,{gap:"1/3",children:[o(F.Supplement,{children:"Rotate"}),f(I.Left,{flexChilds:"even",gap:"1/6",children:[o(B.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let i=d.val_rotate-90;i<0&&(i+=360),d.set_rotate(i)},children:f(I.Center,{gap:"1/4",children:["90\xB0",o(M,{icon:te})]})}),o(B.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{d.set_rotate((d.val_rotate+90)%360)},children:f(I.Center,{gap:"1/4",children:[o(M,{icon:ae}),"90\xB0"]})})]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Zoom"}),f(B.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperZoomEdit";Y.open({tipsID:e,gravityPoint:3,event:i,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(A.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(B.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{override:"force",value:d.val_scale-100,min:d.DefaultOptions.scale.min-100,max:d.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:a,value:r})=>{C.interval.clear("Cropper.UpdateScale"),C.interval.standBy("Cropper.UpdateScale",250,()=>{d.set_scale(r+100)})},legends:{enable:!0,custom:a=>"x"+Math.round(100+a)/100}})]})})})},children:[d.val_scale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"GrayScale"}),f(B.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperGrayScaleEdit";Y.open({tipsID:e,gravityPoint:3,event:i,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(A.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M,{icon:Q,fontColor:"5.translucent"}),"Gray Scale"]})}),o(B.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{value:d.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:a})=>{C.interval.clear("Cropper.GrayScale"),C.interval.standBy("Cropper.GrayScale",250,()=>{d.set_grayScale(a)})},legends:{enable:!0,custom:a=>a+"%"}})]})})})},children:[d.val_grayScale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Tone"}),o(B.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperToneEdit";Y.open({tipsID:e,gravityPoint:3,event:i,closeAtParentBlur:!1,freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let a=[];for(let r=1;r<=10;r++)a.push({value:r,label:f(ie,{children:[o(P,{ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+r)].join(" ")}),o(P,{textAlign:"left",flexSizing:0,children:n(r)})]})});return o(A.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M,{icon:ee,fontColor:"5.translucent"}),"Tone"]})}),o(B.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Radio.Normal,{value:d.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(P,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...a],onUpdateValidValue:({value:r})=>{d.set_tone(r)}})]})})}})},children:f(I.Center,{gap:"1/2",children:[o(P,{boxShadow:"2.remark",ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+d.val_tone)].join(" ")}),n(d.val_tone)]})})]})]})}},G={openDialogNEdit:d=>z(void 0,null,function*(){let t=yield q.Filer.fn.openDialog({accept:"image",multiple:!1});G.openEditor(H({imageFile:t[0]},d))}),openEditor:d=>z(void 0,null,function*(){let t="CropperImage";A.open({sheetID:t,type:"normal.middleCenter",size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100vw"},content:o(Z.Core,{val_file:d.imageFile,options:d,finishedCallback:n=>{A.close(t),d.onProcessFinished(n)},abortCallback:()=>{A.close(t)}}),closeAtEscapeKeyDown:!1})})};export{G as Cropper,G as default};
|
package/dist/fn/Effect/Fade.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as a,c as i,d as
|
|
1
|
+
import{b as a,c as i,d as s}from"../../chunk-C5N2D3ZX.js";import{jsx as D}from"react/jsx-runtime";import{UUID as u}from"@mingoo/jsmin";import{$$fromRoot as l}from"../../@utils";import{useState as I,useEffect as f}from"react";import{Box as d}from"../../atoms";const y=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentID:c=u()}=n,e=s(n,["animationDelay","animationTime","componentID"]),[t]=I(c);return f(()=>{setTimeout(()=>{let o=l('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1})},p)},[]),D(d,i(a({},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentID:t}))},S=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentID:c=u()}=n,e=s(n,["animationDelay","animationTime","componentID"]),[t]=I(c);return f(()=>{setTimeout(()=>{let o=l('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1,paddingTop:0})},p)},[]),D(d,i(a({paddingTop:2},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentID:t}))};export{y as FadeIn,S as FadeUp};
|
package/dist/fn/Effect/Ripple.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import"../../chunk-C5N2D3ZX.js";import
|
|
1
|
+
import"../../chunk-C5N2D3ZX.js";import t,{UUID as b}from"@mingoo/jsmin";import{Config as u}from"../../@utils";import{EffectClasses as n}from"../../@styles/componentClasses";const a={RippleElementTag:'[data-effect-ripple="1"]',Start:p=>{let s=t.Time().ms,d=p.target,e=t(d);if(!e[0])return;let i=e.getAttribute("data-effect-tone");if(!i){let r=e.parent('[data-effect-ripple="1"]');if(!r[0])return;e=r,i=r.getAttribute("data-effect-tone")}if(!i)return;let l="RippleWrap-"+b(),{left:o,top:c,height:I,width:E}=e.position(),{pageXOffset:R,pageYOffset:h}=t.getScreenSize(),{x:g,y:T}=t.getCursor(p),f=Math.min(E*1.5,300),M=Math.max(g-(o+R),0),y=Math.max(T-(c+h),0),m={RippleElement:e,startedAt:s,size:f};t(document).addEvent({eventID:"RippleMouseUp",eventType:"mouseup",callback:()=>{a.End(m)}}).addEvent({eventID:"RippleTouchEnd",eventType:"touchend",callback:()=>{setTimeout(()=>{a.End(m)},20)}}),t(e).addClass([n("RippleElement"),n("Color_"+i)]).append(`<div class="${n("RippleWrap")}" id="${l}">
|
|
2
2
|
<div class="${n("Wave")}" />
|
|
3
|
-
</div>`).addEvent({eventID:"RippleMouseOut",eventType:"mouseout",callback:r=>{a.End(
|
|
3
|
+
</div>`).addEvent({eventID:"RippleMouseOut",eventType:"mouseout",callback:r=>{a.End(m)}}).find("#"+l).find("."+n("Wave")).css({left:M,top:y}).await(10).css({height:f,width:f,opacity:".3",transition:".25s"})},End:p=>{let{RippleElement:s,startedAt:d,size:e}=p,l=t.Time().ms-d<=400?".75s":".55s",o=e*2.5;t(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),s.removeEvent(["RippleMouseOut"]).find("."+n("Wave")).css({height:o,width:o,opacity:"0",transition:l}).await(750).parent().callback(c=>{c.remove()})}},v={Wrapper:()=>(typeof window=="undefined"||t(u.get().appRoot).addEvent({eventType:"touchstart",target:a.RippleElementTag,callback:p=>{a.Start(p)}}).addEvent({eventType:"mousedown",eventID:"RippleMouseDown",target:a.RippleElementTag,callback:p=>{u.get().isTouchDevice||a.Start(p)}}),null)};export{v as Ripple,v as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as v,c as D,d as j,e as Q}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as l,jsxs as K}from"react/jsx-runtime";import{useState as g,useEffect as T,useRef as ne}from"react";import a from"@mingoo/jsmin";import{ExtractStyles as ae,useStore as Y}from"../../@utils";import{Box as x,Span as re,FAI as J,Column as ie}from"../../atoms";import{Text as B,Row as N}from"../../mols";import{Button as Z}from"../Button";import{Loader as se}from"../Loader";import{Sheet as M}from"../Sheet";import{OptionalInputWrapper as ue,BoxWrapper as ce,CoreEffects as L,DefaultBoxishStyles as pe}from"./core";import{InputAutocompleteClasses as P}from"../../@styles/componentClasses";import{InputLabel as de}from"./Label";import{RightIcon as ee}from".";function me(t){let{value:e,states:n}=t,{required:o,options:d,min:c,max:S}=n;c=c||0,S=S||65535;let r=[],i=e.filter(m=>m!==null).length;return o&&(i||r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),i<c&&r.push({type:"invalid",label:c+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),i>S&&r.push({type:"invalid",label:S+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!r.filter(({type:m})=>m=="invalid").length,notice:r}}const A={InitOptions:t=>{let e=[];return t.forEach(n=>{let{type:o,label:d,value:c,searchValue:S}=n,r=S||(a.is.string(d)?d:"")||(a.is.string(c)?c:"");e.push(D(v({},n),{searchValue:r,type:o||"selector",value:c}))}),e},FilterSelectableOptions:(t,e)=>{let n=t.val_options;if(e||(n=t.val_options.filter(o=>o.type!="label")),t.val_keyword){let o=t.val_keyword.toLower().replace(/ /g,"");n=n.filter(d=>(d.searchValue||"").toLower().replace(/ /g,"").includes(o))}return n}},R={Shallow:t=>{let{rootStates:e,val_status:n}=t,o=ae(e);return l(x,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(B.Description,D(v({className:e.className},o),{position:"absolute",width:1,freeCSS:D(v({},o.freeCSS),{color:"orange"}),"data-id":"shallow_"+n.componentID,children:l(x,{"data-input-value-shallow":n.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_keyword:n,set_keyword:o,val_optionFocused:d,set_optionFocused:c,val_options:S,set_options:r,val_optionsDict:i,set_optionsDict:m,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:u,val_selectorOpen:f,set_selectorOpen:y,val_status:p,set_status:C,val_validate:b,set_validate:V}=t,X=e,{tone:w,required:O,form:F,className:k,multiSelect:U,enableFormSubmit:E,checkValidationAtFirst:z,onValidate:q,onUpdateValue:W,onUpdateValidValue:Se,value:fe="",options:ve,leftIndicator:he,rightIndicator:ye,leftIcon:_e,rightIcon:ge,componentID:be,status_id:Oe,wrapStyles:Ie,emptySelect:De,SearchInput:Ce,SearchInputPlaceholder:we,SelectedComponent:Te,SelectorComponent:Ve,SelectorGravityPoint:ke,DynamicOptionsOnSearch:xe}=X,_=j(X,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorGravityPoint","DynamicOptionsOnSearch"]);T(()=>{var I;if(e.disabled||!f)return;let h=A.FilterSelectableOptions(t);c(((I=h[0])==null?void 0:I.value)||null)},[n]),T(()=>{p.eventType!="init"&&(e.max==p.dataValue.length?(y(!1),u(!0),setTimeout(()=>{let h=a('[data-input-origin="'+e.componentID+'"]');h&&h.focus()},10)):a("#SearchInput_"+e.componentID).focus())},[p.dataValue]);let G="autocomplete-sheet-"+e.componentID;return T(()=>{let h="autocomplete-click-"+e.componentID;if(f){let I=a('[data-input-origin="'+e.componentID+'"]');if(!I)return;a("#SearchInput_"+e.componentID).focus(),M.open({sheetID:G,type:"custom",parent:I[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,closeAtAroundClick:!1,content:l(R.Selector,v({},t))}),a(document).addEvent({eventID:h,eventType:"mousedown",callback:oe=>{let $=a(oe.target),le=!!a($).parent("."+P("Core")).length;a($).parent("."+P("Selector")).length||le||y(!1)}})}else a(document).removeEvent([h]),o(""),M.close(G)},[f]),T(()=>{if(e.disabled||!f)return;M.customSheet.reposition(G);let h=Y.get("refresh-autocomplete-selector-"+e.componentID);h&&h(t)},[S,p.dataValue,n,d]),l(H,{children:l(x,D(v({tabIndex:0},_),{"data-disabled":e.disabled,"data-show-validation":L.isShowValidation(b,p,!!z),"data-component-id":p.componentID,"data-input-origin":p.componentID,"data-focus":!!f,className:[k,P("Core")].join(" "),onFocus:h=>{if(_!=null&&_.onFocus&&(_==null||_.onFocus(h)),!e.disabled){if(s)return u(!1);y(!0),h.preventDefault()}},onClick:h=>{_!=null&&_.onClick&&(_==null||_.onClick(h)),!e.disabled&&y(!0)},onKeyDown:h=>{let{key:I}=h;E&&L.SubmitForm(h,F),!f&&(I==" "||I=="ArrowDown"||I=="ArrowUp"||I=="Enter")&&y(!0)},children:K(N.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(R.Selected,v({},t)),l(re,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(R.SearchInput,v({},t))]})}))})},SearchInput:t=>{let{rootStates:e}=t;return e.disabled||!t.val_selectorOpen?null:l(x,{id:"SearchInput_"+e.componentID,placeholder:e.SearchInputPlaceholder||"\u691C\u7D22...",opacity:t.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:t.val_keyword,freeCSS:{outline:"none"},onKeyDown:n=>{let{key:o,metaKey:d,ctrlKey:c}=n,S=d||c;o=="Escape"?(t.set_selectorOpen(!1),t.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let r=a('[data-input-origin="'+e.componentID+'"]');r&&r.focus()},10)):o=="Tab"?t.set_selectorOpen(!1):o==" "?a.scope(()=>{t.val_selectorOpen||t.val_keyword||(n.preventDefault(),t.set_selectorOpen(!0))}):o=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.dataValue];r.pop(),t.set_status(i=>D(v({},i),{dataValue:r,eventType:"update",eventID:a.uuid.gen()}))}):o=="Enter"&&a.scope(()=>{if(!t.val_selectorOpen)return t.set_selectorOpen(!0);let r=t.val_options.find(m=>m.value==t.val_optionFocused);if(!r)return;let{value:i}=r;t.set_status(m=>{let s=[...m.dataValue];return a.scope(()=>{if(i===null)return s=[];m.dataValue.includes(i)?s=s.filter(f=>f!==i):e.multiSelect?s.push(i):s=[i]}),D(v({},m),{dataValue:s,eventType:"update",eventID:a.uuid.gen()})}),t.set_keyword(""),t.set_preventDynamicSearchOnKeywordChange(!0)}),a.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(n.preventDefault(),!t.val_selectorOpen)return t.set_selectorOpen(!0);let r=o=="ArrowDown"?1:-1,i=A.FilterSelectableOptions(t),m=i.length-1,s=null;a.scope(()=>{var f,y,p,C;let u=i.findIndex(b=>b.value==t.val_optionFocused);if(r==1){if(s=((f=i[0])==null?void 0:f.value)||null,S){s=i[m].value||null;return}if(u==-1||u==m)return;s=((y=i[u+1])==null?void 0:y.value)||null}else{if(s=i[m].value||null,S){s=((p=i[0])==null?void 0:p.value)||null;return}if(u==-1||u==0)return;s=((C=i[u-1])==null?void 0:C.value)||null}}),t.set_optionFocused(s)}),e.enableFormSubmit&&L.SubmitForm(n,t.rootStates.form)},onChange:n=>{let d=n.target.value;t.set_keyword(d)}},"searchInput")},Selector:t=>{let[e,n]=g(t),{rootStates:o}=e,[d,c]=g("idle"),[S,r]=g("idle");T(()=>{Y.set({["refresh-autocomplete-selector-"+o.componentID]:u=>{n(u)}})},[]),T(()=>{if(!e.val_selectorOpen||!o.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(d=="idle")return c("ok");r("fetch");let u="autocomplete-search-"+o.componentID;a.interval.clear(u),a.interval.standBy(u,300,()=>Q(void 0,null,function*(){let f=yield o.DynamicOptionsOnSearch(e.val_keyword);r("idle");let y=A.InitOptions(f||[]);e.set_options(y)}))},[e.val_keyword]);let i=[],m=A.FilterSelectableOptions(e,!0),s=A.FilterSelectableOptions(e);return m.forEach((u,f)=>{let{type:y,value:p}=u,C=e.val_optionFocused==p,b=e.val_status.dataValue.includes(p),V=o.SelectorComponent;i.push(l(V,{option:u,isFocused:C,isSelected:b,addCallback:()=>{e.set_status(w=>{let O=[...w.dataValue];return a.scope(()=>{if(p===null)return O=[];w.dataValue.includes(p)?O=O.filter(k=>k!==p):o.multiSelect?O.push(p):O=[p]}),D(v({},w),{dataValue:O,eventType:"update",eventID:a.uuid.gen()})})}},a.JsonTo(p)||a.uuid.gen()))}),s.length||(i=[l(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),S=="fetch"&&(i=[K(N.Left,{padding:1,fontColor:"3.blur",children:[l(se.Theme.R,{showInitial:!0}),l(B.Supplement,{children:"Loading..."})]},"loader")]),l(M.Body,{className:P("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*18},children:l(ie,{gap:0,padding:[1,0],children:i})})},Selected:t=>{let{rootStates:e,val_status:n,set_status:o,val_optionsDict:d}=t,c=[];return n.dataValue.forEach(S=>{let r=d[a.JsonTo(S)];if(!r)return;let i=e.SelectedComponent,m=r.label;r.value===null&&(m=""),c.push(l(x,{className:P("SelectedCell"),children:l(i,{value:r.value,label:m,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),e.disabled)return;let u=[...n.dataValue];u=u.filter(f=>f!==S),o(f=>D(v({},f),{dataValue:u,eventType:"update",eventID:a.uuid.gen()}))}})},a.JsonTo(r.value)))}),l(H,{children:c})},Core:t=>{let{value:e}=t,[n,o]=g(!1),[d,c]=g(!1),[S,r]=g(!1),[i,m]=g(""),[s,u]=g(t.options),[f,y]=g(t.value[0]||null),[p,C]=g({}),[b,V]=g(L.DefaultStatus(t.componentID,e)),[w,O]=g({ok:!1,notice:[]}),F=ne(!1);T(()=>{F.current?u(t.options):F.current=!0},[t.options]),T(()=>{if(!s.length)return;let z=[...s],q=v({},p);z.forEach(W=>{W.type!="label"&&(q[a.JsonTo(W.value)]=W)}),C(q)},[s]);let k={rootStates:t,val_options:s,set_options:u,val_optionFocused:f,set_optionFocused:y,val_optionsDict:p,set_optionsDict:C,val_preventDynamicSearchOnKeywordChange:d,set_preventDynamicSearchOnKeywordChange:c,val_preventOpenSelectorOnFocus:n,set_preventOpenSelectorOnFocus:o,val_selectorOpen:S,set_selectorOpen:r,val_keyword:i,set_keyword:m,val_status:b,set_status:V,val_validate:w,set_validate:O},U=!!t.multiSelect;L.CommonEffects({type:U?"autocomplete.multi":"autocomplete.single",states:t,val_status:b,set_status:V,val_validate:w,set_validate:O,SystemValidation:me});let E=b.dataValue.length&&b.dataValue[0]!==null;return E=E||S,K(ce,{val_status:b,set_status:V,val_validate:w,states:t,children:[l(de,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:E}),l(R.Shallow,v({},k)),l(R.Button,v({},k))]})}},te=t=>{let e=v({},t);return e=D(v({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:n,isSelected:o,isFocused:d,addCallback:c})=>n.type=="selector"?l(Z.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:d,isActiveStyles:{backgroundColor:"cloud"},onClick:S=>{c()},children:K(N.Left,{gap:"1/2",children:[o&&l(J.Check,{fontColor:"theme"}),l(B.Supplement,{transition:"short",children:n.label})]})}):l(H,{children:n.label}),SelectedComponent:({value:n,label:o,removeCallback:d})=>K(N.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(x,{padding:[0,"1/4"],children:o}),l(Z.Sub,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:d,children:l(J.Times,{ssSphere:1})})]})},e),{freeCSS:v({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:l(B.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=a.flatArray(e.value||null),e.options=A.InitOptions(e.options),a.is.nullish(e.rightIcon)&&(e.rightIcon=l(ee,{ssSphere:2,children:l(J.Search,{})}),e.disabled&&(e.rightIcon=l(ee,{ssSphere:2,fontColor:"5.translucent",children:l(J.Ban,{})}))),e.rightIcon&&(e=v({paddingRight:3},e)),e.leftIcon&&(e=v({paddingLeft:3},e)),l(ue,{componentID:e.componentID,children:R.Core,states:pe(e)})};export{te as Autocomplete,te as default};
|
|
1
|
+
import{b as v,c as D,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as l,jsxs as W}from"react/jsx-runtime";import{useState as b,useEffect as T,useRef as ae}from"react";import i,{UUID as B}from"@mingoo/jsmin";import{ExtractStyles as re,useStore as Z}from"../../@utils";import{Box as x,Span as ie,FAI as N,Column as se}from"../../atoms";import{Text as L,Row as M}from"../../mols";import{Button as ee}from"../Button";import{Loader as ue}from"../Loader";import{Sheet as U}from"../Sheet";import{OptionalInputWrapper as ce,BoxWrapper as pe,CoreEffects as P,DefaultBoxishStyles as de}from"./core";import{InputAutocompleteClasses as K}from"../../@styles/componentClasses";import{InputLabel as me}from"./Label";import{RightIcon as te}from".";function Se(t){let{value:e,states:n}=t,{required:o,options:d,min:c,max:S}=n;c=c||0,S=S||65535;let a=[],r=e.filter(m=>m!==null).length;return o&&(r||a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),r<c&&a.push({type:"invalid",label:c+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),r>S&&a.push({type:"invalid",label:S+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!a.filter(({type:m})=>m=="invalid").length,notice:a}}const A={InitOptions:t=>{let e=[];return t.forEach(n=>{let{type:o,label:d,value:c,searchValue:S}=n,a=S||(i.is.string(d)?d:"")||(i.is.string(c)?c:"");e.push(D(v({},n),{searchValue:a,type:o||"selector",value:c}))}),e},FilterSelectableOptions:(t,e)=>{let n=t.val_options;if(e||(n=t.val_options.filter(o=>o.type!="label")),t.val_keyword){let o=t.val_keyword.toLower().replace(/ /g,"");n=n.filter(d=>(d.searchValue||"").toLower().replace(/ /g,"").includes(o))}return n}},R={Shallow:t=>{let{rootStates:e,val_status:n}=t,o=re(e);return l(x,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(L.Description,D(v({className:e.className},o),{position:"absolute",width:1,freeCSS:D(v({},o.freeCSS),{color:"orange"}),"data-id":"shallow_"+n.componentID,children:l(x,{"data-input-value-shallow":n.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_keyword:n,set_keyword:o,val_optionFocused:d,set_optionFocused:c,val_options:S,set_options:a,val_optionsDict:r,set_optionsDict:m,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:u,val_selectorOpen:f,set_selectorOpen:y,val_status:p,set_status:C,val_validate:I,set_validate:V}=t,$=e,{tone:w,required:O,form:F,className:k,multiSelect:X,enableFormSubmit:E,checkValidationAtFirst:z,onValidate:q,onUpdateValue:J,onUpdateValidValue:fe,value:ve="",options:he,leftIndicator:ye,rightIndicator:_e,leftIcon:be,rightIcon:Ie,componentID:Oe,status_id:ge,wrapStyles:De,emptySelect:Ce,SearchInput:we,SearchInputPlaceholder:Te,SelectedComponent:Ve,SelectorComponent:ke,SelectorGravityPoint:xe,DynamicOptionsOnSearch:Ae}=$,_=Q($,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorGravityPoint","DynamicOptionsOnSearch"]);T(()=>{var g;if(e.disabled||!f)return;let h=A.FilterSelectableOptions(t);c(((g=h[0])==null?void 0:g.value)||null)},[n]),T(()=>{p.eventType!="init"&&(e.max==p.dataValue.length?(y(!1),u(!0),setTimeout(()=>{let h=i('[data-input-origin="'+e.componentID+'"]');h&&h.focus()},10)):i("#SearchInput_"+e.componentID).focus())},[p.dataValue]);let G="autocomplete-sheet-"+e.componentID;return T(()=>{let h="autocomplete-click-"+e.componentID;if(f){let g=i('[data-input-origin="'+e.componentID+'"]');if(!g)return;i("#SearchInput_"+e.componentID).focus(),U.open({sheetID:G,type:"custom",parent:g[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,closeAtAroundClick:!1,content:l(R.Selector,v({},t))}),i(document).addEvent({eventID:h,eventType:"mousedown",callback:le=>{let j=i(le.target),ne=!!i(j).parent("."+K("Core")).length;i(j).parent("."+K("Selector")).length||ne||y(!1)}})}else i(document).removeEvent([h]),o(""),U.close(G)},[f]),T(()=>{if(e.disabled||!f)return;U.customSheet.reposition(G);let h=Z.get("refresh-autocomplete-selector-"+e.componentID);h&&h(t)},[S,p.dataValue,n,d]),l(H,{children:l(x,D(v({tabIndex:0},_),{"data-disabled":e.disabled,"data-show-validation":P.isShowValidation(I,p,!!z),"data-component-id":p.componentID,"data-input-origin":p.componentID,"data-focus":!!f,className:[k,K("Core")].join(" "),onFocus:h=>{if(_!=null&&_.onFocus&&(_==null||_.onFocus(h)),!e.disabled){if(s)return u(!1);y(!0),h.preventDefault()}},onClick:h=>{_!=null&&_.onClick&&(_==null||_.onClick(h)),!e.disabled&&y(!0)},onKeyDown:h=>{let{key:g}=h;E&&P.SubmitForm(h,F),!f&&(g==" "||g=="ArrowDown"||g=="ArrowUp"||g=="Enter")&&y(!0)},children:W(M.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(R.Selected,v({},t)),l(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(R.SearchInput,v({},t))]})}))})},SearchInput:t=>{let{rootStates:e}=t;return e.disabled||!t.val_selectorOpen?null:l(x,{id:"SearchInput_"+e.componentID,placeholder:e.SearchInputPlaceholder||"\u691C\u7D22...",opacity:t.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:t.val_keyword,freeCSS:{outline:"none"},onKeyDown:n=>{let{key:o,metaKey:d,ctrlKey:c}=n,S=d||c;o=="Escape"?(t.set_selectorOpen(!1),t.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let a=i('[data-input-origin="'+e.componentID+'"]');a&&a.focus()},10)):o=="Tab"?t.set_selectorOpen(!1):o==" "?i.scope(()=>{t.val_selectorOpen||t.val_keyword||(n.preventDefault(),t.set_selectorOpen(!0))}):o=="Backspace"?i.scope(()=>{if(t.val_keyword)return;let a=[...t.val_status.dataValue];a.pop(),t.set_status(r=>D(v({},r),{dataValue:a,eventType:"update",eventID:B()}))}):o=="Enter"&&i.scope(()=>{if(!t.val_selectorOpen)return t.set_selectorOpen(!0);let a=t.val_options.find(m=>m.value==t.val_optionFocused);if(!a)return;let{value:r}=a;t.set_status(m=>{let s=[...m.dataValue];return i.scope(()=>{if(r===null)return s=[];m.dataValue.includes(r)?s=s.filter(f=>f!==r):e.multiSelect?s.push(r):s=[r]}),D(v({},m),{dataValue:s,eventType:"update",eventID:B()})}),t.set_keyword(""),t.set_preventDynamicSearchOnKeywordChange(!0)}),i.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(n.preventDefault(),!t.val_selectorOpen)return t.set_selectorOpen(!0);let a=o=="ArrowDown"?1:-1,r=A.FilterSelectableOptions(t),m=r.length-1,s=null;i.scope(()=>{var f,y,p,C;let u=r.findIndex(I=>I.value==t.val_optionFocused);if(a==1){if(s=((f=r[0])==null?void 0:f.value)||null,S){s=r[m].value||null;return}if(u==-1||u==m)return;s=((y=r[u+1])==null?void 0:y.value)||null}else{if(s=r[m].value||null,S){s=((p=r[0])==null?void 0:p.value)||null;return}if(u==-1||u==0)return;s=((C=r[u-1])==null?void 0:C.value)||null}}),t.set_optionFocused(s)}),e.enableFormSubmit&&P.SubmitForm(n,t.rootStates.form)},onChange:n=>{let d=n.target.value;t.set_keyword(d)}},"searchInput")},Selector:t=>{let[e,n]=b(t),{rootStates:o}=e,[d,c]=b("idle"),[S,a]=b("idle");T(()=>{Z.set({["refresh-autocomplete-selector-"+o.componentID]:u=>{n(u)}})},[]),T(()=>{if(!e.val_selectorOpen||!o.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(d=="idle")return c("ok");a("fetch");let u="autocomplete-search-"+o.componentID;i.interval.clear(u),i.interval.standBy(u,300,()=>Y(void 0,null,function*(){let f=yield o.DynamicOptionsOnSearch(e.val_keyword);a("idle");let y=A.InitOptions(f||[]);e.set_options(y)}))},[e.val_keyword]);let r=[],m=A.FilterSelectableOptions(e,!0),s=A.FilterSelectableOptions(e);return m.forEach((u,f)=>{let{type:y,value:p}=u,C=e.val_optionFocused==p,I=e.val_status.dataValue.includes(p),V=o.SelectorComponent;r.push(l(V,{option:u,isFocused:C,isSelected:I,addCallback:()=>{e.set_status(w=>{let O=[...w.dataValue];return i.scope(()=>{if(p===null)return O=[];w.dataValue.includes(p)?O=O.filter(k=>k!==p):o.multiSelect?O.push(p):O=[p]}),D(v({},w),{dataValue:O,eventType:"update",eventID:B()})})}},i.JsonTo(p)||B()))}),s.length||(r=[l(L.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),S=="fetch"&&(r=[W(M.Left,{padding:1,fontColor:"3.blur",children:[l(ue.Theme.R,{showInitial:!0}),l(L.Supplement,{children:"Loading..."})]},"loader")]),l(U.Body,{className:K("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*18},children:l(se,{gap:0,padding:[1,0],children:r})})},Selected:t=>{let{rootStates:e,val_status:n,set_status:o,val_optionsDict:d}=t,c=[];return n.dataValue.forEach(S=>{let a=d[i.JsonTo(S)];if(!a)return;let r=e.SelectedComponent,m=a.label;a.value===null&&(m=""),c.push(l(x,{className:K("SelectedCell"),children:l(r,{value:a.value,label:m,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),e.disabled)return;let u=[...n.dataValue];u=u.filter(f=>f!==S),o(f=>D(v({},f),{dataValue:u,eventType:"update",eventID:B()}))}})},i.JsonTo(a.value)))}),l(H,{children:c})},Core:t=>{let{value:e}=t,[n,o]=b(!1),[d,c]=b(!1),[S,a]=b(!1),[r,m]=b(""),[s,u]=b(t.options),[f,y]=b(t.value[0]||null),[p,C]=b({}),[I,V]=b(P.DefaultStatus(t.componentID,e)),[w,O]=b({ok:!1,notice:[]}),F=ae(!1);T(()=>{F.current?u(t.options):F.current=!0},[t.options]),T(()=>{if(!s.length)return;let z=[...s],q=v({},p);z.forEach(J=>{J.type!="label"&&(q[i.JsonTo(J.value)]=J)}),C(q)},[s]);let k={rootStates:t,val_options:s,set_options:u,val_optionFocused:f,set_optionFocused:y,val_optionsDict:p,set_optionsDict:C,val_preventDynamicSearchOnKeywordChange:d,set_preventDynamicSearchOnKeywordChange:c,val_preventOpenSelectorOnFocus:n,set_preventOpenSelectorOnFocus:o,val_selectorOpen:S,set_selectorOpen:a,val_keyword:r,set_keyword:m,val_status:I,set_status:V,val_validate:w,set_validate:O},X=!!t.multiSelect;P.CommonEffects({type:X?"autocomplete.multi":"autocomplete.single",states:t,val_status:I,set_status:V,val_validate:w,set_validate:O,SystemValidation:Se});let E=I.dataValue.length&&I.dataValue[0]!==null;return E=E||S,W(pe,{val_status:I,set_status:V,val_validate:w,states:t,children:[l(me,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:E}),l(R.Shallow,v({},k)),l(R.Button,v({},k))]})}},oe=t=>{let e=v({},t);return e=D(v({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:n,isSelected:o,isFocused:d,addCallback:c})=>n.type=="selector"?l(ee.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:d,isActiveStyles:{backgroundColor:"cloud"},onClick:S=>{c()},children:W(M.Left,{gap:"1/2",children:[o&&l(N.Check,{fontColor:"theme"}),l(L.Supplement,{transition:"short",children:n.label})]})}):l(H,{children:n.label}),SelectedComponent:({value:n,label:o,removeCallback:d})=>W(M.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(x,{padding:[0,"1/4"],children:o}),l(ee.Sub,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:d,children:l(N.Times,{ssSphere:1})})]})},e),{freeCSS:v({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:l(L.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=i.flatArray(e.value||null),e.options=A.InitOptions(e.options),i.is.nullish(e.rightIcon)&&(e.rightIcon=l(te,{ssSphere:2,children:l(N.Search,{})}),e.disabled&&(e.rightIcon=l(te,{ssSphere:2,fontColor:"5.translucent",children:l(N.Ban,{})}))),e.rightIcon&&(e=v({paddingRight:3},e)),e.leftIcon&&(e=v({paddingLeft:3},e)),l(ce,{componentID:e.componentID,children:R.Core,states:de(e)})};export{oe as Autocomplete,oe as default};
|
package/dist/fn/Input/Color.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as e,c as r,d as h}from"../../chunk-C5N2D3ZX.js";import{jsx as m}from"react/jsx-runtime";import{
|
|
1
|
+
import{b as e,c as r,d as h}from"../../chunk-C5N2D3ZX.js";import{jsx as m}from"react/jsx-runtime";import{UUID as b}from"@mingoo/jsmin";import{useState as v}from"react";import x from"../../atoms/Box";import{OptionalInputWrapper as _,BoxWrapper as k,CoreEffects as p,DefaultBoxishStyles as F}from"./core";import{InputSwitchClasses as R}from"../../@styles/componentClasses";function w(t){let{value:n,states:d}=t,{required:s}=d,o=[];return s&&!n&&o.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!o.filter(({type:c})=>c=="invalid").length,notice:o}}const B=t=>{let y=t,{componentID:n,required:d,form:s,enableFormSubmit:o,checkValidationAtFirst:c,onChange:I,onKeyDown:f,onValidate:E,onUpdateValue:U,onUpdateValidValue:W,value:g=""}=y,S=h(y,["componentID","required","form","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value"]),[l,i]=v(p.DefaultStatus(t.componentID||"",g)),[u,C]=v({ok:!1,notice:[]});return p.CommonEffects({type:"color",states:t,val_status:l,set_status:i,val_validate:u,set_validate:C,SystemValidation:w}),m(k,{val_status:l,set_status:i,val_validate:u,states:t,children:m(x,e({htmlTag:"input",type:"color","data-component-id":l.componentID,value:l.dataValue,className:R("Input"),onKeyDown:a=>{f&&f(a),o&&p.SubmitForm(a,s)},onChange:a=>{let{value:T}=a.target;u.ok&&C({ok:!1,notice:[]}),i(V=>r(e({},V),{dataValue:T,eventType:"update",eventID:b()})),I&&I(a)}},S))})},D=t=>{let n=r(e(r(e({},F(t)),{backgroundColor:"cloud",unitHeight:3}),t),{freeCSS:e({minWidth:108},t.freeCSS)});return m(_,{componentID:t.componentID,children:B,states:n})};export{D as Color,D as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as r,d as b}from"../../chunk-C5N2D3ZX.js";import{jsx as
|
|
1
|
+
import{b as o,c as r,d as b}from"../../chunk-C5N2D3ZX.js";import{jsx as c}from"react/jsx-runtime";import{UUID as g}from"@mingoo/jsmin";import{useState as h}from"react";import{OptionalInputWrapper as w,BoxWrapper as _,CoreEffects as s,DefaultBoxishStyles as B}from"./core";import{Box as k}from"../../atoms";function F(t){let{value:e,states:d}=t,{required:m}=d,n=[];return m&&!e&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:p})=>p=="invalid").length,notice:n}}const H=t=>{let T=t,{componentID:e,tone:d,required:m,form:n,value:p,enableFormSubmit:S,checkValidationAtFirst:C,onInput:f,onKeyDown:I,onValidate:L,onUpdateValue:M,onUpdateValidValue:U,children:D="",leftIndicator:W,rightIndicator:q,leftIcon:A,rightIcon:K,freeCSS:G,wrapStyles:N}=T,E=b(T,["componentID","tone","required","form","value","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","children","leftIndicator","rightIndicator","leftIcon","rightIcon","freeCSS","wrapStyles"]),[i,u]=h(s.DefaultStatus(e,p)),[l,y]=h({ok:!1,notice:[]});return s.CommonEffects({type:"contenteditable",states:t,val_status:i,set_status:u,val_validate:l,set_validate:y,SystemValidation:F}),c(_,{val_status:i,set_status:u,val_validate:l,states:t,children:c(k,r(o({contentEditable:!0,"data-show-validation":s.isShowValidation(l,i,!!C),"data-component-id":i.componentID,onKeyDown:a=>{I&&I(a),S&&s.SubmitForm(a,n)},onInput:a=>{let R=a.currentTarget,{innerHTML:O,innerText:V}=R;l.ok&&y({ok:!1,notice:[]}),u(x=>r(o({},x),{dataValue:V,eventType:"update",eventID:g()})),f&&f(a)}},E),{children:D}))})},v=t=>{t=r(o({rows:5},t),{freeCSS:o({whiteSpace:"pre-wrap"},t.freeCSS)});let e=B(t);return c(w,{componentID:t.componentID,children:H,states:e})};export{v as Contenteditable,v as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as t,c as p,d as V}from"../../chunk-C5N2D3ZX.js";import{jsx as
|
|
1
|
+
import{b as t,c as p,d as V}from"../../chunk-C5N2D3ZX.js";import{jsx as I}from"react/jsx-runtime";import{useState as F}from"react";import B,{UUID as C}from"@mingoo/jsmin";import{$$fromRoot as K,GenerateHTMLProps as W}from"../../@utils";import{OptionalInputWrapper as U,BoxWrapper as $,CoreEffects as w,DefaultBoxishStyles as P}from"./core";import{Flex as q}from"../../atoms";import{InputClasses as R}from"../../@styles/componentClasses";function j(e){let{value:a,states:l}=e,{required:u,numericOnly:o=!1,digits:f}=l,r=[];return u&&!a&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),a&&(o&&a.match(/\D/)&&r.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),a.length!=f&&r.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!r.filter(({type:d})=>d=="invalid"||d=="warn").length,notice:r}}const z=(e,a="")=>{let l=String(a),u=[];for(let o=0;o<e;o++)u[o]=l[o]||"";return{formatValue:u,dataValue:l}},A=(e="")=>{let a=e,l=a.join("");return{formatValue:a,dataValue:l}},G=e=>{let v=e,{tone:a,required:l,form:u,name:o,className:f="",digits:r,numericOnly:h=!1,enableFormSubmit:d,checkValidationAtFirst:J,onChange:Q,onKeyDown:X,onValidate:Y,onUpdateValue:Z,onUpdateValidValue:ee,value:N="",override:te,freeCSS:ae,wrapStyles:ne,combineInput:ie,componentID:re,listStyles:_}=v,le=V(v,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","override","freeCSS","wrapStyles","combineInput","componentID","listStyles"]),[s,y]=F(p(t({componentID:e.componentID||""},z(r,N)),{eventType:"init",eventID:C()})),[S,k]=F({ok:!1,notice:[]});w.CommonEffects({type:"textfield",states:e,val_status:s,set_status:y,val_validate:S,set_validate:k,SystemValidation:j});let b=[];for(let n=0;n<r;n++){let E=s.formatValue[n],H={},x=f;e.combineInput&&(x=[f,R("DigitCharacterCell"),R("Combined")].join(" ")),b.push(I("input",{type:"text",inputMode:h?"numeric":e.inputMode||"text",value:E,id:"Digit-"+n+"-"+s.componentID,className:x,style:t(t({},e.style),H),onKeyDown:D=>{let{key:g,code:L}=D;if(g=="Tab")return;D.preventDefault();let m=null;if(g=="Backspace"){let i=s.formatValue;i[n]="",y(c=>p(t(t({},c),A(i)),{eventType:"update",eventID:C()})),m=n-1}else if(["ArrowLeft","ArrowRight"].includes(g)){let i=+(g=="ArrowRight")*2-1;m=n+i}else d&&w.SubmitForm(D,u),(()=>{let i=L.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!i)return;let c=i[2]||i[3]||i[4];if(h&&!c.match(/\d/)||!c)return;let T=s.formatValue;T[n]=c,y(O=>p(t(t({},O),A(T)),{eventType:"update",eventID:C()})),m=n+1})();B.is.exist(m)&&K("#Digit-"+m+"-"+s.componentID).focus()},onChange:()=>{}},n))}return I($,{val_status:s,set_status:y,val_validate:S,states:e,children:I(q,p(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},_),{children:b}))})},M=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=p(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let a=W(P(e));return I(U,{componentID:e.componentID,children:G,states:a})};export{M as DigitCharacters,M as default};
|
package/dist/fn/Input/Filer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as s,c as u,d as Q,e as U}from"../../chunk-C5N2D3ZX.js";import{Fragment as le,jsx as l,jsxs as p}from"react/jsx-runtime";import{useState as H,useEffect as X}from"react";import
|
|
1
|
+
import{b as s,c as u,d as Q,e as U}from"../../chunk-C5N2D3ZX.js";import{Fragment as le,jsx as l,jsxs as p}from"react/jsx-runtime";import{useState as H,useEffect as X}from"react";import ie,{UUID as T}from"@mingoo/jsmin";import{$$fromRoot as V,useStore as Y,ExtractStyles as se}from"../../@utils";import{Box as d,FAI as R,Flex as P,Column as ee}from"../../atoms";import{Row as re}from"../../mols";import{Button as L}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as pe,BoxWrapper as ue,CoreEffects as te,DefaultBoxishStyles as me}from"./core";import ce from"./TextField";import{InputFilerClasses as f}from"../../@styles/componentClasses";import{faCloudArrowUp as de}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function fe(e){let{value:t,states:n}=e,{required:m}=n,a=[];return m&&!t.length&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:c})=>c=="invalid").length,notice:a}}const ae={List:e=>{let{rootStates:t,val_status:n,set_status:m}=e;if(t.useSystemOnly)return null;let a=t.limit-(n.dataValue||[]).length,c=(n.dataValue||[]).map((r,g)=>l(ae.ListCell,u(s({},e),{index:g,val_file:r}),r.name));return a>0&&c.push(l(d,u(s({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,f("AddButton")].join(" "),"data-component-id":n.componentID,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:r=>{let{key:g}=r;t.tabIndex!=-1&&[" ","Enter"].includes(g)&&V("#"+t.id).click()},children:p(re.Center,{padding:["1/3",0],children:[l(d,{isRounded:!0,className:f("AddIcon"),children:l(R,{icon:de,className:f("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),p(d,{children:[p(d,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",a,")"]}),l(d,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton")),l(ee,u(s({flexSizing:"auto"},se(t)),{className:t.className,children:c}))},ListCell:e=>{let{index:t,rootStates:n,val_file:m,val_status:a,set_status:c}=e,{name:r,size:g,type:o}=m,[x,D]=H(!1),B=T(),K=g.rank(),[W,M]=r.replace(/\s/,"").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),i="\u30D5\u30A1\u30A4\u30EB";return o.match(/image/)?i=o.replace(/image\//,""):o.match(/pdf/)?i="PDF":o.match(/csv/)?i="CSV":o.match(/spreadsheet/)?i="SpreadSheet":o.match(/presentation/)?i="PowerPoint":o.match(/word/)?i="Word":o.match(/zip/)?i="Zip":o.match(/powerpoint/)?i="PowerPoint":o.match(/html/)?i="HTML":o.match(/js/)?i="JavaScript":o.match(/css/)?i="CSS":o.match(/text\/plain/)&&(i="\u30C6\u30AD\u30B9\u30C8"),X(()=>{x&&setTimeout(()=>{V("#"+B).focus()},100)},[x]),p(P,u(s({verticalAlign:"center",flexWrap:!1,gap:1,className:n.cellClassName},n.cellStyles),{children:[l(R.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),p(d,{flexSizing:0,children:[l(d,{children:l(P,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:f("FileName"),children:x?l(le,{children:p(ee,{flexSizing:0,gap:"1/2",children:[p(P,{gap:"2/3",verticalAlign:"center",children:[l(ce,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:B,form:"form-"+B,enableFormSubmit:!0,value:W,onKeyDown:C=>{let{key:N}=C;N=="Escape"&&D(!1)}}),p(d,{children:[". ",M]})]}),p(P,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[l(L.Sub,{padding:["2/3",1],onClick:()=>{D(!1)},children:"\u9589\u3058\u308B"}),l(L,{padding:["2/3",1],submitOption:{formName:"form-"+B,callback:C=>U(void 0,null,function*(){let{name:N}=C,b=[...a.dataValue],w=b[t],J=w.id;if(!w)return;let{target:$}=yield w.convert();if(!$)return;let y=yield String($.result).toBlob(m.type);if(!y)return;let F=new File([y],N+"."+M,{type:w.type});F.id=J,b[t]=F,c(_=>u(s({},_),{dataValue:b,eventType:"update",eventID:T()})),D(!1)})},children:"\u6C7A\u5B9A"})]})]})}):p(le,{children:[r,!!n.isNameEditable&&l(L.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{D(!0)},children:l(R.Pen,{})})]})})}),!x&&p(d,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[i,"\u30D5\u30A1\u30A4\u30EB / ",K,"B"]})]}),l(L.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let C=[...a.dataValue];C[t]&&(C.splice(t,1),c(b=>u(s({},b),{dataValue:C,eventType:"update",eventID:T()})))},children:l(R.Times,{})})]}))}},ge=e=>{let G=e,{tone:t,required:n,form:m,isNameEditable:a,useSystemOnly:c,accept:r="*",limit:g=1,checkValidationAtFirst:o,onChange:x,onValidate:D,onUpdateValue:B,onUpdateValidValue:K,value:W=[],className:M,cellStyles:i,cellClassName:C,componentID:N,status_id:b,enableFormSubmit:w,freeCSS:J,wrapStyles:$}=G,Z=Q(G,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onUpdateValue","onUpdateValidValue","value","className","cellStyles","cellClassName","componentID","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[y,F]=H(te.DefaultStatus(e.componentID||"",W)),[_,ne]=H({ok:!1,notice:[]}),oe={rootStates:e,val_status:y,set_status:F};X(()=>{Y.set({["AddFiles-"+y.componentID]:v=>{F(A=>{let I=A.dataValue,k=[];for(var S=0;S<(v==null?void 0:v.length);S++){let h=v[S],{type:E,name:z}=h;if(S+1+I.length>g){j.add({componentID:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${z}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(r&&r=="image"&&!E.match(/image/)){j.add({componentID:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${z} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}k.push(h)}return u(s({},A),{dataValue:[...I,...k],eventType:"update",eventID:T()})})}})},[]),te.CommonEffects({type:"file",states:e,val_status:y,set_status:F,val_validate:_,set_validate:ne,SystemValidation:fe});let O="";return r&&(r=="image"?O="image/png,image/jpeg":O=r),p(ue,{val_status:y,set_status:F,val_validate:_,states:e,children:[l(d,u(s({htmlTag:"input",type:"file",className:f("Input"),"data-component-id":y.componentID,accept:O,multiple:g!=1,onChange:v=>U(void 0,null,function*(){x&&x(v);let A=v.target,I=A.files,k=[];for(var S=0;S<(I==null?void 0:I.length);S++){let h=I[S],E=h.name;if(h.id=T(),S+1+y.dataValue.length>g){j.add({componentID:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}k.push(h)}F(h=>u(s({},h),{dataValue:[...h.dataValue,...k],eventType:"update",eventID:T()})),A.value=""})},Z),{opacity:"low",tabIndex:-1,value:""})),l(ae.List,s({},oe))]})},q=e=>(e=u(s({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:s(s({},me({tone:e.tone||"border"})),e.cellStyles)}),l(pe,{componentID:e.componentID,children:ge,states:e}));q.fn={openDialog:e=>{let{multiple:t,accept:n}=e;return new Promise(m=>{const a=document.createElement("input");a.type="file",a.multiple=t!=null?t:!0,n&&(n=="image"?a.accept="image/png,image/jpeg":a.accept=n),a.onchange=c=>{m(c.target.files)},a.click()})}},typeof window!="undefined"&&window.document&&ie(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),V("."+f("AddButton")).addClass(f("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),V("."+f("AddButton")).removeClass(f("Draggable"));let t=e.dataTransfer.files;if(t.length){let n=e.target;if(V(n).hasClass(f("AddButton"))){let{componentId:m}=n.dataset,a=Y.get("AddFiles-"+m);a&&a(t)}}},options:{passive:!1}});export{q as Filer,q as default};
|
package/dist/fn/Input/Hidden.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as n,c as a,d as
|
|
1
|
+
import{b as n,c as a,d as r}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as u}from"@mingoo/jsmin";import{useState as p,useEffect as v}from"react";import{OptionalInputWrapper as D,CoreEffects as g}from"./core";const S=t=>{let s=t,{componentID:m="",enableFormSubmit:b,form:V,value:e=""}=s,c=r(s,["componentID","enableFormSubmit","form","value"]),[i,o]=p({componentID:t.componentID||"",dataValue:e,eventType:"init",eventID:u()}),[f,I]=p({ok:!1,notice:[]});return v(()=>{JSON.stringify(i.dataValue)!=JSON.stringify(e)&&o(y=>a(n({},y),{dataValue:e,eventType:"update",eventID:u()}))},[t.value]),g.CommonEffects({type:"hidden",states:t,val_status:i,set_status:o,val_validate:f,set_validate:I,SystemValidation:()=>({ok:!0,notice:[]})}),d("input",a(n({value:JSON.stringify(e),"data-component-id":m},c),{type:"hidden"}))},l=t=>d(D,{componentID:t.componentID,children:S,states:t});export{l as Hidden,l as default};
|
package/dist/fn/Input/List.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as l,c as
|
|
1
|
+
import{b as l,c as h,d as A}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as Ce}from"react/jsx-runtime";import g,{UUID as J}from"@mingoo/jsmin";import{useState as ee}from"react";import{$$fromRoot as ne,GenerateHTMLProps as se}from"../../@utils";import{Box as b,Flex as ie,FAI as re}from"../../atoms";import{Button as te}from"../Button";import{OptionalInputWrapper as de,BoxWrapper as ce,CoreEffects as M}from"./core";import{InputListClasses as I}from"../../@styles/componentClasses";function ue(t){let{value:o,states:n}=t,{type:e,required:c,min:s,max:m}=n;s=s||0,m=m||65535;let i=[],f=o.length;return c&&(f||e=="radio"&&i.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),f<s&&i.push({type:"invalid",label:s+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),f>m&&i.push({type:"invalid",label:m+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!i.filter(({type:y})=>y=="invalid").length,notice:i}}const V={OptionalListWrapper:t=>{let{value:o,options:n=[]}=t,e=g.is.exist(o)?g.flatArray(o):[],c=[];return e.forEach(s=>{n.findIndex(i=>g.JsonTo(i.value)==g.JsonTo(s))!=-1&&c.push(s)}),a(V.Core,h(l({},t),{value:c,options:n}))},Core:t=>{let F=t,{type:o,tone:n,required:e,componentID:c="",form:s,override:m,icon:i,iconType:f,CustomIcon:y,enableFormSubmit:P,checkValidationAtFirst:w,onValidate:W,onUpdateValue:X,onUpdateValidValue:v,value:D,options:$,className:U,cellStyles:k,cellClassName:K,cellCheckedStyles:q,cellCheckedClassName:H,min:z,max:j,hideInput:G,freeCSS:R,wrapStyles:u}=F,N=A(F,["type","tone","required","componentID","form","override","icon","iconType","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","freeCSS","wrapStyles"]),[p,x]=ee(M.DefaultStatus(c,D)),[C,_]=ee({ok:!1,notice:[]});return M.CommonEffects({type:"list."+o,states:t,val_status:p,set_status:x,val_validate:C,set_validate:_,SystemValidation:ue}),a(ce,{val_status:p,set_status:x,val_validate:C,states:t,children:a(V.List,{rootStates:t,val_status:p,set_status:x})})},List:t=>{let{rootStates:o,val_status:n,set_status:e}=t,{componentID:c,type:s,tone:m,icon:i=!0,isChecker:f,options:y,name:P,form:w,tabIndex:W,hideInput:X,disabled:v,className:D,cellStyles:$,cellClassName:U="",cellCheckedStyles:k,cellCheckedClassName:K="",enableFormSubmit:q}=o,{dataValue:H}=n,z=o.CustomIcon,j=y.map((G,R)=>{let Z=G,{value:u,label:N,disabled:p,className:x="",checkedStyles:C,checkedClassName:_="",freeCSS:F}=Z,oe=A(Z,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),Q=J(),L=H.findIndex(r=>r===u)!=-1,S=l(l({},$),oe),B=[I("Label"),U,x];L&&(S=h(l(l(l({},S),k),C),{freeCSS:l(l(l({},S==null?void 0:S.freeCSS),k==null?void 0:k.freeCSS),C==null?void 0:C.freeCSS)}),B=[...B,K,_]);const Y=()=>{if(v||p)return;let r=[];if(s=="radio")r=[u];else if(s=="checkbox"||f)if(!L)r=[...n.dataValue,u];else{let d=[...n.dataValue];d.splice(n.dataValue.findIndex(E=>E==u),1),r=d}e(d=>h(l({},d),{dataValue:r,eventType:"update",eventID:J()}))};return[a(b,{htmlTag:"input",type:s=="radio"?"radio":"checkbox",className:I("Input"),name:"RadioCheckbox-"+P,"data-list-index":c+"-"+R,id:Q,value:String(u),disabled:v||p,checked:L,onFocus:r=>{p||s=="radio"&&(n.dataValue.length||e(d=>h(l({},d),{dataValue:[u],eventType:"update",eventID:J()})))},onChange:()=>{Y()},onKeyDown:r=>{let{key:d,shiftKey:E}=r;if((s=="checkbox"||t.rootStates.isChecker)&&d!="Tab"){if(d.match(/Arrow/)){r.preventDefault();let ae=["ArrowLeft","ArrowUp"].includes(d)?-1:1,T=R+ae;T<0?T=y.length-1:T>=y.length&&(T=0),ne(`input[data-list-index="${c}-${T}"]`).focus()}}q&&M.SubmitForm(r,w)},tabIndex:W},"List-"+JSON.stringify(u)),Ce(b,h(l({htmlTag:"label","data-disabled":v||p,htmlFor:Q,className:B.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",gap:"1/6",flexWrap:!1},S),{children:[i&&a(z,{isChecked:L,toggle:()=>{Y()}}),g.is.string(N)?a(b,{children:N}):N]}),"ListTrigger-"+JSON.stringify(u))]});return a(ie,{flexSizing:"auto",style:o.style,freeCSS:l({},o.freeCSS),className:[D,I("CellBase"),I("HideInput_"+X),I("IconIndicator_"+!!i),I("Tone_"+m)].join(" "),children:j})},RadioIcon:t=>a(te.Normal,{ssPushable:!0,tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:3,onClick:o=>{o.preventDefault(),o.stopPropagation(),t.toggle()},children:a(b,{ssSphere:1.5,border:"3.thick",borderWidth:2,borderColor:t.isChecked?"theme":"3.thick",position:"relative",transition:"middle",children:a(b,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.isChecked?"theme":"trans",opacity:t.isChecked?"max":"trans",freeCSS:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.6)"}})})}),CheckboxIcon:t=>a(te.Normal,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:3,onClick:o=>{o.preventDefault(),o.stopPropagation(),t.toggle()},children:a(b,{ssSquare:1.5,flexCenter:!0,border:"3.thick",borderWidth:2,borderColor:t.isChecked?"theme":"3.thick",borderRadius:"3.tone.tertiary",position:"relative",backgroundColor:t.isChecked?"theme":"trans",transition:"middle",fontColor:"white",children:a(re.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8}})})})},O=t=>{t=t||"checkbox";const o=e=>(e=h(l({gap:"1/2",iconType:t=="radio"?"radio":"checkbox"},e),{type:t,cellStyles:l({position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=V.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=V.CheckboxIcon)),e.tone=="normal"?(e.cellStyles=l({padding:["1/4",1],border:"1.thin",isRounded:!0,backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=l({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=l({paddingRight:1,border:"1.thin",isRounded:!0,backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=l({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=l({paddingRight:1,isRounded:!0,border:"1.thin",backgroundColor:"layer.2"},e.cellStyles),e.cellCheckedStyles=l({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=se(e),a(de,{componentID:e.componentID,children:V.OptionalListWrapper,states:e})),n=o;return n.Normal=e=>a(o,l({type:t,tone:"normal",icon:!1},e)),n.Border=e=>a(o,l({type:t,tone:"border"},e)),n.Cloud=e=>a(o,l({type:t,tone:"cloud"},e)),n.Vivid=e=>a(o,l({type:t,tone:"normal",icon:!1,cellCheckedStyles:{backgroundColor:"theme",fontColor:"white"}},e)),n.Simple=e=>a(o,l({type:t,tone:"plain",icon:!1,cellCheckedStyles:{fontColor:"theme"}},e)),n},me=O("checkbox"),pe=O("radio"),le=O();export{me as Checkbox,le as List,pe as Radio,le as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as e,c as n,d as C}from"../../chunk-C5N2D3ZX.js";import{jsx as r}from"react/jsx-runtime";import x
|
|
1
|
+
import{b as e,c as n,d as C}from"../../chunk-C5N2D3ZX.js";import{jsx as r}from"react/jsx-runtime";import{UUID as x}from"@mingoo/jsmin";import{useState as a}from"react";import{Radio as w}from"./List";import{InputSegmentedClasses as u}from"../../@styles/componentClasses";const E=t=>{let m=t,{__sys_segmented_type:o,tone:R,value:d,options:S,onUpdateValue:h,onUpdateValidValue:p,enableFormSubmit:B,checkValidationAtFirst:M,cellStyles:g,cellClassName:_,cellCheckedClassName:b,cellCheckedStyles:f,freeCSS:k,wrapStyles:J}=m,I=C(m,["__sys_segmented_type","tone","value","options","onUpdateValue","onUpdateValidValue","enableFormSubmit","checkValidationAtFirst","cellStyles","cellClassName","cellCheckedClassName","cellCheckedStyles","freeCSS","wrapStyles"]),[T]=a(x()),[i,V]=a(d),[v,c]=a(i);return i!=d&&(V(d),c(d)),r(w,n(e({options:S,value:v,componentID:T,icon:!1,flexWrap:!1,borderRadius:"2.tone.secondary",position:"relative"},I),{freeCSS:e({whiteSpace:"nowrap"},k),cellStyles:e({flexCenter:!0,ssEffectsOnActive:"push"},g),cellCheckedStyles:e({},f),cellClassName:[_,u("Label"),u("Tone_"+o.replace(/\./ig,""))].join(" "),cellCheckedClassName:[b,u("Checked")].join(" "),tone:"custom",onUpdateValue:h,onUpdateValidValue:y=>{p&&p(y),o=="bottomline"&&c(y.value)}}))},s=t=>{let{__sys_segmented_type:o}=t;return o=o||"plain",o=="plain"&&(t=n(e({padding:"1/3",gap:"1/3",ssCardBox:!0,isRounded:!0},t),{cellStyles:e({isRounded:!0,padding:["1/2","3/4"],borderRadius:"inherit",position:"relative"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme",boxShadow:"1.normal",fontColor:"white"},t.cellCheckedStyles)})),r(E,e({__sys_segmented_type:"plain"},t))},l=s;l.Cloud=t=>{let o=n(e({__sys_segmented_type:"cloud",padding:"1/3",gap:"1/3",backgroundColor:"cloud"},t),{cellStyles:e({padding:"3/4",borderRadius:"inherit",position:"relative"},t.cellStyles),cellCheckedStyles:e({boxShadow:"1.normal",backgroundColor:"theme",fontColor:"white"},t.cellCheckedStyles)});return r(s,e({},o))},l.CloudTheme=t=>{let o=e({backgroundColor:"theme.opa.few",fontColor:"theme",__sys_segmented_type:"cloud.theme"},t);return r(l.Cloud,e({},o))},l.CloudMono=t=>{let o=n(e({fontColor:"3.blur",__sys_segmented_type:"cloud.mono"},t),{cellCheckedStyles:e({backgroundColor:"layer.1",fontColor:"1.clear"},t.cellCheckedStyles)});return r(l.Cloud,e({},o))},l.Border=t=>{let o=n(e({backgroundColor:"layer.1",border:"2.normal",overflow:"hidden",gap:0,fontColor:"3.blur",ssLastChildLossBorder:"right",boxShadow:"0.min",__sys_segmented_type:"border"},t),{cellStyles:e({padding:["3/4",1],borderRadius:0,borderRight:"2.normal"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme.opa.few",fontColor:"theme"},t.cellCheckedStyles)});return r(s,e({},o))},l.BorderVivid=t=>{let o=n(e({border:!0,borderColor:"theme",__sys_segmented_type:"border.vivid"},t),{cellStyles:e({borderRight:!0,borderColor:"theme"},t.cellStyles),cellCheckedStyles:e({backgroundColor:"theme",fontColor:"white"},t.cellCheckedStyles)});return r(l.Border,e({},o))},l.Bottomline=t=>{let o=n(e({__sys_segmented_type:"bottomline",gap:0,fontColor:"3.blur"},t),{cellStyles:e({ssEffectsOnActive:"ripple.theme",borderRadius:0,padding:1},t.cellStyles),cellCheckedStyles:e({fontColor:"theme"},t.cellCheckedStyles)});return r(s,e({},o))};export{l as Segmented,l as default};
|
package/dist/fn/Input/Select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as s,c as m,d as J}from"../../chunk-C5N2D3ZX.js";import{Fragment as
|
|
1
|
+
import{b as s,c as m,d as J}from"../../chunk-C5N2D3ZX.js";import{Fragment as Q,jsx as l,jsxs as N}from"react/jsx-runtime";import p,{UUID as R}from"@mingoo/jsmin";import{useState as _,useEffect as F}from"react";import{ExtractStyles as ae,useStore as M}from"../../@utils";import{Box as T,Span as oe,FAI as $,Column as ne}from"../../atoms";import{Text as w,Row as X}from"../../mols";import{Button as re}from"../Button";import{Sheet as P}from"../Sheet";import{OptionalInputWrapper as se,BoxWrapper as ie,CoreEffects as A,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as E}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as pe}from".";function Se(t){let{value:e,states:a}=t,{required:r,options:c}=a,d=[];return r&&e===null&&d.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!d.filter(({type:b})=>b=="invalid").length,notice:d}}const L={FilterSelectableOptions:(t,e)=>{let a=t.rootStates.options;return e||(a=a.filter(r=>r.type!="label")),a}},V={Shallow:t=>{let{rootStates:e,val_status:a}=t,r=ae(e);return l(T,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(w.Description,m(s({className:e.className},r),{position:"absolute",width:1,freeCSS:m(s({},r.freeCSS),{color:"orange"}),children:l(T,{"data-input-value-shallow":a.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_preventOpenSelectorOnFocus:a,set_preventOpenSelectorOnFocus:r,val_optionFocused:c,set_optionFocused:d,val_validate:b,set_validate:y,val_status:v,set_status:g,val_selectorOpen:i,set_selectorOpen:u}=t,U=e,{tone:C,required:Y,form:k,className:Z,label:de,isLabelActive:fe,placeholder:me,enableFormSubmit:ee,emptySelect:ve,checkValidationAtFirst:te,onValidate:ye,onUpdateValue:be,onUpdateValidValue:Ie,value:he="",options:ge,leftIndicator:Ce,rightIndicator:De,leftIcon:_e,rightIcon:Te,componentID:Ve,status_id:xe,wrapStyles:Oe,SelectedCellStyles:Re,SelectorCellStyles:Fe,SelectorStyles:we,SelectorGravityPoint:Ae}=U,o=J(U,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorStyles","SelectorGravityPoint"]),K="select-sheet-"+e.componentID;return F(()=>{if(e.disabled)return;let n="select-click-"+e.componentID;if(i){let f=p('[data-input-origin="'+e.componentID+'"]');if(!f)return;P.open({sheetID:K,type:"custom",parent:f[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,closeAtAroundClick:!1,content:l(V.Selector,s({},t))}),p(document).addEvent({eventID:n,eventType:"click",callback:B=>{let x=p(B.target),O=!!p(x).parent("."+E("Core")).length;p(x).parent("."+E("Selector")).length||O||u(!1)}})}else p(document).removeEvent([n]),P.close(K)},[i]),F(()=>{if(v.eventType=="init"||!i)return;let n=p('[data-input-origin="'+e.componentID+'"]');n&&n.focus()},[v.dataValue]),F(()=>{if(e.disabled||!i)return;let n=M.get("refresh-select-selector-"+e.componentID);n&&n(t)},[e.options,v.dataValue,c]),l(Q,{children:l(T,m(s({tabIndex:0},o),{"data-disabled":e.disabled,"data-show-validation":A.isShowValidation(b,v,!!te),"data-component-id":v.componentID,"data-input-origin":v.componentID,className:[Z,E("Core")].join(" "),onFocus:n=>{if(o!=null&&o.onFocus&&(o==null||o.onFocus(n)),!e.disabled){if(a)return r(!1);u(!0)}},onClick:n=>{o!=null&&o.onClick&&(o==null||o.onClick(n)),!e.disabled&&u(!0)},onKeyDown:n=>{let{key:f,metaKey:B,ctrlKey:x}=n,O=B||x;if(o!=null&&o.onKeyDown&&(o==null||o.onKeyDown(n)),ee&&A.SubmitForm(n,k),!e.disabled){if(p.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(f))return;if(n.preventDefault(),!i)return u(!0);let I=f=="ArrowDown"?1:-1,S=L.FilterSelectableOptions(t),W=S.length-1,h=null;p.scope(()=>{var q,G,z,H;let D=S.findIndex(le=>le.value==c);if(I==1){if(h=((q=S[0])==null?void 0:q.value)||null,O){h=S[W].value||null;return}if(D==-1||D==W)return;h=((G=S[D+1])==null?void 0:G.value)||null}else{if(h=S[W].value||null,O){h=((z=S[0])==null?void 0:z.value)||null;return}if(D==-1||D==0)return;h=((H=S[D-1])==null?void 0:H.value)||null}}),d(h)}),f=="Escape")u(!1);else if(f=="Tab")u(!1);else if(f=="Backspace")g(I=>m(s({},I),{dataValue:null,eventType:"update",eventID:R()}));else if(f==" ")n.preventDefault(),u(!0);else if(f=="Enter"){if(!i)return u(!0);n.preventDefault();let I=e.options.find(S=>S.value==c);if(!I)return;g(S=>m(s({},S),{dataValue:I.value,eventType:"update",eventID:R()})),u(!1)}}},children:N(X.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(V.Placeholder,s({},t)),l(V.Selected,s({},t)),l(oe,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})}))})},Placeholder:t=>!t.rootStates.placeholder||t.val_status.dataValue!==null?null:l(T,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:t.rootStates.placeholder||""}),Selector:t=>{let[e,a]=_(t),{rootStates:r}=e;F(()=>{M.set({["refresh-select-selector-"+r.componentID]:y=>{a(y)}})},[]);let c=[],d=L.FilterSelectableOptions(e,!0),b=L.FilterSelectableOptions(e);return d.forEach((y,v)=>{let{type:g,value:i}=y,u=e.val_optionFocused==i,C=e.val_status.dataValue===i;if(g=="selector"){c.push(l(re.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:C||u,isActiveStyles:u?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"},onClick:Y=>{e.set_status(k=>m(s({},k),{dataValue:i,eventType:"update",eventID:R()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:N(X.Left,{gap:"1/2",children:[C&&l($.Check,{fontColor:"theme"}),l(w.Supplement,{transition:"short",children:y.label})]})},String(i)));return}c.push(l(T,{children:y.label},R()))}),b.length||(c=[l(w.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),l(P.Body,{className:E("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*14},children:l(ne,{gap:0,padding:[1,0],children:c})})},Selected:t=>{let e=[];return t.val_status.dataValue!==null&&p.scope(()=>{let a=t.rootStates.options.find(r=>p.JsonTo(r.value)==p.JsonTo(t.val_status.dataValue));a&&e.push(l(T,m(s({},t.rootStates.SelectedCellStyles),{children:a.label}),String(a.value)))}),l(Q,{children:e})},Core:t=>{let{value:e}=t,[a,r]=_(A.DefaultStatus(t.componentID,e)),[c,d]=_(!1),[b,y]=_(!1),[v,g]=_(t.value||null),[i,u]=_({ok:!1,notice:[]}),C={rootStates:t,val_preventOpenSelectorOnFocus:c,set_preventOpenSelectorOnFocus:d,val_optionFocused:v,set_optionFocused:g,val_selectorOpen:b,set_selectorOpen:y,val_status:a,set_status:r,val_validate:i,set_validate:u};return A.CommonEffects({type:"select",states:t,val_status:a,set_status:r,val_validate:i,set_validate:u,SystemValidation:Se}),N(ie,{val_status:a,set_status:r,val_validate:i,states:t,children:[l(ce,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:t.isLabelActive||a.dataValue!==null}),l(V.Shallow,s({},C)),l(V.Button,s({},C))]})}},j=t=>{let e=s({},t);return e=m(s({emptySelect:!0},e),{freeCSS:s({cursor:"pointer"},e.freeCSS)}),e.emptySelect&&(e.options=[{value:null,label:l(w.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=e.value||null,e.options.forEach((a,r)=>{let{type:c,value:d}=a;e.options[r]=m(s({},a),{value:d,type:c||"selector"})}),p.is.nullish(e.rightIcon)&&(e.rightIcon=l(pe,{ssSphere:2,children:l($.AngleDown,{})})),l(se,{componentID:e.componentID,children:V.Core,states:ue(e)})};export{j as Select,j as default};
|
package/dist/fn/Input/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as C,c as _,d as
|
|
1
|
+
import{b as C,c as _,d as B}from"../../chunk-C5N2D3ZX.js";import{jsx as d,jsxs as W}from"react/jsx-runtime";import y,{UUID as R}from"@mingoo/jsmin";import{useState as k,useEffect as P}from"react";import{$$fromRoot as I,GenerateHTMLProps as $}from"../../@utils";import{Box as D,Flex as A,Column as q}from"../../atoms";import{Button as O}from"../Button";import{OptionalInputWrapper as G,BoxWrapper as X,CoreEffects as F}from"./core";import{InputSliderClasses as c}from"../../@styles/componentClasses";function j(a){let{value:e,states:n}=a,{required:s}=n,o=[];return s&&!e&&o.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!o.filter(({type:i})=>i=="invalid").length,notice:o}}const z=a=>{let{value:e,val_status:n}=a,{min:s,max:o,step:i}=n;e=Math.max(e,s),e=Math.min(e,o);let t=e/o*o;return t=Math.round(t/i),{stepValue:t*i,stepIndex:t,positionLeft:t*i/o*100+"%"}},N={IndicatorLabels:a=>{let{componentID:e,min:n,max:s,step:o,customLegends:i}=a,r=[],t=Math.round(n/o),p=Math.round(s/o),S=p-t+1;for(var u=t;u<=p;u++){let l=u*o;l=Math.max(l,n),l=Math.min(l,s);let f=l/s*100+"%";r.push(d(D,{className:c("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",verticalAlign:"center",horizontalAlign:"center",freeCSS:{left:f,whiteSpace:"nowrap",textAlign:"center"},children:i?i(l):l.rank()},l))}return P(()=>{const l=()=>{let f=I("#Labels-"+e),{width:v}=f.position(),L=Math.round(v/50)-1,h=Math.round(S/L);for(let m=t+1;m<p;m++)I("#Legend-"+e+"-"+m).css({display:m%h==0?"flex":"none"})};return y(window).addEvent({eventID:"SliderResizeCallback-"+e,eventType:"resize",callback:()=>{l()}}),l(),()=>{y(window).removeEvent("SliderResizeCallback-"+e)}},[]),d(A,{className:c("Labels"),verticalAlign:"center",horizontalAlign:"between",fontSize:"0.xs",position:"relative",unitHeight:1,id:"Labels-"+e,children:d(D,{position:"absolute",top:0,left:0,bottom:0,freeCSS:{right:12*1.5},children:r})})},Rail:a=>{let{val_status:e,set_status:n,DotData:s,form:o,enableFormSubmit:i}=a,{componentID:r}=e;return W(A,{className:c("Rail"),position:"relative",paddingLeft:"1/2",unitHeight:1.5,verticalAlign:"center",freeCSS:{minWidth:"10rem",zIndex:1,cursor:"pointer"},onMouseDown:t=>{a.rootStates.disabled||(t.stopPropagation(),b.Effects.Start(t,{val_status:e,set_status:n,DotData:s}))},onTouchStart:t=>{a.rootStates.disabled||(t.stopPropagation(),b.Effects.Start(t,{val_status:e,set_status:n,DotData:s}))},children:[d(D,{className:c("Bar"),backgroundColor:"layer.4",position:"relative",isRounded:!0,transition:"middle",flexSizing:"none",unitHeight:"2/3",width:1,id:r+"_Bar",children:d(D,{className:c("BarColor"),position:"relative",height:1,width:0,left:0,transition:"long",borderRadius:"inherit",backgroundColor:a.color,opacity:"middle",overflow:"hidden",freeCSS:{width:s.positionLeft},id:r+"_BarColor"})}),d(D,{className:c("BallWrap"),position:"absolute",top:0,left:0,bottom:0,freeCSS:{right:12*1.5},children:d(O.Plain,{className:c("Ball"),position:"absolute",backgroundColor:a.color,top:0,left:0,ssSphere:1.5,freeCSS:{zIndex:2,left:s.positionLeft},id:r+"_Ball",onKeyDown:t=>{b.KeyDownEvent({event:t,val_status:e,set_status:n,DotData:s}),i&&F.SubmitForm(t,o)}})})]})}},b={Effects:{Start:(a,e)=>{y(document).addEvent({eventID:"SliderMouseMove",eventType:"mousemove",callback:n=>{b.Effects.Move(n,e)},options:{passive:!1}}).addEvent({eventID:"SliderTouchMove",eventType:"touchmove",callback:n=>{b.Effects.Move(n,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 n=y.getCursor(a).x,{val_status:s,set_status:o}=e,{componentID:i,min:r,max:t}=s,p=I("#"+i+"_Ball"),S=I("#"+i+"_Bar"),u=I("#"+i+"_BarColor"),{width:l,left:f}=S.position(),v=(n-f)/l;v=Math.max(v,0),v=Math.min(v,1);let L=v*t,h=z({value:L,val_status:s}),m=h.positionLeft,w=h.stepValue;return p.css({left:m}),u.css({width:m}),o(x=>{let E=x.dataValue;return w==E?x:_(C({},x),{dataValue:w,eventType:"update",eventID:R()})}),a.preventDefault(),a.stopPropagation(),!1},End:()=>{y(document).removeEvent(["SliderMouseMove","SliderTouchMove","SliderMouseUp","SliderTouchEnd"])}},KeyDownEvent:a=>{let{event:e,val_status:n,set_status:s}=a,{min:o,max:i,step:r}=n,{key:t,metaKey:p,ctrlKey:S}=e,u=S||p,l=n.dataValue;t.match(/Arrow/)&&(e.preventDefault(),t.match(/Left|Up/)?u?l=o:l-=r:t.match(/Right|Down/)&&(u?l=i:l+=r),l=Math.max(Math.min(l,i),o),s(f=>_(C({},f),{dataValue:l,eventType:"update",eventID:R()})))}},J=a=>{let V=a,{color:e="theme",required:n,form:s="",legends:{enable:o=!0,custom:i,showAlways:r=!1}={},min:t,max:p,step:S,enableFormSubmit:u,checkValidationAtFirst:l,onValidate:f,onUpdateValue:v,onUpdateValidValue:L,value:h="",className:m,freeCSS:w,wrapStyles:x}=V,E=B(V,["color","required","form","legends","min","max","step","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","className","freeCSS","wrapStyles"]),[g,T]=k({componentID:a.componentID||"",dataValue:h,min:t,max:p,step:S,eventType:"init",eventID:R()}),[M,K]=k({ok:!1,notice:[]});F.CommonEffects({type:"slider",states:a,val_status:g,set_status:T,val_validate:M,set_validate:K,SystemValidation:j});let U=z({value:g.dataValue,val_status:g});return d(X,{val_status:g,set_status:T,val_validate:M,states:a,children:W(q,{gap:"1/2",flexSizing:"auto",className:[c("Wrap"),m,c("ShowLegendsAlways_"+r)].join(" "),children:[d(N.Rail,{rootStates:a,color:e,val_status:g,set_status:T,DotData:U,form:s,enableFormSubmit:u}),!!o&&d(N.IndicatorLabels,{componentID:g.componentID,min:t,max:p,step:S,customLegends:i})]})})},H=a=>{let e=C({},a);return d(G,{componentID:a.componentID,children:J,states:$(e)})};export{H as Slider,H as default};
|
package/dist/fn/Input/Switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as r,c as f,d as S}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as
|
|
1
|
+
import{b as r,c as f,d as S}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as T}from"react/jsx-runtime";import{UUID as g}from"@mingoo/jsmin";import{useState as k}from"react";import s from"../../atoms/Box";import{Row as F}from"../../mols";import{Label as N}from"../Button";import{OptionalInputWrapper as L,BoxWrapper as U,CoreEffects as x}from"./core";import{InputSwitchClasses as m}from"../../@styles/componentClasses";function H(t){let{value:e,states:o}=t,{required:I}=o,n=[];return I&&!e&&n.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!n.filter(({type:p})=>p=="invalid").length,notice:n}}const q=t=>{let w=t,{componentID:e,color:o="posi",required:I,form:n,id:p,enableFormSubmit:V,checkValidationAtFirst:M,onChange:y,onKeyDown:b,onValidate:O,onUpdateValue:P,onUpdateValidValue:W,value:R="",icon:C="",appearance:u="material"}=w,B=S(w,["componentID","color","required","form","id","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","icon","appearance"]),[i,c]=k({componentID:t.componentID||"",dataValue:R,eventType:"init",eventID:g()}),[h,v]=k({ok:!1,notice:[]}),d=!!i.dataValue;return x.CommonEffects({type:"switch",states:t,val_status:i,set_status:c,val_validate:h,set_validate:v,SystemValidation:H}),T(U,{val_status:i,set_status:c,val_validate:h,states:t,children:[a(s,r({htmlTag:"input",type:"checkbox","data-component-id":i.componentID,checked:i.dataValue,className:m("Input"),id:p,onKeyDown:l=>{b&&b(l),V&&x.SubmitForm(l,n)},onChange:l=>{let{checked:E}=l.target;h.ok&&v({ok:!1,notice:[]}),c(_=>f(r({},_),{dataValue:E,eventType:"update",eventID:g()})),y&&y(l)}},B)),a(N.Plain,{tabIndex:-1,htmlFor:p,padding:"1/3",transition:"middle",borderRadius:"1.tone.primary",className:m("Label"),children:a(s,f(r({},u=="applely"?{padding:"1/4",isRounded:!0,backgroundColor:d?o:"layer.5"}:{}),{children:T(F.Center,{unitHeight:2.5,position:"relative",freeCSS:{width:12*4.5},children:[u=="material"&&a(s,{position:"absolute",backgroundColor:d?o:"layer.5",isRounded:!0,unitHeight:1,transition:"middle",width:1,opacity:"middle",className:m("Bar")}),a(s,{position:"absolute",top:0,left:0,backgroundColor:u=="material"&&d?o:"white",transition:"middle",ssSphere:2.5,boxShadow:"1.remark",className:m("Dot"),children:C&&a(s,{transition:"middle",ssSquare:2,flexCenter:!0,fontColor:u=="applely"&&d?o:"white",children:C})})]})}))})]})},D=t=>{let e=r({},t);return e.value=!!e.value,e.color=e.color||"theme",a(L,{componentID:e.componentID,children:q,states:e})};export{D as Switch,D as default};
|