1 line
33 KiB
Plaintext
1 line
33 KiB
Plaintext
|
{"version":3,"file":"index.mjs","sources":["../../src/knob/BaseKnob.vue","../../src/knob/Knob.vue","../../src/knob/Knob.vue?vue&type=template&id=464685c1&lang.js"],"sourcesContent":["<script>\nimport { $dt } from '@primeuix/styled';\nimport BaseEditableHolder from '@primevue/core/baseeditableholder';\nimport KnobStyle from 'primevue/knob/style';\n\nexport default {\n name: 'BaseKnob',\n extends: BaseEditableHolder,\n props: {\n size: {\n type: Number,\n default: 100\n },\n readonly: {\n type: Boolean,\n default: false\n },\n step: {\n type: Number,\n default: 1\n },\n min: {\n type: Number,\n default: 0\n },\n max: {\n type: Number,\n default: 100\n },\n valueColor: {\n type: String,\n default: () => {\n return $dt('knob.value.background').variable;\n }\n },\n rangeColor: {\n type: String,\n default: () => {\n return $dt('knob.range.background').variable;\n }\n },\n textColor: {\n type: String,\n default: () => {\n return $dt('knob.text.color').variable;\n }\n },\n strokeWidth: {\n type: Number,\n default: 14\n },\n showValue: {\n type: Boolean,\n default: true\n },\n valueTemplate: {\n type: [String, Function],\n default: '{value}'\n },\n tabindex: {\n type: Number,\n default: 0\n },\n ariaLabelledby: {\n type: String,\n default: null\n },\n ariaLabel: {\n type: String,\n default: null\n }\n },\n style: KnobStyle,\n provide() {\n return {\n $pcKnob: this,\n $parentInstance: this\n };\n }\n};\n</script>\n","<template>\n <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n <svg\n viewBox=\"0 0 100 100\"\n role=\"slider\"\n :width=\"size\"\n :height=\"size\"\n :tabindex=\"readonly || disabled ? -1 : tabindex\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"d_value\"\n :aria-labelledby=\"ariaLabelledby\"\n :aria-label=\"ariaLabel\"\n @click=\"onClick\"\n @blur=\"onBlur\"\n @keydown=\"onKeyDown\"\n @mousedown=\"onMouseDown\"\n @mouseup=\"onMouseUp\"\n @touchstart=\"onTouchStart\"\n @touchend=\"onTouchEnd\"\n v-bind=\"ptm('svg')\"\n >\n <path :d=\"rangePath\" :stroke-width=\"strokeWidth\" :stroke=\"rangeColor\" :class=\"cx('range')\" v-bind=\"ptm('range')\"></path>\n <path :d=\"valuePath\" :stroke-width=\"strokeWidth\" :stroke=\"valueColor\" :class=\"cx('value')\" v-bind=\"ptm('value')\"></path>\n <text v-if=\"showValue\" :x=\"50\" :y=\"57\" text-anchor=\"middle\" :fill=\"textColor\" :class=\"cx('text')\" v-bind=\"ptm('text')\">{{ valueToDisplay }}</text>\n </svg>\n </div>\n</template>\n\n<script>\nimport BaseKnob from './BaseKnob.vue';\n\n// Set fix value for SSR.\nconst Math_PI = 3.14159265358979;\n\nexport default {\n name: 'Knob',\n extends: BaseKnob,\n inheritAttrs: false,\n emits: ['change'],\n data() {\n return {\n radius: 40,\n midX: 50,\n midY: 50,\n minRadians: (4 * Math_PI) / 3,\n maxRadians: -Math_PI / 3\n };\n },\n methods: {\n updateValueByOffset(offsetX, offsetY) {\n let dx = offsetX - this.size / 2;\n let dy = this.size / 2 - offsetY;\n let angle = Math.atan2(dy, dx);\n let start = -Math_PI / 2 - Math_PI / 6;\n\n this.updateModel(angle, start);\n },\n
|