@danielgindi/selectbox 2.0.26 → 2.0.28

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

@@ -78,6 +78,7 @@ const inputBackbufferCssProps = [
  * @property {string|string[]} [additionalClasses]
  * @property {'ltr'|'rtl'|'auto'} [direction='auto']
  * @property {boolean} [disabled=false] Should start as disabled?
+ * @property {boolean} [readonly=false] Should start as readonly?
  * @property {boolean} [clearable=true] Has clear button?
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
  * @property {string} [placeholder=''] Placeholder text
@@ -96,6 +97,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,10 +120,11 @@ 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,
+    readonly: false,
     clearable: true,
     hasOpenIndicator: true,
     placeholder: '',
@@ -145,6 +148,7 @@ const defaultOptions = {
     labelProp: 'label',
     valueProp: 'value',
     multiItemLabelProp: 'short_label',
+    multiItemRemovePosition: 'after',
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
@@ -203,7 +207,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)
@@ -219,6 +223,7 @@ class SelectBox {
             listOptions: o.listOptions,
 
             disabled: !!o.disabled,
+            readonly: !!o.readonly,
             clearable: !!o.clearable,
             hasOpenIndicator: !!o.hasOpenIndicator,
             placeholder: o.placeholder,
@@ -241,6 +246,7 @@ class SelectBox {
             labelProp: o.labelProp,
             valueProp: o.valueProp,
             multiItemLabelProp: o.multiItemLabelProp,
+            multiItemRemovePosition: o.multiItemRemovePosition,
 
             maxMultiItems: o.maxMultiItems,
             multiItemsRestLabelProvider: o.multiItemsRestLabelProvider,
@@ -300,6 +306,7 @@ class SelectBox {
         p.multiItemEls = [];
 
         this.enable(!p.disabled);
+        this.setReadOnly(!p.readonly);
 
         this._setupDropdownMenu();
 
@@ -526,6 +533,32 @@ class SelectBox {
         return this._p.disabled;
     }
 
+    /**
+     * Sets read only mode
+     * @param {boolean=true} readonly Should the control be read only?
+     * @returns {SelectBox}
+     */
+    setReadOnly(readonly) {
+        const p = this._p;
+
+        if (readonly === undefined) {
+            readonly = true;
+        }
+        p.readonly = !readonly;
+        p.el.setAttribute('aria-readonly', p.readonly.toString());
+        p.input.readonly = !!p.readonly;
+
+        return this;
+    }
+
+    /**
+     * Is the control enabled?
+     * @returns {boolean}
+     */
+    isReadOnly() {
+        return !this._p.readonly;
+    }
+
     /**
      * @param {string|string[]} classes
      * @returns {SelectBox}
@@ -1153,6 +1186,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;
     }
 
@@ -1675,7 +1720,7 @@ class SelectBox {
                         if (!closestUntil(evt.target, `.${p.baseClassName}__item_remove`, evt.currentTarget))
                             return;
 
-                        if (p.disabled) return;
+                        if (p.disabled || p.readonly) return;
 
                         this._removeMultiItemFromEvent(
                             /**@type Element*/
@@ -1728,6 +1773,7 @@ class SelectBox {
             if (p.hasOpenIndicator) {
                 p.openIndicator = createElement('span', { class: `${p.baseClassName}__open_indicator` });
                 p.el.appendChild(p.openIndicator);
+                p.el.classList.add(`${p.baseClassName}__has_open_indicator`);
             } else {
                 remove(p.openIndicator);
                 delete p.openIndicator;
@@ -2042,7 +2088,7 @@ class SelectBox {
 
         setTimeout(() => {
             if (this[DestroyedSymbol]) return; // destroyed by event handler
-            if (p.disabled) return;
+            if (p.disabled || p.readonly) return;
 
             this._trigger('search:blur');
 
@@ -2185,7 +2231,8 @@ class SelectBox {
                         p.lastKeyAllowsNonTypeKeys &&
                         !p.multi &&
                         !dropList.hasFocusedItem() &&
-                        !p.disabled
+                        !p.disabled &&
+                        !p.readonly
                     )) {
                         this.toggleList();
                         evt.preventDefault();
@@ -2197,20 +2244,20 @@ class SelectBox {
         if (p.input) {
             p.sink
                 .add(p.input, 'input.dropdown', () => {
-                    if (p.disabled) return;
+                    if (p.disabled || p.readonly) return;
 
                     p.filterTerm = p.input.value.trim();
                     p.dropList?.setSearchTerm(p.filterTerm, true);
                 })
                 .add(p.input, 'click.dropdown', () => {
-                    if (p.disabled) return;
+                    if (p.disabled || p.readonly) return;
 
                     if (!p.multi && p.searchable) {
                         this.openList();
                     }
                 })
                 .add(p.input, 'focus.dropdown', () => {
-                    if (p.disabled) return;
+                    if (p.disabled || p.readonly) return;
 
                     this._trigger('search:focus');
 
@@ -2227,7 +2274,7 @@ class SelectBox {
 
         p.sink
             .add(p.el, 'mousedown.dropdown', () => {
-                if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled) {
+                if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled && !p.readonly) {
                     this.toggleList();
                 }
                 avoidToggleFromClick = false;
@@ -2236,7 +2283,7 @@ class SelectBox {
                 if (currentTouchId) return;
                 currentTouchId = evt.changedTouches[0].identifier;
 
-                if (this.isDisabled())
+                if (this.isDisabled() || this.isReadOnly())
                     return;
 
                 if (closestUntil(evt.target, `.${p.baseClassName}__item,.${p.baseClassName}__clear`, p.el))
@@ -2676,7 +2723,7 @@ class SelectBox {
                 p.el.classList.add(`${p.baseClassName}__has_clear`);
 
                 p.sink.add(p.clearButton, 'click', () => {
-                    if (this.isDisabled()) return;
+                    if (this.isDisabled() || this.isReadOnly()) return;
                     this.clear();
                 });
             }
@@ -2873,22 +2920,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;
@@ -3205,7 +3259,7 @@ class SelectBox {
     _handleMultiKeydown(event) {
         const p = this._p;
 
-        if (p.disabled) return;
+        if (p.disabled || p.readonly) return;
 
         const isRtl = getComputedStyle(p.el).direction === 'rtl';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "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

@@ -70,6 +70,14 @@ $spinner-transition-duration: .15s;
 		}
 	}
 
+	&[aria-readonly=true] {
+		cursor: default;
+
+		* {
+			cursor: default;
+		}
+	}
+
 	&.has_droplist_above {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
@@ -272,7 +280,7 @@ $spinner-transition-duration: .15s;
         left: calc(var(--selectbox-clear-spacing) + var(--selectbox-open-indicator-width));
     }
 
-    .selectbox[aria-disabled=true] > & {
+    .selectbox[aria-disabled=true] > &, .selectbox[aria-readonly=true] > & {
         display: none;
     }
 }
@@ -375,16 +383,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