@policystudio/policy-studio-ui-vue 1.0.27 → 1.0.28

package/src/assets/scss/components/PsDataTable.scss

@@ -0,0 +1,50 @@
+@layer components{
+
+  .psui-el-table {
+    @apply psui-w-full psui-table-fixed psui-border psui-border-gray-20 psui-text-small psui-text-gray-60 psui-border-separate psui-overflow-hidden psui-rounded;
+    border-spacing: 0;
+
+    &.psui-text-right {
+      th,
+      td {
+        &:first-child {
+          text-align: left;
+        }
+      }
+    }
+
+    thead,
+    tfoot {
+      th {
+        @apply psui-bg-gray-10;
+      }
+    }
+
+    th, td {
+      border-bottom: 1px solid #e6ecf2;
+    }
+    
+    th,
+    td,
+    tr {
+      padding: 11px 16px;
+
+      &:not(:last-child) {
+        border-right: 1px solid #e6ecf2;
+      }
+    }
+
+    thead {
+      th {
+        @apply psui-bg-gray-10 psui-text-gray-80 psui-capitalize psui-font-bold;
+      }
+    }
+
+    tfoot {
+      th { 
+        border-bottom: 0; 
+      }
+    }
+  }
+
+}

package/src/assets/scss/components/PsDropdown.scss

@@ -0,0 +1,44 @@
+@layer components {
+    .psui-el-dropdown-menu {
+        @apply psui-relative psui-inline-block psui-text-left psui-bg-white;
+        padding: 0px 20px;
+        width: 230px;
+
+        &:hover {
+            @apply psui-cursor-pointer psui-bg-blue-10 psui-text-blue-60;
+            
+        }
+
+        &:first-child {
+
+        }
+
+        &-button {
+            @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
+            background-color: transparent;
+            padding-top: 2.5px;
+            padding-bottom: 2.5px;
+            min-height: 27px;
+            font-size: 0.875rem;
+
+            &:focus {
+                outline: none;
+                box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+            }
+        }
+
+        &-dialog {
+            @apply psui-hidden psui-origin-top-right psui-fixed psui-mt-2 psui-w-auto psui-rounded psui-shadow-lg psui-z-50 psui-opacity-0;
+            transition: opacity 150ms ease-in-out;
+
+            &-category-divider {
+                @apply w-full;
+
+                h2 {
+                    @apply psui-text-gray-20 psui-font-bold psui-whitespace-no-wrap psui-mb-4;
+                }
+            }
+
+        }
+    }
+}

package/src/assets/scss/components/PsHighlightRippleDot.scss

@@ -0,0 +1,48 @@
+@layer components {
+    .psui-el-highlight-ripple-icon {
+        @apply psui-static psui-box-border;
+
+        .psui-el-icon {
+            @apply psui-rounded-full psui-w-2 psui-h-2 psui-relative;
+            background-color: #5db883;
+            margin: 100px auto;
+
+            &::before, &::after {
+                @apply psui-rounded-full psui-absolute psui-origin-center;
+                background-color: #def8e8;
+                border: solid 0px;
+                content: '';
+                width: 36px;
+                height: 36px; 
+                left: -8px;
+                top: -8px;
+                transform: scale(1) translate(-1px, -1px);
+                z-index: -1;
+            }
+
+            &::before {
+                animation: ripple 1s infinite;
+            } 
+
+            &::after {
+                animation: ripple 1s infinite;
+
+            }
+        }
+    }
+
+    @keyframes ripple {
+        0% {
+            @apply psui-opacity-100 psui-w-0 psui-h-0;
+            left: 5px;
+            top: 5px; 
+        }
+        100% {
+            @apply psui-opacity-0;
+            left: -13px;
+            top: -13px;
+            width: 36px; 
+            height: 36px; 
+        }
+    }
+}

package/src/assets/scss/components/PsInlineSelector.scss

@@ -0,0 +1,5 @@
+@layer components {
+    .psui-el-inline-selector {
+        
+    }
+}

package/src/assets/scss/components/PsInputSelect.scss

@@ -0,0 +1,62 @@
+@layer components {
+    .psui-el-input-select {
+        @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40;
+
+        &.disabled {
+            @apply psui-pointer-events-none;
+
+            label {
+                @apply psui-text-gray-40 
+            }
+
+            select {
+                @apply psui-bg-gray-20 psui-text-gray-40 psui-border-gray-20
+            }
+
+            &::after {
+                @apply psui-z-10;
+            }
+        }
+
+        &.selected {
+            select {
+                @apply psui-border-blue-50 psui-text-gray-60
+            }
+        }
+
+        &::after {
+            @apply psui-absolute psui-inline-block psui-text-gray-50;
+            content: 'arrow_drop_down';
+            font-family: 'Material Icons Round';
+            font-size: 24px;
+            top: 28px;
+            right: 16px;
+            z-index: -20;
+        }
+
+        select {
+            @apply psui-appearance-none psui-w-full psui-border psui-bg-transparent psui-border-gray-30 psui-rounded-md psui-text-gray-40;
+            padding: 10px 16px;
+
+            &:hover,
+            &:active {
+                @apply psui-border-blue-50 psui-text-gray-60
+            }
+
+            &:focus {
+                @apply psui-border-blue-60 psui-text-gray-60
+            }
+
+        }
+
+        label {
+            @apply psui-flex psui-text-gray-80 psui-text-big psui-items-center psui-w-full psui-font-bold psui-pointer-events-none
+        }
+
+        .psui-el-input-helper {
+            @apply psui-text-gray-50;
+            font-size: 12px;
+            line-height: 120%;
+        }
+    }
+}

package/src/assets/scss/components/PsInputTextArea.scss

@@ -0,0 +1,49 @@
+@layer components {
+    .psui-el-input-textarea {
+        @apply psui-block psui-w-full;
+        font-family: inherit; 
+
+        &.disabled {
+            @apply psui-text-gray-40 psui-block psui-w-full !important; 
+
+            .psui-el-input-textarea-wrapper {
+                label {
+                    @apply psui-bg-gray-10 !important;
+                }
+
+                textarea {
+                    @apply psui-appearance-none psui-w-full psui-bg-gray-20 psui-border-gray-20 psui-cursor-default !important;
+                }
+            }
+        }
+
+        .psui-el-input-textarea-wrapper {
+            @apply psui-flex psui-flex-col;
+
+            label {
+                @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1
+            }
+
+            textarea {
+                @apply psui-appearance-none psui-w-full psui-h-full psui-text-big psui-border psui-border-gray-30 psui-bg-white psui-text-gray-60 psui-resize-none psui-rounded-md psui-p-4;
+            
+                &:hover,
+                &:focus,
+                &:active {
+                    @apply psui-border-blue-60
+                }
+
+                ::placeholder {
+                    @apply psui-text-big
+                }
+            }
+        }
+
+        .psui-el-input-textarea-message {
+            @apply psui-text-gray-50 psui-flex psui-font-normal;
+            font-size: 12px;
+            line-height: 120%;
+            padding: 5px 0px;    
+        }
+    }
+}

package/src/assets/scss/components/PsProgressBar.scss

@@ -0,0 +1,24 @@
+@layer components {
+    .psui-el-simple-progress-bar {
+        @apply psui-relative psui-h-2;
+        width: 100px;
+        border-radius: 15px;
+
+        &-percentage {
+            @apply psui-absolute psui-block psui-h-full psui-overflow-visible;
+            max-width: 100px;
+            border-radius: 15px;
+            background-size: 30px 30px;
+            animation: animate-stripes 3s linear infinite;
+        }
+
+        @keyframes animate-stripes {
+            0% {
+                background-position: 0 0;
+            }
+            100% {
+                background-position: 60px 0;
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsRadioButton.scss

@@ -0,0 +1,78 @@
+@layer components {
+
+        .psui-el-radio {
+            @apply psui-relative psui-text-gray-50;
+
+            &.disabled {
+                .psui-el-checkmark {
+                    @apply psui-cursor-default psui-text-gray-40 !important
+                }
+
+                .psui-el-checkmark::before {
+                    @apply psui-text-gray-30 !important
+                } 
+            }
+
+            &.size-small {
+                @apply psui-text-small;
+
+                input {
+                    @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+
+                    &:checked ~.psui-el-checkmark::before {
+                        @apply psui-text-blue-50;
+                        font-size: 18px;
+                        content: 'radio_button_checked';
+                        font-family: 'Material Icons Round';                            
+                    }
+                }
+
+                .psui-el-checkmark {
+                    @apply psui-block psui-cursor-pointer;
+                    height: 18px;
+
+                    span {
+                        margin-left: 8px;
+                    }
+
+                    &::before {
+                        content: 'radio_button_unchecked';
+                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        font-family: 'Material Icons Round';
+                        font-size: 18px;
+                    }
+                }
+            }
+
+            &.size-big {
+                @apply psui-text-small;
+
+                input {
+                    @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+
+                    &:checked ~.psui-el-checkmark::before {
+                        @apply psui-text-blue-50;
+                        font-size: 24px;
+                        content: 'radio_button_checked';
+                        font-family: 'Material Icons Round';                            
+                    }
+                }
+
+                .psui-el-checkmark {
+                    @apply psui-block psui-cursor-pointer;
+                    height: 24px;
+
+                    span {
+                        margin-left: 8px;
+                    }
+
+                    &::before {
+                        content: 'radio_button_unchecked';
+                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        font-family: 'Material Icons Round';
+                        font-size: 24px;
+                    }
+                }
+            }
+        }
+}

package/src/assets/scss/components/PsSlider.scss

@@ -0,0 +1,11 @@
+@layer components {
+    .psui-el-slider {
+        .psui-el-slider-label {
+            @apply psui-mb-2;
+
+            span {
+                @apply psui-text-gray-50 psui-text-small
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsSwitch.scss

@@ -0,0 +1,66 @@
+@layer components {
+    .psui-el-switch {
+        @apply psui-relative psui-inline-block psui-rounded-3xl;
+            &.size-big{
+                width: 46px;
+                height: 24px;  
+            }
+            &.size-small {
+                width: 30px;
+                height: 16px;
+
+                .psui-el-switch-button {
+                     &.toggle-false{   
+                        &::before {
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
+                            left: 2px;
+                            top: 2px;
+                            content: ''; 
+                        }
+                    }
+                    
+                    &.toggle-true {
+                        @apply psui-bg-green-20;
+    
+                        &::before {
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
+                            left: 16px;
+                            top: 2px;
+                            content: '';
+                        }
+                    }
+                }   
+            }
+            :focus {
+                @apply psui-outline-none;
+            }
+            input {
+                @apply psui-opacity-0 psui-w-0 psui-h-0;
+            }
+            .psui-el-switch-button {
+                @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-bg-gray-40 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
+                
+                 &.toggle-false{   
+                    &::before {
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        left: 2px;
+                        top: 2px;
+                        content: '';
+                    }
+                }
+                
+                &.toggle-true {
+                    @apply psui-bg-green-20;
+
+                    &::before {
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        left: 24px;
+                        top:2px;
+                        content: '';
+                    }
+                }
+            }
+    }
+}

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

@@ -5,6 +5,9 @@
 
     button {
       @apply transition-default psui-text-small;
+      &.status-disabled {
+        @apply cursor-not-allowed
+      }
     }
 
     &.status-disabled {
@@ -41,6 +44,10 @@
           &.status-active {
             @apply psui-text-white psui-bg-blue-60 psui-font-bold;
           }
+
+          &.status-disabled:hover {
+            @apply psui-text-gray-60;
+          }
         }
       }
     /* ----------------------------------------- 	Layout Standard */
@@ -59,12 +66,12 @@
             margin-right: 20px;
           }
 
-          &:hover {
+          &.status-enable:hover {
             @apply psui-text-blue-60;
           }
 
           &.status-active {
-            @apply psui-text-blue-60 psui-border-blue-60;
+            @apply psui-text-blue-60 psui-border-blue-50
           }
         }
       }
@@ -82,7 +89,7 @@
             margin-right: 4px;
           }
 
-          &:hover {
+          &.status-enable:hover {
             @apply psui-text-gray-60;
           }
 

package/src/assets/scss/components/PsToast.scss

@@ -0,0 +1,52 @@
+@layer components {
+    .psui-el-toast {
+        @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold;    
+
+        .psui-el-toast-icon {
+            @apply psui-flex psui-mr-4;
+            font-size: 24px; 
+        }
+        
+        .psui-el-toast-message {
+            @apply psui-mr-auto
+        }
+
+        .psui-el-toast-actions {
+            @apply psui-flex psui-gap-4
+        }
+
+        &.fill-intense.layout{
+                &-info {
+                    @apply psui-bg-blue-60
+                }
+                
+                &-success {
+                    @apply psui-bg-green-20
+                }
+
+                &-warning {
+                    @apply psui-bg-yellow-20
+                }
+
+                &-error {
+                    @apply psui-bg-red-20
+                }
+            }    
+        
+        &.fill-soft.layout {
+            &-info {
+                @apply psui-text-blue-60 psui-bg-blue-20
+            }
+            
+            &-success {
+                @apply psui-text-green-20 psui-bg-green-10
+            }
+            &-warning {
+                @apply psui-text-yellow-20 psui-bg-yellow-10
+            }
+            &-error {
+                @apply psui-text-red-20 psui-bg-red-10
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsToggle.scss

@@ -0,0 +1,23 @@
+@layer components{
+
+  .psui-el-toggle {
+    @apply psui-flex psui-rounded-sm psui-bg-gray-10 psui-gap-x-px;
+    padding: 2px;
+
+    button {
+      @apply transition-default psui-inline-flex psui-rounded-sm psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-px-2;
+
+      &.status-active {
+        @apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;
+      }
+
+      &:not(.status-active) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    
+  }
+
+}

package/src/assets/scss/components/PsTooltip.scss

@@ -0,0 +1,118 @@
+@layer components {
+    .psui-el-tooltip {
+
+        .psui-el-tooltip-wrapper{
+            @apply psui-relative;
+
+            .psui-el-tooltip-dialog {
+                @apply psui-fixed psui-hidden psui-opacity-0 psui-transition-opacity psui-duration-500 psui-ease-in-out;
+            
+                .psui-el-tooltip-content {
+                    @apply psui-flex psui-flex-col psui-rounded-md psui-shadow-md psui-z-20 psui-bg-gray-50 psui-text-white;
+                    padding: 5px 8px;
+
+                    h2 {
+                        @apply psui-font-bold;
+                    }
+
+                    .psui-el-tooltip-content-wrapper{
+                        @apply psui-text-xsmall psui-font-bold;
+                    }
+
+                    &.layout {
+                        &-gray {
+                            @apply psui-bg-gray-30 psui-text-gray-80 psui-p-4 ;
+                            font-size: 12px;
+                            line-height: 120%;
+                            
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-font-normal psui-mt-1 
+                            }
+                        }
+
+                        &-blue {
+                            @apply psui-bg-blue-70 psui-text-white psui-p-4;
+                            font-size: 12px;
+                            line-height: 120%;
+                            
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-font-normal psui-mt-1
+                            }
+                        }
+
+                        &-red {
+                            @apply psui-bg-red-10 psui-text-red-70 psui-p-4;
+                            font-size: 12px;
+                            line-height: 120%;
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-font-normal psui-mt-1
+                            }
+                        }
+
+                        &-white {
+                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                             
+                            h2 {
+                                @apply psui-text-gray-80 psui-font-bold;
+                                font-size: 17px;
+                                line-height: 120%;
+                            }
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-text-gray-50 psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+
+                                button {
+                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60;
+                                    padding: 7px 16px;
+                                    width: fit-content;
+                                }       
+                            }
+                        }
+
+                        &-dark {
+                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                             
+                            h2 {
+                                @apply psui-text-white psui-font-bold;
+                                font-size: 17px;
+                                line-height: 120%;
+                            }
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-text-white psui-text-small psui-font-normal  psui-flex psui-flex-col psui-gap-3;
+
+                                button {
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    padding: 7px 16px;
+                                    width: fit-content;
+                                }       
+                            }
+                        }
+
+                        &-color {
+                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                             
+                            h2 {
+                                @apply psui-text-white psui-font-bold;
+                                font-size: 17px;
+                                line-height: 120%;
+                            }
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-text-white psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+
+                                button {
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    padding: 7px 16px;
+                                    width: fit-content;
+                                }       
+                            }
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+}