best-dialog 1.0.0

package/dist/runtime/style.css

@@ -0,0 +1,500 @@
+/* ────────────────────────────────────────────────────────────
+   best-dialog — Styles & Animations
+   ──────────────────────────────────────────────────────────── */
+
+/* ── Theme Variables (兼容 Tailwind CSS) ───────────────────── */
+
+:root {
+  --bd-overlay-bg: var(--tw-color-black, rgba(0, 0, 0, .45));
+  --bd-bg: var(--tw-color-white, #fff);
+  --bd-text: var(--tw-color-gray-900, #1d2129);
+  --bd-text-secondary: var(--tw-color-gray-500, #4e5969);
+  --bd-text-muted: var(--tw-color-gray-400, #86909c);
+  --bd-border: var(--tw-color-gray-200, #e5e6eb);
+  --bd-border-hover: var(--tw-color-gray-300, #c9cdd4);
+  --bd-primary: var(--tw-color-blue-600, #165dff);
+  --bd-primary-hover: var(--tw-color-blue-500, #4080ff);
+  --bd-primary-active: var(--tw-color-blue-700, #0e42d2);
+  --bd-surface-hover: var(--tw-color-gray-100, #f2f3f5);
+  --bd-surface-active: var(--tw-color-gray-200, #e5e6eb);
+  --bd-surface-subtle: var(--tw-color-gray-50, #f7f8fa);
+  --bd-input-focus-ring: rgba(22, 93, 255, .12);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bd-overlay-bg: var(--tw-color-black, rgba(0, 0, 0, .65));
+    --bd-bg: var(--tw-color-gray-800, #232324);
+    --bd-text: var(--tw-color-gray-100, rgba(255, 255, 255, .85));
+    --bd-text-secondary: var(--tw-color-gray-300, rgba(255, 255, 255, .7));
+    --bd-text-muted: var(--tw-color-gray-400, rgba(255, 255, 255, .45));
+    --bd-border: var(--tw-color-gray-700, rgba(255, 255, 255, .12));
+    --bd-border-hover: var(--tw-color-gray-600, rgba(255, 255, 255, .2));
+    --bd-primary: var(--tw-color-blue-500, #3370ff);
+    --bd-primary-hover: var(--tw-color-blue-400, #4080ff);
+    --bd-primary-active: var(--tw-color-blue-600, #245bdb);
+    --bd-surface-hover: rgba(255, 255, 255, .08);
+    --bd-surface-active: rgba(255, 255, 255, .12);
+    --bd-surface-subtle: rgba(255, 255, 255, .04);
+    --bd-input-focus-ring: rgba(51, 112, 255, .2);
+  }
+}
+
+/* ── Overlay ───────────────────────────────────────────────── */
+
+.bd-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  background: var(--bd-overlay-bg);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  padding: 24px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ── Positions ─────────────────────────────────────────────── */
+
+.bd-overlay.top           { align-items: flex-start; padding-top: 80px }
+.bd-overlay.bottom        { align-items: flex-end;     padding-bottom: 80px }
+.bd-overlay.left          { justify-content: flex-start; padding-left: 48px }
+.bd-overlay.right         { justify-content: flex-end;   padding-right: 48px }
+.bd-overlay.top-left      { align-items: flex-start; justify-content: flex-start;  padding: 48px }
+.bd-overlay.top-right     { align-items: flex-start; justify-content: flex-end;    padding: 48px }
+.bd-overlay.bottom-left   { align-items: flex-end;   justify-content: flex-start;  padding: 48px }
+.bd-overlay.bottom-right  { align-items: flex-end;   justify-content: flex-end;    padding: 48px }
+
+/* ── Dialog ────────────────────────────────────────────────── */
+
+.bd-dialog {
+  position: relative;
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
+  background: var(--bd-bg);
+  border-radius: 14px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, .04),
+    0 24px 64px rgba(0, 0, 0, .18),
+    0 8px 20px rgba(0, 0, 0, .08);
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--bd-text);
+  overflow: hidden;
+}
+
+.bd-dialog--fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+
+.bd-overlay.bd-fullscreen {
+  padding: 0;
+}
+
+/* ── Close Button ──────────────────────────────────────────── */
+
+.bd-dialog__close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--bd-text-muted);
+  cursor: pointer;
+  transition: all .2s cubic-bezier(.4, 0, .2, 1);
+  z-index: 2;
+}
+
+.bd-dialog__close:hover {
+  background: var(--bd-surface-hover);
+  color: var(--bd-text);
+  transform: rotate(90deg);
+}
+
+.bd-dialog__close:active {
+  background: var(--bd-surface-active);
+  transform: rotate(90deg) scale(.92);
+}
+
+/* ── Header ────────────────────────────────────────────────── */
+
+.bd-dialog__header {
+  padding: 20px 52px 0 24px;
+  flex-shrink: 0;
+}
+
+.bd-dialog__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--bd-text);
+  line-height: 1.5;
+  display: block;
+}
+
+/* ── Body ──────────────────────────────────────────────────── */
+
+.bd-dialog__body {
+  padding: 16px 24px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  flex: 1;
+  min-height: 0;
+}
+
+.bd-dialog__body:empty {
+  display: none;
+}
+
+.bd-dialog__text {
+  margin: 0;
+  color: var(--bd-text-secondary);
+  line-height: 1.7;
+}
+
+.bd-dialog__html {
+  color: var(--bd-text-secondary);
+  line-height: 1.7;
+}
+
+.bd-dialog__iframe {
+  width: 100%;
+  height: 420px;
+  border: none;
+  border-radius: 6px;
+  display: block;
+}
+
+.bd-dialog__input {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1px solid var(--bd-border);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--bd-text);
+  background: transparent;
+  outline: none;
+  transition: border-color .2s, box-shadow .2s;
+}
+
+.bd-dialog__input:focus {
+  border-color: var(--bd-primary);
+  box-shadow: 0 0 0 2px var(--bd-input-focus-ring);
+}
+
+/* ── Footer ────────────────────────────────────────────────── */
+
+.bd-dialog__footer {
+  padding: 0 24px 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* ── Action Buttons ────────────────────────────────────────── */
+
+.bd-dialog__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72px;
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid var(--bd-border);
+  border-radius: 8px;
+  background: var(--bd-bg);
+  color: var(--bd-text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all .2s cubic-bezier(.4, 0, .2, 1);
+}
+
+.bd-dialog__btn:hover {
+  border-color: var(--bd-border-hover);
+  color: var(--bd-text);
+  background: var(--bd-surface-subtle);
+}
+
+.bd-dialog__btn:active {
+  transform: scale(.96);
+  background: var(--bd-surface-hover);
+}
+
+.bd-dialog__btn--primary {
+  background: var(--bd-primary);
+  border-color: var(--bd-primary);
+  color: #fff;
+}
+
+.bd-dialog__btn--primary:hover {
+  background: var(--bd-primary-hover);
+  border-color: var(--bd-primary-hover);
+  color: #fff;
+}
+
+.bd-dialog__btn--primary:active {
+  background: var(--bd-primary-active);
+  border-color: var(--bd-primary-active);
+  color: #fff;
+}
+
+/* ── Overlay Transition (fade) ─────────────────────────────── */
+
+.bd-overlay-enter-active {
+  transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
+}
+
+.bd-overlay-leave-active {
+  transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
+}
+
+.bd-overlay-enter-from,
+.bd-overlay-leave-to {
+  opacity: 0;
+}
+
+/* ── Zoom Transition (center default) ─────────────────────── */
+
+.bd-zoom-enter-active {
+  animation: bd-zoom-in .32s cubic-bezier(.34, 1.56, .64, 1) both;
+}
+
+.bd-zoom-leave-active {
+  animation: bd-zoom-out .2s cubic-bezier(.4, 0, 1, 1) both;
+}
+
+@keyframes bd-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(.85) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes bd-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.92) translateY(4px);
+  }
+}
+
+/* ── Slide Transition (top/bottom/left/right) ─────────────── */
+
+.bd-slide-enter-active {
+  animation: var(--bd-slide-in, bd-slide-down-in) .35s cubic-bezier(.34, 1.2, .64, 1) both;
+}
+
+.bd-slide-leave-active {
+  animation: var(--bd-slide-out, bd-slide-down-out) .22s cubic-bezier(.4, 0, 1, 1) both;
+}
+
+/* Slide down (top position) */
+@keyframes bd-slide-down-in {
+  from {
+    opacity: 0;
+    transform: translateY(-40px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes bd-slide-down-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-30px) scale(.98);
+  }
+}
+
+/* Slide up (bottom position) */
+.bd-overlay.bottom .bd-slide-enter-active {
+  --bd-slide-in: bd-slide-up-in;
+}
+.bd-overlay.bottom .bd-slide-leave-active {
+  --bd-slide-out: bd-slide-up-out;
+}
+
+@keyframes bd-slide-up-in {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes bd-slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(30px) scale(.98);
+  }
+}
+
+/* Slide left (left position) */
+.bd-overlay.left .bd-slide-enter-active,
+.bd-overlay.top-left .bd-slide-enter-active,
+.bd-overlay.bottom-left .bd-slide-enter-active {
+  --bd-slide-in: bd-slide-left-in;
+}
+.bd-overlay.left .bd-slide-leave-active,
+.bd-overlay.top-left .bd-slide-leave-active,
+.bd-overlay.bottom-left .bd-slide-leave-active {
+  --bd-slide-out: bd-slide-left-out;
+}
+
+@keyframes bd-slide-left-in {
+  from {
+    opacity: 0;
+    transform: translateX(-40px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes bd-slide-left-out {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-30px) scale(.98);
+  }
+}
+
+/* Slide right (right position) */
+.bd-overlay.right .bd-slide-enter-active,
+.bd-overlay.top-right .bd-slide-enter-active,
+.bd-overlay.bottom-right .bd-slide-enter-active {
+  --bd-slide-in: bd-slide-right-in;
+}
+.bd-overlay.right .bd-slide-leave-active,
+.bd-overlay.top-right .bd-slide-leave-active,
+.bd-overlay.bottom-right .bd-slide-leave-active {
+  --bd-slide-out: bd-slide-right-out;
+}
+
+@keyframes bd-slide-right-in {
+  from {
+    opacity: 0;
+    transform: translateX(40px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes bd-slide-right-out {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(30px) scale(.98);
+  }
+}
+
+/* ── Fade Transition ──────────────────────────────────────── */
+
+.bd-fade-enter-active {
+  animation: bd-fade-in .28s cubic-bezier(.4, 0, .2, 1) both;
+}
+
+.bd-fade-leave-active {
+  animation: bd-fade-out .18s cubic-bezier(.4, 0, 1, 1) both;
+}
+
+@keyframes bd-fade-in {
+  from { opacity: 0; transform: scale(.97); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes bd-fade-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(.97); }
+}
+
+/* ── Responsive ────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .bd-overlay {
+    padding: 16px;
+  }
+
+  .bd-dialog {
+    max-width: calc(100vw - 32px);
+    border-radius: 12px;
+  }
+
+  .bd-dialog__header {
+    padding: 16px 44px 0 16px;
+  }
+
+  .bd-dialog__body {
+    padding: 12px 16px;
+  }
+
+  .bd-dialog__footer {
+    padding: 0 16px 16px;
+    flex-wrap: wrap;
+  }
+
+  .bd-dialog__btn {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bd-overlay.top           { padding-top: 48px }
+  .bd-overlay.bottom        { padding-bottom: 48px }
+  .bd-overlay.left          { padding-left: 16px }
+  .bd-overlay.right         { padding-right: 16px }
+  .bd-overlay.top-left,
+  .bd-overlay.top-right,
+  .bd-overlay.bottom-left,
+  .bd-overlay.bottom-right  { padding: 24px }
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "best-dialog",
+  "version": "1.0.0",
+  "description": "Lightweight, beautiful Vue3 dialog component with Nuxt 3 support. Template / Composable / Functional API with alert, confirm, prompt.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "types": "./dist/module.d.ts"
+    },
+    "./runtime": {
+      "import": "./dist/runtime/index.mjs",
+      "types": "./dist/runtime/index.d.ts"
+    },
+    "./dist/runtime/style.css": "./dist/runtime/style.css"
+  },
+  "main": "./dist/module.mjs",
+  "module": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "nuxt3",
+    "dialog",
+    "modal",
+    "alert",
+    "confirm",
+    "prompt",
+    "component",
+    "ui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ajaxjs/best-dialog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ajaxjs/best-dialog/issues"
+  },
+  "homepage": "https://github.com/ajaxjs/best-dialog#readme",
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.16.0",
+    "unbuild": "^3.5.0",
+    "vue": "^3.5.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "pub": "npm version patch && pnpm publish --no-git-checks",
+    "pub:minor": "npm version minor && pnpm publish --no-git-checks",
+    "pub:major": "npm version major && pnpm publish --no-git-checks"
+  }
+}