@takuma-ru/vue-swipe-modal - npm Package Compare versions

Comparing version 5.0.0-beta.2 to 5.0.0

@types/components/SwipeModal.vue.d.ts

@@ -1,10 +0,3 @@
-import { HTMLAttributes } from "vue";
 type PropsType = {
     /**
-     * Unique class of panel section.
-     *
-     * @default undefined
-     */
-    class?: HTMLAttributes["class"];
-    /**
      * Whether to display the backdrop.
@@ -22,2 +15,8 @@ *
     /**
+     * Whether to display the modal in full screen.
+     *
+     * @default true
+     */
+    isFullScreen?: boolean;
+    /**
      * Whether to disable swipe and back drop click events.
@@ -51,5 +50,5 @@ *
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PropsType>, {
-    class: undefined;
     isBackdrop: boolean;
     isDragHandle: boolean;
+    isFullScreen: boolean;
     isPersistent: boolean;
@@ -62,5 +61,5 @@ isScrollLock: boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PropsType>, {
-    class: undefined;
     isBackdrop: boolean;
     isDragHandle: boolean;
+    isFullScreen: boolean;
     isPersistent: boolean;
@@ -73,5 +72,5 @@ isScrollLock: boolean;
 }, {
-    class: any;
     isBackdrop: boolean;
     isDragHandle: boolean;
+    isFullScreen: boolean;
     isPersistent: boolean;
@@ -78,0 +77,0 @@ isScrollLock: boolean;

dist/vueSwipeModal.js

@@ -1,54 +0,54 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('._swipe-modal_5aug2_1{position:fixed;top:auto;bottom:var(--4b54af27);box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;margin:0;overflow:hidden;border:none}._swipe-modal_5aug2_1::backdrop{background-color:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}._swipe-modal-content_5aug2_21{width:100%;height:100%}._swipe-modal-content_5aug2_21>._panel_5aug2_25{max-height:calc(100dvh - 36px);overflow-y:scroll}._default-modal-style_5aug2_30{box-sizing:border-box;width:100%;color:#fff;background-color:#1d1b20;border-radius:1rem 1rem 0 0}@media (prefers-color-scheme: light){._default-modal-style_5aug2_30{color:#000;background-color:#f7f2fa;box-shadow:0 1px 4px #0000005e}}._swipe-modal-drag-handle-wrapper_5aug2_45{position:relative;top:0;flex-shrink:0;height:36px;cursor:grab}._swipe-modal-drag-handle-wrapper_5aug2_45:active{cursor:grabbing}._swipe-modal-drag-handle_5aug2_45{position:absolute;left:50%;width:32px;height:4px;margin:16px 0;content:"";background-color:#ccc;border-radius:2px;transform:translate(-50%)}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { getCurrentInstance as x, ref as p, watch as z, nextTick as D, computed as O, defineComponent as N, useCssVars as Y, unref as A, onMounted as H, openBlock as L, createElementBlock as F, normalizeClass as E, createElementVNode as V, renderSlot as R, createCommentVNode as J } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode('.swipe-modal[data-v-8a63990a]{position:fixed;top:auto;bottom:var(--ef0a5750);box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;margin:0;overflow:hidden;border:none}.swipe-modal[data-v-8a63990a]::backdrop{background-color:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.swipe-modal-content[data-v-8a63990a]{width:100%;height:100%}.swipe-modal-content>.panel[data-v-8a63990a]{max-height:calc(100dvh - 36px);overflow-y:scroll}.modal-style[data-v-8a63990a]{box-sizing:border-box;width:100%;color:#fff;background-color:#1d1b20;border-radius:1rem 1rem 0 0}@media (prefers-color-scheme: light){.modal-style[data-v-8a63990a]{color:#000;background-color:#f7f2fa;box-shadow:0 1px 4px #0000005e}}.swipe-modal-drag-handle-wrapper[data-v-8a63990a]{position:relative;top:0;flex-shrink:0;height:36px;cursor:grab}.swipe-modal-drag-handle-wrapper[data-v-8a63990a]:active{cursor:grabbing}.swipe-modal-drag-handle[data-v-8a63990a]{position:absolute;left:50%;width:32px;height:4px;margin:16px 0;content:"";background-color:#ccc;border-radius:2px;transform:translate(-50%)}')),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { getCurrentInstance as z, ref as m, watch as _, nextTick as O, computed as R, defineComponent as D, useCssVars as F, unref as N, onMounted as Y, openBlock as I, createElementBlock as A, createElementVNode as C, renderSlot as $, createCommentVNode as H, pushScopeId as L, popScopeId as J } from "vue";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const G = (s) => typeof s < "u";
-function U(s) {
-  return JSON.parse(JSON.stringify(s));
+const G = (a) => typeof a < "u";
+function U(a) {
+  return JSON.parse(JSON.stringify(a));
 }
-function W(s, c, l, $ = {}) {
-  var t, M, f;
+function W(a, d, o, k = {}) {
+  var t, B, f;
   const {
-    clone: a = !1,
-    passive: g = !1,
-    eventName: b,
+    clone: u = !1,
+    passive: b = !1,
+    eventName: h,
     deep: i = !1,
     defaultValue: r,
     shouldEmit: v
-  } = $, d = x(), S = l || (d == null ? void 0 : d.emit) || ((t = d == null ? void 0 : d.$emit) == null ? void 0 : t.bind(d)) || ((f = (M = d == null ? void 0 : d.proxy) == null ? void 0 : M.$emit) == null ? void 0 : f.bind(d == null ? void 0 : d.proxy));
-  let m = b;
-  c || (c = "modelValue"), m = m || `update:${c.toString()}`;
-  const y = (u) => a ? typeof a == "function" ? a(u) : U(u) : u, T = () => G(s[c]) ? y(s[c]) : r, B = (u) => {
-    v ? v(u) && S(m, u) : S(m, u);
+  } = k, c = z(), E = o || (c == null ? void 0 : c.emit) || ((t = c == null ? void 0 : c.$emit) == null ? void 0 : t.bind(c)) || ((f = (B = c == null ? void 0 : c.proxy) == null ? void 0 : B.$emit) == null ? void 0 : f.bind(c == null ? void 0 : c.proxy));
+  let y = h;
+  d || (d = "modelValue"), y = y || `update:${d.toString()}`;
+  const p = (s) => u ? typeof u == "function" ? u(s) : U(s) : s, M = () => G(a[d]) ? p(a[d]) : r, V = (s) => {
+    v ? v(s) && E(y, s) : E(y, s);
   };
-  if (g) {
-    const u = T(), k = p(u);
-    let h = !1;
-    return z(
-      () => s[c],
-      (w) => {
-        h || (h = !0, k.value = y(w), D(() => h = !1));
+  if (b) {
+    const s = M(), T = m(s);
+    let g = !1;
+    return _(
+      () => a[d],
+      (P) => {
+        g || (g = !0, T.value = p(P), O(() => g = !1));
       }
-    ), z(
-      k,
-      (w) => {
-        !h && (w !== s[c] || i) && B(w);
+    ), _(
+      T,
+      (P) => {
+        !g && (P !== a[d] || i) && V(P);
       },
       { deep: i }
-    ), k;
+    ), T;
   } else
-    return O({
+    return R({
       get() {
-        return T();
+        return M();
       },
-      set(u) {
-        B(u);
+      set(s) {
+        V(s);
       }
     });
 }
-const I = /* @__PURE__ */ N({
+const X = (a) => (L("data-v-8a63990a"), a = a(), J(), a), j = /* @__PURE__ */ X(() => /* @__PURE__ */ C("div", { class: "swipe-modal-drag-handle" }, null, -1)), q = /* @__PURE__ */ D({
   __name: "SwipeModal",
   props: {
-    class: { default: void 0 },
     isBackdrop: { type: Boolean, default: !0 },
     isDragHandle: { type: Boolean, default: !0 },
+    isFullScreen: { type: Boolean, default: !0 },
     isPersistent: { type: Boolean, default: !1 },
@@ -60,32 +60,32 @@ isScrollLock: { type: Boolean, default: !0 },
   emits: ["update:modelValue"],
-  setup(s, { emit: c }) {
-    Y((e) => ({
-      "4b54af27": A(a)
+  setup(a, { emit: d }) {
+    F((e) => ({
+      ef0a5750: N(u)
     }));
-    const l = s, $ = c, t = p(null), M = p(null), f = W(l, "modelValue", $), a = p("-100%"), g = p(!1), b = p(0), i = p(0), r = p("close"), v = O(() => {
+    const o = a, k = d, t = m(null), B = m(null), f = W(o, "modelValue", k), u = m("-100%"), b = m(!1), h = m(0), i = m(0), r = m("close"), v = R(() => {
       var e;
-      return l.snapPoint ? l.snapPoint === "content" ? `calc(${((e = M.value) == null ? void 0 : e.getBoundingClientRect().height) || 0}px + 36px - 100%)` : `calc(${l.snapPoint} - 100%)` : "0px";
-    }), d = ({
+      return o.snapPoint ? o.snapPoint === "auto" ? `calc(${((e = B.value) == null ? void 0 : e.getBoundingClientRect().height) || 0}px + 36px - 100%)` : `calc(${o.snapPoint} - 100%)` : "0px";
+    }), c = ({
       mouseEvent: e,
-      touchEvent: o,
-      eventType: n
+      touchEvent: n,
+      eventType: l
     }) => {
-      n === "mouse" ? b.value = e.y : b.value = o.touches[0].clientY, g.value = !0;
-    }, S = ({
+      l === "mouse" ? h.value = e.y : h.value = n.touches[0].clientY, b.value = !0;
+    }, E = ({
       mouseEvent: e,
-      touchEvent: o,
-      eventType: n
+      touchEvent: n,
+      eventType: l
     }) => {
-      var P, _;
-      if (g.value && (n === "mouse" ? i.value = b.value - e.y : i.value = b.value - o.touches[0].clientY, !(i.value > 0 && r.value === "full" || (((P = t.value) == null ? void 0 : P.getBoundingClientRect().top) || 0) < 0)))
-        return (_ = t.value) == null || _.style.setProperty("user-select", "none"), r.value === "snap" ? a.value = `calc(${v.value} + ${i.value}px)` : a.value = `calc(0% + ${i.value}px)`;
-    }, m = () => {
+      var w, S;
+      if (b.value && (l === "mouse" ? i.value = h.value - e.y : i.value = h.value - n.touches[0].clientY, !(i.value > 0 && r.value === "full" || (((w = t.value) == null ? void 0 : w.getBoundingClientRect().top) || 0) < 0) && !(!o.isFullScreen && i.value > 0)))
+        return (S = t.value) == null || S.style.setProperty("user-select", "none"), r.value === "snap" ? u.value = `calc(${v.value} + ${i.value}px)` : u.value = `calc(0% + ${i.value}px)`;
+    }, y = () => {
       var e;
-      if (g.value = !1, (e = t.value) == null || e.style.removeProperty("user-select"), Math.abs(i.value) > 36) {
+      if (b.value = !1, (e = t.value) == null || e.style.removeProperty("user-select"), Math.abs(i.value) > 36) {
         if (i.value < 0)
           switch (r.value) {
             case "full":
-              return l.snapPoint ? T() : l.isPersistent ? y() : f.value = !1;
+              return o.snapPoint ? M() : o.isPersistent ? p() : f.value = !1;
             case "snap":
-              return l.isPersistent ? y() : f.value = !1;
+              return o.isPersistent ? p() : f.value = !1;
             default:
@@ -96,3 +96,3 @@ return;
           case "snap":
-            return B();
+            return o.isFullScreen ? V() : p();
           default:
@@ -102,10 +102,10 @@ return;
       }
-      return y();
-    }, y = () => {
+      return p();
+    }, p = () => {
       if (!t.value)
         return;
-      const e = () => r.value === "snap" ? l.snapPoint ? v.value : "0%" : r.value === "full" ? "0%" : "-100%";
+      const e = () => r.value === "snap" ? o.snapPoint ? v.value : "0%" : r.value === "full" ? "0%" : "-100%";
       t.value.animate(
         [
-          { bottom: a.value },
+          { bottom: u.value },
           {
@@ -120,8 +120,8 @@ bottom: e()
       ).onfinish = () => {
-        i.value = 0, a.value = e();
+        i.value = 0, u.value = e();
       };
-    }, T = () => {
-      t.value && l.snapPoint && (t.value.animate(
+    }, M = () => {
+      t.value && o.snapPoint && (t.value.animate(
         [
-          { bottom: a.value },
+          { bottom: u.value },
           {
@@ -136,8 +136,8 @@ bottom: v.value
       ).onfinish = () => {
-        i.value = 0, a.value = v.value, r.value = "snap";
+        i.value = 0, u.value = v.value, r.value = "snap";
       });
-    }, B = () => {
+    }, V = () => {
       t.value && (t.value.animate(
         [
-          { bottom: a.value },
+          { bottom: u.value },
           {
@@ -152,15 +152,15 @@ bottom: "0%"
       ).onfinish = () => {
-        i.value = 0, a.value = "0%", r.value = "full";
+        i.value = 0, u.value = "0%", r.value = "full";
       });
-    }, u = (e) => {
-      if (l.isBackdrop && e.target === e.currentTarget) {
-        if (l.isPersistent)
-          return y();
+    }, s = (e) => {
+      if (o.isBackdrop && e.target === e.currentTarget) {
+        if (o.isPersistent)
+          return p();
         f.value = !1;
       }
-    }, k = (e) => {
+    }, T = (e) => {
       e.stopPropagation();
-    }, h = () => {
+    }, g = () => {
       var e;
-      t.value && (l.isBackdrop ? t.value.showModal() : t.value.show(), (e = t.value) == null || e.style.setProperty("visibility", "visible"), t.value.animate([{ opacity: 0 }, { opacity: 1 }], {
+      t.value && (o.isBackdrop ? t.value.showModal() : t.value.show(), (e = t.value) == null || e.style.setProperty("visibility", "visible"), t.value.animate([{ opacity: 0 }, { opacity: 1 }], {
         duration: 200,
@@ -183,5 +183,5 @@ pseudoElement: "::backdrop",
       ).onfinish = () => {
-        r.value = l.snapPoint ? "snap" : "full", a.value = v.value, l.isScrollLock && C("hidden");
+        r.value = o.snapPoint ? "snap" : "full", u.value = v.value, o.isScrollLock && x("hidden");
       });
-    }, w = () => {
+    }, P = () => {
       t.value && (t.value.animate([{ opacity: 1 }, { opacity: 0 }], {
@@ -194,3 +194,3 @@ duration: 300,
           {
-            bottom: a.value
+            bottom: u.value
           },
@@ -206,6 +206,6 @@ {
       ).onfinish = () => {
-        var e, o, n;
-        a.value = "-100%", r.value = "close", g.value = !1, (e = t.value) == null || e.close(), (o = t.value) == null || o.style.setProperty("display", "initial"), (n = t.value) == null || n.style.setProperty("visibility", "hidden"), C("reset");
+        var e, n, l;
+        u.value = "-100%", r.value = "close", b.value = !1, (e = t.value) == null || e.close(), (n = t.value) == null || n.style.setProperty("display", "initial"), (l = t.value) == null || l.style.setProperty("visibility", "hidden"), x("reset");
       });
-    }, C = (e) => {
+    }, x = (e) => {
       if (e === "reset") {
@@ -215,83 +215,69 @@ document.documentElement.style.removeProperty("overflow"), document.documentElement.style.removeProperty("overscroll-behavior-y");
       }
-      let o = window, n, P, _;
-      document.defaultView ? (o = document.defaultView, n = o.scrollX, P = o.scrollY) : (_ = document.documentElement, n = _.scrollLeft, P = _.scrollTop), document.documentElement.style.overflow = e, document.documentElement.style.overscrollBehaviorY = e === "auto" ? "auto" : "none", o.scrollTo(n, P);
+      let n = window, l, w, S;
+      document.defaultView ? (n = document.defaultView, l = n.scrollX, w = n.scrollY) : (S = document.documentElement, l = S.scrollLeft, w = S.scrollTop), document.documentElement.style.overflow = e, document.documentElement.style.overscrollBehaviorY = e === "auto" ? "auto" : "none", n.scrollTo(l, w);
     };
-    return z(
+    return _(
       () => f.value,
       (e) => {
-        e ? h() : w();
+        e ? g() : P();
       }
-    ), z(
-      () => l.isScrollLock,
+    ), _(
+      () => o.isScrollLock,
       (e) => {
-        C(e ? "hidden" : "auto");
+        x(e ? "hidden" : "auto");
       }
-    ), H(() => {
+    ), Y(() => {
       t.value && (f.value || (t.value.style.setProperty("display", "initial"), t.value.style.setProperty("visibility", "hidden")));
-    }), (e, o) => (L(), F("dialog", {
+    }), (e, n) => (I(), A("dialog", {
       ref_key: "modalRef",
       ref: t,
-      class: E([
-        l.class ? l.class : e.$style["default-modal-style"],
-        e.$style["swipe-modal"]
-      ]),
-      onClick: u
+      class: "swipe-modal modal-style",
+      onClick: s
     }, [
-      V("div", {
+      C("div", {
         tabindex: "-1",
-        class: E(e.$style["swipe-modal-content"]),
-        onClick: k
+        class: "swipe-modal-content",
+        onClick: T
       }, [
-        V("div", {
-          class: E(e.$style["swipe-modal-drag-handle-wrapper"]),
-          onMousedown: o[0] || (o[0] = (n) => d({
-            mouseEvent: n,
+        C("div", {
+          class: "swipe-modal-drag-handle-wrapper",
+          onMousedown: n[0] || (n[0] = (l) => c({
+            mouseEvent: l,
             eventType: "mouse"
           })),
-          onMousemove: o[1] || (o[1] = (n) => S({
-            mouseEvent: n,
+          onMousemove: n[1] || (n[1] = (l) => E({
+            mouseEvent: l,
             eventType: "mouse"
           })),
-          onMouseup: m,
-          onTouchstart: o[2] || (o[2] = (n) => d({
-            touchEvent: n,
+          onMouseup: y,
+          onTouchstart: n[2] || (n[2] = (l) => c({
+            touchEvent: l,
             eventType: "touch"
           })),
-          onTouchmove: o[3] || (o[3] = (n) => S({
-            touchEvent: n,
+          onTouchmove: n[3] || (n[3] = (l) => E({
+            touchEvent: l,
             eventType: "touch"
           })),
-          onTouchend: m
+          onTouchend: y
         }, [
-          e.isDragHandle ? R(e.$slots, "drag-handle", { key: 0 }, () => [
-            V("div", {
-              class: E(e.$style["swipe-modal-drag-handle"])
-            }, null, 2)
-          ]) : J("", !0)
-        ], 34),
-        V("div", {
+          e.isDragHandle ? $(e.$slots, "drag-handle", { key: 0 }, () => [
+            j
+          ], !0) : H("", !0)
+        ], 32),
+        C("div", {
           ref_key: "panelRef",
-          ref: M,
-          class: E(e.$style.panel)
+          ref: B,
+          class: "panel"
         }, [
-          R(e.$slots, "default")
-        ], 2)
-      ], 2)
-    ], 2));
+          $(e.$slots, "default", {}, void 0, !0)
+        ], 512)
+      ])
+    ], 512));
   }
-}), X = "_panel_5aug2_25", j = {
-  "swipe-modal": "_swipe-modal_5aug2_1",
-  "swipe-modal-content": "_swipe-modal-content_5aug2_21",
-  panel: X,
-  "default-modal-style": "_default-modal-style_5aug2_30",
-  "swipe-modal-drag-handle-wrapper": "_swipe-modal-drag-handle-wrapper_5aug2_45",
-  "swipe-modal-drag-handle": "_swipe-modal-drag-handle_5aug2_45"
-}, q = (s, c) => {
-  const l = s.__vccOpts || s;
-  for (const [$, t] of c)
-    l[$] = t;
-  return l;
-}, K = {
-  $style: j
-}, Z = /* @__PURE__ */ q(I, [["__cssModules", K]]);
+}), K = (a, d) => {
+  const o = a.__vccOpts || a;
+  for (const [k, t] of d)
+    o[k] = t;
+  return o;
+}, Z = /* @__PURE__ */ K(q, [["__scopeId", "data-v-8a63990a"]]);
 export {
@@ -298,0 +284,0 @@ Z as SwipeModal,

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
   "private": false,
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0",
   "description": "Swipeable Bottom Sheet library for vue2 and vue3",
@@ -50,3 +50,3 @@ "license": "MIT",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3270",
     "build": "vue-tsc && vite build",
@@ -62,11 +62,11 @@ "build:watch": "vite build --watch",
     "gen:unimport-type": "node ./.scripts/genUnimportType.js",
-    "publish:major": "pnpm build && pnpm dlx release-it major --ci",
-    "publish:minor": "pnpm build && pnpm dlx release-it minor --ci",
-    "publish:patch": "pnpm build && pnpm dlx release-it patch --ci",
-    "publish:major-beta": "pnpm build && pnpm dlx release-it major --preRelease=beta --ci",
-    "publish:minor-beta": "pnpm build && pnpm dlx release-it minor --preRelease=beta --ci",
-    "publish:patch-beta": "pnpm build && pnpm dlx release-it patch --preRelease=beta --ci",
-    "publish:prerelease": "pnpm build && pnpm dlx release-it prerelease --ci",
-    "publish:major-beta:no-ci": "pnpm build && pnpm dlx release-it major --preRelease=beta",
-    "publish:prerelease:no-ci": "pnpm build && pnpm dlx release-it prerelease"
+    "publish:major": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it major --ci",
+    "publish:minor": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it minor --ci",
+    "publish:patch": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it patch --ci",
+    "publish:major-beta": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it major --preRelease=beta --ci",
+    "publish:minor-beta": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it minor --preRelease=beta --ci",
+    "publish:patch-beta": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it patch --preRelease=beta --ci",
+    "publish:prerelease": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it prerelease --ci",
+    "publish:major-beta:no-ci": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it major --preRelease=beta",
+    "publish:prerelease:no-ci": "pnpm gen:unimport-type && pnpm build && pnpm dlx release-it prerelease"
   },
@@ -98,3 +98,3 @@ "dependencies": {
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "vite": "^5.0.6",
     "vite-plugin-css-injected-by-js": "^3.3.0",
@@ -101,0 +101,0 @@ "vue-tsc": "^1.8.5"

README.md

@@ -15,4 +15,8 @@ # @takuma-ru/vue-swipe-modal
 ## DEMO
-[Directory]()
+[Directory](https://github.com/takuma-ru/vue-swipe-modal/tree/main/demo/vue)
 
+## Documentation
+
+[vue-swipe-modal-docs.takumaru.dev](https://vue-swipe-modal-docs.takumaru.dev/)
+
 ## Getting Started
@@ -22,3 +26,3 @@ ### 1. Install
 ```shell
-yarn add @takuma-ru/vue-swipe-modal@^5.0.0
+npm i @takuma-ru/vue-swipe-modal@^5.0.0
 ```
@@ -28,13 +32,44 @@
 ```shell
-yarn add @takuma-ru/vue-swipe-modal@^4.0.0 @vue/composition-api
+npm i @takuma-ru/vue-swipe-modal@^4.0.0 @vue/composition-api
 ```
+### 2. Use
+Import and use the modal with the vue file you want to use.
 
-### 2. How to use
-#### [For vue2](https://vue-swipe-modal-docs.takumaru.dev/started/vue2) <br>
-#### [For vue3](https://vue-swipe-modal-docs.takumaru.dev/started/vue3) <br>
+```vue
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { SwipeModal } from "@takuma-ru/vue-swipe-modal"
 
-## Props
-[Prop description page](https://vue-swipe-modal-docs.takumaru.dev/props)
+const isOpen = ref(false)
+</script>
 
+<template>
+  <button @click="isOpen = true">Open modal</button>
+  <SwipeModal
+    v-model="isOpen"
+    snapPoint="auto"
+  >
+    <button @click="isOpen = false">Close modal</button>
+    Modal content
+  </SwipeModal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.modal-style) {
+  box-sizing: border-box;
+  width: 100%;
+  color: white;
+  background-color: #1d1b20;
+  border-radius: 1rem 1rem 0 0;
+
+  @media (prefers-color-scheme: light) {
+    color: black;
+    background-color: #f7f2fa;
+    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
+  }
+}
+</style>
+```
+
 ## License
 [MIT - Copyright (c) 2023 takuma-ru](https://github.com/takuma-ru/vue-swipe-modal/blob/main/LICENSE.md)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38184

increased by0.08%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

72

increased by94.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

461

decreased by-3.56%

No dependency changes