logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

checkbox.vue (2413B)

    

  1. <template>
  2.   <label
  3.     class="checkbox"
  4.     :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
  5.   >
  6.     <input
  7.       type="checkbox"
  8.       class="visible-for-screenreader-only"
  9.       :disabled="disabled"
  10.       :checked="modelValue"
  11.       :indeterminate="indeterminate"
  12.       @change="$emit('update:modelValue', $event.target.checked)"
  13.     >
  14.     <i
  15.       class="input -checkbox checkbox-indicator"
  16.       :aria-hidden="true"
  17.       @transitionend.capture="onTransitionEnd"
  18.     />
  19.     <span
  20.       v-if="!!$slots.default"
  21.       class="label"
  22.     >
  23.       <slot />
  24.     </span>
  25.   </label>
  26. </template>
  28. <script>
  29. export default {
  30.   props: [
  31.     'modelValue',
  32.     'indeterminate',
  33.     'disabled'
  34.   ],
  35.   emits: ['update:modelValue'],
  36.   data: (vm) => ({
  37.     indeterminateTransitionFix: vm.indeterminate
  38.   }),
  39.   watch: {
  40.     indeterminate (e) {
  41.       if (e) {
  42.         this.indeterminateTransitionFix = true
  43.       }
  44.     }
  45.   },
  46.   methods: {
  47.     onTransitionEnd (e) {
  48.       if (!this.indeterminate) {
  49.         this.indeterminateTransitionFix = false
  50.       }
  51.     }
  52.   }
  53. }
  54. </script>
  56. <style lang="scss">
  57. @import "../../mixins";
  59. .checkbox {
  60.   position: relative;
  61.   display: inline-block;
  62.   min-height: 1.2em;
  64.   & > &-indicator {
  65.     /* Reset .input stuff */
  66.     padding: 0;
  67.     margin: 0;
  68.     position: relative;
  69.     line-height: inherit;
  70.     display: inline;
  71.     padding-left: 1.2em;
  72.     box-shadow: none;
  73.   }
  75.   &-indicator::before {
  76.     position: absolute;
  77.     right: 0;
  78.     top: 0;
  79.     display: block;
  80.     content: "✓";
  81.     transition: color 200ms;
  82.     width: 1.1em;
  83.     height: 1.1em;
  84.     border-radius: var(--roundness);
  85.     box-shadow: var(--shadow);
  86.     background-color: var(--background);
  87.     vertical-align: top;
  88.     text-align: center;
  89.     line-height: 1.1em;
  90.     font-size: 1.1em;
  91.     color: transparent;
  92.     overflow: hidden;
  93.     box-sizing: border-box;
  94.   }
  96.   &.disabled {
  97.     .checkbox-indicator::before,
  98.     .label {
  99.       opacity: 0.5;
  100.     }
  102.     .label {
  103.       color: var(--text);
  104.     }
  105.   }
  107.   input[type="checkbox"] {
  108.     &:checked + .checkbox-indicator::before {
  109.       color: var(--text);
  110.     }
  112.     &:indeterminate + .checkbox-indicator::before {
  113.       content: "–";
  114.       color: var(--text);
  115.     }
  116.   }
  118.   &.indeterminate-fix {
  119.     input[type="checkbox"] + .checkbox-indicator::before {
  120.       content: "–";
  121.     }
  122.   }
  124.   & > span {
  125.     margin-left: 0.5em;
  126.   }
  127. }
  128. </style>