pimelon-ui 0.0.19

package/src/components/Toast.vue

@@ -0,0 +1,167 @@
+<template>
+  <teleport to="#melonui-toast-root">
+    <transition :name="position.includes('top') ? 'toast-top' : 'toast-bottom'">
+      <div
+        v-if="shown"
+        :style="style"
+        :class="[
+          'absolute transition duration-200 ease-out m-4 pointer-events-auto',
+          position.includes('center') ? '-translate-x-1/2' : '',
+        ]"
+      >
+        <div
+          class="px-2.5 py-2 bg-white border rounded-lg shadow-md min-w-[15rem] max-w-[40rem]"
+        >
+          <div class="flex items-start justify-between space-x-2">
+            <div
+              class="grid flex-shrink-0 w-6 h-6 rounded-full place-items-center"
+              :class="{
+                'bg-red-100': appearance == 'danger',
+              }"
+              v-if="icon"
+            >
+              <FeatherIcon
+                :name="icon"
+                class="w-4 h-4"
+                :class="{
+                  'text-red-600': appearance == 'danger',
+                }"
+              />
+            </div>
+            <div>
+              <slot>
+                <p class="text-base">
+                  {{ text }}
+                </p>
+              </slot>
+            </div>
+            <div>
+              <slot name="actions">
+                <Button appearance="minimal" icon="x" @click="shown = false" />
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+<script>
+import { FeatherIcon } from 'pimelon-ui'
+const positions = [
+  'top-right',
+  'top-center',
+  'top-left',
+  'bottom-right',
+  'bottom-center',
+  'bottom-left',
+]
+
+export default {
+  name: 'Toast',
+  props: {
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+    icon: {
+      type: String,
+    },
+    text: {
+      type: String,
+    },
+    appearance: {
+      type: String,
+    },
+    timeout: {
+      type: Number,
+      default: 5,
+    },
+  },
+  components: {
+    FeatherIcon,
+  },
+  created() {
+    if (!document.getElementById('melonui-toast-root')) {
+      const root = document.createElement('div')
+      root.id = 'melonui-toast-root'
+      root.style.position = 'fixed'
+      root.style.top = '16px'
+      root.style.right = '16px'
+      root.style.bottom = '16px'
+      root.style.left = '16px'
+      root.style.zIndex = '9999'
+      root.style.pointerEvents = 'none'
+      document.body.appendChild(root)
+    }
+  },
+  mounted() {
+    this.shown = true
+    setTimeout(() => {
+      this.shown = false
+    }, this.timeout * 1000)
+  },
+  data() {
+    return {
+      shown: false,
+    }
+  },
+  computed: {
+    style() {
+      let style = {}
+      if (this.position.includes('top')) {
+        style.top = 0
+      }
+      if (this.position.includes('bottom')) {
+        style.bottom = 0
+      }
+      if (this.position.includes('right')) {
+        style.right = 0
+      }
+      if (this.position.includes('left')) {
+        style.left = 0
+      }
+      if (this.position.includes('center')) {
+        style.left = '50%'
+        // style.transform = 'translateX(-50%)'
+      }
+      return style
+    },
+    transitionProps() {
+      let props = {
+        enterActiveClass: 'transition duration-200 ease-out',
+        enterFromClass: 'opacity-0',
+        enterToClass: 'translate-y-0 opacity-100',
+        leaveActiveClass: 'transition duration-100 ease-in',
+        leaveFromClass: 'scale-100 translate-y-0 opacity-100',
+        leaveToClass: 'scale-75 translate-y-4 opacity-0',
+      }
+      if (this.position.includes('top')) {
+        props.enterFromClass += ' -translate-y-12'
+      }
+      if (this.position.includes('bottom')) {
+        props.enterFromClass += ' translate-y-12'
+      }
+      return props
+    },
+  },
+}
+</script>
+<style>
+.toast-top-enter-active,
+.toast-bottom-enter-active {
+  transition: all 200ms ease-out;
+}
+.toast-top-leave-active,
+.toast-bottom-leave-active {
+  transition: all 100ms ease-in;
+}
+.toast-top-enter-from {
+  opacity: 0;
+  transform: translateY(0);
+}
+.toast-top-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

package/src/directives/onOutsideClick.js

@@ -0,0 +1,28 @@
+let instances = []
+
+function onDocumentClick(e, el, fn) {
+  let target = e.target
+  if (el !== target && !el.contains(target)) {
+    fn(e)
+  }
+}
+
+export default {
+  beforeMount(el, binding) {
+    el.dataset.outsideClickIndex = instances.length
+
+    const fn = binding.value
+    const click = function (e) {
+      onDocumentClick(e, el, fn)
+    }
+
+    document.addEventListener('click', click)
+    instances.push(click)
+  },
+  unmounted(el) {
+    const index = el.dataset.outsideClickIndex
+    const handler = instances[index]
+    document.addEventListener('click', handler)
+    instances.splice(index, 1)
+  },
+}

package/src/index.js

@@ -0,0 +1,33 @@
+// components
+export { default as Alert } from './components/Alert.vue'
+export { default as Avatar } from './components/Avatar.vue'
+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 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'
+export { default as ListItem } from './components/ListItem.vue'
+export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
+export { default as LoadingText } from './components/LoadingText.vue'
+export { default as Modal } from './components/Modal.vue'
+export { default as Popover } from './components/Popover.vue'
+export { default as Resource } from './components/Resource.vue'
+export { default as Spinner } from './components/Spinner.vue'
+export { default as SuccessMessage } from './components/SuccessMessage.vue'
+export { default as TextEditor } from './components/TextEditor'
+
+// directives
+export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'
+
+// utilities
+export { default as call, createCall } from './utils/call.js'
+export { default as debounce } from './utils/debounce.js'
+
+// plugin
+export { default as MelonUI } from './utils/plugin.js'

package/src/style.css

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

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/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

@@ -0,0 +1,24 @@
+import resources from './resources'
+import call from './call'
+import socket from './socketio'
+
+let defaultOptions = {
+  resources: true,
+  call: true,
+  socketio: true,
+}
+
+export default {
+  install(app, options = {}) {
+    options = Object.assign({}, defaultOptions, options)
+    options.resources && app.use(resources, 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 = socket
+    }
+  },
+}