@touchvue/ui 1.0.0-beta.45 → 1.0.0-beta.47

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 (36) hide show
  1. package/es/components/button/src/button.vue.d.ts +2 -0
  2. package/es/components/float/index.d.ts +15 -0
  3. package/es/components/float/src/Float.vue.d.ts +9 -0
  4. package/es/components/float/src/float.d.ts +4 -0
  5. package/es/components/grid/src/grid-item.vue.d.ts +2 -9
  6. package/es/components/scroll/index.d.ts +3 -3
  7. package/es/components/scroll/src/Scroll.vue.d.ts +1 -1
  8. package/es/packages/components/button/src/button.vue2.mjs +8 -2
  9. package/es/packages/components/button/src/button.vue2.mjs.map +1 -1
  10. package/es/packages/components/float/src/Float.vue2.mjs +84 -72
  11. package/es/packages/components/float/src/Float.vue2.mjs.map +1 -1
  12. package/es/packages/components/float/src/float.mjs +2 -1
  13. package/es/packages/components/float/src/float.mjs.map +1 -1
  14. package/es/packages/components/grid/src/grid-item.vue2.mjs +9 -52
  15. package/es/packages/components/grid/src/grid-item.vue2.mjs.map +1 -1
  16. package/es/packages/hooks/useDevice.mjs.map +1 -1
  17. package/lib/components/button/src/button.vue.d.ts +2 -0
  18. package/lib/components/float/index.d.ts +15 -0
  19. package/lib/components/float/src/Float.vue.d.ts +9 -0
  20. package/lib/components/float/src/float.d.ts +4 -0
  21. package/lib/components/grid/src/grid-item.vue.d.ts +2 -9
  22. package/lib/components/scroll/index.d.ts +3 -3
  23. package/lib/components/scroll/src/Scroll.vue.d.ts +1 -1
  24. package/lib/packages/components/button/src/button.vue2.js +7 -1
  25. package/lib/packages/components/button/src/button.vue2.js.map +1 -1
  26. package/lib/packages/components/float/src/Float.vue2.js +84 -72
  27. package/lib/packages/components/float/src/Float.vue2.js.map +1 -1
  28. package/lib/packages/components/float/src/float.js +2 -1
  29. package/lib/packages/components/float/src/float.js.map +1 -1
  30. package/lib/packages/components/grid/src/grid-item.vue2.js +8 -51
  31. package/lib/packages/components/grid/src/grid-item.vue2.js.map +1 -1
  32. package/lib/packages/hooks/useDevice.js.map +1 -1
  33. package/package.json +1 -1
  34. package/theme/components/index.css +29 -3
  35. package/theme/index.css +29 -3
  36. package/theme/skin/default.css +29 -3
package/theme/components/index.css CHANGED
@@ -737,6 +737,7 @@ html body .height-full {
737
737
  gap: var(--gap-y) var(--gap-x);
738
738
  padding: var(--padding);
739
739
  vertical-align: top;
740
+ box-sizing: border-box;
740
741
  }
741
742
  .to-grid > [flex] {
742
743
  flex: 1;
@@ -819,6 +820,10 @@ html body .height-full {
819
820
  .to-grid.is-col > *[merge="10"] {
820
821
  --merge: 10;
821
822
  }
823
+ .to-grid.is-col > .to-grid {
824
+ --item-col: var(--col);
825
+ width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
826
+ }
822
827
  .to-grid.col-avg {
823
828
  display: flex;
824
829
  }
@@ -866,10 +871,10 @@ html body .height-full {
866
871
  .to-grid.col-1 > *:last-child::after {
867
872
  display: none;
868
873
  }
869
- .to-grid.height-full {
870
- height: 100%;
874
+ .to-grid-item {
875
+ box-sizing: border-box;
871
876
  }
872
- .to-grid.height-full > .to-grid-item {
877
+ .to-grid.height-full:not(.dir-v) > .to-grid-item {
873
878
  height: 100%;
874
879
  }
875
880
  @font-face {
@@ -1926,6 +1931,12 @@ html body .height-full {
1926
1931
  --dot-color: var(--color-fg);
1927
1932
  --dot-radius: 50%;
1928
1933
  --rotate-offset: 0em;
1934
+ --hover-bg: #dedede;
1935
+ --hover-color: var(--color);
1936
+ --hover-border: var(--border);
1937
+ --active-bg: #ababab;
1938
+ --active-color: var(--color);
1939
+ --active-border: var(--border);
1929
1940
  }
1930
1941
  .to-tag {
1931
1942
  display: inline-block;
@@ -2080,6 +2091,7 @@ html body .height-full {
2080
2091
  .to-tag.type-corner.position-bottom-left {
2081
2092
  left: 0;
2082
2093
  bottom: 0;
2094
+ top: unset;
2083
2095
  }
2084
2096
  .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
2085
2097
  border-radius: 0 var(--radius) 0 0;
@@ -2087,10 +2099,24 @@ html body .height-full {
2087
2099
  .to-tag.type-corner.position-bottom-right {
2088
2100
  right: 0;
2089
2101
  bottom: 0;
2102
+ top: unset;
2090
2103
  }
2091
2104
  .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
2092
2105
  border-radius: var(--radius) 0 0 0;
2093
2106
  }
2107
+ .to-tag.is-link {
2108
+ cursor: pointer;
2109
+ }
2110
+ .to-tag.is-link .to-tag-wrapper:hover {
2111
+ background: var(--hover-bg);
2112
+ color: var(--hover-color);
2113
+ border: var(--hover-border);
2114
+ }
2115
+ .to-tag.is-link .to-tag-wrapper:active {
2116
+ background: var(--active-bg);
2117
+ color: var(--active-color);
2118
+ border: var(--active-border);
2119
+ }
2094
2120
  .to-box {
2095
2121
  --bg: var(--color-bg);
2096
2122
  --bg-size: 100% 100%;
package/theme/index.css CHANGED
@@ -740,6 +740,7 @@ html body .height-full {
740
740
  gap: var(--gap-y) var(--gap-x);
741
741
  padding: var(--padding);
742
742
  vertical-align: top;
743
+ box-sizing: border-box;
743
744
  }
744
745
  .to-grid > [flex] {
745
746
  flex: 1;
@@ -822,6 +823,10 @@ html body .height-full {
822
823
  .to-grid.is-col > *[merge="10"] {
823
824
  --merge: 10;
824
825
  }
826
+ .to-grid.is-col > .to-grid {
827
+ --item-col: var(--col);
828
+ width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
829
+ }
825
830
  .to-grid.col-avg {
826
831
  display: flex;
827
832
  }
@@ -869,10 +874,10 @@ html body .height-full {
869
874
  .to-grid.col-1 > *:last-child::after {
870
875
  display: none;
871
876
  }
872
- .to-grid.height-full {
873
- height: 100%;
877
+ .to-grid-item {
878
+ box-sizing: border-box;
874
879
  }
875
- .to-grid.height-full > .to-grid-item {
880
+ .to-grid.height-full:not(.dir-v) > .to-grid-item {
876
881
  height: 100%;
877
882
  }
878
883
  @font-face {
@@ -1929,6 +1934,12 @@ html body .height-full {
1929
1934
  --dot-color: var(--color-fg);
1930
1935
  --dot-radius: 50%;
1931
1936
  --rotate-offset: 0em;
1937
+ --hover-bg: #dedede;
1938
+ --hover-color: var(--color);
1939
+ --hover-border: var(--border);
1940
+ --active-bg: #ababab;
1941
+ --active-color: var(--color);
1942
+ --active-border: var(--border);
1932
1943
  }
1933
1944
  .to-tag {
1934
1945
  display: inline-block;
@@ -2083,6 +2094,7 @@ html body .height-full {
2083
2094
  .to-tag.type-corner.position-bottom-left {
2084
2095
  left: 0;
2085
2096
  bottom: 0;
2097
+ top: unset;
2086
2098
  }
2087
2099
  .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
2088
2100
  border-radius: 0 var(--radius) 0 0;
@@ -2090,10 +2102,24 @@ html body .height-full {
2090
2102
  .to-tag.type-corner.position-bottom-right {
2091
2103
  right: 0;
2092
2104
  bottom: 0;
2105
+ top: unset;
2093
2106
  }
2094
2107
  .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
2095
2108
  border-radius: var(--radius) 0 0 0;
2096
2109
  }
2110
+ .to-tag.is-link {
2111
+ cursor: pointer;
2112
+ }
2113
+ .to-tag.is-link .to-tag-wrapper:hover {
2114
+ background: var(--hover-bg);
2115
+ color: var(--hover-color);
2116
+ border: var(--hover-border);
2117
+ }
2118
+ .to-tag.is-link .to-tag-wrapper:active {
2119
+ background: var(--active-bg);
2120
+ color: var(--active-color);
2121
+ border: var(--active-border);
2122
+ }
2097
2123
  .to-box {
2098
2124
  --bg: var(--color-bg);
2099
2125
  --bg-size: 100% 100%;
package/theme/skin/default.css CHANGED
@@ -740,6 +740,7 @@ html body .height-full {
740
740
  gap: var(--gap-y) var(--gap-x);
741
741
  padding: var(--padding);
742
742
  vertical-align: top;
743
+ box-sizing: border-box;
743
744
  }
744
745
  .to-grid > [flex] {
745
746
  flex: 1;
@@ -822,6 +823,10 @@ html body .height-full {
822
823
  .to-grid.is-col > *[merge="10"] {
823
824
  --merge: 10;
824
825
  }
826
+ .to-grid.is-col > .to-grid {
827
+ --item-col: var(--col);
828
+ width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
829
+ }
825
830
  .to-grid.col-avg {
826
831
  display: flex;
827
832
  }
@@ -869,10 +874,10 @@ html body .height-full {
869
874
  .to-grid.col-1 > *:last-child::after {
870
875
  display: none;
871
876
  }
872
- .to-grid.height-full {
873
- height: 100%;
877
+ .to-grid-item {
878
+ box-sizing: border-box;
874
879
  }
875
- .to-grid.height-full > .to-grid-item {
880
+ .to-grid.height-full:not(.dir-v) > .to-grid-item {
876
881
  height: 100%;
877
882
  }
878
883
  @font-face {
@@ -1929,6 +1934,12 @@ html body .height-full {
1929
1934
  --dot-color: var(--color-fg);
1930
1935
  --dot-radius: 50%;
1931
1936
  --rotate-offset: 0em;
1937
+ --hover-bg: #dedede;
1938
+ --hover-color: var(--color);
1939
+ --hover-border: var(--border);
1940
+ --active-bg: #ababab;
1941
+ --active-color: var(--color);
1942
+ --active-border: var(--border);
1932
1943
  }
1933
1944
  .to-tag {
1934
1945
  display: inline-block;
@@ -2083,6 +2094,7 @@ html body .height-full {
2083
2094
  .to-tag.type-corner.position-bottom-left {
2084
2095
  left: 0;
2085
2096
  bottom: 0;
2097
+ top: unset;
2086
2098
  }
2087
2099
  .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
2088
2100
  border-radius: 0 var(--radius) 0 0;
@@ -2090,10 +2102,24 @@ html body .height-full {
2090
2102
  .to-tag.type-corner.position-bottom-right {
2091
2103
  right: 0;
2092
2104
  bottom: 0;
2105
+ top: unset;
2093
2106
  }
2094
2107
  .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
2095
2108
  border-radius: var(--radius) 0 0 0;
2096
2109
  }
2110
+ .to-tag.is-link {
2111
+ cursor: pointer;
2112
+ }
2113
+ .to-tag.is-link .to-tag-wrapper:hover {
2114
+ background: var(--hover-bg);
2115
+ color: var(--hover-color);
2116
+ border: var(--hover-border);
2117
+ }
2118
+ .to-tag.is-link .to-tag-wrapper:active {
2119
+ background: var(--active-bg);
2120
+ color: var(--active-color);
2121
+ border: var(--active-border);
2122
+ }
2097
2123
  .to-box {
2098
2124
  --bg: var(--color-bg);
2099
2125
  --bg-size: 100% 100%;