diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue index c753588..bd4b99f 100644 --- a/resources/js/components/SMInput.vue +++ b/resources/js/components/SMInput.vue @@ -6,6 +6,7 @@ 'sm-input-active': inputActive, 'sm-feedback-invalid': feedbackInvalid, }, + computedClassType, ]"> - {{ - props.modelValue - }} - {{ props.modelValue }} -
-
+
+
@@ -82,10 +78,6 @@
-
- - {{ help }} -
@@ -107,15 +99,6 @@ const props = defineProps({ default: "", required: false, }, - placeholder: { - type: String, - default: "", - required: false, - }, - required: { - type: Boolean, - default: false, - }, type: { type: String, default: "text", @@ -124,14 +107,6 @@ const props = defineProps({ type: String, default: "", }, - help: { - type: String, - default: "", - }, - helpIcon: { - type: String, - default: "", - }, accept: { type: String, default: "", @@ -168,6 +143,13 @@ const feedbackInvalid = ref(props.feedbackInvalid); const value = ref(props.modelValue); const inputActive = ref(value.value.length > 0 || props.type == "select"); +/** + * Return the classname based on type + */ +const computedClassType = computed(() => { + return `sm-input-${props.type}`; +}); + watch( () => props.label, (newValue) => { @@ -276,10 +258,6 @@ const handleKeydown = (event: Event) => { emits("keydown", event); }; -const inline = computed(() => { - return ["static", "link"].includes(props.type); -}); - const handleMediaSelect = async (event) => { let result = await openDialog(SMDialogMedia); if (result) { @@ -378,19 +356,35 @@ const handleMediaSelect = async (event) => { resize: none; } - .sm-input-media-display { - display: flex; - margin-bottom: 1rem; - border: 1px solid $border-color; - background-color: #fff; + &.sm-input-media { + label { + position: relative; + transform: none; + } + } - img { - max-width: 100%; - max-height: 100%; + .sm-input-media { + text-align: center; + + .sm-input-media-item { + display: block; + margin-bottom: 0.5rem; + + img { + max-width: 100%; + max-height: 100%; + } + + ion-icon { + padding: 4rem; + font-size: 3rem; + border: 1px solid $border-color; + background-color: #fff; + } } - ion-icon { - padding: 4rem; + .button { + display: inline-block; } }