#118 - Resolve Todos (#121)

karnama · Apr 19, 2021 · 039da92 · 039da92
1 parent 19c716b
commit 039da92
Show file tree

Hide file tree

Showing 33 changed files with 1,772 additions and 1,513 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -197,7 +197,8 @@ module.exports = {
                     {
                         "ignore": ["describe"]
                     }
-                ]
+                ],
+                "jest/no-disabled-tests": "warn"
             }
         }
     ]

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 karnama
+Copyright (c) 2021-present karnama
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Demo.vue b/src/Demo.vue
@@ -1,63 +1,62 @@
 <template>
-    <main class="h-full">
+    <main class="h-full transition-colors bg-gray-100 dark:bg-gray-700 relative">
         <div class="flex">
-            <div class="menu px-12 shadow-xl dark:bg-gray-600 dark:text-gray-300 transition
-                        ease-in-out transition-all duration-300 z-30 bg-white relative"
-                 :class="{
-                     'closed': !isOpen
-                 }">
-                <h1 class="text-2xl mt-4 mb-6">
-                    Vueish UI
-                </h1>
-                <UIButton class="absolute top-1 right-3 md:top-2 md:right-2"
-                          minimal
-                          @click="isOpen = !isOpen"
-                          v-html="clearIcon" />
-                <div class="flex-col flex">
-                    <UIToggle v-model="darkMode"
-                              label="Dark Mode"
-                              name="dark-mode" />
-                    <template v-for="type in Object.keys(routeMap)" :key="type">
-                        <h3 class="font-bold mt-6">
-                            {{ type }}
-                        </h3>
-                        <router-link v-for="route in routeMap[type]"
-                                     :key="route.path"
-                                     :to="route.path">
-                            {{ route.meta.label }}
-                        </router-link>
-                    </template>
+            <div class="menu px-12 shadow-xl dark:bg-gray-600 dark:text-gray-300 transition-all
+                        transition-colors z-30 bg-white"
+                 :class="[ isOpen ? 'open' : 'closed' ]">
+                <div class="sticky top-0">
+                    <div class="flex items-center justify-between">
+                        <h1 class="text-2xl mt-4 mb-6">
+                            Vueish UI
+                        </h1>
+                        <UIButton minimal
+                                  class="dark:text-gray-200"
+                                  @click="isOpen = false"
+                                  v-html="clearIcon" />
+                    </div>
+                    <div class="flex-col flex">
+                        <UIToggle v-model="darkMode"
+                                  label="Dark Mode"
+                                  name="dark-mode" />
+                        <template v-for="type in Object.keys(routeMap)" :key="type">
+                            <h3 class="font-bold mt-6">
+                                {{ type }}
+                            </h3>
+                            <router-link v-for="route in routeMap[type]"
+                                         :key="route.path"
+                                         :to="route.path">
+                                {{ route.meta.label }}
+                            </router-link>
+                        </template>
+                    </div>
                 </div>
             </div>
-            <UIApp>
-                <div class="flex-1 min-h-screen h-full bg-gray-100 dark:bg-gray-700 transition w-full p-10">
-                    <UIButton v-if="!isOpen"
-                              class="absolute top-1 left-1"
-                              minimal
-                              @click="isOpen = !isOpen">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                             height="20px"
-                             fill="none"
-                             viewBox="0 0 24 24"
-                             stroke="currentColor">
-                            <path stroke-linecap="round"
-                                  stroke-linejoin="round"
-                                  stroke-width="2"
-                                  d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                    </UIButton>
-                    <div class="mx-auto" style="max-width: 1000px">
-                        <router-view />
-                    </div>
+            <div class="flex-1 min-h-screen h-full transition w-full p-10">
+                <UIButton v-if="!isOpen"
+                          class="dark:text-gray-200 mb-4"
+                          minimal
+                          @click="isOpen = true">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         height="20px"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </UIButton>
+                <div class="mx-auto" style="max-width: 1000px">
+                    <router-view />
                 </div>
-            </UIApp>
+            </div>
         </div>
     </main>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
-import UIApp from '@components/app/UIApp.vue';
+import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
 import UIToggle from '@components/toggle/UIToggle.vue';
 import LocalCache from '@helpers/cache/LocalCache';
 import { Router, RouteRecord } from 'vue-router';
@@ -68,40 +67,37 @@ const cache = new LocalCache('demo');
 
 export default defineComponent({
     name: 'Demo',
-    components: { UIButton, UIToggle, UIApp },
+    components: { UIButton, UIToggle },
 
     setup() {
         const instance = getCurrentInstance()!;
-        const darkMode = computed({
-            get: () => {
-                const theme = cache.get('theme', 'light') as 'dark' | 'light';
-                return theme === 'dark';
-            },
-            set: (val: boolean) => {
-                cache.set('theme', val ? 'dark' : 'light');
-                document.body.classList.toggle('dark');
-                document.body.classList.toggle('light');
-            }
-        });
+        const clearIcon = getIcon('clear');
+
+        const darkMode = ref(cache.get<'light' | 'dark'>('theme', 'light') === 'dark');
         const routeMap = computed(() => {
             const routes = (instance.appContext.app.config.globalProperties.$router as Router).getRoutes();
-            const map: Record<'Directives' | 'Components', RouteRecord[]> = {};
+            const map: { Directives?: RouteRecord[]; Components?: RouteRecord[] } = {};
 
             routes.forEach(route => {
                 if (!Array.isArray(map[route.meta.type])) {
                     map[route.meta.type] = [];
                 }
 
-                map[route.meta.type as 'Directives' | 'Components'].push(route);
+                map[route.meta.type]!.push(route);
             });
 
             return map;
         });
-        const isOpen = ref(false);
+        const isOpen = ref(cache.get('menuOpen', true));
 
         document.body.classList.add(cache.get('theme', 'light')!);
 
-        const clearIcon = getIcon('clear');
+        watch(() => isOpen.value, val => cache.set('menuOpen', val));
+        watch(() => darkMode.value, val => {
+            cache.set('theme', val ? 'dark' : 'light');
+            document.body.classList.toggle('dark');
+            document.body.classList.toggle('light');
+        });
 
         return {
             darkMode,
@@ -123,10 +119,18 @@ export default defineComponent({
 }
 
 .menu {
-    min-width: 300px;
+    width: 300px;
+    transition: margin-left 300ms ease;
 
     &.closed {
         margin-left: -300px;
+        transition: margin-left 300ms ease, opacity 300ms ease-out;
+        opacity: 0;
+    }
+    &.open {
+        transition: margin-left 300ms ease, opacity 300ms ease-out;
+        opacity: 1;
+        margin-left: 0;
     }
 }
 </style>
diff --git a/src/components/app/UIApp.test.ts b/src/components/app/UIApp.test.ts
diff --git a/src/components/app/UIApp.vue b/src/components/app/UIApp.vue
diff --git a/src/components/avatar/UIAvatar.vue b/src/components/avatar/UIAvatar.vue
@@ -25,7 +25,6 @@
 import { defineComponent, ref } from 'vue';
 import { getIcon } from '@/helpers';
 
-// todo - use img component?
 export default defineComponent({
     name: 'UIAvatar',
 

diff --git a/src/components/avatar/UIAvatarGroup.vue b/src/components/avatar/UIAvatarGroup.vue
@@ -47,7 +47,7 @@ export default defineComponent({
          */
         avatars: {
             type: Array as PropType<Avatar[]>,
-            default: []
+            default: () => []
         },
 
         /**

diff --git a/src/components/button-toggle/UIButtonToggle.vue b/src/components/button-toggle/UIButtonToggle.vue
@@ -76,7 +76,7 @@ export default defineComponent({
         const model = useVModel<MaybeArray<Option> | null>(props);
 
         const toggleOption = (option: Option): void => {
-            const values = Array.isArray(model.value)
+            const values: Option[] = Array.isArray(model.value)
                 ? model.value
                 : model.value ? [model.value] : [];
 
@@ -114,7 +114,7 @@ export default defineComponent({
             () => props.multi,
             val => {
                 if (val) {
-                    model.value = wrap(model.value).filter(v => !!v);
+                    model.value = wrap(model.value).filter(v => !!v) as Option[];
                     return;
                 }
 

diff --git a/src/components/button-toggle/__snapshots__/UIButtonToggle.test.ts.snap b/src/components/button-toggle/__snapshots__/UIButtonToggle.test.ts.snap
@@ -9,78 +9,69 @@ exports[`UIButtonToggle should correctly display 1`] = `
   
   <button
     aria-checked="false"
-    class="text-gray-600 border shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none hover:text-white hover:bg-gray-400 px-3.5 py-2 ui-button rounded disabled:cursor-not-allowed disabled:opacity-50
-                   transition relative font-bold text-sm border-0 m-0 border"
+    class="text-gray-600 border shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none hover:text-white hover:bg-gray-400 px-3.5 py-2 ui-button rounded relative font-bold text-sm border-0 m-0 border"
     role="switch"
     type="button"
   >
-    <span
-      class="loader absolute abs-center transition-opacity duration-200 opacity-0"
-    >
+    <transition-stub>
       
       <!--v-if-->
-      
-    </span>
-    <span
-      aria-hidden="false"
-      class="label transition-opacity duration-200 opacity-1"
-    >
-      
-      
-      Places
-      
-      
-    </span>
+      <span
+        aria-hidden="false"
+        class="label transition-opacity duration-200 opacity-1"
+      >
+        
+        
+        Places
+        
+        
+      </span>
+      
+    </transition-stub>
   </button>
   <button
     aria-checked="false"
-    class="text-gray-600 border shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none hover:text-white hover:bg-gray-400 px-3.5 py-2 ui-button rounded disabled:cursor-not-allowed disabled:opacity-50
-                   transition relative font-bold text-sm border-0 m-0 border border-l-0"
+    class="text-gray-600 border shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none hover:text-white hover:bg-gray-400 px-3.5 py-2 ui-button rounded relative font-bold text-sm border-0 m-0 border border-l-0"
     role="switch"
     type="button"
   >
-    <span
-      class="loader absolute abs-center transition-opacity duration-200 opacity-0"
-    >
+    <transition-stub>
       
       <!--v-if-->
-      
-    </span>
-    <span
-      aria-hidden="false"
-      class="label transition-opacity duration-200 opacity-1"
-    >
-      
-      
-      List
-      
-      
-    </span>
+      <span
+        aria-hidden="false"
+        class="label transition-opacity duration-200 opacity-1"
+      >
+        
+        
+        List
+        
+        
+      </span>
+      
+    </transition-stub>
   </button>
   <button
     aria-checked="false"
-    class="text-gray-600 border shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none hover:text-white hover:bg-gray-400 px-3.5 py-2 ui-button rounded disabled:cursor-not-allowed disabled:opacity-50
-                   transition relative font-bold text-sm border-0 m-0 border border-l-0"
+    class="text-gray-600 border shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none hover:text-white hover:bg-gray-400 px-3.5 py-2 ui-button rounded relative font-bold text-sm border-0 m-0 border border-l-0"
     role="switch"
     type="button"
   >
-    <span
-      class="loader absolute abs-center transition-opacity duration-200 opacity-0"
-    >
+    <transition-stub>
       
       <!--v-if-->
-      
-    </span>
-    <span
-      aria-hidden="false"
-      class="label transition-opacity duration-200 opacity-1"
-    >
-      
-      
-      Map
-      
-      
-    </span>
+      <span
+        aria-hidden="false"
+        class="label transition-opacity duration-200 opacity-1"
+      >
+        
+        
+        Map
+        
+        
+      </span>
+      
+    </transition-stub>
   </button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -197,7 +197,8 @@ module.exports = { @@
                         {
                             "ignore": ["describe"]
                         }
-                    ]
+                    ],
+                    "jest/no-disabled-tests": "warn"
                 }
             }
         ]
@@ Expand Down @@