@redseed/redseed-ui-vue3 2.23.6 → 2.24.0

package/index.js

@@ -1,15 +1,19 @@
+import _ from 'lodash'
+window._ = _
+
 export * from './src/components/Avatar'
 export * from './src/components/Badge'
-export * from './src/components/BodyText'
 export * from './src/components/Breadcrumbs'
 export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
 export * from './src/components/CardGroup'
+export * from './src/components/ColumnLayout'
 export * from './src/components/DropdownMenu'
 export * from './src/components/Empty'
 export * from './src/components/Form'
 export * from './src/components/FormField'
+export * from './src/components/HTML'
 export * from './src/components/Image'
 export * from './src/components/Link'
 export * from './src/components/LinkedList'
@@ -26,5 +30,4 @@ export * from './src/components/SectionHeading'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'
-export * from './src/components/Toggle'
-export * from './src/components/ColumnLayout'
+export * from './src/components/Toggle'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.23.6",
+  "version": "2.24.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -13,6 +13,7 @@
     "@heroicons/vue": "^2.1.5",
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^10.11.0",
+    "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
     "vue": "^3.4.36"
   }

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -38,11 +38,11 @@ function clickItem(item) {
     @apply flex flex-wrap items-center gap-x-2 gap-y-2;
     &__item {
         @apply relative select-none pr-4 last:pr-0 last:after:hidden;
-        @apply font-semibold text-sm text-rsui-default leading-6;
+        @apply text-sm text-rsui-light leading-6;
         @apply after:absolute after:right-0.5 after:content-['\007C'];
-        @apply after:after:w-0.5 after:h-full after:text-rsui-light;
+        @apply after:w-0.5 after:h-full after:text-rsui-light;
         &--action {
-            @apply cursor-pointer;
+            @apply cursor-pointer hover:text-rsui-default transition-colors duration-200;
         }
     }
 }

package/src/components/Empty/Empty.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
 import ButtonPrimary from '../Button/ButtonPrimary.vue'
 import ButtonSecondary from '../Button/ButtonSecondary.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
-import BodyText from '../BodyText/BodyText.vue'
+import BodyText from '../HTML/BodyText.vue'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
 import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
 

package/src/components/HTML/ReadMore.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useElementBounding } from '@vueuse/core'
+import LinkPrimary from '../Link/LinkPrimary.vue'
+
+const props = defineProps({
+    html: {
+        type: String,
+        required: true,
+    },
+})
+
+const readMoreId = _.uniqueId('read_more_')
+
+/**
+ * Custom interpolate to allow for
+ * {{read_more}}, {{ read_more }}, {{ ReadMore }} interpolation
+ */
+const customInterpolate = /{{([\s\S]+?)}}/g
+
+const compiled = _.template(props.html, { interpolate: customInterpolate })
+const result = compiled({ read_more: `<a id="${readMoreId}"></a>` })
+
+const showMore = ref(false)
+
+watch(showMore, () => {
+    if (showMore.value) {
+        htmlContentElement.value.style.maxHeight = `${htmlContentElementMoreHeight.value}px`
+        return
+    }
+
+    htmlContentElement.value.style.maxHeight = `${htmlContentElementLessHeight.value}px`
+})
+
+const htmlContentElement = ref(null)
+const htmlContentElementBounding = useElementBounding(htmlContentElement)
+
+const htmlContentElementLessHeight = ref(0)
+const htmlContentElementMoreHeight = ref(0)
+
+const readMoreElement = ref(null)
+
+const hasReadMore = computed(() => !!readMoreElement.value)
+
+onMounted(() => {
+    if (!document.getElementById(readMoreId)) return
+
+    readMoreElement.value = document.getElementById(readMoreId)
+    const readMoreElementBounding = readMoreElement.value.getBoundingClientRect()
+
+    if (htmlContentElement.value && readMoreElement.value) {
+        htmlContentElementMoreHeight.value = htmlContentElementBounding.height.value
+
+        htmlContentElementLessHeight.value = readMoreElementBounding.top - htmlContentElementBounding.top.value
+
+        htmlContentElement.value.style.maxHeight = `${htmlContentElementLessHeight.value}px`
+    }
+})
+</script>
+<template>
+<div class="rsui-read-more-html">
+    <div ref="htmlContentElement"
+        class="rsui-read-more-html__content"
+        v-html="result"
+    ></div>
+    <div v-if="hasReadMore" class="rsui-read-more-html__link">
+        <LinkPrimary md v-if="!showMore" @click="showMore = true">
+            <slot name="more-label">More details</slot>
+        </LinkPrimary>
+        <LinkPrimary md v-if="showMore" @click="showMore = false">
+            <slot name="less-label">Less details</slot>
+        </LinkPrimary>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-read-more-html {
+    &__content {
+        @apply transition-all overflow-hidden;
+    }
+
+    &__link {
+        @apply mt-4;
+    }
+}
+</style>

package/src/components/{BodyText → HTML}/index.js

@@ -1,5 +1,7 @@
 import BodyText from './BodyText.vue'
+import ReadMore from './ReadMore.vue'
 
 export {
     BodyText,
+    ReadMore,
 }