@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/switch/Switch.js

@@ -1,185 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,57 +0,0 @@
-"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

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

package/lib/switch/style/index.js

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-: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

@@ -1,80 +0,0 @@
-@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

@@ -1,116 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-"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

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

package/lib/tab/style/less.js

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

package/lib/tab/tab.css

@@ -1 +0,0 @@
-: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

@@ -1,46 +0,0 @@
-@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

@@ -1,74 +0,0 @@
-"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;