amotify 0.2.86 → 0.2.87
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/dist/fn/Input/List.d.ts
CHANGED
package/dist/fn/Input/List.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as l,c as m,d as w}from"../../chunk-C5N2D3ZX.js";import{jsx as
|
|
1
|
+
import{b as l,c as m,d as w}from"../../chunk-C5N2D3ZX.js";import{jsx as a}from"react/jsx-runtime";import y,{UUID as P}from"jmini";import{useState as oe}from"react";import{$$fromRoot as ie,GenerateHTMLProps as se}from"../../@utils";import{Box as I,Flex as re,FAI as ce,Span as de}from"../../atoms";import{Button as ue}from"../Button";import{OptionalInputWrapper as me,BoxWrapper as Ce,CoreEffects as M}from"./core";import{InputListClasses as b}from"../../@styles/componentClasses";function he(t){let{value:o,states:n}=t,{type:e,required:d,min:i,max:C}=n;i=i||0,C=C||65535;let s=[],S=o.length;return d&&(S||e=="radio"&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),S<i&&s.push({type:"invalid",label:i+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),S>C&&s.push({type:"invalid",label:C+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!s.filter(({type:V})=>V=="invalid").length,notice:s}}const p={OptionalListWrapper:t=>{let{value:o,options:n=[]}=t,e=y.is.exist(o)?y.flatArray(o):[],d=[];return e.forEach(i=>{n.findIndex(s=>y.is.equal(s.value,i))!=-1&&d.push(i)}),a(p.Core,m(l({},t),{value:d,options:n}))},Core:t=>{let _=t,{type:o,tone:n,required:e,componentID:d="",form:i,override:C,icon:s,iconType:S,iconSize:V,iconPosition:v,CustomIcon:O,enableFormSubmit:$,checkValidationAtFirst:J,onValidate:W,onUpdateValue:L,onUpdateValidValue:X,value:z,options:U,className:g,cellStyles:K,cellClassName:q,cellCheckedStyles:H,cellCheckedClassName:j,min:G,max:Q,hideInput:F,freeCSS:u,wrapStyles:N}=_,x=w(_,["type","tone","required","componentID","form","override","icon","iconType","iconSize","iconPosition","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","freeCSS","wrapStyles"]),[k,h]=oe(M.DefaultStatus(d,z)),[D,Y]=oe({ok:!1,notice:[]});return M.CommonEffects({type:"list."+o,states:t,val_status:k,set_status:h,val_validate:D,set_validate:Y,SystemValidation:he}),a(Ce,{val_status:k,set_status:h,val_validate:D,states:t,children:a(p.List,{rootStates:t,val_status:k,set_status:h})})},List:t=>{let{rootStates:o,val_status:n,set_status:e}=t,{componentID:d,type:i,tone:C,icon:s,iconSize:S,isChecker:V,options:v,name:O,form:$,tabIndex:J,hideInput:W,disabled:L,className:X,cellStyles:z,cellClassName:U="",cellCheckedStyles:g,cellCheckedClassName:K="",enableFormSubmit:q}=o,{dataValue:H}=n,j=o.CustomIcon,G=v.map((Q,F)=>{let le=Q,{value:u,label:N,disabled:x,className:k="",checkedStyles:h,checkedClassName:D="",freeCSS:Y}=le,_=w(le,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),Z=P(),R=H.findIndex(r=>r===u)!=-1,f=l(l({},z),_),B=[b("Label"),U,k];R&&(f=m(l(l(l({},f),g),h),{freeCSS:l(l(l({},f==null?void 0:f.freeCSS),g==null?void 0:g.freeCSS),h==null?void 0:h.freeCSS)}),B=[...B,K,D]);const ee=()=>{if(L||x)return;let r=[];if(i=="radio")r=[u];else if(i=="checkbox"||V)if(!R)r=[...n.dataValue,u];else{let c=[...n.dataValue];c.splice(n.dataValue.findIndex(E=>E==u),1),r=c}e(c=>m(l({},c),{dataValue:r,eventType:"update",eventID:P()}))};let te=[a(de,{position:"relative",freeCSS:{zIndex:2},flexSizing:0,children:y.is.string(N)?a(I,{children:N}):N},"content")];return s&&te[o.iconPosition=="right"?"push":"unshift"](a(j,{isChecked:R,iconSize:S,toggle:ee},"icon")),[a(I,{htmlTag:"input",type:i=="radio"?"radio":"checkbox",className:b("Input"),name:"RadioCheckbox-"+O,"data-list-index":d+"-"+F,id:Z,value:String(u),disabled:L||x,checked:R,onFocus:r=>{x||i=="radio"&&(n.dataValue.length||e(c=>m(l({},c),{dataValue:[u],eventType:"update",eventID:P()})))},onChange:()=>{ee()},onKeyDown:r=>{let{key:c,shiftKey:E}=r;if((i=="checkbox"||t.rootStates.isChecker)&&c!="Tab"){if(c.match(/Arrow/)){r.preventDefault();let ne=["ArrowLeft","ArrowUp"].includes(c)?-1:1,T=F+ne;T<0?T=v.length-1:T>=v.length&&(T=0),ie(`input[data-list-index="${d}-${T}"]`).focus()}}q&&M.SubmitForm(r,$)},tabIndex:J},"List-"+y.Stringify(u)),a(I,m(l({htmlTag:"label","data-disabled":L||x,htmlFor:Z,className:B.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},f),{children:te}),"ListTrigger-"+y.Stringify(u))]});return a(re,{flexSizing:"auto",style:o.style,freeCSS:l({},o.freeCSS),className:[X,b("CellBase"),b("HideInput_"+W),b("IconIndicator_"+!!s),b("Tone_"+C)].join(" "),children:G})},_Icon:t=>{let o=1.5;return t.iconSize=="small"?o=1.2:t.iconSize=="large"&&(o=2),a(ue.Normal,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:2,freeCSS:{transform:`scale(${o})`},onClick:n=>{n.preventDefault(),n.stopPropagation(),t.toggle()},children:t.children})},RadioIcon:t=>a(p._Icon,m(l({type:"radio"},t),{children:a(I,{flexCenter:!0,isRounded:!0,borderColor:t.isChecked?"theme":"3.thick",position:"relative",transition:"middle",border:"3.thick",freeCSS:{width:"50%",height:"50%"},children:a(I,{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(p._Icon,m(l({type:"checkbox"},t),{children:a(I,{flexCenter:!0,border:"3.thick",borderColor:t.isChecked?"theme":"3.thick",backgroundColor:t.isChecked?"theme":"trans",position:"relative",transition:"middle",fontColor:"white",freeCSS:{borderRadius:"25%",padding:"4%",width:"50%",height:"50%"},children:a(ce.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8,width:"100%",height:"100%"}})})}))},A=t=>{t=t||"checkbox";const o=e=>(e=m(l({gap:1,icon:!0,iconSize:"regular",iconType:t=="radio"?"radio":"checkbox",iconPosition:"left"},e),{type:t,cellStyles:l({gap:"1/6",position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=p.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=p.CheckboxIcon)),e.iconSize=="small"?e.cellStyles.gap=0:e.iconSize=="large"&&(e.cellStyles.gap="1/2"),e.tone=="normal"?(e.cellStyles=l({padding:["1/4",1],border:"1.thin",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",backgroundColor:"layer.1",padding:"1/2"},e.cellStyles),e.cellCheckedStyles=l({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=l({paddingRight:1,border:"1.thin",backgroundColor:"layer.2",padding:"1/2"},e.cellStyles),e.cellCheckedStyles=l({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=se(e),a(me,{componentID:e.componentID,children:p.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},pe=A("checkbox"),Se=A("radio"),ae=A();export{pe as Checkbox,ae as List,Se as Radio,ae as default};
|
package/dist/temps/designBook.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as N,c as X,e as
|
|
1
|
+
import{b as N,c as X,e as v}from"../chunk-C5N2D3ZX.js";import{Fragment as c,jsx as e,jsxs as o}from"react/jsx-runtime";import T,{UUID as U,Filer as W}from"jmini";import{useState as k,useEffect as G}from"react";import{Config as L,ThemeColors as ee,Box as t,Span as oe,Grid as x,Flex as b,FAI as m,Img as I,Logo as s,Column as p,Placeholder as te,List as F,ListItem as E,LinkifyText as re,Accordion as j,Row as u,Text as i,PageViewController as le,SwipeView as ae,TabBar as ne,Plate as J,Table as C,Input as n,Button as r,Anchor as M,Label as A,Sheet as B,Snackbar as V,Tooltips as R,Tips as K,Loader as P,Effect as ie,Cropper as de,RootViewController as se}from"..";const y={index:()=>o(c,{children:[o(b,{gap:1,children:[e(t,{flexCenter:!0,children:e(te,{ssSphere:6,children:"Placeholder"})}),o(x,{gridCols:3,gap:1,flexSizing:"auto",children:[e(t,{padding:2,backgroundColor:"layer.1"}),e(t,{padding:2,backgroundColor:"layer.2"}),e(t,{padding:2,backgroundColor:"layer.3"}),e(t,{padding:2,backgroundColor:"layer.4"}),e(t,{padding:2,backgroundColor:"layer.5"}),e(t,{padding:2,backgroundColor:"layer.6"})]}),o(x,{gridCols:3,gap:"1/2",flexSizing:"auto",ssCardBox:!0,children:[e(t,{flexCenter:!0,fontColor:"1.clear",children:"FontColor1"}),e(t,{flexCenter:!0,fontColor:"2.normal",children:"FontColor2"}),e(t,{flexCenter:!0,fontColor:"3.blur",children:"FontColor3"}),e(t,{flexCenter:!0,fontColor:"4.thin",children:"FontColor4"}),e(t,{flexCenter:!0,fontColor:"5.translucent",children:"FontColor5"})]})]}),e(y.Fonts,{}),e(y.Box,{}),e(y.Flex,{}),e(y.Grid,{}),e(y.Others,{})]}),Fonts:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{padding:1,borderBottom:!0,children:"Font"}),o(t,{overflow:"auto",padding:1,children:[e(i.Description,{padding:1,children:`<Box
|
|
2
2
|
fontSize={ 0 ~ 8 }
|
|
3
3
|
>
|
|
4
4
|
some text
|
|
@@ -39,7 +39,7 @@ flexChilds={ 'auto' }
|
|
|
39
39
|
<Box children={ 'GridBox4' } />
|
|
40
40
|
<Box children={ 'GridBox5' } />
|
|
41
41
|
<Box children={ 'GridBox6' } />
|
|
42
|
-
</Grid>`})},{children:o(
|
|
42
|
+
</Grid>`})},{children:o(x,{gridCols:3,gap:1,children:[e(t,{border:!0,padding:1,backgroundColor:"layer.1",children:"GridBox1"}),e(t,{border:!0,padding:1,backgroundColor:"layer.2",children:"GridBox2"}),e(t,{border:!0,padding:1,backgroundColor:"layer.3",children:"GridBox3"}),e(t,{border:!0,padding:1,backgroundColor:"layer.4",children:"GridBox4"}),e(t,{border:!0,padding:1,backgroundColor:"layer.5",children:"GridBox5"}),e(t,{border:!0,padding:1,backgroundColor:"layer.6",children:"GridBox6"})]})}]]})})]}),Others:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"Others"}),e(t,{padding:1,overflow:"auto",children:e(C.Normal,{ssCardBox:!1,height:1,borderRadius:0,colLength:2,tone:"cellBorder",head:!1,rows:[[{children:e(c,{children:e(i.Description,{children:`
|
|
43
43
|
<Button.Label
|
|
44
44
|
htmlFor='testAccordion'
|
|
45
45
|
type='sub'
|
|
@@ -64,16 +64,16 @@ alt='noImage'
|
|
|
64
64
|
ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
|
|
65
65
|
/>`}),o(u.Center,{children:[e(t,{ssCardBox:!0,padding:1,ssEffectsOnActive:"ripple.theme",children:"DIV"}),e(r.Prime,{ssEffectsOnActive:"ripple.white",children:"White"}),e(r.Border,{ssEffectsOnActive:"ripple.cloud",children:"Cloud"}),e(r.Border,{ssEffectsOnActive:"ripple.theme",children:"Theme"})]})]})]}),Variables:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"Effects"}),o(p,{padding:2,children:[e(i.Description,{children:`<Button
|
|
66
66
|
ssEffectsOnActive={ 'shrink' }
|
|
67
|
-
/>`}),e(u.Left,{children:e(r,{onClick:()=>{P.fn.mini.active("testLoadingKey"),setTimeout(()=>{P.fn.stopALL()},5e3)},children:o(u.Center,{gap:0,children:[e(P.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(t,{textAlign:"left",children:"Launch Mini Loader"})]})})}),o(u.Left,{children:[e(r.Border,{ssEffectsOnActive:"shrink",children:"Shrink"}),e(r.Border,{ssEffectsOnActive:"pudding",children:"Pudding"}),e(r.Border,{ssEffectsOnActive:"expand",children:"Expand"}),e(r.Border,{ssEffectsOnActive:"push",children:"Push"}),e(r.Border,{children:"corner Loader",onClick:()=>{P.fn.corner.active(),setTimeout(()=>{P.fn.corner.stop()},3e3)}})]})]})]}),Tooltips:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"Tooltips"}),o(p,{padding:2,children:[o(r,{onContextMenu:l=>{l.preventDefault(),R.open({tipsID:"testTooltips",event:l,nextToCursor:!0,gravityPoint:10,closeAtParentBlur:!1,padding:0,freeCSS:{minWidth:12*16},content:o(p,{ssCardBox:!0,gap:0,borderRadius:"3.tone.tertiary",padding:"1/2",children:[e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label1"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label2"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label3"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label4"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label5"})]})})},children:["OpenTooltips next to cursor",e("br",{}),"( onContextMenu )"]}),e(
|
|
67
|
+
/>`}),e(u.Left,{children:e(r,{onClick:()=>{P.fn.mini.active("testLoadingKey"),setTimeout(()=>{P.fn.stopALL()},5e3)},children:o(u.Center,{gap:0,children:[e(P.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(t,{textAlign:"left",children:"Launch Mini Loader"})]})})}),o(u.Left,{children:[e(r.Border,{ssEffectsOnActive:"shrink",children:"Shrink"}),e(r.Border,{ssEffectsOnActive:"pudding",children:"Pudding"}),e(r.Border,{ssEffectsOnActive:"expand",children:"Expand"}),e(r.Border,{ssEffectsOnActive:"push",children:"Push"}),e(r.Border,{children:"corner Loader",onClick:()=>{P.fn.corner.active(),setTimeout(()=>{P.fn.corner.stop()},3e3)}})]})]})]}),Tooltips:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"Tooltips"}),o(p,{padding:2,children:[o(r,{onContextMenu:l=>{l.preventDefault(),R.open({tipsID:"testTooltips",event:l,nextToCursor:!0,gravityPoint:10,closeAtParentBlur:!1,padding:0,freeCSS:{minWidth:12*16},content:o(p,{ssCardBox:!0,gap:0,borderRadius:"3.tone.tertiary",padding:"1/2",children:[e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label1"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label2"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label3"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label4"}),e(r.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label5"})]})})},children:["OpenTooltips next to cursor",e("br",{}),"( onContextMenu )"]}),e(x,{gridCols:5,gap:1,children:Array.from({length:25}).map((l,a)=>e(r.Border,{onMouseOver:d=>{R.open({tipsID:"tips-"+(a+1),event:d,gravityPoint:a+1,closeAtParentBlur:!1,padding:0,content:e(R.Body,{children:a},a)})},children:a+1},a))})]})]}),Snackbar:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"Snackbars"}),o(u.Center,{padding:2,children:[e(r,{onClick:()=>{V.add({secondsToClose:3,children:"hello World!!"})},children:"Add Normal Snackbar"}),e(r,{onClick:()=>{V.add({snackID:"testSnackID1",secondsToClose:30,children:o(u.Separate,{verticalAlign:"baseline",paddingLeft:"2/3",children:["\u4E88\u7D04\u6642\u9593\u304C\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F",e(r.Clear.S,{color:"white",fontColor:"posi",children:"\u5143\u306B\u623B\u3059"})]})})},children:"Notices"}),e(r,{onClick:()=>{let l=U();V.add({snackID:l,children:o(p,{padding:1,children:[o(u.Left,{verticalAlign:"top",children:[e(I,{src:s.Images.defaultIcon("user"),ssSphere:4}),e(i.Description,{children:`Some Text
|
|
68
68
|
Some Text
|
|
69
|
-
Some Text`})]}),o(u.Separate,{children:[e(r.Sub.S,{color:"white",onClick:()=>{V.remove(l)},children:"\u9589\u3058\u308B"}),e(M.Prime.S,{href:"",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},
|
|
69
|
+
Some Text`})]}),o(u.Separate,{children:[e(r.Sub.S,{color:"white",onClick:()=>{V.remove(l)},children:"\u9589\u3058\u308B"}),e(M.Prime.S,{href:"",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},H={index:()=>o(c,{children:[e(H.Types,{}),e(H.Tone,{})]}),Tone:()=>o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"Tone"}),e(t,{padding:1,overflow:"auto",children:o(x,{gridCols:2,gap:2,children:[o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBPrime"}),o(x,{gridCols:3,padding:1,gap:1,children:[e(r,{color:"theme",children:"theme"}),e(r,{backgroundColor:"coffee",children:"posi"}),e(r,{backgroundColor:"ninja",children:"nega"}),e(r,{backgroundColor:"droplet",children:"warn"}),e(r,{backgroundColor:"googleBlue",children:"mono"}),e(r,{backgroundColor:"poizon",children:"pozion"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBSub"}),o(x,{gridCols:3,gap:1,padding:1,children:[e(r.Sub,{color:"theme",children:"theme"}),e(r.Sub,{color:"posi",children:"posi"}),e(r.Sub,{color:"nega",children:"nega"}),e(r.Sub,{color:"warn",children:"warn"}),e(r.Sub,{color:"cloud",children:"cloud"})]}),o(x,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.Sub,{color:"white",children:"white"}),e(r.Sub,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBClear"}),o(x,{gridCols:3,gap:1,padding:1,children:[e(r.Clear,{color:"theme",children:"theme"}),e(r.Clear,{color:"posi",children:"posi"}),e(r.Clear,{color:"nega",children:"nega"}),e(r.Clear,{color:"warn",children:"warn"}),e(r.Clear,{color:"cloud",children:"cloud"})]}),o(x,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.Clear,{color:"white",children:"white"}),e(r.Clear,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBFillToBorder"}),o(x,{gridCols:3,gap:1,padding:1,children:[e(r.FillToBorder,{color:"theme",children:"theme"}),e(r.FillToBorder,{color:"posi",children:"posi"}),e(r.FillToBorder,{color:"nega",children:"nega"}),e(r.FillToBorder,{color:"warn",children:"warn"})]}),o(x,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.FillToBorder,{color:"white",children:"white"}),e(r.FillToBorder,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBBorderToFill"}),o(x,{gridCols:3,gap:1,padding:1,children:[e(r.BorderToFill,{color:"theme",fontColor:"nega",children:e(t,{children:"theme"})}),e(r.BorderToFill,{color:"posi",children:"posi"}),e(r.BorderToFill,{color:"nega",children:"nega"}),e(r.BorderToFill,{color:"warn",children:"warn"})]}),o(x,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.BorderToFill,{color:"white",children:"white"}),e(r.BorderToFill,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBOthers"}),o(x,{gridCols:3,gap:1,padding:1,children:[e(r.Border,{children:"Border"}),e(r.Normal,{children:"Normal"}),e(r.Link,{children:"Link"}),e(r.Plain,{children:"Plain"})]})]})]})})]}),Types:()=>o(b,{gap:2,flexChilds:"auto",children:[o(t,{ssCardBox:!0,children:[e(i.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBButton"}),e(t,{padding:1,overflow:"auto",children:e(F,{items:[o(c,{children:[e(r.Prime,{children:"Button.Prime"}),"Button.Button.Prime"]}),o(c,{children:[e(r.Sub,{children:"Button.Sub"}),"Button.Button.Sub"]}),o(c,{children:[e(r.Border,{children:"Button.Border"}),"Button.Button.Border"]})]})})]}),o(t,{ssCardBox:!0,children:[e(i.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBLabel"}),e(t,{padding:1,overflow:"auto",children:e(F,{ListChildCallback:({children:l})=>e(p,{gap:"1/3",padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal",children:l}),items:[o(c,{children:["Label.Prime",e(A.Prime,{children:"Label.Prime"})]}),o(c,{children:["Label.Sub",e(A.Sub,{children:"Label.Sub"})]}),o(c,{children:["Label.Border",e(A.Border,{children:"Label.Border"})]})]})})]}),o(t,{ssCardBox:!0,children:[e(i.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBAnchor"}),e(t,{padding:1,overflow:"auto",children:e(F,{ListChildCallback:({children:l})=>e(p,{gap:"1/3",padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal",children:l}),items:[o(c,{children:["Button.Anchor.Prime",e(M.Prime,{href:"",children:"Anchor.Prime"})]}),o(c,{children:["Button.Anchor.Sub",e(M.Sub,{href:"",children:"Anchor.Sub"})]}),o(c,{children:["Button.Anchor.Border",e(M.Border,{href:"",children:"Anchor.Border"})]})]})})]}),o(t,{ssCardBox:!0,children:[e(i.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBSizes"}),o(p,{padding:2,gap:2,children:[e(u.Left,{children:e(r.Prime.XS,{children:'size="XS"'})}),e(u.Left,{children:e(r.Prime.S,{children:'size="S"'})}),e(u.Left,{children:e(r.Prime,{children:'size="R"'})}),e(u.Left,{children:e(r.Prime.L,{children:'size="L"'})})]})]})]})},ue={index:()=>{let l=a=>e(t,N({flexCenter:!0,ssCardBox:"layer",textAlign:"center",padding:2},a));return o(p,{gap:4,children:[o(p,{children:[e(i.Paragraph,{children:"Shadows"}),o(x,{gap:2,gridCols:4,children:[e(l,{boxShadow:"0.min",children:"0.min"}),e(l,{boxShadow:"0.normal",children:"0.normal"}),e(l,{boxShadow:"0.remark",children:"0.remark"}),e(l,{boxShadow:"0.max",children:"0.max"}),e(l,{boxShadow:"1.min",children:"1.min"}),e(l,{boxShadow:"1.normal",children:"1.normal"}),e(l,{boxShadow:"1.remark",children:"1.remark"}),e(l,{boxShadow:"1.max",children:"1.max"}),e(l,{boxShadow:"2.min",children:"2.min"}),e(l,{boxShadow:"2.normal",children:"2.normal"}),e(l,{boxShadow:"2.remark",children:"2.remark"}),e(l,{boxShadow:"2.max",children:"2.max"}),e(l,{boxShadow:"3.min",children:"3.min"}),e(l,{boxShadow:"3.normal",children:"3.normal"}),e(l,{boxShadow:"3.remark",children:"3.remark"}),e(l,{boxShadow:"3.max",children:"3.max"}),e(l,{boxShadow:"4.min",children:"4.min"}),e(l,{boxShadow:"4.normal",children:"4.normal"}),e(l,{boxShadow:"4.remark",children:"4.remark"}),e(l,{boxShadow:"4.max",children:"4.max"}),e(l,{boxShadow:"5.min",children:"5.min"}),e(l,{boxShadow:"5.normal",children:"5.normal"}),e(l,{boxShadow:"5.remark",children:"5.remark"}),e(l,{boxShadow:"5.max",children:"5.max"})]})]}),o(p,{children:[e(i.Paragraph,{children:"Inset Shadows"}),o(x,{gap:2,gridCols:4,children:[e(l,{boxShadow:"0.min.inset",children:"0.min.inset"}),e(l,{boxShadow:"0.normal.inset",children:"0.normal.inset"}),e(l,{boxShadow:"0.remark.inset",children:"0.remark.inset"}),e(l,{boxShadow:"0.max.inset",children:"0.max.inset"}),e(l,{boxShadow:"1.min.inset",children:"1.min.inset"}),e(l,{boxShadow:"1.normal.inset",children:"1.normal.inset"}),e(l,{boxShadow:"1.remark.inset",children:"1.remark.inset"}),e(l,{boxShadow:"1.max.inset",children:"1.max.inset"}),e(l,{boxShadow:"2.min.inset",children:"2.min.inset"}),e(l,{boxShadow:"2.normal.inset",children:"2.normal.inset"}),e(l,{boxShadow:"2.remark.inset",children:"2.remark.inset"}),e(l,{boxShadow:"2.max.inset",children:"2.max.inset"}),e(l,{boxShadow:"3.min.inset",children:"3.min.inset"}),e(l,{boxShadow:"3.normal.inset",children:"3.normal.inset"}),e(l,{boxShadow:"3.remark.inset",children:"3.remark.inset"}),e(l,{boxShadow:"3.max.inset",children:"3.max.inset"})]})]})]})}},ce=()=>{const l={Basic:()=>o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"TextInput"}),o(p,{padding:1,gap:2,children:[o(u.Separate,{marginBottom:2,children:[e(i.Description,{children:`<Input.Text
|
|
70
70
|
required
|
|
71
71
|
value={ 'hello React!!' }
|
|
72
|
-
/>`}),e(n.TextField,{tone:"cloud",name:"textfield",label:"testInputLabel",placeholder:"testInputPlaceholder",isLabelActive:!0,required:!0,value:"helloReact"})]}),e(n.TextField.Email,{label:"Input.TextField.Email",name:"textfield.email",autoComplete:"off",value:"test@gmail.com"}),e(n.TextField.Number,{label:"Input.TextField.Number",value:324,onUpdateValidValue:({value:a})=>{console.log(a)}}),e(n.TextField,{label:"Input.TextField (number.zeroStart)",name:"textfield.zeroStart",restrict:"number.zeroStart",value:"0324"}),o(t,{children:["Input.DigitCharacters",e(n.DigitCharacters,{numericOnly:!0,value:"032421",name:"digitCharacters",digits:6,onUpdateValidValue:({value:a})=>{console.log(a)}})]}),e(n.TextField.Tel,{label:"Input.TextField.Tel",name:"textfield.tel",value:"080-6995-2229"}),e(n.TextField.Money.JPY,{value:"3000",label:"Input.TextField.Money.JPY",name:"textfield.money"}),e(n.TextField.Url,{label:"Input.TextField.Url",value:"http://google.com",name:"textfield.url"}),o(t,{children:[e(n.TextField.Postal,{label:"Input.TextField.Postal",name:"textfield.postal",override:"force",rightIcon:e(n.RightIcon,{freeCSS:{pointerEvents:"all"},children:e(r.Sub.S,{borderRadius:"3.tone.tertiary",ssSphere:2,onClick:()=>
|
|
72
|
+
/>`}),e(n.TextField,{tone:"cloud",name:"textfield",label:"testInputLabel",placeholder:"testInputPlaceholder",isLabelActive:!0,required:!0,value:"helloReact"})]}),e(n.TextField.Email,{label:"Input.TextField.Email",name:"textfield.email",autoComplete:"off",value:"test@gmail.com"}),e(n.TextField.Number,{label:"Input.TextField.Number",value:324,onUpdateValidValue:({value:a})=>{console.log(a)}}),e(n.TextField,{label:"Input.TextField (number.zeroStart)",name:"textfield.zeroStart",restrict:"number.zeroStart",value:"0324"}),o(t,{children:["Input.DigitCharacters",e(n.DigitCharacters,{numericOnly:!0,value:"032421",name:"digitCharacters",digits:6,onUpdateValidValue:({value:a})=>{console.log(a)}})]}),e(n.TextField.Tel,{label:"Input.TextField.Tel",name:"textfield.tel",value:"080-6995-2229"}),e(n.TextField.Money.JPY,{value:"3000",label:"Input.TextField.Money.JPY",name:"textfield.money"}),e(n.TextField.Url,{label:"Input.TextField.Url",value:"http://google.com",name:"textfield.url"}),o(t,{children:[e(n.TextField.Postal,{label:"Input.TextField.Postal",name:"textfield.postal",override:"force",rightIcon:e(n.RightIcon,{freeCSS:{pointerEvents:"all"},children:e(r.Sub.S,{borderRadius:"3.tone.tertiary",ssSphere:2,onClick:()=>v(void 0,null,function*(){}),onMouseOver:a=>{K.open(a.currentTarget,"\u73FE\u5728\u5730\u3092\u53D6\u5F97")},onMouseLeave:()=>{K.abort()},children:e(m.Location,{})})})}),e(t,{id:"postalResult",padding:1,textAlign:"left"})]}),e(n.TextField.Password,{label:"Input.TextField.Password",name:"textfield.password",value:"onigiriUmai123"}),e(n.TextField,{label:"Input.TextField (multiline)",name:"textfield.multiline",multiline:!0,autoHeight:!1,value:`text1
|
|
73
73
|
text2
|
|
74
74
|
text3
|
|
75
75
|
text4
|
|
76
|
-
text5`,minRows:5}),e(n.TextField,{label:"Input.TextField",name:"textfield.autoHeight",isLabelActive:!0,placeholder:"(autoHeight) (multiline)",multiline:!0,autoHeight:!0,value:"",freeCSS:{minHeight:72},onUpdateValidValue:a=>{console.log(a)}}),e(n.TextField,{label:"Input.LeftIndicator",leftIndicator:e(n.LeftIndicator,{children:"Left Indicator"})}),e(n.TextField,{label:"Input.LeftIcon",paddingLeft:6,leftIcon:e(n.LeftIcon,{ssSquare:void 0,freeCSS:{pointerEvents:"all"},children:e(r.Sub.S,{padding:["1/3","1/2"],children:"Left Icon"})})}),e(n.TextField,{label:"Input.RightIcon",paddingRight:6,rightIcon:e(n.RightIcon,{ssSquare:void 0,freeCSS:{pointerEvents:"all"},children:e(r.Sub.S,{padding:["1/3","1/2"],children:"Right Icon"})})}),e(n.TextField,{label:"Input.RightIndicator",rightIndicator:e(n.RightIndicator,{children:"Right Indicator"})})]})]}),Time:()=>e(c,{children:o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"Time Input"}),e(t,{padding:1,children:o(p,{gap:1.5,children:[e(n.Time.Clock,{label:"Input.Time.Clock",name:"time.clock"}),e(n.Time.Date,{label:"Input.Time.Date",name:"time.date"}),e(n.Time.Week,{label:"Input.Time.Week",name:"time.week"}),e(n.Time.Month,{label:"Input.Time.Month",name:"time.month"}),e(n.Time.Year,{label:"Input.Time.Year",name:"time.year"}),e(n.Time.Periods.Date,{label:"Input.Time.Periods.Date",name:"time.periods.date"}),e(n.Time.Periods.Month,{label:"Input.Time.Periods.Month",name:"time.periods.month"}),e(n.Time.DateWareki,{label:"Input.Time.DateWareki",name:"time.dateWareki"}),e(t,{children:e(n.Select,{label:"Input.TimePicker",id:"timePicker",options:[{value:"clock",label:"clock"},{value:"date",label:"date"},{value:"week",label:"week"},{value:"month",label:"month"},{value:"year",label:"year"},{value:"dates",label:"dates"},{value:"months",label:"months"},{value:"dateWareki",label:"dateWareki"}],onUpdateValidValue:({value:a})=>{n.Time.fn.picker.launch({parent:"#timePicker",restrict:a,defaultValue:"",onValueUpdate:d=>{console.log(d)}})}})})]})})]})}),List:()=>e(c,{children:o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"Radio & Checkbox Input"}),e(t,{padding:1,children:o(p,{children:[o(b,{gap:2,flexChilds:"auto",children:[o(t,{children:["Input.Checkbox",e(n.Checkbox,{name:"checkbox",value:[2,"3"],min:2,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Input.Radio",e(n.Radio,{name:"radio",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"},{value:4,label:"Option4"},{value:5,label:"Option5"}]})]}),o(t,{children:["CustomIcon",e(n.Radio,{name:"radio.CustomIcon",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}],CustomIcon:a=>o(r.Normal.S,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",isRounded:!0,fontSize:"3.paragraph",fontColor:a.isChecked?"theme":"5.translucent",onClick:d=>{d.preventDefault(),d.stopPropagation(),a.toggle()},children:[e(
|
|
76
|
+
text5`,minRows:5}),e(n.TextField,{label:"Input.TextField",name:"textfield.autoHeight",isLabelActive:!0,placeholder:"(autoHeight) (multiline)",multiline:!0,autoHeight:!0,value:"",freeCSS:{minHeight:72},onUpdateValidValue:a=>{console.log(a)}}),e(n.TextField,{label:"Input.LeftIndicator",leftIndicator:e(n.LeftIndicator,{children:"Left Indicator"})}),e(n.TextField,{label:"Input.LeftIcon",paddingLeft:6,leftIcon:e(n.LeftIcon,{ssSquare:void 0,freeCSS:{pointerEvents:"all"},children:e(r.Sub.S,{padding:["1/3","1/2"],children:"Left Icon"})})}),e(n.TextField,{label:"Input.RightIcon",paddingRight:6,rightIcon:e(n.RightIcon,{ssSquare:void 0,freeCSS:{pointerEvents:"all"},children:e(r.Sub.S,{padding:["1/3","1/2"],children:"Right Icon"})})}),e(n.TextField,{label:"Input.RightIndicator",rightIndicator:e(n.RightIndicator,{children:"Right Indicator"})})]})]}),Time:()=>e(c,{children:o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"Time Input"}),e(t,{padding:1,children:o(p,{gap:1.5,children:[e(n.Time.Clock,{label:"Input.Time.Clock",name:"time.clock"}),e(n.Time.Date,{label:"Input.Time.Date",name:"time.date"}),e(n.Time.Week,{label:"Input.Time.Week",name:"time.week"}),e(n.Time.Month,{label:"Input.Time.Month",name:"time.month"}),e(n.Time.Year,{label:"Input.Time.Year",name:"time.year"}),e(n.Time.Periods.Date,{label:"Input.Time.Periods.Date",name:"time.periods.date"}),e(n.Time.Periods.Month,{label:"Input.Time.Periods.Month",name:"time.periods.month"}),e(n.Time.DateWareki,{label:"Input.Time.DateWareki",name:"time.dateWareki"}),e(t,{children:e(n.Select,{label:"Input.TimePicker",id:"timePicker",options:[{value:"clock",label:"clock"},{value:"date",label:"date"},{value:"week",label:"week"},{value:"month",label:"month"},{value:"year",label:"year"},{value:"dates",label:"dates"},{value:"months",label:"months"},{value:"dateWareki",label:"dateWareki"}],onUpdateValidValue:({value:a})=>{n.Time.fn.picker.launch({parent:"#timePicker",restrict:a,defaultValue:"",onValueUpdate:d=>{console.log(d)}})}})})]})})]})}),List:()=>e(c,{children:o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"Radio & Checkbox Input"}),e(t,{padding:1,children:o(p,{children:[o(b,{gap:2,flexChilds:"auto",children:[o(t,{children:["Input.Checkbox",e(n.Checkbox,{name:"checkbox",value:[2,"3"],min:2,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Input.Radio",e(n.Radio,{name:"radio",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"},{value:4,label:"Option4"},{value:5,label:"Option5"}]})]}),o(t,{children:["CustomIcon",e(n.Radio,{name:"radio.CustomIcon",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}],CustomIcon:a=>o(r.Normal.S,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",isRounded:!0,fontSize:"3.paragraph",fontColor:a.isChecked?"theme":"5.translucent",onClick:d=>{d.preventDefault(),d.stopPropagation(),a.toggle()},children:[e(m.Heart,{})," 3"]})})]}),e(t,{children:e(n.Checkbox.Border,{name:"checkbox.normala",value:[2,"3"],flexType:"col",iconPosition:"right",hideInput:!0,options:[{value:"1",label:o(u.Separate,{flexSizing:0,children:["Option1",e(t,{padding:2,children:e(m.Heart,{})})]})},{value:"2",label:o(u.Separate,{children:["Option2",e(t,{padding:2,children:e(m.Heart,{})})]})},{value:"3",label:o(u.Separate,{children:["Option3",e(t,{padding:2,children:e(m.Heart,{})})]})}]})})]}),o(p,{children:[e(i.Paragraph,{children:"Tones"}),o(p,{children:[o(t,{children:["Plain",e(n.Radio,{name:"radio.plain",value:[1],gap:1,options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]}),o(t,{children:["Plain icon={ false }",e(n.Checkbox,{name:"checkbox.plain",icon:!1,cellStyles:{padding:["1/3","2/3"],isRounded:!0},cellCheckedStyles:{fontColor:"theme"},value:[2,"3"],hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Simple",e(n.Checkbox.Simple,{name:"checkbox.simple",value:[2,"3"],hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Normal",e(n.Checkbox.Normal,{name:"checkbox.normal",value:[2,"3"],hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Vivid",e(n.Checkbox.Vivid,{name:"checkbox.vivid",value:[2,"3"],hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Cloud",e(n.Checkbox.Cloud,{name:"checkbox.cloud",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]}),o(t,{children:["Border",e(n.Radio.Border,{name:"radio.border",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]})]})]})]})})]})}),Select:()=>e(c,{children:o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"Select,Autocomplete Input"}),o(p,{padding:2,gap:1.5,children:[e(n.Select,{name:"select",label:"Input.Select",isLabelActive:!0,placeholder:"Select",required:!0,value:3,options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3a"},{value:4,label:"option4"}]}),e(n.Search,{name:"search",label:"Input.Search",required:!0,options:[{value:1,label:"1"},{value:{value1:2,value2:3},label:"Object"},{value:3,label:"3"},{value:101,label:"101"},{value:102,label:"102"}],DynamicOptionsOnSearch:a=>v(void 0,null,function*(){console.log("keyword",a);let d=[];for(let g=0;g<100;g++)d.push({value:g,label:String(g),searchValue:a});return d})}),e(n.Autocomplete,{name:"autocomplete",label:"Input.Autocomplete",max:2,value:[4],options:[{value:1,label:"X-men"},{value:2,label:"\u30B7\u30E7\u30FC\u30B7\u30E3\u30F3\u30AF\u306E\u7A7A"},{value:3,label:"\u30B9\u30BF\u30FC\u30A6\u30A9\u30FC\u30BA"},{value:4,label:"\u30B4\u30C3\u30C9\u30D5\u30A1\u30FC\u30B6\u30FC: Part II"},{value:5,label:"\u30B4\u30C3\u30C9\u30D5\u30A1\u30FC\u30B6\u30FC: Part III"},{value:6,label:"\u30A4\u30F3\u30BB\u30D7\u30B7\u30E7\u30F3"}]}),e(n.Autocomplete,{name:"autocomplete.dynamic",label:"Input.Search",required:!0,options:[{value:1,label:"1"},{value:{value1:2,value2:3},label:"Object"},{value:3,label:"3"},{value:101,label:"101"},{value:102,label:"102"}],DynamicOptionsOnSearch:a=>v(void 0,null,function*(){console.log("keyword",a),yield T.pending(()=>{},1e3);let d=[];for(let g=0;g<100;g++)d.push({value:g,label:String(g),searchValue:a});return d})})]})]})}),Segmented:()=>o(t,{ssCardBox:!0,children:[e(i.ThirdTitle,{borderBottom:!0,padding:1,children:"Segmented"}),o(p,{padding:2,gap:2,children:[e(u.Left,{children:e(n.Segmented,{name:"segmented",value:1,options:[{value:0,label:"Home"},{value:1,label:"Notice"},{value:2,label:"Posts"},{value:3,label:"Settings"}]})}),e(u.Left,{children:e(n.Segmented.Cloud,{name:"segmented.cloud",value:1,options:[{value:0,label:e(m.AngleLeft,{})},{value:1,label:e(m.AngleRight,{})},{value:2,label:e(m.AngleUp,{})},{value:3,label:e(m.AngleDown,{})}]})}),e(u.Left,{children:e(n.Segmented.CloudTheme,{name:"segmented.cloudTheme",value:1,options:[{value:0,label:e(m.AngleLeft,{})},{value:1,label:e(m.AngleRight,{})},{value:2,label:e(m.AngleUp,{})},{value:3,label:e(m.AngleDown,{})}]})}),e(u.Left,{children:e(n.Segmented.CloudMono,{name:"segmented.cloudMono",value:1,options:[{value:0,label:e(m.AngleLeft,{})},{value:1,label:e(m.AngleRight,{})},{value:2,label:e(m.AngleUp,{})},{value:3,label:e(m.AngleDown,{})}]})}),e(u.Left,{children:e(n.Segmented.Border,{name:"segmented.border",value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]})}),e(u.Left,{children:e(n.Segmented.BorderVivid,{name:"segmented.borderVivid",value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]})}),e(u.Left,{borderBottom:!0,children:e(n.Segmented.Bottomline,{name:"segmented.bottomline",value:1,options:[{value:0,label:"Takana"},{value:1,label:"Mentai"},{value:2,label:"Mayo"},{value:3,label:"Gyudon"}]})})]})]}),Variables:()=>e(c,{children:o(t,{ssCardBox:!0,children:[e(i.Paragraph,{borderBottom:!0,padding:1,children:"Variables"}),e(t,{padding:1,children:e(p,{children:o(p,{gap:2,children:[o(t,{children:["Input.File",e(n.Filer,{name:"filer",limit:3,onUpdateValidValue:({value:a})=>{console.log(a[0])}})]}),o(t,{children:["Input.Switch",o(u.Left,{gap:2,children:[e(n.Switch,{name:"switch"}),e(n.Switch,{name:"switch.applely",appearance:"applely",color:"icicles",value:!0}),e(n.Switch,{name:"switch.warn",appearance:"applely",icon:e(m.ExclamationTriangle,{}),color:"warn",value:!0})]})]}),e(u.Left,{children:e(n.Color,{name:"color",onUpdateValidValue:({value:a})=>{console.log(a)},value:"#4332c3"})}),o(t,{flexNewLine:!0,children:["Input.Slider",e(n.Slider,{name:"slider",color:"battery",value:40,step:10,min:0,max:100,onUpdateValidValue:({value:a})=>{console.log(a)}})]})]})})})]})})};return e(c,{children:e(J,{size:"L",children:o(x,{gridCols:2,gap:2,children:[e(l.Basic,{}),e(l.Select,{}),e(l.Time,{}),e(l.List,{}),e(l.Segmented,{}),e(l.Variables,{})]})})})},pe=()=>{const l=(a,d)=>{let g="testModal"+d;B.open({type:a,sheetID:g,size:"S",padding:2,content:o(B.Body,{padding:1,children:[o(t,{padding:2,children:["Content ",d||0]}),e(r.Sub,{onClick:()=>{l(a,d?d+1:1)},children:"Open Nested"}),e(u.Right,{children:e(r,{onClick:()=>{B.close(g)},children:"\u9589\u3058\u308B"})})]})})};return o(c,{children:[o(t,{ssCardBox:!0,children:[e(i.SubTitle,{borderBottom:!0,padding:1,children:"CardBox"}),e(t,{padding:1,overflow:"auto",children:e(i.Description,{children:`<Box styles={{ssCardBox:true}}>
|
|
77
77
|
<Box>
|
|
78
78
|
Header
|
|
79
79
|
</Box>
|
|
@@ -96,4 +96,4 @@ text5`,minRows:5}),e(n.TextField,{label:"Input.TextField",name:"textfield.autoHe
|
|
|
96
96
|
header: ReactElement | React.FC< { modalClose } >,
|
|
97
97
|
body: ReactElement | React.FC< { modalClose } >,
|
|
98
98
|
footer: ReactElement | React.FC< { modalClose } >
|
|
99
|
-
} )`})}),o(p,{padding:2,children:[e(r.Border,{onClick:a=>{R.open({tipsID:"testTips",parent:a.currentTarget,closeAtParentBlur:!1,closeAtAroundClick:!1,closeAtEscapeKeyDown:!0,content:()=>e(B.Body,{padding:2,children:e(r,{onClick:()=>{B.open({sheetID:"testSheet",closeAtAroundClick:!0,type:"normal.middleLeft",content:()=>e(B.Body,{padding:2,children:"END"})})},children:"nest"})})})},children:"Tooltips with nested sheet"}),e(t,{flexCenter:!0,children:o(
|
|
99
|
+
} )`})}),o(p,{padding:2,children:[e(r.Border,{onClick:a=>{R.open({tipsID:"testTips",parent:a.currentTarget,closeAtParentBlur:!1,closeAtAroundClick:!1,closeAtEscapeKeyDown:!0,content:()=>e(B.Body,{padding:2,children:e(r,{onClick:()=>{B.open({sheetID:"testSheet",closeAtAroundClick:!0,type:"normal.middleLeft",content:()=>e(B.Body,{padding:2,children:"END"})})},children:"nest"})})})},children:"Tooltips with nested sheet"}),e(t,{flexCenter:!0,children:o(x,{gridCols:3,gap:1,children:[e(r.Border,{onClick:()=>{l("normal.topLeft")},children:"Top Left"}),e(r.Border,{onClick:()=>{l("normal.topCenter")},children:"Top Center"}),e(r.Border,{onClick:()=>{l("normal.topRight")},children:"Top Right"}),e(r.Border,{onClick:()=>{l("normal.middleLeft")},children:"Middle Left"}),e(r.Border,{onClick:()=>{l("normal.middleCenter")},children:"Middle Center"}),e(r.Border,{onClick:()=>{l("normal.middleRight")},children:"Middle Right"}),e(r.Border,{onClick:()=>{l("normal.bottomLeft")},children:"Bottom Left"}),e(r.Border,{onClick:()=>{l("normal.bottomCenter")},children:"Bottom Center"}),e(r.Border,{onClick:()=>{l("normal.bottomRight")},children:"Bottom Right"}),e(r.Border,{onClick:()=>{l("drawer.left")},children:"Drawer Left"}),e(r.Border,{onClick:()=>{l("drawer.bottom")},children:"Drawer Bottom"}),e(r.Border,{onClick:()=>{l("drawer.right")},children:"Drawer Right"}),e(r.Border,{onClick:a=>{R.open({tipsID:"test40",parent:a.currentTarget,content:e(t,{padding:1,border:!0,borderRadius:2,backgroundColor:"dark",fontColor:"white",children:"Content"})})},children:"Open Tooltips"})]})}),o(u.Center,{children:["Image Picker",e(I,{src:s.Images.defaultIcon("user"),ssSphere:6,showExpand:!0})]})]})]})]})},O={index:()=>e(c,{children:o(p,{gap:3,children:[e(O.Data,{}),e(O.Normal,{}),e(O.Drag,{}),e(O.Spread,{})]})}),Normal:()=>{let l=[];for(var a=0;a<10;a++){let d=[{children:"head_"+a},{children:"data_"+a},{children:"data_"+a}];l.push(d)}return o(c,{children:[e(t,{fontSize:"5.subTitle",children:"Table.Normal"}),e(C.Normal,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:l,ssCardBox:!0,onRowClick:d=>{console.log(d)}})]})},Drag:()=>{let l=[];for(var a=0;a<4;a++){let d=[{children:"head_"+a},{children:"data_"+a},{children:"data_"+a}];d.rowID="rowID-"+a,l.push(d)}return o(c,{children:[e(t,{fontSize:"5.subTitle",children:"Table.Drag"}),e(C.Drag,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],cellStyles:{},cellStylesCallback:()=>({}),rows:l,ssCardBox:!0,onOrderChanged:d=>{console.log(d)}})]})},Data:()=>{let[l,a]=k(""),d=[];for(var g=0;g<100;g++){let f=Math.round(Math.random()*50+1),h=Math.round(Math.random()*50+1),_=Math.round(Math.random()*50+1),D="name_"+f,q="data_"+h,Y="data_"+_,Z=[{type:"th",children:g+":"+D,data:D,orderIndex:g},{type:"td",children:q,data:q},{type:"td",children:Y,data:Y}];d.push(Z)}d[1].checked=!0,d[4].checked=!0,d[10].checked=!0;let S="testDataTable";return o(p,{children:[o(b,{horizontalAlign:"between",children:[e(t,{fontSize:"5.subTitle",children:"Table.Data"}),o(b,{gap:"1/2",backgroundColor:"theme",borderRadius:"1.tone.primary",overflow:"hidden",fontColor:"white",children:[e(r.Clear,{color:"white",children:"SubmitButton"}),e(t,{flexSizing:"none",unitWidth:"1/4",backgroundColor:"layer.4.opa.middle",isRounded:!0,margin:["2/3",0]}),e(r.Clear,{padding:[0,1],color:"white",onClick:f=>{R.open({tipsID:U(),parent:f.target,gravityPoint:24,closeAtAroundClick:!0,closeAtParentBlur:!1,content:o(p,{gap:0,padding:["2/3",0],backgroundColor:"layer.1",borderRadius:2,boxShadow:"0.normal",overflow:"hidden",children:[e(r.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3059\u3079\u3066\u3092\u51FA\u529B"}),e(r.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3053\u306E\u30DA\u30FC\u30B8\u306E\u307F\u51FA\u529B"}),e(r.Clear.S,{borderRadius:0,children:"\u30C1\u30A7\u30C3\u30AF\u3057\u305F\u884C\u306E\u307F\u51FA\u529B"})]})})},children:e(m.EllipsisV,{})})]})]}),o(u.Separate,{verticalAlign:"bottom",children:[o(u.Left,{verticalAlign:"bottom",children:[e(C.Data.SearchInput,{tableID:S,onChange:f=>{a(f)}}),e(C.Data.Info,{tableID:S})]}),o(u.Right,{verticalAlign:"unset",children:[e(C.Data.RowLength,{tableID:S,lengthSelect:[30,50,100]}),e(C.Data.Paging,{tableID:S})]})]}),e(C.Data,{tableID:S,colLength:3,head:[{data:"head1"},{data:"head2"},{data:"head3"}],rows:d,pageRowLength:30,ssCardBox:!0,cellStyles:{padding:"1/2"},filter:[!0],checker:!0})]})},Spread:()=>e(c,{children:e(t,{fontSize:"5.subTitle",children:"Table.Spread"})})},ge=()=>{let[l,a]=k(""),[d,g]=k(""),[S,f]=k("");return e(c,{children:o(t,{children:[o(r,{onClick:()=>{de.openDialogNEdit({use:"square",develops:[{size:"S"},{size:"R"},{size:"L"}],onProcessFinished:h=>v(void 0,null,function*(){a(yield(yield W.fromFile(h[0])).toDataURL()),g(yield(yield W.fromFile(h[1])).toDataURL()),f(yield(yield W.fromFile(h[2])).toDataURL())})})},children:[e(m.Image,{})," \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"]}),o(b,{gap:1,verticalAlign:"top",children:[l&&e(I,{isRounded:!0,src:l,alt:"",showExpand:!0,freeCSS:{maxWidth:12*12}}),d&&e(I,{style:{maxWidth:24*12},src:d,alt:"",showExpand:!0}),S&&e(I,{style:{maxWidth:24*12},src:S,alt:"",showExpand:!0}),e(ae,{border:!0,borderWidth:3,margin:[3,"auto"],freeCSS:{width:12*10},slideIndex:1,options:{loop:!0,onSlideCallback:h=>{}},slides:[e(t,{flexCenter:!0,padding:3,backgroundColor:"nega",children:"test1"}),e(t,{flexCenter:!0,padding:3,backgroundColor:"posi",children:"test2"}),e(t,{flexCenter:!0,padding:3,backgroundColor:"warn",children:"test3"}),e(t,{flexCenter:!0,padding:3,backgroundColor:"theme",children:"test4"})]})]})]})})},$={Darkmode:l=>(G(()=>{B.open({sheetID:"darkModeSelector",type:"custom",parent:document.body,gravityPoint:19,closeAtAroundClick:!1,content:()=>e(t,{padding:1,children:e(n.Segmented.Cloud,X(N({cellStyles:{flexCenter:!0,padding:["1/4","1/2"],isRounded:!0},cellCheckedStyles:{boxShadow:"2.normal",backgroundColor:"theme",fontColor:"white"},ssCardBox:!0,backgroundColor:"layer.1",isRounded:!0,gap:"1/6",fontColor:"4.thin"},l),{options:[{value:"light",label:"Light"},{value:"dim",label:"Dim"},{value:"dark",label:"Dark"}],value:L.get().darkMode,onUpdateValidValue:({value:a})=>{let d=a;T.localStrage.set("prf.darkMode",d),L.update.darkMode(d)}}))})})},[]),null),ThemeColor:()=>{const l=a=>{let d="themeColorSelector";B.open({sheetID:d,type:"normal.middleCenter",size:"L",closeAtParentBlur:!1,closeAtAroundClick:!1,closeAfter:()=>{se.fn.updateCSSProperty.reset()},content:()=>{let[g,S]=k(a.defaultColor);G(()=>{T.scope(()=>{g!==L.get().themeColor&&(L.update.themeColor(g),T.localStrage.set("prf.themeColor",g),B.close(d))})},[g]);let f=Object.entries(ee).map(([h,_])=>{let D=h===g;return e(r.Clear,{color:"cloud",textAlign:"center",onClick:()=>{S(h)},children:o(p,{gap:"1/2",textAlign:"center",children:[D&&e(i.Supplement,{padding:["1/4","1/2"],borderRadius:"3.tone.tertiary",backgroundColor:h,boxShadow:"2.normal",margin:"auto",fontColor:"white",fontSize:"0.xs",children:"\u8A2D\u5B9A\u4E2D"}),e(t,{position:"relative",margin:"auto",backgroundColor:h,ssSphere:2.5,children:e(t,{ssAbsoluteCovered:!0,border:!0,opacity:D?"max":"low",borderWidth:2,transition:"short",isRounded:!0,freeCSS:{transform:"scale(1.25)"}})}),e(i.Supplement,{ssTextEllipsis:!0,freeCSS:{lineHeight:1.25},children:h.toCapital()})]})},h)});return e(B.Body,{children:o(p,{padding:2,gap:2,children:[o(u.Separate,{children:[e(i.Paragraph,{children:"\u30C6\u30FC\u30DE\u3092\u9078\u629E"}),e(r.Sub,{color:"cloud",ssSphere:3,onClick:()=>{B.close(d)},children:e(m.Times,{})})]}),e(x,{gap:"1/4",freeCSS:{gridTemplateColumns:"repeat(auto-fit, minmax(4.5rem, 1fr))"},children:f})]})})}})};return G(()=>{T.scope(()=>v(void 0,null,function*(){B.open({sheetID:"themeColorSelector",type:"custom",parent:document.body,gravityPoint:17,closeAtParentBlur:!1,closeAtAroundClick:!1,content:()=>e(t,{padding:1,children:e(r.Border,{isRounded:!0,fontColor:"theme",onClick:a=>{l({defaultColor:L.get().themeColor,cb:d=>{}})},children:o(u.Center,{gap:"1/3",children:[e(t,{boxShadow:"2.normal",ssSquare:1,borderRadius:"1/3",backgroundColor:"theme"}),"Theme: ",L.get().themeColor.toCapital()]})})})})}))},[]),null}};let Q=()=>{console.log(U());let[l,a]=k(Number(T.queryParams.get().ti)||0);return G(()=>{T.queryParams.set({ti:String(l)})},[l]),o(c,{children:[e($.Darkmode,{}),e($.ThemeColor,{}),o(p,{gap:0,minHeight:"contentHeight",backgroundColor:"layer.1",position:"relative",freeCSS:{zIndex:1},children:[e(ne,{borderBottom:!0,position:"sticky",backgroundColor:"layer.1",boxShadow:"2.normal",top:"topBase",tabIndex:l,tabs:["Basic","Shadows","Buttons","Inputs","Styling","Effection","Tables","Croppie","PlayGround","Logo"],onTabChange:d=>{localStorage.setItem("designTabHeader",String(d)),a(d)},UnderBreakPointStyles:{position:"static",top:0}}),e(t,{flexSizing:0,position:"relative",freeCSS:{zIndex:1},children:e(le,{viewIndex:l,views:[e(y.index,{}),e(ue.index,{}),e(H.index,{}),e(ce,{}),e(pe,{}),e(z.index,{}),e(O.index,{}),e(ge,{}),"",e(w.index,{})],wrapper:d=>e(ie.FadeIn,{animationTime:200,children:e(J,{children:e(b,{gap:2,padding:2,flexWrap:!0,flexChilds:"auto",children:d})})},l)})})]})]})};export{Q as DesignBook,Q as default};
|