amotify 0.0.65 → 0.0.67

package/src/functions/Button/_.tsx

@@ -1,331 +0,0 @@
-import React from 'react'
-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 = {
-      fontSize: 'inherit'
-    }
-    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','3/4' ],
-        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.isSemiBoldFont = 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 = {
-      display: 'inlineBlock',
-      fontWeight: 'inherit',
-      fontColor: 'inherit',
-      border: 'unset'
-    }
-
-    if ( tone == 'Plain' ) return styles
-    if ( tone == 'Link' ) {
-      styles.fontColor = 'theme'
-      styles.textAlign = 'left'
-      styles.backgroundColor = 'trans'
-    } else if ( tone == 'Normal' ) {
-      styles = {
-        ...styles,
-        backgroundColor: 'trans'
-      }
-    } else if ( tone == 'Border' ) {
-      styles = {
-        ...styles,
-        backgroundColor: '1.layer.base',
-        border: '2.normal',
-        borderStyle: 'solid',
-        boxShadow: '0.thin',
-      }
-    } else if ( tone == 'Prime' ) {
-      styles = {
-        ...styles,
-        isSemiBoldFont: true,
-        fontColor: 'white',
-        backgroundColor: color as any,
-        boxShadow: '0.normal',
-        ssEffectsOnActive: [
-          'shrink',
-          'push',
-          'ripple.white'
-        ]
-      }
-      if ( color == 'white' ) {
-        styles = {
-          ...styles,
-          fontColor: 'theme',
-          ssEffectsOnActive: [
-            'shrink',
-            'push',
-            'ripple.cloud'
-          ]
-        }
-      }
-    } else if ( tone == 'Sub' ) {
-      styles = {
-        ...styles,
-        fontColor: color as any,
-        ssEffectsOnActive: [
-          'shrink',
-          'ripple.cloud'
-        ]
-      }
-    } else if ( tone == 'Clear' ) {
-      styles = {
-        ...styles,
-        fontColor: color as any,
-        backgroundColor: 'trans',
-        ssEffectsOnActive: [
-          'shrink',
-          'ripple.cloud'
-        ]
-      }
-    } else if ( tone == 'FillToBorder' ) {
-      styles = {
-        ...styles,
-        boxShadow: '0.normal',
-        border: '2.normal',
-        borderWidth: 2,
-        borderColor: color as any,
-        fontColor: color as any,
-        backgroundColor: color as any,
-      }
-    } else if ( tone == 'BorderToFill' ) {
-      styles = {
-        ...styles,
-        fontColor: color as any,
-        boxShadow: '0.normal',
-        border: '2.normal',
-        borderWidth: 2,
-        borderColor: color as any,
-        backgroundColor: color as any
-      }
-    }
-    if ( color == 'cloud' ) {
-      styles.fontColor = '3.blur'
-    }
-
-    if ( tone != 'Link' ) {
-      styles = {
-        position: 'relative',
-        ssEffectsOnActive: [ 'shrink','push' ],
-        ...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[ 'isNeutral_' + !isActive ],
-      style[ 'isLocked_' + isLocked ],
-      style[ 'Tone_' + tone ],
-      style[ 'Color_' + color ],
-      style[ 'Tone_' + tone + '_Color_' + color ],
-    ].join( ' ' )
-
-    if ( isActive ) {
-      Params = {
-        className: [
-          Params.className,
-          isActiveClassName
-        ].join( ' ' ),
-        ...Params,
-        ...isActiveStyles
-      }
-    }
-
-    Params = StyleConverter.ToClassName( Params )
-  }
-
-  if ( seed == 'Button' ) {
-    let {
-      isLocked,isActive,isActiveClassName,isActiveStyles,
-      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 {
-      isLocked,isActive,isActiveClassName,isActiveStyles,
-      componentID,
-      ...Props
-    } = Params as amotify.fn.Buttons.LabelInput
-
-    return <label { ...Props } />
-  } else if ( seed == 'Anchor' ) {
-    let {
-      isLocked,isActive,isActiveClassName,isActiveStyles,
-      componentID,
-      href = '',
-      newTab,
-      sync,
-      shiftQueryParams,
-      ...Props
-    } = Params as amotify.fn.Buttons.AnchorInput
-
-    return <button
-      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 )
-        }
-      } }
-      { ...Props as any }
-    />
-  }
-  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,157 +0,0 @@
-@use '@props' as *;
-@use'@styleSet' as *;
-.Wrap {
-  text-decoration: none;
-  vertical-align: bottom;
-  position: relative;
-  @include DisableduserSelect();
-  > * {
-    position: relative;
-    z-index: 2;
-    pointer-events: none;
-  }
-  .Child {}
-  &[ disabled] {
-    pointer-events: none;
-  }
-  &.isLocked_true {
-    background-color: $color-layer4 !important;
-    box-shadow: none !important;
-  }
-}
-.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);
-      }
-    }
-  }
-}
-.isNeutral_true {
-  &.Tone_ {
-    &Clear {
-      &:not(:hover):not(:focus) {
-        background-color: transparent;
-      }
-    }
-    &BorderToFill {
-      &:not(:hover):not(:focus) {
-        background-color: transparent !important;
-      }
-    }
-    &FillToBorder {
-      &:not(:hover):not(:focus) {
-        color: white !important;
-      }
-      &_Color_ {
-        &white, &cloud {
-          &:not(:hover):not(:focus) {
-            color: #000 !important;
-          }
-        }
-      }
-    }
-  }
-  &: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: transparent;
-      }
-      &BorderToFill {
-        color: white;
-        &_Color_ {
-          &white, &cloud {
-            background-color: white;
-            color: black;
-          }
-        }
-      }
-    }
-  }
-}