@signal24/vue-foundation 4.7.0 → 4.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.7.0",
+    "version": "4.7.2",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {

package/src/components/modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" class="vf-overlay vf-modal-wrap" :class="props.class" ref="overlay">
+    <div :id="id" class="vf-overlay vf-modal-wrap" :class="classList" ref="overlay">
         <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')" ref="form">
             <div v-if="$slots.header" class="vf-modal-header">
                 <slot name="header" />
@@ -16,7 +16,8 @@
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
+import { compact } from 'lodash';
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { maskForm, unmaskForm } from '../helpers/mask';
 import { dismissOverlayInjectionByInternalInstance } from './overlay-container';
@@ -32,11 +33,17 @@ const props = defineProps<{
 }>();
 
 defineEmits(['formSubmit']);
-defineExpose({ mask, unmask });
+defineExpose({ mask, unmask, hide, unhide });
 
 const overlay = ref<HTMLElement>();
 const form = ref<HTMLFormElement>();
 
+const isHidden = ref(false);
+
+const classList = computed(() => {
+    return compact([props.class, isHidden.value && 'hidden']);
+});
+
 onMounted(() => {
     document.body.classList.add('vf-modal-open');
 
@@ -80,6 +87,14 @@ function mask() {
 function unmask() {
     unmaskForm(form.value!);
 }
+
+function hide() {
+    isHidden.value = true;
+}
+
+function unhide() {
+    isHidden.value = false;
+}
 </script>
 
 <style lang="scss">
@@ -90,6 +105,10 @@ function unmask() {
     width: 100%;
     height: 100%;
     z-index: 100;
+
+    &.hidden {
+        display: none;
+    }
 }
 
 .vf-modal-wrap {

package/src/components/smart-select.vue

@@ -10,6 +10,7 @@
             v-disabled="effectiveDisabled"
             @focus="handleInputFocused"
             @blur="handleInputBlurred"
+            :required="required"
         />
         <div v-if="shouldDisplayOptions" ref="optionsContainer" class="vf-smart-select-options">
             <div v-if="!isLoaded" class="no-results">Loading...</div>
@@ -83,12 +84,12 @@ export default {
         noResultsText: String as PropType<string>,
         disabled: Boolean as PropType<boolean>,
         optionsListId: String as PropType<string>,
-        debug: Boolean as PropType<boolean>
+        debug: Boolean as PropType<boolean>,
+        required: Boolean as PropType<boolean>
     },
 
     emits: {
         optionsLoaded: Object as (options: any[]) => void,
-        createItem: Object as (searchText: string) => void,
         'update:modelValue': Object as (value: any) => void
     },
 
@@ -232,6 +233,7 @@ export default {
 
         options() {
             this.loadedOptions = this.options ?? [];
+            this.isLoaded = true;
         },
 
         // data
@@ -274,7 +276,7 @@ export default {
     },
 
     async mounted() {
-        this.shouldShowCreateOption = this.$attrs['onCreateItem'] !== undefined;
+        this.shouldShowCreateOption = this.onCreateItem !== undefined;
 
         if (this.options) {
             this.loadedOptions = this.options;
@@ -305,13 +307,6 @@ export default {
             this.loadedOptions && this.$emit('optionsLoaded', this.loadedOptions);
         },
 
-        handleSourceUpdate() {
-            if (this.preload) return this.reloadOptions();
-            if (!this.isLoaded) return;
-            this.isLoaded = false;
-            this.loadedOptions = [];
-        },
-
         async reloadOptions() {
             const searchText = this.remoteSearch && this.isSearching && this.searchText ? this.searchText : null;
             this.isLoading = true;
@@ -509,7 +504,7 @@ export default {
                 this.searchText = '';
                 this.selectedOption = null;
                 this.selectedOptionTitle = null;
-                this.$emit('createItem', createText);
+                this.onCreateItem?.(createText);
             } else {
                 const selectedDecoratedOption = this.optionsDescriptors.find(decoratedOption => decoratedOption.key == option.key);
                 const realOption = selectedDecoratedOption!.ref;
@@ -534,7 +529,7 @@ export default {
         },
 
         addRemoteOption(option: GenericObject) {
-            this.loadedOptions.push(option);
+            this.loadedOptions.unshift(option);
         }
     }
 };