amotify 0.0.5 → 0.0.7

package/src/Functions/Button/_.tsx

@@ -0,0 +1,305 @@
+import {
+  StyleConverter,
+  pageTransit
+} from '@global';
+
+import style from './style.module.scss';
+
+
+const Styles = {
+  Size: (
+    seed: amotify.fn.Buttons.Seeds,
+    tone: amotify.fn.Buttons.Tones,
+    size: amotify.fn.Buttons.Sizes,
+    color: amotify.fn.Buttons.Colors
+  ) => {
+    let styles: amotifyUniStyleParams = {}
+    size = size || 'R';
+    if ( [ 'Plain','Link' ].includes( tone ) ) return {}
+
+    if ( size == 'XS' ) {
+      styles = {
+        ...styles,
+        padding: [ '1/3','2/3' ],
+        fontSize: '0.xs',
+        borderRadius: '3.tone.tertiary'
+      }
+    } else if ( size == 'S' ) {
+      styles = {
+        ...styles,
+        padding: [ '1/2',1 ],
+        fontSize: '1.mini',
+        borderRadius: '3.tone.tertiary'
+      }
+    } else if ( size == 'R' ) {
+      styles.padding = [ '3/4',1 ];
+      if ( tone == 'Prime' ) {
+        styles.padding = [ '3/4',2 ];
+      }
+    } else if ( size == 'L' ) {
+      styles.padding = [ 1,3 ];
+      styles.fontSize = '3.paragraph';
+      styles.isBoldFont = true;
+    }
+
+    styles = {
+      borderRadius: '2.tone.secondary',
+      transition: 'middle',
+      position: 'relative',
+      textAlign: 'center',
+      ...styles
+    }
+    return styles;
+  },
+  Tone: (
+    seed: amotify.fn.Buttons.Seeds,
+    tone: amotify.fn.Buttons.Tones,
+    size: amotify.fn.Buttons.Sizes,
+    color: amotify.fn.Buttons.Colors
+  ) => {
+    let styles: amotifyUniStyleParams = {}
+
+    if ( tone == 'Plain' ) return styles;
+    if ( tone == 'Link' ) {
+      styles.fontColor = 'theme';
+      styles.textAlign = 'left';
+    } else if ( tone == 'Normal' ) {
+      styles = {
+        backgroundColor: 'trans'
+      }
+    } else if ( tone == 'Border' ) {
+      styles = {
+        backgroundColor: '1.layer.base',
+        border: '2.normal',
+        boxShadow: 0,
+      }
+    } else if ( tone == 'Prime' ) {
+      styles = {
+        isBoldFont: true,
+        fontColor: 'white',
+        backgroundColor: color as any,
+        boxShadow: 1,
+        ssEffectsOnActive: [ 'shrink','ripple.white' ]
+      }
+
+      if ( color == 'white' ) {
+        styles = {
+          ...styles,
+          fontColor: 'theme',
+          ssEffectsOnActive: [ 'shrink','ripple.cloud' ]
+        }
+      }
+    } else if ( tone == 'Sub' ) {
+      styles = {
+        fontColor: color as any,
+        ssEffectsOnActive: 'shrink'
+      }
+    } else if ( tone == 'Clear' ) {
+      styles = {
+        fontColor: color as any,
+        backgroundColor: 'trans',
+      }
+    } else if ( tone == 'FillToBorder' ) {
+      styles = {
+        fontColor: 'white',
+        boxShadow: 1,
+        borderWidth: 2,
+        borderStyle: 'solid',
+        borderColor: color as any,
+        backgroundColor: color as any,
+      }
+    } else if ( tone == 'BorderToFill' ) {
+      styles = {
+        fontColor: color as any,
+        boxShadow: 1,
+        borderWidth: 2,
+        borderStyle: 'solid',
+        borderColor: color as any,
+        backgroundColor: 'trans'
+      }
+    }
+
+    if ( tone != 'Link' ) {
+      styles = {
+        position: 'relative',
+        ssEffectsOnActive: 'shrink',
+        ...styles
+      }
+    }
+    return styles;
+  }
+}
+
+type SeedWrapperInput = amotify.fn.Buttons.ButtonInput & {
+  seed: amotify.fn.Buttons.Seeds
+  tone: amotify.fn.Buttons.Tones
+  size: amotify.fn.Buttons.Sizes
+}
+const SeedWrapper = ( params: SeedWrapperInput ) => {
+  let Params: SeedWrapperInput = StyleConverter.ReadStyleSet( {
+    isLocked: false,
+    isActive: false,
+    isActiveStyles: {},
+    isActiveClassName: '',
+    tabIndex: 0,
+    className: '',
+    color: 'theme',
+    componentID: $.uuidGen(),
+    'aria-label': $.uuidGen(),
+    ...params,
+  } );
+  let seed = Params.seed;
+  {
+    let {
+      isLocked = false,
+      isActive = false,
+      isActiveStyles = {},
+      isActiveClassName = '',
+      tone = 'border',
+      color = 'theme',
+      className = '',
+    } = Params;
+
+    Params = {
+      ...Styles.Size( params.seed,params.tone,params.size,color as amotify.fn.Buttons.Colors ),
+      ...Styles.Tone( params.seed,params.tone,params.size,color as amotify.fn.Buttons.Colors ),
+      ...Params,
+    }
+
+    Params.className = [
+      className,
+      style.Wrap,
+      style[ 'isActive_' + !!isActive ],
+      style[ 'isLocked_' + isLocked ],
+      style[ 'Tone_' + tone ],
+      style[ 'Color_' + color ],
+    ].join( ' ' );
+
+    if ( [ 'Link','Plain' ].includes( Params.tone ) ) {
+      Params.className = [
+        Params.className,
+        style.uae_blur
+      ].join( ' ' );
+    } else {
+      Params.className = [
+        Params.className,
+        style.uae_remark
+      ].join( ' ' );
+    }
+
+    if ( isActive ) {
+      Params = {
+        className: [
+          Params.className,
+          isActiveClassName
+        ].join( ' ' ),
+        ...Params,
+        ...isActiveStyles
+      }
+    }
+
+    Params = StyleConverter.ToClassName( Params );
+  }
+
+  if ( seed == 'Button' ) {
+    let {
+      componentID,
+      submitOption,
+      onClick,
+      ...Props
+    } = Params as amotify.fn.Buttons.ButtonInput;
+
+    if ( submitOption ) {
+      submitOption = {
+        acceptInvalidForm: false,
+        submitDelegationKey: 'auxEnter',
+        ...submitOption
+      };
+      Props = {
+        ...Props,
+        'data-form-submit-button': submitOption.formName,
+        'data-sdfike': $.flatArray( submitOption.submitDelegationKey ).join( ',' )
+      } as any;
+    }
+
+    return <button
+      data-component-id={ componentID }
+      onClick={ async ( args ) => {
+        if ( onClick ) onClick( args );
+
+        if ( !submitOption ) return;
+        let form = await $.formCollect( submitOption.formName );
+        if ( !submitOption.acceptInvalidForm && !form.valid ) return;
+        submitOption.callback( form.data,form.valid );
+      } }
+      { ...Props as any }
+    />;
+  } else if ( seed == 'Label' ) {
+    let {
+      componentID,
+      ...Props
+    } = Params as amotify.fn.Buttons.LabelInput;
+
+    return <label { ...Props } />;
+  } else if ( seed == 'Anchor' ) {
+    let {
+      componentID,
+      href = '',
+      newTab,
+      sync,
+      shiftQueryParams,
+      ...Props
+    } = Params as amotify.fn.Buttons.AnchorInput;
+
+    return <button
+      { ...Props as any }
+      onClick={ ( event ) => {
+        let aux = event.ctrlKey || event.metaKey;
+
+        let openNew = newTab || !!aux;
+
+        let URL = href;
+        if ( shiftQueryParams ) URL += location.search;
+
+        if ( sync ) {
+          pageTransit.pushSync( URL );
+        } else {
+          pageTransit.push( URL,!!openNew );
+        }
+      } }
+    />;
+  }
+  return null;
+}
+
+const SizeBalancer: {
+  ( seed: amotify.fn.Buttons.Seeds,tone: amotify.fn.Buttons.Tones ): amotify.fn.Buttons.SizeTypes<any>
+} = ( seed,tone ) => {
+  return {
+    XS: ( params ) => ( <SeedWrapper { ...params } seed={ seed } tone={ tone } size='S' /> ),
+    S: ( params ) => ( <SeedWrapper { ...params } seed={ seed } tone={ tone } size='S' /> ),
+    R: ( params ) => ( <SeedWrapper { ...params } seed={ seed } tone={ tone } size='R' /> ),
+    L: ( params ) => ( <SeedWrapper { ...params } seed={ seed } tone={ tone } size='L' /> ),
+  }
+}
+const ToneBalancer: {
+  ( seed: amotify.fn.Buttons.Seeds ): amotify.fn.Buttons.ToneTypes<any>
+} = ( seed ) => {
+  return {
+    Plain: ( params ) => ( <SeedWrapper { ...params } seed={ seed } tone={ 'Plain' } size='R' /> ),
+    Link: ( params ) => ( <SeedWrapper { ...params } seed={ seed } tone={ 'Link' } size='R' /> ),
+    Normal: SizeBalancer( seed,'Normal' ),
+    Border: SizeBalancer( seed,'Border' ),
+
+    Prime: SizeBalancer( seed,'Prime' ),
+    Sub: SizeBalancer( seed,'Sub' ),
+    Clear: SizeBalancer( seed,'Clear' ),
+    FillToBorder: SizeBalancer( seed,'FillToBorder' ),
+    BorderToFill: SizeBalancer( seed,'BorderToFill' ),
+  }
+}
+export const Buttons: amotify.fn.Buttons.Methods = {
+  Button: ToneBalancer( 'Button' ),
+  Label: ToneBalancer( 'Label' ),
+  Anchor: ToneBalancer( 'Anchor' )
+}

package/src/Functions/Button/style.module.scss

@@ -0,0 +1,183 @@
+@use '@uniVar' as *;
+@use'@styleSet' as *;
+.Wrap {
+  position: relative;
+  @include DisableduserSelect();
+  > * {
+    position: relative;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .Child {}
+  &[ disabled] {
+    pointer-events: none;
+  }
+  &.isLocked_true {
+    background-color: $color-layer4 !important;
+  }
+}
+.uae_ {
+  &remark {
+    &:active {
+      box-shadow: $shadow2 inset, 0 0 0 transparent !important;
+    }
+    &:focus {
+      box-shadow: 0 0 0 transparent inset, $shadow3;
+    }
+  }
+  &blur {}
+}
+.Tone_ {
+  &Sub, &Clear {
+    &.Color_ {
+      &theme {
+        background-color: $color-theme-opacity-few;
+      }
+      &posi {
+        background-color: rgba(var(--color-positive-rgb), .075);
+      }
+      &nega {
+        background-color: rgba(var(--color-negative-rgb), .075);
+      }
+      &warn {
+        background-color: rgba(var(--color-warning-rgb), .075);
+      }
+      &white {
+        background-color: rgba(white, .15);
+      }
+      &cloud {
+        background-color: rgba(var(--color-cloud-rgb), .7);
+      }
+      &layer {
+        background-color: hsla(var(--color-layer5-hsl), .3);
+      }
+    }
+  }
+}
+.isActive_false {
+  &.Tone_Clear {
+    &:not(:hover):not(:focus) {
+      background-color: transparent;
+    }
+  }
+  &:hover, &:focus {
+    &.Tone_ {
+      &Link {
+        color: $color-theme;
+        text-decoration: underline !important;
+        * {
+          text-decoration: underline !important;
+        }
+      }
+      &Normal {
+        &.Color_ {
+          &plain {
+            background-color: $color-layer3;
+            color: $font-color2;
+          }
+          &theme {
+            background-color: $color-theme-opacity-few;
+            color: $color-theme;
+          }
+          &posi {
+            background-color: rgba(var(--color-positive-rgb), .1);
+            color: $color-positive;
+          }
+          &nega {
+            background-color: rgba(var(--color-negative-rgb), .1);
+            color: $color-negative;
+          }
+          &warn {
+            background-color: rgba(var(--color-warning-rgb), .1);
+            color: $color-warning;
+          }
+        }
+      }
+      &Border {
+        background-color: $color-cloud;
+      }
+      &Prime {
+        opacity: .85;
+      }
+      &Sub, &Clear {
+        &.Color_ {
+          &theme {
+            background-color: $color-theme-opacity-low;
+            color: $color-theme;
+          }
+          &posi {
+            background-color: rgba(var(--color-positive-rgb), .125);
+            color: $color-positive;
+          }
+          &nega {
+            background-color: rgba(var(--color-negative-rgb), .125);
+            color: $color-negative;
+          }
+          &warn {
+            background-color: rgba(var(--color-warning-rgb), .125);
+            color: $color-warning;
+          }
+          &white {
+            background-color: rgba(white, .25);
+            color: white;
+          }
+          &cloud {
+            background-color: $color-cloud;
+          }
+          &layer {
+            background-color: hsla(var(--color-layer5-hsl), .5);
+          }
+        }
+      }
+      &FillToBorder {
+        background-color: $color-layer1;
+        &.Color_ {
+          &theme {
+            color: $color-theme;
+          }
+          &posi {
+            color: $color-positive;
+          }
+          &nega {
+            color: $color-negative;
+          }
+          &warn {
+            color: $color-warning;
+          }
+          &mono {
+            color: $color-monoPrime;
+          }
+          &white {
+            color: white;
+            background-color: transparent;
+          }
+        }
+      }
+      &BorderToFill {
+        color: white;
+        &.Color_ {
+          &theme {
+            background-color: $color-theme;
+          }
+          &posi {
+            background-color: $color-positive;
+          }
+          &nega {
+            background-color: $color-negative;
+          }
+          &warn {
+            background-color: $color-warning;
+          }
+          &mono {
+            background-color: $color-monoPrime;
+            color: $color-monoSecond;
+          }
+          &white {
+            background-color: white;
+            color: black;
+          }
+        }
+      }
+    }
+  }
+}