@tinacms/app 0.0.18 → 0.0.20

package/dist/assets/out.es.js

@@ -82062,13 +82062,13 @@ const ModalLayout = ({
   });
 };
 const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded-md";
-const disabledClasses = "bg-gray-100 pointer-events-none	opacity-30 cursor-not-allowed";
+const disabledClasses = "opacity-50 pointer-events-none cursor-not-allowed";
 const BaseTextField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx$1("input", {
     type: "text",
-    className: `${textFieldClasses}${(props == null ? void 0 : props.disabled) ? disabledClasses : ""}`,
+    className: `${textFieldClasses} ${(props == null ? void 0 : props.disabled) ? disabledClasses : ""}`,
     ...props
   });
 };
@@ -82215,17 +82215,19 @@ function FieldsBuilder({
   useEventSubscription("plugin:add:field", () => updateFieldPlugins(), []);
   return /* @__PURE__ */ jsx$1(FieldsGroup, {
     padding,
-    children: fields7.map((field) => /* @__PURE__ */ jsx$1(InnerField, {
+    children: fields7.map((field, index2) => /* @__PURE__ */ jsx$1(InnerField, {
       field,
       form,
-      fieldPlugins
+      fieldPlugins,
+      index: index2
     }, field.name))
   });
 }
 const InnerField = ({
   field,
   form,
-  fieldPlugins
+  fieldPlugins,
+  index: index2
 }) => {
   react.exports.useEffect(() => {
     form.mutators.setFieldData(field.name, {
@@ -82269,7 +82271,8 @@ const InnerField = ({
           ...fieldProps,
           form: form.finalForm,
           tinaForm: form,
-          field
+          field,
+          index: index2
         });
       }
       return /* @__PURE__ */ jsx$1("p", {
@@ -84317,6 +84320,7 @@ function wrapFieldsWithMeta(Field22) {
     label: props.field.label,
     description: props.field.description,
     error: props.meta.error,
+    index: props.index,
     children: /* @__PURE__ */ jsx$1(Field22, {
       ...props
     })
@@ -84329,6 +84333,7 @@ const FieldMeta = ({
   error: error2,
   margin = true,
   children: children2,
+  index: index2,
   ...props
 }) => {
   const {
@@ -84348,6 +84353,9 @@ const FieldMeta = ({
     onClick: () => setFocusedField({
       fieldName: name2
     }),
+    style: {
+      zIndex: index2 ? 1e3 - index2 : void 0
+    },
     ...props,
     children: [/* @__PURE__ */ jsxs(FieldLabel, {
       name: name2,
@@ -112316,6 +112324,9 @@ var styles = `.tina-tailwind {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+.tina-tailwind .pointer-events-none {
+  pointer-events: none;
+}
 .tina-tailwind .pointer-events-auto {
   pointer-events: auto;
 }
@@ -112355,6 +112366,12 @@ var styles = `.tina-tailwind {
 .tina-tailwind .top-4 {
   top: 16px;
 }
+.tina-tailwind .top-1\\/2 {
+  top: 50%;
+}
+.tina-tailwind .left-2 {
+  left: 8px;
+}
 .tina-tailwind .z-overlay {
   z-index: 10600;
 }
@@ -112431,12 +112448,12 @@ var styles = `.tina-tailwind {
 .tina-tailwind .h-7 {
   height: 28px;
 }
-.tina-tailwind .h-10 {
-  height: 40px;
-}
 .tina-tailwind .h-5 {
   height: 20px;
 }
+.tina-tailwind .h-10 {
+  height: 40px;
+}
 .tina-tailwind .h-12 {
   height: 48px;
 }
@@ -112500,6 +112517,10 @@ var styles = `.tina-tailwind {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.tina-tailwind .-translate-y-1\\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .tina-tailwind .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -112567,6 +112588,11 @@ var styles = `.tina-tailwind {
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
@@ -112579,12 +112605,12 @@ var styles = `.tina-tailwind {
 .tina-tailwind .rounded {
   border-radius: 4px;
 }
-.tina-tailwind .rounded-full {
-  border-radius: 9999px;
-}
 .tina-tailwind .rounded-md {
   border-radius: 6px;
 }
+.tina-tailwind .rounded-full {
+  border-radius: 9999px;
+}
 .tina-tailwind .rounded-r-md {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -112665,6 +112691,10 @@ var styles = `.tina-tailwind {
   padding-top: 40px;
   padding-bottom: 40px;
 }
+.tina-tailwind .py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -112677,10 +112707,6 @@ var styles = `.tina-tailwind {
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.tina-tailwind .py-2 {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -112694,6 +112720,15 @@ var styles = `.tina-tailwind {
 .tina-tailwind .pt-16 {
   padding-top: 64px;
 }
+.tina-tailwind .pr-3 {
+  padding-right: 12px;
+}
+.tina-tailwind .pl-8 {
+  padding-left: 32px;
+}
+.tina-tailwind .pl-3 {
+  padding-left: 12px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }
@@ -112773,10 +112808,18 @@ var styles = `.tina-tailwind {
   --tw-text-opacity: 1;
   color: rgb(113 108 127 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(178 173 190 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(145 140 158 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 132 255 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-current {
   color: currentColor;
 }
@@ -112811,6 +112854,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .opacity-90 {
   opacity: .9;
 }
+.tina-tailwind .opacity-20 {
+  opacity: .2;
+}
 .tina-tailwind .opacity-50 {
   opacity: .5;
 }
@@ -112827,6 +112873,11 @@ var styles = `.tina-tailwind {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .tina-tailwind .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -112916,6 +112967,14 @@ var styles = `.tina-tailwind {
 .tina-tailwind .hover\\:opacity-60:hover {
   opacity: .6;
 }
+.tina-tailwind .focus\\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 132 255 / var(--tw-border-opacity));
+}
+.tina-tailwind .focus\\:text-gray-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(37 35 54 / var(--tw-text-opacity));
+}
 .tina-tailwind .focus\\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
@@ -112941,6 +113000,30 @@ var styles = `.tina-tailwind {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
 }
+.tina-tailwind .group:hover .group-hover\\:border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 221 236 / var(--tw-border-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(86 81 101 / var(--tw-text-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:hover .group-hover\\:opacity-80 {
+  opacity: .8;
+}
+.tina-tailwind .group:active .group-active\\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:active .group-active\\:opacity-80 {
+  opacity: .8;
+}
 `;
 class ContentCreatorPlugin {
   constructor(options) {
@@ -114721,6 +114804,34 @@ function HiChevronRight(props) {
     }]
   })(props);
 }
+function FaLock(props) {
+  return GenIcon({
+    "tag": "svg",
+    "attr": {
+      "viewBox": "0 0 448 512"
+    },
+    "child": [{
+      "tag": "path",
+      "attr": {
+        "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
+      }
+    }]
+  })(props);
+}
+function FaUnlock(props) {
+  return GenIcon({
+    "tag": "svg",
+    "attr": {
+      "viewBox": "0 0 448 512"
+    },
+    "child": [{
+      "tag": "path",
+      "attr": {
+        "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"
+      }
+    }]
+  })(props);
+}
 const createDocument = async (cms, collection, template, mutationInfo, values2) => {
   const api = new TinaAdminApi(cms);
   const {
@@ -114776,6 +114887,25 @@ const CollectionCreatePage = () => {
     })
   });
 };
+const FilenameInput = (props) => {
+  const [filenameTouched, setFilenameTouched] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", {
+    className: "group relative block cursor-pointer",
+    onClick: () => {
+      setFilenameTouched(true);
+    },
+    children: [/* @__PURE__ */ jsx$1("input", {
+      type: "text",
+      className: `shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base pr-3 truncate py-2 w-full border transition-all ease-out duration-150 focus:text-gray-900 rounded-md ${props.readonly || !filenameTouched ? "bg-gray-50 text-gray-300  border-gray-150 pointer-events-none pl-8 group-hover:bg-white group-hover:text-gray-600  group-hover:border-gray-200" : "bg-white text-gray-600  border-gray-200 pl-3"}`,
+      ...props,
+      disabled: props.readonly || !filenameTouched
+    }), /* @__PURE__ */ jsx$1(FaLock, {
+      className: `text-gray-400 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-20 group-hover:opacity-0 group-active:opacity-0" : "opacity-0"}`
+    }), /* @__PURE__ */ jsx$1(FaUnlock, {
+      className: `text-blue-500 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-0 group-hover:opacity-80 group-active:opacity-80" : "opacity-0"}`
+    })]
+  });
+};
 const RenderForm$1 = ({
   cms,
   collection,
@@ -114799,9 +114929,9 @@ const RenderForm$1 = ({
     schema,
     template
   });
-  let slugFunction = (_b = (_a2 = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b.slugify;
+  let slugFunction = (_b = (_a2 = template == null ? void 0 : template.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b.slugify;
   if (!slugFunction) {
-    const titleField = (_c = schemaCollection.fields.find((x2) => x2.required && x2.type === "string" && x2.isTitle)) == null ? void 0 : _c.name;
+    const titleField = (_c = template == null ? void 0 : template.fields.find((x2) => x2.required && x2.type === "string" && x2.isTitle)) == null ? void 0 : _c.name;
     if (titleField) {
       slugFunction = (values2) => {
         var _a22;
@@ -114827,11 +114957,21 @@ const RenderForm$1 = ({
       },
       id: "create-form",
       label: "form",
-      fields: [{
+      fields: [...formInfo.fields, {
         name: "filename",
         label: "Filename",
-        component: "text",
-        disabled: (_b2 = (_a22 = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a22.filename) == null ? void 0 : _b2.disabled,
+        component: slugFunction ? wrapFieldsWithMeta(({
+          field,
+          input,
+          meta
+        }) => {
+          var _a3, _b3;
+          return /* @__PURE__ */ jsx$1(FilenameInput, {
+            readonly: (_b3 = (_a3 = template == null ? void 0 : template.ui) == null ? void 0 : _a3.filename) == null ? void 0 : _b3.readonly,
+            ...input
+          });
+        }) : "text",
+        disabled: (_b2 = (_a22 = template == null ? void 0 : template.ui) == null ? void 0 : _a22.filename) == null ? void 0 : _b2.readonly,
         description: /* @__PURE__ */ jsxs("span", {
           children: ["A unique filename for the content.", /* @__PURE__ */ jsx$1("br", {}), "Examples: ", /* @__PURE__ */ jsx$1("code", {
             children: "My_Document"
@@ -114854,7 +114994,7 @@ const RenderForm$1 = ({
             return "Must begin with a-z, A-Z, 0-9, or _ and contain only a-z, A-Z, 0-9, -, _, ., or /.";
           }
         }
-      }, ...formInfo.fields],
+      }],
       onSubmit: async (values2) => {
         try {
           await createDocument(cms, collection, template, mutationInfo, values2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -37,7 +37,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.4",
-    "@tinacms/schema-tools": "0.1.5",
+    "@tinacms/schema-tools": "0.1.7",
     "@tinacms/scripts": "0.51.1",
     "@vitejs/plugin-react": "^1.3.2",
     "@xstate/react": "^3.0.0",
@@ -55,7 +55,7 @@
     "react-router-dom": "6",
     "styled-components": "5.3.5",
     "tailwindcss": "^3.1.6",
-    "tinacms": "0.69.13",
+    "tinacms": "0.69.15",
     "typescript": "^4.6.4",
     "vite": "2.9.15",
     "vite-node": "^0.23.4",