frappe-ui 0.0.4 → 0.0.5

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
+    "test": "npx prettier --check ./src",
     "prettier": "npx prettier -w ./src"
   },
   "files": [
     "src"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/frappe/frappe-ui.git"
+  },
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
+    "@headlessui/vue": "^1.4.3",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",

package/readme.md

@@ -5,6 +5,11 @@ A set of components and utilities for rapid UI development.
 Frappe UI components are built using Vue 3 and Tailwind. Along with components,
 it also ships with directives and utilities that make UI development easier.
 
+<details>
+  <summary>Show components</summary>
+  <img src="https://user-images.githubusercontent.com/9355208/152111395-a62e1599-112c-450f-a32a-5debc791eb2e.png" width="80%" />
+</details>
+
 ## Installation
 ```sh
 npm install frappe-ui
@@ -310,4 +315,4 @@ export default {
 ```
 
 ## License
-MIT
+MIT

package/src/components/Button.vue

@@ -8,26 +8,38 @@
     <LoadingIndicator
       v-if="loading"
       :class="{
-        'text-white': type == 'primary',
-        'text-gray-600': type == 'secondary',
-        'text-red-200': type == 'danger',
+        'text-white': appearance == 'primary',
+        'text-gray-600': appearance == 'secondary',
+        'text-red-200': appearance == 'danger',
       }"
     />
-    <FeatherIcon v-else-if="iconLeft" :name="iconLeft" class="w-4 h-4 mr-1.5" />
+    <FeatherIcon
+      v-else-if="iconLeft"
+      :name="iconLeft"
+      class="w-4 h-4 mr-1.5"
+      aria-hidden="true"
+    />
     <template v-if="loading && loadingText">{{ loadingText }}</template>
     <template v-else-if="icon">
-      <FeatherIcon :name="icon" class="w-4 h-4" />
+      <FeatherIcon :name="icon" class="w-4 h-4" :aria-label="label" />
     </template>
     <span :class="icon ? 'sr-only' : ''">
       <slot></slot>
     </span>
-    <FeatherIcon v-if="iconRight" :name="iconRight" class="w-4 h-4 ml-2" />
+    <FeatherIcon
+      v-if="iconRight"
+      :name="iconRight"
+      class="w-4 h-4 ml-2"
+      aria-hidden="true"
+    />
   </button>
 </template>
 <script>
 import FeatherIcon from './FeatherIcon.vue'
 import LoadingIndicator from './LoadingIndicator.vue'
 
+const ValidAppearances = ['primary', 'secondary', 'danger', 'white', 'minimal']
+
 export default {
   name: 'Button',
   components: {
@@ -35,9 +47,16 @@ export default {
     LoadingIndicator,
   },
   props: {
-    type: {
+    label: {
+      type: String,
+      default: null,
+    },
+    appearance: {
       type: String,
       default: 'secondary',
+      validator: (value) => {
+        return ValidAppearances.includes(value)
+      },
     },
     disabled: {
       type: Boolean,
@@ -71,20 +90,25 @@ export default {
   },
   computed: {
     buttonClasses() {
+      let appearanceClasses = {
+        primary:
+          'bg-blue-500 hover:bg-blue-600 text-white focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+        secondary:
+          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-500',
+        danger:
+          'bg-red-500 hover:bg-red-400 text-white focus:ring-2 focus:ring-offset-2 focus:ring-red-500',
+        white:
+          'bg-white text-gray-900 border hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400',
+        minimal:
+          'bg-transparent hover:bg-gray-200 active:bg-gray-200 text-gray-900',
+      }
       return [
-        'inline-flex items-center justify-center text-base leading-5 rounded-md focus:outline-none',
+        'inline-flex items-center justify-center text-base leading-5 rounded-md transition-colors focus:outline-none',
         this.icon ? 'p-1.5' : 'px-3 py-1',
-        {
-          'opacity-50 cursor-not-allowed pointer-events-none': this.isDisabled,
-          'bg-gradient-blue hover:bg-gradient-none hover:bg-blue-500 text-white focus:ring-2 focus:ring-offset-2 focus:ring-blue-500':
-            this.type === 'primary',
-          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-500':
-            this.type === 'secondary',
-          'bg-red-500 hover:bg-red-400 text-white focus:ring-2 focus:ring-offset-2 focus:ring-red-500':
-            this.type === 'danger',
-          'bg-white text-gray-900 border hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400':
-            this.type === 'white',
-        },
+        this.isDisabled
+          ? 'opacity-50 cursor-not-allowed pointer-events-none'
+          : '',
+        appearanceClasses[this.appearance],
       ]
     },
     isDisabled() {

package/src/components/Dialog.vue

@@ -1,58 +1,184 @@
 <template>
-  <Modal
-    :show="modelValue"
-    @change="handleChange"
-    :dismissable="dismissable"
-    :full="full"
-  >
-    <div class="px-4 pb-4 bg-white sm:px-6 sm:pb-4">
-      <div class="sm:flex sm:items-start">
-        <div class="relative w-full sm:text-left">
-          <div class="sticky top-0 py-4 bg-white">
-            <h3 class="text-xl font-medium leading-6 text-gray-900">
-              {{ title }}
-            </h3>
-          </div>
-          <button
-            v-if="dismissable"
-            class="absolute top-0 right-0"
-            @click="handleChange(false)"
+  <TransitionRoot as="template" :show="open">
+    <HDialog
+      as="div"
+      class="fixed inset-0 z-10 overflow-y-auto"
+      @close="open = false"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+          />
+        </TransitionChild>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0 translate-y-4 sm:-translate-y-12 sm:scale-95"
+          enter-to="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 sm:scale-100"
+          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
           >
-            <FeatherIcon name="x" class="w-4 h-4 mt-4" />
-          </button>
-          <div class="leading-5 text-gray-800">
-            <slot></slot>
+            <slot name="body">
+              <slot name="body-main">
+                <div class="px-4 py-5 bg-white sm:p-6">
+                  <div>
+                    <div
+                      v-if="icon"
+                      class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto mb-3 rounded-full sm:mx-0 sm:h-10 sm:w-10 sm:mb-0 sm:mr-4"
+                      :class="{
+                        'bg-yellow-100': icon.type === 'warning',
+                        'bg-blue-100': icon.type === 'info',
+                        'bg-red-100': icon.type === 'danger',
+                        'bg-green-100': icon.type === 'success',
+                      }"
+                    >
+                      <FeatherIcon
+                        :name="icon.name"
+                        class="w-6 h-6 text-red-600"
+                        :class="{
+                          'text-yellow-600': icon.type === 'warning',
+                          'text-blue-600': icon.type === 'info',
+                          'text-red-600': icon.type === 'danger',
+                          'text-green-600': icon.type === 'success',
+                        }"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div class="text-center sm:text-left">
+                      <DialogTitle as="header">
+                        <slot name="body-title">
+                          <h3
+                            class="mb-2 text-lg font-medium leading-6 text-gray-900"
+                          >
+                            {{ options.title || 'Untitled' }}
+                          </h3>
+                        </slot>
+                      </DialogTitle>
+
+                      <slot name="body-content">
+                        <p class="text-sm text-gray-500" v-if="options.message">
+                          {{ options.message }}
+                        </p>
+                      </slot>
+                    </div>
+                  </div>
+                </div>
+              </slot>
+              <div
+                class="px-4 py-3 space-y-2 sm:space-x-reverse sm:space-x-3 sm:space-y-0 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse"
+                v-if="options?.actions || $slots.actions"
+              >
+                <slot name="actions" v-bind="{ close: () => (open = false) }">
+                  <Button
+                    v-for="action in options.actions"
+                    :key="action.label"
+                    :appearance="action.appearance"
+                    @click="
+                      () => {
+                        if (action.handler && action.handler === 'cancel') {
+                          open = false
+                        } else {
+                          action.handler()
+                        }
+                      }
+                    "
+                  >
+                    {{ action.label }}
+                  </Button>
+                </slot>
+              </div>
+            </slot>
           </div>
-        </div>
+        </TransitionChild>
       </div>
-    </div>
-    <div
-      class="sticky bottom-0 flex items-center justify-end p-4 bg-white sm:px-6 sm:py-4"
-      v-if="$slots.actions"
-    >
-      <slot name="actions"></slot>
-    </div>
-  </Modal>
+    </HDialog>
+  </TransitionRoot>
 </template>
 
 <script>
-import Modal from './Modal.vue'
-import FeatherIcon from './FeatherIcon.vue'
+import { computed } from 'vue'
+import {
+  Dialog as HDialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+import { Button, FeatherIcon } from 'frappe-ui'
 
 export default {
   name: 'Dialog',
-  props: ['title', 'modelValue', 'dismissable', 'full'],
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
   emits: ['update:modelValue', 'close'],
   components: {
-    Modal,
+    HDialog,
+    DialogOverlay,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+    Button,
     FeatherIcon,
   },
-  methods: {
-    handleChange(value) {
-      this.$emit('update:modelValue', value)
-      if (value === false) {
-        this.$emit('close')
+  setup(props, { emit }) {
+    let open = computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit('update:modelValue', val)
+        if (!val) {
+          emit('close')
+        }
+      },
+    })
+    return {
+      open,
+    }
+  },
+  computed: {
+    icon() {
+      if (!this.options?.icon) return null
+
+      let icon = this.options.icon
+      if (typeof icon === 'string') {
+        icon = {
+          name: icon,
+          type: 'info',
+        }
       }
+      return icon
     },
   },
 }

package/src/components/Dropdown.vue

@@ -1,220 +1,113 @@
 <template>
-  <Popover
-    :show-popup="isShown"
-    :hide-arrow="true"
-    :placement="right ? 'bottom-end' : 'bottom-start'"
-    @init="updateTargetWidth"
-  >
-    <template v-slot:target>
-      <div
-        class="h-full"
-        ref="target"
-        v-on-outside-click="() => (isShown = false)"
-      >
-        <slot
-          :toggleDropdown="toggleDropdown"
-          :highlightItemUp="highlightItemUp"
-          :highlightItemDown="highlightItemDown"
-          :selectHighlightedItem="selectHighlightedItem"
-        ></slot>
-      </div>
-    </template>
-    <template v-slot:content>
-      <div
-        class="z-10 rounded-md w-fullbg-white min-w-40"
-        :style="{ width: dropdownWidthFull ? targetWidth + 'px' : undefined }"
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton>
+      <slot v-if="$slots.default"></slot>
+      <Button v-else v-bind="button">
+        {{ button ? button?.label || null : 'Options' }}
+      </Button>
+    </MenuButton>
+
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        class="absolute z-10 mt-2 bg-white divide-y divide-gray-100 rounded-md shadow-lg min-w-40 ring-1 ring-black ring-opacity-5 focus:outline-none"
+        :class="
+          placement === 'left'
+            ? 'left-0 origin-top-left'
+            : 'right-0 origin-top-right'
+        "
       >
-        <div class="p-1 overflow-auto text-sm max-h-64">
-          <div v-if="isLoading" class="p-2 text-gray-600">
-            {{ _('Loading...') }}
+        <div v-for="group in groups" :key="group.key" class="px-1 py-1">
+          <div
+            v-if="group.group && !group.hideLabel"
+            class="px-2 py-1 text-xs font-semibold tracking-wider text-gray-500 uppercase"
+          >
+            {{ group.group }}
           </div>
-          <template v-else>
-            <div v-for="d in dropdownItems" :key="d.label">
-              <div
-                v-if="d.isGroup"
-                class="px-2 pt-2 pb-1 text-xs font-semibold tracking-wider text-gray-500 uppercase"
-              >
-                {{ d.label }}
-              </div>
-              <a
-                v-else
-                :ref="setItemRef"
-                class="block p-2 truncate rounded-md cursor-pointer first:mt-0"
-                :class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
-                @mouseenter="highlightedIndex = d.index"
-                @mouseleave="highlightedIndex = -1"
-                @click="selectItem(d)"
-              >
-                <component :is="d.component" v-if="d.component" />
-                <template v-else>{{ d.label }}</template>
-              </a>
-            </div>
-          </template>
+          <MenuItem
+            v-for="item in group.items"
+            :key="item.label"
+            v-slot="{ active }"
+          >
+            <button
+              :class="[
+                active ? 'bg-gray-100' : 'text-gray-900',
+                'group flex rounded-md items-center w-full px-2 py-2 text-sm',
+              ]"
+              :onClick="item.onClick"
+            >
+              <FeatherIcon
+                v-if="item.icon"
+                :name="item.icon"
+                class="flex-shrink-0 w-4 h-4 mr-2 text-gray-500"
+                aria-hidden="true"
+              />
+              <span class="whitespace-nowrap">
+                {{ item.label }}
+              </span>
+            </button>
+          </MenuItem>
         </div>
-      </div>
-    </template>
-  </Popover>
+      </MenuItems>
+    </transition>
+  </Menu>
 </template>
 
 <script>
-import Popover from './Popover.vue'
-import onOutsideClick from '../directives/onOutsideClick'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import { FeatherIcon } from 'frappe-ui'
 
 export default {
-  name: 'Dropdown',
-  directives: {
-    onOutsideClick,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    groups: {
-      type: Array,
-      default: null,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    dropdownWidthFull: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  name: 'NewDropdown',
+  props: ['button', 'options', 'placement'],
   components: {
-    Popover,
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    FeatherIcon,
   },
-  data() {
-    return {
-      targetWidth: undefined,
-      isShown: false,
-      itemRefs: [],
-      highlightedIndex: -1,
-    }
-  },
-  computed: {
-    sortedGroups() {
-      if (Array.isArray(this.groups)) {
-        return this.groups
+  methods: {
+    normalizeDropdownItem(option) {
+      let onClick = option.handler || null
+      if (!onClick && option.route && this.$router) {
+        onClick = () => this.$router.push(option.route)
       }
-      let groupNames = [
-        ...new Set(
-          this.items
-            .map((d) => d.group)
-            .filter(Boolean)
-            .sort()
-        ),
-      ]
-      if (groupNames.length > 0) {
-        return groupNames
+      return {
+        label: option.label,
+        icon: option.icon,
+        group: option.group,
+        onClick,
       }
-      return null
     },
+  },
+  computed: {
     dropdownItems() {
-      let items = this.items
+      return (this.options || [])
         .filter(Boolean)
-        .filter((d) => (d.condition ? d.condition() : true))
-
-      if (this.sortedGroups) {
-        let itemsByGroup = {}
-
-        for (let item of items) {
-          let group = item.group || ''
-          itemsByGroup[group] = itemsByGroup[group] || []
-          itemsByGroup[group].push(item)
-        }
-
-        let items = []
-        let i = 0
-        for (let group of this.sortedGroups) {
-          let groupItems = itemsByGroup[group]
-          groupItems = groupItems.map((d) => {
-            d.index = i
-            i++
-            return d
-          })
-          items = items.concat(
-            {
-              label: group,
-              isGroup: true,
-            },
-            groupItems
-          )
-        }
-
-        return items
-      }
-
-      return items.filter(Boolean).map((d, i) => {
-        d.index = i
-        return d
-      })
-    },
-  },
-  methods: {
-    selectItem(d) {
-      if (d.action) {
-        d.action()
-      }
+        .filter((option) => (option.condition ? option.condition() : true))
+        .map((option) => this.normalizeDropdownItem(option))
     },
-    toggleDropdown(flag) {
-      if (flag == null) {
-        this.isShown = !this.isShown
-      } else {
-        this.isShown = Boolean(flag)
-      }
-    },
-    selectHighlightedItem() {
-      if (![-1, this.items.length].includes(this.highlightedIndex)) {
-        // valid selection
-        let item = this.items[this.highlightedIndex]
-        this.selectItem(item)
-      }
-    },
-    highlightItemUp() {
-      this.highlightedIndex -= 1
-      if (this.highlightedIndex < 0) {
-        this.highlightedIndex = 0
-      }
-      this.$nextTick(() => {
-        let index = this.highlightedIndex
-        if (index !== 0) {
-          index -= 1
-        }
-        this.scrollToHighlighted()
-      })
-    },
-    highlightItemDown() {
-      this.highlightedIndex += 1
-      if (this.highlightedIndex > this.items.length) {
-        this.highlightedIndex = this.items.length
-      }
+    groups() {
+      let groups = this.options[0]?.group
+        ? this.options
+        : [{ group: '', items: this.options }]
 
-      this.$nextTick(() => {
-        this.scrollToHighlighted()
-      })
-    },
-    scrollToHighlighted() {
-      let highlightedElement = this.$refs.items[this.highlightedIndex]
-      highlightedElement &&
-        highlightedElement.scrollIntoView({ block: 'nearest' })
-    },
-    updateTargetWidth() {
-      this.$nextTick(() => {
-        this.targetWidth = this.$refs.target.clientWidth
+      return groups.map((group, i) => {
+        return {
+          key: i,
+          group: group.group,
+          hideLabel: group.hideLabel || false,
+          items: group.items.map((item) => this.normalizeDropdownItem(item)),
+        }
       })
     },
-    setItemRef(el) {
-      if (el) {
-        this.itemRefs.push(el)
-      }
-    },
   },
 }
 </script>

package/src/index.js

@@ -5,7 +5,6 @@ export { default as Badge } from './components/Badge.vue'
 export { default as Button } from './components/Button.vue'
 export { default as Card } from './components/Card.vue'
 export { default as Dialog } from './components/Dialog.vue'
-export { default as NewDialog } from './components/NewDialog.vue'
 export { default as Dropdown } from './components/Dropdown.vue'
 export { default as ErrorMessage } from './components/ErrorMessage.vue'
 export { default as FeatherIcon } from './components/FeatherIcon.vue'

package/src/utils/call.js

@@ -1,4 +1,4 @@
-export default async function call(method, args, options={}) {
+export default async function call(method, args, options = {}) {
   if (!args) {
     args = {}
   }
@@ -27,6 +27,20 @@ export default async function call(method, args, options={}) {
     if (data.docs || method === 'login') {
       return data
     }
+    if (data.exc) {
+      try {
+        console.groupCollapsed(method)
+        console.log(`method: ${method}`)
+        console.log(`params:`, args)
+        let warning = JSON.parse(data.exc)
+        for (let text of warning) {
+          console.log(text)
+        }
+        console.groupEnd()
+      } catch (e) {
+        console.warn('Error printing debug messages', e)
+      }
+    }
     return data.message
   } else {
     let response = await res.text()

package/src/utils/resources.js

@@ -46,8 +46,13 @@ function createResource(options, vm, getResource) {
       params = null
     }
     out.params = params || options.params
+    out.previousData = out.data ? JSON.parse(JSON.stringify(out.data)) : null
     out.loading = true
 
+    if (options.onFetch) {
+      options.onFetch.call(vm, out.params)
+    }
+
     if (options.validate) {
       let invalidMessage
       try {
@@ -67,7 +72,6 @@ function createResource(options, vm, getResource) {
 
     try {
       let data = await resourceFetcher(options.method, params || options.params)
-      out.previousData = out.data || null
       out.data = data
       out.fetched = true
       if (options.onSuccess) {
@@ -93,6 +97,9 @@ function createResource(options, vm, getResource) {
 
   function handleError(error) {
     console.error(error)
+    if (out.previousData) {
+      out.data = out.previousData
+    }
     out.error = error
     if (options.onError) {
       options.onError.call(vm, error)

package/src/components/NewDialog.vue

@@ -1,183 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="open">
-    <Dialog
-      as="div"
-      class="fixed inset-0 z-10 overflow-y-auto"
-      @close="open = false"
-    >
-      <div
-        class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
-          />
-        </TransitionChild>
-
-        <!-- This element is to trick the browser into centering the modal contents. -->
-        <span
-          class="hidden sm:inline-block sm:align-middle sm:h-screen"
-          aria-hidden="true"
-        >
-          &#8203;
-        </span>
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:-translate-y-12 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <div
-            class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-          >
-            <slot name="dialog-body">
-              <slot name="dialog-main">
-                <div class="px-4 py-5 bg-white sm:p-6">
-                  <div>
-                    <div
-                      v-if="icon"
-                      class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto mb-3 rounded-full sm:mx-0 sm:h-10 sm:w-10 sm:mb-0 sm:mr-4"
-                      :class="{
-                        'bg-yellow-100': icon.type === 'warning',
-                        'bg-blue-100': icon.type === 'info',
-                        'bg-red-100': icon.type === 'danger',
-                        'bg-green-100': icon.type === 'success',
-                      }"
-                    >
-                      <FeatherIcon
-                        :name="icon.name"
-                        class="w-6 h-6 text-red-600"
-                        :class="{
-                          'text-yellow-600': icon.type === 'warning',
-                          'text-blue-600': icon.type === 'info',
-                          'text-red-600': icon.type === 'danger',
-                          'text-green-600': icon.type === 'success',
-                        }"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div class="text-center sm:text-left">
-                      <DialogTitle
-                        as="h3"
-                        class="text-lg font-medium leading-6 text-gray-900"
-                      >
-                        {{ options.title || 'Untitled' }}
-                      </DialogTitle>
-                      <div class="mt-2">
-                        <slot name="dialog-content">
-                          <p
-                            class="text-sm text-gray-500"
-                            v-if="options.message"
-                          >
-                            {{ options.message }}
-                          </p>
-                        </slot>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </slot>
-              <div
-                class="px-4 py-3 space-y-2 sm:space-x-reverse sm:space-x-3 sm:space-y-0 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse"
-                v-if="options?.actions || $slots['dialog-actions']"
-              >
-                <slot
-                  name="dialog-actions"
-                  v-bind="{ close: () => (open = false) }"
-                >
-                  <button
-                    v-for="action in options.actions"
-                    :key="action.label"
-                    type="button"
-                    class="inline-flex justify-center w-full px-4 py-2 text-base font-medium border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:w-auto sm:text-sm"
-                    :class="{
-                      'text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-500':
-                        !action.type || action.type === 'default',
-                      'text-white bg-yellow-600 border-transparent hover:bg-yellow-700 focus:ring-yellow-500':
-                        action.type === 'warning',
-                      'text-white bg-blue-600 border-transparent hover:bg-blue-700 focus:ring-blue-500':
-                        action.type === 'info',
-                      'text-white bg-red-600 border-transparent hover:bg-red-700 focus:ring-red-500':
-                        action.type === 'danger',
-                      'text-white bg-green-600 border-transparent hover:bg-green-700 focus:ring-green-500':
-                        action.type === 'success',
-                    }"
-                    @click="
-                      () => {
-                        if (action.action && action.action === 'cancel') {
-                          open = false
-                        } else {
-                          action.action()
-                        }
-                      }
-                    "
-                  >
-                    {{ action.label }}
-                  </button>
-                </slot>
-              </div>
-            </slot>
-          </div>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script>
-import { ref, computed } from 'vue'
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-
-export default {
-  name: 'NewDialog',
-  props: ['modelValue', 'options'],
-  emits: ['update:modelValue'],
-  components: {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot,
-  },
-  setup(props, { emit }) {
-    let open = computed({
-      get: () => props.modelValue,
-      set: (val) => emit('update:modelValue', val),
-    })
-    return {
-      open,
-    }
-  },
-  computed: {
-    icon() {
-      if (!this.options?.icon) return null
-
-      let icon = this.options.icon
-      if (typeof icon === 'string') {
-        icon = {
-          name: icon,
-          type: 'info',
-        }
-      }
-      return icon
-    },
-  },
-}
-</script>