slide-popup-vue3 1.0.0

package/dist/slide-popup.es.js

@@ -0,0 +1,73 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in}.fade-enter-from,.fade-leave-to{opacity:0}.slide-top-enter-active,.slide-top-leave-active{transition:all .3s ease}.slide-top-enter-from,.slide-top-leave-to{transform:translateY(-100%)}.slide-bottom-enter-active,.slide-bottom-leave-active{transition:all .3s ease}.slide-bottom-enter-from,.slide-bottom-leave-to{transform:translateY(100%)}.slide-right-enter-active,.slide-right-leave-active{transition:all .3s ease}.slide-right-enter-from,.slide-right-leave-to{transform:translate(100%)}.slide-left-enter-active,.slide-left-leave-active{transition:all .3s ease}.slide-left-enter-from,.slide-left-leave-to{transform:translate(-100%)}.popup-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:1000}.popup-content{position:fixed;z-index:1001;background:#fff}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { computed as g, openBlock as o, createElementBlock as l, createVNode as i, Transition as p, withCtx as u, normalizeClass as y, createCommentVNode as c, normalizeStyle as C, renderSlot as V } from "vue";
+const a = {
+  __name: "SlidePopup",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    position: {
+      type: String,
+      default: "bottom",
+      validator: (t) => ["top", "bottom", "left", "right"].includes(t)
+    },
+    closeOnClickMask: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(t, { emit: m }) {
+    const s = t, n = m, d = g(() => {
+      const e = {
+        top: { width: "100%", top: 0, left: 0 },
+        bottom: { width: "100%", bottom: 0, left: 0 },
+        left: { height: "100%", left: 0, bottom: 0 },
+        right: { height: "100%", right: 0, bottom: 0 }
+      };
+      return e[s.position] || e.bottom;
+    }), r = (e) => {
+      const h = e.target.closest('[data-popup-mask="true"]');
+      s.closeOnClickMask && h && (console.log("点击了遮罩层"), f());
+    }, f = () => {
+      n("update:modelValue", !1), n("close");
+    };
+    return (e, k) => (o(), l("div", {
+      class: "popup",
+      onClickCapture: r
+    }, [
+      i(p, { name: "fade" }, {
+        default: u(() => [
+          t.modelValue ? (o(), l("div", {
+            key: 0,
+            class: y(["popup-mask", { "popup-mask_active": t.modelValue }]),
+            "data-popup-mask": "true"
+          }, null, 2)) : c("", !0)
+        ]),
+        _: 1
+      }),
+      i(p, {
+        name: "slide-" + t.position
+      }, {
+        default: u(() => [
+          t.modelValue ? (o(), l("div", {
+            key: 0,
+            class: "popup-content",
+            style: C(d.value)
+          }, [
+            V(e.$slots, "default")
+          ], 4)) : c("", !0)
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 32));
+  }
+};
+a.install = function(t) {
+  t.component(a.name, a);
+};
+export {
+  a as SlidePopup,
+  a as default
+};

package/dist/slide-popup.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in}.fade-enter-from,.fade-leave-to{opacity:0}.slide-top-enter-active,.slide-top-leave-active{transition:all .3s ease}.slide-top-enter-from,.slide-top-leave-to{transform:translateY(-100%)}.slide-bottom-enter-active,.slide-bottom-leave-active{transition:all .3s ease}.slide-bottom-enter-from,.slide-bottom-leave-to{transform:translateY(100%)}.slide-right-enter-active,.slide-right-leave-active{transition:all .3s ease}.slide-right-enter-from,.slide-right-leave-to{transform:translate(100%)}.slide-left-enter-active,.slide-left-leave-active{transition:all .3s ease}.slide-left-enter-from,.slide-left-leave-to{transform:translate(-100%)}.popup-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:1000}.popup-content{position:fixed;z-index:1001;background:#fff}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.SlidePopup={},o.Vue))})(this,function(o,e){"use strict";const n={__name:"SlidePopup",props:{modelValue:{type:Boolean,default:!1},position:{type:String,default:"bottom",validator:t=>["top","bottom","left","right"].includes(t)},closeOnClickMask:{type:Boolean,default:!0}},emits:["update:modelValue","close"],setup(t,{emit:s}){const a=t,i=s,c=e.computed(()=>{const l={top:{width:"100%",top:0,left:0},bottom:{width:"100%",bottom:0,left:0},left:{height:"100%",left:0,bottom:0},right:{height:"100%",right:0,bottom:0}};return l[a.position]||l.bottom}),d=l=>{const u=l.target.closest('[data-popup-mask="true"]');a.closeOnClickMask&&u&&(console.log("点击了遮罩层"),p())},p=()=>{i("update:modelValue",!1),i("close")};return(l,m)=>(e.openBlock(),e.createElementBlock("div",{class:"popup",onClickCapture:d},[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["popup-mask",{"popup-mask_active":t.modelValue}]),"data-popup-mask":"true"},null,2)):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"slide-"+t.position},{default:e.withCtx(()=>[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:"popup-content",style:e.normalizeStyle(c.value)},[e.renderSlot(l.$slots,"default")],4)):e.createCommentVNode("",!0)]),_:3},8,["name"])],32))}};n.install=function(t){t.component(n.name,n)},o.SlidePopup=n,o.default=n,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "slide-popup-vue3",
+  "version": "1.0.0",
+  "description": "一个Vue3的抽屉式弹出层组件",
+  "license": "ISC",
+  "author": "sun-weitao",
+  "type": "module",
+  "main": "dist/slide-popup.umd.js",
+  "module": "dist/slide-popup.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/slide-popup.es.js",
+      "require": "./dist/slide-popup.umd.js"
+    }
+  },
+  "unpkg": "dist/slide-popup.umd.js",
+  "jsdelivr": "dist/slide-popup.umd.js",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "popup",
+    "drawer",
+    "slide",
+    "modal"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "sass": "^1.103.1",
+    "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^5.0.2",
+    "vue": "^3.4.0"
+  }
+}