The frontend for the project formerly known as signet, now known as beignet.
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

64 rindas
1.5 KiB

  1. <template>
  2. <div class="box is-flex is-flex-direction-row is-justify-content-space-between">
  3. <div class="my-auto">
  4. <input type="checkbox" v-model="allow" :aria-label="props.inputs.checkbox.label">
  5. {{ props.inputs.checkbox.label }}
  6. </div>
  7. <div>
  8. <button :class="`button ${props.inputs.button.style}`"
  9. :disabled="disable"
  10. @click="modification">
  11. {{ props.inputs.button.label }}
  12. </button>
  13. </div>
  14. </div>
  15. </template>
  16. <script setup lang="ts">
  17. import {
  18. computed,
  19. PropType,
  20. ref,
  21. watch,
  22. } from 'vue';
  23. type Modification = () => Promise<void>;
  24. export interface ModificationInputs {
  25. checkbox: {
  26. label: string,
  27. },
  28. button: {
  29. label: string,
  30. style: string,
  31. },
  32. }
  33. // eslint-disable-next-line no-undef
  34. const emits = defineEmits(['confirmed']);
  35. // eslint-disable-next-line no-undef
  36. const props = defineProps({
  37. inputs: Object as PropType<ModificationInputs>,
  38. condition: Object as PropType<boolean | undefined>,
  39. modification: Object as PropType<Modification>,
  40. });
  41. const allow = ref(false);
  42. const disable = computed(() => !allow.value || props.condition);
  43. const modTimeout = ref(undefined as number | undefined);
  44. watch(allow, () => {
  45. emits('confirmed', allow.value);
  46. if (modTimeout.value) window.clearTimeout(modTimeout.value);
  47. modTimeout.value = window.setTimeout(() => {
  48. allow.value = false;
  49. modTimeout.value = undefined;
  50. }, 10000);
  51. });
  52. </script>
  53. <style scoped lang="stylus">
  54. </style>