vft 0.0.1 → 0.0.3

package/theme-style/src/mixins/mixins.scss

@@ -0,0 +1,258 @@
+@use 'function' as *;
+@use '../common/var' as *;
+// forward mixins
+@forward 'config';
+@forward 'function';
+@forward 'var';
+@use 'config' as *;
+
+// Scrollbar
+@mixin scroll-bar($color: #c0c4cc, $width: 6px, $track-bgColor: transparent, $borderSize: 0px, $hover-color: $color, $isRoot: false) {
+  $selector: '&::-webkit-scrollbar';
+  @if $isRoot {
+    $selector: '::-webkit-scrollbar'
+  }
+
+  #{$selector} {
+    z-index: 11;
+    width: $width;
+
+    &:horizontal {
+      height: $width;
+    }
+
+    // scroll-bar
+    &-thumb {
+      border-radius: 5px;
+      width: $width;
+      background: $color;
+      border: $borderSize solid $track-bgColor;
+    }
+
+    // scroll-bar hover
+    &-thumb:hover {
+      background: $hover-color;
+    }
+
+    &-corner {
+      background: $track-bgColor;
+    }
+
+    &-track {
+      background: $track-bgColor;
+
+      &-piece {
+        background: $track-bgColor;
+        width: $width;
+      }
+    }
+  }
+}
+
+// set-component-css-var-bak
+// @include b(tab) {} -> vri-tab {}
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+/**
+  @include e(header) {} ==> .vri-tabs__header {}
+  @include @include e((nav-next, nav-prev)) {} ==> ,vri-tabs__nav-prev .vri-tabs__nav-next {}
+ */
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B + $interpolation + $modifier-separator + $modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block + $element-separator + $element + $modifierCombo} {
+      @content;
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block + $element-separator + $element + $modifierCombo} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin extend-rule($name) {
+  @extend #{'%shared-' + $name} !optional;
+}
+
+@mixin share-rule($name) {
+  $rule-name: '%shared-' + $name;
+
+  @at-root #{$rule-name} {
+    @content;
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content;
+  }
+}
+
+@mixin picker-popper($background, $border, $box-shadow) {
+  &.#{$namespace}-popper {
+    background: $background;
+    border: $border;
+    box-shadow: $box-shadow;
+
+    .#{$namespace}-popper__arrow {
+      &::before {
+        border: $border;
+      }
+    }
+
+    @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
+      &[data-popper-placement^='#{$placement}'] {
+        .#{$namespace}-popper__arrow::before {
+          border-#{$placement}-color: transparent;
+          border-#{$adjacency}-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+// dark
+@mixin dark($block) {
+  html.dark {
+    @include b($block) {
+      @content;
+    }
+  }
+}
+
+@mixin line-clamp($number, $inline: false) {
+  overflow: hidden;
+  @if $inline {
+    // noinspection CssInvalidPropertyValue
+    display: -webkit-inline-box;
+  } @else {
+    display: -webkit-box;
+  }
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $number;
+  line-clamp: $number;
+}
+
+@mixin flex-center($inline: false) {
+  @if $inline {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin overlay($x: true, $y: true) {
+  @if ($x and $y) {
+    overflow: auto;
+    // noinspection CssInvalidPropertyValue
+    overflow: overlay;
+  } @else if ($x) {
+    overflow-x: auto;
+    // noinspection CssInvalidPropertyValue
+    overflow-x: overlay;
+  } @else {
+    overflow-y: auto;
+    // noinspection CssInvalidPropertyValue
+    overflow-y: overlay;
+  }
+}
+
+@mixin hover-text-cursor($underline: false, $color: $primary-color) {
+  cursor: pointer;
+  &:hover {
+    color: $color;
+    @if $underline {
+      text-decoration: underline;
+    }
+  }
+}

package/{src/web/result/index.scss → theme-style/src/result.scss}

@@ -1,13 +1,7 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
 $name: result;
-$result: () !default;
-$result: map-merge((
-  'padding': 40px 30px,
-  'icon-font-size': 64px,
-  'title-font-size': 20px,
-  'title-margin-top': 20px,
-  'sub-title-margin-top': 10px,
-  'extra-margin-top': 30px,
-), $result);
 
 @include set-root-css-vars($name, $result);
 

package/theme-style/src/var.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+
+@use 'common/var' as *;
+@use 'mixins/var' as *;
+@use 'mixins/mixins' as *;
+
+:root {
+  // set white and black css vars
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
+  @include set-css-var-value('theme-color', $color-white);
+  @include set-css-var-value('theme-color-reverse', $color-black);
+
+  // Typography
+  @include set-component-css-var('font-size', $font-size);
+  @include set-component-css-var('font-family', $font-family);
+  @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-line-height-primary', 24px);
+
+  // z-index --vri-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // --vri-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var('transition-duration', $transition-duration);
+  @include set-component-css-var('transition-function', $transition-function);
+  @include set-component-css-var('transition', $transition);
+
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  // --vri-color-#{$type}
+  // --vri-color-#{$type}-light-{$i}
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // color-scheme
+  // Background --vri-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --vri-text-color-#{$type}
+  @include set-component-css-var('text', $text-color);
+  // --vri-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --vri-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+
+  // Box-shadow
+  // --vri-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+  // Disable base
+  @include set-component-css-var('disabled', $disabled);
+
+  // overlay & mask
+  @include set-component-css-var('overlay-color', $overlay-color);
+  @include set-component-css-var('mask-color', $mask-color);
+
+  // Border
+  @include set-css-var-value('border-width', $border-width);
+  @include set-css-var-value('border-style', $border-style);
+  @include set-css-var-value('border-color-hover', $border-color-hover);
+  @include set-css-var-value('border', getCssVar('border-width') getCssVar('border-style') getCssVar('border-color'));
+
+  // Svg
+  @include css-var-from-global('svg-monochrome-grey', 'border-color');
+}

package/theme-style/vft-avatar.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-avatar-text-color:var(--vft-color-white);--vft-avatar-bg-color:var(--vft-text-disabled-color);--vft-avatar-text-size:14px;--vft-avatar-icon-size:18px;--vft-avatar-border-radius:var(--vft-border-radius-base)}.vft-avatar{--vft-avatar-size-large:56px;--vft-avatar-size:40px;--vft-avatar-size-small:24px;--vft-avatar-size:40px;display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--vft-avatar-text-color);background:var(--vft-avatar-bg-color);width:var(--vft-avatar-size);height:var(--vft-avatar-size);font-size:var(--vft-avatar-text-size)}.vft-avatar>img{display:block;height:100%}.vft-avatar--circle{border-radius:50%}.vft-avatar--square{border-radius:var(--vft-avatar-border-radius)}.vft-avatar--icon{font-size:var(--vft-avatar-icon-size)}.vft-avatar--small{--vft-avatar-size:24px}.vft-avatar--large{--vft-avatar-size:56px}

package/theme-style/vft-back-top.css

@@ -0,0 +1 @@
+@charset "UTF-8";.vft-back-top{--vft-backtop-bg-color:var(--vft-bg-color-overlay);--vft-backtop-text-color:var(--vft-primary-color);--vft-backtop-hover-bg-color:var(--vft-border-color-extra-light);position:fixed;background-color:var(--vft-backtop-bg-color);width:40px;height:40px;border-radius:50%;color:var(--vft-backtop-text-color);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--vft-box-shadow-lighter);cursor:pointer;z-index:5}.vft-back-top:hover{background-color:var(--vft-backtop-hover-bg-color)}.vft-back-top__icon{font-size:20px}

package/theme-style/vft-divider.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-divider-margin-y:24px;--vft-divider-margin-x:8px;--vft-divider-border-color:#dcdfe6;--vft-divider-border-style:solid}.vft-divider{position:relative}.vft-divider--horizontal{display:block;height:1px;width:100%;margin:var(--vft-divider-margin-y) 0;border-top:1px var(--vft-divider-border-color) var(--vft-divider-border-style)}.vft-divider--vertical{display:inline-block;width:1px;height:1em;margin:0 var(--vft-divider-margin-x);vertical-align:middle;position:relative;border-left:1px var(--vft-divider-border-color) var(--vft-divider-border-style)}.vft-divider__text{position:absolute;background-color:var(--vft-bg-color);padding:0 20px;font-weight:500;color:var(--vft-text-primary-color);font-size:14px}.vft-divider__text.is-left{left:20px;transform:translateY(-50%)}.vft-divider__text.is-center{left:50%;transform:translateX(-50%) translateY(-50%)}.vft-divider__text.is-right{right:20px;transform:translateY(-50%)}

package/theme-style/vft-empty.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-empty-img-size:160px;--vft-empty-img-size-small:80px;--vft-empty-img-size-large:240px;--vft-empty-text-color:white;--vft-empty-desc-top:10px;--vft-empty-desc-color:var(--vft-text-placeholder-color);--vft-empty-desc-size:14px}.vft-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:10px 0}.vft-empty__image{width:var(--vft-empty-img-size);height:var(--vft-empty-img-size)}.vft-empty__image img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.vft-empty--large .vft-empty__image{width:var(--vft-empty-img-size-large);height:var(--vft-empty-img-size-large)}.vft-empty--small .vft-empty__image{width:var(--vft-empty-img-size-small);height:var(--vft-empty-img-size-small)}.vft-empty__desc{margin-top:var(--vft-empty-desc-top);color:var(--vft-empty-desc-color);font-size:var(--vft-empty-desc-size)}.vft-empty__bottom{margin-top:5px}

package/theme-style/vft-full-screen.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-full-screen-color:#434343;--vft-full-screen-hover-color:#0171f6;--vft-full-screen-font-size:12px}.vft-full-screen{color:var(--vft-full-screen-color);font-size:var(--vft-full-screen-font-size);transition:color .2s}.vft-full-screen i{margin-right:2px}.vft-full-screen:hover{color:var(--vft-full-screen-hover-color)}.vft-full-screen:hover i{color:var(--vft-full-screen-hover-color)}

package/theme-style/vft-icon.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-icon-text-color:black}.vft-icon{position:relative;display:inline-block;font:normal normal normal 14px/1 iconfont;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;transition:all .2s ease;color:var(--vft-icon-text-color)}.vft-icon::before{display:inline-block}.vft-icon__image{display:block;width:1em;height:1em;-o-object-fit:contain;object-fit:contain}

package/theme-style/vft-image.css

@@ -0,0 +1 @@
+@charset "UTF-8";.vft-image__error,.vft-image__inner,.vft-image__placeholder,.vft-image__wrapper{width:100%;height:100%}.vft-image{position:relative;display:inline-block;overflow:hidden}.vft-image__inner{vertical-align:top;opacity:1}.vft-image__inner.is-loading{opacity:0}.vft-image__wrapper{position:absolute;top:0;left:0}.vft-image__placeholder{background:var(--vft-fill-color-light)}.vft-image__error{display:flex;justify-content:center;align-items:center;font-size:14px;background:var(--vft-fill-color-light);color:var(--vft-text-color-placeholder);vertical-align:middle}.vft-image__preview{cursor:pointer}

package/theme-style/vft-input.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-input-width:100%;--vft-input-text-color:var(--vft-text-regular-color);--vft-input-border:var(--vft-border);--vft-input-hover-border:var(--vft-border-color-hover);--vft-input-focus-border:var(--vft-primary-color);--vft-input-transparent-border:0 0 0 1px transparent inset;--vft-input-border-color:var(--vft-border-color);--vft-input-border-radius:var(--vft-border-radius-base);--vft-input-bg-color:var(--vft-fill-color-blank);--vft-input-icon-color:var(--vft-text-placeholder-color);--vft-input-placeholder-color:var(--vft-text-placeholder-color);--vft-input-hover-border-color:var(--vft-border-color-hover);--vft-input-clear-hover-color:var(--vft-text-secondary-color);--vft-input-focus-border-color:var(--vft-primary-color)}.vft-input{--vft-input-height:var(--vft-component-size);position:relative;font-size:var(--vft-font-size-base);display:inline-flex;width:var(--vft-input-width);line-height:var(--vft-input-height);box-sizing:border-box;vertical-align:middle;transition:width .2s ease}.vft-input::-webkit-scrollbar{z-index:11;width:6px}.vft-input::-webkit-scrollbar:horizontal{height:6px}.vft-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#c0c4cc;border:0 solid transparent}.vft-input::-webkit-scrollbar-thumb:hover{background:#c0c4cc}.vft-input::-webkit-scrollbar-corner{background:0 0}.vft-input::-webkit-scrollbar-track{background:0 0}.vft-input::-webkit-scrollbar-track-piece{background:0 0;width:6px}.vft-input .vft-input__clear,.vft-input .vft-input__password{color:var(--vft-input-icon-color);font-size:14px;cursor:pointer}.vft-input .vft-input__clear:hover,.vft-input .vft-input__password:hover{color:var(--vft-input-clear-hover-color)}.vft-input .vft-input__count{height:100%;display:inline-flex;align-items:center;color:var(--vft-info-color);font-size:12px}.vft-input .vft-input__count .vft-input__count-inner{background:var(--vft-fill-color-blank);line-height:initial;display:inline-block;padding-left:8px}.vft-input__wrapper{display:inline-flex;flex-grow:1;align-items:center;justify-content:center;padding:1px 11px;background-color:var(--vft-input-bg-color,var(--vft-fill-color-blank));background-image:none;border-radius:var(--vft-input-border-radius,var(--vft-border-radius-base));border:1px solid var(--vft-input-border-color)}.vft-input__wrapper:hover{border:1px solid var(--vft-input-hover-border-color)}.vft-input__wrapper.is-focus{border:1px solid var(--vft-input-focus-border-color)}.vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 32px) - 2px);width:100%;flex-grow:1;-webkit-appearance:none;color:var(--vft-input-text-color,var(--vft-text-regular-color));font-size:inherit;height:var(--vft-input-inner-height);line-height:var(--vft-input-inner-height);padding:0;outline:0;border:none;background:0 0;box-sizing:border-box}.vft-input__inner:focus{outline:0}.vft-input__inner::-moz-placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-input__inner::placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-input__inner[type=password]::-ms-reveal{display:none}.vft-input__inner[type=number]{line-height:1px}.vft-input__prefix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;height:100%;text-align:center;color:var(--vft-input-icon-color,var(--vft-text-placeholder-color));transition:all var(--vft-transition-duration);pointer-events:none}.vft-input__prefix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}.vft-input__prefix-inner>:last-child{margin-right:8px}.vft-input__prefix-inner>:first-child,.vft-input__prefix-inner>:first-child.vft-input__icon{margin-left:0}.vft-input__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;height:100%;text-align:center;color:var(--vft-input-icon-color,var(--vft-text-placeholder-color));transition:all var(--vft-transition-duration);pointer-events:none}.vft-input__suffix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}.vft-input__suffix-inner>:first-child{margin-left:8px}.vft-input .vft-input__icon{height:inherit;line-height:inherit;display:flex;justify-content:center;align-items:center;transition:all var(--vft-transition-duration);margin-left:8px}.vft-input__validateIcon{pointer-events:none}.vft-input.is-active .vft-input__wrapper{border:1px solid var(--vft-input-focus-color)}.vft-input.is-disabled{cursor:not-allowed}.vft-input.is-disabled .vft-input__wrapper{background-color:var(--vft-disabled-bg-color);border:1px solid var(--vft-input-disable-color)}.vft-input.is-disabled .vft-input__inner{color:var(--vft-disabled-text-color);-webkit-text-fill-color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-input.is-disabled .vft-input__inner::-moz-placeholder{color:var(--vft-text-placeholder-color)}.vft-input.is-disabled .vft-input__inner::placeholder{color:var(--vft-text-placeholder-color)}.vft-input.is-disabled .vft-input__icon{cursor:not-allowed}.vft-input.is-exceed .vft-input__wrapper{border:1px solid var(--vft-input-danger-color)}.vft-input.is-exceed .vft-input__suffix .vft-input__count{color:var(--vft-danger-color)}.vft-input--large{--vft-input-height:var(--vft-component-size-large);font-size:14px}.vft-input--large .vft-input__wrapper{padding:1px 15px}.vft-input--large .vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 40px) - 2px)}.vft-input--small{--vft-input-height:var(--vft-component-size-small);font-size:12px}.vft-input--small .vft-input__wrapper{padding:1px 7px}.vft-input--small .vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 24px) - 2px)}.vft-input-group{display:inline-flex;width:100%;align-items:stretch}.vft-input-group__append,.vft-input-group__prepend{background-color:var(--vft-fill-color-light);color:var(--vft-info-color);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;border-radius:var(--vft-input-border-radius);padding:0 20px;white-space:nowrap}.vft-input-group__append:focus,.vft-input-group__prepend:focus{outline:0}.vft-input-group__append .vft-button,.vft-input-group__append .vft-select,.vft-input-group__prepend .vft-button,.vft-input-group__prepend .vft-select{display:inline-block;margin:0 -20px}.vft-input-group__append button.vft-button,.vft-input-group__append button.vft-button:hover,.vft-input-group__append div.vft-select .vft-input__wrapper,.vft-input-group__append div.vft-select:hover .vft-input__wrapper,.vft-input-group__prepend button.vft-button,.vft-input-group__prepend button.vft-button:hover,.vft-input-group__prepend div.vft-select .vft-input__wrapper,.vft-input-group__prepend div.vft-select:hover .vft-input__wrapper{border-color:transparent;background-color:transparent;color:inherit}.vft-input-group__append .vft-button,.vft-input-group__append .vft-input,.vft-input-group__prepend .vft-button,.vft-input-group__prepend .vft-input{font-size:inherit}.vft-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0;border:1px solid var(--vft-input-border-color);border-right:0}.vft-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--vft-input-border-color);border-left:0}.vft-input-group--prepend>.vft-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input .vft-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0;border:1px solid var(--vft-input-border-color)}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__wrapper{border:1px solid var(--vft-input-focus-border-color);z-index:2}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__wrapper:focus{outline:0;z-index:2;border:1px solid var(--vft-input-focus-border-color)}.vft-input-group--prepend .vft-input-group__prepend .vft-select:hover .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select:hover .vft-input__wrapper{z-index:1;border:1px solid var(--vft-input-hover-border-color)}.vft-input-group--append>.vft-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.vft-input-group--append .vft-input-group__append .vft-select .vft-input .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select .vft-input .vft-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--vft-input-border-color)}.vft-input-group--append .vft-input-group__append .vft-select .vft-input.is-focus .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select .vft-input.is-focus .vft-input__wrapper{z-index:2;border:1px solid var(--vft-input-focus-border-color)}.vft-input-group--append .vft-input-group__append .vft-select:hover .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select:hover .vft-input__wrapper{z-index:1;border:1px solid var(--vft-input-hover-border-color)}.vft-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:var(--vft-font-size-base)}.vft-textarea__inner{position:relative;display:block;resize:vertical;padding:5px 11px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;font-family:inherit;color:var(--vft-input-text-color,var(--vft-text-regular-color));background-color:var(--vft-input-bg-color,var(--vft-fill-color-blank));background-image:none;-webkit-appearance:none;border-radius:var(--vft-input-border-radius,var(--vft-border-radius-base));transition:var(--vft-transition-box-shadow);border:1px solid var(--vft-input-border-color)}.vft-textarea__inner::-moz-placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-textarea__inner::placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-textarea__inner:hover{border:1px solid var(--vft-input-hover-border-color)}.vft-textarea__inner:focus{outline:0;border:1px solid var(--vft-input-focus-border-color)}.vft-textarea .vft-input__count{color:var(--vft-info-color);background:var(--vft-fill-color-blank);position:absolute;font-size:12px;line-height:14px;bottom:5px;right:10px}.vft-textarea.is-disabled .vft-textarea__inner{background-color:var(--vft-disabled-bg-color);border-color:var(--vft-disabled-border-color);color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-textarea.is-disabled .vft-textarea__inner::-moz-placeholder{color:var(--vft-text-placeholder-color)}.vft-textarea.is-disabled .vft-textarea__inner::placeholder{color:var(--vft-text-placeholder-color)}.vft-textarea.is-exceed .vft-textarea__inner{border-color:var(--vft-danger-color)}.vft-textarea.is-exceed .vft-input__count{color:var(--vft-danger-color)}

package/theme-style/vft-result.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-result-padding:40px 30px;--vft-result-icon-font-size:64px;--vft-result-title-font-size:20px;--vft-result-title-margin-top:20px;--vft-result-sub-title-margin-top:10px;--vft-result-extra-margin-top:30px}.vft-result{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;padding:var(--vft-result-padding)}.vft-result__icon svg{width:var(--vft-result-icon-font-size);height:var(--vft-result-icon-font-size)}.vft-result__icon [class~=vft-icon]{font-size:var(--vft-result-icon-font-size)}.vft-result__title{margin-top:var(--vft-result-title-margin-top)}.vft-result__title p{margin:0;font-size:var(--vft-result-title-font-size);color:var(--vft-text-color-primary);line-height:1.3}.vft-result__sub-title{margin-top:var(--vft-result-sub-title-margin-top)}.vft-result__sub-title p{margin:0;font-size:var(--vft-font-size-base);color:var(--vft-text-color-regular);line-height:1.3}.vft-result__extra{margin-top:var(--vft-result-extra-margin-top)}.vft-result .icon-primary{--vft-result-color:var(--vft-color-primary);color:var(--vft-result-color)}.vft-result .icon-success{--vft-result-color:var(--vft-color-success);color:var(--vft-result-color)}.vft-result .icon-warning{--vft-result-color:var(--vft-color-warning);color:var(--vft-result-color)}.vft-result .icon-danger{--vft-result-color:var(--vft-color-danger);color:var(--vft-result-color)}.vft-result .icon-error{--vft-result-color:var(--vft-color-error);color:var(--vft-result-color)}.vft-result .icon-info{--vft-result-color:var(--vft-color-info);color:var(--vft-result-color)}

package/theme-style/vft-var.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--vft-color-white:#fff;--vft-color-black:#000;--vft-theme-color:#fff;--vft-theme-color-reverse:#000;--vft-font-size-extra-large:20px;--vft-font-size-large:18px;--vft-font-size-medium:16px;--vft-font-size-base:14px;--vft-font-size-small:13px;--vft-font-size-extra-small:12px;--vft-font-family:'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;--vft-font-weight-primary:500;--vft-font-line-height-primary:24px;--vft-index-normal:1;--vft-index-top:1000;--vft-index-popper:2000;--vft-border-radius-base:4px;--vft-border-radius-small:2px;--vft-border-radius-round:20px;--vft-border-radius-circle:100%;--vft-transition-duration:0.3s;--vft-transition-duration-fast:0.2s;--vft-transition-function-ease-in-out-bezier:cubic-bezier(0.645, 0.045, 0.355, 1);--vft-transition-function-fast-bezier:cubic-bezier(0.23, 1, 0.32, 1);--vft-transition-all:all var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-fade:opacity var(--vft-transition-duration) var(--vft-transition-function-fast-bezier);--vft-transition-md-fade:transform var(--vft-transition-duration) var(--vft-transition-function-fast-bezier),opacity var(--vft-transition-duration) var(--vft-transition-function-fast-bezier);--vft-transition-fade-linear:opacity var(--vft-transition-duration-fast) linear;--vft-transition-border:border-color var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-box-shadow:box-shadow var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-color:color var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier)}:root{color-scheme:light;--vft-primary-color:#2196f3;--vft-primary-color-light-3:#64b6f7;--vft-primary-color-light-5:#90cbf9;--vft-primary-color-light-7:#bce0fb;--vft-primary-color-light-8:#d3eafd;--vft-primary-color-light-9:#e9f5fe;--vft-primary-color-dark-2:#1a78c2;--vft-success-color:#3eaf7c;--vft-success-color-light-3:#78c7a3;--vft-success-color-light-5:#9fd7be;--vft-success-color-light-7:#c5e7d8;--vft-success-color-light-8:#d8efe5;--vft-success-color-light-9:#ecf7f2;--vft-success-color-dark-2:#328c63;--vft-warning-color:#fb9b5f;--vft-warning-color-light-3:#fcb98f;--vft-warning-color-light-5:#fdcdaf;--vft-warning-color-light-7:#fee1cf;--vft-warning-color-light-8:#feebdf;--vft-warning-color-light-9:#fff5ef;--vft-warning-color-dark-2:#c97c4c;--vft-danger-color:#f26d6d;--vft-danger-color-light-3:#f69999;--vft-danger-color-light-5:#f9b6b6;--vft-danger-color-light-7:#fbd3d3;--vft-danger-color-light-8:#fce2e2;--vft-danger-color-light-9:#fef0f0;--vft-danger-color-dark-2:#c25757;--vft-error-color:#f26d6d;--vft-error-color-light-3:#f69999;--vft-error-color-light-5:#f9b6b6;--vft-error-color-light-7:#fbd3d3;--vft-error-color-light-8:#fce2e2;--vft-error-color-light-9:#fef0f0;--vft-error-color-dark-2:#c25757;--vft-info-color:#909399;--vft-info-color-light-3:#b1b3b8;--vft-info-color-light-5:#c8c9cc;--vft-info-color-light-7:#dedfe0;--vft-info-color-light-8:#e9e9eb;--vft-info-color-light-9:#f4f4f5;--vft-info-color-dark-2:#73767a;--vft-bg-color:#fff;--vft-bg-color-page:#f2f3f5;--vft-bg-color-overlay:#fff;--vft-text-primary-color:#303133;--vft-text-regular-color:#606266;--vft-text-secondary-color:#909399;--vft-text-placeholder-color:#a8abb2;--vft-text-disabled-color:#c0c4cc;--vft-border-color:#dcdfe6;--vft-border-color-light:#e4e7ed;--vft-border-color-lighter:#ebeef5;--vft-border-color-extra-light:#f2f6fc;--vft-border-color-dark:#d4d7de;--vft-border-color-darker:#cdd0d6;--vft-fill-color:#f0f2f5;--vft-fill-color-light:#f5f7fa;--vft-fill-color-lighter:#fafafa;--vft-fill-color-extra-light:#fafcff;--vft-fill-color-dark:#ebedf0;--vft-fill-color-darker:#e6e8eb;--vft-fill-color-blank:#fff;--vft-box-shadow:0px 12px 32px 4px rgba(0, 0, 0, 0.04),0px 8px 20px rgba(0, 0, 0, 0.08);--vft-box-shadow-light:0px 0px 12px rgba(0, 0, 0, 0.12);--vft-box-shadow-lighter:0px 0px 6px rgba(0, 0, 0, 0.12);--vft-box-shadow-dark:0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16);--vft-disabled-bg-color:var(--vft-fill-color-light);--vft-disabled-text-color:var(--vft-text-color-placeholder);--vft-disabled-border-color:var(--vft-border-color-light);--vft-overlay-color:rgba(0, 0, 0, 0.8);--vft-overlay-color-light:rgba(0, 0, 0, 0.7);--vft-overlay-color-lighter:rgba(0, 0, 0, 0.5);--vft-mask-color:rgba(255, 255, 255, 0.9);--vft-mask-color-extra-light:rgba(255, 255, 255, 0.3);--vft-border-width:1px;--vft-border-style:solid;--vft-border-color-hover:var(--vft-text-disabled-color);--vft-border:var(--vft-border-width) var(--vft-border-style) var(--vft-border-color);--vft-svg-monochrome-grey:var(--vft-border-color)}

package/theme-style/vft-virtual-list.css

@@ -0,0 +1 @@
+.vft-vl__wrapper{position:relative}.vft-vl__wrapper:hover .vft-virtual-scrollbar{opacity:1}.vft-vl__wrapper.always-on .vft-virtual-scrollbar{opacity:1}.vft-vl__window{scrollbar-width:none}.vft-vl__window::-webkit-scrollbar{display:none}.vft-virtual-scrollbar{opacity:0;transition:opacity 340ms ease-out}.vft-virtual-scrollbar.always-on{opacity:1}.vft-vg__wrapper{position:relative}

package/src/app/index.ts

@@ -1,3 +0,0 @@
-export * from '../common';
-export * from './page-loading';
-export * from './table';

package/src/app/page-loading/index.less

@@ -1,10 +0,0 @@
-@prefix-cls: ~'@{pro-namespace}-page-loading';
-@prefix-var: ~'--@{prefix-cls}';
-
-body {
-  @{prefix-var}-height: 100vh;
-}
-
-.@{prefix-cls} {
-  height: var(~'@{prefix-var}-height');
-}

package/src/app/page-loading/index.ts

@@ -1,3 +0,0 @@
-import PageLoading from './index.vue';
-
-export { PageLoading };

package/src/app/page-loading/index.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { createNamespace } from '@vri/utils';
-import { Spin, type SpinProps } from '../../common/spin';
-import SpinImg from './assets/spin.gif';
-
-interface PageLoadingProps {
-  /** loading 配置 */
-  spinCfg?: SpinProps;
-}
-
-const { spinCfg } = defineProps<PageLoadingProps>();
-
-const [name, bem] = /* hoist-static*/ createNamespace('page-loading');
-
-defineOptions({
-  name
-});
-
-const _spinCfg = computed(() => {
-  return {
-    vertical: true,
-    size: 40,
-    textSize: 13,
-    textColor: '#5c5c5c',
-    ...spinCfg
-  };
-});
-</script>
-
-<template>
-  <div :class="['flex-center bg-white', bem()]">
-    <Spin :icon="SpinImg" v-bind="_spinCfg">正在加载...</Spin>
-  </div>
-</template>
-
-<style lang="less">
-@import './index.less';
-</style>

package/src/app/table/demos/basic.vue

@@ -1,117 +0,0 @@
-<script setup lang="tsx">
-import VriTable from '../index.vue';
-import { ColumnsProps } from '../types';
-
-let tableData = $ref<any>([
-  {
-    age: 32,
-    address: '西湖区湖底公园1号',
-    one: '西湖区湖底公园one号',
-    two: '西湖区湖底公园two号',
-    three: '西湖区湖底公园three号'
-  },
-  {
-    name: '胡彦祖胡彦祖胡彦祖胡彦祖胡彦祖胡',
-    age: 42,
-    address: '西湖区湖底公园1号',
-    one: '西湖区园one号',
-    two: '西湖区园two号',
-    three: '西底公园three号'
-  }
-]);
-let columns = $ref<ColumnsProps[]>([
-  {
-    title: '姓名姓名姓名姓名姓名姓名姓名',
-    dataIndex: 'name',
-    align: 'left',
-    cellAlign: 'right',
-    width: 100,
-    fixed: true,
-    cellClassName: 'customClass'
-  },
-  {
-    title: '年龄',
-    headerClassName: 'customHeadClass',
-    cellAlign: 'left',
-    dataIndex: 'age',
-    fixed: true
-  },
-  {
-    title: '住址',
-    dataIndex: 'address',
-    width: 100,
-    render: (text, record, subIndex) => {
-      return (
-        <div>
-          {record.name}+{record.age}+{text}+{subIndex} <span class="text-red-500">*</span>
-        </div>
-      );
-    }
-  },
-  {
-    title: '住址1',
-    dataIndex: 'one'
-  },
-  {
-    title: '住址2',
-    dataIndex: 'two'
-  },
-  {
-    title: '住址3',
-    dataIndex: 'three'
-  },
-  {
-    title: '住址43',
-    dataIndex: 'three'
-  }
-]);
-
-function change() {
-  tableData = [
-    {
-      name: '胡彦祖胡彦祖胡彦祖胡彦祖胡彦祖胡胡',
-      age: 32,
-      three: '西湖区湖底公园three号'
-    },
-    {
-      three: '西底公园three号'
-    }
-  ];
-  columns = [
-    {
-      title: '姓名姓名姓名姓名姓名姓名姓名',
-      dataIndex: 'name',
-      align: 'left',
-      cellAlign: 'right',
-      fixed: true,
-      cellClassName: 'customClass'
-    },
-    {
-      title: '年龄',
-      headerClassName: 'customHeadClass',
-      cellAlign: 'left',
-      dataIndex: 'age'
-    }
-  ];
-}
-</script>
-
-<template>
-  <button @click="change">test</button>
-  <vri-table :tableData="tableData" :columns="columns" />
-</template>
-
-<style scoped lang="less">
-:deep(.vri-table) {
-  .customClass {
-    background: rgba(255, 0, 0, 0.3);
-    font-size: 20px !important;
-  }
-
-  .customHeadClass {
-    background: lightblue;
-    color: white;
-    font-size: 12px !important;
-  }
-}
-</style>