primevuelab 4.0.0-beta.4

package/knob/Knob.d.ts

@@ -0,0 +1,259 @@
+/**
+ *
+ * Knob is a form component to define number inputs with a dial.
+ *
+ * [Live Demo](https://www.primevuelab.org/knob/)
+ *
+ * @module knob
+ *
+ */
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type KnobPassThroughOptionType = KnobPassThroughAttributes | ((options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface KnobPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: KnobProps;
+    /**
+     * Defines current inline state.
+     */
+    state: KnobState;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link KnobProps.pt}
+ */
+export interface KnobPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: KnobPassThroughOptionType;
+    /**
+     * Used to pass attributes to the svg's DOM element.
+     */
+    svg?: KnobPassThroughOptionType;
+    /**
+     * Used to pass attributes to the range's DOM element.
+     */
+    range?: KnobPassThroughOptionType;
+    /**
+     * Used to pass attributes to the value' DOM element.
+     */
+    value?: KnobPassThroughOptionType;
+    /**
+     * Used to pass attributes to the text's DOM element.
+     */
+    text?: KnobPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface KnobPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Knob component.
+ */
+export interface KnobState {
+    /**
+     * Current radius state as a number.
+     * @defaultValue 40
+     */
+    radius: number;
+    /**
+     * Current middle x axis state as a number.
+     * @defaultValue 50
+     */
+    midX: number;
+    /**
+     * Current middle y axis state as a number.
+     * @defaultValue 50
+     */
+    midY: number;
+    /**
+     * Current minimum radian state as a number.
+     */
+    minRadians: number;
+    /**
+     * Current maximum radian state as a number.
+     */
+    maxRadians: number;
+}
+
+/**
+ * Defines valid properties in Knob component.
+ */
+export interface KnobProps {
+    /**
+     * Value of the component.
+     */
+    modelValue?: number | undefined;
+    /**
+     * Size of the component in pixels.
+     * @defaultValue 100
+     */
+    size?: number | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the component value cannot be edited.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * Mininum boundary value.
+     * @defaultValue 0
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     * @defaultValue 100
+     */
+    max?: number | undefined;
+    /**
+     * Background of the value.
+     * @defaultValue $dt('knob.value.background')
+     */
+    valueColor?: string | undefined;
+    /**
+     * Background color of the range.
+     * @defaultValue $dt('knob.range.background')
+     */
+    rangeColor?: string | undefined;
+    /**
+     * Color of the value text.
+     * @defaultValue $dt('knob.text.color')
+     */
+    textColor?: string | undefined;
+    /**
+     * Width of the knob stroke.
+     * @defaultValue 14
+     */
+    strokeWidth?: number | undefined;
+    /**
+     * Whether the show the value inside the knob.
+     * @defaultValue true
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Template string of the value.
+     * @defaultValue '{value}'
+     */
+    valueTemplate?: (val: number) => string | string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @defaultValue 0
+     */
+    tabindex?: number | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Used to define a string that labels the element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {KnobPassThroughOptions}
+     */
+    pt?: PassThrough<KnobPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Knob component.
+ */
+export interface KnobSlots {}
+
+/**
+ * Defines valid emits in Knob component.
+ */
+export interface KnobEmitsOptions {
+    /**
+     * Emitted when the value changes.
+     * @param {number} event - New value.
+     */
+    'update:modelValue'(value: number): void;
+    /**
+     * Callback to invoke when the value changes.
+     * @param {number} event - New value
+     */
+    change(value: number): void;
+}
+
+export declare type KnobEmits = EmitFn<KnobEmitsOptions>;
+
+/**
+ * **primevuelab - Knob**
+ *
+ * _Knob groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevuelab.org/knob/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Knob: DefineComponent<KnobProps, KnobSlots, KnobEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Knob: GlobalComponentConstructor<KnobProps, KnobSlots, KnobEmits>;
+    }
+}
+
+export default Knob;

package/knob/Knob.vue

@@ -0,0 +1,227 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <svg
+            viewBox="0 0 100 100"
+            role="slider"
+            :width="size"
+            :height="size"
+            :tabindex="readonly || disabled ? -1 : tabindex"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="modelValue"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @click="onClick"
+            @keydown="onKeyDown"
+            @mousedown="onMouseDown"
+            @mouseup="onMouseUp"
+            @touchstart.passive="onTouchStart"
+            @touchend="onTouchEnd"
+            v-bind="ptm('svg')"
+        >
+            <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" :class="cx('range')" v-bind="ptm('range')"></path>
+            <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" :class="cx('value')" v-bind="ptm('value')"></path>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('text')" v-bind="ptm('text')">{{ valueToDisplay }}</text>
+        </svg>
+    </div>
+</template>
+
+<script>
+import BaseKnob from './BaseKnob.vue';
+
+// Set fix value for SSR.
+const Math_PI = 3.14159265358979;
+
+export default {
+    name: 'Knob',
+    extends: BaseKnob,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change'],
+    data() {
+        return {
+            radius: 40,
+            midX: 50,
+            midY: 50,
+            minRadians: (4 * Math_PI) / 3,
+            maxRadians: -Math_PI / 3
+        };
+    },
+    methods: {
+        updateValue(offsetX, offsetY) {
+            let dx = offsetX - this.size / 2;
+            let dy = this.size / 2 - offsetY;
+            let angle = Math.atan2(dy, dx);
+            let start = -Math_PI / 2 - Math_PI / 6;
+
+            this.updateModel(angle, start);
+        },
+        updateModel(angle, start) {
+            let mappedValue;
+
+            if (angle > this.maxRadians) mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
+            else if (angle < start) mappedValue = this.mapRange(angle + 2 * Math_PI, this.minRadians, this.maxRadians, this.min, this.max);
+            else return;
+
+            let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', newValue);
+        },
+        updateModelValue(newValue) {
+            if (newValue > this.max) this.$emit('update:modelValue', this.max);
+            else if (newValue < this.min) this.$emit('update:modelValue', this.min);
+            else this.$emit('update:modelValue', newValue);
+        },
+        mapRange(x, inMin, inMax, outMin, outMax) {
+            return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+        },
+        onClick(event) {
+            if (!this.disabled && !this.readonly) {
+                this.updateValue(event.offsetX, event.offsetY);
+            }
+        },
+        onMouseDown(event) {
+            if (!this.disabled && !this.readonly) {
+                window.addEventListener('mousemove', this.onMouseMove);
+                window.addEventListener('mouseup', this.onMouseUp);
+                event.preventDefault();
+            }
+        },
+        onMouseUp(event) {
+            if (!this.disabled && !this.readonly) {
+                window.removeEventListener('mousemove', this.onMouseMove);
+                window.removeEventListener('mouseup', this.onMouseUp);
+                event.preventDefault();
+            }
+        },
+        onTouchStart(event) {
+            if (!this.disabled && !this.readonly) {
+                window.addEventListener('touchmove', this.onTouchMove);
+                window.addEventListener('touchend', this.onTouchEnd);
+                event.preventDefault();
+            }
+        },
+        onTouchEnd(event) {
+            if (!this.disabled && !this.readonly) {
+                window.removeEventListener('touchmove', this.onTouchMove);
+                window.removeEventListener('touchend', this.onTouchEnd);
+                event.preventDefault();
+            }
+        },
+        onMouseMove(event) {
+            if (!this.disabled && !this.readonly) {
+                this.updateValue(event.offsetX, event.offsetY);
+                event.preventDefault();
+            }
+        },
+        onTouchMove(event) {
+            if (!this.disabled && !this.readonly && event.touches.length == 1) {
+                const rect = this.$el.getBoundingClientRect();
+                const touch = event.targetTouches.item(0);
+                const offsetX = touch.clientX - rect.left;
+                const offsetY = touch.clientY - rect.top;
+
+                this.updateValue(offsetX, offsetY);
+            }
+        },
+        onKeyDown(event) {
+            if (!this.disabled && !this.readonly) {
+                switch (event.code) {
+                    case 'ArrowRight':
+
+                    case 'ArrowUp': {
+                        event.preventDefault();
+                        this.updateModelValue(this.modelValue + this.step);
+                        break;
+                    }
+
+                    case 'ArrowLeft':
+
+                    case 'ArrowDown': {
+                        event.preventDefault();
+                        this.updateModelValue(this.modelValue - this.step);
+                        break;
+                    }
+
+                    case 'Home': {
+                        event.preventDefault();
+                        this.$emit('update:modelValue', this.min);
+                        break;
+                    }
+
+                    case 'End': {
+                        event.preventDefault();
+                        this.$emit('update:modelValue', this.max);
+                        break;
+                    }
+
+                    case 'PageUp': {
+                        event.preventDefault();
+                        this.updateModelValue(this.modelValue + 10);
+                        break;
+                    }
+
+                    case 'PageDown': {
+                        event.preventDefault();
+                        this.updateModelValue(this.modelValue - 10);
+                        break;
+                    }
+                }
+            }
+        }
+    },
+    computed: {
+        rangePath() {
+            return `M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`;
+        },
+        valuePath() {
+            return `M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`;
+        },
+        zeroRadians() {
+            if (this.min > 0 && this.max > 0) return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
+            else return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
+        },
+        valueRadians() {
+            return this.mapRange(this.modelValue, this.min, this.max, this.minRadians, this.maxRadians);
+        },
+        minX() {
+            return this.midX + Math.cos(this.minRadians) * this.radius;
+        },
+        minY() {
+            return this.midY - Math.sin(this.minRadians) * this.radius;
+        },
+        maxX() {
+            return this.midX + Math.cos(this.maxRadians) * this.radius;
+        },
+        maxY() {
+            return this.midY - Math.sin(this.maxRadians) * this.radius;
+        },
+        zeroX() {
+            return this.midX + Math.cos(this.zeroRadians) * this.radius;
+        },
+        zeroY() {
+            return this.midY - Math.sin(this.zeroRadians) * this.radius;
+        },
+        valueX() {
+            return this.midX + Math.cos(this.valueRadians) * this.radius;
+        },
+        valueY() {
+            return this.midY - Math.sin(this.valueRadians) * this.radius;
+        },
+        largeArc() {
+            return Math.abs(this.zeroRadians - this.valueRadians) < Math_PI ? 0 : 1;
+        },
+        sweep() {
+            return this.valueRadians > this.zeroRadians ? 0 : 1;
+        },
+        valueToDisplay() {
+            if (typeof this.valueTemplate === 'string') {
+                return this.valueTemplate.replace(/{value}/g, this.modelValue);
+            } else {
+                return this.valueTemplate(this.modelValue);
+            }
+        }
+    }
+};
+//Derived and forked from https://github.com/kramer99/vue-knob-control
+</script>