Standardies labels (#288)

## Style * style: update DemoBoard bg color * style(input): moved password toggle into the input ## Chore * chore(dev-deps): Updated commit linting dependencies - @commitlint/config-conventional - @commitlint/prompt-cli - @commitlint/types - commitlint * chore(deps-dev): updated vue ## Feature * feat: added conditional label rendering * chore(deps-dev): updated dependencies ## ci * ci: decrease dependency check frequency * ci: set action version to major only * ci: fixed enum ## Test * test: updated snapshots ## Revert * revert(file-input): removed the replication attempt code
karnama · Sep 28, 2021 · 0655bfc · 0655bfc
1 parent 86e9ba0
commit 0655bfc
Show file tree

Hide file tree

Showing 31 changed files with 843 additions and 2,904 deletions.
diff --git a/.commitlintrc.js b/.commitlintrc.js
@@ -38,7 +38,7 @@ module.exports = {
                 'click-away',
                 'intersect',
                 'deps',
-                'dev-deps'
+                'deps-dev'
             ]
         ],
     }

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -4,7 +4,7 @@ updates:
 - package-ecosystem: npm
   directory: '/'
   schedule:
-    interval: weekly
+    interval: monthly
     time: '00:00'
   open-pull-requests-limit: 10
   commit-message:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.7.0",
+    "version": "0.7.1",
     "files": [
         "dist",
         "types"
@@ -19,7 +19,6 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "watch": "vite build --watch",
         "test": "jest",
         "test:update-snapshots": "npm run test -- --updateSnapshot",
         "lint": "eslint . --fix --ext .ts,.vue,.tsx",
@@ -32,9 +31,9 @@
     },
     "devDependencies": {
         "@babel/core": "^7.13.16",
-        "@commitlint/config-conventional": "^12.1.4",
-        "@commitlint/prompt-cli": "^12.1.4",
-        "@commitlint/types": "^12.1.4",
+        "@commitlint/config-conventional": "^13.1.0",
+        "@commitlint/prompt-cli": "^13.1.0",
+        "@commitlint/types": "^13.1.0",
         "@types/glob": "^7.1.3",
         "@types/jest": "^26.0.23",
         "@types/lodash-es": "^4.17.4",
@@ -44,15 +43,13 @@
         "@typescript-eslint/eslint-plugin": "^4.22.1",
         "@typescript-eslint/parser": "^4.26.1",
         "@vitejs/plugin-vue": "^1.2.2",
-        "@vue/compiler-sfc": "~3.0.11",
+        "@vue/compiler-sfc": "^3.2.11",
         "@vue/eslint-config-typescript": "^7.0.0",
         "@vue/test-utils": "^2.0.0-rc.10",
-        "@vuedx/typecheck": "^0.7.4",
-        "@vuedx/typescript-plugin-vue": "^0.7.4",
         "autoprefixer": "^10.2.3",
         "babel-jest": "^26.6.3",
         "babel-loader": "^8.2.2",
-        "commitlint": "^12.1.4",
+        "commitlint": "^13.1.0",
         "eslint": "^7.28.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-jest": "^24.3.6",
@@ -71,7 +68,7 @@
         "ts-node": "^10.0.0",
         "typescript": "^4.3.4",
         "vite": "^2.4.1",
-        "vue": "~3.0.11",
+        "vue": "^3.2.11",
         "vue-docgen-api": "^4.40.0",
         "vue-jest": "^5.0.0-alpha.7",
         "vue-loader": "^16.2.0",

diff --git a/src/DemoBoard.vue b/src/DemoBoard.vue
@@ -101,12 +101,25 @@ export default defineComponent({
         });
         const isOpen = ref(cache.get('menuOpen', true));
 
+        const setBg = (dark: boolean) => {
+            if (dark) {
+                document.body.classList.add('bg-gray-700');
+                document.body.classList.remove('bg-gray-100');
+                return;
+            }
+
+            document.body.classList.remove('bg-gray-700');
+            document.body.classList.add('bg-gray-100');
+        };
+
         document.body.classList.add(cache.get('theme', 'light')!);
+        setBg(cache.get('theme', 'light') === 'dark');
 
         watch(() => isOpen.value, val => cache.set('menuOpen', val));
         watch(() => darkMode.value, val => {
             cache.set('theme', val ? 'dark' : 'light');
             document.body.classList.toggle('dark');
+            setBg(val);
         });
 
         return {

diff --git a/src/components/avatar/__snapshots__/UIAvatar.test.ts.snap b/src/components/avatar/__snapshots__/UIAvatar.test.ts.snap
@@ -2,8 +2,7 @@
 
 exports[`UIAvatar should correctly display 1`] = `
 <div
-  class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
+  class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
 >
   
   <span>

diff --git a/src/components/avatar/__snapshots__/UIAvatarGroup.test.ts.snap b/src/components/avatar/__snapshots__/UIAvatarGroup.test.ts.snap
@@ -11,8 +11,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
   >
     
     <div
-      class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
+      class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 50;"
     >
       
@@ -37,8 +36,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
       
     </div>
     <div
-      class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
+      class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 40;"
     >
       
@@ -48,8 +46,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
       
     </div>
     <div
-      class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
+      class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 30;"
     >
       
@@ -59,17 +56,15 @@ exports[`UIAvatarGroup should correctly display 1`] = `
       
     </div>
     <div
-      class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
+      class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 20;"
     >
       <img
         src="imgSource"
       />
     </div>
     <div
-      class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded"
+      class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded"
       style="z-index: 10;"
     >
       

diff --git a/src/components/checkbox/__snapshots__/UICheckbox.test.ts.snap b/src/components/checkbox/__snapshots__/UICheckbox.test.ts.snap
@@ -15,8 +15,7 @@ exports[`UICheckbox should correctly display 1`] = `
       type="checkbox"
     />
     <span
-      class="ui-checkbox rounded flex justify-center items-center flex-shrink-0
-                 transition-all text-white border-2 cursor-pointer"
+      class="ui-checkbox rounded flex justify-center items-center flex-shrink-0 transition-all text-white border-2 cursor-pointer"
     >
       <span
         class="transition-all opacity-0 scale-0 text-white"

diff --git a/src/components/dropdown/__snapshots__/UIDropdown.test.ts.snap b/src/components/dropdown/__snapshots__/UIDropdown.test.ts.snap
@@ -11,8 +11,7 @@ exports[`UIDropdown should correctly display 1`] = `
   />
   
   <div
-    class="dropdown absolute z-50 rounded overflow-scroll flex flex-col items-stretch shadow-lg
-                    bg-white dark:bg-gray-600 ring-1 ring-opacity-5 ring-black dark:ring-white dark:ring-opacity-5"
+    class="dropdown absolute z-50 rounded overflow-scroll flex flex-col items-stretch shadow-lg bg-white dark:bg-gray-600 ring-1 ring-opacity-5 ring-black dark:ring-white dark:ring-opacity-5"
     role="group"
     style="max-height: 35vh; width: 250px; right: 0px; top: 0px;"
   >

diff --git a/src/components/file-input/UIFileInput.vue b/src/components/file-input/UIFileInput.vue
@@ -1,10 +1,15 @@
 <template>
     <div class="ui-file-input" :class="$attrs.class">
-        <label :for="$attrs.id ?? name"
-               class="font-medium text-color flex items-center"
-               :class="{ 'text-color-error': error || $slots.error }">
-            {{ label }}
-        </label>
+        <UIExpandTransition>
+            <label v-if="label || $slots.label"
+                   :for="$attrs.id ?? name"
+                   class="font-medium text-color flex items-center"
+                   :class="{ 'text-color-error': error || $slots.error }">
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </label>
+        </UIExpandTransition>
 
         <div ref="input"
              class="rounded flex justify-between items-center shadow-sm focus:outline-none

diff --git a/src/components/file-uploader/__snapshots__/UIFile.test.ts.snap b/src/components/file-uploader/__snapshots__/UIFile.test.ts.snap
@@ -33,8 +33,7 @@ exports[`UIFile should display correctly 1`] = `
         >
           
           <div
-            class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full avatar text-xs"
+            class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full avatar text-xs"
           >
             
             

diff --git a/src/components/file-uploader/__snapshots__/UIFileUploader.test.ts.snap b/src/components/file-uploader/__snapshots__/UIFileUploader.test.ts.snap
@@ -4,8 +4,7 @@ exports[`UIFileUploader should display correctly 1`] = `
 <div>
   <div
     aria-label="File Upload"
-    class="rounded-lg drop-zone border-2 border-dashed transition-colors flex flex-wrap items-stretch
-                    dark:text-white relative border-current"
+    class="rounded-lg drop-zone border-2 border-dashed transition-colors flex flex-wrap items-stretch dark:text-white relative border-current"
     tabindex="0"
   >
     <input
@@ -55,8 +54,7 @@ exports[`UIFileUploader should display correctly 1`] = `
       </button>
     </div>
     <div
-      class="w-full sm:w-1/2 flex flex-col py-6 px-2
-                        justify-between bg-gray-200 dark:bg-gray-600 items-center"
+      class="w-full sm:w-1/2 flex flex-col py-6 px-2 justify-between bg-gray-200 dark:bg-gray-600 items-center"
       style="display: none;"
     >
       <div

diff --git a/src/components/input/UIInput.test.ts b/src/components/input/UIInput.test.ts
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import UIInput from './UIInput.vue';
+import { nextTick } from 'vue';
 
 describe('UIInput', () => {
     it('should correctly display', () => {
@@ -59,7 +60,8 @@ describe('UIInput', () => {
         const wrapper = mount(UIInput, {
             props: {
                 modelValue: '',
-                name
+                name,
+                label: 'my label'
             }
         });
 
@@ -225,4 +227,57 @@ describe('UIInput', () => {
 
         expect(wrapper.get('.suffix').text()).toBe(suffix);
     });
+
+    it('should only display the label if slot or prop given', async () => {
+        let wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input'
+            }
+        });
+
+        expect(wrapper.find('label').exists()).toBe(false);
+
+        await wrapper.setProps({ label: 'myLabel' });
+        expect(wrapper.find('label').exists()).toBe(true);
+
+        wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input'
+            },
+            slots: {
+                label: 'myLabel'
+            }
+        });
+        expect(wrapper.find('label').exists()).toBe(true);
+    });
+
+    it('should toggle the input type on password type when toggle clicked on', async () => {
+        jest.useFakeTimers();
+        const wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input',
+                type: 'password',
+                passwordToggleTimeout: 1000
+            }
+        });
+
+        expect(wrapper.get('input').attributes('type')).toBe('password');
+
+        await wrapper.get('.pass-toggle').trigger('click');
+        expect(wrapper.get('input').attributes('type')).toBe('text');
+
+        await wrapper.get('.pass-toggle').trigger('click');
+        expect(wrapper.get('input').attributes('type')).toBe('password');
+
+        // it automatically turns back
+        await wrapper.get('.pass-toggle').trigger('click');
+        jest.runAllTimers();
+        await nextTick();
+        expect(wrapper.get('input').attributes('type')).toBe('password');
+
+        jest.useRealTimers();
+    });
 });
diff --git a/src/components/input/UIInput.vue b/src/components/input/UIInput.vue
@@ -1,20 +1,15 @@
 <template>
     <div class="ui-text" :class="$attrs.class">
-        <label :for="$attrs.id ?? name"
-               class="font-medium text-color inline-flex"
-               :class="{ 'text-color-error': error || $slots.error }">
-            {{ label }}
-            <template v-if="isPasswordInitially && !disablePasswordToggle">
-                <button v-if="inputType === 'password'"
-                        class="ml-2"
-                        @click="inputType = 'text'"
-                        v-html="hideIcon" />
-                <button v-else
-                        class="ml-2"
-                        @click="inputType = 'password'"
-                        v-html="showIcon" />
-            </template>
-        </label>
+        <UIExpandTransition>
+            <label v-if="label || $slots.label"
+                   :for="$attrs.id ?? name"
+                   class="font-medium text-color inline-flex"
+                   :class="{ 'text-color-error': error || $slots.error }">
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </label>
+        </UIExpandTransition>
 
         <div class="shadow-sm dark:shadow-md border border-gray-300 dark:border-gray-500 rounded
                     bg-white dark:bg-gray-600 transition"
@@ -25,6 +20,16 @@
              }"
              :style="$attrs.style">
             <div class="flex items-center">
+                <template v-if="isPasswordInitially && !disablePasswordToggle">
+                    <button v-if="inputType === 'password'"
+                            class="ml-3 -mr-1 p-1 text-color-muted pass-toggle"
+                            @click="inputType = 'text'"
+                            v-html="hideIcon" />
+                    <button v-else
+                            class="ml-3 -mr-1 p-1 text-color-muted pass-toggle"
+                            @click="inputType = 'password'"
+                            v-html="showIcon" />
+                </template>
                 <span v-if="prefix ?? $slots.prefix"
                       class="prefix ml-3 -mr-1 select-none text-color-muted"
                       :class="{ 'ml-5 -mr-4': large }">
@@ -357,7 +362,7 @@ input:disabled[type=number] {
     -moz-appearance: textfield;
 }
 
-.prefix, .suffix {
+.prefix, .suffix, .pass-toggle {
     line-height: 1.28;
 }
 </style>
diff --git a/src/components/input/__snapshots__/UIInput.test.ts.snap b/src/components/input/__snapshots__/UIInput.test.ts.snap
@@ -4,24 +4,20 @@ exports[`UIInput should correctly display 1`] = `
 <div
   class="ui-text"
 >
-  <label
-    class="font-medium text-color inline-flex"
-    for="input"
-  >
-     
-    <!--v-if-->
-  </label>
+  <transition-stub>
+    
+    
+  </transition-stub>
   <div
-    class="shadow-sm dark:shadow-md border border-gray-300 dark:border-gray-500 rounded
-                    bg-white dark:bg-gray-600 transition focus-within:border-blue-400 dark:focus-within:border-blue-500"
+    class="shadow-sm dark:shadow-md border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-600 transition focus-within:border-blue-400 dark:focus-within:border-blue-500"
   >
     <div
       class="flex items-center"
     >
+      <!--v-if-->
       <!--v-if-->
       <input
-        class="flex-1 p-3.5 appearance-none bg-transparent outline-none
-                              text-color disabled:text-gray-400"
+        class="flex-1 p-3.5 appearance-none bg-transparent outline-none text-color disabled:text-gray-400"
         id="input"
         name="input"
         type="text"
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,8 +33,7 @@ exports[`UIFile should display correctly 1`] = ` @@
             >
               <div
-                class="ui-avatar text-lg overflow-hidden h-8 w-8
-                    text-white bg-brand-400 flex flex-col justify-center items-center rounded-full avatar text-xs"
+                class="ui-avatar text-lg overflow-hidden h-8 w-8 text-white bg-brand-400 flex flex-col justify-center items-center rounded-full avatar text-xs"
               >
@@ Expand Down @@