@varlet/ui 2.7.5 → 2.8.0-alpha.1676441771603

package/es/paper/Paper.mjs

@@ -0,0 +1,55 @@
+import Ripple from '../ripple/index.mjs';
+import { defineComponent } from 'vue';
+import { call, createNamespace } from '../utils/components.mjs';
+import { props } from './props.mjs';
+import { toSizeUnit } from '../utils/elements.mjs';
+var {
+  n,
+  classes
+} = createNamespace('paper');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+
+function __render__(_ctx, _cache) {
+  var _directive_ripple = _resolveDirective("ripple");
+
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("$-elevation--" + _ctx.elevation), [_ctx.onClick, _ctx.n('--cursor')], [_ctx.round, _ctx.n('--round')], [_ctx.inline, _ctx.n('$--inline-flex')])),
+    style: _normalizeStyle({
+      width: _ctx.toSizeUnit(_ctx.width),
+      height: _ctx.toSizeUnit(_ctx.height),
+      'border-radius': _ctx.toSizeUnit(_ctx.radius)
+    }),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple, {
+    disabled: !_ctx.ripple
+  }]]);
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarPaper',
+  directives: {
+    Ripple
+  },
+  props,
+
+  setup(props) {
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
+    return {
+      n,
+      classes,
+      toSizeUnit,
+      handleClick
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

package/es/paper/index.mjs

@@ -0,0 +1,9 @@
+import Paper from './Paper.mjs';
+
+Paper.install = function (app) {
+  app.component(Paper.name, Paper);
+};
+
+export { props as paperProps } from './props.mjs';
+export var _PaperComponent = Paper;
+export default Paper;

package/es/paper/paper.css

@@ -0,0 +1 @@
+:root { --paper-background: #fff;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}

package/es/paper/props.mjs

@@ -0,0 +1,28 @@
+import { defineListenerProp } from '../utils/components.mjs';
+export var props = {
+  elevation: {
+    type: [Number, String]
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  },
+  radius: {
+    type: [Number, String]
+  },
+  width: {
+    type: [Number, String]
+  },
+  height: {
+    type: [Number, String]
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  onClick: defineListenerProp()
+};

package/es/paper/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../paper.css'
+import '../PaperSfc.css'

package/es/ripple/index.mjs

@@ -82,7 +82,7 @@ function createRipple(event) {
     }, 20);
   };
 
-  _ripple.tasker = window.setTimeout(task, 60);
+  _ripple.tasker = window.setTimeout(task, 30);
 }
 
 function removeRipple() {
@@ -107,7 +107,7 @@ function removeRipple() {
     }, delay);
   };
 
-  _ripple.tasker ? setTimeout(task, 60) : task();
+  _ripple.tasker ? setTimeout(task, 30) : task();
 }
 
 function forbidRippleTask() {