snapshot of https://github.com/cortezaproject/corteza.git (2024.9.x, 2026-09-18; blobs > 131072B omitted)

lib/vue/src/components/input/CInputConfirm.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="d-inline-flex gap-1">
+    <b-button
+      v-if="!inConfirmation"
+      v-b-tooltip.noninteractive.hover="{ title: tooltip, boundary: 'body' }"
+      :data-test-id="dataTestId"
+      :variant="variant"
+      :size="size"
+      :disabled="disabled || processing"
+      :class="`${buttonClass} ${borderless ? 'border-0' : ''} flex-fill`"
+      :style="buttonStyle"
+      @click.stop.prevent="onPrompt"
+    >
+      <b-spinner
+        v-if="processing"
+        data-test-id="spinner"
+        class="align-middle"
+        small
+      />
+
+      <template v-else>
+        <font-awesome-icon
+          v-if="showIcon || !text"
+          :icon="icon"
+          :class="iconClass"
+        />
+
+        <span
+          v-if="text"
+          :class="textClass"
+        >
+          {{ text }}
+        </span>
+      </template>
+    </b-button>
+
+    <template v-else>
+      <b-button
+        :data-test-id="`${dataTestId}-confirm`"
+        :variant="variantOk"
+        :size="sizeConfirm"
+        :disabled="okDisabled"
+        :class="[ borderless && 'border-0', 'flex-fill' ]"
+        @blur.prevent="onCancel()"
+        @click.prevent.stop="onConfirmation()"
+      >
+        <slot name="yes">
+          <font-awesome-icon
+            data-test-id="confirm"
+            :icon="['fas', 'check']"
+          />
+        </slot>
+      </b-button>
+
+      <b-button
+        :data-test-id="`${dataTestId}-cancel`"
+        :variant="variantCancel"
+        :size="sizeConfirm"
+        :disabled="cancelDisabled"
+        :class="[ borderless && 'border-0', 'flex-fill' ]"
+        @click.prevent.stop="onCancel()"
+      >
+        <slot name="no">
+          <font-awesome-icon
+            data-test-id="reject"
+            :icon="['fas', 'times']"
+          />
+        </slot>
+      </b-button>
+    </template>
+  </div>
+</template>
+
+<script lang="js">
+export default {
+  props: {
+    disabled: Boolean,
+    okDisabled: Boolean,
+    cancelDisabled: Boolean,
+    noPrompt: Boolean,
+    processing: Boolean,
+    showIcon: Boolean,
+
+    icon: {
+      type: Array,
+      default: () => ['far', 'trash-alt'],
+    },
+
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+
+    buttonStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    iconClass: {
+      type: String,
+      default: '',
+    },
+
+    textClass: {
+      type: String,
+      default: '',
+    },
+
+    borderless: {
+      type: Boolean,
+      default: true,
+    },
+
+    variant: {
+      type: String,
+      default: 'outline-danger',
+    },
+
+    size: {
+      type: String,
+      default: 'sm',
+    },
+
+    variantOk: {
+      type: String,
+      default: 'danger',
+    },
+
+    variantCancel: {
+      type: String,
+      default: 'light',
+    },
+
+    sizeConfirm: {
+      type: String,
+      default: 'sm',
+    },
+
+    tooltip: {
+      type: String,
+      default: '',
+    },
+
+    text: {
+      type: String,
+      default: '',
+    },
+
+    dataTestId: {
+      type: String,
+      default: 'button-delete',
+    },
+  },
+
+  data () {
+    return {
+      inConfirmation: false,
+    }
+  },
+
+  methods: {
+    onPrompt () {
+      if (this.noPrompt) {
+        this.$emit('confirmed')
+      } else {
+        this.inConfirmation = true
+      }
+    },
+
+    onConfirmation () {
+      this.inConfirmation = false
+      this.$emit('confirmed')
+    },
+
+    onCancel () {
+      this.inConfirmation = false
+      this.$emit('canceled')
+    },
+  },
+}
+</script>