refactor: use script setup for Collapse

Author: wxsms

docs/.vitepress/components/alert/auto-dismissing.vue

@@ -14,18 +14,13 @@
     >
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      alerts: [],
-      duration: 2000,
-    };
-  },
-  methods: {
-    addAutoDismissAlert() {
-      this.alerts.push({ key: new Date().getTime() });
-    },
-  },
-};
+<script setup>
+import { reactive } from 'vue';
+
+const alerts = reactive([]);
+const duration = 2000;
+
+function addAutoDismissAlert() {
+  alerts.push({ key: new Date().getTime() });
+}
 </script>

docs/.vitepress/components/alert/dismissible.vue

@@ -18,18 +18,13 @@
     >
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      show: true,
-      alerts: [],
-    };
-  },
-  methods: {
-    addDismissibleAlert() {
-      this.alerts.push({ key: new Date().getTime() });
-    },
-  },
-};
+<script setup>
+import { reactive, ref } from 'vue';
+
+const show = ref(true);
+const alerts = reactive([]);
+
+function addDismissibleAlert() {
+  alerts.push({ key: new Date().getTime() });
+}
 </script>

docs/.vitepress/components/alert/with-collapse.vue

@@ -9,12 +9,8 @@
     </collapse>
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      show: true,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const show = ref(true);
 </script>

docs/.vitepress/components/breadcrumbs/example.vue

@@ -3,16 +3,12 @@
     <breadcrumbs :items="items" />
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      items: [
-        { text: 'Home', href: '#' },
-        { text: 'Library', href: '#' },
-        { text: 'Data', href: '#' },
-      ],
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+  { text: 'Home', href: '#' },
+  { text: 'Library', href: '#' },
+  { text: 'Data', href: '#' },
+]);
 </script>

docs/.vitepress/components/breadcrumbs/router-link.vue

@@ -3,15 +3,11 @@
     <breadcrumbs :items="items" />
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      items: [
-        { text: 'Home', to: '/', exact: true },
-        { text: 'Breadcrumbs', to: '/breadcrumbs' },
-      ],
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+  { text: 'Home', to: '/', exact: true },
+  { text: 'Breadcrumbs', to: '/breadcrumbs' },
+]);
 </script>

docs/.vitepress/components/btn/checkbox.vue

@@ -18,12 +18,8 @@
     <alert>Selected: {{ model }}</alert>
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      model: ['1'],
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const model = ref(['1']);
 </script>

docs/.vitepress/components/btn/radio.vue

@@ -12,12 +12,8 @@
     <alert>Selected: {{ model }}</alert>
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      model: '1',
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const model = ref('1');
 </script>

docs/.vitepress/components/collapse/accordion.vue

@@ -38,21 +38,16 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      showAccordion: [true, false, false],
-    };
-  },
-  methods: {
-    toggleAccordion(index) {
-      if (this.showAccordion[index]) {
-        this.showAccordion[index] = false;
-      } else {
-        this.showAccordion = this.showAccordion.map((v, i) => i === index);
-      }
-    },
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const showAccordion = ref([true, false, false]);
+
+function toggleAccordion(index) {
+  if (showAccordion.value[index]) {
+    showAccordion.value[index] = false;
+  } else {
+    showAccordion.value = showAccordion.value.map((v, i) => i === index);
+  }
+}
 </script>

docs/.vitepress/components/collapse/example.vue

@@ -9,12 +9,8 @@
     </collapse>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      show: false,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const show = ref(false);
 </script>

src/components/collapse/Collapse.vue

@@ -1,85 +1,80 @@
-<script lang="jsx">
+<script lang="jsx" setup>
 import { addClass, removeClass } from '../../utils/dom.utils';
+import { onMounted, ref, watchEffect } from 'vue';
+
+const props = defineProps({
+  tag: { type: String, default: 'div' },
+  modelValue: { type: Boolean, default: false },
+  transition: { type: Number, default: 350 },
+});
+const emit = defineEmits(['show', 'shown', 'hide', 'hidden']);
 
 const COLLAPSE = 'collapse';
 const IN = 'in';
 const COLLAPSING = 'collapsing';
+let timeoutId = 0;
+const element = ref(null);
 
-export default {
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    transition: {
-      type: Number,
-      default: 350,
-    },
-  },
-  emits: ['show', 'shown', 'hide', 'hidden'],
-  data() {
-    return {
-      timeoutId: 0,
-    };
-  },
-  watch: {
-    modelValue(show) {
-      this.toggle(show);
-    },
-  },
-  mounted() {
-    const el = this.$el;
-    addClass(el, COLLAPSE);
-    if (this.modelValue) {
+function toggle(show) {
+  clearTimeout(timeoutId);
+  const el = element.value;
+  if (!el) {
+    return;
+  }
+  if (show) {
+    emit('show');
+    removeClass(el, COLLAPSE);
+    el.style.height = 'auto';
+    const height = window.getComputedStyle(el).height;
+    el.style.height = null;
+    addClass(el, COLLAPSING);
+    el.offsetHeight; // force repaint
+    el.style.height = height;
+    timeoutId = setTimeout(() => {
+      removeClass(el, COLLAPSING);
+      addClass(el, COLLAPSE);
       addClass(el, IN);
-    }
-  },
-  methods: {
-    toggle(show) {
-      clearTimeout(this.timeoutId);
-      const el = this.$el;
-      if (show) {
-        this.$emit('show');
-        removeClass(el, COLLAPSE);
-        el.style.height = 'auto';
-        const height = window.getComputedStyle(el).height;
-        el.style.height = null;
-        addClass(el, COLLAPSING);
-        el.offsetHeight; // force repaint
-        el.style.height = height;
-        this.timeoutId = setTimeout(() => {
-          removeClass(el, COLLAPSING);
-          addClass(el, COLLAPSE);
-          addClass(el, IN);
-          el.style.height = null;
-          this.timeoutId = 0;
-          this.$emit('shown');
-        }, this.transition);
-      } else {
-        this.$emit('hide');
-        el.style.height = window.getComputedStyle(el).height;
-        removeClass(el, IN);
-        removeClass(el, COLLAPSE);
-        el.offsetHeight;
-        el.style.height = null;
-        addClass(el, COLLAPSING);
-        this.timeoutId = setTimeout(() => {
-          addClass(el, COLLAPSE);
-          removeClass(el, COLLAPSING);
-          el.style.height = null;
-          this.timeoutId = 0;
-          this.$emit('hidden');
-        }, this.transition);
-      }
-    },
-  },
+      el.style.height = null;
+      timeoutId = 0;
+      emit('shown');
+    }, props.transition);
+  } else {
+    emit('hide');
+    el.style.height = window.getComputedStyle(el).height;
+    removeClass(el, IN);
+    removeClass(el, COLLAPSE);
+    el.offsetHeight;
+    el.style.height = null;
+    addClass(el, COLLAPSING);
+    timeoutId = setTimeout(() => {
+      addClass(el, COLLAPSE);
+      removeClass(el, COLLAPSING);
+      el.style.height = null;
+      timeoutId = 0;
+      emit('hidden');
+    }, props.transition);
+  }
+}
+
+watchEffect(() => {
+  toggle(props.modelValue);
+});
+
+onMounted(() => {
+  addClass(element.value, COLLAPSE);
+  if (props.modelValue) {
+    addClass(element.value, IN);
+  }
+});
+</script>
+
+<script lang="jsx">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   render() {
     const Tag = this.tag;
-    return <Tag>{this.$slots.default?.()}</Tag>;
+    return <Tag ref="element">{this.$slots.default?.()}</Tag>;
   },
-};
+});
 </script>