fix: the mobile terminal can wrap lines and expand slot attributes (#6165)

Co-authored-by: sqchen <chenshiqi@sshlx.com>

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -36,7 +36,7 @@ export interface VbenButtonGroupProps
   btnClass?: any;
   gap?: number;
   multiple?: boolean;
-  options?: { label: CustomRenderType; value: ValueType }[];
+  options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
   showIcon?: boolean;
   size?: 'large' | 'middle' | 'small';
 }

packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue

@@ -119,7 +119,7 @@ async function onBtnClick(value: ValueType) {
         <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
         <Circle v-else />
       </div>
-      <slot name="option" :label="btn.label" :value="btn.value">
+      <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
         <VbenRenderContent :content="btn.label" />
       </slot>
     </Button>
@@ -127,6 +127,9 @@ async function onBtnClick(value: ValueType) {
 </template>
 <style lang="scss" scoped>
 .vben-check-button-group {
+  display: flex;
+  flex-wrap: wrap;
+
   &:deep(.size-large) button {
     .icon-wrapper {
       margin-right: 0.3rem;
@@ -159,5 +162,16 @@ async function onBtnClick(value: ValueType) {
       }
     }
   }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-right-width: 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      margin-right: -1px;
+      border-left-width: 1px;
+    }
+  }
 }
 </style>

playground/src/views/examples/button-group/index.vue

@@ -19,7 +19,7 @@ const checkValue = ref(['a', 'b']);
 
 const options = [
   { label: '选项1', value: 'a' },
-  { label: '选项2', value: 'b' },
+  { label: '选项2', value: 'b', num: 999 },
   { label: '选项3', value: 'c' },
   { label: '选项4', value: 'd' },
   { label: '选项5', value: 'e' },
@@ -168,10 +168,11 @@ function onBtnClick(value: any) {
           :options="options"
           v-bind="compProps"
         >
-          <template #option="{ label, value }">
+          <template #option="{ label, value, data }">
             <div class="flex items-center">
               <span>{{ label }}</span>
               <span class="ml-2 text-gray-400">{{ value }}</span>
+              <span v-if="data.num" class="white ml-2">{{ data.num }}</span>
             </div>
           </template>
         </VbenCheckButtonGroup>