@questwork/vue-q-widget-vue3 3.1.0

package/lib/models/controller/controller.js

@@ -0,0 +1,67 @@
+import { NodeFactory } from '../factories'
+import { setId } from '../../helpers'
+
+class Controller {
+  constructor(opt = {}) {
+    this.css = opt.css || {}
+    this.controllerHelpers = opt.controllerHelpers
+    this.eventHandlers = opt.eventHandlers || {}
+    this.id = opt.id || setId('controller')
+    this.initialState = opt.initialState
+    this.name = opt.name
+    this.saveStateKeys = opt.saveStateKeys || []
+    this.setLayout(opt.layout, opt.controllerHelpers)
+  }
+
+  get isValid() {
+    return !!this.id && !!this.layout
+  }
+
+  static init(layout) {
+    const instance = new this(layout)
+    return instance.isValid ? instance : null
+  }
+
+  getElements() {
+    return this.elements || []
+  }
+
+  getElementByElementName(elementName) {
+    return this.elements.find((element) => (element.getElementName() === elementName))
+  }
+
+  getState() {
+    return {
+      ...this.getControllerState(),
+      ...this.layout.getElementState()
+    }
+  }
+
+  getControllerState() {
+    return this.state
+  }
+
+  setLayout(layout, controllerHelpers) {
+    this.layout = NodeFactory.init({ layout, controllerHelpers })
+  }
+
+  setElements(elements) {
+    this.elements = elements
+  }
+
+  updateState(state) {
+    this.state = {
+      ...this.state,
+      ...state
+    }
+    this.layout.updateElementState(this.state)
+  }
+}
+
+export default {
+  Controller
+}
+
+export {
+  Controller
+}

package/lib/models/controller/index.js

@@ -0,0 +1 @@
+export { Controller } from './controller'

package/lib/models/controllerHelpers/controllerHelpers.js

@@ -0,0 +1,46 @@
+class ControllerHelpers {
+  constructor(opt) {
+    this.permissionHandler = permissionHandler
+    Object.keys(opt).forEach((key) => {
+      this[key] = opt[key]
+    })
+  }
+  static init(controllerHelpers) {
+    const instance = new ControllerHelpers(controllerHelpers)
+    return instance.isValid ? instance : null
+  }
+
+  get isValid() {
+    return isFunction(this.getControllerState)
+      && isFunction(this.getControllerUniqueKey)
+      && isFunction(this.saveControllerState)
+      && isFunction(this.startLoading)
+      && isFunction(this.stopLoading)
+      && isFunction(this.runChains)
+      && this.qForm && isFunction(this.qForm.NodeHelper)
+      && this.qGrid && isFunction(this.qGrid.QItem) && isFunction(this.qGrid.Cell)
+      && this.qList && isFunction(this.qList.QRow) && isFunction(this.qList.QListBulkButton) && isFunction(this.qList.QListButton)
+      && this.qUtilities && isFunction(this.qUtilities.convertString) && isFunction(this.qUtilities.getValidation) && isFunction(this.qUtilities.lodash)
+  }
+}
+
+function isFunction(fun) {
+  return typeof fun === 'function'
+}
+
+function permissionHandler() {
+  return {
+    isAllowCreate: true,
+    isAllowRead: true,
+    isAllowUpdate: true,
+    isAllowDelete: true
+  }
+}
+
+export default {
+  ControllerHelpers
+}
+
+export {
+  ControllerHelpers
+}

package/lib/models/controllerHelpers/index.js

@@ -0,0 +1 @@
+export { ControllerHelpers } from './controllerHelpers'

package/lib/models/factories/index.js

@@ -0,0 +1 @@
+export { NodeFactory } from './nodeFactory'

package/lib/models/factories/nodeFactory.js

@@ -0,0 +1,55 @@
+import { NODE_TYPE } from '../nodes'
+
+class NodeFactory {
+  static init({ layout = {}, controllerHelpers = {} } = {}) {
+    const nodes = []
+    return recursive({ layout, nodes, controllerHelpers })
+  }
+}
+
+function recursive({ layout, nodes, controllerHelpers }) {
+  if (layout instanceof NODE_TYPE.Node) {
+    return layout
+  }
+  const item = {
+    ...layout,
+  }
+  if (Array.isArray(item.children)) {
+    item.children = item.children.map((child) => (recursive({ layout: child, nodes, controllerHelpers })))
+  }
+  return initNode(item, nodes, controllerHelpers)
+}
+
+function initNode(layout, nodes, controllerHelpers) {
+  const { nodeType, permissions } = layout || {}
+  if (typeof NODE_TYPE[nodeType] === 'function') {
+    const { permissionHandler } = controllerHelpers
+    const permissionResult = permissions ? permissionHandler(permissions) : {
+      isAllowCreate: true,
+      isAllowRead: true,
+      isAllowUpdate: true,
+      isAllowDelete: true,
+    }
+    const i = (NODE_TYPE[nodeType]).init({
+      ...layout,
+      permissionResult
+    })
+    if (i) {
+      if (i.isExist(nodes)) {
+        return null
+      }
+      nodes.push(i)
+      return i
+    }
+    return null
+  }
+  return null
+}
+
+export default {
+  NodeFactory
+}
+
+export {
+  NodeFactory
+}

package/lib/models/index.js

@@ -0,0 +1,5 @@
+export * from './configs'
+export * from './controllerHelpers'
+export * from './controller'
+export * from './factories'
+export * from './nodes'

package/lib/models/nodes/container.js

@@ -0,0 +1,37 @@
+import { Node } from './node'
+
+class Container extends Node {
+  constructor(opt = {}) {
+    super(opt)
+    this.children = opt.children || []
+    this.nodeType = 'Container'
+  }
+
+  getChildren() {
+    return this.children
+  }
+
+  getValidChildren() {
+    return this.getChildren().filter((i) => i)
+  }
+
+  getElementState() {
+    return this.getValidChildren().reduce((acc, child) => ({
+      ...acc,
+      ...child.getElementState()
+    }), {})
+  }
+
+  updateElementState(state) {
+    this.getValidChildren().forEach((child) => child.updateElementState(state))
+    return this
+  }
+}
+
+export default {
+  Container
+}
+
+export {
+  Container
+}

package/lib/models/nodes/containers/box.js

@@ -0,0 +1,16 @@
+import { Container } from '../container'
+
+class ContainerBox extends Container {
+  constructor(opt = {}) {
+    super(opt)
+    this.nodeType = 'ContainerBox'
+  }
+}
+
+export default {
+  ContainerBox
+}
+
+export {
+  ContainerBox
+}

package/lib/models/nodes/containers/column.js

@@ -0,0 +1,16 @@
+import { Container } from '../container'
+
+class ContainerColumn extends Container {
+  constructor(opt = {}) {
+    super(opt)
+    this.nodeType = 'ContainerColumn'
+  }
+}
+
+export default {
+  ContainerColumn
+}
+
+export {
+  ContainerColumn
+}

package/lib/models/nodes/containers/headerSticky.js

@@ -0,0 +1,16 @@
+import { Container } from '../container'
+
+class ContainerHeaderSticky extends Container {
+  constructor(opt = {}) {
+    super(opt)
+    this.nodeType = 'ContainerHeaderSticky'
+  }
+}
+
+export default {
+  ContainerHeaderSticky
+}
+
+export {
+  ContainerHeaderSticky
+}

package/lib/models/nodes/containers/index.js

@@ -0,0 +1,18 @@
+import { ContainerBox } from './box'
+import { ContainerColumn } from './column'
+import { ContainerHeaderSticky } from './headerSticky'
+import { ContainerRow } from './row'
+
+export default {
+  ContainerBox,
+  ContainerColumn,
+  ContainerHeaderSticky,
+  ContainerRow
+}
+
+export {
+  ContainerBox,
+  ContainerColumn,
+  ContainerHeaderSticky,
+  ContainerRow
+}

package/lib/models/nodes/containers/row.js

@@ -0,0 +1,16 @@
+import { Container } from '../container'
+
+class ContainerRow extends Container {
+  constructor(opt = {}) {
+    super(opt)
+    this.nodeType = 'ContainerRow'
+  }
+}
+
+export default {
+  ContainerRow
+}
+
+export {
+  ContainerRow
+}

package/lib/models/nodes/element.js

@@ -0,0 +1,124 @@
+import { Node } from './node'
+import { configHandler } from '../../helpers'
+
+class Element extends Node {
+  constructor(opt = {}) {
+    super(opt)
+    this.configPermissions = opt.configPermissions
+    this.name = opt.name
+    this.nodeType = opt.nodeType || 'Element'
+    this.state = {}
+    this.configHandler(opt.config)
+  }
+
+  get isCreated() {
+    return super.isCreated && !!this.component
+  }
+
+  get isValid() {
+    return super.isValid && !!this.name
+  }
+
+  get hasConfigPermissions() {
+    return !!this.configPermissions
+  }
+
+  get stateName() {
+    return {
+      ...this.defaultStateName,
+      ...this.config.stateName
+    }
+  }
+
+  addComponent(component) {
+    this.component = component
+  }
+
+  configHandler(config = {}) {
+    if (this.hasConfigPermissions) {
+      this.config = configHandler({ config, configPermissions: this.configPermissions, type: this.nodeType })
+    } else {
+      this.config = config
+    }
+  }
+
+  getConfig() {
+    return this.config || {}
+  }
+
+  getComponent() {
+    return this.component
+  }
+
+  getElementName() {
+    return this.name
+  }
+
+  getHandlers() {
+    const elementName = this.getElementName()
+    const { elementHandlers = {} } = this.state
+    return elementHandlers[elementName] || {}
+  }
+
+  getState() {
+    return this.state
+  }
+
+  getElementState() {
+    return _mergeState(this.state, this.stateName)
+  }
+
+  onCreated({ component, payload = {} }) {
+    this.addComponent(component)
+    this.updateState(payload)
+    return this
+  }
+
+  update(obj) {
+    this.updateElementState(obj)
+  }
+
+  updateState(obj) {
+    this.state = {
+      ...this.state,
+      ...obj
+    }
+  }
+
+  updateElementState(state) {
+    const updatedState = _updateState(state, this.stateName)
+    this.updateState(updatedState)
+    return this
+  }
+}
+
+function _mergeState(state, stateName) {
+  return Object.keys(stateName).reduce((acc, elementStateKey) => {
+    const controllerStateKey = stateName[elementStateKey]
+    const value = state[elementStateKey]
+    return {
+      ...acc,
+      [controllerStateKey]: value
+    }
+  }, {})
+}
+
+function _updateState(state, stateName) {
+  return Object.keys(stateName).reduce((acc, elementStateKey) => {
+    const controllerStateKey = stateName[elementStateKey]
+    const value = state[controllerStateKey]
+    delete acc[controllerStateKey]
+    return {
+      ...acc,
+      [elementStateKey]: value
+    }
+  }, state)
+}
+
+export default {
+  Element
+}
+
+export {
+  Element
+}

package/lib/models/nodes/elements/index.js

@@ -0,0 +1,33 @@
+import { ElementQButton } from './qButton'
+import { ElementQForm } from './qForm'
+import { ElementQGrid } from './qGrid'
+import { ElementQHtml } from './qHtml'
+import { ElementQImport } from './qImport'
+import { ElementQLabel } from './qLabel'
+import { ElementQList } from './qList'
+import { ElementQPaginator } from './qPaginator'
+import { ElementQTab } from './qTab'
+
+export default {
+  ElementQButton,
+  ElementQForm,
+  ElementQGrid,
+  ElementQHtml,
+  ElementQImport,
+  ElementQLabel,
+  ElementQList,
+  ElementQPaginator,
+  ElementQTab,
+}
+
+export {
+  ElementQButton,
+  ElementQForm,
+  ElementQGrid,
+  ElementQHtml,
+  ElementQImport,
+  ElementQLabel,
+  ElementQList,
+  ElementQPaginator,
+  ElementQTab,
+}

package/lib/models/nodes/elements/qButton.js

@@ -0,0 +1,15 @@
+import { Element } from '../element'
+
+class ElementQButton extends Element {
+  constructor(opt = {}) {
+    super(opt)
+  }
+}
+
+export default {
+  ElementQButton
+}
+
+export {
+  ElementQButton
+}

package/lib/models/nodes/elements/qForm.js

@@ -0,0 +1,67 @@
+import { Element } from '../element'
+import { ElementQFormConfig } from '../../configs'
+
+class ElementQForm extends Element {
+  constructor(opt = {}) {
+    super(opt)
+    this.defaultStateName = {
+      axios: 'axios',
+      formData: 'formData',
+      formErrors: 'formErrors',
+      formNode: 'formNode',
+      pageKey: 'pageKey',
+      qForm: 'qForm'
+    }
+  }
+
+  getConfig(helpers) {
+    let config = this.config || {}
+    if (this.state.qForm) {
+      const { lodash } = helpers.qUtilities
+      const stateConfig = _getStateConfig(this.state.qForm)
+      config = lodash.mergeWith(stateConfig, config || {}, _customizer)
+    }
+    return typeof ElementQFormConfig === 'function' ? ElementQFormConfig.init({
+      ...config,
+      helpers: {
+        ...helpers,
+        element: this
+      },
+    }) : {}
+  }
+
+  getFormCustomizer() {
+    const { formCustomizer } = this.getHandlers()
+    return typeof formCustomizer === 'function' ? formCustomizer : _customizer
+  }
+}
+
+function _customizer(objValue, srcValue) {
+  if (Array.isArray(objValue)) {
+    return srcValue || null
+  }
+  if (typeof srcValue === 'number' || typeof srcValue === 'boolean') {
+    return srcValue
+  }
+  if (!srcValue) {
+    return null
+  }
+  return undefined
+}
+
+function _getStateConfig(qForm) {
+  const { buttons = [], layout = {}, trees = [] } = qForm || {}
+  return {
+    buttons,
+    layout,
+    trees
+  }
+}
+
+export default {
+  ElementQForm
+}
+
+export {
+  ElementQForm
+}

package/lib/models/nodes/elements/qGrid.js

@@ -0,0 +1,35 @@
+import { Element } from '../element'
+import { ElementQGridConfig } from '../../configs'
+
+class ElementQGrid extends Element {
+  constructor(opt = {}) {
+    super(opt)
+    this.defaultStateName = {
+      gridItems: 'gridItems',
+    }
+  }
+
+  getConfig(helpers) {
+    let config = this.config || {}
+    if (this.state.qGrid) {
+      const stateConfig = this.state.qGrid
+      config = {
+        ...stateConfig,
+        ...config,
+      }
+    }
+    return typeof ElementQGridConfig === 'function' ? ElementQGridConfig.init({
+      ...config,
+      helpers: {
+        ...helpers,
+        element: this,
+      },
+    }) : {}
+  }
+}
+
+export default {
+  ElementQGrid,
+}
+
+export { ElementQGrid }

package/lib/models/nodes/elements/qHtml.js

@@ -0,0 +1,15 @@
+import { Element } from '../element'
+
+class ElementQHtml extends Element {
+  constructor(opt = {}) {
+    super(opt)
+  }
+}
+
+export default {
+  ElementQHtml
+}
+
+export {
+  ElementQHtml
+}

package/lib/models/nodes/elements/qImport.js

@@ -0,0 +1,15 @@
+import { Element } from '../element'
+
+class ElementQImport extends Element {
+  constructor(opt = {}) {
+    super(opt)
+  }
+}
+
+export default {
+  ElementQImport
+}
+
+export {
+  ElementQImport
+}

package/lib/models/nodes/elements/qLabel.js

@@ -0,0 +1,15 @@
+import { Element } from '../element'
+
+class ElementQLabel extends Element {
+  constructor(opt = {}) {
+    super(opt)
+  }
+}
+
+export default {
+  ElementQLabel
+}
+
+export {
+  ElementQLabel
+}

package/lib/models/nodes/elements/qList.js

@@ -0,0 +1,46 @@
+import { Element } from '../element'
+import { ElementQListConfig } from '../../configs'
+
+class ElementQList extends Element {
+  constructor(opt = {}) {
+    super(opt)
+    this.defaultStateName = {
+      qList: 'qList',
+      qSorterKeys: 'qSorterKeys',
+      rows: 'rows'
+    }
+  }
+
+  getConfig(helpers) {
+    let config = this.config || {}
+    if (this.state.qList) {
+      const stateConfig = _getStateConfig(this.state.qList)
+      config = {
+        ...stateConfig,
+        ...config
+      }
+    }
+    return typeof ElementQListConfig === 'function' ? ElementQListConfig.init({
+      ...config,
+      helpers: {
+        ...helpers,
+        element: this
+      },
+    }) : {}
+  }
+}
+
+function _getStateConfig(qList) {
+  // const { actions = [], bulkAction = {}, headers = [] } = qList || {}
+  return {
+    ...qList
+  }
+}
+
+export default {
+  ElementQList
+}
+
+export {
+  ElementQList
+}