logo

pleroma-fe

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

color_input.vue (3206B)

    

  1. <template>
  2.   <div
  3.     class="color-input style-control"
  4.     :class="{ disabled: !present || disabled }"
  5.   >
  6.     <label
  7.       :for="name"
  8.       class="label"
  9.     >
  10.       {{ label }}
  11.     </label>
  12.     <Checkbox
  13.       v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
  14.       :model-value="present"
  15.       :disabled="disabled"
  16.       class="opt"
  17.       @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
  18.     />
  19.     <div class="input color-input-field">
  20.       <input
  21.         :id="name + '-t'"
  22.         class="textColor unstyled"
  23.         type="text"
  24.         :value="modelValue || fallback"
  25.         :disabled="!present || disabled"
  26.         @input="$emit('update:modelValue', $event.target.value)"
  27.       >
  28.       <div
  29.         v-if="validColor"
  30.         class="validIndicator"
  31.         :style="{backgroundColor: modelValue || fallback}"
  32.       />
  33.       <div
  34.         v-else-if="transparentColor"
  35.         class="transparentIndicator"
  36.       />
  37.       <div
  38.         v-else-if="computedColor"
  39.         class="computedIndicator"
  40.         :style="{backgroundColor: fallback}"
  41.       />
  42.       <div
  43.         v-else
  44.         class="invalidIndicator"
  45.       />
  46.       <label class="nativeColor">
  47.         <FAIcon icon="eye-dropper"/>
  48.         <input
  49.           :id="name"
  50.           class="unstyled"
  51.           type="color"
  52.           :value="modelValue || fallback"
  53.           :disabled="!present || disabled"
  54.           @input="$emit('update:modelValue', $event.target.value)"
  55.         >
  56.       </label>
  57.     </div>
  58.   </div>
  59. </template>
  60. <script>
  61. import Checkbox from '../checkbox/checkbox.vue'
  62. import { hex2rgb } from '../../services/color_convert/color_convert.js'
  64. import { library } from '@fortawesome/fontawesome-svg-core'
  65. import {
  66.   faEyeDropper
  67. } from '@fortawesome/free-solid-svg-icons'
  69. library.add(
  70.   faEyeDropper
  71. )
  73. export default {
  74.   components: {
  75.     Checkbox
  76.   },
  77.   props: {
  78.     // Name of color, used for identifying
  79.     name: {
  80.       required: true,
  81.       type: String
  82.     },
  83.     // Readable label
  84.     label: {
  85.       required: true,
  86.       type: String
  87.     },
  88.     // Color value, should be required but vue cannot tell the difference
  89.     // between "property missing" and "property set to undefined"
  90.     modelValue: {
  91.       required: false,
  92.       type: String,
  93.       default: undefined
  94.     },
  95.     // Color fallback to use when value is not defeind
  96.     fallback: {
  97.       required: false,
  98.       type: String,
  99.       default: undefined
  100.     },
  101.     // Disable the control
  102.     disabled: {
  103.       required: false,
  104.       type: Boolean,
  105.       default: false
  106.     },
  107.     // Show "optional" tickbox, for when value might become mandatory
  108.     showOptionalTickbox: {
  109.       required: false,
  110.       type: Boolean,
  111.       default: true
  112.     }
  113.   },
  114.   emits: ['update:modelValue'],
  115.   computed: {
  116.     present () {
  117.       return typeof this.modelValue !== 'undefined'
  118.     },
  119.     validColor () {
  120.       return hex2rgb(this.modelValue || this.fallback)
  121.     },
  122.     transparentColor () {
  123.       return this.modelValue === 'transparent'
  124.     },
  125.     computedColor () {
  126.       return this.modelValue && this.modelValue.startsWith('--')
  127.     }
  128.   }
  129. }
  130. </script>
  131. <style lang="scss" src="./color_input.scss"></style>