fix 0.17.3 (#490)

##Style * style(loader-spinner): add background on determinate state ## Chore * chore: incremented version * chore(deps-dev): updated dependencies ## Testing * test(loader-spinner): updated tests ## Continuous Integration * ci: added github reporter to jest
karnama · Jul 21, 2022 · 20a91ec · 20a91ec
1 parent 43bb9bd
commit 20a91ec
Show file tree

Hide file tree

Showing 8 changed files with 327 additions and 301 deletions.
diff --git a/jest.config.ts b/jest.config.ts
@@ -26,6 +26,7 @@ export default {
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
     preset: 'ts-jest',
     snapshotSerializers: ['jest-serializer-vue'],
+    reporters: ['default', 'github-actions'],
     transform: {
         '^.+\\.vue$': '@vue/vue3-jest',
         '^.+\\ts$': 'ts-jest'

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.17.2",
+    "version": "0.17.3",
     "files": [
         "dist",
         "types"

diff --git a/src/components/button/__snapshots__/UIButton.test.ts.snap b/src/components/button/__snapshots__/UIButton.test.ts.snap
@@ -21,6 +21,7 @@ exports[`UIButton should display the loading correctly 1`] = `
           style="width: 25px; height: 25px;"
           viewBox="0 0 25 25"
         >
+          <!--v-if-->
           <circle
             class="spinner-circle stroke-current"
             cx="50%"

diff --git a/src/components/file-uploader/__snapshots__/UIFile.test.ts.snap b/src/components/file-uploader/__snapshots__/UIFile.test.ts.snap
@@ -19,6 +19,13 @@ exports[`UIFile should display correctly 1`] = `
           style="width: 50px; height: 50px;"
           viewBox="0 0 50 50"
         >
+          <circle
+            class="spinner-circle stroke-brand-100"
+            cx="50%"
+            cy="50%"
+            r="24"
+            stroke-width="2px"
+          />
           <circle
             class="spinner-circle stroke-current"
             cx="50%"
@@ -29,7 +36,7 @@ exports[`UIFile should display correctly 1`] = `
           />
         </svg>
         <div
-          class="abs-center"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
         >
           
           <div

diff --git a/src/components/loader-spinner/UISpinnerLoader.test.ts b/src/components/loader-spinner/UISpinnerLoader.test.ts
@@ -69,7 +69,7 @@ describe('UISpinner', () => {
         };
 
         const wrapper = mount(UISpinnerLoader, { props });
-        const circle = wrapper.find('circle');
+        const circle = wrapper.findAll('circle')[1];
 
         expect(circle.attributes()['style']).toContain(getStrokeOffsetStyle());
         await wrapper.setProps({ progress: 99 });

diff --git a/src/components/loader-spinner/UISpinnerLoader.vue b/src/components/loader-spinner/UISpinnerLoader.vue
@@ -9,14 +9,21 @@
                  preserveAspectRatio="xMidYMid"
                  focusable="false"
                  :viewBox="`0 0 ${diameter} ${diameter}`">
+                <circle v-if="determinate"
+                        class="spinner-circle"
+                        :class="[ inheritColor ? 'background-circle': 'stroke-brand-100']"
+                        cx="50%"
+                        cy="50%"
+                        :r="radius"
+                        :stroke-width="stroke + 'px'" />
                 <circle ref="spinnerCircle"
                         class="spinner-circle stroke-current"
                         cx="50%"
                         cy="50%"
                         :r="radius"
                         :stroke-width="stroke + 'px'" />
             </svg>
-            <div v-if="$slots.default" class="abs-center">
+            <div v-if="$slots.default" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                 <slot />
             </div>
         </div>
@@ -160,11 +167,10 @@ export default defineComponent({
     }
 }
 
-.abs-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+.background-circle {
+    stroke-opacity: 0.4;
+    stroke: currentColor;
+    filter: brightness(160%) saturate(60%) contrast(80%);
 }
 
 .spinner-draw {

diff --git a/src/components/loader-spinner/__snapshots__/UISpinnerLoader.test.ts.snap b/src/components/loader-spinner/__snapshots__/UISpinnerLoader.test.ts.snap
@@ -13,6 +13,13 @@ exports[`UISpinner should render correctly 1`] = `
       style="width: 75px; height: 75px;"
       viewBox="0 0 75 75"
     >
+      <circle
+        class="spinner-circle stroke-brand-100"
+        cx="50%"
+        cy="50%"
+        r="32.5"
+        stroke-width="10px"
+      />
       <circle
         class="spinner-circle stroke-current"
         cx="50%"
@@ -40,6 +47,7 @@ exports[`UISpinner should render correctly when set to determinate 1`] = `
       style="width: 75px; height: 75px;"
       viewBox="0 0 75 75"
     >
+      <!--v-if-->
       <circle
         class="spinner-circle stroke-current"
         cx="50%"