@phila/phila-ui-app-footer 0.0.18 → 0.0.22

package/README.md

@@ -1,49 +1,30 @@
-## Code Samples
-### Props vs Slots Links
-The footer links can be added via props using the [Navigation Links](/components/NavLink) format.
-```html
-  <app-footer
-    :links="myFooterLinks"
-  />
-```
+## Usage
 
-Or the links can be added using the default slot. The default slot accepts an unordered list of links.
-```html
-  <app-footer>
-    <ul>
-      <li>
-        <a href="/about">About</a>
-      </li>
-      <li>
-        <a href="/terms-and-conditions">Terms & Conditions</a>
-      </li>
-    </ul>
-  </app-footer>
-```
+#### Import single component...
 
-### Sticky Footer
-The footer can be fixed to the bottom of the page, so it's always visible.
-```html
-  <app-footer
-    :is-sticky="true"
-  />
-```
+```js
+import { AppFooter } from '@phila/phila-ui';
 
-### Mobile Display
-By default the footer is hidden on mobile devices. If the links in the footer are important, they should be added to the [Mobile Navigation](/components/MobileNav).
+//register it locally...
+components: {
+  AppFooter,
+}
 
-If the footer must be displayed on mobile, set ``is-hidden-mobile`` to ``false``.
-```html
-  <app-footer
-    :is-hidden-mobile="false"
-  />
+//... or register it globally
+Vue.component('app-footer', AppFooter);
 ```
 
-## Live Examples
-<alert type="warning">Open the iframe below in a new window as the footer is by default hidden on smaller screens</alert>
+#### or import the whole library,
+
+```js
+import * as PhilaUI from "@phila/phila-ui";
 
-### Non-sticky, using the slot
-<example name="AppFooter1" height="300" :options="{ horizontal: true}"></example>
+//register it globally
+Vue.use(PhilaUI);
+```
 
-### Sticky, using the link prop
-<example name="AppFooter2" height="300" :options="{ horizontal: true}"></example>
+#### then use it in the vue template
+
+```html
+<app-footer></app-footer>
+```

package/dist/AppFooter.js

@@ -1,10 +1,10 @@
 import "./AppFooter.css";
-import { defineComponent as m, inject as h, computed as v, ref as y, onMounted as k, resolveComponent as _, openBlock as a, createElementBlock as c, normalizeClass as g, createElementVNode as u, Fragment as H, renderList as S, createVNode as b, mergeProps as M, renderSlot as x, createCommentVNode as B, pushScopeId as F, popScopeId as I } from "vue";
-const N = (e) => (F("data-v-f34d21d1"), e = e(), I(), e), A = /* @__PURE__ */ N(() => /* @__PURE__ */ u("div", { class: "container" }, null, -1)), C = { class: "container has-text-centered" }, T = {
+import { defineComponent as m, inject as v, computed as y, ref as k, onMounted as h, resolveComponent as _, createElementBlock as a, createCommentVNode as g, openBlock as c, normalizeClass as H, createElementVNode as u, renderSlot as b, Fragment as M, renderList as S, createVNode as x, mergeProps as B } from "vue";
+const F = { class: "container has-text-centered" }, N = {
   key: 0,
   role: "menu",
   class: "inline-list"
-}, $ = /* @__PURE__ */ m({
+}, A = /* @__PURE__ */ m({
   __name: "AppFooter",
   props: {
     links: { default() {
@@ -13,51 +13,51 @@ const N = (e) => (F("data-v-f34d21d1"), e = e(), I(), e), A = /* @__PURE__ */ N(
     isSticky: { type: Boolean, default: !0 },
     isHiddenMobile: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const n = e, l = h("responsiveHelpers"), { responsiveState: p } = l, o = v(() => p.isMobile), i = y();
-    return k(() => {
-      var r;
-      const t = document.getElementById("app-header"), s = document.querySelector("main");
-      if (s) {
-        if (n.isSticky && i.value)
-          s.style.cssText = s.style.cssText + `padding-bottom: ${i.value.offsetHeight}px`;
-        else if (o.value && !n.isHiddenMobile || !o.value)
-          if (t) {
-            const d = t.offsetHeight + (((r = i.value) == null ? void 0 : r.offsetHeight) || 0);
-            s.style.cssText = s.style.cssText + `min-height: calc(100vh - ${d}px)`;
+  setup(n) {
+    const s = n, l = v("responsiveHelpers"), { responsiveState: p } = l, o = y(() => p.isMobile), r = k();
+    return h(() => {
+      var i;
+      const e = document.getElementById("app-header"), t = document.querySelector("main");
+      if (t) {
+        if (s.isSticky && r.value)
+          t.style.cssText = t.style.cssText + `padding-bottom: ${r.value.offsetHeight}px`;
+        else if (o.value && !s.isHiddenMobile || !o.value)
+          if (e) {
+            const d = e.offsetHeight + (((i = r.value) == null ? void 0 : i.offsetHeight) || 0);
+            t.style.cssText = t.style.cssText + `min-height: calc(100vh - ${d}px)`;
           } else
             console.warn("AppFooter: No app-header found, unable to calculate sticky footer height");
       } else
         console.warn("AppFooter: No main element found, unable to calculate sticky footer height");
-    }), (t, s) => {
-      const r = _("nav-link");
-      return o.value && !t.isHiddenMobile || !o.value ? (a(), c("footer", {
+    }), (e, t) => {
+      const i = _("nav-link");
+      return o.value && !e.isHiddenMobile || !o.value ? (c(), a("footer", {
         key: 0,
         id: "app-footer",
         ref_key: "footer",
-        ref: i,
-        class: g({ "is-sticky": t.isSticky })
+        ref: r,
+        class: H({ "is-sticky": e.isSticky })
       }, [
-        A,
-        u("div", C, [
-          t.links.length > 0 ? (a(), c("ul", T, [
-            (a(!0), c(H, null, S(t.links, (d, f) => (a(), c("li", {
+        t[0] || (t[0] = u("div", { class: "container" }, null, -1)),
+        u("div", F, [
+          e.links.length > 0 ? (c(), a("ul", N, [
+            (c(!0), a(M, null, S(e.links, (d, f) => (c(), a("li", {
               key: `fl-${f}`,
               role: "none"
             }, [
-              b(r, M({ ref_for: !0 }, d, { role: "menuitem" }), null, 16)
+              x(i, B({ ref_for: !0 }, d, { role: "menuitem" }), null, 16)
             ]))), 128))
-          ])) : x(t.$slots, "default", { key: 1 }, void 0, !0)
+          ])) : b(e.$slots, "default", { key: 1 }, void 0, !0)
         ])
-      ], 2)) : B("", !0);
+      ], 2)) : g("", !0);
     };
   }
-}), w = (e, n) => {
-  const l = e.__vccOpts || e;
-  for (const [p, o] of n)
+}), C = (n, s) => {
+  const l = n.__vccOpts || n;
+  for (const [p, o] of s)
     l[p] = o;
   return l;
-}, j = /* @__PURE__ */ w($, [["__scopeId", "data-v-f34d21d1"]]);
+}, E = /* @__PURE__ */ C(A, [["__scopeId", "data-v-f34d21d1"]]);
 export {
-  j as default
+  E as default
 };

package/dist/AppFooter.umd.cjs

@@ -1,2 +1,2 @@
 (function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.AppFooter=n(e.Vue))})(this,function(e){"use strict";var n=document.createElement("style");n.textContent=`@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}#app-footer[data-v-f34d21d1]{background-color:#0f4d90;height:46px;max-height:46px;overflow:hidden;width:100%}#app-footer a[data-v-f34d21d1]{color:#fff;line-height:46px}#app-footer a[data-v-f34d21d1]:hover{color:#25cef7}#app-footer.is-sticky[data-v-f34d21d1]{position:fixed;bottom:0;z-index:99}#app-footer ul[data-v-f34d21d1]{list-style:none;padding:0;margin:0}#app-footer ul li[data-v-f34d21d1]{display:inline-block;vertical-align:middle;margin:0;padding:0}#app-footer ul li[data-v-f34d21d1]:not(:last-child):after{content:"|";margin:0 1rem;display:inline-block;position:relative;color:#fff;font-weight:700}
-`,document.head.appendChild(n);const d=(t=>(e.pushScopeId("data-v-f34d21d1"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("div",{class:"container"},null,-1)),w={class:"container has-text-centered"},m={key:0,role:"menu",class:"inline-list"};return((t,l)=>{const f=t.__vccOpts||t;for(const[p,a]of l)f[p]=a;return f})(e.defineComponent({__name:"AppFooter",props:{links:{default(){return[]}},isSticky:{type:Boolean,default:!0},isHiddenMobile:{type:Boolean,default:!1}},setup(t){const l=t,f=e.inject("responsiveHelpers"),{responsiveState:p}=f,a=e.computed(()=>p.isMobile),r=e.ref();return e.onMounted(()=>{var i;const o=document.getElementById("app-header"),s=document.querySelector("main");if(s){if(l.isSticky&&r.value)s.style.cssText=s.style.cssText+`padding-bottom: ${r.value.offsetHeight}px`;else if(a.value&&!l.isHiddenMobile||!a.value)if(o){const c=o.offsetHeight+(((i=r.value)==null?void 0:i.offsetHeight)||0);s.style.cssText=s.style.cssText+`min-height: calc(100vh - ${c}px)`}else console.warn("AppFooter: No app-header found, unable to calculate sticky footer height")}else console.warn("AppFooter: No main element found, unable to calculate sticky footer height")}),(o,s)=>{const i=e.resolveComponent("nav-link");return a.value&&!o.isHiddenMobile||!a.value?(e.openBlock(),e.createElementBlock("footer",{key:0,id:"app-footer",ref_key:"footer",ref:r,class:e.normalizeClass({"is-sticky":o.isSticky})},[d,e.createElementVNode("div",w,[o.links.length>0?(e.openBlock(),e.createElementBlock("ul",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.links,(c,h)=>(e.openBlock(),e.createElementBlock("li",{key:`fl-${h}`,role:"none"},[e.createVNode(i,e.mergeProps({ref_for:!0},c,{role:"menuitem"}),null,16)]))),128))])):e.renderSlot(o.$slots,"default",{key:1},void 0,!0)])],2)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-f34d21d1"]])});
+/*$vite$:1*/`,document.head.appendChild(n);const d={class:"container has-text-centered"},w={key:0,role:"menu",class:"inline-list"};return((s,l)=>{const f=s.__vccOpts||s;for(const[p,a]of l)f[p]=a;return f})(e.defineComponent({__name:"AppFooter",props:{links:{default(){return[]}},isSticky:{type:Boolean,default:!0},isHiddenMobile:{type:Boolean,default:!1}},setup(s){const l=s,f=e.inject("responsiveHelpers"),{responsiveState:p}=f,a=e.computed(()=>p.isMobile),r=e.ref();return e.onMounted(()=>{var i;const t=document.getElementById("app-header"),o=document.querySelector("main");if(o){if(l.isSticky&&r.value)o.style.cssText=o.style.cssText+`padding-bottom: ${r.value.offsetHeight}px`;else if(a.value&&!l.isHiddenMobile||!a.value)if(t){const c=t.offsetHeight+(((i=r.value)==null?void 0:i.offsetHeight)||0);o.style.cssText=o.style.cssText+`min-height: calc(100vh - ${c}px)`}else console.warn("AppFooter: No app-header found, unable to calculate sticky footer height")}else console.warn("AppFooter: No main element found, unable to calculate sticky footer height")}),(t,o)=>{const i=e.resolveComponent("nav-link");return a.value&&!t.isHiddenMobile||!a.value?(e.openBlock(),e.createElementBlock("footer",{key:0,id:"app-footer",ref_key:"footer",ref:r,class:e.normalizeClass({"is-sticky":t.isSticky})},[o[0]||(o[0]=e.createElementVNode("div",{class:"container"},null,-1)),e.createElementVNode("div",d,[t.links.length>0?(e.openBlock(),e.createElementBlock("ul",w,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.links,(c,m)=>(e.openBlock(),e.createElementBlock("li",{key:`fl-${m}`,role:"none"},[e.createVNode(i,e.mergeProps({ref_for:!0},c,{role:"menuitem"}),null,16)]))),128))])):e.renderSlot(t.$slots,"default",{key:1},void 0,!0)])],2)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-f34d21d1"]])});

package/dist/AppFooter.vue.d.ts

@@ -1,20 +1,22 @@
 import { AppFooterProps } from './types';
 
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppFooterProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppFooterProps>, {
     links(): never[];
     isSticky: boolean;
     isHiddenMobile: boolean;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppFooterProps>, {
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppFooterProps>, {
     links(): never[];
     isSticky: boolean;
     isHiddenMobile: boolean;
-}>>>, {
+}>>> & Readonly<{}>, {
     links: import('@phila/phila-ui-nav-link').NavLinkProps[];
     isSticky: boolean;
     isHiddenMobile: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phila/phila-ui-app-footer",
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.22",
   "type": "module",
   "files": [
     "dist"
@@ -25,8 +25,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "^1.0.21",
-    "@phila/phila-ui-nav-link": "^0.0.11",
+    "@phila/phila-ui-core": "^1.0.24",
+    "@phila/phila-ui-nav-link": "^0.0.13",
     "bulma": "^0.9.4",
     "vue": "^3.3.8"
   },
@@ -34,15 +34,15 @@
     "@types/node": "^20.10.3",
     "@vitejs/plugin-vue": "^4.5.0",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
+    "typescript": "^5.8.2",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-lib-inject-css": "^1.3.0",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^2.2.8"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.com/",
     "access": "public"
   },
-  "gitHead": "7beebf0e6eb642e0ff731041d46281f71923c0d4"
+  "gitHead": "f00518592815b1bf558d88f77fc4b6b3a30296e5"
 }