@flyanra/vue-core 1.0.2 → 1.2.1

package/src/styles/_scss-tokens.scss

@@ -1,76 +1,76 @@
 // global colors
-$anra-primary: #58baa8;
-$anra-primary-dark: #15826e;
-$anra-primary-accent: #57baa7;
-$anra-black: #000000;
-$anra-white: #ffffff;
+$anra-primary: #58baa8 !default;
+$anra-primary-dark: #15826e !default;
+$anra-primary-accent: #57baa7 !default;
+$anra-black: #000000 !default;
+$anra-white: #ffffff !default;
 
 // dark theme
-$anra-dark-dynamic-light: #ffffff;
-$anra-dark-dynamic-dark: #000000;
-$anra-dark-default-text-color: #cfd3dc;
-$anra-dark-bg-10: #29555a;
-$anra-dark-bg-15: #274452;
-$anra-dark-bg-15-accent: #253e4a;
-$anra-dark-bg-15-accent-1: #395969;
-$anra-dark-bg-20: #18323f;
-$anra-dark-bg-20-rgb: 24, 50, 63;
-$anra-dark-bg-20-subtitle: #c7c7c7;
-$anra-dark-bg-25: #19282f;
-$anra-dark-bg-blue-50: #293470;
-$anra-dark-state-danger: #ff0e0e;
-$anra-dark-state-error: #ff0e0e;
-$anra-dark-state-error-lighter: #e76f6f;
-$anra-dark-state-error-lighter-50: #ffa5a5;
-$anra-dark-state-success: #068c53;
-$anra-dark-state-info: #6a7174;
-$anra-dark-state-info-lighter: #c0c9cd;
-$anra-dark-state-warning: #ffc427;
-$anra-dark-state-warning-50: #896a3d;
-$anra-dark-text-placeholder: #b3b7bf;
-$anra-dark-border-color: #4f626c;
-$anra-dark-border-color-light: #616161;
-$anra-dark-fill-color-light: #405661;
-$anra-dark-mask-color: rgba(24, 50, 63, 0.79);
-$anra-dark-scroll-shadow: #02020224;
-$anra-dark-disabled-bg: #1f3845;
-$anra-dark-form-item-error-color: #ffcac9;
-$anra-dark-tag-info-bg: #344b56;
-$anra-dark-form-input-border: #979797;
-$anra-dark-text-on-primary: black;
-$anra-dark-text-subtle: #99a1af;
+$anra-dark-dynamic-light: #ffffff !default;
+$anra-dark-dynamic-dark: #000000 !default;
+$anra-dark-default-text-color: #cfd3dc !default;
+$anra-dark-bg-10: #29555a !default;
+$anra-dark-bg-15: #274452 !default;
+$anra-dark-bg-15-accent: #253e4a !default;
+$anra-dark-bg-15-accent-1: #395969 !default;
+$anra-dark-bg-20: #18323f !default;
+$anra-dark-bg-20-rgb: 24, 50, 63 !default;
+$anra-dark-bg-20-subtitle: #c7c7c7 !default;
+$anra-dark-bg-25: #19282f !default;
+$anra-dark-bg-blue-50: #293470 !default;
+$anra-dark-state-danger: #ff0e0e !default;
+$anra-dark-state-error: #ff0e0e !default;
+$anra-dark-state-error-lighter: #e76f6f !default;
+$anra-dark-state-error-lighter-50: #ffa5a5 !default;
+$anra-dark-state-success: #068c53 !default;
+$anra-dark-state-info: #6a7174 !default;
+$anra-dark-state-info-lighter: #c0c9cd !default;
+$anra-dark-state-warning: #ffc427 !default;
+$anra-dark-state-warning-50: #896a3d !default;
+$anra-dark-text-placeholder: #b3b7bf !default;
+$anra-dark-border-color: #4f626c !default;
+$anra-dark-border-color-light: #616161 !default;
+$anra-dark-fill-color-light: #405661 !default;
+$anra-dark-mask-color: rgba(24, 50, 63, 0.79) !default;
+$anra-dark-scroll-shadow: #02020224 !default;
+$anra-dark-disabled-bg: #1f3845 !default;
+$anra-dark-form-item-error-color: #ffcac9 !default;
+$anra-dark-tag-info-bg: #344b56 !default;
+$anra-dark-form-input-border: #979797 !default;
+$anra-dark-text-on-primary: black !default;
+$anra-dark-text-subtle: #99a1af !default;
 
 // light theme
-$anra-light-dynamic-light: #000000;
-$anra-light-dynamic-dark: #ffffff;
-$anra-light-default-text-color: #1a1f24;
-$anra-light-bg-10: #f1f5f6;
-$anra-light-bg-15: #ffffff;
-$anra-light-bg-15-accent: #f2f2f2;
-$anra-light-bg-15-accent-1: #d9e3e6;
-$anra-light-bg-20: #f4f5f7;
-$anra-light-bg-20-rgb: 244, 245, 247;
-$anra-light-bg-20-subtitle: #4c5a66;
-$anra-light-bg-25: #c7d3d8;
-$anra-light-bg-blue-50: #dbe3f0;
-$anra-light-state-danger: #d60000;
-$anra-light-state-error: #d60000;
-$anra-light-state-error-lighter: #ef7a7a;
-$anra-light-state-error-lighter-50: #f7bcbc;
-$anra-light-state-success: #068c53;
-$anra-light-state-info: #5a6367;
-$anra-light-state-info-lighter: #5b6164;
-$anra-light-state-warning: #dca217;
-$anra-light-state-warning-50: #b88c3c;
-$anra-light-text-placeholder: #8a929a;
-$anra-light-border-color: #cad4d9;
-$anra-light-border-color-light: #e0e4e5;
-$anra-light-fill-color-light: #f3f6f7;
-$anra-light-mask-color: rgba(208, 218, 222, 0.6);
-$anra-light-scroll-shadow: #00000012;
-$anra-light-disabled-bg: #e6ecef;
-$anra-light-form-item-error-color: #d68080;
-$anra-light-tag-info-bg: #e4ecef;
-$anra-light-form-input-border: #969696;
-$anra-light-text-on-primary: black;
-$anra-light-text-subtle: #000000;
+$anra-light-dynamic-light: #000000 !default;
+$anra-light-dynamic-dark: #ffffff !default;
+$anra-light-default-text-color: #1a1f24 !default;
+$anra-light-bg-10: #f1f5f6 !default;
+$anra-light-bg-15: #ffffff !default;
+$anra-light-bg-15-accent: #f2f2f2 !default;
+$anra-light-bg-15-accent-1: #d9e3e6 !default;
+$anra-light-bg-20: #f4f5f7 !default;
+$anra-light-bg-20-rgb: 244, 245, 247 !default;
+$anra-light-bg-20-subtitle: #4c5a66 !default;
+$anra-light-bg-25: #c7d3d8 !default;
+$anra-light-bg-blue-50: #dbe3f0 !default;
+$anra-light-state-danger: #d60000 !default;
+$anra-light-state-error: #d60000 !default;
+$anra-light-state-error-lighter: #ef7a7a !default;
+$anra-light-state-error-lighter-50: #f7bcbc !default;
+$anra-light-state-success: #068c53 !default;
+$anra-light-state-info: #5a6367 !default;
+$anra-light-state-info-lighter: #5b6164 !default;
+$anra-light-state-warning: #dca217 !default;
+$anra-light-state-warning-50: #b88c3c !default;
+$anra-light-text-placeholder: #8a929a !default;
+$anra-light-border-color: #cad4d9 !default;
+$anra-light-border-color-light: #e0e4e5 !default;
+$anra-light-fill-color-light: #f3f6f7 !default;
+$anra-light-mask-color: rgba(208, 218, 222, 0.6) !default;
+$anra-light-scroll-shadow: #00000012 !default;
+$anra-light-disabled-bg: #e6ecef !default;
+$anra-light-form-item-error-color: #d68080 !default;
+$anra-light-tag-info-bg: #e4ecef !default;
+$anra-light-form-input-border: #969696 !default;
+$anra-light-text-on-primary: black !default;
+$anra-light-text-subtle: #000000 !default;

package/src/styles/element/mixins/collapse.scss

@@ -1,61 +1,61 @@
-@mixin el-collapse-operation-style {
-  .el-collapse-item {
-    &__header {
-      padding: 0.5rem 0.5rem 0.5rem 0rem;
-      min-height: 48px;
-      text-align: left;
-    }
-    &__content {
-      background: var(--anra-bg-15-accent);
-    }
-  }
-}
-
-@mixin el-collapse-advisory-style {
-  .el-collapse-item {
-    border-bottom: 10px solid transparent;
-    &__header {
-      border-top: 1px solid var(--el-collapse-border-color);
-    }
-    &__content {
-      background: var(--anra-bg-20);
-      padding-bottom: 0;
-    }
-    &.is-disabled {
-      .el-collapse-item {
-        &__header {
-          color: var(--default-text-color);
-        }
-        &__arrow {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-}
-
-@mixin el-airspace-layer-style {
-  .el-collapse-item {
-    border-bottom: 10px solid transparent;
-    &__header {
-      padding: 0.25rem 0.5rem 0.25rem 0rem;
-      // min-height: 30px;
-      text-align: left;
-      border-top: 1px solid var(--el-collapse-border-color);
-    }
-    &__content {
-      background: var(--anra-bg-15-accent);
-      padding-bottom: 0;
-    }
-    &.is-disabled {
-      .el-collapse-item {
-        &__header {
-          color: var(--default-text-color);
-        }
-        &__arrow {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-}
+@mixin el-collapse-operation-style {
+  .el-collapse-item {
+    &__header {
+      padding: 0.5rem 0.5rem 0.5rem 0rem;
+      min-height: 48px;
+      text-align: left;
+    }
+    &__content {
+      background: var(--anra-bg-15-accent);
+    }
+  }
+}
+
+@mixin el-collapse-advisory-style {
+  .el-collapse-item {
+    border-bottom: 10px solid transparent;
+    &__header {
+      border-top: 1px solid var(--el-collapse-border-color);
+    }
+    &__content {
+      background: var(--anra-bg-20);
+      padding-bottom: 0;
+    }
+    &.is-disabled {
+      .el-collapse-item {
+        &__header {
+          color: var(--default-text-color);
+        }
+        &__arrow {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+@mixin el-airspace-layer-style {
+  .el-collapse-item {
+    border-bottom: 10px solid transparent;
+    &__header {
+      padding: 0.25rem 0.5rem 0.25rem 0rem;
+      // min-height: 30px;
+      text-align: left;
+      border-top: 1px solid var(--el-collapse-border-color);
+    }
+    &__content {
+      background: var(--anra-bg-15-accent);
+      padding-bottom: 0;
+    }
+    &.is-disabled {
+      .el-collapse-item {
+        &__header {
+          color: var(--default-text-color);
+        }
+        &__arrow {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}

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/styles/index.scss

@@ -1,4 +1,4 @@
-@use './tokens.scss';
+@forward './tokens';
 @use './element/common.scss' as *;
 @use 'element-plus/theme-chalk/src/var.scss' as *;
 @use './element/dark.scss' as *;

package/src/styles/tokens.scss

@@ -1,3 +1,4 @@
+@forward './scss-tokens';
 @use './scss-tokens' as vars;
 
 // Apply SCSS variables

package/src/utils/index.ts

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

package/src/utils/pure-functions.ts

@@ -1,15 +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
-}
+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
+}