amotify 0.2.33 → 0.2.34
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.
|
@@ -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 U}from"react/jsx-runtime";import{useState as b,useEffect as w,useRef as ae}from"react";import r from"@mingoo/jsmin";import{ExtractStyles as ne,useStore as Y}from"../../@utils";import{Box as R,Span as re,FAI as q,Column as ie}from"../../atoms";import{Text as B,Row as G}from"../../mols";import Z from"../Button";import{Loader as se}from"../Loader";import{Sheet as K}from"../Sheet";import{OptionalInputWrapper as ue,BoxWrapper as ce,CoreEffects as N,DefaultStyles as pe}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as de}from"./Label";import{RightIcon as ee}from".";function me(t){let{value:e,states:a}=t,{required:o,options:c,min:u,max:S}=a;u=u||0,S=S||65535;let n=[],i=e.filter(m=>m!=="null").length;return o&&(i||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),i<u&&n.push({type:"invalid",label:u+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),i>S&&n.push({type:"invalid",label:S+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:m})=>m=="invalid").length,notice:n}}const A={InitOptions:t=>{let e=[];return t.forEach(a=>{let{type:o,label:c,value:u,searchValue:S}=a,n=S||(r.is.string(c)?c:"")||(r.is.string(u)?u:"");e.push(D(v({},a),{searchValue:n,type:o||"selector",value:r.JsonTo(u)}))}),e},FilterSelectableOptions:(t,e)=>{let a=t.val_options;if(e||(a=t.val_options.filter(o=>o.type!="label")),t.val_keyword){let o=t.val_keyword.toLower().replace(/ /g,"");a=a.filter(c=>(c.searchValue||"").toLower().replace(/ /g,"").includes(o))}return a}},F={Shallow:t=>{let{rootStates:e,val_status:a}=t,o=ne(e);return l(R,{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_"+a.componentID,children:l(R,{"data-input-value-shallow":a.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_keyword:a,set_keyword:o,val_optionFocused:c,set_optionFocused:u,val_options:S,set_options:n,val_optionsDict:i,set_optionsDict:m,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:p,val_selectorOpen:f,set_selectorOpen:y,val_status:d,set_status:_,val_validate:I,set_validate:V}=t,X=e,{tone:C,required:g,form:T,className:x,multiSelect:P,enableFormSubmit:E,checkValidationAtFirst:z,onValidate:J,onUpdateValue:W,onUpdateValidValue:fe,value:Se="",options:ve,leftIndicator:he,rightIndicator:ye,leftIcon:_e,rightIcon:Ie,componentID:ge,status_id:be,wrapStyles:Oe,emptySelect:De,SearchInput:Ve,SearchInputPlaceholder:Ce,SelectedComponent:we,SelectorComponent:ke,SelectorGravityPoint:xe,DynamicOptionsOnSearch:Re}=X,k=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"]);w(()=>{var O;if(e.disabled||!f)return;let h=A.FilterSelectableOptions(t);u(((O=h[0])==null?void 0:O.value)||null)},[a]),w(()=>{d.eventType!="init"&&(e.max==d.dataValue.length?(y(!1),p(!0),setTimeout(()=>{let h=r('[data-input-origin="'+e.componentID+'"]');h&&h.focus()},10)):r("#SearchInput_"+e.componentID).focus())},[d.dataValue]);let M="autocomplete-sheet-"+e.componentID;return w(()=>{let h="autocomplete-click-"+e.componentID;if(f){let O=r('[data-input-origin="'+e.componentID+'"]');if(!O)return;r("#SearchInput_"+e.componentID).focus(),K.open({sheetID:M,type:"custom",parent:O[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,close_option:{aroundClick:!1},content:l(F.Selector,v({},t))}),r(document).addEvent({eventID:h,eventType:"click",callback:oe=>{let $=r(oe.target),le=!!r($).parent("."+L("Core")).length;r($).parent("."+L("Selector")).length||le||y(!1)}})}else r(document).removeEvent([h]),o(""),K.close(M)},[f]),w(()=>{if(e.disabled||!f)return;K.customSheet.reposition(M);let h=Y.get("refresh-autocomplete-selector-"+e.componentID);h&&h(t)},[S,d.dataValue,a,c]),l(H,{children:l(R,D(v({tabIndex:0},k),{"data-disabled":e.disabled,"data-name":e.name,"data-value":r.JsonTo(d.dataValue),"data-form":T,"data-show-validation":N.isShowValidation(I,d,!!z),"data-validation":I.ok,"data-component-id":d.componentID,"data-input-origin":d.componentID,"data-focus":!!f,"data-input-type":"autocomplete-"+(P?"multi":"single"),className:[x,L("Core")].join(" "),onFocus:h=>{if(k!=null&&k.onFocus&&(k==null||k.onFocus(h)),!e.disabled&&!e.disabled){if(s)return p(!1);y(!0)}},onKeyDown:h=>{let{key:O}=h;E&&N.SubmitForm(h),!f&&(O==" "||O=="ArrowDown"||O=="ArrowUp"||O=="Enter")&&y(!0)},children:U(G.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(F.Selected,v({},t)),l(re,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(F.SearchInput,v({},t))]})}))})},SearchInput:t=>{let{rootStates:e}=t;return e.disabled||!t.val_selectorOpen?null:l(R,{id:"SearchInput_"+e.componentID,placeholder:e.SearchInputPlaceholder||"\u691C\u7D22...",opacity:t.val_selectorOpen?"max":"trans","data-form":e.form,transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:t.val_keyword,freeCSS:{outline:"none"},onKeyDown:a=>{let{key:o,metaKey:c,ctrlKey:u}=a,S=c||u;o=="Escape"?(t.set_selectorOpen(!1),t.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let n=r('[data-input-origin="'+e.componentID+'"]');n&&n.focus()},10)):o=="Tab"?t.set_selectorOpen(!1):o==" "?r.scope(()=>{t.val_selectorOpen||t.val_keyword||(a.preventDefault(),t.set_selectorOpen(!0))}):o=="Backspace"?r.scope(()=>{if(t.val_keyword)return;let n=[...t.val_status.dataValue];n.pop(),t.set_status(i=>D(v({},i),{dataValue:n,eventType:"update",eventID:r.uuid.gen()}))}):o=="Enter"&&r.scope(()=>{if(!t.val_selectorOpen)return t.set_selectorOpen(!0);if(!t.val_optionFocused)return;let n=t.val_options.find(m=>m.value==t.val_optionFocused);if(!n)return;let{value:i}=n;t.set_status(m=>{let s=[...m.dataValue];return r.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:r.uuid.gen()})}),t.set_keyword("")}),r.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(a.preventDefault(),!t.val_selectorOpen)return t.set_selectorOpen(!0);let n=o=="ArrowDown"?1:-1,i=A.FilterSelectableOptions(t),m=i.length-1,s=null;r.scope(()=>{var p,f,y,d;if(n==1){if(s=((p=i[0])==null?void 0:p.value)||null,t.val_optionFocused==null)return;if(S){s=i[m].value||s||null;return}let _=i.findIndex(I=>I.value==t.val_optionFocused);if(_==-1)return;s=((f=i[_+1])==null?void 0:f.value)||s||null}else{if(s=i[m].value||null,t.val_optionFocused==null)return;if(S){s=((y=i[0])==null?void 0:y.value)||s||null;return}let _=i.findIndex(I=>I.value==t.val_optionFocused);if(_==-1)return;s=((d=i[_-1])==null?void 0:d.value)||s||null}}),t.set_optionFocused(s)}),e.enableFormSubmit&&N.SubmitForm(a)},onChange:a=>{let c=a.target.value;t.set_keyword(c)}},"searchInput")},Selector:t=>{let[e,a]=b(t),{rootStates:o}=e,[c,u]=b("idle"),[S,n]=b("idle");w(()=>{Y.set({["refresh-autocomplete-selector-"+o.componentID]:p=>{a(p)}})},[]),w(()=>{if(!e.val_selectorOpen||!o.DynamicOptionsOnSearch)return;if(c=="idle")return u("ok");n("fetch");let p="autocomplete-search-"+o.componentID;r.interval.clear(p),r.interval.standBy(p,300,()=>Q(void 0,null,function*(){let f=yield o.DynamicOptionsOnSearch(e.val_keyword);n("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((p,f)=>{let{type:y,value:d}=p,_=e.val_optionFocused==d,I=e.val_status.dataValue.includes(d),V=o.SelectorComponent;i.push(l(V,{option:p,isFocused:_,isSelected:I,addCallback:()=>{e.set_status(C=>{let g=[...C.dataValue];return r.scope(()=>{if(d==="null")return g=[];C.dataValue.includes(d)?g=g.filter(x=>x!==d):o.multiSelect?g.push(d):g=[d]}),D(v({},C),{dataValue:g,eventType:"update",eventID:r.uuid.gen()})})}},String(d)||r.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=[U(G.Left,{padding:1,fontColor:"3.blur",children:[l(se.Theme.R,{showInitial:!0}),l(B.Supplement,{children:"Loading..."})]},"loader")]),l(K.Body,{className:L("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:a,set_status:o,val_optionsDict:c}=t,u=[];return a.dataValue.forEach(S=>{let n=c[String(S)];if(!n)return;let i=e.SelectedComponent,m=n.label;n.value==="null"&&(m=""),u.push(l(R,{className:L("SelectedCell"),children:l(i,{value:n.value,label:m,children:m,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),e.disabled)return;let p=[...a.dataValue];p=p.filter(f=>f!==S),o(f=>D(v({},f),{dataValue:p,eventType:"update",eventID:r.uuid.gen()}))}})},String(n.value)))}),l(H,{children:u})},Core:t=>{let{onUpdateValue:e,onUpdateValidValue:a,value:o}=t,c={componentID:t.componentID||"",dataValue:o,eventType:"init",eventID:r.uuid.gen()},[u,S]=b(!1),[n,i]=b(!1),[m,s]=b(""),[p,f]=b(t.options),[y,d]=b(t.value[0]||null),[_,I]=b({}),[V,C]=b(c),[g,T]=b({ok:!1,notice:[]}),x=ae(!1);w(()=>{x.current?f(t.options):x.current=!0},[t.options]),w(()=>{if(!p.length)return;let z=[...p],J=v({},_);z.forEach(W=>{W.type!="label"&&(J[String(W.value)]=W)}),I(J)},[p]);let P={rootStates:t,val_options:p,set_options:f,val_optionFocused:y,set_optionFocused:d,val_optionsDict:_,set_optionsDict:I,val_preventOpenSelectorOnFocus:u,set_preventOpenSelectorOnFocus:S,val_selectorOpen:n,set_selectorOpen:i,val_keyword:m,set_keyword:s,val_status:V,set_status:C,val_validate:g,set_validate:T};N.CommonEffects({type:"autocomplete",states:t,val_status:V,set_status:C,val_validate:g,set_validate:T,onUpdateValue:e,onUpdateValidValue:a,DefaultValidation:me,ExtraOverrideStates:{dataValue:o,formatValue:o}});let E=V.dataValue.length&&V.dataValue[0]!=="null";return E=E||n,U(ce,{val_status:V,set_status:C,val_validate:g,states:t,children:[l(de,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:E}),l(F.Shallow,v({},P)),l(F.Button,v({},P))]})}},te=t=>{let e=v({},t);e=D(v({value:[],min:0,max:65535,multiSelect:!0,padding:1,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:o,isSelected:c,isFocused:u,addCallback:S})=>o.type=="selector"?l(Z.Button.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:n=>{S()},children:l(B.Supplement,{paddingLeft:c?"1/2":0,transition:"short",children:o.label})}):l(H,{children:o.label}),SelectedComponent:({value:o,label:c,removeCallback:u})=>U(G.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(R,{padding:[0,"1/4"],children:c}),l(Z.Button.Sub.R,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:u,children:l(q.Times,{ssSphere:1})})]},"test")},e),{freeCSS:v({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=1,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]);let a=[];return e.value=r.flatArray(e.value||null),e.value.forEach((o,c)=>{a.push(r.JsonTo(o))}),e.value=a,e.options=A.InitOptions(e.options),r.is.nullish(e.rightIcon)&&(e.rightIcon=l(ee,{freeCSS:{pointerEvents:"none"},children:l(q.Search,{})}),e.disabled&&(e.rightIcon=l(ee,{fontColor:"5.translucent",freeCSS:{pointerEvents:"none"},children:l(q.Ban,{})}))),e.rightIcon&&(e=v({paddingRight:3},e)),e.leftIcon&&(e=v({paddingLeft:3},e)),l(ue,{componentID:e.componentID,children:F.Core,states:pe.Boxish(e)})};export{te as Autocomplete,te as default};
|
|
1
|
+
import{b as v,c as C,d as j,e as Q}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as l,jsxs as U}from"react/jsx-runtime";import{useState as O,useEffect as k,useRef as ae}from"react";import r from"@mingoo/jsmin";import{ExtractStyles as ne,useStore as Y}from"../../@utils";import{Box as R,Span as re,FAI as q,Column as ie}from"../../atoms";import{Text as B,Row as G}from"../../mols";import Z from"../Button";import{Loader as se}from"../Loader";import{Sheet as K}from"../Sheet";import{OptionalInputWrapper as ue,BoxWrapper as ce,CoreEffects as N,DefaultStyles as pe}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as de}from"./Label";import{RightIcon as ee}from".";function me(t){let{value:e,states:a}=t,{required:o,options:c,min:u,max:S}=a;u=u||0,S=S||65535;let n=[],i=e.filter(m=>m!=="null").length;return o&&(i||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),i<u&&n.push({type:"invalid",label:u+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),i>S&&n.push({type:"invalid",label:S+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:m})=>m=="invalid").length,notice:n}}const A={InitOptions:t=>{let e=[];return t.forEach(a=>{let{type:o,label:c,value:u,searchValue:S}=a,n=S||(r.is.string(c)?c:"")||(r.is.string(u)?u:"");e.push(C(v({},a),{searchValue:n,type:o||"selector",value:r.JsonTo(u)}))}),e},FilterSelectableOptions:(t,e)=>{let a=t.val_options;if(e||(a=t.val_options.filter(o=>o.type!="label")),t.val_keyword){let o=t.val_keyword.toLower().replace(/ /g,"");a=a.filter(c=>(c.searchValue||"").toLower().replace(/ /g,"").includes(o))}return a}},F={Shallow:t=>{let{rootStates:e,val_status:a}=t,o=ne(e);return l(R,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(B.Description,C(v({className:e.className},o),{position:"absolute",width:1,freeCSS:C(v({},o.freeCSS),{color:"orange"}),"data-id":"shallow_"+a.componentID,children:l(R,{"data-input-value-shallow":a.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_keyword:a,set_keyword:o,val_optionFocused:c,set_optionFocused:u,val_options:S,set_options:n,val_optionsDict:i,set_optionsDict:m,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:p,val_selectorOpen:f,set_selectorOpen:h,val_status:d,set_status:I,val_validate:g,set_validate:V}=t,X=e,{tone:w,required:b,form:T,className:x,multiSelect:P,enableFormSubmit:E,checkValidationAtFirst:z,onValidate:J,onUpdateValue:W,onUpdateValidValue:fe,value:Se="",options:ve,leftIndicator:ye,rightIndicator:he,leftIcon:_e,rightIcon:Ie,componentID:ge,status_id:be,wrapStyles:Oe,emptySelect:De,SearchInput:Ce,SearchInputPlaceholder:Ve,SelectedComponent:we,SelectorComponent:ke,SelectorGravityPoint:xe,DynamicOptionsOnSearch:Re}=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"]);k(()=>{var D;if(e.disabled||!f)return;let y=A.FilterSelectableOptions(t);u(((D=y[0])==null?void 0:D.value)||null)},[a]),k(()=>{d.eventType!="init"&&(e.max==d.dataValue.length?(h(!1),p(!0),setTimeout(()=>{let y=r('[data-input-origin="'+e.componentID+'"]');y&&y.focus()},10)):r("#SearchInput_"+e.componentID).focus())},[d.dataValue]);let M="autocomplete-sheet-"+e.componentID;return k(()=>{let y="autocomplete-click-"+e.componentID;if(f){let D=r('[data-input-origin="'+e.componentID+'"]');if(!D)return;r("#SearchInput_"+e.componentID).focus(),K.open({sheetID:M,type:"custom",parent:D[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,close_option:{aroundClick:!1},content:l(F.Selector,v({},t))}),r(document).addEvent({eventID:y,eventType:"click",callback:oe=>{let $=r(oe.target),le=!!r($).parent("."+L("Core")).length;r($).parent("."+L("Selector")).length||le||h(!1)}})}else r(document).removeEvent([y]),o(""),K.close(M)},[f]),k(()=>{if(e.disabled||!f)return;K.customSheet.reposition(M);let y=Y.get("refresh-autocomplete-selector-"+e.componentID);y&&y(t)},[S,d.dataValue,a,c]),l(H,{children:l(R,C(v({tabIndex:0},_),{"data-disabled":e.disabled,"data-name":e.name,"data-value":r.JsonTo(d.dataValue),"data-form":T,"data-show-validation":N.isShowValidation(g,d,!!z),"data-validation":g.ok,"data-component-id":d.componentID,"data-input-origin":d.componentID,"data-focus":!!f,"data-input-type":"autocomplete-"+(P?"multi":"single"),className:[x,L("Core")].join(" "),onFocus:y=>{if(_!=null&&_.onFocus&&(_==null||_.onFocus(y)),!e.disabled){if(s)return p(!1);h(!0),y.preventDefault()}},onClick:y=>{_!=null&&_.onClick&&(_==null||_.onClick(y)),!e.disabled&&h(!0)},onKeyDown:y=>{let{key:D}=y;E&&N.SubmitForm(y),!f&&(D==" "||D=="ArrowDown"||D=="ArrowUp"||D=="Enter")&&h(!0)},children:U(G.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(F.Selected,v({},t)),l(re,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(F.SearchInput,v({},t))]})}))})},SearchInput:t=>{let{rootStates:e}=t;return e.disabled||!t.val_selectorOpen?null:l(R,{id:"SearchInput_"+e.componentID,placeholder:e.SearchInputPlaceholder||"\u691C\u7D22...",opacity:t.val_selectorOpen?"max":"trans","data-form":e.form,transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:t.val_keyword,freeCSS:{outline:"none"},onKeyDown:a=>{let{key:o,metaKey:c,ctrlKey:u}=a,S=c||u;o=="Escape"?(t.set_selectorOpen(!1),t.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let n=r('[data-input-origin="'+e.componentID+'"]');n&&n.focus()},10)):o=="Tab"?t.set_selectorOpen(!1):o==" "?r.scope(()=>{t.val_selectorOpen||t.val_keyword||(a.preventDefault(),t.set_selectorOpen(!0))}):o=="Backspace"?r.scope(()=>{if(t.val_keyword)return;let n=[...t.val_status.dataValue];n.pop(),t.set_status(i=>C(v({},i),{dataValue:n,eventType:"update",eventID:r.uuid.gen()}))}):o=="Enter"&&r.scope(()=>{if(!t.val_selectorOpen)return t.set_selectorOpen(!0);if(!t.val_optionFocused)return;let n=t.val_options.find(m=>m.value==t.val_optionFocused);if(!n)return;let{value:i}=n;t.set_status(m=>{let s=[...m.dataValue];return r.scope(()=>{if(i==="null")return s=[];m.dataValue.includes(i)?s=s.filter(f=>f!==i):e.multiSelect?s.push(i):s=[i]}),C(v({},m),{dataValue:s,eventType:"update",eventID:r.uuid.gen()})}),t.set_keyword("")}),r.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(a.preventDefault(),!t.val_selectorOpen)return t.set_selectorOpen(!0);let n=o=="ArrowDown"?1:-1,i=A.FilterSelectableOptions(t),m=i.length-1,s=null;r.scope(()=>{var p,f,h,d;if(n==1){if(s=((p=i[0])==null?void 0:p.value)||null,t.val_optionFocused==null)return;if(S){s=i[m].value||s||null;return}let I=i.findIndex(g=>g.value==t.val_optionFocused);if(I==-1)return;s=((f=i[I+1])==null?void 0:f.value)||s||null}else{if(s=i[m].value||null,t.val_optionFocused==null)return;if(S){s=((h=i[0])==null?void 0:h.value)||s||null;return}let I=i.findIndex(g=>g.value==t.val_optionFocused);if(I==-1)return;s=((d=i[I-1])==null?void 0:d.value)||s||null}}),t.set_optionFocused(s)}),e.enableFormSubmit&&N.SubmitForm(a)},onChange:a=>{let c=a.target.value;t.set_keyword(c)}},"searchInput")},Selector:t=>{let[e,a]=O(t),{rootStates:o}=e,[c,u]=O("idle"),[S,n]=O("idle");k(()=>{Y.set({["refresh-autocomplete-selector-"+o.componentID]:p=>{a(p)}})},[]),k(()=>{if(!e.val_selectorOpen||!o.DynamicOptionsOnSearch)return;if(c=="idle")return u("ok");n("fetch");let p="autocomplete-search-"+o.componentID;r.interval.clear(p),r.interval.standBy(p,300,()=>Q(void 0,null,function*(){let f=yield o.DynamicOptionsOnSearch(e.val_keyword);n("idle");let h=A.InitOptions(f||[]);e.set_options(h)}))},[e.val_keyword]);let i=[],m=A.FilterSelectableOptions(e,!0),s=A.FilterSelectableOptions(e);return m.forEach((p,f)=>{let{type:h,value:d}=p,I=e.val_optionFocused==d,g=e.val_status.dataValue.includes(d),V=o.SelectorComponent;i.push(l(V,{option:p,isFocused:I,isSelected:g,addCallback:()=>{e.set_status(w=>{let b=[...w.dataValue];return r.scope(()=>{if(d==="null")return b=[];w.dataValue.includes(d)?b=b.filter(x=>x!==d):o.multiSelect?b.push(d):b=[d]}),C(v({},w),{dataValue:b,eventType:"update",eventID:r.uuid.gen()})})}},String(d)||r.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=[U(G.Left,{padding:1,fontColor:"3.blur",children:[l(se.Theme.R,{showInitial:!0}),l(B.Supplement,{children:"Loading..."})]},"loader")]),l(K.Body,{className:L("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:a,set_status:o,val_optionsDict:c}=t,u=[];return a.dataValue.forEach(S=>{let n=c[String(S)];if(!n)return;let i=e.SelectedComponent,m=n.label;n.value==="null"&&(m=""),u.push(l(R,{className:L("SelectedCell"),children:l(i,{value:n.value,label:m,children:m,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),e.disabled)return;let p=[...a.dataValue];p=p.filter(f=>f!==S),o(f=>C(v({},f),{dataValue:p,eventType:"update",eventID:r.uuid.gen()}))}})},String(n.value)))}),l(H,{children:u})},Core:t=>{let{onUpdateValue:e,onUpdateValidValue:a,value:o}=t,c={componentID:t.componentID||"",dataValue:o,eventType:"init",eventID:r.uuid.gen()},[u,S]=O(!1),[n,i]=O(!1),[m,s]=O(""),[p,f]=O(t.options),[h,d]=O(t.value[0]||null),[I,g]=O({}),[V,w]=O(c),[b,T]=O({ok:!1,notice:[]}),x=ae(!1);k(()=>{x.current?f(t.options):x.current=!0},[t.options]),k(()=>{if(!p.length)return;let z=[...p],J=v({},I);z.forEach(W=>{W.type!="label"&&(J[String(W.value)]=W)}),g(J)},[p]);let P={rootStates:t,val_options:p,set_options:f,val_optionFocused:h,set_optionFocused:d,val_optionsDict:I,set_optionsDict:g,val_preventOpenSelectorOnFocus:u,set_preventOpenSelectorOnFocus:S,val_selectorOpen:n,set_selectorOpen:i,val_keyword:m,set_keyword:s,val_status:V,set_status:w,val_validate:b,set_validate:T};N.CommonEffects({type:"autocomplete",states:t,val_status:V,set_status:w,val_validate:b,set_validate:T,onUpdateValue:e,onUpdateValidValue:a,DefaultValidation:me,ExtraOverrideStates:{dataValue:o,formatValue:o}});let E=V.dataValue.length&&V.dataValue[0]!=="null";return E=E||n,U(ce,{val_status:V,set_status:w,val_validate:b,states:t,children:[l(de,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:E}),l(F.Shallow,v({},P)),l(F.Button,v({},P))]})}},te=t=>{let e=v({},t);e=C(v({value:[],min:0,max:65535,multiSelect:!0,padding:1,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:o,isSelected:c,isFocused:u,addCallback:S})=>o.type=="selector"?l(Z.Button.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:n=>{S()},children:l(B.Supplement,{paddingLeft:c?"1/2":0,transition:"short",children:o.label})}):l(H,{children:o.label}),SelectedComponent:({value:o,label:c,removeCallback:u})=>U(G.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(R,{padding:[0,"1/4"],children:c}),l(Z.Button.Sub.R,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:u,children:l(q.Times,{ssSphere:1})})]},"test")},e),{freeCSS:v({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=1,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]);let a=[];return e.value=r.flatArray(e.value||null),e.value.forEach((o,c)=>{a.push(r.JsonTo(o))}),e.value=a,e.options=A.InitOptions(e.options),r.is.nullish(e.rightIcon)&&(e.rightIcon=l(ee,{freeCSS:{pointerEvents:"none"},children:l(q.Search,{})}),e.disabled&&(e.rightIcon=l(ee,{fontColor:"5.translucent",freeCSS:{pointerEvents:"none"},children:l(q.Ban,{})}))),e.rightIcon&&(e=v({paddingRight:3},e)),e.leftIcon&&(e=v({paddingLeft:3},e)),l(ue,{componentID:e.componentID,children:F.Core,states:pe.Boxish(e)})};export{te as Autocomplete,te as default};
|
package/dist/temps/designBook.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import{b as M,c as _,e as A}from"../chunk-C5N2D3ZX.js";import{Fragment as B,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as D,useEffect as W}from"react";import S,{Filer as
|
|
1
|
+
import{b as M,c as _,e as A}from"../chunk-C5N2D3ZX.js";import{Fragment as B,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as D,useEffect as W}from"react";import S,{Filer as V}from"@mingoo/jsmin";import{Config as R,ThemeColors as J,Box as t,Span as K,Grid as c,Flex as h,FAI as g,Img as w,Logo as i,Column as p,Placeholder as j,List as y,ListItem as O,LinkifyText as $,Accordion as U,Row as s,Text as a,PageViewController as Q,SwipeView as Z,TabBar as ee,Plate as H,Table as C,Input as d,Button as r,Sheet as b,Snackbar as G,Tooltips as k,Loader as P,Effect as oe,Cropper as te,RootViewController as re}from"..";const v={index:()=>o(B,{children:[o(h,{gap:1,children:[e(t,{flexCenter:!0,children:e(j,{ssSphere:6,children:"Placeholder"})}),o(c,{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(c,{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(v.Fonts,{}),e(v.Box,{}),e(v.Flex,{}),e(v.Grid,{}),e(v.Others,{})]}),Fonts:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{padding:1,borderBottom:!0,children:"Font"}),o(t,{overflow:"auto",padding:1,children:[e(a.Description,{padding:1,children:`<Box
|
|
2
2
|
fontSize={ 0 ~ 8 }
|
|
3
3
|
>
|
|
4
4
|
some text
|
|
5
|
-
</Box>`}),e(y,{items:[o(B,{children:["\u30FB Landing",o(t,{isSemiBoldFont:!0,fontSize:"7.landing",children:["Visualize Your ",e(K,{fontColor:"theme",children:"Colors"})," On a Real Website"]})]}),o(B,{children:["\u30FB Title",e(t,{fontSize:"6.title",children:"\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059"})]}),o(B,{children:["\u30FB SubTitle",e(t,{fontSize:"5.subTitle",children:"\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B"})]}),o(B,{children:["\u30FB ThirdTitle",e(t,{fontSize:"4.thirdTitle",children:"\u79DF\u7A0E\u8CA0\u62C5\u7387\u3068\u793E\u4F1A\u4FDD\u969C\u8CA0\u62C5\u7387\u3092\u5408\u8A08\u3057\u305F\u56FD\u6C11\u8CA0\u62C5\u7387\u306B\u3064\u3044\u3066\u3001\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u898B\u901A\u3057\u3092\u63A8\u8A08\u3057\u307E\u3057\u305F\u306E\u3067\u3001\u516C\u8868\u3057\u307E\u3059\u3002"})]}),o(B,{children:["\u30FB Paragraph",e(
|
|
5
|
+
</Box>`}),e(y,{items:[o(B,{children:["\u30FB Landing",o(t,{isSemiBoldFont:!0,fontSize:"7.landing",children:["Visualize Your ",e(K,{fontColor:"theme",children:"Colors"})," On a Real Website"]})]}),o(B,{children:["\u30FB Title",e(t,{fontSize:"6.title",children:"\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059"})]}),o(B,{children:["\u30FB SubTitle",e(t,{fontSize:"5.subTitle",children:"\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B"})]}),o(B,{children:["\u30FB ThirdTitle",e(t,{fontSize:"4.thirdTitle",children:"\u79DF\u7A0E\u8CA0\u62C5\u7387\u3068\u793E\u4F1A\u4FDD\u969C\u8CA0\u62C5\u7387\u3092\u5408\u8A08\u3057\u305F\u56FD\u6C11\u8CA0\u62C5\u7387\u306B\u3064\u3044\u3066\u3001\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u898B\u901A\u3057\u3092\u63A8\u8A08\u3057\u307E\u3057\u305F\u306E\u3067\u3001\u516C\u8868\u3057\u307E\u3059\u3002"})]}),o(B,{children:["\u30FB Paragraph",e(a.Description,{fontSize:"3.paragraph",children:e($,{text:`
|
|
6
6
|
This article discusses performance best practices for fonts.
|
|
7
|
-
There are a variety of ways in which web fonts impact performance`})})]}),o(B,{children:["\u30FB Normal",e(t,{fontSize:"2.normal",children:"\u52B9\u7387\u7684\u3067\u6301\u7D9A\u53EF\u80FD\u306A\u8CA1\u653F\u3078\u306E\u8EE2\u63DB\u3092\u56F3\u308A\u3001\u3053\u306E\u8CA1\u653F\u69CB\u9020\u3092\u5404\u822C\u306E\u69CB\u9020\u6539\u9769\u3068\u3068\u3082\u306B\u63A8\u9032\u3059\u308B\u3053\u3068\u3067\u3001\u6C11\u9593\u9700\u8981\u4E3B\u5C0E\u306E\u6301\u7D9A\u7684\u7D4C\u6E08\u6210\u9577\u306E\u5B9F\u73FE\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u5C11\u5B50\u30FB\u9AD8\u9F62\u5316\u3001\u56FD\u969B\u5316\u306A\u3069\u7D4C\u6E08\u793E\u4F1A\u306E\u69CB\u9020\u5909\u5316\u306B\u5BFE\u5FDC\u3067\u304D\u308B21\u4E16\u7D00\u306E\u3042\u308B\u3079\u304D\u7A0E\u5236\u3092\u304D\u305A\u304D\u307E\u3059\u3002 \u8CA1\u653F\u6295\u878D\u8CC7\u306F\u3001\u884C\u8CA1\u653F\u6539\u9769\u306E\u8DA3\u65E8\u3092\u8E0F\u307E\u3048\u3001\u6C11\u9593\u3067\u306F\u3067\u304D\u306A\u3044\u5206\u91CE\u30FB\u4E8B\u696D\u306A\u3069\u306B\u91CD\u70B9\u5316\u3092\u884C\u3044\u3001\u771F\u306B\u653F\u7B56\u7684\u306B\u5FC5\u8981\u306A\u8CC7\u91D1\u9700\u8981\u306B\u306F\u7684\u78BA\u306B\u5BFE\u5FDC\u3057\u307E\u3059\u3002 \u91D1\u878D\u5E81\u3068\u5354\u529B\u3057\u3001\u91D1\u878D\u306E\u30BB\u30FC\u30D5\u30C6\u30A3\u30CD\u30C3\u30C8\u3092\u6574\u5099\u3057\u3001\u91D1\u878D\u5371\u6A5F\u306B\u7D20\u65E9\u304F\u5BFE\u5FDC\u3059\u308B\u306A\u3069\u3001\u91D1\u878D\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u306E\u78BA\u4FDD\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u56FD\u969B\u7684\u306A\u5354\u529B\u7B49\u306B\u7A4D\u6975\u7684\u306B\u53D6\u308A\u7D44\u3080\u3053\u3068\u306B\u3088\u308A\u3001\u56FD\u969B\u901A\u8CA8\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u30FB\u56FD\u969B\u8CBF\u6613\u306E\u79E9\u5E8F\u3042\u308B\u767A\u5C55\u3092\u76EE\u6307\u3057\u307E\u3059\u3002"})]}),o(B,{children:["\u30FB Mini",e(t,{fontSize:"1.mini",children:"Copyright \xA9 Ministry of Finance Japan. All Rights Reserved."})]})]})]})]}),Box:()=>o(t,{ssCardBox:!0,children:[e(
|
|
7
|
+
There are a variety of ways in which web fonts impact performance`})})]}),o(B,{children:["\u30FB Normal",e(t,{fontSize:"2.normal",children:"\u52B9\u7387\u7684\u3067\u6301\u7D9A\u53EF\u80FD\u306A\u8CA1\u653F\u3078\u306E\u8EE2\u63DB\u3092\u56F3\u308A\u3001\u3053\u306E\u8CA1\u653F\u69CB\u9020\u3092\u5404\u822C\u306E\u69CB\u9020\u6539\u9769\u3068\u3068\u3082\u306B\u63A8\u9032\u3059\u308B\u3053\u3068\u3067\u3001\u6C11\u9593\u9700\u8981\u4E3B\u5C0E\u306E\u6301\u7D9A\u7684\u7D4C\u6E08\u6210\u9577\u306E\u5B9F\u73FE\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u5C11\u5B50\u30FB\u9AD8\u9F62\u5316\u3001\u56FD\u969B\u5316\u306A\u3069\u7D4C\u6E08\u793E\u4F1A\u306E\u69CB\u9020\u5909\u5316\u306B\u5BFE\u5FDC\u3067\u304D\u308B21\u4E16\u7D00\u306E\u3042\u308B\u3079\u304D\u7A0E\u5236\u3092\u304D\u305A\u304D\u307E\u3059\u3002 \u8CA1\u653F\u6295\u878D\u8CC7\u306F\u3001\u884C\u8CA1\u653F\u6539\u9769\u306E\u8DA3\u65E8\u3092\u8E0F\u307E\u3048\u3001\u6C11\u9593\u3067\u306F\u3067\u304D\u306A\u3044\u5206\u91CE\u30FB\u4E8B\u696D\u306A\u3069\u306B\u91CD\u70B9\u5316\u3092\u884C\u3044\u3001\u771F\u306B\u653F\u7B56\u7684\u306B\u5FC5\u8981\u306A\u8CC7\u91D1\u9700\u8981\u306B\u306F\u7684\u78BA\u306B\u5BFE\u5FDC\u3057\u307E\u3059\u3002 \u91D1\u878D\u5E81\u3068\u5354\u529B\u3057\u3001\u91D1\u878D\u306E\u30BB\u30FC\u30D5\u30C6\u30A3\u30CD\u30C3\u30C8\u3092\u6574\u5099\u3057\u3001\u91D1\u878D\u5371\u6A5F\u306B\u7D20\u65E9\u304F\u5BFE\u5FDC\u3059\u308B\u306A\u3069\u3001\u91D1\u878D\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u306E\u78BA\u4FDD\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u56FD\u969B\u7684\u306A\u5354\u529B\u7B49\u306B\u7A4D\u6975\u7684\u306B\u53D6\u308A\u7D44\u3080\u3053\u3068\u306B\u3088\u308A\u3001\u56FD\u969B\u901A\u8CA8\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u30FB\u56FD\u969B\u8CBF\u6613\u306E\u79E9\u5E8F\u3042\u308B\u767A\u5C55\u3092\u76EE\u6307\u3057\u307E\u3059\u3002"})]}),o(B,{children:["\u30FB Mini",e(t,{fontSize:"1.mini",children:"Copyright \xA9 Ministry of Finance Japan. All Rights Reserved."})]})]})]})]}),Box:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Box"}),e(t,{padding:1,overflow:"auto",children:e(C.Normal,{ssCardBox:!1,borderRadius:0,height:1,tone:"cellBorder",colLength:2,head:!1,rows:[[{children:e(a.Description,{children:`<Box>
|
|
8
8
|
helloWorld!!
|
|
9
|
-
</Box>`})},{children:e(t,{children:" helloWorld!! "})}],[{children:e(
|
|
9
|
+
</Box>`})},{children:e(t,{children:" helloWorld!! "})}],[{children:e(a.Description,{children:`<Box
|
|
10
10
|
children={ 'helloWorld!!' }
|
|
11
|
-
/>`})},{children:e(t,{children:"helloWorld!!"})}],[{children:e(
|
|
11
|
+
/>`})},{children:e(t,{children:"helloWorld!!"})}],[{children:e(a.Description,{children:`<Box
|
|
12
12
|
fontColor={ '4.thin' }
|
|
13
13
|
padding={ 1 }
|
|
14
14
|
margin={ 1 }
|
|
@@ -17,29 +17,29 @@ borderRadius={ 2 }
|
|
|
17
17
|
border={ 'normal' }
|
|
18
18
|
children={ 'styleBox' }
|
|
19
19
|
/>
|
|
20
|
-
`})},{children:e(t,{fontColor:"4.thin",padding:1,margin:1,textAlign:"center",borderRadius:2,border:!0,children:"styleBox"})}]]})})]}),Flex:()=>o(t,{ssCardBox:!0,children:[e(
|
|
20
|
+
`})},{children:e(t,{fontColor:"4.thin",padding:1,margin:1,textAlign:"center",borderRadius:2,border:!0,children:"styleBox"})}]]})})]}),Flex:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Flex"}),e(t,{padding:1,overflow:"auto",children:e(C.Normal,{ssCardBox:!1,borderRadius:0,height:1,colLength:2,tone:"cellBorder",head:!1,rows:[[{children:e(a.Description,{children:`<Flex flexType='row' gap={ 1 }>
|
|
21
21
|
<Box children={ 'FlexBox1' } />
|
|
22
22
|
<Box children={ 'FlexBox2' } />
|
|
23
23
|
<Box children={ 'FlexBox3' } />
|
|
24
|
-
</Flex>`})},{children:o(h,{gap:1,flexType:"row",fontColor:"theme",children:[e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"theme.opa.low",children:"FlexBox1"}),e(t,{padding:1,borderRadius:1,flexCenter:!0,backgroundColor:"theme.opa.middle",children:"FlexBox2"}),e(t,{padding:1,borderRadius:1,flexCenter:!0,backgroundColor:"theme.opa.high",children:"FlexBox3"})]})}],[{children:e(
|
|
24
|
+
</Flex>`})},{children:o(h,{gap:1,flexType:"row",fontColor:"theme",children:[e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"theme.opa.low",children:"FlexBox1"}),e(t,{padding:1,borderRadius:1,flexCenter:!0,backgroundColor:"theme.opa.middle",children:"FlexBox2"}),e(t,{padding:1,borderRadius:1,flexCenter:!0,backgroundColor:"theme.opa.high",children:"FlexBox3"})]})}],[{children:e(a.Description,{textAlign:"left",children:`<Flex
|
|
25
25
|
flexType='col'
|
|
26
26
|
flexChilds={ 'auto' }
|
|
27
27
|
>
|
|
28
28
|
<Box />
|
|
29
29
|
<Box />
|
|
30
30
|
...
|
|
31
|
-
</Flex>`})},{children:o(B,{children:[o(h,{gap:1,flexCenter:!0,children:[e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.lightest"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.lighter"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.lighten"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.darken"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.darker"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.darkest"})]}),o(h,{gap:1,flexCenter:!0,children:[e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.1"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.2"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.3"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.4"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.5"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.6"})]})]})}],[{children:e(
|
|
31
|
+
</Flex>`})},{children:o(B,{children:[o(h,{gap:1,flexCenter:!0,children:[e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.lightest"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.lighter"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.lighten"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.darken"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.darker"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"theme.darkest"})]}),o(h,{gap:1,flexCenter:!0,children:[e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.1"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.2"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.3"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.4"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.5"}),e(t,{flexCenter:!0,ssSphere:3,boxShadow:"0.normal",backgroundColor:"layer.6"})]})]})}],[{children:e(a.Description,{children:`<Flex gap={ 1 }>
|
|
32
32
|
<Box flexGrid={ 2 } ... />
|
|
33
33
|
<Box flexGrid={ 3 } ... />
|
|
34
34
|
<Box flexGrid={ 4 } ... />
|
|
35
|
-
</Flex>`})},{children:o(h,{gap:1,fontColor:"white",children:[e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"posi",flexGrid:2,children:"Box1"}),e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"nega",flexGrid:3,children:"Box2"}),e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"warn",flexGrid:4,children:"Box3"})]})}]]})})]}),Grid:()=>o(t,{ssCardBox:!0,children:[e(
|
|
35
|
+
</Flex>`})},{children:o(h,{gap:1,fontColor:"white",children:[e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"posi",flexGrid:2,children:"Box1"}),e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"nega",flexGrid:3,children:"Box2"}),e(t,{flexCenter:!0,padding:1,borderRadius:1,backgroundColor:"warn",flexGrid:4,children:"Box3"})]})}]]})})]}),Grid:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Grid"}),e(t,{style:{padding:1,overflow:"auto"},children:e(C.Normal,{ssCardBox:!1,height:1,backgroundColor:"nega",borderRadius:0,colLength:2,tone:"cellBorder",head:!1,rows:[[{children:e(a.Description,{children:`<Grid gridCols={ 3 } gap={ 1 }>
|
|
36
36
|
<Box children={ 'GridBox1' } />
|
|
37
37
|
<Box children={ 'GridBox2' } />
|
|
38
38
|
<Box children={ 'GridBox3' } />
|
|
39
39
|
<Box children={ 'GridBox4' } />
|
|
40
40
|
<Box children={ 'GridBox5' } />
|
|
41
41
|
<Box children={ 'GridBox6' } />
|
|
42
|
-
</Grid>`})},{children:o(c,{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(
|
|
42
|
+
</Grid>`})},{children:o(c,{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(a.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(B,{children:e(a.Description,{children:`
|
|
43
43
|
<Button.Label
|
|
44
44
|
htmlFor='testAccordion'
|
|
45
45
|
type='sub'
|
|
@@ -53,27 +53,27 @@ children={
|
|
|
53
53
|
in Accordion Element
|
|
54
54
|
</>
|
|
55
55
|
}
|
|
56
|
-
/>`})})},{children:o(B,{children:[e(r.Label.Sub.R,{children:"ToggleButton",onClick:()=>{U.fn.toggle("testAccordion")}}),e(U,{accordionID:"testAccordion",defaultOpen:!0,children:"in Accordion Element"})]})}],[{children:e(
|
|
56
|
+
/>`})})},{children:o(B,{children:[e(r.Label.Sub.R,{children:"ToggleButton",onClick:()=>{U.fn.toggle("testAccordion")}}),e(U,{accordionID:"testAccordion",defaultOpen:!0,children:"in Accordion Element"})]})}],[{children:e(a.Description,{children:`
|
|
57
57
|
<Img
|
|
58
58
|
maxheight={ 8 }
|
|
59
59
|
maxWidth={ 8 }
|
|
60
60
|
src='...'
|
|
61
61
|
alt='noImage'
|
|
62
62
|
/>
|
|
63
|
-
`})},{children:e(w,{src:i.Images.defaultIcon("user"),alt:"noImage",freeCSS:{maxHeight:12*8,maxWidth:12*8}})}]]})})]})},f={index:()=>o(B,{children:[e(f.Comun,{}),e(f.Mingoo,{}),e(f.Google,{}),e(f.Facebook,{}),e(f.Line,{}),e(f.Twitter,{})]}),Comun:()=>o(t,{ssCardBox:!0,children:[e(
|
|
63
|
+
`})},{children:e(w,{src:i.Images.defaultIcon("user"),alt:"noImage",freeCSS:{maxHeight:12*8,maxWidth:12*8}})}]]})})]})},f={index:()=>o(B,{children:[e(f.Comun,{}),e(f.Mingoo,{}),e(f.Google,{}),e(f.Facebook,{}),e(f.Line,{}),e(f.Twitter,{})]}),Comun:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Comun"}),e(t,{padding:1,overflow:"auto",children:o(p,{padding:2,children:[o(s.Left,{gap:2,children:[e(i.Brands.ComunIcon,{size:"S"}),e(i.Brands.ComunIcon,{size:"R"}),e(i.Brands.ComunIcon,{size:"L"}),e(i.Brands.ComunIcon,{size:"2L"}),e(i.Brands.ComunIcon,{size:"3L"})]}),o(s.Left,{gap:2,children:[e(i.Brands.ComunTitle,{size:"S"}),e(i.Brands.ComunTitle,{size:"R"}),e(i.Brands.ComunTitle,{size:"L"}),e(i.Brands.ComunTitle,{size:"2L"}),e(i.Brands.ComunTitle,{size:"3L"})]}),o(s.Left,{gap:2,children:[e(i.Brands.ComunLogoH,{size:"S"}),e(i.Brands.ComunLogoH,{size:"R"}),e(i.Brands.ComunLogoH,{size:"L"}),e(i.Brands.ComunLogoH,{size:"2L"}),e(i.Brands.ComunLogoH,{size:"3L"})]}),o(s.Left,{gap:2,children:[e(i.Brands.ComunLogoV,{size:"S"}),e(i.Brands.ComunLogoV,{size:"R"}),e(i.Brands.ComunLogoV,{size:"L"}),e(i.Brands.ComunLogoV,{size:"2L"}),e(i.Brands.ComunLogoV,{size:"3L"})]})]})})]}),Mingoo:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Mingoo"}),e(t,{padding:1,overflow:"auto",children:o(s.Center,{gap:2,padding:2,flexType:"col",children:[e(i.Brands.MingooIcon,{size:"S"}),e(i.Brands.MingooIcon,{size:"R"}),e(i.Brands.MingooIcon,{size:"L"}),e(i.Brands.MingooIcon,{size:"2L"}),e(i.Brands.MingooIcon,{size:"3L"})]})})]}),Google:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Google"}),e(t,{padding:1,overflow:"auto",children:o(s.Center,{flexType:"col",gap:2,padding:2,children:[e(i.Brands.Google,{size:"S"}),e(i.Brands.Google,{size:"R"}),e(i.Brands.Google,{size:"L"}),e(i.Brands.Google,{size:"2L"}),e(i.Brands.Google,{size:"3L"})]})})]}),Facebook:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Facebook"}),e(t,{padding:1,overflow:"auto",children:o(s.Center,{flexType:"col",gap:2,padding:2,children:[e(i.Brands.Facebook,{size:"S"}),e(i.Brands.Facebook,{size:"R"}),e(i.Brands.Facebook,{size:"L"}),e(i.Brands.Facebook,{size:"2L"}),e(i.Brands.Facebook,{size:"3L"})]})})]}),Line:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"LINE"}),e(t,{padding:1,overflow:"auto",children:o(s.Center,{flexType:"col",gap:2,padding:2,children:[e(i.Brands.LINE,{size:"S"}),e(i.Brands.LINE,{size:"R"}),e(i.Brands.LINE,{size:"L"}),e(i.Brands.LINE,{size:"2L"}),e(i.Brands.LINE,{size:"3L"})]})})]}),Twitter:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Twitter"}),e(t,{padding:1,overflow:"auto",children:o(s.Center,{flexType:"col",gap:2,padding:2,children:[e(i.Brands.Twitter,{size:"S"}),e(i.Brands.Twitter,{size:"R"}),e(i.Brands.Twitter,{size:"L"}),e(i.Brands.Twitter,{size:"2L"}),e(i.Brands.Twitter,{size:"3L"})]})})]})},F={index:()=>o(B,{children:[e(F.Ripple,{}),e(F.Variables,{}),e(F.Tooltips,{}),e(F.Snackbar,{})]}),Ripple:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Ripple"}),o(p,{padding:2,children:[e(a.Description,{children:`<Element
|
|
64
64
|
ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
|
|
65
|
-
/>`}),o(s.Center,{children:[e(t,{ssCardBox:!0,padding:1,ssEffectsOnActive:"ripple.theme",children:"DIV"}),e(r.Button.Prime.R,{ssEffectsOnActive:"ripple.white",children:"White"}),e(r.Button.Border.R,{ssEffectsOnActive:"ripple.cloud",children:"Cloud"}),e(r.Button.Border.R,{ssEffectsOnActive:"ripple.theme",children:"Theme"})]})]})]}),Variables:()=>o(t,{ssCardBox:!0,children:[e(
|
|
65
|
+
/>`}),o(s.Center,{children:[e(t,{ssCardBox:!0,padding:1,ssEffectsOnActive:"ripple.theme",children:"DIV"}),e(r.Button.Prime.R,{ssEffectsOnActive:"ripple.white",children:"White"}),e(r.Button.Border.R,{ssEffectsOnActive:"ripple.cloud",children:"Cloud"}),e(r.Button.Border.R,{ssEffectsOnActive:"ripple.theme",children:"Theme"})]})]})]}),Variables:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Effects"}),o(p,{padding:2,children:[e(a.Description,{children:`<Button
|
|
66
66
|
ssEffectsOnActive={ 'shrink' }
|
|
67
|
-
/>`}),e(s.Left,{children:e(r.Button.Prime.R,{onClick:()=>{P.fn.mini.active("testLoadingKey"),setTimeout(()=>{P.fn.stopALL()},5e3)},children:o(s.Center,{gap:0,children:[e(P.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(t,{textAlign:"left",children:"Launch Mini Loader"})]})})}),o(s.Left,{children:[e(r.Button.Border.R,{ssEffectsOnActive:"shrink",children:"Shrink"}),e(r.Button.Border.R,{ssEffectsOnActive:"pudding",children:"Pudding"}),e(r.Button.Border.R,{ssEffectsOnActive:"expand",children:"Expand"}),e(r.Button.Border.R,{ssEffectsOnActive:"push",children:"Push"}),e(r.Button.Border.R,{children:"corner Loader",onClick:()=>{P.fn.corner.active(),setTimeout(()=>{P.fn.corner.stop()},3e3)}})]})]})]}),Tooltips:()=>o(t,{ssCardBox:!0,children:[e(
|
|
67
|
+
/>`}),e(s.Left,{children:e(r.Button.Prime.R,{onClick:()=>{P.fn.mini.active("testLoadingKey"),setTimeout(()=>{P.fn.stopALL()},5e3)},children:o(s.Center,{gap:0,children:[e(P.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(t,{textAlign:"left",children:"Launch Mini Loader"})]})})}),o(s.Left,{children:[e(r.Button.Border.R,{ssEffectsOnActive:"shrink",children:"Shrink"}),e(r.Button.Border.R,{ssEffectsOnActive:"pudding",children:"Pudding"}),e(r.Button.Border.R,{ssEffectsOnActive:"expand",children:"Expand"}),e(r.Button.Border.R,{ssEffectsOnActive:"push",children:"Push"}),e(r.Button.Border.R,{children:"corner Loader",onClick:()=>{P.fn.corner.active(),setTimeout(()=>{P.fn.corner.stop()},3e3)}})]})]})]}),Tooltips:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Tooltips"}),o(p,{padding:2,children:[o(r.Button.Prime.R,{onContextMenu:l=>{l.preventDefault(),k.open({tipsID:"testTooltips",event:l,nextToCursor:!0,gravityPoint:10,close_option:{parentBlur:!1},padding:0,freeCSS:{minWidth:12*16},content:o(p,{ssCardBox:!0,gap:0,borderRadius:"3.tone.tertiary",padding:"1/2",children:[e(r.Button.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label1"}),e(r.Button.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label2"}),e(r.Button.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label3"}),e(r.Button.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label4"}),e(r.Button.Clear.S,{color:"cloud",fontColor:"2.normal",textAlign:"left",children:"Button Label5"})]})})},children:["OpenTooltips next to cursor",e("br",{}),"( onContextMenu )"]}),e(c,{gridCols:5,gap:1,children:Array.from({length:25}).map((l,n)=>e(r.Button.Border.R,{onMouseOver:u=>{k.open({tipsID:"tips-"+(n+1),event:u,gravityPoint:n+1,close_option:{parentBlur:!1},padding:0,content:e(k.Body,{children:n},n)})},children:n+1},n))})]})]}),Snackbar:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Snackbars"}),o(s.Center,{padding:2,children:[e(r.Button.Prime.R,{onClick:()=>{G.add({secondsToClose:3,children:"hello World!!"})},children:"Add Normal Snackbar"}),e(r.Button.Prime.R,{onClick:()=>{G.add({snackID:"testSnackID1",secondsToClose:30,children:o(s.Separate,{verticalAlign:"baseline",paddingLeft:"2/3",children:["\u4E88\u7D04\u6642\u9593\u304C\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F",e(r.Button.Clear.S,{color:"white",fontColor:"posi",children:"\u5143\u306B\u623B\u3059"})]})})},children:"Notices"}),e(r.Button.Prime.R,{onClick:()=>{let l=S.uuid.gen();G.add({snackID:l,children:o(p,{padding:1,children:[o(s.Left,{verticalAlign:"top",children:[e(w,{src:i.Images.defaultIcon("user"),ssSphere:4}),e(a.Description,{children:`Some Text
|
|
68
68
|
Some Text
|
|
69
|
-
Some Text`})]}),o(s.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:()=>{G.remove(l)},children:"\u9589\u3058\u308B"}),e(r.Anchor.Prime.S,{href:"",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},
|
|
69
|
+
Some Text`})]}),o(s.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:()=>{G.remove(l)},children:"\u9589\u3058\u308B"}),e(r.Anchor.Prime.S,{href:"",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},N={index:()=>o(B,{children:[e(N.Types,{}),e(N.Tone,{})]}),Tone:()=>o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Tone"}),e(t,{padding:1,overflow:"auto",children:o(c,{gridCols:2,gap:2,children:[o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBPrime"}),o(c,{gridCols:3,padding:1,gap:1,children:[e(r.Button.Prime.R,{color:"theme",children:"theme"}),e(r.Button.Prime.R,{color:"coffee",children:"posi"}),e(r.Button.Prime.R,{color:"ninja",children:"nega"}),e(r.Button.Prime.R,{color:"droplet",children:"warn"}),e(r.Button.Prime.R,{color:"googleBlue",children:"mono"}),e(r.Button.Prime.R,{color:"poizon",children:"pozion"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBSub"}),o(c,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Sub.R,{color:"theme",children:"theme"}),e(r.Button.Sub.R,{color:"posi",children:"posi"}),e(r.Button.Sub.R,{color:"nega",children:"nega"}),e(r.Button.Sub.R,{color:"warn",children:"warn"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]}),o(c,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.Button.Sub.R,{color:"white",children:"white"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBClear"}),o(c,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Clear.R,{color:"theme",children:"theme"}),e(r.Button.Clear.R,{color:"posi",children:"posi"}),e(r.Button.Clear.R,{color:"nega",children:"nega"}),e(r.Button.Clear.R,{color:"warn",children:"warn"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]}),o(c,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.Button.Clear.R,{color:"white",children:"white"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBFillToBorder"}),o(c,{gridCols:3,gap:1,padding:1,children:[e(r.Button.FillToBorder.R,{color:"theme",children:"theme"}),e(r.Button.FillToBorder.R,{color:"posi",children:"posi"}),e(r.Button.FillToBorder.R,{color:"nega",children:"nega"}),e(r.Button.FillToBorder.R,{color:"warn",children:"warn"})]}),o(c,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.Button.FillToBorder.R,{color:"white",children:"white"}),e(r.Button.FillToBorder.R,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBBorderToFill"}),o(c,{gridCols:3,gap:1,padding:1,children:[e(r.Button.BorderToFill.R,{color:"theme",fontColor:"nega",children:e(t,{children:"theme"})}),e(r.Button.BorderToFill.R,{color:"posi",children:"posi"}),e(r.Button.BorderToFill.R,{color:"nega",children:"nega"}),e(r.Button.BorderToFill.R,{color:"warn",children:"warn"})]}),o(c,{gridCols:3,gap:1,padding:1,ssCardBox:!0,backgroundColor:"dark",children:[e(r.Button.BorderToFill.R,{color:"white",children:"white"}),e(r.Button.BorderToFill.R,{color:"cloud",children:"cloud"})]})]}),o(t,{children:[e(t,{padding:1,isBoldFont:!0,fontSize:"3.paragraph",children:"\u30FBOthers"}),o(c,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Border.R,{children:"Border"}),e(r.Button.Normal.R,{children:"Normal"}),e(r.Button.Link,{children:"Link"}),e(r.Button.Plain,{children:"Plain"})]})]})]})})]}),Types:()=>o(h,{gap:2,flexChilds:"auto",children:[o(t,{ssCardBox:!0,children:[e(a.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBButton"}),e(t,{padding:1,overflow:"auto",children:e(y,{items:[o(B,{children:[e(r.Button.Prime.R,{children:"Button.Prime"}),"Button.Button.Prime"]}),o(B,{children:[e(r.Button.Sub.R,{children:"Button.Sub"}),"Button.Button.Sub"]}),o(B,{children:[e(r.Button.Border.R,{children:"Button.Border"}),"Button.Button.Border"]})]})})]}),o(t,{ssCardBox:!0,children:[e(a.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBLabel"}),e(t,{padding:1,overflow:"auto",children:e(y,{ListChildCallback:({children:l})=>e(p,{gap:"1/3",padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal",children:l}),items:[o(B,{children:["Button.Label.Prime",e(r.Label.Prime.R,{children:"Label.Prime"})]}),o(B,{children:["Button.Label.Sub",e(r.Label.Sub.R,{children:"Label.Sub"})]}),o(B,{children:["Button.Label.Border",e(r.Label.Border.R,{children:"Label.Border"})]})]})})]}),o(t,{ssCardBox:!0,children:[e(a.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBAnchor"}),e(t,{padding:1,overflow:"auto",children:e(y,{ListChildCallback:({children:l})=>e(p,{gap:"1/3",padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal",children:l}),items:[o(B,{children:["Button.Anchor.Prime",e(r.Anchor.Prime.R,{href:"",children:"Anchor.Prime"})]}),o(B,{children:["Button.Anchor.Sub",e(r.Anchor.Sub.R,{href:"",children:"Anchor.Sub"})]}),o(B,{children:["Button.Anchor.Border",e(r.Anchor.Border.R,{href:"",children:"Anchor.Border"})]})]})})]}),o(t,{ssCardBox:!0,children:[e(a.ThirdTitle,{borderBottom:!0,padding:1,children:"\u30FBSizes"}),o(p,{padding:2,gap:2,children:[e(s.Left,{children:e(r.Button.Prime.XS,{children:'size="XS"'})}),e(s.Left,{children:e(r.Button.Prime.S,{children:'size="S"'})}),e(s.Left,{children:e(r.Button.Prime.R,{children:'size="R"'})}),e(s.Left,{children:e(r.Button.Prime.L,{children:'size="L"'})})]})]})]})},le={index:()=>{let l=n=>e(t,M({flexCenter:!0,ssCardBox:"layer",textAlign:"center",padding:2},n));return o(p,{gap:4,children:[o(p,{children:[e(a.Paragraph,{children:"Shadows"}),o(c,{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(a.Paragraph,{children:"Inset Shadows"}),o(c,{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"})]})]})]})}},ne=()=>{const l={Basic:()=>o(t,{ssCardBox:!0,children:[e(a.Paragraph,{borderBottom:!0,padding:1,children:"TextInput"}),o(p,{padding:1,gap:2,children:[o(s.Separate,{marginBottom:2,children:[e(a.Description,{children:`<Input.Text
|
|
70
70
|
required
|
|
71
71
|
value={ 'hello React!!' }
|
|
72
72
|
/>`}),e(d.TextField,{label:"testInputLabel",required:!0,value:"helloReact"})]}),e(d.TextField.Email,{label:"Input.TextField.Email",autoComplete:"off",name:"emailInput",value:"******@gmail.com"}),e(d.TextField.Number,{label:"Input.TextField.Number",value:"324"}),e(d.TextField,{label:"Input.TextField (number.zeroStart)",restrict:"number.zeroStart",value:"0324"}),o(t,{children:["Input.DigitCharacters",e(d.DigitCharacters,{numericOnly:!0,value:"0324",digits:6})]}),e(d.TextField.Tel,{label:"Input.TextField.Tel",value:"080-6995-2229"}),e(d.TextField.Money.JPY,{value:"3000",placeholder:"\u91D1\u984D",label:"Input.TextField.Money.JPY"}),e(d.TextField.Url,{label:"Input.TextField.Url",value:"http://google.com"}),o(t,{children:[o(s.Right,{verticalAlign:"unset",children:[e(t,{flexSizing:0,children:e(d.TextField.Postal,{label:"Input.TextField.Postal",override:"force"})}),e(r.Button.Border.R,{onClick:()=>A(void 0,null,function*(){}),children:"\u73FE\u5728\u5730\u3092\u53D6\u5F97"})]}),e(t,{id:"postalResult",padding:1,textAlign:"left"})]}),e(d.TextField.Password,{label:"Input.TextField.Password",value:"onigiriUmai"}),e(d.TextField,{label:"Input.TextField (multiline)",multiline:!0,autoHeight:!1,value:`text1
|
|
73
73
|
text2
|
|
74
74
|
text3
|
|
75
75
|
text4
|
|
76
|
-
text5`,minRows:5}),e(d.TextField,{label:"Input.TextField (autoHeight) (multiline)",multiline:!0,autoHeight:!0,value:"",freeCSS:{minHeight:72},onUpdateValidValue:
|
|
76
|
+
text5`,minRows:5}),e(d.TextField,{label:"Input.TextField (autoHeight) (multiline)",multiline:!0,autoHeight:!0,value:"",freeCSS:{minHeight:72},onUpdateValidValue:n=>{console.log(n)}})]})]}),Time:()=>e(B,{children:o(t,{ssCardBox:!0,children:[e(a.Paragraph,{borderBottom:!0,padding:1,children:"Time Input"}),e(t,{padding:1,children:o(p,{gap:1.5,children:[e(d.Time.Clock,{label:"Input.Time.Clock"}),e(d.Time.Date,{label:"Input.Time.Date"}),e(d.Time.Week,{label:"Input.Time.Week"}),e(d.Time.Month,{label:"Input.Time.Month"}),e(d.Time.Year,{label:"Input.Time.Year"}),e(d.Time.Periods.Date,{label:"Input.Time.Periods.Date"}),e(d.Time.Periods.Month,{label:"Input.Time.Periods.Month"}),e(d.Time.DateWareki,{label:"Input.Time.DateWareki"}),e(t,{children:e(d.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:n})=>{d.Time.fn.picker.launch({parent:"#timePicker",restrict:n,defaultValue:"",onValueUpdate:u=>{console.log(u)}})}})})]})})]})}),List:()=>e(B,{children:o(t,{ssCardBox:!0,children:[e(a.Paragraph,{borderBottom:!0,padding:1,children:"Radio & Checkbox Input"}),e(t,{padding:1,children:o(p,{children:[o(h,{gap:2,flexChilds:"auto",children:[o(t,{children:["Input.Checkbox",e(d.Checkbox,{value:[2,"3"],minSelect:2,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Input.Radio",e(d.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(d.Radio,{value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}],CustomIcon:n=>o(r.Button.Normal.S,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",isRounded:!0,fontSize:"3.paragraph",fontColor:n.isChecked?"theme":"5.translucent",onClick:u=>{u.preventDefault(),u.stopPropagation(),n.toggle()},children:[e(g.Heart,{})," 3"]})})]})]}),o(p,{children:[e(a.Paragraph,{children:"Tones"}),o(p,{children:[o(t,{children:["Plain",e(d.Radio,{value:[1],gap:1,options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]}),o(t,{children:["Plain icon={ false }",e(d.Checkbox,{icon:!1,cellStyles:{padding:["1/3","2/3"],isRounded:!0},cellCheckedStyles:{fontColor:"theme"},value:[2,"3"],minSelect:2,hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Simple",e(d.Checkbox.Simple,{value:[2,"3"],minSelect:2,hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Normal",e(d.Checkbox.Normal,{value:[2,"3"],minSelect:2,hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Vivid",e(d.Checkbox.Vivid,{value:[2,"3"],minSelect:2,hideInput:!0,options:[{value:"1",label:"Option1"},{value:"2",label:"Option2"},{value:"3",label:"Option3"}]})]}),o(t,{children:["Cloud",e(d.Checkbox.Cloud,{value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]}),o(t,{children:["Border",e(d.Radio.Border,{value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]})]})]})]})})]})}),Select:()=>e(B,{children:o(t,{ssCardBox:!0,children:[e(a.Paragraph,{borderBottom:!0,padding:1,children:"Select,Autocomplete Input"}),o(p,{padding:2,gap:1.5,children:[e(d.Select,{label:"Input.Select",required:!0,value:3,options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3a"},{value:4,label:"option4"}]}),e(d.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"}],onUpdateValidValue:({value:n})=>{console.log(n)},DynamicOptionsOnSearch:(...n)=>A(void 0,null,function*(){let u=[];for(let x=0;x<100;x++)u.push({value:x,label:String(x)});return u})}),e(d.Autocomplete,{label:"Input.Autocomplete",SelectorGravityPoint:6,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"}],onUpdateValidValue:({value:n})=>{console.log(n)}})]})]})}),Segmented:()=>o(t,{ssCardBox:!0,children:[e(a.ThirdTitle,{borderBottom:!0,padding:1,children:"Segmented"}),o(p,{padding:2,gap:2,children:[e(s.Left,{children:e(d.Segmented,{value:1,options:[{value:0,label:"Home"},{value:1,label:"Notice"},{value:2,label:"Posts"},{value:3,label:"Settings"}]})}),e(s.Left,{children:e(d.Segmented.Cloud,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]})}),e(s.Left,{children:e(d.Segmented.CloudTheme,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]})}),e(s.Left,{children:e(d.Segmented.CloudMono,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]})}),e(s.Left,{children:e(d.Segmented.Border,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]})}),e(s.Left,{children:e(d.Segmented.BorderVivid,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]})}),e(s.Left,{borderBottom:!0,children:e(d.Segmented.Bottomline,{value:1,options:[{value:0,label:"Takana"},{value:1,label:"Mentai"},{value:2,label:"Mayo"},{value:3,label:"Gyudon"}]})})]})]}),Variables:()=>e(B,{children:o(t,{ssCardBox:!0,children:[e(a.Paragraph,{borderBottom:!0,padding:1,children:"Variables"}),e(t,{padding:1,children:e(p,{children:o(h,{gap:2,flexChilds:"auto",children:[o(t,{children:["Input.File",e(d.Filer,{limit:3,onUpdateValidValue:({value:n})=>{console.log(n[0])}})]}),o(t,{children:["Input.Switch",o(h,{gap:2,children:[e(d.Switch,{}),e(d.Switch,{appearance:"applely",color:"icicles",value:!0}),e(d.Switch,{appearance:"applely",icon:e(g.Check,{}),color:"warn",value:!0})]})]}),o(t,{flexNewLine:!0,children:["Input.Slider",e(d.Slider,{color:"battery",name:"sliderInput",value:40,step:10,min:0,max:100})]})]})})})]})})};return e(B,{children:e(H,{size:"L",children:o(c,{gridCols:2,gap:2,children:[e(l.Basic,{}),e(l.Select,{}),e(l.Time,{}),e(l.List,{}),e(l.Segmented,{}),e(l.Variables,{})]})})})},ae=()=>{const l=n=>{let u="testModal2";b.open({type:n,sheetID:u,size:"S",padding:2,content:o(b.Body,{padding:1,children:[e(t,{padding:2,children:"Content"}),e(s.Right,{children:e(r.Button.Prime.R,{onClick:()=>{b.close(u)},children:"\u9589\u3058\u308B"})})]})})};return o(B,{children:[o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"CardBox"}),e(t,{padding:1,overflow:"auto",children:e(a.Description,{children:`<Box styles={{ssCardBox:true}}>
|
|
77
77
|
<Box>
|
|
78
78
|
Header
|
|
79
79
|
</Box>
|
|
@@ -84,16 +84,16 @@ text5`,minRows:5}),e(d.TextField,{label:"Input.TextField (autoHeight) (multiline
|
|
|
84
84
|
<Box>
|
|
85
85
|
Footer
|
|
86
86
|
</Box>
|
|
87
|
-
</Box>`})}),e(t,{padding:2,children:o(t,{ssCardBox:!0,children:[e(
|
|
87
|
+
</Box>`})}),e(t,{padding:2,children:o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Header"}),e(t,{padding:1,overflow:"auto",children:"Body"}),e(t,{padding:1,children:"Footer"})]})})]}),o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"List"}),e(t,{padding:1,overflow:"auto",children:e(a.Description,{children:`<List
|
|
88
88
|
options={ [
|
|
89
89
|
{
|
|
90
90
|
title?: LeftSideReactComponent,
|
|
91
91
|
content: RightSideReactComponent
|
|
92
92
|
}
|
|
93
93
|
] }
|
|
94
|
-
/>`})}),e(t,{padding:2,overflow:"auto",children:o(y,{ssCardBox:!0,padding:1,children:[o(O.Left,{children:[e(t,{padding:"1/2",backgroundColor:"cloud",children:"Left"}),e(t,{padding:"1/2",backgroundColor:"cloud",flexSizing:0,children:"Right"})]}),o(O.Right,{children:[e(t,{padding:"1/2",backgroundColor:"cloud",flexSizing:0,children:"Left"}),e(t,{padding:"1/2",backgroundColor:"cloud",children:"Right"})]}),o(O.Separate,{children:[e(t,{padding:"1/2",backgroundColor:"cloud",children:"Left"}),e(t,{padding:"1/2",backgroundColor:"cloud",children:"Right"})]}),o(O.Center,{gap:"1/4",children:[e(t,{padding:"1/2",backgroundColor:"cloud",flexGrid:1,children:"1"}),e(t,{padding:"1/2",backgroundColor:"cloud",flexGrid:3,children:"3"}),e(t,{padding:"1/2",backgroundColor:"cloud",flexGrid:2,children:"2"})]})]})})]}),o(t,{ssCardBox:!0,children:[e(
|
|
94
|
+
/>`})}),e(t,{padding:2,overflow:"auto",children:o(y,{ssCardBox:!0,padding:1,children:[o(O.Left,{children:[e(t,{padding:"1/2",backgroundColor:"cloud",children:"Left"}),e(t,{padding:"1/2",backgroundColor:"cloud",flexSizing:0,children:"Right"})]}),o(O.Right,{children:[e(t,{padding:"1/2",backgroundColor:"cloud",flexSizing:0,children:"Left"}),e(t,{padding:"1/2",backgroundColor:"cloud",children:"Right"})]}),o(O.Separate,{children:[e(t,{padding:"1/2",backgroundColor:"cloud",children:"Left"}),e(t,{padding:"1/2",backgroundColor:"cloud",children:"Right"})]}),o(O.Center,{gap:"1/4",children:[e(t,{padding:"1/2",backgroundColor:"cloud",flexGrid:1,children:"1"}),e(t,{padding:"1/2",backgroundColor:"cloud",flexGrid:3,children:"3"}),e(t,{padding:"1/2",backgroundColor:"cloud",flexGrid:2,children:"2"})]})]})})]}),o(t,{ssCardBox:!0,children:[e(a.SubTitle,{borderBottom:!0,padding:1,children:"Sheet"}),e(t,{padding:1,overflow:"auto",children:e(a.Description,{children:`Sheet.open( {
|
|
95
95
|
sheetID: 'sheetID',
|
|
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.Button.Border.R,{onClick:
|
|
99
|
+
} )`})}),o(p,{padding:2,children:[e(r.Button.Border.R,{onClick:n=>{k.open({tipsID:"testTips",parent:n.currentTarget,close_option:{parentBlur:!1,aroundClick:!1,escapeKeyDown:!0},content:()=>e(b.Body,{padding:2,children:e(r.Button.Prime.R,{onClick:()=>{b.open({sheetID:"testSheet",close_option:{aroundClick:!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(c,{gridCols:3,gap:1,children:[e(r.Button.Border.R,{onClick:()=>{l("normal.topLeft")},children:"Top Left"}),e(r.Button.Border.R,{onClick:()=>{l("normal.topCenter")},children:"Top Center"}),e(r.Button.Border.R,{onClick:()=>{l("normal.topRight")},children:"Top Right"}),e(r.Button.Border.R,{onClick:()=>{l("normal.middleLeft")},children:"Middle Left"}),e(r.Button.Border.R,{onClick:()=>{l("normal.middleCenter")},children:"Middle Center"}),e(r.Button.Border.R,{onClick:()=>{l("normal.middleRight")},children:"Middle Right"}),e(r.Button.Border.R,{onClick:()=>{l("normal.bottomLeft")},children:"Bottom Left"}),e(r.Button.Border.R,{onClick:()=>{l("normal.bottomCenter")},children:"Bottom Center"}),e(r.Button.Border.R,{onClick:()=>{l("normal.bottomRight")},children:"Bottom Right"}),e(r.Button.Border.R,{onClick:()=>{l("drawer.left")},children:"Drawer Left"}),e(r.Button.Border.R,{onClick:()=>{l("drawer.bottom")},children:"Drawer Bottom"}),e(r.Button.Border.R,{onClick:()=>{l("drawer.right")},children:"Drawer Right"}),e(r.Button.Border.R,{onClick:n=>{k.open({tipsID:"test40",parent:n.currentTarget,content:e(t,{padding:1,border:!0,borderRadius:2,backgroundColor:"dark",fontColor:"white",children:"Content"})})},children:"Open Tooltips"})]})}),o(s.Center,{children:["Image Picker",e(w,{src:i.Images.defaultIcon("user"),ssSphere:6,showExpand:!0})]})]})]})]})},z={index:()=>e(B,{children:o(p,{children:[e(z.Normal,{}),e(z.Data,{}),e(z.Drag,{}),e(z.Spread,{})]})}),Normal:()=>{let l=[];for(var n=0;n<10;n++){let u=[{children:"head_"+n},{children:"data_"+n},{children:"data_"+n}];l.push(u)}return o(B,{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:u=>{console.log(u)}})]})},Drag:()=>{let l=[];for(var n=0;n<4;n++){let u=[{children:"head_"+n},{children:"data_"+n},{children:"data_"+n}];u.rowID="rowID-"+n,l.push(u)}return o(B,{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:u=>{console.log(u)}})]})},Data:()=>{let l=[];for(var n=0;n<100;n++){let x=Math.round(Math.random()*50+1),T=Math.round(Math.random()*50+1),L=Math.round(Math.random()*50+1),m="name_"+x,E="data_"+T,I="data_"+L,X=[{type:"th",children:n+":"+m,data:m,orderIndex:n},{type:"td",children:E,data:E},{type:"td",children:I,data:I}];l.push(X)}l[1].checked=!0,l[4].checked=!0,l[10].checked=!0;let u="testDataTable";return o(B,{children:[o(h,{horizontalAlign:"between",children:[e(t,{fontSize:"5.subTitle",children:"Table.Data"}),o(h,{gap:"1/2",backgroundColor:"theme",borderRadius:"1.tone.primary",overflow:"hidden",fontColor:"white",children:[e(r.Button.Clear.R,{color:"white",children:"SubmitButton"}),e(t,{flexSizing:"none",unitWidth:"1/4",backgroundColor:"layer.4.opa.middle",isRounded:!0,margin:["2/3",0]}),e(r.Button.Clear.R,{padding:[0,1],color:"white",onClick:x=>{k.open({tipsID:S.uuid.gen(),parent:x.target,gravityPoint:24,close_option:{aroundClick:!0,parentBlur:!1},content:o(p,{gap:0,padding:["2/3",0],backgroundColor:"layer.1",borderRadius:2,boxShadow:"0.normal",overflow:"hidden",children:[e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3059\u3079\u3066\u3092\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3053\u306E\u30DA\u30FC\u30B8\u306E\u307F\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,children:"\u30C1\u30A7\u30C3\u30AF\u3057\u305F\u884C\u306E\u307F\u51FA\u529B"})]})})},children:e(g.EllipsisV,{})})]})]}),o(s.Separate,{verticalAlign:"bottom",children:[o(s.Left,{verticalAlign:"bottom",children:[e(C.Data.SearchInput,{tableID:u}),e(C.Data.Info,{tableID:u})]}),o(s.Right,{verticalAlign:"unset",children:[e(C.Data.RowLength,{tableID:u,lengthSelect:[30,50,100]}),e(C.Data.Paging,{tableID:u})]})]}),e(C.Data,{tableID:u,colLength:3,head:[{data:"head1"},{data:"head2"},{data:"head3"}],rows:l,pageRowLength:30,ssCardBox:!0,cellStyles:{},cellStylesCallback:()=>({}),filter:[!0],checker:!0})]})},Spread:()=>e(B,{children:e(t,{fontSize:"5.subTitle",children:"Table.Spread"})})},ie=()=>{let[l,n]=D(""),[u,x]=D(""),[T,L]=D("");return e(B,{children:o(t,{children:[o(r.Button.Prime.R,{onClick:()=>{te.openDialogNEdit({use:"square",develops:[{size:"S"},{size:"R"},{size:"L"}],onProcessFinished:m=>A(void 0,null,function*(){n(yield(yield V.fromFile(m[0])).toDataURL()),x(yield(yield V.fromFile(m[1])).toDataURL()),L(yield(yield V.fromFile(m[2])).toDataURL())})})},children:[e(g.Image,{})," \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"]}),o(h,{gap:1,verticalAlign:"top",children:[l&&e(w,{isRounded:!0,src:l,alt:"",showExpand:!0,freeCSS:{maxWidth:12*12}}),u&&e(w,{style:{maxWidth:24*12},src:u,alt:"",showExpand:!0}),T&&e(w,{style:{maxWidth:24*12},src:T,alt:"",showExpand:!0}),e(Z,{border:!0,borderWidth:3,margin:[3,"auto"],freeCSS:{width:12*10},slideIndex:1,options:{loop:!0,onSlideCallback:m=>{}},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"})]})]})]})})},q={Darkmode:l=>e(d.Segmented.Cloud,_(M({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:R.get().darkMode,onUpdateValidValue:({value:n})=>{let u=n;S.setLocalStrageData("prf.darkMode",u),R.update.darkMode(u)}})),ThemeColor:()=>{const l=n=>{let u="themeColorSelector";b.open({sheetID:u,type:"normal.middleCenter",size:"L",close_option:{aroundClick:!0},closeAfter:()=>{re.fn.updateCSSProperty.reset()},content:()=>{let[x,T]=D(n.defaultColor);W(()=>{S.scope(()=>{x!==R.get().themeColor&&(R.update.themeColor(x),S.setLocalStrageData("prf.themeColor",x),b.close(u))})},[x]);let L=Object.entries(J).map(([m,E])=>{let I=m===x;return e(r.Button.Clear.R,{color:"cloud",textAlign:"center",onClick:()=>{T(m)},children:o(p,{gap:"1/2",textAlign:"center",children:[I&&e(a.Supplement,{padding:["1/4","1/2"],borderRadius:"3.tone.tertiary",backgroundColor:m,boxShadow:"2.normal",margin:"auto",fontColor:"white",fontSize:"0.xs",children:"\u8A2D\u5B9A\u4E2D"}),e(t,{position:"relative",margin:"auto",backgroundColor:m,ssSphere:2.5,children:e(t,{ssAbsoluteCovered:!0,border:!0,opacity:I?"max":"low",borderWidth:2,transition:"short",isRounded:!0,freeCSS:{transform:"scale(1.25)"}})}),e(a.Supplement,{ssTextEllipsis:!0,freeCSS:{lineHeight:1.25},children:m.toCapital()})]})},m)});return e(b.Body,{children:o(p,{padding:2,gap:2,children:[o(s.Separate,{children:[e(a.Paragraph,{children:"\u30C6\u30FC\u30DE\u3092\u9078\u629E"}),e(r.Button.Sub.R,{color:"cloud",ssSphere:3,onClick:()=>{b.close(u)},children:e(g.Times,{})})]}),e(c,{gap:"1/4",freeCSS:{gridTemplateColumns:"repeat(auto-fit, minmax(4.5rem, 1fr))"},children:L})]})})}})};return e(r.Button.Border.R,{isRounded:!0,fontColor:"theme",onClick:n=>{l({defaultColor:R.get().themeColor,cb:u=>{}})},children:o(s.Center,{gap:"1/3",children:[e(t,{boxShadow:"2.normal",ssSquare:1,borderRadius:"1/3",backgroundColor:"theme"}),"Theme: ",R.get().themeColor.toCapital()]})})}};let Y=()=>{let[l,n]=D(Number(S.queryParams.get().ti)||0);return W(()=>{S.queryParams.set({ti:String(l)})},[l]),o(B,{children:[e(t,{position:"fixed",bottom:1,left:1,isRounded:!0,freeCSS:{zIndex:20},children:e(q.Darkmode,{})}),e(t,{position:"fixed",bottom:1,right:1,isRounded:!0,freeCSS:{zIndex:20},children:e(q.ThemeColor,{})}),o(p,{gap:0,minHeight:"contentHeight",backgroundColor:"layer.1",position:"relative",freeCSS:{zIndex:1},children:[e(ee,{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:u=>{localStorage.setItem("designTabHeader",String(u)),n(u)},UnderBreakPointStyles:{position:"static",top:0}}),e(t,{flexSizing:0,position:"relative",freeCSS:{zIndex:1},children:e(Q,{viewIndex:l,views:[e(v.index,{}),e(le.index,{}),e(N.index,{}),e(ne,{}),e(ae,{}),e(F.index,{}),e(z.index,{}),e(ie,{}),"",e(f.index,{})],wrapper:u=>e(oe.FadeIn,{animationTime:200,children:e(H,{children:e(h,{gap:2,padding:2,flexWrap:!0,flexChilds:"auto",children:u})})},l)})})]})]})};export{Y as DesignBook,Y as default};
|