<template>
<Modal ref="modalRef" size="sm" noInnerPadding noWrapper>
<div :class="clsx('flex flex-row gap-sm items-center', themeClasses('bg-white', 'bg-black'))">
<Icon name="alert-circle" class="text-warning-600 content-center ml-md" size="lg" />
<p class="grow py-md">
This action has dependencies that will also be put on hold as a result of this action. Click
<strong>OK</strong> to proceed...
</p>
<div class="flex flex-col self-stretch">
<!-- TODO(Wendy) - these buttons are out of spec, maybe change em? -->
<NewButton
label="OK"
tone="empty"
class="grow text-action-300 dark:hover:text-white hover:text-black hover:bg-action-400 hover:underline"
@click="props.ok"
/>
<NewButton
class="grow text-action-300 dark:hover:text-white hover:text-black hover:bg-action-400 hover:underline"
label="Cancel"
tone="empty"
@click="cancel"
/>
</div>
</div>
</Modal>
</template>
<script lang="ts" setup>
import * as _ from "lodash-es";
import { ref } from "vue";
import { Icon, Modal, themeClasses, NewButton } from "@si/vue-lib/design-system";
import clsx from "clsx";
const modalRef = ref<InstanceType<typeof Modal> | null>(null);
const cancel = (): void => {
if (props.cancel) props.cancel();
else close();
};
const open = () => {
modalRef.value?.open();
};
const close = () => {
modalRef.value?.close();
};
const props = defineProps<{
ok: () => void;
cancel?: () => void;
}>();
defineExpose({ close, open });
</script>
