sard 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/button/button.vue.d.ts +1 -0
- package/components/button/button.vue.js +10 -3
- package/components/button/common.d.ts +10 -0
- package/components/button/common.js +24 -1
- package/components/button/index.css +1 -1
- package/components/button/index.d.ts +1 -1
- package/components/descriptions/index.css +1 -1
- package/components/dropdown/index.css +1 -1
- package/components/stepper/common.d.ts +1 -0
- package/components/stepper/index.css +1 -1
- package/components/stepper/stepper.vue.d.ts +1 -0
- package/components/stepper/stepper.vue.js +11 -1
- package/components/style/index.css +1 -1
- package/components/swiper/useSwiper.js +4 -0
- package/components/table/index.css +1 -1
- package/components/tree/tree.vue.js +6 -6
- package/components/upload/index.css +1 -1
- package/index.css +1 -1
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {},
|
|
|
7
7
|
}>, {
|
|
8
8
|
round: boolean;
|
|
9
9
|
size: "xs" | "small" | "medium" | "large";
|
|
10
|
+
type: import("./common").ButtonType;
|
|
10
11
|
loading: boolean;
|
|
11
12
|
disabled: boolean;
|
|
12
13
|
color: "primary" | "secondary" | "success" | "warning" | "danger" | "white" | "black";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createBem } from "../../utils/bem.js";
|
|
2
2
|
import loading_default from "../loading/loading.vue.js";
|
|
3
3
|
import { useFormContext } from "../form/common.js";
|
|
4
|
-
import { defaultButtonProps } from "./common.js";
|
|
4
|
+
import { buttonTypeMap, defaultButtonProps } from "./common.js";
|
|
5
5
|
import { compactContextKey } from "../compact/common.js";
|
|
6
6
|
import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeDefaults, normalizeClass, openBlock, renderSlot, useSlots } from "vue";
|
|
7
7
|
//#region packages/sard/components/button/button.vue
|
|
@@ -9,6 +9,10 @@ const _hoisted_1 = ["type", "disabled"];
|
|
|
9
9
|
var button_default = /*@__PURE__*/ defineComponent({
|
|
10
10
|
__name: "button",
|
|
11
11
|
props: /*@__PURE__*/ mergeDefaults({
|
|
12
|
+
type: {
|
|
13
|
+
type: String,
|
|
14
|
+
required: false
|
|
15
|
+
},
|
|
12
16
|
variant: {
|
|
13
17
|
type: String,
|
|
14
18
|
required: false
|
|
@@ -76,12 +80,15 @@ var button_default = /*@__PURE__*/ defineComponent({
|
|
|
76
80
|
const onClick = (event) => {
|
|
77
81
|
emit("click", event);
|
|
78
82
|
};
|
|
83
|
+
const preset = computed(() => props.type ? buttonTypeMap[props.type] : void 0);
|
|
84
|
+
const resolvedVariant = computed(() => preset.value?.variant ?? props.variant);
|
|
85
|
+
const resolvedColor = computed(() => preset.value?.color ?? props.color);
|
|
79
86
|
const buttonClass = computed(() => {
|
|
80
87
|
return [
|
|
81
88
|
bem.b(),
|
|
82
89
|
bem.m(props.size),
|
|
83
|
-
bem.m(
|
|
84
|
-
bem.m(`${
|
|
90
|
+
bem.m(resolvedVariant.value),
|
|
91
|
+
bem.m(`${resolvedVariant.value}-${resolvedColor.value}`),
|
|
85
92
|
bem.m("round", props.round),
|
|
86
93
|
bem.m("square", props.square),
|
|
87
94
|
bem.m("ghost", props.ghost),
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { type DefaultProps } from '../config';
|
|
2
|
+
export type ButtonType = 'primary' | 'secondary' | 'dashed' | 'text' | 'link';
|
|
2
3
|
export interface ButtonProps {
|
|
4
|
+
/**
|
|
5
|
+
* color 与 variant 的语法糖，优先级高于两者。
|
|
6
|
+
*/
|
|
7
|
+
type?: ButtonType;
|
|
3
8
|
variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';
|
|
4
9
|
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'white' | 'black';
|
|
5
10
|
size?: 'xs' | 'small' | 'medium' | 'large';
|
|
@@ -14,6 +19,11 @@ export interface ButtonProps {
|
|
|
14
19
|
autoHeight?: boolean;
|
|
15
20
|
compact?: boolean;
|
|
16
21
|
}
|
|
22
|
+
/** type 到 color + variant 的映射 */
|
|
23
|
+
export declare const buttonTypeMap: Record<ButtonType, {
|
|
24
|
+
color: NonNullable<ButtonProps['color']>;
|
|
25
|
+
variant: NonNullable<ButtonProps['variant']>;
|
|
26
|
+
}>;
|
|
17
27
|
export declare const defaultButtonProps: DefaultProps<ButtonProps>;
|
|
18
28
|
export interface ButtonSlots {
|
|
19
29
|
default?(): any;
|
|
@@ -1,4 +1,27 @@
|
|
|
1
1
|
//#region packages/sard/components/button/common.ts
|
|
2
|
+
/** type 到 color + variant 的映射 */
|
|
3
|
+
const buttonTypeMap = {
|
|
4
|
+
primary: {
|
|
5
|
+
color: "primary",
|
|
6
|
+
variant: "solid"
|
|
7
|
+
},
|
|
8
|
+
secondary: {
|
|
9
|
+
color: "secondary",
|
|
10
|
+
variant: "outlined"
|
|
11
|
+
},
|
|
12
|
+
dashed: {
|
|
13
|
+
color: "secondary",
|
|
14
|
+
variant: "dashed"
|
|
15
|
+
},
|
|
16
|
+
text: {
|
|
17
|
+
color: "secondary",
|
|
18
|
+
variant: "link"
|
|
19
|
+
},
|
|
20
|
+
link: {
|
|
21
|
+
color: "primary",
|
|
22
|
+
variant: "link"
|
|
23
|
+
}
|
|
24
|
+
};
|
|
2
25
|
const defaultButtonProps = {
|
|
3
26
|
variant: "solid",
|
|
4
27
|
color: "primary",
|
|
@@ -6,4 +29,4 @@ const defaultButtonProps = {
|
|
|
6
29
|
htmlType: "button"
|
|
7
30
|
};
|
|
8
31
|
//#endregion
|
|
9
|
-
export { defaultButtonProps };
|
|
32
|
+
export { buttonTypeMap, defaultButtonProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-button-height-xs:var(--s-size-xl);--s-button-padding-y-xs:0;--s-button-padding-x-xs:6px;--s-button-border-radius-xs:var(--s-border-radius-sm);--s-button-font-size-xs:var(--s-font-size-sm);--s-button-icon-size-xs:var(--s-font-size-sm);--s-button-height-sm:var(--s-size-2xl);--s-button-padding-y-sm:0;--s-button-padding-x-sm:9px;--s-button-border-radius-sm:var(--s-border-radius-sm);--s-button-font-size-sm:var(--s-font-size-sm);--s-button-icon-size-sm:var(--s-font-size);--s-button-height:var(--s-size-3xl);--s-button-padding-y:0;--s-button-padding-x:11px;--s-button-border-radius:var(--s-border-radius);--s-button-font-size:var(--s-font-size);--s-button-icon-size:18px;--s-button-height-lg:var(--s-size-4xl);--s-button-padding-y-lg:0;--s-button-padding-x-lg:14px;--s-button-border-radius-lg:var(--s-border-radius);--s-button-font-size-lg:var(--s-font-size-lg);--s-button-icon-size-lg:20px;--s-button-outlined-bg:var(--s-white);--s-button-secondary-color:var(--s-gray-800)}.dark{--s-button-outlined-bg:rgba(0,0,0,0);--s-button-secondary-color:var(--s-white)}.s-button{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;border:none;vertical-align:middle;font-family:inherit;line-height:var(--s-line-height-normal);white-space:nowrap;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:visible;appearance:none;outline:none}.s-button--block{display:flex;width:100%}.s-button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;background:rgba(0,0,0,.125);pointer-events:none}.s-button--xs{height:var(--s-button-height-xs);padding:var(--s-button-padding-y-xs) var(--s-button-padding-x-xs);border-radius:var(--s-button-border-radius-xs);font-size:var(--s-button-font-size-xs)}.s-button--xs::after{border-radius:calc(var(--s-button-border-radius-xs)*2)}.s-button--xs .s-button__icon{font-size:var(--s-button-icon-size-xs)}.s-button--xs.s-button--iconic{min-width:var(--s-button-height-xs)}.s-button--small{height:var(--s-button-height-sm);padding:var(--s-button-padding-y-sm) var(--s-button-padding-x-sm);border-radius:var(--s-button-border-radius-sm);font-size:var(--s-button-font-size-sm)}.s-button--small::after{border-radius:calc(var(--s-button-border-radius-sm)*2)}.s-button--small .s-button__icon{font-size:var(--s-button-icon-size-sm)}.s-button--small.s-button--iconic{min-width:var(--s-button-height-sm)}.s-button--medium{height:var(--s-button-height);padding:var(--s-button-padding-y) var(--s-button-padding-x);border-radius:var(--s-button-border-radius);font-size:var(--s-button-font-size)}.s-button--medium::after{border-radius:calc(var(--s-button-border-radius)*2)}.s-button--medium .s-button__icon{font-size:var(--s-button-icon-size)}.s-button--medium.s-button--iconic{min-width:var(--s-button-height)}.s-button--large{height:var(--s-button-height-lg);padding:var(--s-button-padding-y-lg) var(--s-button-padding-x-lg);border-radius:var(--s-button-border-radius-lg);font-size:var(--s-button-font-size-lg)}.s-button--large::after{border-radius:calc(var(--s-button-border-radius-lg)*2)}.s-button--large .s-button__icon{font-size:var(--s-button-icon-size-lg)}.s-button--large.s-button--iconic{min-width:var(--s-button-height-lg)}.s-button--auto-height{height:auto}.s-button--compact{padding:0;height:auto}.s-button--solid-primary{color:var(--s-white);background-color:var(--s-color-primary)}.s-button--outlined-primary{color:var(--s-color-primary);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-primary)}.s-button--dashed-primary{color:var(--s-color-primary);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-primary)}.s-button--filled-primary{color:var(--s-color-primary);background-color:rgba(var(--s-color-primary-rgb), var(--s-opacity-theme-bg))}.s-button--text-primary{color:var(--s-color-primary);background-color:rgba(0,0,0,0)}.s-button--link-primary{color:var(--s-color-primary);background-color:rgba(0,0,0,0)}.s-button--solid-secondary{color:var(--s-white);background-color:var(--s-color-secondary)}.s-button--outlined-secondary{color:var(--s-button-secondary-color);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-gray-200)}.s-button--dashed-secondary{color:var(--s-button-secondary-color);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-gray-200)}.s-button--filled-secondary{color:var(--s-color-secondary);background-color:rgba(var(--s-color-secondary-rgb), var(--s-opacity-theme-bg))}.s-button--text-secondary{color:var(--s-color-secondary);background-color:rgba(0,0,0,0)}.s-button--link-secondary{color:var(--s-color-secondary);background-color:rgba(0,0,0,0)}.s-button--solid-success{color:var(--s-white);background-color:var(--s-color-success)}.s-button--outlined-success{color:var(--s-color-success);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-success)}.s-button--dashed-success{color:var(--s-color-success);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-success)}.s-button--filled-success{color:var(--s-color-success);background-color:rgba(var(--s-color-success-rgb), var(--s-opacity-theme-bg))}.s-button--text-success{color:var(--s-color-success);background-color:rgba(0,0,0,0)}.s-button--link-success{color:var(--s-color-success);background-color:rgba(0,0,0,0)}.s-button--solid-warning{color:var(--s-white);background-color:var(--s-color-warning)}.s-button--outlined-warning{color:var(--s-color-warning);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-warning)}.s-button--dashed-warning{color:var(--s-color-warning);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-warning)}.s-button--filled-warning{color:var(--s-color-warning);background-color:rgba(var(--s-color-warning-rgb), var(--s-opacity-theme-bg))}.s-button--text-warning{color:var(--s-color-warning);background-color:rgba(0,0,0,0)}.s-button--link-warning{color:var(--s-color-warning);background-color:rgba(0,0,0,0)}.s-button--solid-danger{color:var(--s-white);background-color:var(--s-color-danger)}.s-button--outlined-danger{color:var(--s-color-danger);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-danger)}.s-button--dashed-danger{color:var(--s-color-danger);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-danger)}.s-button--filled-danger{color:var(--s-color-danger);background-color:rgba(var(--s-color-danger-rgb), var(--s-opacity-theme-bg))}.s-button--text-danger{color:var(--s-color-danger);background-color:rgba(0,0,0,0)}.s-button--link-danger{color:var(--s-color-danger);background-color:rgba(0,0,0,0)}.s-button--solid-black{color:var(--s-white);background-color:var(--s-black)}.s-button--outlined-black{color:var(--s-black);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-black)}.s-button--dashed-black{color:var(--s-black);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-black)}.s-button--filled-black{color:var(--s-black);background-color:rgba(var(--s-black-rgb), var(--s-opacity-theme-bg))}.s-button--text-black{color:var(--s-black);background-color:rgba(0,0,0,0)}.s-button--link-black{color:var(--s-black);background-color:rgba(0,0,0,0)}.s-button--solid-white{color:var(--s-black);background-color:var(--s-white)}.s-button--outlined-white{color:var(--s-white);background-color:rgba(0,0,0,0);border:1px solid var(--s-white)}.s-button--dashed-white{color:var(--s-white);background-color:rgba(0,0,0,0);border:1px dashed var(--s-white)}.s-button--filled-white{color:var(--s-white);background-color:rgba(var(--s-white-rgb), var(--s-opacity-theme-bg))}.s-button--text-white{color:var(--s-white);background-color:rgba(0,0,0,0)}.s-button--link-white{color:var(--s-white);background-color:rgba(0,0,0,0)}.s-button--ghost{background:rgba(0,0,0,0)}.s-button--round{border-radius:var(--s-border-radius-full)}.s-button--square{border-radius:0}.s-button--solid:not(.is-disabled,.is-loading):active::before,.s-button--outlined:not(.is-disabled,.is-loading):active::before,.s-button--dashed:not(.is-disabled,.is-loading):active::before,.s-button--filled:not(.is-disabled,.is-loading):active::before,.s-button--text:not(.is-disabled,.is-loading):active::before{opacity:1}.s-button--link:not(.is-disabled,.is-loading):active{opacity:var(--s-opacity-active)}.s-button:is(.is-disabled){opacity:var(--s-opacity-disabled);cursor:var(--s-cursor-disabled);filter:var(--s-filter-disabled)}.s-button:is(.is-loading){opacity:var(--s-opacity-loading);cursor:var(--s-cursor-loading)}.s-button__icon{display:inline-flex}.s-button__icon:is(.has-slot){margin-inline-end:.5em}:root:not([dir=rtl]) .s-button--compact-horizontal:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}:root[dir=rtl] .s-button--compact-horizontal:not(:first-child){border-top-right-radius:0;border-bottom-right-radius:0}:root:not([dir=rtl]) .s-button--compact-horizontal:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:root[dir=rtl] .s-button--compact-horizontal:not(:last-child){border-top-left-radius:0;border-bottom-left-radius:0}.s-button--compact-horizontal.s-button--solid+.s-button--solid,.s-button--compact-horizontal.s-button--solid+.s-button--filled,.s-button--compact-horizontal.s-button--filled+.s-button--solid,.s-button--compact-horizontal.s-button--filled+.s-button--filled{border-inline-start:1px solid var(--s-border-color-light)}.s-button--compact-vertical:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.s-button--compact-vertical:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.s-button--compact-vertical.s-button--solid+.s-button--solid,.s-button--compact-vertical.s-button--solid+.s-button--filled,.s-button--compact-vertical.s-button--filled+.s-button--solid,.s-button--compact-vertical.s-button--filled+.s-button--filled{border-top:1px solid var(--s-border-color-light)}.s-button--compact-horizontal.s-button--outlined+.s-button--outlined{margin-inline-start:-1px}.s-button--compact-vertical.s-button--outlined+.s-button--outlined{margin-top:-1px}
|
|
1
|
+
:root{--s-button-height-xs:var(--s-size-xl);--s-button-padding-y-xs:0;--s-button-padding-x-xs:6px;--s-button-border-radius-xs:var(--s-border-radius-sm);--s-button-font-size-xs:var(--s-font-size-sm);--s-button-icon-size-xs:var(--s-font-size-sm);--s-button-height-sm:var(--s-size-2xl);--s-button-padding-y-sm:0;--s-button-padding-x-sm:9px;--s-button-border-radius-sm:var(--s-border-radius-sm);--s-button-font-size-sm:var(--s-font-size-sm);--s-button-icon-size-sm:var(--s-font-size);--s-button-height:var(--s-size-3xl);--s-button-padding-y:0;--s-button-padding-x:11px;--s-button-border-radius:var(--s-border-radius);--s-button-font-size:var(--s-font-size);--s-button-icon-size:18px;--s-button-height-lg:var(--s-size-4xl);--s-button-padding-y-lg:0;--s-button-padding-x-lg:14px;--s-button-border-radius-lg:var(--s-border-radius);--s-button-font-size-lg:var(--s-font-size-lg);--s-button-icon-size-lg:20px;--s-button-outlined-bg:var(--s-white);--s-button-secondary-border-color:var(--s-gray-200);--s-button-secondary-color:var(--s-gray-800)}.dark{--s-button-outlined-bg:rgba(0,0,0,0);--s-button-secondary-border-color:var(--s-gray-200);--s-button-secondary-color:var(--s-gray-200)}.s-button{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;border:none;vertical-align:middle;font-family:inherit;line-height:var(--s-line-height-normal);white-space:nowrap;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:visible;appearance:none;outline:none}.s-button--block{display:flex;width:100%}.s-button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;background:rgba(0,0,0,.125);pointer-events:none}.s-button--xs{height:var(--s-button-height-xs);padding:var(--s-button-padding-y-xs) var(--s-button-padding-x-xs);border-radius:var(--s-button-border-radius-xs);font-size:var(--s-button-font-size-xs)}.s-button--xs::after{border-radius:calc(var(--s-button-border-radius-xs)*2)}.s-button--xs .s-button__icon{font-size:var(--s-button-icon-size-xs)}.s-button--xs.s-button--iconic{min-width:var(--s-button-height-xs)}.s-button--small{height:var(--s-button-height-sm);padding:var(--s-button-padding-y-sm) var(--s-button-padding-x-sm);border-radius:var(--s-button-border-radius-sm);font-size:var(--s-button-font-size-sm)}.s-button--small::after{border-radius:calc(var(--s-button-border-radius-sm)*2)}.s-button--small .s-button__icon{font-size:var(--s-button-icon-size-sm)}.s-button--small.s-button--iconic{min-width:var(--s-button-height-sm)}.s-button--medium{height:var(--s-button-height);padding:var(--s-button-padding-y) var(--s-button-padding-x);border-radius:var(--s-button-border-radius);font-size:var(--s-button-font-size)}.s-button--medium::after{border-radius:calc(var(--s-button-border-radius)*2)}.s-button--medium .s-button__icon{font-size:var(--s-button-icon-size)}.s-button--medium.s-button--iconic{min-width:var(--s-button-height)}.s-button--large{height:var(--s-button-height-lg);padding:var(--s-button-padding-y-lg) var(--s-button-padding-x-lg);border-radius:var(--s-button-border-radius-lg);font-size:var(--s-button-font-size-lg)}.s-button--large::after{border-radius:calc(var(--s-button-border-radius-lg)*2)}.s-button--large .s-button__icon{font-size:var(--s-button-icon-size-lg)}.s-button--large.s-button--iconic{min-width:var(--s-button-height-lg)}.s-button--auto-height{height:auto}.s-button--compact{padding:0;height:auto}.s-button--solid-primary{color:var(--s-white);background-color:var(--s-color-primary)}.s-button--outlined-primary{color:var(--s-color-primary);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-primary)}.s-button--dashed-primary{color:var(--s-color-primary);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-primary)}.s-button--filled-primary{color:var(--s-color-primary);background-color:rgba(var(--s-color-primary-rgb), var(--s-opacity-theme-bg))}.s-button--text-primary{color:var(--s-color-primary);background-color:rgba(0,0,0,0)}.s-button--link-primary{color:var(--s-color-primary);background-color:rgba(0,0,0,0)}.s-button--solid-secondary{color:var(--s-white);background-color:var(--s-color-secondary)}.s-button--outlined-secondary{color:var(--s-button-secondary-color);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-button-secondary-border-color)}.s-button--dashed-secondary{color:var(--s-button-secondary-color);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-button-secondary-border-color)}.s-button--filled-secondary{color:var(--s-button-secondary-color);background-color:rgba(var(--s-color-secondary-rgb), var(--s-opacity-theme-bg))}.s-button--text-secondary{color:var(--s-button-secondary-color);background-color:rgba(0,0,0,0)}.s-button--link-secondary{color:var(--s-button-secondary-color);background-color:rgba(0,0,0,0)}.s-button--solid-success{color:var(--s-white);background-color:var(--s-color-success)}.s-button--outlined-success{color:var(--s-color-success);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-success)}.s-button--dashed-success{color:var(--s-color-success);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-success)}.s-button--filled-success{color:var(--s-color-success);background-color:rgba(var(--s-color-success-rgb), var(--s-opacity-theme-bg))}.s-button--text-success{color:var(--s-color-success);background-color:rgba(0,0,0,0)}.s-button--link-success{color:var(--s-color-success);background-color:rgba(0,0,0,0)}.s-button--solid-warning{color:var(--s-white);background-color:var(--s-color-warning)}.s-button--outlined-warning{color:var(--s-color-warning);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-warning)}.s-button--dashed-warning{color:var(--s-color-warning);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-warning)}.s-button--filled-warning{color:var(--s-color-warning);background-color:rgba(var(--s-color-warning-rgb), var(--s-opacity-theme-bg))}.s-button--text-warning{color:var(--s-color-warning);background-color:rgba(0,0,0,0)}.s-button--link-warning{color:var(--s-color-warning);background-color:rgba(0,0,0,0)}.s-button--solid-danger{color:var(--s-white);background-color:var(--s-color-danger)}.s-button--outlined-danger{color:var(--s-color-danger);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-color-danger)}.s-button--dashed-danger{color:var(--s-color-danger);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-color-danger)}.s-button--filled-danger{color:var(--s-color-danger);background-color:rgba(var(--s-color-danger-rgb), var(--s-opacity-theme-bg))}.s-button--text-danger{color:var(--s-color-danger);background-color:rgba(0,0,0,0)}.s-button--link-danger{color:var(--s-color-danger);background-color:rgba(0,0,0,0)}.s-button--solid-black{color:var(--s-white);background-color:var(--s-black)}.s-button--outlined-black{color:var(--s-black);background-color:var(--s-button-outlined-bg);border:1px solid var(--s-black)}.s-button--dashed-black{color:var(--s-black);background-color:var(--s-button-outlined-bg);border:1px dashed var(--s-black)}.s-button--filled-black{color:var(--s-black);background-color:rgba(var(--s-black-rgb), var(--s-opacity-theme-bg))}.s-button--text-black{color:var(--s-black);background-color:rgba(0,0,0,0)}.s-button--link-black{color:var(--s-black);background-color:rgba(0,0,0,0)}.s-button--solid-white{color:var(--s-black);background-color:var(--s-white)}.s-button--outlined-white{color:var(--s-white);background-color:rgba(0,0,0,0);border:1px solid var(--s-white)}.s-button--dashed-white{color:var(--s-white);background-color:rgba(0,0,0,0);border:1px dashed var(--s-white)}.s-button--filled-white{color:var(--s-white);background-color:rgba(var(--s-white-rgb), var(--s-opacity-theme-bg))}.s-button--text-white{color:var(--s-white);background-color:rgba(0,0,0,0)}.s-button--link-white{color:var(--s-white);background-color:rgba(0,0,0,0)}.s-button--ghost{background:rgba(0,0,0,0)}.s-button--round{border-radius:var(--s-border-radius-full)}.s-button--square{border-radius:0}.s-button--solid:not(.is-disabled,.is-loading):active::before,.s-button--outlined:not(.is-disabled,.is-loading):active::before,.s-button--dashed:not(.is-disabled,.is-loading):active::before,.s-button--filled:not(.is-disabled,.is-loading):active::before,.s-button--text:not(.is-disabled,.is-loading):active::before{opacity:1}.s-button--link:not(.is-disabled,.is-loading):active{opacity:var(--s-opacity-active)}.s-button:is(.is-disabled){opacity:var(--s-opacity-disabled);cursor:var(--s-cursor-disabled);filter:var(--s-filter-disabled)}.s-button:is(.is-loading){opacity:var(--s-opacity-loading);cursor:var(--s-cursor-loading)}.s-button__icon{display:inline-flex}.s-button__icon:is(.has-slot){margin-inline-end:.5em}:root:not([dir=rtl]) .s-button--compact-horizontal:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}:root[dir=rtl] .s-button--compact-horizontal:not(:first-child){border-top-right-radius:0;border-bottom-right-radius:0}:root:not([dir=rtl]) .s-button--compact-horizontal:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:root[dir=rtl] .s-button--compact-horizontal:not(:last-child){border-top-left-radius:0;border-bottom-left-radius:0}.s-button--compact-horizontal.s-button--solid+.s-button--solid,.s-button--compact-horizontal.s-button--solid+.s-button--filled,.s-button--compact-horizontal.s-button--filled+.s-button--solid,.s-button--compact-horizontal.s-button--filled+.s-button--filled{border-inline-start:1px solid var(--s-border-color-light)}.s-button--compact-vertical:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.s-button--compact-vertical:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.s-button--compact-vertical.s-button--solid+.s-button--solid,.s-button--compact-vertical.s-button--solid+.s-button--filled,.s-button--compact-vertical.s-button--filled+.s-button--solid,.s-button--compact-vertical.s-button--filled+.s-button--filled{border-top:1px solid var(--s-border-color-light)}.s-button--compact-horizontal.s-button--outlined+.s-button--outlined{margin-inline-start:-1px}.s-button--compact-vertical.s-button--outlined+.s-button--outlined{margin-top:-1px}
|
|
@@ -2,4 +2,4 @@ import { type EnhancedComponent } from '../../utils';
|
|
|
2
2
|
import _Button from './button.vue';
|
|
3
3
|
export declare const Button: EnhancedComponent<typeof _Button>;
|
|
4
4
|
export default Button;
|
|
5
|
-
export type { ButtonProps, ButtonSlots, ButtonEmits } from './common';
|
|
5
|
+
export type { ButtonProps, ButtonSlots, ButtonEmits, ButtonType } from './common';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-descriptions-label-color:var(--s-text-color-tertiary);--s-descriptions-label-font-size:var(--s-font-size);--s-descriptions-label-bg:var(--s-fill-color-fourth);--s-descriptions-content-color:var(--s-text-color-primary);--s-descriptions-content-font-size:var(--s-font-size);--s-descriptions-item-padding-y:var(--s-size-xs);--s-descriptions-item-padding-x:var(--s-size-sm);--s-descriptions-border-color:var(--s-border-color)}.s-descriptions{display:grid;width:100%;column-gap:var(--s-descriptions-item-padding-x);row-gap:var(--s-descriptions-item-padding-y)}.s-descriptions:is(.is-bordered){column-gap:0;row-gap:0;border-
|
|
1
|
+
:root{--s-descriptions-label-color:var(--s-text-color-tertiary);--s-descriptions-label-font-size:var(--s-font-size);--s-descriptions-label-bg:var(--s-fill-color-fourth);--s-descriptions-content-color:var(--s-text-color-primary);--s-descriptions-content-font-size:var(--s-font-size);--s-descriptions-item-padding-y:var(--s-size-xs);--s-descriptions-item-padding-x:var(--s-size-sm);--s-descriptions-border-color:var(--s-border-color);--s-descriptions-border-radius:var(--s-border-radius)}.s-descriptions{display:grid;width:100%;column-gap:var(--s-descriptions-item-padding-x);row-gap:var(--s-descriptions-item-padding-y)}.s-descriptions:is(.is-bordered){column-gap:0;row-gap:0;position:relative;border-radius:var(--s-descriptions-border-radius);overflow:hidden}.s-descriptions:is(.is-bordered)::after{content:"";position:absolute;inset:0;z-index:1;border:var(--s-border-width) solid var(--s-descriptions-border-color);border-radius:inherit;pointer-events:none}.s-descriptions__item-label{color:var(--s-descriptions-label-color);font-size:var(--s-descriptions-label-font-size);word-break:break-word}.s-descriptions__item-label:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border-inline-end:var(--s-border-width) solid var(--s-descriptions-border-color);border-block-end:var(--s-border-width) solid var(--s-descriptions-border-color);background:var(--s-descriptions-label-bg)}.s-descriptions__item-label:is(.has-colon)::after{content:":"}.s-descriptions__item-content{grid-column:span var(--s-descriptions-content-span, 1);color:var(--s-descriptions-content-color);font-size:var(--s-descriptions-content-font-size);word-break:break-word}.s-descriptions__item-content:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border-inline-end:var(--s-border-width) solid var(--s-descriptions-border-color);border-block-end:var(--s-border-width) solid var(--s-descriptions-border-color)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-dropdown-z-index:var(--s-z-index-tertiary);--s-dropdown-height:var(--s-content-height);--s-dropdown-bg:var(--s-bg-color-elevated);--s-dropdown-box-shadow:var(--s-box-shadow-tertiary);--s-dropdown-line-color:var(--s-border-color);--s-dropdown-item-padding-x:var(--s-size-xs);--s-dropdown-item-opacity-active:var(--s-opacity-active);--s-dropdown-item-show-color:var(--s-color-primary);--s-dropdown-value-font-size:var(--s-font-size);--s-dropdown-label-font-size:var(--s-font-size);--s-dropdown-label-color:var(--s-text-color-tertiary);--s-dropdown-label-margin-end:var(--s-size-xs);--s-dropdown-placeholder-color:var(--s-text-color-fourth);--s-dropdown-arrow-margin-start:var(--s-size-2xs);--s-dropdown-arrow-color:var(--s-border-color);--s-dropdown-arrow-font-size:var(--s-font-size-sm);--s-dropdown-option-color-active:var(--s-color-primary);--s-dropdown-option-icon-font-size:var(--s-font-size)}.s-dropdown{position:relative;display:flex;height:var(--s-dropdown-height);background:var(--s-dropdown-bg)}.s-dropdown__shadow{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:var(--s-dropdown-box-shadow);pointer-events:none}.s-dropdown__line{position:absolute;left:0;right:0;width:100%;height:var(--s-border-width);background:var(--s-dropdown-line-color);pointer-events:none;transform:scaleY(0.5)}.s-dropdown--up .s-dropdown__shadow{transform:rotateX(180deg)}.s-dropdown--up .s-dropdown__line{top:0;bottom:auto}.s-dropdown--down .s-dropdown__line{top:auto;bottom:0}.s-dropdown:is(.is-show) .s-dropdown__shadow,.s-dropdown:is(.is-show) .s-dropdown__line{z-index:var(--s-dropdown-z-index)}.s-dropdown-item{display:flex;align-items:center;justify-content:center;flex:1;padding:0 var(--s-dropdown-item-padding-x);overflow:hidden;cursor:pointer}.s-dropdown-item__label{margin-inline-end:var(--s-dropdown-label-margin-end);font-size:var(--s-dropdown-label-font-size);color:var(--s-dropdown-label-color)}.s-dropdown-item__title,.s-dropdown-item__value{font-size:var(--s-dropdown-value-font-size)}.s-dropdown-item__placeholder{color:var(--s-dropdown-placeholder-color);font-size:var(--s-dropdown-value-font-size)}.s-dropdown-item__arrow{display:flex;justify-content:center;align-items:center;margin-inline-start:var(--s-dropdown-arrow-margin-start);color:var(--s-dropdown-arrow-color);font-size:var(--s-dropdown-arrow-font-size)}.s-dropdown-item__popover{position:fixed;z-index:var(--s-dropdown-z-index);overflow:hidden;touch-action:none}.s-dropdown-item__popup{position:absolute;width:100%}.s-dropdown-item__popup--slide-top{top:0;left:0;width:100%}.s-dropdown-item__popup--slide-bottom{left:0;bottom:0;width:100%}.s-dropdown-item__option:is(.is-active){color:var(--s-dropdown-option-color-active)}.s-dropdown-item__option:not(.is-active) .s-dropdown-item__option-icon{display:none}.s-dropdown-item__option-icon{display:flex;align-items:center;justify-content:center;margin-inline-start:auto;font-size:var(--s-dropdown-option-icon-font-size)}.s-dropdown-item:is(.is-displayed){touch-action:none;color:var(--s-dropdown-item-show-color)}.s-dropdown-item:is(.is-displayed) .s-dropdown-item__arrow{color:var(--s-dropdown-option-color-active)}.s-dropdown-item:not(.is-disabled):active{opacity:var(--s-dropdown-item-opacity-active)}.s-dropdown-item:is(.is-disabled){cursor:not-allowed}.s-dropdown-item:is(.is-disabled) .s-dropdown-item__title,.s-dropdown-item:is(.is-disabled) .s-dropdown-item__value,.s-dropdown-item:is(.is-disabled) .s-dropdown-item__label{color:var(--s-text-color-disabled)}.s-dropdown-item--up .s-dropdown-item__arrow{transform:rotate(180deg)}
|
|
1
|
+
:root{--s-dropdown-z-index:var(--s-z-index-tertiary);--s-dropdown-height:var(--s-content-height);--s-dropdown-bg:var(--s-bg-color-elevated);--s-dropdown-box-shadow:var(--s-box-shadow-tertiary);--s-dropdown-line-color:var(--s-border-color);--s-dropdown-item-padding-x:var(--s-size-xs);--s-dropdown-item-opacity-active:var(--s-opacity-active);--s-dropdown-item-show-color:var(--s-color-primary);--s-dropdown-value-font-size:var(--s-font-size);--s-dropdown-label-font-size:var(--s-font-size);--s-dropdown-label-color:var(--s-text-color-tertiary);--s-dropdown-label-margin-end:var(--s-size-xs);--s-dropdown-placeholder-color:var(--s-text-color-fourth);--s-dropdown-arrow-margin-start:var(--s-size-2xs);--s-dropdown-arrow-color:var(--s-border-color);--s-dropdown-arrow-font-size:var(--s-font-size-sm);--s-dropdown-option-color-active:var(--s-color-primary);--s-dropdown-option-icon-font-size:var(--s-font-size)}.s-dropdown{position:relative;display:flex;height:var(--s-dropdown-height);background:var(--s-dropdown-bg)}.s-dropdown__shadow{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:var(--s-dropdown-box-shadow);pointer-events:none}.s-dropdown__line{position:absolute;left:0;right:0;width:100%;height:var(--s-border-width);background:var(--s-dropdown-line-color);pointer-events:none;transform:scaleY(0.5)}.s-dropdown--up .s-dropdown__shadow{transform:rotateX(180deg)}.s-dropdown--up .s-dropdown__line{top:0;bottom:auto}.s-dropdown--down .s-dropdown__line{top:auto;bottom:0}.s-dropdown:is(.is-show) .s-dropdown__shadow,.s-dropdown:is(.is-show) .s-dropdown__line{z-index:var(--s-dropdown-z-index)}.s-dropdown-item{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:0 var(--s-dropdown-item-padding-x);overflow:hidden;cursor:pointer}.s-dropdown-item__label{margin-inline-end:var(--s-dropdown-label-margin-end);font-size:var(--s-dropdown-label-font-size);color:var(--s-dropdown-label-color);white-space:nowrap}.s-dropdown-item__title,.s-dropdown-item__value{font-size:var(--s-dropdown-value-font-size);white-space:nowrap}.s-dropdown-item__placeholder{color:var(--s-dropdown-placeholder-color);font-size:var(--s-dropdown-value-font-size);white-space:nowrap}.s-dropdown-item__value,.s-dropdown-item__placeholder{text-overflow:ellipsis;overflow:hidden}.s-dropdown-item__arrow{display:flex;justify-content:center;align-items:center;margin-inline-start:var(--s-dropdown-arrow-margin-start);color:var(--s-dropdown-arrow-color);font-size:var(--s-dropdown-arrow-font-size)}.s-dropdown-item__popover{position:fixed;z-index:var(--s-dropdown-z-index);overflow:hidden;touch-action:none}.s-dropdown-item__popup{position:absolute;width:100%}.s-dropdown-item__popup--slide-top{top:0;left:0;width:100%}.s-dropdown-item__popup--slide-bottom{left:0;bottom:0;width:100%}.s-dropdown-item__option:is(.is-active){color:var(--s-dropdown-option-color-active)}.s-dropdown-item__option:not(.is-active) .s-dropdown-item__option-icon{display:none}.s-dropdown-item__option-icon{display:flex;align-items:center;justify-content:center;margin-inline-start:auto;font-size:var(--s-dropdown-option-icon-font-size)}.s-dropdown-item:is(.is-displayed){touch-action:none;color:var(--s-dropdown-item-show-color)}.s-dropdown-item:is(.is-displayed) .s-dropdown-item__arrow{color:var(--s-dropdown-option-color-active)}.s-dropdown-item:not(.is-disabled):active{opacity:var(--s-dropdown-item-opacity-active)}.s-dropdown-item:is(.is-disabled){cursor:not-allowed}.s-dropdown-item:is(.is-disabled) .s-dropdown-item__title,.s-dropdown-item:is(.is-disabled) .s-dropdown-item__value,.s-dropdown-item:is(.is-disabled) .s-dropdown-item__label{color:var(--s-text-color-disabled)}.s-dropdown-item--up .s-dropdown-item__arrow{transform:rotate(180deg)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-stepper-height:var(--s-content-height-xs);--s-stepper-accent-height:var(--s-content-height-2xs);--s-stepper-gap:var(--s-size-2xs);--s-stepper-bg:var(--s-fill-color-secondary);--s-stepper-input-width:40px;--s-stepper-input-padding-x:var(--s-size-2xs);--s-stepper-input-font-size:var(--s-font-size);--s-stepper-button-font-size:var(--s-font-size-lg);--s-stepper-button-border-radius:var(--s-border-radius-sm);--s-stepper-button-bg-active:var(--s-bg-color-active-dark);--s-stepper-height-sm:26px;--s-stepper-accent-height-sm:20px;--s-stepper-input-width-sm:36px;--s-stepper-input-font-size-sm:var(--s-font-size-sm);--s-stepper-button-font-size-sm:var(--s-font-size)}.s-stepper{display:inline-flex;align-items:stretch;height:var(--s-stepper-height);color:var(--s-text-color-primary)}.s-stepper__button{flex:none;display:flex;justify-content:center;align-items:center;width:var(--s-stepper-height);font-size:var(--s-stepper-button-font-size);line-height:var(--s-line-height-none);-webkit-user-select:none;user-select:none;cursor:pointer}.s-stepper__button--readonly{cursor:unset}.s-stepper__button:is(.is-disabled){opacity:var(--s-opacity-disabled);cursor:var(--s-cursor-disabled);filter:var(--s-filter-disabled)}:root:not([dir=rtl]) .s-stepper__button--decrease{border-top-left-radius:var(--s-stepper-button-border-radius);border-bottom-left-radius:var(--s-stepper-button-border-radius)}:root[dir=rtl] .s-stepper__button--decrease{border-top-right-radius:var(--s-stepper-button-border-radius);border-bottom-right-radius:var(--s-stepper-button-border-radius)}:root:not([dir=rtl]) .s-stepper__button--increase{border-top-right-radius:var(--s-stepper-button-border-radius);border-bottom-right-radius:var(--s-stepper-button-border-radius)}:root[dir=rtl] .s-stepper__button--increase{border-top-left-radius:var(--s-stepper-button-border-radius);border-bottom-left-radius:var(--s-stepper-button-border-radius)}.s-stepper__input{flex:none;width:var(--s-stepper-input-width);height:100%;padding:0 var(--s-stepper-input-padding-x);border:0;border-radius:0;font-size:var(--s-stepper-input-font-size);line-height:var(--s-line-height-none);text-align:center}.s-stepper--solid{gap:var(--s-stepper-gap)}.s-stepper--solid .s-stepper__button{background:var(--s-stepper-bg)}.s-stepper--solid .s-stepper__button:not(.is-disabled,.is-readonly):active{background:var(--s-stepper-button-bg-active)}.s-stepper--solid .s-stepper__input{background:var(--s-stepper-bg)}.s-stepper--outlined .s-stepper__button{color:var(--s-color-primary);border:1px solid var(--s-color-primary)}.s-stepper--outlined .s-stepper__button:not(.is-disabled,.is-readonly):active{background:var(--s-bg-color-active)}.s-stepper--outlined .s-stepper__input{border-top:1px solid var(--s-color-primary);border-bottom:1px solid var(--s-color-primary)}.s-stepper--accent{height:var(--s-stepper-accent-height);gap:var(--s-stepper-gap)}.s-stepper--accent .s-stepper__button{border-radius:50% !important;width:var(--s-stepper-accent-height)}.s-stepper--accent .s-stepper__button:not(.is-disabled,.is-readonly):active{opacity:var(--s-opacity-active)}.s-stepper--accent .s-stepper__button--decrease{color:var(--s-color-primary);border:1px solid var(--s-color-primary)}.s-stepper--accent .s-stepper__button--increase{color:var(--s-white);background:var(--s-color-primary)}.s-stepper--accent .s-stepper__input{padding:0}.s-stepper--ghost{gap:var(--s-stepper-gap)}.s-stepper--ghost .s-stepper__button:not(.is-disabled,.is-readonly):active{opacity:var(--s-opacity-active)}.s-stepper--ghost .s-stepper__input{border-radius:var(--s-stepper-button-border-radius);background:var(--s-stepper-bg)}.s-stepper--small{height:var(--s-stepper-height-sm)}.s-stepper--small .s-stepper__input{width:var(--s-stepper-input-width-sm);font-size:var(--s-stepper-input-font-size-sm)}.s-stepper--small .s-stepper__button{width:var(--s-stepper-height-sm);font-size:var(--s-stepper-button-font-size-sm)}.s-stepper--small.s-stepper--accent{height:var(--s-stepper-accent-height-sm)}.s-stepper--small.s-stepper--accent .s-stepper__button{width:var(--s-stepper-accent-height-sm)}
|
|
1
|
+
:root{--s-stepper-height:var(--s-content-height-xs);--s-stepper-accent-height:var(--s-content-height-2xs);--s-stepper-gap:var(--s-size-2xs);--s-stepper-bg:var(--s-fill-color-secondary);--s-stepper-input-width:40px;--s-stepper-input-padding-x:var(--s-size-2xs);--s-stepper-input-font-size:var(--s-font-size);--s-stepper-button-font-size:var(--s-font-size-lg);--s-stepper-button-border-radius:var(--s-border-radius-sm);--s-stepper-button-bg-active:var(--s-bg-color-active-dark);--s-stepper-height-sm:26px;--s-stepper-accent-height-sm:20px;--s-stepper-input-width-sm:36px;--s-stepper-input-font-size-sm:var(--s-font-size-sm);--s-stepper-button-font-size-sm:var(--s-font-size)}.s-stepper{display:inline-flex;align-items:stretch;height:var(--s-stepper-height);color:var(--s-text-color-primary)}.s-stepper__button{flex:none;display:flex;justify-content:center;align-items:center;width:var(--s-stepper-height);font-size:var(--s-stepper-button-font-size);line-height:var(--s-line-height-none);-webkit-user-select:none;user-select:none;cursor:pointer}.s-stepper__button--readonly{cursor:unset}.s-stepper__button:is(.is-disabled){opacity:var(--s-opacity-disabled);cursor:var(--s-cursor-disabled);filter:var(--s-filter-disabled)}:root:not([dir=rtl]) .s-stepper__button--decrease{border-top-left-radius:var(--s-stepper-button-border-radius);border-bottom-left-radius:var(--s-stepper-button-border-radius)}:root[dir=rtl] .s-stepper__button--decrease{border-top-right-radius:var(--s-stepper-button-border-radius);border-bottom-right-radius:var(--s-stepper-button-border-radius)}:root:not([dir=rtl]) .s-stepper__button--increase{border-top-right-radius:var(--s-stepper-button-border-radius);border-bottom-right-radius:var(--s-stepper-button-border-radius)}:root[dir=rtl] .s-stepper__button--increase{border-top-left-radius:var(--s-stepper-button-border-radius);border-bottom-left-radius:var(--s-stepper-button-border-radius)}.s-stepper__input{flex:none;width:var(--s-stepper-input-width);height:100%;padding:0 var(--s-stepper-input-padding-x);border:0;border-radius:0;font-size:var(--s-stepper-input-font-size);line-height:var(--s-line-height-none);text-align:center}.s-stepper__input:is(.is-disabled){opacity:var(--s-opacity-disabled);cursor:var(--s-cursor-disabled);filter:var(--s-filter-disabled)}.s-stepper--solid{gap:var(--s-stepper-gap)}.s-stepper--solid .s-stepper__button{background:var(--s-stepper-bg)}.s-stepper--solid .s-stepper__button:not(.is-disabled,.is-readonly):active{background:var(--s-stepper-button-bg-active)}.s-stepper--solid .s-stepper__input{background:var(--s-stepper-bg)}.s-stepper--outlined .s-stepper__button{color:var(--s-color-primary);border:1px solid var(--s-color-primary)}.s-stepper--outlined .s-stepper__button:not(.is-disabled,.is-readonly):active{background:var(--s-bg-color-active)}.s-stepper--outlined .s-stepper__input{border-top:1px solid var(--s-color-primary);border-bottom:1px solid var(--s-color-primary)}.s-stepper--accent{height:var(--s-stepper-accent-height);gap:var(--s-stepper-gap)}.s-stepper--accent .s-stepper__button{border-radius:50% !important;width:var(--s-stepper-accent-height)}.s-stepper--accent .s-stepper__button:not(.is-disabled,.is-readonly):active{opacity:var(--s-opacity-active)}.s-stepper--accent .s-stepper__button--decrease{color:var(--s-color-primary);border:1px solid var(--s-color-primary)}.s-stepper--accent .s-stepper__button--increase{color:var(--s-white);background:var(--s-color-primary)}.s-stepper--accent .s-stepper__input{padding:0}.s-stepper--ghost{gap:var(--s-stepper-gap)}.s-stepper--ghost .s-stepper__button:not(.is-disabled,.is-readonly):active{opacity:var(--s-opacity-active)}.s-stepper--ghost .s-stepper__input{border-radius:var(--s-stepper-button-border-radius);background:var(--s-stepper-bg)}.s-stepper--small{height:var(--s-stepper-height-sm)}.s-stepper--small .s-stepper__input{width:var(--s-stepper-input-width-sm);font-size:var(--s-stepper-input-font-size-sm)}.s-stepper--small .s-stepper__button{width:var(--s-stepper-height-sm);font-size:var(--s-stepper-button-font-size-sm)}.s-stepper--small.s-stepper--accent{height:var(--s-stepper-accent-height-sm)}.s-stepper--small.s-stepper--accent .s-stepper__button{width:var(--s-stepper-accent-height-sm)}
|
|
@@ -23,6 +23,7 @@ declare const __VLS_export: import("vue").DefineComponent<StepperProps, {}, {},
|
|
|
23
23
|
inputType: "number" | "digit";
|
|
24
24
|
valueOnClear: number | "min" | "max";
|
|
25
25
|
step: number;
|
|
26
|
+
inputWidth: string | number;
|
|
26
27
|
press: boolean;
|
|
27
28
|
pressTime: number;
|
|
28
29
|
interval: number;
|
|
@@ -6,7 +6,7 @@ import { useSimulatedPress } from "../../use/useSimulatedPress.js";
|
|
|
6
6
|
import { useFormContext } from "../form/common.js";
|
|
7
7
|
import input_default from "../input/input.vue.js";
|
|
8
8
|
import { defaultStepperProps } from "./common.js";
|
|
9
|
-
import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, ref, unref, useModel, watch } from "vue";
|
|
9
|
+
import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, unref, useModel, watch } from "vue";
|
|
10
10
|
import { Minus, Plus } from "@sard/icons";
|
|
11
11
|
//#region packages/sard/components/stepper/stepper.vue
|
|
12
12
|
var stepper_default = /*@__PURE__*/ defineComponent({
|
|
@@ -44,6 +44,10 @@ var stepper_default = /*@__PURE__*/ defineComponent({
|
|
|
44
44
|
type: String,
|
|
45
45
|
required: false
|
|
46
46
|
},
|
|
47
|
+
inputWidth: {
|
|
48
|
+
type: [String, Number],
|
|
49
|
+
required: false
|
|
50
|
+
},
|
|
47
51
|
placeholder: {
|
|
48
52
|
type: String,
|
|
49
53
|
required: false
|
|
@@ -199,6 +203,10 @@ var stepper_default = /*@__PURE__*/ defineComponent({
|
|
|
199
203
|
bem.m(props.variant)
|
|
200
204
|
];
|
|
201
205
|
});
|
|
206
|
+
const inputStyle = computed(() => {
|
|
207
|
+
if (isNullish(props.inputWidth)) return;
|
|
208
|
+
return { width: typeof props.inputWidth === "number" ? `${props.inputWidth}px` : props.inputWidth };
|
|
209
|
+
});
|
|
202
210
|
return (_ctx, _cache) => {
|
|
203
211
|
return openBlock(), createElementBlock("div", { class: normalizeClass(stepperClass.value) }, [
|
|
204
212
|
createElementVNode("div", {
|
|
@@ -219,6 +227,7 @@ var stepper_default = /*@__PURE__*/ defineComponent({
|
|
|
219
227
|
modelValue: inputValue.value,
|
|
220
228
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => inputValue.value = $event),
|
|
221
229
|
class: normalizeClass(unref(bem).e("input")),
|
|
230
|
+
style: normalizeStyle(inputStyle.value),
|
|
222
231
|
type: __props.inputType,
|
|
223
232
|
placeholder: __props.placeholder,
|
|
224
233
|
disabled: isDisabled.value || isReadonly.value,
|
|
@@ -232,6 +241,7 @@ var stepper_default = /*@__PURE__*/ defineComponent({
|
|
|
232
241
|
}, null, 8, [
|
|
233
242
|
"modelValue",
|
|
234
243
|
"class",
|
|
244
|
+
"style",
|
|
235
245
|
"type",
|
|
236
246
|
"placeholder",
|
|
237
247
|
"disabled",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-white:#fff;--s-gray-50:#fafafa;--s-gray-100:#f3f3f3;--s-gray-125:#ececec;--s-gray-150:#e5e5e5;--s-gray-200:#dedede;--s-gray-300:#c4c4c4;--s-gray-400:#ababab;--s-gray-500:#8f8f8f;--s-gray-600:#717171;--s-gray-700:#525252;--s-gray-800:#353535;--s-gray-900:#181818;--s-gray-950:#0e0e0e;--s-black:#000;--s-white-rgb:255,255,255;--s-gray-50-rgb:250,250,250;--s-gray-100-rgb:243,243,243;--s-gray-125-rgb:236,236,236;--s-gray-150-rgb:229,229,229;--s-gray-200-rgb:222,222,222;--s-gray-300-rgb:196,196,196;--s-gray-400-rgb:171,171,171;--s-gray-500-rgb:143,143,143;--s-gray-600-rgb:113,113,113;--s-gray-700-rgb:82,82,82;--s-gray-800-rgb:53,53,53;--s-gray-900-rgb:24,24,24;--s-gray-950-rgb:14,14,14;--s-black-rgb:0,0,0;--s-color-primary:#3b82f6;--s-color-secondary:var(--s-gray-
|
|
1
|
+
:root{--s-white:#fff;--s-gray-50:#fafafa;--s-gray-100:#f3f3f3;--s-gray-125:#ececec;--s-gray-150:#e5e5e5;--s-gray-200:#dedede;--s-gray-300:#c4c4c4;--s-gray-400:#ababab;--s-gray-500:#8f8f8f;--s-gray-600:#717171;--s-gray-700:#525252;--s-gray-800:#353535;--s-gray-900:#181818;--s-gray-950:#0e0e0e;--s-black:#000;--s-white-rgb:255,255,255;--s-gray-50-rgb:250,250,250;--s-gray-100-rgb:243,243,243;--s-gray-125-rgb:236,236,236;--s-gray-150-rgb:229,229,229;--s-gray-200-rgb:222,222,222;--s-gray-300-rgb:196,196,196;--s-gray-400-rgb:171,171,171;--s-gray-500-rgb:143,143,143;--s-gray-600-rgb:113,113,113;--s-gray-700-rgb:82,82,82;--s-gray-800-rgb:53,53,53;--s-gray-900-rgb:24,24,24;--s-gray-950-rgb:14,14,14;--s-black-rgb:0,0,0;--s-color-primary:#3b82f6;--s-color-secondary:var(--s-gray-900);--s-color-success:#22c55e;--s-color-warning:#eab308;--s-color-danger:#ef4444;--s-color-primary-rgb:59,130,246;--s-color-secondary-rgb:24,24,24;--s-color-success-rgb:34,197,94;--s-color-warning-rgb:234,179,8;--s-color-danger-rgb:239,68,68;--s-text-color-emphasis:var(--s-black);--s-text-color-primary:var(--s-gray-900);--s-text-color-secondary:var(--s-gray-700);--s-text-color-tertiary:var(--s-gray-600);--s-text-color-fourth:var(--s-gray-400);--s-text-color-disabled:var(--s-gray-400);--s-bg-color-layout:var(--s-gray-100);--s-bg-color-container:var(--s-white);--s-bg-color-container-rgb:var(--s-white-rgb);--s-bg-color-elevated:var(--s-white);--s-bg-color-elevated-rgb:var(--s-white-rgb);--s-bg-color-extreme:var(--s-white);--s-bg-color-disabled:var(--s-gray-150);--s-bg-color-active:var(--s-gray-125);--s-bg-color-active-dark:var(--s-gray-200);--s-fill-color:var(--s-gray-200);--s-fill-color-secondary:var(--s-gray-150);--s-fill-color-tertiary:var(--s-gray-125);--s-fill-color-fourth:var(--s-gray-100);--s-border-style:solid;--s-border-width:1px;--s-border-color-dark:var(--s-gray-300);--s-border-color:var(--s-gray-200);--s-border-color-light:var(--s-gray-100);--s-border-radius-xs:2px;--s-border-radius-sm:4px;--s-border-radius:6px;--s-border-radius-lg:10px;--s-border-radius-xl:14px;--s-border-radius-full:9999px;--s-font-family:-apple-system,blinkmacsystemfont,"Helvetica Neue",helvetica,segoe ui,arial,roboto,"PingFang SC","miui","Hiragino Sans GB","Microsoft Yahei",sans-serif;--s-font-family-code:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--s-font-size-xs:10px;--s-font-size-sm:12px;--s-font-size:14px;--s-font-size-lg:16px;--s-font-size-xl:24px;--s-font-size-2xl:32px;--s-font-weight-bold:600;--s-font-weight-normal:400;--s-font-weight-light:300;--s-line-height-none:1;--s-line-height-tight:1.25;--s-line-height-snug:1.375;--s-line-height-normal:1.5;--s-line-height-relaxed:1.625;--s-line-height-loose:2;--s-size-3xs:2px;--s-size-2xs:4px;--s-size-xs:8px;--s-size-sm:12px;--s-size:16px;--s-size-lg:20px;--s-size-xl:24px;--s-size-2xl:32px;--s-size-3xl:40px;--s-size-4xl:48px;--s-size-5xl:56px;--s-size-6xl:64px;--s-content-height-2xs:24px;--s-content-height-xs:32px;--s-content-height-sm:40px;--s-content-height:44px;--s-content-height-lg:48px;--s-content-padding-y:var(--s-size-xs);--s-content-padding-x:var(--s-size);--s-content-padding:var(--s-size-xs) var(--s-size);--s-z-index:1000;--s-z-index-secondary:100;--s-z-index-tertiary:10;--s-box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);--s-box-shadow-secondary:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);--s-box-shadow-tertiary:0 1px 2px 0 rgba(0,0,0,.05),0 1px 6px -1px rgba(0,0,0,.03),0 2px 4px 0 rgba(0,0,0,.03);--s-box-shadow-side-color:rgba(0,0,0,.15);--s-box-shadow-left:inset 10px 0 10px -10px var(--s-box-shadow-side-color);--s-box-shadow-right:inset -10px 0 10px -10px var(--s-box-shadow-side-color);--s-box-shadow-top:inset 0 10px 10px -10px var(--s-box-shadow-side-color);--s-box-shadow-bottom:inset 0 -10px 10px -10px var(--s-box-shadow-side-color);--s-overlay-legible:rgba(0,0,0,.1);--s-overlay:rgba(0,0,0,.5);--s-overlay-illegible:rgba(0,0,0,.7);--s-opacity-disabled:.6;--s-opacity-active:.5;--s-opacity-loading:.6;--s-opacity-theme-bg:.1;--s-cursor-disabled:not-allowed;--s-cursor-loading:wait;--s-filter-disabled:grayscale(100%);--s-duration-slow:350ms;--s-duration:250ms;--s-duration-fast:150ms;--s-safe-bottom:env(safe-area-inset-bottom);--s-status-bar-height:0px}.dark{--s-text-color-emphasis:var(--s-white);--s-text-color-primary:var(--s-gray-100);--s-text-color-secondary:var(--s-gray-300);--s-text-color-tertiary:var(--s-gray-500);--s-text-color-fourth:var(--s-gray-600);--s-text-color-disabled:var(--s-gray-600);--s-bg-color-layout:var(--s-black);--s-bg-color-container:var(--s-gray-950);--s-bg-color-container-rgb:var(--s-gray-950-rgb);--s-bg-color-elevated:var(--s-gray-950);--s-bg-color-elevated-rgb:var(--s-gray-950-rgb);--s-bg-color-extreme:var(--s-black);--s-bg-color-disabled:var(--s-gray-700);--s-bg-color-active:var(--s-gray-800);--s-bg-color-active-dark:var(--s-gray-600);--s-fill-color:var(--s-gray-600);--s-fill-color-secondary:var(--s-gray-700);--s-fill-color-tertiary:var(--s-gray-800);--s-fill-color-fourth:var(--s-gray-900);--s-border-color-dark:var(--s-gray-600);--s-border-color:var(--s-gray-700);--s-border-color-light:var(--s-gray-800);--s-box-shadow:0 6px 16px 0 hsla(0,0%,100%,.04),0 3px 6px -4px hsla(0,0%,100%,.06),0 9px 28px 8px hsla(0,0%,100%,.02);--s-box-shadow-secondary:0 6px 16px 0 hsla(0,0%,100%,.04),0 3px 6px -4px hsla(0,0%,100%,.06),0 9px 28px 8px hsla(0,0%,100%,.02);--s-box-shadow-tertiary:0 1px 2px 0 hsla(0,0%,100%,.05),0 1px 6px -1px hsla(0,0%,100%,.03),0 2px 4px 0 hsla(0,0%,100%,.03);--s-box-shadow-side-color:hsla(0,0%,100%,.1)}
|
|
@@ -59,6 +59,10 @@ function useSwiper(props, emit) {
|
|
|
59
59
|
useResizeObserver(rootRef, (size) => {
|
|
60
60
|
swiperSize.value = vertical.value ? size.height : size.width;
|
|
61
61
|
});
|
|
62
|
+
watch(() => props.vertical, () => {
|
|
63
|
+
const rect = rootRef.value?.getBoundingClientRect();
|
|
64
|
+
if (rect) swiperSize.value = vertical.value ? rect.height : rect.width;
|
|
65
|
+
}, { flush: "post" });
|
|
62
66
|
watch(members, () => {
|
|
63
67
|
setSlides(members.value);
|
|
64
68
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-table-border-color:var(--s-border-color);--s-table-bg:var(--s-bg-color-container);--s-table-bg-striped:var(--s-fill-color-
|
|
1
|
+
:root{--s-table-border-color:var(--s-border-color);--s-table-bg:var(--s-bg-color-container);--s-table-bg-striped:var(--s-fill-color-fourth);--s-table-header-bg:var(--s-bg-color-container);--s-table-cell-padding-sm:4px 6px;--s-table-cell-padding:4px 8px;--s-table-cell-padding-lg:6px 12px;--s-table-font-size-sm:var(--s-font-size-sm);--s-table-font-size:var(--s-font-size);--s-table-font-size-lg:var(--s-font-size)}.s-table{position:relative;min-width:100%;background:var(--s-table-bg);font-size:var(--s-table-font-size)}.s-table__wrapper{height:100%}.s-table__scroll{height:100%;overflow:auto}.s-table table{box-sizing:border-box;table-layout:fixed;border-collapse:separate;border-spacing:0;min-width:100%}.s-table__header{position:sticky;top:0;z-index:2}.s-table__cell{box-sizing:border-box;position:relative;text-align:start;padding:var(--s-table-cell-padding);background:var(--s-table-bg)}.s-table__cell:is(th){background:var(--s-table-header-bg)}.s-table__cell:is(.is-fixed){position:sticky;z-index:1}.s-table--underlined .s-table__cell{border-bottom:1px solid var(--s-table-border-color)}.s-table--underlined::after{content:"";position:absolute;z-index:3;background:var(--s-table-border-color);bottom:0;left:0;width:100%;height:1px}.s-table--bordered .s-table__wrapper::before{content:"";position:absolute;z-index:3;background:var(--s-table-border-color);top:0;left:0;width:100%;height:1px}.s-table--bordered .s-table__wrapper::after{content:"";position:absolute;z-index:3;background:var(--s-table-border-color);top:0;left:0;width:1px;height:100%}.s-table--bordered table{border-top:1px solid var(--s-table-border-color);border-left:1px solid var(--s-table-border-color)}.s-table--bordered .s-table__cell{border-right:1px solid var(--s-table-border-color);border-bottom:1px solid var(--s-table-border-color)}.s-table--bordered::before{content:"";position:absolute;z-index:3;background:var(--s-table-border-color);top:0;right:0;width:1px;height:100%}.s-table--bordered::after{content:"";position:absolute;z-index:3;background:var(--s-table-border-color);bottom:0;left:0;width:100%;height:1px}.s-table--striped tr:nth-child(2n) .s-table__cell{background:var(--s-table-bg-striped)}.s-table__cell:is(.is-first,.is-last)::before{content:"";position:absolute;top:0;bottom:0;width:10px;overflow:hidden;pointer-events:none}.s-table--scroll-none .s-table__cell:is(.is-first)::before,.s-table--scroll-start .s-table__cell:is(.is-first)::before{inset-inline-end:100%;box-shadow:var(--s-box-shadow-right)}:root[dir=rtl] .s-table--scroll-none .s-table__cell:is(.is-first)::before,:root[dir=rtl] .s-table--scroll-start .s-table__cell:is(.is-first)::before{box-shadow:var(--s-box-shadow-left)}.s-table--scroll-none .s-table__cell:is(.is-last),.s-table--scroll-end .s-table__cell:is(.is-last){border-right:none}.s-table--scroll-none .s-table__cell:is(.is-last)::before,.s-table--scroll-end .s-table__cell:is(.is-last)::before{inset-inline-start:100%;box-shadow:var(--s-box-shadow-left)}:root[dir=rtl] .s-table--scroll-none .s-table__cell:is(.is-last)::before,:root[dir=rtl] .s-table--scroll-end .s-table__cell:is(.is-last)::before{box-shadow:var(--s-box-shadow-right)}.s-table--small{font-size:var(--s-table-font-size-sm)}.s-table--small .s-table__cell{padding:var(--s-table-cell-padding-sm)}.s-table--large{font-size:var(--s-table-font-size-lg)}.s-table--large .s-table__cell{padding:var(--s-table-cell-padding-lg)}
|
|
@@ -370,14 +370,14 @@ var tree_default = /*@__PURE__*/ defineComponent({
|
|
|
370
370
|
const currentEditType = ref();
|
|
371
371
|
const currentEditValue = ref("");
|
|
372
372
|
const mapEditTypeTitle = {
|
|
373
|
-
addSibling:
|
|
374
|
-
addChild:
|
|
375
|
-
addRoot:
|
|
376
|
-
edit:
|
|
377
|
-
delete:
|
|
373
|
+
addSibling: "addSibling",
|
|
374
|
+
addChild: "addChild",
|
|
375
|
+
addRoot: "addRoot",
|
|
376
|
+
edit: "edit",
|
|
377
|
+
delete: "removeNode"
|
|
378
378
|
};
|
|
379
379
|
const currentEditTitle = computed(() => {
|
|
380
|
-
return mapEditTypeTitle[currentEditType.value];
|
|
380
|
+
return t(mapEditTypeTitle[currentEditType.value]);
|
|
381
381
|
});
|
|
382
382
|
const dialogVisible = ref(false);
|
|
383
383
|
const toastVisible = ref(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--s-upload-preview-width:88px;--s-upload-preview-height:88px;--s-upload-preview-gap:var(--s-size-xs);--s-upload-preview-border-radius:var(--s-border-radius);--s-upload-preview-bg:var(--s-fill-color-secondary);--s-upload-preview-video-bg:var(--s-black);--s-upload-file-color:var(--s-text-color-primary);--s-upload-file-icon-font-size:var(--s-size-lg);--s-upload-file-name-margin-top:var(--s-size-2xs);--s-upload-file-name-padding-x:var(--s-size-2xs);--s-upload-file-name-font-size:var(--s-font-size-sm);--s-upload-status-color:var(--s-white);--s-upload-status-bg:var(--s-overlay-illegible);--s-upload-status-icon-font-size:var(--s-size-lg);--s-upload-status-message-margin-top:var(--s-size-2xs);--s-upload-status-message-padding-x:var(--s-size-2xs);--s-upload-status-message-font-size:var(--s-font-size-sm);--s-upload-close-top:2px;--s-upload-close-right:2px;--s-upload-close-size:var(--s-size-lg);--s-upload-close-font-size:var(--s-font-size-sm);--s-upload-close-color:var(--s-white);--s-upload-close-bg:var(--s-overlay-illegible);--s-upload-select-width:88px;--s-upload-select-height:88px;--s-upload-select-font-size:var(--s-size-xl);--s-upload-select-color:var(--s-text-color-secondary);--s-upload-select-border-radius:var(--s-border-radius);--s-upload-select-bg:var(--s-fill-color-secondary);--s-upload-select-bg-active:var(--s-bg-color-active-dark);--s-upload-video-play-bg:var(--s-overlay-legible);--s-upload-video-play-color:rgba(var(--s-white-rgb), 0.8);--s-upload-loading-size:var(--s-size-lg)}.s-upload__wrapper{display:flex;flex-wrap:wrap;gap:var(--s-upload-preview-gap)}.s-upload__select{display:flex;align-items:center;justify-content:center;width:var(--s-upload-select-width);height:var(--s-upload-select-height);color:var(--s-upload-select-color);border-radius:var(--s-upload-select-border-radius);background:var(--s-upload-select-bg);cursor:pointer}.s-upload__select-icon{font-size:var(--s-upload-select-font-size);line-height:var(--s-line-height-none)}.s-upload:not(.is-disabled,.is-readonly) .s-upload__select:active{background:var(--s-upload-select-bg-active)}.s-upload:is(.is-disabled) .s-upload__select{color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-upload:is(.is-readonly) .s-upload__select{cursor:unset}.s-upload__preview{position:relative;display:flex;align-items:center;justify-content:center;width:var(--s-upload-preview-width);height:var(--s-upload-preview-height);overflow:hidden;border-radius:var(--s-upload-preview-border-radius);background:var(--s-upload-preview-bg)}.s-upload__preview--is-video{background:var(--s-upload-preview-video-bg)}.s-upload__image{width:100%;height:100
|
|
1
|
+
:root{--s-upload-preview-width:88px;--s-upload-preview-height:88px;--s-upload-preview-gap:var(--s-size-xs);--s-upload-preview-border-radius:var(--s-border-radius);--s-upload-preview-bg:var(--s-fill-color-secondary);--s-upload-preview-video-bg:var(--s-black);--s-upload-file-color:var(--s-text-color-primary);--s-upload-file-icon-font-size:var(--s-size-lg);--s-upload-file-name-margin-top:var(--s-size-2xs);--s-upload-file-name-padding-x:var(--s-size-2xs);--s-upload-file-name-font-size:var(--s-font-size-sm);--s-upload-status-color:var(--s-white);--s-upload-status-bg:var(--s-overlay-illegible);--s-upload-status-icon-font-size:var(--s-size-lg);--s-upload-status-message-margin-top:var(--s-size-2xs);--s-upload-status-message-padding-x:var(--s-size-2xs);--s-upload-status-message-font-size:var(--s-font-size-sm);--s-upload-close-top:2px;--s-upload-close-right:2px;--s-upload-close-size:var(--s-size-lg);--s-upload-close-font-size:var(--s-font-size-sm);--s-upload-close-color:var(--s-white);--s-upload-close-bg:var(--s-overlay-illegible);--s-upload-select-width:88px;--s-upload-select-height:88px;--s-upload-select-font-size:var(--s-size-xl);--s-upload-select-color:var(--s-text-color-secondary);--s-upload-select-border-radius:var(--s-border-radius);--s-upload-select-bg:var(--s-fill-color-secondary);--s-upload-select-bg-active:var(--s-bg-color-active-dark);--s-upload-video-play-bg:var(--s-overlay-legible);--s-upload-video-play-color:rgba(var(--s-white-rgb), 0.8);--s-upload-loading-size:var(--s-size-lg)}.s-upload__wrapper{display:flex;flex-wrap:wrap;gap:var(--s-upload-preview-gap)}.s-upload__select{display:flex;align-items:center;justify-content:center;width:var(--s-upload-select-width);height:var(--s-upload-select-height);color:var(--s-upload-select-color);border-radius:var(--s-upload-select-border-radius);background:var(--s-upload-select-bg);cursor:pointer}.s-upload__select-icon{font-size:var(--s-upload-select-font-size);line-height:var(--s-line-height-none)}.s-upload:not(.is-disabled,.is-readonly) .s-upload__select:active{background:var(--s-upload-select-bg-active)}.s-upload:is(.is-disabled) .s-upload__select{color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-upload:is(.is-readonly) .s-upload__select{cursor:unset}.s-upload__preview{position:relative;display:flex;align-items:center;justify-content:center;width:var(--s-upload-preview-width);height:var(--s-upload-preview-height);overflow:hidden;border-radius:var(--s-upload-preview-border-radius);background:var(--s-upload-preview-bg)}.s-upload__preview--is-video{background:var(--s-upload-preview-video-bg)}.s-upload__image{width:100%;height:100%;object-fit:cover}.s-upload__video-wrapper{width:100%;height:100%;border-radius:inherit}.s-upload__video{width:100%;height:100%;border-radius:inherit}.s-upload__video-play{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;font-size:40px;color:var(--s-upload-video-play-color);background:var(--s-upload-video-play-bg);cursor:pointer}.s-upload__video-play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:40px;height:40px}.s-upload__file{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--s-upload-file-color)}.s-upload__file-icon{font-size:var(--s-upload-file-icon-font-size)}.s-upload__file-name{max-width:100%;padding:0 var(--s-upload-file-name-padding-x);margin-top:var(--s-upload-file-name-margin-top);font-size:var(--s-upload-file-name-font-size)}.s-upload__status{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--s-upload-status-color);background:var(--s-upload-status-bg)}.s-upload__status-icon{font-size:var(--s-upload-status-icon-font-size)}.s-upload__status-message{max-width:100%;padding:0 var(--s-upload-status-message-padding-x);margin-top:var(--s-upload-status-message-margin-top);font-size:var(--s-upload-status-message-font-size);text-align:center}.s-upload__remove{position:absolute;top:0;inset-inline-end:0;z-index:2;padding-inline-end:var(--s-upload-close-right);padding-top:var(--s-upload-close-top)}.s-upload__close{display:flex;align-items:center;justify-content:center;width:var(--s-upload-close-size);height:var(--s-upload-close-size);border-radius:var(--s-border-radius-full);font-size:var(--s-upload-close-font-size);color:var(--s-upload-close-color);background:var(--s-upload-close-bg);cursor:pointer}
|