@tagplus/components 4.7.10 → 5.0.0

package/src/mixins/floatFormatter.js

@@ -1,12 +1,12 @@
-import { formatMoney } from 'tp-ui/utils/currency'
-
 /**
  * Eventos para componentes tp-money e tp-percent mostratem o número formatado com a precisão correta e devolver float sem arredondar
  */
 export default {
+  inject: ['formatMoney'],
+
   data () {
     return {
-      formattedValue: this.value
+      formattedValue: this.modelValue
     }
   },
 
@@ -21,33 +21,29 @@ export default {
     }
   },
 
-  computed: {
-    locale () {
-      return this.t('locale')
-    }
-  },
-
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
       handler (newValue, oldValue) {
-        if (newValue === '' && this.allowEmpty) { this.formattedValue = ''; return }
-        this.formattedValue = formatMoney(newValue, true, this.locale, this.customPrecision)
+        if (newValue === '' && this.allowEmpty) {
+          this.formattedValue = ''
+          return
+        }
+        this.formattedValue = this.formatMoney(newValue, true, this.locale, this.customPrecision)
       }
     }
   },
 
   methods: {
     input (evt) {
-      this.formattedValue = formatMoney(evt, true, this.locale, this.customPrecision)
-      const moneyFormatado = formatMoney(evt, false, this.locale, this.customPrecision)
+      this.formattedValue = this.formatMoney(evt, true, this.locale, this.customPrecision)
+      const moneyFormatado = this.formatMoney(evt, false, this.locale, this.customPrecision)
 
       this.$emit('input', moneyFormatado)
     },
 
     handleChange (evt) {
-      this.$emit('change', formatMoney(evt, false, this.locale, this.customPrecision))
+      this.$emit('change', this.formatMoney(evt, false, this.locale, this.customPrecision))
     }
   }
-
 }

package/src/{utils → plugins}/currency.js

@@ -1,31 +1,9 @@
-import { messages } from 'tp-ui/locale'
+import ptbrLocale from 'tp-ui/locale/lang/pt-br'
 
-const defaults = messages().locale.number
+let defaults
 
-function format (input, opt = defaults) {
-  if (typeof input === 'number') {
-    input = input.toFixed(fixed(opt.precision))
-  }
-
-  const negative = input.indexOf('-') >= 0 ? '-' : ''
-
-  const numbers = onlyNumbers(input)
-  const currency = numbersToCurrency(numbers, opt.precision)
-  const parts = toStr(currency).split('.')
-  let integer = parts[0]
-  const decimal = parts[1]
-
-  integer = addThousandSeparator(integer, opt.thousands)
-
-  return opt.prefix + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix
-}
-
-function unformat (input, precision = defaults.precision) {
-  const negative = (`${input}`).indexOf('-') >= 0 ? -1 : 1
-  const numbers = onlyNumbers(input)
-  const currency = numbersToCurrency(numbers, precision)
-
-  return currency * negative
+function setDefaults (app) {
+  defaults = app.$i18n ? app.$i18n.t('locale.number') : ptbrLocale.locale
 }
 
 /**
@@ -41,7 +19,7 @@ function formatMoney (input, toString = false, locale = defaults, customPrecisio
   let inputString = (`${input}`)
 
   // Impede de digitar . ou , porque o formatador já adiciona
-  if ((inputString.slice(-1).match(/[.,]/))) {
+  if (inputString.slice(-1).match(/[.,]/)) {
     inputString = inputString.substring(0, inputString.length - 1)
   }
 
@@ -109,46 +87,14 @@ function numbersToCurrency (numbers, precision) {
   return float.toFixed(fixed(precision))
 }
 
-function addThousandSeparator (integer, separator) {
-  return integer.replace(/(\d)(?=(?:\d{3})+\b)/g, `$1${separator}`)
-}
-
-// eslint-disable-next-line
-function currencyToIntegerAndDecimal (float) {
-  return toStr(float).split('.')
-}
-
-function joinIntegerAndDecimal (integer, decimal, separator) {
-  return decimal ? integer + separator + decimal : integer
-}
-
 function toStr (value) {
   return value ? value.toString() : ''
 }
 
-function setCursor (el, position) {
-  const setSelectionRange = function () { el.setSelectionRange(position, position) }
-
-  if (el === document.activeElement) {
-    setSelectionRange()
-    setTimeout(setSelectionRange, 1) // Android Fix
+export default {
+  install: (app, options) => {
+    setDefaults(app)
+    // app.messages().locale.number
+    app.provide('formatMoney', formatMoney)
   }
 }
-
-// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way
-function event (name) {
-  const evt = document.createEvent('Event')
-
-  evt.initEvent(name, true, true)
-
-  return evt
-}
-
-export {
-  formatMoney,
-  format,
-  unformat,
-  setCursor,
-  completeZeros,
-  event
-}

package/src/utils/browser.js

@@ -0,0 +1,6 @@
+import { isClient, isIOS } from '@vueuse/core'
+
+export const isFirefox = () =>
+  isClient && /firefox/i.test(window.navigator.userAgent)
+
+export { isClient, isIOS }

package/src/utils/constants.js

@@ -0,0 +1,3 @@
+
+export const formContextKe = Symbol('formContextKey')
+export const formItemContextKey = Symbol('formItemContextKey')

package/src/utils/error.js

@@ -0,0 +1,22 @@
+import { isString } from './types'
+
+class ElementPlusError extends Error {
+  constructor (m) {
+    super(m)
+    this.name = 'ElementPlusError'
+  }
+}
+
+export function throwError (scope, m) {
+  throw new ElementPlusError(`[${scope}] ${m}`)
+}
+
+export function debugWarn (scope, message) {
+  if (process.env.NODE_ENV !== 'production') {
+    const error = isString(scope)
+      ? new ElementPlusError(`[${scope}] ${message}`)
+      : scope
+    // eslint-disable-next-line no-console
+    console.warn(error)
+  }
+}

package/src/utils/filters.js

@@ -1,5 +1,4 @@
 // import moment from 'moment'
-import { t } from 'tp-ui/locale'
 
 /**
  *
@@ -26,7 +25,7 @@ export const toCurrency = (val, locale = false) => {
 
   try {
     if (!locale) {
-      locale = t('locale.prefix')
+      locale = 'pt-BR'
     }
 
     let with2Decimals = val.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
@@ -53,18 +52,6 @@ export const toDate = function (val) {
   if (val === undefined || val === '' || val === null) return ''
 
   if (val === '0000-00-00') return 'N/A'
-
-  // let defaultFormat = 'DD/MM/YYYY'
-
-  // switch (getCurrentLocale()) {
-  // case 'en-US':
-  //   defaultFormat = 'YYYY-MM-DD'
-  //   break
-  // default:
-  //   defaultFormat
-  // }
-
-  // return moment(val).format(defaultFormat)
 }
 
 /**

package/src/utils/helpers.js

@@ -0,0 +1,41 @@
+/**
+ *
+ * @param {Array} a
+ * @param {Array} b
+ * @returns {Bool}
+ */
+export const valueEquals = (a, b) => {
+  // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+  if (a === b) return true
+  if (!(a instanceof Array)) return false
+  if (!(b instanceof Array)) return false
+  if (a.length !== b.length) return false
+  for (let i = 0; i !== a.length; ++i) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}
+
+/**
+ *
+ * @param {*} object
+ * @param {*} prop
+ * @returns
+ */
+export const getValueByPath = function (object, prop) {
+  prop = prop || ''
+  const paths = prop.split('.')
+  let current = object
+  let result = null
+  for (let i = 0, j = paths.length; i < j; i++) {
+    const path = paths[i]
+    if (!current) break
+
+    if (i === j - 1) {
+      result = current[path]
+      break
+    }
+    current = current[path]
+  }
+  return result
+}

package/src/utils/i18n.js

@@ -0,0 +1,2 @@
+export const isKorean = (text) =>
+  /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text)

package/src/utils/icon.js

@@ -0,0 +1,35 @@
+import {
+  CircleCheck,
+  CircleClose,
+  CircleCloseFilled,
+  Close,
+  InfoFilled,
+  Loading,
+  SuccessFilled,
+  WarningFilled,
+} from '@element-plus/icons-vue'
+
+export const CloseComponents = {
+  Close,
+}
+
+export const TypeComponents = {
+  Close,
+  SuccessFilled,
+  InfoFilled,
+  WarningFilled,
+  CircleCloseFilled,
+}
+
+export const TypeComponentsMap = {
+  success: SuccessFilled,
+  warning: WarningFilled,
+  error: CircleCloseFilled,
+  info: InfoFilled,
+}
+
+export const ValidateComponentsMap = {
+  validating: Loading,
+  success: CircleCheck,
+  error: CircleClose,
+}

package/src/utils/index.js

@@ -0,0 +1,20 @@
+export * from './types'
+export * from './error'
+// export * from './arrays'
+export * from './browser'
+// export * from './rand'
+export * from './strings'
+export * from './icon'
+export * from './scroll'
+export * from './i18n'
+export * from './use-input'
+export * from './use-id'
+export * from './use-form-item'
+export * from './use-form-common-props'
+export * from './use-derived-namespace'
+export * from './constants'
+export * from './runtime'
+export * from './objects'
+export const UPDATE_MODEL_EVENT = 'update:modelValue'
+export const CHANGE_EVENT = 'change'
+export const INPUT_EVENT = 'input'

package/src/utils/objects.js

@@ -0,0 +1,17 @@
+/* eslint-disable vue/prefer-import-from-vue */
+import { get, set } from 'lodash-unified'
+
+export const keysOf = (arr) => Object.keys(arr)
+export const entriesOf = (arr) => Object.entries(arr)
+export { hasOwn } from '@vue/shared'
+
+export const getProp = (obj, path, defaultValue) => {
+  return {
+    get value () {
+      return get(obj, path, defaultValue)
+    },
+    set value (val) {
+      set(obj, path, val)
+    },
+  }
+}

package/src/utils/runtime.js

@@ -0,0 +1,86 @@
+import { warn } from 'vue'
+import { fromPairs } from 'lodash-unified'
+import { hasOwn, isObject } from '@/utils'
+
+export const epPropKey = '__epPropKey'
+
+export const definePropType = (val) => val
+
+export const isEpProp = (val) =>
+  isObject(val) && !!(val)[epPropKey]
+
+/**
+ * @description Build prop. It can better optimize prop types
+ * @description 生成 prop，能更好地优化类型
+ * @example
+  // limited options
+  // the type will be PropType<'light' | 'dark'>
+  buildProp({
+    type: String,
+    values: ['light', 'dark'],
+  } as const)
+  * @example
+  // limited options and other types
+  // the type will be PropType<'small' | 'large' | number>
+  buildProp({
+    type: [String, Number],
+    values: ['small', 'large'],
+    validator: (val: unknown): val is number => typeof val === 'number',
+  } as const)
+  @link see more: https://github.com/element-plus/element-plus/pull/3341
+ */
+export const buildProp = (prop, key) => {
+  // filter native prop type and nested prop, e.g `null`, `undefined` (from `buildProps`)
+  if (!isObject(prop) || isEpProp(prop)) return prop
+
+  const { values, required, default: defaultValue, type, validator } = prop
+
+  const _validator =
+    values || validator
+      ? (val) => {
+        let valid = false
+        let allowedValues = []
+
+        if (values) {
+          allowedValues = Array.from(values)
+          if (hasOwn(prop, 'default')) {
+            allowedValues.push(defaultValue)
+          }
+          valid ||= allowedValues.includes(val)
+        }
+        if (validator) valid ||= validator(val)
+
+        if (!valid && allowedValues.length > 0) {
+          const allowValuesText = [...new Set(allowedValues)]
+            .map((value) => JSON.stringify(value))
+            .join(', ')
+          warn(
+            `Invalid prop: validation failed${
+              key ? ` for prop "${key}"` : ''
+            }. Expected one of [${allowValuesText}], got value ${JSON.stringify(
+              val
+            )}.`
+          )
+        }
+        return valid
+      }
+      : undefined
+
+  const epProp = {
+    type,
+    required: !!required,
+    validator: _validator,
+    [epPropKey]: true,
+  }
+  if (hasOwn(prop, 'default')) epProp.default = defaultValue
+  return epProp
+}
+
+export const buildProps = (
+  props
+) => fromPairs(
+  Object.entries(props).map(([key, option]) => [
+    key,
+    buildProp(option, key),
+  ])
+)

package/src/utils/scroll.js

@@ -0,0 +1,100 @@
+import { isClient, getStyle } from '@/utils'
+
+export const isScroll = (el, isVertical) => {
+  if (!isClient) return false
+
+  const key = (
+    {
+      undefined: 'overflow',
+      true: 'overflow-y',
+      false: 'overflow-x',
+    }
+  )[String(isVertical)]
+  const overflow = getStyle(el, key)
+  return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
+}
+
+export const getScrollContainer = (
+  el,
+  isVertical
+) => {
+  if (!isClient) return
+
+  let parent = el
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent))
+      return window
+
+    if (isScroll(parent, isVertical)) return parent
+
+    parent = parent.parentNode
+  }
+
+  return parent
+}
+
+let scrollBarWidth
+export const getScrollBarWidth = (namespace) => {
+  if (!isClient) return 0
+  if (scrollBarWidth !== undefined) return scrollBarWidth
+
+  const outer = document.createElement('div')
+  outer.className = `${namespace}-scrollbar__wrap`
+  outer.style.visibility = 'hidden'
+  outer.style.width = '100px'
+  outer.style.position = 'absolute'
+  outer.style.top = '-9999px'
+  document.body.appendChild(outer)
+
+  const widthNoScroll = outer.offsetWidth
+  outer.style.overflow = 'scroll'
+
+  const inner = document.createElement('div')
+  inner.style.width = '100%'
+  outer.appendChild(inner)
+
+  const widthWithScroll = inner.offsetWidth
+  outer.parentNode?.removeChild(outer)
+  scrollBarWidth = widthNoScroll - widthWithScroll
+
+  return scrollBarWidth
+}
+
+/**
+ * Scroll with in the container element, positioning the **selected** element at the top
+ * of the container
+ */
+export function scrollIntoView (
+  container,
+  selected
+) {
+  if (!isClient) return
+
+  if (!selected) {
+    container.scrollTop = 0
+    return
+  }
+
+  const offsetParents = []
+  let pointer = selected.offsetParent
+  while (
+    pointer !== null &&
+    container !== pointer &&
+    container.contains(pointer)
+  ) {
+    offsetParents.push(pointer )
+    pointer = (pointer ).offsetParent
+  }
+  const top =
+    selected.offsetTop +
+    offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0)
+  const bottom = top + selected.offsetHeight
+  const viewRectTop = container.scrollTop
+  const viewRectBottom = viewRectTop + container.clientHeight
+
+  if (top < viewRectTop) {
+    container.scrollTop = top
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight
+  }
+}

package/src/utils/strings.js

@@ -0,0 +1,17 @@
+/* eslint-disable vue/prefer-import-from-vue */
+import { capitalize as toCapitalize } from '@vue/shared'
+export {
+  camelize,
+  hyphenate,
+  hyphenate as kebabCase, // alias
+} from '@vue/shared'
+
+/**
+ * fork from {@link https://github.com/sindresorhus/escape-string-regexp}
+ */
+export const escapeStringRegexp = (string = '') =>
+  string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')
+
+// NOTE: improve capitalize types. Restore previous code after the [PR](https://github.com/vuejs/core/pull/6212) merge
+export const capitalize = (str) =>
+  toCapitalize(str)

package/src/utils/style.js

@@ -0,0 +1,80 @@
+import { isNumber, isObject, isString, isStringNumber, isClient, camelize, entriesOf, keysOf, debugWarn } from '@/utils'
+
+const SCOPE = 'utils/dom/style'
+
+export const classNameToArray = (cls = '') =>
+  cls.split(' ').filter((item) => !!item.trim())
+
+export const hasClass = (el, cls) => {
+  if (!el || !cls) return false
+  if (cls.includes(' ')) throw new Error('className should not contain space.')
+  return el.classList.contains(cls)
+}
+
+export const addClass = (el, cls) => {
+  if (!el || !cls.trim()) return
+  el.classList.add(...classNameToArray(cls))
+}
+
+export const removeClass = (el, cls) => {
+  if (!el || !cls.trim()) return
+  el.classList.remove(...classNameToArray(cls))
+}
+
+export const getStyle = (
+  element,
+  styleName
+) => {
+  if (!isClient || !element || !styleName) return ''
+
+  let key = camelize(styleName)
+  if (key === 'float') key = 'cssFloat'
+  try {
+    const style = (element.style)[key]
+    if (style) return style
+    const computed = document.defaultView?.getComputedStyle(element, '')
+    return computed ? computed[key] : ''
+  } catch {
+    return (element.style)[key]
+  }
+}
+
+export const setStyle = (
+  element,
+  styleName,
+  value
+) => {
+  if (!element || !styleName) return
+
+  if (isObject(styleName)) {
+    entriesOf(styleName).forEach(([prop, value]) =>
+      setStyle(element, prop, value)
+    )
+  } else {
+    const key = camelize(styleName)
+    element.style[key] = value
+  }
+}
+
+export const removeStyle = (
+  element,
+  style
+) => {
+  if (!element || !style) return
+
+  if (isObject(style)) {
+    keysOf(style).forEach((prop) => removeStyle(element, prop))
+  } else {
+    setStyle(element, style, '')
+  }
+}
+
+export function addUnit (value, defaultUnit = 'px') {
+  if (!value) return ''
+  if (isNumber(value) || isStringNumber(value)) {
+    return `${value}${defaultUnit}`
+  } else if (isString(value)) {
+    return value
+  }
+  debugWarn(SCOPE, 'binding value must be a string or number')
+}

package/src/utils/types.js

@@ -0,0 +1,39 @@
+/* eslint-disable vue/prefer-import-from-vue */
+import { isArray, isObject, isString } from '@vue/shared'
+import { isNil } from 'lodash-unified'
+
+export {
+  isArray,
+  isFunction,
+  isObject,
+  isString,
+  isDate,
+  isPromise,
+  isSymbol,
+} from '@vue/shared'
+export { isVNode } from 'vue'
+
+export const isUndefined = (val) => val === undefined
+export const isBoolean = (val) => typeof val === 'boolean'
+export const isNumber = (val) => typeof val === 'number'
+
+export const isEmpty = (val) =>
+  (!val && val !== 0) ||
+  (isArray(val) && val.length === 0) ||
+  (isObject(val) && !Object.keys(val).length)
+
+export const isElement = (e) => {
+  if (typeof Element === 'undefined') return false
+  return e instanceof Element
+}
+
+export const isPropAbsent = (prop) => {
+  return isNil(prop)
+}
+
+export const isStringNumber = (val) => {
+  if (!isString(val)) {
+    return false
+  }
+  return !Number.isNaN(Number(val))
+}