pimelon-ui 0.0.98

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', '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,214 @@
+<template>
+  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]">
+    <span
+      v-if="label && type != 'checkbox'"
+      class="mb-2 block text-sm leading-4 text-gray-700"
+    >
+      {{ label }}
+    </span>
+    <div
+      class="relative flex"
+      :class="{ 'items-center': isNormalInput || type == 'select' }"
+    >
+      <FeatherIcon
+        v-if="iconLeft && type != 'checkbox'"
+        :name="iconLeft"
+        class="absolute mx-2 h-4 w-4 text-gray-600"
+        :class="{ 'mt-2': type == 'textarea' }"
+      />
+      <input
+        v-if="isNormalInput"
+        v-bind="inputAttributes"
+        class="border-gray-400 placeholder-gray-500"
+        ref="input"
+        :class="[
+          {
+            'form-input block w-full': type != 'checkbox',
+            'form-checkbox': type == 'checkbox',
+            'pl-8': iconLeft && type != 'checkbox',
+          },
+          inputClass,
+        ]"
+        :type="type || 'text'"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="passedInputValue"
+      />
+      <textarea
+        v-if="type === 'textarea'"
+        v-bind="inputAttributes"
+        :placeholder="placeholder"
+        class="placeholder-gray-500"
+        :class="[
+          'form-textarea block w-full resize-none',
+          inputClass,
+          {
+            'pl-8': iconLeft,
+          },
+        ]"
+        ref="input"
+        :value="passedInputValue"
+        :disabled="disabled"
+        :rows="rows"
+      ></textarea>
+      <select
+        v-if="type === 'select'"
+        v-bind="inputAttributes"
+        class="form-select block w-full"
+        :class="{ 'pl-8': iconLeft }"
+        ref="input"
+        :disabled="disabled"
+      >
+        <option
+          v-for="option in selectOptions"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled || false"
+          :selected="passedInputValue === option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+    <span
+      v-if="label && type == 'checkbox'"
+      class="ml-2 inline-block text-base leading-4"
+    >
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<script>
+import { debounce } from '../index'
+import FeatherIcon from './FeatherIcon.vue'
+
+export default {
+  name: 'Input',
+  inheritAttrs: false,
+  expose: ['getInputValue'],
+  components: { FeatherIcon },
+  props: {
+    label: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: 'text',
+      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,
+      default: 3,
+    },
+    placeholder: {
+      type: String,
+    },
+    iconLeft: {
+      type: String,
+    },
+  },
+  emits: ['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 attrs = {}
+      let onInput = (e) => {
+        this.$emit('input', this.getInputValue(e))
+      }
+      if (this.debounce) {
+        onInput = debounce(onInput, this.debounce)
+      }
+      if (this.type == 'checkbox') {
+        attrs.checked = this.passedInputValue
+      }
+      return Object.assign(attrs, 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
+        })
+        .filter(Boolean)
+    },
+    isNormalInput() {
+      return [
+        'text',
+        'number',
+        'checkbox',
+        'email',
+        'password',
+        'date',
+      ].includes(this.type)
+    },
+  },
+}
+</script>
+<style>
+.form-select {
+  background-image: url("data:image/svg+xml;utf8,<svg fill='none' width='8' xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 16 16'><path d='M4.5 3.636 6.136 2l1.637 1.636M4.5 8.364 6.136 10l1.637-1.636' stroke='%23333C44' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+}
+</style>

package/src/components/Link.vue

@@ -0,0 +1,28 @@
+<template>
+  <component
+    :is="isExternal ? 'a' : 'router-link'"
+    v-bind="attributes"
+    class="cursor-pointer text-blue-500 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,27 @@
+<template>
+  <svg
+    class="max-w-xs animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
+<script>
+export default {
+  name: 'LoadingIndicator',
+}
+</script>

package/src/components/LoadingText.vue

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