malina-ui/components/Form/Button.xht at master · AlexxNB/malina-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<script>
    import Icon from './../Other/Icon.xht';
    import {spinner} from './../../icons';
    import {getClasses} from './../../lib/button';
    import {choose,isSlot} from './../../lib/utils';

    // Button color
    export let primary = false;
    export let secondary = false;
    export let error = false;
    export let warning = false;
    export let success = false;
    export let hard = false;


    //Button view
    export let outline = false;
    export let clear = false;

    //Button states
    export let loading = false;

    // Button size
    export let small = false;

    //Icons
    export let icon = false;
    export let iconRight = false;

    const state = $context.fieldState;

    let iconOnly = !isSlot($option);

    // Util
    $: btnStyle = choose(
        ['primary','secondary','error','warning','success','hard'],
        [ primary,  secondary,  error,  warning,  success, hard],
      'neutral');

    $: typeClasses = getClasses(outline,clear,btnStyle);
</script>

{#fragment:content}
  {#if icon || iconRight}
    {#if icon}<span class="{iconOnly ? "ico" : "ico-l"} $iconLeft" ^iconLeft><Icon src={icon}/></span>{/if}
    {#if !iconOnly}
      <span><slot/></span>
      {#if iconRight}<span class="ico-r $iconRight" ^iconRight><Icon src={iconRight}/></span>{/if}
    {/if}
  {:else}
    <slot/>
  {/if}
{/fragment}

<button
  class={`radius ${typeClasses} $main`}
  class:small
  class:loading
  class:iconOnly
  class:infield={state}
  {...$attributes}
  @@
  ^
>

{#if loading}
  <span class="txt-transparent"><fragment:content><slot/></fragment></span>
  <span class="spinner" ^iconLoading><Icon src={loading == true ? spinner : loading} spin="0.75" size="1.6em"/></span>
{:else}
  <fragment:content><slot/></fragment>
{/if}
</button>

<style>
  button{
    display: inline-flex;
    white-space: nowrap;
    padding: 0 2rem;
    height: 4rem;
    cursor:pointer;
    transition: opacity .25s;
    font-weight: 600;
    line-height: 1;
    align-items: center;
    justify-content: center;
  }

  button:hover{
    opacity: .7;
  }

  button:active{
    opacity: .85;
  }
  .small{
    padding: 0 1rem;
    height: 3rem;
    font-size: .8em;
  }

  button:disabled{
    opacity: .4;
    cursor: not-allowed;
  }

  .loading {
    pointer-events: none;
    position: relative;
  }

  .loading .spinner {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 1;
    margin-left: -.8em;
    margin-top: -.8em;
  }

  .ico-r{
    margin-left: .5em;
  }
  .ico-l{
    margin-right: .5em;
  }
  .iconOnly{
    padding: 0;
    width: 4rem;
  }
  .small.iconOnly{
    padding: 0;
    width: 3rem;
  }
</style>