logo

pleroma-fe

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

size_setting.vue (1052B)

    

  1. <template>
  2.   <span
  3.     v-if="matchesExpertLevel"
  4.     class="SizeSetting"
  5.   >
  6.     <label
  7.       :for="path"
  8.       class="size-label"
  9.     >
  10.       <slot />
  11.     </label>
  12.     <input
  13.       :id="path"
  14.       class="input number-input"
  15.       type="number"
  16.       step="1"
  17.       :disabled="disabled"
  18.       :min="min || 0"
  19.       :value="stateValue"
  20.       @change="updateValue"
  21.     >
  22.     <Select
  23.       :id="path"
  24.       :model-value="stateUnit"
  25.       :disabled="disabled"
  26.       class="css-unit-input"
  27.       @change="updateUnit"
  28.     >
  29.       <option
  30.         v-for="option in units"
  31.         :key="option"
  32.         :value="option"
  33.       >
  34.         {{ option }}
  35.       </option>
  36.     </Select>
  37.     {{ ' ' }}
  38.     <ModifiedIndicator
  39.       :changed="isChanged"
  40.       :onclick="reset"
  41.     />
  42.   </span>
  43. </template>
  45. <script src="./size_setting.js"></script>
  47. <style lang="scss">
  48. .SizeSetting {
  49.   .number-input {
  50.     max-width: 6.5em;
  51.   }
  53.   .css-unit-input,
  54.   .css-unit-input select {
  55.     margin-left: 0.5em;
  56.     width: 4em;
  57.     max-width: 4em;
  58.     min-width: 4em;
  59.   }
  60. }
  62. </style>