From 0f3ef215c305d3bb09ecaa451c94cffa4445c76f Mon Sep 17 00:00:00 2001
From: Suvodip Ghosh <suvo@ns9b.siliconpin.com>
Date: Thu, 9 Feb 2023 22:01:11 +0530
Subject: [PATCH] update

---
 src/components/Readmore.vue | 116 +++++++++++-------------------------
 1 file changed, 34 insertions(+), 82 deletions(-)

diff --git a/src/components/Readmore.vue b/src/components/Readmore.vue
index d080f83..093fc34 100644
--- a/src/components/Readmore.vue
+++ b/src/components/Readmore.vue
@@ -1,85 +1,37 @@
 <template>
-  <div class="block-content">
-    <transition
-      @before-enter="onBeforeEnter"
-      @enter="onEnter"
-      @after-enter="onAfterEnter"
-      @before-leave="onBeforeLeave"
-      @leave="onLeave"
-      mode="out-in"
-    >
-      <p v-if="!isExpanded" class="block-content__preview" >The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet</p>
-      <p
-        v-else
-        :class="{
-          'block-content__paragraph': true,
-          'block-content__paragraph--is-expanded': isExpanded,
-        }"
-      
-      >also provides practical knowledge of daily life to preschoolers.</p>
-    </transition>
-    <button
-      type="button"
-      class="block-content__button"
-      aria-label="Toggle button"
-      @click="isExpanded = !isExpanded"
-    >
-      {{ toggleCtaLabel }}
-    </button>
-  </div>
-</template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, toRefs } from "vue";
-export default defineComponent({
-  name: "ExpandableBlockContent",
-  props: {
-    content: { type: String },
-    visibleLines: { type: Number, default: 4 },
-  },
-  setup(props) {
-    const { visibleLines } = toRefs(props);
-    // Collapsed state
-    // Assuming that default line-height is 24px
-    const LINE_HEIGHT = 24;
-    const maxHeightCollapsed = computed(() => LINE_HEIGHT * visibleLines.value);
-    // Animation hooks
-    const onBeforeEnter = (el: Element) => {
-      const htmlEl = el as HTMLElement;
-      htmlEl.style.height = maxHeightCollapsed.value + "px";
-    };
-    const onEnter = (el: Element) => {
-      const htmlEl = el as HTMLElement;
-      htmlEl.style.height = el.scrollHeight + "px";
-    };
-    const onAfterEnter = (el: Element) => {
-      const htmlEl = el as HTMLElement;
-      htmlEl.style.overflow = "hidden";
-    };
-    const onBeforeLeave = (el: Element) => {
-      const htmlEl = el as HTMLElement;
-      htmlEl.style.height = `${el.scrollHeight}px`;
-      htmlEl.style.overflow = "hidden";
-    };
-    const onLeave = (el: Element) => {
-      const htmlEl = el as HTMLElement;
-      htmlEl.style.height = maxHeightCollapsed.value + "px";
-      htmlEl.style.overflow = "hidden";
-    };
-    // Expanded state
-    const isExpanded = ref(false);
-    const toggleCtaLabel = computed(() =>
-      isExpanded.value ? "Read less" : "Read more"
-    );
-    return {
-      isExpanded,
-      toggleCtaLabel,
-      onBeforeEnter,
-      onEnter,
-      onAfterEnter,
-      onBeforeLeave,
-      onLeave,
-    };
-  },
-});
+
+<div id="app" class="container">
+  <p>A simple Read More, Read Less pen in Vue.js</p>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
+    fringilla urna. Etiam tempor orci eu lobortis. Integer quis auctor elit sed vulputate mi sit. Lacinia
+    at quis risus sed vulputate odio ut enim blandit. Nibh praesent tristique magna sit amet purus. Eleifend donec pretium vulputate sapien nec
+    sagittis. Facilisi morbi tempus iaculis urna id volutpat. Ultrices neque ornare aenean euismod.<span v-if="readMore"></span>
+    <span v-else>...</span>
+  </p>
+
+  <p v-show="readMore">Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
+    placerat. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Sed cras ornare arcu dui. Aliquam vestibulum
+    morbi blandit cursus. Adipiscing elit ut aliquam purus sit amet. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Ut etiam sit amet
+    nisl purus in mollis. Eu mi bibendum neque egestas congue quisque egestas diam in. Pellentesque adipiscing
+    commodo elit at imperdiet dui accumsan sit.
+  </p>
+  <button class="btn btn-success" @click="readMore =! readMore">
+    <span v-if="readMore">Read Less</span>
+    <span v-else>Read More</span>
+  </button>
+</div>
+</template>
+<script>
+
+
+// new Vue({
+//   el: '#app',
+//   data:{
+//     readMore: false
+//   }
+// });
+
+
 </script>
\ No newline at end of file