@fastkit/vui 0.7.46 → 0.7.49

package/dist/vui.css

@@ -365,6 +365,7 @@ template {
   --typo-base-weight: 400;
   --typo-base-height: 1.5;
   --typo-base-spacing: 0em;
+  --typo-medium-weight: 500;
   --typo-h1-size: 2.5rem;
   --typo-h1-weight: 500;
   --typo-h1-height: 1.2222222222222223;
@@ -410,6 +411,18 @@ template {
   --typo-subtitle2-height: 1.57;
   --typo-subtitle2-spacing: 0.00714em;
   --typo-sm-size: calc(var(--root-em) * 0.875);
+  --chip-padding: 0.875em;
+  --chip-font-weight: var(--typo-base-weight);
+  --chip-height-xs: 16px;
+  --chip-font-size-xs: 10px;
+  --chip-height-sm: 24px;
+  --chip-font-size-sm: 12px;
+  --chip-height-md: 32px;
+  --chip-font-size-md: 14px;
+  --chip-height-lg: 54px;
+  --chip-font-size-lg: 16px;
+  --chip-height-xl: 66px;
+  --chip-font-size-xl: 18px;
   --control-field-rem-sm: 0.875rem;
   --control-field-rem-md: 1rem;
   --control-field-rem-lg: 1.125rem;
@@ -935,6 +948,82 @@ thead th {
   justify-content: center;
   transition: transform 150ms linear;
 }
+.v-skelton-loader-bone {
+  position: relative;
+  overflow: hidden;
+  cursor: progress;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: inherit;
+}
+.v-skelton-loader-bone::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  content: "";
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  transform: translateX(-100%);
+  animation: v-skelton-loader-bone-loading 1.5s infinite;
+}
+
+@keyframes v-skelton-loader-bone-loading {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.v-busy-image {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.v-busy-image--clickable {
+  cursor: pointer;
+}
+.v-busy-image--cover {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.v-busy-image--loading::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: rgba(0, 0, 0, 0.1);
+  animation: v-tiny-image-blink normal 1.5s infinite ease-in-out;
+}
+.v-busy-image__node {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.v-busy-image__slot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+@keyframes v-tiny-image-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .v-grid-item {
   display: block;
 }
@@ -974,6 +1063,146 @@ thead th {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
+.v-avatar {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+  --avatar-radius: 50%;
+  --avatar-font-weight: var(--typo-medium-weight);
+  --avatar-base-font-size: var(--typo-base-size);
+  --avatar-font-size: var(--avatar-base-font-size);
+  display: inline-flex;
+  flex-basis: var(--avatar-size);
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  min-width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+  font-size: var(--avatar-font-size);
+  font-weight: var(--avatar-font-weight);
+  line-height: 1;
+  text-align: center;
+  vertical-align: bottom;
+  cursor: default;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--avatar-radius);
+  --shadow-color: rgba(0, 0, 0, 0) !important;
+  --focusShadow-color: rgba(0, 0, 0, 0) !important;
+}
+.v-avatar::-moz-focus-inner {
+  border: 0;
+}
+.v-avatar, .v-avatar:hover, .v-avatar:focus {
+  text-decoration: none;
+}
+.v-avatar--clickable {
+  cursor: pointer;
+}
+.v-avatar--sm {
+  --avatar-size: 36px;
+  --avatar-font-size: calc(var(--avatar-base-font-size) * 0.75);
+}
+.v-avatar--md {
+  --avatar-size: 48px;
+}
+.v-avatar--lg {
+  --avatar-size: 62px;
+  --avatar-font-size: calc(var(--avatar-base-font-size) * 1.25);
+}
+.v-avatar--rounded {
+  --avatar-radius: 4px;
+}
+.v-avatar--tile {
+  --avatar-radius: 0;
+}
+.v-avatar img, .v-avatar__image {
+  display: inline-flex;
+  width: inherit !important;
+  height: inherit !important;
+  border-radius: inherit;
+  object-fit: cover;
+}
+.v-chip {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+  --chip-radius: calc(var(--chip-height) / 2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--chip-height);
+  padding: 0 var(--chip-padding);
+  overflow: hidden;
+  font-size: var(--chip-font-size);
+  font-weight: var(--chip-font-weight);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: bottom;
+  cursor: default;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--chip-radius);
+  --shadow-color: rgba(0, 0, 0, 0) !important;
+  --focusShadow-color: rgba(0, 0, 0, 0) !important;
+}
+.v-chip::-moz-focus-inner {
+  border: 0;
+}
+.v-chip, .v-chip:hover, .v-chip:focus {
+  text-decoration: none;
+}
+.v-chip--clickable {
+  cursor: pointer;
+}
+.v-chip--xs {
+  --chip-height: var(--chip-height-xs);
+  --chip-font-size: var(--chip-font-size-xs);
+}
+.v-chip--sm {
+  --chip-height: var(--chip-height-sm);
+  --chip-font-size: var(--chip-font-size-sm);
+}
+.v-chip--md {
+  --chip-height: var(--chip-height-md);
+  --chip-font-size: var(--chip-font-size-md);
+}
+.v-chip--lg {
+  --chip-height: var(--chip-height-lg);
+  --chip-font-size: var(--chip-font-size-lg);
+}
+.v-chip--xl {
+  --chip-height: var(--chip-height-xl);
+  --chip-font-size: var(--chip-font-size-xl);
+}
+.v-chip--label {
+  --chip-radius: 4px;
+}
+.v-chip__icon--start {
+  margin-right: calc(var(--chip-padding) * 0.5);
+  margin-left: calc(var(--chip-padding) * -0.5);
+}
+.v-chip__icon--end {
+  margin-right: calc(var(--chip-padding) * -0.5);
+  margin-left: calc(var(--chip-padding) * 0.5);
+}
+.v-chip .v-avatar {
+  --avatar-size: 14px;
+}
 .v-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;
@@ -1104,9 +1333,9 @@ thead th {
   align-items: center;
   justify-content: center;
   justify-self: stretch;
+  pointer-events: none;
 }
 .v-button--loading .v-button__content {
-  pointer-events: none;
   opacity: 0;
 }
 .v-button__icon--start {