From 66da49930197947e1b631ce543a186ec96369c9d Mon Sep 17 00:00:00 2001
From: AntzyMo <mozbano@163.com>
Date: Sat, 12 Oct 2024 17:11:36 +0800
Subject: [PATCH] feat: Popconfirm component

---
 .../content/Popconfirm/PopconfirmBasic.vue    | 16 ++++
 .../Popconfirm/PopconfirmPlacement.vue        | 53 +++++++++++
 docs/content/docs/components/popconfirm.md    | 90 +++++++++++++++++++
 docs/package.json                             |  1 +
 docs/utils/toc.ts                             |  4 +
 packages/components/Popconfirm/package.json   | 38 ++++++++
 .../components/Popconfirm/src/Popconfirm.vue  | 65 ++++++++++++++
 packages/components/Popconfirm/src/index.ts   |  2 +
 packages/components/Popconfirm/src/types.d.ts | 13 +++
 packages/components/Popconfirm/tsconfig.json  |  9 ++
 packages/lite-ui/CHANGELOG.md                 | 11 +++
 packages/lite-ui/package.json                 |  3 +-
 packages/lite-ui/src/index.ts                 |  1 +
 packages/theme/CHANGELOG.md                   |  6 ++
 packages/theme/package.json                   |  2 +-
 packages/theme/src/shortcuts/Popconfirm.ts    | 10 +++
 packages/theme/src/shortcuts/index.ts         |  4 +-
 playground/package.json                       |  1 +
 playground/src/App.vue                        | 28 +++++-
 19 files changed, 352 insertions(+), 5 deletions(-)
 create mode 100644 docs/components/content/Popconfirm/PopconfirmBasic.vue
 create mode 100644 docs/components/content/Popconfirm/PopconfirmPlacement.vue
 create mode 100644 docs/content/docs/components/popconfirm.md
 create mode 100644 packages/components/Popconfirm/package.json
 create mode 100644 packages/components/Popconfirm/src/Popconfirm.vue
 create mode 100644 packages/components/Popconfirm/src/index.ts
 create mode 100644 packages/components/Popconfirm/src/types.d.ts
 create mode 100644 packages/components/Popconfirm/tsconfig.json
 create mode 100644 packages/theme/src/shortcuts/Popconfirm.ts

diff --git a/docs/components/content/Popconfirm/PopconfirmBasic.vue b/docs/components/content/Popconfirm/PopconfirmBasic.vue
new file mode 100644
index 0000000..a879e17
--- /dev/null
+++ b/docs/components/content/Popconfirm/PopconfirmBasic.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { Button, Popconfirm } from '@lite-space/ui'
+</script>
+
+<template>
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    ok-text="Yes"
+    cancel-text="No"
+  >
+    <Button danger>
+      Delete
+    </Button>
+  </Popconfirm>
+</template>
diff --git a/docs/components/content/Popconfirm/PopconfirmPlacement.vue b/docs/components/content/Popconfirm/PopconfirmPlacement.vue
new file mode 100644
index 0000000..231a525
--- /dev/null
+++ b/docs/components/content/Popconfirm/PopconfirmPlacement.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { Button, Popconfirm, Space } from '@lite-space/ui'
+
+  const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ placement, text }">
+    <Popconfirm
+      title="Delete the task"
+      description="Are you sure to delete this task?"
+      ok-text="Yes"
+      cancel-text="No"
+      :placement="placement"
+    >
+      <Button class="w-18">
+        {{ text }}
+      </Button>
+    </Popconfirm>
+  </DefineTemplate>
+  <div px-6>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="top-start" text="TL" />
+        <ReuseTemplate placement="top" text="Top" />
+        <ReuseTemplate placement="top-end" text="TR" />
+      </Space>
+    </div>
+    <div flex="~ items-center justify-between">
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="left-start" text="LT" />
+          <ReuseTemplate placement="left" text="Left" />
+          <ReuseTemplate placement="left-end" text="LB" />
+        </Space>
+      </div>
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="right-start" text="RT" />
+          <ReuseTemplate placement="right" text="Right" />
+          <ReuseTemplate placement="right-end" text="RB" />
+        </Space>
+      </div>
+    </div>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="bottom-start" text="BL" />
+        <ReuseTemplate placement="bottom" text="Bottom" />
+        <ReuseTemplate placement="bottom-end" text="BR" />
+      </Space>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/docs/components/popconfirm.md b/docs/content/docs/components/popconfirm.md
new file mode 100644
index 0000000..9c80076
--- /dev/null
+++ b/docs/content/docs/components/popconfirm.md
@@ -0,0 +1,90 @@
+---
+title: Popconfirm  气泡确认框
+description: 点击元素，弹出气泡式的确认框。
+---
+
+## Installation
+
+::CodePreview{title="基本用法" src="PopconfirmBasic"}
+最简单的用法，支持确认标题和描述。
+#code
+```vue
+<script setup lang="ts">
+  import { Button, Popconfirm } from '@lite-space/ui'
+</script>
+
+<template>
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    ok-text="Yes"
+    cancel-text="No"
+  >
+    <Button danger>
+      Delete
+    </Button>
+  </Popconfirm>
+</template>
+```
+::
+
+::CodePreview{title="位置" src="PopconfirmPlacement"}
+位置有 12 个方向。
+
+#code
+```vue
+<script setup lang="ts">
+  import { Button, Popconfirm, Space } from '@lite-space/ui'
+
+  const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ placement, text }">
+    <Popconfirm
+      title="Delete the task"
+      description="Are you sure to delete this task?"
+      ok-text="Yes"
+      cancel-text="No"
+      :placement="placement"
+    >
+      <Button class="w-18">
+        {{ text }}
+      </Button>
+    </Popconfirm>
+  </DefineTemplate>
+  <div px-6>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="top-start" text="TL" />
+        <ReuseTemplate placement="top" text="Top" />
+        <ReuseTemplate placement="top-end" text="TR" />
+      </Space>
+    </div>
+    <div flex="~ items-center justify-between">
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="left-start" text="LT" />
+          <ReuseTemplate placement="left" text="Left" />
+          <ReuseTemplate placement="left-end" text="LB" />
+        </Space>
+      </div>
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="right-start" text="RT" />
+          <ReuseTemplate placement="right" text="Right" />
+          <ReuseTemplate placement="right-end" text="RB" />
+        </Space>
+      </div>
+    </div>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="bottom-start" text="BL" />
+        <ReuseTemplate placement="bottom" text="Bottom" />
+        <ReuseTemplate placement="bottom-end" text="BR" />
+      </Space>
+    </div>
+  </div>
+</template>
+```
+::
diff --git a/docs/package.json b/docs/package.json
index 1bb5311..5ade151 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,6 +21,7 @@
   "devDependencies": {
     "@antzy/eslint-config": "^3.3.2",
     "@iconify-json/carbon": "^1.1.36",
+    "@iconify-json/heroicons": "^1.2.1",
     "@unocss/nuxt": "^0.61.9",
     "@unocss/reset": "^0.61.9",
     "@vueuse/nuxt": "^10.11.1",
diff --git a/docs/utils/toc.ts b/docs/utils/toc.ts
index 7d26fc7..d838bca 100644
--- a/docs/utils/toc.ts
+++ b/docs/utils/toc.ts
@@ -92,6 +92,10 @@ export const toc: Toc[] = [
       {
         title: 'Popover 气泡卡片',
         path: '/docs/components/popover'
+      },
+      {
+        title: 'Popconfirm 气泡确认框',
+        path: '/docs/components/popconfirm'
       }
     ]
   }
diff --git a/packages/components/Popconfirm/package.json b/packages/components/Popconfirm/package.json
new file mode 100644
index 0000000..e398f88
--- /dev/null
+++ b/packages/components/Popconfirm/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@lite-space/popconfirm",
+  "type": "module",
+  "version": "0.0.0",
+  "keywords": [
+    "vue3",
+    "component",
+    "unocss",
+    "popconfirm"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.mjs",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "mkdist -d"
+  },
+  "dependencies": {
+    "@lite-space/button": "workspace:*",
+    "@lite-space/tooltip": "workspace:*"
+  },
+  "devDependencies": {
+    "@vue/tsconfig": "^0.5.1",
+    "mkdist": "^1.5.4",
+    "typescript": "^5.2.2",
+    "vue": "^3.5.9"
+  }
+}
diff --git a/packages/components/Popconfirm/src/Popconfirm.vue b/packages/components/Popconfirm/src/Popconfirm.vue
new file mode 100644
index 0000000..6d30c37
--- /dev/null
+++ b/packages/components/Popconfirm/src/Popconfirm.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+  import type { PopconfirmProps } from './types'
+
+  import { Button } from '@lite-space/button'
+  import { Tooltip } from '@lite-space/tooltip'
+
+  defineOptions({
+    name: 'LtPopconfirm'
+  })
+
+  withDefaults(defineProps<PopconfirmProps>(), {
+    showCancel: true
+  })
+
+  defineEmits<{
+    confirm: []
+    cancel: []
+  }>()
+  defineSlots<{
+    default: () => any
+    icon: () => any
+    title: () => any
+    description: () => any
+  }>()
+</script>
+
+<template>
+  <Tooltip trigger="click" :placement="$props.placement" :offset="8">
+    <slot />
+    <template #content>
+      <div class="lt-popconfirm">
+        <div class="lt-popconfirm-message">
+          <div class="lt-popconfirm-message-icon">
+            <slot name="icon">
+              <span
+                class="lt-popconfirm-message-icon-inner"
+                :class="[icon ? icon : 'i-heroicons:exclamation-circle-16-solid text-amber-400']"
+              />
+            </slot>
+          </div>
+          <div class="lt-popconfirm-message-text">
+            <div class="lt-popconfirm-message-text-title">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </div>
+            <div v-if="$slots.description || description" class="mt-1">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
+          </div>
+        </div>
+        <div class=" lt-popconfirm-buttons">
+          <Button v-if="showCancel" size="small" @click="$emit('cancel')">
+            {{ cancelText }}
+          </Button>
+          <Button size="small" type="primary" @click="$emit('confirm')">
+            {{ okText }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Tooltip>
+</template>
diff --git a/packages/components/Popconfirm/src/index.ts b/packages/components/Popconfirm/src/index.ts
new file mode 100644
index 0000000..1d0a6a2
--- /dev/null
+++ b/packages/components/Popconfirm/src/index.ts
@@ -0,0 +1,2 @@
+export { default as Popconfirm } from './Popconfirm.vue'
+export type * from './types'
diff --git a/packages/components/Popconfirm/src/types.d.ts b/packages/components/Popconfirm/src/types.d.ts
new file mode 100644
index 0000000..bf64ac2
--- /dev/null
+++ b/packages/components/Popconfirm/src/types.d.ts
@@ -0,0 +1,13 @@
+import type { TooltipProps } from '@lite-space/tooltip'
+
+interface LtPopconfirmProps extends Pick<TooltipProps, 'placement'> {
+  title: string
+  description: string
+  okText: string
+  cancelText: string
+  icon: string
+  showCancel: boolean
+}
+
+export type PopconfirmProps = Partial<LtPopconfirmProps>
+export type PopconfirmInstance = InstanceType<typeof import('./Popconfirm.vue')['default']>
diff --git a/packages/components/Popconfirm/tsconfig.json b/packages/components/Popconfirm/tsconfig.json
new file mode 100644
index 0000000..e38b479
--- /dev/null
+++ b/packages/components/Popconfirm/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+  "exclude": ["node_modules/*", "src/**/__test__/*"]
+}
diff --git a/packages/lite-ui/CHANGELOG.md b/packages/lite-ui/CHANGELOG.md
index eaa8091..5218079 100644
--- a/packages/lite-ui/CHANGELOG.md
+++ b/packages/lite-ui/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @lite-space/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- @lite-space/popconfirm@0.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @lite-space/theme@0.4.0
+
 ## 0.3.0
 
 ### Minor Changes
diff --git a/packages/lite-ui/package.json b/packages/lite-ui/package.json
index a7446c8..f11ff46 100644
--- a/packages/lite-ui/package.json
+++ b/packages/lite-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lite-space/ui",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Vue3 based UnoCSS UI library.",
   "author": "AntzyMo <mozbano@163.com>",
   "license": "MIT",
@@ -41,6 +41,7 @@
     "@lite-space/icon": "workspace:*",
     "@lite-space/input": "workspace:*",
     "@lite-space/menu": "workspace:*",
+    "@lite-space/popconfirm": "workspace:*",
     "@lite-space/popover": "workspace:*",
     "@lite-space/radio": "workspace:*",
     "@lite-space/space": "workspace:*",
diff --git a/packages/lite-ui/src/index.ts b/packages/lite-ui/src/index.ts
index d500607..0d63610 100644
--- a/packages/lite-ui/src/index.ts
+++ b/packages/lite-ui/src/index.ts
@@ -9,6 +9,7 @@ export * from '@lite-space/empty'
 export * from '@lite-space/icon'
 export * from '@lite-space/input'
 export * from '@lite-space/menu'
+export * from '@lite-space/popconfirm'
 export * from '@lite-space/popover'
 export * from '@lite-space/radio'
 export * from '@lite-space/space'
diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
index 1687878..85c0c86 100644
--- a/packages/theme/CHANGELOG.md
+++ b/packages/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @lite-space/theme
 
+## 0.4.0
+
+### Minor Changes
+
+- @lite-space/popconfirm@0.0.0
+
 ## 0.3.0
 
 ### Minor Changes
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 3b84959..2ad1822 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lite-space/theme",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "unocss preset for lite-ui",
   "author": "AntzyMo <mozbano@163.com>",
   "license": "MIT",
diff --git a/packages/theme/src/shortcuts/Popconfirm.ts b/packages/theme/src/shortcuts/Popconfirm.ts
new file mode 100644
index 0000000..2454d0e
--- /dev/null
+++ b/packages/theme/src/shortcuts/Popconfirm.ts
@@ -0,0 +1,10 @@
+export const Popconfirm = {
+  'lt-popconfirm': 'px-1.5 py-2.5',
+  'lt-popconfirm-message': 'flex items-start mb-2',
+  'lt-popconfirm-message-icon': 'w-5.5 h-5.5',
+  'lt-popconfirm-message-icon-inner': 'inline-block pt-.6 text-base',
+  'lt-popconfirm-message-text': 'text-sm',
+  'lt-popconfirm-message-text-title': 'font-600',
+  'lt-popconfirm-buttons': 'flex justify-end gap-2'
+
+}
diff --git a/packages/theme/src/shortcuts/index.ts b/packages/theme/src/shortcuts/index.ts
index 85b3a59..c9ea19d 100644
--- a/packages/theme/src/shortcuts/index.ts
+++ b/packages/theme/src/shortcuts/index.ts
@@ -11,6 +11,7 @@ import { Switch } from './Switch'
 import { Divider } from './Divider'
 import { Popover } from './Popover'
 import { Tooltip } from './Tooltip'
+import { Popconfirm } from './Popconfirm'
 import { MenuShortcuts as Menu } from './Menu'
 import { InputShortcuts as Input } from './Input'
 import { RadioShortcuts as Radio } from './Radio'
@@ -37,7 +38,8 @@ export const shortcuts = [
   Badge,
   Avatar,
   Popover,
-  Tooltip
+  Tooltip,
+  Popconfirm
 ]
 
 /**
diff --git a/playground/package.json b/playground/package.json
index be118f8..60db52d 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.36",
+    "@iconify-json/heroicons": "^1.2.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 32fbdea..8305b34 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import { Popconfirm } from '@lite-space/ui'
+
   import Icon from './components/Icon.vue'
   import SizeBtns from './components/SizeBtns.vue'
 
-  import { ref, watch } from 'vue'
-
   const size = ref('default')
   watch(size, val => {
     console.log('size', val)
@@ -13,4 +14,27 @@
 <template>
   <SizeBtns v-model="size" />
   <Icon />
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    ok-text="Yes"
+    cancel-text="No"
+  >
+    Delete
+  </Popconfirm>
+
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    ok-text="Yes1"
+    cancel-text="No2"
+  >
+    Delete
+    <template #title>
+      Delete the task1
+    </template>
+    <template #description>
+      Are you sure to delete this task?111
+    </template>
+  </Popconfirm>
 </template>