npm - @policystudio/policy-studio-ui-vue - Versions diffs - 1.1.6 → 1.1.7 - Mend

@policystudio/policy-studio-ui-vue 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/css/psui_styles.css +295 -122
package/package.json +1 -1
package/src/assets/scss/base.scss +9 -0
package/src/assets/scss/components/PsDraggable.scss +20 -0
package/src/assets/scss/components/PsTableResults.scss +202 -80
package/src/components/controls/PsDraggable.vue +2 -1
package/src/components/table-results/PsTableResults.vue +148 -2
package/src/components/table-results/PsTableResultsBody.vue +0 -1
package/src/components/table-results/PsTableResultsHead.vue +2 -2
package/src/components/table-results/PsTableResultsHeadComparison.vue +122 -0
package/src/components/table-results/PsTableResultsRow.vue +0 -1
package/src/stories/TableResults.stories.js +6156 -11

package/dist/css/psui_styles.css CHANGED Viewed

@@ -1927,169 +1927,316 @@ video {
   line-height: 130%;
 }
-.psui-el-table-results tr th:last-child, .psui-el-table-results tr td:last-child {
-        padding-right: 0.5rem;
-      }
-.psui-el-table-results thead {
-    background-color: #ffffff ;
-    align-items: flex-start;
-    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
-    position: sticky;
-    top: 0;
-    z-index: 15;
-  }
+.psui-el-table-results.layout-results tr th:last-child, .psui-el-table-results.layout-results tr td:last-child {
+          padding-right: 0.5rem;
+        }
-.psui-el-table-results thead:after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      top: 0;
-      width: 0.5rem;
-      height: 100%;
+.psui-el-table-results.layout-results thead {
       background-color: #ffffff ;
-      right: -8px;
+      align-items: flex-start;
+      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
+      position: sticky;
+      top: 0;
+      z-index: 15;
     }
-.psui-el-table-results thead tr .title {
-        font-size: 14px;
-        line-height: 130%;
-        font-weight: 700;
-        line-height: 1rem;
-        --text-opacity: 1;
-        color: #28323B;
-        color: rgba(40, 50, 59, var(--text-opacity));
-      }
-.psui-el-table-results thead tr th {
-        padding-left: 1.5rem;
-        --text-opacity: 1;
-        color: #798490;
-        color: rgba(121, 132, 144, var(--text-opacity));
-        text-align: right;
-        width: auto;
-        vertical-align: top;
-        padding-top: 13px;
-        padding-bottom: 13px;
+.psui-el-table-results.layout-results thead:after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        width: 0.5rem;
+        height: 100%;
+        background-color: #ffffff ;
+        right: -8px;
       }
-.psui-el-table-results thead tr th .description {
-          font-size: 12px;
+.psui-el-table-results.layout-results thead tr .title {
+          font-size: 14px;
           line-height: 130%;
-          font-weight: 400;
-          line-height: 110%;
+          font-weight: 700;
+          line-height: 1rem;
+          --text-opacity: 1;
+          color: #28323B;
+          color: rgba(40, 50, 59, var(--text-opacity));
         }
-.psui-el-table-results thead tr th:first-child {
-          padding-left: 0;
-          padding-right: 2rem;
-          text-align: left;
-          background-color: #ffffff ;
-          position: sticky;
-          z-index: 10;
-          left: 0;
-          box-shadow: inset -1px 0px 0px #EBEEF0;
-          min-width: 300px;
+.psui-el-table-results.layout-results thead tr th {
+          padding-left: 1.5rem;
+          --text-opacity: 1;
+          color: #798490;
+          color: rgba(121, 132, 144, var(--text-opacity));
+          text-align: right;
+          width: auto;
+          vertical-align: top;
+          padding-top: 13px;
+          padding-bottom: 13px;
         }
-.psui-el-table-results thead tr th:first-child > div {
+.psui-el-table-results.layout-results thead tr th .description {
+            font-size: 12px;
+            line-height: 130%;
+            font-weight: 400;
+            line-height: 110%;
+          }
+.psui-el-table-results.layout-results thead tr th:first-child {
             padding-left: 0;
+            padding-right: 2rem;
+            text-align: left;
+            background-color: #ffffff ;
+            position: sticky;
+            z-index: 10;
+            left: 0;
+            box-shadow: inset -1px 0px 0px #EBEEF0;
+            min-width: 300px;
           }
-.psui-el-table-results thead tr:first-of-type th {
-          text-align: left;
-          padding-top: 0;
-          padding-bottom: 0;
-        }
+.psui-el-table-results.layout-results thead tr th:first-child > div {
+              padding-left: 0;
+            }
-.psui-el-table-results thead tr:first-of-type th > div {
-            display: flex;
-            flex-direction: row;
-            border-bottom-width: 1px;
-            --border-opacity: 1;
-            border-color: #D6DDE5;
-            border-color: rgba(214, 221, 229, var(--border-opacity));
-            padding-top: 11px;
-            padding-bottom: 11px;
+.psui-el-table-results.layout-results thead tr:first-of-type th {
+            text-align: left;
+            padding-top: 0;
+            padding-bottom: 0;
           }
-.psui-el-table-results thead tr:first-of-type p {
-          font-size: 16px;
-          line-height: 130%;
-          line-height: 18px;
-        }
+.psui-el-table-results.layout-results thead tr:first-of-type th > div {
+              display: flex;
+              flex-direction: row;
+              border-bottom-width: 1px;
+              --border-opacity: 1;
+              border-color: #D6DDE5;
+              border-color: rgba(214, 221, 229, var(--border-opacity));
+              padding-top: 11px;
+              padding-bottom: 11px;
+            }
-.psui-el-table-results tbody tr {
-      border-bottom-width: 1px;
-      --border-opacity: 1;
-      border-color: #E6ECF2;
-      border-color: rgba(230, 236, 242, var(--border-opacity));
-    }
+.psui-el-table-results.layout-results thead tr:first-of-type p {
+            font-size: 16px;
+            line-height: 130%;
+            line-height: 18px;
+          }
-.psui-el-table-results tbody tr.is-first .title {
-          font-weight: 700;
+.psui-el-table-results.layout-results tbody tr {
+        border-bottom-width: 1px;
+        --border-opacity: 1;
+        border-color: #E6ECF2;
+        border-color: rgba(230, 236, 242, var(--border-opacity));
+      }
+.psui-el-table-results.layout-results tbody tr.is-first .title {
+            font-weight: 700;
+            --text-opacity: 1;
+            color: #28323B;
+            color: rgba(40, 50, 59, var(--text-opacity));
+          }
+.psui-el-table-results.layout-results tbody tr .title {
+          display: flex;
+          align-items: center;
+        }
+.psui-el-table-results.layout-results tbody tr td {
+          padding-left: 2rem;
           --text-opacity: 1;
           color: #28323B;
           color: rgba(40, 50, 59, var(--text-opacity));
+          height: 2.5rem;
+          text-align: right;
+          font-size: 14px;
+          line-height: 130%;
+          padding-top: 11px;
+          padding-bottom: 11px;
         }
-.psui-el-table-results tbody tr .title {
-        display: flex;
-        align-items: center;
+.psui-el-table-results.layout-results tbody tr td > div {
+            display: flex;
+            align-items: center;
+          }
+.psui-el-table-results.layout-results tbody tr td .actions {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            position: relative;
+          }
+.psui-el-table-results.layout-results tbody tr td .actions-button {
+              cursor: pointer;
+              margin-left: 0.25rem;
+            }
+.psui-el-table-results.layout-results tbody tr td .actions .is-last-deep {
+              padding-left: 2.5rem;
+            }
+.psui-el-table-results.layout-results tbody tr td:not(:first-child) > div {
+              justify-content: flex-end;
+            }
+.psui-el-table-results.layout-results tbody tr td:first-child {
+            padding-left: 0;
+            padding-right: 2rem;
+            text-align: left;
+            display: block;
+            background-color: #ffffff ;
+            position: sticky;
+            z-index: 10;
+            left: 0;
+            box-shadow: inset -1px 0px 0px #EBEEF0;
+            padding-top: 8px;
+            padding-bottom: 8px;
+          }
+.psui-el-table-results.layout-comparison {
+    border-collapse: separate;
+    border-spacing: 2px 8px;
+  }
+.psui-el-table-results.layout-comparison tr th, .psui-el-table-results.layout-comparison tr td {
+        position: relative;
       }
-.psui-el-table-results tbody tr td {
-        padding-left: 2rem;
-        --text-opacity: 1;
-        color: #28323B;
-        color: rgba(40, 50, 59, var(--text-opacity));
-        height: 2.5rem;
-        text-align: right;
-        font-size: 14px;
-        line-height: 130%;
-        padding-top: 11px;
-        padding-bottom: 11px;
+.psui-el-table-results.layout-comparison tr th:last-child, .psui-el-table-results.layout-comparison tr td:last-child {
+          padding-right: 0.5rem;
+        }
+.psui-el-table-results.layout-comparison thead {
+      background-color: transparent;
+      align-items: flex-start;
+    }
+.psui-el-table-results.layout-comparison thead div {
+        position: relative;
       }
-.psui-el-table-results tbody tr td > div {
-          display: flex;
-          align-items: center;
+.psui-el-table-results.layout-comparison thead tr .title {
+          font-size: 14px;
+          line-height: 130%;
+          font-weight: 700;
+          line-height: 1rem;
+          --text-opacity: 1;
+          color: #28323B;
+          color: rgba(40, 50, 59, var(--text-opacity));
         }
-.psui-el-table-results tbody tr td .actions {
-          display: flex;
-          align-items: center;
-          height: 100%;
-          position: relative;
+.psui-el-table-results.layout-comparison thead tr th {
+          padding-left: 1.5rem;
+          padding-right: 1.5rem;
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          --text-opacity: 1;
+          color: #798490;
+          color: rgba(121, 132, 144, var(--text-opacity));
+          text-align: center;
+          vertical-align: top;
+          padding-top: 13px;
+          padding-bottom: 13px;
+          min-width: 200px;
         }
-.psui-el-table-results tbody tr td .actions-button {
-            cursor: pointer;
-            margin-left: 0.25rem;
+.psui-el-table-results.layout-comparison thead tr th .description {
+            font-size: 12px;
+            line-height: 130%;
+            font-weight: 400;
+            line-height: 110%;
           }
-.psui-el-table-results tbody tr td .actions .is-last-deep {
-            padding-left: 2.5rem;
+.psui-el-table-results.layout-comparison thead tr:not(:first-of-type) th:after {
+              position: absolute;
+              top: 0;
+              height: 100%;
+              display: inline-block;
+              --bg-opacity: 1;
+              background-color: #D6DDE5;
+              background-color: rgba(214, 221, 229, var(--bg-opacity));
+              content: '';
+              width: 1px;
+              right: -1px;
+            }
+.psui-el-table-results.layout-comparison thead tr:first-of-type th {
+            text-align: left;
+            --text-opacity: 1;
+            color: #798490;
+            color: rgba(121, 132, 144, var(--text-opacity));
+            font-size: 16px;
+            line-height: 130%;
+            padding-top: 11px;
+            padding-bottom: 11px;
           }
-.psui-el-table-results tbody tr td:not(:first-child) > div {
-            justify-content: flex-end;
+.psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child {
+              min-width: 240px;
+            }
+.psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child .title {
+                --text-opacity: 1;
+                color: #28323B;
+                color: rgba(40, 50, 59, var(--text-opacity));
+                font-weight: 700;
+              }
+.psui-el-table-results.layout-comparison thead tr:first-of-type th:not(:first-child):before {
+                content: '';
+                display: inline-block;
+                background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF2 100%);
+                border-radius: 12px 12px 0px 0px;
+                position: absolute;
+                top: 0; left: 0;
+                width: 100%; height: 88px;
+              }
+.psui-el-table-results.layout-comparison thead tr:first-of-type p {
+            font-size: 14px;
+            line-height: 130%;
+            line-height: 18px;
           }
-.psui-el-table-results tbody tr td:first-child {
-          padding-left: 0;
-          padding-right: 0.5rem;
-          text-align: left;
-          display: block;
+.psui-el-table-results.layout-comparison thead tr:first-of-type p.title {
+              --text-opacity: 1;
+              color: #798490;
+              color: rgba(121, 132, 144, var(--text-opacity));
+              font-weight: 400;
+            }
+.psui-el-table-results.layout-comparison tbody tr td {
           background-color: #ffffff ;
-          position: sticky;
-          z-index: 10;
-          left: 0;
-          box-shadow: inset -1px 0px 0px #EBEEF0;
-          padding-top: 8px;
-          padding-bottom: 8px;
+          position: relative;
+          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
         }
+.psui-el-table-results.layout-comparison tbody tr td:after {
+            top: 0;
+            position: absolute;
+            height: 100%;
+            display: inline-block;
+            content: '';
+            width: 2px;
+            right: -2px;
+            background: rgb(214,221,229);
+            background: linear-gradient(90deg, rgba(214,221,229,1) 50%, rgba(255,255,255,1) 50%);
+          }
+.psui-el-table-results.layout-comparison tbody tr td:first-child {
+            padding-left: 0.75rem;
+            border-top-left-radius: 0.375rem;
+            border-bottom-left-radius: 0.375rem;
+          }
+.psui-el-table-results.layout-comparison tbody tr td:first-child:after {
+              --bg-opacity: 1;
+              background-color: #E6ECF2;
+              background-color: rgba(230, 236, 242, var(--bg-opacity));
+              background-image: none;
+            }
+.psui-el-table-results.layout-comparison tbody tr td .psui-truncate {
+            width: 144px;
+          }
 .psui-el-checkbox {
   position: relative;
   --text-opacity: 1;
@@ -3696,6 +3843,14 @@ video {
         font-size: 18px;
       }
+.psui-el-draggable .psui-el-draggable-wrapper-title:hover .psui-el-draggable-wrapper-title-icon {
+          visibility: visible;
+        }
+.psui-el-draggable .psui-el-draggable-wrapper-title-icon{
+        visibility: hidden;
+      }
 .psui-el-draggable .psui-el-draggable-wrapper-list {
       width: 100%;
       display: flex;
@@ -3748,6 +3903,14 @@ video {
             color: #798490 !important;
           }
+.psui-el-draggable .psui-el-draggable-item-title:hover .psui-el-draggable-item-title-icon {
+          visibility: visible;
+        }
+.psui-el-draggable .psui-el-draggable-item-title-icon{
+        visibility: hidden;
+      }
 .psui-el-draggable .psui-el-draggable-item-append {
       display: flex;
       --text-opacity: 1;
@@ -20117,6 +20280,16 @@ html {
       opacity: 1 !important;
     }
+.psui-show-childrens-on-hover.absolute-childrens {
+    position: relative;
+  }
+.psui-show-childrens-on-hover.absolute-childrens .helper {
+      position: absolute;
+      top: 0;
+      right: -18px;
+    }
 .psui-transition {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss CHANGED Viewed

@@ -84,6 +84,15 @@ html {
       opacity: 1 !important;
     }
   }
+  &.absolute-childrens {
+    @apply psui-relative;
+    .helper {
+      @apply psui-absolute psui-top-0;
+      right: -18px;
+    }
+  }
 }
 .psui-transition {

package/src/assets/scss/components/PsDraggable.scss CHANGED Viewed

@@ -19,6 +19,17 @@
           @apply psui-text-gray-40;
           font-size: 18px;
         }
+        &:hover{
+          .psui-el-draggable-wrapper-title-icon {
+            visibility: visible;
+          }
+        }
+        &-icon{
+          visibility: hidden;
+        }
       }
       &-list {
@@ -52,6 +63,15 @@
             }
           }
         }
+        &:hover{
+          .psui-el-draggable-item-title-icon {
+            visibility: visible;
+          }
+        }
+        &-icon{
+          visibility: hidden;
+        }
       }
       &-append {