@flyanra/vue-core 1.0.1 → 1.2.0

package/src/styles/element/overrides/form.scss

@@ -1,121 +1,121 @@
-@use 'element-plus/theme-chalk/src/form.scss';
-@use 'element-plus/theme-chalk/src/form-item.scss';
-@use 'element-plus/theme-chalk/src/input.scss';
-@use 'element-plus/theme-chalk/src/input-number.scss';
-@use 'element-plus/theme-chalk/src/input-tag.scss';
-@use './select.scss';
-@use './radio.scss';
-@use 'element-plus/theme-chalk/src/checkbox.scss';
-@use './date-time.scss';
-@use 'element-plus/theme-chalk/src/switch.scss';
-@use 'element-plus/theme-chalk/src/icon.scss';
-
-:root {
-  .el-input,
-  .el-textarea,
-  .el-date-editor {
-    --el-input-border-color: var(--anra-form-input-border);
-  }
-  .el-input-tag,
-  .el-select {
-    --el-border-color: var(--anra-form-input-border);
-  }
-  .el-switch__core {
-    --el-switch-border-color: var(--anra-form-input-border);
-  }
-}
-
-.el-form-item {
-  &__error,
-  .el-form-item__label {
-    --el-color-danger: var(--anra-form-item-error-color);
-  }
-
-  &.hide-label {
-    .el-form-item__label {
-      display: none;
-    }
-  }
-
-  .el-form-item__content {
-    flex-direction: column;
-    align-items: start;
-
-    .el-form-item__error {
-      position: relative;
-    }
-  }
-
-  &.inline-form-item {
-    .el-form-item__label {
-      flex-grow: 1;
-    }
-    .el-form-item__content {
-      flex-basis: auto;
-      flex-grow: 0;
-      flex-shrink: 0;
-    }
-  }
-}
-
-.el-form-item.is-error .el-input__wrapper,
-.el-form-item.is-error .el-input__wrapper:hover,
-.el-form-item.is-error .el-input__wrapper:focus,
-.el-form-item.is-error .el-input__wrapper.is-focus,
-.el-form-item.is-error .el-textarea__inner,
-.el-form-item.is-error .el-textarea__inner:hover,
-.el-form-item.is-error .el-textarea__inner:focus,
-.el-form-item.is-error .el-textarea__inner.is-focus,
-.el-form-item.is-error .el-select__wrapper,
-.el-form-item.is-error .el-select__wrapper:hover,
-.el-form-item.is-error .el-select__wrapper:focus,
-.el-form-item.is-error .el-select__wrapper.is-focus,
-.el-form-item.is-error .el-input-tag__wrapper,
-.el-form-item.is-error .el-input-tag__wrapper:hover,
-.el-form-item.is-error .el-input-tag__wrapper:focus,
-.el-form-item.is-error .el-input-tag__wrapper.is-focus {
-  --el-color-danger: var(--anra-form-item-error-color);
-}
-
-.el-select__wrapper {
-  --el-fill-color-blank: var(--anra-bg-20);
-
-  &.is-disabled {
-    background-color: var(--anra-disabled-bg);
-  }
-}
-
-.el-input-tag {
-  &.el-input-tag__wrapper {
-    background-color: var(--anra-bg-20);
-  }
-  .el-input-tag__input {
-    background-color: var(--anra-bg-20);
-  }
-}
-
-.el-radio-group {
-  &.fill-available-space {
-    width: 100%;
-    display: flex;
-    .el-radio-button {
-      flex: 1;
-      &__inner {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.el-input-number {
-  width: 100%;
-}
-
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-left
-  > .el-form-item__label-wrap
-  > .el-form-item__label:before {
-  font-size: 1rem;
-  line-height: 1px;
-  font-weight: bolder;
-}
+@use 'element-plus/theme-chalk/src/form.scss';
+@use 'element-plus/theme-chalk/src/form-item.scss';
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/input-number.scss';
+@use 'element-plus/theme-chalk/src/input-tag.scss';
+@use './select.scss';
+@use './radio.scss';
+@use 'element-plus/theme-chalk/src/checkbox.scss';
+@use './date-time.scss';
+@use 'element-plus/theme-chalk/src/switch.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';
+
+:root {
+  .el-input,
+  .el-textarea,
+  .el-date-editor {
+    --el-input-border-color: var(--anra-form-input-border);
+  }
+  .el-input-tag,
+  .el-select {
+    --el-border-color: var(--anra-form-input-border);
+  }
+  .el-switch__core {
+    --el-switch-border-color: var(--anra-form-input-border);
+  }
+}
+
+.el-form-item {
+  &__error,
+  .el-form-item__label {
+    --el-color-danger: var(--anra-form-item-error-color);
+  }
+
+  &.hide-label {
+    .el-form-item__label {
+      display: none;
+    }
+  }
+
+  .el-form-item__content {
+    flex-direction: column;
+    align-items: start;
+
+    .el-form-item__error {
+      position: relative;
+    }
+  }
+
+  &.inline-form-item {
+    .el-form-item__label {
+      flex-grow: 1;
+    }
+    .el-form-item__content {
+      flex-basis: auto;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.el-form-item.is-error .el-input__wrapper,
+.el-form-item.is-error .el-input__wrapper:hover,
+.el-form-item.is-error .el-input__wrapper:focus,
+.el-form-item.is-error .el-input__wrapper.is-focus,
+.el-form-item.is-error .el-textarea__inner,
+.el-form-item.is-error .el-textarea__inner:hover,
+.el-form-item.is-error .el-textarea__inner:focus,
+.el-form-item.is-error .el-textarea__inner.is-focus,
+.el-form-item.is-error .el-select__wrapper,
+.el-form-item.is-error .el-select__wrapper:hover,
+.el-form-item.is-error .el-select__wrapper:focus,
+.el-form-item.is-error .el-select__wrapper.is-focus,
+.el-form-item.is-error .el-input-tag__wrapper,
+.el-form-item.is-error .el-input-tag__wrapper:hover,
+.el-form-item.is-error .el-input-tag__wrapper:focus,
+.el-form-item.is-error .el-input-tag__wrapper.is-focus {
+  --el-color-danger: var(--anra-form-item-error-color);
+}
+
+.el-select__wrapper {
+  --el-fill-color-blank: var(--anra-bg-20);
+
+  &.is-disabled {
+    background-color: var(--anra-disabled-bg);
+  }
+}
+
+.el-input-tag {
+  &.el-input-tag__wrapper {
+    background-color: var(--anra-bg-20);
+  }
+  .el-input-tag__input {
+    background-color: var(--anra-bg-20);
+  }
+}
+
+.el-radio-group {
+  &.fill-available-space {
+    width: 100%;
+    display: flex;
+    .el-radio-button {
+      flex: 1;
+      &__inner {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.el-input-number {
+  width: 100%;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left
+  > .el-form-item__label-wrap
+  > .el-form-item__label:before {
+  font-size: 1rem;
+  line-height: 1px;
+  font-weight: bolder;
+}

package/src/styles/element/overrides/message-box.scss

@@ -1,2 +1,2 @@
-@use 'element-plus/theme-chalk/src/overlay.scss' as *;
-@use 'element-plus/theme-chalk/src/message-box.scss' as *;
+@use 'element-plus/theme-chalk/src/overlay.scss' as *;
+@use 'element-plus/theme-chalk/src/message-box.scss' as *;

package/src/styles/element/overrides/radio.scss

@@ -1,2 +1,2 @@
-@use 'element-plus/theme-chalk/src/radio.scss';
-@use 'element-plus/theme-chalk/src/radio-group.scss';
+@use 'element-plus/theme-chalk/src/radio.scss';
+@use 'element-plus/theme-chalk/src/radio-group.scss';

package/src/styles/element/overrides/select.scss

@@ -1,9 +1,9 @@
-@use 'element-plus/theme-chalk/src/select.scss';
-@use 'element-plus/theme-chalk/src/option.scss';
-
-@use 'element-plus/theme-chalk/src/input.scss';
-@use 'element-plus/theme-chalk/src/tag.scss';
-
-@use 'element-plus/theme-chalk/src/popper.scss';
-@use 'element-plus/theme-chalk/src/scrollbar.scss';
-@use 'element-plus/theme-chalk/src/icon.scss';
+@use 'element-plus/theme-chalk/src/select.scss';
+@use 'element-plus/theme-chalk/src/option.scss';
+
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/tag.scss';
+
+@use 'element-plus/theme-chalk/src/popper.scss';
+@use 'element-plus/theme-chalk/src/scrollbar.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { checkRange } from './pure-functions'
+export { checkInputRange, isRequiredError } from './validators'

package/src/utils/pure-functions.ts

@@ -0,0 +1,15 @@
+import { isArray, isNumber, isString } from 'lodash-es'
+
+export function checkRange(value: unknown, min = 0, max = Infinity) {
+  if (isString(value) || isArray(value)) {
+    if (value.length < min || value.length > max) {
+      return false
+    }
+  } else if (isNumber(value)) {
+    if (value < min || value > max) {
+      return false
+    }
+  }
+
+  return true
+}

package/src/utils/validators.ts

@@ -0,0 +1,81 @@
+import type { FormItemRule } from 'element-plus'
+
+import { UseLocaleInjector } from '../composables/UseLocaleInjector'
+
+import { checkRange } from './pure-functions'
+
+export const isRequiredError = (languageKey: string) => {
+  const { t } = UseLocaleInjector()
+
+  return t('validation.fieldIsRequired', {
+    fieldName: t(languageKey)
+  })
+}
+
+type RangeObject = {
+  min?: number
+  max?: number
+}
+export const checkInputRange = (
+  languageKey: string = 'validation.value',
+  range: RangeObject,
+  valueTypeLanguageKey: string = 'validation.valueTypes.characters',
+  errorMessage?: string
+): FormItemRule['validator'] => {
+  const { t } = UseLocaleInjector()
+
+  // used in element form validator
+  return (_rule: unknown, value: unknown, callback: (_?: string | Error | undefined) => void) => {
+    // used in element form validator
+    if (!checkRange(value, range.min, range.max)) {
+      let message = errorMessage
+      const l = t ? t(languageKey) : languageKey
+
+      if (!message) {
+        if (range.min === range.max) {
+          message = `${
+            t
+              ? t('validation.valueMustBe', {
+                  value: l,
+                  validValue: `${range.max} ${t(valueTypeLanguageKey)}`
+                })
+              : 'validation.valueMustBe'
+          }`
+        } else if (range.min && !range.max) {
+          message = `${
+            t
+              ? t('validation.mustBeGreaterEqual', {
+                  value: l,
+                  validRange: `${range.min} ${t(valueTypeLanguageKey)}`
+                })
+              : 'validation.mustBeGreaterEqual'
+          }`
+        } else if (!range.min && range.max) {
+          message = `${
+            t
+              ? t('validation.cannotExceed', {
+                  value: l,
+                  validRange: `${range.max} ${t(valueTypeLanguageKey)}`
+                })
+              : 'validation.cannotExceed'
+          }`
+        } else if (range.min && range.max) {
+          message = `${
+            t
+              ? t('validation.mustBetween', {
+                  value: l,
+                  minRange: `${range.min} ${t(valueTypeLanguageKey)}`,
+                  maxRange: `${range.max} ${t(valueTypeLanguageKey)}`,
+                  valueType: `${t(valueTypeLanguageKey)}`
+                })
+              : 'validation.mustBetween'
+          }`
+        }
+      }
+
+      return callback(new Error(message))
+    }
+
+    return callback()
+  }
+}