yuyeon 0.0.42-rc2 → 0.0.42-rc4
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 +2256 -2131
- package/dist/yuyeon.umd.cjs +6 -6
- package/lib/components/date-picker/YDateCalendar.scss +82 -82
- package/lib/components/date-picker/YDatePickerControl.mjs.map +1 -1
- package/lib/components/divider/YDivider.mjs.map +1 -1
- package/lib/components/field-input/YFieldInput.mjs +10 -10
- package/lib/components/field-input/YFieldInput.mjs.map +1 -1
- package/lib/components/index.mjs +1 -1
- package/lib/components/index.mjs.map +1 -1
- package/lib/components/input/index.mjs.map +1 -1
- package/lib/components/textarea/YTextarea.mjs +157 -0
- package/lib/components/textarea/YTextarea.mjs.map +1 -0
- package/lib/components/textarea/YTextarea.scss +25 -0
- package/lib/components/textarea/index.mjs +2 -0
- package/lib/components/textarea/index.mjs.map +1 -0
- package/lib/components/tree-view/YTreeView.mjs.map +1 -1
- package/lib/components/tree-view/YTreeViewNode.mjs.map +1 -1
- package/lib/composables/theme/index.mjs.map +1 -1
- package/lib/styles/util/_mixin.scss +34 -34
- package/package.json +1 -1
- package/types/components/index.d.ts +1 -1
- package/types/components/textarea/YTextarea.d.ts +705 -0
- package/types/components/textarea/index.d.ts +1 -0
- package/types/shims.d.ts +2 -0
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
@use '../../styles/util/mixin';
|
|
2
|
-
|
|
3
|
-
.y-date-calendar {
|
|
4
|
-
padding: 0 8px;
|
|
5
|
-
|
|
6
|
-
&__header {
|
|
7
|
-
display: flex;
|
|
8
|
-
padding: 0 12px 12px;
|
|
9
|
-
font-weight: 500;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&__week {
|
|
13
|
-
display: grid;
|
|
14
|
-
grid-template-columns: repeat(7, min-content);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
&__cell {
|
|
18
|
-
width: 40px;
|
|
19
|
-
height: 40px;
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
|
-
justify-content: center;
|
|
23
|
-
align-items: center;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&__weekday {
|
|
27
|
-
font-size: 0.875rem;
|
|
28
|
-
font-weight: 600;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&__day {
|
|
32
|
-
position: relative;
|
|
33
|
-
|
|
34
|
-
.y-button {
|
|
35
|
-
width: 36px;
|
|
36
|
-
height: 36px;
|
|
37
|
-
--y-button__disabled-background: transparent;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&--adjacent {
|
|
41
|
-
color: var(--y-theme-on-surface-variant);
|
|
42
|
-
opacity: 0.5;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&:before {
|
|
46
|
-
content: '';
|
|
47
|
-
position: absolute;
|
|
48
|
-
right: 0;
|
|
49
|
-
left: 0;
|
|
50
|
-
top: calc((40px - 36px) / 2);
|
|
51
|
-
bottom: calc((40px - 36px) / 2);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&--range-interval:before {
|
|
55
|
-
background: rgba(var(--y-theme-primary-rgb), 0.3);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&--range-start:before,
|
|
59
|
-
&--range-end:before {
|
|
60
|
-
background: rgba(var(--y-theme-primary-rgb), 0.3);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&--range-start:before, &--week-start:before {
|
|
64
|
-
left: calc((40px - 36px) / 2);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&--range-end:before, &--week-end:before {
|
|
68
|
-
right: calc((40px - 36px) / 2);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&--range-interval#{&}--week-start:before,
|
|
72
|
-
&--range-start:before {
|
|
73
|
-
@include mixin.borderRadius(50%, 'left');
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&--range-interval#{&}--week-end:before,
|
|
77
|
-
&--range-start#{&}--week-end:before,
|
|
78
|
-
&--range-end:before {
|
|
79
|
-
@include mixin.borderRadius(50%, 'right');
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
1
|
+
@use '../../styles/util/mixin';
|
|
2
|
+
|
|
3
|
+
.y-date-calendar {
|
|
4
|
+
padding: 0 8px;
|
|
5
|
+
|
|
6
|
+
&__header {
|
|
7
|
+
display: flex;
|
|
8
|
+
padding: 0 12px 12px;
|
|
9
|
+
font-weight: 500;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&__week {
|
|
13
|
+
display: grid;
|
|
14
|
+
grid-template-columns: repeat(7, min-content);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&__cell {
|
|
18
|
+
width: 40px;
|
|
19
|
+
height: 40px;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&__weekday {
|
|
27
|
+
font-size: 0.875rem;
|
|
28
|
+
font-weight: 600;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&__day {
|
|
32
|
+
position: relative;
|
|
33
|
+
|
|
34
|
+
.y-button {
|
|
35
|
+
width: 36px;
|
|
36
|
+
height: 36px;
|
|
37
|
+
--y-button__disabled-background: transparent;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&--adjacent {
|
|
41
|
+
color: var(--y-theme-on-surface-variant);
|
|
42
|
+
opacity: 0.5;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:before {
|
|
46
|
+
content: '';
|
|
47
|
+
position: absolute;
|
|
48
|
+
right: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
top: calc((40px - 36px) / 2);
|
|
51
|
+
bottom: calc((40px - 36px) / 2);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--range-interval:before {
|
|
55
|
+
background: rgba(var(--y-theme-primary-rgb), 0.3);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&--range-start:before,
|
|
59
|
+
&--range-end:before {
|
|
60
|
+
background: rgba(var(--y-theme-primary-rgb), 0.3);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&--range-start:before, &--week-start:before {
|
|
64
|
+
left: calc((40px - 36px) / 2);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&--range-end:before, &--week-end:before {
|
|
68
|
+
right: calc((40px - 36px) / 2);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&--range-interval#{&}--week-start:before,
|
|
72
|
+
&--range-start:before {
|
|
73
|
+
@include mixin.borderRadius(50%, 'left');
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&--range-interval#{&}--week-end:before,
|
|
77
|
+
&--range-start#{&}--week-end:before,
|
|
78
|
+
&--range-end:before {
|
|
79
|
+
@include mixin.borderRadius(50%, 'right');
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YDatePickerControl.mjs","names":["defineComponent","useRender","propsFactory","pressYDatePickerControlPropsOptions","disabled","type","Boolean","String","Array","default","nextIcon","Object","prevIcon","dropdownIcon","YDatePickerControl","name","setup","_createVNode"],"sources":["../../../src/components/date-picker/YDatePickerControl.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\nimport type { PropType } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YDatePickerControl.scss';\n\nexport const pressYDatePickerControlPropsOptions = propsFactory(\n {\n disabled: {\n type: [Boolean, String, Array] as PropType<boolean | string | string[]>,\n default: false,\n },\n nextIcon: {\n type: [String, Object],\n },\n prevIcon: {\n type: [String, Object],\n },\n dropdownIcon: {\n type: [String, Object],\n },\n },\n 'YDataPickerControl',\n);\n\nexport const YDatePickerControl = defineComponent({\n name: 'YDatePickerControl',\n setup() {\n useRender(() => <div class={['y-date-picker-control']}></div>);\n },\n});\n\nexport type YDatePickerControl = InstanceType<typeof YDatePickerControl>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAG7BC,SAAS;AAAA,SACTC,YAAY;AAErB;AAEA,OAAO,MAAMC,mCAAmC,GAAGD,YAAY,CAC7D;EACEE,QAAQ,EAAE;IACRC,IAAI,EAAE,CAACC,OAAO,EAAEC,MAAM,EAAEC,KAAK,CAA0C;IACvEC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRL,IAAI,EAAE,CAACE,MAAM,EAAEI,MAAM;EACvB,CAAC;EACDC,QAAQ,EAAE;IACRP,IAAI,EAAE,CAACE,MAAM,EAAEI,MAAM;EACvB,CAAC;EACDE,YAAY,EAAE;IACZR,IAAI,EAAE,CAACE,MAAM,EAAEI,MAAM;EACvB;AACF,CAAC,EACD,oBACF,CAAC;AAED,OAAO,MAAMG,kBAAkB,GAAGd,eAAe,CAAC;EAChDe,IAAI,EAAE,oBAAoB;EAC1BC,KAAKA,CAAA,EAAG;IACNf,SAAS,CAAC,MAAAgB,YAAA;MAAA,SAAkB,CAAC,uBAAuB;IAAC,QAAQ,CAAC;EAChE;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YDatePickerControl.mjs","names":["defineComponent","useRender","propsFactory","pressYDatePickerControlPropsOptions","disabled","type","Boolean","String","Array","default","nextIcon","Object","prevIcon","dropdownIcon","YDatePickerControl","name","setup","_createVNode"],"sources":["../../../src/components/date-picker/YDatePickerControl.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\nimport type { PropType } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { propsFactory } from '../../util/vue-component';\r\n\r\nimport './YDatePickerControl.scss';\r\n\r\nexport const pressYDatePickerControlPropsOptions = propsFactory(\r\n {\r\n disabled: {\r\n type: [Boolean, String, Array] as PropType<boolean | string | string[]>,\r\n default: false,\r\n },\r\n nextIcon: {\r\n type: [String, Object],\r\n },\r\n prevIcon: {\r\n type: [String, Object],\r\n },\r\n dropdownIcon: {\r\n type: [String, Object],\r\n },\r\n },\r\n 'YDataPickerControl',\r\n);\r\n\r\nexport const YDatePickerControl = defineComponent({\r\n name: 'YDatePickerControl',\r\n setup() {\r\n useRender(() => <div class={['y-date-picker-control']}></div>);\r\n },\r\n});\r\n\r\nexport type YDatePickerControl = InstanceType<typeof YDatePickerControl>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAG7BC,SAAS;AAAA,SACTC,YAAY;AAErB;AAEA,OAAO,MAAMC,mCAAmC,GAAGD,YAAY,CAC7D;EACEE,QAAQ,EAAE;IACRC,IAAI,EAAE,CAACC,OAAO,EAAEC,MAAM,EAAEC,KAAK,CAA0C;IACvEC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRL,IAAI,EAAE,CAACE,MAAM,EAAEI,MAAM;EACvB,CAAC;EACDC,QAAQ,EAAE;IACRP,IAAI,EAAE,CAACE,MAAM,EAAEI,MAAM;EACvB,CAAC;EACDE,YAAY,EAAE;IACZR,IAAI,EAAE,CAACE,MAAM,EAAEI,MAAM;EACvB;AACF,CAAC,EACD,oBACF,CAAC;AAED,OAAO,MAAMG,kBAAkB,GAAGd,eAAe,CAAC;EAChDe,IAAI,EAAE,oBAAoB;EAC1BC,KAAKA,CAAA,EAAG;IACNf,SAAS,CAAC,MAAAgB,YAAA;MAAA,SAAkB,CAAC,uBAAuB;IAAC,QAAQ,CAAC;EAChE;AACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YDivider.mjs","names":["defineComponent","useRender","propsFactory","pressYDividerPropsOptions","vertical","Boolean","YDivider","props","setup","_withDirectives","_createVNode","_resolveDirective"],"sources":["../../../src/components/divider/YDivider.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\nimport type { PropType } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util';\n\nexport const pressYDividerPropsOptions = propsFactory(\n {\n vertical: Boolean as PropType<boolean>,\n },\n 'YDivider',\n);\n\nexport const YDivider = defineComponent({\n props: pressYDividerPropsOptions(),\n setup(props) {\n useRender(() => {\n return (\n <hr\n class={['y-divider', { 'y-divider--vertical': props.vertical }]}\n v-theme\n />\n );\n });\n },\n});\n\nexport type YDivider = InstanceType<typeof YDivider>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAG7BC,SAAS;AAAA,SACTC,YAAY;AAErB,OAAO,MAAMC,yBAAyB,GAAGD,YAAY,CACnD;EACEE,QAAQ,EAAEC;AACZ,CAAC,EACD,UACF,CAAC;AAED,OAAO,MAAMC,QAAQ,GAAGN,eAAe,CAAC;EACtCO,KAAK,EAAEJ,yBAAyB,CAAC,CAAC;EAClCK,KAAKA,CAACD,KAAK,EAAE;IACXN,SAAS,CAAC,MAAM;MACd,OAAAQ,eAAA,CAAAC,YAAA;QAAA,SAEW,CAAC,WAAW,EAAE;UAAE,qBAAqB,EAAEH,KAAK,CAACH;QAAS,CAAC;MAAC,YAAAO,iBAAA;IAIrE,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YDivider.mjs","names":["defineComponent","useRender","propsFactory","pressYDividerPropsOptions","vertical","Boolean","YDivider","props","setup","_withDirectives","_createVNode","_resolveDirective"],"sources":["../../../src/components/divider/YDivider.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\nimport type { PropType } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { propsFactory } from '../../util';\r\n\r\nexport const pressYDividerPropsOptions = propsFactory(\r\n {\r\n vertical: Boolean as PropType<boolean>,\r\n },\r\n 'YDivider',\r\n);\r\n\r\nexport const YDivider = defineComponent({\r\n props: pressYDividerPropsOptions(),\r\n setup(props) {\r\n useRender(() => {\r\n return (\r\n <hr\r\n class={['y-divider', { 'y-divider--vertical': props.vertical }]}\r\n v-theme\r\n />\r\n );\r\n });\r\n },\r\n});\r\n\r\nexport type YDivider = InstanceType<typeof YDivider>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAG7BC,SAAS;AAAA,SACTC,YAAY;AAErB,OAAO,MAAMC,yBAAyB,GAAGD,YAAY,CACnD;EACEE,QAAQ,EAAEC;AACZ,CAAC,EACD,UACF,CAAC;AAED,OAAO,MAAMC,QAAQ,GAAGN,eAAe,CAAC;EACtCO,KAAK,EAAEJ,yBAAyB,CAAC,CAAC;EAClCK,KAAKA,CAACD,KAAK,EAAE;IACXN,SAAS,CAAC,MAAM;MACd,OAAAQ,eAAA,CAAAC,YAAA;QAAA,SAEW,CAAC,WAAW,EAAE;UAAE,qBAAqB,EAAEH,KAAK,CAACH;QAAS,CAAC;MAAC,YAAAO,iBAAA;IAIrE,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
@@ -37,8 +37,8 @@ export const YFieldInput = defineComponent({
|
|
|
37
37
|
emit,
|
|
38
38
|
slots
|
|
39
39
|
} = _ref;
|
|
40
|
-
const
|
|
41
|
-
const
|
|
40
|
+
const yInput$ = ref();
|
|
41
|
+
const input$ = ref();
|
|
42
42
|
const {
|
|
43
43
|
focused,
|
|
44
44
|
whenFocus,
|
|
@@ -96,10 +96,10 @@ export const YFieldInput = defineComponent({
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
function focus() {
|
|
99
|
-
|
|
99
|
+
input$.value?.focus();
|
|
100
100
|
}
|
|
101
101
|
function select() {
|
|
102
|
-
|
|
102
|
+
input$.value?.select();
|
|
103
103
|
}
|
|
104
104
|
function clear() {
|
|
105
105
|
inValue.value = '';
|
|
@@ -141,14 +141,14 @@ export const YFieldInput = defineComponent({
|
|
|
141
141
|
focus,
|
|
142
142
|
select,
|
|
143
143
|
clear,
|
|
144
|
-
|
|
144
|
+
input$
|
|
145
145
|
});
|
|
146
146
|
function onUpdateModel(value) {
|
|
147
147
|
emit('update:modelValue', value);
|
|
148
148
|
}
|
|
149
149
|
useRender(() => _createVNode(YInput, _mergeProps({
|
|
150
150
|
"class": classes.value,
|
|
151
|
-
"ref":
|
|
151
|
+
"ref": yInput$
|
|
152
152
|
}, chooseProps(props, YInput.props), {
|
|
153
153
|
"modelValue": inValue.value,
|
|
154
154
|
"onUpdate:modelValue": onUpdateModel,
|
|
@@ -173,8 +173,8 @@ export const YFieldInput = defineComponent({
|
|
|
173
173
|
"class": [`${NAME}__field`],
|
|
174
174
|
"data-id": defaultProps.attrId,
|
|
175
175
|
"ref": 'field'
|
|
176
|
-
}, [props.floating ?
|
|
177
|
-
"ref":
|
|
176
|
+
}, [props.floating ? yInput$.value && YInput.methods.createLabel.call(yInput$.value) : undefined, slots.default?.(), _createVNode("input", {
|
|
177
|
+
"ref": input$,
|
|
178
178
|
"value": displayValue.value,
|
|
179
179
|
"name": props.name,
|
|
180
180
|
"id": defaultProps.attrId,
|
|
@@ -207,8 +207,8 @@ export const YFieldInput = defineComponent({
|
|
|
207
207
|
}, [_createVNode(YIconClear, null, null)])]), slots.trailing && _createVNode("div", {
|
|
208
208
|
"class": ['y-input__trailing']
|
|
209
209
|
}, [slots.trailing()])]) : undefined,
|
|
210
|
-
label: slots.label?.(),
|
|
211
|
-
'helper-text': slots['helper-text']?.()
|
|
210
|
+
label: slots.label ? () => slots.label?.() : undefined,
|
|
211
|
+
'helper-text': slots['helper-text'] ? () => slots['helper-text']?.() : undefined
|
|
212
212
|
}));
|
|
213
213
|
return {
|
|
214
214
|
focused,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","setup","_ref","attrs","expose","emit","slots","yInputRef","inputRef","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","onFocus","value","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","focus","select","vm","undefined","text","call","modelValue","neo","immediate","onUpdateModel","_createVNode","_mergeProps","$event","leading","leadingChildren","_len","arguments","length","args","Array","_key","slot","push","defaultProps","attrId","floating","methods","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","_Fragment","label"],"sources":["../../../src/components/field-input/YFieldInput.tsx"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport {\r\n computed,\r\n defineComponent,\r\n getCurrentInstance,\r\n nextTick,\r\n ref,\r\n toRef,\r\n watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useFocus } from '../../composables/focus';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YIconClear } from '../icons/YIconClear';\r\nimport { YInput, pressYInputPropsOptions } from '../input';\r\n\r\nimport './YFieldInput.scss';\r\n\r\nconst NAME = 'y-field-input';\r\n\r\nexport const pressYFieldInputPropsOptions = propsFactory(\r\n {\r\n enableClear: Boolean as PropType<boolean>,\r\n inputAlign: String as PropType<string>,\r\n displayText: [String, Function] as PropType<\r\n string | ((value: any) => string)\r\n >,\r\n whenInputValid: [Boolean, Number] as PropType<boolean | number>,\r\n tabindex: {\r\n type: String as PropType<string>,\r\n default: '0',\r\n },\r\n type: {\r\n type: String as PropType<string>,\r\n default: 'text',\r\n },\r\n ...pressYInputPropsOptions({\r\n variation: 'filled',\r\n }),\r\n },\r\n 'YFieldInput',\r\n);\r\n\r\nexport const YFieldInput = defineComponent({\r\n name: 'YFieldInput',\r\n props: {\r\n ...pressYFieldInputPropsOptions(),\r\n },\r\n emits: [\r\n 'update:modelValue',\r\n 'update:focused',\r\n 'input',\r\n 'change',\r\n 'click',\r\n 'mousedown',\r\n 'mouseup',\r\n 'keydown',\r\n 'keyup',\r\n 'focus',\r\n 'blur',\r\n 'mousedown:display',\r\n ],\r\n setup(props, { attrs, expose, emit, slots }) {\r\n const yInputRef = ref<YInput>();\r\n const inputRef = ref<HTMLInputElement>();\r\n const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\r\n const inValue = ref<any>('');\r\n const displayValue = ref('');\r\n const inputType = toRef(props, 'type');\r\n\r\n const classes = computed(() => {\r\n return {\r\n [NAME]: true,\r\n };\r\n });\r\n\r\n const invokeValidators = () => {\r\n //\r\n };\r\n\r\n function onClick(event: MouseEvent) {\r\n emit('click', event);\r\n }\r\n\r\n function onFocus(event: FocusEvent) {\r\n whenFocus();\r\n displayValue.value = inValue.value as string;\r\n emit('focus', event);\r\n }\r\n\r\n function onBlur(event: FocusEvent) {\r\n whenBlur();\r\n invokeValidators();\r\n emit('blur', event);\r\n changeDisplay();\r\n }\r\n\r\n function onInput(event: Event) {\r\n emit('input', event);\r\n const target = event.target as HTMLInputElement | null;\r\n inValue.value = target?.value;\r\n displayValue.value = target?.value as string;\r\n if (props.whenInputValid) {\r\n invokeValidators();\r\n }\r\n }\r\n\r\n function onChange(event: Event) {\r\n emit('change', inValue.value);\r\n }\r\n\r\n function onKeydown(event: KeyboardEvent) {\r\n emit('keydown', event);\r\n }\r\n\r\n function onKeyup(event: KeyboardEvent) {\r\n emit('keyup', event);\r\n }\r\n\r\n function onClickClear(event: MouseEvent) {\r\n clear();\r\n }\r\n\r\n function onKeydownClear(event: KeyboardEvent) {\r\n if (event.code === 'Space' || event.code === 'Enter') {\r\n clear();\r\n }\r\n }\r\n\r\n function focus() {\r\n inputRef.value?.focus();\r\n }\r\n\r\n function select() {\r\n inputRef.value?.select();\r\n }\r\n\r\n function clear() {\r\n inValue.value = '';\r\n displayValue.value = '';\r\n emit('update:modelValue', inValue.value);\r\n }\r\n\r\n function changeDisplay() {\r\n const vm = getCurrentInstance();\r\n const { displayText } = props;\r\n if (displayText !== undefined) {\r\n let text = inValue.value;\r\n if (typeof displayText === 'string') {\r\n text = displayText;\r\n }\r\n if (displayText && typeof displayText === 'function') {\r\n text = (displayText as any).call(vm, text);\r\n }\r\n nextTick(() => {\r\n displayValue.value = text as string;\r\n });\r\n }\r\n }\r\n\r\n watch(\r\n () => props.modelValue,\r\n (neo: any) => {\r\n inValue.value = neo;\r\n displayValue.value = neo;\r\n },\r\n {\r\n immediate: true,\r\n },\r\n );\r\n\r\n watch(inValue, (neo: string) => {\r\n if (!focused.value) {\r\n changeDisplay();\r\n } else {\r\n displayValue.value = neo;\r\n }\r\n });\r\n\r\n expose({\r\n focus,\r\n select,\r\n clear,\r\n inputRef,\r\n });\r\n\r\n function onUpdateModel(value: any) {\r\n emit('update:modelValue', value);\r\n }\r\n\r\n useRender(() => (\r\n <YInput\r\n class={classes.value}\r\n ref={yInputRef}\r\n {...chooseProps(props, YInput.props)}\r\n modelValue={inValue.value}\r\n onUpdate:modelValue={onUpdateModel}\r\n focused={focused.value}\r\n onClick={onClick}\r\n onMousedown:display={($event) => emit('mousedown:display', $event)}\r\n >\r\n {{\r\n leading: slots.leading\r\n ? (...args: any[]) => {\r\n const leadingChildren = [];\r\n const slot = slots.leading?.(...args);\r\n if (slot) {\r\n leadingChildren.push(slot);\r\n } else {\r\n return undefined;\r\n }\r\n return leadingChildren;\r\n }\r\n : undefined,\r\n default: (defaultProps: any) => (\r\n <div\r\n class={[`${NAME}__field`]}\r\n data-id={defaultProps.attrId}\r\n ref={'field'}\r\n >\r\n {props.floating\r\n ? yInputRef.value &&\r\n YInput.methods!.createLabel.call(yInputRef.value)\r\n : undefined}\r\n {slots.default?.()}\r\n {\r\n <input\r\n ref={inputRef}\r\n value={displayValue.value}\r\n name={props.name}\r\n id={defaultProps.attrId}\r\n type={inputType.value}\r\n readonly={\r\n props.readonly || props.loading || defaultProps.formLoading\r\n }\r\n placeholder={props.placeholder}\r\n disabled={props.disabled}\r\n tabindex={props.tabindex || '0'}\r\n autocomplete={attrs.autocomplete as string}\r\n maxlength={attrs.maxlength as number | string}\r\n min={attrs.min as number | string}\r\n max={attrs.max as number | string}\r\n style={[attrs?.style, { textAlign: props.inputAlign } as any]}\r\n onInput={onInput}\r\n onFocus={onFocus}\r\n onBlur={onBlur}\r\n onChange={onChange}\r\n onKeydown={onKeydown}\r\n onKeyup={onKeyup}\r\n />\r\n }\r\n </div>\r\n ),\r\n trailing:\r\n slots.trailing || (props.enableClear && inValue.value)\r\n ? () => (\r\n <>\r\n {props.enableClear && inValue.value && (\r\n <div\r\n class={[\r\n 'y-input__trailing',\r\n 'y-input__trailing--clear',\r\n ]}\r\n >\r\n <button\r\n class={[`${NAME}__clear`]}\r\n onClick={onClickClear}\r\n onKeydown={onKeydownClear}\r\n tabindex={2}\r\n >\r\n <YIconClear></YIconClear>\r\n </button>\r\n </div>\r\n )}\r\n {slots.trailing && (\r\n <div class={['y-input__trailing']}>\r\n {slots.trailing()}\r\n </div>\r\n )}\r\n </>\r\n )\r\n : undefined,\r\n label: slots.label?.(),\r\n 'helper-text': slots['helper-text']?.(),\r\n }}\r\n </YInput>\r\n ));\r\n\r\n return {\r\n focused,\r\n inValue\r\n };\r\n },\r\n});\r\n\r\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","setup","_ref","attrs","expose","emit","slots","yInput$","input$","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","onFocus","value","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","focus","select","vm","undefined","text","call","modelValue","neo","immediate","onUpdateModel","_createVNode","_mergeProps","$event","leading","leadingChildren","_len","arguments","length","args","Array","_key","slot","push","defaultProps","attrId","floating","methods","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","_Fragment","label"],"sources":["../../../src/components/field-input/YFieldInput.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n nextTick,\n ref,\n toRef,\n watch,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useFocus } from '../../composables/focus';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YIconClear } from '../icons/YIconClear';\nimport { YInput, pressYInputPropsOptions } from '../input';\n\nimport './YFieldInput.scss';\n\nconst NAME = 'y-field-input';\n\nexport const pressYFieldInputPropsOptions = propsFactory(\n {\n enableClear: Boolean as PropType<boolean>,\n inputAlign: String as PropType<string>,\n displayText: [String, Function] as PropType<\n string | ((value: any) => string)\n >,\n whenInputValid: [Boolean, Number] as PropType<boolean | number>,\n tabindex: {\n type: String as PropType<string>,\n default: '0',\n },\n type: {\n type: String as PropType<string>,\n default: 'text',\n },\n ...pressYInputPropsOptions({\n variation: 'filled',\n }),\n },\n 'YFieldInput',\n);\n\nexport const YFieldInput = defineComponent({\n name: 'YFieldInput',\n props: {\n ...pressYFieldInputPropsOptions(),\n },\n emits: [\n 'update:modelValue',\n 'update:focused',\n 'input',\n 'change',\n 'click',\n 'mousedown',\n 'mouseup',\n 'keydown',\n 'keyup',\n 'focus',\n 'blur',\n 'mousedown:display',\n ],\n setup(props, { attrs, expose, emit, slots }) {\n const yInput$ = ref<YInput>();\n const input$ = ref<HTMLInputElement>();\n const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\n const inValue = ref<any>('');\n const displayValue = ref('');\n const inputType = toRef(props, 'type');\n\n const classes = computed(() => {\n return {\n [NAME]: true,\n };\n });\n\n const invokeValidators = () => {\n //\n };\n\n function onClick(event: MouseEvent) {\n emit('click', event);\n }\n\n function onFocus(event: FocusEvent) {\n whenFocus();\n displayValue.value = inValue.value as string;\n emit('focus', event);\n }\n\n function onBlur(event: FocusEvent) {\n whenBlur();\n invokeValidators();\n emit('blur', event);\n changeDisplay();\n }\n\n function onInput(event: Event) {\n emit('input', event);\n const target = event.target as HTMLInputElement | null;\n inValue.value = target?.value;\n displayValue.value = target?.value as string;\n if (props.whenInputValid) {\n invokeValidators();\n }\n }\n\n function onChange(event: Event) {\n emit('change', inValue.value);\n }\n\n function onKeydown(event: KeyboardEvent) {\n emit('keydown', event);\n }\n\n function onKeyup(event: KeyboardEvent) {\n emit('keyup', event);\n }\n\n function onClickClear(event: MouseEvent) {\n clear();\n }\n\n function onKeydownClear(event: KeyboardEvent) {\n if (event.code === 'Space' || event.code === 'Enter') {\n clear();\n }\n }\n\n function focus() {\n input$.value?.focus();\n }\n\n function select() {\n input$.value?.select();\n }\n\n function clear() {\n inValue.value = '';\n displayValue.value = '';\n emit('update:modelValue', inValue.value);\n }\n\n function changeDisplay() {\n const vm = getCurrentInstance();\n const { displayText } = props;\n if (displayText !== undefined) {\n let text = inValue.value;\n if (typeof displayText === 'string') {\n text = displayText;\n }\n if (displayText && typeof displayText === 'function') {\n text = (displayText as any).call(vm, text);\n }\n nextTick(() => {\n displayValue.value = text as string;\n });\n }\n }\n\n watch(\n () => props.modelValue,\n (neo: any) => {\n inValue.value = neo;\n displayValue.value = neo;\n },\n {\n immediate: true,\n },\n );\n\n watch(inValue, (neo: string) => {\n if (!focused.value) {\n changeDisplay();\n } else {\n displayValue.value = neo;\n }\n });\n\n expose({\n focus,\n select,\n clear,\n input$,\n });\n\n function onUpdateModel(value: any) {\n emit('update:modelValue', value);\n }\n\n useRender(() => (\n <YInput\n class={classes.value}\n ref={yInput$}\n {...chooseProps(props, YInput.props)}\n modelValue={inValue.value}\n onUpdate:modelValue={onUpdateModel}\n focused={focused.value}\n onClick={onClick}\n onMousedown:display={($event) => emit('mousedown:display', $event)}\n >\n {{\n leading: slots.leading\n ? (...args: any[]) => {\n const leadingChildren = [];\n const slot = slots.leading?.(...args);\n if (slot) {\n leadingChildren.push(slot);\n } else {\n return undefined;\n }\n return leadingChildren;\n }\n : undefined,\n default: (defaultProps: any) => (\n <div\n class={[`${NAME}__field`]}\n data-id={defaultProps.attrId}\n ref={'field'}\n >\n {props.floating\n ? yInput$.value &&\n YInput.methods!.createLabel.call(yInput$.value)\n : undefined}\n {slots.default?.()}\n {\n <input\n ref={input$}\n value={displayValue.value}\n name={props.name}\n id={defaultProps.attrId}\n type={inputType.value}\n readonly={\n props.readonly || props.loading || defaultProps.formLoading\n }\n placeholder={props.placeholder}\n disabled={props.disabled}\n tabindex={props.tabindex || '0'}\n autocomplete={attrs.autocomplete as string}\n maxlength={attrs.maxlength as number | string}\n min={attrs.min as number | string}\n max={attrs.max as number | string}\n style={[attrs?.style, { textAlign: props.inputAlign } as any]}\n onInput={onInput}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={onChange}\n onKeydown={onKeydown}\n onKeyup={onKeyup}\n />\n }\n </div>\n ),\n trailing:\n slots.trailing || (props.enableClear && inValue.value)\n ? () => (\n <>\n {props.enableClear && inValue.value && (\n <div\n class={[\n 'y-input__trailing',\n 'y-input__trailing--clear',\n ]}\n >\n <button\n class={[`${NAME}__clear`]}\n onClick={onClickClear}\n onKeydown={onKeydownClear}\n tabindex={2}\n >\n <YIconClear></YIconClear>\n </button>\n </div>\n )}\n {slots.trailing && (\n <div class={['y-input__trailing']}>\n {slots.trailing()}\n </div>\n )}\n </>\n )\n : undefined,\n label: slots.label ? () => slots.label?.() : undefined,\n 'helper-text': slots['helper-text']\n ? () => slots['helper-text']?.()\n : undefined,\n }}\n </YInput>\n ));\n\n return {\n focused,\n inValue,\n };\n },\n});\n\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\n"],"mappings":"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"}
|
package/lib/components/index.mjs
CHANGED
|
@@ -2,6 +2,7 @@ export * from "./app/index.mjs";
|
|
|
2
2
|
export * from "./button/index.mjs";
|
|
3
3
|
export * from "./input/index.mjs";
|
|
4
4
|
export * from "./field-input/index.mjs";
|
|
5
|
+
export * from "./textarea/index.mjs";
|
|
5
6
|
export * from "./form/index.mjs";
|
|
6
7
|
export * from "./progress-bar/index.mjs";
|
|
7
8
|
export * from "./card/index.mjs";
|
|
@@ -27,5 +28,4 @@ export * from "./tab/index.mjs";
|
|
|
27
28
|
export * from "./alert/index.mjs";
|
|
28
29
|
export * from "./divider/index.mjs";
|
|
29
30
|
export * from "./date-picker/index.mjs";
|
|
30
|
-
export * from "./date-picker/index.mjs";
|
|
31
31
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './tab';\r\nexport * from './alert';\r\nexport * from './divider';\r\nexport * from './date-picker';\r\
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './textarea';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './tab';\r\nexport * from './alert';\r\nexport * from './divider';\r\nexport * from './date-picker';\r\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["export * from './YInput';\r\n"],"mappings":""}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
|
2
|
+
import { defineComponent, getCurrentInstance, nextTick, ref, watch } from 'vue';
|
|
3
|
+
import { useRender } from "../../composables/component.mjs";
|
|
4
|
+
import { useFocus } from "../../composables/focus.mjs";
|
|
5
|
+
import { chooseProps, getUid, propsFactory } from "../../util/index.mjs";
|
|
6
|
+
import { YInput, pressYInputPropsOptions } from "../input/index.mjs";
|
|
7
|
+
import "./YTextarea.scss";
|
|
8
|
+
export const pressYTextareaPropsOptions = propsFactory({
|
|
9
|
+
displayText: [String, Function],
|
|
10
|
+
whenInputValid: [Boolean, Number],
|
|
11
|
+
...pressYInputPropsOptions({
|
|
12
|
+
variation: 'filled'
|
|
13
|
+
})
|
|
14
|
+
}, 'YTextarea');
|
|
15
|
+
const CLASS_NAME = 'y-textarea';
|
|
16
|
+
export const YTextarea = defineComponent({
|
|
17
|
+
name: 'YTextarea',
|
|
18
|
+
props: pressYTextareaPropsOptions(),
|
|
19
|
+
emits: {
|
|
20
|
+
'update:modelValue': v => true,
|
|
21
|
+
'update:focused': v => true,
|
|
22
|
+
'mousedown:display': e => true,
|
|
23
|
+
input: v => true,
|
|
24
|
+
change: (v, e) => true,
|
|
25
|
+
focus: e => true,
|
|
26
|
+
blur: e => true,
|
|
27
|
+
click: e => true,
|
|
28
|
+
keydown: e => true,
|
|
29
|
+
keyup: e => true
|
|
30
|
+
},
|
|
31
|
+
slots: Object,
|
|
32
|
+
setup(props, _ref) {
|
|
33
|
+
let {
|
|
34
|
+
attrs,
|
|
35
|
+
emit,
|
|
36
|
+
slots,
|
|
37
|
+
expose
|
|
38
|
+
} = _ref;
|
|
39
|
+
const UID = getUid();
|
|
40
|
+
const el$ = ref();
|
|
41
|
+
const input$ = ref();
|
|
42
|
+
const inValue = ref('');
|
|
43
|
+
const displayValue = ref('');
|
|
44
|
+
const {
|
|
45
|
+
focused,
|
|
46
|
+
whenFocus,
|
|
47
|
+
whenBlur
|
|
48
|
+
} = useFocus(props, 'y-field-input');
|
|
49
|
+
function onUpdateModel(value) {
|
|
50
|
+
emit('update:modelValue', value);
|
|
51
|
+
}
|
|
52
|
+
function changeDisplay() {
|
|
53
|
+
const vm = getCurrentInstance();
|
|
54
|
+
const {
|
|
55
|
+
displayText
|
|
56
|
+
} = props;
|
|
57
|
+
if (displayText !== undefined) {
|
|
58
|
+
let text = inValue.value;
|
|
59
|
+
if (typeof displayText === 'string') {
|
|
60
|
+
text = displayText;
|
|
61
|
+
}
|
|
62
|
+
if (displayText && typeof displayText === 'function') {
|
|
63
|
+
text = displayText.call(vm, text);
|
|
64
|
+
}
|
|
65
|
+
nextTick(() => {
|
|
66
|
+
displayValue.value = text;
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function invokeValidators() {
|
|
71
|
+
//
|
|
72
|
+
}
|
|
73
|
+
function onInput(event) {
|
|
74
|
+
emit('input', event);
|
|
75
|
+
const target = event.target;
|
|
76
|
+
inValue.value = target?.value;
|
|
77
|
+
displayValue.value = target?.value;
|
|
78
|
+
if (props.whenInputValid) {
|
|
79
|
+
invokeValidators();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
function onChange(event) {
|
|
83
|
+
emit('change', inValue.value, event);
|
|
84
|
+
}
|
|
85
|
+
function onFocus(event) {
|
|
86
|
+
whenFocus();
|
|
87
|
+
displayValue.value = inValue.value;
|
|
88
|
+
emit('focus', event);
|
|
89
|
+
}
|
|
90
|
+
function onBlur(event) {
|
|
91
|
+
whenBlur();
|
|
92
|
+
invokeValidators();
|
|
93
|
+
emit('blur', event);
|
|
94
|
+
changeDisplay();
|
|
95
|
+
}
|
|
96
|
+
function onKeydown(event) {
|
|
97
|
+
emit('keydown', event);
|
|
98
|
+
}
|
|
99
|
+
function onKeyup(event) {
|
|
100
|
+
emit('keyup', event);
|
|
101
|
+
}
|
|
102
|
+
function onClick(event) {
|
|
103
|
+
emit('click', event);
|
|
104
|
+
}
|
|
105
|
+
watch(() => props.modelValue, neo => {
|
|
106
|
+
inValue.value = neo;
|
|
107
|
+
}, {
|
|
108
|
+
immediate: true
|
|
109
|
+
});
|
|
110
|
+
watch(inValue, neo => {
|
|
111
|
+
if (!focused.value) {
|
|
112
|
+
changeDisplay();
|
|
113
|
+
} else {
|
|
114
|
+
displayValue.value = neo;
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
expose({
|
|
118
|
+
el$,
|
|
119
|
+
input$
|
|
120
|
+
});
|
|
121
|
+
useRender(() => {
|
|
122
|
+
const yInputProps = chooseProps(props, YInput.props);
|
|
123
|
+
return _createVNode(YInput, _mergeProps({
|
|
124
|
+
"class": [CLASS_NAME]
|
|
125
|
+
}, yInputProps, {
|
|
126
|
+
"modelValue": inValue.value,
|
|
127
|
+
"onUpdate:modelValue": onUpdateModel,
|
|
128
|
+
"focused": focused.value,
|
|
129
|
+
"onClick": onClick,
|
|
130
|
+
"onMousedown:display": $event => emit('mousedown:display', $event)
|
|
131
|
+
}), {
|
|
132
|
+
default: defaultProps => _createVNode("div", {
|
|
133
|
+
"class": [`${CLASS_NAME}__field`],
|
|
134
|
+
"data-id": defaultProps.attrId,
|
|
135
|
+
"ref": 'field'
|
|
136
|
+
}, [props.floating ? el$.value && YInput.methods.createLabel.call(el$.value) : undefined, slots.default ? () => slots.default(defaultProps) : undefined, _createVNode("textarea", _mergeProps({
|
|
137
|
+
"ref": input$,
|
|
138
|
+
"id": `y-input--${UID}`
|
|
139
|
+
}, attrs, {
|
|
140
|
+
"onInput": onInput,
|
|
141
|
+
"onFocus": onFocus,
|
|
142
|
+
"onBlur": onBlur,
|
|
143
|
+
"onChange": onChange,
|
|
144
|
+
"onKeydown": onKeydown,
|
|
145
|
+
"onKeyup": onKeyup
|
|
146
|
+
}), null)]),
|
|
147
|
+
label: slots.label ? () => slots.label?.() : undefined,
|
|
148
|
+
'helper-text': slots['helper-text'] ? () => slots['helper-text']?.() : undefined
|
|
149
|
+
});
|
|
150
|
+
});
|
|
151
|
+
return {
|
|
152
|
+
el$,
|
|
153
|
+
input$
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
//# sourceMappingURL=YTextarea.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YTextarea.mjs","names":["defineComponent","getCurrentInstance","nextTick","ref","watch","useRender","useFocus","chooseProps","getUid","propsFactory","YInput","pressYInputPropsOptions","pressYTextareaPropsOptions","displayText","String","Function","whenInputValid","Boolean","Number","variation","CLASS_NAME","YTextarea","name","props","emits","v","e","input","change","focus","blur","click","keydown","keyup","slots","Object","setup","_ref","attrs","emit","expose","UID","el$","input$","inValue","displayValue","focused","whenFocus","whenBlur","onUpdateModel","value","changeDisplay","vm","undefined","text","call","invokeValidators","onInput","event","target","onChange","onFocus","onBlur","onKeydown","onKeyup","onClick","modelValue","neo","immediate","yInputProps","_createVNode","_mergeProps","$event","default","defaultProps","attrId","floating","methods","createLabel","label"],"sources":["../../../src/components/textarea/YTextarea.tsx"],"sourcesContent":["import {\r\n SlotsType,\r\n defineComponent,\r\n getCurrentInstance,\r\n nextTick,\r\n ref,\r\n watch,\r\n} from 'vue';\r\nimport type { PropType } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useFocus } from '../../composables/focus';\r\nimport { chooseProps, getUid, propsFactory } from '../../util';\r\nimport { YInput, pressYInputPropsOptions } from '../input';\r\n\r\nimport './YTextarea.scss';\r\n\r\nexport const pressYTextareaPropsOptions = propsFactory(\r\n {\r\n displayText: [String, Function] as PropType<\r\n string | ((value: any) => string)\r\n >,\r\n whenInputValid: [Boolean, Number] as PropType<boolean | number>,\r\n ...pressYInputPropsOptions({\r\n variation: 'filled',\r\n }),\r\n },\r\n 'YTextarea',\r\n);\r\n\r\nconst CLASS_NAME = 'y-textarea';\r\n\r\nexport const YTextarea = defineComponent({\r\n name: 'YTextarea',\r\n props: pressYTextareaPropsOptions(),\r\n emits: {\r\n 'update:modelValue': (v: any) => true,\r\n 'update:focused': (v: boolean) => true,\r\n 'mousedown:display': (e: MouseEvent) => true,\r\n input: (v: any) => true,\r\n change: (v: any, e: Event) => true,\r\n focus: (e: FocusEvent) => true,\r\n blur: (e: FocusEvent) => true,\r\n click: (e: MouseEvent) => true,\r\n keydown: (e: KeyboardEvent) => true,\r\n keyup: (e: KeyboardEvent) => true,\r\n },\r\n slots: Object as SlotsType<{\r\n default: any;\r\n label: any;\r\n 'helper-text': any;\r\n }>,\r\n setup(props, { attrs, emit, slots, expose }) {\r\n const UID = getUid();\r\n const el$ = ref<YInput>();\r\n const input$ = ref();\r\n const inValue = ref<any>('');\r\n const displayValue = ref('');\r\n const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\r\n\r\n function onUpdateModel(value: any) {\r\n emit('update:modelValue', value);\r\n }\r\n\r\n function changeDisplay() {\r\n const vm = getCurrentInstance();\r\n const { displayText } = props;\r\n if (displayText !== undefined) {\r\n let text = inValue.value;\r\n if (typeof displayText === 'string') {\r\n text = displayText;\r\n }\r\n if (displayText && typeof displayText === 'function') {\r\n text = (displayText as any).call(vm, text);\r\n }\r\n nextTick(() => {\r\n displayValue.value = text as string;\r\n });\r\n }\r\n }\r\n\r\n function invokeValidators() {\r\n //\r\n }\r\n\r\n function onInput(event: Event) {\r\n emit('input', event);\r\n const target = event.target as HTMLInputElement | null;\r\n inValue.value = target?.value;\r\n displayValue.value = target?.value as string;\r\n if (props.whenInputValid) {\r\n invokeValidators();\r\n }\r\n }\r\n\r\n function onChange(event: Event) {\r\n emit('change', inValue.value, event);\r\n }\r\n\r\n function onFocus(event: FocusEvent) {\r\n whenFocus();\r\n displayValue.value = inValue.value as string;\r\n emit('focus', event);\r\n }\r\n\r\n function onBlur(event: FocusEvent) {\r\n whenBlur();\r\n invokeValidators();\r\n emit('blur', event);\r\n changeDisplay();\r\n }\r\n\r\n function onKeydown(event: KeyboardEvent) {\r\n emit('keydown', event);\r\n }\r\n\r\n function onKeyup(event: KeyboardEvent) {\r\n emit('keyup', event);\r\n }\r\n\r\n function onClick(event: MouseEvent) {\r\n emit('click', event);\r\n }\r\n\r\n watch(\r\n () => props.modelValue,\r\n (neo: any) => {\r\n inValue.value = neo;\r\n },\r\n {\r\n immediate: true,\r\n },\r\n );\r\n\r\n watch(inValue, (neo: string) => {\r\n if (!focused.value) {\r\n changeDisplay();\r\n } else {\r\n displayValue.value = neo;\r\n }\r\n });\r\n\r\n expose({\r\n el$,\r\n input$,\r\n });\r\n\r\n useRender(() => {\r\n const yInputProps = chooseProps(props, YInput.props);\r\n return (\r\n <YInput\r\n class={[CLASS_NAME]}\r\n {...yInputProps}\r\n modelValue={inValue.value}\r\n onUpdate:modelValue={onUpdateModel}\r\n focused={focused.value}\r\n onClick={onClick}\r\n onMousedown:display={($event) => emit('mousedown:display', $event)}\r\n >\r\n {{\r\n default: (defaultProps: any) => (\r\n <div\r\n class={[`${CLASS_NAME}__field`]}\r\n data-id={defaultProps.attrId}\r\n ref={'field'}\r\n >\r\n {props.floating\r\n ? el$.value &&\r\n YInput.methods!.createLabel.call(el$.value)\r\n : undefined}\r\n {slots.default ? () => slots.default(defaultProps) : undefined}\r\n {\r\n <textarea\r\n ref={input$}\r\n id={`y-input--${UID}`}\r\n {...attrs}\r\n onInput={onInput}\r\n onFocus={onFocus}\r\n onBlur={onBlur}\r\n onChange={onChange}\r\n onKeydown={onKeydown}\r\n onKeyup={onKeyup}\r\n ></textarea>\r\n }\r\n </div>\r\n ),\r\n label: slots.label ? () => slots.label?.() : undefined,\r\n 'helper-text': slots['helper-text']\r\n ? () => slots['helper-text']?.()\r\n : undefined,\r\n }}\r\n </YInput>\r\n );\r\n });\r\n\r\n return {\r\n el$,\r\n input$,\r\n };\r\n },\r\n});\r\n\r\nexport type YTextarea = InstanceType<typeof YTextarea>;\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.y-textarea {
|
|
2
|
+
--y-textarea-horizon-padding: 10px;
|
|
3
|
+
|
|
4
|
+
&__field {
|
|
5
|
+
position: relative;
|
|
6
|
+
flex: 1 1 auto;
|
|
7
|
+
min-height: 36px;
|
|
8
|
+
min-width: 0.000000001px;
|
|
9
|
+
padding: 1px 0;
|
|
10
|
+
border-radius: inherit;
|
|
11
|
+
|
|
12
|
+
> textarea {
|
|
13
|
+
position: relative;
|
|
14
|
+
outline: none;
|
|
15
|
+
padding: 8px var(--y-textarea-horizon-padding, 10px);
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
line-height: 1.2;
|
|
19
|
+
font-size: 0.875rem;
|
|
20
|
+
color: inherit;
|
|
21
|
+
border-radius: inherit;
|
|
22
|
+
margin: 1px;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/textarea/index.ts"],"sourcesContent":["export * from './YTextarea';\r\n"],"mappings":""}
|