@questwork/vue-q-list-vue3 3.1.0 → 3.1.1

package/dist/q-list.min.js.LICENSE.txt

@@ -75,7 +75,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 ---
 
 Name: @questwork/utilities
-Version: 0.1.65
+Version: 0.1.67
 License: MIT
 Private: false
 Description: Questwork utilities

package/lib/helpers/getTitle.js

@@ -0,0 +1,57 @@
+const { getValidation } = require("./getValidation")
+const { getValue } = require("./getValue")
+
+function getTitle(titleTemplate, data) {
+  return titleTemplate.reduce((acc, item) => {
+    const { type, value = '', restriction, template, format, showMinutes } = item
+    switch (type) {
+      case('label'): {
+        if (getValidation({ rule: restriction, data })) {
+          acc += (value.toString())
+        }
+        break
+      }
+      case('value'): {
+        if (getValidation({ rule: restriction, data })) {
+          const _value = getValue(value, data) || ''
+          acc += (_value.toString())
+        }
+        break 
+      }
+      case('array'): {
+        if (getValidation({ rule: restriction, data })) {
+          const _value = getValue(value, data) || []
+          acc += _value.reduce((_acc, item) => {
+            return _acc += getTitle(template, item)
+          }, '')
+        }
+        
+        break 
+      }
+      case('ellipsis'): {
+        if (getValidation({ rule: restriction, data })) {
+          const { maxLength } = item
+          const _value = getValue(value, data) || ''
+          if (_value.length <= maxLength) {
+            acc += (_value.toString())
+          } else {
+            acc += `${_value.substr(0, maxLength)}...`
+          }
+        }
+        break 
+      }
+      case ('date'): {
+        if (getValidation({ rule: restriction, data })) {
+          const _value = getValue(value, data) || ''
+          acc += (formatDate({ date: _value, showMinutes, format }).toString())
+        }
+        break
+      }
+    }
+    return acc
+  }, '')
+}
+
+module.exports = {
+  getTitle
+}

package/lib/helpers/getTooltipPosition.js

@@ -0,0 +1,26 @@
+function getTooltipPosition({ tooltipContainer, cellText, window }) {
+  const containerRect = tooltipContainer.getBoundingClientRect()
+  const textRect = cellText.getBoundingClientRect()
+  
+  let left = textRect.left + window.scrollX
+  let top = textRect.bottom + window.scrollY
+
+  if (left + containerRect.width > window.innerWidth) {
+      left = window.innerWidth - containerRect.width
+  }
+
+  if (top + containerRect.height > window.innerHeight) {
+      top = textRect.top + window.scrollY - containerRect.height
+  }
+
+  if (top < 0) {
+      top = textRect.bottom + window.scrollY
+  }
+
+  tooltipContainer.style.left = `${left}px`
+  tooltipContainer.style.top = `${top}px`
+}
+
+module.exports = {
+  getTooltipPosition
+}

package/lib/helpers/getValidation.js

@@ -0,0 +1,90 @@
+const { getValue } = require('./getValue')
+
+function getValidation({ rule, data }) {
+  if (!rule) {
+    return true
+  }
+  const { key = '', value } = rule
+  const [valueAttribute] = Object.keys(value || {})
+
+  if (!key) {
+    switch (valueAttribute) {
+      case '$and': {
+        const arr = value['$and']
+        return arr.reduce((acc, item) => (acc && getValidation({ rule: item, data })), true)
+      }
+      case '$or': {
+        const arr = value['$or']
+        return arr.reduce((acc, item) => (acc || getValidation({ rule: item, data })), false)
+      }
+      default:
+        return false
+    }
+  }
+
+  const rowValue = getValue(key, data)
+  switch (valueAttribute) {
+    case '$empty': {
+      return !rowValue === !!value['$empty']
+    }
+    case '$eq': {
+      return rowValue === value['$eq']
+    }
+    case '$gt': {
+      return rowValue > value['$gt']
+    }
+    case '$gte': {
+      return rowValue >= value['$gte']
+    }
+    case '$in': {
+      if (Array.isArray(rowValue)) {
+        return !!rowValue.find((e) => (value['$in'].includes(e)))
+      }
+      if (typeof rowValue !== 'object') {
+        return !!value['$in'].includes(rowValue)
+      }
+      return false
+    }
+    case '$lt': {
+      return rowValue < value['$lt']
+    }
+    case '$lte': {
+      return rowValue <= value['$lte']
+    }
+    case '$ne': {
+      return rowValue !== value['$ne']
+    }
+    case '$notIn': {
+      if (Array.isArray(rowValue)) {
+        return !rowValue.find((e) => (value['$notIn'].includes(e)))
+      }
+      if (typeof rowValue !== 'object') {
+        return !value['$notIn'].includes(rowValue)
+      }
+      return false
+    }
+    case '$intervalTimeGt': {
+      const now = new Date().getTime()
+      const timestamp = new Date(rowValue).getTime()
+      return (now - timestamp) > value['$intervalTimeGt']
+    }
+    case '$intervalTimeLt': {
+      const now = new Date().getTime()
+      const timestamp = new Date(rowValue).getTime()
+      return (now - timestamp) < value['$intervalTimeLt']
+    }
+    case '$range': {
+      const [min, max] = value['$range']
+      if (typeof min === 'number' && typeof max === 'number' && rowValue >= min && rowValue <= max) {
+        return true
+      }
+      return false
+    }
+    default:
+      return false
+  }
+}
+
+module.exports = {
+  getValidation
+}

package/lib/helpers/getValue.js

@@ -0,0 +1,18 @@
+function getValue(key, value) {
+  return getValueInObj({ keys: key.split('.'), obj: value })
+}
+
+function getValueInObj({ keys, obj }) {
+  if (keys.length === 0) {
+    return obj
+  }
+  const firstKey = keys.shift()
+  if (obj && obj.hasOwnProperty(firstKey)) {
+    return getValueInObj({ keys, obj: obj[firstKey] })
+  }
+  return obj
+}
+
+module.exports = {
+  getValue
+}

package/lib/helpers/index.js

@@ -1,6 +1,13 @@
 const { getPopupPosition } = require('./getPopupPosition')
+const { getTitle } = require('./getTitle')
+const { getTooltipPosition } = require('./getTooltipPosition')
+const { getValidation } = require('./getValidation')
+const { getValue } = require('./getValue')
 
 module.exports = {
-  getPopupPosition
+  getPopupPosition,
+  getTitle,
+  getTooltipPosition,
+  getValidation,
+  getValue
 }
-exports.getPopupPosition = getPopupPosition

package/lib/index.js

@@ -1,11 +1,7 @@
-// const factories = require('./factories')
 const models = require('./models')
+const helpers = require('./helpers')
 
 module.exports = {
-  // ...factories,
   ...models,
+  ...helpers
 }
-
-exports.QListBulkButton = models.QListBulkButton
-exports.QRow = models.QRow
-exports.QListButton = models.QListButton

package/lib/models/qListButton/qListButton.js

@@ -2,6 +2,7 @@ const { KeyValueObject } = require('../keyValueObject')
 class QListButton {
   constructor(options = {}) {
     options = options || {}
+    this.id = options.actionId
     this.active = (typeof options.active !== 'undefined') ? !!options.active : true
     this.creator = options.creator
     this.css = options.css || {}

package/lib/models/qRow/index.js

@@ -1,5 +1,5 @@
 const { QRow } = require('./qRow')
 
 module.exports = {
-  QRow
+  QRow,
 }

package/lib/models/qRow/qRow.js

@@ -9,6 +9,7 @@ class QRow {
     this.cssNames = options.cssNames || []
     this.deleted = options.deleted || false
     this.duration = options.duration
+    this.editable = (typeof options.editable === 'boolean') ? options.editable : true
     this.getActions = options.getActions 
     this.new = options.new || false
     this.owner = options.owner
@@ -150,6 +151,10 @@ class QRow {
     return this
   }
 
+  setEditable(val) {
+    this.editable = val
+  }
+
   toggleActive() {
     this.active = !this.active
     this.new = false
@@ -208,5 +213,5 @@ function setShouldBeVisible(shouldBeVisible) {
 }
 
 module.exports = {
-  QRow
+  QRow,
 }

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@questwork/vue-q-list-vue3",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Questwork vue component for displaying a list",
-  "main": "dist/q-list.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/q-list.min.js",
+      "require": "./dist/q-list.min.js"
+    },
+    "./style.css": "./dist/q-list.min.css"
+  },
   "author": {
     "name": "Questwork Consulting Limited",
     "email": "info@questwork.com",
@@ -13,58 +19,44 @@
     "@babel/core": "^7.17.8",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.22.10",
-    "@questwork/utilities": "^0.1.51",
+    "@questwork/utilities": "^0.1.67",
     "@questwork/vue-q-buttons-vue3": "^3.1.0",
     "@questwork/vue-q-paginator-vue3": "^3.1.0",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/addon-viewport": "^7.3.2",
-    "@storybook/source-loader": "^7.3.2",
-    "@storybook/vue": "^7.3.2",
-    "@storybook/vue-webpack5": "^7.3.2",
-    "@storybook/vue3": "^7.3.2",
-    "@storybook/vue3-vite": "^7.3.2",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@storybook/addon-essentials": "8.5.3",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-vite": "^8.4.7",
+    "@vitejs/plugin-vue": "^5.2.1",
     "babel-loader": "^8.2.4",
     "chai": "^4.3.6",
     "chromedriver": "^116.0.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "color-name": "^2.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^3.6.0",
     "eslint": "^8.47.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "eslint-plugin-vue": "^9.29.0",
-    "file-loader": "^6.2.0",
-    "gulp": "^4.0.2",
+    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-vue": "^9.32.0",
     "mocha": "^9.2.2",
     "rollup-plugin-license": "^3.5.3",
-    "rollup-webpack-umd": "^0.1.2",
-    "sass": "^1.49.11",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.83.4",
     "selenium-webdriver": "^4.11.1",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.7.0",
-    "storybook": "^7.3.2",
-    "style-loader": "^1.3.0",
-    "url-loader": "^4.1.1",
+    "storybook": "^8.4.7",
     "vite": "^5.4.9",
     "vite-plugin-commonjs": "^0.10.3",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vue": "^3.5.12",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.71.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-merge": "^4.2.2",
-    "webpack-node-externals": "^1.7.2"
+    "vue": "^3.5.12"
   },
   "engines": {
     "node": ">=10.0.0"
   },
   "scripts": {
     "build": "vite build",
+    "build:copy": "vite build && cp -r dist/*.js '../congress.system/public/libs/vue.v3/' && cp -r dist/*.js '../wordpress.plugins/wp-q-components/assets/js/vue.v3/' && cp -r dist/*.css '../congress.system/public/userfile/shared/css/vue.v3/' && cp -r dist/*.css '../wordpress.plugins/wp-q-components/assets/css/vue.v3/'",
+    "build:wordpress": "vite build && cp -r dist/* '../wordpress.plugins/wp-q-components/assets/js/'",
     "build:storybook": "storybook build -c .storybook -o storybook",
     "storybook": "storybook dev -p 6017",
-    "test:playground": "NODE_ENV=test mocha --no-timeouts 'lib/test.setup.js' 'lib/**/*.spec.js'",
-    "test:selenium": "NODE_ENV=test mocha --no-timeouts 'test/selenium/test.setup.js' 'test/selenium/**/*.spec.js'"
+    "test:playground": "cross-env NODE_ENV=test mocha --no-timeouts 'lib/test.setup.js' 'lib/**/*.spec.js'",
+    "test:selenium": "cross-env NODE_ENV=test mocha --no-timeouts 'test/selenium/test.setup.js' 'test/selenium/**/*.spec.js'"
   }
 }

package/vite.config.js

@@ -1,19 +1,13 @@
-import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
-import { libInjectCss } from 'vite-plugin-lib-inject-css'
 import vue from '@vitejs/plugin-vue'
 import license from 'rollup-plugin-license'
 import commonjs from 'vite-plugin-commonjs'
-import rewriteUmdPlugin from 'rollup-webpack-umd'
 
-// 与 ./webpack/prod.config.js 的 output.library 名一致
 const libName = 'QList'
-// libName 的 kebab-case 格式
 const fileName = 'q-list'
 
 export default defineConfig({
   build: {
-    target: ['chrome100', 'safari15', 'firefox91'],
     lib: {
       entry: './src/index.js',
       name: libName,
@@ -23,6 +17,7 @@ export default defineConfig({
     rollupOptions: {
       external: ['vue'],
       output: {
+        assetFileNames: `${fileName}.min.[ext]`,
         globals: {
           vue: 'Vue',
         },
@@ -39,20 +34,19 @@ export default defineConfig({
         }),
       ],
     },
+    target: ['chrome100', 'safari15', 'firefox91'],
+    terserOptions: {
+      compress: false,
+      mangle: false,
+    },
   },
   esbuild: {
     legalComments: 'none',
   },
   plugins: [
     vue(),
-    libInjectCss(),
     commonjs(),
   ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
   css: {
     preprocessorOptions: {
       scss: {
@@ -61,3 +55,48 @@ export default defineConfig({
     },
   },
 })
+
+function rewriteUmdPlugin(options) {
+  const {
+    banner
+  } = options || {}
+  return {
+    name: "rewrite-umd",
+    generateBundle(_ctx, options2) {
+      if (_ctx.format !== "umd") {
+        return
+      }
+      const data = Object.values(options2)[0]
+      const { code, exports, imports } = data
+      const defineReg = /^\(function\((?<root>\w+),(?<factory>\w+)\)\{(?<rest>.*?)\|\|self,(?<scriptTag>.*?)\)\}\)\(this,function/s
+      const rewritten = code
+      .replace(defineReg, (...args) => {
+        const { root, factory, scriptTag } = args.at(-1)
+        return `${banner || ""}
+;(function(${root},${factory}){
+  if (typeof exports == "object" && typeof module < "u") { // for commonjs
+    const returns = {}
+    ${factory}(returns, ${imports.map((i) => `require("${i}")`).join(", ")});
+    module.exports = returns;
+    ${exports.map((exp) => `exports.${exp} = returns.${exp};`).join("\n")}
+  }
+  else if (typeof define == "function" && define.amd) { // for amd
+    define(["exports", ${imports.map((i) => `"${i}"`).join(", ")}], ${factory});
+  }
+  else { // for browser script tag
+    ${root} = (typeof globalThis < "u") ? globalThis : ${root} || self;
+    ${scriptTag};
+  }
+})(this,function`
+      })
+
+      // return the exports object at the end
+      .replace(new RegExp(/Object.defineProperty\((?<name>\w+),Symbol.toStringTag,{value:"Module"}\)}\);/), (...args) => {
+        const { name } = args.at(-1)
+        return `Object.defineProperty(${name},Symbol.toStringTag,{value:"Module"}); return ${name}; });`
+      })
+
+      data.code = rewritten
+    }
+  }
+}

package/lib/factories/index.js

@@ -1,6 +0,0 @@
-const qListButtonFactory = require('./qListButtonFactory')
-
-module.exports = {
-  ...qListButtonFactory,
-}
-exports.QListButtonFactory = qListButtonFactory.QListButtonFactory

package/lib/factories/qListButtonFactory/index.js

@@ -1,5 +0,0 @@
-const { QListButtonFactory } = require('./qListButtonFactory')
-
-module.exports = {
-  QListButtonFactory
-}

package/lib/factories/qListButtonFactory/qListButtonFactory.js

@@ -1,16 +0,0 @@
-// const { QListButton } = require('../../models')
-
-// class QListButtonFactory {
-//   static init(options) {
-//     const { action, qRow, row } = options
-//     if (action.qListButtonType) {
-//       return new QListButton(action)
-//     }
-//     return action
-//   }
-// }
-
-// module.exports = {
-//   QListButtonFactory
-// }
-