@gits-id/app-bar - npm Package Compare versions

Comparing version 0.15.2 to 0.16.0

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [0.16.0](https://github.com/gitsindonesia/ui-component/compare/v0.15.2...v0.16.0) (2023-02-01)
+
+### Features
+
+- **VAppBar:** add elevate on scroll effect ([a8ad7a9](https://github.com/gitsindonesia/ui-component/commit/a8ad7a9e3d33f85b8951180b1dd08c2d7623d51b))
+- **VAppBar:** add hide on scroll feature ([180b0fb](https://github.com/gitsindonesia/ui-component/commit/180b0fb8ce8f6c58c3bdb93f25632ef0eedecbc9))
+- **VAppBar:** configurable scroll distance ([bd06f3a](https://github.com/gitsindonesia/ui-component/commit/bd06f3a941bdf8191e016c996a657e443ff23871))
+
 ## [0.15.2](https://github.com/gitsindonesia/ui-component/compare/v0.15.1...v0.15.2) (2023-02-01)
@@ -8,0 +16,0 @@

dist/app-bar.iife.js

@@ -1,1 +0,1 @@
-var AppBar=function(o,e){"use strict";const p="",s={inheritAttrs:!1},n=e.defineComponent({...s,__name:"VAppBar",props:{modelValue:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1},color:{type:String,default:"default"},transition:{type:String,default:"fade"},size:{type:String,default:"md"}},emits:["update:modelValue"],setup(a,{expose:i,emit:c}){const f=a,{modelValue:r}=e.toRefs(f),l=e.ref(r.value);e.watch(l,t=>{c("update:modelValue",t)}),e.watch(r,t=>{l.value=t});const d=()=>l.value=!l.value;return i(d),(t,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:a.transition},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("header",e.mergeProps({key:0,class:["app-bar",[`app-bar-${a.color}`,typeof a.shadow=="string"?`app-bar--shadow-${a.shadow}`:a.shadow?"app-bar--shadow":"",a.size?`app-bar--${a.size}`:"",{"app-bar--fixed":a.fixed,"app-bar--sticky":a.sticky,"app-bar--bordered":a.bordered}]]},t.$attrs),[e.renderSlot(t.$slots,"default",{toggle:d})],16)):e.createCommentVNode("",!0)]),_:3},8,["name"]))}}),u="";return o.VAppBar=n,o.default=n,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),o}({},Vue);
+var AppBar=function(n,e){"use strict";const w="",f={inheritAttrs:!1},s=e.defineComponent({...f,__name:"VAppBar",props:{modelValue:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1},color:{type:String,default:"default"},transition:{type:String,default:"fade"},size:{type:String,default:"md"},elevateOnScroll:{type:[Boolean,String],default:!1},scrollDistance:{type:Number,default:0},hideOnScroll:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{expose:u,emit:p}){const a=l,{modelValue:d}=e.toRefs(a),o=e.ref(d.value),r=e.ref(!1);e.watch(o,t=>{p("update:modelValue",t)}),e.watch(d,t=>{o.value=t});const c=()=>o.value=!o.value;if(u(c),a.elevateOnScroll){const t=()=>{window.scrollY>a.scrollDistance?r.value=!0:r.value=!1};e.onMounted(()=>{window.addEventListener("scroll",t)}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",t)})}const i=t=>typeof t=="string"?`app-bar--shadow-${t}`:t?"app-bar--shadow":"",m=e.computed(()=>a.elevateOnScroll&&r.value?i(a.elevateOnScroll):i(a.shadow));if(a.hideOnScroll){const t=()=>{window.scrollY>a.scrollDistance?o.value=!1:o.value=!0};e.onMounted(()=>{window.addEventListener("scroll",t)}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",t)})}return(t,B)=>(e.openBlock(),e.createBlock(e.Transition,{name:l.transition},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("header",e.mergeProps({key:0,class:["app-bar",[`app-bar-${l.color}`,e.unref(m),l.size?`app-bar--${l.size}`:"",{"app-bar--fixed":l.fixed,"app-bar--sticky":l.sticky,"app-bar--bordered":l.bordered}]]},t.$attrs),[e.renderSlot(t.$slots,"default",{toggle:c})],16)):e.createCommentVNode("",!0)]),_:3},8,["name"]))}}),y="";return n.VAppBar=s,n.default=s,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),n}({},Vue);

dist/app-bar.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");const i={inheritAttrs:!1},d=e.defineComponent({...i,__name:"VAppBar",props:{modelValue:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1},color:{type:String,default:"default"},transition:{type:String,default:"fade"},size:{type:String,default:"md"}},emits:["update:modelValue"],setup(a,{expose:n,emit:s}){const u=a,{modelValue:o}=e.toRefs(u),l=e.ref(o.value);e.watch(l,t=>{s("update:modelValue",t)}),e.watch(o,t=>{l.value=t});const r=()=>l.value=!l.value;return n(r),(t,c)=>(e.openBlock(),e.createBlock(e.Transition,{name:a.transition},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("header",e.mergeProps({key:0,class:["app-bar",[`app-bar-${a.color}`,typeof a.shadow=="string"?`app-bar--shadow-${a.shadow}`:a.shadow?"app-bar--shadow":"",a.size?`app-bar--${a.size}`:"",{"app-bar--fixed":a.fixed,"app-bar--sticky":a.sticky,"app-bar--bordered":a.bordered}]]},t.$attrs),[e.renderSlot(t.$slots,"default",{toggle:r})],16)):e.createCommentVNode("",!0)]),_:3},8,["name"]))}});exports.VAppBar=d;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");const p={inheritAttrs:!1},u=e.defineComponent({...p,__name:"VAppBar",props:{modelValue:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1},color:{type:String,default:"default"},transition:{type:String,default:"fade"},size:{type:String,default:"md"},elevateOnScroll:{type:[Boolean,String],default:!1},scrollDistance:{type:Number,default:0},hideOnScroll:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{expose:c,emit:i}){const a=l,{modelValue:r}=e.toRefs(a),o=e.ref(r.value),n=e.ref(!1);e.watch(o,t=>{i("update:modelValue",t)}),e.watch(r,t=>{o.value=t});const s=()=>o.value=!o.value;if(c(s),a.elevateOnScroll){const t=()=>{window.scrollY>a.scrollDistance?n.value=!0:n.value=!1};e.onMounted(()=>{window.addEventListener("scroll",t)}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",t)})}const d=t=>typeof t=="string"?`app-bar--shadow-${t}`:t?"app-bar--shadow":"",f=e.computed(()=>a.elevateOnScroll&&n.value?d(a.elevateOnScroll):d(a.shadow));if(a.hideOnScroll){const t=()=>{window.scrollY>a.scrollDistance?o.value=!1:o.value=!0};e.onMounted(()=>{window.addEventListener("scroll",t)}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",t)})}return(t,v)=>(e.openBlock(),e.createBlock(e.Transition,{name:l.transition},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("header",e.mergeProps({key:0,class:["app-bar",[`app-bar-${l.color}`,e.unref(f),l.size?`app-bar--${l.size}`:"",{"app-bar--fixed":l.fixed,"app-bar--sticky":l.sticky,"app-bar--bordered":l.bordered}]]},t.$attrs),[e.renderSlot(t.$slots,"default",{toggle:s})],16)):e.createCommentVNode("",!0)]),_:3},8,["name"]))}});exports.VAppBar=u;exports.default=u;

dist/app-bar.umd.js

@@ -1,1 +0,1 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.AppBar={},a.Vue))})(this,function(a,e){"use strict";const u="",s={inheritAttrs:!1},d=e.defineComponent({...s,__name:"VAppBar",props:{modelValue:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1},color:{type:String,default:"default"},transition:{type:String,default:"fade"},size:{type:String,default:"md"}},emits:["update:modelValue"],setup(t,{expose:i,emit:f}){const p=t,{modelValue:l}=e.toRefs(p),n=e.ref(l.value);e.watch(n,o=>{f("update:modelValue",o)}),e.watch(l,o=>{n.value=o});const r=()=>n.value=!n.value;return i(r),(o,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:t.transition},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("header",e.mergeProps({key:0,class:["app-bar",[`app-bar-${t.color}`,typeof t.shadow=="string"?`app-bar--shadow-${t.shadow}`:t.shadow?"app-bar--shadow":"",t.size?`app-bar--${t.size}`:"",{"app-bar--fixed":t.fixed,"app-bar--sticky":t.sticky,"app-bar--bordered":t.bordered}]]},o.$attrs),[e.renderSlot(o.$slots,"default",{toggle:r})],16)):e.createCommentVNode("",!0)]),_:3},8,["name"]))}}),c="";a.VAppBar=d,a.default=d,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.AppBar={},l.Vue))})(this,function(l,e){"use strict";const y="",f={inheritAttrs:!1},s=e.defineComponent({...f,__name:"VAppBar",props:{modelValue:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1},color:{type:String,default:"default"},transition:{type:String,default:"fade"},size:{type:String,default:"md"},elevateOnScroll:{type:[Boolean,String],default:!1},scrollDistance:{type:Number,default:0},hideOnScroll:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(a,{expose:u,emit:p}){const n=a,{modelValue:d}=e.toRefs(n),o=e.ref(d.value),r=e.ref(!1);e.watch(o,t=>{p("update:modelValue",t)}),e.watch(d,t=>{o.value=t});const i=()=>o.value=!o.value;if(u(i),n.elevateOnScroll){const t=()=>{window.scrollY>n.scrollDistance?r.value=!0:r.value=!1};e.onMounted(()=>{window.addEventListener("scroll",t)}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",t)})}const c=t=>typeof t=="string"?`app-bar--shadow-${t}`:t?"app-bar--shadow":"",m=e.computed(()=>n.elevateOnScroll&&r.value?c(n.elevateOnScroll):c(n.shadow));if(n.hideOnScroll){const t=()=>{window.scrollY>n.scrollDistance?o.value=!1:o.value=!0};e.onMounted(()=>{window.addEventListener("scroll",t)}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",t)})}return(t,B)=>(e.openBlock(),e.createBlock(e.Transition,{name:a.transition},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("header",e.mergeProps({key:0,class:["app-bar",[`app-bar-${a.color}`,e.unref(m),a.size?`app-bar--${a.size}`:"",{"app-bar--fixed":a.fixed,"app-bar--sticky":a.sticky,"app-bar--bordered":a.bordered}]]},t.$attrs),[e.renderSlot(t.$slots,"default",{toggle:i})],16)):e.createCommentVNode("",!0)]),_:3},8,["name"]))}}),w="";l.VAppBar=s,l.default=s,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/types/VAppBar.vue.d.ts

@@ -17,2 +17,5 @@ import { PropType } from 'vue';
             size: "sm" | "md" | "lg";
+            elevateOnScroll: string | boolean;
+            scrollDistance: number;
+            hideOnScroll: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
@@ -51,5 +54,17 @@ modelValue: {
             };
+            elevateOnScroll: {
+                type: PropType<string | boolean>;
+                default: boolean;
+            };
+            scrollDistance: {
+                type: NumberConstructor;
+                default: number;
+            };
+            hideOnScroll: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "fixed" | "modelValue" | "sticky" | "bordered" | "shadow" | "color" | "transition" | "size">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "fixed" | "modelValue" | "sticky" | "bordered" | "shadow" | "color" | "transition" | "size" | "elevateOnScroll" | "scrollDistance" | "hideOnScroll">;
         $attrs: {
@@ -101,2 +116,14 @@ [x: string]: unknown;
             };
+            elevateOnScroll: {
+                type: PropType<string | boolean>;
+                default: boolean;
+            };
+            scrollDistance: {
+                type: NumberConstructor;
+                default: number;
+            };
+            hideOnScroll: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & {
@@ -115,2 +142,5 @@ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
             size: "sm" | "md" | "lg";
+            elevateOnScroll: string | boolean;
+            scrollDistance: number;
+            hideOnScroll: boolean;
         }> & {
@@ -169,2 +199,14 @@ beforeCreate?: ((() => void) | (() => void)[]) | undefined;
         };
+        elevateOnScroll: {
+            type: PropType<string | boolean>;
+            default: boolean;
+        };
+        scrollDistance: {
+            type: NumberConstructor;
+            default: number;
+        };
+        hideOnScroll: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
@@ -209,2 +251,14 @@ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     };
+    elevateOnScroll: {
+        type: PropType<string | boolean>;
+        default: boolean;
+    };
+    scrollDistance: {
+        type: NumberConstructor;
+        default: number;
+    };
+    hideOnScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
@@ -223,2 +277,5 @@ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     size: "sm" | "md" | "lg";
+    elevateOnScroll: string | boolean;
+    scrollDistance: number;
+    hideOnScroll: boolean;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
@@ -225,0 +282,0 @@ $slots: typeof import('./VAppBar.vue.__VLS_template').default;

package.json

 {
   "name": "@gits-id/app-bar",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "The AppBar, also known as a Navigation Bar, is a component used to display content at the top of a page.",
@@ -13,9 +13,9 @@ "keywords": [
   "dependencies": {
-    "@gits-id/theme": "^0.15.0",
+    "@gits-id/theme": "^0.16.0",
     "vue": "^3.2.33"
   },
   "devDependencies": {
-    "@gits-id/button": "^0.15.2",
-    "@gits-id/icon": "^0.15.0",
-    "@gits-id/tailwind-config": "^0.15.0",
+    "@gits-id/button": "^0.16.0",
+    "@gits-id/icon": "^0.16.0",
+    "@gits-id/tailwind-config": "^0.16.0",
     "@vue/test-utils": "^2.0.0-rc.17",
@@ -41,3 +41,3 @@ "c8": "^7.11.3",
   },
-  "gitHead": "5bdc30ad4802432c4a8d22ca959ebda36affeb70",
+  "gitHead": "8aafa41bf181f6bfa091c9715a71a8b81c61440d",
   "scripts": {
@@ -44,0 +44,0 @@ "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",

src/VAppBar.stories.ts

@@ -371,1 +371,23 @@ import VAppBar from './VAppBar.vue';
 });
+
+export const ElevateOnScroll: Story<{}> = () => ({
+  components: {VAppBar},
+  template: `
+  <main class="mt-5 h-screen bg-gray-50 text-white">
+    <VAppBar fixed elevate-on-scroll="md">
+      AppBar Elevate On Scroll
+    </VAppBar>
+  </main>
+`,
+});
+
+export const HideOnScroll: Story<{}> = () => ({
+  components: {VAppBar},
+  template: `
+  <main class="mt-5 h-screen bg-gray-50 text-white">
+    <VAppBar fixed hide-on-scroll transition="slide-down">
+      AppBar Hide On Scroll
+    </VAppBar>
+  </main>
+`,
+});

No alert changes

Improved metrics

Total package byte prevSize

51610

increased by15.54%

Lines of code

952

increased by14.29%

Dependency changes

• + Added@gits-id/theme@0.16.1(transitive)

• - Removed@gits-id/theme@0.15.0(transitive)

• Updated@gits-id/theme@^0.16.0