@danielgindi/selectbox 2.0.26 → 2.0.27

package/lib/DropList.js

@@ -114,7 +114,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 /** */
 
 /** @type {DropList.Options} */
-let defaultOptions = {
+export const DefaultOptions = {
     baseClassName: 'droplist',
 
     autoItemBlur: true,
@@ -173,7 +173,7 @@ class DropList {
      * @param {DropList.Options} options
      */
     constructor(options) {
-        const o = { ...defaultOptions };
+        const o = { ...DefaultOptions };
 
         for (let [key, value] of Object.entries(/**@type Object*/options))
             if (value !== undefined)

package/lib/SelectBox.js

@@ -96,6 +96,7 @@ const inputBackbufferCssProps = [
  * @property {string} [labelProp='label']
  * @property {string} [valueProp='value']
  * @property {string} [multiItemLabelProp='short_label']
+ * @property {'after'|'before'|'none'} [multiItemRemovePosition='after']
  * @property {number} [maxMultiItems] maximum number of multi items. The rest will get a single item to represent.
  * @property {function(count: number, items: DropList.ItemBase[]):string} [multiItemsRestLabelProvider] label for the item representing the rest of the items.
  * @property {DropList.ItemBase[]|null} [items] initial items
@@ -118,7 +119,7 @@ const inputBackbufferCssProps = [
  * @property {boolean} [closeListWhenLoading] whether we should close the list automatically when loading
  * @property {string[]} [clearInputWhen=['single_close','multi_select_single']] clear input box when closing the droplist or selecting <code>['single_close', 'multi_close', 'multi_select_single']</code>
  * */
-const defaultOptions = {
+export const DefaultOptions = {
     el: null,
     baseClassName: 'selectbox',
     disabled: false,
@@ -145,6 +146,7 @@ const defaultOptions = {
     labelProp: 'label',
     valueProp: 'value',
     multiItemLabelProp: 'short_label',
+    multiItemRemovePosition: 'after',
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
@@ -203,7 +205,7 @@ class SelectBox {
      * @param {SelectBox.Options} options
      */
     constructor(options) {
-        const o = { ...defaultOptions };
+        const o = { ...DefaultOptions };
 
         for (let [key, value] of Object.entries(/**@type Object*/options))
             if (value !== undefined)
@@ -241,6 +243,7 @@ class SelectBox {
             labelProp: o.labelProp,
             valueProp: o.valueProp,
             multiItemLabelProp: o.multiItemLabelProp,
+            multiItemRemovePosition: o.multiItemRemovePosition,
 
             maxMultiItems: o.maxMultiItems,
             multiItemsRestLabelProvider: o.multiItemsRestLabelProvider,
@@ -1153,6 +1156,18 @@ class SelectBox {
     setMultiItemLabelProp(prop) {
         const p = this._p;
         p.multiItemLabelProp = prop;
+        this._scheduleSync('render_items');
+        return this;
+    }
+
+    /**
+     * @param {'before'|'after'|'none'} position
+     * @returns {SelectBox}
+     */
+    setMultiItemRemovePosition(position) {
+        const p = this._p;
+        p.multiItemRemovePosition = position;
+        this._scheduleSync('render_items');
         return this;
     }
 
@@ -2873,22 +2888,29 @@ class SelectBox {
         if (label === false)
             return null;
 
+        const elRemove = createElement('span', {
+            class: `${p.baseClassName}__item_remove`,
+            role: 'presentation',
+        });
+
         const itemEl = createElement('li',
             {
                 class: `${p.baseClassName}__item`,
                 tabindex: '0',
                 title: label,
             },
-            [
-                createElement('span', {
-                    class: `${p.baseClassName}__item_remove`,
-                    role: 'presentation',
-                }),
-            ],
         );
 
+        if (p.multiItemRemovePosition === 'before') {
+            itemEl.appendChild(elRemove);
+        }
+
         this._renderMultiItemContent(item, itemEl);
 
+        if (p.multiItemRemovePosition === 'after') {
+            itemEl.appendChild(elRemove);
+        }
+
         itemEl[ItemSymbol] = item;
 
         return itemEl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",

package/scss/selectbox.scss

@@ -375,16 +375,30 @@ $spinner-transition-duration: .15s;
     display: inline-block;
     font-weight: bold;
     margin-top: 0.2em;
-    margin-right: var(--selectbox-multi-item-remove-spacing);
 	font-size: 13px;
 
 	&:before {
 		content: '×';
 	}
 
-    @include insideRtlSelectBox {
+    &:first-child {
+        margin-right: var(--selectbox-multi-item-remove-spacing);
+    }
+
+    &:last-child {
         margin-left: var(--selectbox-multi-item-remove-spacing);
-        margin-right: 0;
+    }
+
+    @include insideRtlSelectBox {
+        &:first-child {
+            margin-left: var(--selectbox-multi-item-remove-spacing);
+            margin-right: 0;
+        }
+
+        &:last-child {
+            margin-right: var(--selectbox-multi-item-remove-spacing);
+            margin-left: 0;
+        }
     }
 }
 

package/vue/DropList.vue

@@ -19,136 +19,138 @@ const AllListEvents = [
     'subitems:select', 'subitems:blur',
 ];
 
+export const PropTypes = {
+    baseClassName: {
+        type: String,
+    },
+    additionalClasses: {
+        type: [Object, Array, String],
+    },
+    direction: {
+        type: String,
+        default: undefined,
+    },
+    autoFocus: {
+        type: Boolean,
+        default: true,
+    },
+    autoItemBlur: {
+        type: Boolean,
+        default: true,
+    },
+    autoItemBlurDelay: {
+        type: Number,
+        default: 300,
+    },
+    capturesFocus: {
+        type: Boolean,
+        default: true,
+    },
+    multi: {
+        type: Boolean,
+        default: false,
+    },
+    isHeaderVisible: {
+        type: Boolean,
+        default: false,
+    },
+    searchable: {
+        type: Boolean,
+        default: false,
+    },
+    noResultsText: {
+        type: String,
+        default: 'No matching results',
+    },
+    filterThrottleWindow: {
+        type: Number,
+        default: 300,
+    },
+    filterOnEmptyTerm: {
+        type: Boolean,
+        default: false,
+    },
+    filterGroups: {
+        type: Boolean,
+        default: false,
+    },
+    filterEmptyGroups: {
+        type: Boolean,
+        default: false,
+    },
+    filterFn: {
+        type: Function,
+        default: undefined,
+    },
+    filterDependencies: {
+        type: [Array, String, Number, Boolean, Object],
+        default: undefined,
+    },
+    keyDownHandler: {
+        type: Function,
+    },
+    autoCheckGroupChildren: {
+        type: Boolean,
+        default: true,
+    },
+    useExactTargetWidth: {
+        type: Boolean,
+        default: false,
+    },
+    constrainToWindow: {
+        type: Boolean,
+        default: true,
+    },
+    autoFlipDirection: {
+        type: Boolean,
+        default: true,
+    },
+    estimatedItemHeight: {
+        type: Number,
+        default: 20,
+    },
+    estimateWidth: {
+        type: Boolean,
+        default: false,
+    },
+    virtualMinItems: {
+        type: Number,
+        default: 10,
+    },
+    labelProp: {
+        type: String,
+        default: 'label',
+    },
+    valueProp: {
+        type: String,
+        default: 'value',
+    },
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    [isVue3 ? 'modelValue' : 'value']: { // Vue 2
+        type: [Number, String, Object, Array],
+    },
+    renderItem: {
+        type: Function,
+    },
+    unrenderItem: {
+        type: Function,
+    },
+    positionOptions: {
+        type: Object,
+    },
+    autoRelayoutOnItemsChange: {
+        type: Boolean,
+        default: true,
+    },
+};
+
 export default {
     inheritAttrs: false,
 
-    props: {
-        baseClassName: {
-            type: String,
-        },
-        additionalClasses: {
-            type: [Object, Array, String],
-        },
-        direction: {
-            type: String,
-            default: undefined,
-        },
-        autoFocus: {
-            type: Boolean,
-            default: true,
-        },
-        autoItemBlur: {
-            type: Boolean,
-            default: true,
-        },
-        autoItemBlurDelay: {
-            type: Number,
-            default: 300,
-        },
-        capturesFocus: {
-            type: Boolean,
-            default: true,
-        },
-        multi: {
-            type: Boolean,
-            default: false,
-        },
-        isHeaderVisible: {
-            type: Boolean,
-            default: false,
-        },
-        searchable: {
-            type: Boolean,
-            default: false,
-        },
-        noResultsText: {
-            type: String,
-            default: 'No matching results',
-        },
-        filterThrottleWindow: {
-            type: Number,
-            default: 300,
-        },
-        filterOnEmptyTerm: {
-            type: Boolean,
-            default: false,
-        },
-        filterGroups: {
-            type: Boolean,
-            default: false,
-        },
-        filterEmptyGroups: {
-            type: Boolean,
-            default: false,
-        },
-        filterFn: {
-            type: Function,
-            default: undefined,
-        },
-        // eslint-disable-next-line vue/require-prop-types
-        filterDependencies: {
-            default: undefined,
-        },
-        keyDownHandler: {
-            type: Function,
-        },
-        autoCheckGroupChildren: {
-            type: Boolean,
-            default: true,
-        },
-        useExactTargetWidth: {
-            type: Boolean,
-            default: false,
-        },
-        constrainToWindow: {
-            type: Boolean,
-            default: true,
-        },
-        autoFlipDirection: {
-            type: Boolean,
-            default: true,
-        },
-        estimatedItemHeight: {
-            type: Number,
-            default: 20,
-        },
-        estimateWidth: {
-            type: Boolean,
-            default: false,
-        },
-        virtualMinItems: {
-            type: Number,
-            default: 10,
-        },
-        labelProp: {
-            type: String,
-            default: 'label',
-        },
-        valueProp: {
-            type: String,
-            default: 'value',
-        },
-        items: {
-            type: Array,
-            default: () => [],
-        },
-        [isVue3 ? 'modelValue' : 'value']: { // Vue 2
-            type: [Number, String, Object, Array],
-        },
-        renderItem: {
-            type: Function,
-        },
-        unrenderItem: {
-            type: Function,
-        },
-        positionOptions: {
-            type: Object,
-        },
-        autoRelayoutOnItemsChange: {
-            type: Boolean,
-            default: true,
-        },
-    },
+    props: PropTypes,
 
     emits: [
         // vue events