@flyanra/vue-core 0.3.0 → 0.4.1

package/src/styles/core/index.scss

@@ -1,36 +1,36 @@
-@use './animations.scss' as *;
-@use './scrollbar.scss' as *;
-@use './typography-utils.scss' as *;
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  background: var(--background-dark-20);
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  word-break: normal;
-}
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.25s ease-out;
-}
-
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-30px);
-}
+@use './animations.scss' as *;
+@use './scrollbar.scss' as *;
+@use './typography-utils.scss' as *;
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--background-dark-20);
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  word-break: normal;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}

package/src/styles/core/scrollbar.scss

@@ -1,36 +1,36 @@
-html {
-  body {
-    scroll-behavior: smooth;
-
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 5px;
-    }
-
-    /* Track */
-    ::-webkit-scrollbar-track {
-      background: transparent;
-      border-radius: 10px;
-    }
-
-    /* Handle */
-    ::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-    }
-  }
-}
-
-html.dark,
-html.light {
-  body {
-    /* Handle */
-    ::-webkit-scrollbar-thumb {
-      background: var(--anra-border-color);
-    }
-
-    /* Handle on hover */
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(--anra-primary);
-    }
-  }
-}
+html {
+  body {
+    scroll-behavior: smooth;
+
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 5px;
+    }
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 10px;
+    }
+
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+  }
+}
+
+html.dark,
+html.light {
+  body {
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: var(--anra-border-color);
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--anra-primary);
+    }
+  }
+}

package/src/styles/core/typography-utils.scss

@@ -1,9 +1,9 @@
-.simple-metadata {
-  background: var(--anra-bg-20);
-  padding: 0px 5px;
-  border-radius: 5px;
-
-  &.bg-15 {
-    background: var(--anra-bg-15);
-  }
-}
+.simple-metadata {
+  background: var(--anra-bg-20);
+  padding: 0px 5px;
+  border-radius: 5px;
+
+  &.bg-15 {
+    background: var(--anra-bg-15);
+  }
+}

package/src/styles/element/common.scss

@@ -1,56 +1,56 @@
-@use '../scss-tokens' as *;
-
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': $anra-primary-dark
-    )
-  ),
-  $border-color: (
-    '': $anra-light-border-color
-  ),
-  $fill-color: (
-    'light': $anra-light-fill-color-light
-  ),
-  $date-editor: (
-    'width': 100%
-  ),
-  $select-dropdown: (
-    'border': 1px solid var(--anra-border-color)
-  ),
-  $datepicker: (
-    'inner-border-color': var(--anra-border-color)
-  ),
-  $collapse: (
-    'border-color': var(--anra-border-color),
-    'header-height': auto
-  ),
-  $table: (
-    'header-bg-color': transparent,
-    'tr-bg-color': transparent,
-    'border-color': var(--dark-15-accent-1)
-  ),
-  $checkbox: (
-    'checked-icon-color': var(--anra-black),
-    'bg-color': var(--anra-bg-20)
-  ),
-  $radio-button: (
-    'checked-text-color': var(--anra-black)
-  ),
-  $disabled: (
-    'bg-color': var(--anra-disabled-bg)
-  ),
-  $loading: (
-    'fullscreen-spinner-size': 30px
-  ),
-  $dialog: (
-    'bg-color': var(--anra-bg-15)
-  ),
-  $input: (
-    'bg-color': var(--anra-bg-20),
-    'border-color': var(--anra-form-input-border)
-  ),
-  $menu: (
-    'bg-color': var(--anra-bg-20)
-  )
-);
+@use '../scss-tokens' as *;
+
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': $anra-primary-dark
+    )
+  ),
+  $border-color: (
+    '': $anra-light-border-color
+  ),
+  $fill-color: (
+    'light': $anra-light-fill-color-light
+  ),
+  $date-editor: (
+    'width': 100%
+  ),
+  $select-dropdown: (
+    'border': 1px solid var(--anra-border-color)
+  ),
+  $datepicker: (
+    'inner-border-color': var(--anra-border-color)
+  ),
+  $collapse: (
+    'border-color': var(--anra-border-color),
+    'header-height': auto
+  ),
+  $table: (
+    'header-bg-color': transparent,
+    'tr-bg-color': transparent,
+    'border-color': var(--dark-15-accent-1)
+  ),
+  $checkbox: (
+    'checked-icon-color': var(--anra-black),
+    'bg-color': var(--anra-bg-20)
+  ),
+  $radio-button: (
+    'checked-text-color': var(--anra-black)
+  ),
+  $disabled: (
+    'bg-color': var(--anra-disabled-bg)
+  ),
+  $loading: (
+    'fullscreen-spinner-size': 30px
+  ),
+  $dialog: (
+    'bg-color': var(--anra-bg-15)
+  ),
+  $input: (
+    'bg-color': var(--anra-bg-20),
+    'border-color': var(--anra-form-input-border)
+  ),
+  $menu: (
+    'bg-color': var(--anra-bg-20)
+  )
+);

package/src/styles/element/dark.scss

@@ -1,38 +1,38 @@
-@use '../scss-tokens' as *;
-
-@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': $anra-primary
-    ),
-    'danger': (
-      'base': $anra-dark-state-danger
-    ),
-    'error': (
-      'base': $anra-dark-state-error
-    ),
-    'info': (
-      'base': $anra-dark-state-info
-    ),
-    'success': (
-      'base': $anra-dark-state-success
-    )
-  ),
-  $bg-color: (
-    '': $anra-dark-bg-20,
-    'overlay': $anra-dark-bg-20
-  ),
-  $border-color: (
-    '': $anra-dark-border-color,
-    'light': $anra-dark-border-color-light
-  ),
-  $fill-color: (
-    'light': $anra-dark-fill-color-light
-  ),
-  $text-color: (
-    'placeholder': $anra-dark-text-placeholder
-  ),
-  $mask-color: (
-    '': $anra-dark-mask-color
-  )
-);
+@use '../scss-tokens' as *;
+
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': $anra-primary
+    ),
+    'danger': (
+      'base': $anra-dark-state-danger
+    ),
+    'error': (
+      'base': $anra-dark-state-error
+    ),
+    'info': (
+      'base': $anra-dark-state-info
+    ),
+    'success': (
+      'base': $anra-dark-state-success
+    )
+  ),
+  $bg-color: (
+    '': $anra-dark-bg-20,
+    'overlay': $anra-dark-bg-20
+  ),
+  $border-color: (
+    '': $anra-dark-border-color,
+    'light': $anra-dark-border-color-light
+  ),
+  $fill-color: (
+    'light': $anra-dark-fill-color-light
+  ),
+  $text-color: (
+    'placeholder': $anra-dark-text-placeholder
+  ),
+  $mask-color: (
+    '': $anra-dark-mask-color
+  )
+);

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

@@ -1,61 +1,61 @@
-@mixin el-collapse-operation-style {
-  .el-collapse-item {
-    &__header {
-      padding: 0.5rem 0rem 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 0rem 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/mixins/dialog.scss

@@ -1,101 +1,101 @@
-@mixin el-dialog-max-w-max-h {
-  --modal-padding-top: 30px;
-
-  .el-overlay-dialog {
-    .el-dialog {
-      --el-dialog-width: 90%;
-
-      height: calc(100% - var(--modal-padding-top));
-    }
-  }
-}
-
-@mixin el-dialog-max-h {
-  --modal-padding-top: 30px;
-
-  .el-overlay-dialog {
-    .el-dialog {
-      height: calc(100% - var(--modal-padding-top));
-    }
-  }
-}
-
-@mixin el-dialog-card-medium {
-  --modal-padding-top: 30px;
-
-  .el-overlay-dialog {
-    .el-dialog {
-      --el-dialog-width: 90%;
-
-      max-width: 500px;
-      height: auto;
-      max-height: calc(100% - var(--modal-padding-top));
-    }
-  }
-}
-
-@mixin el-dialog-card-large {
-  @include el-dialog-card-medium;
-
-  .el-overlay-dialog {
-    .el-dialog {
-      --el-dialog-width: 90%;
-
-      max-width: 900px;
-    }
-  }
-}
-
-@mixin el-dialog-allow-body-scroll {
-  .el-overlay-dialog {
-    .el-dialog {
-      &__body {
-        overflow: auto;
-      }
-    }
-  }
-}
-
-@mixin el-dialog-operation-details-style {
-  .el-overlay-dialog {
-    padding-top: var(--modal-padding-top);
-    .el-dialog {
-      margin: 0 auto;
-      overflow: hidden;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      &__header {
-        padding-bottom: 0;
-        flex-shrink: 0;
-        border-bottom: 1px solid var(--anra-border-color);
-      }
-      &__body {
-        flex-grow: 1;
-        overflow: hidden;
-
-        .app-scroll-effect {
-          &__scroll-box {
-            padding: 0.75rem 1rem;
-          }
-        }
-      }
-      &__footer {
-        padding: 0.75rem 1rem;
-        flex-shrink: 0;
-        border-top: 1px solid var(--anra-border-color);
-      }
-    }
-  }
-}
-
-@mixin el-dialog-hide-header {
-  .el-overlay-dialog {
-    .el-dialog {
-      &__header {
-        display: none;
-      }
-    }
-  }
-}
+@mixin el-dialog-max-w-max-h {
+  --modal-padding-top: 30px;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      --el-dialog-width: 90%;
+
+      height: calc(100% - var(--modal-padding-top));
+    }
+  }
+}
+
+@mixin el-dialog-max-h {
+  --modal-padding-top: 30px;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      height: calc(100% - var(--modal-padding-top));
+    }
+  }
+}
+
+@mixin el-dialog-card-medium {
+  --modal-padding-top: 30px;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      --el-dialog-width: 90%;
+
+      max-width: 500px;
+      height: auto;
+      max-height: calc(100% - var(--modal-padding-top));
+    }
+  }
+}
+
+@mixin el-dialog-card-large {
+  @include el-dialog-card-medium;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      --el-dialog-width: 90%;
+
+      max-width: 900px;
+    }
+  }
+}
+
+@mixin el-dialog-allow-body-scroll {
+  .el-overlay-dialog {
+    .el-dialog {
+      &__body {
+        overflow: auto;
+      }
+    }
+  }
+}
+
+@mixin el-dialog-operation-details-style {
+  .el-overlay-dialog {
+    padding-top: var(--modal-padding-top);
+    .el-dialog {
+      margin: 0 auto;
+      overflow: hidden;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      &__header {
+        padding-bottom: 0;
+        flex-shrink: 0;
+        border-bottom: 1px solid var(--anra-border-color);
+      }
+      &__body {
+        flex-grow: 1;
+        overflow: hidden;
+
+        .app-scroll-effect {
+          &__scroll-box {
+            padding: 0.75rem 1rem;
+          }
+        }
+      }
+      &__footer {
+        padding: 0.75rem 1rem;
+        flex-shrink: 0;
+        border-top: 1px solid var(--anra-border-color);
+      }
+    }
+  }
+}
+
+@mixin el-dialog-hide-header {
+  .el-overlay-dialog {
+    .el-dialog {
+      &__header {
+        display: none;
+      }
+    }
+  }
+}