@policystudio/policy-studio-ui-vue 1.2.0-access.16 → 1.2.0-access.18

package/dist/css/psui_styles_output.css

@@ -1013,7 +1013,7 @@ video {
   outline: none;
 }
 .psui-el-tab-header button:focus-visible {
-  outline: 2px solid #2563EB;
+  outline: 2px solid #2563eb;
   outline-offset: 2px;
   border-radius: 6px;
 }
@@ -1172,7 +1172,7 @@ video {
   position: relative;
 }
 .psui-el-tab-header.layout-underline button {
-  font-weight: 600;
+  font-weight: 500;
 }
 .psui-el-tab-header.layout-underline button {
   --tw-text-opacity: 1;
@@ -1290,8 +1290,8 @@ video {
   justify-content: space-between;
 }
 .psui-el-accordion-item-header {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .psui-el-accordion-item-header-wrapper {
   display: flex;
@@ -1320,17 +1320,13 @@ video {
 .psui-el-accordion-item-header-wrapper {
   transition: cubic-bezier(0.17, 0.67, 0.83, 0.67) 250ms;
 }
-.psui-el-accordion-item-header-wrapper:hover .psui-el-accordion-item-icon {
-  --tw-text-opacity: 1 !important;
-  color: rgb(18, 121, 153, var(--tw-text-opacity, 1)) !important;
-}
-.psui-el-accordion-item-header-wrapper:hover .psui-el-accordion-item-title {
-  --tw-text-opacity: 1;
-  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
-}
 .psui-el-accordion-item-title {
   margin-right: auto;
 }
+.psui-el-accordion-item-icon {
+  --tw-text-opacity: 1;
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
+}
 .psui-el-accordion-item-icon {
   font-family: "Material Icons Round";
   font-weight: normal;
@@ -1351,6 +1347,14 @@ video {
   width: 20px;
   transition: transform 0.4s ease-in-out;
 }
+.psui-el-accordion-item:hover .psui-el-accordion-item-header-wrapper {
+  --tw-text-opacity: 1;
+  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
+}
+.psui-el-accordion-item:not(:hover) .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-title {
+  --tw-text-opacity: 1;
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
+}
 .psui-el-accordion.layout-big .psui-el-accordion-item-header, .psui-el-accordion.layout-big .psui-el-accordion-item-content {
   padding-left: 1rem;
 }
@@ -1362,7 +1366,7 @@ video {
   line-height: 24px;
 }
 .psui-el-accordion.layout-big .psui-el-accordion-item-title {
-  font-weight: 700;
+  font-weight: 500;
 }
 .psui-el-accordion.layout-big .psui-el-accordion-item-icon {
   --tw-text-opacity: 1;
@@ -1373,7 +1377,7 @@ video {
   line-height: 20px;
 }
 .psui-el-accordion.layout-medium .psui-el-accordion-item-title {
-  font-weight: 700;
+  font-weight: 500;
 }
 .psui-el-accordion.layout-medium .psui-el-accordion-item-icon {
   --tw-text-opacity: 1;
@@ -1382,14 +1386,6 @@ video {
 .psui-el-accordion.layout-medium .psui-el-accordion-item.status-opened .psui-el-accordion-item-icon {
   transform: rotate(180deg);
 }
-.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-icon {
-  --tw-text-opacity: 1;
-  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
-}
-.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-title {
-  --tw-text-opacity: 1;
-  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
-}
 .psui-el-accordion .psui-el-accordion-item-content {
   margin-bottom: 1.25rem;
 }
@@ -1609,7 +1605,7 @@ video {
   font-family: inherit;
 }
 .psui-el-button span {
-  font-weight: 600;
+  font-weight: 500;
 }
 .psui-el-button span {
   line-height: 130%;
@@ -4882,7 +4878,7 @@ video {
   font-size: 12px;
 }
 .psui-el-mini-tag span {
-  font-weight: 600;
+  font-weight: 500;
 }
 .psui-el-mini-tag span {
   line-height: 16px;
@@ -6537,10 +6533,22 @@ video {
   height: 0.5rem;
 }
 
+.psui-h-3\.5 {
+  height: 0.875rem;
+}
+
+.psui-h-4 {
+  height: 1rem;
+}
+
 .psui-h-5 {
   height: 1.25rem;
 }
 
+.psui-h-\[18px\] {
+  height: 18px;
+}
+
 .psui-h-full {
   height: 100%;
 }
@@ -6549,6 +6557,14 @@ video {
   width: 0.5rem;
 }
 
+.psui-w-3\.5 {
+  width: 0.875rem;
+}
+
+.psui-w-4 {
+  width: 1rem;
+}
+
 .psui-w-48 {
   width: 12rem;
 }
@@ -6557,6 +6573,10 @@ video {
   width: 1.25rem;
 }
 
+.psui-w-\[18px\] {
+  width: 18px;
+}
+
 .psui-w-auto {
   width: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.16",
+  "version": "1.2.0-access.18",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsAccordion.scss

@@ -25,21 +25,11 @@
       }
 
       &-header {
-        @apply psui-flex psui-justify-between psui-items-center;
-        padding-top: 16px;
-        padding-bottom: 16px;
+        @apply psui-flex psui-justify-between psui-items-center psui-py-[10px];
+
 
         &-wrapper {
           @apply psui-flex psui-items-start psui-justify-between psui-w-full psui-cursor-pointer psui-transition-all transition-default psui-text-gray-80;
-        
-          &:hover {
-            .psui-el-accordion-item-icon {
-              @apply psui-text-blue-60 !important;
-            }
-            .psui-el-accordion-item-title{
-              @apply psui-text-blue-60;
-            }
-          }
         }
       }
 
@@ -48,12 +38,26 @@
       }
 
       &-icon {
-        @apply psui-icon;
+        @apply psui-icon psui-text-gray-60;
         font-size: 20px;
         width: 20px;
         transition: transform 0.4s ease-in-out;
       }
 
+      &:hover {
+        .psui-el-accordion-item-header-wrapper {
+          @apply psui-text-blue-60;
+        }
+      }
+
+      &:not(:hover) {
+        .psui-el-accordion-item-header-wrapper {
+          .psui-el-accordion-item-title {
+            @apply psui-text-gray-80;
+          }
+        }
+      }
+      
     }
 
     &.layout-big {
@@ -62,7 +66,7 @@
           @apply psui-pl-4 psui-pr-4;
         }
         &-title {
-          @apply psui-text-18 psui-font-bold;
+          @apply psui-text-18 psui-font-semibold;
         }
         &-icon {
           @apply psui-text-gray-30
@@ -73,7 +77,7 @@
     &.layout-medium {
       .psui-el-accordion-item {
         &-title {
-          @apply psui-text-14 psui-font-bold;
+          @apply psui-text-14 psui-font-semibold;
         }
         &-icon {
           @apply psui-text-gray-60;
@@ -86,19 +90,6 @@
         }
       }
     }
-
-    .psui-el-accordion-item {
-      &.status-opened .psui-el-accordion-item-header {
-        .psui-el-accordion-item-header-wrapper {
-          .psui-el-accordion-item-icon {
-            @apply psui-text-blue-60;
-          }
-          .psui-el-accordion-item-title{
-            @apply psui-text-blue-60;
-          }
-        }
-      }
-    }
     
     .psui-el-accordion-item-content {
       @apply psui-list-none psui-text-gray-60 psui-mb-5;

package/src/assets/scss/components/PsButton.scss

@@ -13,7 +13,7 @@
     &:focus-visible {
       @apply psui-outline-2 psui-outline psui-outline-focus-ring psui-outline-offset-2 psui-rounded-[6px];
     }
-    
+
     &[href] {
       @apply psui-inline-flex;
     }

package/src/assets/scss/components/PsTabHeader.scss

@@ -1,11 +1,10 @@
-@layer components{
-
+@layer components {
   .psui-el-tab-header {
     @apply psui-flex psui-space-x-1;
 
     button {
       @apply transition-default psui-text-14;
-      
+
       &.status-disabled {
         @apply psui-cursor-not-allowed;
       }
@@ -15,146 +14,141 @@
       }
 
       &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
+        outline: 2px solid #2563eb;
+        outline-offset: 2px;
+        border-radius: 6px;
       }
     }
 
     &.status-disabled {
       .psui-el-input-wrapper {
-        @apply psui-bg-gray-20 psui-border-gray-20
+        @apply psui-bg-gray-20 psui-border-gray-20;
       }
     }
 
     /*  Layout Policy Design  */
-      &.layout-policy-design {
-          button {
-            padding: 8px 2px 7px 0px;
-            margin-right: 8px;
-            @apply psui-flex psui-items-center psui-relative;
-            
-            &:not(:first-child) {
-              margin-left: 8px;
-            }
-             
-
-            &:after {
-              content: '';
-              @apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
-            }
-
-            &:hover {
-              > div {
-                @apply psui-text-gray-60;
-              }
-            }
-
-            &.status-active {
-              @apply psui-border-blue-60;
-
-              &:after {
-                @apply psui-opacity-100;
-              }
-
-               > div {
-                @apply psui-text-blue-60;
-               }
-
-               > span {
-                @apply psui-font-bold psui-text-gray-70;
-               }
-            }
-
-            > div {
-              @apply psui-text-gray-50 psui-mr-1;
-            }
-
-            > span {
-              line-height: 120%;
-              font-size: 14px;
-              @apply psui-text-gray-60 psui-font-bold;
-            }
+    &.layout-policy-design {
+      button {
+        padding: 8px 2px 7px 0px;
+        margin-right: 8px;
+        @apply psui-flex psui-items-center psui-relative;
+
+        &:not(:first-child) {
+          margin-left: 8px;
+        }
+
+        &:after {
+          content: '';
+          @apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
+        }
+
+        &:hover {
+          > div {
+            @apply psui-text-gray-60;
           }
         }
-      
 
+        &.status-active {
+          @apply psui-border-blue-60;
+
+          &:after {
+            @apply psui-opacity-100;
+          }
+
+          > div {
+            @apply psui-text-blue-60;
+          }
+
+          > span {
+            @apply psui-font-bold psui-text-gray-70;
+          }
+        }
+
+        > div {
+          @apply psui-text-gray-50 psui-mr-1;
+        }
 
+        > span {
+          line-height: 120%;
+          font-size: 14px;
+          @apply psui-text-gray-60 psui-font-bold;
+        }
+      }
+    }
     /* ----------------------------------------- */
 
     /* 	Layout Standard  */
     /* ----------------------------------------- */
-      &.layout-standard {
-        @apply psui-rounded-md;
+    &.layout-standard {
+      @apply psui-rounded-md;
 
-        .psui-el-tooltip{
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+      .psui-el-tooltip {
+        &:not(:last-child) {
+          margin-right: 20px;
         }
-        
-        button {
-          @apply psui-bg-gray-10 psui-text-gray-60;
-          padding: 6px 12px;
-          box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
+      }
 
-          &:not(:last-child) {
-            margin-right: 1px;
-          }
+      button {
+        @apply psui-bg-gray-10 psui-text-gray-60;
+        padding: 6px 12px;
+        box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
 
-          &:first-child {
-            @apply psui-rounded-l;
-          }
+        &:not(:last-child) {
+          margin-right: 1px;
+        }
 
-          &:last-child {
-            @apply psui-rounded-r;
-          }
+        &:first-child {
+          @apply psui-rounded-l;
+        }
 
-          &:hover {
-            @apply psui-text-blue-60;
-            box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
-          }
+        &:last-child {
+          @apply psui-rounded-r;
+        }
 
-          &.status-active {
-            @apply psui-text-white psui-bg-blue-60 psui-font-bold;
-          }
+        &:hover {
+          @apply psui-text-blue-60;
+          box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
+        }
 
-          &.status-disabled:hover {
-            @apply psui-text-gray-60;
-          }
+        &.status-active {
+          @apply psui-text-white psui-bg-blue-60 psui-font-bold;
+        }
+
+        &.status-disabled:hover {
+          @apply psui-text-gray-60;
         }
       }
+    }
     /* ----------------------------------------- 	Layout Standard */
-    
+
     /* Layout Underline */
     /* ----------------------------------------- */
-      &.layout-underline {
-        .psui-el-tooltip {
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+    &.layout-underline {
+      .psui-el-tooltip {
+        &:not(:last-child) {
+          margin-right: 20px;
         }
+      }
 
-        button {
-          @apply psui-text-gray-80 psui-font-semibold psui-relative;
-          padding: 8px 0;
+      button {
+        @apply psui-text-gray-80 psui-font-semibold psui-relative;
+        padding: 8px 0;
 
-          &:hover {
-            @apply psui-text-blue-60;
-          }
+        &:hover {
+          @apply psui-text-blue-60;
+        }
 
-          &:not(:last-child) {
-            margin-right: 8px;
-          }
+        &:not(:last-child) {
+          margin-right: 8px;
+        }
 
-          &.status-enable:hover {
-            @apply psui-text-blue-60;
-          }
+        &.status-enable:hover {
+          @apply psui-text-blue-60;
+        }
 
-          &.status-active {
-            &::after {
-              @apply
-              psui-content-['']
+        &.status-active {
+          &::after {
+            @apply psui-content-['']
               psui-absolute 
               psui-bottom-0 
               psui-left-0 
@@ -163,46 +157,42 @@
               psui-rounded-tl-[20px] 
               psui-rounded-tr-[20px]
                psui-bg-blue-60;
-            }
           }
         }
       }
+    }
     /* ----------------------------------------- Layout Underline */
-    
-    
+
     /* Layout Folder */
     /* ----------------------------------------- */
-      &.layout-folder {
-
-        .psui-el-tooltip{
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+    &.layout-folder {
+      .psui-el-tooltip {
+        &:not(:last-child) {
+          margin-right: 20px;
         }
+      }
 
-        button {
-          @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
-          padding: 9px 12px;
+      button {
+        @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
+        padding: 9px 12px;
 
-          &:hover {
-            @apply psui-text-blue-60;
-          }
+        &:hover {
+          @apply psui-text-blue-60;
+        }
 
-          &:not(:last-child) {
-            margin-right: 4px;
-          }
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
 
-          &.status-enable:hover {
-            @apply psui-text-gray-60;
-          }
+        &.status-enable:hover {
+          @apply psui-text-gray-60;
+        }
 
-          &.status-active {
-            @apply psui-text-blue-60 psui-font-bold psui-bg-white;
-          }
+        &.status-active {
+          @apply psui-text-blue-60 psui-font-bold psui-bg-white;
         }
       }
+    }
     /* ----------------------------------------- Layout Folder */
-    
   }
-
-}
+}

package/src/components/buttons/PsButton.vue

@@ -14,8 +14,8 @@
   >
     <svg
       v-if="loading && showLoadingLeft"
-      class="psui-animate-spin psui-h-5 psui-w-5 psui-text-black"
-      :class="iconLeft ? 'icon-left-side' : 'psui-mr-2'"
+      class="psui-animate-spin psui-text-black"
+      :class="[loadingSizeClass, iconLeft ? 'icon-left-side' : 'psui-mr-2']"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -45,8 +45,8 @@
 
     <svg
       v-if="loading && showLoadingRight"
-      class="psui-animate-spin psui-h-5 psui-w-5 psui-text-black"
-      :class="iconRight ? 'icon-right-side' : 'psui-ml-2'"
+      class="psui-animate-spin psui-text-black"
+      :class="[loadingSizeClass, iconRight ? 'icon-right-side' : 'psui-ml-2']"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -157,6 +157,16 @@ const showLoadingRight = computed(() => {
   return false
 })
 
+const loadingSizeClass = computed(() => {
+  const sizeMap = {
+    compact: 'psui-h-3.5 psui-w-3.5',
+    small: 'psui-h-4 psui-w-4',
+    medium: 'psui-h-[18px] psui-w-[18px]',
+    big: 'psui-h-5 psui-w-5',
+  }
+  return sizeMap[props.size] || sizeMap.big
+})
+
 const getComponentClass = computed(() => {
   const classes = [`layout-${props.layout}`, `size-${props.size}`]
   

package/tailwind.config.js

@@ -9,6 +9,10 @@ const sizeMap = {
   28: ['28px', { lineHeight: '36px' }]
 }
 
+const customFontWeights = {
+  'medium': 500,
+}
+
 export default {
   prefix: 'psui-',
   content: ['./index.html', './src/**/*.vue', './src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
@@ -132,7 +136,10 @@ export default {
       inset: {
         '-1': '-1rem',
         '-2': '-0.5rem'
-      }
+      },
+      fontWeight: {
+        'semibold': customFontWeights['medium'],
+      },
     },
     screens: {
       sm: '640px',
@@ -140,7 +147,8 @@ export default {
       lg: '1024px',
       xl: '1280px',
       '2xl': '1536px'
-    }
+    },
+    
   },
   variants: {
     boxShadow: ['active'],