AmCheckbox.vue
246 lines
| 1 | <template> |
| 2 | |
| 3 | <div class="am-checkbox-wrapper" :style="cssVars"> |
| 4 | <el-checkbox |
| 5 | ref="amCheckbox" |
| 6 | v-model="model" |
| 7 | :checked="checked" |
| 8 | :class="[`am-checkbox__${size}`]" |
| 9 | :false-label="falseLabel" |
| 10 | :indeterminate="indeterminate" |
| 11 | :disabled="disabled" |
| 12 | :label="label" |
| 13 | :name="name" |
| 14 | :true-label="trueLabel" |
| 15 | class="am-checkbox" |
| 16 | @change="(e) => $emit('change', e)" |
| 17 | > |
| 18 | <template v-if="label && !$slots.default">{{ label }}</template> |
| 19 | <slot></slot> |
| 20 | </el-checkbox> |
| 21 | </div> |
| 22 | |
| 23 | </template> |
| 24 | |
| 25 | <script setup> |
| 26 | import { computed, inject, ref, toRefs } from 'vue'; |
| 27 | import { useColorTransparency } from "../../../assets/js/common/colorManipulation"; |
| 28 | |
| 29 | /** |
| 30 | * Component Props |
| 31 | */ |
| 32 | const props = defineProps({ |
| 33 | modelValue: { |
| 34 | type: [String, Number, Boolean] |
| 35 | }, |
| 36 | size: { |
| 37 | type: String, |
| 38 | default: 'default', |
| 39 | validator(value) { |
| 40 | return ['default', 'medium', 'small'].includes(value) |
| 41 | } |
| 42 | }, |
| 43 | disabled: { |
| 44 | type: Boolean, |
| 45 | default: false |
| 46 | }, |
| 47 | name: { |
| 48 | type: String, |
| 49 | default: '' |
| 50 | }, |
| 51 | label: { |
| 52 | type: [String, Number, Boolean, Object] |
| 53 | }, |
| 54 | trueLabel: { |
| 55 | type: [String, Number], |
| 56 | }, |
| 57 | falseLabel: { |
| 58 | type: [String, Number], |
| 59 | }, |
| 60 | border: { |
| 61 | type: Boolean, |
| 62 | default: false |
| 63 | }, |
| 64 | checked: { |
| 65 | type: Boolean, |
| 66 | default: false |
| 67 | }, |
| 68 | indeterminate: { |
| 69 | type: Boolean, |
| 70 | default: false |
| 71 | }, |
| 72 | }) |
| 73 | |
| 74 | /** |
| 75 | * Component Emits |
| 76 | * */ |
| 77 | const emits = defineEmits(['change', 'update:modelValue']) |
| 78 | |
| 79 | /** |
| 80 | * Component model |
| 81 | */ |
| 82 | let { modelValue } = toRefs(props) |
| 83 | let model = computed({ |
| 84 | get: () => modelValue.value, |
| 85 | set: (val) => { |
| 86 | emits('update:modelValue', val) |
| 87 | } |
| 88 | }) |
| 89 | |
| 90 | /** |
| 91 | * Component reference |
| 92 | */ |
| 93 | const amCheckbox = ref() |
| 94 | |
| 95 | // * Color Vars |
| 96 | let amColors = inject('amColors',{}) |
| 97 | |
| 98 | // * Css Variables |
| 99 | let cssVars = computed(() => { |
| 100 | return { |
| 101 | '--am-c-checkbox-text-op60': useColorTransparency(amColors.value.colorInpText, 0.6), |
| 102 | '--am-c-checkbox-btn-op80': useColorTransparency(amColors.value.colorBtnPrim, 0.8), |
| 103 | '--am-c-checkbox-btn-op60': useColorTransparency(amColors.value.colorBtnPrim, 0.6), |
| 104 | '--am-c-checkbox-btn-dsb-op60': useColorTransparency(amColors.value.colorInpBgr, 0.6), |
| 105 | } |
| 106 | }) |
| 107 | |
| 108 | </script> |
| 109 | |
| 110 | <style lang="scss"> |
| 111 | @mixin am-checkbox-block { |
| 112 | .am-checkbox { |
| 113 | // -c- color |
| 114 | // -rad- border radius |
| 115 | // -bgr background |
| 116 | --am-c-checkbox-bgr: var(--am-c-inp-bgr); |
| 117 | --am-c-checkbox-bgr-checked: var(--am-c-btn-prim); |
| 118 | --am-c-checkbox-border: var(--am-c-inp-border); |
| 119 | --am-c-checkbox-text: var(--am-c-main-text); |
| 120 | --am-c-checkbox-inp-text: var(--am-c-main-bgr); |
| 121 | --am-rad-checkbox: 4px; |
| 122 | --am-w-checkbox-inp: 16px; |
| 123 | --am-h-checkbox-inp: 16px; |
| 124 | |
| 125 | display: flex; |
| 126 | align-items: center; |
| 127 | white-space: pre-line; |
| 128 | min-height: 32px; |
| 129 | height: auto; |
| 130 | |
| 131 | &__default { |
| 132 | --am-w-checkbox-inp: 16px; |
| 133 | --am-h-checkbox-inp: 16px; |
| 134 | } |
| 135 | |
| 136 | &__medium { |
| 137 | --am-w-checkbox-inp: 14px; |
| 138 | --am-h-checkbox-inp: 14px; |
| 139 | } |
| 140 | |
| 141 | &__small { |
| 142 | --am-w-checkbox-inp: 12px; |
| 143 | --am-h-checkbox-inp: 12px; |
| 144 | } |
| 145 | |
| 146 | &-wrapper { |
| 147 | width: 100%; |
| 148 | |
| 149 | .el-checkbox { |
| 150 | |
| 151 | &__input { |
| 152 | width: var(--am-w-checkbox-inp); |
| 153 | height: var(--am-h-checkbox-inp); |
| 154 | border-radius: var(--am-rad-checkbox); |
| 155 | align-self: flex-start; |
| 156 | padding: 2px 0; |
| 157 | |
| 158 | &.is-indeterminate.is-checked { |
| 159 | .el-checkbox__inner { |
| 160 | --am-c-checkbox-border: var(--am-c-btn-prim); |
| 161 | --am-c-checkbox-bgr: var(--am-c-inp-bgr); |
| 162 | |
| 163 | &:before { |
| 164 | background-color: var(--am-c-btn-prim); |
| 165 | transform: scale(1) translate(-50%, -50%); |
| 166 | top: 50%; |
| 167 | left: 50%; |
| 168 | width: 70%; |
| 169 | height: 2px; |
| 170 | } |
| 171 | } |
| 172 | } |
| 173 | } |
| 174 | |
| 175 | &__label { |
| 176 | margin-left: 8px; |
| 177 | font-weight: 500; |
| 178 | color: var(--am-c-checkbox-text); |
| 179 | align-self: flex-start; |
| 180 | word-break: break-word; |
| 181 | white-space: pre-line; |
| 182 | } |
| 183 | |
| 184 | &__inner { |
| 185 | flex: 0 0 auto; |
| 186 | width: 16px; |
| 187 | height: 16px; |
| 188 | border: 1px solid var(--am-c-checkbox-border); |
| 189 | background: var(--am-c-checkbox-bgr); |
| 190 | border-radius: var(--am-rad-checkbox); |
| 191 | |
| 192 | &:after { |
| 193 | left: 5px; |
| 194 | border-color: var(--am-c-checkbox-inp-text); |
| 195 | border-width: 2px; |
| 196 | } |
| 197 | |
| 198 | &:hover { |
| 199 | --am-c-checkbox-bgr: var(--am-c-checkbox-btn-op80); |
| 200 | } |
| 201 | |
| 202 | &:focus { |
| 203 | --am-c-checkbox-border: var(--am-c-checkbox-btn-op80); |
| 204 | } |
| 205 | } |
| 206 | |
| 207 | &.is-checked { |
| 208 | --am-c-checkbox-bgr: var(--am-c-checkbox-bgr-checked); |
| 209 | --am-c-checkbox-text-op60: var(--am-c-inp-text); |
| 210 | |
| 211 | &.is-disabled { |
| 212 | --am-c-checkbox-bgr: var(--am-c-checkbox-btn-op60); |
| 213 | |
| 214 | .el-checkbox__inner { |
| 215 | &:hover { |
| 216 | --am-c-checkbox-bgr: var(--am-c-checkbox-btn-op60); |
| 217 | } |
| 218 | } |
| 219 | } |
| 220 | } |
| 221 | |
| 222 | &.is-disabled { |
| 223 | --am-c-checkbox-bgr: var(--am-c-checkbox-btn-dsb-op60); |
| 224 | |
| 225 | .el-checkbox__inner { |
| 226 | &:hover { |
| 227 | --am-c-checkbox-bgr: var(--am-c-checkbox-btn-dsb-op60); |
| 228 | } |
| 229 | } |
| 230 | } |
| 231 | } |
| 232 | } |
| 233 | } |
| 234 | } |
| 235 | |
| 236 | // public |
| 237 | .amelia-v2-booking #amelia-container { |
| 238 | @include am-checkbox-block; |
| 239 | } |
| 240 | |
| 241 | // admin |
| 242 | #amelia-app-backend-new { |
| 243 | @include am-checkbox-block; |
| 244 | } |
| 245 | </style> |
| 246 |