Overlay 弹窗

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <SkButton label="显示弹窗" @click="() => visible = true" />
  <SkOverlay v-model:visible="visible">
    <div class="p-4 bg-page text-primary rounded-lg">
      <span>这是一个基础的弹窗内容</span>
    </div>
  </SkOverlay>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="显示弹窗" @click="() => visible = true" />
    <SkOverlay v-model:visible="visible">
      <div class="p-4 bg-page rounded-lg">
        <span>您可以在这里放置任何内容。</span>
      </div>
    </SkOverlay>
  </div>
</template>

<template>
  <SkOverlay default-visible>
    <div class="p-4 bg-page rounded-lg">
      <span>这是一个默认可见的弹窗内容</span>
    </div>
  </SkOverlay>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const placement = ref<'top' | 'center' | 'bottom' | 'left' | 'right'>('center')

function handlePositionChange(newPosition: typeof placement.value) {
  placement.value = newPosition
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkButton label="顶部位置" @click="handlePositionChange('top')" />
    <SkButton label="居中位置" @click="handlePositionChange('center')" />
    <SkButton label="底部位置" @click="handlePositionChange('bottom')" />
    <SkButton label="左侧位置" @click="handlePositionChange('left')" />
    <SkButton label="右侧位置" @click="handlePositionChange('right')" />

    <SkOverlay v-model:visible="visible" :placement="placement">
      <div class="p-4 bg-page rounded-lg">
        <span>这个弹窗显示在 {{ placement }} 位置。</span>
      </div>
    </SkOverlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const animation = ref<'fade' | 'scale' | 'slide' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right'>('fade')

function handleAnimationChange(newAnimation: typeof animation.value) {
  animation.value = newAnimation
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkButton label="淡入淡出" @click="handleAnimationChange('fade')" />
    <SkButton label="缩放动画" @click="handleAnimationChange('scale')" />
    <SkButton label="滑动动画" @click="handleAnimationChange('slide')" />
    <SkButton label="向上滑动" @click="handleAnimationChange('slide-up')" />
    <SkButton label="向下滑动" @click="handleAnimationChange('slide-down')" />

    <SkOverlay v-model:visible="visible" :animation="animation">
      <div class="p-4 bg-page rounded-lg">
        <span>当前动画: {{ animation }}</span>
      </div>
    </SkOverlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="显示弹窗" @click="() => visible = true" />
    <SkOverlay v-model:visible="visible" :backdrop="false">
      <div class="text-center p-4 text-white bg-page rounded-lg">
        <span class="block mb-3">这个弹窗没有背景层，需要手动关闭</span>
        <SkButton label="手动关闭" color="danger" size="small" @click="() => visible = false" />
      </div>
    </SkOverlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <div class="p-4">
    <SkButton label="显示弹窗" @click="() => visible = true" />
    <SkOverlay v-model:visible="visible" :dismissable="false">
      <div class="text-center p-4 bg-page rounded-lg">
        <span class="block mb-2">点击背景层不会关闭弹窗</span>
        <SkButton label="手动关闭" color="warning" size="small" @click="() => visible = false" />
      </div>
    </SkOverlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const zIndex = ref(1000)
const visible = ref(false)

function handleVisibleChange(newZIndex: number) {
  zIndex.value = newZIndex
  visible.value = true
}
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <div class="relative bg-orange-500 p-4 text-white z-1500 rounded-lg">
      这是 zIndex = 1500 的盒子
    </div>
    <SkButton label="默认弹窗" @click="handleVisibleChange(1000)" />
    <SkButton label="覆盖弹窗" @click="handleVisibleChange(2000)" />

    <SkOverlay v-model:visible="visible" :z-index="zIndex">
      <div class="p-4 bg-page rounded-lg">
        <span>这个弹窗的层级为 {{ zIndex }}</span>
      </div>
    </SkOverlay>
  </div>
</template>