amotify 0.0.4 → 0.0.6

package/src/Functions/Button/_.tsx

@@ -1,305 +0,0 @@
-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

@@ -1,183 +0,0 @@
-@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;
-          }
-        }
-      }
-    }
-  }
-}