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

package/lib/locale/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useLocale = useLocale;
+exports.default = exports._LocaleComponent = exports.merge = exports.use = exports.add = exports.pack = exports.packs = void 0;
+
+var _vue = require("vue");
+
+var _zhCN = _interopRequireDefault(require("./zh-CN"));
+
+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); }
+
+function useLocale() {
+  var packs = {};
+  var pack = (0, _vue.ref)({});
+
+  var add = (lang, pack) => {
+    pack.lang = lang;
+    packs[lang] = pack;
+  };
+
+  var use = lang => {
+    if (!packs[lang]) {
+      console.warn("The " + lang + " does not exist. You can mount a language package using the add method");
+      return {};
+    }
+
+    pack.value = packs[lang];
+  };
+
+  var merge = (lang, pack) => {
+    if (!packs[lang]) {
+      console.warn("The " + lang + " does not exist. You can mount a language package using the add method");
+      return;
+    }
+
+    packs[lang] = _extends({}, packs[lang], pack);
+    use(lang);
+  };
+
+  return {
+    packs,
+    pack,
+    add,
+    use,
+    merge
+  };
+}
+
+var {
+  packs,
+  pack,
+  add,
+  use,
+  merge
+} = useLocale();
+exports.merge = merge;
+exports.use = use;
+exports.add = add;
+exports.pack = pack;
+exports.packs = packs;
+add('zh-CN', _zhCN.default);
+use('zh-CN');
+var _LocaleComponent = {
+  packs,
+  pack,
+  add,
+  use,
+  merge,
+  useLocale
+};
+exports._LocaleComponent = _LocaleComponent;
+var _default = {
+  packs,
+  pack,
+  add,
+  use,
+  merge,
+  useLocale
+};
+exports.default = _default;

package/lib/locale/zh-CN.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  // Dialog
+  dialogTitle: '提示',
+  dialogConfirmButtonText: '确认',
+  dialogCancelButtonText: '取消',
+  // ActionSheet
+  actionSheetTitle: '请选择',
+  // List
+  listLoadingText: '加载中',
+  listFinishedText: '没有更多了',
+  listErrorText: '加载失败',
+  // Picker
+  pickerTitle: '请选择',
+  pickerConfirmButtonText: '确认',
+  pickerCancelButtonText: '取消',
+  // date-picker
+  datePickerMonthDict: {
+    '01': {
+      name: '一月',
+      abbr: '一月'
+    },
+    '02': {
+      name: '二月',
+      abbr: '二月'
+    },
+    '03': {
+      name: '三月',
+      abbr: '三月'
+    },
+    '04': {
+      name: '四月',
+      abbr: '四月'
+    },
+    '05': {
+      name: '五月',
+      abbr: '五月'
+    },
+    '06': {
+      name: '六月',
+      abbr: '六月'
+    },
+    '07': {
+      name: '七月',
+      abbr: '七月'
+    },
+    '08': {
+      name: '八月',
+      abbr: '八月'
+    },
+    '09': {
+      name: '九月',
+      abbr: '九月'
+    },
+    '10': {
+      name: '十月',
+      abbr: '十月'
+    },
+    '11': {
+      name: '十一月',
+      abbr: '十一月'
+    },
+    '12': {
+      name: '十二月',
+      abbr: '十二月'
+    }
+  },
+  datePickerWeekDict: {
+    '0': {
+      name: '星期日',
+      abbr: '日'
+    },
+    '1': {
+      name: '星期一',
+      abbr: '一'
+    },
+    '2': {
+      name: '星期二',
+      abbr: '二'
+    },
+    '3': {
+      name: '星期三',
+      abbr: '三'
+    },
+    '4': {
+      name: '星期四',
+      abbr: '四'
+    },
+    '5': {
+      name: '星期五',
+      abbr: '五'
+    },
+    '6': {
+      name: '星期六',
+      abbr: '六'
+    }
+  },
+  datePickerSelected: '个被选择',
+  // pagination
+  paginationItem: '条',
+  paginationPage: '页',
+  paginationJump: '前往'
+};
+exports.default = _default;

package/lib/menu/Menu.js

@@ -0,0 +1,144 @@
+"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 _zIndex = require("../context/zIndex");
+
+var _components = require("../utils/components");
+
+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); }); }; }
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: "var-menu",
+    ref: "host",
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), ((0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
+    to: _ctx.teleport,
+    disabled: !_ctx.teleport || _ctx.disabled
+  }, [(0, _vue.createVNode)(_vue.Transition, {
+    name: "var-menu",
+    onAfterEnter: _ctx.onOpened,
+    onAfterLeave: _ctx.onClosed
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+      class: "var-menu__menu var-elevation--3",
+      ref: "menu",
+      style: (0, _vue.normalizeStyle)({
+        top: "calc(" + _ctx.top + "px + " + _ctx.toSizeUnit(_ctx.offsetY) + ")",
+        left: "calc(" + _ctx.left + "px + " + _ctx.toSizeUnit(_ctx.offsetX) + ")",
+        zIndex: _ctx.zIndex
+      }),
+      onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)(() => {}, ["stop"]))
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "menu")], 4
+    /* STYLE */
+    ), [[_vue.vShow, _ctx.show]])]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["onAfterEnter", "onAfterLeave"])], 8
+  /* PROPS */
+  , ["to", "disabled"]))], 512
+  /* NEED_PATCH */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarMenu',
+  props: _props.props,
+
+  setup(props) {
+    var host = (0, _vue.ref)(null);
+    var menu = (0, _vue.ref)(null);
+    var top = (0, _vue.ref)(0);
+    var left = (0, _vue.ref)(0);
+    var {
+      zIndex
+    } = (0, _zIndex.useZIndex)(() => props.show, 1);
+    var {
+      disabled
+    } = (0, _components.useTeleport)();
+    var clickSelf = false;
+
+    var computeTop = alignment => {
+      return alignment === 'top' ? (0, _elements.getTop)(host.value) : (0, _elements.getTop)(host.value) - menu.value.offsetHeight;
+    };
+
+    var handleClick = () => {
+      clickSelf = true;
+    };
+
+    var handleMenuClose = () => {
+      var _props$onUpdateShow;
+
+      if (clickSelf) {
+        clickSelf = false;
+        return;
+      }
+
+      if (!props.show) {
+        return;
+      }
+
+      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
+    }; // expose
+
+
+    var resize = () => {
+      top.value = computeTop(props.alignment);
+      left.value = (0, _elements.getLeft)(host.value);
+    };
+
+    (0, _vue.watch)(() => props.alignment, resize);
+    (0, _vue.watch)(() => props.show, /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* (newValue) {
+        var {
+          onOpen,
+          onClose
+        } = props;
+        newValue && resize();
+        newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _vue.onMounted)(() => {
+      resize();
+      document.addEventListener('click', handleMenuClose);
+      window.addEventListener('resize', resize);
+    });
+    (0, _vue.onUnmounted)(() => {
+      document.removeEventListener('click', handleMenuClose);
+      window.removeEventListener('resize', resize);
+    });
+    return {
+      disabled,
+      zIndex,
+      host,
+      menu,
+      top,
+      left,
+      toSizeUnit: _elements.toSizeUnit,
+      handleClick,
+      resize
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/menu/index.js

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

package/lib/menu/menu.css

@@ -0,0 +1 @@
+.var-menu-enter-from,.var-menu-leave-to { transform: scale(0.8); opacity: 0;}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.25s;}.var-menu { display: inline-block; transition: background-color 0.25s;}.var-menu__menu { position: absolute;}

package/lib/menu/menu.less

@@ -0,0 +1,21 @@
+.var {
+  &-menu-enter-from,
+  &-menu-leave-to {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  &-menu-enter-active,
+  &-menu-leave-active {
+    transition-property: opacity, transform;
+    transition-duration: 0.25s;
+  }
+}
+
+.var-menu {
+  display: inline-block;
+  transition: background-color 0.25s;
+
+  &__menu {
+    position: absolute;
+  }
+}

package/lib/menu/props.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function alignmentValidator(alignment) {
+  return ['top', 'bottom'].includes(alignment);
+}
+
+var props = {
+  show: {
+    type: Boolean,
+    default: false
+  },
+  alignment: {
+    type: String,
+    default: 'top',
+    validator: alignmentValidator
+  },
+  offsetX: {
+    type: [Number, String],
+    default: 0
+  },
+  offsetY: {
+    type: [Number, String],
+    default: 0
+  },
+  teleport: {
+    type: String,
+    default: 'body'
+  },
+  onOpen: {
+    type: Function
+  },
+  onOpened: {
+    type: Function
+  },
+  onClose: {
+    type: Function
+  },
+  onClosed: {
+    type: Function
+  },
+  'onUpdate:show': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/menu/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../menu.css')
+require('../MenuSfc.css')

package/lib/menu/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../menu.less')
+require('../MenuSfc.less')

package/lib/option/Option.js

@@ -0,0 +1,125 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _checkbox = _interopRequireDefault(require("../checkbox"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-option__text"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_checkbox = (0, _vue.resolveComponent)("var-checkbox");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-option var--box", [_ctx.optionSelected ? 'var-option--selected-color' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.wrapWidth,
+      color: _ctx.optionSelected ? _ctx.focusColor : undefined
+    }),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-option__cover", [_ctx.optionSelected ? 'var-option--selected-background' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: _ctx.optionSelected ? _ctx.focusColor : undefined
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), _ctx.multiple ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_checkbox, {
+    key: 0,
+    ref: "checkbox",
+    "checked-color": _ctx.focusColor,
+    modelValue: _ctx.optionSelected,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.optionSelected = $event),
+    onClick: _cache[1] || (_cache[1] = (0, _vue.withModifiers)(() => {}, ["stop"])),
+    onChange: _ctx.handleSelect
+  }, null, 8
+  /* PROPS */
+  , ["checked-color", "modelValue", "onChange"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.label), 1
+  /* TEXT */
+  )])])], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple]]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarOption',
+  directives: {
+    Ripple: _ripple.default
+  },
+  components: {
+    VarCheckbox: _checkbox.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var optionSelected = (0, _vue.ref)(false);
+    var selected = (0, _vue.computed)(() => optionSelected.value);
+    var label = (0, _vue.computed)(() => props.label);
+    var value = (0, _vue.computed)(() => props.value);
+    var {
+      select,
+      bindSelect
+    } = (0, _provide.useSelect)();
+    var {
+      wrapWidth,
+      multiple,
+      focusColor,
+      onSelect
+    } = select;
+
+    var handleClick = () => {
+      optionSelected.value = !optionSelected.value;
+      onSelect(optionProvider);
+    };
+
+    var handleSelect = () => onSelect(optionProvider);
+
+    var sync = checked => {
+      optionSelected.value = checked;
+    };
+
+    var optionProvider = {
+      label,
+      value,
+      selected,
+      sync
+    };
+    (0, _vue.watch)([() => props.label, () => props.value], () => {
+      if (props.label == null && props.value == null) {
+        throw Error("Props label and value can't both be undefined\n");
+      }
+    }, {
+      immediate: true
+    });
+    bindSelect(optionProvider);
+    return {
+      optionSelected,
+      wrapWidth,
+      multiple,
+      focusColor,
+      handleClick,
+      handleSelect
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/option/index.js

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

package/lib/option/option.css

@@ -0,0 +1 @@
+:root { --option-height: 38px; --option-padding: 0 12px; --option-selected-background: var(--select-focus-color);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}

package/lib/option/option.less

@@ -0,0 +1,37 @@
+@option-height: 38px;
+@option-padding: 0 12px;
+@option-selected-background: var(--select-focus-color);
+
+:root {
+  --option-height: @option-height;
+  --option-padding: @option-padding;
+  --option-selected-background: @option-selected-background;
+}
+
+.var-option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--option-height);
+  padding: var(--option-padding);
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &__cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.2;
+    background: transparent;
+  }
+
+  &--selected-background {
+    background: var(--option-selected-background);
+  }
+
+  &--selected-color {
+    color: var(--option-selected-background);
+  }
+}

package/lib/option/props.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  label: {},
+  value: {}
+};
+exports.props = props;

package/lib/option/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useSelect = useSelect;
+
+var _components = require("../utils/components");
+
+var _provide = require("../select/provide");
+
+function useSelect() {
+  var {
+    bindParent,
+    parentProvider
+  } = (0, _components.useParent)(_provide.SELECT_BIND_OPTION_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.SELECT_COUNT_OPTION_KEY);
+
+  if (!bindParent || !parentProvider) {
+    throw Error('<var-option/> must in <var-select/>');
+  }
+
+  return {
+    index,
+    select: parentProvider,
+    bindSelect: bindParent
+  };
+}

package/lib/option/style/index.js

@@ -0,0 +1,6 @@
+require('../../styles/common.css')
+require('../../ripple/ripple.css')
+require('../../checkbox/checkbox.css')
+require('../../select/select.css')
+require('../option.css')
+require('../OptionSfc.css')

package/lib/option/style/less.js

@@ -0,0 +1,6 @@
+require('../../styles/common.less')
+require('../../ripple/ripple.less')
+require('../../checkbox/checkbox.less')
+require('../../select/select.less')
+require('../option.less')
+require('../OptionSfc.less')