@tagplus/components 4.7.12 → 5.1.0

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))
+}

package/src/utils/use-derived-namespace.js

@@ -0,0 +1,112 @@
+import { computed, getCurrentInstance, inject, ref, unref } from 'vue'
+
+export const defaultNamespace = 'el'
+const statePrefix = 'is-'
+
+const _bem = (
+  namespace,
+  block,
+  blockSuffix,
+  element,
+  modifier
+) => {
+  let cls = `${namespace}-${block}`
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`
+  }
+  if (element) {
+    cls += `__${element}`
+  }
+  if (modifier) {
+    cls += `--${modifier}`
+  }
+  return cls
+}
+
+export const namespaceContextKey =
+  Symbol('namespaceContextKey')
+
+export const useGetDerivedNamespace = ( namespaceOverrides) => {
+  const derivedNamespace =
+    namespaceOverrides ||
+    (getCurrentInstance()
+      ? inject(namespaceContextKey, ref(defaultNamespace))
+      : ref(defaultNamespace))
+  const namespace = computed(() => {
+    return unref(derivedNamespace) || defaultNamespace
+  })
+  return namespace
+}
+
+export const useNamespace = ( block, namespaceOverrides) => {
+  const namespace = useGetDerivedNamespace(namespaceOverrides)
+  const b = (blockSuffix = '') =>
+    _bem(namespace.value, block, blockSuffix, '', '')
+  const e = (element) =>
+    element ? _bem(namespace.value, block, '', element, '') : ''
+  const m = (modifier) =>
+    modifier ? _bem(namespace.value, block, '', '', modifier) : ''
+  const be = (blockSuffix, element) =>
+    blockSuffix && element
+      ? _bem(namespace.value, block, blockSuffix, element, '')
+      : ''
+  const em = (element, modifier) =>
+    element && modifier
+      ? _bem(namespace.value, block, '', element, modifier)
+      : ''
+  const bm = (blockSuffix, modifier) =>
+    blockSuffix && modifier
+      ? _bem(namespace.value, block, blockSuffix, '', modifier)
+      : ''
+  const bem = (blockSuffix, element, modifier) =>
+    blockSuffix && element && modifier
+      ? _bem(namespace.value, block, blockSuffix, element, modifier)
+      : ''
+  const is = (name, ...args) => {
+    const state = args.length >= 1 ? args[0] : true
+    return name && state ? `${statePrefix}${name}` : ''
+  }
+
+  // for css var
+  // --el-xxx: value;
+  const cssVar = (object) => {
+    const styles = {}
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${key}`] = object[key]
+      }
+    }
+    return styles
+  }
+  // with block
+  const cssVarBlock = (object) => {
+    const styles = {}
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${block}-${key}`] = object[key]
+      }
+    }
+    return styles
+  }
+
+  const cssVarName = (name) => `--${namespace.value}-${name}`
+  const cssVarBlockName = (name) =>
+    `--${namespace.value}-${block}-${name}`
+
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    // css
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName,
+  }
+}

package/src/utils/use-form-common-props.js

@@ -0,0 +1,41 @@
+import { computed, inject, ref, unref } from 'vue'
+import { useGlobalSize, useProp } from 'element-plus/es/hooks/index'
+import { formContextKey, formItemContextKey } from '@/utils'
+
+export const useFormSize = (
+  fallback,
+  ignore = {}
+) => {
+  const emptyRef = ref(undefined)
+
+  const size = ignore.prop ? emptyRef : useProp('size')
+  const globalConfig = ignore.global ? emptyRef : useGlobalSize()
+  const form = ignore.form
+    ? { size: undefined }
+    : inject(formContextKey, undefined)
+  const formItem = ignore.formItem
+    ? { size: undefined }
+    : inject(formItemContextKey, undefined)
+
+  return computed(
+    () =>
+      size.value ||
+      unref(fallback) ||
+      formItem?.size ||
+      form?.size ||
+      globalConfig.value ||
+      ''
+  )
+}
+
+export const useFormDisabled = (fallback) => {
+  const disabled = useProp('disabled')
+  const form = inject(formContextKey, undefined)
+  return computed(
+    () => disabled.value || unref(fallback) || form?.disabled || false
+  )
+}
+
+// These exports are used for preventing breaking changes
+export const useSize = useFormSize
+export const useDisabled = useFormDisabled

package/src/utils/use-form-item.js

@@ -0,0 +1,80 @@
+/* eslint-disable no-param-reassign */
+import {
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRef,
+  watch,
+} from 'vue'
+import { useId, formContextKey, formItemContextKey } from '@/utils'
+
+export const useFormItem = () => {
+  const form = inject(formContextKey, undefined)
+  const formItem = inject(formItemContextKey, undefined)
+  return {
+    form,
+    formItem,
+  }
+}
+
+export const useFormItemInputId = (
+  props,
+  {
+    formItemContext,
+    disableIdGeneration,
+    disableIdManagement,
+  }
+) => {
+  if (!disableIdGeneration) {
+    disableIdGeneration = ref(false)
+  }
+  if (!disableIdManagement) {
+    disableIdManagement = ref(false)
+  }
+
+  const inputId = ref()
+  let idUnwatch
+
+  const isLabeledByFormItem = computed(() => {
+    return !!(
+      !props.label &&
+      formItemContext &&
+      formItemContext.inputIds &&
+      formItemContext.inputIds?.length <= 1
+    )
+  })
+
+  // Generate id for ElFormItem label if not provided as prop
+  onMounted(() => {
+    idUnwatch = watch(
+      [toRef(props, 'id'), disableIdGeneration],
+      ([id, disableIdGeneration]) => {
+        const newId = id ?? (!disableIdGeneration ? useId().value : undefined)
+        if (newId !== inputId.value) {
+          if (formItemContext?.removeInputId) {
+            inputId.value && formItemContext.removeInputId(inputId.value)
+            if (!disableIdManagement?.value && !disableIdGeneration && newId) {
+              formItemContext.addInputId(newId)
+            }
+          }
+          inputId.value = newId
+        }
+      },
+      { immediate: true }
+    )
+  })
+
+  onUnmounted(() => {
+    idUnwatch && idUnwatch()
+    if (formItemContext?.removeInputId) {
+      inputId.value && formItemContext.removeInputId(inputId.value)
+    }
+  })
+
+  return {
+    isLabeledByFormItem,
+    inputId,
+  }
+}

package/src/utils/use-id.js

@@ -0,0 +1,40 @@
+import { computed, getCurrentInstance, inject, unref } from 'vue'
+import { debugWarn, isClient } from '@/utils'
+import { useGetDerivedNamespace } from '@/utils'
+
+const defaultIdInjection = {
+  prefix: Math.floor(Math.random() * 10000),
+  current: 0,
+}
+
+export const ID_INJECTION_KEY =
+  Symbol('elIdInjection')
+
+export const useIdInjection = () => {
+  return getCurrentInstance()
+    ? inject(ID_INJECTION_KEY, defaultIdInjection)
+    : defaultIdInjection
+}
+
+export const useId = (deterministicId) => {
+  const idInjection = useIdInjection()
+  if (!isClient && idInjection === defaultIdInjection) {
+    debugWarn(
+      'IdInjection',
+      `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
+})`
+    )
+  }
+
+  const namespace = useGetDerivedNamespace()
+  const idRef = computed(
+    () =>
+      unref(deterministicId) ||
+      `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`
+  )
+
+  return idRef
+}

package/src/utils/use-input.js

@@ -0,0 +1,33 @@
+/* eslint-disable vue/prefer-import-from-vue */
+import { ref } from 'vue'
+import { isFunction } from '@vue/shared'
+import { isKorean } from '@/utils'
+
+export function useInput (handleInput = (event) => {}) {
+  const isComposing = ref(false)
+
+  const handleCompositionStart = () => {
+    isComposing.value = true
+  }
+
+  const handleCompositionUpdate = (event) => {
+    const text = event.target.value
+    const lastCharacter = text[text.length - 1] || ''
+    isComposing.value = !isKorean(lastCharacter)
+  }
+
+  const handleCompositionEnd = (event) => {
+    if (isComposing.value) {
+      isComposing.value = false
+      if (isFunction(handleInput)) {
+        handleInput(event)
+      }
+    }
+  }
+
+  return {
+    handleCompositionStart,
+    handleCompositionUpdate,
+    handleCompositionEnd,
+  }
+}

package/src/components/Dialog/Dialog.vue

@@ -1,253 +0,0 @@
-<template>
-  <transition
-    name="dialog-fade"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave"
-  >
-    <div
-      v-show="visible"
-      class="el-dialog__wrapper"
-      @click.self="handleWrapperClick"
-    >
-      <div
-        :key="key"
-        ref="dialog"
-        role="dialog"
-        aria-modal="true"
-        :aria-label="title || 'dialog'"
-        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
-        :style="style"
-      >
-        <div class="el-dialog__header">
-          <slot name="title">
-            <span class="el-dialog__title">{{ title }}</span>
-          </slot>
-          <button
-            v-if="showClose"
-            type="button"
-            class="el-dialog__headerbtn"
-            aria-label="Close"
-            @click="handleClose"
-          >
-            <em class="el-dialog__close el-icon el-icon-close" />
-          </button>
-        </div>
-        <div
-          v-if="rendered"
-          class="el-dialog__body"
-        >
-          <slot />
-        </div>
-        <div
-          v-if="$slots.footer"
-          class="el-dialog__footer"
-        >
-          <slot name="footer" />
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import Popup from 'element-ui/src/utils/popup'
-import Migrating from 'element-ui/src/mixins/migrating'
-import emitter from 'element-ui/src/mixins/emitter'
-
-/**
- * Sobrescreve o Dialog original sem usar o extends porque trocou um watch e watch não sobrescreve
- * <BR /> A nossa versão chama o $emit open quando tem v-if
- */
-export default {
-  name: 'TpDialog',
-
-  mixins: [Popup, emitter, Migrating],
-
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-
-    modal: {
-      type: Boolean,
-      default: true
-    },
-
-    modalAppendToBody: {
-      type: Boolean,
-      default: true
-    },
-
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-
-    closeOnClickModal: {
-      type: Boolean,
-      default: true
-    },
-
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-
-    width: {
-      type: String,
-      default: 'auto'
-    },
-
-    fullscreen: Boolean,
-
-    customClass: {
-      type: String,
-      default: ''
-    },
-
-    top: {
-      type: String,
-      default: '15vh'
-    },
-
-    beforeClose: {
-      type: Function,
-      default: () => {}
-    },
-
-    center: {
-      type: Boolean,
-      default: false
-    },
-
-    destroyOnClose: Boolean
-  },
-
-  data () {
-    return {
-      closed: false,
-      key: 0
-    }
-  },
-
-  computed: {
-    style () {
-      const style = {}
-
-      if (!this.fullscreen) {
-        style.marginTop = this.top
-
-        if (this.width) {
-          style.width = this.width
-        }
-      }
-
-      return style
-    }
-  },
-
-  watch: {
-    // CORREÇÂO Sobrescreve o watch visible do dialog original para rodar o open quando tem v-if
-    visible: {
-      immediate: true,
-      handler (val, oldValue) {
-        // Fixing undefined reference of $el with next tick.
-        this.$nextTick(() => {
-          if (val) {
-            this.closed = false
-            this.$emit('open')
-            this.$el.addEventListener('scroll', this.updatePopper)
-            this.$nextTick(() => {
-              if (this.$refs?.dialog) {
-                this.$refs.dialog.scrollTop = 0
-              }
-            })
-
-            if (this.appendToBody) {
-              document.body.appendChild(this.$el)
-            }
-          } else {
-            this.$el.removeEventListener('scroll', this.updatePopper)
-
-            if (!this.closed) this.$emit('close')
-
-            if (this.destroyOnClose) {
-              this.$nextTick(() => {
-                this.key++
-              })
-            }
-          }
-        })
-      }
-    }
-  },
-
-  mounted () {
-    if (this.visible) {
-      this.rendered = true
-      this.open()
-
-      if (this.appendToBody) {
-        document.body.appendChild(this.$el)
-      }
-    }
-  },
-
-  destroyed () {
-    // if appendToBody is true, remove DOM node after destroy
-    if (this.appendToBody && this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-    }
-  },
-
-  methods: {
-    getMigratingConfig () {
-      return {
-        props: {
-          size: 'size is removed.'
-        }
-      }
-    },
-    handleWrapperClick () {
-      if (!this.closeOnClickModal) return
-
-      this.handleClose()
-    },
-    handleClose () {
-      if (typeof this.beforeClose === 'function') {
-        this.beforeClose(this.hide)
-      } else {
-        this.hide()
-      }
-    },
-    hide (cancel) {
-      if (cancel !== false) {
-        this.$emit('update:visible', false)
-        this.$emit('close')
-        this.closed = true
-      }
-    },
-    updatePopper () {
-      this.broadcast('ElSelectDropdown', 'updatePopper')
-      this.broadcast('ElDropdownMenu', 'updatePopper')
-    },
-    afterEnter () {
-      this.$emit('opened')
-    },
-    afterLeave () {
-      this.$emit('closed')
-    }
-  }
-}
-</script>

package/src/components/Dialog/index.js

@@ -1,3 +0,0 @@
-import Dialog from './Dialog'
-
-export default Dialog