Update DynamicPropertyField to handle editableOnCreate and editableOnUpdate (#35)

Fixes #34

Author: chrisrohr

Diff for: lib/components/DynamicPropertyField.vue

@@ -11,7 +11,12 @@
         <span class="pl-1 text-red-500">*</span>
       </template>
     </label>
-    <template v-if="!field.editable">
+    <template
+      v-if="
+        (props.mode === 'create' && !field.editableOnCreate) ||
+        (props.mode === 'update' && !field.editableOnUpdate)
+      "
+    >
       <input
         disabled
         :type="field.sensitive ? 'password' : 'text'"
@@ -188,6 +193,13 @@ const props = defineProps({
     type: [Object],
     required: true,
   },
+  mode: {
+    type: String,
+    required: true,
+    validator(value: string) {
+      return ["create", "update"].includes(value);
+    },
+  },
 });
 
 const modelUpdated = () => {

Diff for: package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiwiproject/vue-dynamic-property-provider",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "type": "module",
   "files": [

Diff for: package.json

@@ -9,6 +9,7 @@
           v-bind:key="field.name"
           :field="field"
           :modelValue="data"
+          mode="update"
           :class="
             field.type === 'boolean'
               ? 'flex flex-row gap-2'
@@ -59,7 +60,8 @@ const fields = [
   {
     name: "studentId",
     label: "Student ID",
-    editable: false,
+    editableOnCreate: true,
+    editableOnUpdate: false,
     visible: true,
     required: false,
     sensitive: false,
@@ -68,7 +70,8 @@ const fields = [
   {
     name: "createdAt",
     label: "Created At",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: false,
     required: false,
     sensitive: false,
@@ -77,7 +80,8 @@ const fields = [
   {
     name: "secretAnswer",
     label: "Secret Answer",
-    editable: false,
+    editableOnCreate: false,
+    editableOnUpdate: false,
     visible: true,
     required: false,
     sensitive: true,
@@ -86,7 +90,8 @@ const fields = [
   {
     name: "password",
     label: "Password",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: true,
     sensitive: true,
@@ -95,7 +100,8 @@ const fields = [
   {
     name: "firstName",
     label: "First Name",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,
@@ -104,7 +110,8 @@ const fields = [
   {
     name: "age",
     label: "Age",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,
@@ -113,7 +120,8 @@ const fields = [
   {
     name: "birthDate",
     label: "Birthday",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,
@@ -122,7 +130,8 @@ const fields = [
   {
     name: "enabled",
     label: "Is Enabled?",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,
@@ -131,7 +140,8 @@ const fields = [
   {
     name: "admin",
     label: "Is Admin?",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,
@@ -140,7 +150,8 @@ const fields = [
   {
     name: "courses",
     label: "Courses",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,
@@ -155,7 +166,8 @@ const fields = [
   {
     name: "maxGradeLevel",
     label: "Max Grade Level",
-    editable: true,
+    editableOnCreate: true,
+    editableOnUpdate: true,
     visible: true,
     required: false,
     sensitive: false,