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.d.ts

@@ -1,37 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
-    ButtonSecondary: typeof import('./components/button/Secondary.vue')['default']
-    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SmartAnchor: typeof import('./components/smart/Anchor.vue')['default']
-    SmartAutoComplete: typeof import('./components/smart/AutoComplete.vue')['default']
-    SmartCheckbox: typeof import('./components/smart/Checkbox.vue')['default']
-    SmartConfirmModal: typeof import('./components/smart/ConfirmModal.vue')['default']
-    SmartExpand: typeof import('./components/smart/Expand.vue')['default']
-    SmartFileChip: typeof import('./components/smart/FileChip.vue')['default']
-    SmartIntersection: typeof import('./components/smart/Intersection.vue')['default']
-    SmartItem: typeof import('./components/smart/Item.vue')['default']
-    SmartLink: typeof import('./components/smart/Link.vue')['default']
-    SmartModal: typeof import('./components/smart/Modal.vue')['default']
-    SmartProgressRing: typeof import('./components/smart/ProgressRing.vue')['default']
-    SmartRadio: typeof import('./components/smart/Radio.vue')['default']
-    SmartRadioGroup: typeof import('./components/smart/RadioGroup.vue')['default']
-    SmartSlideOver: typeof import('./components/smart/SlideOver.vue')['default']
-    SmartSpinner: typeof import('./components/smart/Spinner.vue')['default']
-    SmartTab: typeof import('./components/smart/Tab.vue')['default']
-    SmartTabs: typeof import('./components/smart/Tabs.vue')['default']
-    SmartToggle: typeof import('./components/smart/Toggle.vue')['default']
-    SmartWindow: typeof import('./components/smart/Window.vue')['default']
-    SmartWindows: typeof import('./components/smart/Windows.vue')['default']
-  }
-
-}

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>