You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

FormInlineField.vue 880B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="c-inline-field">
  3. <div class="inline-field-left">
  4. <p class="inline-field-label">
  5. {{ label }}
  6. </p>
  7. <p v-if="hint"
  8. class="inline-field-hint">
  9. {{ hint }}
  10. </p>
  11. </div>
  12. <div class="inline-field-right">
  13. <slot />
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. label: {
  21. type: String,
  22. required: true,
  23. },
  24. hint: {
  25. type: String,
  26. default: undefined,
  27. },
  28. },
  29. }
  30. </script>
  31. <style lang="scss">
  32. .c-inline-field {
  33. @apply flex;
  34. &:not(:last-child) {
  35. @apply mb-4;
  36. }
  37. .inline-field-left {
  38. @apply flex-1 pr-6;
  39. }
  40. .inline-field-right {
  41. @apply flex items-center justify-end;
  42. width: 250px;
  43. }
  44. .inline-field-label {
  45. @apply font-semibold;
  46. }
  47. .inline-field-hint {
  48. @apply text-gray-600 text-sm;
  49. }
  50. }
  51. </style>