Merge pull request #27 from wearebraid/bugfix/filenames

Bugfix/filenames

README.md

@@ -32,13 +32,14 @@ The syntax is what developers would expect:
 
 ✓ Create any input element with a single component<br>
 ✓ Supports Vue `v-model` [binding](https://vueformulate.com/guide/#model-binding)<br>
-✓ [Re-populate an entire form](https://vueformulate.com//guide/forms/#setting-initial-values) from a single object<br>
+✓ [Re-populate an entire form](https://vueformulate.com/guide/forms/#setting-initial-values) from a single object<br>
-✓ [Generate a form](https://vueformulate.com//guide/forms/#generating-forms) using json<br>
+✓ [Generate a form](https://vueformulate.com/guide/forms/#generating-forms) using json<br>
 ✓ Easy to add field labels<br>
 ✓ Easy to add help text<br>
-✓ Easy to add [form validation](https://vueformulate.com//guide/validation)<br>
+✓ Easy to add [form validation](https://vueformulate.com/guide/validation)<br>
-✓ Easy to add [custom validation](https://vueformulate.com//guide/validation/#custom-validation-rules) rules<br>
+✓ Easy to add [custom validation](https://vueformulate.com/guide/validation/#custom-validation-rules) rules<br>
-✓ Easy to modify [validation messages](https://vueformulate.com//guide/validation/#customize-validation-messages)<br>
+✓ Easy to modify [validation messages](https://vueformulate.com/guide/validation/#customize-validation-messages)<br>
-✓ Easy to add [custom inputs](https://vueformulate.com//guide/custom-inputs)
+✓ Easy to add [custom inputs](https://vueformulate.com/guide/custom-inputs)<br>
+✓ Backend response [error handling](https://vueformulate.com/guide/forms/error-handling)
 
 There's a lot more available to read at the [documentation website](https://vueformulate.com).

dist/snow.css

@@ -351,9 +351,10 @@
       border-radius: 1.25em;
       width: 5em;
       overflow: hidden;
-      position: absolute;
+      position: relative;
+      flex: 0 0 5em;
       right: .75em;
-      transition: height .25s, width .25s;
+      transition: height .25s, width .25s, flex-basis .25s;
       z-index: 2; }
       .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress::before {
         content: '';
@@ -373,7 +374,8 @@
         z-index: 3; }
       .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-just-finished] {
         width: 1.25em;
-        height: 1.25em; }
+        height: 1.25em;
+        flex: 0 0 1.25em; }
         .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-just-finished]::before {
           transition: transform .25s .2s, opacity .25s .2s;
           transform: scale(1);
@@ -381,6 +383,7 @@
       .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished] {
         transition: height .25s, width .25s, left .25s, top, .25s, border-radius .25s;
         width: .3em;
+        flex: 0 0 .3em;
         height: 100%;
         right: 0;
         border-radius: 0 .23em .23em 0; }
@@ -398,7 +401,10 @@
     .formulate-input[data-classification="file"] .formulate-files .formulate-file-name {
       padding-left: 1.5em;
       padding-right: 2em;
-      max-width: 100%; }
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
       .formulate-input[data-classification="file"] .formulate-files .formulate-file-name::before {
         position: absolute;
         left: .7em;
@@ -473,6 +479,7 @@
     .formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview {
       width: 3em;
       height: 3em;
+      flex: 0 0 3em;
       position: relative;
       z-index: 2;
       left: -1px;

package-lock.json

@@ -2770,9 +2770,9 @@
       }
     },
     "@braid/vue-formulate-i18n": {
-      "version": "1.0.3",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@braid/vue-formulate-i18n/-/vue-formulate-i18n-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@braid/vue-formulate-i18n/-/vue-formulate-i18n-1.1.0.tgz",
-      "integrity": "sha512-HkF8S+u4g/lJn4m6qlQpHi63GuQERTovbW7cAsQtxcQF1xHUSviMYC3NPVfRlzOOrUT3eoolTdiF5yZ0DCj9sQ==",
+      "integrity": "sha512-DcLSYP9cs7q0RvmxkoQy5EGvk1nvir3USEo55tUrQX0QBy05LojZDT9o2UCdw5Dr5hAAsxQ7HurJjzRIfN8Kvw==",
       "requires": {
         "@rollup/plugin-buble": "^0.21.1",
         "@rollup/plugin-commonjs": "^11.0.2"

package.json

@@ -86,7 +86,7 @@
     "watch": "^1.0.2"
   },
   "dependencies": {
-    "@braid/vue-formulate-i18n": "^1.0.3",
+    "@braid/vue-formulate-i18n": "^1.1.0",
     "is-plain-object": "^3.0.0",
     "is-url": "^1.2.4",
     "nanoid": "^2.1.11"

src/FormulateFiles.vue

@@ -20,6 +20,7 @@
         </div>
         <div
           class="formulate-file-name"
+          :title="file.name"
           v-text="file.name"
         />
         <div

themes/snow/_inputs.scss

@@ -439,9 +439,10 @@
         border-radius: 1.25em;
         width: 5em;
         overflow: hidden;
-        position: absolute;
+        position: relative;
+        flex: 0 0 5em;
         right: .75em;
-        transition: height .25s, width .25s;
+        transition: height .25s, width .25s, flex-basis .25s;
         z-index: 2;
 
         &::before {
@@ -465,6 +466,7 @@
         &[data-just-finished] {
           width: 1.25em;
           height: 1.25em;
+          flex: 0 0 1.25em;
 
           &::before {
             transition: transform .25s .2s, opacity .25s .2s;
@@ -476,6 +478,7 @@
         &[data-is-finished] {
           transition: height .25s, width .25s, left .25s, top, .25s, border-radius .25s;
           width: .3em;
+          flex: 0 0 .3em;
           height: 100%;
           right: 0;
           border-radius: 0 .23em .23em 0;
@@ -502,6 +505,9 @@
         padding-left: 1.5em;
         padding-right: 2em;
         max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &::before {
           position: absolute;
@@ -589,6 +595,7 @@
       .formulate-file-image-preview {
         width: 3em;
         height: 3em;
+        flex: 0 0 3em;
         position: relative;
         z-index: 2;
         left: -1px;