amotify 0.1.20 → 0.1.22
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/@declaration/property.d.ts +2 -2
- package/dist/@styles/componentClasses/_.css +2 -2
- package/dist/atoms/FAI.js +1 -1
- package/dist/fn/Input/Chips/Selector.js +1 -1
- package/dist/fn/Input/Chips/_.js +1 -1
- package/dist/fn/Input/Slider.js +1 -1
- package/dist/fn/Input/core.js +1 -1
- package/dist/fn/Layout/SwipeView.d.ts +1 -1
- package/dist/fn/Layout/SwipeView.js +1 -1
- package/dist/fn/Sheet.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/style.css +26 -2
- package/dist/temps/_.d.ts +1 -1
- package/dist/temps/_.js +1 -0
- package/dist/temps/designBook.d.ts +4 -0
- package/dist/temps/designBook.js +99 -0
- package/package.json +3 -2
|
@@ -90,8 +90,8 @@ export declare namespace Sizes {
|
|
|
90
90
|
type Params = {
|
|
91
91
|
maxHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset';
|
|
92
92
|
minHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset';
|
|
93
|
-
minWidth?: 0 | 1 | 'unset';
|
|
94
|
-
maxWidth?: 0 | 1 | 'unset';
|
|
93
|
+
minWidth?: 0 | 1 | 'viewWidth' | 'unset';
|
|
94
|
+
maxWidth?: 0 | 1 | 'viewWidth' | 'unset';
|
|
95
95
|
unitWidth?: Size;
|
|
96
96
|
unitHeight?: Size;
|
|
97
97
|
width?: 0 | 1 | 'viewWidth' | 'auto';
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license amotify
|
|
3
|
-
* amotify 0.1.
|
|
3
|
+
* amotify 0.1.21
|
|
4
4
|
* https://mingoo.co.jp/
|
|
5
5
|
|
|
6
6
|
* Copyright (c) mingoo, LLC.
|
|
7
7
|
* Released under the MIT license
|
|
8
8
|
|
|
9
|
-
* Latest updated at: 2024/5
|
|
9
|
+
* Latest updated at: 2024/6/5
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
/* esbuild-sass-plugin:css-chunk:src/@styles/componentClasses/a_img.module.scss */
|
package/dist/atoms/FAI.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as r,c as i,d as f}from"../chunk-VY3566IV.js";import{jsx as n}from"react/jsx-runtime";import l from"./Box";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{
|
|
1
|
+
import{b as r,c as i,d as f}from"../chunk-VY3566IV.js";import{jsx as n}from"react/jsx-runtime";import l from"./Box";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faTimes as h}from"@fortawesome/free-solid-svg-icons/faTimes";import{faAngleRight as C}from"@fortawesome/free-solid-svg-icons/faAngleRight";import{faAngleLeft as A}from"@fortawesome/free-solid-svg-icons/faAngleLeft";import{faAngleUp as g}from"@fortawesome/free-solid-svg-icons/faAngleUp";import{faAngleDown as w}from"@fortawesome/free-solid-svg-icons/faAngleDown";import{faChevronLeft as R}from"@fortawesome/free-solid-svg-icons/faChevronLeft";import{faChevronRight as u}from"@fortawesome/free-solid-svg-icons/faChevronRight";import{faChevronUp as L}from"@fortawesome/free-solid-svg-icons/faChevronUp";import{faChevronDown as S}from"@fortawesome/free-solid-svg-icons/faChevronDown";import{faCaretLeft as E}from"@fortawesome/free-solid-svg-icons/faCaretLeft";import{faCaretRight as x}from"@fortawesome/free-solid-svg-icons/faCaretRight";import{faCaretUp as I}from"@fortawesome/free-solid-svg-icons/faCaretUp";import{faCaretDown as P}from"@fortawesome/free-solid-svg-icons/faCaretDown";import{faArrowLeft as D}from"@fortawesome/free-solid-svg-icons/faArrowLeft";import{faArrowRight as d}from"@fortawesome/free-solid-svg-icons/faArrowRight";import{faArrowUp as k}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faArrowDown as y}from"@fortawesome/free-solid-svg-icons/faArrowDown";import{faRotate as U}from"@fortawesome/free-solid-svg-icons/faRotate";import{faRedo as F}from"@fortawesome/free-solid-svg-icons/faRedo";import{faCheck as v}from"@fortawesome/free-solid-svg-icons/faCheck";import{faQuestion as T}from"@fortawesome/free-solid-svg-icons/faQuestion";import{faExclamation as H}from"@fortawesome/free-solid-svg-icons/faExclamation";import{faExclamationTriangle as B}from"@fortawesome/free-solid-svg-icons/faExclamationTriangle";import{faHome as Q}from"@fortawesome/free-solid-svg-icons/faHome";import{faShare as M}from"@fortawesome/free-solid-svg-icons/faShare";import{faSearch as G}from"@fortawesome/free-solid-svg-icons/faSearch";import{faYenSign as V}from"@fortawesome/free-solid-svg-icons/faYenSign";import{faPen as Y}from"@fortawesome/free-solid-svg-icons/faPen";import{faBars as N}from"@fortawesome/free-solid-svg-icons/faBars";import{faDownload as O}from"@fortawesome/free-solid-svg-icons/faDownload";import{faLink as W}from"@fortawesome/free-solid-svg-icons/faLink";import{faLinkSlash as z}from"@fortawesome/free-solid-svg-icons/faLinkSlash";import{faExternalLinkAlt as b}from"@fortawesome/free-solid-svg-icons/faExternalLinkAlt";import{faGear as q}from"@fortawesome/free-solid-svg-icons/faGear";import{faPlus as J}from"@fortawesome/free-solid-svg-icons/faPlus";import{faMinus as K}from"@fortawesome/free-solid-svg-icons/faMinus";import{faEllipsisH as X}from"@fortawesome/free-solid-svg-icons/faEllipsisH";import{faEllipsisV as Z}from"@fortawesome/free-solid-svg-icons/faEllipsisV";import{faStar as _}from"@fortawesome/free-solid-svg-icons/faStar";import{faPaperPlane as $}from"@fortawesome/free-solid-svg-icons/faPaperPlane";import{faHeart as j}from"@fortawesome/free-solid-svg-icons/faHeart";import{faUser as oo}from"@fortawesome/free-regular-svg-icons/faUser";import{faCheckCircle as ro}from"@fortawesome/free-regular-svg-icons/faCheckCircle";import{faQuestionCircle as io}from"@fortawesome/free-regular-svg-icons/faQuestionCircle";import{faEdit as to}from"@fortawesome/free-regular-svg-icons/faEdit";import{faCopy as no}from"@fortawesome/free-regular-svg-icons/faCopy";import{faFile as eo}from"@fortawesome/free-regular-svg-icons/faFile";import{faTrashAlt as ao}from"@fortawesome/free-regular-svg-icons/faTrashAlt";import{faImage as mo}from"@fortawesome/free-regular-svg-icons/faImage";const e=o=>{let m=o,{icon:p,iconParams:a}=m,c=f(m,["icon","iconParams"]);return n(l,i(r({display:"inlineFlex",flexCenter:!0,position:"relative",freeCSS:{aspectRatio:"1"}},c),{children:n(s,i(r({icon:p,fixedWidth:!0,size:"sm"},a),{style:r({aspectRatio:1,minWidth:12*1,minHeight:12*1},a==null?void 0:a.style)}))}))},t=e;t.User=o=>n(e,i(r({},o),{icon:oo})),t.Times=o=>n(e,i(r({},o),{icon:h})),t.AngleRight=o=>n(e,i(r({},o),{icon:C})),t.AngleLeft=o=>n(e,i(r({},o),{icon:A})),t.AngleUp=o=>n(e,i(r({},o),{icon:g})),t.AngleDown=o=>n(e,i(r({},o),{icon:w})),t.ChevronLeft=o=>n(e,i(r({},o),{icon:R})),t.ChevronRight=o=>n(e,i(r({},o),{icon:u})),t.ChevronUp=o=>n(e,i(r({},o),{icon:L})),t.ChevronDown=o=>n(e,i(r({},o),{icon:S})),t.CaretLeft=o=>n(e,i(r({},o),{icon:E})),t.CaretRight=o=>n(e,i(r({},o),{icon:x})),t.CaretUp=o=>n(e,i(r({},o),{icon:I})),t.CaretDown=o=>n(e,i(r({},o),{icon:P})),t.ArrowLeft=o=>n(e,i(r({},o),{icon:D})),t.ArrowRight=o=>n(e,i(r({},o),{icon:d})),t.ArrowUp=o=>n(e,i(r({},o),{icon:k})),t.ArrowDown=o=>n(e,i(r({},o),{icon:y})),t.Rotate=o=>n(e,i(r({},o),{icon:U})),t.Redo=o=>n(e,i(r({},o),{icon:F})),t.Check=o=>n(e,i(r({},o),{icon:v})),t.CheckCircle=o=>n(e,i(r({},o),{icon:ro})),t.Question=o=>n(e,i(r({},o),{icon:T})),t.QuestionCircle=o=>n(e,i(r({},o),{icon:io})),t.Exclamation=o=>n(e,i(r({},o),{icon:H})),t.ExclamationTriangle=o=>n(e,i(r({},o),{icon:B})),t.Home=o=>n(e,i(r({},o),{icon:Q})),t.Share=o=>n(e,i(r({},o),{icon:M})),t.Search=o=>n(e,i(r({},o),{icon:G})),t.YenSign=o=>n(e,i(r({},o),{icon:V})),t.Heart=o=>n(e,i(r({},o),{icon:j})),t.Star=o=>n(e,i(r({},o),{icon:_})),t.Edit=o=>n(e,i(r({},o),{icon:to})),t.Pen=o=>n(e,i(r({},o),{icon:Y})),t.Copy=o=>n(e,i(r({},o),{icon:no})),t.File=o=>n(e,i(r({},o),{icon:eo})),t.TrashAlt=o=>n(e,i(r({},o),{icon:ao})),t.Bars=o=>n(e,i(r({},o),{icon:N})),t.Download=o=>n(e,i(r({},o),{icon:O})),t.Link=o=>n(e,i(r({},o),{icon:W})),t.LinkSlash=o=>n(e,i(r({},o),{icon:z})),t.ExternalLinkAlt=o=>n(e,i(r({},o),{icon:b})),t.Gear=o=>n(e,i(r({},o),{icon:q})),t.Plus=o=>n(e,i(r({},o),{icon:J})),t.Minus=o=>n(e,i(r({},o),{icon:K})),t.EllipsisH=o=>n(e,i(r({},o),{icon:X})),t.EllipsisV=o=>n(e,i(r({},o),{icon:Z})),t.PaperPlane=o=>n(e,i(r({},o),{icon:$})),t.Image=o=>n(e,i(r({},o),{icon:mo}));export{t as FAI,t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as
|
|
1
|
+
import{b as E,c as J,d as W,e as K}from"../../../chunk-VY3566IV.js";import{Fragment as j,jsx as n,jsxs as O}from"react/jsx-runtime";import{useState as I,useEffect as R,useRef as L}from"react";import{$$ as w,$$fromRoot as P,useStore as U}from"../../../@utils/_";import F from"../../../atoms/Box";import _ from"../../../atoms/FAI";import $ from"../../../atoms/Span";import H from"../../../mols/Column";import b from"../../../mols/Row";import V from"../../Button";import k from"../../Sheet";import G from"../../Loader/_";import Q from"../Text";import X from"../Parts";import{InputChipsClasses as Y}from"../../../@styles/componentClasses/_";const Z=e=>{let[y,r]=I("show"),[h,N]=I(""),[u]=I(w.uuid.gen()),[l,g]=I(e.options),[o,C]=I(l[0]||null),[S,x]=I(e.selected),[D,T]=I("init");R(()=>{U.set({key:e.selectorID,value:{updateOptions:t=>{g(t)},updateSelected:t=>{x(t)}}})},[]);const B=L(!1);R(()=>{B.current?k.reposition(e.selectorID):B.current=!0},[l]);const z=L(!1);R(()=>{z.current?(r("interlude"),C(l[0]||null),e.onDynamicSearch?(w.interval.clear(u+"-dynamicSearch"),w.interval.standBy(u+"-dynamicSearch",400,()=>K(void 0,null,function*(){let{options:t}=yield e.onDynamicSearch(h);g(t),r("show")}))):(w.interval.clear(u+"-staticSearch"),w.interval.standBy(u+"-staticSearch",400,()=>K(void 0,null,function*(){let t=new RegExp(h,"ig"),p=[];[...e.options].forEach(a=>{var c;!!(!h||((c=String(a.label))!=null?c:String(a.value)).match(t))&&p.push(a)}),g(p),r("show")})))):z.current=!0},[h]);const M=L(!1);R(()=>{M.current?e.onUpdated({values:S}):M.current=!0},[S]),R(()=>{w.scope(()=>{if(w.is.nullish(o)||D=="MouseEvent")return;let t=P("#"+u+"-Selector-Cell-Wrap");if(!t[0])return;let p=P('[data-chips-selector-cell="'+u+"-"+JSON.stringify((o==null?void 0:o.value)||"").replace(/\"/ig,"")+'"]');if(!p[0])return;let{top:a,height:v}=t.position(),{top:c,height:d}=p.position();if(a<=c&&c+d<=a+v)return;let i=t[0].scrollTop+(c-a);D=="ArrowDown"?i-=v-d-20:D=="ArrowUp"&&(i-=20),t[0].scrollTop=i})},[o]);let A=[];return y=="interlude"?A=[O(b.Center,{padding:2,gap:0,children:[n(G.Theme.R,{showInitial:!0}),n(F,{padding:[0,1],fontSize:"1.mini",fontColor:"4.thin",children:"\u691C\u7D22\u4E2D..."})]})]:A=[l.map((t,p)=>{let{value:a,label:v}=t,c=String(JSON.stringify(a)),d=S.findIndex(f=>JSON.stringify(f.value)==c),i=d!=-1,s=JSON.stringify((o==null?void 0:o.value)||"")==c,m={};return(i||s)&&(m={fontColor:"theme",isSemiBoldFont:!0}),s&&(m.backgroundColor="cloud"),i&&(m.backgroundColor="tcOpFew"),n(V.Button.Clear.R,J(E({borderRadius:"3.tone.tertiary",color:"cloud",padding:"1/3",tabIndex:-1,textAlign:"left","data-chips-selector-cell":u+"-"+c.replace(/\"/ig,""),isActive:i||s,isActiveStyles:m},m),{onMouseOver:()=>{T("MouseEvent"),C(t)},onClick:()=>{let f=[...S];i?f.splice(d,1):(f=[...f,t],e.limit&&f.length>e.limit&&f.shift()),x(f)},children:n(e.SelectorCellComponent,{isSelected:i,isFocused:s,value:a,label:v})}),p)})],O(j,{children:[O(H,{padding:"2/3",gap:"2/3",borderBottom:!0,children:[O(b.Separate,{children:[n(Q.Normal,{value:h,onUpdateValidValue:({value:t})=>{N(t)},id:e.selectorID+"-KeywordInput",padding:"2/3",placeholder:"\u691C\u7D22...",leftIcon:n(X.LeftIcon,{right:"2/3",fontSize:"1.mini",fontColor:"3.blur",children:n(_.Search,{})}),onKeyDown:t=>{let{key:p,metaKey:a,ctrlKey:v}=t,c=a||v;if(["ArrowDown","ArrowUp"].includes(p)){let d=+(p=="ArrowDown")*2-1;if(c){let i=l[d==1?l.length-1:0];C(i)}else{let i=l.findIndex(s=>JSON.stringify(s.value)==JSON.stringify((o==null?void 0:o.value)||""))+d;l[i]?C(l[i]):C(l[d==1?0:l.length-1]||null)}}else if(p=="Enter"){let d=S.findIndex(m=>JSON.stringify(m.value)==JSON.stringify((o==null?void 0:o.value)||"")),i=d!=-1,s=[...S];if(i)s.splice(d,1);else{let m=l.findIndex(f=>JSON.stringify(f.value)==JSON.stringify((o==null?void 0:o.value)||""));if(m==-1)return;s=[...s,l[m]],e.limit&&s.length>e.limit&&s.shift()}x(s)}T(p)}}),n(V.Button.Border.S,{marginRight:"1/3",ssSphere:2,backgroundColor:"cloud",borderRadius:"2.tone.secondary",onClick:()=>{k.close(e.selectorID)},children:n(_.Times,{})})]}),O(b.Separate,{children:[O(b.Left,{gap:"1/2",verticalAlign:"baseline",children:[n($,{fontColor:"theme",children:l.length}),n(F,{fontSize:"1.mini",fontColor:"3.blur",children:"\u4EF6\u306E\u30D2\u30C3\u30C8"})]}),n(b.Right,{children:e.limit?O($,{fontColor:"3.blur",fontSize:"1.mini",children:[n($,{fontSize:"3.paragraph",fontColor:"theme",isSemiBoldFont:!0,children:S.length})," / ",e.limit," \u4EF6"]}):null})]})]}),n(H,{gap:"1/4",padding:"1/2",overflow:"auto",freeCSS:{maxHeight:12*26,maxWidth:12*26},id:u+"-Selector-Cell-Wrap",className:Y("SelectorWrapper"),children:A}),e.bottomContent]})},q={openSelector:e=>{let T=e,{selectorID:y,options:r,selected:h,limit:N,bottomContent:u,onDynamicSearch:l,SelectorCellComponent:g,onUpdated:o,onClosed:C,parent:S}=T,x=W(T,["selectorID","options","selected","limit","bottomContent","onDynamicSearch","SelectorCellComponent","onUpdated","onClosed","parent"]),D=y;g=g||(B=>n(b.Left,{children:B.label})),k.open(J(E({parent:S,sheetID:D,type:"custom",gravityPoint:22,padding:[1,0],hold_state:!0,close_option:{aroundClick:!0,escapeKeyDown:!0}},x),{content:n(F,{borderRadius:"2.tone.secondary",backgroundColor:"1.layer.base",border:!0,boxShadow:"1.normal",overflow:"hidden",children:n(Z,{selectorID:y,options:r,limit:N,selected:h,onUpdated:o,SelectorCellComponent:g,bottomContent:u,onDynamicSearch:l},JSON.stringify(h))}),openAfter:()=>{P("#"+e.selectorID+"-KeywordInput").focus()},closeAfter:()=>{C()}}))},closeSelector:e=>{k.close(e)},updateOptions:(e,y)=>{let r=U.get(e);r&&r.updateOptions&&r.updateOptions(y)},updateSelected:(e,y)=>{let r=U.get(e);r&&r.updateSelected&&r.updateSelected(y)}};export{q as Selector,q as default};
|
package/dist/fn/Input/Chips/_.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as u,c as
|
|
1
|
+
import{b as u,c as h,d as N}from"../../../chunk-VY3566IV.js";import{jsx as a,jsxs as b}from"react/jsx-runtime";import{useState as v,useEffect as L,useRef as H}from"react";import{$$ as B,$$fromRoot as T}from"../../../@utils/_";import Q from"../../../atoms/Box";import P from"../../../atoms/FAI";import X from"../../../mols/Row";import U from"../../Button";import Y from"../../Sheet";import{Wrapper as Z,BoxWrapper as j,CommonEffects as ee,DefaultStyles as te}from"../core";import ne from"../Hidden";import W from"./Selector";function oe(e){let{value:r,params:c}=e,{required:o}=c,s=[];return o&&!r.length&&s.push({type:"invalid",label:"\u4E00\u3064\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),{ok:!s.filter(({type:f})=>f=="invalid").length,notice:s}}const le=e=>{let $=e,{required:r,form:c,name:o,checkValidationAtFirst:s,onValidate:f,onUpdateValue:O,onUpdateValidValue:M,value:F=[],limit:A,leftIndicator:ie,rightIndicator:pe,leftIcon:ue,rightIcon:re,SelectedCellComponent:g,AddButtonComponent:x,componentID:ce,defaultOptions:se,enableFormSubmit:de}=$,q=N($,["required","form","name","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","limit","leftIndicator","rightIndicator","leftIcon","rightIcon","SelectedCellComponent","AddButtonComponent","componentID","defaultOptions","enableFormSubmit"]);x=x;let[p]=v(B.uuid.gen()),[d,R]=v({componentID:e.componentID||"",dataValue:F.map(t=>t),eventID:B.uuid.gen(),eventType:"init"}),[D,z]=v({ok:!1,notice:[]}),[n,G]=v([...F]);ee({params:e,val_status:d,set_status:R,val_validate:D,set_validate:z,DefaultValidation:oe,onUpdateValue:O,onUpdateValidValue:M,ExtraOverrideParams:{formatValue:n,dataValue:n.map(t=>t)},ExtraStoreParams:{searchTimer:null}});const C=t=>{G(t),R(h(u({},d),{dataValue:t.map(i=>i),eventID:B.uuid.gen(),eventType:"update"}))};let E=`[data-chips-input-wrapper="${p}"]`;const y=()=>{W.openSelector({parent:E,gravityPoint:e.selectorGravityPoint,SelectorCellComponent:e.SelectorCellComponent,selectorID:p,options:e.defaultOptions||[],selected:n,limit:e.limit,onDynamicSearch:e.onDynamicSearch,onUpdated:t=>{C(t.values)},onClosed:()=>{T(E).focus()}})};let I=A&&A<=n.length;const _=H(!1);L(()=>{_.current?I&&(Y.close(p),T(`[data-chips-input-wrapper="${p}"]`).focus()):_.current=!0},[n]);let J=n.map(t=>{let{value:i,label:k}=t;g=g;const S=()=>{let l=n.findIndex(w=>w.value==i);if(l==-1)return;let m=[...n];m.splice(l,1),C(m),m.length||setTimeout(()=>{T(`[data-chips-input-wrapper="${p}"]`).focus()},200)};return a(g,{value:i,label:k,removeCallback:S,defaultRemoveButton:a(U.Button.Sub.S,{flexSizing:"none",color:"cloud",backgroundColor:"cloud",flexCenter:!0,isRounded:!0,freeCSS:{aspectRatio:"1/1"},onClick:()=>{S()},children:a(P.Times,{})}),openCallback:()=>{y()}},JSON.stringify(i))});return b(j,{val_status:d,set_status:R,val_validate:D,params:e,children:[a(ne,{"data-value":JSON.stringify(d.dataValue.map(t=>t.value)),name:o,form:c,"data-input-type":"chips-"+["single","multi"][+(e.limit!=1)],"data-validation":D.ok,componentID:d.componentID,"data-focusor":p}),b("button",h(u({"data-chips-input-wrapper":p,onKeyDown:t=>{let{key:i,ctrlKey:k,metaKey:S,keyCode:l}=t,m=k||S;if(l>=48&&l<=57||l>=65&&l<=90||l>=96&&l<=105){if(I)return;y()}else if(i!="Tab"){if(i=="Backspace"){if(!n.length)return;if(m)C([]);else{let K=[...n];K.pop(),C(K)}}}},onClick:()=>{I||y()}},q),{children:[I?null:a(x,{selected:n,openCallback:y}),J]}))]})},ae=e=>{let c=[...e.value||[]].splice(0,e.limit||65535);return a(le,h(u({SelectedCellComponent:o=>{let{value:s,label:f,removeCallback:O}=o;return b(X.Left,{ssCardBox:!0,padding:"1/3",gap:0,isRounded:!0,textAlign:"left",children:[a(Q,{padding:[0,"1/2"],children:f}),o.defaultRemoveButton]})},AddButtonComponent:o=>e.limit&&e.limit<=o.selected.length?null:b(U.Button.Sub.R,{color:"cloud",padding:"1/2",onClick:()=>{o.openCallback()},children:[a(P.Plus,{}),"\u8FFD\u52A0\u3059\u308B"]})},e),{value:c}))},V=e=>{e=u({},e),e=u({gap:1,display:"flex",horizontalAlign:"left",verticalAlign:"center",flexWrap:!0},e);let r=te.Boxish(e);return a(Z,{componentID:e.componentID,children:ae,params:r})};V.fn=W;export{V as Chips,V as default};
|
package/dist/fn/Input/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as I,c as T,d as B}from"../../chunk-VY3566IV.js";import{jsx as d,jsxs as M}from"react/jsx-runtime";import{useState as A,useEffect as P}from"react";import{$$ as c,$$fromRoot as L,useStore as E,GenerateClassName as q}from"../../@utils/_";import x from"../../atoms/Box";import F from"../../atoms/Flex";import O from"../../mols/Column";import G from"../Button";import{Wrapper as X,BoxWrapper as j,SubmitForm as J,CommonEffects as Q}from"./core";import Y from"./Hidden";import{InputSliderClasses as v}from"../../@styles/componentClasses/_";function Z(a){let{value:e,params:o}=a,{required:n}=o,s=[];return n&&!e&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!s.filter(({type:i})=>i=="invalid").length,notice:s}}const N=a=>{let{value:e,val_status:o}=a,{min:n,max:s,step:i}=o;e=Math.max(e,n),e=Math.min(e,s);let t=e/s*s;return t=Math.round(t/i),{stepValue:t*i,stepIndex:t,positionLeft:t*i/s*100+"%"}},z={IndicatorLabels:a=>{let{componentID:e,min:o,max:n,step:s,customLegends:i}=a,r=[],t=Math.round(o/s),p=Math.round(n/s),f=p-t+1;for(var u=t;u<=p;u++){let l=u*s;l=Math.max(l,o),l=Math.min(l,n);let g=l/n*100+"%";r.push(d(x,{className:v("Label"),id:"Legend-"+e+"-"+u,display:u==t||u==p?"flex":"none",position:"absolute",top:0,unitHeight:1,unitWidth:1.5,transition:"middle",fontColor:"1.clear",freeCSS:{left:g,whiteSpace:"nowrap",textAlign:"center"},verticalAlign:"center",horizontalAlign:"center",children:i?i(l):l.rank()},l))}return P(()=>{const l=()=>{let g=L("#Labels-"+e),{width:S}=g.position(),C=Math.round(S/50)-1,y=Math.round(f/C);for(let m=t+1;m<p;m++)L("#Legend-"+e+"-"+m).css({display:m%y==0?"flex":"none"})};return c(window).addEvent({eventID:"SliderResizeCallback-"+e,eventType:"resize",callback:()=>{l()}}),l(),()=>{c(window).removeEvent("SliderResizeCallback-"+e)}},[]),d(F,{className:v("Labels"),verticalAlign:"center",horizontalAlign:"between",
|
|
1
|
+
import{b as I,c as T,d as B}from"../../chunk-VY3566IV.js";import{jsx as d,jsxs as M}from"react/jsx-runtime";import{useState as A,useEffect as P}from"react";import{$$ as c,$$fromRoot as L,useStore as E,GenerateClassName as q}from"../../@utils/_";import x from"../../atoms/Box";import F from"../../atoms/Flex";import O from"../../mols/Column";import G from"../Button";import{Wrapper as X,BoxWrapper as j,SubmitForm as J,CommonEffects as Q}from"./core";import Y from"./Hidden";import{InputSliderClasses as v}from"../../@styles/componentClasses/_";function Z(a){let{value:e,params:o}=a,{required:n}=o,s=[];return n&&!e&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!s.filter(({type:i})=>i=="invalid").length,notice:s}}const N=a=>{let{value:e,val_status:o}=a,{min:n,max:s,step:i}=o;e=Math.max(e,n),e=Math.min(e,s);let t=e/s*s;return t=Math.round(t/i),{stepValue:t*i,stepIndex:t,positionLeft:t*i/s*100+"%"}},z={IndicatorLabels:a=>{let{componentID:e,min:o,max:n,step:s,customLegends:i}=a,r=[],t=Math.round(o/s),p=Math.round(n/s),f=p-t+1;for(var u=t;u<=p;u++){let l=u*s;l=Math.max(l,o),l=Math.min(l,n);let g=l/n*100+"%";r.push(d(x,{className:v("Label"),id:"Legend-"+e+"-"+u,display:u==t||u==p?"flex":"none",position:"absolute",top:0,unitHeight:1,unitWidth:1.5,transition:"middle",fontColor:"1.clear",freeCSS:{left:g,whiteSpace:"nowrap",textAlign:"center"},verticalAlign:"center",horizontalAlign:"center",children:i?i(l):l.rank()},l))}return P(()=>{const l=()=>{let g=L("#Labels-"+e),{width:S}=g.position(),C=Math.round(S/50)-1,y=Math.round(f/C);for(let m=t+1;m<p;m++)L("#Legend-"+e+"-"+m).css({display:m%y==0?"flex":"none"})};return c(window).addEvent({eventID:"SliderResizeCallback-"+e,eventType:"resize",callback:()=>{l()}}),l(),()=>{c(window).removeEvent("SliderResizeCallback-"+e)}},[]),d(F,{className:v("Labels"),verticalAlign:"center",horizontalAlign:"between",fontSize:"0.xs",position:"relative",unitHeight:1,id:"Labels-"+e,children:d(x,{position:"absolute",top:0,left:0,bottom:0,freeCSS:{right:12*1.5},children:r})})},Rail:a=>{let{val_status:e,set_status:o,DotData:n,form:s,enableFormSubmit:i}=a,{componentID:r}=e;return M(F,{className:v("Rail"),position:"relative",paddingLeft:"1/2",unitHeight:1.5,verticalAlign:"center",freeCSS:{minWidth:"10rem",zIndex:1,cursor:"pointer"},onMouseDown:t=>{t.stopPropagation(),b.Effects.Start(t,{val_status:e,set_status:o,DotData:n})},onTouchStart:t=>{t.stopPropagation(),b.Effects.Start(t,{val_status:e,set_status:o,DotData:n})},children:[d(x,{className:v("Bar"),backgroundColor:"4.layer.darken",position:"relative",borderRadius:"sphere",transition:"middle",flexSizing:"none",unitHeight:"2/3",width:1,id:r+"_Bar",children:d(x,{className:v("BarColor"),position:"relative",height:1,width:0,left:0,transition:"long",borderRadius:"inherit",backgroundColor:a.color,opacity:"middle",overflow:"hidden",freeCSS:{width:n.positionLeft},id:r+"_BarColor"})}),d(x,{className:v("BallWrap"),position:"absolute",top:0,left:0,bottom:0,freeCSS:{right:12*1.5},children:d(G.Button.Plain,{className:v("Ball"),position:"absolute",backgroundColor:a.color,top:0,left:0,ssSphere:1.5,freeCSS:{zIndex:2,left:n.positionLeft},"data-form-name":s,id:r+"_Ball",onKeyDown:t=>{b.KeyDownEvent({event:t,val_status:e,set_status:o,DotData:n}),i&&J(t)}})})]})}},b={Effects:{Start:(a,e)=>{c(document).addEvent({eventID:"SliderMouseMove",eventType:"mousemove",callback:o=>{b.Effects.Move(o,e)},option:{passive:!1}}).addEvent({eventID:"SliderTouchMove",eventType:"touchmove",callback:o=>{b.Effects.Move(o,e)},option:{passive:!1}}).addEvent({eventID:"SliderMouseUp",eventType:"mouseup",callback:()=>{b.Effects.End()}}).addEvent({eventID:"SliderTouchEnd",eventType:"touchend",callback:()=>{b.Effects.End()}})},Move:(a,e)=>{let o=c.getCursor(a).x,{val_status:n,set_status:s}=e,{componentID:i,min:r,max:t}=n,p=L("#"+i+"_Ball"),f=L("#"+i+"_Bar"),u=L("#"+i+"_BarColor"),{width:l,left:g}=f.position(),S=(o-g)/l;S=Math.max(S,0),S=Math.min(S,1);let C=S*t,y=N({value:C,val_status:n}),m=y.positionLeft,D=y.stepValue;p.css({left:m}),u.css({width:m});let{prevValue:_}=E.get(i);return D!=_&&(E.update({key:i,value:{prevValue:D}}),s(T(I({},n),{dataValue:D,eventType:"update",eventID:c.uuid.gen()}))),a.preventDefault(),a.stopPropagation(),!1},End:()=>{c(document).removeEvent(["SliderMouseMove","SliderTouchMove","SliderMouseUp","SliderTouchEnd"])}},KeyDownEvent:a=>{let{event:e,val_status:o,set_status:n}=a,{min:s,max:i,step:r}=o,{key:t,metaKey:p,ctrlKey:f}=e,u=f||p,l=o.dataValue;t.match(/Arrow/)&&(e.preventDefault(),t.match(/Left|Up/)?u?l=s:l-=r:t.match(/Right|Down/)&&(u?l=i:l+=r),l=Math.max(Math.min(l,i),s),E.update({key:o.componentID,value:{prevValue:l}}),n(T(I({},o),{dataValue:l,eventType:"update",eventID:c.uuid.gen()})))}},ee=a=>{let k=a,{color:e="theme",required:o,form:n="",legends:{enable:s=!0,custom:i,showAlways:r=!1}={},min:t,max:p,step:f,enableFormSubmit:u,checkValidationAtFirst:l,onChange:g,onKeyDown:S,onValidate:C,onUpdateValue:y,onUpdateValidValue:m,value:D="",className:_}=k,K=B(k,["color","required","form","legends","min","max","step","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","className"]),W={componentID:a.componentID||"",dataValue:D,min:t,max:p,step:f,eventType:"init",eventID:c.uuid.gen()},[h,V]=A(W),[w,U]=A({ok:!1,notice:[]});Q({params:a,val_status:h,set_status:V,val_validate:w,set_validate:U,onUpdateValue:y,onUpdateValidValue:m,DefaultValidation:Z,ExtraOverrideParams:{dataValue:D},ExtraStoreParams:{prevValue:h.dataValue,setValueByForeign:$=>{V(T(I({},h),{dataValue:$,eventType:"update",eventID:c.uuid.gen()}))}}});let R=N({value:h.dataValue,val_status:h});return M(j,{val_status:h,set_status:V,val_validate:w,params:a,children:[d(Y,I({value:R.stepValue,form:n,"data-value":R.stepValue,"data-validation":w.ok,"data-input-type":"slider"},K)),M(O,{gap:"1/2",flexSizing:"auto",className:[v("Wrap"),_,v("ShowLegendsAlways_"+r)].join(" "),children:[d(z.Rail,{color:e,val_status:h,set_status:V,DotData:R,form:n,enableFormSubmit:u}),s?d(z.IndicatorLabels,{componentID:h.componentID,min:t,max:p,step:f,customLegends:i}):null]})]})},H=a=>(a=I({},a),d(X,{componentID:a.componentID,children:ee,params:q(a)}));export{H as Slider,H as default};
|
package/dist/fn/Input/core.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as a,e as B}from"../../chunk-VY3566IV.js";import{jsx as m,jsxs as C}from"react/jsx-runtime";import{useState as N,useEffect as T,useRef as O}from"react";import{$$ as i,$$fromRoot as W,Config as z,useStore as v,GenerateClassName as P}from"../../@utils/_";import{InputClasses as k}from"../../@styles/componentClasses/_";import x from"../../atoms/Box";import E from"../../atoms/Flex";import V from"../../atoms/FAI";import L from"../../mols/Row";import A from"../../mols/Column";import U from"../Button";import D from"../Tooltips";const se=e=>{let[t]=N(e.componentID||i.uuid.gen());e=o({},e),e.params=a(o({enableFormSubmit:!0,status_id:i.uuid.gen(),override:"never",name:i.uuid.gen(),id:i.uuid.gen(),"aria-label":"Input-"+t},e.params),{componentID:t});let{children:n}=e;return m(n,o({},e.params))},ue=e=>{let{children:t,val_status:n,set_status:r,val_validate:c,params:l}=e,{clearButton:s,rightIcon:u,leftIcon:p,wrapStyles:y}=l;return n.eventType=="init"&&!l.checkValidationAtFirst&&(c.notice=[]),C(x,a(o({position:"relative"},y),{id:"BoxWrapper-"+n.componentID,children:[C(E,{flexWrap:!1,className:k("Wrapper"),children:[l.leftIndicator,C(E,{position:"relative",flexSizing:"auto",children:[p,t,s&&n.dataValue?m(U.Button.Normal.R,{ssSphere:2,flexCenter:!0,fontColor:"5.translucent",ssEffectsOnActive:["ripple.theme"],position:"absolute",right:1,top:"50%",freeCSS:{zIndex:3},className:k("IndicatorIcon"),onClick:()=>{r(a(o({},n),{dataValue:"",formatValue:"",eventType:"update",eventID:i.uuid.gen()}))},children:m(V.Times,{})}):u]}),l.rightIndicator]}),m($,{notice:c.notice,val_status:n})]}))},$=e=>{let{notice:t,val_status:n}=e,{componentID:r,eventType:c}=n;i.interval.clear("NoticeTimer-"+r),i.interval.clear("NoticeTimerClose-"+r);let l="notice-"+e.val_status.componentID,s="notice-tips-"+e.val_status.componentID;if(!t.length)return D.close(s),null;let u=t.map(p=>{let{type:y,label:I}=p,S=y=="invalid"?V.Times:y=="warn"?V.Exclamation:V.Check;return C(L.Left,{gap:0,borderRadius:"2.tone.secondary",children:[m(S,{flexCenter:!0,fontSize:"3.paragraph",fontColor:{invalid:"nega",warn:"warn",valid:"posi"}[y]}),m(x,{fontColor:"white",children:I})]})});return i.interval.standBy("NoticeTimer-"+r,350,()=>{D.open({tipsID:s,parent:"#"+l,padding:["1/2",0],content:C(D.Comps.Body,{padding:["1/2","2/3"],fontSize:"1.mini",position:"relative",children:[m(x,{position:"absolute",unitHeight:1,unitWidth:1,left:1,backgroundColor:"dark",freeCSS:{zIndex:1,transform:"rotate(45deg)",top:-6}}),m(A,{gap:"1/3",position:"relative",freeCSS:{zIndex:2},backgroundColor:"inherit",children:u})]})}),i.interval.standBy("NoticeTimerClose-"+r,7500,()=>{D.close(s)})}),m(x,{className:k("Notices"),id:l})},de=e=>{let{type:t,params:n,val_status:r,set_status:c,ExtraOverrideParams:l,ExtraStoreParams:s,val_validate:u,set_validate:p,DefaultValidation:y,onUpdateValue:I,onUpdateValidValue:S}=e;n=o({},n);let{componentID:R}=r,[F,w]=N(i.uuid.gen());T(()=>(v.update({key:R,value:o({ResolveRefresh:null,Refresh:()=>new Promise((d,f)=>{v.get(R).ResolveRefresh=d,w(i.uuid.gen())}),GenNotice:d=>{let{ok:f,notice:
|
|
1
|
+
import{b as o,c as a,e as B}from"../../chunk-VY3566IV.js";import{jsx as m,jsxs as C}from"react/jsx-runtime";import{useState as N,useEffect as T,useRef as O}from"react";import{$$ as i,$$fromRoot as W,Config as z,useStore as v,GenerateClassName as P}from"../../@utils/_";import{InputClasses as k}from"../../@styles/componentClasses/_";import x from"../../atoms/Box";import E from"../../atoms/Flex";import V from"../../atoms/FAI";import L from"../../mols/Row";import A from"../../mols/Column";import U from"../Button";import D from"../Tooltips";const se=e=>{let[t]=N(e.componentID||i.uuid.gen());e=o({},e),e.params=a(o({enableFormSubmit:!0,status_id:i.uuid.gen(),override:"never",name:i.uuid.gen(),id:i.uuid.gen(),"aria-label":"Input-"+t},e.params),{componentID:t});let{children:n}=e;return m(n,o({},e.params))},ue=e=>{let{children:t,val_status:n,set_status:r,val_validate:c,params:l}=e,{clearButton:s,rightIcon:u,leftIcon:p,wrapStyles:y}=l;return n.eventType=="init"&&!l.checkValidationAtFirst&&(c.notice=[]),C(x,a(o({position:"relative"},y),{id:"BoxWrapper-"+n.componentID,children:[C(E,{flexWrap:!1,flexSizing:0,className:k("Wrapper"),children:[l.leftIndicator,C(E,{position:"relative",flexSizing:"auto",children:[p,t,s&&n.dataValue?m(U.Button.Normal.R,{ssSphere:2,flexCenter:!0,fontColor:"5.translucent",ssEffectsOnActive:["ripple.theme"],position:"absolute",right:1,top:"50%",freeCSS:{zIndex:3},className:k("IndicatorIcon"),onClick:()=>{r(a(o({},n),{dataValue:"",formatValue:"",eventType:"update",eventID:i.uuid.gen()}))},children:m(V.Times,{})}):u]}),l.rightIndicator]}),m($,{notice:c.notice,val_status:n})]}))},$=e=>{let{notice:t,val_status:n}=e,{componentID:r,eventType:c}=n;i.interval.clear("NoticeTimer-"+r),i.interval.clear("NoticeTimerClose-"+r);let l="notice-"+e.val_status.componentID,s="notice-tips-"+e.val_status.componentID;if(!t.length)return D.close(s),null;let u=t.map(p=>{let{type:y,label:I}=p,S=y=="invalid"?V.Times:y=="warn"?V.Exclamation:V.Check;return C(L.Left,{gap:0,borderRadius:"2.tone.secondary",children:[m(S,{flexCenter:!0,fontSize:"3.paragraph",fontColor:{invalid:"nega",warn:"warn",valid:"posi"}[y]}),m(x,{fontColor:"white",children:I})]})});return i.interval.standBy("NoticeTimer-"+r,350,()=>{D.open({tipsID:s,parent:"#"+l,padding:["1/2",0],content:C(D.Comps.Body,{padding:["1/2","2/3"],fontSize:"1.mini",position:"relative",children:[m(x,{position:"absolute",unitHeight:1,unitWidth:1,left:1,backgroundColor:"dark",freeCSS:{zIndex:1,transform:"rotate(45deg)",top:-6}}),m(A,{gap:"1/3",position:"relative",freeCSS:{zIndex:2},backgroundColor:"inherit",children:u})]})}),i.interval.standBy("NoticeTimerClose-"+r,7500,()=>{D.close(s)})}),m(x,{className:k("Notices"),id:l})},de=e=>{let{type:t,params:n,val_status:r,set_status:c,ExtraOverrideParams:l,ExtraStoreParams:s,val_validate:u,set_validate:p,DefaultValidation:y,onUpdateValue:I,onUpdateValidValue:S}=e;n=o({},n);let{componentID:R}=r,[F,w]=N(i.uuid.gen());T(()=>(v.update({key:R,value:o({ResolveRefresh:null,Refresh:()=>new Promise((d,f)=>{v.get(R).ResolveRefresh=d,w(i.uuid.gen())}),GenNotice:d=>{let{ok:f,notice:g}=d;p({ok:f,notice:g})}},s)}),()=>{v.delete(R)}),[]);const _=O(!1);T(()=>{_.current?c(a(o({},r),{eventType:"refresh",eventID:i.uuid.gen()})):_.current=!0},[F]),T(()=>{n.value=r.dataValue,i.interval.clear("ValidationTimer-"+R),j({val_status:r,set_validate:p,DefaultValidation:y,params:n})},[r.eventID]),(()=>{let{override:d}=n;if(d=="never"||d=="beforeModified"&&!["init","override"].includes(r.eventType))return;let f=v.get(r.componentID);f&&(n.value!=r.dataValue&&n.status_id!=f.status_id&&c(a(o(a(o({},r),{dataValue:n.value}),l),{eventType:"override",eventID:i.uuid.gen()})),f.status_id=n.status_id)})(),T(()=>{let{componentID:d,eventType:f,dataValue:g}=r,h=g;if(t=="list"?h=g.map(b=>JSON.parse(b)):t=="select"||t=="richSelect"?h=JSON.parse(g):t=="file"&&v.update({key:d,value:{Files:r.dataValue}}),f=="refresh"){let b=v.get(d);b&&b.ResolveRefresh&&b.ResolveRefresh(null)}f=="update"&&(I&&I({componentID:d,value:h,storeData:v.get(d),eventType:f}),i.scope(()=>{u.ok&&S&&S({componentID:d,value:h,storeData:v.get(d),eventType:f})}))},[u])},j=e=>{let{val_status:t,params:n,set_validate:r,DefaultValidation:c}=e,l=c({value:t.dataValue,params:n});if(!l.ok){r(l);return}let s=l.notice;const u=()=>B(void 0,null,function*(){if(!n.onValidate)return;let p=yield n.onValidate({value:t.dataValue,eventType:t.eventType,props:e});if(!p.ok){r({ok:!1,notice:[...s,...p.notice]});return}r({ok:!0,notice:[...s,...p.notice]})});n.onValidate?t.eventType=="refresh"?u():i.interval.standBy("ValidationTimer-"+t.componentID,450,u):r({ok:!0,notice:s})},ce=e=>{let t=e.target,{form:n,formName:r}=t.dataset;n=r||n;let c=!1,l=W(`[data-form-submit-button="${n}"]`)[0];if(!l)return c;let s=l.dataset.sdfike||"",u=e.key,p=e.ctrlKey||e.metaKey;return i.scope(()=>{s.includes("enter")&&(u!="Enter"||e.nativeEvent.isComposing||z.get().browserIs=="safari"&&e.keyCode==229)||((u=="Enter"&&(s.includes("enter")||s.includes("auxEnter")&&p)||u==" "&&s.includes("space"))&&(l.click(),e.preventDefault()),c=!0)}),c},K={Input:e=>{if(e=="plain")return{};let t={padding:"3/4",transition:"middle",flexSizing:"auto",boxShadow:"0.thin"};return e=="border"?t=a(o({},t),{border:!0,borderRadius:"2.tone.secondary",backgroundColor:"1.layer.base"}):e=="cloud"?t=a(o({},t),{border:"1.thin",borderRadius:"2.tone.secondary",backgroundColor:"cloud"}):e=="bottomBorder"&&(t=a(o({},t),{borderRadius:0,border:"unset",borderBottom:!0,backgroundColor:"cloud"})),t},ListCell:e=>{e=o({},e),e.tone||(e.tone="border");let{tone:t}=e;return t=="plain"||(e=a(o({},e),{cellStyles:o({position:"relative",padding:["3/4",1],borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),t=="normal"?e=a(o({gap:"1/2"},e),{cellStyles:o({isSemiBoldFont:!0},e.cellStyles),cellCheckedStyles:{backgroundColor:"cloud"}}):(e=a(o({gap:"3/4"},e),{cellStyles:o({boxShadow:"0.thin"},e.cellStyles)}),(t=="cloud"||t=="vivid")&&(e.cellStyles=o({border:"1.thin",backgroundColor:"2.layer.cloud"},e.cellStyles)),t=="border"?(e.cellStyles=o({border:!0,backgroundColor:"1.layer.base"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):t=="cloud"?e.cellCheckedStyles=o({backgroundColor:"tcOpFew",fontColor:"theme",borderColor:"theme"},e.cellCheckedStyles):t=="vivid"&&(e.cellCheckedStyles=o({backgroundColor:"theme",fontColor:"white",borderColor:"theme"},e.cellCheckedStyles)))),P(e)},Boxish:e=>{e=o({},e),e.tone||(e.tone="border");let t=a(o(o(o(a(o({},K.Input(e.tone)),{fontColor:"2.normal"}),e),e.leftIndicator?{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3",marginLeft:"1/4"}:null),e.rightIndicator?{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3",marginRight:"1/4"}:null),{className:[k("Input"),e.className].join(" ")});return P(t)},Indicator:e=>{if(e||(e="border"),e=="plain")return{};let t={flexSizing:"none",flexCenter:!0,padding:[0,1],borderRadius:"2.tone.secondary",backgroundColor:"cloud"};return e=="border"?t=a(o({},t),{border:!0}):e=="cloud"?t=a(o({},t),{border:"1.thin"}):e=="bottomBorder"&&(t=a(o({},t),{borderRadius:0,borderBottom:!0})),t},IndicatorIcon:{position:"absolute",unitWidth:2,unitHeight:2,top:"50%",flexCenter:!0,fontColor:"theme",fontSize:"1.mini",backgroundColor:"inherit"}};export{ue as BoxWrapper,de as CommonEffects,K as DefaultStyles,ce as SubmitForm,j as ValidationCheck,se as Wrapper};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as f,c as T,d as k}from"../../chunk-VY3566IV.js";import{jsx as I}from"react/jsx-runtime";import{useState as L,useEffect as M,useRef as N}from"react";import{$$ as c,$$fromRoot as h,useStore as X}from"../../@utils/_";import R from"../../atoms/Box";import j from"../../atoms/Flex";import{LayoutClasses as a}from"../../@styles/componentClasses/_";const B=t=>{let D=t,{options:{onSlideCallback:e,visibilitySurroundSlide:u=!0,
|
|
1
|
+
import{b as f,c as T,d as k}from"../../chunk-VY3566IV.js";import{jsx as I}from"react/jsx-runtime";import{useState as L,useEffect as M,useRef as N}from"react";import{$$ as c,$$fromRoot as h,useStore as X}from"../../@utils/_";import R from"../../atoms/Box";import j from"../../atoms/Flex";import{LayoutClasses as a}from"../../@styles/componentClasses/_";const B=t=>{let D=t,{options:{onSlideCallback:e,visibilitySurroundSlide:u=!0,autoSwipems:d=0,loop:i=!1,disableMousedrag:r=!1,disableTouch:o=!1}={},wrapper:s=n=>n,slides:v=[]}=D,E=k(D,["options","wrapper","slides"]),[w]=L(c.uuid.gen()),[p,y]=L({eventType:"init",index:t.slideIndex});M(()=>{X.set({key:"SwipeTimer-"+w,value:null})},[]);const g=N(!1);M(()=>{y({eventType:"usr",index:t.slideIndex}),g.current||(g.current=!0)},[t.slideIndex]),M(()=>{let n=p.index+(i?1:0),m=[-1,v.length].includes(p.index);m||e&&setTimeout(()=>{e(p.index)},300);let b=h("#Swiper-"+w);if(p.eventType=="adjustLoop")b.await(250).css({transition:"0s",transform:l.TrasformString(n)}).children().removeClass(a("Display")).parent().children(n).addClass([a("Display"),a("LoopAdjusting")]).await(100).removeClass(a("LoopAdjusting"));else if(p.eventType=="sys")b.await(250).css({transform:l.TrasformString(n)}).children().removeClass(a("Display")).parent().children(n).addClass(a("Display"));else if(b.children().removeClass(a("Display")).parent().children(n).addClass(a("Display")).parent().css({transition:"0.3s",transform:l.TrasformString(n)}).await(250).css({transition:"0s"}),m){let x=p.index==-1?v.length-1:0;y({eventType:"adjustLoop",index:x})}d&&!m&&(c.interval.clear("SwipeTimer-"+w),c.interval.standBy("SwipeTimer-"+w,d-(p.eventType=="sys"?310:0),()=>{let x=p.index+1;!i&&x>v.length-1&&(x=0),y({eventType:"usr",index:x})}))},[p]);let S=v.map((n,m)=>I(R,{flexSizing:"none",width:1,height:0,className:a("Child"),children:s(n)},m));i&&(S.push(S[0]),S.unshift(S[S.length-2]));let C={x:0,y:0,process:!1,effectStartAt:0,id:w,loop:i,index:p.index,minIndex:i?-1:0,maxIndex:v.length+(i?1:-1),width:0,set_event:y},A=p.index+(i?1:0);return I(R,T(f({overflow:"hidden",position:"relative"},E),{className:[E.className,a("SwipeView")].join(" "),freeCSS:f({zIndex:1},E.freeCSS),"data-swipe-id":w,onMouseDown:n=>{r||n.buttons==1&&l.EffectStart(n,C)},onTouchStart:n=>{var m;o||((m=n.touches)==null?void 0:m.length)==1&&l.EffectStart(n,C)},children:I(j,{flexWrap:!1,gap:1,transition:"long",className:[a("Rail"),a("ShowOther_"+u)].join(" "),id:"Swiper-"+w,freeCSS:f({},g.current?{}:{transform:l.TrasformString(A)}),children:S})}))},l={TrasformString:t=>`translateX( calc( ${-100*t}% - ${12*t}px ) )`,EffectStart:(t,e)=>{let{x:u,y:d}=c.getCursor(t),i=t.currentTarget,r=t.target;if(["SELECT","BUTTON","LABEL","INPUT"].includes(r.tagName))return;e=T(f({},e),{x:u-e.x+window.scrollX,y:d-e.y+window.scrollY,effectStartAt:new Date().getTime(),width:h("#Swiper-"+e.id).position().width});let{swipeId:o}=i.dataset;o==e.id&&c(document).addEvent({eventID:"SwipeMouseMove",eventType:"mousemove",callback:s=>{l.EffectCheck(s,e)},option:{passive:!1}}).addEvent({eventID:"SwipeTouchMove",eventType:"touchmove",callback:s=>{l.EffectCheck(s,e)},option:{passive:!1}}).addEvent({eventID:"SwipeMouseUp",eventType:"mouseup",callback:s=>{l.EffectEnd(s,e)},option:{passive:!1}}).addEvent({eventID:"SwipeTouchEnd",eventType:"touchend",callback:s=>{l.EffectEnd(s,e)},option:{passive:!1}})},EffectCheck:(t,e)=>{if(e.process)return;let{x:u,y:d}=c.getCursor(t),i=Math.abs(u-e.x+window.scrollX),r=Math.abs(d-e.y+window.scrollY);if(!(t.touches&&t.touches.length>1)&&!(r+i<15))if(r>i/2)c(document).removeEvent(["SwipeMouseMove","SwipeTouchMove"]);else{e.process=!0;let o=e.index+(e.loop?1:0);h("#Swiper-"+e.id).children(o-1).addClass(a("Display")),c(document).addEvent({eventID:"SwipeCheckMouseMove",eventType:"mousemove",callback:s=>{l.EffectMove(s,e)},option:{passive:!1}}).addEvent({eventID:"SwipeCheckTouchMove",eventType:"touchmove",callback:s=>{l.EffectMove(s,e)},option:{passive:!1}}),t.preventDefault();return}},EffectMove:(t,e)=>{if(t.touches&&t.touches.length>1)return;let{x:u}=c.getCursor(t),d=u-e.x+window.scrollX,r=e.index+(e.loop?1:0)-d/e.width;if(r<0)r/=2;else if(r>e.maxIndex){let o=r-e.maxIndex;r=e.maxIndex+o/2}h("#Swiper-"+e.id).css({transition:"0s",transform:l.TrasformString(r)}),t.preventDefault()},EffectEnd:(t,e)=>{if(e.process){let d=c.getCursor(t).x-e.x+window.scrollX,i=new Date().getTime(),r=i-e.effectStartAt,o=e.index+(e.loop?1:0),s=0;r<400?s=o-(+(d>0)*2-1):s=Math.round(o-d/e.width),s=Math.max(Math.min(s,e.maxIndex),e.minIndex),e.process=!1,o===s?(e.effectStartAt=i,h("#Swiper-"+e.id).css({transition:".2s",transform:l.TrasformString(s)}).await(310).css({transition:"0s"}).children().removeClass(a("Display")).parent().children(o).addClass(a("Display"))):e.set_event({eventType:"usr",index:s+e.minIndex})}c(document).removeEvent(["SwipeMouseMove","SwipeTouchMove","SwipeCheckMouseMove","SwipeCheckTouchMove","SwipeMouseUp","SwipeTouchEnd"])}},V=t=>I(B,T(f({},t),{slideIndex:Math.max(Math.min(t.slideIndex,t.slides.length-1),0)}));export{V as SwipeView,V as default};
|
package/dist/fn/Sheet.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as h,c as I,d as M}from"../chunk-VY3566IV.js";import{jsx as i,jsxs as F}from"react/jsx-runtime";import{useState as z,useEffect as W,useRef as Z}from"react";import{$$ as n,$$fromRoot as P,Config as U,useStore as T}from"../@utils/_";import R from"../atoms/Box";import $ from"../atoms/Img";import X from"../atoms/FAI";import J from"../atoms/Flex";import G from"../mols/Column";import Y from"../mols/Row";import V from"./Button";import Q from"./Layout/_";import q from"./Input/_";import{SheetClasses as c}from"../@styles/componentClasses/_";const d={mainSheetScrolls:0,subSheetLength:0,currentIndex:0,contents:{},addNewSheet:function(e){if(e=I(h({sheetGroups:e.sheetGroups||[],backgroundEffect:!0,overwrap:e.type=="custom",hold_state:!1},e),{sheetID:e.sheetID||n.uuid.gen(),close_option:h({pageTransit:!0,escapeKeyDown:!0,aroundClick:e.type=="custom"},e.close_option)}),this.contents[e.sheetID]){let s=T.get(e.sheetID);s&&s.refresh&&s.refresh(e,!0);return}this.contents[e.sheetID]={isOpen:!0,hold_state:!!e.hold_state,params:e,created_at:n.Time()};let t=T.get("Sheet-"+U.get().sessionUID);t&&t.refresh()},Wrapper:()=>{let[e,t]=z(n.uuid.gen());W(()=>{T.set({key:"Sheet-"+U.get().sessionUID,value:{refresh:()=>{t(n.uuid.gen())}}}),n(U.get().appRoot).addEvent({eventType:"keyup",callback:function(r){let{key:o,metaKey:f}=r;if(o=="Escape"||o==","&&f){let v=Object.values(d.contents).filter(S=>S.isOpen);if(!v.length)return;let a=v.reduce((S,w)=>S.created_at.value>w.created_at.value?S:w);x.close(a.params.sheetID,o)}}}).addEvent({eventType:"click",callback:function(r){var v;let o=Object.values(d.contents).filter(a=>a.params.type=="custom");!o.length||o.find(a=>{let{params:S}=a,w=S.parent,_=r.target,g=P(w)[0];return!!(w==_||g===_||n(g).find(_).length)})||(v=r.target)!=null&&v.closest("."+c("CustomSheet"))||o.forEach(a=>{var S;(S=a.params.close_option)!=null&&S.aroundClick&&x.close(a.params.sheetID)})}})},[]);let s=Object.entries(d.contents).map(([r,o])=>i(R,{id:"Sheet-"+r,children:i(d.Core,h({isOpen:o.isOpen},o.params),r)},r));return i(R,{className:["AMOTIFY_be",c("Wrapper")].join(" "),children:s})},Core:e=>{var y;let[t]=z(n.uuid.gen()),[s,r]=z(e),[o,f]=z(!0),{type:v,sheetID:a,openAfter:S,closeAfter:w}=s,_=!e.overwrap,g=d.Types[{"normal.topLeft":"Normal","normal.topCenter":"Normal","normal.topRight":"Normal","normal.middleLeft":"Normal","normal.middleCenter":"Normal","normal.middleRight":"Normal","normal.bottomLeft":"Normal","normal.bottomCenter":"Normal","normal.bottomRight":"Normal",image:"Normal","drawer.left":"Edge","drawer.right":"Edge","drawer.bottom":"Bottom",custom:"Custom"}[v]];W(()=>{T.set({key:a,value:{refresh:(p,m)=>{r(p),f(m!=null?m:!1)},resize:p=>{if(v=="drawer.bottom"){let m=T.get(t);m&&m.resize&&m.resize(p)}else(s.type.includes("normal")||s.type.includes("drawer"))&&r(I(h({},s),{size:p}))},close:p=>{d.contents[a].isOpen=!1,f(!1)},open:()=>{d.contents[a].isOpen=!0,f(!0)}}})}),W(()=>{n.scope(()=>{if(_&&e.backgroundEffect){if(d.subSheetLength=d.subSheetLength+(o?1:-1),o){let p=n("html");if(d.subSheetLength==1){let m=p[0].scrollTop;d.mainSheetScrolls=m}U.get().isPhone||(p.callback(()=>{P(".AMOTIFY_be_root").addClass(c("FixScroll")).callback(m=>{m[0].scrollTop=d.mainSheetScrolls}).await(40).addClass(c("Float"))})[0].scrollTop=0);return}d.subSheetLength==0&&(U.get().isPhone||P(".AMOTIFY_be_root").removeClass(c("Float")).await(251).removeClass(c("FixScroll")).callback(()=>{n("html")[0].scrollTop=d.mainSheetScrolls|0,P(".AMOTIFY_be_root")[0].scrollTop=0}))}}),n.scope(()=>{let p=P("#"+t);if(o){p.await(10).removeClass(c("Hide")).await(10).addClass(c("Open")).callback(()=>{d.contents[a].isOpen=!0,S&&S()});return}p.await(10).removeClass(c("Open")).await(251).addClass(c("Hide")).callback(()=>{if(!w||w(),d.contents[a].isOpen=!1,e.hold_state)return;delete d.contents[a];let m=T.get("Sheet-"+U.get().sessionUID);m&&m.refresh()})})},[o]),W(()=>{d.currentIndex++;let{close_option:p}=e;n.scope(()=>{if(!(p!=null&&p.parentBlur))return;let m=n(s.parent);m[0]&&m.addEvent({eventID:"SheetClosation-"+a,eventType:"mouseout",callback:()=>{m.removeEvent("SheetClosation-"+a),f(!1)}})})},[]);let[B,C]=v.split(".");return i(R,{className:[c("Wrap"),c("Tcate_"+B),c("Tpos_"+C),c("isNewSheet_"+_)].join(" "),width:1,height:0,ssAbsoluteCovered:!0,freeCSS:{zIndex:d.currentIndex+1},id:t,children:F(G,{className:c("Content"),gap:0,height:"viewHeight",overflow:"auto",transition:"middle",children:[_?i(d.TapSensor,{sheetID:a,delegateAroundClick:(y=e.close_option)==null?void 0:y.aroundClick}):null,i(g,h({componentID:t},s))]})},t)},Types:{Normal:e=>{let m=e,{sheetID:t,sheetGroups:s,content:r,className:o="",type:f,size:v="R",freeCSS:a,openAfter:S,hold_state:w,overwrap:_}=m,g=M(m,["sheetID","sheetGroups","content","className","type","size","freeCSS","openAfter","hold_state","overwrap"]),[B,C]=f.split("."),y={},p=[];return C.match(/top/)?(p.push("top"),y.marginBottom="auto"):C.match(/middle/)?(p.push("center"),y.marginTop="auto",y.marginBottom="auto"):C.match(/bottom/)&&(p.push("bottom"),y.marginTop="auto"),C.match(/left/i)?(p.push("left"),y.marginRight="auto"):C.match(/center/i)?(p.push("center"),y.marginLeft="auto",y.marginRight="auto"):C.match(/right/i)&&(p.push("right"),y.marginLeft="auto"),i(R,I(h(h({className:[c("BB"),o].join(" "),transition:"long",opacity:"trans"},y),g),{freeCSS:h({width:{S:"26rem",R:"36rem",L:"44rem","2L":"60rem","3L":"72rem",MAX:"95vw"}[v],maxWidth:"96vw",transformOrigin:p.join(" ")},a),children:n.is.function(r)?i(r,{}):r}))},Edge:e=>{let B=e,{sheetID:t,sheetGroups:s,type:r,content:o,className:f="",size:v="R",freeCSS:a,close_option:S,hold_state:w,overwrap:_}=B,g=M(B,["sheetID","sheetGroups","type","content","className","size","freeCSS","close_option","hold_state","overwrap"]);return i(R,I(h(h({opacity:"trans",transition:"long",position:"relative",backgroundColor:"1.layer.base",flexSizing:"none",minHeight:"viewHeight",boxShadow:"3.remark",className:[c("BB"),f].join(" ")},r=="drawer.right"?{marginLeft:"auto"}:r=="drawer.left"?{marginRight:"auto"}:{}),g),{freeCSS:h({width:{S:"20rem",R:"27rem",L:"32rem","2L":"40rem","3L":"58rem",MAX:"95vw"}[v]},a),children:n.is.function(o)?i(o,{}):o}))},Bottom:e=>{let j=e,{componentID:t,sheetID:s,sheetGroups:r,content:o,size:f="R",sizeChanged:v,baseStyles:a,close_option:{swipeDown:S=!0}={},hold_state:w,overwrap:_}=j,g=M(j,["componentID","sheetID","sheetGroups","content","size","sizeChanged","baseStyles","close_option","hold_state","overwrap"]),B=n.getScreenSize(),C=[0,.2,.6,.95],y={ZERO:0,S:1,R:2,L:3},[p,m]=z(f),[N,A]=z({process:!1,processStart:0,originY:0,originValue:0,viewHeight:0,value:C[y[f]]});T.update({key:t,value:{val_edit:N,resize:k=>{let l=C[y[k]];A(I(h({},N),{value:l})),m(k)}}});const D={Start:k=>{n(document).addEvent({eventID:"BottomSheetMouseMove",eventType:"mousemove",callback:D.Move}).addEvent({eventID:"BottomSheetTouchMove",eventType:"touchmove",callback:D.Move}).addEvent({eventID:"BottomSheetMouseUp",eventType:"mouseup",callback:D.End}).addEvent({eventID:"BottomSheetTouchEnd",eventType:"touchend",callback:D.End});let l=n.getCursor(k),u=I(h({},N),{process:!0,processStart:new Date().getTime(),originY:l.y,originValue:N.value,viewHeight:n.getScreenSize().height});T.update({key:t,value:{val_edit:u}}),A(u)},Move:k=>{var O;let l=(O=T.get(t))==null?void 0:O.val_edit;if(!l.process)return;let E=(n.getCursor(k).y-l.originY)/l.viewHeight,b=l.originValue-E;if(b>.95)b=.95+(b-.95)*.5;else if(b<.2){let L=.2-b;L-=.1,b=.1+(.1-L)*.5}A(I(h({},l),{value:b}))},End:k=>{var b;let l=(b=T.get(t))==null?void 0:b.val_edit;if(!l.process)return;n(document).removeEvent(["BottomSheetMouseMove","BottomSheetTouchMove","BottomSheetMouseUp","BottomSheetTouchEnd"]);let u=0;if(l.value<.1||(l.value<.5?u=1:l.value>.75?u=3:u=2),new Date().getTime()-l.processStart<300){let O=n.getCursor(k).y-l.originY;if(Math.abs(O)>=20){let L=+(O<0)*2-1;u+=L,u=Math.min(Math.max(u,0),C.length-1)}}u==0&&(S||(u=1)),m(["ZERO","S","R","L"][u]),A(I(h({},l),{value:C[u],process:!1}))}},H=Z(!1);return W(()=>{H.current?p=="ZERO"?S&&x.close(s):setTimeout(()=>{e.sizeChanged&&e.sizeChanged(p)},250):H.current=!0},[p]),i(R,{className:c("BB"),margin:[0,"auto"],marginTop:"auto",opacity:"trans",width:1,transition:"long",freeCSS:h({maxWidth:12*60,height:B.height*N.value},N.process?{transition:"0s"}:{}),children:F(G,I(h({gap:0,flexSizing:"none",borderTopLeftRadius:"1.tone.primary",borderTopRightRadius:"1.tone.primary",border:!0,borderBottom:"unset",boxShadow:"3.remark",position:"relative",overflow:"hidden",height:1},a),{children:[F(Y.Separate,{padding:"1/2",backgroundColor:"1.layer.base",position:"relative",freeCSS:{userSelect:"none"},children:[i(Y.Center,{flexSizing:0,padding:"2/3",onMouseDown:D.Start,onTouchStart:D.Start,ssPushable:!0,isRounded:!0,freeCSS:{cursor:"grab",userSelect:"none"},children:i(R,{unitWidth:6,unitHeight:"1/2",backgroundColor:"5.layer.darker",isRounded:!0,className:c("DragBar")})}),i(V.Button.Sub.R,{color:"cloud",ssSphere:2,onClick:()=>{x.close(s)},children:i(X.Times,{})})]}),i(R,I(h({backgroundColor:"1.layer.base",flexSizing:0,overflow:"auto"},g),{children:n.is.function(o)?i(o,{}):o}))]}))})},Custom:e=>{let k=e,{sheetID:t,sheetGroups:s,parent:r,gravityPoint:o=22,content:f,close_option:v,hold_state:a,overwrap:S,openAfter:w,closeAfter:_}=k,g=M(k,["sheetID","sheetGroups","parent","gravityPoint","content","close_option","hold_state","overwrap","openAfter","closeAfter"]),[B]=z(n.uuid.gen()),C=n.is.element(r)?n(r):P(r),y='[data-sheet-id="'+B+'"]',p='[data-sheet-content="'+B+'"]';o=o;let m=o%5||5,N=Math.ceil(o/5);const A=()=>{let l={},{top:u,right:E,bottom:b,left:O,height:L,width:K}=C.position();return[1,2].includes(m)?l.left=O:m==3?l.left=O+K/2:[4,5].includes(m)&&(l.left=E),o<=10?l.top=u:o<=15?l.top=u+L/2:o<=25&&(l.top=b),l};let[D,H]=z(A());const j=()=>{let l=P(y).position(),u=P(p).position(),E=n.getScreenSize(),b=h({},D);return u.top<0&&(b.top=l.top-u.top),u.left<0&&(b.left=l.left-u.left),u.right>E.width&&(b.left=l.left-(u.right-E.width)),u.bottom>E.height&&(b.top=l.top-(u.bottom-E.height)),b};return W(()=>{P(y).await(10).addClass(c("Open")).await(250).callback(()=>{H(j())}),T.update({key:"customSheet-"+e.sheetID,value:{reposition:()=>{setTimeout(()=>{H(j())},200)}}})},[]),C[0]?i(R,{className:[c("BB"),c("CustomSheet")].join(" "),"data-sheet-id":B,transition:"long",opacity:"trans",position:"absolute",width:0,height:0,flexCenter:!0,freeCSS:D,children:i(J,{className:[c("GPT"),c("GPT_"+o),c("Col_"+m),c("Row_"+N)].join(" "),position:"absolute",children:i(R,I(h({flexSizing:"none","data-sheet-content":B,maxHeight:"viewHeight",overflow:"auto",padding:1},g),{freeCSS:h({maxWidth:"98vw"},g.freeCSS),children:n.is.function(f)?i(f,{}):f}))})}):null}},TapSensor:e=>i(V.Button.Plain,{className:c("TapSensor"),onClick:()=>{var t;(t=e.delegateAroundClick)!=null&&t&&x.close(e.sheetID)},freeCSS:{cursor:"default"},children:i(R,{className:c("TapContent")})})},x={Wrapper:()=>i(d.Wrapper,{}),open:e=>{if(e.sheetID=(e.sheetID||"").replace(/\./g,"-"),e.type=="image"){let s=e.sheetID||n.uuid.gen(),t=e,{type:r,src:o}=t,f=M(t,["type","src"]);x.open(I(h({type:"normal.topCenter",backgroundColor:"trans"},f),{sheetID:s,freeCSS:{maxWidth:"96vw",transformOrigin:"top"},content:()=>{let[v]=z(n.flatArray(o)),[a,S]=z(0),w=[],_=[];return v.forEach((g,B)=>{w.push({value:B,label:i($,{src:n.flatArray(g)[0],width:"auto",height:1,freeCSS:{maxWidth:12*6,maxHeight:12*3}})}),_.push(i($,{width:1,height:"auto",src:n.flatArray(g)[0]}))}),F(G,{gap:0,children:[F(Y.Separate,{gap:2,padding:1,backgroundColor:"1.layer.base",borderTopLeftRadius:"1.tone.primary",borderTopRightRadius:"1.tone.primary",children:[i(q.Radio,{tone:"border",icon:!1,value:a,override:"force",horizontalAlign:"center",onUpdateValidValue:({value:g})=>{S(g[0])},cellStyles:{borderWidth:2,padding:"1/3"},options:w}),F(V.Button.Border.R,{color:"cloud",isRounded:!0,onClick:()=>{x.close(s)},children:["\u9589\u3058\u308B ",i(X.Times,{})]})]}),i(Q.SwipeView,{slideIndex:a,options:{loop:v.length>1,onSlideCallback:g=>{S(g)}},slides:_,wrapper:g=>i(R,{borderBottomLeftRadius:"1.tone.primary",borderBottomRightRadius:"1.tone.primary",children:g})})]})}}));return}d.addNewSheet(e)},refresh:(e,t)=>{e.sheetID=(e.sheetID||"").replace(/\./g,"-");let s=T.get(e.sheetID);s&&s.refresh&&s.refresh(e,t)},resize:e=>{e.sheetID=(e.sheetID||"").replace(/\./g,"-");let t=T.get(e.sheetID);t&&t.resize&&t.resize(e.size)},reposition:e=>{let t=T.get("customSheet-"+e);t&&t.reposition&&t.reposition()},close:function(e,t,s){var o;e=e==null?void 0:e.replace(/\./g,"-");let r=d.contents[e];if(r&&!(t=="Escape"&&!((o=r.params.close_option)!=null&&o.escapeKeyDown))){let{params:f}=r,{sheetID:v}=f,a=T.get(v);a&&a.close&&a.close(s)}},closeGroup:e=>{var t;e=(e||"").replace(/\./g,"-");for(let[s,r]of Object.entries(d.contents))(t=r.params.sheetGroups)!=null&&t.includes(e)&&x.close(s)},closeAll:e=>{var t;for(let[s,r]of Object.entries(d.contents))e&&((t=r.params.close_option)==null?void 0:t.pageTransit)==!1||x.close(s,"pageTransit",!0)},Comps:{Body:e=>i(R,h({className:c("BaseBody"),backgroundColor:"1.layer.base",borderRadius:"1.tone.primary",position:"relative",boxShadow:"3.remark",transition:"long"},e))}};export{x as Sheet,x as default};
|
|
1
|
+
import{b as h,c as I,d as M}from"../chunk-VY3566IV.js";import{jsx as i,jsxs as j}from"react/jsx-runtime";import{useState as z,useEffect as W,useRef as Z}from"react";import{$$ as a,$$fromRoot as P,Config as U,useStore as T}from"../@utils/_";import R from"../atoms/Box";import $ from"../atoms/Img";import X from"../atoms/FAI";import J from"../atoms/Flex";import G from"../mols/Column";import Y from"../mols/Row";import V from"./Button";import Q from"./Layout/_";import q from"./Input/_";import{SheetClasses as c}from"../@styles/componentClasses/_";const d={mainSheetScrolls:0,subSheetLength:0,currentIndex:0,contents:{},addNewSheet:function(e){if(e=I(h({sheetGroups:e.sheetGroups||[],backgroundEffect:!0,overwrap:e.type=="custom",hold_state:!1},e),{sheetID:e.sheetID||a.uuid.gen(),close_option:h({pageTransit:!0,escapeKeyDown:!0,aroundClick:e.type=="custom"},e.close_option)}),this.contents[e.sheetID]){let s=T.get(e.sheetID);s&&s.refresh&&s.refresh(e,!0);return}this.contents[e.sheetID]={isOpen:!0,hold_state:!!e.hold_state,params:e,created_at:a.Time()};let t=T.get("Sheet-"+U.get().sessionUID);t&&t.refresh()},Wrapper:()=>{let[e,t]=z(a.uuid.gen());W(()=>{T.set({key:"Sheet-"+U.get().sessionUID,value:{refresh:()=>{t(a.uuid.gen())}}}),a(U.get().appRoot).addEvent({eventType:"keyup",callback:function(r){let{key:o,metaKey:f}=r;if(o=="Escape"||o==","&&f){let v=Object.values(d.contents).filter(S=>S.isOpen);if(!v.length)return;let n=v.reduce((S,w)=>S.created_at.value>w.created_at.value?S:w);x.close(n.params.sheetID,o)}}}).addEvent({eventType:"click",callback:function(r){var v;let o=Object.values(d.contents).filter(n=>n.params.type=="custom");!o.length||o.find(n=>{let{params:S}=n,w=S.parent,_=r.target,g=P(w)[0];return!!(w==_||g===_||a(g).find(_).length)})||(v=r.target)!=null&&v.closest("."+c("CustomSheet"))||o.forEach(n=>{var S;(S=n.params.close_option)!=null&&S.aroundClick&&x.close(n.params.sheetID)})}})},[]);let s=Object.entries(d.contents).map(([r,o])=>i(R,{id:"Sheet-"+r,children:i(d.Core,h({isOpen:o.isOpen},o.params),r)},r));return i(R,{className:["AMOTIFY_be",c("Wrapper")].join(" "),children:s})},Core:e=>{var y;let[t]=z(a.uuid.gen()),[s,r]=z(e),[o,f]=z(!0),{type:v,sheetID:n,openAfter:S,closeAfter:w}=s,_=!e.overwrap,g=d.Types[{"normal.topLeft":"Normal","normal.topCenter":"Normal","normal.topRight":"Normal","normal.middleLeft":"Normal","normal.middleCenter":"Normal","normal.middleRight":"Normal","normal.bottomLeft":"Normal","normal.bottomCenter":"Normal","normal.bottomRight":"Normal",image:"Normal","drawer.left":"Edge","drawer.right":"Edge","drawer.bottom":"Bottom",custom:"Custom"}[v]];W(()=>{T.set({key:n,value:{refresh:(p,m)=>{r(p),f(m!=null?m:!1)},resize:p=>{if(v=="drawer.bottom"){let m=T.get(t);m&&m.resize&&m.resize(p)}else(s.type.includes("normal")||s.type.includes("drawer"))&&r(I(h({},s),{size:p}))},close:p=>{d.contents[n].isOpen=!1,f(!1)},open:()=>{d.contents[n].isOpen=!0,f(!0)}}})}),W(()=>{a.scope(()=>{if(_&&e.backgroundEffect){if(d.subSheetLength=d.subSheetLength+(o?1:-1),o){let p=a("html");if(d.subSheetLength==1){let m=p[0].scrollTop;d.mainSheetScrolls=m}U.get().isPhone||(p.callback(()=>{P(".AMOTIFY_be_root").addClass(c("FixScroll")).callback(m=>{m[0].scrollTop=d.mainSheetScrolls}).await(40).addClass(c("Float"))})[0].scrollTop=0);return}d.subSheetLength==0&&(U.get().isPhone||P(".AMOTIFY_be_root").removeClass(c("Float")).await(251).removeClass(c("FixScroll")).callback(()=>{a("html")[0].scrollTop=d.mainSheetScrolls|0,P(".AMOTIFY_be_root")[0].scrollTop=0}))}}),a.scope(()=>{let p=P("#"+t);if(o){p.await(10).removeClass(c("Hide")).await(10).addClass(c("Open")).callback(()=>{d.contents[n].isOpen=!0,S&&S()});return}p.await(10).removeClass(c("Open")).await(251).addClass(c("Hide")).callback(()=>{if(!w||w(),d.contents[n].isOpen=!1,e.hold_state)return;delete d.contents[n];let m=T.get("Sheet-"+U.get().sessionUID);m&&m.refresh()})})},[o]),W(()=>{d.currentIndex++;let{close_option:p}=e;a.scope(()=>{if(!(p!=null&&p.parentBlur))return;let m=a(s.parent);m[0]&&m.addEvent({eventID:"SheetClosation-"+n,eventType:"mouseout",callback:()=>{m.removeEvent("SheetClosation-"+n),f(!1)}})})},[]);let[B,C]=v.split(".");return i(R,{className:[c("Wrap"),c("Tcate_"+B),c("Tpos_"+C),c("isNewSheet_"+_)].join(" "),width:1,height:0,ssAbsoluteCovered:!0,freeCSS:{zIndex:d.currentIndex+1},id:t,children:j(G,{className:c("Content"),gap:0,height:"viewHeight",overflow:"auto",transition:"middle",children:[_?i(d.TapSensor,{sheetID:n,delegateAroundClick:(y=e.close_option)==null?void 0:y.aroundClick}):null,i(g,h({componentID:t},s))]})},t)},Types:{Normal:e=>{let m=e,{sheetID:t,sheetGroups:s,content:r,className:o="",type:f,size:v="R",freeCSS:n,openAfter:S,hold_state:w,overwrap:_}=m,g=M(m,["sheetID","sheetGroups","content","className","type","size","freeCSS","openAfter","hold_state","overwrap"]),[B,C]=f.split("."),y={},p=[];return C.match(/top/)?(p.push("top"),y.marginBottom="auto"):C.match(/middle/)?(p.push("center"),y.marginTop="auto",y.marginBottom="auto"):C.match(/bottom/)&&(p.push("bottom"),y.marginTop="auto"),C.match(/left/i)?(p.push("left"),y.marginRight="auto"):C.match(/center/i)?(p.push("center"),y.marginLeft="auto",y.marginRight="auto"):C.match(/right/i)&&(p.push("right"),y.marginLeft="auto"),i(R,I(h(h({className:[c("BB"),o].join(" "),transition:"long",opacity:"trans"},y),g),{freeCSS:h({width:{S:"26rem",R:"36rem",L:"44rem","2L":"60rem","3L":"72rem",MAX:"95vw"}[v],maxWidth:"96vw",transformOrigin:p.join(" ")},n),children:a.is.function(r)?i(r,{}):r}))},Edge:e=>{let B=e,{sheetID:t,sheetGroups:s,type:r,content:o,className:f="",size:v="R",freeCSS:n,close_option:S,hold_state:w,overwrap:_}=B,g=M(B,["sheetID","sheetGroups","type","content","className","size","freeCSS","close_option","hold_state","overwrap"]);return i(R,I(h(h({opacity:"trans",transition:"long",position:"relative",backgroundColor:"1.layer.base",flexSizing:"none",minHeight:"viewHeight",boxShadow:"3.remark",className:[c("BB"),f].join(" ")},r=="drawer.right"?{marginLeft:"auto"}:r=="drawer.left"?{marginRight:"auto"}:{}),g),{freeCSS:h({width:{S:"20rem",R:"27rem",L:"32rem","2L":"40rem","3L":"58rem",MAX:"95vw"}[v]},n),children:a.is.function(o)?i(o,{}):o}))},Bottom:e=>{let H=e,{componentID:t,sheetID:s,sheetGroups:r,content:o,size:f="R",sizeChanged:v,baseStyles:n,close_option:{swipeDown:S=!0}={},hold_state:w,overwrap:_}=H,g=M(H,["componentID","sheetID","sheetGroups","content","size","sizeChanged","baseStyles","close_option","hold_state","overwrap"]),B=a.getScreenSize(),C=[0,.2,.6,.95],y={ZERO:0,S:1,R:2,L:3},[p,m]=z(f),[N,A]=z({process:!1,processStart:0,originY:0,originValue:0,viewHeight:0,value:C[y[f]]});T.update({key:t,value:{val_edit:N,resize:k=>{let l=C[y[k]];A(I(h({},N),{value:l})),m(k)}}});const D={Start:k=>{a(document).addEvent({eventID:"BottomSheetMouseMove",eventType:"mousemove",callback:D.Move}).addEvent({eventID:"BottomSheetTouchMove",eventType:"touchmove",callback:D.Move}).addEvent({eventID:"BottomSheetMouseUp",eventType:"mouseup",callback:D.End}).addEvent({eventID:"BottomSheetTouchEnd",eventType:"touchend",callback:D.End});let l=a.getCursor(k),u=I(h({},N),{process:!0,processStart:new Date().getTime(),originY:l.y,originValue:N.value,viewHeight:a.getScreenSize().height});T.update({key:t,value:{val_edit:u}}),A(u)},Move:k=>{var O;let l=(O=T.get(t))==null?void 0:O.val_edit;if(!l.process)return;let E=(a.getCursor(k).y-l.originY)/l.viewHeight,b=l.originValue-E;if(b>.95)b=.95+(b-.95)*.5;else if(b<.2){let L=.2-b;L-=.1,b=.1+(.1-L)*.5}A(I(h({},l),{value:b}))},End:k=>{var b;let l=(b=T.get(t))==null?void 0:b.val_edit;if(!l.process)return;a(document).removeEvent(["BottomSheetMouseMove","BottomSheetTouchMove","BottomSheetMouseUp","BottomSheetTouchEnd"]);let u=0;if(l.value<.1||(l.value<.5?u=1:l.value>.75?u=3:u=2),new Date().getTime()-l.processStart<300){let O=a.getCursor(k).y-l.originY;if(Math.abs(O)>=20){let L=+(O<0)*2-1;u+=L,u=Math.min(Math.max(u,0),C.length-1)}}u==0&&(S||(u=1)),m(["ZERO","S","R","L"][u]),A(I(h({},l),{value:C[u],process:!1}))}},F=Z(!1);return W(()=>{F.current?p=="ZERO"?S&&x.close(s):setTimeout(()=>{e.sizeChanged&&e.sizeChanged(p)},250):F.current=!0},[p]),i(R,{className:c("BB"),margin:[0,"auto"],marginTop:"auto",opacity:"trans",width:1,transition:"long",freeCSS:h({maxWidth:12*60,height:B.height*N.value},N.process?{transition:"0s"}:{}),children:j(G,I(h({gap:0,flexSizing:"none",borderTopLeftRadius:"1.tone.primary",borderTopRightRadius:"1.tone.primary",border:!0,borderBottom:"unset",boxShadow:"3.remark",position:"relative",overflow:"hidden",height:1},n),{children:[j(Y.Separate,{padding:"1/2",backgroundColor:"1.layer.base",position:"relative",freeCSS:{userSelect:"none"},children:[i(Y.Center,{flexSizing:0,padding:"2/3",onMouseDown:D.Start,onTouchStart:D.Start,ssPushable:!0,isRounded:!0,freeCSS:{cursor:"grab",userSelect:"none"},children:i(R,{unitWidth:6,unitHeight:"1/2",backgroundColor:"5.layer.darker",isRounded:!0,className:c("DragBar")})}),i(V.Button.Sub.R,{color:"cloud",ssSphere:2,onClick:()=>{x.close(s)},children:i(X.Times,{})})]}),i(R,I(h({backgroundColor:"1.layer.base",flexSizing:0,overflow:"auto"},g),{children:a.is.function(o)?i(o,{}):o}))]}))})},Custom:e=>{let k=e,{sheetID:t,sheetGroups:s,parent:r,gravityPoint:o=22,content:f,close_option:v,hold_state:n,overwrap:S,openAfter:w,closeAfter:_}=k,g=M(k,["sheetID","sheetGroups","parent","gravityPoint","content","close_option","hold_state","overwrap","openAfter","closeAfter"]),[B]=z(a.uuid.gen()),C=a.is.element(r)?a(r):a.is.jsmin(r)?r:P(r),y='[data-sheet-id="'+B+'"]',p='[data-sheet-content="'+B+'"]';o=o;let m=o%5||5,N=Math.ceil(o/5);const A=()=>{let l={},{top:u,right:E,bottom:b,left:O,height:L,width:K}=C.position();return[1,2].includes(m)?l.left=O:m==3?l.left=O+K/2:[4,5].includes(m)&&(l.left=E),o<=10?l.top=u:o<=15?l.top=u+L/2:o<=25&&(l.top=b),l};let[D,F]=z(A());const H=()=>{let l=P(y).position(),u=P(p).position(),E=a.getScreenSize(),b=h({},D);return u.top<0&&(b.top=l.top-u.top),u.left<0&&(b.left=l.left-u.left),u.right>E.width&&(b.left=l.left-(u.right-E.width)),u.bottom>E.height&&(b.top=l.top-(u.bottom-E.height)),b};return W(()=>{P(y).await(10).addClass(c("Open")).await(250).callback(()=>{F(H())}),T.update({key:"customSheet-"+e.sheetID,value:{reposition:()=>{setTimeout(()=>{F(H())},200)}}})},[]),C[0]?i(R,{className:[c("BB"),c("CustomSheet")].join(" "),"data-sheet-id":B,transition:"long",opacity:"trans",position:"absolute",width:0,height:0,flexCenter:!0,freeCSS:D,children:i(J,{className:[c("GPT"),c("GPT_"+o),c("Col_"+m),c("Row_"+N)].join(" "),position:"absolute",children:i(R,I(h({flexSizing:"none","data-sheet-content":B,maxHeight:"viewHeight",overflow:"auto",padding:1},g),{freeCSS:h({maxWidth:"98vw"},g.freeCSS),children:a.is.function(f)?i(f,{}):f}))})}):null}},TapSensor:e=>i(V.Button.Plain,{className:c("TapSensor"),onClick:()=>{var t;(t=e.delegateAroundClick)!=null&&t&&x.close(e.sheetID)},freeCSS:{cursor:"default"},children:i(R,{className:c("TapContent")})})},x={Wrapper:()=>i(d.Wrapper,{}),open:e=>{if(e.sheetID=(e.sheetID||"").replace(/\./g,"-"),e.type=="image"){let s=e.sheetID||a.uuid.gen(),t=e,{type:r,src:o}=t,f=M(t,["type","src"]);x.open(I(h({type:"normal.topCenter",backgroundColor:"trans"},f),{sheetID:s,freeCSS:{maxWidth:"96vw",transformOrigin:"top"},content:()=>{let[v]=z(a.flatArray(o)),[n,S]=z(0),w=[],_=[];return v.forEach((g,B)=>{w.push({value:B,label:i($,{src:a.flatArray(g)[0],width:"auto",height:1,freeCSS:{maxWidth:12*6,maxHeight:12*3}})}),_.push(i($,{width:1,height:"auto",src:a.flatArray(g)[0]}))}),j(G,{gap:0,children:[j(Y.Separate,{gap:2,padding:1,backgroundColor:"1.layer.base",borderTopLeftRadius:"1.tone.primary",borderTopRightRadius:"1.tone.primary",children:[i(q.Radio,{tone:"border",icon:!1,value:n,override:"force",horizontalAlign:"center",onUpdateValidValue:({value:g})=>{S(g[0])},cellStyles:{borderWidth:2,padding:"1/3"},options:w}),j(V.Button.Border.R,{color:"cloud",isRounded:!0,onClick:()=>{x.close(s)},children:["\u9589\u3058\u308B ",i(X.Times,{})]})]}),i(Q.SwipeView,{slideIndex:n,options:{loop:v.length>1,onSlideCallback:g=>{S(g)}},slides:_,wrapper:g=>i(R,{borderBottomLeftRadius:"1.tone.primary",borderBottomRightRadius:"1.tone.primary",children:g})})]})}}));return}d.addNewSheet(e)},refresh:(e,t)=>{e.sheetID=(e.sheetID||"").replace(/\./g,"-");let s=T.get(e.sheetID);s&&s.refresh&&s.refresh(e,t)},resize:e=>{e.sheetID=(e.sheetID||"").replace(/\./g,"-");let t=T.get(e.sheetID);t&&t.resize&&t.resize(e.size)},reposition:e=>{let t=T.get("customSheet-"+e);t&&t.reposition&&t.reposition()},close:function(e,t,s){var o;e=e==null?void 0:e.replace(/\./g,"-");let r=d.contents[e];if(r&&!(t=="Escape"&&!((o=r.params.close_option)!=null&&o.escapeKeyDown))){let{params:f}=r,{sheetID:v}=f,n=T.get(v);n&&n.close&&n.close(s)}},closeGroup:e=>{var t;e=(e||"").replace(/\./g,"-");for(let[s,r]of Object.entries(d.contents))(t=r.params.sheetGroups)!=null&&t.includes(e)&&x.close(s)},closeAll:e=>{var t;for(let[s,r]of Object.entries(d.contents))e&&((t=r.params.close_option)==null?void 0:t.pageTransit)==!1||x.close(s,"pageTransit",!0)},Comps:{Body:e=>i(R,h({className:c("BaseBody"),backgroundColor:"1.layer.base",borderRadius:"1.tone.primary",position:"relative",boxShadow:"3.remark",transition:"long"},e))}};export{x as Sheet,x as default};
|
package/dist/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ declare const amotify: {
|
|
|
25
25
|
Loader: fn.Loader.Methods;
|
|
26
26
|
Tooltips: fn.Tooltips.Methods;
|
|
27
27
|
Cropper: fn.Cropper.Methods;
|
|
28
|
+
DesignBook: () => import("react/jsx-runtime").JSX.Element;
|
|
28
29
|
Accordion: mols.Accordion.Methods;
|
|
29
30
|
Column: utils.React.FC<atoms.Flex.Input>;
|
|
30
31
|
LinkifyText: utils.React.FC<mols.LinkifyText.Input>;
|
package/dist/style.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license amotify
|
|
3
|
-
* amotify 0.1.
|
|
3
|
+
* amotify 0.1.21
|
|
4
4
|
* https://mingoo.co.jp/
|
|
5
5
|
|
|
6
6
|
* Copyright (c) mingoo, LLC.
|
|
7
7
|
* Released under the MIT license
|
|
8
8
|
|
|
9
|
-
* Latest updated at: 2024/5
|
|
9
|
+
* Latest updated at: 2024/6/5
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
/* src/@styles/@app.scss */
|
|
@@ -4970,6 +4970,9 @@ amotify-app {
|
|
|
4970
4970
|
.amotf_minhviewHeight {
|
|
4971
4971
|
min-height: var(--viewHeight);
|
|
4972
4972
|
}
|
|
4973
|
+
.amotf_minhviewWidth {
|
|
4974
|
+
min-height: 100vw;
|
|
4975
|
+
}
|
|
4973
4976
|
.amotf_minhtopNavigationHeight {
|
|
4974
4977
|
min-height: var(--topNavHeight);
|
|
4975
4978
|
}
|
|
@@ -4991,6 +4994,9 @@ amotify-app {
|
|
|
4991
4994
|
.amotf_minwviewHeight {
|
|
4992
4995
|
min-width: var(--viewHeight);
|
|
4993
4996
|
}
|
|
4997
|
+
.amotf_minwviewWidth {
|
|
4998
|
+
min-width: 100vw;
|
|
4999
|
+
}
|
|
4994
5000
|
.amotf_minwtopNavigationHeight {
|
|
4995
5001
|
min-width: var(--topNavHeight);
|
|
4996
5002
|
}
|
|
@@ -5012,6 +5018,9 @@ amotify-app {
|
|
|
5012
5018
|
.amotf_maxhviewHeight {
|
|
5013
5019
|
max-height: var(--viewHeight);
|
|
5014
5020
|
}
|
|
5021
|
+
.amotf_maxhviewWidth {
|
|
5022
|
+
max-height: 100vw;
|
|
5023
|
+
}
|
|
5015
5024
|
.amotf_maxhtopNavigationHeight {
|
|
5016
5025
|
max-height: var(--topNavHeight);
|
|
5017
5026
|
}
|
|
@@ -5033,6 +5042,9 @@ amotify-app {
|
|
|
5033
5042
|
.amotf_maxwviewHeight {
|
|
5034
5043
|
max-width: var(--viewHeight);
|
|
5035
5044
|
}
|
|
5045
|
+
.amotf_maxwviewWidth {
|
|
5046
|
+
max-width: 100vw;
|
|
5047
|
+
}
|
|
5036
5048
|
.amotf_maxwtopNavigationHeight {
|
|
5037
5049
|
max-width: var(--topNavHeight);
|
|
5038
5050
|
}
|
|
@@ -7183,6 +7195,9 @@ amotify-app {
|
|
|
7183
7195
|
.amotf_bpminhviewHeight {
|
|
7184
7196
|
min-height: var(--viewHeight);
|
|
7185
7197
|
}
|
|
7198
|
+
.amotf_bpminhviewWidth {
|
|
7199
|
+
min-height: 100vw;
|
|
7200
|
+
}
|
|
7186
7201
|
.amotf_bpminhtopNavigationHeight {
|
|
7187
7202
|
min-height: var(--topNavHeight);
|
|
7188
7203
|
}
|
|
@@ -7204,6 +7219,9 @@ amotify-app {
|
|
|
7204
7219
|
.amotf_bpminwviewHeight {
|
|
7205
7220
|
min-width: var(--viewHeight);
|
|
7206
7221
|
}
|
|
7222
|
+
.amotf_bpminwviewWidth {
|
|
7223
|
+
min-width: 100vw;
|
|
7224
|
+
}
|
|
7207
7225
|
.amotf_bpminwtopNavigationHeight {
|
|
7208
7226
|
min-width: var(--topNavHeight);
|
|
7209
7227
|
}
|
|
@@ -7225,6 +7243,9 @@ amotify-app {
|
|
|
7225
7243
|
.amotf_bpmaxhviewHeight {
|
|
7226
7244
|
max-height: var(--viewHeight);
|
|
7227
7245
|
}
|
|
7246
|
+
.amotf_bpmaxhviewWidth {
|
|
7247
|
+
max-height: 100vw;
|
|
7248
|
+
}
|
|
7228
7249
|
.amotf_bpmaxhtopNavigationHeight {
|
|
7229
7250
|
max-height: var(--topNavHeight);
|
|
7230
7251
|
}
|
|
@@ -7246,6 +7267,9 @@ amotify-app {
|
|
|
7246
7267
|
.amotf_bpmaxwviewHeight {
|
|
7247
7268
|
max-width: var(--viewHeight);
|
|
7248
7269
|
}
|
|
7270
|
+
.amotf_bpmaxwviewWidth {
|
|
7271
|
+
max-width: 100vw;
|
|
7272
|
+
}
|
|
7249
7273
|
.amotf_bpmaxwtopNavigationHeight {
|
|
7250
7274
|
max-width: var(--topNavHeight);
|
|
7251
7275
|
}
|
package/dist/temps/_.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './designBook';
|
package/dist/temps/_.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export*from"./designBook";
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import{e as y}from"../chunk-VY3566IV.js";import{Fragment as d,jsx as e,jsxs as t}from"react/jsx-runtime";import S from"react";import{$$ as w,Config as G}from"../@utils/_";import{Box as o,Span as V,Grid as p,Flex as c,FAI as g,Img as T,Logo as l,Placeholder as U}from"../atoms/_";import{List as v,LinkifyText as Y,Accordion as H,Row as B,Column as h,Text as n}from"../mols/_";import{Layout as k,Table as b,Input as i,Button as r,Sheet as O,Snackbar as z,Tooltips as F,Loader as C,Effect as q,Cropper as J}from"../fn/_";const M={_:()=>t(d,{children:[e(M.DarkMode,{}),e(M.ThemeColor,{})]}),DarkMode:()=>t(B.Separate,{children:[e(o,{isSemiBoldFont:!0,fontSize:"4.thirdTitle",children:"Dark Mode"}),e(c,{gap:2,children:e(i.Segmented.Border,{value:G.get().darkMode,textAlign:"left",options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"dim",label:"Dim"},{value:"auto",label:"Auto"}],flexCenter:!0,onUpdateValidValue:({value:a})=>{let u=a[0];G.update.darkMode(u)}})})]}),ThemeColor:()=>{const a=x=>{G.update.themeColor(x)};let u=[];const s=["comun","leaf","heart","droplet","brick","flower","lip","wine","theater","bat","poizon","eggplant","ufo","alien","tombstone","ninja","moon","rain","unicorn","axe","gem","soap","drizzle","building","fish","icicles","water","tree1","tree2","tree3","battery","seedle","greenTea","oak","salad","cloudy","lemon","angel","parasol","pizza","thunder","latte","island","shovel","coffee","carrot","cactus","volcano","choco","industry","gun","galaxy","line","twitter","amazon","facebook","android","slackBlue","slackGreen","slackRed","slackYellow","slackBase","googleBlue","googleGreen","googleYellow","googleRed"];for(let x of s)u.push(e(r.Button.Prime.R,{padding:[1,1.5],fontColor:"white",borderRadius:"1.tone.primary",textAlign:"left",backgroundColor:x,onClick:()=>{a(x)},children:e(n.Supplement,{children:x.toCapital()})}));return t(B.Separate,{children:[e(n.SubTitle,{children:"ThemeColor"}),e(p,{gridCols:5,gap:"1/3",children:u})]})}},R={_:()=>t(d,{children:[t(c,{gap:1,flexChilds:"even",flexNewLine:!0,children:[e(o,{padding:2,ssCardBox:!0,flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"border",flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"cloud",flexCenter:!0,children:"Hello"})]}),t(c,{gap:1,children:[e(o,{flexCenter:!0,children:e(U,{unitWidth:6,unitHeight:6,children:"Placeholder",isRounded:!0})}),t(p,{gridCols:3,gap:1,flexSizing:"auto",children:[e(o,{backgroundColor:"1.layer.base",padding:2}),e(o,{backgroundColor:"2.layer.cloud",padding:2}),e(o,{backgroundColor:"3.layer.canvas",padding:2}),e(o,{backgroundColor:"4.layer.darken",padding:2}),e(o,{backgroundColor:"5.layer.darker",padding:2}),e(o,{backgroundColor:"6.layer.darkest",padding:2})]}),t(p,{gridCols:3,gap:"1/2",flexSizing:"auto",ssCardBox:!0,children:[e(o,{flexCenter:!0,fontColor:"1.clear",children:"FontColor1"}),e(o,{flexCenter:!0,fontColor:"2.normal",children:"FontColor2"}),e(o,{flexCenter:!0,fontColor:"3.blur",children:"FontColor3"}),e(o,{flexCenter:!0,fontColor:"4.thin",children:"FontColor4"}),e(o,{flexCenter:!0,fontColor:"5.translucent",children:"FontColor5"})]})]}),e(R.Fonts,{}),e(R.Box,{}),e(R.Flex,{}),e(R.Grid,{}),e(R.Others,{})]}),Fonts:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Font"}),t(o,{overflow:"auto",padding:1,children:[e(n.Description,{padding:1,children:`<Box
|
|
2
|
+
fontSize={ 0 ~ 8 }
|
|
3
|
+
>
|
|
4
|
+
some text
|
|
5
|
+
</Box>`}),e(v,{rowStyles:{flexType:"col",borderBottom:!0,padding:1,flexWrap:!1,gap:"1/2"},rows:[{children:t(d,{children:["\u30FB Landing",t(o,{fontSize:"7.landing",isSemiBoldFont:!0,children:["Visualize Your ",e(V,{fontColor:"theme",children:"Colors"})," On a Real Website"]})]})},{children:t(d,{children:["\u30FB Title",e(o,{fontSize:"6.title",children:"\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059"})]})},{children:t(d,{children:["\u30FB SubTitle",e(o,{fontSize:"5.subTitle",children:"\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B"})]})},{children:t(d,{children:["\u30FB ThirdTitle",e(o,{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"})]})},{children:t(d,{children:["\u30FB Paragraph",e(n.Description,{fontSize:"3.paragraph",children:e(Y,{text:`
|
|
6
|
+
This article discusses performance best practices for fonts.
|
|
7
|
+
There are a variety of ways in which web fonts impact performance:https://google.com`})})]})},{children:t(d,{children:["\u30FB Normal",e(o,{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"})]})},{children:t(d,{children:["\u30FB Mini",e(o,{fontSize:"1.mini",children:"Copyright \xA9 Ministry of Finance Japan. All Rights Reserved."})]})}]})]})]}),Box:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Box"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,tone:"cellBorder",borderRadius:0,height:1,colLength:2,head:!1,rows:[[{children:e(n.Description,{children:`<Box>
|
|
8
|
+
helloWorld!!
|
|
9
|
+
</Box>`})},{children:e(o,{children:" helloWorld!! "})}],[{children:e(n.Description,{children:`<Box
|
|
10
|
+
children={ 'helloWorld!!' }
|
|
11
|
+
/>`})},{children:e(o,{children:"helloWorld!!"})}],[{children:e(n.Description,{children:`<Box
|
|
12
|
+
fontColor={ '4.thin' }
|
|
13
|
+
padding={ 1 }
|
|
14
|
+
margin={ 1 }
|
|
15
|
+
textAlign='center'
|
|
16
|
+
borderRadius={ 2 }
|
|
17
|
+
border={ 'normal' }
|
|
18
|
+
children={ 'styleBox' }
|
|
19
|
+
/>
|
|
20
|
+
`})},{children:e(o,{fontColor:"4.thin",padding:1,margin:1,textAlign:"center",borderRadius:2,border:!0,children:"styleBox"})}]]})})]}),Flex:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Flex"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",borderRadius:0,height:1,head:!1,rows:[[{children:e(n.Description,{children:`<Flex flexType='row' gap={ 1 }>
|
|
21
|
+
<Box children={ 'FlexBox1' } />
|
|
22
|
+
<Box children={ 'FlexBox2' } />
|
|
23
|
+
<Box children={ 'FlexBox3' } />
|
|
24
|
+
</Flex>`})},{children:t(c,{flexType:"row",gap:1,fontColor:"theme",children:[e(o,{padding:1,borderRadius:1,flexCenter:!0,children:"FlexBox1",backgroundColor:"tcOpLow"}),e(o,{padding:1,borderRadius:1,flexCenter:!0,children:"FlexBox2",backgroundColor:"tcOpMiddle"}),e(o,{padding:1,borderRadius:1,flexCenter:!0,children:"FlexBox3",backgroundColor:"tcOpHigh"})]})}],[{children:e(n.Description,{textAlign:"left",children:`<Flex
|
|
25
|
+
flexType='col'
|
|
26
|
+
flexChilds={ 'auto' }
|
|
27
|
+
>
|
|
28
|
+
<Box />
|
|
29
|
+
<Box />
|
|
30
|
+
...
|
|
31
|
+
</Flex>`})},{children:t(d,{children:[t(c,{gap:1,flexCenter:!0,children:[e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcLightest"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcLighter"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcLighten"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"theme"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcDarken"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcDarker"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcDarkest"})]}),t(c,{gap:1,flexCenter:!0,children:[e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"1.layer.base"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"2.layer.cloud"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"3.layer.canvas"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"4.layer.darken"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"5.layer.darker"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"6.layer.darkest"})]})]})}],[{children:e(n.Description,{children:`<Flex gap={ 1 }>
|
|
32
|
+
<Box flexGrid={ 2 } ... />
|
|
33
|
+
<Box flexGrid={ 3 } ... />
|
|
34
|
+
<Box flexGrid={ 4 } ... />
|
|
35
|
+
</Flex>`})},{children:t(c,{gap:1,fontColor:"white",children:[e(o,{padding:1,flexCenter:!0,borderRadius:1,backgroundColor:"posi",flexGrid:2,children:"Box1"}),e(o,{padding:1,flexCenter:!0,borderRadius:1,backgroundColor:"nega",flexGrid:3,children:"Box2"}),e(o,{padding:1,flexCenter:!0,borderRadius:1,backgroundColor:"warn",flexGrid:4,children:"Box3"})]})}]]})})]}),Grid:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Grid"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",height:1,backgroundColor:"nega",borderRadius:0,head:!1,rows:[[{children:e(n.Description,{children:`<Grid gridCols={ 3 } gap={ 1 }>
|
|
36
|
+
<Box children={ 'GridBox1' } />
|
|
37
|
+
<Box children={ 'GridBox2' } />
|
|
38
|
+
<Box children={ 'GridBox3' } />
|
|
39
|
+
<Box children={ 'GridBox4' } />
|
|
40
|
+
<Box children={ 'GridBox5' } />
|
|
41
|
+
<Box children={ 'GridBox6' } />
|
|
42
|
+
</Grid>`})},{children:t(p,{gridCols:3,gap:1,children:[e(o,{border:!0,padding:1,backgroundColor:"1.layer.base",children:"GridBox1"}),e(o,{border:!0,padding:1,backgroundColor:"2.layer.cloud",children:"GridBox2"}),e(o,{border:!0,padding:1,backgroundColor:"3.layer.canvas",children:"GridBox3"}),e(o,{border:!0,padding:1,backgroundColor:"4.layer.darken",children:"GridBox4"}),e(o,{border:!0,padding:1,backgroundColor:"5.layer.darker",children:"GridBox5"}),e(o,{border:!0,padding:1,backgroundColor:"6.layer.darkest",children:"GridBox6"})]})}]]})})]}),Others:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Others"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",height:1,borderRadius:0,head:!1,rows:[[{children:e(d,{children:e(n.Description,{children:`
|
|
43
|
+
<Button.Label
|
|
44
|
+
htmlFor='testAccordion'
|
|
45
|
+
type='sub'
|
|
46
|
+
children={ 'ToggleButton' }
|
|
47
|
+
/>
|
|
48
|
+
<Accordion
|
|
49
|
+
id='testAccordion'
|
|
50
|
+
open
|
|
51
|
+
children={
|
|
52
|
+
<>
|
|
53
|
+
in Accordion Element
|
|
54
|
+
</>
|
|
55
|
+
}
|
|
56
|
+
/>`})})},{children:t(d,{children:[e(r.Label.Sub.R,{children:"ToggleButton",onClick:()=>{H.fn.toggle("testAccordion")}}),e(H,{accordionID:"testAccordion",defaultOpen:!0,children:"in Accordion Element"})]})}],[{children:e(n.Description,{children:`
|
|
57
|
+
<Img
|
|
58
|
+
maxheight={ 8 }
|
|
59
|
+
maxWidth={ 8 }
|
|
60
|
+
src='...'
|
|
61
|
+
alt='noImage'
|
|
62
|
+
/>
|
|
63
|
+
`})},{children:e(T,{src:l.Images.defaultIcon("user"),alt:"noImage",freeCSS:{maxHeight:12*8,maxWidth:12*8}})}]]})})]})},f={_:()=>t(d,{children:[e(f.Comun,{}),e(f.Mingoo,{}),e(f.Google,{}),e(f.Facebook,{}),e(f.Line,{}),e(f.Twitter,{})]}),Comun:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Comun"}),e(o,{padding:1,overflow:"auto",children:t(h,{padding:2,children:[t(B.Left,{gap:2,children:[e(l.Brands.ComunIcon,{size:"S"}),e(l.Brands.ComunIcon,{size:"R"}),e(l.Brands.ComunIcon,{size:"L"}),e(l.Brands.ComunIcon,{size:"2L"}),e(l.Brands.ComunIcon,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunTitle,{size:"S"}),e(l.Brands.ComunTitle,{size:"R"}),e(l.Brands.ComunTitle,{size:"L"}),e(l.Brands.ComunTitle,{size:"2L"}),e(l.Brands.ComunTitle,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoH,{size:"S"}),e(l.Brands.ComunLogoH,{size:"R"}),e(l.Brands.ComunLogoH,{size:"L"}),e(l.Brands.ComunLogoH,{size:"2L"}),e(l.Brands.ComunLogoH,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoV,{size:"S"}),e(l.Brands.ComunLogoV,{size:"R"}),e(l.Brands.ComunLogoV,{size:"L"}),e(l.Brands.ComunLogoV,{size:"2L"}),e(l.Brands.ComunLogoV,{size:"3L"})]})]})})]}),Mingoo:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Mingoo"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.MingooIcon,{size:"S"}),e(l.Brands.MingooIcon,{size:"R"}),e(l.Brands.MingooIcon,{size:"L"}),e(l.Brands.MingooIcon,{size:"2L"}),e(l.Brands.MingooIcon,{size:"3L"})]})})]}),Google:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Google"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Google,{size:"S"}),e(l.Brands.Google,{size:"R"}),e(l.Brands.Google,{size:"L"}),e(l.Brands.Google,{size:"2L"}),e(l.Brands.Google,{size:"3L"})]})})]}),Facebook:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Facebook"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Facebook,{size:"S"}),e(l.Brands.Facebook,{size:"R"}),e(l.Brands.Facebook,{size:"L"}),e(l.Brands.Facebook,{size:"2L"}),e(l.Brands.Facebook,{size:"3L"})]})})]}),Line:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"LINE"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.LINE,{size:"S"}),e(l.Brands.LINE,{size:"R"}),e(l.Brands.LINE,{size:"L"}),e(l.Brands.LINE,{size:"2L"}),e(l.Brands.LINE,{size:"3L"})]})})]}),Twitter:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Twitter"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Twitter,{size:"S"}),e(l.Brands.Twitter,{size:"R"}),e(l.Brands.Twitter,{size:"L"}),e(l.Brands.Twitter,{size:"2L"}),e(l.Brands.Twitter,{size:"3L"})]})})]})},L={_:()=>t(d,{children:[e(L.Ripple,{}),e(L.Variables,{}),e(L.Tooltips,{}),e(L.Snackbar,{})]}),Ripple:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Ripple"}),t(h,{padding:2,children:[e(n.Description,{children:`<Element
|
|
64
|
+
ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
|
|
65
|
+
/>`}),t(B.Center,{children:[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,{children:"Theme",ssEffectsOnActive:["ripple.theme"]})]})]})]}),Variables:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Effects"}),t(h,{padding:2,children:[e(n.Description,{children:`<Button
|
|
66
|
+
ssEffectsOnActive={ 'shrink' }
|
|
67
|
+
/>`}),e(B.Left,{children:e(r.Button.Prime.R,{onClick:()=>{C.fn.mini.active("testLoadingKey"),setTimeout(()=>{C.fn.stopALL()},5e3)},children:t(B.Center,{gap:0,children:[e(C.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(o,{textAlign:"left",children:"Launch Mini Loader"})]})})}),t(B.Left,{children:[e(r.Button.Border.R,{children:"Shrink",ssEffectsOnActive:"shrink"}),e(r.Button.Border.R,{children:"Pudding",ssEffectsOnActive:"pudding"}),e(r.Button.Border.R,{children:"Expand",ssEffectsOnActive:"expand"}),e(r.Button.Border.R,{children:"corner Loader",onClick:()=>{C.fn.corner.active(),setTimeout(()=>{C.fn.corner.stop()},3e3)}}),e(r.Button.Border.R,{children:"top Loader",onClick:()=>{C.fn.top.active(),setTimeout(()=>{C.fn.top.stop()},7e3)}})]})]})]}),Tooltips:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"ToolTips"}),e(p,{gridCols:5,gap:1,padding:2,children:Array.from({length:25}).map((a,u)=>t(r.Button.Border.R,{padding:2,onMouseOver:s=>{let x=w.uuid.gen();F.open({tipsID:"tips-"+(u+1)+"---"+x,parent:s.currentTarget,gravityPoint:u+1,padding:0,content:e(F.Comps.Body,{children:u},u)})},children:["GravityPoint",u+1]}))})]}),Snackbar:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Snackbars"}),t(B.Center,{padding:2,children:[e(r.Button.Prime.R,{onClick:()=>{z.add({children:"hello World!!"})},children:"Add Normal Snackbar"}),e(r.Button.Prime.R,{onClick:()=>{z.add({secondsToClose:30,children:t(B.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 a=w.uuid.gen();z.add({snackID:a,children:t(h,{padding:1,children:[t(B.Left,{verticalAlign:"top",children:[e(T,{src:l.Images.defaultIcon("user"),ssSphere:4}),e(n.Description,{children:`Some Text
|
|
68
|
+
Some Text
|
|
69
|
+
Some Text`})]}),t(B.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:()=>{z.remove(a)},children:"\u9589\u3058\u308B"}),e(r.Anchor.Prime.S,{href:"https://google.com",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},P={_:()=>t(d,{children:[e(P.Types,{}),e(P.Tone,{}),e(P.Segmented,{})]}),Tone:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Tone"}),e(o,{padding:1,overflow:"auto",children:t(p,{gridCols:2,gap:2,children:[t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBPrime"}),t(p,{gridCols:3,gap:1,padding: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"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBSub"}),t(p,{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"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Sub.R,{color:"white",children:"white"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBClear"}),t(p,{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"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Clear.R,{color:"white",children:"white"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBFillToBorder"}),t(p,{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"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.FillToBorder.R,{color:"white",children:"white"}),e(r.Button.FillToBorder.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBBorderToFill"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.BorderToFill.R,{color:"theme",fontColor:"nega",children:e(o,{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"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.BorderToFill.R,{color:"white",children:"white"}),e(r.Button.BorderToFill.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBOthers"}),t(p,{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:()=>t(c,{gap:2,flexChilds:"auto",children:[t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBButton"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Button.Prime ... />"}),e(o,{children:e(r.Button.Prime.R,{children:"Button.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Sub ... />"}),e(o,{children:e(r.Button.Sub.R,{children:"Button.Sub AAAA"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Border ... />"}),e(o,{children:e(r.Button.Border.R,{children:"Button.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBLabel"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Label.Prime ... />"}),e(o,{children:e(r.Label.Prime.R,{children:"Label.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Sub ... />"}),e(o,{children:e(r.Label.Sub.R,{children:"Label.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Border ... />"}),e(o,{children:e(r.Label.Border.R,{children:"Label.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBAnchor"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Anchor.Prime ... />"}),e(o,{children:e(r.Anchor.Prime.R,{href:"",children:"Anchor.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Sub ... />"}),e(o,{children:e(r.Anchor.Sub.R,{href:"",children:"Anchor.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Border ... />"}),e(o,{children:e(r.Anchor.Border.R,{href:"",children:"Anchor.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBSizes"}),t(p,{gridCols:2,padding:1,gap:2,children:[e(o,{flexCenter:!0,children:e(r.Button.Prime.XS,{children:'size="XS"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.S,{children:'size="S"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.R,{children:'size="R"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.L,{children:'size="L"'})})]})]})]}),Segmented:()=>t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"Segmented"}),t(c,{overflow:"auto",gap:2,padding:3,children:[e(i.Segmented.Auto,{tone:"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(i.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(i.Segmented.Cloud2,{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(i.Segmented.Cloud3,{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(i.Segmented.Border,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.Border2,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.BottomLine,{value:1,options:[{value:0,label:"Takana"},{value:1,label:"Mentai"},{value:2,label:"Mayo"},{value:3,label:"Gyudon"}]})]})]})},K=()=>{const a={Basic:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"TextInput"}),t(o,{padding:1,children:[t(B.Separate,{marginBottom:2,children:[e(n.Description,{children:`<Input.Text
|
|
70
|
+
required
|
|
71
|
+
value={ 'hello React!!' }
|
|
72
|
+
/>`}),t(h,{gap:"1/2",children:[t(o,{children:["testInputLabel ",e(i.Comps.RequiredSign,{})]}),e(i.Text.Normal,{required:!0,value:"helloReact"})]})]}),t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Text.Email",e(i.Text.Email,{autoComplete:"off",name:"emailInput",value:"******@gmail.com"})]}),t(o,{children:["Input.Text.Number",e(i.Text.Number,{value:"324"})]}),t(o,{children:["Input.Text.Tel",e(i.Text.Tel,{value:"080-6995-2229"})]}),t(o,{children:["Input.Text.Money.JPY",e(i.Text.Money.JPY,{value:"3000"})]}),t(o,{children:["Input.Text.Url",e(i.Text.Url,{value:"http://google.com"})]}),t(o,{children:["Input.Text.Postal",t(B.Right,{children:[e(o,{flexSizing:0,children:e(i.Text.Postal,{override:"force"})}),e(r.Button.Border.R,{onClick:()=>y(void 0,null,function*(){}),children:"\u73FE\u5728\u5730\u3092\u53D6\u5F97"})]}),e(o,{id:"postalResult",padding:1,textAlign:"left"})]}),t(o,{children:["Input.Text.Password",e(i.Text.Password,{value:"onigiriUmai"})]}),t(o,{flexNewLine:!0,children:["Input.TextArea",e(i.TextArea,{value:`text1
|
|
73
|
+
text2
|
|
74
|
+
text3
|
|
75
|
+
text4
|
|
76
|
+
text5`,rows:5})]})]})]})]})}),Time:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Time Input"}),e(o,{padding:1,children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Time.Clock",e(i.Time.Clock,{})]}),t(o,{children:["Input.Time.Date",e(i.Time.Date,{})]}),t(o,{children:["Input.Time.Week",e(i.Time.Week,{})]}),t(o,{children:["Input.Time.Month",e(i.Time.Month,{})]}),t(o,{children:["Input.Time.Year",e(i.Time.Year,{})]}),t(o,{children:["Input.Time.Periods.Date",e(i.Time.Periods.Date,{})]}),t(o,{children:["Input.Time.Periods.Month",e(i.Time.Periods.Month,{})]}),t(o,{children:["Input.Time.DateWareki",e(i.Time.DateWareki,{})]}),t(o,{children:["Input.Time.picker",e(i.Select,{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:u})=>{i.Time.fn.picker.launch({parent:"#timePicker",restrict:u,defaultValue:"",onValueUpdate:s=>{console.log(s)}})}})]})]})})]})}),List:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Radio & Checkbox Input"}),e(o,{padding:1,children:t(h,{children:[t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Radio",e(i.Radio,{value:[1],options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"}]})]}),t(o,{children:["Input.Checkbox",e(i.Checkbox,{value:[2,"3"],options:[{value:"1",label:"option1"},{value:"2",label:"option2"},{value:"3",label:"option3"}]})]})]}),t(h,{children:[e(n.Paragraph,{children:"Tones"}),t(c,{gap:2,flexChilds:"auto",children:[e(i.Radio,{tone:"plain",value:[1],gap:1,options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"normal",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"cloud",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"border",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"vivid",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]})]})]})})]})}),Select:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Select,Search,Chips Input"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Select",e(i.Select,{required:!0,value:3,options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3a"},{value:4,label:"option4"}]})]}),t(o,{children:["Input.Search",e(i.Search,{required:!0,defaultOptions:[{value:1,label:"1"},{value:{value1:2,value2:3},label:"Object"},{value:3,label:"3"},{value:101,label:"101"},{value:102,label:"102"}],onDynamicSearch:(...u)=>y(void 0,null,function*(){let s=[];for(let x=0;x<100;x++)s.push({value:x,label:String(x)});return{options:s}})})]}),t(o,{flexNewLine:!0,children:["Input.Chips",e(i.Chips,{limit:5,value:[{value:"option3",label:"option3"}],onUpdateValidValue:({value:u})=>{console.log(u)},defaultOptions:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"},{value:4,label:"option4"}]})]})]})})})]})}),Variables:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Variables"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.File",e(i.Filer,{limit:3})]}),t(o,{children:["Input.Switch",t(c,{gap:2,children:[e(i.Switch,{}),e(i.Switch,{appearance:"applely",color:"icicles",value:!0}),e(i.Switch,{appearance:"applely",icon:e(g.Check,{}),color:"warn",value:!0})]})]}),t(o,{flexNewLine:!0,children:["Input.Slider",e(i.Slider,{color:"battery",name:"sliderInput",value:40,step:10,min:0,max:100})]})]})})})]})})};return e(d,{children:e(k.Plate,{size:"L",children:t(p,{gap:2,gridCols:2,children:[e(a.Basic,{}),e(a.Select,{}),e(a.Time,{}),e(a.List,{}),e(a.Variables,{})]})})})},j=()=>{const a=u=>{let s="testModal2";O.open({type:u,sheetID:s,size:"S",padding:2,content:t(O.Comps.Body,{padding:1,children:[e(o,{padding:2,children:"Content"}),e(B.Right,{children:e(r.Button.Prime.R,{onClick:()=>{O.close(s)},children:"\u9589\u3058\u308B"})})]})})};return t(d,{children:[t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"CardBox"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`<Box ssCardBox>
|
|
77
|
+
<Box>
|
|
78
|
+
Header
|
|
79
|
+
</Box>
|
|
80
|
+
<Box padding={ 1 }
|
|
81
|
+
overflow='auto'>
|
|
82
|
+
Body
|
|
83
|
+
</Box>
|
|
84
|
+
<Box>
|
|
85
|
+
Footer
|
|
86
|
+
</Box>
|
|
87
|
+
</Box>`})}),e(o,{padding:2,children:t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Header"}),e(o,{padding:1,overflow:"auto",children:"Body"}),e(o,{padding:1,children:"Footer"})]})})]}),t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"List"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`<List
|
|
88
|
+
options={ [
|
|
89
|
+
{
|
|
90
|
+
title?: LeftSideReactComponent,
|
|
91
|
+
content: RightSideReactComponent
|
|
92
|
+
}
|
|
93
|
+
] }
|
|
94
|
+
/>`})}),e(o,{padding:2,overflow:"auto",children:e(v,{border:!0,rowStyles:{padding:1,borderBottom:!0},rows:[{children:t(d,{children:[e(o,{children:"Title1"}),e(o,{children:e(o,{children:"Content1"})})]}),horizontalAlign:"between"},{children:t(d,{children:[e(o,{flexGrid:1,children:"Title2"}),e(o,{flexGrid:2,children:e(o,{children:"Content2"})})]})},{children:t(d,{children:[e(o,{children:"Title3"}),e(o,{children:e(o,{children:"Content3"})})]}),flexType:"col"},{children:e(d,{children:e(o,{children:e(o,{children:"Content4"})})}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Sheet"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`Sheet.open( {
|
|
95
|
+
sheetID: 'sheetID',
|
|
96
|
+
header: ReactElement | React.FC< { modalClose } >,
|
|
97
|
+
body: ReactElement | React.FC< { modalClose } >,
|
|
98
|
+
footer: ReactElement | React.FC< { modalClose } >
|
|
99
|
+
} );`})}),t(h,{padding:2,children:[e(o,{flexCenter:!0,children:t(p,{gridCols:3,gap:1,children:[e(r.Button.Border.R,{onClick:()=>{a("normal.topLeft")},children:"Top Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topCenter")},children:"Top Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topRight")},children:"Top Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleLeft")},children:"Middle Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleCenter")},children:"Middle Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleRight")},children:"Middle Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomLeft")},children:"Bottom Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomCenter")},children:"Bottom Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomRight")},children:"Bottom Right"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.left")},children:"Drawer Left"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.bottom")},children:"Drawer Bottom"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.right")},children:"Drawer Right"}),e(r.Button.Border.R,{onClick:u=>{F.open({tipsID:"test40",content:e(o,{padding:1,border:!0,borderRadius:2,backgroundColor:"dark",fontColor:"white",children:"Content"}),parent:u.target})},children:"Open Tooltips"})]})}),t(B.Center,{children:["Image Picker",e(T,{src:l.Images.defaultIcon("user"),unitWidth:6,unitHeight:6,showExpand:!0})]})]})]})]})},D={_:()=>e(d,{children:t(h,{children:[e(D.Data,{}),e(D.Normal,{}),e(D.Drag,{}),e(D.Spread,{})]})}),Normal:()=>{let a=[];for(var u=0;u<10;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Normal"}),e(b.Normal,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onRowClick:s=>{console.log(s)}})]})},Drag:()=>{let a=[];for(var u=0;u<4;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];s.rowID="rowID-"+u,a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Drag"}),e(b.Drag,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onOrderChanged:s=>{console.log(s)}})]})},Data:()=>{let a=[];for(var u=0;u<100;u++){let x=Math.round(Math.random()*50+1),I=Math.round(Math.random()*50+1),A=Math.round(Math.random()*50+1),m="name_"+x,W="data_"+I,E="data_"+A,N=[{type:"th",children:u+":"+m,data:m,orderIndex:u},{type:"td",children:W,data:W},{type:"td",children:E,data:E}];a.push(N)}a[1].checked=!0,a[4].checked=!0,a[10].checked=!0;let s="testDataTable";return t(d,{children:[t(c,{horizontalAlign:"between",children:[e(o,{fontSize:"5.subTitle",children:"Table.Data"}),t(c,{gap:"1/2",backgroundColor:"theme",borderRadius:"1.tone.primary",overflow:"hidden",fontColor:"white",children:[e(r.Button.Clear.R,{color:"white",children:"SubmitButton"}),e(o,{flexSizing:"none",unitWidth:"1/4",backgroundColor:"lcOpMiddle",isRounded:!0,margin:["2/3",0]}),e(r.Button.Clear.R,{padding:[0,1],color:"white",onClick:x=>{F.open({tipsID:w.uuid.gen(),parent:x.target,gravityPoint:24,close_option:{aroundClick:!0,parentBlur:!1},content:e(d,{children:t(h,{gap:0,padding:["2/3",0],backgroundColor:"1.layer.base",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,{})})]})]}),t(B.Separate,{verticalAlign:"bottom",children:[t(B.Left,{verticalAlign:"bottom",children:[e(b.Data.SearchInput,{tableID:s}),e(b.Data.Info,{tableID:s})]}),t(B.Right,{verticalAlign:"unset",children:[e(b.Data.RowLength,{tableID:s,lengthSelect:[30,50,100]}),e(b.Data.Paging,{tableID:s})]})]}),e(b.Data,{tableID:s,colLength:3,head:[{data:"head1"},{data:"head2"},{data:"head3"}],rows:a,pageRowLength:30,ssCardBox:!0,filter:[!0],checker:!0})]})},Spread:()=>e(d,{children:e(o,{fontSize:"5.subTitle",children:"Table.Spread"})})},Q=()=>{let[a,u]=S.useState(""),[s,x]=S.useState(""),[I,A]=S.useState("");return e(d,{children:t(o,{children:[t(r.Button.Prime.R,{onClick:()=>{J.open({use:"square",develops:[{size:"S"},{size:"R"},{size:"L"}],onProcessFinished:m=>y(void 0,null,function*(){u(yield m[0].toDataUrl()),x(yield m[1].toDataUrl()),A(yield m[2].toDataUrl())})})},children:[e(g.Image,{})," \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"]}),t(c,{verticalAlign:"top",gap:1,children:[a&&e(T,{isRounded:!0,src:a,alt:"",showExpand:!0,freeCSS:{maxWidth:12*12}}),s&&e(T,{style:{maxWidth:24*12},src:s,alt:"",showExpand:!0}),I&&e(T,{style:{maxWidth:24*12},src:I,alt:"",showExpand:!0}),e(k.SwipeView,{border:!0,borderWidth:3,margin:[3,"auto"],freeCSS:{width:12*10},slideIndex:1,options:{loop:!0,onSlideCallback:m=>{}},slides:[e(o,{backgroundColor:"nega",padding:3,flexCenter:!0,children:"test1"}),e(o,{backgroundColor:"posi",padding:3,flexCenter:!0,children:"test2"}),e(o,{backgroundColor:"warn",padding:3,flexCenter:!0,children:"test3"}),e(o,{backgroundColor:"theme",padding:3,flexCenter:!0,children:"test4"})]})]})]})})},_=()=>{let[a,u]=S.useState(Number(w.getQueryParams().ti)||0);return S.useEffect(()=>{w.setQueryParam({key:"ti",value:a})},[a]),e(d,{children:t(h,{gap:0,minHeight:"contentHeight",backgroundColor:"1.layer.base",children:[e(k.TabBar,{borderBottom:!0,position:"sticky",backgroundColor:"1.layer.base",top:"topBase",tabIndex:a,tabs:["Profiles","Basic","Buttons","Inputs","Styling","Effection","Tables","Croppie","PlayGround","Logo"],onTabChange:s=>{localStorage.setItem("designTabHeader",String(s)),u(s)},UnderBreakPointStyles:{position:"static",top:0}}),e(o,{flexSizing:0,position:"relative",freeCSS:{zIndex:1},children:e(k.PageViewController,{viewIndex:a,views:[e(M._,{}),e(R._,{}),e(P._,{}),e(K,{}),e(j,{}),e(L._,{}),e(D._,{}),e(Q,{}),e(f._,{})],wrapper:s=>e(q.FadeIn,{animationTime:200,children:e(k.Plate,{children:e(c,{gap:2,padding:2,flexWrap:!0,flexChilds:"auto",children:s})})},a)})})]})})};export{_ as DesignBook,_ as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "amotify",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.22",
|
|
4
4
|
"description": "UI FW for React",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"clean": "rimraf dist",
|
|
@@ -30,9 +30,10 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@fortawesome/fontawesome-common-types": "^6.5.1",
|
|
32
32
|
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
33
|
+
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
|
33
34
|
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
|
34
35
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
35
|
-
"@mingoo/jsmin": "^0.0.
|
|
36
|
+
"@mingoo/jsmin": "^0.0.9",
|
|
36
37
|
"@types/express": "^4.17.21",
|
|
37
38
|
"@types/react": "^18.3.1",
|
|
38
39
|
"@types/react-dom": "^18.3.0",
|