@touchvue/ui 1.0.0-beta.53 → 1.0.0-beta.54

package/theme/components/index.css

@@ -2590,6 +2590,9 @@ html body .height-full {
   --day-item-on-border: var(--day-item-border);
   --day-item-on-bg: var(--color-primary);
   --day-item-on-color: var(--color-bg);
+  --day-item-checked-border: var(--day-item-border);
+  --day-item-checked-bg: var(--color-primary);
+  --day-item-checked-color: var(--color-bg);
   --day-item-sun-border: var(--day-item-border);
   --day-item-sun-bg: var(--day-item-bg);
   --day-item-sun-color: var(--color-danger);
@@ -2759,10 +2762,12 @@ html body .height-full {
   background-size: var(--year-bg-size);
   gap: var(--year-gap);
   border-right: var(--year-divider);
+}
+.to-calendar-year .to-scroll-content {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.to-calendar-year::-webkit-scrollbar {
+.to-calendar-year .to-scroll-content::-webkit-scrollbar {
   display: none;
 }
 .to-calendar-year-item {
@@ -2807,6 +2812,7 @@ html body .height-full {
   font-size: var(--year-item-size);
 }
 .to-calendar-month {
+  flex: 1;
   display: flex;
   align-items: center;
   align-self: flex-start;
@@ -2903,10 +2909,6 @@ html body .height-full {
   position: relative;
   padding: var(--day-item-padding);
 }
-.to-calendar-day-item.is-checked .to-calendar-day-item-content {
-  background: #0e0;
-  color: #fff;
-}
 .to-calendar-day-item-content {
   width: var(--day-item-width);
   height: var(--day-item-height);
@@ -3037,11 +3039,13 @@ html body .height-full {
 }
 .to-calendar-time-list {
   flex: 1;
-  height: 100%;
+}
+.to-calendar-time-list .to-scroll-content {
+  flex: 1;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.to-calendar-time-list::-webkit-scrollbar {
+.to-calendar-time-list .to-scroll-content::-webkit-scrollbar {
   display: none;
 }
 .to-calendar-time-item {
@@ -3993,13 +3997,14 @@ html body .height-full {
   --radius: var(--radius-fe);
   --weight: normal;
   --gap: 0;
+  --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
   --content-gap: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
   --suffix-padding: 0;
-  --suffix-gap: 1em;
+  --suffix-gap: 0;
   --prefix-text-padding: 0 0 0 1em;
   --prefix-text-bg: none;
   --prefix-text-bg-size: 100% 100%;
@@ -4020,6 +4025,7 @@ html body .height-full {
   --count-size: 1em;
   --count-padding: 0;
   --count-lh: var(--height);
+  --count-align: center;
   --lh: 1.5em;
   --fn-padding: 0 1em 1em;
   --fn-gap: 1em;
@@ -4028,7 +4034,7 @@ html body .height-full {
   --focus-border: var(--border);
   --focus-bg: var(--bg);
   --focus-color: var(--color);
-  --focus-shadow: none;
+  --focus-shadow: var(--shadow);
   --hover-border: var(--border);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-color: var(--color);
@@ -4046,13 +4052,14 @@ html body .height-full {
   padding: var(--padding);
   width: var(--width);
   height: var(--height);
+  box-shadow: var(--shadow);
 }
 .to-input-wrapper {
   width: 100%;
   height: 100%;
   color: var(--color);
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
@@ -4130,6 +4137,7 @@ html body .height-full {
   padding: var(--prefix-padding);
 }
 .to-input-suffix {
+  gap: var(--suffix-gap);
   padding: var(--suffix-padding);
 }
 .to-input-prefix-text {
@@ -4139,12 +4147,14 @@ html body .height-full {
   background-size: var(--prefix-text-bg-size);
   border-right: var(--prefix-text-border);
   font-weight: var(--prefix-text-weight);
-  font-size: var(--prefix-text-size);
   line-height: var(--prefix-text-lh);
 }
-.to-input-suffix-text span {
+.to-input-prefix-text span {
   font-size: var(--prefix-text-size);
 }
+.to-input-suffix-text span {
+  font-size: var(--suffix-text-size);
+}
 .to-input-suffix-text {
   padding: var(--suffix-text-padding);
   background: var(--suffix-text-bg);
@@ -4170,6 +4180,7 @@ html body .height-full {
   height: auto;
   min-height: 0;
   display: flex;
+  align-items: flex-start;
 }
 .to-input.type-textarea .to-input-box {
   resize: none;
@@ -4188,7 +4199,7 @@ html body .height-full {
   flex: 1;
   gap: var(--suggestion-gap);
 }
-.to-input-suggestion .to-button {
+.to-input-suggestion-item {
   --border: 0 none;
 }
 .to-input::before {
@@ -4240,6 +4251,7 @@ html body .height-full {
   font-weight: var(--count-weight);
   padding: var(--count-padding);
   line-height: var(--count-lh);
+  align-self: var(--count-align);
 }
 .to-input-count:only-child {
   flex: 1;
@@ -4247,10 +4259,16 @@ html body .height-full {
 .to-input-count-text {
   font-size: var(--count-size);
 }
+.to-input.type-textarea {
+  --count-align: flex-end;
+}
 .to-input.type-textarea .to-input-count {
   display: block;
   text-align: right;
 }
+.to-input.type-textarea:has(.to-input-fn) {
+  min-height: 8em;
+}
 .to-input.is-link {
   cursor: pointer;
 }
@@ -5652,7 +5670,6 @@ html body .height-full {
   --fn-padding: 0;
   --fn-gap: 0.5em;
   --list-gap: 0;
-  --item-gap: 0;
   --item-width: auto;
   --item-height: 3em;
   --item-padding: 0 1em;
@@ -5669,12 +5686,13 @@ html body .height-full {
   --item-size: 1em;
   --item-weight: normal;
   --item-align: left;
+  --item-valign: center;
+  --item-icon-margin: 0.5em;
   --item-left-bg: none;
   --item-left-width: none;
   --item-right-bg: none;
   --item-right-width: none;
   --item-content-bg: none;
-  --item-content-gap: 0.5em;
   --item-content-bg-size: 100% 100%;
   --item-divider-width: 0;
   --item-divider-color: var(--color-border);
@@ -5718,12 +5736,15 @@ html body .height-full {
   --item-on-divider-color: var(--item-divider-color);
   --item-on-divider-height: var(--item-divider-height);
   --item-disabled-color: #d6d6d6;
+  --item-remove-margin: 0.5em;
+  --item-count-margin: 0.5em;
   --indicator-height: 0;
   --indicator-width: 100%;
   --indicator-radius: 0;
   --indicator-bg: none;
   --indicator-bg-size: 100% 100%;
   --indicator-order: 2;
+  --indicator-margin: 0;
   --list-scroll-area-height: 0.5em;
   --list-scroll-height: 0.2em;
   --list-scroll-border: 0 none;
@@ -5848,6 +5869,7 @@ html body .height-full {
   vertical-align: top;
   position: relative;
   gap: var(--list-gap);
+  align-items: var(--item-valign);
 }
 .to-tab.over-wrap .to-tab-wrapper {
   flex-wrap: wrap;
@@ -5862,7 +5884,6 @@ html body .height-full {
 }
 .to-tab-item {
   width: var(--item-width);
-  gap: var(--item-gap);
   height: var(--item-height);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -5882,6 +5903,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --color: inherit;
+  margin-right: var(--item-icon-margin);
 }
 .to-tab-item-pic {
   --width: 2em;
@@ -5940,10 +5962,18 @@ html body .height-full {
   --radius: 50%;
   --cursor: default;
   visibility: hidden;
+  margin-left: var(--item-remove-margin);
 }
 .to-tab-item:hover .to-tab-item-remove {
   visibility: visible;
 }
+.to-tab-item-count {
+  margin-left: var(--item-count-margin);
+  --radius: 50%;
+  --size: 0.8em;
+  --width: 0.8em;
+  --height: 0.8em;
+}
 .to-tab-indicator {
   order: var(--indicator-order);
   margin: 0 auto;
@@ -5952,6 +5982,7 @@ html body .height-full {
   background: var(--indicator-bg);
   background-size: var(--indicator-bg-size);
   border-radius: var(--indicator-radius);
+  margin-top: var(--indicator-margin);
   position: relative;
   visibility: hidden;
 }
@@ -5980,10 +6011,12 @@ html body .height-full {
 }
 .to-tab-item.is-on .to-tab-item-left {
   background: var(--item-on-left-bg);
+  background-size: 100% 100%;
   width: var(--item-on-left-width);
 }
 .to-tab-item.is-on .to-tab-item-right {
   background: var(--item-on-right-bg);
+  background-size: 100% 100%;
   width: var(--item-on-right-width);
 }
 .to-tab-item.is-on .to-tab-item-content {
@@ -7097,6 +7130,7 @@ html body .height-full {
   --item-radius: var(--radius-fe);
   --item-shadow: none;
   --item-gap: 0.5em;
+  --item-size: 1em;
   --item-hover-border: var(--item-border);
   --item-hover-color: var(--item-color);
   --item-hover-bg: rgba(0, 0, 0, 0.1);
@@ -7234,6 +7268,7 @@ html body .height-full {
   text-overflow: ellipsis;
   white-space: nowrap;
   gap: var(--item-gap);
+  font-size: var(--item-size);
 }
 .to-segment-icon {
   --width: 1em;
@@ -8144,7 +8179,9 @@ html body .height-full {
   background: var(--bg);
   background-size: var(--bg-size);
   cursor: pointer;
-  color: var(--color);
+}
+.to-cascader:empty {
+  height: 0;
 }
 .to-cascader::after {
   border: var(--border);
@@ -8168,6 +8205,7 @@ html body .height-full {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  color: var(--color);
 }
 .to-cascader-arrow {
   flex-shrink: 0;
@@ -8203,11 +8241,29 @@ html body .height-full {
 .to-cascader:active .to-cascader-arrow:before {
   color: var(--active-arrow-color);
 }
-.to-cascader.is-placeholder {
+.to-cascader.is-placeholder .to-cascader-content {
   color: var(--placeholder-color);
 }
 .to-cascader-group {
   display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.to-cascader-layer {
+  width: auto !important;
+}
+.to-cascader-options {
+  display: flex;
+}
+.to-cascader-group-content {
+  flex: 1;
+  width: 14em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.to-cascader-group-child {
+  flex: 1;
 }
 .to-cascader-item {
   cursor: pointer;

package/theme/index.css

@@ -2593,6 +2593,9 @@ html body .height-full {
   --day-item-on-border: var(--day-item-border);
   --day-item-on-bg: var(--color-primary);
   --day-item-on-color: var(--color-bg);
+  --day-item-checked-border: var(--day-item-border);
+  --day-item-checked-bg: var(--color-primary);
+  --day-item-checked-color: var(--color-bg);
   --day-item-sun-border: var(--day-item-border);
   --day-item-sun-bg: var(--day-item-bg);
   --day-item-sun-color: var(--color-danger);
@@ -2762,10 +2765,12 @@ html body .height-full {
   background-size: var(--year-bg-size);
   gap: var(--year-gap);
   border-right: var(--year-divider);
+}
+.to-calendar-year .to-scroll-content {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.to-calendar-year::-webkit-scrollbar {
+.to-calendar-year .to-scroll-content::-webkit-scrollbar {
   display: none;
 }
 .to-calendar-year-item {
@@ -2810,6 +2815,7 @@ html body .height-full {
   font-size: var(--year-item-size);
 }
 .to-calendar-month {
+  flex: 1;
   display: flex;
   align-items: center;
   align-self: flex-start;
@@ -2906,10 +2912,6 @@ html body .height-full {
   position: relative;
   padding: var(--day-item-padding);
 }
-.to-calendar-day-item.is-checked .to-calendar-day-item-content {
-  background: #0e0;
-  color: #fff;
-}
 .to-calendar-day-item-content {
   width: var(--day-item-width);
   height: var(--day-item-height);
@@ -3040,11 +3042,13 @@ html body .height-full {
 }
 .to-calendar-time-list {
   flex: 1;
-  height: 100%;
+}
+.to-calendar-time-list .to-scroll-content {
+  flex: 1;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.to-calendar-time-list::-webkit-scrollbar {
+.to-calendar-time-list .to-scroll-content::-webkit-scrollbar {
   display: none;
 }
 .to-calendar-time-item {
@@ -3996,13 +4000,14 @@ html body .height-full {
   --radius: var(--radius-fe);
   --weight: normal;
   --gap: 0;
+  --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
   --content-gap: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
   --suffix-padding: 0;
-  --suffix-gap: 1em;
+  --suffix-gap: 0;
   --prefix-text-padding: 0 0 0 1em;
   --prefix-text-bg: none;
   --prefix-text-bg-size: 100% 100%;
@@ -4023,6 +4028,7 @@ html body .height-full {
   --count-size: 1em;
   --count-padding: 0;
   --count-lh: var(--height);
+  --count-align: center;
   --lh: 1.5em;
   --fn-padding: 0 1em 1em;
   --fn-gap: 1em;
@@ -4031,7 +4037,7 @@ html body .height-full {
   --focus-border: var(--border);
   --focus-bg: var(--bg);
   --focus-color: var(--color);
-  --focus-shadow: none;
+  --focus-shadow: var(--shadow);
   --hover-border: var(--border);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-color: var(--color);
@@ -4049,13 +4055,14 @@ html body .height-full {
   padding: var(--padding);
   width: var(--width);
   height: var(--height);
+  box-shadow: var(--shadow);
 }
 .to-input-wrapper {
   width: 100%;
   height: 100%;
   color: var(--color);
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
@@ -4133,6 +4140,7 @@ html body .height-full {
   padding: var(--prefix-padding);
 }
 .to-input-suffix {
+  gap: var(--suffix-gap);
   padding: var(--suffix-padding);
 }
 .to-input-prefix-text {
@@ -4142,12 +4150,14 @@ html body .height-full {
   background-size: var(--prefix-text-bg-size);
   border-right: var(--prefix-text-border);
   font-weight: var(--prefix-text-weight);
-  font-size: var(--prefix-text-size);
   line-height: var(--prefix-text-lh);
 }
-.to-input-suffix-text span {
+.to-input-prefix-text span {
   font-size: var(--prefix-text-size);
 }
+.to-input-suffix-text span {
+  font-size: var(--suffix-text-size);
+}
 .to-input-suffix-text {
   padding: var(--suffix-text-padding);
   background: var(--suffix-text-bg);
@@ -4173,6 +4183,7 @@ html body .height-full {
   height: auto;
   min-height: 0;
   display: flex;
+  align-items: flex-start;
 }
 .to-input.type-textarea .to-input-box {
   resize: none;
@@ -4191,7 +4202,7 @@ html body .height-full {
   flex: 1;
   gap: var(--suggestion-gap);
 }
-.to-input-suggestion .to-button {
+.to-input-suggestion-item {
   --border: 0 none;
 }
 .to-input::before {
@@ -4243,6 +4254,7 @@ html body .height-full {
   font-weight: var(--count-weight);
   padding: var(--count-padding);
   line-height: var(--count-lh);
+  align-self: var(--count-align);
 }
 .to-input-count:only-child {
   flex: 1;
@@ -4250,10 +4262,16 @@ html body .height-full {
 .to-input-count-text {
   font-size: var(--count-size);
 }
+.to-input.type-textarea {
+  --count-align: flex-end;
+}
 .to-input.type-textarea .to-input-count {
   display: block;
   text-align: right;
 }
+.to-input.type-textarea:has(.to-input-fn) {
+  min-height: 8em;
+}
 .to-input.is-link {
   cursor: pointer;
 }
@@ -5655,7 +5673,6 @@ html body .height-full {
   --fn-padding: 0;
   --fn-gap: 0.5em;
   --list-gap: 0;
-  --item-gap: 0;
   --item-width: auto;
   --item-height: 3em;
   --item-padding: 0 1em;
@@ -5672,12 +5689,13 @@ html body .height-full {
   --item-size: 1em;
   --item-weight: normal;
   --item-align: left;
+  --item-valign: center;
+  --item-icon-margin: 0.5em;
   --item-left-bg: none;
   --item-left-width: none;
   --item-right-bg: none;
   --item-right-width: none;
   --item-content-bg: none;
-  --item-content-gap: 0.5em;
   --item-content-bg-size: 100% 100%;
   --item-divider-width: 0;
   --item-divider-color: var(--color-border);
@@ -5721,12 +5739,15 @@ html body .height-full {
   --item-on-divider-color: var(--item-divider-color);
   --item-on-divider-height: var(--item-divider-height);
   --item-disabled-color: #d6d6d6;
+  --item-remove-margin: 0.5em;
+  --item-count-margin: 0.5em;
   --indicator-height: 0;
   --indicator-width: 100%;
   --indicator-radius: 0;
   --indicator-bg: none;
   --indicator-bg-size: 100% 100%;
   --indicator-order: 2;
+  --indicator-margin: 0;
   --list-scroll-area-height: 0.5em;
   --list-scroll-height: 0.2em;
   --list-scroll-border: 0 none;
@@ -5851,6 +5872,7 @@ html body .height-full {
   vertical-align: top;
   position: relative;
   gap: var(--list-gap);
+  align-items: var(--item-valign);
 }
 .to-tab.over-wrap .to-tab-wrapper {
   flex-wrap: wrap;
@@ -5865,7 +5887,6 @@ html body .height-full {
 }
 .to-tab-item {
   width: var(--item-width);
-  gap: var(--item-gap);
   height: var(--item-height);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -5885,6 +5906,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --color: inherit;
+  margin-right: var(--item-icon-margin);
 }
 .to-tab-item-pic {
   --width: 2em;
@@ -5943,10 +5965,18 @@ html body .height-full {
   --radius: 50%;
   --cursor: default;
   visibility: hidden;
+  margin-left: var(--item-remove-margin);
 }
 .to-tab-item:hover .to-tab-item-remove {
   visibility: visible;
 }
+.to-tab-item-count {
+  margin-left: var(--item-count-margin);
+  --radius: 50%;
+  --size: 0.8em;
+  --width: 0.8em;
+  --height: 0.8em;
+}
 .to-tab-indicator {
   order: var(--indicator-order);
   margin: 0 auto;
@@ -5955,6 +5985,7 @@ html body .height-full {
   background: var(--indicator-bg);
   background-size: var(--indicator-bg-size);
   border-radius: var(--indicator-radius);
+  margin-top: var(--indicator-margin);
   position: relative;
   visibility: hidden;
 }
@@ -5983,10 +6014,12 @@ html body .height-full {
 }
 .to-tab-item.is-on .to-tab-item-left {
   background: var(--item-on-left-bg);
+  background-size: 100% 100%;
   width: var(--item-on-left-width);
 }
 .to-tab-item.is-on .to-tab-item-right {
   background: var(--item-on-right-bg);
+  background-size: 100% 100%;
   width: var(--item-on-right-width);
 }
 .to-tab-item.is-on .to-tab-item-content {
@@ -7100,6 +7133,7 @@ html body .height-full {
   --item-radius: var(--radius-fe);
   --item-shadow: none;
   --item-gap: 0.5em;
+  --item-size: 1em;
   --item-hover-border: var(--item-border);
   --item-hover-color: var(--item-color);
   --item-hover-bg: rgba(0, 0, 0, 0.1);
@@ -7237,6 +7271,7 @@ html body .height-full {
   text-overflow: ellipsis;
   white-space: nowrap;
   gap: var(--item-gap);
+  font-size: var(--item-size);
 }
 .to-segment-icon {
   --width: 1em;
@@ -8147,7 +8182,9 @@ html body .height-full {
   background: var(--bg);
   background-size: var(--bg-size);
   cursor: pointer;
-  color: var(--color);
+}
+.to-cascader:empty {
+  height: 0;
 }
 .to-cascader::after {
   border: var(--border);
@@ -8171,6 +8208,7 @@ html body .height-full {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  color: var(--color);
 }
 .to-cascader-arrow {
   flex-shrink: 0;
@@ -8206,11 +8244,29 @@ html body .height-full {
 .to-cascader:active .to-cascader-arrow:before {
   color: var(--active-arrow-color);
 }
-.to-cascader.is-placeholder {
+.to-cascader.is-placeholder .to-cascader-content {
   color: var(--placeholder-color);
 }
 .to-cascader-group {
   display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.to-cascader-layer {
+  width: auto !important;
+}
+.to-cascader-options {
+  display: flex;
+}
+.to-cascader-group-content {
+  flex: 1;
+  width: 14em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.to-cascader-group-child {
+  flex: 1;
 }
 .to-cascader-item {
   cursor: pointer;