@varlet/ui 1.23.3-alpha.1 → 1.23.4-alpha.16

package/lib/rate/props.js

@@ -0,0 +1,69 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: [String, Number],
+    default: 0
+  },
+  count: {
+    type: [String, Number],
+    default: 5
+  },
+  color: {
+    type: String
+  },
+  icon: {
+    type: String,
+    default: 'star'
+  },
+  emptyColor: {
+    type: String
+  },
+  emptyIcon: {
+    type: String,
+    default: 'star-outline'
+  },
+  size: {
+    type: [String, Number],
+    default: '24'
+  },
+  gap: {
+    type: [String, Number],
+    default: '2'
+  },
+  half: {
+    type: Boolean,
+    default: false
+  },
+  halfIcon: {
+    type: String,
+    default: 'star-half-full'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  disabledColor: {
+    type: String
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  rules: {
+    type: Array
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/rate/provide.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/lib/rate/rate.css

@@ -0,0 +1 @@
+:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--disabled { color: var(--rate-disabled-color) !important;}.var-rate--error { color: var(--rate-error-color) !important;}.var-rate--primary { color: var(--rate-primary-color);}

package/lib/rate/rate.less

@@ -0,0 +1,35 @@
+@rate-disabled-color: var(--color-text-disabled);
+@rate-error-color: var(--color-danger);
+@rate-action-padding: 4px;
+@rate-primary-color: var(--color-primary);
+
+:root {
+  --rate-disabled-color: @rate-disabled-color;
+  --rate-error-color: @rate-error-color;
+  --rate-action-padding: @rate-action-padding;
+  --rate-primary-color: @rate-primary-color;
+}
+
+.var-rate {
+  display: flex;
+  transform: translateX(calc(-1 * var(--rate-action-padding)));
+
+  &__content {
+    padding: var(--rate-action-padding);
+    box-sizing: unset;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &--disabled {
+    color: var(--rate-disabled-color) !important;
+  }
+
+  &--error {
+    color: var(--rate-error-color) !important;
+  }
+
+  &--primary {
+    color: var(--rate-primary-color);
+  }
+}

package/lib/rate/style/index.js

@@ -0,0 +1,6 @@
+require('../../styles/common.css')
+require('../../ripple/ripple.css')
+require('../../icon/icon.css')
+require('../../form-details/formDetails.css')
+require('../rate.css')
+require('../RateSfc.css')

package/lib/rate/style/less.js

@@ -0,0 +1,6 @@
+require('../../styles/common.less')
+require('../../ripple/ripple.less')
+require('../../icon/icon.less')
+require('../../form-details/formDetails.less')
+require('../rate.less')
+require('../RateSfc.less')

package/lib/ripple/index.js

@@ -0,0 +1,187 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._RippleComponent = void 0;
+
+var _context = _interopRequireDefault(require("../context"));
+
+
+
+
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var ANIMATION_DURATION = 250;
+
+function setStyles(element) {
+  var {
+    zIndex,
+    position
+  } = window.getComputedStyle(element);
+  element.style.overflow = 'hidden';
+  element.style.overflowX = 'hidden';
+  element.style.overflowY = 'hidden';
+  position === 'static' && (element.style.position = 'relative');
+  zIndex === 'auto' && (element.style.zIndex = '1');
+}
+
+function computeRippleStyles(element, event) {
+  var {
+    top,
+    left
+  } = element.getBoundingClientRect();
+  var {
+    clientWidth,
+    clientHeight
+  } = element;
+  var radius = Math.sqrt(Math.pow(clientWidth, 2) + Math.pow(clientHeight, 2)) / 2;
+  var size = radius * 2;
+  var localX = event.touches[0].clientX - left;
+  var localY = event.touches[0].clientY - top;
+  var centerX = (clientWidth - radius * 2) / 2;
+  var centerY = (clientHeight - radius * 2) / 2;
+  var x = localX - radius;
+  var y = localY - radius;
+  return {
+    x,
+    y,
+    centerX,
+    centerY,
+    size
+  };
+}
+
+function createRipple(event) {
+  var _ripple = this._ripple;
+
+  _ripple.removeRipple();
+
+  if (_ripple.disabled || _ripple.tasker) {
+    return;
+  }
+
+  var task = () => {
+    var _ripple$color;
+
+    _ripple.tasker = null;
+    var {
+      x,
+      y,
+      centerX,
+      centerY,
+      size
+    } = computeRippleStyles(this, event);
+    var ripple = document.createElement('div');
+    ripple.classList.add('var-ripple');
+    ripple.style.opacity = "0";
+    ripple.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
+    ripple.style.width = size + "px";
+    ripple.style.height = size + "px";
+    ripple.style.backgroundColor = (_ripple$color = _ripple.color) != null ? _ripple$color : 'currentColor';
+    ripple.dataset.createdAt = String(performance.now());
+    setStyles(this);
+    this.appendChild(ripple);
+    window.setTimeout(() => {
+      ripple.style.transform = "translate(" + centerX + "px, " + centerY + "px) scale3d(1, 1, 1)";
+      ripple.style.opacity = ".25";
+    }, 20);
+  };
+
+  _ripple.tasker = window.setTimeout(task, 60);
+}
+
+function removeRipple() {
+  var _ripple = this._ripple;
+
+  var task = () => {
+    var ripples = this.querySelectorAll('.var-ripple');
+
+    if (!ripples.length) {
+      return;
+    }
+
+    var lastRipple = ripples[ripples.length - 1];
+    var delay = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt);
+    setTimeout(() => {
+      lastRipple.style.opacity = "0";
+      setTimeout(() => {
+        var _lastRipple$parentNod;
+
+        return (_lastRipple$parentNod = lastRipple.parentNode) == null ? void 0 : _lastRipple$parentNod.removeChild(lastRipple);
+      }, ANIMATION_DURATION);
+    }, delay);
+  };
+
+  _ripple.tasker ? setTimeout(task, 60) : task();
+}
+
+function forbidRippleTask() {
+  var _ripple = this._ripple;
+
+  if (!_ripple.touchmoveForbid) {
+    return;
+  }
+
+  _ripple.tasker && window.clearTimeout(_ripple.tasker);
+  _ripple.tasker = null;
+}
+
+function mounted(el, binding) {
+  var _binding$value, _binding$value$touchm, _binding$value2;
+
+  el._ripple = _extends({
+    tasker: null
+  }, (_binding$value = binding.value) != null ? _binding$value : {}, {
+    touchmoveForbid: (_binding$value$touchm = (_binding$value2 = binding.value) == null ? void 0 : _binding$value2.touchmoveForbid) != null ? _binding$value$touchm : _context.default.touchmoveForbid,
+    removeRipple: removeRipple.bind(el)
+  });
+  el.addEventListener('touchstart', createRipple, {
+    passive: true
+  });
+  el.addEventListener('touchmove', forbidRippleTask, {
+    passive: true
+  });
+  el.addEventListener('dragstart', removeRipple, {
+    passive: true
+  });
+  document.addEventListener('touchend', el._ripple.removeRipple, {
+    passive: true
+  });
+  document.addEventListener('touchcancel', el._ripple.removeRipple, {
+    passive: true
+  });
+}
+
+function unmounted(el) {
+  el.removeEventListener('touchstart', createRipple);
+  el.removeEventListener('touchmove', forbidRippleTask);
+  el.removeEventListener('dragstart', removeRipple);
+  document.removeEventListener('touchend', el._ripple.removeRipple);
+  document.removeEventListener('touchcancel', el._ripple.removeRipple);
+}
+
+function updated(el, binding) {
+  var _binding$value3, _binding$value$touchm2, _binding$value4;
+
+  el._ripple = _extends({}, el._ripple, (_binding$value3 = binding.value) != null ? _binding$value3 : {}, {
+    touchmoveForbid: (_binding$value$touchm2 = (_binding$value4 = binding.value) == null ? void 0 : _binding$value4.touchmoveForbid) != null ? _binding$value$touchm2 : _context.default.touchmoveForbid,
+    tasker: null
+  });
+}
+
+var Ripple = {
+  mounted,
+  unmounted,
+  updated,
+
+  install(app) {
+    app.directive('ripple', this);
+  }
+
+};
+var _RippleComponent = Ripple;
+exports._RippleComponent = _RippleComponent;
+var _default = Ripple;
+exports.default = _default;

package/lib/ripple/ripple.css

@@ -0,0 +1 @@
+:root { --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);}.var-ripple { position: absolute; transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 100;}

package/lib/ripple/ripple.less

@@ -0,0 +1,17 @@
+@ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+
+:root {
+  --ripple-cubic-bezier: @ripple-cubic-bezier;
+}
+
+.var-ripple {
+  position: absolute;
+  transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  opacity: 0;
+  will-change: transform, opacity;
+  pointer-events: none;
+  z-index: 100;
+}

package/lib/ripple/style/index.js

@@ -0,0 +1,2 @@
+require('../ripple.css')
+require('../../styles/common.css')

package/lib/ripple/style/less.js

@@ -0,0 +1,2 @@
+require('../ripple.less')
+require('../../styles/common.less')

package/lib/row/Row.js

@@ -0,0 +1,102 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _provide = require("./provide");
+
+var _elements = require("../utils/elements");
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: "var-row var--box",
+    style: (0, _vue.normalizeStyle)({
+      justifyContent: _ctx.justify,
+      alignItems: _ctx.align
+    }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
+  /* STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarRow',
+  props: _props.props,
+
+  setup(props) {
+    var {
+      cols,
+      bindCols,
+      length
+    } = (0, _provide.useCols)();
+
+    var computeGroups = () => {
+      var groups = [[]];
+      var span = 0;
+      cols.forEach(col => {
+        var colSpan = col.span.value + col.offset.value;
+        var nextSpan = span + colSpan;
+
+        if (nextSpan > 24) {
+          groups.push([col]);
+          span = colSpan;
+        } else {
+          groups[groups.length - 1].push(col);
+          span += colSpan;
+        }
+      });
+      return groups;
+    };
+
+    var computePadding = () => {
+      var groups = computeGroups();
+      var gutter = (0, _elements.toPxNum)(props.gutter);
+      var average = gutter / 2;
+      groups.forEach(cols => {
+        cols.forEach((col, index) => {
+          if (cols.length <= 1) {
+            return;
+          }
+
+          if (index === 0) {
+            col.setPadding({
+              left: 0,
+              right: average
+            });
+          }
+
+          if (index === cols.length - 1) {
+            col.setPadding({
+              left: average,
+              right: 0
+            });
+          }
+
+          if (index > 0 && index < cols.length - 1) {
+            col.setPadding({
+              left: average,
+              right: average
+            });
+          }
+        });
+      });
+    };
+
+    var rowProvider = {
+      computePadding
+    };
+    (0, _vue.watch)(() => length.value, computePadding);
+    (0, _vue.watch)(() => props.gutter, computePadding);
+    bindCols(rowProvider);
+  }
+
+});
+
+exports.default = _default;

package/lib/row/index.js

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

package/lib/row/props.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function justifyValidator(justify) {
+  return ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'].includes(justify);
+}
+
+function alignValidator(align) {
+  return ['flex-start', 'center', 'flex-end'].includes(align);
+}
+
+var props = {
+  gutter: {
+    type: [String, Number],
+    default: 0
+  },
+  justify: {
+    type: String,
+    default: 'flex-start',
+    validator: justifyValidator
+  },
+  align: {
+    type: String,
+    default: 'flex-start',
+    validator: alignValidator
+  },
+  onClick: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/row/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCols = useCols;
+exports.ROW_COUNT_COL_KEY = exports.ROW_BIND_COL_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var ROW_BIND_COL_KEY = Symbol('ROW_BIND_COL_KEY');
+exports.ROW_BIND_COL_KEY = ROW_BIND_COL_KEY;
+var ROW_COUNT_COL_KEY = Symbol('ROW_COUNT_COL_KEY');
+exports.ROW_COUNT_COL_KEY = ROW_COUNT_COL_KEY;
+
+function useCols() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(ROW_BIND_COL_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(ROW_COUNT_COL_KEY);
+  return {
+    length,
+    cols: childProviders,
+    bindCols: bindChildren
+  };
+}

package/lib/row/row.css

@@ -0,0 +1 @@
+.var-row { display: flex; flex-wrap: wrap;}

package/lib/row/row.less

@@ -0,0 +1,4 @@
+.var-row {
+  display: flex;
+  flex-wrap: wrap;
+}

package/lib/row/style/index.js

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

package/lib/row/style/less.js

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