@featherds/dialog - npm Package Compare versions

Comparing version 0.10.15 to 0.10.16

dist/app.es.js

@@ -17,4 +17,3 @@ var __defProp = Object.defineProperty;
 };
-import { defineComponent, ref, toRef, computed, nextTick, openBlock, createElementBlock, createElementVNode, renderSlot, resolveComponent, normalizeClass, withModifiers, createVNode, watch, withDirectives, Transition, withCtx, vShow, createBlock, toDisplayString, createCommentVNode } from "vue";
-import { getElements, addLayer, removeLayer } from "@featherds/composables/modal/Layers";
+import { defineComponent, ref, nextTick, openBlock, createElementBlock, createElementVNode, renderSlot, resolveComponent, normalizeClass, withModifiers, createVNode, toRef, computed, watch, createBlock, Teleport, withDirectives, Transition, withCtx, vShow, toDisplayString, createCommentVNode } from "vue";
 import { FeatherIcon } from "@featherds/icon";
@@ -38,5 +37,2 @@ import Close from "@featherds/icon/navigation/Cancel";
     required: true
-  },
-  layer: {
-    type: Object
   }
@@ -51,16 +47,5 @@ };
   },
-  setup(props2) {
+  setup() {
     const content = ref();
     const ignoreUtilFocusChanges = ref(false);
-    const layer = toRef(props2, "layer");
-    const contentAndLayers = computed(() => {
-      const result = [];
-      if (content.value) {
-        result.push(content.value);
-      }
-      if (layer.value) {
-        result.push(...getElements(layer.value).value);
-      }
-      return result;
-    });
     const comparePositionInDOM = (a, b) => {
@@ -145,3 +130,3 @@ let result = a.compareDocumentPosition(b);
         var target = document.activeElement;
-        if (contentAndLayers.value.some((el) => el.contains(target))) {
+        if (content.value.contains(target)) {
           lastFocus.value = target;
@@ -275,3 +260,3 @@ return;
 var DialogClose = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-fc0f3f00"]]);
-var FeatherDialog_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".feather-dialog[data-v-6904ab82] {\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100vh;\n  width: 100vw;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: var(--feather-zindex-modal);\n}\n.feather-dialog.relative[data-v-6904ab82] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: auto;\n  width: auto;\n}\n.content[data-v-6904ab82] {\n  z-index: 1;\n  background-color: var(--feather-surface);\n  border-radius: 2px;\n  box-shadow: var(--feather-shadow-24);\n  background-color: var(--feather-elevation-background-24);\n  position: relative;\n  margin: 0 var(--feather-spacing-xl);\n}\n.content[data-v-6904ab82]:focus-visible,\n.focus-area[data-v-6904ab82]:focus-visible {\n  outline: none;\n}\n.dialog-body[data-v-6904ab82] {\n  padding: 1.5rem;\n  color: var(--feather-secondary-text-on-surface);\n}\n.dialog-body header[data-v-6904ab82] {\n  color: var(--feather-primary-text-on-surface);\n  font-family: var(--feather-header-font-family);\n  color: var(--feather-primary-text-on-surface);\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-size: var(--feather-headline4-font-size);\n  line-height: var(--feather-headline4-line-height);\n  letter-spacing: var(--feather-headline4-letter-spacing);\n  font-weight: var(--feather-headline4-font-weight);\n  text-transform: var(--feather-headline4-text-transform);\n  font-style: var(--feather-headline4-font-style);\n  margin-bottom: 1.5rem;\n  line-height: 1.25em;\n}\n.dialog-body p[data-v-6904ab82] {\n  padding: 0;\n}\n.dialog-footer[data-v-6904ab82] {\n  padding: 0.5rem;\n  text-align: right;\n}\n.dialog-footer[data-v-6904ab82] .btn {\n  margin: 0;\n}\n.dialog-footer[data-v-6904ab82] .btn + .btn {\n  margin-left: 0.5rem;\n}\n.dialog-content[data-v-6904ab82] {\n  display: flex;\n}\n[data-v-6904ab82] .closeButton {\n  margin-top: 0.8125rem;\n  margin-right: 0.8125rem;\n}\n.trap[data-v-6904ab82] {\n  z-index: 1;\n}\n.fade-enter-active[data-v-6904ab82],\n.fade-leave-active[data-v-6904ab82] {\n  transition: opacity 0.5s ease;\n}\n.fade-enter-to[data-v-6904ab82],\n.fade-leave-from[data-v-6904ab82] {\n  opacity: 1;\n}\n.fade-enter-from[data-v-6904ab82],\n.fade-leave-to[data-v-6904ab82] {\n  opacity: 0;\n}\n.delayFade-enter-active[data-v-6904ab82],\n.delayFade-leave-active[data-v-6904ab82] {\n  transition: opacity 0.5s ease;\n  transition-delay: 200ms;\n}\n.delayFade-enter-to[data-v-6904ab82],\n.delayFade-leave-from[data-v-6904ab82] {\n  opacity: 1;\n}\n.delayFade-enter-from[data-v-6904ab82],\n.delayFade-leave-to[data-v-6904ab82] {\n  opacity: 0;\n}\n.backdrop[data-v-6904ab82] {\n  flex: none;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100vh;\n  width: 100vw;\n  background-color: var(--feather-disabled-text-on-surface);\n}\n.backdrop.transparent[data-v-6904ab82] {\n  background-color: transparent;\n}\n.relative .backdrop[data-v-6904ab82] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: auto;\n  width: auto;\n}")();
+var FeatherDialog_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".feather-dialog[data-v-12292b75] {\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100vh;\n  width: 100vw;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: var(--feather-zindex-modal);\n}\n.feather-dialog.relative[data-v-12292b75] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: auto;\n  width: auto;\n}\n.content[data-v-12292b75] {\n  z-index: 1;\n  background-color: var(--feather-surface);\n  border-radius: 2px;\n  box-shadow: var(--feather-shadow-24);\n  background-color: var(--feather-elevation-background-24);\n  position: relative;\n  margin: 0 var(--feather-spacing-xl);\n}\n.content[data-v-12292b75]:focus-visible,\n.focus-area[data-v-12292b75]:focus-visible {\n  outline: none;\n}\n.dialog-body[data-v-12292b75] {\n  padding: 1.5rem;\n  color: var(--feather-secondary-text-on-surface);\n}\n.dialog-body header[data-v-12292b75] {\n  color: var(--feather-primary-text-on-surface);\n  font-family: var(--feather-header-font-family);\n  color: var(--feather-primary-text-on-surface);\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-size: var(--feather-headline4-font-size);\n  line-height: var(--feather-headline4-line-height);\n  letter-spacing: var(--feather-headline4-letter-spacing);\n  font-weight: var(--feather-headline4-font-weight);\n  text-transform: var(--feather-headline4-text-transform);\n  font-style: var(--feather-headline4-font-style);\n  margin-bottom: 1.5rem;\n  line-height: 1.25em;\n}\n.dialog-body p[data-v-12292b75] {\n  padding: 0;\n}\n.dialog-footer[data-v-12292b75] {\n  padding: 0.5rem;\n  text-align: right;\n}\n.dialog-footer[data-v-12292b75] .btn {\n  margin: 0;\n}\n.dialog-footer[data-v-12292b75] .btn + .btn {\n  margin-left: 0.5rem;\n}\n.dialog-content[data-v-12292b75] {\n  display: flex;\n}\n[data-v-12292b75] .closeButton {\n  margin-top: 0.8125rem;\n  margin-right: 0.8125rem;\n}\n.trap[data-v-12292b75] {\n  z-index: 1;\n}\n.fade-enter-active[data-v-12292b75],\n.fade-leave-active[data-v-12292b75] {\n  transition: opacity 0.5s ease;\n}\n.fade-enter-to[data-v-12292b75],\n.fade-leave-from[data-v-12292b75] {\n  opacity: 1;\n}\n.fade-enter-from[data-v-12292b75],\n.fade-leave-to[data-v-12292b75] {\n  opacity: 0;\n}\n.delayFade-enter-active[data-v-12292b75],\n.delayFade-leave-active[data-v-12292b75] {\n  transition: opacity 0.5s ease;\n  transition-delay: 200ms;\n}\n.delayFade-enter-to[data-v-12292b75],\n.delayFade-leave-from[data-v-12292b75] {\n  opacity: 1;\n}\n.delayFade-enter-from[data-v-12292b75],\n.delayFade-leave-to[data-v-12292b75] {\n  opacity: 0;\n}\n.backdrop[data-v-12292b75] {\n  flex: none;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100vh;\n  width: 100vw;\n  background-color: var(--feather-disabled-text-on-surface);\n}\n.backdrop.transparent[data-v-12292b75] {\n  background-color: transparent;\n}\n.relative .backdrop[data-v-12292b75] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: auto;\n  width: auto;\n}")();
 const LABELS = {
@@ -342,13 +327,10 @@ title: "REQUIRED",
     const shown = ref(props2.modelValue);
-    const layer = ref();
     watch(shown, (v) => {
       if (v) {
         context.emit("shown");
-        layer.value = addLayer(element, "modal");
       } else {
         context.emit("hidden");
-        removeLayer(layer.value);
       }
     });
-    return __spreadValues({ close, hasFooter, headerId, element, shown, layer }, labels);
+    return __spreadValues({ close, hasFooter, headerId, element, shown }, labels);
   },
@@ -378,67 +360,68 @@ components: {
   const _component_FocusTrap = resolveComponent("FocusTrap");
-  return withDirectives((openBlock(), createElementBlock("div", {
-    class: normalizeClass(["feather-dialog", { relative: _ctx.relative }])
-  }, [
-    createVNode(Transition, { name: "fade" }, {
-      default: withCtx(() => [
-        withDirectives(createElementVNode("div", _hoisted_1, null, 512), [
-          [vShow, _ctx.modelValue]
-        ])
-      ]),
-      _: 1
-    }),
-    createVNode(Transition, {
-      name: "delayFade",
-      onAfterEnter: _cache[0] || (_cache[0] = ($event) => _ctx.shown = true),
-      onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.shown = false)
-    }, {
-      default: withCtx(() => [
-        _ctx.modelValue ? (openBlock(), createBlock(_component_FocusTrap, {
-          key: 0,
-          enable: _ctx.shown && _ctx.modelValue,
-          class: "trap",
-          layer: _ctx.layer
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", {
-              class: "content",
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": _ctx.headerId,
-              "data-ref-id": "feather-dialog",
-              ref: "element"
-            }, [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("div", _hoisted_4, [
-                  !_ctx.hideTitle ? (openBlock(), createElementBlock("header", {
-                    key: 0,
-                    id: _ctx.headerId,
-                    "data-ref-id": "feather-dialog-header"
-                  }, toDisplayString(_ctx.titleLabel), 9, _hoisted_5)) : createCommentVNode("", true),
-                  createElementVNode("div", _hoisted_6, [
-                    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-                  ])
-                ]),
-                _ctx.hasFooter ? (openBlock(), createElementBlock("div", _hoisted_7, [
-                  renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                ])) : createCommentVNode("", true),
-                !_ctx.hideClose ? (openBlock(), createBlock(_component_DialogClose, {
-                  key: 1,
-                  "close-text": _ctx.closeLabel,
-                  onClose: _ctx.close,
-                  small: ""
-                }, null, 8, ["close-text", "onClose"])) : createCommentVNode("", true)
-              ])
-            ], 8, _hoisted_2)
-          ]),
-          _: 3
-        }, 8, ["enable", "layer"])) : createCommentVNode("", true)
-      ]),
-      _: 3
-    })
-  ], 2)), [
-    [vShow, _ctx.modelValue]
+  return openBlock(), createBlock(Teleport, { to: "body" }, [
+    withDirectives(createElementVNode("div", {
+      class: normalizeClass(["feather-dialog feather-styles", { relative: _ctx.relative }])
+    }, [
+      createVNode(Transition, { name: "fade" }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", _hoisted_1, null, 512), [
+            [vShow, _ctx.modelValue]
+          ])
+        ]),
+        _: 1
+      }),
+      createVNode(Transition, {
+        name: "delayFade",
+        onAfterEnter: _cache[0] || (_cache[0] = ($event) => _ctx.shown = true),
+        onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.shown = false)
+      }, {
+        default: withCtx(() => [
+          _ctx.modelValue ? (openBlock(), createBlock(_component_FocusTrap, {
+            key: 0,
+            enable: _ctx.shown && _ctx.modelValue,
+            class: "trap"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: "content",
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": _ctx.headerId,
+                "data-ref-id": "feather-dialog",
+                ref: "element"
+              }, [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    !_ctx.hideTitle ? (openBlock(), createElementBlock("header", {
+                      key: 0,
+                      id: _ctx.headerId,
+                      "data-ref-id": "feather-dialog-header"
+                    }, toDisplayString(_ctx.titleLabel), 9, _hoisted_5)) : createCommentVNode("", true),
+                    createElementVNode("div", _hoisted_6, [
+                      renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                    ])
+                  ]),
+                  _ctx.hasFooter ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                    renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+                  ])) : createCommentVNode("", true),
+                  !_ctx.hideClose ? (openBlock(), createBlock(_component_DialogClose, {
+                    key: 1,
+                    "close-text": _ctx.closeLabel,
+                    onClose: _ctx.close,
+                    small: ""
+                  }, null, 8, ["close-text", "onClose"])) : createCommentVNode("", true)
+                ])
+              ], 8, _hoisted_2)
+            ]),
+            _: 3
+          }, 8, ["enable"])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      })
+    ], 2), [
+      [vShow, _ctx.modelValue]
+    ])
   ]);
 }
-var FeatherDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6904ab82"]]);
+var FeatherDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-12292b75"]]);
 export { DialogClose, FeatherDialog, FocusTrap };

package.json

 {
   "name": "@featherds/dialog",
-  "version": "0.10.15",
+  "version": "0.10.16",
   "publishConfig": {
@@ -12,6 +12,6 @@ "access": "public"
   "dependencies": {
-    "@featherds/composables": "^0.10.15",
-    "@featherds/icon": "^0.10.15",
-    "@featherds/styles": "^0.10.15",
-    "@featherds/utils": "^0.10.15",
+    "@featherds/composables": "^0.10.16",
+    "@featherds/icon": "^0.10.16",
+    "@featherds/styles": "^0.10.16",
+    "@featherds/utils": "^0.10.16",
     "vue": "^3.1.0-0"
@@ -24,3 +24,3 @@ },
   "types": "./src/index.d.ts",
-  "gitHead": "dda92cf914287cfa8899add188f45e5e778eca9b"
+  "gitHead": "b6f44a1ec626c4c2f10ac3cc9ee2bb0b815bdd1c"
 }

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

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

Worsened metrics

Total package byte prevSize

58440

decreased by-1.68%

Lines of code

947

decreased by-1.76%

Dependency changes

• + Addedmagic-string@0.30.13(transitive)

• + Addednanoid@3.3.7(transitive)

• - Removedmagic-string@0.30.14(transitive)

• - Removednanoid@3.3.8(transitive)

• Updated@featherds/composables@^0.10.16

• Updated@featherds/icon@^0.10.16

• Updated@featherds/styles@^0.10.16

• Updated@featherds/utils@^0.10.16