@namelivia/vue-components 4.4.5 → 4.6.0

package/src/Navbar/NavigationLink.vue

@@ -2,33 +2,15 @@
 a(:href="linkDestination" :class="linkClass" aria-current="page")
   | {{ text }}
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "NavigationLink",
-  props: {
-    text: {
-      type: String,
-    },
-    href: {
-      type: String,
-    },
-    current: {
-      type: Boolean,
-    },
-  },
-  computed: {
-    linkClass: function () {
-      if (this.current) {
-        return 'current-link'
-      }
-      return 'regular-link'
-    },
-    linkDestination: function () {
-      return this.current ? '#' : this.href
-    },
-  },
-})
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  text: String,
+  href: String,
+  current: Boolean,
+});
+const linkClass = computed(() => props.current ? 'current-link' : 'regular-link');
+const linkDestination = computed(() => props.current ? '#' : props.href);
 </script>
 <style scoped>
 .current-link {

package/src/Navbar/NavigationLinks.vue

@@ -9,21 +9,11 @@ div(class="links-container")
       :current="link.current"
     )
 </template>
-<script lang="js">
-import NavigationLink from './NavigationLink.vue'
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "NavigationLinks",
-  components: {
-    NavigationLink: NavigationLink,
-  },
-  props: {
-    links: {
-      type: Array,
-    },
-  },
-})
+<script setup>
+import NavigationLink from './NavigationLink.vue';
+defineProps({
+  links: Array,
+});
 </script>
 <style scoped>
 .links-container {

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

@@ -24,3 +24,8 @@ export { default as NumberInput } from './Inputs/NumberInput/NumberInput.vue'
 export { default as ImageInput } from './Inputs/ImageInput/ImageInput.vue'
 export { default as ResizeImageUpload } from './Inputs/ResizeImageUpload/ResizeImageUpload.vue'
 export { default as Selector } from './Inputs/Selector/Selector.vue'
+export { default as DropIcon } from './Icons/DropIcon/DropIcon.vue'
+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'