@webx-ui/core 0.28.0 → 0.30.0

package/dist/components/Icon/icons.d.ts

@@ -62,6 +62,8 @@ export declare const builtinIcons: {
     readonly mail: "<rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\"/><path d=\"m4 7.5 6.9 5a2 2 0 0 0 2.2 0l6.9-5\"/>";
     readonly phone: "<path d=\"M7 3.5 9.5 4l1.2 3.4-1.9 1.6a11 11 0 0 0 5.2 5.2l1.6-1.9 3.4 1.2.5 2.5a2 2 0 0 1-2 2.3A15.5 15.5 0 0 1 4.7 5.5a2 2 0 0 1 2.3-2Z\"/>";
     readonly bell: "<path d=\"M7 10a5 5 0 0 1 10 0c0 4 1.5 5.5 1.5 5.5h-13S7 14 7 10Z\"/><path d=\"M10.2 18.5a2 2 0 0 0 3.6 0\"/>";
+    readonly 'map-pin': "<path d=\"M12 21s6.5-6 6.5-10.5a6.5 6.5 0 0 0-13 0C5.5 15 12 21 12 21Z\"/><circle cx=\"12\" cy=\"10.3\" r=\"2.4\"/>";
+    readonly megaphone: "<path d=\"M4.5 10.2v3.6a1.6 1.6 0 0 0 1.6 1.6h2.2l8.4 4.1a1 1 0 0 0 1.4-.9V5.4a1 1 0 0 0-1.4-.9L8.3 8.6H6.1a1.6 1.6 0 0 0-1.6 1.6Z\"/><path d=\"M8.3 15.4v2.8a2 2 0 0 0 2 2h.4a1 1 0 0 0 1-1.2l-.7-3.2\"/>";
     readonly cart: "<path d=\"M3 4.5h2.2l2.3 10.2a1.6 1.6 0 0 0 1.6 1.3h7.4a1.6 1.6 0 0 0 1.6-1.2L20 8H6\"/><circle cx=\"10\" cy=\"19.5\" r=\"1.5\"/><circle cx=\"17\" cy=\"19.5\" r=\"1.5\"/>";
     readonly tag: "<path d=\"M4 11.2V5.5A1.5 1.5 0 0 1 5.5 4h5.7a2 2 0 0 1 1.4.6l7 7a2 2 0 0 1 0 2.8l-5.2 5.2a2 2 0 0 1-2.8 0l-7-7a2 2 0 0 1-.6-1.4Z\"/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/>";
     readonly link: "<path d=\"M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7L11.5 7\"/><path d=\"M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.7L12.5 17\"/>";

package/dist/components/IconPicker/IconPicker.d.ts

@@ -0,0 +1,40 @@
+import { IconPickerProps } from './types';
+/**
+ * The icon set, picked from rather than typed into.
+ *
+ * An icon is a name in a set of a hundred and fifty, and a name that is not in it draws
+ * nothing at all — no warning, no placeholder, just a label that has quietly moved to where
+ * the picture should have been. A text field cannot say that; a grid of every icon there is
+ * can only say it.
+ *
+ * So the box is the search and the panel is the answer: typing filters, clicking chooses, and
+ * the value only ever becomes a name the set has.
+ */
+type __VLS_Props = IconPickerProps;
+type __VLS_PublicProps = {
+    modelValue?: string | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string | null) => any;
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: string | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    placeholder: string;
+    teleport: boolean;
+    ariaLabel: string;
+    emptyText: string;
+    clearable: boolean;
+    status: import('../..').ControlStatus;
+    id: string;
+    unknownText: string;
+    clearLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    input: HTMLInputElement;
+    grid: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/components/IconPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxIconPicker } from './IconPicker';
+export type * from './types';

package/dist/components/IconPicker/types.d.ts

@@ -0,0 +1,24 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export interface IconPickerProps {
+    /** Show a button that empties the field. */
+    clearable?: boolean;
+    placeholder?: string;
+    /** What the field says when the name it holds is not in the set. */
+    unknownText?: string;
+    /** What the panel says when nothing matches what was typed. */
+    emptyText?: string;
+    /** Label of the button that empties the field, for screen readers. */
+    clearLabel?: string;
+    /** Render the panel in a portal so it escapes `overflow: hidden`. */
+    teleport?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    name?: string;
+    /** Accessible label used when the field has no visible `<label>`. */
+    ariaLabel?: string;
+}
+export interface IconPickerEmits {
+    change: [value: string | null];
+}

package/dist/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,29 @@
+import { ThemePreference, ThemeSwitchProps } from './types';
+/**
+ * Light, whatever the machine says, dark.
+ *
+ * It only reports the choice: applying it is `applyTheme()`'s job, and remembering it belongs
+ * to whoever knows where this person's settings live. Three states rather than two because
+ * "follow the machine" is a real answer and cannot be spelled with a toggle — a two-way
+ * switch can only ever guess which side of it means "I have not decided".
+ */
+type __VLS_Props = ThemeSwitchProps;
+type __VLS_PublicProps = {
+    modelValue?: ThemePreference;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: ThemePreference) => any;
+    "update:modelValue": (value: ThemePreference) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: ThemePreference) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ThemePreference) => any) | undefined;
+}>, {
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    ariaLabel: string;
+    block: boolean;
+    lightLabel: string;
+    darkLabel: string;
+    systemLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/ThemeSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxThemeSwitch } from './ThemeSwitch';
+export type * from './types';

package/dist/components/ThemeSwitch/types.d.ts

@@ -0,0 +1,22 @@
+import { ThemePreference } from '@webx-ui/tokens';
+import { ControlSize } from '../../composables/useFormField';
+export type { ThemePreference };
+export interface ThemeSwitchProps {
+    size?: ControlSize;
+    /** Stretches to the width it is given, the three sharing it equally. */
+    block?: boolean;
+    disabled?: boolean;
+    /** Accessible name for the group. */
+    ariaLabel?: string;
+    /**
+     * The three names. They are read out, shown on hover and nowhere else — the pictures are
+     * the control — but they are the only thing that says what "system" means, so they are
+     * worth translating.
+     */
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+}
+export interface ThemeSwitchEmits {
+    change: [value: ThemePreference];
+}

package/dist/components/index.d.ts

@@ -43,6 +43,7 @@ export * from './FormItem';
 export * from './Header';
 export * from './Heading';
 export * from './Icon';
+export * from './IconPicker';
 export * from './Image';
 export * from './ImageEditor';
 export * from './Indicator';
@@ -89,6 +90,7 @@ export * from './Tabs';
 export * from './TagsInput';
 export * from './Text';
 export * from './Textarea';
+export * from './ThemeSwitch';
 export * from './Timeline';
 export * from './TimelineItem';
 export * from './TimePicker';