feat: Popconfirm component

LiteUI-Space · Oct 12, 2024 · 66da499 · 66da499
1 parent f7f68de
commit 66da499
Show file tree

Hide file tree

Showing 19 changed files with 352 additions and 5 deletions.
diff --git a/docs/components/content/Popconfirm/PopconfirmBasic.vue 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 <[email protected]>",
   "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
@@ -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
@@ -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
@@ -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 <[email protected]>",
   "license": "MIT",

diff --git a/packages/theme/src/shortcuts/Popconfirm.ts 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'
+
+}