frappe-ui 0.0.91 → 0.0.93

package/package.json

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

package/src/components/Dialog.vue

@@ -10,7 +10,7 @@
       @close="open = false"
     >
       <div
-        class="flex min-h-screen flex-col items-center px-4 pt-4 pb-20 text-center"
+        class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
         :class="dialogPositionClasses"
       >
         <TransitionChild

package/src/components/Dropdown.vue

@@ -1,49 +1,49 @@
 <template>
   <Menu as="div" class="relative inline-block text-left" v-slot="{ open }">
-    <MenuButton as="div">
-      <slot v-if="$slots.default" v-bind="{ open }"></slot>
-      <Button v-else v-bind="button" :active="open">
-        {{ button ? button?.label || null : 'Options' }}
-      </Button>
-    </MenuButton>
+    <Popover :transition="dropdownTransition" :show="open">
+      <template #target>
+        <MenuButton as="div">
+          <slot v-if="$slots.default" v-bind="{ open }" />
+          <Button v-else :active="open" v-bind="button">
+            {{ button ? button?.label || null : 'Options' }}
+          </Button>
+        </MenuButton>
+      </template>
 
-    <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="min-w-40 absolute z-10 mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-        :class="{
-          'left-0 origin-top-left': placement == 'left',
-          'right-0 origin-top-right': placement == 'right',
-          'inset-x-0 origin-top': placement == 'center',
-        }"
-      >
-        <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 uppercase tracking-wider text-gray-500"
-          >
-            {{ group.group }}
-          </div>
-          <MenuItem
-            v-for="item in group.items"
-            :key="item.label"
-            v-slot="{ active }"
-          >
-            <button
-              :class="[
-                active ? 'bg-gray-100' : 'text-gray-900',
-                'group flex w-full items-center rounded-md px-2 py-2 text-sm',
-              ]"
-              @click="item.onClick"
+      <template #body>
+        <MenuItems
+          class="min-w-40 mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          :class="{
+            'left-0 origin-top-left': placement == 'left',
+            'right-0 origin-top-right': placement == 'right',
+            'inset-x-0 origin-top': placement == 'center',
+          }"
+        >
+          <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 uppercase tracking-wider text-gray-500"
+            >
+              {{ group.group }}
+            </div>
+            <MenuItem
+              v-for="item in group.items"
+              :key="item.label"
+              v-slot="{ active }"
             >
-              <component :is="item.component" v-if="item.component" />
-              <template v-else>
+              <component
+                v-if="item.component"
+                :is="item.component"
+                :active="active"
+              />
+              <button
+                v-else
+                :class="[
+                  active ? 'bg-gray-100' : 'text-gray-900',
+                  'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                ]"
+                @click="item.onClick"
+              >
                 <FeatherIcon
                   v-if="item.icon"
                   :name="item.icon"
@@ -53,17 +53,18 @@
                 <span class="whitespace-nowrap">
                   {{ item.label }}
                 </span>
-              </template>
-            </button>
-          </MenuItem>
-        </div>
-      </MenuItems>
-    </transition>
+              </button>
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </template>
+    </Popover>
   </Menu>
 </template>
 
 <script>
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import Popover from './Popover.vue'
 import Button from './Button.vue'
 import FeatherIcon from './FeatherIcon.vue'
 
@@ -90,6 +91,7 @@ export default {
     MenuItem,
     Button,
     FeatherIcon,
+    Popover,
   },
   methods: {
     normalizeDropdownItem(option) {
@@ -128,6 +130,16 @@ export default {
         }
       })
     },
+    dropdownTransition() {
+      return {
+        enterActiveClass: 'transition duration-100 ease-out',
+        enterFromClass: 'transform scale-95 opacity-0',
+        enterToClass: 'transform scale-100 opacity-100',
+        leaveActiveClass: 'transition duration-75 ease-in',
+        leaveFromClass: 'transform scale-100 opacity-100',
+        leaveToClass: 'transform scale-95 opacity-0',
+      }
+    },
   },
 }
 </script>

package/src/components/Popover.vue

@@ -201,16 +201,10 @@ export default {
       }
     },
     open() {
-      if (this.isOpen) {
-        return
-      }
       this.isOpen = true
       this.$nextTick(() => this.setupPopper())
     },
     close() {
-      if (!this.isOpen) {
-        return
-      }
       this.isOpen = false
     },
     onMouseover() {

package/src/resources/documentResource.js

@@ -48,7 +48,7 @@ export function createDocumentResource(options, vm) {
     doctype: options.doctype,
     name: options.name,
     doc: null,
-    auto: true,
+    auto: options.auto || true,
     get: createResource(
       {
         url: 'frappe.client.get',
@@ -103,7 +103,7 @@ export function createDocumentResource(options, vm) {
     let methodOptions = options.whitelistedMethods[methodKey]
     if (typeof methodOptions == 'string') {
       methodOptions = {
-        url: methodOptions,
+        method: methodOptions,
       }
     }
     let { method, onSuccess, ...otherOptions } = methodOptions
@@ -183,6 +183,11 @@ export function createDocumentResource(options, vm) {
       out.doc = transform(data)
     }
   })
+
+  if (out.auto) {
+    out.get.fetch()
+  }
+
   return out
 }
 

package/src/resources/resources.js

@@ -58,6 +58,7 @@ export function createResource(options, vm) {
     out.params = params
     out.previousData = out.data ? JSON.parse(JSON.stringify(out.data)) : null
     out.loading = true
+    out.error = null
 
     if (options.onFetch) {
       options.onFetch.call(vm, out.params)

package/src/utils/pageMeta.js

@@ -21,7 +21,7 @@ function createMixin() {
               let debugInfo = `${this.$options.name} (${
                 this.$options.__file || ''
               })`
-              if (import.meta.env.DEV) {
+              if (process.env.NODE_ENV === 'development') {
                 console.warn('Failed to parse pageMeta in', debugInfo)
               }
               return null