vue2-client 1.16.81 → 1.16.82

package/src/base-client/components/his/XCheckbox/XCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="x-checkbox-container">
+  <div class="x-checkbox-container" :class="wrapperClassObject()">
     <a-checkbox-group v-model="innerValue" @change="onChange" class="x-checkbox-group">
       <div v-for="item in data" :key="item.value" class="x-checkbox-item-container">
         <a-checkbox :value="item.value" class="x-checkbox-item">
@@ -70,6 +70,19 @@ export default {
         }
       })
     },
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+      const booleanStyleKeys = [
+        'compact'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`x-checkbox-${key}`] = true
+      })
+      return classes
+    },
     onChange (checkedValues) {
       this.innerValue = checkedValues
       this.$emit('change', checkedValues)
@@ -78,7 +91,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .x-checkbox-container {
   display: flex;
   flex-direction: column;
@@ -102,4 +115,20 @@ export default {
 .x-checkbox-item {
   margin-bottom: 8px;
 }
+.x-checkbox-compact {
+  &.x-checkbox-container,
+  .x-checkbox-container {
+    :deep(.x-checkbox-item-container){
+      padding: 0px !important;
+      flex: auto !important;
+    }
+    :deep(.x-checkbox-item){
+      margin: 0px;
+    }
+    :deep(.x-checkbox-item) > span:last-child {
+      padding-right: 2px;
+      padding-left: 2px;
+    }
+  }
+}
 </style>