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

package/lib/dialog/props.js

@@ -0,0 +1,73 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+var _components = require("../utils/components");
+
+var _props = require("../popup/props");
+
+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); }
+
+function messageAlignValidator(messageAlign) {
+  return ['left', 'center', 'right'].includes(messageAlign);
+}
+
+var props = _extends({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String
+  },
+  message: {
+    type: String
+  },
+  messageAlign: {
+    type: String,
+    default: 'left',
+    validator: messageAlignValidator
+  },
+  confirmButton: {
+    type: Boolean,
+    default: true
+  },
+  cancelButton: {
+    type: Boolean,
+    default: true
+  },
+  confirmButtonText: {
+    type: String
+  },
+  cancelButtonText: {
+    type: String
+  },
+  confirmButtonTextColor: {
+    type: String
+  },
+  cancelButtonTextColor: {
+    type: String
+  },
+  confirmButtonColor: {
+    type: String
+  },
+  cancelButtonColor: {
+    type: String
+  },
+  onBeforeClose: {
+    type: Function
+  },
+  onConfirm: {
+    type: Function
+  },
+  onCancel: {
+    type: Function
+  },
+  'onUpdate:show': {
+    type: Function
+  }
+}, (0, _components.pickProps)(_props.props, ['overlay', 'overlayClass', 'overlayStyle', 'lockScroll', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', // internal for function call closes the dialog
+'onRouteChange']));
+
+exports.props = props;

package/lib/dialog/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../popup/popup.css')
+require('../../button/button.css')
+require('../dialog.css')
+require('../DialogSfc.css')

package/lib/dialog/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../popup/popup.less')
+require('../../button/button.less')
+require('../dialog.less')
+require('../DialogSfc.less')

package/lib/divider/Divider.js

@@ -0,0 +1,88 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+var _props = require("./props");
+
+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 _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  key: 0,
+  class: "var-divider__text"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-divider var--box", [_ctx.vertical ? 'var-divider--vertical' : null, _ctx.withText ? 'var-divider--with-text' : null, _ctx.isInset ? 'var-divider--inset' : null, _ctx.dashed ? 'var-divider--dashed' : null]]),
+    style: (0, _vue.normalizeStyle)(_ctx.style)
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_1, (0, _vue.toDisplayString)(_ctx.description), 1
+  /* TEXT */
+  )) : (0, _vue.createCommentVNode)("v-if", true)])], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarDivider',
+  props: _props.props,
+
+  setup(props, {
+    slots
+  }) {
+    var state = (0, _vue.reactive)({
+      withText: false
+    });
+    var isInset = (0, _vue.computed)(() => (0, _shared.isBool)(props.inset) ? props.inset : true);
+    var style = (0, _vue.computed)(() => {
+      var {
+        inset,
+        vertical,
+        margin
+      } = props;
+      var baseStyle = {
+        margin
+      };
+      if ((0, _shared.isBool)(inset) || inset === 0) return _extends({}, baseStyle); // -18px -> -18
+
+      var _inset = (0, _shared.toNumber)(inset); // -18px -> 18px
+
+
+      var absInsetWithUnit = Math.abs(_inset) + (inset + '').replace(_inset + '', '');
+      return vertical ? _extends({}, baseStyle, {
+        height: "calc(80% - " + (0, _elements.toSizeUnit)(absInsetWithUnit) + ")"
+      }) : _extends({}, baseStyle, {
+        width: "calc(100% - " + (0, _elements.toSizeUnit)(absInsetWithUnit) + ")",
+        left: _inset > 0 ? (0, _elements.toSizeUnit)(absInsetWithUnit) : (0, _elements.toSizeUnit)(0)
+      });
+    });
+
+    var checkHasText = () => {
+      state.withText = Boolean(slots.default == null ? void 0 : slots.default().length) || Boolean(props.description);
+    };
+
+    (0, _vue.onMounted)(() => {
+      checkHasText();
+    });
+    (0, _vue.onUpdated)(() => {
+      checkHasText();
+    });
+    return _extends({}, (0, _vue.toRefs)(state), {
+      style,
+      isInset
+    });
+  }
+
+});
+
+exports.default = _default;

package/lib/divider/divider.css

@@ -0,0 +1 @@
+:root { --divider-color: rgba(0, 0, 0, 0.12); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px; --divider-vertical-inset: 8px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: 80%; margin: auto var(--divider-text-margin); padding: var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color); transform: translateY(-10%);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider--vertical.var-divider--inset { width: 0; left: unset; height: calc(80% - var(--divider-vertical-inset));}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}

package/lib/divider/divider.less

@@ -0,0 +1,79 @@
+@divider-color: rgba(0, 0, 0, 0.12);
+@divider-text-color: #888;
+@divider-text-margin: 8px 0;
+@divider-text-padding: 0 8px;
+@divider-inset: 72px;
+@divider-vertical-inset: 8px;
+
+:root {
+  --divider-color: @divider-color;
+  --divider-text-color: @divider-text-color;
+  --divider-text-margin: @divider-text-margin;
+  --divider-text-padding: @divider-text-padding;
+  --divider-inset: @divider-inset;
+  --divider-vertical-inset: @divider-vertical-inset;
+}
+
+.var-divider {
+  position: relative;
+  width: 100%;
+  height: 0;
+  border: none;
+  border-top: 1px solid var(--divider-color);
+  margin: var(--divider-text-margin);
+  font-size: var(--font-size-md);
+  color: var(--divider-text-color);
+
+  &--vertical {
+    width: 0;
+    height: 80%;
+    margin: auto var(--divider-text-margin);
+    padding: var(--divider-text-margin);
+    border-top: none;
+    border-left: 1px solid var(--divider-color);
+    transform: translateY(-10%);
+  }
+
+  &--inset {
+    width: calc(100% - var(--divider-inset));
+    left: var(--divider-inset);
+  }
+
+  &--vertical&--inset {
+    width: 0;
+    left: unset;
+    height: calc(80% - var(--divider-vertical-inset));
+  }
+
+  &__text {
+    display: inline-block;
+    padding: var(--divider-text-padding);
+  }
+
+  &--with-text {
+    background-color: transparent;
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+
+    &::before,
+    &::after {
+      display: inline-block;
+      content: '';
+      flex: 1;
+      height: 0;
+      border-top: 1px solid var(--divider-color);
+    }
+  }
+
+  &--dashed {
+    border-top-style: dashed;
+  }
+
+  &--dashed&--vertical {
+    border-top: none;
+    border-left-style: dashed;
+  }
+}

package/lib/divider/index.js

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

package/lib/divider/props.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  inset: {
+    type: [Boolean, Number, String],
+    default: false
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  description: {
+    type: String
+  },
+  margin: {
+    type: String
+  },
+  dashed: {
+    type: Boolean,
+    default: false
+  }
+};
+exports.props = props;

package/lib/divider/style/index.js

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

package/lib/divider/style/less.js

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

package/lib/form/Form.js

@@ -0,0 +1,77 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _provide = require("./provide");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-form"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default")]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarForm',
+  props: _props.props,
+
+  setup(props) {
+    var disabled = (0, _vue.computed)(() => props.disabled);
+    var readonly = (0, _vue.computed)(() => props.readonly);
+    var {
+      formItems,
+      bindFormItems
+    } = (0, _provide.useFormItems)(); // expose
+
+    var validate = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        var res = yield Promise.all(formItems.map(({
+          validate
+        }) => validate()));
+        return res.every(r => r === true);
+      });
+
+      return function validate() {
+        return _ref.apply(this, arguments);
+      };
+    }(); // expose
+
+
+    var reset = () => formItems.forEach(({
+      reset
+    }) => reset()); // expose
+
+
+    var resetValidation = () => formItems.forEach(({
+      resetValidation
+    }) => resetValidation());
+
+    var formProvider = {
+      disabled,
+      readonly
+    };
+    bindFormItems(formProvider);
+    return {
+      validate,
+      reset,
+      resetValidation
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/form/index.js

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

package/lib/form/props.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+};
+exports.props = props;

package/lib/form/provide.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useForm = useForm;
+exports.useFormItems = useFormItems;
+exports.FORM_BIND_FORM_ITEM_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var FORM_BIND_FORM_ITEM_KEY = Symbol('FORM_BIND_FORM_ITEM_KEY');
+exports.FORM_BIND_FORM_ITEM_KEY = FORM_BIND_FORM_ITEM_KEY;
+
+function useForm() {
+  var {
+    bindParent,
+    parentProvider
+  } = (0, _components.useParent)(FORM_BIND_FORM_ITEM_KEY);
+  return {
+    bindForm: bindParent,
+    form: parentProvider
+  };
+}
+
+function useFormItems() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(FORM_BIND_FORM_ITEM_KEY);
+  return {
+    formItems: childProviders,
+    bindFormItems: bindChildren
+  };
+}

package/lib/form/style/index.js

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

package/lib/form/style/less.js

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

package/lib/form-details/FormDetails.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  key: 0,
+  class: "var-form-details"
+};
+var _hoisted_2 = {
+  class: "var-form-details__message"
+};
+var _hoisted_3 = {
+  class: "var-form-details__length"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Transition, {
+    name: "var-form-details"
+  }, {
+    default: (0, _vue.withCtx)(() => [_ctx.errorMessage || _ctx.maxlengthText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.errorMessage), 1
+    /* TEXT */
+    ), (0, _vue.createElementVNode)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.maxlengthText), 1
+    /* TEXT */
+    )])) : (0, _vue.createCommentVNode)("v-if", true)]),
+    _: 1
+    /* STABLE */
+
+  });
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarFormDetails',
+  props: _props.props
+});
+
+exports.default = _default;

package/lib/form-details/formDetails.css

@@ -0,0 +1 @@
+:root { --form-details-error-color: var(--color-danger); --form-details-length-color: #888; --form-details-margin-top: 6px; --form-details-font-size: 12px; --form-details-message-margin-right: 4px;}.var-form-details-enter-from,.var-form-details-leave-to { opacity: 0; margin-top: 2px !important;}.var-form-details-enter-active,.var-form-details-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-form-details { display: flex; justify-content: space-between; font-size: var(--form-details-font-size); margin-top: var(--form-details-margin-top);}.var-form-details__message { flex-grow: 1; color: var(--form-details-error-color); margin-right: var(--form-details-message-margin-right); user-select: none; text-align: left;}.var-form-details__length { flex-shrink: 0; color: var(--form-details-length-color); user-select: none; text-align: right;}

package/lib/form-details/formDetails.less

@@ -0,0 +1,48 @@
+@form-details-error-color: var(--color-danger);
+@form-details-length-color: #888;
+@form-details-margin-top: 6px;
+@form-details-font-size: 12px;
+@form-details-message-margin-right: 4px;
+
+:root {
+  --form-details-error-color: @form-details-error-color;
+  --form-details-length-color: @form-details-length-color;
+  --form-details-margin-top: @form-details-margin-top;
+  --form-details-font-size: @form-details-font-size;
+  --form-details-message-margin-right: @form-details-message-margin-right;
+}
+
+.var {
+  &-form-details-enter-from,
+  &-form-details-leave-to {
+    opacity: 0;
+    margin-top: 2px !important;
+  }
+
+  &-form-details-enter-active,
+  &-form-details-leave-active {
+    transition: 0.2s all var(--cubic-bezier);
+  }
+}
+
+.var-form-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--form-details-font-size);
+  margin-top: var(--form-details-margin-top);
+
+  &__message {
+    flex-grow: 1;
+    color: var(--form-details-error-color);
+    margin-right: var(--form-details-message-margin-right);
+    user-select: none;
+    text-align: left;
+  }
+
+  &__length {
+    flex-shrink: 0;
+    color: var(--form-details-length-color);
+    user-select: none;
+    text-align: right;
+  }
+}

package/lib/form-details/index.js

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

package/lib/form-details/props.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+  maxlengthText: {
+    type: String,
+    default: ''
+  }
+};
+exports.props = props;

package/lib/form-details/style/index.js

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

package/lib/form-details/style/less.js

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