yuyeon 0.3.4-beta.21 → 0.3.4-beta.22
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/dist/yuyeon.js +239 -237
- package/dist/yuyeon.umd.cjs +2 -2
- package/lib/components/badge/YBadge.js +4 -2
- package/lib/components/badge/YBadge.js.map +1 -1
- package/lib/composables/style-color.js +5 -3
- package/lib/composables/style-color.js.map +1 -1
- package/package.json +1 -1
- package/types/components/badge/YBadge.d.ts +12 -3
- package/types/composables/style-color.d.ts +22 -0
|
@@ -2,7 +2,7 @@ import { vShow, withDirectives, createVNode as _createVNode } from 'vue';
|
|
|
2
2
|
import { useRender } from "../../composables/component.js";
|
|
3
3
|
import { useI18n } from "../../composables/i18n/index.js";
|
|
4
4
|
import { IconValue } from "../../composables/icon.js";
|
|
5
|
-
import {
|
|
5
|
+
import { pressColorPropsOptions, useStyleColor } from "../../composables/style-color.js";
|
|
6
6
|
import { PolyTransition } from "../../composables/transition.js";
|
|
7
7
|
import { defineComponent, propsFactory } from "../../util/component/index.js";
|
|
8
8
|
import { YIcon } from "../icon/YIcon.js";
|
|
@@ -28,7 +28,9 @@ export const pressYBadgePropsOptions = propsFactory({
|
|
|
28
28
|
type: String,
|
|
29
29
|
default: 'fade'
|
|
30
30
|
},
|
|
31
|
-
...
|
|
31
|
+
...pressColorPropsOptions({
|
|
32
|
+
backgroundOpacity: 1
|
|
33
|
+
})
|
|
32
34
|
}, 'YBadge');
|
|
33
35
|
export const YBadge = defineComponent({
|
|
34
36
|
name: 'YBadge',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YBadge.js","names":["vShow","withDirectives","createVNode","_createVNode","useRender","useI18n","IconValue","
|
|
1
|
+
{"version":3,"file":"YBadge.js","names":["vShow","withDirectives","createVNode","_createVNode","useRender","useI18n","IconValue","pressColorPropsOptions","useStyleColor","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","hide","label","content","Number","max","transition","backgroundOpacity","YBadge","name","props","slots","Object","setup","_ref","t","colorVars","ElTag","value","isNaN","undefined","badge"],"sources":["../../../src/components/badge/YBadge.tsx"],"sourcesContent":["import { type PropType, type SlotsType, vShow, withDirectives } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useI18n } from '@/composables/i18n';\nimport { IconValue } from '@/composables/icon';\nimport {\n pressColorPropsOptions,\n useStyleColor,\n} from '@/composables/style-color';\nimport { PolyTransition } from '@/composables/transition';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YIcon } from '../icon/YIcon';\n\nimport './YBadge.scss';\n\nexport const pressYBadgePropsOptions = propsFactory(\n {\n tag: {\n type: String as PropType<string>,\n default: 'div',\n },\n dot: Boolean,\n bordered: Boolean,\n floating: Boolean,\n inline: Boolean,\n icon: IconValue,\n hide: Boolean,\n label: {\n type: String,\n default: '$yuyeon.badge',\n },\n content: [Number, String],\n max: Number,\n transition: {\n type: String,\n default: 'fade',\n },\n ...pressColorPropsOptions({\n backgroundOpacity: 1\n }),\n },\n 'YBadge',\n);\n\nexport const YBadge = defineComponent({\n name: 'YBadge',\n props: pressYBadgePropsOptions(),\n slots: Object as SlotsType<{\n default: any;\n badge: any;\n }>,\n setup(props, { slots }) {\n const { t } = useI18n();\n\n const { colorVars } = useStyleColor(props, 'badge');\n\n useRender(() => {\n const ElTag = props.tag as keyof HTMLElementTagNameMap;\n const value = Number(props.content);\n const content =\n !props.max || isNaN(value)\n ? props.content\n : value <= +props.max\n ? value\n : `${props.max}+`;\n return (\n <ElTag\n class={[\n 'y-badge',\n {\n 'y-badge--bordered': props.bordered,\n 'y-badge--dot': props.dot,\n 'y-badge--floating': props.floating,\n 'y-badge--inline': props.inline,\n },\n ]}\n style={colorVars.value}\n >\n <div class=\"y-badge__base\">\n {slots.default?.()}\n <PolyTransition\n is={props.transition}\n transitionProps={{ name: props.transition }}\n >\n {withDirectives(\n // biome-ignore lint/a11y/useSemanticElements: aria-live\n <span\n class={['y-badge__badge']}\n aria-atomic=\"true\"\n aria-label={t(props.label, value)}\n aria-live=\"polite\"\n role=\"status\"\n >\n {props.dot ? undefined : slots.badge ? (\n slots.badge?.()\n ) : props.icon ? (\n <YIcon icon={props.icon} />\n ) : (\n content\n )}\n </span>,\n [[vShow, !props.hide]],\n )}\n </PolyTransition>\n </div>\n </ElTag>\n );\n });\n },\n});\n\nexport type YBadge = InstanceType<typeof YBadge>;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { computed } from
|
|
2
|
-
import { colorRgb, isColorValue } from "../util/index.js";
|
|
1
|
+
import { computed } from "vue";
|
|
2
|
+
import { colorRgb, isColorValue } from "../util/color/index.js";
|
|
3
|
+
import { propsFactory } from "../util/component/props.js";
|
|
3
4
|
export const styleColorPropsOptions = {
|
|
4
5
|
color: String,
|
|
5
6
|
background: String,
|
|
@@ -7,6 +8,7 @@ export const styleColorPropsOptions = {
|
|
|
7
8
|
type: Number
|
|
8
9
|
}
|
|
9
10
|
};
|
|
11
|
+
export const pressColorPropsOptions = propsFactory(styleColorPropsOptions, 'style-color');
|
|
10
12
|
export function useStyleColor(props, name) {
|
|
11
13
|
const colorVars = computed(() => {
|
|
12
14
|
let {
|
|
@@ -20,7 +22,7 @@ export function useStyleColor(props, name) {
|
|
|
20
22
|
if (background) {
|
|
21
23
|
if (isColorValue(background)) {
|
|
22
24
|
background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;
|
|
23
|
-
} else if (!background.startsWith(
|
|
25
|
+
} else if (!background.startsWith("var(")) {
|
|
24
26
|
background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;
|
|
25
27
|
}
|
|
26
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style-color.js","names":["computed","colorRgb","isColorValue","styleColorPropsOptions","color","String","background","backgroundOpacity","type","Number","useStyleColor","props","name","colorVars","startsWith"],"sources":["../../src/composables/style-color.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"style-color.js","names":["computed","colorRgb","isColorValue","propsFactory","styleColorPropsOptions","color","String","background","backgroundOpacity","type","Number","pressColorPropsOptions","useStyleColor","props","name","colorVars","startsWith"],"sources":["../../src/composables/style-color.ts"],"sourcesContent":["import { computed, type ExtractPropTypes } from \"vue\";\n\nimport { colorRgb, isColorValue } from \"@/util/color\";\nimport { propsFactory } from \"@/util/component/props\";\n\nexport const styleColorPropsOptions = {\n\tcolor: String,\n\tbackground: String,\n\tbackgroundOpacity: {\n\t\ttype: Number,\n\t},\n};\n\nexport const pressColorPropsOptions = propsFactory(styleColorPropsOptions, 'style-color');\n\nexport function useStyleColor(\n\tprops: ExtractPropTypes<typeof styleColorPropsOptions>,\n\tname: string,\n) {\n\tconst colorVars = computed(() => {\n\t\tlet { color, background } = props;\n\t\tif (!background) background = color;\n\n\t\tif (color && !isColorValue(color)) {\n\t\t\tcolor = `var(--y-theme-${color})`;\n\t\t}\n\n\t\tif (background) {\n\t\t\tif (isColorValue(background)) {\n\t\t\t\tbackground = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;\n\t\t\t} else if (!background.startsWith(\"var(\")) {\n\t\t\t\tbackground = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\t[`--y-${name}__color`]: color,\n\t\t\t[`--y-${name}__background`]: background,\n\t\t};\n\t});\n\n\treturn {\n\t\tcolorVars,\n\t};\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAA+B,KAAK;AAAC,SAE7CC,QAAQ,EAAEC,YAAY;AAAA,SACtBC,YAAY;AAErB,OAAO,MAAMC,sBAAsB,GAAG;EACrCC,KAAK,EAAEC,MAAM;EACbC,UAAU,EAAED,MAAM;EAClBE,iBAAiB,EAAE;IAClBC,IAAI,EAAEC;EACP;AACD,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGR,YAAY,CAACC,sBAAsB,EAAE,aAAa,CAAC;AAEzF,OAAO,SAASQ,aAAaA,CAC5BC,KAAsD,EACtDC,IAAY,EACX;EACD,MAAMC,SAAS,GAAGf,QAAQ,CAAC,MAAM;IAChC,IAAI;MAAEK,KAAK;MAAEE;IAAW,CAAC,GAAGM,KAAK;IACjC,IAAI,CAACN,UAAU,EAAEA,UAAU,GAAGF,KAAK;IAEnC,IAAIA,KAAK,IAAI,CAACH,YAAY,CAACG,KAAK,CAAC,EAAE;MAClCA,KAAK,GAAG,iBAAiBA,KAAK,GAAG;IAClC;IAEA,IAAIE,UAAU,EAAE;MACf,IAAIL,YAAY,CAACK,UAAU,CAAC,EAAE;QAC7BA,UAAU,GAAG,QAAQN,QAAQ,CAACM,UAAU,CAAC,KAAKM,KAAK,CAACL,iBAAiB,GAAG;MACzE,CAAC,MAAM,IAAI,CAACD,UAAU,CAACS,UAAU,CAAC,MAAM,CAAC,EAAE;QAC1CT,UAAU,GAAG,QAAQ,iBAAiBA,UAAU,OAAO,KAAKM,KAAK,CAACL,iBAAiB,GAAG;MACvF;IACD;IAEA,OAAO;MACN,CAAC,OAAOM,IAAI,SAAS,GAAGT,KAAK;MAC7B,CAAC,OAAOS,IAAI,cAAc,GAAGP;IAC9B,CAAC;EACF,CAAC,CAAC;EAEF,OAAO;IACNQ;EACD,CAAC;AACF","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -25,10 +25,16 @@ export declare const pressYBadgePropsOptions: <Defaults extends {
|
|
|
25
25
|
type: PropType<unknown extends Defaults["background"] ? string : string | Defaults["background"]>;
|
|
26
26
|
default: unknown extends Defaults["background"] ? string : string | Defaults["background"];
|
|
27
27
|
};
|
|
28
|
-
backgroundOpacity: unknown extends Defaults["backgroundOpacity"] ? {
|
|
28
|
+
backgroundOpacity: unknown extends Defaults["backgroundOpacity"] ? Omit<{
|
|
29
29
|
type: NumberConstructor;
|
|
30
|
-
}
|
|
30
|
+
}, "type" | "default"> & {
|
|
31
|
+
type: PropType<number>;
|
|
32
|
+
default: number;
|
|
33
|
+
} : Omit<Omit<{
|
|
31
34
|
type: NumberConstructor;
|
|
35
|
+
}, "type" | "default"> & {
|
|
36
|
+
type: PropType<number>;
|
|
37
|
+
default: number;
|
|
32
38
|
}, "type" | "default"> & {
|
|
33
39
|
type: PropType<unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"]>;
|
|
34
40
|
default: unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"];
|
|
@@ -99,8 +105,11 @@ export declare const pressYBadgePropsOptions: <Defaults extends {
|
|
|
99
105
|
export declare const YBadge: import('vue').DefineComponent<{
|
|
100
106
|
color: StringConstructor;
|
|
101
107
|
background: StringConstructor;
|
|
102
|
-
backgroundOpacity: {
|
|
108
|
+
backgroundOpacity: Omit<{
|
|
103
109
|
type: NumberConstructor;
|
|
110
|
+
}, "type" | "default"> & {
|
|
111
|
+
type: PropType<number>;
|
|
112
|
+
default: number;
|
|
104
113
|
};
|
|
105
114
|
tag: {
|
|
106
115
|
type: PropType<string>;
|
|
@@ -7,6 +7,28 @@ export declare const styleColorPropsOptions: {
|
|
|
7
7
|
type: NumberConstructor;
|
|
8
8
|
};
|
|
9
9
|
};
|
|
10
|
+
export declare const pressColorPropsOptions: <Defaults extends {
|
|
11
|
+
color?: unknown;
|
|
12
|
+
background?: unknown;
|
|
13
|
+
backgroundOpacity?: unknown;
|
|
14
|
+
} = {}>(defaults?: Defaults | undefined) => {
|
|
15
|
+
color: unknown extends Defaults["color"] ? StringConstructor : {
|
|
16
|
+
type: import('vue').PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
|
17
|
+
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
|
18
|
+
};
|
|
19
|
+
background: unknown extends Defaults["background"] ? StringConstructor : {
|
|
20
|
+
type: import('vue').PropType<unknown extends Defaults["background"] ? string : string | Defaults["background"]>;
|
|
21
|
+
default: unknown extends Defaults["background"] ? string : string | Defaults["background"];
|
|
22
|
+
};
|
|
23
|
+
backgroundOpacity: unknown extends Defaults["backgroundOpacity"] ? {
|
|
24
|
+
type: NumberConstructor;
|
|
25
|
+
} : Omit<{
|
|
26
|
+
type: NumberConstructor;
|
|
27
|
+
}, "type" | "default"> & {
|
|
28
|
+
type: import('vue').PropType<unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"]>;
|
|
29
|
+
default: unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"];
|
|
30
|
+
};
|
|
31
|
+
};
|
|
10
32
|
export declare function useStyleColor(props: ExtractPropTypes<typeof styleColorPropsOptions>, name: string): {
|
|
11
33
|
colorVars: import('vue').ComputedRef<{
|
|
12
34
|
[x: string]: string | undefined;
|