@frontpanel/vue 0.3.0 → 0.5.0

package/README.md

@@ -67,12 +67,14 @@ const playing = ref(false)
 | `FpDevice` | The device: a molded body in a liquid-chrome rim on a backdrop. `fit="width"` or `"contain"` draws it at a design `width` and scales it to the room it has; the default `fit="none"` leaves layout to your page |
 | `FpWindow` | A matte module with a chrome title bar: `title`, `level`, `closable` (emits `close`), an `actions` slot, and `sheet` for a phone bottom sheet |
 | `FpButton` | A brushed-chrome push button; `pressed` makes it a toggle |
+| `FpButtonGroup` | Chrome buttons joined into one bezel, as a named group |
+| `FpMenu`, `FpMenuItem`, `FpMenuSeparator` | A faceplate menu that drops from the button in its `trigger` slot; rows emit `select`, or are links with `as="a"` |
 | `FpGelButton` | The glossy gel pill, for the panel's main action |
 | `FpCap` | A molded-plastic cap in `white`, `blue`, `amber`, `graphite` or `berry`; `pressed` holds it down with a ring |
 | `FpLcd`, `FpLcdLine` | LCD glass, and a line of text on it with optional unlit segments (`ghost`, `cells`) and a left-to-right `redraw` |
 | `FpLed` | A `green`, `amber` or `red` LED; `lit`, and `blink` to confirm an action |
 | `FpHousing`, `FpWell`, `FpSilk`, `FpScrew` | A dark housing for LEDs, a recessed well, a silkscreened label, a screw head |
-| `FpIcon` | A 19-glyph 16 px pixel icon set (`fpIconNames`) |
+| `FpIcon` | A 21-glyph 16 px pixel icon set (`fpIconNames`) |
 
 Element components take Reka's `as` and `asChild`.
 

package/dist/FpButtonGroup.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpButtonGroupProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpButtonGroupProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpCheckbox.vue.d.ts

@@ -0,0 +1,29 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpKeyLed } from './keys';
+export interface FpCheckboxProps {
+    /** A silkscreen label over the key, which also names it. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Standing up, or on its side with the label before it. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Where the light is: the strip at the foot of the key, an LED over the label, or none. */
+    led?: FpKeyLed;
+    /** The colour its LED lights in. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpCheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    led: FpKeyLed;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpCheckboxGroup.vue.d.ts

@@ -0,0 +1,31 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpKeyLed, FpKeyOption } from './keys';
+export interface FpCheckboxGroupProps {
+    /** The keys, left to right or top to bottom. */
+    options: FpKeyOption[];
+    /** A silkscreen label under the keys, which also names the group. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Keys standing side by side, or on their side and stacked. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Where the light is: the strip at the foot of each key, an LED over each label, or none. */
+    led?: FpKeyLed;
+    /** The colour the LEDs light in, unless an option sets its own. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpCheckboxGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    led: FpKeyLed;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpKnob.vue.d.ts

@@ -17,14 +17,14 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    valueCommit: (value: number) => any;
     "update:modelValue": (value: number) => any;
+    valueCommit: (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onValueCommit?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onValueCommit?: ((value: number) => any) | undefined;
 }>, {
-    min: number;
     max: number;
+    min: number;
     step: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/FpMenu.vue.d.ts

@@ -0,0 +1,51 @@
+export interface FpMenuProps {
+    /** The side of the trigger the plate drops on. It flips to the other side when there is no room. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** How the plate lines up with the trigger along that side. */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Shuts out the rest of the page while the menu is open: pointer events and scrolling outside it
+     * are blocked, and assistive tech reads only the menu.
+     */
+    modal?: boolean;
+    /**
+     * Where the plate is mounted, a selector or an element. It takes the skin of the nearest
+     * `data-fp-skin` around the trigger with it; a custom skin set on another selector needs `to`
+     * inside that element.
+     */
+    to?: string | HTMLElement;
+}
+type __VLS_Props = FpMenuProps;
+type __VLS_Slots = {
+    /**
+     * The button that opens the menu, such as an `FpButton`. It gets `aria-haspopup` and
+     * `aria-expanded`, which hold a chrome button down while the menu is open.
+     */
+    trigger?: (props: {
+        open: boolean;
+    }) => unknown;
+    /** The menu's rows: `FpMenuItem` and `FpMenuSeparator`. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    side: "left" | "right" | "bottom" | "top";
+    align: "center" | "start" | "end";
+    modal: boolean;
+    to: string | HTMLElement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpMenuItem.vue.d.ts

@@ -0,0 +1,26 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpMenuItemProps extends PrimitiveProps {
+    /** Greys the row out; it can't be chosen. */
+    disabled?: boolean;
+    /** The text type-ahead matches, when the row's own text is not what a user would type. */
+    textValue?: string;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<FpMenuItemProps> & Readonly<{
+    onSelect?: ((event: Event) => any) | undefined;
+}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpMenuSeparator.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpMeter.vue.d.ts

@@ -22,11 +22,11 @@ export interface FpMeterProps {
     valueText?: (value: number) => string;
 }
 declare const __VLS_export: import("vue").DefineComponent<FpMeterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpMeterProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
     value: number;
-    min: number;
     max: number;
+    min: number;
     segments: number;
-    orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/FpRadioGroup.vue.d.ts

@@ -0,0 +1,31 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpKeyLed, FpKeyOption } from './keys';
+export interface FpRadioGroupProps {
+    /** The keys, left to right or top to bottom. */
+    options: FpKeyOption[];
+    /** A silkscreen label under the keys, which also names the group. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Keys standing side by side, or on their side and stacked. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Where the light is: the strip at the foot of each key, an LED over each label, or none. */
+    led?: FpKeyLed;
+    /** The colour the LEDs light in, unless an option sets its own. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpRadioGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    led: FpKeyLed;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpSlider.vue.d.ts

@@ -19,16 +19,16 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    valueCommit: (value: number) => any;
     "update:modelValue": (value: number) => any;
+    valueCommit: (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onValueCommit?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onValueCommit?: ((value: number) => any) | undefined;
 }>, {
-    min: number;
+    orientation: "vertical" | "horizontal";
     max: number;
+    min: number;
     step: number;
-    orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/icons.d.ts

@@ -1,4 +1,4 @@
-export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'quick' | 'grid' | 'go' | 'play' | 'menu';
+export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'down' | 'quick' | 'grid' | 'go' | 'play' | 'menu' | 'power';
 /** One path per glyph: every horizontal run of lit pixels becomes a 1 px tall rectangle. */
 export declare function toPath(rows: readonly string[]): string;
 /** Every icon name, in the order the set lists them. */

package/dist/index.d.ts

@@ -1,8 +1,14 @@
 export type { FpDeviceFit } from './fit';
 export { default as FpButton } from './FpButton.vue';
 export type { FpButtonProps } from './FpButton.vue';
+export { default as FpButtonGroup } from './FpButtonGroup.vue';
+export type { FpButtonGroupProps } from './FpButtonGroup.vue';
 export { default as FpCap } from './FpCap.vue';
 export type { FpCapColor, FpCapProps } from './FpCap.vue';
+export { default as FpCheckbox } from './FpCheckbox.vue';
+export type { FpCheckboxProps } from './FpCheckbox.vue';
+export { default as FpCheckboxGroup } from './FpCheckboxGroup.vue';
+export type { FpCheckboxGroupProps } from './FpCheckboxGroup.vue';
 export { default as FpDevice } from './FpDevice.vue';
 export type { FpDeviceProps } from './FpDevice.vue';
 export { default as FpGelButton } from './FpGelButton.vue';
@@ -19,8 +25,15 @@ export { default as FpLcdLine } from './FpLcdLine.vue';
 export type { FpLcdLineProps } from './FpLcdLine.vue';
 export { default as FpLed } from './FpLed.vue';
 export type { FpLedColor, FpLedProps } from './FpLed.vue';
+export { default as FpMenu } from './FpMenu.vue';
+export type { FpMenuProps } from './FpMenu.vue';
+export { default as FpMenuItem } from './FpMenuItem.vue';
+export type { FpMenuItemProps } from './FpMenuItem.vue';
+export { default as FpMenuSeparator } from './FpMenuSeparator.vue';
 export { default as FpMeter } from './FpMeter.vue';
 export type { FpMeterProps } from './FpMeter.vue';
+export { default as FpRadioGroup } from './FpRadioGroup.vue';
+export type { FpRadioGroupProps } from './FpRadioGroup.vue';
 export { default as FpReadout } from './FpReadout.vue';
 export type { FpReadoutProps } from './FpReadout.vue';
 export { default as FpScrew } from './FpScrew.vue';
@@ -36,5 +49,6 @@ export { default as FpWindow } from './FpWindow.vue';
 export type { FpWindowProps } from './FpWindow.vue';
 export { fpIconNames } from './icons';
 export type { FpIconName } from './icons';
+export type { FpKeyLed, FpKeyOption } from './keys';
 export type { FpLens } from './lens';
 export { fpReadoutGlyph } from './readout';