Migrate to statamic v3

.gitignore

@@ -1,2 +1,7 @@
 node_modules
 .idea
+.DS_Store
+composer.lock
+/vendor
+mix-manifest.json
+.phpunit.result.cache

README.md

@@ -1,11 +1,11 @@
-# Statamic Char counting field ![Statamic 2](https://img.shields.io/badge/statamic-2.x-blue.svg?style=flat-square)
+# Statamic character counting field ![Statamic 3](https://img.shields.io/badge/statamic-3.x-blue.svg?style=flat-square)
 
 [![StyleCI](https://styleci.io/repos/75275215/shield?branch=master)](https://styleci.io/repos/75275215)
 
-A input field or textarea which shows the status of the length
+An input field or textarea which shows the status of the length
 with colored feedback on the input element.
 
-![Extended Section](./screenshot.png)
+![CharField](https://raw.githubusercontent.com/appswithlove/statamic-charfield/master/screenshot-v3.png)
 
 ## Configuration
 
@@ -19,11 +19,5 @@ with colored feedback on the input element.
 | `hard_limit`  | Maxlength for input field              |
 
  - If the length is outside of min and max the color is **red**.
- - If the length is between min and max but not between the optimal length **orange**
+ - If the length is between min and max but not between the optimal length **dark yellow**
  - If the length is in the optional range or between min and max if no optimal length is provided the color is **green**
-
-### Known problems
-
-The fieldtype options are not correctly displayed (`fieldtypes/char_field.input_type`), follow [#1084](https://github.com/statamic/v2-hub/issues/1084)
-
-Prior statamic 2.1.18 the translations inside the vue.js did not work because of [#1064](https://github.com/statamic/v2-hub/issues/1064)

composer.json

@@ -0,0 +1,30 @@
+{
+  "name": "appswithlove/statamic-charfield",
+  "license": "MIT",
+  "type": "statamic-addon",
+  "description": "Character counting field for statamic v3",
+  "autoload": {
+    "psr-4": {
+      "AppsWithLove\\Statamic\\CharField\\": "src"
+    }
+  },
+  "authors": [
+    {
+      "name": "Rémy Böhler"
+    }
+  ],
+  "require": {
+    "statamic/cms": "~3.1.7 || 3.2.*"
+  },
+  "extra": {
+    "statamic": {
+      "name": "src",
+      "description": "Character counting field"
+    },
+    "laravel": {
+      "providers": [
+        "AppsWithLove\\Statamic\\CharField\\ServiceProvider"
+      ]
+    }
+  }
+}

resources/css/cp.css

@@ -0,0 +1,19 @@
+.charfield-container {
+  --input-border-color: hsl(210, 15%, 80%);
+}
+
+.charfield-container.status-good {
+  --input-border-color: #479967;
+}
+.charfield-container.status-ok {
+  --input-border-color: #d8cd1b;
+}
+.charfield-container.status-low,
+.charfield-container.status-high {
+  --input-border-color: hsl(2, 76%, 60%);
+}
+
+.charfield-container .input-text {
+  border-color: var(--input-border-color);
+  border-bottom-width: 3px;
+}

resources/js/fieldtype.js

@@ -0,0 +1,92 @@
+Statamic.$components.register('char_field-fieldtype', {
+
+  template: `<div :class="['charfield-container', statusClass]">
+  <text-input
+    v-if="isInput"
+    ref="input"
+    :value="value"
+    :classes="config.classes"
+    :focus="config.focus || name === 'title'"
+    :autoselect="config.autoselect"
+    :type="config.input_type"
+    :isReadOnly="isReadOnly"
+    :prepend="config.prepend"
+    :append="config.append"
+    :limit="config.hard_limit || null"
+    :placeholder="config.placeholder"
+    :name="name"
+    :id="fieldId"
+    @input="updateDebounced"
+    @focus="$emit('focus')"
+    @blur="$emit('blur')"
+    />
+  <textarea-input
+    v-if="isTextarea"
+    :classes="config.classes"
+    :name="name"
+    :isReadOnly="isReadOnly"
+    :limit="config.hard_limit || null"
+    :placeholder="config.placeholder"
+    :value="value"
+    :id="fieldId"
+    @blur="$emit('blur')"
+    @focus="$emit('focus')"
+    @input="updateDebounced"
+    />
+  
+  <div class="help-block" v-if="optimalMin || optimalMax || high">
+      <p>
+          <small v-if="optimalMin && optimalMax">{{ translate("statamic-charfield::fieldtypes.ideal_x", {min: optimalMin, max: optimalMax}) }}</small>
+          <small v-if="optimalMin && !optimalMax">{{ translate("statamic-charfield::fieldtypes.min_x", {min: optimalMin}) }}</small>
+          <small v-if="!optimalMin && (optimalMax || high)">{{ translate("statamic-charfield::fieldtypes.max_x", {max: optimalMax || high}) }}</small>
+          <small>&gt; {{ translate("statamic-charfield::fieldtypes.current") }} <strong>{{ dataLength }}</strong></small>
+      </p>
+  </div>
+</div>`,
+
+  mixins: [Fieldtype],
+  props: ['name', 'data', 'config'],
+
+  data: function () {
+    return {
+      isTextarea: this.config.input_type === 'textarea',
+      isInput: this.config.input_type !== 'textarea',
+      low: this.config.low,
+      high: this.config.high || this.config.hard_limit,
+      optimalMin: this.config.optimal_min || this.config.low,
+      optimalMax: this.config.optimal_max || this.config.high,
+    };
+  },
+
+  computed: {
+    dataLength: function () {
+      return this.value ? this.value.length : 0;
+    },
+
+    statusClass: function () {
+      var length = this.dataLength;
+
+      if (this.low !== false && length < this.low) {
+        return 'status-low';
+      } else if (this.high !== false && length > this.high) {
+        return 'status-high';
+      }
+
+      if (this.optimalMin && this.optimalMax) {
+        if (length >= this.optimalMin && length <= this.optimalMax) {
+          return 'status-good';
+        }
+
+        return 'status-ok';
+      }
+
+      return 'status-good';
+    },
+  },
+
+  methods: {
+    eventInput: function ($event) {
+      this.updateDebounced($event.target.value);
+    },
+  },
+});