feat : smart tree component (#2865)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-ui/src/components/smart/Item.vue

@@ -63,78 +63,82 @@
   </SmartLink>
 </template>
 
-<script setup lang="ts">
-defineProps({
-  to: {
-    type: String,
-    default: "",
-  },
-  exact: {
-    type: Boolean,
-    default: true,
-  },
-  blank: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: "",
-  },
-  description: {
-    type: String,
-    default: "",
-  },
-  /**
-   * This will be a component!
-   */
-  icon: {
-    type: Object,
-    default: null,
-  },
-  /**
-   * This will be a component!
-   */
-  svg: {
-    type: Object,
-    default: null,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
-  },
-  outline: {
-    type: Boolean,
-    default: false,
-  },
-  shortcut: {
-    type: Array,
-    default: () => [],
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
+<script lang="ts">
+import { defineComponent } from "vue"
 
-  activeInfoIcon: {
-    type: Boolean,
-    default: false,
-  },
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    /**
+     * This will be a component!
+     */
+    icon: {
+      type: Object,
+      default: null,
+    },
+    /**
+     * This will be a component!
+     */
+    svg: {
+      type: Object,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
 
-  /**
-   * This will be a component!
-   */
-  infoIcon: {
-    type: Object,
-    default: null,
+    activeInfoIcon: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * This will be a component!
+     */
+    infoIcon: {
+      type: Object,
+      default: null,
+    },
   },
 })
 </script>

packages/hoppscotch-ui/src/components/smart/Modal.vue

@@ -106,36 +106,25 @@ import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
 const { t, onModalOpen, onModalClose } =
   inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
-defineProps({
-  dialog: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  dimissible: {
-    type: Boolean,
-    default: true,
-  },
-  placement: {
-    type: String,
-    default: "top",
-  },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  },
-  styles: {
-    type: String,
-    default: "sm:max-w-lg",
-  },
-  closeText: {
-    type: String,
-    default: null,
-  },
-})
+withDefaults(
+  defineProps<{
+    dialog: boolean,
+    title: string,
+    dimissible: boolean,
+    placement: string,
+    fullWidth: boolean,
+    styles: string,
+    closeText: string | null,
+  }>(), {
+    dialog: false,
+    title: "",
+    dimissible: true,
+    placement: "top",
+    fullWidth: false,
+    styles: "sm:max-w-lg",
+    closeText: null
+  }
+)
 
 const emit = defineEmits<{
   (e: "close"): void

packages/hoppscotch-ui/src/components/smart/Spinner.vue

@@ -1,3 +1,9 @@
 <template>
   <icon-lucide-loader class="animate-spin svg-icons" />
 </template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({})
+</script>