pimelon-ui 0.0.19

package/src/utils/resources.js

@@ -0,0 +1,510 @@
+import { call, debounce } from 'pimelon-ui'
+import { reactive, watch } from 'vue'
+
+let cached = {}
+let documentCache = reactive({})
+let listCache = reactive({})
+
+export function createResource(options, vm, getResource) {
+  let cacheKey = null
+  if (options.cache) {
+    cacheKey = getCacheKey(options.cache)
+    if (cached[cacheKey]) {
+      return cached[cacheKey]
+    }
+  }
+
+  if (typeof options == 'string') {
+    options = {
+      method: options,
+      auto: true,
+    }
+  }
+
+  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: fetchFunction,
+    reload: fetchFunction,
+    submit: fetchFunction,
+    reset,
+    update,
+    setData,
+  })
+
+  async function fetch(params, tempOptions = {}) {
+    if (params instanceof Event) {
+      params = null
+    }
+    params = params || out.params
+    if (options.makeParams) {
+      params = options.makeParams.call(vm, params)
+    }
+    out.params = params
+    out.previousData = out.data ? JSON.parse(JSON.stringify(out.data)) : null
+    out.loading = true
+
+    if (options.onFetch) {
+      options.onFetch.call(vm, out.params)
+    }
+
+    let validateFunction = tempOptions.validate || options.validate
+    let errorFunctions = [options.onError, tempOptions.onError]
+    let successFunctions = [options.onSuccess, tempOptions.onSuccess]
+
+    if (validateFunction) {
+      let invalidMessage
+      try {
+        invalidMessage = await validateFunction.call(vm, out.params)
+        if (invalidMessage && typeof invalidMessage == 'string') {
+          let error = new Error(invalidMessage)
+          handleError(error, errorFunctions)
+          out.loading = false
+          return
+        }
+      } catch (error) {
+        handleError(error, errorFunctions)
+        out.loading = false
+        return
+      }
+    }
+
+    try {
+      let data = await resourceFetcher(options.method, params || options.params)
+      out.data = data
+      out.fetched = true
+      for (let fn of successFunctions) {
+        if (fn) {
+          fn.call(vm, data)
+        }
+      }
+    } catch (error) {
+      handleError(error, errorFunctions)
+    }
+    out.loading = false
+  }
+
+  function update({ method, params, auto }) {
+    if (method && method !== options.method) {
+      out.method = method
+    }
+    if (params && params !== options.params) {
+      out.params = params
+    }
+    if (auto !== undefined && auto !== out.auto) {
+      out.auto = auto
+    }
+  }
+
+  function reset() {
+    out.data = options.initialData || null
+    out.previousData = null
+    out.loading = false
+    out.fetched = false
+    out.error = null
+    out.params = null
+    out.auto = options.auto
+  }
+
+  function handleError(error, errorFunctions) {
+    console.error(error)
+    if (out.previousData) {
+      out.data = out.previousData
+    }
+    out.error = error
+    for (let fn of errorFunctions) {
+      if (fn) {
+        fn.call(vm, error)
+      }
+    }
+  }
+
+  // usage:
+  // setData(newData) or
+  // setData(data => data.filter(d => !d.deleted))
+  function setData(data) {
+    if (typeof data === 'function') {
+      data = data.call(vm, out.data)
+    }
+    out.data = data
+  }
+
+  if (cacheKey && !cached[cacheKey]) {
+    cached[cacheKey] = out
+  }
+
+  return out
+}
+
+export function createDocumentResource(options, vm) {
+  if (!(options.doctype && options.name)) return
+
+  let cacheKey = getCacheKey([options.doctype, options.name])
+  if (documentCache[cacheKey]) {
+    return documentCache[cacheKey]
+  }
+
+  let setValueOptions = {
+    method: 'melon.client.set_value',
+    makeParams(values) {
+      return {
+        doctype: out.doctype,
+        name: out.name,
+        fieldname: values,
+      }
+    },
+    onSuccess(data) {
+      out.doc = transform(data)
+    },
+  }
+
+  let out = reactive({
+    doctype: options.doctype,
+    name: options.name,
+    doc: null,
+    get: createResource(
+      {
+        method: 'melon.client.get',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess(data) {
+          out.doc = transform(data)
+        },
+      },
+      vm
+    ),
+    setValue: createResource(setValueOptions, vm),
+    setValueDebounced: createResource(
+      {
+        ...setValueOptions,
+        debounce: options.debounce || 500,
+      },
+      vm
+    ),
+    delete: createResource(
+      {
+        method: 'melon.client.delete',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess() {
+          out.doc = null
+        },
+      },
+      vm
+    ),
+    update,
+    reload,
+  })
+
+  for (let method in options.whitelistedMethods) {
+    let methodName = options.whitelistedMethods[method]
+    out[method] = createResource(
+      {
+        method: 'run_doc_method',
+        makeParams(values) {
+          return {
+            dt: out.doctype,
+            dn: out.name,
+            method: methodName,
+            args: JSON.stringify(values),
+          }
+        },
+        onSuccess(data) {
+          if (data.docs) {
+            for (let doc of data.docs) {
+              if (doc.doctype === out.doctype && doc.name === out.name) {
+                out.doc = transform(doc)
+                break
+              }
+            }
+          }
+        },
+      },
+      vm
+    )
+  }
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.name = updatedOptions.name
+    out.get.fetch()
+  }
+
+  function reload() {
+    return out.get.fetch()
+  }
+
+  function transform(doc) {
+    if (options.transform) {
+      let returnValue = options.transform.call(vm, doc)
+      if (typeof returnValue === 'object') {
+        return returnValue
+      }
+    }
+    return doc
+  }
+
+  // fetch the doc
+  out.get.fetch()
+  // cache
+  documentCache[cacheKey] = out
+  return out
+}
+
+function createListResource(options, vm, getResource) {
+  if (!options.doctype) return
+
+  let cacheKey = getCacheKey(options.cache)
+  if (listCache[cacheKey]) {
+    return listCache[cacheKey]
+  }
+
+  let out = reactive({
+    doctype: options.doctype,
+    fields: options.fields,
+    filters: options.filters,
+    order_by: options.order_by,
+    start: options.start,
+    limit: options.limit,
+    data: null,
+    list: createResource(
+      {
+        method: 'melon.client.get_list',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            fields: out.fields,
+            filters: out.filters,
+            order_by: out.order_by,
+            limit_start: out.start,
+            limit_page_length: out.limit,
+          }
+        },
+        onSuccess(data) {
+          out.data = transform(data)
+          options.onSuccess && options.onSuccess.call(vm, out.data)
+        },
+      },
+      vm
+    ),
+    insert: createResource(
+      {
+        method: 'melon.client.insert',
+        makeParams(values) {
+          return {
+            doc: {
+              doctype: out.doctype,
+              ...values,
+            },
+          }
+        },
+        onSuccess() {
+          out.list.fetch()
+        },
+      },
+      vm
+    ),
+    setValue: createResource(
+      {
+        method: 'melon.client.set_value',
+        makeParams(options) {
+          let { name, ...values } = options
+          return {
+            doctype: out.doctype,
+            name: name,
+            fieldname: values,
+          }
+        },
+        onSuccess() {
+          out.list.fetch()
+        },
+      },
+      vm
+    ),
+    delete: createResource(
+      {
+        method: 'melon.client.delete',
+        makeParams(name) {
+          return {
+            doctype: out.doctype,
+            name,
+          }
+        },
+        onSuccess() {
+          out.list.fetch()
+        },
+      },
+      vm
+    ),
+    update,
+    reload,
+    setData,
+  })
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.fields = updatedOptions.fields
+    out.filters = updatedOptions.filters
+    out.order_by = updatedOptions.order_by
+    out.start = updatedOptions.start
+    out.limit = updatedOptions.limit
+    out.list.fetch()
+  }
+
+  function transform(data) {
+    if (options.transform) {
+      let returnValue = options.transform.call(vm, data)
+      if (typeof returnValue != null) {
+        return returnValue
+      }
+    }
+    return data
+  }
+
+  function reload() {
+    return out.list.fetch()
+  }
+
+  function setData(data) {
+    if (typeof data === 'function') {
+      data = data.call(vm, out.data)
+    }
+    out.data = data
+  }
+
+  // fetch list
+  out.list.fetch()
+
+  // cache
+  listCache[cacheKey] = out
+
+  return out
+}
+
+function createResourceForOptions(options, vm, getResource) {
+  if (options.type === 'document') {
+    return createDocumentResource(options, vm, getResource)
+  }
+  if (options.type === 'list') {
+    return createListResource(options, vm, getResource)
+  }
+  return createResource(options, vm, getResource)
+}
+
+function getCacheKey(cacheKey) {
+  if (typeof cacheKey === 'string') {
+    cacheKey = [cacheKey]
+  }
+  return JSON.stringify(cacheKey)
+}
+
+let createMixin = (mixinOptions) => ({
+  created() {
+    if (this.$options.resources) {
+      this._resources = reactive({})
+      for (let key in this.$options.resources) {
+        let options = this.$options.resources[key]
+
+        if (typeof options == 'function') {
+          watch(
+            () => {
+              try {
+                return options.call(this)
+              } catch (error) {
+                console.warn('Failed to get resource options\n\n', error)
+                return null
+              }
+            },
+            (updatedOptions, oldVal) => {
+              if (!updatedOptions) {
+                return
+              }
+
+              let changed =
+                !oldVal ||
+                JSON.stringify(updatedOptions) !== JSON.stringify(oldVal)
+
+              if (!changed) return
+
+              let resource = this._resources[key]
+              if (!resource) {
+                resource = createResourceForOptions(
+                  updatedOptions,
+                  this,
+                  mixinOptions.getResource
+                )
+                this._resources[key] = resource
+              } else {
+                resource.update(updatedOptions)
+              }
+              if (resource && resource.auto) {
+                resource.fetch()
+              }
+            },
+            {
+              immediate: true,
+            }
+          )
+        } else {
+          let resource = createResourceForOptions(
+            options,
+            this,
+            mixinOptions.getResource
+          )
+          this._resources[key] = resource
+          if (resource.auto) {
+            resource.fetch()
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    $getResource(cache) {
+      let cacheKey = getCacheKey(cache)
+      return cached[cacheKey] || null
+    },
+    $getDocumentResource(doctype, name) {
+      let cacheKey = getCacheKey([doctype, name])
+      return documentCache[cacheKey] || null
+    },
+    $getListResource(cache) {
+      let cacheKey = getCacheKey(cache)
+      return listCache[cacheKey] || null
+    },
+    $refetchResource(cache) {
+      let resource = this.$getResource(cache)
+      resource && resource.fetch()
+    },
+  },
+  computed: {
+    $resources() {
+      return this._resources
+    },
+  },
+})
+
+export default {
+  install(app, options) {
+    let resourceMixin = createMixin(options)
+    app.mixin(resourceMixin)
+  },
+}

package/src/utils/socketio.js

@@ -0,0 +1,9 @@
+import io from 'socket.io-client/dist/socket.io.slim'
+
+let host = window.location.hostname
+let port = window.location.port ? ':9000' : ''
+let protocol = port ? 'http' : 'https'
+let url = `${protocol}://${host}${port}`
+let socket = io(url)
+
+export default socket

package/src/utils/tailwind.config.js

@@ -0,0 +1,110 @@
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+      fontSize: {
+        xs: '11px',
+        sm: '12px',
+        base: '13px',
+        lg: '14px',
+        xl: '16px',
+        '2xl': '18px',
+        '3xl': '20px',
+        '4xl': '22px',
+        '5xl': '24px',
+        '6xl': '26px',
+        '7xl': '28px',
+      },
+      width: {
+        112: '28rem',
+        wizard: '650px',
+      },
+      minWidth: {
+        40: '10rem',
+      },
+      maxHeight: {
+        52: '13rem',
+      },
+      borderColor: (theme) => ({
+        DEFAULT: theme('colors.gray.200'),
+      }),
+      colors: {
+        brand: '#2490EF',
+        'brand-100': '#f4f9ff',
+        black: '#112B42',
+        blue: {
+          50: '#F0F8FE',
+          100: '#D3E9FC',
+          200: '#A7D3F9',
+          300: '#7CBCF5',
+          400: '#50A6F2',
+          500: '#2490EF',
+          600: '#1579D0',
+          700: '#1366AE',
+          800: '#154875',
+          900: '#1A4469',
+        },
+        gray: {
+          50: '#F9FAFA',
+          100: '#F4F5F6',
+          200: '#EBEEF0',
+          300: '#DCE0E3',
+          400: '#C0C6CC',
+          500: '#98A1A9',
+          600: '#687178',
+          700: '#505A62',
+          800: '#333C44',
+          900: '#1F272E',
+        },
+        purple: {
+          900: '#44427B',
+          800: '#5552BC',
+          700: '#6461D6',
+          600: '#807DDE',
+          500: '#928EF5',
+          400: '#B7B6FC',
+          300: '#D6D5F6',
+          200: '#E8E8F7',
+          100: '#F2F2FD',
+          50: '#F8F8FC',
+        },
+      },
+    },
+    container: {
+      padding: {
+        xl: '5rem',
+      },
+    },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('tailwindcss/plugin')(function ({ addUtilities, theme }) {
+      addUtilities({
+        '.bg-gradient-blue': {
+          'background-image': `linear-gradient(180deg,#2c9af1 0%, ${theme(
+            'colors.blue.500'
+          )} 100%)`,
+        },
+      })
+      addUtilities(
+        {
+          '.bg-gradient-none': {
+            'background-image': 'none',
+          },
+        },
+        {
+          variants: ['focus', 'hover'],
+        }
+      )
+    }),
+  ],
+}

package/src/utils/vite-dev-server.js

@@ -0,0 +1,14 @@
+module.exports = {
+  getProxyOptions({ port }) {
+    return {
+      '^/(app|api|assets|files)': {
+        target: `http://localhost:${port}`,
+        ws: true,
+        router: function (req) {
+          const site_name = req.headers.host.split(':')[0]
+          return `http://${site_name}:${port}`
+        },
+      },
+    }
+  },
+}