Major overhaul to the theme and now functioning.
This commit is contained in:
Generated
Vendored
+44
@@ -0,0 +1,44 @@
|
||||
.v-system-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: 24px;
|
||||
justify-content: flex-end;
|
||||
max-width: 100%;
|
||||
padding-inline: 8px;
|
||||
position: relative;
|
||||
text-align: end;
|
||||
width: 100%;
|
||||
}
|
||||
.v-system-bar .v-icon {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
.v-system-bar {
|
||||
box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
.v-system-bar--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.v-system-bar--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.v-system-bar {
|
||||
background: rgba(var(--v-theme-surface-light));
|
||||
color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
.v-system-bar {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0333333333em;
|
||||
line-height: 1.667;
|
||||
text-transform: none;
|
||||
}
|
||||
.v-system-bar--rounded {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-system-bar--window {
|
||||
height: 32px;
|
||||
}
|
||||
.v-system-bar:not(.v-system-bar--absolute) {
|
||||
padding-inline-end: calc(var(--v-scrollbar-offset) + 8px);
|
||||
}
|
||||
Generated
Vendored
+290
@@ -0,0 +1,290 @@
|
||||
// Styles
|
||||
|
||||
export declare const makeVSystemBarProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
name?: unknown;
|
||||
order?: unknown;
|
||||
absolute?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
height?: unknown;
|
||||
window?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? {
|
||||
type: StringConstructor;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
order: unknown extends Defaults["order"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["order"] ? string | number : string | number | Defaults["order"]>;
|
||||
default: unknown extends Defaults["order"] ? string | number : Defaults["order"] | NonNullable<string | number>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
window: unknown extends Defaults["window"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["window"] ? boolean : boolean | Defaults["window"]>;
|
||||
default: unknown extends Defaults["window"] ? boolean : boolean | Defaults["window"];
|
||||
};
|
||||
};
|
||||
export declare const VSystemBar: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
window: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
window: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
window: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
window: boolean;
|
||||
}>;
|
||||
__isFragment?: undefined;
|
||||
__isTeleport?: undefined;
|
||||
__isSuspense?: undefined;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
window: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean | undefined;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
"v-slots"?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
window: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
window: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator(v: any): boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
window: BooleanConstructor;
|
||||
}>>;
|
||||
export type VSystemBar = InstanceType<typeof VSystemBar>;
|
||||
Generated
Vendored
+71
@@ -0,0 +1,71 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VSystemBar.css";
|
||||
|
||||
// Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { useSsrBoot } from "../../composables/ssrBoot.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, shallowRef, toRef } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVSystemBarProps = propsFactory({
|
||||
color: String,
|
||||
height: [Number, String],
|
||||
window: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeElevationProps(),
|
||||
...makeLayoutItemProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VSystemBar');
|
||||
export const VSystemBar = genericComponent()({
|
||||
name: 'VSystemBar',
|
||||
props: makeVSystemBarProps(),
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
ssrBootStyles
|
||||
} = useSsrBoot();
|
||||
const height = computed(() => props.height ?? (props.window ? 32 : 24));
|
||||
const {
|
||||
layoutItemStyles
|
||||
} = useLayoutItem({
|
||||
id: props.name,
|
||||
order: computed(() => parseInt(props.order, 10)),
|
||||
position: shallowRef('top'),
|
||||
layoutSize: height,
|
||||
elementSize: height,
|
||||
active: computed(() => true),
|
||||
absolute: toRef(() => props.absolute)
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-system-bar', {
|
||||
'v-system-bar--window': props.window
|
||||
}, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style])
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSystemBar.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+32
@@ -0,0 +1,32 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-system-bar
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: $system-bar-flex
|
||||
height: $system-bar-height
|
||||
justify-content: $system-bar-justify-content
|
||||
max-width: 100%
|
||||
padding-inline: $system-bar-padding-x
|
||||
position: relative
|
||||
text-align: $system-bar-text-align
|
||||
width: 100%
|
||||
|
||||
.v-icon
|
||||
opacity: $system-bar-icon-opacity
|
||||
|
||||
@include tools.elevation($system-bar-elevation)
|
||||
@include tools.position($system-bar-positions)
|
||||
@include tools.theme($system-bar-theme...)
|
||||
@include tools.typography($system-bar-typography...)
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($system-bar-border-radius)
|
||||
|
||||
&--window
|
||||
height: $system-bar-window-height
|
||||
|
||||
&:not(.v-system-bar--absolute)
|
||||
padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x})
|
||||
Generated
Vendored
+40
@@ -0,0 +1,40 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VSystemBar
|
||||
$system-bar-background: rgba(var(--v-theme-surface-light)) !default;
|
||||
$system-bar-border-radius: map.get(settings.$rounded, 0) !default;
|
||||
$system-bar-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default;
|
||||
$system-bar-elevation: 0 !default;
|
||||
$system-bar-flex: 1 1 auto !default;
|
||||
$system-bar-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
|
||||
$system-bar-font-weight: tools.map-deep-get(settings.$typography, 'caption', 'weight') !default;
|
||||
$system-bar-height: 24px !default;
|
||||
$system-bar-icon-opacity: var(--v-medium-emphasis-opacity) !default;
|
||||
$system-bar-justify-content: flex-end !default;
|
||||
$system-bar-letter-spacing: tools.map-deep-get(settings.$typography, 'caption', 'letter-spacing') !default;
|
||||
$system-bar-lights-out-background: rgba(var(--v-theme-background), 0.7) !default;
|
||||
$system-bar-line-height: tools.map-deep-get(settings.$typography, 'caption', 'line-height') !default;
|
||||
$system-bar-padding-x: 8px !default;
|
||||
$system-bar-positions: absolute fixed !default;
|
||||
$system-bar-text-align: end !default;
|
||||
$system-bar-text-transform: tools.map-deep-get(settings.$typography, 'caption', 'text-transform') !default;
|
||||
$system-bar-window-height: 32px !default;
|
||||
|
||||
// Lists
|
||||
$system-bar-theme: (
|
||||
$system-bar-background,
|
||||
$system-bar-color
|
||||
) !default;
|
||||
|
||||
$system-bar-typography: (
|
||||
$system-bar-font-size,
|
||||
$system-bar-font-weight,
|
||||
$system-bar-letter-spacing,
|
||||
$system-bar-line-height,
|
||||
$system-bar-text-transform
|
||||
) !default;
|
||||
|
||||
// Deprecated
|
||||
$system-bar-padding: 0 8px !default;
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
export { VSystemBar } from './VSystemBar.js';
|
||||
Generated
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
export { VSystemBar } from "./VSystemBar.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VSystemBar"],"sources":["../../../src/components/VSystemBar/index.ts"],"sourcesContent":["export { VSystemBar } from './VSystemBar'\n"],"mappings":"SAASA,UAAU","ignoreList":[]}
|
||||
Reference in New Issue
Block a user