@policystudio/policy-studio-ui-vue 1.1.90-beta.64 → 1.1.90-beta.66

package/dist/css/psui_styles_output.css

@@ -541,6 +541,111 @@ video {
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
+.psui-el-chips label {
+  display: flex;
+}
+.psui-el-chips label {
+  cursor: pointer;
+}
+.psui-el-chips label {
+  align-items: center;
+}
+.psui-el-chips label {
+  justify-content: center;
+}
+.psui-el-chips label {
+  border-radius: 0.25rem;
+}
+.psui-el-chips label {
+  border-width: 1px;
+}
+.psui-el-chips label {
+  --tw-border-opacity: 1;
+  border-color: rgb(162 172 183/var(--tw-border-opacity));
+}
+.psui-el-chips label {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255/var(--tw-bg-opacity));
+}
+.psui-el-chips label {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.psui-el-chips label {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.psui-el-chips label {
+  font-size: 14px;
+  line-height: 130%;
+}
+.psui-el-chips label {
+  --tw-text-opacity: 1;
+  color: rgb(81 94 106/var(--tw-text-opacity));
+}
+.psui-el-chips label {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.psui-el-chips label {
+  padding: 5px 6px 5px 8px;
+}
+.psui-el-chips label:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(49 143 172/var(--tw-border-opacity));
+}
+.psui-el-chips label:hover {
+  --tw-text-opacity: 1;
+  color: rgb(49 143 172/var(--tw-text-opacity));
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 239 246/var(--tw-bg-opacity));
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  --tw-text-opacity: 1;
+  color: rgb(49 143 172/var(--tw-text-opacity));
+}
+.psui-el-chips label.checked {
+  --tw-border-opacity: 1;
+  border-color: rgb(49 143 172/var(--tw-border-opacity));
+}
+.psui-el-chips label.checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 247 251/var(--tw-bg-opacity));
+}
+.psui-el-chips label.checked {
+  --tw-text-opacity: 1;
+  color: rgb(0 70 95/var(--tw-text-opacity));
+}
+.psui-el-chips label.icon-position-right {
+  flex-direction: row-reverse;
+}
+.psui-el-chips label.icon-position-right .psui-el-chips-icon {
+  margin-left: 0.25rem;
+}
+.psui-el-chips .psui-el-chips-icon {
+  font-family: "Material Icons Round";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+.psui-el-chips .psui-el-chips-icon {
+  font-size: 16px;
+}
+.psui-el-chips .psui-el-chips-icon.is-rotated {
+  transform: rotate(180deg);
+}
 .psui-el-chips.type-checkbox, .psui-el-chips.type-radio {
   font-size: 14px;
 }
@@ -559,6 +664,10 @@ video {
 .psui-el-chips.type-checkbox input, .psui-el-chips.type-radio input {
   clip: rect(0, 0, 0, 0);
 }
+.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
+  --tw-border-opacity: 1;
+  border-color: rgb(49 143 172/var(--tw-border-opacity));
+}
 .psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
   --tw-bg-opacity: 1;
   background-color: rgb(224 239 246/var(--tw-bg-opacity));
@@ -589,37 +698,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(100 181 206/var(--tw-text-opacity));
 }
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  display: flex;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  cursor: pointer;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  align-items: center;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  justify-content: center;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  border-radius: 0.25rem;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 246 249/var(--tw-bg-opacity));
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  --tw-text-opacity: 1;
-  color: rgb(121 132 144/var(--tw-text-opacity));
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  padding: 4px 8px 4px 6px;
-}
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   display: inline-block;
 }
@@ -665,69 +743,6 @@ video {
 .psui-el-chips.type-radio label:before {
   content: "radio_button_unchecked";
 }
-.psui-el-chips.type-button label {
-  display: flex;
-}
-.psui-el-chips.type-button label {
-  cursor: pointer;
-}
-.psui-el-chips.type-button label {
-  align-items: center;
-}
-.psui-el-chips.type-button label {
-  justify-content: center;
-}
-.psui-el-chips.type-button label {
-  border-radius: 0.25rem;
-}
-.psui-el-chips.type-button label {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-.psui-el-chips.type-button label {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.psui-el-chips.type-button label {
-  font-size: 14px;
-  line-height: 130%;
-}
-.psui-el-chips.type-button label {
-  --tw-text-opacity: 1;
-  color: rgb(81 94 106/var(--tw-text-opacity));
-}
-.psui-el-chips.type-button label {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.psui-el-chips.type-button label {
-  background-color: #F6F7F8;
-}
-.psui-el-chips.type-button label:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255/var(--tw-bg-opacity));
-}
-.psui-el-chips.type-button label:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49 143 172/var(--tw-text-opacity));
-}
-.psui-el-chips.type-button label:focus, .psui-el-chips.type-button label:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 239 246/var(--tw-bg-opacity));
-}
-.psui-el-chips.type-button label:focus, .psui-el-chips.type-button label:active {
-  --tw-text-opacity: 1;
-  color: rgb(49 143 172/var(--tw-text-opacity));
-}
-.psui-el-chips.type-button label.checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 239 246/var(--tw-bg-opacity));
-}
-.psui-el-chips.type-button label.checked {
-  --tw-text-opacity: 1;
-  color: rgb(49 143 172/var(--tw-text-opacity));
-}
 .psui-el-chips.type-button.layout-with-icon label {
   display: flex;
 }
@@ -828,10 +843,7 @@ video {
   background-color: rgb(49 143 172/var(--tw-bg-opacity));
 }
 .psui-el-chips.type-button.layout-rich .psui-el-chips-icon {
-  font-size: 18px;
-}
-.psui-el-chips.type-button.layout-rich .psui-el-chips-icon-prepend {
-  margin-right: 0.5rem;
+  font-size: 16px;
 }
 .psui-el-chips.type-button.layout-rich .psui-el-chips-icon-prepend {
   display: flex;
@@ -859,9 +871,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255/var(--tw-text-opacity));
 }
-.psui-el-chips.type-button.layout-rich .psui-el-chips-close {
-  margin-left: 0.5rem;
-}
 .psui-el-chips.type-button.layout-rich .psui-el-chips-close {
   display: flex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.64",
+  "version": "1.1.90-beta.66",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsChips.scss

@@ -7,6 +7,42 @@
       @apply psui-icon;
     }
 
+    label {
+      @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
+      padding: 5px 6px 5px 8px;
+
+      &:hover {
+        @apply psui-text-blue-60  psui-border-blue-60;
+      }
+
+      &:focus,
+      &:active {
+        @apply psui-text-blue-60 psui-bg-blue-20;
+      }
+
+      &.checked {
+        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60;
+      }
+
+      &.icon-position-right {
+        @apply psui-flex-row-reverse;
+
+        .psui-el-chips-icon {
+          @apply psui-ml-1;
+        }
+      }
+      
+    }
+
+    .psui-el-chips-icon {
+      @apply psui-icon;
+      font-size: 16px;
+
+      &.is-rotated {
+        transform: rotate(180deg);
+      }
+    }
+
     &.type-checkbox,
     &.type-radio {
       font-size: 14px;
@@ -18,7 +54,7 @@
 
         &:checked {
           + label {
-            @apply psui-text-blue-60 psui-bg-blue-20;
+            @apply psui-text-blue-60 psui-bg-blue-20 psui-border-blue-60;
 
             &.layout-disabled {
               @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
@@ -36,8 +72,6 @@
       }
 
       label {
-        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
-        padding: 4px 8px 4px 6px;
   
         &:before {
           @apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
@@ -90,23 +124,6 @@
     }
 
     &.type-button {
-      label {
-        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
-        background-color: #F6F7F8;
-        &:hover {
-          @apply psui-text-blue-60 psui-bg-white;
-        }
-
-        &:focus,
-        &:active {
-          @apply psui-text-blue-60 psui-bg-blue-20;
-        }
-
-        &.checked {
-          @apply psui-text-blue-60 psui-bg-blue-20;
-        }
-  
-      }
 
       &.layout-with-icon {
         label {
@@ -156,15 +173,15 @@
         }
 
         .psui-el-chips-icon {
-          font-size: 18px;
+          font-size: 16px;
 
           &-prepend {
-            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2 psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
+            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
           }
         }
 
         .psui-el-chips-close {
-          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center psui-ml-2;
+          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
         }
       }
     }

package/src/components/chips/PsChips.vue

@@ -10,7 +10,7 @@
     }"
     @mouseover="isHovering = true"
     @mouseleave="isHovering = false"
-    @click.stop="emit('click')"
+    @click="emit('click')"
   >
     <input
       @change="onChange"
@@ -23,11 +23,15 @@
     <label
       :disabled="disabled"
       :for="getInputId"
-      :class="{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'}"
+      :class="[
+        {'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'},
+        `icon-position-${iconPosition}`
+      ]"
     >
       <i
         v-if="icon"
         class="psui-el-chips-icon psui-el-chips-icon-prepend"
+        :class="{ 'is-rotated': rotableIcon }"
       >{{ icon }}</i>
       {{ label }}
       <button
@@ -82,6 +86,15 @@ const props = defineProps({
   /**
    * It sets if the button was checked or not checked.
    */
+  iconPosition: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  rotableIcon:{
+    type: Boolean,
+    defaul: false
+  },
   checked: {
     type: Boolean,
     default: false,