Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@slipmatio/control-knob
Advanced tools
Changelog
0.1.0 (2022-07-10)
Readme
Fully customizable rotary control knob component for Vue 3 that behaves like native audio app controls in Logic Pro or Ableton Live. Component is rendered as an ARIA-friendly SVG element.
@slipmatio/control-knob
package from npmimport ControlKnob from '@slipmatio/control-knob'
All configuration options are optional. The options referencing inner coordinate positions are based on 100x100 coordinate system that is not affected by the imageSize.
Option | Default | Description |
---|---|---|
imageSize | 40 | Rendered SVG width and lenght in pixels. |
minValue | 0 | Minimum value of the knob v-model. |
maxValue | 100 | Maximum value of the knob v-model. |
showTick | true | Show visible marker of the knob position. |
showValue | true | Show value label inside the knob. |
hideDefaultValue | false | Hide value label if value hasn't been changed. |
tickLength | 18 | Tick length in pixels. |
tickOffset | 10 | Tick offset in pixels. |
tickStroke | 3 | Tick stroke width. |
rimStroke | 11 | Outer rim stroke width. |
valueArchStroke | 11 | Value arch stroke width. |
bgRadius | 34 | Radius of the background circle. |
wheelFactor | 10 | Modifier to factor any mousewheel ticks. |
keyFactor | 10 | Modifier to factor any arrow-key presses. |
tabIndex | 0 | Tabindex for the HTML element. |
ariaLabel | 'Knob' | ARIA label for the HTML element. |
valueTextX | 50 | X-position of the value text label. |
valueTextY | 62 | Y-position of the value text label. |
svgClass | 'select-none' | CSS class for the SVG element. |
bgClass | 'text-[#868686]' | CSS class for the background circle. |
rimClass | 'text-[#393939]' | CSS class for the outer rim. |
valueArchClass | 'text-[#53d769]' | CSS class for the value arch. |
tickClass | 'text-black' | CSS class for the tick line. |
valueTextClass | 'text-gray-50 text-[30px] font-normal font-mono' | CSS class for the value text. |
passiveEvents | false | When set, propagation of handeled events is not prevented. |
Note that if you're using Tailwind CSS with automatic purge, you'll probably want to add the default classes as options so PurgeCSS catches them (or you can just whitelist them):
Default Tailwind CSS classes:
const options = {
svgClass: 'select-none',
bgClass: 'text-[#868686]',
rimClass: 'text-[#393939]',
valueArchClass: 'text-[#53d769]',
tickClass: 'text-black',
valueTextClass: 'text-gray-50 text-[30px] font-normal font-mono',
}
pnpm i
pnpm dev
pnpm test
Contributions are welcome! Please follow the code of conduct when interacting with others.
Follow @uninen on Twitter
FAQs
Fully customizable rotary control knob component for Vue 3 that behaves like native audio app controls in Logic Pro or Ableton Live. Component is rendered as an ARIA-friendly SVG element.
The npm package @slipmatio/control-knob receives a total of 0 weekly downloads. As such, @slipmatio/control-knob popularity was classified as not popular.
We found that @slipmatio/control-knob demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.