@mustib/web-components 0.0.0-alpha.0

package/components/mu-trigger.js

@@ -0,0 +1,175 @@
+import { _ as __decorate, p as parseJson } from '../mu-element-CZDI_RCY.js';
+import { MuTransparent } from './mu-transparent.js';
+import { staticProperty } from '../decorators.js';
+import 'lit';
+import 'lit/decorators.js';
+
+/**
+ * `<mu-trigger>` is a helper element that listens for a specified event
+ * (e.g., `click`) and dispatches a custom event (e.g., `mu-trigger-toggle`)
+ * to a target element.
+ *
+ * This is useful when you want to listen to event and dispatch a custom event
+ * like dispatch toggle when a user clicks on a button.
+ *
+ * it abstracts away the logic of selecting the element, listening to the event, dispatching the custom event, removing the event listener when the element is disconnected, and more.
+ *
+ * you can reuse different triggers (click, keydown, hover, etc.)
+ * without hard-coding logic inside the parent element (e.g., `mu-select`).
+ */
+class MuTrigger extends MuTransparent {
+    constructor() {
+        super(...arguments);
+        /**
+         * The DOM event to listen for (e.g., `"click"`, `"keydown"`, `"mouseenter"`).
+         * @attr listen-to
+         * @default "click"
+         */
+        this.listenTo = 'click';
+        /**
+         * A boolean value indicates if the event should call `stopPropagation`.
+         * @default false
+         */
+        this.stopPropagation = false;
+        /**
+         * A boolean value indicates if the event should call `stopImmediatePropagation`.
+         * @default false
+         */
+        this.stopImmediatePropagation = false;
+        /**
+         * The name of the custom event to dispatch when the trigger fires.
+         * @default "mu-trigger-toggle"
+         */
+        this.dispatch = 'mu-trigger-toggle';
+        /**
+         * Whether the event is no-cancelable.
+         * @default false
+         */
+        this.noCancelable = false;
+        /**
+         * Whether the custom event should not bubble.
+         *
+         * @default false
+         */
+        this.noBubble = false;
+        /**
+         * A boolean value indicates if the listener should not be added as a capture listener.
+         * @default false
+         */
+        this.noCapture = false;
+        /**
+         * A boolean value indicates if the event should not call `preventDefault`.
+         * @default false
+         */
+        this.noPreventDefault = false;
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        /**
+         *
+         */
+        this._listener = (e) => {
+            if (this.disabled)
+                return;
+            if (this.stopPropagation)
+                e.stopPropagation();
+            if (this.stopImmediatePropagation)
+                e.stopImmediatePropagation();
+            if (!this.noPreventDefault)
+                e.preventDefault();
+            const { dispatchElement, eventName, shouldDispatch } = this._createDispatchEvent(e);
+            if (!shouldDispatch)
+                return;
+            dispatchElement.dispatchEvent(new CustomEvent(eventName, { bubbles: !this.noBubble, composed: true, cancelable: !this.noCancelable, detail: this.detail }));
+        };
+    }
+    /**
+     * The current target of the event.
+     */
+    get _currentTarget() {
+        const currTarget = this.currentTargetSelector ? this.closestPierce(this.currentTargetSelector) : this;
+        if (!currTarget) {
+            console.warn(`no element found with selector (${this.currentTargetSelector}) as the current target to listen to (${this.listenTo}) events.\nFalling back to the current element`, this);
+        }
+        return currTarget || this;
+    }
+    /**
+     * A function that returns the element where the event should be dispatched.
+     * If not provided, the trigger dispatches the event on itself.
+     */
+    _getDispatchElement() {
+        const element = this.dispatchToSelector ? this.closestPierce(this.dispatchToSelector) : this;
+        if (!element)
+            console.warn(`no element found with selector ${this.dispatchToSelector} to dispatch ${this.dispatch} to.\nFalling back to the current element`, this);
+        return element || this;
+    }
+    /**
+     * This function is called after the event is fired.
+     * You can return a custom object with the following properties to customize the dispatching of the event.
+     * - `shouldDispatch`: a boolean indicating whether the event should be dispatched.
+     * - `eventName`: a string indicating the name of the event to be dispatched.
+     * - `dispatchElement`: an element indicating where the event should be dispatched.
+     *
+     * If you return nothing, the event will not be dispatched.
+     *
+     * @param e The original event that was fired.
+     * @returns {Object} An object with the properties above.
+     */
+    _createDispatchEvent(e) {
+        return {
+            shouldDispatch: true,
+            eventName: this.dispatch,
+            dispatchElement: this._getDispatchElement()
+        };
+    }
+    /**
+     *
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this._currentTarget.addEventListener(this.listenTo, this._listener, { capture: !this.noCapture });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._currentTarget.removeEventListener(this.listenTo, this._listener, { capture: !this.noCapture });
+    }
+}
+__decorate([
+    staticProperty()
+], MuTrigger.prototype, "listenTo", void 0);
+__decorate([
+    staticProperty({
+        converter(value) {
+            return value ? parseJson(value) : undefined;
+        },
+    })
+], MuTrigger.prototype, "detail", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuTrigger.prototype, "stopPropagation", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuTrigger.prototype, "stopImmediatePropagation", void 0);
+__decorate([
+    staticProperty()
+], MuTrigger.prototype, "dispatch", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuTrigger.prototype, "noCancelable", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuTrigger.prototype, "noBubble", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuTrigger.prototype, "noCapture", void 0);
+__decorate([
+    staticProperty()
+], MuTrigger.prototype, "currentTargetSelector", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuTrigger.prototype, "noPreventDefault", void 0);
+__decorate([
+    staticProperty()
+], MuTrigger.prototype, "dispatchToSelector", void 0);
+MuTrigger.register('mu-trigger');
+
+export { MuTrigger };

package/decorators.d.ts

@@ -0,0 +1,34 @@
+type Options = {
+    /**
+     * The HTML attribute to get the value from.
+     * If not provided, it defaults to the kebab case version of the property name.
+     * @example If the property name is "propName", the attribute will default to "prop-name".
+     */
+    attribute?: string;
+    /**
+     * A function that converts the attribute value to the property value.
+     */
+    converter?: (value: string | null) => any;
+    /**
+     * Whether to reflect the default value of the property to the attribute.
+     *
+     * The default value is the value that is assigned to the property on the class definition like so:
+     * `propName = value` or basically any value that calls the setter before the first call to the getter.
+     *
+     * This is useful when you want the attribute to have the same value as the property by default.
+     *
+     * For example, if you have a property `visible` with a default value of `true`, and you want the attribute `visible` to have the value `"true"` by default, you can set `reflectDefault` to `true`.
+     *
+     * @default false
+     */
+    reflectDefault?: boolean;
+    /**
+     * A function that converts the default property value to the attribute value.
+     *
+     * this is only used if `reflectDefault` is true
+     */
+    reflectConverter?: (value: any) => string;
+};
+declare function staticProperty(options?: Options): <T extends HTMLElement>(target: T, key: string) => void;
+
+export { staticProperty };

package/decorators.js

@@ -0,0 +1,50 @@
+const defaultConverter = (value) => (value ?? undefined);
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+const defaultReflectConverter = (value) => value.toString();
+function staticProperty(options) {
+    return function staticPropertyDecorator(target, key) {
+        if (!Reflect.has(target, '__staticProperties')) {
+            Reflect.set(target, '__staticProperties', new WeakMap());
+        }
+        const { attribute = toKebabCase(key), converter = defaultConverter, reflectDefault = false, reflectConverter = defaultReflectConverter } = options ?? {};
+        Reflect.defineProperty(target, key, {
+            configurable: false,
+            enumerable: true,
+            set(v) {
+                const mapData = getOrCreateMapData(this, key);
+                if (mapData.hasBeenCalled) {
+                    throw new Error(`cannot set ${v} for a static property ${key} after first call to get`);
+                }
+                if (reflectDefault) {
+                    this.setAttribute(attribute, reflectConverter(v));
+                }
+                mapData.defaultValue = v;
+            },
+            get() {
+                const mapData = getOrCreateMapData(this, key);
+                if (mapData.hasBeenCalled)
+                    return mapData.value;
+                mapData.hasBeenCalled = true;
+                const attrValue = this.getAttribute(attribute);
+                if (attrValue === null && mapData.defaultValue !== undefined) {
+                    mapData.value = mapData.defaultValue;
+                }
+                else
+                    mapData.value = converter(attrValue);
+                return mapData.value;
+            },
+        });
+    };
+}
+function getOrCreateMapData(instance, key) {
+    let properties = Reflect.get(Reflect.getPrototypeOf(instance), '__staticProperties');
+    let _mapData = properties.get(instance) || properties.set(instance, {}).get(instance);
+    const staticData = _mapData[key] ||= {
+        value: undefined,
+        hasBeenCalled: false,
+        defaultValue: undefined
+    };
+    return staticData;
+}
+
+export { staticProperty };

package/index.d.ts

@@ -0,0 +1,15 @@
+import './components/mu-transparent.js';
+import './components/mu-trigger.js';
+import './components/mu-select.js';
+import './components/mu-select-item.js';
+import './components/mu-select-items.js';
+import './components/mu-select-label.js';
+import './components/mu-select-label-content.js';
+import './components/mu-range.js';
+import './components/mu-range-thumb.js';
+import './components/mu-icon.js';
+import './components/mu-element.js';
+import 'lit';
+import '@mustib/utils/browser';
+import './components/mu-range-fill.js';
+import './components/mu-range-thumb-value.js';

package/index.js

@@ -0,0 +1,17 @@
+import './mu-element-CZDI_RCY.js';
+import './components/mu-transparent.js';
+import './components/mu-trigger.js';
+import './components/mu-select.js';
+import './components/mu-select-item.js';
+import './components/mu-select-items.js';
+import './components/mu-select-label.js';
+import './components/mu-select-label-content.js';
+import './components/mu-range.js';
+import './components/mu-range-fill.js';
+import './components/mu-range-thumb.js';
+import './components/mu-range-thumb-value.js';
+import './components/mu-icon.js';
+import 'lit';
+import 'lit/decorators.js';
+import './decorators.js';
+import 'lit/directives/repeat.js';