@featherds/app-layout - npm Package Compare versions

Comparing version 0.10.14 to 0.10.15

dist/app.es.js

@@ -1,7 +0,4 @@
-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 { defineComponent, 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 = /* @__PURE__ */ (() => ".app-layout[data-v-a3ecb154] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.app-header[data-v-a3ecb154],\n.app-footer[data-v-a3ecb154] {\n  flex: none;\n}\n.app-main[data-v-a3ecb154] {\n  flex: 1;\n  display: flex;\n}\n.app-content[data-v-a3ecb154] {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n.app-content > .app-content-container[data-v-a3ecb154] {\n  max-width: var(--feather-content-width);\n  width: 100%;\n}\n.app-content > .app-content-container.full-width[data-v-a3ecb154] {\n  max-width: none;\n}\n.app-aside[data-v-a3ecb154] {\n  flex: none;\n}\n@media (max-width: 89.0625rem) {\n.app-rail.responsive .app-rail-content[data-v-a3ecb154] {\n    position: fixed;\n    left: 0;\n    top: 0;\n    box-shadow: var(--feather-shadow-24);\n    background-color: var(--feather-elevation-background-24);\n    z-index: var(--feather-zindex-modal);\n    transition: transform 280ms ease-in-out;\n    transform: translateX(-100%);\n}\n.app-rail.responsive .app-rail-modal-backdrop[data-v-a3ecb154] {\n    display: none;\n    position: fixed;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    z-index: var(--feather-zindex-modal-backdrop);\n    background-color: var(--feather-disabled-text-on-surface);\n}\n.app-rail.responsive.show .app-rail-content[data-v-a3ecb154] {\n    transform: translateX(0);\n}\n.app-rail.responsive.show .app-rail-modal-backdrop[data-v-a3ecb154] {\n    display: block;\n}\n}")();
+import { defineComponent, ref, computed, provide, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, toDisplayString, onMounted } from "vue";
+import { useScroll } from "@featherds/composables/events/Scroll";
+var FeatherAppLayout_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => '.app-layout[data-v-2895ee9d] {\n  height: 100%;\n  min-height: 100vh;\n  display: grid;\n  grid-template-areas: "header header" "rail main" "rail footer";\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  grid-template-columns: auto minmax(0, 1fr);\n}\n.app-layout.vertical[data-v-2895ee9d] {\n  grid-template-areas: "header rail" "header main" "header footer";\n}\n.app-header[data-v-2895ee9d] {\n  grid-area: header;\n}\n.app-footer[data-v-2895ee9d] {\n  grid-area: footer;\n}\n.app-content[data-v-2895ee9d] {\n  grid-area: main;\n}\n.app-aside[data-v-2895ee9d] {\n  grid-area: rail;\n}\n.app-content[data-v-2895ee9d] {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n.app-content > .app-content-container[data-v-2895ee9d] {\n  max-width: var(--feather-content-width);\n  width: 100%;\n}\n.app-content > .app-content-container.full-width[data-v-2895ee9d] {\n  max-width: none;\n}')();
 var _export_sfc = (sfc, props2) => {
@@ -14,3 +11,3 @@ const target = sfc.__vccOpts || sfc;
 };
-const props = {
+const props$2 = {
   contentLayout: {
@@ -22,8 +19,16 @@ type: String,
     }
+  },
+  navLayout: {
+    type: String,
+    default: "horizontal",
+    validator: (v) => {
+      return ["vertical", "horizontal"].indexOf(v) > -1;
+    }
   }
 };
-const _sfc_main = defineComponent({
-  props,
+const _sfc_main$2 = defineComponent({
+  props: props$2,
   setup(props2, context) {
     const full = ref(props2.contentLayout === "full");
+    ref(props2.navLayout);
     const _expand = ref(false);
@@ -37,5 +42,6 @@ const active = ref(false);
       full.value = true;
+      const collapse = () => _expand.value = false;
       provide("feather-app-layout-expanded", () => {
         active.value = true;
-        return expanded;
+        return { expanded, collapse };
       });
@@ -49,12 +55,2 @@ provide("feather-app-layout-expander", () => {
     }
-    useRestoreFocus(expanded);
-    watch(useCloseOnEsc(expanded), () => {
-      _expand.value = false;
-    });
-    const activate = useOutsideClick(railContent, () => {
-      _expand.value = false;
-    });
-    watch(expanded, (v) => {
-      activate.value = v;
-    });
     return {
@@ -66,57 +62,120 @@ full,
     };
-  },
-  components: {
-    FocusTrap
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-a3ecb154"), 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 = /* @__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, [
+const _hoisted_1$1 = { class: "app-header" };
+const _hoisted_2 = { class: "app-aside" };
+const _hoisted_3 = { class: "app-content" };
+const _hoisted_4 = { class: "app-footer" };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["app-layout", _ctx.navLayout])
+  }, [
+    createElementVNode("div", _hoisted_1$1, [
+      _ctx.navLayout === "horizontal" ? renderSlot(_ctx.$slots, "header", { key: 0 }, void 0, true) : createCommentVNode("", true),
+      _ctx.navLayout === "vertical" ? renderSlot(_ctx.$slots, "rail", { key: 1 }, void 0, true) : createCommentVNode("", true)
+    ]),
     createElementVNode("div", _hoisted_2, [
-      renderSlot(_ctx.$slots, "header", {}, void 0, true)
+      _ctx.navLayout === "vertical" ? renderSlot(_ctx.$slots, "header", { key: 0 }, void 0, true) : createCommentVNode("", true),
+      _ctx.navLayout === "horizontal" ? renderSlot(_ctx.$slots, "rail", { key: 1 }, void 0, true) : createCommentVNode("", true)
     ]),
     createElementVNode("div", _hoisted_3, [
       createElementVNode("div", {
-        class: normalizeClass(["app-aside app-rail", {
-          responsive: _ctx.active,
-          show: _ctx.expanded
-        }])
+        class: normalizeClass(["app-content-container", { "full-width": _ctx.contentLayout === "full" }])
       }, [
-        _hoisted_4,
-        createElementVNode("div", _hoisted_5, [
-          createVNode(_component_FocusTrap, {
-            enable: _ctx.active && _ctx.expanded
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "rail", {}, void 0, true)
-            ]),
-            _: 3
-          }, 8, ["enable"])
-        ], 512)
-      ], 2),
-      createElementVNode("div", _hoisted_6, [
-        createElementVNode("div", {
-          class: normalizeClass(["app-content-container", { "full-width": _ctx.contentLayout === "full" }])
-        }, [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ], 2)
-      ])
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2)
     ]),
-    createElementVNode("div", _hoisted_7, [
+    createElementVNode("div", _hoisted_4, [
       renderSlot(_ctx.$slots, "footer", {}, void 0, true)
     ])
-  ]);
+  ], 2);
 }
-var FeatherAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a3ecb154"]]);
-export { FeatherAppLayout };
+var FeatherAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-2895ee9d"]]);
+var SkipContentLink_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "a.skip[data-v-80e3289a] {\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  box-shadow: var(--feather-shadow-2);\n  background-color: var(--feather-elevation-background-2);\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-family: var(--feather-font-family);\n  color: var(--feather-primary-text-on-surface);\n  font-size: var(--feather-button-font-size);\n  line-height: var(--feather-button-line-height);\n  letter-spacing: var(--feather-button-letter-spacing);\n  font-weight: var(--feather-button-font-weight);\n  text-transform: var(--feather-button-text-transform);\n  font-style: var(--feather-button-font-style);\n  background-color: var(--feather-surface);\n  padding: 0.25rem;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  border: 1px solid var(--feather-primary);\n}\na.skip[data-v-80e3289a]:focus {\n  width: auto;\n  height: auto;\n  z-index: var(--feather-zindex-tooltip);\n}")();
+const props$1 = {
+  content: {
+    type: String,
+    required: true
+  },
+  skipLabel: {
+    type: String,
+    required: true
+  }
+};
+const _sfc_main$1 = defineComponent({
+  props: props$1,
+  computed: {
+    contentId() {
+      return `#${this.content}`;
+    }
+  }
+});
+const _hoisted_1 = ["href"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("a", {
+    class: "skip",
+    href: _ctx.contentId
+  }, toDisplayString(_ctx.skipLabel), 9, _hoisted_1);
+}
+var SkipContentLink = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-80e3289a"]]);
+var ScrollHideHeader_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".header-wrapper[data-v-deb2abbc],\n.banner[data-v-deb2abbc] {\n  width: 100%;\n  height: var(--feather-header-height);\n}\n.scroll-hide header[data-v-deb2abbc] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--feather-zindex-fixed);\n  transition: transform 280ms ease-in-out;\n}\n.scroll-hide header.show[data-v-deb2abbc] {\n  transform: translateY(0px);\n}\n.scroll-hide header.hide[data-v-deb2abbc] {\n  transform: translateY(-100%);\n}\n.scroll-hide header.no-transition[data-v-deb2abbc] {\n  transition: none;\n}")();
+const props = {
+  scrollHide: {
+    type: Boolean,
+    default: false
+  }
+};
+const _sfc_main = defineComponent({
+  props,
+  setup: (props2) => {
+    const transitionClass = ref("no-transition");
+    const displayClass = ref("show");
+    const wrapper = ref();
+    if (props2.scrollHide) {
+      let previousScrollPosition = 0;
+      let height = 60;
+      const onScroll = () => {
+        height = parseInt(getComputedStyle(wrapper.value).getPropertyValue("--feather-header-height"), 10);
+        const scrollTop = document.documentElement.scrollTop;
+        const scrollingDown = scrollTop >= previousScrollPosition;
+        previousScrollPosition = scrollTop;
+        if (scrollTop > height && scrollingDown) {
+          displayClass.value = "hide";
+          return;
+        }
+        if (scrollTop > height && !scrollingDown) {
+          displayClass.value = "show";
+          return;
+        }
+        displayClass.value = "show";
+      };
+      onMounted(() => {
+        const documentRef = ref(document);
+        const activate = useScroll(documentRef, onScroll);
+        activate.value = true;
+        onScroll();
+        transitionClass.value = "";
+      });
+    }
+    return {
+      transitionClass,
+      displayClass,
+      wrapper
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["header-wrapper", { "scroll-hide": _ctx.scrollHide }]),
+    ref: "wrapper"
+  }, [
+    renderSlot(_ctx.$slots, "pre", {}, void 0, true),
+    createElementVNode("header", {
+      class: normalizeClass(["banner", [_ctx.displayClass, _ctx.transitionClass]])
+    }, [
+      renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ], 2)
+  ], 2);
+}
+var ScrollHideHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-deb2abbc"]]);
+export { FeatherAppLayout, ScrollHideHeader, SkipContentLink };

package.json

 {
   "name": "@featherds/app-layout",
-  "version": "0.10.14",
+  "version": "0.10.15",
   "publishConfig": {
@@ -12,4 +12,4 @@ "access": "public"
   "dependencies": {
-    "@featherds/dialog": "^0.10.14",
-    "@featherds/styles": "^0.10.14",
+    "@featherds/composables": "^0.10.15",
+    "@featherds/styles": "^0.10.15",
     "vue": "^3.1.0-0"
@@ -22,3 +22,3 @@ },
   "types": "./src/index.d.ts",
-  "gitHead": "b85d6ce9dee5d75ce5f6b58b73c34d2c8439b8dd"
+  "gitHead": "dda92cf914287cfa8899add188f45e5e778eca9b"
 }

src/index.d.ts

@@ -1,7 +0,10 @@
-declare module "@featherds/app-layout" {
-  import { DefineComponent } from "vue";
-  const FeatherAppLayout: DefineComponent<
-    typeof import("./components/FeatherAppLayout.vue").props
-  >;
-  export { FeatherAppLayout };
-}
+import { DefineComponent } from "vue";
+export const FeatherAppLayout: DefineComponent<
+  typeof import("./components/FeatherAppLayout.vue").props
+>;
+export const SkipContentLink: DefineComponent<
+  typeof import("./components/SkipContentLink.vue").props
+>;
+export const ScrollHideHeader: DefineComponent<
+  typeof import("./components/ScrollHideHeader.vue").props
+>;

src/index.ts

 export { default as FeatherAppLayout } from "./components/FeatherAppLayout.vue";
+export { default as SkipContentLink } from "./components/SkipContentLink.vue";
+export { default as ScrollHideHeader } from "./components/ScrollHideHeader.vue";

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

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

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

Improved metrics

Total package byte prevSize

29569

increased by29.13%

Number of package files

10

increased by25%

Lines of code

284

increased by51.06%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@featherds/composables@^0.10.15

• - Removed@featherds/dialog@^0.10.14

• - Removed@featherds/dialog@0.10.17(transitive)

• - Removed@featherds/icon@0.10.17(transitive)

• Updated@featherds/styles@^0.10.15