expressa 2.0.20 → 2.0.22

package/modules/admin/src/components/JSONEditor.vue

@@ -1,180 +1,206 @@
-<template>
-  <div>
-    <div class="jsoneditor-vue" />
-  </div>
-</template>
-
-<script>
-const { JSONEditor } = require('@json-editor/json-editor/dist/jsoneditor')
-import 'json-schema-editor'
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: () => {}
-    },
-    schema: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      editor: null,
-      error: false,
-      json: this.value,
-      internalChange: false
-    }
-  },
-  watch: {
-    /* value: {
-      handler: 'update'
-    } */
-  },
-  mounted() {
-    this.update()
-  },
-  methods: {
-    update() {
-      var options = {
-        schema: this.schema,
-        startval: this.value,
-        theme: 'bootstrap4',
-        iconlib: 'materialicons',
-        required_by_default: true,
-      }
-      if (this.editor) {
-        this.editor.destroy()
-      }
-      this.editor = new JSONEditor(this.$el.querySelector('.jsoneditor-vue'), options)
-      let first = true
-      this.editor.on('change', () => {
-        if (first) {
-          first = false
-          return
-        }
-        this.$emit('input', this.editor.getValue())
-      })
-
-      const makeEditJsonTextAreaExpandable = () => {
-        const textarea = document.querySelector('.je-modal .je-edit-json--textarea')
-        textarea.classList.remove('je-edit-json--textarea') // INFO: Had to remove this class to remove height and width property
-        textarea.classList.add('expandable-textarea')
-      }
-
-      makeEditJsonTextAreaExpandable()
-    },
-    onSave() {
-      this.$emit('json-save', this.json)
-    }
-  }
-}
-
-if (JSONEditor) {
-  JSONEditor.defaults.resolvers.unshift(function(schema) {
-    if (schema.type === 'object' && schema.format === 'schema') {
-      return 'schema'
-    }
-
-    // If no valid editor is returned, the next resolver function will be used
-  })
-
-  JSONEditor.defaults.editors.schema = class schema extends JSONEditor.AbstractEditor {
-    setValue(value, initial) {
-      this.value = value
-      this.schemaeditor.setValue(value)
-      this.onChange()
-    }
-
-    getValue() {
-      if (typeof this.schemaeditor !== 'undefined') { return this.schemaeditor.getValue() } else { return {} }
-    }
-
-    register() {
-      super.register()
-      if (!this.input) return
-      this.input.setAttribute('name', this.formname)
-    }
-    unregister() {
-      super.unregister()
-      if (!this.input) return
-      this.input.removeAttribute('name')
-    }
-    getNumColumns() {
-      return 12
-    }
-    build() {
-      var self = this
-      if (!this.options.compact) {
-        this.label = this.header = this.theme.getFormInputLabel(this.getTitle())
-      }
-      if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
-      if (this.options.compact) this.container.className += ' compact'
-
-      this.input = document.createElement('div')
-      this.control = this.theme.getFormControl(this.label, this.input, this.description)
-
-      if (this.schema.readOnly || this.schema.readonly) {
-        this.always_disabled = true
-        this.input.disabled = true
-      }
-
-      this.container.appendChild(this.control)
-
-      this.schemaeditor = new window.JSONSchemaEditor(this.input, {
-        startval: {}
-      })
-      this.schemaeditor.on('change', function() {
-        self.onChange(true)
-      })
-    }
-    enable() {
-      if (!this.always_disabled) {
-        this.input.disabled = false
-      }
-
-      super.enable()
-    }
-    disable() {
-      this.input.disabled = true
-      super.disable()
-    }
-    destroy() {
-      if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label)
-      if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description)
-      if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
-      super.destroy()
-    }
-  }
-}
-
-</script>
-
-<style>
-  .expandable-textarea {
-    display: block;
-    min-height: 250px;
-    min-width: 250px;
-    resize: both !important;
-  }
-  .jsoneditor-vue img {
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 5px;
-    width: 150px;
-  }
-  .jsoneditor-vue img:hover {
-    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
-  }
-  .jsoneditor-vue button.btn {
-    font-size: 14px !important;
-    padding: 3px;
-  }
-  .jsoneditor-vue .form-control-label, label {
-    font-weight: bold;
-  }
-  .jsoneditor-vue input[type="checkbox"] {
-    margin-right: 5px;
-    margin-top: 3px;
-  }
-</style>
+<template>
+  <div>
+    <div class="jsoneditor-vue" />
+  </div>
+</template>
+
+<script>
+const { JSONEditor } = require('@json-editor/json-editor/dist/jsoneditor')
+import 'json-schema-editor'
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    },
+    schema: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      error: false,
+      json: this.value,
+      internalChange: false
+    }
+  },
+  watch: {
+    /* value: {
+      handler: 'update'
+    } */
+  },
+  mounted() {
+    this.update()
+  },
+  methods: {
+    update() {
+      var options = {
+        schema: this.schema,
+        startval: this.value,
+        theme: 'bootstrap4',
+        iconlib: 'materialicons',
+        required_by_default: true,
+      }
+      if (this.editor) {
+        this.editor.destroy()
+      }
+      this.editor = new JSONEditor(this.$el.querySelector('.jsoneditor-vue'), options)
+      let first = true
+      this.editor.on('change', () => {
+        if (first) {
+          first = false
+          return
+        }
+        this.$emit('input', this.editor.getValue())
+      })
+    },
+    onSave() {
+      this.$emit('json-save', this.json)
+    }
+  }
+}
+
+if (JSONEditor) {
+  JSONEditor.defaults.resolvers.unshift(function(schema) {
+    if (schema.type === 'object' && schema.format === 'schema') {
+      return 'schema'
+    }
+
+    // If no valid editor is returned, the next resolver function will be used
+  })
+
+  JSONEditor.defaults.editors.schema = class schema extends JSONEditor.AbstractEditor {
+    setValue(value, initial) {
+      this.value = value
+      this.schemaeditor.setValue(value)
+      this.onChange()
+    }
+
+    getValue() {
+      if (typeof this.schemaeditor !== 'undefined') { return this.schemaeditor.getValue() } else { return {} }
+    }
+
+    register() {
+      super.register()
+      if (!this.input) return
+      this.input.setAttribute('name', this.formname)
+    }
+    unregister() {
+      super.unregister()
+      if (!this.input) return
+      this.input.removeAttribute('name')
+    }
+    getNumColumns() {
+      return 12
+    }
+    build() {
+      var self = this
+      if (!this.options.compact) {
+        this.label = this.header = this.theme.getFormInputLabel(this.getTitle())
+      }
+      if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
+      if (this.options.compact) this.container.className += ' compact'
+
+      this.input = document.createElement('div')
+      this.control = this.theme.getFormControl(this.label, this.input, this.description)
+
+      if (this.schema.readOnly || this.schema.readonly) {
+        this.always_disabled = true
+        this.input.disabled = true
+      }
+
+      this.container.appendChild(this.control)
+
+      this.schemaeditor = new window.JSONSchemaEditor(this.input, {
+        startval: {}
+      })
+      this.schemaeditor.on('change', function() {
+        self.onChange(true)
+      })
+    }
+    enable() {
+      if (!this.always_disabled) {
+        this.input.disabled = false
+      }
+
+      super.enable()
+    }
+    disable() {
+      this.input.disabled = true
+      super.disable()
+    }
+    destroy() {
+      if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label)
+      if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description)
+      if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+      super.destroy()
+    }
+  }
+}
+
+</script>
+
+<style>
+  /* Override JSONEditor's textarea styles to make it expandable */
+  /* Use high specificity to override inline styles */
+  .jsoneditor-vue .je-modal textarea.form-control.je-edit-json--textarea[id] {
+    resize: both !important;
+    min-height: 250px !important;
+    min-width: 250px !important;
+    /* Add padding to create a larger hit area for the resize handle */
+    padding-right: 20px !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Make the resize handle easier to grab with larger hit area and clear visibility */
+  .jsoneditor-vue .je-modal textarea.form-control.je-edit-json--textarea[id]::-webkit-resizer {
+    width: 20px !important;
+    height: 20px !important;
+    /* Position it in the corner of the larger hit area */
+    margin-right: -20px !important;
+    margin-bottom: -20px !important;
+    /* Use border to create visible resize handle */
+    border-right: 2px solid #999 !important;
+    border-bottom: 2px solid #999 !important;
+    background: transparent !important;
+  }
+
+  /* Alternative approach - add a visible corner indicator using ::after pseudo-element */
+  .jsoneditor-vue .je-modal textarea.form-control.je-edit-json--textarea[id] {
+    position: relative !important;
+  }
+
+  .jsoneditor-vue .je-modal textarea.form-control.je-edit-json--textarea[id]::after {
+    content: "⋰⋰⋰" !important;
+    position: absolute !important;
+    bottom: 2px !important;
+    right: 2px !important;
+    font-size: 8px !important;
+    line-height: 6px !important;
+    color: #999 !important;
+    pointer-events: none !important;
+    transform: rotate(45deg) !important;
+  }
+  .jsoneditor-vue img {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 5px;
+    width: 150px;
+  }
+  .jsoneditor-vue img:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
+  .jsoneditor-vue button.btn {
+    font-size: 14px !important;
+    padding: 3px;
+  }
+  .jsoneditor-vue .form-control-label, label {
+    font-weight: bold;
+  }
+  .jsoneditor-vue input[type="checkbox"] {
+    margin-right: 5px;
+    margin-top: 3px;
+  }
+</style>

package/modules/admin/src/components/SvgIcon/index.vue

@@ -1,43 +1,43 @@
-<template>
-  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

package/modules/admin/src/icons/index.js

@@ -1,9 +1,9 @@
-import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon' // svg组件
-
-// register globally
-Vue.component('svg-icon', SvgIcon)
-
-const requireAll = requireContext => requireContext.keys().map(requireContext)
-const req = require.context('./svg', false, /\.svg$/)
-requireAll(req)
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon' // svg组件
+
+// eslint-disable-next-line vue/component-definition-name-casing
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

package/modules/admin/src/icons/svgo.yml

@@ -1,22 +1,22 @@
-# replace default config
-
-# multipass: true
-# full: true
-
-plugins:
-
-  # - name
-  #
-  # or:
-  # - name: false
-  # - name: true
-  #
-  # or:
-  # - name:
-  #     param1: 1
-  #     param2: 2
-
-- removeAttrs:
-    attrs:
-      - 'fill'
-      - 'fill-rule'
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'

package/modules/admin/src/main.js

@@ -1,42 +1,42 @@
-import Vue from 'vue'
-
-import 'normalize.css/normalize.css' // A modern alternative to CSS resets
-
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import 'element-ui/lib/theme-chalk/icon.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
-
-import '@/styles/index.scss' // global css
-
-import App from './App'
-import router from './router'
-import store from './store'
-
-import 'bootstrap'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap/dist/css/bootstrap-grid.min.css'
-import 'vue-material-design-icons/styles.css'
-
-import '@/icons' // icon
-import '@/permission' // permission control
-
-import { VuePlugin } from 'vuera'
-
-import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd'
-import { uniDatabase, uniHome, uniUsersAlt, uniShieldCheck, uniBookOpen, uniDiary, uniFlask, uniCog, uniPlus, uniLink } from 'vue-unicons/dist/icons'
-
-Unicon.add([uniDatabase, uniHome, uniUsersAlt, uniShieldCheck, uniBookOpen, uniDiary, uniFlask, uniCog, uniPlus, uniLink])
-Vue.use(Unicon)
-
-Vue.use(ElementUI, { locale })
-Vue.use(VuePlugin)
-
-Vue.config.productionTip = false
-
-new Vue({
-  el: '#app',
-  router,
-  store,
-  render: h => h(App)
-})
+import Vue from 'vue'
+
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import 'element-ui/lib/theme-chalk/icon.css'
+import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+
+import '@/styles/index.scss' // global css
+
+import App from './App'
+import router from './router'
+import store from './store'
+
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap/dist/css/bootstrap-grid.min.css'
+import 'vue-material-design-icons/styles.css'
+
+import '@/icons' // icon
+import '@/permission' // permission control
+
+import { VuePlugin } from 'vuera'
+
+import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd'
+import { uniDatabase, uniHome, uniUsersAlt, uniShieldCheck, uniBookOpen, uniDiary, uniFlask, uniCog, uniPlus, uniLink } from 'vue-unicons/dist/icons'
+
+Unicon.add([uniDatabase, uniHome, uniUsersAlt, uniShieldCheck, uniBookOpen, uniDiary, uniFlask, uniCog, uniPlus, uniLink])
+Vue.use(Unicon)
+
+Vue.use(ElementUI, { locale })
+Vue.use(VuePlugin)
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})