Tui

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="openBaseModal">打开模态框</TsButton>
    <div class="demo-tip">打开后支持按 Esc 快捷关闭</div>
    
    <TsModal v-model="baseModalVisible" title="标题" content="内容"></TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const baseModalVisible = ref(false);

const openBaseModal = () => {
  baseModalVisible.value = true;
};
</script>

<style scoped>
.demo-tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--bussiness-modal-demo-text);
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="openSimpleModal">打开模态框</TsButton>
    
    <TsModal v-model="simpleModalVisible" title="This is a title" content="this is a modal"></TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const simpleModalVisible = ref(false);

const openSimpleModal = () => {
  simpleModalVisible.value = true;
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="openSlotModal">打开模态框</TsButton>
    
    <TsModal v-model="slotModalVisible" padding="0">
      <template #title>
        <div class="modal-title">标题</div>
      </template>
      <template #content>
        <div class="modal-content">这是模态框的内容区域，可以放置文本或表单。</div>
      </template>
    </TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const slotModalVisible = ref(false);

const openSlotModal = () => {
  slotModalVisible.value = true;
};
</script>

<style scoped>
.modal-title{
  padding: 24px;
}
.modal-content{
  padding:  0 24px 24px;
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="openCloseSlotModal">打开模态框</TsButton>
    
    <TsModal v-model="closeSlotModalVisible" :showClose="true">
      <template #title>
        <div class="modal-title">带自定义关闭按钮</div>
      </template>
      <template #close>
        <TsButton type="danger" size="small" @click="closeSlotModalVisible = false">X</TsButton>
      </template>
      <template #content>
        <div class="modal-content">你可以通过自定义 close 插槽替换默认关闭按钮。</div>
      </template>
    </TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const closeSlotModalVisible = ref(false);

const openCloseSlotModal = () => {
  closeSlotModalVisible.value = true;
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="openFixedModal">打开模态框</TsButton>
    
    <TsModal v-model="fixedModalVisible" width="600px" height="300px" :fixed="true">
      <template #title>
        <div class="modal-title">大号模态框</div>
      </template>
      <template #content>
        <div class="modal-content">这是一个宽 600px，高 300px，并且固定在页面上的模态框。</div>
      </template>
    </TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const fixedModalVisible = ref(false);

const openFixedModal = () => {
  fixedModalVisible.value = true;
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="openForceModal">打开模态框</TsButton>
    
    <TsModal v-model="forceModalVisible" :closeOnClickMask="false" :showClose="false">
      <template #title>
        <div class="modal-title">强制交互</div>
      </template>
      <template #content>
        <div class="modal-content">你必须点击底部按钮、或者关闭图标才能关闭，而不是点击遮罩层。</div>
      </template>
      <template #footer>
        <div class="modal-footer">
          <TsButton @click="forceModalVisible = false">我觉得应该点取消</TsButton>
          <TsButton type="primary" @click="forceModalVisible = false">我知道了</TsButton>
        </div>
      </template>
    </TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const forceModalVisible = ref(false);

const openForceModal = () => {
  forceModalVisible.value = true;
};
</script>

<template>
  <div class="before-close-demo">
    <TsButton @click="visible = true">打开 beforeClose 演示</TsButton>

    <TsModal v-model="visible" title="beforeClose 拦截演示" :beforeClose="handleBeforeClose">
      <template #content>
        <div class="before-close-card">
          <p class="before-close-row">当前会拦截：关闭按钮 / 遮罩 / ESC</p>
          <p class="before-close-row">
            最近一次关闭来源：
            <span class="before-close-source">{{ sourceLabelMap[lastSource] || '暂无' }}</span>
          </p>
          <p class="before-close-tip">触发关闭后会先弹出二次确认框，确认后才真正关闭当前 Modal。</p>
        </div>
        <TsModal v-model="confirmVisible" title="确认关闭" width="420px" :closeOnClickMask="false" :showClose="false">
          <template #content>
            <div class="confirm-panel">检测到你通过「{{ sourceLabelMap[lastSource] || '未知来源' }}」触发关闭，是否确认关闭当前 Modal？</div>
            <div class="confirm-panel">检测到你通过「{{ sourceLabelMap[lastSource] || '未知来源' }}」触发关闭，是否确认关闭当前 Modal？</div>
            <div class="confirm-panel">检测到你通过「{{ sourceLabelMap[lastSource] || '未知来源' }}」触发关闭，是否确认关闭当前 Modal？</div>
          </template>
          <template #footer>
            <div class="confirm-footer-actions">
              <TsButton @click="handleCancelClose">取消</TsButton>
              <TsButton type="primary" @click="handleConfirmClose">确认关闭</TsButton>
            </div>
          </template>
        </TsModal>
      </template>
    </TsModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal, TsToast } from 'tui';

type CloseSource = 'close-button' | 'mask' | 'esc';

const visible = ref(false);
const confirmVisible = ref(false);
const lastSource = ref<CloseSource>('close-button');

const sourceLabelMap: Record<CloseSource, string> = {
  'close-button': '右上角关闭按钮',
  mask: '遮罩层',
  esc: 'Esc',
};

const handleBeforeClose = async ({ source }: { source: CloseSource }) => {
  lastSource.value = source;
  confirmVisible.value = true;
  TsToast({ type: 'warning', message: `已拦截关闭：${sourceLabelMap[source]}` });
  return false;
};

const handleCancelClose = () => {
  confirmVisible.value = false;
  TsToast({ type: 'info', message: '已取消关闭' });
};

const handleConfirmClose = () => {
  confirmVisible.value = false;
  visible.value = false;
  TsToast({ type: 'success', message: 'Modal 已关闭' });
};
</script>

<style scoped>
.before-close-card {
  padding: 12px;
  border-radius: var(--bussiness-modal-demo-radius-md);
  border: 1px solid var(--bussiness-modal-demo-panel-border);
  background: var(--bussiness-modal-demo-panel-bg-soft);
}

.before-close-row {
  margin: 0;
  line-height: 1.7;
  color: var(--bussiness-modal-demo-title);
}

.before-close-row + .before-close-row {
  margin-top: 4px;
}

.before-close-source {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--bussiness-modal-demo-accent);
  background: var(--bussiness-modal-demo-focus-ring);
  border: 1px solid var(--bussiness-modal-demo-panel-border);
}

.before-close-tip {
  margin: 8px 0 0;
  line-height: 1.6;
  color: var(--bussiness-modal-demo-text);
}

.confirm-panel {
  padding: 10px 12px;
  border-left: 3px solid var(--bussiness-modal-demo-warning);
  background: var(--bussiness-modal-demo-warning-soft);
  border-radius: var(--bussiness-modal-demo-radius-sm);
  color: var(--bussiness-modal-demo-title);
  line-height: 1.6;
}

.confirm-footer-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 12px;
  margin-top: 12px;
}
</style>

<template>
  <div class="modal-form-demo">
    <div class="demo-section">
      <p class="demo-title">表单模态框</p>
      <div class="demo-controls">
        <TsButton @click="openFormModal">打开表单模态框</TsButton>
      </div>
      
      <TsModal v-model="formModalVisible" width="500px" title="用户信息">
        <template #content>
          <div class="form-content">
            <div class="form-group">
              <label>姓名 *</label>
              <input v-model="formData.name" type="text" placeholder="请输入姓名" />
            </div>
            <div class="form-group">
              <label>邮箱 *</label>
              <input v-model="formData.email" type="email" placeholder="请输入邮箱" />
            </div>
            <div class="form-group">
              <label>电话</label>
              <input v-model="formData.phone" type="tel" placeholder="请输入电话" />
            </div>
            <div class="form-group">
              <label>部门</label>
              <select v-model="formData.department">
                <option value="">请选择部门</option>
                <option value="tech">技术部</option>
                <option value="product">产品部</option>
                <option value="design">设计部</option>
              </select>
            </div>
            <div class="form-group">
              <label>备注</label>
              <textarea v-model="formData.remark" placeholder="请输入备注信息" rows="3"></textarea>
            </div>
          </div>
        </template>
        <template #footer>
          <div class="form-actions">
            <TsButton @click="handleCancel">取消</TsButton>
            <TsButton type="primary" @click="handleSave">保存</TsButton>
          </div>
        </template>
      </TsModal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { TsButton, TsModal } from 'tui';

const formModalVisible = ref(false);

const formData = reactive({
  name: '',
  email: '',
  phone: '',
  department: '',
  remark: ''
});

const openFormModal = () => {
  formModalVisible.value = true;
};

const handleCancel = () => {
  formModalVisible.value = false;
  resetForm();
};

const handleSave = () => {
  console.log('保存表单数据:', formData);
  // 这里可以添加保存逻辑
  formModalVisible.value = false;
  resetForm();
};

const resetForm = () => {
  Object.assign(formData, {
    name: '',
    email: '',
    phone: '',
    department: '',
    remark: ''
  });
};
</script>

<style scoped>
.modal-form-demo {
  max-width: 700px;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-title {
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--bussiness-modal-demo-title);
}

.demo-controls {
  margin-bottom: 16px;
}

.form-content {
  padding: 20px 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bussiness-modal-demo-title);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bussiness-modal-demo-panel-border);
  border-radius: var(--bussiness-modal-demo-radius-sm);
  font-size: 14px;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
  color: var(--bussiness-modal-demo-title);
  background: var(--bussiness-modal-demo-panel-bg);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--bussiness-modal-demo-accent);
  box-shadow: 0 0 0 2px var(--bussiness-modal-demo-focus-ring);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--bussiness-modal-demo-accent);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bussiness-modal-demo-divider);
}
</style>

<template>
  <div class="modal-confirm-demo">
    <div class="demo-section">
      <p class="demo-title">确认对话框</p>
      <div class="demo-controls">
        <TsButton @click="openDeleteConfirm">删除确认</TsButton>
        <TsButton @click="openSaveConfirm">保存确认</TsButton>
        <TsButton @click="openWarningConfirm">警告确认</TsButton>
      </div>
      
      <!-- 删除确认 -->
      <TsModal v-model="deleteConfirmVisible" safePadding width="400px" :showClose="false" :closeOnClickMask="false">
        <template #title>
          <div class="confirm-title delete">
            <span class="icon">⚠️</span>
            删除确认
          </div>
        </template>
        <template #content>
          <div class="confirm-content">
            <p>确定要删除这个项目吗？</p>
            <p class="warning-text">删除后将无法恢复，请谨慎操作。</p>
          </div>
        </template>
        <template #footer>
          <div class="confirm-actions">
            <TsButton @click="deleteConfirmVisible = false">取消</TsButton>
            <TsButton type="danger" @click="handleDelete">确认删除</TsButton>
          </div>
        </template>
      </TsModal>
      
      <!-- 保存确认 -->
      <TsModal v-model="saveConfirmVisible" width="400px" safePadding :showClose="false" :closeOnClickMask="false">
        <template #title>
          <div class="confirm-title save">
            <span class="icon">💾</span>
            保存确认
          </div>
        </template>
        <template #content>
          <div class="confirm-content">
            <p>确定要保存当前修改吗？</p>
            <p>保存后将覆盖之前的版本。</p>
          </div>
        </template>
        <template #footer>
          <div class="confirm-actions">
            <TsButton @click="saveConfirmVisible = false">取消</TsButton>
            <TsButton type="primary" @click="handleSave">确认保存</TsButton>
          </div>
        </template>
      </TsModal>
      
      <!-- 警告确认 -->
      <TsModal v-model="warningConfirmVisible" width="400px" safePadding :showClose="false" :closeOnClickMask="false">
        <template #title>
          <div class="confirm-title warning">
            <span class="icon">🚨</span>
            操作警告
          </div>
        </template>
        <template #content>
          <div class="confirm-content">
            <p>当前操作可能存在风险，请确认是否继续？</p>
            <p class="warning-text">建议先备份数据再进行操作。</p>
          </div>
        </template>
        <template #footer>
          <div class="confirm-actions">
            <TsButton @click="warningConfirmVisible = false">取消</TsButton>
            <TsButton type="warning" @click="handleWarning">继续操作</TsButton>
          </div>
        </template>
      </TsModal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const deleteConfirmVisible = ref(false);
const saveConfirmVisible = ref(false);
const warningConfirmVisible = ref(false);

const openDeleteConfirm = () => {
  deleteConfirmVisible.value = true;
};

const openSaveConfirm = () => {
  saveConfirmVisible.value = true;
};

const openWarningConfirm = () => {
  warningConfirmVisible.value = true;
};

const handleDelete = () => {
  console.log('确认删除');
  deleteConfirmVisible.value = false;
};

const handleSave = () => {
  console.log('确认保存');
  saveConfirmVisible.value = false;
};

const handleWarning = () => {
  console.log('继续操作');
  warningConfirmVisible.value = false;
};
</script>

<style scoped>
.modal-confirm-demo {
  max-width: 700px;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-title {
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--bussiness-modal-demo-title);
}

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.demo-controls .ts-button {
  margin-right: 0;
}

.confirm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.confirm-title.delete {
  color: var(--bussiness-modal-demo-danger);
}

.confirm-title.save {
  color: var(--bussiness-modal-demo-success);
}

.confirm-title.warning {
  color: var(--bussiness-modal-demo-warning);
}

.icon {
  font-size: 20px;
}

.confirm-content {
  padding: 14px;
  border: 1px solid var(--bussiness-modal-demo-panel-border);
  border-radius: var(--bussiness-modal-demo-radius-md);
  background: var(--bussiness-modal-demo-panel-bg-soft);
}

.confirm-content p {
  margin: 0 0 12px 0;
  line-height: 1.5;
  color: var(--bussiness-modal-demo-text);
}

.warning-text {
  color: var(--bussiness-modal-demo-danger) !important;
  font-weight: 500;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--bussiness-modal-demo-divider);
}
</style>

<template>
  <div class="modal-event-demo">
    <div class="demo-section">
      <p class="demo-title">事件监听</p>
      <div class="demo-controls">
        <TsButton @click="openEventModal">打开事件模态框</TsButton>
      </div>
      
      <TsModal 
        v-model="eventModalVisible" 
        width="500px" 
        title="事件演示"
        @close="handleClose"
      >
        <template #content>
          <div class="event-content">
            <div class="event-log">
              <h4>事件日志</h4>
              <div v-if="!eventLogs.length" class="log-empty">暂无事件，点击“打开事件模态框”开始记录。</div>
              <div class="log-item" v-for="(log, index) in eventLogs" :key="index">
                <span class="log-time">{{ log.time }}</span>
                <span class="log-type" :class="log.type">{{ log.type }}</span>
                <span class="log-message">{{ log.message }}</span>
              </div>
            </div>
            
            <div class="demo-actions">
              <TsButton @click="clearLogs" size="small">清空日志</TsButton>
              <TsButton @click="eventModalVisible = false" size="small">关闭模态框</TsButton>
            </div>
          </div>
        </template>
      </TsModal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsModal } from 'tui';

const eventModalVisible = ref(false);
const eventLogs = ref<Array<{time: string, type: string, message: string}>>([]);

const openEventModal = () => {
  eventModalVisible.value = true;
  addLog('open', '模态框打开');
};

const handleClose = () => {
  addLog('close', '模态框关闭');
};

const addLog = (type: string, message: string) => {
  const now = new Date();
  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
  
  eventLogs.value.unshift({
    time,
    type,
    message
  });
  
  // 只保留最近10条记录
  if (eventLogs.value.length > 10) {
    eventLogs.value = eventLogs.value.slice(0, 10);
  }
};

const clearLogs = () => {
  eventLogs.value = [];
};
</script>

<style scoped>
.modal-event-demo {
  max-width: 600px;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-title {
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--bussiness-modal-demo-title);
}

.demo-controls {
  margin-bottom: 16px;
}

.event-content {
  padding: 20px 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.event-log {
  flex: 1;
  margin-bottom: 20px;
  background: var(--bussiness-modal-demo-panel-bg-soft);
  border: 1px solid var(--bussiness-modal-demo-panel-border);
  border-radius: var(--bussiness-modal-demo-radius-md);
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.event-log h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--bussiness-modal-demo-title);
}

.log-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--bussiness-modal-demo-radius-sm);
  font-size: 13px;
  color: var(--bussiness-modal-demo-text);
  background: var(--bussiness-modal-demo-panel-bg);
  border-left: 3px solid var(--bussiness-modal-demo-accent);
}

.log-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bussiness-modal-demo-divider);
  font-size: 13px;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  color: var(--bussiness-modal-demo-text);
  font-family: monospace;
  margin-right: 12px;
  min-width: 60px;
}

.log-type {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 12px;
  min-width: 60px;
  text-align: center;
}

.log-type.open {
  background: var(--bussiness-modal-demo-success-soft);
  color: var(--bussiness-modal-demo-success);
}

.log-type.close {
  background: var(--bussiness-modal-demo-danger-soft);
  color: var(--bussiness-modal-demo-danger);
}

.log-message {
  color: var(--bussiness-modal-demo-title);
  flex: 1;
}

.demo-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
</style>