vue3-uikit

1
<template>
2
  <div>
3
    <h3>Base</h3>
4
    <div class="flex-block">
5
      <div v-for="variant in variantClasses" :key="variant" class="btn-wrapper">
6
        <button
7
          :class="['btn', variant]"
8
          :disabled="isDisabled"
9
          @click="handleClick"
10
        >
11
          <slot>{{ variant.replace("btn-", "").replace("-", " ") }}</slot>
12
        </button>
13
      </div>
14
    </div>
15

16
    <h3>Rounded</h3>
17
    <div class="flex-block">
18
      <div
19
        v-for="variant in variantClasses"
20
        :key="`rounded-${variant}`"
21
        class="btn-wrapper"
22
      >
23
        <button
24
          :class="['btn', variant, 'btn-rounded']"
25
          :disabled="isDisabled"
26
          @click="handleClick"
27
        >
28
          <slot
29
            >{{ variant.replace("btn-", "").replace("-", " ") }} Rounded</slot
30
          >
31
        </button>
32
      </div>
33
    </div>
34

35
    <h3>Outlined</h3>
36
    <div class="flex-block">
37
      <div
38
        v-for="variant in variantClasses"
39
        :key="`outlined-${variant}`"
40
        class="btn-wrapper"
41
      >
42
        <button
43
          :class="['btn', variant, 'btn-outlined']"
44
          :disabled="isDisabled"
45
          @click="handleClick"
46
        >
47
          <slot
48
            >{{ variant.replace("btn-", "").replace("-", " ") }} Outlined</slot
49
          >
50
        </button>
51
      </div>
52
    </div>
53

54
    <h3>Rounded & Outlined</h3>
55
    <div class="flex-block">
56
      <div
57
        v-for="variant in variantClasses"
58
        :key="`rounded-outlined-${variant}`"
59
        class="btn-wrapper"
60
      >
61
        <button
62
          :class="['btn', variant, 'btn-rounded', 'btn-outlined']"
63
          :disabled="isDisabled"
64
          @click="handleClick"
65
        >
66
          <slot
67
            >{{ variant.replace("btn-", "").replace("-", " ") }} Rounded
68
            Outlined</slot
69
          >
70
        </button>
71
      </div>
72
    </div>
73

74
    <h3>Disabled</h3>
75
    <div class="flex-block">
76
      <div
77
        v-for="variant in variantClasses"
78
        :key="`disabled-${variant}`"
79
        class="btn-wrapper"
80
      >
81
        <button
82
          :class="['btn', variant, 'btn-disabled']"
83
          :disabled="true"
84
          @click="handleClick"
85
        >
86
          <slot
87
            >{{ variant.replace("btn-", "").replace("-", " ") }} Disabled</slot
88
          >
89
        </button>
90
      </div>
91
    </div>
92

93
    <h3>Sizes</h3>
94
    <div class="flex-block">
95
      <div v-for="size in sizeClasses" :key="size" class="btn-wrapper">
96
        <button :class="['btn', 'btn-primary', size]" @click="handleClick">
97
          <slot>{{ size.replace("btn-", "") }}</slot>
98
        </button>
99
      </div>
100
    </div>
101
  </div>
102
</template>
103

104
<script>
105
import { computed } from "vue";
106

107
export default {
108
  name: "Button",
109
  props: {
110
    type: {
111
      type: String,
112
      default: "button",
113
    },
114
    variantClasses: {
115
      type: Array,
116
      default: () => [
117
        "btn-primary",
118
        "btn-secondary",
119
        "btn-success",
120
        "btn-info",
121
        "btn-warning",
122
        "btn-danger",
123
      ],
124
    },
125
    sizeClasses: {
126
      type: Array,
127
      default: () => ["btn-normal", "btn-medium", "btn-large"],
128
    },
129
    isDisabled: {
130
      type: Boolean,
131
      default: false,
132
    },
133
  },
134
  setup(props) {
135
    const handleClick = (event) => {
136
      if (props.isDisabled) {
137
        event.preventDefault();
138
      }
139
    };
140

141
    return { handleClick };
142
  },
143
};
144
</script>
145

146
<style scoped>
147
.btn {
148
  padding: 10px 20px;
149
  border: none;
150
  cursor: pointer;
151
  font-size: 14px;
152
  margin: 5px;
153
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
154
}
155

156
.btn:hover {
157
  filter: brightness(1.1);
158
}
159

160
.btn-disabled {
161
  cursor: not-allowed;
162
  opacity: 0.6;
163
}
164

165
.btn-rounded {
166
  border-radius: 50px;
167
}
168

169
.btn-outlined {
170
  background-color: transparent;
171
  border: 2px solid currentColor;
172
}
173

174
.btn-outlined:hover {
175
  background-color: currentColor;
176
  color: white;
177
}
178

179
.btn-primary {
180
  background-color: #6200ea;
181
  color: white;
182
}
183

184
.btn-primary:hover {
185
  background-color: #5a00d4;
186
}
187

188
.btn-primary.btn-outlined:hover {
189
  background-color: #6200ea;
190
  color: white;
191
}
192

193
.btn-secondary {
194
  background-color: #03dac6;
195
  color: white;
196
}
197

198
.btn-secondary:hover {
199
  background-color: #02c3b0;
200
}
201

202
.btn-secondary.btn-outlined:hover {
203
  background-color: #03dac6;
204
  color: white;
205
}
206

207
.btn-success {
208
  background-color: #4caf50;
209
  color: white;
210
}
211

212
.btn-success:hover {
213
  background-color: #43a047;
214
}
215

216
.btn-success.btn-outlined:hover {
217
  background-color: #4caf50;
218
  color: white;
219
}
220

221
.btn-info {
222
  background-color: #2196f3;
223
  color: white;
224
}
225

226
.btn-info:hover {
227
  background-color: #1e88e5;
228
}
229

230
.btn-info.btn-outlined:hover {
231
  background-color: #2196f3;
232
  color: white;
233
}
234

235
.btn-warning {
236
  background-color: #ff9800;
237
  color: white;
238
}
239

240
.btn-warning:hover {
241
  background-color: #fb8c00;
242
}
243

244
.btn-warning.btn-outlined:hover {
245
  background-color: #ff9800;
246
  color: white;
247
}
248

249
.btn-danger {
250
  background-color: #f44336;
251
  color: white;
252
}
253

254
.btn-danger:hover {
255
  background-color: #e53935;
256
}
257

258
.btn-danger.btn-outlined:hover {
259
  background-color: #f44336;
260
  color: white;
261
}
262

263
.btn-normal {
264
  font-size: 14px;
265
  padding: 10px 20px;
266
}
267

268
.btn-medium {
269
  font-size: 16px;
270
  padding: 12px 24px;
271
}
272

273
.btn-large {
274
  font-size: 18px;
275
  padding: 14px 28px;
276
}
277

278
</style>
279