yuyeon 0.3.0-rc.8 → 0.3.1-rc.0
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/style.css +1 -1
- package/dist/yuyeon.js +2579 -2570
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/badge/YBadge.mjs +8 -3
- package/lib/components/badge/YBadge.mjs.map +1 -1
- package/lib/components/badge/YBadge.scss +8 -3
- package/lib/components/button/YButton.mjs +4 -4
- package/lib/components/button/YButton.mjs.map +1 -1
- package/lib/components/chip/YChip.mjs +6 -44
- package/lib/components/chip/YChip.mjs.map +1 -1
- package/lib/composables/style-color.mjs +37 -0
- package/lib/composables/style-color.mjs.map +1 -0
- package/lib/util/color/index.mjs +16 -0
- package/lib/util/color/index.mjs.map +1 -1
- package/package.json +1 -1
- package/types/components/badge/YBadge.d.ts +27 -6
- package/types/components/chip/YChip.d.ts +6 -6
- package/types/components/date-picker/YDatePicker.d.ts +11 -11
- package/types/components/date-picker/YDatePickerControl.d.ts +5 -5
- package/types/components/dialog/YDialog.d.ts +15 -15
- package/types/composables/style-color.d.ts +15 -0
- package/types/util/color/index.d.ts +1 -0
|
@@ -3,6 +3,7 @@ import { vShow, withDirectives } from 'vue';
|
|
|
3
3
|
import { useRender } from "../../composables/component.mjs";
|
|
4
4
|
import { useI18n } from "../../composables/i18n/index.mjs";
|
|
5
5
|
import { IconValue } from "../../composables/icon.mjs";
|
|
6
|
+
import { styleColorPropsOptions, useStyleColor } from "../../composables/style-color.mjs";
|
|
6
7
|
import { PolyTransition } from "../../composables/transition.mjs";
|
|
7
8
|
import { defineComponent, propsFactory } from "../../util/component/index.mjs";
|
|
8
9
|
import { YIcon } from "../icon/YIcon.mjs";
|
|
@@ -17,7 +18,6 @@ export const pressYBadgePropsOptions = propsFactory({
|
|
|
17
18
|
floating: Boolean,
|
|
18
19
|
inline: Boolean,
|
|
19
20
|
icon: IconValue,
|
|
20
|
-
color: String,
|
|
21
21
|
hide: Boolean,
|
|
22
22
|
label: {
|
|
23
23
|
type: String,
|
|
@@ -28,7 +28,8 @@ export const pressYBadgePropsOptions = propsFactory({
|
|
|
28
28
|
transition: {
|
|
29
29
|
type: String,
|
|
30
30
|
default: 'fade'
|
|
31
|
-
}
|
|
31
|
+
},
|
|
32
|
+
...styleColorPropsOptions
|
|
32
33
|
}, 'YBadge');
|
|
33
34
|
export const YBadge = defineComponent({
|
|
34
35
|
name: 'YBadge',
|
|
@@ -41,6 +42,9 @@ export const YBadge = defineComponent({
|
|
|
41
42
|
const {
|
|
42
43
|
t
|
|
43
44
|
} = useI18n();
|
|
45
|
+
const {
|
|
46
|
+
colorVars
|
|
47
|
+
} = useStyleColor(props, 'badge');
|
|
44
48
|
useRender(() => {
|
|
45
49
|
const ElTag = props.tag;
|
|
46
50
|
const value = Number(props.content);
|
|
@@ -51,7 +55,8 @@ export const YBadge = defineComponent({
|
|
|
51
55
|
'y-badge--dot': props.dot,
|
|
52
56
|
'y-badge--floating': props.floating,
|
|
53
57
|
'y-badge--inline': props.inline
|
|
54
|
-
}]
|
|
58
|
+
}],
|
|
59
|
+
"style": colorVars.value
|
|
55
60
|
}, {
|
|
56
61
|
default: () => [_createVNode("div", {
|
|
57
62
|
"class": "y-badge__base"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YBadge.mjs","names":["vShow","withDirectives","useRender","useI18n","IconValue","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","
|
|
1
|
+
{"version":3,"file":"YBadge.mjs","names":["vShow","withDirectives","useRender","useI18n","IconValue","styleColorPropsOptions","useStyleColor","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","hide","label","content","Number","max","transition","YBadge","name","props","slots","Object","setup","_ref","t","colorVars","ElTag","value","isNaN","_createVNode","undefined","badge"],"sources":["../../../src/components/badge/YBadge.tsx"],"sourcesContent":["import {\n type PropType,\n type SlotsType,\n computed,\n vShow,\n withDirectives,\n} from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useI18n } from '@/composables/i18n';\nimport { IconValue } from '@/composables/icon';\nimport {\n styleColorPropsOptions,\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 ...styleColorPropsOptions,\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 <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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"}
|
|
@@ -7,8 +7,12 @@
|
|
|
7
7
|
--y-badge__border-width: 2px;
|
|
8
8
|
--y-badge__border-transform: scale(1.0413);
|
|
9
9
|
--y-badge__inline-margin: 0 4px;
|
|
10
|
-
--y-
|
|
11
|
-
--y-
|
|
10
|
+
--y-badge__background-opacity: 1;
|
|
11
|
+
--y-badge__background: rgba(
|
|
12
|
+
var(--y-theme-surface-variant-rgb),
|
|
13
|
+
var(--y-badge__background-opacity, 1)
|
|
14
|
+
);
|
|
15
|
+
--y-badge__color: var(--y-theme-on-surface-variant);
|
|
12
16
|
|
|
13
17
|
display: inline-block;
|
|
14
18
|
|
|
@@ -29,7 +33,8 @@
|
|
|
29
33
|
text-indent: 0;
|
|
30
34
|
white-space: nowrap;
|
|
31
35
|
padding: var(--y-badge__padding);
|
|
32
|
-
|
|
36
|
+
color: var(--y-badge__color);
|
|
37
|
+
background: var(--y-badge__background);
|
|
33
38
|
bottom: calc(100% - var(--y-badge__height) / 2);
|
|
34
39
|
left: calc(100% - var(--y-badge__min-width));
|
|
35
40
|
}
|
|
@@ -9,8 +9,8 @@ import { isColorValue } from "../../util/color/index.mjs";
|
|
|
9
9
|
import { defineComponent, propsFactory } from "../../util/component/index.mjs";
|
|
10
10
|
import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
|
|
11
11
|
import { Y_TOGGLE_BUTTON_KEY } from "../toggle-button/index.mjs";
|
|
12
|
-
/**
|
|
13
|
-
* Style
|
|
12
|
+
/**
|
|
13
|
+
* Style
|
|
14
14
|
*/
|
|
15
15
|
import "./YButton.scss";
|
|
16
16
|
const NAME = 'y-button';
|
|
@@ -155,10 +155,10 @@ export const YButton = defineComponent({
|
|
|
155
155
|
}, {
|
|
156
156
|
default: () => [_createVNode("span", {
|
|
157
157
|
"class": ['y-button__content']
|
|
158
|
-
}, [props.loading && _createVNode(YSpinnerRing, mergeProps({
|
|
158
|
+
}, [props.loading && (slots.loading ? slots.loading?.() : _createVNode(YSpinnerRing, mergeProps({
|
|
159
159
|
width: '24',
|
|
160
160
|
height: '24'
|
|
161
|
-
}), null), slots.default?.()]), slots.append?.()]
|
|
161
|
+
}), null)), slots.default?.()]), slots.append?.()]
|
|
162
162
|
}), [[_resolveDirective("plate-wave"), !props.noWave && !props.loading]]);
|
|
163
163
|
});
|
|
164
164
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YButton.mjs","names":["computed","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","defineComponent","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","click","event","choice","setup","_ref","attrs","slots","emit","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","metaKey","altKey","ctrlKey","shiftKey","button","target","navigate","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport { computed, mergeProps } from 'vue';\r\n\r\nimport {\r\n pressChoiceItemPropsOptions,\r\n useChoiceItem,\r\n} from '@/composables/choice';\r\nimport { useChoiceByLink } from '@/composables/choice-link';\r\nimport { useRender } from '@/composables/component';\r\nimport { pressVueRouterPropsOptions, useLink } from '@/composables/vue-router';\r\nimport { PlateWave } from '@/directives/plate-wave';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\r\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\r\n\r\n/**\r\n * Style\r\n */\r\nimport './YButton.scss';\r\n\r\nconst NAME = 'y-button';\r\n\r\nexport const pressYButtonProps = propsFactory(\r\n {\r\n loading: Boolean,\r\n active: { type: Boolean, default: undefined },\r\n injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\r\n //\r\n variation: {\r\n type: String as PropType<string>,\r\n },\r\n small: Boolean,\r\n icon: Boolean,\r\n outlined: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n rounded: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n filled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n //\r\n color: {\r\n type: String,\r\n },\r\n noWave: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n ...pressVueRouterPropsOptions(),\r\n ...pressChoiceItemPropsOptions(),\r\n },\r\n 'YButton',\r\n);\r\n\r\nexport const YButton = defineComponent({\r\n name: 'YButton',\r\n directives: {\r\n PlateWave,\r\n },\r\n props: pressYButtonProps(),\r\n emits: {\r\n click: (event: MouseEvent) => true,\r\n 'choice:selected': (choice: { value: boolean }) => true,\r\n },\r\n setup(props, { attrs, slots, emit }) {\r\n const choice = useChoiceItem(props, props.injectSymbol, false);\r\n const link = useLink(props, attrs);\r\n useChoiceByLink(link, choice?.select);\r\n\r\n const isActive = computed(() => {\r\n if (props.active !== undefined) {\r\n return props.active;\r\n }\r\n if (link.isLink.value) {\r\n return link.isActive?.value;\r\n }\r\n return choice?.isSelected.value;\r\n });\r\n\r\n const variations = computed(() => {\r\n const { variation } = props;\r\n if (typeof variation === 'string') {\r\n return variation.split(',').map((value) => {\r\n return value.trim();\r\n });\r\n }\r\n return [];\r\n });\r\n\r\n const classes = computed(() => {\r\n const { outlined, rounded, filled, small, icon } = props;\r\n return {\r\n [`${NAME}--outlined`]:\r\n variations.value.includes('outlined') || outlined,\r\n [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\r\n [`${NAME}--filled`]: variations.value.includes('filled') || filled,\r\n [`${NAME}--text`]: variations.value.includes('text'),\r\n [`${NAME}--small`]: variations.value.includes('small') || small,\r\n [`${NAME}--x-small`]: variations.value.includes('x-small') || small,\r\n [`${NAME}--icon`]: variations.value.includes('icon') || icon,\r\n [`${NAME}--color`]: props.color,\r\n [`${NAME}--loading`]: props.loading,\r\n [`${NAME}--disabled`]: props.disabled,\r\n [`${NAME}--active`]: isActive.value,\r\n };\r\n });\r\n\r\n const styles = computed(() => {\r\n let { color } = props;\r\n let textColor: string | undefined;\r\n if (color && !isColorValue(color)) {\r\n color = `var(--y-theme-${color})`;\r\n textColor = `var(--y-theme-on-${props.color})`;\r\n }\r\n return {\r\n [`--y-button__color`]: color,\r\n [`--y-button__text-color`]: textColor,\r\n };\r\n });\r\n\r\n const isDisabled = computed(() => {\r\n return choice?.disabled.value || props.disabled;\r\n });\r\n\r\n /// Events\r\n function onClick(e: MouseEvent) {\r\n if (\r\n isDisabled.value ||\r\n props.loading ||\r\n (link.isLink.value &&\r\n (e.metaKey ||\r\n e.altKey ||\r\n e.ctrlKey ||\r\n e.shiftKey ||\r\n e.button !== 0 ||\r\n attrs.target === '_blank'))\r\n ) {\r\n return;\r\n }\r\n emit('click', e);\r\n link.navigate?.(e);\r\n choice?.toggle();\r\n }\r\n\r\n useRender(() => {\r\n const Tag = link.isLink.value ? 'a' : 'button';\r\n return (\r\n <Tag\r\n type={Tag === 'a' ? undefined : 'button'}\r\n class={[\r\n `${NAME}`,\r\n choice?.selectedClass.value,\r\n {\r\n ...classes.value,\r\n },\r\n ]}\r\n href={props.disabled ? undefined : link.href.value}\r\n style={styles.value}\r\n onClick={onClick}\r\n disabled={props.disabled ? true : undefined}\r\n v-plate-wave={!props.noWave && !props.loading}\r\n >\r\n <span class={['y-button__content']}>\r\n {props.loading && (\r\n <YSpinnerRing\r\n {...mergeProps({ width: '24', height: '24' })}\r\n ></YSpinnerRing>\r\n )}\r\n {slots.default?.()}\r\n </span>\r\n {slots.append?.()}\r\n </Tag>\r\n );\r\n });\r\n\r\n return {\r\n link,\r\n };\r\n },\r\n});\r\n\r\nexport type YButton = InstanceType<typeof YButton>;\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YButton.mjs","names":["computed","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","defineComponent","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","click","event","choice","setup","_ref","attrs","slots","emit","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","metaKey","altKey","ctrlKey","shiftKey","button","target","navigate","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, mergeProps } from 'vue';\n\nimport {\n pressChoiceItemPropsOptions,\n useChoiceItem,\n} from '@/composables/choice';\nimport { useChoiceByLink } from '@/composables/choice-link';\nimport { useRender } from '@/composables/component';\nimport { pressVueRouterPropsOptions, useLink } from '@/composables/vue-router';\nimport { PlateWave } from '@/directives/plate-wave';\nimport { isColorValue } from '@/util/color';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n {\n loading: Boolean,\n active: { type: Boolean, default: undefined },\n injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\n //\n variation: {\n type: String as PropType<string>,\n },\n small: Boolean,\n icon: Boolean,\n outlined: {\n type: Boolean,\n default: false,\n },\n rounded: {\n type: Boolean,\n default: false,\n },\n filled: {\n type: Boolean,\n default: false,\n },\n //\n color: {\n type: String,\n },\n noWave: {\n type: Boolean,\n default: false,\n },\n ...pressVueRouterPropsOptions(),\n ...pressChoiceItemPropsOptions(),\n },\n 'YButton',\n);\n\nexport const YButton = defineComponent({\n name: 'YButton',\n directives: {\n PlateWave,\n },\n props: pressYButtonProps(),\n emits: {\n click: (event: MouseEvent) => true,\n 'choice:selected': (choice: { value: boolean }) => true,\n },\n setup(props, { attrs, slots, emit }) {\n const choice = useChoiceItem(props, props.injectSymbol, false);\n const link = useLink(props, attrs);\n useChoiceByLink(link, choice?.select);\n\n const isActive = computed(() => {\n if (props.active !== undefined) {\n return props.active;\n }\n if (link.isLink.value) {\n return link.isActive?.value;\n }\n return choice?.isSelected.value;\n });\n\n const variations = computed(() => {\n const { variation } = props;\n if (typeof variation === 'string') {\n return variation.split(',').map((value) => {\n return value.trim();\n });\n }\n return [];\n });\n\n const classes = computed(() => {\n const { outlined, rounded, filled, small, icon } = props;\n return {\n [`${NAME}--outlined`]:\n variations.value.includes('outlined') || outlined,\n [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\n [`${NAME}--filled`]: variations.value.includes('filled') || filled,\n [`${NAME}--text`]: variations.value.includes('text'),\n [`${NAME}--small`]: variations.value.includes('small') || small,\n [`${NAME}--x-small`]: variations.value.includes('x-small') || small,\n [`${NAME}--icon`]: variations.value.includes('icon') || icon,\n [`${NAME}--color`]: props.color,\n [`${NAME}--loading`]: props.loading,\n [`${NAME}--disabled`]: props.disabled,\n [`${NAME}--active`]: isActive.value,\n };\n });\n\n const styles = computed(() => {\n let { color } = props;\n let textColor: string | undefined;\n if (color && !isColorValue(color)) {\n color = `var(--y-theme-${color})`;\n textColor = `var(--y-theme-on-${props.color})`;\n }\n return {\n [`--y-button__color`]: color,\n [`--y-button__text-color`]: textColor,\n };\n });\n\n const isDisabled = computed(() => {\n return choice?.disabled.value || props.disabled;\n });\n\n /// Events\n function onClick(e: MouseEvent) {\n if (\n isDisabled.value ||\n props.loading ||\n (link.isLink.value &&\n (e.metaKey ||\n e.altKey ||\n e.ctrlKey ||\n e.shiftKey ||\n e.button !== 0 ||\n attrs.target === '_blank'))\n ) {\n return;\n }\n emit('click', e);\n link.navigate?.(e);\n choice?.toggle();\n }\n\n useRender(() => {\n const Tag = link.isLink.value ? 'a' : 'button';\n return (\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class={[\n `${NAME}`,\n choice?.selectedClass.value,\n {\n ...classes.value,\n },\n ]}\n href={props.disabled ? undefined : link.href.value}\n style={styles.value}\n onClick={onClick}\n disabled={props.disabled ? true : undefined}\n v-plate-wave={!props.noWave && !props.loading}\n >\n <span class={['y-button__content']}>\n {props.loading &&\n (slots.loading ? (\n slots.loading?.()\n ) : (\n <YSpinnerRing\n {...mergeProps({ width: '24', height: '24' })}\n ></YSpinnerRing>\n ))}\n {slots.default?.()}\n </span>\n {slots.append?.()}\n </Tag>\n );\n });\n\n return {\n link,\n };\n },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
import { createVNode as _createVNode } from "vue";
|
|
2
2
|
import { computed } from 'vue';
|
|
3
3
|
import { useRender } from "../../composables/index.mjs";
|
|
4
|
-
import {
|
|
4
|
+
import { styleColorPropsOptions, useStyleColor } from "../../composables/style-color.mjs";
|
|
5
5
|
import { defineComponent, hasEventProp, propsFactory } from "../../util/component/index.mjs";
|
|
6
6
|
import "./YChip.scss";
|
|
7
7
|
export const pressYChipPropsOptions = propsFactory({
|
|
8
|
-
|
|
9
|
-
background: String,
|
|
10
|
-
backgroundOpacity: {
|
|
11
|
-
type: Number,
|
|
12
|
-
default: 0.14
|
|
13
|
-
},
|
|
8
|
+
...styleColorPropsOptions,
|
|
14
9
|
small: Boolean
|
|
15
10
|
}, 'YChip');
|
|
16
11
|
export const YChip = defineComponent({
|
|
@@ -26,48 +21,15 @@ export const YChip = defineComponent({
|
|
|
26
21
|
const clickable = computed(() => {
|
|
27
22
|
return hasEventProp(props, 'click');
|
|
28
23
|
});
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
background
|
|
33
|
-
} = props;
|
|
34
|
-
if (!background) background = color;
|
|
35
|
-
if (color && !isColorValue(color)) {
|
|
36
|
-
color = `var(--y-theme-${color})`;
|
|
37
|
-
}
|
|
38
|
-
if (background) {
|
|
39
|
-
if (isColorValue(background)) {
|
|
40
|
-
background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;
|
|
41
|
-
} else if (!background.startsWith('var(')) {
|
|
42
|
-
background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
return {
|
|
46
|
-
'--y-chip__color': color,
|
|
47
|
-
'--y-chip__background': background
|
|
48
|
-
};
|
|
49
|
-
});
|
|
50
|
-
function colorRgb(color) {
|
|
51
|
-
if (color?.startsWith('#')) {
|
|
52
|
-
return rgbFromHex(color)?.join(',') || '';
|
|
53
|
-
}
|
|
54
|
-
const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
|
|
55
|
-
if (RGBA_REGEX.test(color)) {
|
|
56
|
-
const value = RGBA_REGEX.exec(color)?.[2] || '';
|
|
57
|
-
if (value) {
|
|
58
|
-
const valueArray = value.trim().split(',');
|
|
59
|
-
valueArray.splice(3, 1);
|
|
60
|
-
return valueArray.join(',');
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
return '';
|
|
64
|
-
}
|
|
24
|
+
const {
|
|
25
|
+
colorVars
|
|
26
|
+
} = useStyleColor(props, 'chip');
|
|
65
27
|
useRender(() => _createVNode("span", {
|
|
66
28
|
"class": ['y-chip', {
|
|
67
29
|
'y-chip--small': props.small,
|
|
68
30
|
'y-chip--clickable': clickable.value
|
|
69
31
|
}],
|
|
70
|
-
"style":
|
|
32
|
+
"style": colorVars.value
|
|
71
33
|
}, [_createVNode("span", {
|
|
72
34
|
"class": "y-chip__content"
|
|
73
35
|
}, [slots.default?.()])]));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YChip.mjs","names":["computed","useRender","
|
|
1
|
+
{"version":3,"file":"YChip.mjs","names":["computed","useRender","styleColorPropsOptions","useStyleColor","defineComponent","hasEventProp","propsFactory","pressYChipPropsOptions","small","Boolean","YChip","name","props","setup","_ref","slots","emit","clickable","colorVars","_createVNode","value","default"],"sources":["../../../src/components/chip/YChip.tsx"],"sourcesContent":["import { computed } from 'vue';\n\nimport { useRender } from '@/composables';\nimport {\n styleColorPropsOptions,\n useStyleColor,\n} from '@/composables/style-color';\nimport { defineComponent, hasEventProp, propsFactory } from '@/util/component';\n\nimport './YChip.scss';\n\nexport const pressYChipPropsOptions = propsFactory(\n {\n ...styleColorPropsOptions,\n small: Boolean,\n },\n 'YChip',\n);\n\nexport const YChip = defineComponent({\n name: 'YChip',\n props: {\n ...pressYChipPropsOptions(),\n },\n setup(props, { slots, emit }) {\n const clickable = computed(() => {\n return hasEventProp(props, 'click');\n });\n const { colorVars } = useStyleColor(props, 'chip');\n\n useRender(() => (\n <span\n class={[\n 'y-chip',\n {\n 'y-chip--small': props.small,\n 'y-chip--clickable': clickable.value,\n },\n ]}\n style={colorVars.value}\n >\n <span class=\"y-chip__content\">{slots.default?.()}</span>\n </span>\n ));\n\n return {};\n },\n});\n\nexport type YChip = InstanceType<typeof YChip>;\n"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,KAAK;AAAC,SAEtBC,SAAS;AAAA,SAEhBC,sBAAsB,EACtBC,aAAa;AAAA,SAENC,eAAe,EAAEC,YAAY,EAAEC,YAAY;AAEpD;AAEA,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACE,GAAGJ,sBAAsB;EACzBM,KAAK,EAAEC;AACT,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGN,eAAe,CAAC;EACnCO,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACL,GAAGL,sBAAsB,CAAC;EAC5B,CAAC;EACDM,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAMG,SAAS,GAAGjB,QAAQ,CAAC,MAAM;MAC/B,OAAOK,YAAY,CAACO,KAAK,EAAE,OAAO,CAAC;IACrC,CAAC,CAAC;IACF,MAAM;MAAEM;IAAU,CAAC,GAAGf,aAAa,CAACS,KAAK,EAAE,MAAM,CAAC;IAElDX,SAAS,CAAC,MAAAkB,YAAA;MAAA,SAEC,CACL,QAAQ,EACR;QACE,eAAe,EAAEP,KAAK,CAACJ,KAAK;QAC5B,mBAAmB,EAAES,SAAS,CAACG;MACjC,CAAC,CACF;MAAA,SACMF,SAAS,CAACE;IAAK,IAAAD,YAAA;MAAA;IAAA,IAESJ,KAAK,CAACM,OAAO,GAAG,CAAC,IAEnD,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { computed } from 'vue';
|
|
2
|
+
import { colorRgb, isColorValue } from "../util/index.mjs";
|
|
3
|
+
export const styleColorPropsOptions = {
|
|
4
|
+
color: String,
|
|
5
|
+
background: String,
|
|
6
|
+
backgroundOpacity: {
|
|
7
|
+
type: Number,
|
|
8
|
+
default: 1
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
export function useStyleColor(props, name) {
|
|
12
|
+
const colorVars = computed(() => {
|
|
13
|
+
let {
|
|
14
|
+
color,
|
|
15
|
+
background
|
|
16
|
+
} = props;
|
|
17
|
+
if (!background) background = color;
|
|
18
|
+
if (color && !isColorValue(color)) {
|
|
19
|
+
color = `var(--y-theme-${color})`;
|
|
20
|
+
}
|
|
21
|
+
if (background) {
|
|
22
|
+
if (isColorValue(background)) {
|
|
23
|
+
background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;
|
|
24
|
+
} else if (!background.startsWith('var(')) {
|
|
25
|
+
background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
[`--y-${name}__color`]: color,
|
|
30
|
+
[`--y-${name}__background`]: background
|
|
31
|
+
};
|
|
32
|
+
});
|
|
33
|
+
return {
|
|
34
|
+
colorVars
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=style-color.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-color.mjs","names":["computed","colorRgb","isColorValue","styleColorPropsOptions","color","String","background","backgroundOpacity","type","Number","default","useStyleColor","props","name","colorVars","startsWith"],"sources":["../../src/composables/style-color.ts"],"sourcesContent":["import { ExtractPropTypes, computed } from 'vue';\n\nimport { colorRgb, isColorValue } from '@/util';\n\nexport const styleColorPropsOptions = {\n color: String,\n background: String,\n backgroundOpacity: {\n type: Number,\n default: 1,\n },\n};\n\nexport function useStyleColor(\n props: ExtractPropTypes<typeof styleColorPropsOptions>,\n name: string,\n) {\n const colorVars = computed(() => {\n let { color, background } = props;\n if (!background) background = color;\n\n if (color && !isColorValue(color)) {\n color = `var(--y-theme-${color})`;\n }\n\n if (background) {\n if (isColorValue(background)) {\n background = `rgba(${colorRgb(background)}, ${props.backgroundOpacity})`;\n } else if (!background.startsWith('var(')) {\n background = `rgba(${`var(--y-theme-${background}-rgb)`}, ${props.backgroundOpacity})`;\n }\n }\n\n return {\n [`--y-${name}__color`]: color,\n [`--y-${name}__background`]: background,\n };\n });\n\n return {\n colorVars,\n };\n}\n"],"mappings":"AAAA,SAA2BA,QAAQ,QAAQ,KAAK;AAAC,SAExCC,QAAQ,EAAEC,YAAY;AAE/B,OAAO,MAAMC,sBAAsB,GAAG;EACpCC,KAAK,EAAEC,MAAM;EACbC,UAAU,EAAED,MAAM;EAClBE,iBAAiB,EAAE;IACjBC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,SAASC,aAAaA,CAC3BC,KAAsD,EACtDC,IAAY,EACZ;EACA,MAAMC,SAAS,GAAGd,QAAQ,CAAC,MAAM;IAC/B,IAAI;MAAEI,KAAK;MAAEE;IAAW,CAAC,GAAGM,KAAK;IACjC,IAAI,CAACN,UAAU,EAAEA,UAAU,GAAGF,KAAK;IAEnC,IAAIA,KAAK,IAAI,CAACF,YAAY,CAACE,KAAK,CAAC,EAAE;MACjCA,KAAK,GAAI,iBAAgBA,KAAM,GAAE;IACnC;IAEA,IAAIE,UAAU,EAAE;MACd,IAAIJ,YAAY,CAACI,UAAU,CAAC,EAAE;QAC5BA,UAAU,GAAI,QAAOL,QAAQ,CAACK,UAAU,CAAE,KAAIM,KAAK,CAACL,iBAAkB,GAAE;MAC1E,CAAC,MAAM,IAAI,CAACD,UAAU,CAACS,UAAU,CAAC,MAAM,CAAC,EAAE;QACzCT,UAAU,GAAI,QAAQ,iBAAgBA,UAAW,OAAO,KAAIM,KAAK,CAACL,iBAAkB,GAAE;MACxF;IACF;IAEA,OAAO;MACL,CAAE,OAAMM,IAAK,SAAQ,GAAGT,KAAK;MAC7B,CAAE,OAAMS,IAAK,cAAa,GAAGP;IAC/B,CAAC;EACH,CAAC,CAAC;EAEF,OAAO;IACLQ;EACF,CAAC;AACH"}
|
package/lib/util/color/index.mjs
CHANGED
|
@@ -12,9 +12,25 @@
|
|
|
12
12
|
* https://github.com/vuetifyjs/vuetify
|
|
13
13
|
* */
|
|
14
14
|
import { HEX_COLOR_REGEX, RGBA_REGEX } from "./const.mjs";
|
|
15
|
+
import { rgbFromHex } from "./../index.mjs";
|
|
15
16
|
export function isColorValue(value) {
|
|
16
17
|
return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);
|
|
17
18
|
}
|
|
19
|
+
export function colorRgb(color) {
|
|
20
|
+
if (color?.startsWith('#')) {
|
|
21
|
+
return rgbFromHex(color)?.join(',') || '';
|
|
22
|
+
}
|
|
23
|
+
const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
|
|
24
|
+
if (RGBA_REGEX.test(color)) {
|
|
25
|
+
const value = RGBA_REGEX.exec(color)?.[2] || '';
|
|
26
|
+
if (value) {
|
|
27
|
+
const valueArray = value.trim().split(',');
|
|
28
|
+
valueArray.splice(3, 1);
|
|
29
|
+
return valueArray.join(',');
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return '';
|
|
33
|
+
}
|
|
18
34
|
export function isTextColorIsLight(r, g, b) {
|
|
19
35
|
const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
20
36
|
return luminance < 0.5;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["HEX_COLOR_REGEX","RGBA_REGEX","isColorValue","value","test","isTextColorIsLight","r","g","b","luminance"],"sources":["../../../src/util/color/index.ts"],"sourcesContent":["/*\r\n* yuyeon\r\n* Apache-2.0 license (Copyright 2023 yeonyew)\r\n*\r\n* Used Libs\r\n* - material-color-utilities\r\n* Apache-2.0 license (Copyright 2021 Google LLC)\r\n* https://github.com/material-foundation/material-color-utilities\r\n*\r\n* - Vuetify\r\n* MIT license (Copyright (c) 2016-2023 John Jeremy Leider)\r\n* https://github.com/vuetifyjs/vuetify\r\n* */\r\n\r\nimport { HEX_COLOR_REGEX, RGBA_REGEX } from \"./const\";\r\n\r\nexport function isColorValue(value: string): boolean {\r\n return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);\r\n}\r\n\r\nexport function isTextColorIsLight(r: number, g: number, b: number): boolean {\r\n const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n return luminance < 0.5;\r\n}\r\n\r\nexport * from './const';\r\nexport * from \"./conversion\";\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,SAcSA,eAAe,EAAEC,UAAU;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["HEX_COLOR_REGEX","RGBA_REGEX","rgbFromHex","isColorValue","value","test","colorRgb","color","startsWith","join","exec","valueArray","trim","split","splice","isTextColorIsLight","r","g","b","luminance"],"sources":["../../../src/util/color/index.ts"],"sourcesContent":["/*\r\n* yuyeon\r\n* Apache-2.0 license (Copyright 2023 yeonyew)\r\n*\r\n* Used Libs\r\n* - material-color-utilities\r\n* Apache-2.0 license (Copyright 2021 Google LLC)\r\n* https://github.com/material-foundation/material-color-utilities\r\n*\r\n* - Vuetify\r\n* MIT license (Copyright (c) 2016-2023 John Jeremy Leider)\r\n* https://github.com/vuetifyjs/vuetify\r\n* */\r\n\r\nimport { HEX_COLOR_REGEX, RGBA_REGEX } from \"./const\";\r\nimport { rgbFromHex } from '@/util';\r\n\r\nexport function isColorValue(value: string): boolean {\r\n return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);\r\n}\r\n\r\nexport function colorRgb(color: string): string {\r\n if (color?.startsWith('#')) {\r\n return rgbFromHex(color)?.join(',') || '';\r\n }\r\n const RGBA_REGEX = /rgb(a?)\\((?<v>.*)\\)/;\r\n if (RGBA_REGEX.test(color)) {\r\n const value = RGBA_REGEX.exec(color)?.[2] || '';\r\n if (value) {\r\n const valueArray = value.trim().split(',');\r\n valueArray.splice(3, 1);\r\n return valueArray.join(',');\r\n }\r\n }\r\n return '';\r\n}\r\n\r\nexport function isTextColorIsLight(r: number, g: number, b: number): boolean {\r\n const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n return luminance < 0.5;\r\n}\r\n\r\nexport * from './const';\r\nexport * from \"./conversion\";\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,SAcSA,eAAe,EAAEC,UAAU;AAAA,SAC3BC,UAAU;AAEnB,OAAO,SAASC,YAAYA,CAACC,KAAa,EAAW;EACnD,OAAOH,UAAU,CAACI,IAAI,CAACD,KAAK,CAAC,IAAIJ,eAAe,CAACK,IAAI,CAACD,KAAK,CAAC;AAC9D;AAEA,OAAO,SAASE,QAAQA,CAACC,KAAa,EAAU;EAC9C,IAAIA,KAAK,EAAEC,UAAU,CAAC,GAAG,CAAC,EAAE;IAC1B,OAAON,UAAU,CAACK,KAAK,CAAC,EAAEE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;EAC3C;EACA,MAAMR,UAAU,GAAG,qBAAqB;EACxC,IAAIA,UAAU,CAACI,IAAI,CAACE,KAAK,CAAC,EAAE;IAC1B,MAAMH,KAAK,GAAGH,UAAU,CAACS,IAAI,CAACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IAC/C,IAAIH,KAAK,EAAE;MACT,MAAMO,UAAU,GAAGP,KAAK,CAACQ,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;MAC1CF,UAAU,CAACG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;MACvB,OAAOH,UAAU,CAACF,IAAI,CAAC,GAAG,CAAC;IAC7B;EACF;EACA,OAAO,EAAE;AACX;AAEA,OAAO,SAASM,kBAAkBA,CAACC,CAAS,EAAEC,CAAS,EAAEC,CAAS,EAAW;EAC3E,MAAMC,SAAS,GAAG,CAAC,GAAG,CAAC,KAAK,GAAGH,CAAC,GAAG,KAAK,GAAGC,CAAC,GAAG,KAAK,GAAGC,CAAC,IAAI,GAAG;EAC/D,OAAOC,SAAS,GAAG,GAAG;AACxB;AAAC;AAAA"}
|
package/package.json
CHANGED
|
@@ -2,19 +2,39 @@ import { PropType } from 'vue';
|
|
|
2
2
|
import { IconValue } from '../../composables/icon';
|
|
3
3
|
|
|
4
4
|
export declare const pressYBadgePropsOptions: <Defaults extends {
|
|
5
|
+
color?: unknown;
|
|
6
|
+
background?: unknown;
|
|
7
|
+
backgroundOpacity?: unknown;
|
|
5
8
|
tag?: unknown;
|
|
6
9
|
dot?: unknown;
|
|
7
10
|
bordered?: unknown;
|
|
8
11
|
floating?: unknown;
|
|
9
12
|
inline?: unknown;
|
|
10
13
|
icon?: unknown;
|
|
11
|
-
color?: unknown;
|
|
12
14
|
hide?: unknown;
|
|
13
15
|
label?: unknown;
|
|
14
16
|
content?: unknown;
|
|
15
17
|
max?: unknown;
|
|
16
18
|
transition?: unknown;
|
|
17
19
|
} = {}>(defaults?: Defaults | undefined) => {
|
|
20
|
+
color: unknown extends Defaults["color"] ? StringConstructor : {
|
|
21
|
+
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
|
22
|
+
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
|
23
|
+
};
|
|
24
|
+
background: unknown extends Defaults["background"] ? StringConstructor : {
|
|
25
|
+
type: PropType<unknown extends Defaults["background"] ? string : string | Defaults["background"]>;
|
|
26
|
+
default: unknown extends Defaults["background"] ? string : string | Defaults["background"];
|
|
27
|
+
};
|
|
28
|
+
backgroundOpacity: unknown extends Defaults["backgroundOpacity"] ? {
|
|
29
|
+
type: NumberConstructor;
|
|
30
|
+
default: number;
|
|
31
|
+
} : Omit<{
|
|
32
|
+
type: NumberConstructor;
|
|
33
|
+
default: number;
|
|
34
|
+
}, "type" | "default"> & {
|
|
35
|
+
type: PropType<unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"]>;
|
|
36
|
+
default: unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"];
|
|
37
|
+
};
|
|
18
38
|
tag: unknown extends Defaults["tag"] ? {
|
|
19
39
|
type: PropType<string>;
|
|
20
40
|
default: string;
|
|
@@ -45,10 +65,6 @@ export declare const pressYBadgePropsOptions: <Defaults extends {
|
|
|
45
65
|
type: PropType<unknown extends Defaults["icon"] ? IconValue : NonNullable<IconValue> | Defaults["icon"]>;
|
|
46
66
|
default: unknown extends Defaults["icon"] ? IconValue : NonNullable<IconValue> | Defaults["icon"];
|
|
47
67
|
};
|
|
48
|
-
color: unknown extends Defaults["color"] ? StringConstructor : {
|
|
49
|
-
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
|
50
|
-
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
|
51
|
-
};
|
|
52
68
|
hide: unknown extends Defaults["hide"] ? BooleanConstructor : {
|
|
53
69
|
type: PropType<unknown extends Defaults["hide"] ? boolean : boolean | Defaults["hide"]>;
|
|
54
70
|
default: unknown extends Defaults["hide"] ? boolean : boolean | Defaults["hide"];
|
|
@@ -83,6 +99,12 @@ export declare const pressYBadgePropsOptions: <Defaults extends {
|
|
|
83
99
|
};
|
|
84
100
|
};
|
|
85
101
|
export declare const YBadge: import('vue').DefineComponent<{
|
|
102
|
+
color: StringConstructor;
|
|
103
|
+
background: StringConstructor;
|
|
104
|
+
backgroundOpacity: {
|
|
105
|
+
type: NumberConstructor;
|
|
106
|
+
default: number;
|
|
107
|
+
};
|
|
86
108
|
tag: {
|
|
87
109
|
type: PropType<string>;
|
|
88
110
|
default: string;
|
|
@@ -92,7 +114,6 @@ export declare const YBadge: import('vue').DefineComponent<{
|
|
|
92
114
|
floating: BooleanConstructor;
|
|
93
115
|
inline: BooleanConstructor;
|
|
94
116
|
icon: PropType<IconValue>;
|
|
95
|
-
color: StringConstructor;
|
|
96
117
|
hide: BooleanConstructor;
|
|
97
118
|
label: {
|
|
98
119
|
type: StringConstructor;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
|
|
2
2
|
export declare const pressYChipPropsOptions: <Defaults extends {
|
|
3
|
+
small?: unknown;
|
|
3
4
|
color?: unknown;
|
|
4
5
|
background?: unknown;
|
|
5
6
|
backgroundOpacity?: unknown;
|
|
6
|
-
small?: unknown;
|
|
7
7
|
} = {}>(defaults?: Defaults | undefined) => {
|
|
8
|
+
small: unknown extends Defaults["small"] ? BooleanConstructor : {
|
|
9
|
+
type: import('vue').PropType<unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"]>;
|
|
10
|
+
default: unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"];
|
|
11
|
+
};
|
|
8
12
|
color: unknown extends Defaults["color"] ? StringConstructor : {
|
|
9
13
|
type: import('vue').PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
|
10
14
|
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
|
@@ -23,18 +27,14 @@ export declare const pressYChipPropsOptions: <Defaults extends {
|
|
|
23
27
|
type: import('vue').PropType<unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"]>;
|
|
24
28
|
default: unknown extends Defaults["backgroundOpacity"] ? number : number | Defaults["backgroundOpacity"];
|
|
25
29
|
};
|
|
26
|
-
small: unknown extends Defaults["small"] ? BooleanConstructor : {
|
|
27
|
-
type: import('vue').PropType<unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"]>;
|
|
28
|
-
default: unknown extends Defaults["small"] ? boolean : boolean | Defaults["small"];
|
|
29
|
-
};
|
|
30
30
|
};
|
|
31
31
|
export declare const YChip: import('vue').DefineComponent<{
|
|
32
|
+
small: BooleanConstructor;
|
|
32
33
|
color: StringConstructor;
|
|
33
34
|
background: StringConstructor;
|
|
34
35
|
backgroundOpacity: {
|
|
35
36
|
type: NumberConstructor;
|
|
36
37
|
default: number;
|
|
37
38
|
};
|
|
38
|
-
small: BooleanConstructor;
|
|
39
39
|
}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string>;
|
|
40
40
|
export type YChip = InstanceType<typeof YChip>;
|
|
@@ -4,11 +4,11 @@ export declare const pressYDatePickerPropsOptions: <Defaults extends {
|
|
|
4
4
|
disabled?: unknown;
|
|
5
5
|
multiple?: unknown;
|
|
6
6
|
max?: unknown;
|
|
7
|
-
|
|
7
|
+
year?: unknown;
|
|
8
8
|
month?: unknown;
|
|
9
|
+
color?: unknown;
|
|
9
10
|
range?: unknown;
|
|
10
11
|
min?: unknown;
|
|
11
|
-
year?: unknown;
|
|
12
12
|
allowedDates?: unknown;
|
|
13
13
|
hideWeekdays?: unknown;
|
|
14
14
|
showAdjacentMonthDates?: unknown;
|
|
@@ -30,14 +30,18 @@ export declare const pressYDatePickerPropsOptions: <Defaults extends {
|
|
|
30
30
|
type: import('vue').PropType<unknown extends Defaults["max"] ? unknown : {} | Defaults["max"]>;
|
|
31
31
|
default: unknown extends Defaults["max"] ? unknown : {} | Defaults["max"];
|
|
32
32
|
};
|
|
33
|
-
|
|
34
|
-
type: import('vue').PropType<unknown extends Defaults["
|
|
35
|
-
default: unknown extends Defaults["
|
|
33
|
+
year: unknown extends Defaults["year"] ? (NumberConstructor | StringConstructor)[] : {
|
|
34
|
+
type: import('vue').PropType<unknown extends Defaults["year"] ? string | number : NonNullable<string | number> | Defaults["year"]>;
|
|
35
|
+
default: unknown extends Defaults["year"] ? string | number : NonNullable<string | number> | Defaults["year"];
|
|
36
36
|
};
|
|
37
37
|
month: unknown extends Defaults["month"] ? (NumberConstructor | StringConstructor)[] : {
|
|
38
38
|
type: import('vue').PropType<unknown extends Defaults["month"] ? string | number : NonNullable<string | number> | Defaults["month"]>;
|
|
39
39
|
default: unknown extends Defaults["month"] ? string | number : NonNullable<string | number> | Defaults["month"];
|
|
40
40
|
};
|
|
41
|
+
color: unknown extends Defaults["color"] ? StringConstructor : {
|
|
42
|
+
type: import('vue').PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
|
43
|
+
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
|
44
|
+
};
|
|
41
45
|
range: unknown extends Defaults["range"] ? BooleanConstructor : {
|
|
42
46
|
type: import('vue').PropType<unknown extends Defaults["range"] ? boolean : boolean | Defaults["range"]>;
|
|
43
47
|
default: unknown extends Defaults["range"] ? boolean : boolean | Defaults["range"];
|
|
@@ -46,10 +50,6 @@ export declare const pressYDatePickerPropsOptions: <Defaults extends {
|
|
|
46
50
|
type: import('vue').PropType<unknown extends Defaults["min"] ? unknown : {} | Defaults["min"]>;
|
|
47
51
|
default: unknown extends Defaults["min"] ? unknown : {} | Defaults["min"];
|
|
48
52
|
};
|
|
49
|
-
year: unknown extends Defaults["year"] ? (NumberConstructor | StringConstructor)[] : {
|
|
50
|
-
type: import('vue').PropType<unknown extends Defaults["year"] ? string | number : NonNullable<string | number> | Defaults["year"]>;
|
|
51
|
-
default: unknown extends Defaults["year"] ? string | number : NonNullable<string | number> | Defaults["year"];
|
|
52
|
-
};
|
|
53
53
|
allowedDates: unknown extends Defaults["allowedDates"] ? (ArrayConstructor | FunctionConstructor)[] : {
|
|
54
54
|
type: import('vue').PropType<unknown extends Defaults["allowedDates"] ? Function | unknown[] : NonNullable<Function | unknown[]> | Defaults["allowedDates"]>;
|
|
55
55
|
default: unknown extends Defaults["allowedDates"] ? Function | unknown[] : NonNullable<Function | unknown[]> | Defaults["allowedDates"];
|
|
@@ -78,11 +78,11 @@ export declare const YDatePicker: import('vue').DefineComponent<{
|
|
|
78
78
|
disabled: BooleanConstructor;
|
|
79
79
|
multiple: BooleanConstructor;
|
|
80
80
|
max: import('vue').PropType<unknown>;
|
|
81
|
-
|
|
81
|
+
year: (NumberConstructor | StringConstructor)[];
|
|
82
82
|
month: (NumberConstructor | StringConstructor)[];
|
|
83
|
+
color: StringConstructor;
|
|
83
84
|
range: BooleanConstructor;
|
|
84
85
|
min: import('vue').PropType<unknown>;
|
|
85
|
-
year: (NumberConstructor | StringConstructor)[];
|
|
86
86
|
allowedDates: (ArrayConstructor | FunctionConstructor)[];
|
|
87
87
|
hideWeekdays: BooleanConstructor;
|
|
88
88
|
showAdjacentMonthDates: {
|
|
@@ -48,14 +48,14 @@ export declare const pressYDatePickerControlPropsOptions: <Defaults extends {
|
|
|
48
48
|
default: unknown extends Defaults["dropdownIcon"] ? string | Record<string, any> : NonNullable<string | Record<string, any>> | Defaults["dropdownIcon"];
|
|
49
49
|
};
|
|
50
50
|
mode: unknown extends Defaults["mode"] ? {
|
|
51
|
-
type: PropType<"
|
|
51
|
+
type: PropType<"year" | "month" | "date">;
|
|
52
52
|
default: string;
|
|
53
53
|
} : Omit<{
|
|
54
|
-
type: PropType<"
|
|
54
|
+
type: PropType<"year" | "month" | "date">;
|
|
55
55
|
default: string;
|
|
56
56
|
}, "type" | "default"> & {
|
|
57
|
-
type: PropType<unknown extends Defaults["mode"] ? "
|
|
58
|
-
default: unknown extends Defaults["mode"] ? "
|
|
57
|
+
type: PropType<unknown extends Defaults["mode"] ? "year" | "month" | "date" : Defaults["mode"] | NonNullable<"year" | "month" | "date">>;
|
|
58
|
+
default: unknown extends Defaults["mode"] ? "year" | "month" | "date" : Defaults["mode"] | NonNullable<"year" | "month" | "date">;
|
|
59
59
|
};
|
|
60
60
|
yearText: unknown extends Defaults["yearText"] ? StringConstructor : {
|
|
61
61
|
type: PropType<unknown extends Defaults["yearText"] ? string : string | Defaults["yearText"]>;
|
|
@@ -83,7 +83,7 @@ export declare const YDatePickerControl: import('vue').DefineComponent<{
|
|
|
83
83
|
type: (ObjectConstructor | StringConstructor)[];
|
|
84
84
|
};
|
|
85
85
|
mode: {
|
|
86
|
-
type: PropType<"
|
|
86
|
+
type: PropType<"year" | "month" | "date">;
|
|
87
87
|
default: string;
|
|
88
88
|
};
|
|
89
89
|
yearText: StringConstructor;
|