wip

blendbyte · Nov 20, 2023 · 8e0f975 · 8e0f975
1 parent bf318e8
commit 8e0f975
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 87 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/js/field.js.LICENSE.txt b/dist/js/field.js.LICENSE.txt
@@ -1,9 +1,18 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
 /*!
  * vuex v4.1.0
  * (c) 2022 Evan You
  * @license MIT
  */
 
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
 /**!
  * Sortable 1.14.0
  * @author	RubaXa   <trash@rubaxa.org>

diff --git a/readme.md b/readme.md
@@ -28,9 +28,6 @@ public $casts = [
 ];
 ```
 
-In the latest release, default items will be displayed as "raw" on index and detail
-You can use asList, asTotal or displayUsing methods to format list
-
 ### Validation
 
 Use Laravel's built in [array validation](https://laravel.com/docs/5.7/validation#validating-arrays)
@@ -70,19 +67,17 @@ Here's a brief walkthrough to customize the vue item - [view](https://github.com
 
 ### Additional options
 
-| function | description | default |
-| - | - | - |
-| `->max(number)` | limit number of items allowed | false |
-| `->draggable()` | turn on drag/drop sorting | false |
-| `->fullWidth()` | increase the width of field area | false |
-| `->maxHeight(pixel)` | limit the height of the list | false |
-| `->listFirst()`| move add new to the bottom  | false |
-| `->inputType(text)` | text, date, etc | "text" |
-| `->placeholder($value)` | the new item input text | "Add a new item" |
-| `->deleteButtonValue($value)` | value for delete button | "x" |
-| `->createButtonValue($value)` | value for create button | "Add" |
-| `->hideCreateButton()` | hide the "add" button | false |
-| `->asList()` | display items as list on index and detail view | false |
-| `->asTotal()` | display total of items on index and detail view | false |
-| `->maxItems()` | display maximum of x items on index and detail view | 10 |
-| `->hideEllipsis()` | hide ellipsis symbol (...) on list display | false |
+| function                      | description                                            | default |
+|-------------------------------|--------------------------------------------------------| - |
+| `->max(number)`               | limit number of items allowed                          | false |
+| `->draggable()`               | turn on drag/drop sorting                              | false |
+| `->fullWidth()`               | increase the width of field area                       | false |
+| `->maxHeight(pixel)`          | limit the height of the list                           | false |
+| `->listFirst()`               | move add new to the bottom                             | false |
+| `->inputType(text)`           | text, date, etc                                        | "text" |
+| `->placeholder($value)`       | the new item input text                                | "Add a new item" |
+| `->deleteButtonValue($value)` | value for delete button                                | "x" |
+| `->createButtonValue($value)` | value for create button                                | "Add" |
+| `->hideCreateButton()`        | hide the "add" button                                  | false |
+| `->indexAsList()`             | display items as list on index instead of total number | false |
+| `->detailsAsTotal()`          | display total of items on detail view instead of list  | false |
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -1,13 +1,12 @@
 <template>
   <PanelItem :index="index" :field="field">
     <template #value>
-      <span v-if="shouldDisplayAsList">
+      <span v-if="!shouldDisplayDetailsAsTotal && !shouldDisplayAsHtml">
         <ul class="nova-items-field-list">
-          <li v-for="(value,index) in fieldValue" :key="index">{{value}}</li>
-          <li v-if="shouldDisplayEllipsis && fieldValueTruncated" class="nova-item-field-ellipis">...</li>
+          <li class="mb-1" style="list-style: square; margin-left: 1rem;" v-for="(value,index) in fieldValue" :key="index">{{value}}</li>
         </ul>
       </span>
-      <span v-else-if="shouldDisplayAsTotal" class="nova-items-field-total">
+      <span v-else-if="shouldDisplayDetailsAsTotal" class="nova-items-field-total">
         {{fieldValue.length}}
       </span>
       <span ref="theFieldValue" v-else-if="shouldDisplayAsHtml" class="nova-items-field">

diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -1,13 +1,12 @@
 <template>
   <div :class="`text-${field.textAlign}`">
     <template v-if="fieldValue">
-      <span v-if="shouldDisplayAsList">
+      <span v-if="shouldDisplayIndexAsList">
         <ul class="nova-items-field-list">
-          <li v-for="(value,index) in fieldValue" :key="index">{{value}}</li>
-          <li v-if="shouldDisplayEllipsis && fieldValueTruncated" class="nova-item-field-ellipis">...</li>
+          <li class="mb-1" style="list-style: square; margin-left: 1rem;" v-for="(value,index) in fieldValue" :key="index">{{value}}</li>
         </ul>
       </span>
-      <span v-else-if="shouldDisplayAsTotal" class="nova-items-field-total">
+      <span v-else-if="!shouldDisplayAsHtml" class="nova-items-field-total">
         {{fieldValue.length}}
       </span>
       <span ref="theFieldValue" v-else-if="shouldDisplayAsHtml" class="nova-items-field">

diff --git a/resources/js/mixins/HasFieldValue.js b/resources/js/mixins/HasFieldValue.js
@@ -1,27 +1,22 @@
 export default {
   computed: {
-    shouldDisplayEllipsis() {
-      return this.field.withEllipsis;
+    shouldDisplayIndexAsList() {
+      return this.field.indexAsList
     },
 
-    shouldDisplayAsList() {
-      return this.field.asList
+    shouldDisplayDetailsAsTotal() {
+      return this.field.detailsAsTotal
     },
 
-    shouldDisplayAsTotal() {
-      return this.field.asTotal
+    getIndexListMaxItems() {
+      return this.field.indexListMaxItems
     },
 
     fieldHasValue() {
         let fieldValue = this.field.value;
         return fieldValue && Array.isArray(fieldValue) && fieldValue.length;
     },
 
-    fieldValueTruncated() {
-        let field = this.field;
-        return this.fieldHasValue && field.value.length > field.maxItems;
-    },
-
     fieldValue() {
       if (!this.usesCustomizedDisplay && !this.fieldHasValue) {
         return null
@@ -30,7 +25,7 @@ export default {
       if (this.field.displayedAs) {
         return String(this.field.displayedAs)
       } else {
-        return this.field.value.slice(0,this.field.maxItems);
+        return this.field.value;
       }
     }
   }

diff --git a/src/Items.php b/src/Items.php
@@ -46,8 +46,6 @@ public function __construct($name, $attribute = null, callable $resolveCallback
             'createButtonValue' => $this->createButtonValue,
             'deleteButtonValue' => $this->deleteButtonValue,
             'detailItemComponent' => $this->detailItemComponent,
-            'maxItems' => 10,
-            'withEllipsis' => true,
         ]);
     }
 
@@ -57,7 +55,7 @@ public function resolve($resource, $attribute = null)
 
         if (is_null($this->fillCallback)) {
             $this->fillUsing(function ($request, $model, $attribute, $requestAttribute) {
-                $model->$attribute = $this->isNullValue($request->$attribute) ? null : json_decode($request->$attribute, true);
+                $model->$attribute = $this->isValidNullValue($request->$attribute) ? null : json_decode($request->$attribute, true);
             });
         }
 
@@ -77,14 +75,21 @@ public function resolve($resource, $attribute = null)
         ]);
     }
 
+    public function jsonSerialize(): array
+    {
+        return array_merge(parent::jsonSerialize(), [
+            'asHtml' => $this->asHtml,
+            'copyable' => $this->copyable,
+        ]);
+    }
+
     public function rules($rules)
     {
         if (!is_array($rules)) {
             abort(500, 'Nova Items Field requires array of validation rules');
         }
 
-        $this->rules = [ new ArrayRules($rules) ];
-
+        $this->rules = [new ArrayRules($rules)];
         return $this;
     }
 
@@ -100,112 +105,78 @@ public function values($values)
     public function max($max)
     {
         $this->max = $max;
-
         return $this;
     }
 
     public function hideCreateButton($hideCreateButton = true)
     {
         $this->hideCreateButton = $hideCreateButton;
-
         return $this;
     }
 
     public function inputType($inputType)
     {
         $this->inputType = $inputType;
-
         return $this;
     }
 
     public function fullWidth($fullWidth = true)
     {
         $this->fullWidth = $fullWidth;
-
         return $this;
     }
 
     public function maxHeight($maxHeight)
     {
         $this->maxHeight = $maxHeight;
-
         return $this;
     }
 
     public function draggable($draggable = true)
     {
         $this->draggable = $draggable;
-
         return $this;
     }
 
-    public function placeholder($placeholder)
+    public function placeholder($text)
     {
-        $this->placeholder = $placeholder;
-
+        $this->placeholder = $text;
         return $this;
     }
 
     public function listFirst($listFirst = true)
     {
         $this->listFirst = $listFirst;
-
         return $this;
     }
 
     public function deleteButtonValue($deleteButtonValue)
     {
         $this->deleteButtonValue = $deleteButtonValue;
-
         return $this;
     }
 
     public function createButtonValue($createButtonValue)
     {
         $this->createButtonValue = $createButtonValue;
-
         return $this;
     }
 
     public function detailItemComponent($detailItemComponent)
     {
         $this->detailItemComponent = $detailItemComponent;
-
         return $this;
     }
 
-    /**
-     * Prepare the element for JSON serialization.
-     *
-     * @return array<string, mixed>
-     */
-    public function jsonSerialize(): array
+    public function indexAsList()
     {
-        $request = app(NovaRequest::class);
-
-        return array_merge(parent::jsonSerialize(), [
-            'asHtml' => $this->asHtml,
-            'copyable' => $this->copyable,
-        ]);
-    }
-
-    public function asList() {
-        $this->withMeta(['asList' => true]);
+        $this->withMeta(['indexAsList' => true]);
         return $this;
     }
 
-    public function asTotal() {
-       $this->withMeta(['asTotal' => true]);
-       return $this;
-    }
-
-    public function maxItems(int $value) {
-       $this->withMeta(['maxItems' => $value]);
-       return $this;
-    }
-
-    public function hideEllipsis() {
-       $this->withMeta(['withEllipsis' => false]);
-       return $this;
+    public function detailsAsTotal()
+    {
+        $this->withMeta(['detailsAsTotal' => true]);
+        return $this;
     }
 }