@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/select/select.less

@@ -1,181 +0,0 @@
-@select-select-text-color: #555;
-@select-select-padding: 5px 0;
-@select-error-color: var(--color-danger);
-@select-blur-color: #888;
-@select-focus-color: var(--color-primary);
-@select-scroller-background: #fff;
-@select-scroller-padding: 6px 0;
-@select-scroller-max-height: 278px;
-@select-placeholder-size: 16px;
-@select-icon-padding: 16px 0 0;
-@select-icon-size: 20px;
-@select-chip-margin: 5px 5px 0;
-@select-line-size: 1px;
-@select-line-spread-size: 2px;
-@select-arrow-size: 20px;
-@select-disabled-color: var(--color-text-disabled);
-
-:root {
-  --select-select-text-color: @select-select-text-color;
-  --select-select-padding: @select-select-padding;
-  --select-error-color: @select-error-color;
-  --select-blur-color: @select-blur-color;
-  --select-focus-color: @select-focus-color;
-  --select-scroller-background: @select-scroller-background;
-  --select-scroller-padding: @select-scroller-padding;
-  --select-scroller-max-height: @select-scroller-max-height;
-  --select-placeholder-size: @select-placeholder-size;
-  --select-icon-padding: @select-icon-padding;
-  --select-icon-size: @select-icon-size;
-  --select-chip-margin: @select-chip-margin;
-  --select-line-size: @select-line-size;
-  --select-line-spread-size: @select-line-spread-size;
-  --select-arrow-size: @select-arrow-size;
-  --select-disabled-color: @select-disabled-color;
-}
-
-.var {
-  &-select-footer-margin-enter-from,
-  &-select-footer-margin-leave-to {
-    opacity: 0;
-    margin-top: 2px !important;
-  }
-
-  &-select-footer-margin-enter-active,
-  &-select-footer-margin-leave-active {
-    transition: 0.2s all var(--cubic-bezier);
-  }
-}
-
-.var-select {
-  width: 100%;
-  color: var(--select-select-text-color);
-
-  &__controller {
-    width: 100%;
-    display: flex;
-    position: relative;
-  }
-
-  &__menu[var-select-cover] {
-    flex-grow: 1;
-    background: transparent;
-  }
-
-  &__chip[var-select-cover] {
-    margin: var(--select-chip-margin);
-  }
-
-  &__scroller {
-    max-height: var(--select-scroller-max-height);
-    background: var(--select-scroller-background);
-    padding: var(--select-scroller-padding);
-    overflow-y: auto;
-  }
-
-  &__wrap {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding-top: var(--select-placeholder-size);
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    padding: var(--select-icon-padding);
-    font-size: 20px;
-  }
-
-  &__placeholder {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform-origin: left;
-    transition-property: top, transform;
-    transition-duration: 0.3s;
-    transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1);
-    font-size: var(--select-placeholder-size);
-    color: var(--select-blur-color);
-  }
-
-  &__select {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    min-height: 32px;
-    padding: var(--select-select-padding);
-    outline: none;
-    border: none;
-    font-size: inherit;
-    color: var(--select-select-text-color);
-    overflow-x: auto;
-  }
-
-  &__arrow[var-select-cover] {
-    flex-shrink: 0;
-    font-size: var(--select-arrow-size);
-  }
-
-  &__line {
-    width: 100%;
-    height: var(--select-line-size);
-    background: var(--select-blur-color);
-  }
-
-  &__dot {
-    width: 100%;
-    height: var(--select-line-spread-size);
-    background: var(--select-focus-color);
-    transform: scaleX(0);
-    transform-origin: center;
-    transition: transform 0.3s var(--cubic-bezier);
-  }
-
-  &--placeholder-hint {
-    top: 0;
-    transform: translate(0, 0) scale(0.75);
-  }
-
-  &--placeholder-non-hint {
-    top: 50%;
-    transform: translate(0, -50%) scale(1);
-  }
-
-  &--non-hint {
-    padding-top: 0;
-  }
-
-  &--placeholder-hidden {
-    visibility: hidden;
-  }
-
-  &--focus {
-    color: var(--select-focus-color);
-  }
-
-  &--spread {
-    transform: scaleX(1);
-  }
-
-  &--disabled {
-    color: var(--select-disabled-color);
-  }
-
-  &--error {
-    color: var(--select-error-color);
-  }
-
-  &--line-disabled {
-    background: var(--select-disabled-color);
-  }
-
-  &--line-error {
-    background: var(--select-error-color);
-  }
-
-  &--arrow-rotate {
-    transform: rotate(180deg);
-  }
-}

package/lib/select/style/index.js

@@ -1,7 +0,0 @@
-require('../../styles/common.css')
-require('../../icon/icon.css')
-require('../../menu/menu.css')
-require('../../form-details/formDetails.css')
-require('../../chip/chip.css')
-require('../select.css')
-require('../SelectSfc.css')

package/lib/select/style/less.js

@@ -1,7 +0,0 @@
-require('../../styles/common.less')
-require('../../icon/icon.less')
-require('../../menu/menu.less')
-require('../../form-details/formDetails.less')
-require('../../chip/chip.less')
-require('../select.less')
-require('../SelectSfc.less')

package/lib/skeleton/Skeleton.js

@@ -1,134 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _props = require("./props");
-
-var _elements = require("../utils/elements");
-
-var _shared = require("../utils/shared");
-
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var--box var-skeleton"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-skeleton__data"
-};
-var _hoisted_3 = {
-  key: 1,
-  class: "var-skeleton__content"
-};
-
-var _hoisted_4 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_5 = [_hoisted_4];
-var _hoisted_6 = {
-  class: "var-skeleton__article"
-};
-
-var _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_8 = [_hoisted_7];
-var _hoisted_9 = {
-  class: "var-skeleton__section"
-};
-
-var _hoisted_10 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_11 = [_hoisted_10];
-
-var _hoisted_12 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_13 = [_hoisted_12];
-var _hoisted_14 = {
-  key: 2,
-  class: "var-skeleton__fullscreen"
-};
-
-var _hoisted_15 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_16 = [_hoisted_15];
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [!_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "default")])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && !_ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, [_ctx.card ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 0,
-    class: "var-skeleton__card",
-    style: (0, _vue.normalizeStyle)({
-      height: _ctx.toSizeUnit(_ctx.cardHeight)
-    })
-  }, _hoisted_5, 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_6, [_ctx.avatar ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 0,
-    class: "var-skeleton__avatar",
-    style: (0, _vue.normalizeStyle)({
-      width: _ctx.toSizeUnit(_ctx.avatarSize),
-      height: _ctx.toSizeUnit(_ctx.avatarSize)
-    })
-  }, _hoisted_8, 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_9, [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 0,
-    class: "var-skeleton__title",
-    style: (0, _vue.normalizeStyle)({
-      width: _ctx.toSizeUnit(_ctx.titleWidth)
-    })
-  }, _hoisted_11, 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.toNumber(_ctx.rows), (r, index) => {
-    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: "var-skeleton__row",
-      key: r,
-      style: (0, _vue.normalizeStyle)({
-        width: _ctx.toSizeUnit(_ctx.rowsWidth[index])
-      })
-    }, _hoisted_13, 4
-    /* STYLE */
-    );
-  }), 128
-  /* KEYED_FRAGMENT */
-  ))])])])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && _ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_14, _hoisted_16)) : (0, _vue.createCommentVNode)("v-if", true)]);
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarSkeleton',
-  props: _props.props,
-
-  setup() {
-    return {
-      toSizeUnit: _elements.toSizeUnit,
-      toNumber: _shared.toNumber
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/skeleton/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = exports._SkeletonComponent = void 0;
-
-var _Skeleton = _interopRequireDefault(require("./Skeleton.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-_Skeleton.default.install = function (app) {
-  app.component(_Skeleton.default.name, _Skeleton.default);
-};
-
-var _SkeletonComponent = _Skeleton.default;
-exports._SkeletonComponent = _SkeletonComponent;
-var _default = _Skeleton.default;
-exports.default = _default;

package/lib/skeleton/props.js

@@ -1,44 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = void 0;
-var props = {
-  loading: {
-    type: Boolean,
-    default: true
-  },
-  title: {
-    type: Boolean,
-    default: false
-  },
-  card: {
-    type: Boolean,
-    default: false
-  },
-  avatar: {
-    type: Boolean,
-    default: false
-  },
-  fullscreen: {
-    type: Boolean,
-    default: false
-  },
-  titleWidth: {
-    type: [Number, String]
-  },
-  cardHeight: {
-    type: [Number, String]
-  },
-  avatarSize: {
-    type: [Number, String]
-  },
-  rows: {
-    type: [Number, String],
-    default: 3
-  },
-  rowsWidth: {
-    type: Array,
-    default: () => []
-  }
-};
-exports.props = props;

package/lib/skeleton/skeleton.css

@@ -1 +0,0 @@
-:root { --skeleton-content-padding: 16px; --skeleton-card-height: 160px; --skeleton-card-border-radius: 4px; --skeleton-card-margin-bottom: 16px; --skeleton-card-background-color: rgba(0, 0, 0, 0.12); --skeleton-animation-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0)); --skeleton-avatar-size: 34px; --skeleton-avatar-border-radius: 50%; --skeleton-avatar-margin-right: 16px; --skeleton-avatar-background-color: rgba(0, 0, 0, 0.12); --skeleton-title-width: 50%; --skeleton-title-border-radius: 10px; --skeleton-title-background-color: rgba(0, 0, 0, 0.12); --skeleton-row-height: 12px; --skeleton-row-border-radius: 10px; --skeleton-row-margin-top: 10px;}@keyframes var-skeleton-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-skeleton { width: 100%;}.var-skeleton__content { padding: var(--skeleton-content-padding);}.var-skeleton__card { position: relative; overflow: hidden; width: 100%; height: var(--skeleton-card-height); background-color: var(--skeleton-card-background-color); margin-bottom: var(--skeleton-card-margin-bottom); border-radius: var(--skeleton-card-border-radius); transition: background-color 0.25s;}.var-skeleton__article { display: flex; width: 100%;}.var-skeleton__avatar { position: relative; overflow: hidden; flex-shrink: 0; width: var(--skeleton-avatar-size); height: var(--skeleton-avatar-size); border-radius: var(--skeleton-avatar-border-radius); background-color: var(--skeleton-avatar-background-color); margin-right: var(--skeleton-avatar-margin-right); transition: 0.25s background-color;}.var-skeleton__section { width: 100%; padding-top: 8px;}.var-skeleton__title { position: relative; overflow: hidden; width: var(--skeleton-title-width); height: var(--skeleton-row-height); background-color: var(--skeleton-title-background-color); border-radius: var(--skeleton-title-border-radius); transition: 0.25s background-color;}.var-skeleton__row { position: relative; overflow: hidden; width: 100%; height: var(--skeleton-row-height); background-color: var(--skeleton-title-background-color); margin-top: var(--skeleton-row-margin-top); border-radius: var(--skeleton-row-border-radius); transition: 0.25s background-color;}.var-skeleton__fullscreen { position: fixed; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--skeleton-title-background-color); transition: 0.25s background-color;}.var-skeleton--animation::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-skeleton-animation 1s infinite; background: var(--skeleton-animation-background); transition: 0.25s background-color;}

package/lib/skeleton/skeleton.less

@@ -1,138 +0,0 @@
-@skeleton-content-padding: 16px;
-@skeleton-card-height: 160px;
-@skeleton-card-border-radius: 4px;
-@skeleton-card-margin-bottom: 16px;
-@skeleton-card-background-color: rgba(0, 0, 0, 0.12);
-@skeleton-animation-background: linear-gradient(
-  90deg,
-  hsla(0, 0%, 100%, 0),
-  hsla(0, 0%, 100%, 0.3),
-  hsla(0, 0%, 100%, 0)
-);
-@skeleton-avatar-size: 34px;
-@skeleton-avatar-border-radius: 50%;
-@skeleton-avatar-margin-right: 16px;
-@skeleton-avatar-background-color: rgba(0, 0, 0, 0.12);
-@skeleton-title-width: 50%;
-@skeleton-title-border-radius: 10px;
-@skeleton-title-background-color: rgba(0, 0, 0, 0.12);
-@skeleton-row-height: 12px;
-@skeleton-row-border-radius: 10px;
-@skeleton-row-margin-top: 10px;
-
-:root {
-  --skeleton-content-padding: @skeleton-content-padding;
-  --skeleton-card-height: @skeleton-card-height;
-  --skeleton-card-border-radius: @skeleton-card-border-radius;
-  --skeleton-card-margin-bottom: @skeleton-card-margin-bottom;
-  --skeleton-card-background-color: @skeleton-card-background-color;
-  --skeleton-animation-background: @skeleton-animation-background;
-  --skeleton-avatar-size: @skeleton-avatar-size;
-  --skeleton-avatar-border-radius: @skeleton-avatar-border-radius;
-  --skeleton-avatar-margin-right: @skeleton-avatar-margin-right;
-  --skeleton-avatar-background-color: @skeleton-avatar-background-color;
-  --skeleton-title-width: @skeleton-title-width;
-  --skeleton-title-border-radius: @skeleton-title-border-radius;
-  --skeleton-title-background-color: @skeleton-title-background-color;
-  --skeleton-row-height: @skeleton-row-height;
-  --skeleton-row-border-radius: @skeleton-row-border-radius;
-  --skeleton-row-margin-top: @skeleton-row-margin-top;
-}
-
-@keyframes var-skeleton-animation {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
-}
-
-.var-skeleton {
-  width: 100%;
-
-  &__content {
-    padding: var(--skeleton-content-padding);
-  }
-
-  &__card {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    height: var(--skeleton-card-height);
-    background-color: var(--skeleton-card-background-color);
-    margin-bottom: var(--skeleton-card-margin-bottom);
-    border-radius: var(--skeleton-card-border-radius);
-    transition: background-color 0.25s;
-  }
-
-  &__article {
-    display: flex;
-    width: 100%;
-  }
-
-  &__avatar {
-    position: relative;
-    overflow: hidden;
-    flex-shrink: 0;
-    width: var(--skeleton-avatar-size);
-    height: var(--skeleton-avatar-size);
-    border-radius: var(--skeleton-avatar-border-radius);
-    background-color: var(--skeleton-avatar-background-color);
-    margin-right: var(--skeleton-avatar-margin-right);
-    transition: 0.25s background-color;
-  }
-
-  &__section {
-    width: 100%;
-    padding-top: 8px;
-  }
-
-  &__title {
-    position: relative;
-    overflow: hidden;
-    width: var(--skeleton-title-width);
-    height: var(--skeleton-row-height);
-    background-color: var(--skeleton-title-background-color);
-    border-radius: var(--skeleton-title-border-radius);
-    transition: 0.25s background-color;
-  }
-
-  &__row {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    height: var(--skeleton-row-height);
-    background-color: var(--skeleton-title-background-color);
-    margin-top: var(--skeleton-row-margin-top);
-    border-radius: var(--skeleton-row-border-radius);
-    transition: 0.25s background-color;
-  }
-
-  &__fullscreen {
-    position: fixed;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: var(--skeleton-title-background-color);
-    transition: 0.25s background-color;
-  }
-
-  &--animation {
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      animation: var-skeleton-animation 1s infinite;
-      background: var(--skeleton-animation-background);
-      transition: 0.25s background-color;
-    }
-  }
-}

package/lib/skeleton/style/index.js

@@ -1,3 +0,0 @@
-require('../../styles/common.css')
-require('../skeleton.css')
-require('../SkeletonSfc.css')

package/lib/skeleton/style/less.js

@@ -1,3 +0,0 @@
-require('../../styles/common.less')
-require('../skeleton.less')
-require('../SkeletonSfc.less')