frappe-ui 0.0.2 → 0.0.3

package/package.json

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

package/src/components/Button.vue

@@ -76,13 +76,13 @@ export default {
         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:shadow-outline-blue':
+          '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:shadow-outline-gray':
+          '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:shadow-outline-red':
+          '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 shadow focus:ring focus:ring-gray-400':
+          'bg-white text-gray-900 border hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400':
             this.type === 'white',
         },
       ]

package/src/components/FileUploader.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <input
+      ref="input"
+      type="file"
+      :accept="fileTypes"
+      class="hidden"
+      @change="onFileAdd"
+    />
+    <slot
+      v-bind="{
+        file,
+        uploading,
+        progress,
+        uploaded,
+        message,
+        error,
+        total,
+        success,
+        openFileSelector,
+      }"
+    />
+  </div>
+</template>
+
+<script>
+class FileUploader {
+  constructor() {
+    this.listeners = {}
+  }
+
+  on(event, handler) {
+    this.listeners[event] = this.listeners[event] || []
+    this.listeners[event].push(handler)
+  }
+
+  trigger(event, data) {
+    let handlers = this.listeners[event] || []
+    handlers.forEach((handler) => {
+      handler.call(this, data)
+    })
+  }
+
+  upload(file, options) {
+    return new Promise((resolve, reject) => {
+      let xhr = new XMLHttpRequest()
+      xhr.upload.addEventListener('loadstart', () => {
+        this.trigger('start')
+      })
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          this.trigger('progress', {
+            uploaded: e.loaded,
+            total: e.total,
+          })
+        }
+      })
+      xhr.upload.addEventListener('load', () => {
+        this.trigger('finish')
+      })
+      xhr.addEventListener('error', () => {
+        this.trigger('error')
+        reject()
+      })
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState == XMLHttpRequest.DONE) {
+          let error
+          if (xhr.status === 200) {
+            let r = null
+            try {
+              r = JSON.parse(xhr.responseText)
+            } catch (e) {
+              r = xhr.responseText
+            }
+            let out = r.message || r
+            resolve(out)
+          } else if (xhr.status === 403) {
+            error = JSON.parse(xhr.responseText)
+          } else {
+            this.failed = true
+            try {
+              error = JSON.parse(xhr.responseText)
+            } catch (e) {
+              // pass
+            }
+          }
+          if (error && error.exc) {
+            console.error(JSON.parse(error.exc)[0])
+          }
+          reject(error)
+        }
+      }
+      xhr.open('POST', '/api/method/upload_file', true)
+      xhr.setRequestHeader('Accept', 'application/json')
+      if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
+        xhr.setRequestHeader('X-Frappe-CSRF-Token', window.csrf_token)
+      }
+
+      let form_data = new FormData()
+      if (file) {
+        form_data.append('file', file, file.name)
+      }
+      form_data.append('is_private', +(options.private || 0))
+      form_data.append('folder', options.folder || 'Home')
+
+      if (options.file_url) {
+        form_data.append('file_url', options.file_url)
+      }
+
+      if (options.doctype && options.docname) {
+        form_data.append('doctype', options.doctype)
+        form_data.append('docname', options.docname)
+        if (options.fieldname) {
+          form_data.append('fieldname', options.fieldname)
+        }
+      }
+
+      if (options.method) {
+        form_data.append('method', options.method)
+      }
+
+      if (options.type) {
+        form_data.append('type', options.type)
+      }
+
+      xhr.send(form_data)
+    })
+  }
+}
+
+export default {
+  name: 'FileUploader',
+  props: ['fileTypes', 'uploadArgs', 'type', 'validateFile'],
+  data() {
+    return {
+      uploader: null,
+      uploading: false,
+      uploaded: 0,
+      error: null,
+      message: '',
+      total: 0,
+      file: null,
+      finishedUploading: false,
+    }
+  },
+  computed: {
+    progress() {
+      let value = Math.floor((this.uploaded / this.total) * 100)
+      return isNaN(value) ? 0 : value
+    },
+    success() {
+      return this.finishedUploading && !this.error
+    },
+  },
+  methods: {
+    openFileSelector() {
+      this.$refs['input'].click()
+    },
+    async onFileAdd(e) {
+      this.error = null
+      this.file = e.target.files[0]
+
+      if (this.file && this.validateFile) {
+        try {
+          let message = await this.validateFile(this.file)
+          if (message) {
+            this.error = message
+          }
+        } catch (error) {
+          this.error = error
+        }
+      }
+
+      if (!this.error) {
+        this.uploadFile(this.file)
+      }
+    },
+    async uploadFile(file) {
+      this.error = null
+      this.uploaded = 0
+      this.total = 0
+
+      this.uploader = new FileUploader()
+      this.uploader.on('start', () => {
+        this.uploading = true
+      })
+      this.uploader.on('progress', (data) => {
+        this.uploaded = data.uploaded
+        this.total = data.total
+      })
+      this.uploader.on('error', () => {
+        this.uploading = false
+        this.error = 'Error Uploading File'
+      })
+      this.uploader.on('finish', () => {
+        this.uploading = false
+        this.finishedUploading = true
+      })
+      this.uploader
+        .upload(file, this.uploadArgs || {})
+        .then((data) => {
+          this.$emit('success', data)
+        })
+        .catch((error) => {
+          this.uploading = false
+          let errorMessage = 'Error Uploading File'
+          if (error._server_messages) {
+            errorMessage = JSON.parse(
+              JSON.parse(error._server_messages)[0]
+            ).message
+          } else if (error.exc) {
+            errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
+          }
+          this.error = errorMessage
+          this.$emit('failure', error)
+        })
+    },
+  },
+}
+</script>

package/src/components/NewDialog.vue

@@ -0,0 +1,183 @@
+<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>

package/src/index.js

@@ -5,9 +5,11 @@ 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'
+export { default as FileUploader } from './components/FileUploader.vue'
 export { default as GreenCheckIcon } from './components/GreenCheckIcon.vue'
 export { default as Input } from './components/Input.vue'
 export { default as Link } from './components/Link.vue'
@@ -23,7 +25,8 @@ export { default as SuccessMessage } from './components/SuccessMessage.vue'
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'
 
 // utilities
-export { default as call } from './utils/call.js'
+export { default as call, createCall } from './utils/call.js'
+export { default as debounce } from './utils/debounce.js'
 
 // plugin
 export { default as FrappeUI } from './utils/plugin.js'

package/src/utils/call.js

@@ -1,4 +1,4 @@
-export default async function call(method, args, _headers) {
+export default async function call(method, args, options={}) {
   if (!args) {
     args = {}
   }
@@ -9,7 +9,7 @@ export default async function call(method, args, _headers) {
       'Content-Type': 'application/json; charset=utf-8',
       'X-Frappe-Site-Name': window.location.hostname,
     },
-    _headers
+    options.headers || {}
   )
 
   if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
@@ -49,6 +49,7 @@ export default async function call(method, args, _headers) {
     let e = new Error(errorParts.join('\n'))
     e.exc_type = error.exc_type
     e.exc = exception
+    e.status = res.status
     e.messages = error._server_messages
       ? JSON.parse(error._server_messages)
       : []
@@ -67,6 +68,16 @@ export default async function call(method, args, _headers) {
         : ['Internal Server Error']
     }
 
+    if (options.onError) {
+      options.onError({ response: res, status: res.status, error: e })
+    }
+
     throw e
   }
 }
+
+export function createCall(options) {
+  return function customCall(method, args) {
+    return call(method, args, options)
+  }
+}

package/src/utils/debounce.js

@@ -0,0 +1,15 @@
+export default function debounce(func, wait, immediate) {
+  var timeout
+  return function () {
+    var context = this,
+      args = arguments
+    var later = function () {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }
+    var callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+    if (callNow) func.apply(context, args)
+  }
+}

package/src/utils/plugin.js

@@ -11,10 +11,11 @@ let defaultOptions = {
 export default {
   install(app, options = {}) {
     options = Object.assign({}, defaultOptions, options)
-    options.resources && app.use(resources)
+    options.resources && app.use(resources, options.resources)
 
     if (options.call) {
-      app.config.globalProperties.$call = call
+      let callFunction = typeof options.call == 'function' ? options.call : call
+      app.config.globalProperties.$call = callFunction
     }
     if (options.socketio) {
       app.config.globalProperties.$socket = socket

package/src/utils/resources.js

@@ -1,11 +1,19 @@
-import call from './call'
-import { onMounted, reactive, watchEffect } from 'vue'
+import { call, debounce } from 'frappe-ui'
+import { reactive, watch } from 'vue'
 
 let cached = {}
 
-function createResource(options, vm) {
-  if (options.cache && cached[options.cache]) {
-    return cached[options.cache]
+function createResource(options, vm, getResource) {
+  let cacheKey = null
+  if (options.cache) {
+    cacheKey = options.cache
+    if (typeof cacheKey === 'string') {
+      cacheKey = [cacheKey]
+    }
+    cacheKey = JSON.stringify(cacheKey)
+    if (cached[cacheKey]) {
+      return cached[cacheKey]
+    }
   }
 
   if (typeof options == 'string') {
@@ -15,44 +23,40 @@ function createResource(options, vm) {
     }
   }
 
+  let resourceFetcher = getResource || call
+  let fetchFunction = options.debounce
+    ? debounce(fetch, options.debounce)
+    : fetch
+
   let out = reactive({
     data: options.initialData || null,
+    previousData: null,
     loading: false,
     fetched: false,
     error: null,
+    auto: options.auto,
     params: null,
-    fetch,
-    submit,
+    fetch: fetchFunction,
+    submit: fetchFunction,
+    update,
   })
 
-  if (typeof options.params == 'function') {
-    watchEffect(() => {
-      out.params = options.params(vm)
-      if (options.auto) {
-        fetch()
-      }
-    })
-  } else {
-    out.params = options.params
-  }
-
-  onMounted(() => {
-    if (options.auto) {
-      fetch()
+  async function fetch(params) {
+    if (params instanceof Event) {
+      params = null
     }
-  })
-
-  async function fetch() {
+    out.params = params || options.params
     out.loading = true
-    out.data = options.initialData || null
     try {
-      let data = await call(options.method, out.params)
+      let data = await resourceFetcher(options.method, params || options.params)
+      out.previousData = out.data || null
       out.data = data
       out.fetched = true
       if (options.onSuccess) {
         options.onSuccess.call(vm, data)
       }
     } catch (error) {
+      console.error(error)
       out.error = error
       if (options.onError) {
         options.onError.call(vm, error)
@@ -61,33 +65,78 @@ function createResource(options, vm) {
     out.loading = false
   }
 
-  function submit(params) {
-    out.params = params
-    return fetch()
+  function update({ method, params, auto }) {
+    if (method && method !== options.method) {
+      options.method = method
+    }
+    if (params && params !== options.params) {
+      options.params = params
+    }
+    if (auto !== undefined && auto !== out.auto) {
+      out.auto = auto
+    }
   }
 
-  if (options.cache && !cached[options.cache]) {
-    cached[options.cache] = out
+  if (cacheKey && !cached[cacheKey]) {
+    cached[cacheKey] = out
   }
 
   return out
 }
 
-let Resources = {
+let createMixin = (mixinOptions) => ({
   created() {
     if (this.$options.resources) {
-      this._resources = {}
+      this._resources = reactive({})
       for (let key in this.$options.resources) {
-        this._resources[key] = createResource(
-          this.$options.resources[key],
-          this
-        )
+        let options = this.$options.resources[key]
+
+        if (typeof options == 'function') {
+          watch(
+            () => options.call(this),
+            (updatedOptions, oldVal) => {
+              let changed =
+                !oldVal ||
+                JSON.stringify(updatedOptions) !== JSON.stringify(oldVal)
+
+              if (!changed) return
+
+              let resource = this._resources[key]
+              if (!resource) {
+                resource = createResource(
+                  updatedOptions,
+                  this,
+                  mixinOptions.getResource
+                )
+                this._resources[key] = resource
+              } else {
+                resource.update(updatedOptions)
+              }
+              if (resource.auto) {
+                resource.fetch()
+              }
+            },
+            {
+              immediate: true,
+            }
+          )
+        } else {
+          let resource = createResource(options, this, mixinOptions.getResource)
+          this._resources[key] = resource
+          if (resource.auto) {
+            resource.fetch()
+          }
+        }
       }
     }
   },
   methods: {
-    $resource(key) {
-      return this._resources[key]
+    $refetchResource(cacheKey) {
+      let key = JSON.stringify(cacheKey)
+      if (cached[key]) {
+        let resource = cached[key]
+        resource.fetch()
+      }
     },
   },
   computed: {
@@ -95,10 +144,11 @@ let Resources = {
       return this._resources
     },
   },
-}
+})
 
 export default {
   install(app, options) {
-    app.mixin(Resources)
+    let resourceMixin = createMixin(options)
+    app.mixin(resourceMixin)
   },
 }

package/src/utils/tailwind.config.js

@@ -1,5 +1,3 @@
-const plugin = require('tailwindcss/plugin')
-
 module.exports = {
   theme: {
     extend: {
@@ -88,7 +86,7 @@ module.exports = {
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
-    plugin(function ({ addUtilities, theme }) {
+    require('tailwindcss/plugin')(function ({ addUtilities, theme }) {
       addUtilities({
         '.bg-gradient-blue': {
           'background-image': `linear-gradient(180deg,#2c9af1 0%, ${theme(