CED-1762 create v3 EsViewMore

es-ds-components/components/es-view-more.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import truncate from 'html-truncate';
+
+const props = defineProps({
+    /**
+     * Full text content
+     */
+    content: {
+        type: String,
+        required: true,
+    },
+    /**
+     * Maximum character length of text before it is truncated
+     */
+    length: {
+        type: Number,
+        required: true,
+    },
+    /**
+     * Text for button to show more text
+     */
+    clamp: {
+        type: String,
+        required: false,
+        default: 'Show more',
+    },
+    /**
+     * Text for button to hide text
+     */
+    less: {
+        type: String,
+        required: false,
+        default: 'Show less',
+    },
+});
+
+const isClamped = ref(true);
+
+const truncatedContent = computed(() => truncate(props.content, props.length));
+const isTruncated = computed(() => truncatedContent.value !== props.content);
+const buttonText = computed(() => (isClamped.value ? props.clamp : props.less));
+const bodyContent = computed(() => {
+    if (isClamped.value) {
+        return truncatedContent.value;
+    }
+    return props.content;
+});
+</script>
+
+<template>
+    <div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="bodyContent" />
+        <es-button
+            v-if="isTruncated"
+            inline
+            variant="link"
+            class="ml-50 p-0"
+            @click="isClamped = !isClamped">
+            {{ buttonText }}
+        </es-button>
+    </div>
+</template>

es-ds-components/package.json

@@ -24,7 +24,8 @@
         "primevue": "^3.53.0",
         "nuxt-primevue": "^3.0.0",
         "prismjs": "^1.29.0",
-        "vue": "^3.4.34"
+        "vue": "^3.4.34",
+        "html-truncate": "^1.2.2"
     },
     "devDependencies": {
         "@eslint/js": "^9.9.0",

es-ds-docs/components/ds-molecules-list.vue

@@ -63,5 +63,8 @@
         <li>
             <ds-link to="/molecules/text-input"> Text input </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/view-more"> View more </ds-link>
+        </li>
     </ul>
 </template>

es-ds-docs/pages/molecules/support.vue

@@ -59,8 +59,8 @@ const supportProps = [
 
         <ds-doc-source
             :comp-code="compCode"
-            comp-source="es-ds-components/components/es-pagination.vue"
+            comp-source="es-ds-components/components/es-support.vue"
             :doc-code="docCode"
-            doc-source="es-ds-docs/pages/molecules/pagination.vue" />
+            doc-source="es-ds-docs/pages/molecules/support.vue" />
     </div>
 </template>

es-ds-docs/pages/molecules/view-more.vue

@@ -0,0 +1,85 @@
+<script setup>
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+if ($prism) {
+    const compSource = await import('@energysage/es-ds-components/components/es-view-more.vue?raw');
+    // eslint-disable-next-line import/no-self-import
+    const docSource = await import('./view-more.vue?raw');
+    compCode.value = $prism.normalizeCode(compSource.default);
+    docCode.value = $prism.normalizeCode(docSource.default);
+    $prism.highlight();
+}
+
+const viewMoreProps = [
+    [
+        'content',
+        'String',
+        'n/a',
+        `
+        Required. Full content of text to be truncated.
+        `,
+    ],
+    [
+        'length',
+        'Number',
+        'n/a',
+        `
+        Required. Maximum character length of text before it is truncated
+        `,
+    ],
+    [
+        'clamp',
+        'String',
+        'Show more',
+        `
+        Text on button to expand content
+        `,
+    ],
+    [
+        'less',
+        'String',
+        'Show less',
+        `
+        Text on button to truncate content
+        `,
+    ],
+];
+</script>
+
+<template>
+    <div>
+        <h1>View more</h1>
+        <p>
+            Using
+            <nuxt-link
+                href="https://www.npmjs.com/package/html-truncate"
+                target="_blank">
+                html-truncate</nuxt-link
+            >.
+        </p>
+
+        <es-view-more
+            class="my-500"
+            :length="100"
+            :content="`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in aliquam ex.
+                Nullam vestibulum ex mi, ut suscipit libero condimentum id. Pellentesque eu diam vel nisi
+                molestie porta eget sed odio. Quisque congue risus id metus facilisis, non imperdiet libero rutrum.
+                Mauris vitae ante porttitor, consectetur purus faucibus, euismod ex. Orci varius natoque penatibus
+                et magnis dis parturient montes, nascetur ridiculus mus. Nulla ullamcorper elit sed viverra finibus.
+                Mauris vitae tortor mauris. Cras suscipit nibh nec nisi cursus ornare. Maecenas quis turpis sit amet
+                sapien dapibus sollicitudin viverra eu justo. Vivamus posuere metus sit amet purus tempus volutpat.
+                Donec eleifend elit quam. `" />
+
+        <div class="mb-500">
+            <h2>EsViewMore props</h2>
+            <ds-prop-table :rows="viewMoreProps" />
+        </div>
+
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/components/es-view-more.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/view-more.vue" />
+    </div>
+</template>