Merge pull request sagalbot#274 from adi518/master

sagalbot · web-flow · commit 296002937553 · 2017-10-01T16:03:24.000-07:00
Add RTL support
diff --git a/dev.html b/dev.html
@@ -32,6 +32,7 @@
 <body>
     <div id="app">
         <v-select placeholder="default" :options="options"></v-select>
+        <v-select placeholder="default, RTL" :options="options" :rtl="true" dir="rtl"></v-select>
         <v-select placeholder="multiple" multiple :options="options"></v-select>
         <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
         <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -15,7 +15,19 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
-
+  /* Rtl support */
+  .v-select.rtl .open-indicator {
+    left: 10px;
+    right: auto;
+  }
+  .v-select.rtl .selected-tag {
+    float: right;
+    margin-right: 3px;
+    margin-left: 1px;
+  }
+  .v-select.rtl .dropdown-menu {
+    text-align: right;
+  }
   /* Open Indicator */
   .v-select .open-indicator {
     position: absolute;
@@ -183,9 +195,9 @@
     clear: none;
   }
   /* Search Input States */
-  .v-select.unsearchable input[type="search"] {
+  /* .v-select.unsearchable input[type="search"] {
     max-width: 1px;
-  }
+  } */
   /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
@@ -536,7 +548,16 @@
        */
       inputId: {
         type: String
-      }
+      },
+
+      /**
+       * Sets Rtl support.
+       * @type {Boolean}
+       */
+      rtl: {
+        type: Boolean,
+        default: false
+      },
     },
 
     data() {
@@ -817,7 +838,8 @@
           searching: this.searching,
           searchable: this.searchable,
           unsearchable: !this.searchable,
-          loading: this.mutableLoading
+          loading: this.mutableLoading,
+          rtl: this.rtl
         }
       },
 
@@ -827,7 +849,7 @@
        */
       clearSearchOnBlur() {
         return this.clearSearchOnSelect && !this.multiple
-      },  
+      },
 
       /**
        * Return the current state of the
