@namelivia/vue-components 4.5.1 → 4.6.0

package/src/Inputs/ResizeImageUpload/ResizeImageUpload.vue

@@ -12,58 +12,36 @@
     p(v-if="resizing") Resizing...
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue';
 import ImageBlobReduce from 'image-blob-reduce';
-import ImageInput from '../ImageInput/ImageInput.vue'
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "ResizeImageUpload",
-  components: {
-    ImageInput: ImageInput,
-  },
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    dropPlaceholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    file: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      rawImage: null,
-      resizing: false,
-    };
-  },
-  emits: ['loaded', 'error'],
-  methods: {
-    async onInput(file) {
-      try {
-        this.resizing = true;
-        const reduce = new ImageBlobReduce();
-        const blob = await reduce.toBlob(file, { max: 1024 });
-        const newFile = new File([blob], file.name, { type: file.type });
-        this.$emit('loaded', newFile);
-      } catch (err) {
-        this.$emit('error');
-      } finally {
-        this.resizing = false;
-      }
-    },
-  },
+import ImageInput from '../ImageInput/ImageInput.vue';
+
+defineProps({
+  id: String,
+  required: Boolean,
+  placeholder: String,
+  dropPlaceholder: String,
+  label: String,
+  file: Object,
 });
+
+const emit = defineEmits(['loaded', 'error']);
+const resizing = ref(false);
+
+const onInput = async (file) => {
+  try {
+    resizing.value = true;
+    const reduce = new ImageBlobReduce();
+    const blob = await reduce.toBlob(file, { max: 1024 });
+    const newFile = new File([blob], file.name, { type: file.type });
+    emit('loaded', newFile);
+  } catch (err) {
+    emit('error');
+  } finally {
+    resizing.value = false;
+  }
+};
 </script>
 
 <style scoped>

package/src/Inputs/Selector/Selector.vue

@@ -28,59 +28,34 @@ div(class="selector-container")
         )
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Selector",
-  props: {
-    id: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    label: {
-      type: String,
-    },
-    initialValue: {
-      type: String,
-    },
-    options: {
-      type: Array,
-    },
-  },
-  data() {
-    return {
-      selected: '',
-    };
-  },
-  watch: {
-    initialValue: {
-      immediate: true,
-      handler: function (newSelectedValue) {
-        if (newSelectedValue !== "" && newSelectedValue !== undefined) {
-          this.selected = newSelectedValue;
-        }
-      },
-    },
-    options: {
-      immediate: true,
-      handler: function (newOptions) {
-        const enabledOptions = newOptions.filter((option) => !option.disabled);
-        if (enabledOptions.length === 1) {
-          this.selected = enabledOptions[0].value;
-          this.$emit('selected', this.selected);
-        }
-      },
-    },
-  },
-  emits: ['selected'],
-  methods: {
-    onChange() {
-      this.$emit('selected', this.selected);
-    },
-  },
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  id: String,
+  disabled: Boolean,
+  label: String,
+  initialValue: String,
+  options: Array,
 });
+
+const emit = defineEmits(['selected']);
+const selected = ref('');
+
+watch(() => props.initialValue, (newVal) => {
+  if (newVal !== "" && newVal !== undefined) selected.value = newVal;
+}, { immediate: true });
+
+watch(() => props.options, (newOptions) => {
+  if (!newOptions) return;
+  const enabledOptions = newOptions.filter((o) => !o.disabled);
+  if (enabledOptions.length === 1) {
+    selected.value = enabledOptions[0].value;
+    emit('selected', selected.value);
+  }
+}, { immediate: true });
+
+const onChange = () => emit('selected', selected.value);
 </script>
 
 <style scoped>

package/src/Inputs/TextInput/TextInput.vue

@@ -15,37 +15,17 @@ div(class="text-input-container")
   )
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "TextInput",
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-  },
-  emits: ['update'],
-  methods: {
-    onInput(event) {
-      this.$emit('update', event.target.value);
-    },
-  },
+<script setup>
+defineProps({
+  id: String,
+  required: Boolean,
+  disabled: Boolean,
+  placeholder: String,
+  label: String,
+  text: String,
 });
+const emit = defineEmits(['update']);
+const onInput = (event) => emit('update', event.target.value);
 </script>
 
 <style scoped>
@@ -84,4 +64,3 @@ export default defineComponent({
   cursor: not-allowed;
 }
 </style>
-

package/src/Loading/Loading.vue

@@ -7,13 +7,9 @@ div
     div(class="loading-ball red")
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Loading",
-  props: {
-    text: String,
-  },
+<script setup>
+defineProps({
+  text: String,
 });
 </script>
 

package/src/Modal/Modal.vue

@@ -7,23 +7,16 @@ div(class="modal-overlay" v-if="open")
     danger-button.ml-2(@click="onConfirm" text="Yes")
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Modal",
-  emits: ['cancel', 'confirm'],
-  props: {
-    open: Boolean,
-  },
-  methods: {
-    onCancel(evt) {
-      this.$emit('cancel', evt);
-    },
-    onConfirm(evt) {
-      this.$emit('confirm', evt);
-    },
-  },
+<script setup>
+import SecondaryButton from '../Buttons/SecondaryButton/SecondaryButton.vue';
+import DangerButton from '../Buttons/DangerButton/DangerButton.vue';
+
+defineProps({
+  open: Boolean,
 });
+const emit = defineEmits(['cancel', 'confirm']);
+const onCancel = (evt) => emit('cancel', evt);
+const onConfirm = (evt) => emit('confirm', evt);
 </script>
 
 <style scoped>

package/src/Navbar/MobileMenuButton.vue

@@ -19,23 +19,12 @@ button(
     )
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "MobileMenuButton",
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
+<script setup>
+defineProps({
+  open: { type: Boolean, default: false },
 });
+const emit = defineEmits(['click']);
+const onClick = (evt) => emit('click', evt);
 </script>
 
 <style scoped>
@@ -58,4 +47,3 @@ export default defineComponent({
   width: 1.5rem;
 }
 </style>
-

package/src/Navbar/MobileNavigationLink.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: "MobileNavigationLink",
-  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/MobileNavigationLinks.vue

@@ -17,25 +17,12 @@ transition(
         :current="link.current"
       )
 </template>
-<script lang="js">
-import MobileNavigationLink from './MobileNavigationLink.vue'
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "MobileNavigationLinks",
-  components: {
-    MobileNavigationLink: MobileNavigationLink,
-  },
-  props: {
-    links: {
-      type: Array,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+<script setup>
+import MobileNavigationLink from './MobileNavigationLink.vue';
+defineProps({
+  links: Array,
+  open: { type: Boolean, default: false },
+});
 </script>
 <style scoped>
 .fade-scale-enter-active,

package/src/Navbar/Navbar.vue

@@ -17,60 +17,29 @@ nav(class="navbar")
       )
   mobile-navigation-links(:links="links" :open="mobileMenuOpen")
 </template>
-<script lang="js">
-import MobileNavigationLinks from './MobileNavigationLinks.vue'
-import NavigationLinks from './NavigationLinks.vue'
-import NavbarTitle from './NavbarTitle.vue'
-import RightContent from './RightContent.vue'
-import MobileMenuButton from './MobileMenuButton.vue'
+<script setup>
+import { ref } from 'vue';
+import MobileNavigationLinks from './MobileNavigationLinks.vue';
+import NavigationLinks from './NavigationLinks.vue';
+import NavbarTitle from './NavbarTitle.vue';
+import RightContent from './RightContent.vue';
+import MobileMenuButton from './MobileMenuButton.vue';
 
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "Navbar",
-  components: {
-    NavbarTitle: NavbarTitle,
-    NavigationLinks: NavigationLinks,
-    MobileNavigationLinks: MobileNavigationLinks,
-    RightContent: RightContent,
-    MobileMenuButton: MobileMenuButton,
-  },
-  data() {
-    return {
-      mobileMenuOpen: false,
-    }
-  },
-  props: {
-    links: {
-      type: Array,
-    },
-    locale: {
-      type: String,
-    },
-    currentUserEmail: {
-      type: String,
-    },
-    currentUserName: {
-      type: String,
-    },
-    currentUserPicture: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    imageBig: {
-      type: String,
-    },
-    imageSmall: {
-      type: String,
-    },
-  },
-  methods: {
-    onMobileMenuClick() {
-      this.mobileMenuOpen = !this.mobileMenuOpen
-    },
-  }
-})
+defineProps({
+  links: Array,
+  locale: String,
+  currentUserEmail: String,
+  currentUserName: String,
+  currentUserPicture: String,
+  title: String,
+  imageBig: String,
+  imageSmall: String,
+});
+
+const mobileMenuOpen = ref(false);
+const onMobileMenuClick = () => {
+  mobileMenuOpen.value = !mobileMenuOpen.value;
+};
 </script>
 <style scoped>
 .navbar {

package/src/Navbar/NavbarTitle.vue

@@ -11,25 +11,13 @@ a(:href="href" class="title-container")
     :alt="title"
   )
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "NavbarTitle",
-  props: {
-    href: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    imageBig: {
-      type: String,
-    },
-    imageSmall: {
-      type: String,
-    },
-  }
-})
+<script setup>
+defineProps({
+  href: String,
+  title: String,
+  imageBig: String,
+  imageSmall: String,
+});
 </script>
 <style scoped>
 .title-container {

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>