UITagRadio

spx-gui/src/components/asset/library/AssetLibraryModal.vue

@@ -255,7 +255,7 @@ async function handleAssetClick(asset: AssetData) {
  padding: var(--ui-gap-middle);
  gap: 12px;
 
- background: var(--ui-color-grey-200);
+ border-right: 1px solid var(--ui-color-grey-400);
 }
 .main {
  flex: 1 1 0;

spx-gui/src/components/ui/UITag.vue

@@ -25,15 +25,18 @@ defineProps<{
  border-radius: var(--ui-border-radius-2);
  cursor: pointer;
  white-space: nowrap;
+ transition: .3s;
 
  &.type-primary {
+ color: var(--ui-color-grey-100);
  background: var(--ui-color-primary-main);
  border-color: var(--ui-color-primary-main);
  }
 
  &.type-boring {
- background: var(--ui-color-grey-600);
- border-color: var(--ui-color-grey-600);
+ color: var(--ui-color-grey-900);
+ background: var(--ui-color-grey-300);
+ border-color: var(--ui-color-grey-300);
  }
 }
 </style>

spx-gui/src/components/ui/index.ts

@@ -42,6 +42,4 @@ export { default as UIEditorBackdropItem } from './block-items/UIEditorBackdropI
 export { default as UIBackdropItem } from './block-items/UIBackdropItem.vue'
 export { default as UIEditorWidgetItem } from './block-items/UIEditorWidgetItem.vue'
 export { default as UIPagination } from './UIPagination.vue'
-export { default as UIButtonRadioGroup } from './button-radio/UIButtonRadioGroup.vue'
-export { default as UIButtonRadio } from './button-radio/UIButtonRadio.vue'
 export * from './select'

spx-gui/src/components/ui/radio/UITagRadio.vue

@@ -0,0 +1,27 @@
+<template>
+ <UITag
+ :type="isActive ? 'primary' : 'boring'"
+ @click="handleClick"
+ >
+ <slot></slot>
+ </UITag>
+</template>
+
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import UITag from '../UITag.vue'
+import { radioGroupValueKey, updateRadioValueKey } from './UITagRadioGroup.vue'
+
+const props = defineProps<{
+ value: string
+}>()
+
+const radioGroupValue = inject(radioGroupValueKey)
+const updateRadioValue = inject(updateRadioValueKey)
+
+const isActive = computed(() => radioGroupValue?.value === props.value)
+
+const handleClick = () => {
+ updateRadioValue?.(props.value)
+}
+</script>

spx-gui/src/components/ui/radio/index.ts

@@ -1,2 +1,5 @@
 export { default as UIRadio } from './UIRadio.vue'
 export { default as UIRadioGroup } from './UIRadioGroup.vue'
+// TODO: consider merging `UITagRadio` with `UIRadio` (with prop `style="tag"`)
+export { default as UITagRadio } from './UITagRadio.vue'
+export { default as UITagRadioGroup } from './UITagRadioGroup.vue'