@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/switch/Switch.js

@@ -0,0 +1,185 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _components = require("../utils/components");
+
+var _shared = require("../utils/shared");
+
+var _provide = require("../form/provide");
+
+var _props = require("./props");
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+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-switch"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-switch-block", [_ctx.disabled || _ctx.formDisabled ? 'var-switch__disable' : null]]),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.switchActive && _ctx.switchActive(...args)),
+    style: (0, _vue.normalizeStyle)(_ctx.styleComputed.switch)
+  }, [(0, _vue.createElementVNode)("div", {
+    style: (0, _vue.normalizeStyle)(_ctx.styleComputed.track),
+    class: (0, _vue.normalizeClass)(["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__track-active' : null, _ctx.errorMessage ? 'var-switch__track-error' : null]])
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+    class: "var-switch__ripple",
+    style: (0, _vue.normalizeStyle)(_ctx.styleComputed.ripple)
+  }, [(0, _vue.createElementVNode)("div", {
+    style: (0, _vue.normalizeStyle)(_ctx.styleComputed.handle),
+    class: (0, _vue.normalizeClass)(["var-switch__handle var-elevation--2", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__handle-active' : null, _ctx.errorMessage ? 'var-switch__handle-error' : null]])
+  }, [_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
+    key: 0,
+    radius: _ctx.toNumber(_ctx.size) / 2 - 2
+  }, null, 8
+  /* PROPS */
+  , ["radius"])) : (0, _vue.createCommentVNode)("v-if", true)], 6
+  /* CLASS, STYLE */
+  )], 4
+  /* STYLE */
+  ), [[_directive_ripple, {
+    disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
+  }]])], 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage
+  }, null, 8
+  /* PROPS */
+  , ["error-message"])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSwitch',
+  components: {
+    VarLoading: _loading.default,
+    VarFormDetails: _formDetails.default
+  },
+  directives: {
+    Ripple: _ripple.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var {
+      bindForm,
+      form
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var validate = () => v(props.rules, props.modelValue);
+
+    var validateWithTrigger = () => (0, _vue.nextTick)(() => vt(['onChange'], 'onChange', props.rules, props.modelValue));
+
+    var styleComputed = (0, _vue.computed)(() => {
+      var {
+        size,
+        modelValue,
+        color,
+        closeColor,
+        loadingColor,
+        activeValue
+      } = props;
+      var sizeNum = (0, _shared.toNumber)(size);
+      var switchWidth = sizeNum * 2;
+      var switchHeight = sizeNum * 1.2;
+      return {
+        handle: {
+          width: size + "px",
+          height: size + "px",
+          backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
+          color: loadingColor && loadingColor
+        },
+        ripple: {
+          left: modelValue === activeValue ? sizeNum / 2 + "px" : "-" + sizeNum / 2 + "px",
+          color: modelValue === activeValue ? color || '' : closeColor || '#999',
+          width: sizeNum * 2 + "px",
+          height: sizeNum * 2 + "px"
+        },
+        track: {
+          height: switchHeight * 0.6 + "px",
+          width: switchWidth - 2 + "px",
+          borderRadius: switchWidth / 3 + "px",
+          filter: modelValue === activeValue || errorMessage != null && errorMessage.value ? 'opacity(.6)' : 'brightness(.6)',
+          backgroundColor: modelValue === activeValue ? color || '' : closeColor || ''
+        },
+        switch: {
+          height: switchHeight + "px",
+          width: switchWidth + "px"
+        }
+      };
+    });
+
+    var switchActive = () => {
+      var {
+        onClick,
+        onChange,
+        disabled,
+        loading,
+        readonly,
+        modelValue,
+        activeValue,
+        inactiveValue,
+        'onUpdate:modelValue': updateModelValue
+      } = props;
+      onClick == null ? void 0 : onClick();
+      if (disabled || loading || readonly || form != null && form.disabled.value || form != null && form.readonly.value) return;
+      var newValue = modelValue === activeValue ? inactiveValue : activeValue;
+      onChange == null ? void 0 : onChange(newValue);
+      updateModelValue == null ? void 0 : updateModelValue(newValue);
+      validateWithTrigger();
+    };
+
+    var reset = () => {
+      var _props$onUpdateModel;
+
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, props.inactiveValue);
+      resetValidation();
+    };
+
+    var switchProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    bindForm == null ? void 0 : bindForm(switchProvider);
+    return {
+      switchActive,
+      toNumber: _shared.toNumber,
+      styleComputed,
+      errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/switch/index.js

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

package/lib/switch/props.js

@@ -0,0 +1,57 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    default: false
+  },
+  activeValue: {
+    default: true
+  },
+  inactiveValue: {
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String
+  },
+  loadingColor: {
+    type: String
+  },
+  closeColor: {
+    type: String
+  },
+  size: {
+    type: [String, Number],
+    default: 20
+  },
+  rules: {
+    type: Array
+  },
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  onClick: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/switch/provide.js

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

package/lib/switch/style/index.js

@@ -0,0 +1,7 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../../ripple/ripple.css')
+require('../../loading/loading.css')
+require('../../form-details/formDetails.css')
+require('../switch.css')
+require('../SwitchSfc.css')

package/lib/switch/style/less.js

@@ -0,0 +1,7 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../../ripple/ripple.less')
+require('../../loading/loading.less')
+require('../../form-details/formDetails.less')
+require('../switch.less')
+require('../SwitchSfc.less')

package/lib/switch/switch.css

@@ -0,0 +1 @@
+:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger);}.var-switch { display: inline-block;}.var-switch-block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center;}.var-switch__disable { filter: opacity(0.6); cursor: not-allowed;}.var-switch__track { background: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(0.6);}.var-switch__track-active { background-color: var(--switch-track-active-background);}.var-switch__track-error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; transition: 0.3s var(--cubic-bezier);}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s;}.var-switch__handle-active { background-color: var(--switch-handle-active-background);}.var-switch__handle-error { background-color: var(--switch-handle-error-background) !important;}

package/lib/switch/switch.less

@@ -0,0 +1,80 @@
+@switch-track-background: #fff;
+@switch-track-active-background: var(--color-primary);
+@switch-track-error-background: var(--color-danger);
+@switch-ripple-color: var(--color-primary);
+@switch-handle-background: #fff;
+@switch-handle-color: #fff;
+@switch-handle-active-background: var(--color-primary);
+@switch-handle-error-background: var(--color-danger);
+
+:root {
+  --switch-track-background: @switch-track-background;
+  --switch-track-active-background: @switch-track-active-background;
+  --switch-track-error-background: @switch-track-error-background;
+  --switch-ripple-color: @switch-ripple-color;
+  --switch-handle-background: @switch-handle-background;
+  --switch-handle-color: @switch-handle-color;
+  --switch-handle-active-background: @switch-handle-active-background;
+  --switch-handle-error-background: @switch-handle-error-background;
+}
+
+.var-switch {
+  display: inline-block;
+
+  &-block {
+    position: relative;
+    display: flex;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__disable {
+    filter: opacity(0.6);
+    cursor: not-allowed;
+  }
+
+  &__track {
+    background: var(--switch-track-background);
+    transition: background-color 0.25s;
+    filter: opacity(0.6);
+
+    &-active {
+      background-color: var(--switch-track-active-background);
+    }
+
+    &-error {
+      background-color: var(--switch-track-error-background) !important;
+    }
+  }
+
+  &__ripple {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--switch-ripple-color);
+    border-radius: 50%;
+    overflow: hidden;
+    transition: 0.3s var(--cubic-bezier);
+  }
+
+  &__handle {
+    border-radius: 50%;
+    background-color: var(--switch-handle-background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--switch-handle-color);
+    transition: background-color 0.25s;
+
+    &-active {
+      background-color: var(--switch-handle-active-background);
+    }
+
+    &-error {
+      background-color: var(--switch-handle-error-background) !important;
+    }
+  }
+}

package/lib/tab/Tab.js

@@ -0,0 +1,116 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _provide = require("./provide");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-tab var--box", [_ctx.computeColorClass(), "var-tab--" + _ctx.itemDirection]]),
+    ref: "tabEl",
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.computeColorStyle()
+    }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple, {
+    disabled: _ctx.disabled
+  }]]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarTab',
+  directives: {
+    Ripple: _ripple.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var tabEl = (0, _vue.ref)(null);
+    var name = (0, _vue.computed)(() => props.name);
+    var disabled = (0, _vue.computed)(() => props.disabled);
+    var element = (0, _vue.computed)(() => tabEl.value);
+    var {
+      index,
+      tabs,
+      bindTabs
+    } = (0, _provide.useTabs)();
+    var {
+      onTabClick,
+      active,
+      activeColor,
+      inactiveColor,
+      disabledColor,
+      itemDirection,
+      resize
+    } = tabs;
+    var tabProvider = {
+      name,
+      index,
+      disabled,
+      element
+    };
+    bindTabs(tabProvider);
+
+    var computeColorStyle = () => {
+      var {
+        disabled,
+        name
+      } = props;
+      return disabled ? disabledColor.value : active.value === name || active.value === (index == null ? void 0 : index.value) ? activeColor.value : inactiveColor.value;
+    };
+
+    var computeColorClass = () => {
+      var {
+        disabled,
+        name
+      } = props;
+      return disabled ? 'var-tab--disabled' : active.value === name || active.value === (index == null ? void 0 : index.value) ? 'var-tab--active' : 'var-tab--inactive';
+    };
+
+    var handleClick = event => {
+      var {
+        disabled,
+        name,
+        onClick
+      } = props;
+
+      if (disabled) {
+        return;
+      }
+
+      onClick == null ? void 0 : onClick(name != null ? name : index.value, event);
+      onTabClick(tabProvider);
+    };
+
+    (0, _vue.watch)(() => props.name, resize);
+    (0, _vue.watch)(() => props.disabled, resize);
+    return {
+      tabEl,
+      active,
+      activeColor,
+      inactiveColor,
+      itemDirection,
+      computeColorStyle,
+      computeColorClass,
+      handleClick
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/tab/index.js

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

package/lib/tab/props.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  name: {
+    type: [String, Number]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  onClick: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/tab/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useTabs = useTabs;
+
+var _components = require("../utils/components");
+
+var _provide = require("../tabs/provide");
+
+function useTabs() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.TABS_BIND_TAB_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.TABS_COUNT_TAB_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('<var-tab/> must in <var-tabs/>');
+  }
+
+  return {
+    index,
+    tabs: parentProvider,
+    bindTabs: bindParent
+  };
+}

package/lib/tab/style/index.js

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

package/lib/tab/style/less.js

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

package/lib/tab/tab.css

@@ -0,0 +1 @@
+:root { --tab-padding: 12px; --tab-active-color: var(--color-primary); --tab-inactive-color: #646566; --tab-disabled-color: var(--color-text-disabled); --tab-font-size: var(--font-size-md);}.var-tab { display: flex; justify-content: center; align-items: center; flex: 1 0 auto; padding: 0 var(--tab-padding); font-size: var(--tab-font-size); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-tab--active { color: var(--tab-active-color);}.var-tab--inactive { color: var(--tab-inactive-color);}.var-tab--disabled { color: var(--tab-disabled-color); cursor: not-allowed;}.var-tab--horizontal { flex-direction: row;}.var-tab--vertical { flex-direction: column;}

package/lib/tab/tab.less

@@ -0,0 +1,46 @@
+@tab-padding: 12px;
+@tab-active-color: var(--color-primary);
+@tab-inactive-color: #646566;
+@tab-disabled-color: var(--color-text-disabled);
+@tab-font-size: var(--font-size-md);
+
+:root {
+  --tab-padding: @tab-padding;
+  --tab-active-color: @tab-active-color;
+  --tab-inactive-color: @tab-inactive-color;
+  --tab-disabled-color: @tab-disabled-color;
+  --tab-font-size: @tab-font-size;
+}
+
+.var-tab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+  padding: 0 var(--tab-padding);
+  font-size: var(--tab-font-size);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &--active {
+    color: var(--tab-active-color);
+  }
+
+  &--inactive {
+    color: var(--tab-inactive-color);
+  }
+
+  &--disabled {
+    color: var(--tab-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+}

package/lib/tab-item/TabItem.js

@@ -0,0 +1,74 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _swipeItem = _interopRequireDefault(require("../swipe-item"));
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  var _component_var_swipe_item = (0, _vue.resolveComponent)("var-swipe-item");
+
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_swipe_item, {
+    class: (0, _vue.normalizeClass)(["var-tab-item", [!_ctx.current && 'var-tab-item--inactive']]),
+    "var-tab-item-cover": ""
+  }, {
+    default: (0, _vue.withCtx)(() => [_ctx.initSlot ? (0, _vue.renderSlot)(_ctx.$slots, "default", {
+      key: 0
+    }) : (0, _vue.createCommentVNode)("v-if", true)]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarTabItem',
+  components: {
+    VarSwipeItem: _swipeItem.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var current = (0, _vue.ref)(false);
+    var initSlot = (0, _vue.ref)(false);
+    var name = (0, _vue.computed)(() => props.name);
+    var {
+      index,
+      bindTabsItems
+    } = (0, _provide.useTabsItems)();
+
+    var setCurrent = value => {
+      if (!initSlot.value && value) {
+        initSlot.value = true;
+      }
+
+      current.value = value;
+    };
+
+    var tabItemProvider = {
+      index,
+      name,
+      setCurrent
+    };
+    bindTabsItems(tabItemProvider);
+    return {
+      current,
+      initSlot
+    };
+  }
+
+});
+
+exports.default = _default;