pimelon-ui 0.0.98

package/src/resources/resources.js

@@ -0,0 +1,215 @@
+import { reactive } from 'vue'
+import { debounce, request } from '../index'
+import { getLocal, saveLocal } from './local'
+import { getConfig } from '../utils/config'
+
+let cached = {}
+
+export function createResource(options, vm) {
+  let cacheKey = null
+  if (options.cache) {
+    cacheKey = getCacheKey(options.cache)
+    let cachedResource = cached[cacheKey]
+
+    if (cachedResource) {
+      if (cachedResource.auto) {
+        cachedResource.reload()
+      }
+      return cachedResource
+    }
+  }
+
+  if (typeof options == 'string') {
+    options = {
+      url: options,
+      auto: true,
+    }
+  }
+
+  let fetchFunction = options.debounce
+    ? debounce(fetch, options.debounce)
+    : fetch
+
+  let out = reactive({
+    method: options.method,
+    url: options.url,
+    data: options.initialData || null,
+    previousData: null,
+    loading: false,
+    fetched: false,
+    error: null,
+    promise: null,
+    auto: options.auto,
+    params: null,
+    fetch: fetchFunction,
+    reload: fetchFunction,
+    submit: fetchFunction,
+    reset,
+    update,
+    setData,
+  })
+
+  async function fetch(params, tempOptions = {}) {
+    let resourceFetcher =
+      options.resourceFetcher || getConfig('resourceFetcher') || request
+
+    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
+    out.error = null
+
+    if (options.onFetch) {
+      options.onFetch.call(vm, out.params)
+    }
+
+    let beforeSubmitFunctions = [options.beforeSubmit, tempOptions.beforeSubmit]
+    for (let fn of beforeSubmitFunctions) {
+      if (fn) {
+        fn.call(vm, out.params)
+      }
+    }
+
+    let validateFunction = tempOptions.validate || options.validate
+    let errorFunctions = [options.onError, tempOptions.onError]
+    let successFunctions = [options.onSuccess, tempOptions.onSuccess]
+    let dataFunctions = [options.onData, tempOptions.onData]
+
+    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)
+          return
+        }
+      } catch (error) {
+        handleError(error, errorFunctions)
+        return
+      }
+    }
+
+    try {
+      out.promise = resourceFetcher({
+        ...options,
+        params: params || options.params,
+      })
+      let data = await out.promise
+      saveLocal(cacheKey, data)
+      out.data = transform(data)
+      out.fetched = true
+      for (let fn of successFunctions) {
+        if (fn) {
+          fn.call(vm, data)
+        }
+      }
+      for (let fn of dataFunctions) {
+        if (fn) {
+          fn.call(vm, data)
+        }
+      }
+    } catch (error) {
+      handleError(error, errorFunctions)
+    }
+    out.loading = false
+    return out.data
+  }
+
+  function update({ method, url, params, auto }) {
+    if (method && method !== options.method) {
+      out.method = method
+    }
+    if (url && url !== options.url) {
+      out.url = url
+    }
+    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) {
+    out.loading = false
+    if (out.previousData) {
+      out.data = out.previousData
+    }
+    out.error = error
+    for (let fn of errorFunctions) {
+      if (fn) {
+        fn.call(vm, error)
+      }
+    }
+    throw 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 = transform(data)
+  }
+
+  function transform(data) {
+    if (options.transform) {
+      let returnValue = options.transform.call(vm, data)
+      if (returnValue != null) {
+        return returnValue
+      }
+    }
+    return data
+  }
+
+  if (cacheKey && !cached[cacheKey]) {
+    cached[cacheKey] = out
+    // offline
+    getLocal(cacheKey).then((data) => {
+      if ((out.loading || !out.fetched) && data) {
+        setData(data)
+        options.onData?.call(vm, data)
+      }
+    })
+  }
+
+  if (options.auto) {
+    out.fetch()
+  }
+
+  return out
+}
+
+export function getCacheKey(cacheKey) {
+  if (!cacheKey) {
+    return null
+  }
+  if (typeof cacheKey === 'string') {
+    cacheKey = [cacheKey]
+  }
+  return JSON.stringify(cacheKey)
+}
+
+export function getCachedResource(cacheKey) {
+  cacheKey = getCacheKey(cacheKey)
+  return cached[cacheKey] || null
+}

package/src/style.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .form-input,
+  .form-textarea,
+  .form-select {
+    @apply rounded-md border-0 bg-gray-100 py-1 text-base leading-5 placeholder-gray-700 focus:bg-gray-200 focus:shadow-none focus:ring-0;
+  }
+
+  .form-checkbox {
+    @apply rounded-md bg-gray-100 text-blue-500 focus:ring-0 focus-visible:ring-1;
+  }
+}

package/src/utils/call.js

@@ -0,0 +1,98 @@
+export default async function call(method, args, options = {}) {
+  if (!args) {
+    args = {}
+  }
+
+  let headers = Object.assign(
+    {
+      Accept: 'application/json',
+      'Content-Type': 'application/json; charset=utf-8',
+      'X-Melon-Site-Name': window.location.hostname,
+    },
+    options.headers || {}
+  )
+
+  if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
+    headers['X-Melon-CSRF-Token'] = window.csrf_token
+  }
+
+  let path = method.startsWith('/') ? method : `/api/method/${method}`
+  const res = await fetch(path, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(args),
+  })
+
+  if (res.ok) {
+    const data = await res.json()
+    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()
+    let error, exception
+    try {
+      error = JSON.parse(response)
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+    let errorParts = [
+      [method, error.exc_type, error._error_message].filter(Boolean).join(' '),
+    ]
+    if (error.exc) {
+      exception = error.exc
+      try {
+        exception = JSON.parse(exception)[0]
+        console.log(exception)
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+    }
+    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)
+      : []
+    e.messages = e.messages.concat(error.message)
+    e.messages = e.messages.map((m) => {
+      try {
+        return JSON.parse(m).message
+      } catch (error) {
+        return m
+      }
+    })
+    e.messages = e.messages.filter(Boolean)
+    if (!e.messages.length) {
+      e.messages = error._error_message
+        ? [error._error_message]
+        : ['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/config.js

@@ -0,0 +1,9 @@
+let config = {}
+
+export function setConfig(key, value) {
+  config[key] = value
+}
+
+export function getConfig(key) {
+  return config[key] || null
+}

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/file-to-base64.js

@@ -0,0 +1,9 @@
+export default (file) => {
+  return new Promise((resolve) => {
+    let reader = new FileReader()
+    reader.onloadend = () => {
+      resolve(reader.result)
+    }
+    reader.readAsDataURL(file)
+  })
+}

package/src/utils/markdown.js

@@ -0,0 +1,29 @@
+import showdown from 'showdown'
+
+export function markdownToHTML(text) {
+  const converter = new showdown.Converter()
+  return converter.makeHtml(text)
+}
+
+export function htmlToMarkdown(text) {
+  const converter = new showdown.Converter()
+  return converter.makeMarkdown(text)
+}
+
+export function detectMarkdown(text) {
+  const lines = text.split('\n')
+  const markdown = lines.filter(
+    (line) =>
+      line.startsWith('![') ||
+      line.startsWith('#') ||
+      line.startsWith('> ') ||
+      line.startsWith('*') ||
+      line.startsWith('- ') ||
+      line.startsWith('1. ') ||
+      line.startsWith('```') ||
+      line.startsWith('`') ||
+      line.startsWith('[') ||
+      line.startsWith('---')
+  )
+  return markdown.length > 0
+}

package/src/utils/melonRequest.js

@@ -0,0 +1,105 @@
+import { request } from './request'
+
+export function melonRequest(options) {
+  return request({
+    ...options,
+    transformRequest: (options = {}) => {
+      if (!options.url) {
+        throw new Error('[melonRequest] options.url is required')
+      }
+      let headers = Object.assign(
+        {
+          Accept: 'application/json',
+          'Content-Type': 'application/json; charset=utf-8',
+          'X-Melon-Site-Name': window.location.hostname,
+        },
+        options.headers || {}
+      )
+      if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
+        headers['X-Melon-CSRF-Token'] = window.csrf_token
+      }
+      if (!options.url.startsWith('/') && !options.url.startsWith('http')) {
+        options.url = '/api/method/' + options.url
+      }
+      return {
+        ...options,
+        method: options.method || 'POST',
+        headers,
+      }
+    },
+    transformResponse: async (response, options) => {
+      let url = options.url
+      if (response.ok) {
+        const data = await response.json()
+        if (data.docs || url === 'login') {
+          return data
+        }
+        if (data.exc) {
+          try {
+            console.groupCollapsed(url)
+            console.log(options)
+            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 errorResponse = await response.text()
+        let error, exception
+        try {
+          error = JSON.parse(errorResponse)
+          // eslint-disable-next-line no-empty
+        } catch (e) {}
+        let errorParts = [
+          [options.url, error.exc_type, error._error_message]
+            .filter(Boolean)
+            .join(' '),
+        ]
+        if (error.exc) {
+          exception = error.exc
+          try {
+            exception = JSON.parse(exception)[0]
+            console.log(exception)
+            // eslint-disable-next-line no-empty
+          } catch (e) {}
+        }
+        let e = new Error(errorParts.join('\n'))
+        e.exc_type = error.exc_type
+        e.exc = exception
+        e.status = errorResponse.status
+        e.messages = error._server_messages
+          ? JSON.parse(error._server_messages)
+          : []
+        e.messages = e.messages.concat(error.message)
+        e.messages = e.messages.map((m) => {
+          try {
+            return JSON.parse(m).message
+          } catch (error) {
+            return m
+          }
+        })
+        e.messages = e.messages.filter(Boolean)
+        if (!e.messages.length) {
+          e.messages = error._error_message
+            ? [error._error_message]
+            : ['Internal Server Error']
+        }
+
+        if (options.onError) {
+          options.onError({
+            response: errorResponse,
+            status: errorResponse.status,
+            error: e,
+          })
+        }
+
+        throw e
+      }
+    },
+  })
+}

package/src/utils/pageMeta.js

@@ -0,0 +1,52 @@
+import { watch } from 'vue'
+
+export default {
+  install(app) {
+    app.mixin(createMixin())
+  },
+}
+
+function createMixin() {
+  let faviconRef = document.querySelector('link[rel="icon"]')
+  let defaultFavIcon = faviconRef.href
+
+  return {
+    created() {
+      if (this.$options.pageMeta) {
+        watch(
+          () => {
+            try {
+              return this.$options.pageMeta.call(this)
+            } catch (error) {
+              let debugInfo = `${this.$options.name} (${
+                this.$options.__file || ''
+              })`
+              if (process.env.NODE_ENV === 'development') {
+                console.warn('Failed to parse pageMeta in', debugInfo)
+              }
+              return null
+            }
+          },
+          (pageMeta) => {
+            if (!pageMeta) return
+            if (pageMeta.title) {
+              document.title = pageMeta.title
+            }
+            if (pageMeta.emoji) {
+              let href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${pageMeta.emoji}</text></svg>`
+              faviconRef.href = href
+            } else if (pageMeta.icon) {
+              faviconRef.href = pageMeta.icon
+            } else {
+              faviconRef.href = defaultFavIcon
+            }
+          },
+          {
+            immediate: true,
+            deep: true,
+          }
+        )
+      }
+    },
+  }
+}

package/src/utils/plugin.js

@@ -0,0 +1,24 @@
+import resourcesPlugin from '../resources/plugin'
+import call from './call'
+import initSocket from './socketio'
+
+let defaultOptions = {
+  resources: true,
+  call: true,
+  socketio: true,
+}
+
+export default {
+  install(app, options = {}) {
+    options = Object.assign({}, defaultOptions, options)
+    options.resources && app.use(resourcesPlugin, options.resources)
+
+    if (options.call) {
+      let callFunction = typeof options.call == 'function' ? options.call : call
+      app.config.globalProperties.$call = callFunction
+    }
+    if (options.socketio) {
+      app.config.globalProperties.$socket = initSocket(options.socketio)
+    }
+  },
+}

package/src/utils/request.js

@@ -0,0 +1,49 @@
+export function request(_options) {
+  let options = Object.assign({}, _options)
+  if (!options.url) {
+    throw new Error('[request] options.url is required')
+  }
+  if (options.transformRequest) {
+    options = options.transformRequest(_options)
+  }
+  if (!options.responseType) {
+    options.responseType = 'json'
+  }
+  if (!options.method) {
+    options.method = 'GET'
+  }
+
+  let url = options.url
+  let body
+  if (options.params) {
+    if (options.method === 'GET') {
+      let params = new URLSearchParams()
+      for (let key in options.params) {
+        params.append(key, options.params[key])
+      }
+      url = options.url + '?' + params.toString()
+    } else {
+      body = JSON.stringify(options.params)
+    }
+  }
+
+  return fetch(url, {
+    method: options.method || 'GET',
+    headers: options.headers,
+    body,
+  }).then((response) => {
+    if (options.transformResponse) {
+      return options.transformResponse(response, options)
+    }
+    if (response.status >= 200 && response.status < 300) {
+      if (options.responseType === 'json') {
+        return response.json()
+      }
+      return response
+    } else {
+      let error = new Error(response.statusText)
+      error.response = response
+      throw error
+    }
+  })
+}

package/src/utils/socketio.js

@@ -0,0 +1,11 @@
+import { io } from 'socket.io-client'
+
+export default function initSocket(options = {}) {
+  let host = window.location.hostname
+  let socketio_port = options.port || 9000
+  let port = window.location.port ? `:${socketio_port}` : ''
+  let protocol = port ? 'http' : 'https'
+  let url = `${protocol}://${host}${port}`
+  let socket = io(url, { withCredentials: true })
+  return socket
+}