Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/ButtonGroup.vue3.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="aa-btngroup" :class="{ 'is-sm': size === 'small', 'is-lg': size === 'large' }">
+    <button v-for="(o, i) in options" :key="i"
+            class="aa-btngroup-btn"
+            :class="{ 'is-selected': isSelected(o.value), 'is-disabled': !!o.disabled }"
+            :disabled="!!o.disabled"
+            @click="toggle(o)">
+      {{ o.label }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  options: { type: Array, default: () => [] },
+  modelValue: { type: [String, Array], default: '' },
+  multiple: { type: Boolean, default: false },
+  size: { type: String, default: 'default' }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+function isSelected(v) {
+  return props.multiple ? props.modelValue.indexOf(v) >= 0 : props.modelValue === v;
+}
+function toggle(o) {
+  if (o.disabled) return;
+  let next;
+  if (props.multiple) {
+    const arr = (props.modelValue || []).slice();
+    const idx = arr.indexOf(o.value);
+    if (idx >= 0) arr.splice(idx, 1); else arr.push(o.value);
+    next = arr;
+  } else {
+    next = o.value;
+  }
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+</script>
+
+<style src="./ButtonGroup.css"></style>