refactor: navbar/progressbar use setup

Author: wxsms

src/components/navbar/Navbar.vue

@@ -20,53 +20,42 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 import Collapse from '../collapse/Collapse.vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
-export default {
-  components: { Collapse },
-  props: {
-    modelValue: Boolean,
-    fluid: {
-      type: Boolean,
-      default: true,
-    },
-    fixedTop: Boolean,
-    fixedBottom: Boolean,
-    staticTop: Boolean,
-    inverse: Boolean,
-  },
-  emits: ['update:modalValue'],
-  data() {
-    return {
-      show: false,
-    };
-  },
-  computed: {
-    navClasses() {
-      return {
-        navbar: true,
-        'navbar-default': !this.inverse,
-        'navbar-inverse': this.inverse,
-        'navbar-static-top': this.staticTop,
-        'navbar-fixed-bottom': this.fixedBottom,
-        'navbar-fixed-top': this.fixedTop,
-      };
-    },
-  },
-  watch: {
-    modelValue(v) {
-      this.show = v;
-    },
-  },
-  mounted() {
-    this.show = !!this.modelValue;
-  },
-  methods: {
-    toggle() {
-      this.show = !this.show;
-      this.$emit('update:modalValue', this.show);
-    },
-  },
-};
+const props = defineProps({
+  modelValue: Boolean,
+  fluid: { type: Boolean, default: true },
+  fixedTop: Boolean,
+  fixedBottom: Boolean,
+  staticTop: Boolean,
+  inverse: Boolean,
+});
+const emit = defineEmits(['update:modalValue']);
+const show = ref(false);
+const navClasses = computed(() => ({
+  navbar: true,
+  'navbar-default': !props.inverse,
+  'navbar-inverse': props.inverse,
+  'navbar-static-top': props.staticTop,
+  'navbar-fixed-bottom': props.fixedBottom,
+  'navbar-fixed-top': props.fixedTop,
+}));
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    show.value = v;
+  }
+);
+
+onMounted(() => {
+  show.value = !!props.modelValue;
+});
+
+function toggle() {
+  show.value = !show.value;
+  emit('update:modalValue', show.value);
+}
 </script>

src/components/navbar/NavbarForm.vue

@@ -10,11 +10,9 @@
   </form>
 </template>
 
-<script>
-export default {
-  props: {
-    left: Boolean,
-    right: Boolean,
-  },
-};
+<script setup>
+defineProps({
+  left: Boolean,
+  right: Boolean,
+});
 </script>

src/components/navbar/NavbarNav.vue

@@ -11,11 +11,9 @@
   </ul>
 </template>
 
-<script>
-export default {
-  props: {
-    left: Boolean,
-    right: Boolean,
-  },
-};
+<script setup>
+defineProps({
+  left: Boolean,
+  right: Boolean,
+});
 </script>

src/components/navbar/NavbarText.vue

@@ -10,11 +10,9 @@
   </p>
 </template>
 
-<script>
-export default {
-  props: {
-    left: Boolean,
-    right: Boolean,
-  },
-};
+<script setup>
+defineProps({
+  left: Boolean,
+  right: Boolean,
+});
 </script>

src/components/progressbar/ProgressBar.vue

@@ -5,37 +5,34 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import ProgressBarStack from './ProgressBarStack.vue';
 
-export default {
-  components: { ProgressBarStack },
-  props: {
-    modelValue: {
-      type: Number,
-      validator(value) {
-        return value >= 0 && value <= 100;
-      },
-      default: 0,
-    },
-    labelText: { type: String, default: undefined },
-    type: { type: String, default: undefined },
-    label: {
-      type: Boolean,
-      default: false,
-    },
-    minWidth: {
-      type: Boolean,
-      default: false,
-    },
-    striped: {
-      type: Boolean,
-      default: false,
-    },
-    active: {
-      type: Boolean,
-      default: false,
+defineProps({
+  modelValue: {
+    type: Number,
+    validator(value) {
+      return value >= 0 && value <= 100;
     },
+    default: 0,
+  },
+  labelText: { type: String, default: undefined },
+  type: { type: String, default: undefined },
+  label: {
+    type: Boolean,
+    default: false,
+  },
+  minWidth: {
+    type: Boolean,
+    default: false,
+  },
+  striped: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
   },
-};
+});
 </script>

src/components/progressbar/ProgressBarStack.vue

@@ -19,34 +19,32 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    modelValue: {
-      type: Number,
-      required: true,
-      validator(value) {
-        return value >= 0 && value <= 100;
-      },
-    },
-    labelText: { type: String, default: undefined },
-    type: { type: String, default: undefined },
-    label: {
-      type: Boolean,
-      default: false,
-    },
-    minWidth: {
-      type: Boolean,
-      default: false,
-    },
-    striped: {
-      type: Boolean,
-      default: false,
-    },
-    active: {
-      type: Boolean,
-      default: false,
+<script setup>
+defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+    validator(value) {
+      return value >= 0 && value <= 100;
     },
   },
-};
+  labelText: { type: String, default: undefined },
+  type: { type: String, default: undefined },
+  label: {
+    type: Boolean,
+    default: false,
+  },
+  minWidth: {
+    type: Boolean,
+    default: false,
+  },
+  striped: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
 </script>