Merge branch 'release/4.1.34'

* release/4.1.34:
  compile assets
  compile assets
  updates the changelog
  refactored the default template stubs to a more utility-focused style
  compile assets
  compile assets
  refactored the components and added stricter prop definitions
  refactored components to better align with the official style guide
  compile assets

changelog.md

@@ -1,5 +1,10 @@
 # Release Notes
 
+## [v4.1.34](https://github.com/cnvs/canvas/compare/v4.1.33...v4.1.34)
+
+### Changed
+- Refactored Vue components to better align with the official style guide ([6c27729](https://github.com/cnvs/canvas/commit/6c2772926320e25a7f550d7da427772526465df2), [4fbc257](https://github.com/cnvs/canvas/commit/4fbc257c249538d6c7b52ddbf04af08b6d2735b1))
+
 ## [v4.1.33](https://github.com/cnvs/canvas/compare/v4.1.32...v4.1.33)
 
 ### Changed

package.json

@@ -16,7 +16,7 @@
     "axios": "^0.18",
     "bootstrap": "^4.3.1",
     "cross-env": "^5.1",
-    "jquery": "^3.2",
+    "jquery": "^3.4",
     "laravel-mix": "^4.0.7",
     "lodash": "^4.17.5",
     "moment": "^2.10.6",

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/app.js": "/js/app.js?id=553ba38f897b66033f59",
-    "/css/app.css": "/css/app.css?id=f67fa09e4165d6153c77",
-    "/css/app-dark.css": "/css/app-dark.css?id=96b402438f4da22bea87",
-    "/js/app.js.map": "/js/app.js.map?id=b7f98d7679604b9b27ff",
+    "/js/app.js": "/js/app.js?id=159f59e3d274956c3894",
+    "/css/app.css": "/css/app.css?id=eb7fb7a5d8ba4b6dd0a4",
+    "/css/app-dark.css": "/css/app-dark.css?id=799369a3e5ded6772726",
+    "/js/app.js.map": "/js/app.js.map?id=fc726c7fae58998005ae",
     "/favicon.ico": "/favicon.ico?id=dbb0c05daa3432643753"
 }

resources/js/components/DateTimePicker.vue

@@ -1,4 +1,43 @@
-<script type="text/ecmascript-6">
+<template>
+    <div v-cloak>
+        <div class="d-flex flex-row">
+            <select class="input pr-2"
+                    v-model="dateComponents.month">
+                <option v-for="value in Array.from({length: 12}, (_, i) => String(i + 1).padStart(2, '0'))"
+                        :value="value">{{ value }}
+                </option>
+            </select>
+            <span class="px-1">/</span>
+            <select class="input px-2" v-model="dateComponents.day">
+                <option v-for="value in Array.from({length: 31}, (_, i) => String(i + 1).padStart(2, '0'))"
+                        :value="value">{{ value }}
+                </option>
+            </select>
+            <span class="px-1">/</span>
+            <select class="input px-2" v-model="dateComponents.year">
+                <option v-for="value in Array.from({length: 15}, (_, i) => i + (new Date()).getFullYear() - 10)"
+                        :value="value">{{ value }}
+                </option>
+            </select>
+            <span class="pl-3"> </span>
+            <select class="input px-2" v-model="dateComponents.hour">
+                <option v-for="value in Array.from({length: 24}, (_, i) => String(i).padStart(2, '0'))" :value="value">
+                    {{ value }}
+                </option>
+            </select>
+            <span class="px-1">:</span>
+            <select class="input pl-2" v-model="dateComponents.minute">
+                <option v-for="value in Array.from({length: 60}, (_, i) => String(i).padStart(2, '0'))" :value="value">
+                    {{ value }}
+                </option>
+            </select>
+        </div>
+
+        <input hidden type="hidden" name="published_at" v-model="result">
+    </div>
+</template>
+
+<script>
     import moment from 'moment'
 
     /**
@@ -7,7 +46,12 @@
      * @author Mohamed Said <[email protected]>
      */
     export default {
-        props: ['value'],
+        props: {
+            value: {
+                type: String,
+                required: true
+            }
+        },
 
         data() {
             return {
@@ -58,45 +102,6 @@
     }
 </script>
 
-<template>
-    <div>
-        <div class="d-flex flex-row">
-            <select class="input pr-2"
-                    v-model="dateComponents.month">
-                <option v-for="value in Array.from({length: 12}, (_, i) => String(i + 1).padStart(2, '0'))"
-                        :value="value">{{ value }}
-                </option>
-            </select>
-            <span class="px-1">/</span>
-            <select class="input px-2" v-model="dateComponents.day">
-                <option v-for="value in Array.from({length: 31}, (_, i) => String(i + 1).padStart(2, '0'))"
-                        :value="value">{{ value }}
-                </option>
-            </select>
-            <span class="px-1">/</span>
-            <select class="input px-2" v-model="dateComponents.year">
-                <option v-for="value in Array.from({length: 15}, (_, i) => i + (new Date()).getFullYear() - 10)"
-                        :value="value">{{ value }}
-                </option>
-            </select>
-            <span class="pl-3"> </span>
-            <select class="input px-2" v-model="dateComponents.hour">
-                <option v-for="value in Array.from({length: 24}, (_, i) => String(i).padStart(2, '0'))" :value="value">
-                    {{ value }}
-                </option>
-            </select>
-            <span class="px-1">:</span>
-            <select class="input pl-2" v-model="dateComponents.minute">
-                <option v-for="value in Array.from({length: 60}, (_, i) => String(i).padStart(2, '0'))" :value="value">
-                    {{ value }}
-                </option>
-            </select>
-        </div>
-
-        <input hidden type="hidden" name="published_at" v-model="result">
-    </div>
-</template>
-
 <style scoped>
     select {
         width: auto;
@@ -109,4 +114,4 @@
         border: none;
         background-color: transparent;
     }
-</style>
+</style>

resources/js/components/FeaturedImageUploader.vue

@@ -1,12 +1,52 @@
-<script type="text/ecmascript-6">
+<template>
+    <div v-cloak>
+        <div v-if="imageUrl" id="current-image">
+            <img :src="imageUrl" class="w-100">
 
+            <div class="input-group py-2">
+                <input type="text" class="form-control border-0 px-0"
+                       name="featured_image_caption"
+                       title="Featured Image Caption"
+                       v-model="imageCaption"
+                       :placeholder="this.trans.posts.forms.editor.images.picker.uploader.caption.placeholder" >
+            </div>
+        </div>
+
+        <input hidden type="hidden" name="featured_image" v-model="imageUrl">
+
+        <image-picker
+                @changed="updateImage"
+                @uploading="uploading = true"
+                :unsplash="this.unsplash">
+        </image-picker>
+    </div>
+</template>
+
+<script>
     /**
      * Upload a featured image.
      *
      * @author Mohamed Said <[email protected]>
      */
     export default {
-        props: ['post', 'url', 'caption', 'unsplash'],
+        props: {
+            post: {
+                type: String,
+                required: true
+            },
+            url: {
+                type: String,
+                required: false
+            },
+            caption: {
+                type: String,
+                default: ''
+            },
+            unsplash: {
+                type: String,
+                required: false
+            },
+        },
 
         data() {
             return {
@@ -45,27 +85,3 @@
         }
     }
 </script>
-
-<template>
-    <div>
-        <div v-if="imageUrl" id="current-image">
-            <img :src="imageUrl" class="w-100">
-
-            <div class="input-group py-2">
-                <input type="text" class="form-control border-0 px-0"
-                       name="featured_image_caption"
-                       title="Featured Image Caption"
-                       v-model="imageCaption"
-                       :placeholder="this.trans.posts.forms.editor.images.picker.uploader.caption.placeholder" >
-            </div>
-        </div>
-
-        <input hidden type="hidden" name="featured_image" v-model="imageUrl">
-
-        <image-picker
-                @changed="updateImage"
-                @uploading="uploading = true"
-                :unsplash="this.unsplash">
-        </image-picker>
-    </div>
-</template>