@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/date-picker/date-picker.less

@@ -1,330 +0,0 @@
-@date-picker-border-radius: 4px;
-@date-picker-font-size: var(--font-size-md);
-@date-picker-min-width: 290px;
-@date-picker-height: 385px;
-@date-picker-main-color: rgba(0, 0, 0, 0.87);
-@date-picker-title-padding: 16px;
-@date-picker-title-background: var(--color-primary);
-@date-picker-title-color: #fff;
-@date-picker-title-year-font-size: var(--font-size-md);
-@date-picker-title-year-font-weight: 500;
-@date-picker-title-year-margin-bottom: 8px;
-@date-picker-title-date-height: 48px;
-@date-picker-title-date-font-size: 34px;
-@date-picker-title-date-font-weight: 500;
-@date-picker-title-date-range-font-size: 20px;
-@picker-header-padding: 4px 16px;
-@month-picker-padding: 0 12px;
-@month-picker-item-width: 33%;
-@month-picker-item-height: 56px;
-@month-picker-item-button-max-width: 140px;
-@year-picker-font-weight: 400;
-@year-picker-item-padding: 8px 0;
-@year-picker-item-active-font-size: 26px;
-@year-picker-item-active-font-weight: 500;
-@year-picker-item-active-font-padding: 10px 0;
-@year-picker-item-active-color: var(--color-primary);
-@day-picker-content-item-width: 14.28%;
-@day-picker-content-item-font-size: var(--font-size-sm);
-@day-picker-content-item-padding: 2px 0;
-@day-picker-content-item-button-width: 32px;
-@day-picker-content-item-button-height: 32px;
-@day-picker-content-item-button-font-size: var(--font-size-sm);
-@day-picker-head-item-color: rgba(0, 0, 0, 0.38);
-@day-picker-head-item-padding: 8px 0;
-@day-picker-head-item-font-weight: 600;
-@date-picker-body-background-color: rgba(0, 0, 0, 0);
-
-:root {
-  --date-picker-border-radius: @date-picker-border-radius;
-  --date-picker-font-size: @date-picker-font-size;
-  --date-picker-min-width: @date-picker-min-width;
-  --date-picker-height: @date-picker-height;
-  --date-picker-main-color: @date-picker-main-color;
-  --date-picker-title-padding: @date-picker-title-padding;
-  --date-picker-title-background: @date-picker-title-background;
-  --date-picker-title-color: @date-picker-title-color;
-  --date-picker-title-year-font-size: @date-picker-title-year-font-size;
-  --date-picker-title-year-font-weight: @date-picker-title-year-font-weight;
-  --date-picker-title-year-margin-bottom: @date-picker-title-year-margin-bottom;
-  --date-picker-title-date-height: @date-picker-title-date-height;
-  --date-picker-title-date-font-size: @date-picker-title-date-font-size;
-  --date-picker-title-date-font-weight: @date-picker-title-date-font-weight;
-  --date-picker-title-date-range-font-size: @date-picker-title-date-range-font-size;
-  --date-picker-body-background-color: @date-picker-body-background-color;
-  --picker-header-padding: @picker-header-padding;
-  --month-picker-padding: @month-picker-padding;
-  --month-picker-item-width: @month-picker-item-width;
-  --month-picker-item-height: @month-picker-item-height;
-  --month-picker-item-button-max-width: @month-picker-item-button-max-width;
-  --year-picker-font-weight: @year-picker-font-weight;
-  --year-picker-item-padding: @year-picker-item-padding;
-  --year-picker-item-active-font-size: @year-picker-item-active-font-size;
-  --year-picker-item-active-font-weight: @year-picker-item-active-font-weight;
-  --year-picker-item-active-font-padding: @year-picker-item-active-font-padding;
-  --year-picker-item-active-color: @year-picker-item-active-color;
-  --day-picker-content-item-width: @day-picker-content-item-width;
-  --day-picker-content-item-font-size: @day-picker-content-item-font-size;
-  --day-picker-content-item-padding: @day-picker-content-item-padding;
-  --day-picker-content-item-button-width: @day-picker-content-item-button-width;
-  --day-picker-content-item-button-height: @day-picker-content-item-button-height;
-  --day-picker-content-item-button-font-size: @day-picker-content-item-button-font-size;
-  --day-picker-head-item-color: @day-picker-head-item-color;
-  --day-picker-head-item-padding: @day-picker-head-item-padding;
-  --day-picker-head-item-font-weight: @day-picker-head-item-font-weight;
-}
-
-.var-date-picker {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  border-radius: var(--date-picker-border-radius);
-  contain: layout style;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--date-picker-font-size);
-  position: relative;
-  min-width: var(--date-picker-min-width);
-  height: var(--date-picker-height);
-  overflow: hidden;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &-title {
-    padding: var(--date-picker-title-padding);
-    color: var(--date-picker-title-color);
-    background: var(--date-picker-title-background);
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    flex-wrap: wrap;
-
-    &__year {
-      opacity: 0.6;
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      align-items: center;
-      display: inline-flex;
-      font-size: var(--date-picker-title-year-font-size);
-      font-weight: var(--date-picker-title-year-font-weight);
-      margin-bottom: var(--date-picker-title-year-margin-bottom);
-      transition: 0.3s var(--cubic-bezier);
-
-      &--active {
-        opacity: 1;
-      }
-    }
-
-    &__date {
-      height: var(--date-picker-title-date-height);
-      overflow: hidden;
-      font-size: var(--date-picker-title-date-font-size);
-      text-align: left;
-      font-weight: var(--date-picker-title-date-font-weight);
-      position: relative;
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      display: flex;
-      align-items: center;
-      opacity: 0.6;
-      transition: 0.3s var(--cubic-bezier);
-
-      &--active {
-        opacity: 1;
-      }
-
-      &--range {
-        font-size: var(--date-picker-title-date-range-font-size);
-      }
-    }
-  }
-
-  &-body {
-    flex: 1;
-    position: relative;
-    overflow: auto;
-    background-color: var(--date-picker-body-background-color);
-  }
-
-  .var-picker-header {
-    padding: var(--picker-header-padding);
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-
-    &__value {
-      flex: 1;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
-      font-weight: 700;
-      cursor: pointer;
-
-      div {
-        width: 100%;
-      }
-    }
-  }
-
-  .var-month-picker {
-    &__content {
-      padding: var(--month-picker-padding);
-
-      ul {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        li {
-          width: var(--month-picker-item-width);
-          display: flex;
-          height: var(--month-picker-item-height);
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-
-    &__button[var-month-picker-cover] {
-      width: 100%;
-      max-width: var(--month-picker-item-button-max-width);
-    }
-  }
-
-  .var-year-picker {
-    &__panel {
-      width: 100%;
-      height: 100%;
-      font-weight: var(--year-picker-font-weight);
-      padding: 0;
-      margin: 0;
-      list-style-type: none;
-      overflow: auto;
-      text-align: center;
-
-      li {
-        padding: var(--year-picker-item-padding);
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-
-      &--active {
-        font-size: var(--year-picker-item-active-font-size);
-        font-weight: var(--year-picker-item-active-font-weight);
-        padding: var(--year-picker-item-active-font-padding);
-        color: var(--year-picker-item-active-color);
-      }
-    }
-  }
-
-  .var-day-picker {
-    &__content {
-      ul {
-        display: flex;
-        flex-wrap: wrap;
-
-        li {
-          position: relative;
-          display: flex;
-          justify-content: center;
-          width: var(--day-picker-content-item-width);
-          font-size: var(--day-picker-content-item-font-size);
-          padding: var(--day-picker-content-item-padding);
-        }
-      }
-    }
-
-    &__head {
-      li {
-        color: var(--day-picker-head-item-color);
-        padding: var(--day-picker-head-item-padding);
-        font-weight: var(--day-picker-head-item-font-weight);
-      }
-    }
-
-    &__button[var-day-picker-cover] {
-      width: var(--day-picker-content-item-button-width);
-      height: var(--day-picker-content-item-button-height);
-      font-size: var(--day-picker-content-item-button-font-size);
-    }
-  }
-
-  &-main__color {
-    color: var(--date-picker-main-color);
-  }
-
-  &-translatey-enter-from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  &-translatey-enter-active,
-  &-reverse-translatey-enter-active {
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatey-leave-active,
-  &-reverse-translatey-leave-active {
-    position: absolute;
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatey-leave-to {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  &-reverse-translatey-enter-from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  &-reverse-translatey-leave-to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  &-panel-fade-enter-from,
-  &-panel-fade-leave-to {
-    transition: 0.3s var(--cubic-bezier);
-    opacity: 0;
-  }
-
-  &-panel-fade-leave-active {
-    position: absolute;
-  }
-
-  &-translatex-enter-from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  &-reverse-translatex-enter-from {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  &-translatex-enter-active,
-  &-reverse-translatex-enter-active {
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatex-leave-active,
-  &-reverse-translatex-leave-active {
-    position: absolute;
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatex-leave-to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  &-reverse-translatex-leave-to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}

package/lib/date-picker/index.js

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

package/lib/date-picker/props.js

@@ -1,107 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = exports.WEEK_HEADER = exports.MONTH_LIST = void 0;
-
-function typeValidator(type) {
-  return ['date', 'month'].includes(type);
-}
-
-var MONTH_LIST = [{
-  index: '01'
-}, {
-  index: '02'
-}, {
-  index: '03'
-}, {
-  index: '04'
-}, {
-  index: '05'
-}, {
-  index: '06'
-}, {
-  index: '07'
-}, {
-  index: '08'
-}, {
-  index: '09'
-}, {
-  index: '10'
-}, {
-  index: '11'
-}, {
-  index: '12'
-}];
-exports.MONTH_LIST = MONTH_LIST;
-var WEEK_HEADER = [{
-  index: '0'
-}, {
-  index: '1'
-}, {
-  index: '2'
-}, {
-  index: '3'
-}, {
-  index: '4'
-}, {
-  index: '5'
-}, {
-  index: '6'
-}];
-exports.WEEK_HEADER = WEEK_HEADER;
-var props = {
-  modelValue: {
-    type: [String, Array]
-  },
-  type: {
-    type: String,
-    default: 'date',
-    validator: typeValidator
-  },
-  allowedDates: {
-    type: Function
-  },
-  color: {
-    type: String
-  },
-  headerColor: {
-    type: String
-  },
-  shadow: {
-    type: Boolean,
-    default: false
-  },
-  firstDayOfWeek: {
-    type: [String, Number],
-    default: 0
-  },
-  min: {
-    type: String
-  },
-  max: {
-    type: String
-  },
-  showCurrent: {
-    type: Boolean,
-    default: true
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  range: {
-    type: Boolean,
-    default: false
-  },
-  onChange: {
-    type: Function
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  }
-};
-exports.props = props;