improve RTL support

Jeff · Jeff · commit d9fd2fd36d96 · 2017-10-01T16:20:34.000-07:00
diff --git a/dev.html b/dev.html
@@ -32,7 +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="default, RTL" :options="options" 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
@@ -283,7 +283,7 @@
 </style>
 
 <template>
-  <div class="dropdown v-select" :class="dropdownClasses">
+  <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
     <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix', {'disabled': disabled}]">
 
       <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
@@ -551,12 +551,14 @@
       },
 
       /**
-       * Sets Rtl support.
-       * @type {Boolean}
+       * Sets RTL support. Accepts 'ltr', 'rtl', 'auto'.
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
+       * @type {String}
+       * @default 'auto'
        */
-      rtl: {
-        type: Boolean,
-        default: false
+      dir: {
+        type: String,
+        default: 'auto'
       },
     },
 
@@ -839,7 +841,7 @@
           searchable: this.searchable,
           unsearchable: !this.searchable,
           loading: this.mutableLoading,
-          rtl: this.rtl
+          rtl: this.dir === 'rtl'
         }
       },
 
