Add RTL support

2026-06-04 06:32:23 +03:00 · 2017-08-02 14:33:33 +03:00
parent 7a2fad6933
commit 625ac80d53
2 changed files with 27 additions and 3 deletions
@@ -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>
@@ -9,6 +9,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;
@@ -517,7 +530,16 @@
       */
      inputId: {
        type: String
-      }
+      },
+
+      /**
+       * Sets Rtl support.
+       * @type {Boolean}
+       */
+      rtl: {
+        type: Boolean,
+        default: false
+      },
    },

    data() {
@@ -796,7 +818,8 @@
          searching: this.searching,
          searchable: this.searchable,
          unsearchable: !this.searchable,
-          loading: this.mutableLoading
+          loading: this.mutableLoading,
+          rtl: this.rtl
        }
      },

@@ -806,7 +829,7 @@
       */
      clearSearchOnBlur() {
        return this.clearSearchOnSelect && !this.multiple
-      },  
+      },

      /**
       * Return the current state of the