Add rounded property to BUpload Component (buefy#3012)

REInVent650 · Nov 4, 2020 · 7ae8af3 · 7ae8af3
1 parent a7eaa8b
commit 7ae8af3
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 6 deletions.
diff --git a/docs/pages/components/upload/Upload.vue b/docs/pages/components/upload/Upload.vue
@@ -5,6 +5,8 @@
         <Example :component="ExDragDrop" :code="ExDragDropCode" title="Drag and drop" vertical/>
 
         <Example :component="ExExpanded" :code="ExExpandedCode" title="Expanded" vertical/>
+
+        <Example :component="ExRounded" :code="ExRoundedCode" title="Rounded" vertical/>
 
         <ApiView :data="api"/>
     </div>
@@ -20,7 +22,10 @@
     import ExDragDropCode from '!!raw-loader!./examples/ExDragDrop'
 
     import ExExpanded from './examples/ExExpanded'
-    import ExExpandedCode from '!!raw-loader!./examples/ExExpanded'
+    import ExExpandedCode from '!!raw-loader!./examples/ExExpanded'    
+    
+    import ExRounded from './examples/ExRounded'
+    import ExRoundedCode from '!!raw-loader!./examples/ExRounded'
 
     export default {
         data() {
@@ -31,7 +36,9 @@
                 ExExpanded,
                 ExSimpleCode,
                 ExDragDropCode,
-                ExExpandedCode
+                ExExpandedCode,
+                ExRounded,
+                ExRoundedCode
             }
         }
     }

diff --git a/docs/pages/components/upload/api/upload.js b/docs/pages/components/upload/api/upload.js
@@ -81,6 +81,13 @@ export default [
                 values: '—',
                 default: '<code>false</code>'
             },
+            {
+                name: '<code>rounded</code>',
+                description: 'Upload will be rounded',
+                type: 'Boolean',
+                values: '—',
+                default: '<code>false</code>'
+            },
         ],
         events: [
             {

diff --git a/docs/pages/components/upload/examples/ExRounded.vue b/docs/pages/components/upload/examples/ExRounded.vue
@@ -0,0 +1,39 @@
+<template>
+  <section>
+    <b-field label="Included filename">
+      <b-field class="file is-primary" :class="{'has-name': !!file}">
+        <b-upload v-model="file" class="file-label" rounded>
+          <span class="file-cta">
+            <b-icon icon="upload"></b-icon>
+            <span class="file-label">{{ file.name || "Click to upload"}}</span>
+          </span>
+        </b-upload>
+      </b-field>
+    </b-field>
+
+    <b-field label="Separated filename">
+        <b-field class="file is-primary"  :class="{'has-name': !!file2}">
+            <b-upload v-model="file2" class="file-label" rounded>
+                <span class="file-cta">
+                    <b-icon class="file-icon" icon="upload"></b-icon>
+                    <span class="file-label">Click to upload</span>
+                </span>
+                <span class="file-name" v-if="file2">
+                    {{ file2.name }}
+                </span>
+            </b-upload>
+        </b-field> 
+    </b-field>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      file: {},
+      file2 : null
+    };
+  },
+};
+</script>
diff --git a/src/components/upload/Upload.vue b/src/components/upload/Upload.vue
@@ -1,5 +1,5 @@
 <template>
-    <label class="upload control" :class="{'is-expanded' : expanded}">
+    <label class="upload control" :class="{'is-expanded' : expanded, 'is-rounded' : rounded}">
         <template v-if="!dragDrop">
             <slot/>
         </template>
@@ -58,6 +58,10 @@ export default {
         expanded: {
             type: Boolean,
             default: false
+        },
+        rounded: {
+            type: Boolean,
+            default: false
         }
     },
     data() {

diff --git a/src/scss/components/_upload.scss b/src/scss/components/_upload.scss
@@ -1,7 +1,7 @@
 .upload {
     position: relative;
     display: inline-flex;
-    input[type=file] {
+    input[type="file"] {
         position: absolute;
         top: 0;
         left: 0;
@@ -51,14 +51,22 @@
     &.is-expanded {
         width: 100%;
     }
+    &.is-rounded {
+        border-radius: $radius-rounded;
+
+        .file-name {
+            border-top-right-radius: $radius-rounded;
+            border-bottom-right-radius: $radius-rounded;
+        }
+    }
 }
 // temporary IE 11 hack !!!
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     .upload {
-        input[type=file] {
+        input[type="file"] {
             z-index: auto;
         }
-        .upload-draggable + input[type=file] {
+        .upload-draggable + input[type="file"] {
             z-index: -1;
         }
     }