Float labels timeshare admin

src/components/admin/status/editTimeShareAdminPage.vue

@@ -21,15 +21,18 @@
                   <div class="input-group">
                     <label class="uniSelectLabel" for="weekInfoRegionSelect">REGION</label>
                   </div>
-                  <select
-                    class="form-control uniSelect"
-                    v-model="selectedRegion"
-                    style="font-size: 15px"
-                  >
-                    <option v-for="(region, r) in regions" :key="r" :value="region.regionCode">{{
-                      region.regionName
-                    }}</option>
-                  </select>
+                  <float-label label="REGION" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      v-model="selectedRegion"
+                      style="font-size: 15px"
+                    >
+                      <option v-for="(region, r) in regions" :key="r" :value="region.regionCode">{{
+                        region.regionName
+                      }}</option>
+                    </select>
+                  </float-label>
+
                   <div class="validation"></div>
 
                   <div class="validation"></div>
@@ -48,15 +51,6 @@
                       </select>
                     </float-label>
 
-                    <select class="form-control uniSelect" v-model="selectedResort">
-                      <option value="Other">Other</option>
-                      <option
-                        v-for="(resort, r) in filteredResort"
-                        :key="r"
-                        :value="resort.resortCode"
-                        >{{ resort.resortName }}</option
-                      >
-                    </select>
                     <div class="validation"></div>
                   </div>
                   <div class="validation"></div>
@@ -196,24 +190,28 @@
                   </float-label>
                 </div>
                 <div class="form-row">
-                  <div class="form-group col-md-6">
-                    Arrival Date :
-                    <input
-                      type="date"
-                      class="form-control"
-                      name="occupationDate1"
-                      v-model="dateParam"
-                    />
+                  <div class="form-group col-md-6 mt-2">
+                    <float-label label="ARRIVAL DATE" fixed>
+                      <input
+                        type="date"
+                        class="form-control"
+                        name="occupationDate1"
+                        v-model="dateParam"
+                      />
+                    </float-label>
+
                     <div class="validation"></div>
                   </div>
-                  <div class="form-group col-md-6">
-                    Departure Date :
-                    <input
-                      type="date"
-                      class="form-control"
-                      name="occupationDate2"
-                      v-model="depDateParam"
-                    />
+                  <div class="form-group col-md-6 mt-2">
+                    <float-label label="DEPARTURE DATE" fixed>
+                      <input
+                        type="date"
+                        class="form-control"
+                        name="occupationDate2"
+                        v-model="depDateParam"
+                      />
+                    </float-label>
+
                     <div class="validation"></div>
                   </div>
                   <div class="form-group col-md-6 mt-2">
@@ -390,37 +388,47 @@
             <div class="form">
               <div class="row">
                 <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="status">STATUS</label>
-                  <select
-                    class="form-control uniSelect"
-                    name="status"
-                    id="status"
-                    v-model="weekParam.weekStatus"
+                  <label v-if="!weekParam.weekStatus" class="uniSelectLabel" for="status"
+                    >STATUS</label
                   >
-                    <option :key="0">For Sale</option>
-                    <option :key="1">Sold</option>
-                  </select>
+                  <float-label label="STATUS" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="status"
+                      id="status"
+                      v-model="weekParam.weekStatus"
+                    >
+                      <option :key="0">For Sale</option>
+                      <option :key="1">Sold</option>
+                    </select>
+                  </float-label>
                 </div>
                 <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="publish">Publish</label>
-                  <select
-                    class="form-control uniSelect"
-                    name="publish"
-                    id="publish"
-                    v-model="weekParam.publish"
+                  <label v-if="!weekParam.publish" class="uniSelectLabel" for="publish"
+                    >Publish</label
                   >
-                    <option :key="0" :value="false">No</option>
-                    <option :key="1" :value="true">Yes</option>
-                  </select>
+                  <float-label label="Publish" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="publish"
+                      id="publish"
+                      v-model="weekParam.publish"
+                    >
+                      <option :key="0" :value="false">No</option>
+                      <option :key="1" :value="true">Yes</option>
+                    </select>
+                  </float-label>
                 </div>
-                <div class="form-group col-md-6">
-                  Date Published :
-                  <input
-                    type="date"
-                    class="form-control"
-                    name="publishDate"
-                    v-model="pubDateParam"
-                  />
+                <div class="form-group col-md-6 mt-2">
+                  <float-label label="DATE PUBLISHED" fixed>
+                    <input
+                      type="date"
+                      class="form-control"
+                      name="publishDate"
+                      v-model="pubDateParam"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
               </div>