@namelivia/vue-components 4.5.1 → 4.7.0

package/src/Navbar/RightContent.vue

@@ -8,30 +8,15 @@ div(
     :alt="avatarAlt"
   )
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "RightContent",
-  props: {
-    locale: {
-      type: String,
-    },
-    currentUserEmail: {
-      type: String,
-    },
-    currentUserName: {
-      type: String,
-    },
-    currentUserPicture: {
-      type: String,
-    },
-  },
-  computed: {
-    avatarAlt: function () {
-      return this.currentUserName + ` (${this.currentUserEmail})`
-    },
-  },
-})
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  locale: String,
+  currentUserEmail: String,
+  currentUserName: String,
+  currentUserPicture: String,
+});
+const avatarAlt = computed(() => `${props.currentUserName} (${props.currentUserEmail})`);
 </script>
 <style scoped>
 .action-container {

package/src/Pagination/Pagination.vue

@@ -6,21 +6,15 @@ div(class="pagination-container")
     regular-button(:text="nextLabel")
 </template>
 
-<script lang="js">
+<script setup>
 import { default as RegularButton } from '../Buttons/RegularButton/RegularButton.vue';
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Pagination",
-  props: {
-    previousLabel: String,
-    nextLabel: String,
-    showPrevious: Boolean,
-    previousLink: String,
-    nextLink: String,
-  },
-  components: {
-    RegularButton,
-  },
+
+defineProps({
+  previousLabel: String,
+  nextLabel: String,
+  showPrevious: Boolean,
+  previousLink: String,
+  nextLink: String,
 });
 </script>
 

package/src/RangeView/RangeView.vue

@@ -7,13 +7,9 @@ div.ranges-editor
         span.label {{ range.label }}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "RangeView",
-  props: {
-    ranges: Array,
-  },
+<script setup>
+defineProps({
+  ranges: Array,
 });
 </script>
 

package/src/SectionTitle/SectionTitle.vue

@@ -2,15 +2,11 @@
 h1(class="section-title") {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: 'SectionTitle',
-  props: {
-    text: {
-      type: String,
-      default: ''
-    }
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: ''
   }
 });
 </script>

package/src/Spinner/Spinner.vue

@@ -4,11 +4,8 @@ div(class="spinner" role="status")
      | Please wait...
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Spinner",
-});
+<script setup>
+// No logic needed
 </script>
 
 <style scoped>

package/src/StyledTable/StyledTable.vue

@@ -3,11 +3,8 @@ table(class="styled-table")
   slot
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "StyledTable",
-});
+<script setup>
+// No logic needed
 </script>
 
 <style scoped>

package/src/Temperature/Temperature.vue

@@ -12,28 +12,17 @@
     .max
       | {{maxFormatted}} ℃
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "Temperature",
-  props: {
-    title: String,
-    min: Number,
-    max: Number,
-    avg: Number
-  },
-  computed: {
-    minFormatted() {
-      return this.min.toFixed(2);
-    },
-    avgFormatted() {
-      return this.avg.toFixed(2);
-    },
-    maxFormatted() {
-      return this.max.toFixed(2);
-    },
-  },
-})
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  title: String,
+  min: Number,
+  max: Number,
+  avg: Number
+});
+const minFormatted = computed(() => props.min.toFixed(2));
+const avgFormatted = computed(() => props.avg.toFixed(2));
+const maxFormatted = computed(() => props.max.toFixed(2));
 </script>
 <style scoped>
 .wrapper {

package/src/index.js

@@ -29,3 +29,4 @@ export { default as SkullIcon } from './Icons/SkullIcon/SkullIcon.vue'
 export { default as CalendarIcon } from './Icons/CalendarIcon/CalendarIcon.vue'
 export { default as SaveIcon } from './Icons/SaveIcon/SaveIcon.vue'
 export { default as CreateIcon } from './Icons/CreateIcon/CreateIcon.vue'
+export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll.vue'

package/styles/index.css

@@ -109,6 +109,8 @@
   --color-navbar-current-background: hsl(210, 80%, 23%);
   --color-navbar-link-background: hsl(210, 50%, 23%);
   --font-size-navbar: 0.875rem;
+  /* INFINITE SCROLL */
+  --infinite-scroll-sentinel-height: 1px;
 }
 
 .one-theme{