@varlet/ui 2.11.7 → 2.11.9-alpha.1687881786307

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.
Files changed (43) hide show
  1. package/README.md +48 -1
  2. package/README.zh-CN.md +49 -1
  3. package/es/checkbox/checkbox.css +1 -1
  4. package/es/chip/chip.css +1 -1
  5. package/es/countdown/countdown.css +1 -0
  6. package/es/countdown/style/index.mjs +1 -0
  7. package/es/date-picker/date-picker.css +1 -1
  8. package/es/field-decorator/FieldDecorator.mjs +3 -0
  9. package/es/field-decorator/fieldDecorator.css +1 -1
  10. package/es/index.bundle.mjs +1 -1
  11. package/es/index.mjs +1 -1
  12. package/es/input/input.css +1 -1
  13. package/es/menu/Menu.mjs +2 -2
  14. package/es/menu/props.mjs +5 -0
  15. package/es/menu/usePopover.mjs +14 -9
  16. package/es/option/option.css +1 -1
  17. package/es/radio/radio.css +1 -1
  18. package/es/select/Select.mjs +17 -8
  19. package/es/select/select.css +1 -1
  20. package/es/style.css +1 -1
  21. package/es/themes/dark/checkbox.mjs +2 -1
  22. package/es/themes/dark/chip.mjs +2 -1
  23. package/es/themes/dark/countdown.mjs +3 -0
  24. package/es/themes/dark/datePicker.mjs +3 -1
  25. package/es/themes/dark/index.mjs +3 -1
  26. package/es/themes/dark/option.mjs +3 -0
  27. package/es/themes/dark/radio.mjs +2 -1
  28. package/es/themes/dark/timePicker.mjs +2 -1
  29. package/es/time-picker/timePicker.css +1 -1
  30. package/es/tooltip/Tooltip.mjs +2 -2
  31. package/es/tooltip/props.mjs +5 -0
  32. package/es/varlet.esm.js +5510 -5485
  33. package/highlight/web-types.en-US.json +27 -1
  34. package/highlight/web-types.zh-CN.json +23 -1
  35. package/lib/style.css +1 -1
  36. package/lib/varlet.cjs.js +70 -32
  37. package/package.json +6 -6
  38. package/types/bottomNavigation.d.ts +5 -5
  39. package/types/bottomNavigationItem.d.ts +2 -2
  40. package/types/menu.d.ts +1 -0
  41. package/types/picker.d.ts +1 -1
  42. package/types/tooltip.d.ts +1 -0
  43. package/umd/varlet.js +5 -5
package/README.md CHANGED
@@ -79,7 +79,54 @@ pnpm add @varlet/ui
79
79
  import App from './App.vue'
80
80
  import Varlet from '@varlet/ui'
81
81
  import { createApp } from 'vue'
82
- import '@varlet/ui/es/style.js'
82
+ import '@varlet/ui/es/style'
83
83
 
84
84
  createApp(App).use(Varlet).mount('#app')
85
85
  ```
86
+
87
+ ### Playground
88
+
89
+ See [Varlet UI Playground](https://varlet.gitee.io/varlet-ui-playground).
90
+
91
+ ### Contribution
92
+
93
+ See [Contributing Guide](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).
94
+
95
+ ### Start On Cloud IDE
96
+
97
+ See [Cloud IDE](https://idegithub.com/varletjs/varlet).
98
+
99
+ ### Community
100
+
101
+ We recommend that [issue](https://github.com/varletjs/varlet/issues) be used for problem feedback, or others:
102
+
103
+ * Wechat group
104
+
105
+ <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/community.png" />
106
+
107
+ * Join the [Discord](https://discord.gg/Dmb8ydBHkw)
108
+
109
+ ### Thanks to contributors
110
+
111
+ <a href="https://github.com/varletjs/varlet/graphs/contributors">
112
+ <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
113
+ </a>
114
+
115
+ ### Thanks to the following sponsors
116
+
117
+ <a href="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg">
118
+ <img src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg">
119
+ </a>
120
+
121
+ ### Sponsor this project
122
+
123
+ Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.
124
+
125
+ #### Afdian
126
+
127
+ <a href="https://afdian.net/a/haoziqaq">https://afdian.net/a/haoziqaq</a>
128
+
129
+ #### Wechat / Alipay
130
+
131
+ <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg" />
132
+ <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg" />
package/README.zh-CN.md CHANGED
@@ -79,7 +79,55 @@ pnpm add @varlet/ui
79
79
  import App from './App.vue'
80
80
  import Varlet from '@varlet/ui'
81
81
  import { createApp } from 'vue'
82
- import '@varlet/ui/es/style.js'
82
+ import '@varlet/ui/es/style'
83
83
 
84
84
  createApp(App).use(Varlet).mount('#app')
85
85
  ```
86
+
87
+ ### 游乐场
88
+
89
+ 在 [Varlet UI Playground](https://varlet.gitee.io/varlet-ui-playground) 对组件进行在线编辑。
90
+
91
+ ### 贡献
92
+
93
+ 请参考 [Contributing Guide](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md)。
94
+
95
+ ### 在 Cloud IDE 中进行在线开发和调试
96
+
97
+ 在 [Cloud IDE](https://idegithub.com/varletjs/varlet) 对源码进行在线调试。
98
+
99
+
100
+ ### 反馈和交流
101
+
102
+ 我们推荐使用`issue`列表进行最直接有效的反馈,也可以下面的方式
103
+
104
+ * 微信
105
+
106
+ <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/community.png" />
107
+
108
+ * 加入 [Discord](https://discord.gg/Dmb8ydBHkw) 社区交流
109
+
110
+ ### 感谢贡献者们做出的努力
111
+
112
+ <a href="https://github.com/varletjs/varlet/graphs/contributors">
113
+ <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
114
+ </a>
115
+
116
+ ### 感谢以下赞助者
117
+
118
+ <a href="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg">
119
+ <img src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg">
120
+ </a>
121
+
122
+ ### 赞助本项目
123
+
124
+ 赞助本项目,支持我们更好的创作。推荐使用爱发电进行订阅,您的头像将出现在本项目中。
125
+
126
+ #### 爱发电
127
+
128
+ <a href="https://afdian.net/a/haoziqaq">https://afdian.net/a/haoziqaq</a>
129
+
130
+ #### 微信 / 支付宝
131
+
132
+ <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg" />
133
+ <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg" />
@@ -1 +1 @@
1
- :root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-padding: 6px 6px 6px 0; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
1
+ :root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
package/es/chip/chip.css CHANGED
@@ -1 +1 @@
1
- :root { --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px; --chip-mini-font-size: var(--font-size-xs); --chip-small-font-size: var(--font-size-sm); --chip-normal-font-size: var(--font-size-md); --chip-large-font-size: var(--font-size-lg);}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s;}.var-chip--default { color: inherit; background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--chip-normal-font-size); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--chip-large-font-size); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--chip-small-font-size); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--chip-mini-font-size); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}
1
+ :root { --chip-default-text-color: #555; --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px; --chip-mini-font-size: var(--font-size-xs); --chip-small-font-size: var(--font-size-sm); --chip-normal-font-size: var(--font-size-md); --chip-large-font-size: var(--font-size-lg);}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s;}.var-chip--default { color: var(--chip-default-text-color); background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--chip-normal-font-size); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--chip-large-font-size); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--chip-small-font-size); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--chip-mini-font-size); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}
@@ -0,0 +1 @@
1
+ :root { --countdown-text-color: #555;}.var-countdown { color: var(--countdown-text-color);}
@@ -1,2 +1,3 @@
1
1
  import '../../styles/common.css'
2
+ import '../countdown.css'
2
3
  import '../CountdownSfc.css'
@@ -1 +1 @@
1
- :root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
1
+ :root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --year-picker-item-color: #555; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--picker-header-color);}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--year-picker-item-color);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
@@ -81,6 +81,9 @@ function __render__(_ctx, _cache) {
81
81
  to: "body"
82
82
  }, [_createElementVNode("span", {
83
83
  ref: "placeholderTextEl",
84
+ style: {
85
+ "font-size": "var(--field-decorator-placeholder-size)"
86
+ },
84
87
  class: _normalizeClass(_ctx.classes(_ctx.n('placeholder-text'), _ctx.n('$--ellipsis'), [_ctx.size === 'small', _ctx.n('placeholder-text--small')]))
85
88
  }, _toDisplayString(_ctx.placeholder), 3
86
89
  /* TEXT, CLASS */
@@ -1 +1 @@
1
- :root { --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex; justify-content: center; align-items: center;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.2s;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: var(--field-decorator-standard-normal-padding-top) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { max-width: 100%; transform: translate(0, var(--field-decorator-standard-normal-placeholder-translate-y));}.var-field-decorator--standard .var-field-decorator--placeholder-hint { max-width: 133%; transform: translate(0, 0) scale(0.75) !important;}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: var(--field-decorator-outlined-normal-padding-top) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { max-width: calc(100% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(var(--field-decorator-outlined-normal-padding-left), var(--field-decorator-outlined-normal-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined .var-field-decorator--placeholder-hint { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(calc(var(--field-decorator-outlined-normal-padding-left)), -50%) scale(0.75);}.var-field-decorator--outlined .var-field-decorator__line { min-width: 0; width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator__line-legend--hint { max-width: 100%;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: var(--field-decorator-standard-small-padding-top) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, var(--field-decorator-standard-small-placeholder-translate-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: var(--field-decorator-outlined-small-padding-top) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { max-width: calc(100% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); transform: translate(var(--field-decorator-outlined-small-padding-left), var(--field-decorator-outlined-small-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--placeholder-hint { transform: translate(calc(var(--field-decorator-outlined-small-padding-left)), -50%) scale(0.75);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator__placeholder-text { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); position: absolute; z-index: -1; display: inline-block; pointer-events: none; opacity: 0;}.var-field-decorator__placeholder-text--small { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right));}
1
+ :root { --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex; justify-content: center; align-items: center;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.2s;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: var(--field-decorator-standard-normal-padding-top) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { max-width: 100%; transform: translate(0, var(--field-decorator-standard-normal-placeholder-translate-y));}.var-field-decorator--standard .var-field-decorator--placeholder-hint { max-width: 133%; transform: translate(0, 0) scale(0.75) !important;}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: var(--field-decorator-outlined-normal-padding-top) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { max-width: calc(100% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(var(--field-decorator-outlined-normal-padding-left), var(--field-decorator-outlined-normal-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined .var-field-decorator--placeholder-hint { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(calc(var(--field-decorator-outlined-normal-padding-left)), -50%) scale(0.75);}.var-field-decorator--outlined .var-field-decorator__line { min-width: 0; width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator__line-legend--hint { max-width: 100%;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: var(--field-decorator-standard-small-padding-top) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, var(--field-decorator-standard-small-placeholder-translate-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: var(--field-decorator-outlined-small-padding-top) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { max-width: calc(100% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); transform: translate(var(--field-decorator-outlined-small-padding-left), var(--field-decorator-outlined-small-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--placeholder-hint { transform: translate(calc(var(--field-decorator-outlined-small-padding-left)), -50%) scale(0.75);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator__placeholder-text { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); position: absolute; z-index: -1; display: inline-block; pointer-events: none; opacity: 0; height: 0;}.var-field-decorator__placeholder-text--small { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right));}
@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
241
241
  import './tooltip/style/index.mjs'
242
242
  import './uploader/style/index.mjs'
243
243
 
244
- const version = '2.11.7'
244
+ const version = '2.11.9-alpha.1687881786307'
245
245
 
246
246
  function install(app) {
247
247
  ActionSheet.install && app.use(ActionSheet)
package/es/index.mjs CHANGED
@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
160
160
  export * from './tooltip/index.mjs'
161
161
  export * from './uploader/index.mjs'
162
162
 
163
- const version = '2.11.7'
163
+ const version = '2.11.9-alpha.1687881786307'
164
164
 
165
165
  function install(app) {
166
166
  ActionSheet.install && app.use(ActionSheet)
@@ -1 +1 @@
1
- :root { --input-input-height: 24px; --input-textarea-height: auto;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: var(--input-input-height); padding: 0; outline: none; border: none; background: transparent; color: var(--field-decorator-text-color); caret-color: var(--field-decorator-focus-color); transition: color 0.25s; font: inherit;}.var-input__input::placeholder { color: var(--input-placeholder-color);}.var-input--textarea { height: var(--input-textarea-height); min-height: var(--input-input-height);}.var-input--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--field-decorator-error-color);}.var-input--caret-error { caret-color: var(--field-decorator-error-color);}
1
+ :root { --input-input-height: 24px; --input-input-font-size: 16px; --input-textarea-height: auto;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: var(--input-input-height); padding: 0; outline: none; border: none; background: transparent; color: var(--field-decorator-text-color); caret-color: var(--field-decorator-focus-color); font-size: var(--input-input-font-size); transition: color 0.25s;}.var-input__input::placeholder { color: var(--input-placeholder-color);}.var-input--textarea { height: var(--input-textarea-height); min-height: var(--input-input-height);}.var-input--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--field-decorator-error-color);}.var-input--caret-error { caret-color: var(--field-decorator-error-color);}
package/es/menu/Menu.mjs CHANGED
@@ -12,7 +12,7 @@ import { renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModif
12
12
  function __render__(_ctx, _cache) {
13
13
  return _openBlock(), _createElementBlock("div", {
14
14
  ref: "host",
15
- class: _normalizeClass(_ctx.n()),
15
+ class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'))),
16
16
  onClick: _cache[3] || (_cache[3] = function () {
17
17
  return _ctx.handleHostClick && _ctx.handleHostClick(...arguments);
18
18
  }),
@@ -36,7 +36,7 @@ function __render__(_ctx, _cache) {
36
36
  zIndex: _ctx.zIndex,
37
37
  width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : undefined
38
38
  }),
39
- class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color')], [_ctx.defaultStyle, _ctx.formatElevation(_ctx.elevation, 3)])),
39
+ class: _normalizeClass(_ctx.classes(_ctx.n('menu'), _ctx.n('$--box'), [_ctx.defaultStyle, _ctx.n('--menu-background-color')], [_ctx.defaultStyle, _ctx.formatElevation(_ctx.elevation, 3)])),
40
40
  onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
41
41
  onMouseenter: _cache[1] || (_cache[1] = function () {
42
42
  return _ctx.handlePopoverMouseenter && _ctx.handlePopoverMouseenter(...arguments);
package/es/menu/props.mjs CHANGED
@@ -54,9 +54,14 @@ export var props = {
54
54
  type: Boolean,
55
55
  default: true
56
56
  },
57
+ closeOnClickReference: {
58
+ type: Boolean,
59
+ default: false
60
+ },
57
61
  onOpen: defineListenerProp(),
58
62
  onOpened: defineListenerProp(),
59
63
  onClose: defineListenerProp(),
60
64
  onClosed: defineListenerProp(),
65
+ onClickOutside: defineListenerProp(),
61
66
  'onUpdate:show': defineListenerProp()
62
67
  };
@@ -111,20 +111,24 @@ export function usePopover(options) {
111
111
  }();
112
112
 
113
113
  var handleHostClick = () => {
114
- open();
114
+ if (options.closeOnClickReference && show.value) {
115
+ close();
116
+ } else {
117
+ open();
118
+ }
115
119
  };
116
120
 
117
121
  var handlePopoverClose = () => {
118
- show.value = false;
119
- call(options['onUpdate:show'], false);
122
+ close();
120
123
  };
121
124
 
122
- var handleClickOutside = () => {
125
+ var handleClickOutside = e => {
123
126
  if (options.trigger !== 'click') {
124
127
  return;
125
128
  }
126
129
 
127
130
  handlePopoverClose();
131
+ call(options.onClickOutside, e);
128
132
  };
129
133
 
130
134
  var getPosition = () => {
@@ -246,7 +250,9 @@ export function usePopover(options) {
246
250
  placement,
247
251
  modifiers
248
252
  };
249
- }; // expose
253
+ };
254
+
255
+ var getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value; // expose
250
256
 
251
257
 
252
258
  var resize = () => {
@@ -273,16 +279,15 @@ export function usePopover(options) {
273
279
  call(options['onUpdate:show'], false);
274
280
  };
275
281
 
276
- useClickOutside(host, 'click', handleClickOutside);
282
+ useClickOutside(getReference, 'click', handleClickOutside);
277
283
  watch(() => options.offsetX, resize);
278
284
  watch(() => options.offsetY, resize);
279
285
  watch(() => options.placement, resize);
280
286
  watch(() => options.disabled, close);
281
287
  onMounted(() => {
282
- var _host$value;
288
+ var _getReference;
283
289
 
284
- var reference = options.reference ? (_host$value = host.value) == null ? void 0 : _host$value.querySelector(options.reference) : host.value;
285
- popoverInstance = createPopper(reference != null ? reference : host.value, popover.value, getPopperOptions());
290
+ popoverInstance = createPopper((_getReference = getReference()) != null ? _getReference : host.value, popover.value, getPopperOptions());
286
291
  });
287
292
  onUnmounted(() => {
288
293
  popoverInstance.destroy();
@@ -1 +1 @@
1
- :root { --option-height: 38px; --option-padding: 0 12px; --option-selected-background: var(--field-decorator-focus-color);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center;}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}
1
+ :root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --options-text-color: #555;}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--options-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center; font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}
@@ -1 +1 @@
1
- :root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-padding: 6px 6px 6px 0;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
1
+ :root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
@@ -40,16 +40,17 @@ function __render__(_ctx, _cache) {
40
40
  return _ctx.handleFocus && _ctx.handleFocus(...arguments);
41
41
  })
42
42
  }, [_createVNode(_component_var_menu, {
43
- class: _normalizeClass(_ctx.n('menu')),
44
43
  "var-select-cover": "",
45
44
  "same-width": "",
45
+ "close-on-click-reference": "",
46
+ show: _ctx.showMenu,
47
+ "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.showMenu = $event),
48
+ class: _normalizeClass(_ctx.n('menu')),
46
49
  "offset-y": _ctx.offsetY,
47
50
  disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
48
51
  placement: _ctx.placement,
49
52
  "default-style": false,
50
- show: _ctx.isFocus,
51
- "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.isFocus = $event),
52
- onClose: _ctx.handleBlur
53
+ onClickOutside: _ctx.handleBlur
53
54
  }, {
54
55
  menu: _withCtx(() => [_createElementVNode("div", {
55
56
  ref: "menuEl",
@@ -136,9 +137,9 @@ function __render__(_ctx, _cache) {
136
137
  }, _toDisplayString(_ctx.placeholder), 7
137
138
  /* TEXT, CLASS, STYLE */
138
139
  )) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "arrow-icon", {
139
- focus: _ctx.isFocus
140
+ focus: _ctx.showMenu
140
141
  }, () => [_createVNode(_component_var_icon, {
141
- class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
142
+ class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.showMenu, _ctx.n('--arrow-rotate')])),
142
143
  "var-select-cover": "",
143
144
  name: "menu-down",
144
145
  transition: 300
@@ -162,7 +163,7 @@ function __render__(_ctx, _cache) {
162
163
 
163
164
  }, 8
164
165
  /* PROPS */
165
- , ["class", "offset-y", "disabled", "placement", "show", "onClose"]), _createVNode(_component_var_form_details, {
166
+ , ["show", "class", "offset-y", "disabled", "placement", "onClickOutside"]), _createVNode(_component_var_form_details, {
166
167
  "error-message": _ctx.errorMessage,
167
168
  onClick: _cache[2] || (_cache[2] = _withModifiers(() => {}, ["stop"]))
168
169
  }, null, 8
@@ -185,6 +186,7 @@ var __sfc__ = defineComponent({
185
186
 
186
187
  setup(props) {
187
188
  var isFocus = ref(false);
189
+ var showMenu = ref(false);
188
190
  var multiple = computed(() => props.multiple);
189
191
  var focusColor = computed(() => props.focusColor);
190
192
  var label = ref('');
@@ -327,6 +329,7 @@ var __sfc__ = defineComponent({
327
329
  return;
328
330
  }
329
331
 
332
+ blur();
330
333
  call(onBlur);
331
334
  validateWithTrigger('onBlur');
332
335
  };
@@ -352,7 +355,10 @@ var __sfc__ = defineComponent({
352
355
  call(props['onUpdate:modelValue'], selectedValue);
353
356
  call(onChange, selectedValue);
354
357
  validateWithTrigger('onChange');
355
- !multiple && (isFocus.value = false);
358
+
359
+ if (!multiple) {
360
+ blur();
361
+ }
356
362
  };
357
363
 
358
364
  var handleClear = () => {
@@ -437,11 +443,13 @@ var __sfc__ = defineComponent({
437
443
  var focus = () => {
438
444
  offsetY.value = toPxNum(props.offsetY);
439
445
  isFocus.value = true;
446
+ showMenu.value = true;
440
447
  }; // expose
441
448
 
442
449
 
443
450
  var blur = () => {
444
451
  isFocus.value = false;
452
+ showMenu.value = false;
445
453
  }; // expose
446
454
 
447
455
 
@@ -481,6 +489,7 @@ var __sfc__ = defineComponent({
481
489
  return {
482
490
  offsetY,
483
491
  isFocus,
492
+ showMenu,
484
493
  errorMessage,
485
494
  formDisabled: form == null ? void 0 : form.disabled,
486
495
  formReadonly: form == null ? void 0 : form.readonly,
@@ -1 +1 @@
1
- :root { --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-scroller-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-outlined-scroller-margin: 0;}.var-select__menu[var-select-cover] { width: 100%; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow-x: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center;}.var-select__placeholder { max-width: 100%; position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--scroller-standard { margin: var(--select-standard-scroller-margin);}.var-select--scroller-outlined { margin: 0;}.var-select--scroller-non-hint { margin: 0;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
1
+ :root { --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-scroller-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-outlined-scroller-margin: 0; --select-label-font-size: 16px;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow-x: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--scroller-standard { margin: var(--select-standard-scroller-margin);}.var-select--scroller-outlined { margin: 0;}.var-select--scroller-non-hint { margin: 0;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}