frappe-ui 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/ConfirmDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <Dialog v-model="showDialog" :options="{ title }">
+    <template #body-content>
+      <div class="space-y-4">
+        <p class="text-p-base text-gray-800" v-if="message" v-html="message" />
+      </div>
+    </template>
+    <template #actions>
+      <Button class="w-full" v-bind="primaryActionProps" />
+    </template>
+  </Dialog>
+</template>
+<script>
+import Dialog from './Dialog.vue'
+export default {
+  name: 'ConfirmDialog',
+  props: ['title', 'message', 'fields', 'onConfirm'],
+  expose: ['show', 'hide'],
+  components: {
+    Dialog,
+  },
+  data() {
+    return {
+      showDialog: true,
+      isLoading: false,
+    }
+  },
+  methods: {
+    handleConfirmation() {
+      try {
+        this.onConfirm?.({
+          hideDialog: this.hide,
+        })
+      } finally {
+        this.isLoading = false
+      }
+    },
+    show() {
+      this.showDialog = true
+    },
+    hide() {
+      this.showDialog = false
+    },
+  },
+  computed: {
+    primaryActionProps() {
+      return {
+        label: 'Confirm',
+        variant: 'solid',
+        loading: this.isLoading,
+        onClick: this.handleConfirmation,
+      }
+    },
+  },
+}
+</script>

package/src/components/Dialogs.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <component v-for="dialog in dialogs" :is="dialog"></component>
+  </div>
+</template>
+<script setup>
+import { dialogs } from '../utils/confirmDialog.js'
+</script>

package/src/index.js

@@ -9,6 +9,7 @@ export { default as Card } from './components/Card.vue'
 export { default as Checkbox } from './components/Checkbox.vue'
 export { default as DatePicker } from './components/DatePicker.vue'
 export { default as Dialog } from './components/Dialog.vue'
+export { default as Dialogs } from './components/Dialogs.vue'
 export { default as Divider } from './components/Divider.vue'
 export { default as Dropdown } from './components/Dropdown.vue'
 export { default as ErrorMessage } from './components/ErrorMessage.vue'
@@ -86,3 +87,4 @@ export { setConfig, getConfig } from './utils/config.js'
 // plugin
 export { default as pageMetaPlugin } from './utils/pageMeta.js'
 export { default as FrappeUI } from './utils/plugin.js'
+export { confirmDialog } from './utils/confirmDialog.js'

package/src/utils/confirmDialog.js

@@ -0,0 +1,25 @@
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import { h, ref } from 'vue'
+
+export function confirmDialog({
+  title = 'Untitled',
+  message = '',
+  fields = [],
+  onConfirm,
+}) {
+  renderDialog(
+    h(ConfirmDialog, {
+      title,
+      message,
+      fields,
+      onConfirm,
+    })
+  )
+}
+
+export const dialogs = ref([])
+
+export function renderDialog(component) {
+  component.id = dialogs.length
+  dialogs.value.push(component)
+}