logo

pleroma-fe

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

checkbox.vue (2737B)

    

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