pimelon-ui 0.0.19

package/src/components/FeatherIcon.vue

@@ -0,0 +1,55 @@
+<script>
+import { h, mergeProps } from 'vue'
+import feather from 'feather-icons'
+
+const validIcons = Object.keys(feather.icons)
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+      validator(value) {
+        const valid = validIcons.includes(value)
+        if (!valid) {
+          console.warn(
+            `name property for feather-icon must be one of `,
+            validIcons
+          )
+        }
+        return valid
+      },
+    },
+    color: {
+      type: String,
+      default: null,
+    },
+    strokeWidth: {
+      type: Number,
+      default: 1.5,
+    },
+  },
+  render() {
+    let icon = feather.icons[this.name]
+    return h(
+      'svg',
+      mergeProps(
+        icon.attrs,
+        {
+          fill: 'none',
+          stroke: 'currentColor',
+          color: this.color,
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          'stroke-width': this.strokeWidth,
+          width: null,
+          height: null,
+          class: [icon.attrs.class],
+          innerHTML: icon.contents,
+        },
+        this.$attrs
+      )
+    )
+  },
+}
+</script>

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-Melon-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/GreenCheckIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z"
+      fill="#59B179"
+    />
+    <path
+      d="M9.333 17.227l1.333 1.333 2.667 2.667 5.333-5.333 2.667-2.667 1.333-1.333"
+      stroke="#fff"
+      stroke-width="2"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/Input.vue

@@ -0,0 +1,169 @@
+<template>
+  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]">
+    <span
+      v-if="label && type != 'checkbox'"
+      class="block mb-2 text-sm leading-4 text-gray-700"
+    >
+      {{ label }}
+    </span>
+    <input
+      v-if="
+        ['text', 'number', 'checkbox', 'email', 'password', 'date'].includes(
+          type
+        )
+      "
+      v-bind="inputAttributes"
+      class="placeholder-gray-500"
+      ref="input"
+      :class="[
+        {
+          'block w-full form-input': type != 'checkbox',
+          'form-checkbox': type == 'checkbox',
+        },
+        inputClass,
+      ]"
+      :type="type || 'text'"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :value="passedInputValue"
+    />
+    <textarea
+      v-if="type === 'textarea'"
+      v-bind="inputAttributes"
+      :class="['block w-full resize-none form-textarea', inputClass]"
+      ref="input"
+      :value="passedInputValue"
+      :disabled="disabled"
+      :rows="rows || 3"
+      @blur="$emit('blur', $event)"
+    ></textarea>
+    <select
+      v-bind="inputAttributes"
+      class="block w-full form-select"
+      ref="input"
+      v-if="type === 'select'"
+      :disabled="disabled"
+    >
+      <option
+        v-for="option in selectOptions"
+        :key="option.value"
+        :value="option.value"
+        :selected="passedInputValue === option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <span
+      v-if="label && type == 'checkbox'"
+      class="inline-block ml-2 text-base leading-4"
+    >
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<script>
+import { debounce } from 'pimelon-ui'
+
+export default {
+  name: 'Input',
+  inheritAttrs: false,
+  expose: ['getInputValue'],
+  props: {
+    label: {
+      type: String,
+    },
+    type: {
+      type: String,
+      validator(value) {
+        let isValid = [
+          'text',
+          'number',
+          'checkbox',
+          'textarea',
+          'select',
+          'email',
+          'password',
+          'date',
+        ].includes(value)
+        if (!isValid) {
+          console.warn(`Invalid value "${value}" for "type" prop for Input`)
+        }
+        return isValid
+      },
+    },
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array],
+    },
+    inputClass: {
+      type: [String, Array, Object],
+    },
+    debounce: {
+      type: Number,
+    },
+    options: {
+      type: Array,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    rows: {
+      type: Number,
+    },
+    placeholder: {
+      type: String,
+    },
+  },
+  emits: ['blur', 'input', 'change', 'update:modelValue'],
+  methods: {
+    focus() {
+      this.$refs.input.focus()
+    },
+    blur() {
+      this.$refs.input.blur()
+    },
+    getInputValue(e) {
+      let $input = e ? e.target : this.$refs.input
+      let value = $input.value
+      if (this.type == 'checkbox') {
+        value = $input.checked
+      }
+      return value
+    },
+  },
+  computed: {
+    passedInputValue() {
+      if ('value' in this.$attrs) {
+        return this.$attrs.value
+      }
+      return this.modelValue || null
+    },
+    inputAttributes() {
+      let onInput = (e) => {
+        this.$emit('input', this.getInputValue(e))
+      }
+      if (this.debounce) {
+        onInput = debounce(onInput, this.debounce)
+      }
+      return Object.assign({}, this.$attrs, {
+        onInput,
+        onChange: (e) => {
+          this.$emit('change', this.getInputValue(e))
+          this.$emit('update:modelValue', this.getInputValue(e))
+        },
+      })
+    },
+    selectOptions() {
+      return this.options.map((option) => {
+        if (typeof option === 'string') {
+          return {
+            label: option,
+            value: option,
+          }
+        }
+        return option
+      })
+    },
+  },
+}
+</script>

package/src/components/Link.vue

@@ -0,0 +1,28 @@
+<template>
+  <component
+    :is="isExternal ? 'a' : 'router-link'"
+    v-bind="attributes"
+    class="text-blue-500 cursor-pointer hover:text-blue-600"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  props: ['to'],
+  computed: {
+    attributes() {
+      return {
+        ...this.$attrs,
+        target: this.isExternal ? '_blank' : null,
+        to: !this.isExternal ? this.to : undefined,
+        href: this.isExternal ? this.to : undefined,
+      }
+    },
+    isExternal() {
+      return this.to.startsWith('http')
+    },
+  },
+}
+</script>

package/src/components/ListItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex items-center justify-between py-3">
+    <div>
+      <h3 class="text-base font-medium text-gray-900">
+        {{ title }}
+      </h3>
+      <div class="mt-1" v-if="secondaryText || $slots.subtitle">
+        <template v-if="secondaryText">
+          <span class="text-base text-gray-600" v-html="secondaryText" />
+        </template>
+        <slot v-if="$slots.subtitle" name="subtitle" />
+      </div>
+    </div>
+    <slot name="actions"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ListItem',
+  props: ['title', 'subtitle'],
+  computed: {
+    secondaryText() {
+      let text = this.subtitle || ''
+      return text.replace('\n', '<br>')
+    },
+  },
+}
+</script>

package/src/components/LoadingIndicator.vue

@@ -0,0 +1,12 @@
+<template>
+  <Spinner class="max-w-xs" />
+</template>
+<script>
+import Spinner from './Spinner.vue'
+export default {
+  name: 'LoadingIndicator',
+  components: {
+    Spinner,
+  },
+}
+</script>

package/src/components/LoadingText.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex items-center text-base text-gray-500">
+    <LoadingIndicator /> {{ text }}
+  </div>
+</template>
+<script>
+import LoadingIndicator from './LoadingIndicator.vue'
+
+export default {
+  name: 'Loading',
+  props: {
+    text: {
+      type: String,
+      default: 'Loading...',
+    },
+  },
+  components: {
+    LoadingIndicator,
+  },
+}
+</script>

package/src/components/Modal.vue

@@ -0,0 +1,67 @@
+<template>
+  <teleport to="#modals">
+    <div
+      v-show="show"
+      class="fixed inset-0 flex items-center justify-center px-4 py-4"
+    >
+      <div
+        v-show="show"
+        class="fixed inset-0 transition-opacity"
+        @click="onBackdropClick"
+      >
+        <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
+      </div>
+
+      <div
+        v-show="show"
+        class="w-full overflow-auto transition-all transform bg-white rounded-lg shadow-xl"
+        :class="!full ? 'sm:max-w-lg' : ''"
+        style="max-height: 95vh"
+      >
+        <slot></slot>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    dismissable: {
+      type: Boolean,
+      default: true,
+    },
+    full: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['change'],
+  created() {
+    if (!this.dismissable) return
+    this.escapeListener = (e) => {
+      if (e.key === 'Escape') {
+        this.hide()
+      }
+    }
+    document.addEventListener('keydown', this.escapeListener)
+  },
+  unmounted() {
+    document.removeEventListener('keydown', this.escapeListener)
+  },
+  methods: {
+    onBackdropClick() {
+      if (!this.dismissable) return
+      this.hide()
+    },
+    hide() {
+      this.$emit('change', false)
+    },
+  },
+}
+</script>