@policystudio/policy-studio-ui-vue 1.1.90-beta.30 → 1.1.90-beta.31

package/src/assets/scss/components/PsCollapse.css

@@ -0,0 +1,74 @@
+@layer components {
+
+  .psui-el-collapse {
+    
+    .psui-el-collapse-item-content {
+      @apply psui-relative psui-pl-4;
+
+      &::before {
+        @apply psui-bg-gray-30 psui-ml-2;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 100%;
+        transform: translateX(-50%);
+      }
+    }
+
+    
+    &.disabled {
+      .psui-el-collapse-item-header {
+        .psui-el-collapse-item-header-wrapper {
+          @apply psui-text-gray-50 hover:psui-text-gray-50;
+        }
+      } 
+    }
+
+    .psui-el-collapse-item-header {
+      @apply psui-flex psui-items-center psui-cursor-pointer;
+
+      .psui-el-collapse-item-icon {
+        @apply psui-text-gray-50 psui-transition-all;
+        transition-duration: 0.4s;
+        font-size: 16px;
+      }
+
+      .psui-el-collapse-item-header-wrapper {
+        @apply psui-flex psui-items-center psui-py-2 psui-text-small psui-w-full psui-text-gray-70 hover:psui-text-blue-60;
+  
+        .psui-el-collapse-item-title {
+          @apply psui-ml-1;
+  
+        }
+
+        .psui-el-collapse-item-header-action {
+          @apply psui-invisible psui-ml-auto;
+        }
+      }
+
+      &:hover {
+        .psui-el-collapse-item-header-wrapper {
+          .psui-el-collapse-item-header-action {
+            @apply psui-visible;
+          }
+        }
+      }
+    }
+
+
+    .collapse-fade-enter-active,
+    .collapse-fade-leave-active {
+      will-change: height, margin-bottom;
+      transition: height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
+      overflow: hidden;
+    }
+
+    .collapse-fade-enter-from,
+    .collapse-fade-leave-to {
+      height: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+}

package/src/components/collapse/PsCollapse.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="psui-el-collapse"
+    :class="{ 'status-opened': isOpen, disabled: disabled }"
+  >
+    <div
+      class="psui-el-collapse-item-header"
+      @click="toggle"
+    >
+      <i
+        class="psui-el-collapse-item-icon psui-icon"
+        :class="{'psui-rotate-90':isOpen}"
+      >chevron_right</i>
+      <slot
+        name="header"
+        :is-open="isOpen"
+      >
+        <div
+          class="psui-el-collapse-item-header-wrapper"
+          
+          v-if="!hasCustomHeader"
+        >
+          <span
+            v-if="title"
+            class="psui-el-collapse-item-title"
+          >
+            {{ title }}
+          </span>
+          <div class="psui-el-collapse-item-header-action">
+            <slot name="header-action" />  
+          </div>
+        </div>
+      </slot>
+    </div>
+    <transition
+      name="collapse-fade"
+      @enter="start"
+      @after-enter="end"
+      @before-leave="start"
+      @after-leave="end"
+    >
+      <div
+        v-if="isOpen"
+        class="psui-el-collapse-item-content"
+      >
+        <slot name="content" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const localOpened = ref(null)
+
+const props = defineProps({
+  /**
+   * It sets the title of the accordion item.
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the status of the accordion item when mounted.
+   */
+  opened: {
+    type: [Boolean],
+    default: false,
+  },
+  /**
+   * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets if it has a custom header.
+   */
+  hasCustomHeader: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the disabled status.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isOpen = computed(() => {
+  return localOpened.value !== null ? localOpened.value : props.opened
+})
+
+const toggle = () => {
+  if (localOpened.value === null) {
+    localOpened.value = !props.opened
+  } else {
+    localOpened.value = !localOpened.value
+  }
+}
+const start = (el) => {
+  el.style.height = el.scrollHeight + 'px'
+  el.style.padding = el.srcollPaddingBottom + 'px'
+}
+const end = (el) => {
+  el.style.height = ''
+  el.style.padding = ''
+}
+</script>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsCollapse.scss */
+</style>
+
+
+

package/src/index.ts

@@ -48,6 +48,7 @@ import PsTagScope from '../src/components/badges-and-tags/PsTagScope.vue'
 import PsBarChart from '../src/components/data-graphics/PsBarChart.vue'
 import PsSimpleAlert from '../src/components/notifications/PsSimpleAlert.vue'
 import PsBreadcrumb from '../src/components/navigations/PsBreadcrumb.vue'
+import PsCollapse from '../src/components/collapse/PsCollapse.vue'
 
 
 export default {
@@ -97,6 +98,7 @@ export default {
     Vue.component('PsBarChart',PsBarChart)
     Vue.component('PsSimpleAlert',PsSimpleAlert)
     Vue.component('PsBreadcrumb', PsBreadcrumb)
+    Vue.component('PsCollapse', PsCollapse)
     
     /**
      * Initialize directives
@@ -151,6 +153,7 @@ export {
   PsSimpleAlert,
   PsBreadcrumb,
   PsTableResults,
-  PsTableResultsRow
+  PsTableResultsRow,
+  PsCollapse
 }