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

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [1.0.0-beta.4](https://github.com/gitsindonesia/ui-component/compare/v1.0.0-beta.3...v1.0.0-beta.4) (2023-03-13)
+
+**Note:** Version bump only for package @gits-id/app-bar
+
+
+
+
+
+
 # [1.0.0-beta.3](https://github.com/gitsindonesia/ui-component/compare/v1.0.0-beta.2...v1.0.0-beta.3) (2023-03-08)
@@ -8,0 +17,0 @@

package.json

 {
   "name": "@gits-id/app-bar",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "The AppBar, also known as a Navigation Bar, is a component used to display content at the top of a page.",
@@ -45,3 +45,3 @@ "scripts": {
   },
-  "gitHead": "fefdbc9c0555763b3daa0f4c187588aa97b02ad5"
+  "gitHead": "ae6737d8c6f51be0332494d2ff330ad814da1f45"
 }

postcss.config.js

@@ -0,0 +0,0 @@ module.exports = {

README.md

@@ -0,0 +0,0 @@ # GITS AppBar

src/index.ts

@@ -0,0 +0,0 @@ import VAppBar from './VAppBar.vue';

src/types.ts

@@ -0,0 +0,0 @@ export type VAppBarUser = {

src/VAppBar.spec.ts

@@ -7,5 +7,19 @@ import {mount} from '@vue/test-utils';
 } from '@gits-id/theme/defaultTheme';
-import {describe, expect, test} from 'vitest';
+import {describe, expect, it, test} from 'vitest';
 import VAppBar from './VAppBar.vue';
+import {defineComponent, ref} from 'vue';
+import {createRouter, createWebHistory} from 'vue-router';
 
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component: {
+        template: 'Hello',
+      },
+    },
+  ],
+});
+
 describe('VAppBar', () => {
@@ -96,2 +110,110 @@ test('mount component', () => {
   });
+
+  describe('when navbar with toggle', () => {
+    test('will hide the app bar with v-model', async () => {
+      const WrapperComponent = defineComponent({
+        components: {
+          VAppBar,
+        },
+        setup() {
+          const isOpen = ref(true);
+          const toggle = () => {
+            isOpen.value = !isOpen.value;
+          };
+          return {
+            isOpen,
+            toggle,
+          };
+        },
+        template:
+          '<VAppBar v-model="isOpen">Toggle Test</VAppBar><button @click="toggle">Toggle</button>',
+      });
+
+      const wrapper = mount(WrapperComponent);
+
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.html()).not.toContain('app-bar');
+    });
+
+    test('will hide the app bar with toggle slot', async () => {
+      const WrapperComponent = defineComponent({
+        components: {
+          VAppBar,
+        },
+        setup() {},
+        template:
+          '<VAppBar v-slot={toggle}>Toggle Test<button @click="toggle">Toggle</button></VAppBar>',
+      });
+
+      const wrapper = mount(WrapperComponent, {
+        global: {
+          plugins: [router],
+        },
+      });
+
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.html()).not.toContain('app-bar');
+
+      router.push('/');
+    });
+  });
+
+  describe('when hideOnScroll true', () => {
+    document.body.innerHTML = `
+      <div>
+        <h1>Non Vue app</h1>
+        <div id="app"></div>
+      </div>
+    `;
+
+    it('hide app bar on scroll', async () => {
+      const WrapperComponent = defineComponent({
+        components: {
+          VAppBar,
+        },
+        setup() {},
+        template: `
+            <main class="mt-5 h-[200vh] bg-gray-50 text-white">
+              <VAppBar fixed hide-on-scroll transition="slide-down">
+                AppBar Hide On Scroll
+              </VAppBar>
+            </main>
+          `,
+      });
+
+      const wrapper = mount(WrapperComponent);
+
+      window.dispatchEvent(new Event('scroll'));
+      window.scrollTo(0, 500); // how to trigger the scroll ?
+
+      expect(wrapper.html()).toContain('app-bar'); // expected must not contain
+    });
+  });
+
+  describe('when elevateOnScroll true', () => {
+    it('add shadow to app bar', async () => {
+      const WrapperComponent = defineComponent({
+        components: {
+          VAppBar,
+        },
+        setup() {},
+        template: `
+            <main class="mt-5 h-[200vh] bg-gray-50 text-white">
+              <VAppBar elevate-on-scroll="lg" transition="slide-down">
+                AppBar Hide On Scroll
+              </VAppBar>
+            </main>
+          `,
+      });
+
+      const wrapper = mount(WrapperComponent);
+
+      window.dispatchEvent(new Event('scroll'));
+      window.scrollTo(0, 500); // how to trigger the scroll ?
+
+      expect(wrapper.html()).not.toContain('app-bar--shadow-lg'); // expected must contain
+    });
+  });
 });

src/VAppBar.stories.ts

 import VAppBar from './VAppBar.vue';
-import { Story, Meta } from '@storybook/vue3';
-import { defaultColors, defaultShadows } from '@gits-id/theme/defaultTheme';
-import { ref } from 'vue';
+import {Story, Meta} from '@storybook/vue3';
+import {defaultColors, defaultShadows} from '@gits-id/theme/defaultTheme';
+import {ref} from 'vue';
 import Icon from '@gits-id/icon';
 import Button from '@gits-id/button';
-import { VInput } from '@gits-id/forms';
+import {VInput} from '@gits-id/forms';
 import '@gits-id/button/src/VBtn.scss';
@@ -19,8 +19,8 @@ import '@gits-id/forms/src/forms.scss';
 const Template: Story<{}> = (args) => ({
-  components: { VAppBar },
+  components: {VAppBar},
   setup() {
-    return { args };
+    return {args};
   },
   template: `
-  <div>
+  <div class="bg-gray-100">
 <VAppBar v-bind="args">Hello</VAppBar>
@@ -82,7 +82,7 @@ <main class="container mx-auto p-6 space-y-2 mt-2">
 export const Shadow: Story<{}> = (args) => ({
-  components: { VAppBar },
+  components: {VAppBar},
   setup() {
     const shadows = defaultShadows;
 
-    return { args, shadows };
+    return {args, shadows};
   },
@@ -102,5 +102,5 @@ template: `
 export const Colors: Story<{}> = (args) => ({
-  components: { VAppBar },
+  components: {VAppBar},
   setup() {
-    return { args, defaultColors };
+    return {args, defaultColors};
   },
@@ -122,6 +122,6 @@ template: `
 export const Sizes: Story<{}> = (args) => ({
-  components: { VAppBar, Button, Icon, VInput },
+  components: {VAppBar, Button, Icon, VInput},
   setup() {
     const isOpen = ref(true);
-    return { args, isOpen, sizes };
+    return {args, isOpen, sizes};
   },
@@ -226,6 +226,6 @@ template: `
 export const Toggle: Story<{}> = (args) => ({
-  components: { VAppBar, Button },
+  components: {VAppBar, Button},
   setup() {
     const isOpen = ref(true);
-    return { args, isOpen };
+    return {args, isOpen};
   },
@@ -247,6 +247,6 @@ template: `
 export const CustomTransition: Story<{}> = (args) => ({
-  components: { VAppBar, Button },
+  components: {VAppBar, Button},
   setup() {
     const isOpen = ref(true);
-    return { args, isOpen };
+    return {args, isOpen};
   },
@@ -269,6 +269,6 @@ template: `
 export const MobileNavigation: Story<{}> = (args) => ({
-  components: { VAppBar, Button, Icon },
+  components: {VAppBar, Button, Icon},
   setup() {
     const isOpen = ref(true);
-    return { args, isOpen };
+    return {args, isOpen};
   },
@@ -307,6 +307,6 @@ template: `
 export const WithSearchBar: Story<{}> = (args) => ({
-  components: { VAppBar, Button, Icon, VInput },
+  components: {VAppBar, Button, Icon, VInput},
   setup() {
     const isOpen = ref(true);
-    return { args, isOpen };
+    return {args, isOpen};
   },
@@ -353,3 +353,3 @@ template: `
 export const Transparent: Story<{}> = (args) => ({
-  components: { VAppBar },
+  components: {VAppBar},
   template: `
@@ -370,3 +370,3 @@ <main class="mt-5 h-screen bg-primary-500 text-white">
 export const BackdropBlur: Story<{}> = (args) => ({
-  components: { VAppBar },
+  components: {VAppBar},
   template: `
@@ -387,5 +387,5 @@ <main class="mt-5 h-screen bg-primary-500 text-white">
 export const DarkMode: Story<{}> = () => ({
-  components: { VAppBar },
+  components: {VAppBar},
   setup() {
-    return { defaultColors };
+    return {defaultColors};
   },
@@ -402,3 +402,3 @@ template: `
 export const ElevateOnScroll: Story<{}> = () => ({
-  components: { VAppBar },
+  components: {VAppBar},
   template: `
@@ -414,3 +414,3 @@ <main class="mt-5 h-screen bg-gray-50 text-white">
 export const HideOnScroll: Story<{}> = () => ({
-  components: { VAppBar },
+  components: {VAppBar},
   template: `
@@ -417,0 +417,0 @@ <main class="mt-5 h-screen bg-gray-50 text-white">

src/vue.d.ts

@@ -0,0 +0,0 @@ declare module '*.vue' {

tailwind.config.js

@@ -0,0 +0,0 @@ module.exports = {

tsconfig.json

@@ -0,0 +0,0 @@ {

vite.config.js

@@ -0,0 +0,0 @@ import {defineConfig} from 'vite';

No alert changes

Improved metrics

Total package byte prevSize

58791

increased by8.6%

Lines of code

1080

increased by10.54%

No dependency changes