@enso-ui/scroll-to-top 3.0.8 → 4.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,4 +1,4 @@
-# Loader
+# Scroll To Top
 
 ![npm license](https://img.shields.io/npm/l/@enso-ui/scroll-to-top.svg) 
 ![npm download](https://img.shields.io/npm/dm/@enso-ui/scroll-to-top.svg) 
@@ -6,7 +6,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/enso-ui/scroll-to-top.svg) 
 ![npm version](https://img.shields.io/npm/v/@enso-ui/scroll-to-top.svg) 
 
-Simple loader
+Scroll to top control
 
 ## Usage
 The component can be used outside of the Enso ecosystem.
@@ -27,4 +27,4 @@ Thank you to all the people who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+[MIT](https://opensource.org/licenses/MIT)

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@enso-ui/scroll-to-top",
-  "version": "3.0.8",
+  "version": "4.0.0",
   "description": "Scroll To Top",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enso-ui/scroll-to-top.git"
@@ -16,28 +13,17 @@
     "bulma"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/scroll-to-top/issues"
   },
   "homepage": "https://github.com/enso-ui/scroll-to-top#readme",
   "dependencies": {
     "@enso-ui/transitions": "^2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.2.0",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
     "bulma": "^0.9.0",
     "vue": "^3.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.0"
   }
 }

package/src/bulma/ScrollToTop.vue

@@ -2,16 +2,17 @@
     <core-scroll-to-top>
         <template #default="{ visible, type, controlEvents }">
             <zoom>
-                <div class="button scroll-control"
+                <button class="button scroll-control"
                     :class="[type, $attrs.class]"
+                    type="button"
                     v-on="controlEvents"
                     v-if="visible">
                     <slot>
                         <span class="icon is-large">
-                            <fa icon="arrow-alt-circle-up"/>
+                            <fa :icon="faCircleUp"/>
                         </span>
                     </slot>
-                </div>
+                </button>
             </zoom>
         </template>
     </core-scroll-to-top>
@@ -20,41 +21,61 @@
 <script>
 import { Zoom } from '@enso-ui/transitions';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons';
+import { faCircleUp } from '@fortawesome/free-solid-svg-icons';
 import CoreScrollToTop from '../renderless/CoreScrollToTop.vue';
 
-library.add(faArrowAltCircleUp);
-
 export default {
     name: 'ScrollToTop',
 
     components: { CoreScrollToTop, Fa, Zoom },
+
+    data: () => ({
+        faCircleUp,
+    }),
 };
 </script>
 
 <style lang="scss">
-    .scroll-control {
-        z-index: 3;
+    .button.scroll-control {
+        z-index: 41;
         position: fixed;
-        bottom: 3em;
+        bottom: 2.5em;
 
         @media screen and (min-width: 769px) {
             [dir='ltr'] & {
+                left: auto;
                 right: 1.5em;
             }
             [dir='rtl'] & {
+                right: auto;
                 left: 1.5em;
             }
         }
         @media screen and (max-width: 768px) {
             [dir='ltr'] & {
+                left: auto;
                 right: 0.5em;
             }
             [dir='rtl'] & {
+                right: auto;
                 left: 0.5em;
             }
         }
     }
 
+    [data-theme='light'] {
+        .button.scroll-control {
+            color: #fff;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &.is-hovered,
+            &.is-focused,
+            &.is-active {
+                color: #fff;
+            }
+        }
+    }
+
 </style>