rails_design 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 2be348b3116b5dd3a69e1ffe60ca2ccebf355cfa8b97a71bedb65ca9fc9a53af
+  data.tar.gz: c522568def1eb5e290ab2236b318205bc303714f29a2243a67c7864e0a5450ed
+SHA512:
+  metadata.gz: f1087f76b800686f4fdc6d7b25f153a898e1c8b64ee7615ae7e5c6013df4c5d37ab2e6a2a3969171817df06301d166cc9c28204ee2e02971859b354ede0abcb3
+  data.tar.gz: e470d05f89c365b9ada4320c5f121b5411c780fafbbf955ef961976b8b271038d9b209663e77fb5f882b3567a8c315d65e7172e8cf2011731449aee9602715b1

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2020-Present Mingyuan Qin <mingyuan0715@foxmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,18 @@
+# RailsDesign
+
+[![测试](https://github.com/work-design/rails_design/actions/workflows/test.yml/badge.svg)](https://github.com/work-design/rails_design/actions/workflows/test.yml)
+[![Docker构建](https://github.com/work-design/rails_design/actions/workflows/cd.yml/badge.svg)](https://github.com/work-design/rails_design/actions/workflows/cd.yml)
+[![Gem](https://github.com/work-design/rails_design/actions/workflows/gempush.yml/badge.svg)](https://github.com/work-design/rails_design/actions/workflows/gempush.yml)
+
+## 约定
+
+* 可以 import：
+  * app/assets 下的文件
+* entry(rollup input)
+  * app/javascripts 下的文件进入
+
+## 开发
+* 采用[viter](https://github.com/vitejs/vite)
+
+* 不再支持 [webpacker](https://github.com/rails/webpacker)
+* 不再支持 [sprockets](https://github.com/rails/sprockets)

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/javascripts/default_form/datetime.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+  // data-action="datetime#default"
+  default(event) {
+    let el = event.currentTarget
+    let date = new Date(el.value)
+    let form = el.form
+
+    this.append(form, el.name.replace('(date)', '(1i)'), date.getFullYear())
+    this.append(form, el.name.replace('(date)', '(2i)'), date.getMonth() + 1)
+    this.append(form, el.name.replace('(date)', '(3i)'), date.getDate())
+  }
+
+  append(form, name, value) {
+    let input = form.elements.namedItem(name)
+    if (input) {
+      input.setAttribute('value', value)
+    } else {
+      input = document.createElement('input')
+      input.setAttribute('type', 'hidden')
+      input.setAttribute('name', name)
+      input.setAttribute('value', value)
+
+      this.element.appendChild(input)
+    }
+  }
+
+}
+

data/app/assets/javascripts/default_form/default_valid.js

@@ -0,0 +1,101 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+  defaultValid(input) {
+    let label
+    let locale = document.querySelector('html').lang
+    let word
+    const i18ns = {
+      zh: {
+        badInput: '{label}格式不正确',
+        customError: '{label}输入错误',
+        patternMismatch: '非法的{label}',
+        rangeOverflow: '{label}输入错误',
+        rangeUnderflow: '{label}输入错误',
+        stepMismatch: '{label}输入错误',
+        tooLong: '{label}太长了',
+        tooShort: '{label}太短了',
+        typeMismatch: '{label}输入错误',
+        valid: '{label}为非法值',
+        valueMissing: '请输入{label}'
+      },
+      en: {
+        badInput: 'Bad Input: {label}',
+        customError: 'Custom Error: {label}',
+        patternMismatch: 'Invalid Input: {label}',
+        rangeOverflow: 'Range Over Flow: {label}',
+        rangeUnderflow: 'Range Under Flow: {label}',
+        stepMismatch: 'Step Mismatch',
+        tooLong: '{label} is too long',
+        tooShort: '{label} is Too Short',
+        typeMismatch: '{label} Type Mismatch',
+        valid: '{label} is not valid',
+        valueMissing: 'Please enter: {label}'
+      }
+    }
+
+    for (let key in input.validity) {
+      if (input.validity[key]) {
+        word = i18ns[locale][key]
+      }
+    }
+
+    if (input.labels.length > 0) {
+      label = input.labels[0].innerText
+    } else {
+      label = input.dataset['label']
+    }
+    let text = word.replace('{label}', label)
+
+    input.classList.add('is-danger')
+    if (!input.parentNode.nextElementSibling) {
+      let help = document.createElement('p')
+      help.classList.add('help', 'is-danger')
+      help.innerText = text
+      input.parentNode.after(help)
+    }
+  }
+
+  defaultClear(input) {
+    if (input.validity.valid) {
+      input.classList.remove('is-danger')
+      let help = input.parentNode.nextElementSibling
+      if (help && help.classList.contains('help') && help.classList.contains('is-danger')) {
+        help.remove()
+      }
+    }
+  }
+
+  // data-action="blur->default_valid#check"
+  check(event) {
+    event.currentTarget.checkValidity()
+  }
+
+  clear(event) {
+    this.defaultClear(event.currentTarget)
+  }
+
+  // data-action="invalid->default_valid#notice"
+  notice(event) {
+    event.preventDefault()
+    this.defaultValid(event.currentTarget)
+  }
+
+  // form[method="get"]
+  // submit->xx
+  filter(event) {
+    event.preventDefault()
+    let url = new URL(location)
+    let form = new FormData(event.currentTarget)
+
+    for (let el of form.entries()) {
+      if (el[1].length > 0) {
+        url.searchParams.set(el[0], el[1])
+      }
+    }
+
+    Turbo.visit(url.href)
+  }
+
+}

data/app/assets/javascripts/default_form/field.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['node']
+  static values = {
+    index: Number
+  }
+
+  // data-action="click->field#add"
+  add(event) {
+    let el = this.element.cloneNode(true)
+    let label = el.querySelector('label')
+    if (label) {
+      label.remove()
+    }
+    let nextIndex = this.indexValue + Math.random()  // todo find an better implement
+    el.setAttribute('data-field-index-value', nextIndex)
+    el.querySelectorAll('input, select').forEach(input => {
+      input.name = input.name.replace(`[${this.indexValue}]`, `[${nextIndex}]`)
+      input.id = input.id.replace(`${this.indexValue}`, `${nextIndex}`)
+      input.value = null
+    })
+
+    if (this.element.parentNode) {
+      this.element.parentNode.insertBefore(el, this.element.nextSibling)
+    }
+  }
+
+  remove() {
+    this.element.remove()
+  }
+
+}

data/app/assets/javascripts/default_form/index.js

@@ -0,0 +1,9 @@
+import DefaultValidController from './default_valid'
+import DatetimeController from './datetime'
+import FieldController from './field'
+import WeuiFormController from './valid_weui'
+
+application.register('field', FieldController)
+application.register('datetime', DatetimeController)
+application.register('default_valid', DefaultValidController)
+application.register('weui_form', WeuiFormController)

data/app/assets/javascripts/default_form/valid_weui.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+  validForm() {
+    let node = this.parentNode.parentNode
+    node.classList.add('weui-cell_warn')
+    node.insertAdjacentHTML('beforeend', '<i class="weui-icon-warn"></i>')
+  }
+
+  clearValid () {
+    let node = this.parentNode
+    node.parentNode.classList.remove('weui-cell_warn')
+    node.nextElementSibling.remove()
+  }
+
+}

data/app/assets/javascripts/rails_design/attachment.js

@@ -0,0 +1,295 @@
+/*
+* Input Field with Attachment
+*/
+
+export default class InputAttachment {
+
+  /**
+   * Default configuration options
+   *
+   * @type {Object}
+   */
+  static defaults = {
+    /**
+     * URL where the file will be send
+     */
+    uploadUrl: 'upload_attachment.php',
+
+    /**
+     * Which method will be used to send the file to the upload URL
+     */
+    uploadMethod: 'POST',
+
+    /**
+     * Name in which the file will be placed
+     */
+    uploadFieldName: 'file',
+
+    uploadFileInput: '',
+
+    templateDiv: 'file_template',
+
+    /**
+     * Extension which will be used when a file extension could not
+     * be detected
+     */
+    defaultExtension: 'png',
+
+    /**
+     * JSON field which refers to the uploaded file URL
+     */
+    jsonFieldName: 'filename',
+
+    /**
+     * Allowed MIME types
+     */
+    allowedTypes: [
+      'image/jpeg',
+      'image/png',
+      'image/jpg',
+      'image/gif'
+    ],
+
+    /**
+     * Text which will be inserted when dropping or pasting a file.
+     * Acts as a placeholder which will be replaced when the file is done with uploading
+     */
+    progressText: '![Uploading file...]()',
+
+    /**
+     * When a file has successfully been uploaded the progressText
+     * will be replaced by the urlText, the {filename} tag will be replaced
+     * by the filename that has been returned by the server
+     */
+    urlText: "![file]({filename})",
+
+    /**
+     * Text which will be used when uploading has failed
+     */
+    errorText: 'Error uploading file',
+
+    /**
+     * Extra parameters which will be send when uploading a file
+     */
+    extraParams: {},
+
+    /**
+     * Extra headers which will be send when uploading a file
+     */
+    extraHeaders: {},
+
+    /**
+     * Before the file is send
+     */
+    beforeFileUpload() {
+      return true;
+    },
+
+    /**
+     * Triggers when a file is dropped or pasted
+     */
+    onFileReceived() {
+
+    },
+
+    /**
+     * Custom upload handler
+     *
+     * @return {Boolean} when false is returned it will prevent default upload behavior
+     */
+    onFileUploadResponse() {
+      return true;
+    },
+
+    /**
+     * Custom error handler. Runs after removing the placeholder text and before the alert().
+     * Return false from this function to prevent the alert dialog.
+     *
+     * @return {Boolean} when false is returned it will prevent default error behavior
+     */
+    onFileUploadError() {
+      return true;
+    },
+
+    /**
+     * When a file has successfully been uploaded
+     */
+    onFileUploaded() {}
+  };
+
+  constructor(options) {
+    this.settings = Object.assign(InputAttachment.defaults, options);
+    this.editor = this.settings['editor'];
+    this.filenameTag = '{filename}';
+    this.lastValue = null;
+  };
+
+  /**
+   * Uploads the blob
+   *
+   * @param  {Blob} file blob data received from event.dataTransfer object
+   * @return {XMLHttpRequest} request object which sends the file
+   */
+  uploadFile(file) {
+    let me = this
+    let formData = new FormData()
+    let xhr = new XMLHttpRequest()
+    let settings = this.settings
+    let extension = settings.defaultExtension
+
+    if (typeof settings.setupFormData === 'function') {
+      settings.setupFormData(formData, file);
+    }
+
+    // Attach the file. If coming from clipboard, add a default filename (only works in Chrome for now)
+    // http://stackoverflow.com/questions/6664967/how-to-give-a-blob-uploaded-as-formdata-a-file-name
+    if (file.name) {
+      var fileNameMatches = file.name.match(/\.(.+)$/);
+      if (fileNameMatches) {
+        extension = fileNameMatches[1];
+      }
+    }
+
+    var remoteFilename = 'image-' + Date.now() + '.' + extension;
+    if (typeof settings.remoteFilename === 'function') {
+      remoteFilename = settings.remoteFilename(file);
+    }
+
+    formData.append(settings.uploadFieldName, file, remoteFilename);
+
+    // Append the extra parameters to the form data
+    if (typeof settings.extraParams === 'object') {
+      for (var key in settings.extraParams) {
+        if (settings.extraParams.hasOwnProperty(key)) {
+          formData.append(key, settings.extraParams[key]);
+        }
+      }
+    }
+
+    xhr.open('POST', settings.uploadUrl);
+
+    // Add any available extra headers
+    if (typeof settings.extraHeaders === 'object') {
+        for (var header in settings.extraHeaders) {
+            if (settings.extraHeaders.hasOwnProperty(header)) {
+                xhr.setRequestHeader(header, settings.extraHeaders[header]);
+            }
+        }
+    }
+
+    xhr.onload = function() {
+      // If HTTP status is OK or Created
+      if (xhr.status === 200 || xhr.status === 201) {
+        me.onFileUploadResponse(xhr);
+      } else {
+        me.onFileUploadError(xhr);
+      }
+    };
+    if (settings.beforeFileUpload(xhr) !== false) {
+      xhr.send(formData);
+    }
+    return xhr;
+  };
+
+
+
+  /**
+   * Returns if the given file is allowed to handle
+   *
+   * @param {File} file clipboard data file
+   */
+  isFileAllowed(file) {
+    if (file.kind === 'string') { return false; }
+    if (this.settings.allowedTypes.indexOf('*') === 0){
+      return true;
+    } else {
+      return this.settings.allowedTypes.indexOf(file.type) >= 0;
+    }
+  };
+
+  /**
+   * Handles upload response
+   *
+   * @param  {XMLHttpRequest} xhr
+   * @return {void}
+   */
+  onFileUploadResponse(xhr) {
+    if (this.settings.onFileUploadResponse.call(this, xhr) !== false) {
+      var result = JSON.parse(xhr.responseText),
+        filename = result[this.settings.jsonFieldName];
+
+      if (result && filename) {
+        var newValue;
+        if (typeof this.settings.urlText === 'function') {
+          newValue = this.settings.urlText.call(this, filename, result);
+        } else {
+          newValue = this.settings.urlText.replace(this.filenameTag, filename);
+        }
+        this.editor.value.replace(this.lastValue, newValue);
+        this.settings.onFileUploaded.call(this, filename, result);
+      }
+    }
+  };
+
+
+  /**
+   * Called when a file has failed to upload
+   *
+   * @param  {XMLHttpRequest} xhr
+   * @return {void}
+   */
+  onFileUploadError(xhr) {
+    if (this.settings.onFileUploadError.call(this, xhr) !== false) {
+      this.editor.value.replace(this.lastValue, '');
+    }
+  };
+
+  /**
+   * Called when a file has been inserted, either by drop or paste
+   *
+   * @param  {File} file
+   * @return {void}
+   */
+  onFileInserted(file) {
+    if (this.settings.onFileReceived.call(this, file) !== false) {
+      this.lastValue = this.settings.progressText;
+
+      var scrollPos = el.scrollTop;
+      el.value = this.lastValue;
+      el.scrollTop = scrollPos;
+    }
+  };
+
+
+  onFileInputChange(e) {
+    var result = false;
+    for (var i = 0; i < e.target.files.length; i++) {
+      var file = e.target.files[i];
+      if (this.isFileAllowed(file)) {
+        result = true;
+        this.uploadFile(file);
+      }
+    }
+
+    return result;
+  };
+
+  imagePreview(e, previewDiv){
+    var result = false;
+
+    for (var i = 0; i < e.target.files.length; i++) {
+      var file = e.target.files[i];
+      if (this.isFileAllowed(file)) {
+        result = true;
+        this.previewFile(file, previewDiv);
+      }
+    }
+
+    return result;
+  };
+
+  onFileInputClick(e) {
+    console.log('fileInputClick', e)
+  };
+
+}