Adding more vue components

ARCANESOFT · May 7, 2017 · cc4b157 · cc4b157
1 parent d023f1a
commit cc4b157
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 22 deletions.
diff --git a/resources/assets/js/components/SeoKeywordTags.vue b/resources/assets/js/components/SeoKeywordTags.vue
@@ -0,0 +1,50 @@
+<script>
+    export default {
+        name: 'seo-keyword-tags',
+
+        props: {
+            name: {
+                type: String,
+                required: true
+            },
+
+            selected: {
+                type: Array,
+                'default': []
+            },
+
+            placeholder: {
+                type: String,
+                'default': 'Add keywords'
+            }
+        },
+
+        data() {
+            return {
+                //
+            };
+        },
+
+        mounted() {
+            $(`select[name="${this.name}"]`).select2({
+                tags: true,
+                createTag: function (params) {
+                    return {
+                        id: params.term,
+                        text: params.term,
+                        newOption: true
+                    }
+                }
+            });
+        }
+    }
+</script>
+
+<template>
+    <select :name="name"
+            class="form-control"
+            multiple="multiple"
+            :data-placeholder="placeholder">
+        <option v-for="value in selected" :value="value" selected>{{ value }}</option>
+    </select>
+</template>
diff --git a/resources/assets/js/main.js b/resources/assets/js/main.js
@@ -3,10 +3,12 @@
  */
 
 import SeoLengthCounter from './components/SeoLengthCounter.vue';
+import SeoKeywordTags from './components/SeoKeywordTags.vue';
 
 const SeoPlugins = {
     install(Vue, options) {
         Vue.component(SeoLengthCounter.name, SeoLengthCounter);
+        Vue.component(SeoKeywordTags.name, SeoKeywordTags);
     }
 };
 

diff --git a/...s/admin/_composers/seo-form-box.blade.php → ...ws/admin/_includes/seo-form-box.blade.php b/...s/admin/_composers/seo-form-box.blade.php → ...ws/admin/_includes/seo-form-box.blade.php
@@ -12,7 +12,7 @@
             <div class="col-xs-12">
                 <div class="form-group {{ $errors->first('seo_description', 'has-error') }}">
                     {{ Form::label('seo_title', trans('seo::metas.attributes.title').' :') }}
-                    {{ Form::text('seo_title', old('seo_title', $model['title']), ['class' => 'form-control', 'rows' => 1, 'style' => 'resize: none;']) }}
+                    <seo-length-counter name="seo_title" value="{{ old('seo_title', $model['title']) }}"></seo-length-counter>
                     @if ($errors->has('seo_title'))
                         <span class="text-red">{!! $errors->first('seo_title') !!}</span>
                     @endif
@@ -22,7 +22,7 @@
             <div class="col-xs-12">
                 <div class="form-group {{ $errors->first('seo_description', 'has-error') }}">
                     {{ Form::label('seo_description', trans('seo::metas.attributes.description').' :') }}
-                    {{ Form::textarea('seo_description', old('seo_description', $model['description']), ['class' => 'form-control', 'rows' => 1, 'style' => 'resize: none;']) }}
+                    <seo-length-counter name="seo_description" value="{{ old('seo_description', $model['description']) }}" :min="150" :max="160"></seo-length-counter>
                     @if ($errors->has('seo_description'))
                         <span class="text-red">{!! $errors->first('seo_description') !!}</span>
                     @endif
@@ -32,7 +32,7 @@
             <div class="col-xs-12">
                 <div class="form-group {{ $errors->first('seo_keywords', 'has-error') }}">
                     {{ Form::label('seo_keywords[]', trans('seo::metas.attributes.keywords').' :') }}
-                    {{ Form::select('seo_keywords[]', [], old('seo_keywords', $model['keywords']), ['class' => 'form-control', 'multiple' => 'multiple', 'data-placeholder' => 'Add keywords', 'style' => 'width: 100%;']) }}
+                    <seo-keyword-tags name="seo_keywords[]" :selected="{{ json_encode(old('seo_keywords', $model['keywords'])) }}"></seo-keyword-tags>
                     @if ($errors->has('seo_keywords'))
                         <span class="text-red">{!! $errors->first('seo_keywords') !!}</span>
                     @endif
@@ -41,22 +41,3 @@
         </div>
     </div>
 </div>
-
-@section('scripts')
-    @parent
-
-    <script>
-        $(function () {
-            $('select[name="seo_keywords[]"]').select2({
-                tags: true,
-                createTag: function (params) {
-                    return {
-                        id: params.term,
-                        text: params.term,
-                        newOption: true
-                    }
-                }
-            });
-        })
-    </script>
-@endsection