refactor: hoppscotch ui (#2887)

* feat: hopp ui initialized * feat: button components added * feat: windi css integration * chore: package removed from hopp ui * feat: storybook added * feat: move all smart components hoppscotch-ui * fix: import issue from components/smart * fix: env input component import * feat: add hoppui to windicss config * fix: remove storybook * feat: move components from hoppscotch-ui * feat: storybook added * feat: storybook progress * feat: themeing storybook * feat: add stories * chore: package updated * chore: stories added * feat: stories added * feat: stories added * feat: icons resolved * feat: i18n composable resolved * feat: histoire added * chore: resolved prettier issue * feat: radio story added * feat: story added for all components * feat: new components added to stories * fix: resolved issues * feat: readme.md added * feat: context/provider added * chore: removed app component registry * chore: remove importing of all components in hopp-ui to allow code splitting * chore: fix vite config errors * chore: jsdoc added * chore: any replaced with smart-item * chore: i18n added to ui components * chore: clean up - removed a duplicate button --------- Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
2023-01-28 08:57:00 +06:00
parent 9d7052c626
commit 0fcda0be1a
65 changed files with 2961 additions and 214 deletions
--- a/packages/hoppscotch-ui/src/components/smart/ConfirmModal.vue
+++ b/packages/hoppscotch-ui/src/components/smart/ConfirmModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="confirm ?? t?.('modal.confirm') ?? 'Confirm'"
+    role="dialog"
+    aria-modal="true"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="flex flex-col items-center justify-center">
+        {{ title }}
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <ButtonPrimary
+          v-focus
+          :label="yes ?? t?.('action.yes') ?? 'Yes'"
+          :loading="!!loadingState"
+          outline
+          @click="resolve"
+        />
+        <ButtonSecondary
+          :label="no ?? t?.('action.no') ?? 'No'"
+          filled
+          outline
+          @click="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue"
+import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
+
+const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    title?: string | null
+    confirm?: string | null
+    yes?: string | null
+    no?: string | null
+    loadingState?: boolean | null
+  }>(),
+  {
+    title: null,
+    confirm: null,
+    yes: null,
+    no: null,
+    loadingState: null,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (e: "resolve", title: string | null): void
+}>()
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+
+const resolve = () => {
+  emit("resolve", props.title)
+  if (props.loadingState === null) emit("hide-modal")
+}
+</script>