@featherds/app-layout - npm Package Compare versions

Comparing version 0.2.12 to 0.9.1

dist/app.es.js

@@ -1,2 +0,6 @@
-import { ref, provide, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass } from "vue";
+import { FocusTrap } from "@featherds/dialog";
+import { useCloseOnEsc } from "@featherds/composables/modal/CloseOnEsc";
+import { useRestoreFocus } from "@featherds/composables/modal/RestoreFocus";
+import { useOutsideClick } from "@featherds/composables/events/OutsideClick";
+import { ref, computed, provide, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, createVNode, withCtx, pushScopeId, popScopeId } from "vue";
 var FeatherAppLayout_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -21,4 +25,17 @@ var _export_sfc = (sfc, props) => {
     const full = ref(props.contentLayout === "full");
+    const _expand = ref(false);
+    const active = ref(false);
+    const railContent = ref();
+    const expanded = computed(() => {
+      return active.value && _expand.value;
+    });
     if (context.slots.rail) {
       full.value = true;
+      provide("feather-app-layout-expanded", () => {
+        active.value = true;
+        return expanded;
+      });
+      provide("feather-app-layout-expander", () => {
+        return { active, expand: () => _expand.value = true };
+      });
     }
@@ -28,14 +45,36 @@ if (full.value) {
     }
+    useRestoreFocus(expanded);
+    watch(useCloseOnEsc(expanded), () => {
+      _expand.value = false;
+    });
+    const activate = useOutsideClick(railContent, () => {
+      _expand.value = false;
+    });
+    watch(expanded, (v) => {
+      activate.value = v;
+    });
     return {
-      full
+      full,
+      active,
+      expanded,
+      railContent
     };
+  },
+  components: {
+    FocusTrap
   }
 };
+const _withScopeId = (n) => (pushScopeId("data-v-0ea90738"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "app-layout" };
 const _hoisted_2 = { class: "app-header" };
 const _hoisted_3 = { class: "app-main" };
-const _hoisted_4 = { class: "app-aside" };
-const _hoisted_5 = { class: "app-content" };
-const _hoisted_6 = { class: "app-footer" };
+const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "app-rail-modal-backdrop" }, null, -1));
+const _hoisted_5 = {
+  class: "app-rail-content",
+  ref: "railContent"
+};
+const _hoisted_6 = { class: "app-content" };
+const _hoisted_7 = { class: "app-footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FocusTrap = resolveComponent("FocusTrap");
   return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -46,6 +85,21 @@ createElementVNode("div", _hoisted_2, [
     createElementVNode("div", _hoisted_3, [
-      createElementVNode("div", _hoisted_4, [
-        renderSlot(_ctx.$slots, "rail", {}, void 0, true)
-      ]),
-      createElementVNode("div", _hoisted_5, [
+      createElementVNode("div", {
+        class: normalizeClass(["app-aside app-rail", {
+          responsive: $setup.active,
+          show: $setup.expanded
+        }])
+      }, [
+        _hoisted_4,
+        createElementVNode("div", _hoisted_5, [
+          createVNode(_component_FocusTrap, {
+            enable: $setup.active && $setup.expanded
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "rail", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["enable"])
+        ], 512)
+      ], 2),
+      createElementVNode("div", _hoisted_6, [
         createElementVNode("div", {
@@ -58,3 +112,3 @@ class: normalizeClass(["app-content-container", { "full-width": $props.contentLayout === "full" }])
     ]),
-    createElementVNode("div", _hoisted_6, [
+    createElementVNode("div", _hoisted_7, [
       renderSlot(_ctx.$slots, "footer", {}, void 0, true)
@@ -64,3 +118,3 @@ ])
 }
-var FeatherAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-fa28dad4"]]);
+var FeatherAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0ea90738"]]);
 export { FeatherAppLayout };

package.json

 {
   "name": "@featherds/app-layout",
-  "version": "0.2.12",
+  "version": "0.9.1",
   "publishConfig": {
@@ -12,3 +12,3 @@ "access": "public"
   "dependencies": {
-    "@featherds/styles": "^0.2.12",
+    "@featherds/styles": "^0.9.1",
     "vue": "^3.1.0-0"
@@ -21,3 +21,3 @@ },
   "types": "./src/index.d.ts",
-  "gitHead": "dfaa7510202c7d4ff72011c943bd0bab78b24eaf"
+  "gitHead": "9590974ac2d224b5706292752c550dc615c7cff5"
 }

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

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

Improved metrics

Total package byte prevSize

21106

increased by19.9%

Lines of code

179

increased by14.74%

Dependency changes

• + Added@featherds/styles@0.9.6(transitive)

• - Removed@featherds/styles@0.2.12(transitive)

• Updated@featherds/styles@^0.9.1