input component updates in vue3

package.json

@@ -36,7 +36,7 @@
     "vue-notion": "^3.0.0-beta.1",
     "vue-router": "^4.2.5",
     "vue-signature-pad": "^3.0.2",
-    "vue2-editor": "^2.10.3",
+    "vue3-editor": "^0.1.1",
     "vue3-vt-notifications": "^1.0.0",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.1.0"

resources/js/components/forms/RatingInput.vue

@@ -1,14 +1,11 @@
 <template>
-  <div :class="wrapperClass" :style="inputStyle">
+  <input-wrapper
-    <label v-if="label" :for="id?id:name"
+    v-bind="$props"
-           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
   >
-      {{ label }}
+    <template #label>
-      <span v-if="required" class="text-red-500 required-dot">*</span>
+      <slot name="label" />
-    </label>
+    </template>
-    <small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
+
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
-    </small>
 
     <div class="stars-outer">
       <div v-for="i in numberOfStars" :key="i"
@@ -26,25 +23,45 @@
       </div>
     </div>
 
-    <small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
+    <template #help>
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
+      <slot name="help" />
-    </small>
+    </template>
-    <has-error v-if="hasValidation" :form="form" :field="name" />
+    <template #error>
-  </div>
+      <slot name="error" />
+    </template>
+  </input-wrapper>
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input.js'
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
 
 export default {
   name: 'RatingInput',
-
+  components: { InputWrapper },
-  mixins: [inputMixin],
 
   props: {
+    ...inputProps,
     numberOfStars: { type: Number, default: 5 }
   },
 
+  setup (props, context) {
+    const {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    } = useFormInput(props, context)
+
+    return {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    }
+  },
+
+
   data () {
     return {
       hoverRating: -1

resources/js/components/forms/RichTextAreaInput.vue

@@ -1,41 +1,39 @@
 <template>
-  <div :class="wrapperClass">
+  <input-wrapper
-    <label v-if="label" :for="id?id:name"
+    v-bind="$props"
-           :class="[theme.RichTextAreaInput.label, {'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
   >
-      {{ label }}
+    <template #label>
-      <span v-if="required" class="text-red-500 required-dot">*</span>
+      <slot name="label" />
-    </label>
+    </template>
-    <div v-if="help && helpPosition=='above_input'" class="flex mb-1">
+
-      <small :class="theme.RichTextAreaInput.help" class="grow">
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
-      </small>
-    </div>
     <vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled"
                 :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
                 :editor-toolbar="editorToolbar" class="rich-editor resize-y"
                 :style="inputStyle"
     />
 
-    <small v-if="help && helpPosition=='below_input'" :class="theme.RichTextAreaInput.help">
+    <template #help>
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
+      <slot name="help" />
-    </small>
+    </template>
-    <has-error v-if="hasValidation" :form="form" :field="name" />
+    <template #error>
-  </div>
+      <slot name="error" />
+    </template>
+  </input-wrapper>
 </template>
 
 <script>
-import { VueEditor, Quill } from 'vue2-editor'
+import { inputProps, useFormInput } from './useFormInput.js'
-import inputMixin from '~/mixins/forms/input.js'
+import InputWrapper from './components/InputWrapper.vue'
+import { VueEditor, Quill } from 'vue3-editor'
 
 Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
 
 export default {
   name: 'RichTextAreaInput',
-  components: { VueEditor },
+  components: { InputWrapper, VueEditor },
-  mixins: [inputMixin],
 
   props: {
+    ...inputProps,
     editorToolbar: {
       type: Array,
       default: () => {
@@ -47,7 +45,24 @@ export default {
         ]
       }
     }
+  },
+
+  setup (props, context) {
+    const {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    } = useFormInput(props, context)
+
+    return {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
     }
+  }
+
 }
 </script>
 

resources/js/components/forms/SignatureInput.vue

@@ -13,15 +13,12 @@
                      :options="{ onEnd }"
     />
 
-    <div class="flex">
+    <template #bottom_after_help>
       <small :class="theme.default.help">
         <a :class="theme.default.help" href="#" @click.prevent="clear">Clear</a>
       </small>
-    </div>
-
-    <template #help>
-      <slot name="help" />
     </template>
+    
     <template #error>
       <slot name="error" />
     </template>