@varlet/ui 3.5.1 → 3.5.2

package/es/button/index.mjs

@@ -0,0 +1,12 @@
+import Button from "./Button.mjs";
+import { props as buttonProps } from "./props.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+withInstall(Button);
+withPropsDefaultsSetter(Button, buttonProps);
+const _ButtonComponent = Button;
+var stdin_default = Button;
+export {
+  _ButtonComponent,
+  buttonProps,
+  stdin_default as default
+};

package/es/button/props.mjs

@@ -0,0 +1,64 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { loadingProps } from "../loading/index.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = {
+  type: String,
+  nativeType: {
+    type: String,
+    default: "button"
+  },
+  size: String,
+  loading: Boolean,
+  round: Boolean,
+  block: Boolean,
+  text: Boolean,
+  outline: Boolean,
+  disabled: Boolean,
+  autoLoading: Boolean,
+  iconContainer: Boolean,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  focusable: {
+    type: Boolean,
+    default: true
+  },
+  color: String,
+  textColor: String,
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  loadingRadius: [Number, String],
+  loadingType: pickProps(loadingProps, "type"),
+  loadingSize: __spreadProps(__spreadValues({}, pickProps(loadingProps, "size")), {
+    default: void 0
+  }),
+  loadingColor: __spreadProps(__spreadValues({}, pickProps(loadingProps, "color")), {
+    default: "currentColor"
+  }),
+  onClick: defineListenerProp(),
+  onTouchstart: defineListenerProp()
+};
+export {
+  props
+};

package/es/button/provide.mjs

@@ -0,0 +1,13 @@
+import { useParent } from "@varlet/use";
+import { BUTTON_GROUP_BIND_BUTTON_KEY } from "../button-group/provide.mjs";
+function useButtonGroup() {
+  const { bindParent, parentProvider, index } = useParent(BUTTON_GROUP_BIND_BUTTON_KEY);
+  return {
+    index,
+    buttonGroup: parentProvider,
+    bindButtonGroup: bindParent
+  };
+}
+export {
+  useButtonGroup
+};

package/es/button/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../button.css'
+import '../ButtonSfc.css'

package/es/button-group/ButtonGroup.mjs

@@ -0,0 +1,53 @@
+import { computed, defineComponent } from "vue";
+import { useButtons } from "./provide.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+const { name, n, classes } = createNamespace("button-group");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          _ctx.n("$--box"),
+          [_ctx.mode, `${_ctx.n(`--mode-${_ctx.mode}`)}`],
+          [_ctx.vertical, _ctx.n("--vertical"), _ctx.n("--horizontal")],
+          [_ctx.mode === "normal", _ctx.formatElevation(_ctx.elevation, 2)]
+        )
+      )
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const { bindButtons } = useButtons();
+    const buttonGroupProvider = {
+      elevation: computed(() => props2.elevation),
+      type: computed(() => props2.type),
+      size: computed(() => props2.size),
+      color: computed(() => props2.color),
+      textColor: computed(() => props2.textColor),
+      mode: computed(() => props2.mode)
+    };
+    bindButtons(buttonGroupProvider);
+    return {
+      n,
+      classes,
+      formatElevation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/button-group/buttonGroup.css

@@ -0,0 +1 @@
+.var-button-group { display: inline-flex; border-radius: var(--button-border-radius); max-width: 100%; overflow: auto;}.var-button-group .var-button:active { box-shadow: none;}.var-button-group--horizontal .var-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}.var-button-group--horizontal .var-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0;}.var-button-group--horizontal .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--horizontal.var-button-group--mode-text .var-button { border-right: thin solid currentColor;}.var-button-group--horizontal.var-button-group--mode-text .var-button:last-child { border: none;}.var-button-group--horizontal.var-button-group--mode-outline .var-button:not(:first-child) { border-left: none;}.var-button-group--vertical { flex-direction: column;}.var-button-group--vertical .var-button:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}.var-button-group--vertical .var-button:last-child { border-top-left-radius: 0; border-top-right-radius: 0;}.var-button-group--vertical .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--vertical.var-button-group--mode-text .var-button { border-bottom: thin solid currentColor;}.var-button-group--vertical.var-button-group--mode-text .var-button:last-child { border: none;}.var-button-group--vertical.var-button-group--mode-outline .var-button:not(:first-child) { border-top: none;}

package/es/button-group/index.mjs

@@ -0,0 +1,12 @@
+import ButtonGroup from "./ButtonGroup.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as buttonGroupProps } from "./props.mjs";
+withInstall(ButtonGroup);
+withPropsDefaultsSetter(ButtonGroup, buttonGroupProps);
+const _ButtonGroupComponent = ButtonGroup;
+var stdin_default = ButtonGroup;
+export {
+  _ButtonGroupComponent,
+  buttonGroupProps,
+  stdin_default as default
+};

package/es/button-group/props.mjs

@@ -0,0 +1,24 @@
+const props = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
+  color: String,
+  textColor: String,
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  vertical: Boolean
+};
+export {
+  props
+};

package/es/button-group/provide.mjs

@@ -0,0 +1,14 @@
+import { useChildren } from "@varlet/use";
+const BUTTON_GROUP_BIND_BUTTON_KEY = Symbol("BUTTON_GROUP_BIND_BUTTON_KEY");
+function useButtons() {
+  const { bindChildren, childProviders, length } = useChildren(BUTTON_GROUP_BIND_BUTTON_KEY);
+  return {
+    length,
+    buttons: childProviders,
+    bindButtons: bindChildren
+  };
+}
+export {
+  BUTTON_GROUP_BIND_BUTTON_KEY,
+  useButtons
+};

package/es/button-group/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../buttonGroup.css'
+import '../ButtonGroupSfc.css'

package/es/card/Card.mjs

@@ -0,0 +1,368 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import Ripple from "../ripple/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import VarButton from "../button/index.mjs";
+import { ref, defineComponent, watch, computed, nextTick } from "vue";
+import { props } from "./props.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { doubleRaf, getRect, call } from "@varlet/shared";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { useZIndex } from "../context/zIndex.mjs";
+import { useLock } from "../context/lock.mjs";
+const { name, n, classes } = createNamespace("card");
+const RIPPLE_DELAY = 500;
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["src", "alt"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "card",
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.outline, _ctx.n("--outline")], _ctx.formatElevation(_ctx.elevation, 1))),
+      style: _normalizeStyle({
+        zIndex: _ctx.floated ? _ctx.zIndex : void 0
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          ref: "cardFloater",
+          class: _normalizeClass(_ctx.n("floater")),
+          style: _normalizeStyle({
+            width: _ctx.floaterWidth,
+            height: _ctx.floaterHeight,
+            top: _ctx.floaterTop,
+            left: _ctx.floaterLeft,
+            overflow: _ctx.floaterOverflow,
+            position: _ctx.floaterPosition,
+            zIndex: _ctx.floated ? _ctx.zIndex : void 0,
+            background: _ctx.outline && !_ctx.floated ? "transparent" : void 0,
+            transition: _ctx.floated ? `background-color ${_ctx.floatingDuration}ms, color ${_ctx.floatingDuration}ms, width ${_ctx.floatingDuration}ms, height ${_ctx.floatingDuration}ms, top ${_ctx.floatingDuration}ms, left ${_ctx.floatingDuration}ms` : void 0
+          })
+        },
+        [
+          _renderSlot(_ctx.$slots, "image", {}, () => [
+            _ctx.src ? (_openBlock(), _createElementBlock("img", {
+              key: 0,
+              class: _normalizeClass(_ctx.n("image")),
+              style: _normalizeStyle({
+                objectFit: _ctx.fit,
+                height: _ctx.toSizeUnit(_ctx.imageHeight),
+                width: _ctx.toSizeUnit(_ctx.imageWidth)
+              }),
+              src: _ctx.src,
+              alt: _ctx.alt
+            }, null, 14, _hoisted_1)) : _createCommentVNode("v-if", true)
+          ]),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("container"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "title", {
+                slotClass: _ctx.n("title")
+              }, () => [
+                _ctx.title ? (_openBlock(), _createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: _normalizeClass(_ctx.n("title"))
+                  },
+                  _toDisplayString(_ctx.title),
+                  3
+                  /* TEXT, CLASS */
+                )) : _createCommentVNode("v-if", true)
+              ]),
+              _renderSlot(_ctx.$slots, "subtitle", {
+                slotClass: _ctx.n("subtitle")
+              }, () => [
+                _ctx.subtitle ? (_openBlock(), _createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: _normalizeClass(_ctx.n("subtitle"))
+                  },
+                  _toDisplayString(_ctx.subtitle),
+                  3
+                  /* TEXT, CLASS */
+                )) : _createCommentVNode("v-if", true)
+              ]),
+              _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("content"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "default")
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true),
+              _renderSlot(_ctx.$slots, "description", {
+                slotClass: _ctx.n("description")
+              }, () => [
+                _ctx.description ? (_openBlock(), _createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: _normalizeClass(_ctx.n("description"))
+                  },
+                  _toDisplayString(_ctx.description),
+                  3
+                  /* TEXT, CLASS */
+                )) : _createCommentVNode("v-if", true)
+              ]),
+              _ctx.$slots.extra ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 1,
+                  class: _normalizeClass(_ctx.n("footer"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "extra")
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true),
+              _ctx.$slots["floating-content"] && !_ctx.isRow ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 2,
+                  class: _normalizeClass(_ctx.n("floating-content")),
+                  style: _normalizeStyle({
+                    height: _ctx.contentHeight,
+                    opacity: _ctx.opacity,
+                    transition: `opacity ${_ctx.floatingDuration * 2}ms`
+                  })
+                },
+                [
+                  _renderSlot(_ctx.$slots, "floating-content")
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : _createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          ),
+          _ctx.showFloatingButtons ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.classes(_ctx.n("floating-buttons"), _ctx.n("$--box"))),
+              style: _normalizeStyle({
+                zIndex: _ctx.zIndex,
+                opacity: _ctx.opacity,
+                transition: `opacity ${_ctx.floatingDuration * 2}ms`
+              })
+            },
+            [
+              _renderSlot(_ctx.$slots, "close-button", {}, () => [
+                _createVNode(_component_var_button, {
+                  "var-card-cover": "",
+                  class: _normalizeClass(_ctx.classes(_ctx.n("close-button"), _ctx.n("$-elevation--6"))),
+                  onClick: _withModifiers(_ctx.close, ["stop"])
+                }, {
+                  default: _withCtx(() => [
+                    _createVNode(_component_var_icon, {
+                      "var-card-cover": "",
+                      name: "window-close",
+                      class: _normalizeClass(_ctx.n("close-button-icon"))
+                    }, null, 8, ["class"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["class", "onClick"])
+              ])
+            ],
+            6
+            /* CLASS, STYLE */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        6
+        /* CLASS, STYLE */
+      ),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("holder")),
+          style: _normalizeStyle({
+            width: _ctx.holderWidth,
+            height: _ctx.holderHeight
+          })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      )
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple },
+  components: {
+    VarIcon,
+    VarButton
+  },
+  props,
+  setup(props2) {
+    const card = ref(null);
+    const cardFloater = ref(null);
+    const holderWidth = ref("auto");
+    const holderHeight = ref("auto");
+    const floaterWidth = ref("100%");
+    const floaterHeight = ref("100%");
+    const floaterTop = ref("auto");
+    const floaterLeft = ref("auto");
+    const floaterPosition = ref(void 0);
+    const floaterOverflow = ref("hidden");
+    const contentHeight = ref("0px");
+    const opacity = ref("0");
+    const isRow = computed(() => props2.layout === "row");
+    const showFloatingButtons = ref(false);
+    const floated = ref(false);
+    const { zIndex } = useZIndex(() => props2.floating, 1);
+    let dropdownFloaterTop = "auto";
+    let dropdownFloaterLeft = "auto";
+    let dropper = null;
+    const floater = ref(null);
+    useLock(
+      () => props2.floating,
+      () => !isRow.value
+    );
+    watch(
+      () => props2.floating,
+      (value) => {
+        if (isRow.value) return;
+        nextTick(() => {
+          value ? floating() : dropdown();
+        });
+      },
+      { immediate: true }
+    );
+    function floating() {
+      return __async(this, null, function* () {
+        clearTimeout(floater.value);
+        clearTimeout(dropper);
+        floater.value = null;
+        floater.value = setTimeout(
+          () => __async(this, null, function* () {
+            const { width, height, left, top } = getRect(card.value);
+            holderWidth.value = toSizeUnit(width);
+            holderHeight.value = toSizeUnit(height);
+            floaterWidth.value = holderWidth.value;
+            floaterHeight.value = holderHeight.value;
+            floaterTop.value = toSizeUnit(top);
+            floaterLeft.value = toSizeUnit(left);
+            floaterPosition.value = "fixed";
+            dropdownFloaterTop = floaterTop.value;
+            dropdownFloaterLeft = floaterLeft.value;
+            showFloatingButtons.value = true;
+            yield doubleRaf();
+            floaterTop.value = "0";
+            floaterLeft.value = "0";
+            floaterWidth.value = "100vw";
+            floaterHeight.value = "100vh";
+            contentHeight.value = "auto";
+            opacity.value = "1";
+            floaterOverflow.value = "auto";
+            floated.value = true;
+          }),
+          props2.ripple ? RIPPLE_DELAY : 0
+        );
+      });
+    }
+    function dropdown() {
+      clearTimeout(dropper);
+      clearTimeout(floater.value);
+      floater.value = null;
+      floaterWidth.value = holderWidth.value;
+      floaterHeight.value = holderHeight.value;
+      floaterTop.value = dropdownFloaterTop;
+      floaterLeft.value = dropdownFloaterLeft;
+      contentHeight.value = "0px";
+      opacity.value = "0";
+      showFloatingButtons.value = false;
+      dropper = setTimeout(() => {
+        holderWidth.value = "auto";
+        holderHeight.value = "auto";
+        floaterWidth.value = "100%";
+        floaterHeight.value = "100%";
+        floaterTop.value = "auto";
+        floaterLeft.value = "auto";
+        dropdownFloaterTop = "auto";
+        dropdownFloaterLeft = "auto";
+        floaterOverflow.value = "hidden";
+        floaterPosition.value = void 0;
+        floated.value = false;
+      }, props2.floatingDuration);
+    }
+    function close() {
+      call(props2["onUpdate:floating"], false);
+    }
+    function handleClick(e) {
+      call(props2.onClick, e);
+    }
+    return {
+      card,
+      cardFloater,
+      holderWidth,
+      holderHeight,
+      floater,
+      floaterWidth,
+      floaterHeight,
+      floaterTop,
+      floaterLeft,
+      floaterPosition,
+      floaterOverflow,
+      contentHeight,
+      opacity,
+      zIndex,
+      isRow,
+      showFloatingButtons,
+      floated,
+      n,
+      classes,
+      toSizeUnit,
+      close,
+      formatElevation,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/card/card.css

@@ -0,0 +1 @@
+:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}

package/es/card/index.mjs

@@ -0,0 +1,12 @@
+import Card from "./Card.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as cardProps } from "./props.mjs";
+withInstall(Card);
+withPropsDefaultsSetter(Card, cardProps);
+const _CardComponent = Card;
+var stdin_default = Card;
+export {
+  _CardComponent,
+  cardProps,
+  stdin_default as default
+};

package/es/card/props.mjs

@@ -0,0 +1,34 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  src: String,
+  fit: {
+    type: String,
+    default: "cover"
+  },
+  imageHeight: [String, Number],
+  imageWidth: [String, Number],
+  outline: Boolean,
+  layout: {
+    type: String,
+    default: "column"
+  },
+  floating: Boolean,
+  floatingDuration: {
+    type: Number,
+    default: 250
+  },
+  alt: String,
+  title: String,
+  subtitle: String,
+  description: String,
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  ripple: Boolean,
+  onClick: defineListenerProp(),
+  "onUpdate:floating": defineListenerProp()
+};
+export {
+  props
+};

package/es/card/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../../button/button.css'
+import '../card.css'
+import '../CardSfc.css'