simp-select 1.1.23 → 1.2.0

package/src/simpleSelectItemDOM.ts

@@ -63,6 +63,8 @@ export class SimpleSelectItemDOM {
 
   elemTitle!: HTMLDivElement; // not native
 
+  elemAlwaysLabel!: HTMLDivElement; // not native
+
   confirmWrap: HTMLElement | null = null; // not native
 
   confirmOk: HTMLButtonElement | null = null; // not native
@@ -208,6 +210,11 @@ export class SimpleSelectItemDOM {
       }
     }
 
+    /** Placeholder показывается всегда (не меняется даже если что-то выбрано). Отдельный DOM элемент */
+    if (this.$select.hasAttribute('data-is-label-mode')) {
+      this.options.isLabelMode = ifTrueDataAttr(this.$select.getAttribute('data-is-label-mode'));
+    }
+
     if (this.$select.hasAttribute('data-simple-always-open')) {
       this.options.isAlwaysOpen = ifTrueDataAttr(this.$select.getAttribute('data-simple-always-open'));
 
@@ -324,6 +331,9 @@ export class SimpleSelectItemDOM {
       resClassesWrap += ` ${getClass('up', true)}`;
     }
     resClassesWrap += ` ${this.isMulti ? getClass('multi', true) : getClass('single', true)}`;
+    if (this.options.isLabelMode) {
+      resClassesWrap += ' ' + getClass('label_mode', true);
+    }
     this.elemWrap.className = resClassesWrap;
     this.elemWrap.dataset.countAll = this.$select.options.length.toString();
 
@@ -471,10 +481,35 @@ export class SimpleSelectItemDOM {
   }
 
   private createTitleHTML() {
+    const itemsChecked = this.getChecked();
+    const isSelectedValue = !!itemsChecked.filter((item) => item.value).length;
+    const classFillValue = getClass('fill_with_value', true);
+    const classFillNoValue = getClass('fill_without_value', true);
+    if (isSelectedValue) {
+      this.elemWrap.classList.add(classFillValue);
+      this.elemWrap.classList.remove(classFillNoValue);
+    } else {
+      this.elemWrap.classList.add(classFillNoValue);
+      this.elemWrap.classList.remove(classFillValue);
+    }
+
     if (this.options.isRemoveTop) {
       return;
     }
 
+    if (this.options.isLabelMode && !this.elemAlwaysLabel) {
+      this.elemAlwaysLabel = document.createElement('div');
+      let classesTitle = getClass('label');
+      if (this.options.isOnlyPlaceholder) {
+        alert('111');
+        classesTitle += ` ${getClass('always-placeholder', true, classesTitle)}`;
+      }
+      this.elemAlwaysLabel.className = classesTitle;
+      this.elemAlwaysLabel.innerHTML = this.titlePlaceholder;
+      // this.elemTopBody.prepend(this.elemTitle);
+      this.elemTopBody.insertBefore(this.elemAlwaysLabel, this.elemTopBody.childNodes[0]);
+    }
+
     if (!this.elemTitle) {
       this.elemTitle = document.createElement('div');
       let classesTitle = getClass('title');
@@ -486,14 +521,10 @@ export class SimpleSelectItemDOM {
       this.elemTopBody.insertBefore(this.elemTitle, this.elemTopBody.childNodes[0]);
     }
 
-    const itemsChecked = this.getChecked();
-
     this.elemTop.title = '';
 
     const isPlaceholder = !itemsChecked.length;
 
-    const isSelectedValue = !!itemsChecked.filter((item) => item.value).length;
-
     let title:string = this.titlePlaceholder;
     if (itemsChecked.length && !this.options.isOnlyPlaceholder) {
       let attrTitle = '';
@@ -532,12 +563,7 @@ export class SimpleSelectItemDOM {
 
     this.elemTitle.innerHTML = title;
 
-    const classFillValue = getClass('fill_with_value', true);
-    if (isSelectedValue) {
-      this.elemWrap.classList.add(classFillValue);
-    } else {
-      this.elemWrap.classList.remove(classFillValue);
-    }
+
 
     if (isPlaceholder) {
       this.elemTitle.classList.add('SimpleSel__title--placeholder');

package/src/style.css

@@ -11,6 +11,8 @@
 	--simpS_color_dis: #8b8b8b;
 	--simpS_status_bar: rgba(46, 122, 1, 0.67);
 	--simpS_dropdownBg: var(--simpS_bg);
+	--simpS_labelBg: var(--simpS_bg);
+	--simpS_label_pad_hor: 4px;
 	--simpS_borderColor: var(--simpS_color);
 	--simpS_DropDownBorderColor: var(--simpS_borderColor);
 
@@ -469,3 +471,26 @@
 	width: 100%;
 	transition-duration: var(--duration, 1ms);
 }
+
+/**  **/
+.SimpleSel--label_mode.SimpleSel--fill_without_value {
+	.SimpleSel__title {
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
+	}
+}
+.SimpleSel__label {
+	position: absolute;
+	top: 50%;
+	left: var(--simpS_pad_hor);
+	transform: translateY(-50%);
+	transition: all 0.2s ease;
+	pointer-events: none;
+}
+.SimpleSel--fill_with_value .SimpleSel__label {
+	top: 0;
+	transform: translateY(-50%);
+	background-color: var(--simpS_labelBg);
+	padding: 0 var(--simpS_label_pad_hor);
+}

package/src/types/simpleSelect.types.ts

@@ -50,6 +50,8 @@ export interface ISimpleSelectOptions {
   isAlwaysOpen: boolean;
   isAlwaysOpenShowDisabledTabindex: boolean;
 
+  isLabelMode: boolean;
+
   detectNative?: () => boolean;
 
   isScrollToCheckedFirst: boolean;