@kumori/aurora-wui-components 0.0.248 → 0.0.249

package/dist/components/axebow-selector-slider/axebow-selector-slider.d.ts

@@ -1,18 +1,24 @@
 import { LitElement } from 'lit';
-export type SelectorSliderPosition = 'min' | 'middle' | 'max';
+export type SelectorSliderPosition = number | 'min' | 'middle' | 'max';
 export declare class AxebowSelectorSlider extends LitElement {
     static styles: import('lit').CSSResult[];
     quantity: SelectorSliderPosition;
     minTag: string | number;
     mediumTag: string | number;
     maxTag: string | number;
+    min?: number;
+    max?: number;
+    step: number;
     disabled: boolean;
     get value(): SelectorSliderPosition;
     set value(val: SelectorSliderPosition);
     private _trackContainer;
     private _isDragging;
-    private get _stepIndex();
-    private _setStepIndex;
+    private get _minVal();
+    private get _maxVal();
+    private get _numericQuantity();
+    private get _percentage();
+    private _setValue;
     private _handlePointerDown;
     private _updateFromPointer;
     private _handleKeyDown;

package/dist/components/axebow-selector-slider/axebow-selector-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-selector-slider.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-selector-slider/axebow-selector-slider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAGvD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE9D,qBACa,oBAAqB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BASX;IAE0B,QAAQ,EAAE,sBAAsB,CAAS;IACzD,MAAM,EAAE,MAAM,GAAG,MAAM,CAAK;IAC5B,SAAS,EAAE,MAAM,GAAG,MAAM,CAAO;IACjC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAO;IACb,QAAQ,UAAS;IAE9C,IACI,KAAK,IAAI,sBAAsB,CAElC;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,sBAAsB,EAEpC;IAEiC,OAAO,CAAC,eAAe,CAAe;IAExE,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,KAAK,UAAU,GAUrB;IAED,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,cAAc;IAkBtB,MAAM;CAiDP"}
+{"version":3,"file":"axebow-selector-slider.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-selector-slider/axebow-selector-slider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAGvD,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvE,qBACa,oBAAqB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BASX;IAEyC,QAAQ,EAAE,sBAAsB,CAAK;IACpE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAK;IAC5B,SAAS,EAAE,MAAM,GAAG,MAAM,CAAO;IACjC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAO;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,SAAK;IACR,QAAQ,UAAS;IAE9C,IACI,KAAK,IAAI,sBAAsB,CAElC;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,sBAAsB,EAEpC;IAEiC,OAAO,CAAC,eAAe,CAAe;IAExE,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,KAAK,gBAAgB,GAU3B;IAED,OAAO,KAAK,WAAW,GAMtB;IAED,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,cAAc;IAsBtB,MAAM;CAoDP"}

package/dist/index.js

@@ -7454,10 +7454,11 @@ AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTab
 var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.quantity = "min";
+		this.quantity = 0;
 		this.minTag = 0;
 		this.mediumTag = "Y";
 		this.maxTag = "X";
+		this.step = 1;
 		this.disabled = false;
 		this._isDragging = false;
 	}
@@ -7479,28 +7480,43 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
 	set value(val) {
 		this.quantity = val;
 	}
-	get _stepIndex() {
-		switch (this.quantity) {
-			case "middle": return 1;
-			case "max": return 2;
-			default: return 0;
+	get _minVal() {
+		if (typeof this.min === "number") return this.min;
+		const n = Number(this.minTag);
+		return isNaN(n) ? 0 : n;
+	}
+	get _maxVal() {
+		if (typeof this.max === "number") return this.max;
+		const n = Number(this.maxTag);
+		return isNaN(n) ? 100 : n;
+	}
+	get _numericQuantity() {
+		if (typeof this.quantity === "string") {
+			const str = this.quantity.toLowerCase();
+			if (str === "min") return this._minVal;
+			if (str === "max") return this._maxVal;
+			if (str === "middle") return Math.round((this._minVal + this._maxVal) / 2);
+			const parsed = Number(this.quantity);
+			if (!isNaN(parsed)) return parsed;
 		}
-	}
-	_setStepIndex(index) {
-		const steps = [
-			"min",
-			"middle",
-			"max"
-		];
-		const clamped = Math.max(0, Math.min(2, Math.round(index)));
-		const newValue = steps[clamped];
-		if (this.quantity !== newValue) {
-			this.quantity = newValue;
+		return typeof this.quantity === "number" ? this.quantity : this._minVal;
+	}
+	get _percentage() {
+		const min = this._minVal;
+		const max = this._maxVal;
+		if (max <= min) return 0;
+		return (Math.max(min, Math.min(max, this._numericQuantity)) - min) / (max - min) * 100;
+	}
+	_setValue(newValue) {
+		const min = this._minVal;
+		const max = this._maxVal;
+		const clamped = Math.max(min, Math.min(max, newValue));
+		if (this._numericQuantity !== clamped) {
+			this.quantity = clamped;
 			this.dispatchEvent(new CustomEvent("change", {
 				detail: {
-					value: newValue,
-					quantity: newValue,
-					index: clamped
+					value: clamped,
+					quantity: clamped
 				},
 				bubbles: true,
 				composed: true
@@ -7529,32 +7545,38 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
 		const width = rect.width;
 		if (width <= 0) return;
 		const ratio = Math.max(0, Math.min(1, x / width));
-		let step = 0;
-		if (ratio < .25) step = 0;
-		else if (ratio > .75) step = 2;
-		else step = 1;
-		this._setStepIndex(step);
+		const min = this._minVal;
+		const rawVal = min + ratio * (this._maxVal - min);
+		const step = this.step || 1;
+		const stepped = Math.round((rawVal - min) / step) * step + min;
+		this._setValue(stepped);
 	}
 	_handleKeyDown(e) {
 		if (this.disabled) return;
-		const current = this._stepIndex;
+		const min = this._minVal;
+		const max = this._maxVal;
+		const step = this.step || 1;
+		const current = this._numericQuantity;
 		if (e.key === "ArrowRight" || e.key === "ArrowUp") {
 			e.preventDefault();
-			this._setStepIndex(current + 1);
+			this._setValue(Math.min(max, current + step));
 		} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
 			e.preventDefault();
-			this._setStepIndex(current - 1);
+			this._setValue(Math.max(min, current - step));
 		} else if (e.key === "Home") {
 			e.preventDefault();
-			this._setStepIndex(0);
+			this._setValue(min);
 		} else if (e.key === "End") {
 			e.preventDefault();
-			this._setStepIndex(2);
+			this._setValue(max);
 		}
 	}
 	render() {
-		const step = this._stepIndex;
-		const percent = step === 0 ? 0 : step === 1 ? 50 : 100;
+		const percent = this._percentage;
+		const currentVal = this._numericQuantity;
+		const min = this._minVal;
+		const max = this._maxVal;
+		const mid = Math.round((min + max) / 2);
 		return html`
       <div class="w-full flex flex-col gap-2 select-none ${this.disabled ? "opacity-50 pointer-events-none" : ""}">
         <!-- Slider Track Container -->
@@ -7562,10 +7584,10 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
           class="relative w-full h-8 flex items-center cursor-pointer touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[#006BFF] rounded-full"
           tabindex=${this.disabled ? -1 : 0}
           role="slider"
-          aria-valuemin="0"
-          aria-valuemax="2"
-          aria-valuenow=${step}
-          aria-valuetext=${this.quantity}
+          aria-valuemin=${min}
+          aria-valuemax=${max}
+          aria-valuenow=${currentVal}
+          aria-valuetext=${String(currentVal)}
           @pointerdown=${this._handlePointerDown}
           @keydown=${this._handleKeyDown}
         >
@@ -7587,13 +7609,13 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
 
         <!-- Labels below -->
         <div class="flex justify-between items-center text-sm font-semibold text-[#78787A] px-1">
-          <span class="w-1/3 text-left cursor-pointer" @click=${() => !this.disabled && this._setStepIndex(0)}>
+          <span class="w-1/3 text-left cursor-pointer" @click=${() => !this.disabled && this._setValue(min)}>
             ${this.minTag}
           </span>
-          <span class="w-1/3 text-center cursor-pointer" @click=${() => !this.disabled && this._setStepIndex(1)}>
+          <span class="w-1/3 text-center cursor-pointer" @click=${() => !this.disabled && this._setValue(mid)}>
             ${this.mediumTag}
           </span>
-          <span class="w-1/3 text-right cursor-pointer" @click=${() => !this.disabled && this._setStepIndex(2)}>
+          <span class="w-1/3 text-right cursor-pointer" @click=${() => !this.disabled && this._setValue(max)}>
             ${this.maxTag}
           </span>
         </div>
@@ -7601,12 +7623,18 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
     `;
 	}
 };
-__decorate([property({ type: String })], AxebowSelectorSlider.prototype, "quantity", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], AxebowSelectorSlider.prototype, "quantity", void 0);
 __decorate([property()], AxebowSelectorSlider.prototype, "minTag", void 0);
 __decorate([property()], AxebowSelectorSlider.prototype, "mediumTag", void 0);
 __decorate([property()], AxebowSelectorSlider.prototype, "maxTag", void 0);
+__decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "min", void 0);
+__decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "max", void 0);
+__decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "step", void 0);
 __decorate([property({ type: Boolean })], AxebowSelectorSlider.prototype, "disabled", void 0);
-__decorate([property({ type: String })], AxebowSelectorSlider.prototype, "value", null);
+__decorate([property()], AxebowSelectorSlider.prototype, "value", null);
 __decorate([query(".slider-track-container")], AxebowSelectorSlider.prototype, "_trackContainer", void 0);
 AxebowSelectorSlider = __decorate([customElement("axebow-selector-slider")], AxebowSelectorSlider);
 //#endregion