@varlet/ui 3.5.1 → 3.5.3

package/es/checkbox-group/index.mjs

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

package/es/checkbox-group/props.mjs

@@ -0,0 +1,34 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  max: [String, Number],
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange"]
+  },
+  rules: [Array, Function, Object],
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/checkbox-group/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const CHECKBOX_GROUP_BIND_CHECKBOX_KEY = Symbol("CHECKBOX_GROUP_BIND_CHECKBOX_KEY");
+function useCheckboxes() {
+  const { bindChildren, childProviders, length } = useChildren(
+    CHECKBOX_GROUP_BIND_CHECKBOX_KEY
+  );
+  return {
+    length,
+    checkboxes: childProviders,
+    bindCheckboxes: bindChildren
+  };
+}
+export {
+  CHECKBOX_GROUP_BIND_CHECKBOX_KEY,
+  useCheckboxes
+};

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

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../form-details/formDetails.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../checkbox/checkbox.css'
+import '../checkboxGroup.css'
+import '../CheckboxGroupSfc.css'

package/es/chip/Chip.mjs

@@ -0,0 +1,104 @@
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("chip");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createBlock(_Transition, {
+    name: _ctx.n("$-fade")
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode(
+        "span",
+        _mergeProps({
+          class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.formatElevation(_ctx.elevation, 1), ..._ctx.contentClass),
+          style: _ctx.chipStyle
+        }, _ctx.$attrs),
+        [
+          _renderSlot(_ctx.$slots, "left"),
+          _createElementVNode(
+            "span",
+            {
+              class: _normalizeClass(_ctx.n(`text-${_ctx.size}`))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default")
+            ],
+            2
+            /* CLASS */
+          ),
+          _renderSlot(_ctx.$slots, "right"),
+          _ctx.closeable ? (_openBlock(), _createElementBlock(
+            "span",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.n("--close")),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
+            },
+            [
+              _createVNode(_component_var_icon, {
+                name: `${_ctx.iconName ? _ctx.iconName : "close-circle"}`,
+                namespace: _ctx.namespace
+              }, null, 8, ["name", "namespace"])
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["name"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarIcon
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const chipStyle = computed(() => {
+      const { plain, textColor, color } = props2;
+      if (plain) {
+        return {
+          color: textColor || color,
+          borderColor: color
+        };
+      }
+      return {
+        color: textColor,
+        background: color
+      };
+    });
+    const contentClass = computed(() => {
+      const { size, block, type, plain, round } = props2;
+      const blockClass = block ? n("$--flex") : n("$--inline-flex");
+      const plainTypeClass = plain ? `${n("plain")} ${n(`plain-${type}`)}` : n(`--${type}`);
+      const roundClass = round ? n("--round") : null;
+      return [n(`--${size}`), blockClass, plainTypeClass, roundClass];
+    });
+    function handleClose(e) {
+      call(props2.onClose, e);
+    }
+    return {
+      chipStyle,
+      contentClass,
+      n,
+      classes,
+      formatElevation,
+      handleClose
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/chip/chip.css

@@ -0,0 +1 @@
+:root { --chip-default-text-color: #555; --chip-primary-text-color: var(--color-on-primary-container); --chip-danger-text-color: var(--color-on-danger-container); --chip-success-text-color: var(--color-on-success-container); --chip-warning-text-color: var(--color-on-warning-container); --chip-info-text-color: var(--color-on-info-container); --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary-container); --chip-danger-color: var(--color-danger-container); --chip-success-color: var(--color-success-container); --chip-warning-color: var(--color-warning-container); --chip-info-color: var(--color-info-container); --chip-primary-plain-color: var(--color-primary); --chip-danger-plain-color: var(--color-danger); --chip-success-plain-color: var(--color-success); --chip-warning-plain-color: var(--color-warning); --chip-info-plain-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px; --chip-mini-font-size: var(--font-size-xs); --chip-small-font-size: var(--font-size-sm); --chip-normal-font-size: var(--font-size-md); --chip-large-font-size: var(--font-size-lg);}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s, border-radius 0.25s;}.var-chip--default { color: var(--chip-default-text-color); background: var(--chip-default-color);}.var-chip--primary { color: var(--chip-primary-text-color); background-color: var(--chip-primary-color);}.var-chip--info { color: var(--chip-info-text-color); background-color: var(--chip-info-color);}.var-chip--success { color: var(--chip-success-text-color); background-color: var(--chip-success-color);}.var-chip--warning { color: var(--chip-warning-text-color); background-color: var(--chip-warning-color);}.var-chip--danger { color: var(--chip-danger-text-color); background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-plain-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-plain-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-plain-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-plain-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-plain-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--chip-normal-font-size); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--chip-large-font-size); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--chip-small-font-size); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--chip-mini-font-size); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}

package/es/chip/index.mjs

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

package/es/chip/props.mjs

@@ -0,0 +1,31 @@
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { iconProps } from "../icon/index.mjs";
+const props = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
+  color: String,
+  textColor: String,
+  iconName: pickProps(iconProps, "name"),
+  namespace: pickProps(iconProps, "namespace"),
+  plain: Boolean,
+  round: {
+    type: Boolean,
+    default: true
+  },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: false
+  },
+  block: Boolean,
+  closeable: Boolean,
+  onClose: defineListenerProp()
+};
+export {
+  props
+};

package/es/chip/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../icon/icon.css'
+import '../chip.css'
+import '../ChipSfc.css'

package/es/col/Col.mjs

@@ -0,0 +1,98 @@
+import { defineComponent, computed } from "vue";
+import { isPlainObject, toNumber, call } from "@varlet/shared";
+import { props } from "./props.mjs";
+import { useRow } from "./provide.mjs";
+import { padStartFlex, toSizeUnit } from "../utils/elements.mjs";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("col");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, 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.span >= 0, _ctx.n(`--span-${_ctx.span}`)],
+          [_ctx.offset, _ctx.n(`--offset-${_ctx.offset}`)],
+          ..._ctx.getSize("xs", _ctx.xs),
+          ..._ctx.getSize("sm", _ctx.sm),
+          ..._ctx.getSize("md", _ctx.md),
+          ..._ctx.getSize("lg", _ctx.lg),
+          ..._ctx.getSize("xl", _ctx.xl)
+        )
+      ),
+      style: _normalizeStyle({
+        flexDirection: _ctx.direction,
+        justifyContent: _ctx.padStartFlex(_ctx.justify),
+        alignItems: _ctx.padStartFlex(_ctx.align),
+        paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
+        paddingRight: _ctx.toSizeUnit(_ctx.padding.right),
+        paddingTop: _ctx.toSizeUnit(_ctx.padding.top),
+        paddingBottom: _ctx.toSizeUnit(_ctx.padding.bottom)
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const span = computed(() => toNumber(props2.span));
+    const offset = computed(() => toNumber(props2.offset));
+    const padding = computed(() => {
+      var _a;
+      const [y = 0, x = 0] = (_a = row == null ? void 0 : row.average.value) != null ? _a : [];
+      return { left: x, right: x, top: y, bottom: y };
+    });
+    const { row, bindRow } = useRow();
+    call(bindRow, null);
+    function getSize(mode, size) {
+      const classes2 = [];
+      if (size == null) {
+        return classes2;
+      }
+      if (isPlainObject(size)) {
+        const { offset: offset2, span: span2 } = size;
+        if (Number(span2) >= 0) {
+          classes2.push(n(`--span-${mode}-${span2}`));
+        }
+        if (offset2) {
+          classes2.push(n(`--offset-${mode}-${offset2}`));
+        }
+        return classes2;
+      }
+      if (Number(size) >= 0) {
+        classes2.push(n(`--span-${mode}-${size}`));
+      }
+      return classes2;
+    }
+    function handleClick(e) {
+      call(props2.onClick, e);
+    }
+    return {
+      span,
+      offset,
+      padding,
+      n,
+      classes,
+      toNumber,
+      toSizeUnit,
+      getSize,
+      handleClick,
+      padStartFlex
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/col/col.css

@@ -0,0 +1 @@
+.var-col { transition: all 0.25s; display: flex !important;}.var-col--span-0 { display: none !important;}.var-col--span-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%;}.var-col--offset-1 { margin-left: 4.16666667%;}.var-col--span-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%;}.var-col--offset-2 { margin-left: 8.33333333%;}.var-col--span-3 { flex: 0 0 12.5%; max-width: 12.5%;}.var-col--offset-3 { margin-left: 12.5%;}.var-col--span-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%;}.var-col--offset-4 { margin-left: 16.66666667%;}.var-col--span-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%;}.var-col--offset-5 { margin-left: 20.83333333%;}.var-col--span-6 { flex: 0 0 25%; max-width: 25%;}.var-col--offset-6 { margin-left: 25%;}.var-col--span-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%;}.var-col--offset-7 { margin-left: 29.16666667%;}.var-col--span-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%;}.var-col--offset-8 { margin-left: 33.33333333%;}.var-col--span-9 { flex: 0 0 37.5%; max-width: 37.5%;}.var-col--offset-9 { margin-left: 37.5%;}.var-col--span-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%;}.var-col--offset-10 { margin-left: 41.66666667%;}.var-col--span-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%;}.var-col--offset-11 { margin-left: 45.83333333%;}.var-col--span-12 { flex: 0 0 50%; max-width: 50%;}.var-col--offset-12 { margin-left: 50%;}.var-col--span-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%;}.var-col--offset-13 { margin-left: 54.16666667%;}.var-col--span-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%;}.var-col--offset-14 { margin-left: 58.33333333%;}.var-col--span-15 { flex: 0 0 62.5%; max-width: 62.5%;}.var-col--offset-15 { margin-left: 62.5%;}.var-col--span-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%;}.var-col--offset-16 { margin-left: 66.66666667%;}.var-col--span-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%;}.var-col--offset-17 { margin-left: 70.83333333%;}.var-col--span-18 { flex: 0 0 75%; max-width: 75%;}.var-col--offset-18 { margin-left: 75%;}.var-col--span-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%;}.var-col--offset-19 { margin-left: 79.16666667%;}.var-col--span-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%;}.var-col--offset-20 { margin-left: 83.33333333%;}.var-col--span-21 { flex: 0 0 87.5%; max-width: 87.5%;}.var-col--offset-21 { margin-left: 87.5%;}.var-col--span-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%;}.var-col--offset-22 { margin-left: 91.66666667%;}.var-col--span-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%;}.var-col--offset-23 { margin-left: 95.83333333%;}.var-col--span-24 { flex: 0 0 100%; max-width: 100%;}.var-col--offset-24 { margin-left: 100%;}@media only screen and (max-width: 767px) { .var-col--span-xs-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; } .var-col--offset-xs-1 { margin-left: 4.16666667%; } .var-col--span-xs-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .var-col--offset-xs-2 { margin-left: 8.33333333%; } .var-col--span-xs-3 { flex: 0 0 12.5%; max-width: 12.5%; } .var-col--offset-xs-3 { margin-left: 12.5%; } .var-col--span-xs-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .var-col--offset-xs-4 { margin-left: 16.66666667%; } .var-col--span-xs-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } .var-col--offset-xs-5 { margin-left: 20.83333333%; } .var-col--span-xs-6 { flex: 0 0 25%; max-width: 25%; } .var-col--offset-xs-6 { margin-left: 25%; } .var-col--span-xs-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; } .var-col--offset-xs-7 { margin-left: 29.16666667%; } .var-col--span-xs-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .var-col--offset-xs-8 { margin-left: 33.33333333%; } .var-col--span-xs-9 { flex: 0 0 37.5%; max-width: 37.5%; } .var-col--offset-xs-9 { margin-left: 37.5%; } .var-col--span-xs-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .var-col--offset-xs-10 { margin-left: 41.66666667%; } .var-col--span-xs-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; } .var-col--offset-xs-11 { margin-left: 45.83333333%; } .var-col--span-xs-12 { flex: 0 0 50%; max-width: 50%; } .var-col--offset-xs-12 { margin-left: 50%; } .var-col--span-xs-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; } .var-col--offset-xs-13 { margin-left: 54.16666667%; } .var-col--span-xs-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .var-col--offset-xs-14 { margin-left: 58.33333333%; } .var-col--span-xs-15 { flex: 0 0 62.5%; max-width: 62.5%; } .var-col--offset-xs-15 { margin-left: 62.5%; } .var-col--span-xs-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .var-col--offset-xs-16 { margin-left: 66.66666667%; } .var-col--span-xs-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; } .var-col--offset-xs-17 { margin-left: 70.83333333%; } .var-col--span-xs-18 { flex: 0 0 75%; max-width: 75%; } .var-col--offset-xs-18 { margin-left: 75%; } .var-col--span-xs-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } .var-col--offset-xs-19 { margin-left: 79.16666667%; } .var-col--span-xs-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .var-col--offset-xs-20 { margin-left: 83.33333333%; } .var-col--span-xs-21 { flex: 0 0 87.5%; max-width: 87.5%; } .var-col--offset-xs-21 { margin-left: 87.5%; } .var-col--span-xs-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .var-col--offset-xs-22 { margin-left: 91.66666667%; } .var-col--span-xs-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; } .var-col--offset-xs-23 { margin-left: 95.83333333%; } .var-col--span-xs-24 { flex: 0 0 100%; max-width: 100%; } .var-col--offset-xs-24 { margin-left: 100%; } .var-col--span-xs-0 { display: none !important; }}@media only screen and (min-width: 768px) and (max-width: 991px) { .var-col--span-sm-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; } .var-col--offset-sm-1 { margin-left: 4.16666667%; } .var-col--span-sm-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .var-col--offset-sm-2 { margin-left: 8.33333333%; } .var-col--span-sm-3 { flex: 0 0 12.5%; max-width: 12.5%; } .var-col--offset-sm-3 { margin-left: 12.5%; } .var-col--span-sm-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .var-col--offset-sm-4 { margin-left: 16.66666667%; } .var-col--span-sm-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } .var-col--offset-sm-5 { margin-left: 20.83333333%; } .var-col--span-sm-6 { flex: 0 0 25%; max-width: 25%; } .var-col--offset-sm-6 { margin-left: 25%; } .var-col--span-sm-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; } .var-col--offset-sm-7 { margin-left: 29.16666667%; } .var-col--span-sm-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .var-col--offset-sm-8 { margin-left: 33.33333333%; } .var-col--span-sm-9 { flex: 0 0 37.5%; max-width: 37.5%; } .var-col--offset-sm-9 { margin-left: 37.5%; } .var-col--span-sm-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .var-col--offset-sm-10 { margin-left: 41.66666667%; } .var-col--span-sm-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; } .var-col--offset-sm-11 { margin-left: 45.83333333%; } .var-col--span-sm-12 { flex: 0 0 50%; max-width: 50%; } .var-col--offset-sm-12 { margin-left: 50%; } .var-col--span-sm-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; } .var-col--offset-sm-13 { margin-left: 54.16666667%; } .var-col--span-sm-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .var-col--offset-sm-14 { margin-left: 58.33333333%; } .var-col--span-sm-15 { flex: 0 0 62.5%; max-width: 62.5%; } .var-col--offset-sm-15 { margin-left: 62.5%; } .var-col--span-sm-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .var-col--offset-sm-16 { margin-left: 66.66666667%; } .var-col--span-sm-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; } .var-col--offset-sm-17 { margin-left: 70.83333333%; } .var-col--span-sm-18 { flex: 0 0 75%; max-width: 75%; } .var-col--offset-sm-18 { margin-left: 75%; } .var-col--span-sm-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } .var-col--offset-sm-19 { margin-left: 79.16666667%; } .var-col--span-sm-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .var-col--offset-sm-20 { margin-left: 83.33333333%; } .var-col--span-sm-21 { flex: 0 0 87.5%; max-width: 87.5%; } .var-col--offset-sm-21 { margin-left: 87.5%; } .var-col--span-sm-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .var-col--offset-sm-22 { margin-left: 91.66666667%; } .var-col--span-sm-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; } .var-col--offset-sm-23 { margin-left: 95.83333333%; } .var-col--span-sm-24 { flex: 0 0 100%; max-width: 100%; } .var-col--offset-sm-24 { margin-left: 100%; } .var-col--span-sm-0 { display: none !important; }}@media only screen and (min-width: 992px) and (max-width: 1199px) { .var-col--span-md-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; } .var-col--offset-md-1 { margin-left: 4.16666667%; } .var-col--span-md-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .var-col--offset-md-2 { margin-left: 8.33333333%; } .var-col--span-md-3 { flex: 0 0 12.5%; max-width: 12.5%; } .var-col--offset-md-3 { margin-left: 12.5%; } .var-col--span-md-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .var-col--offset-md-4 { margin-left: 16.66666667%; } .var-col--span-md-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } .var-col--offset-md-5 { margin-left: 20.83333333%; } .var-col--span-md-6 { flex: 0 0 25%; max-width: 25%; } .var-col--offset-md-6 { margin-left: 25%; } .var-col--span-md-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; } .var-col--offset-md-7 { margin-left: 29.16666667%; } .var-col--span-md-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .var-col--offset-md-8 { margin-left: 33.33333333%; } .var-col--span-md-9 { flex: 0 0 37.5%; max-width: 37.5%; } .var-col--offset-md-9 { margin-left: 37.5%; } .var-col--span-md-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .var-col--offset-md-10 { margin-left: 41.66666667%; } .var-col--span-md-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; } .var-col--offset-md-11 { margin-left: 45.83333333%; } .var-col--span-md-12 { flex: 0 0 50%; max-width: 50%; } .var-col--offset-md-12 { margin-left: 50%; } .var-col--span-md-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; } .var-col--offset-md-13 { margin-left: 54.16666667%; } .var-col--span-md-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .var-col--offset-md-14 { margin-left: 58.33333333%; } .var-col--span-md-15 { flex: 0 0 62.5%; max-width: 62.5%; } .var-col--offset-md-15 { margin-left: 62.5%; } .var-col--span-md-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .var-col--offset-md-16 { margin-left: 66.66666667%; } .var-col--span-md-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; } .var-col--offset-md-17 { margin-left: 70.83333333%; } .var-col--span-md-18 { flex: 0 0 75%; max-width: 75%; } .var-col--offset-md-18 { margin-left: 75%; } .var-col--span-md-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } .var-col--offset-md-19 { margin-left: 79.16666667%; } .var-col--span-md-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .var-col--offset-md-20 { margin-left: 83.33333333%; } .var-col--span-md-21 { flex: 0 0 87.5%; max-width: 87.5%; } .var-col--offset-md-21 { margin-left: 87.5%; } .var-col--span-md-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .var-col--offset-md-22 { margin-left: 91.66666667%; } .var-col--span-md-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; } .var-col--offset-md-23 { margin-left: 95.83333333%; } .var-col--span-md-24 { flex: 0 0 100%; max-width: 100%; } .var-col--offset-md-24 { margin-left: 100%; } .var-col--span-md-0 { display: none !important; }}@media only screen and (min-width: 1200px) and (max-width: 1919px) { .var-col--span-lg-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; } .var-col--offset-lg-1 { margin-left: 4.16666667%; } .var-col--span-lg-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .var-col--offset-lg-2 { margin-left: 8.33333333%; } .var-col--span-lg-3 { flex: 0 0 12.5%; max-width: 12.5%; } .var-col--offset-lg-3 { margin-left: 12.5%; } .var-col--span-lg-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .var-col--offset-lg-4 { margin-left: 16.66666667%; } .var-col--span-lg-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } .var-col--offset-lg-5 { margin-left: 20.83333333%; } .var-col--span-lg-6 { flex: 0 0 25%; max-width: 25%; } .var-col--offset-lg-6 { margin-left: 25%; } .var-col--span-lg-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; } .var-col--offset-lg-7 { margin-left: 29.16666667%; } .var-col--span-lg-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .var-col--offset-lg-8 { margin-left: 33.33333333%; } .var-col--span-lg-9 { flex: 0 0 37.5%; max-width: 37.5%; } .var-col--offset-lg-9 { margin-left: 37.5%; } .var-col--span-lg-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .var-col--offset-lg-10 { margin-left: 41.66666667%; } .var-col--span-lg-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; } .var-col--offset-lg-11 { margin-left: 45.83333333%; } .var-col--span-lg-12 { flex: 0 0 50%; max-width: 50%; } .var-col--offset-lg-12 { margin-left: 50%; } .var-col--span-lg-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; } .var-col--offset-lg-13 { margin-left: 54.16666667%; } .var-col--span-lg-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .var-col--offset-lg-14 { margin-left: 58.33333333%; } .var-col--span-lg-15 { flex: 0 0 62.5%; max-width: 62.5%; } .var-col--offset-lg-15 { margin-left: 62.5%; } .var-col--span-lg-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .var-col--offset-lg-16 { margin-left: 66.66666667%; } .var-col--span-lg-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; } .var-col--offset-lg-17 { margin-left: 70.83333333%; } .var-col--span-lg-18 { flex: 0 0 75%; max-width: 75%; } .var-col--offset-lg-18 { margin-left: 75%; } .var-col--span-lg-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } .var-col--offset-lg-19 { margin-left: 79.16666667%; } .var-col--span-lg-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .var-col--offset-lg-20 { margin-left: 83.33333333%; } .var-col--span-lg-21 { flex: 0 0 87.5%; max-width: 87.5%; } .var-col--offset-lg-21 { margin-left: 87.5%; } .var-col--span-lg-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .var-col--offset-lg-22 { margin-left: 91.66666667%; } .var-col--span-lg-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; } .var-col--offset-lg-23 { margin-left: 95.83333333%; } .var-col--span-lg-24 { flex: 0 0 100%; max-width: 100%; } .var-col--offset-lg-24 { margin-left: 100%; } .var-col--span-lg-0 { display: none !important; }}@media only screen and (min-width: 1920px) { .var-col--span-xl-0 { flex: 0 0 0%; max-width: 0%; } .var-col--offset-xl-0 { margin-left: 0%; } .var-col--span-xl-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; } .var-col--offset-xl-1 { margin-left: 4.16666667%; } .var-col--span-xl-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .var-col--offset-xl-2 { margin-left: 8.33333333%; } .var-col--span-xl-3 { flex: 0 0 12.5%; max-width: 12.5%; } .var-col--offset-xl-3 { margin-left: 12.5%; } .var-col--span-xl-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .var-col--offset-xl-4 { margin-left: 16.66666667%; } .var-col--span-xl-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } .var-col--offset-xl-5 { margin-left: 20.83333333%; } .var-col--span-xl-6 { flex: 0 0 25%; max-width: 25%; } .var-col--offset-xl-6 { margin-left: 25%; } .var-col--span-xl-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; } .var-col--offset-xl-7 { margin-left: 29.16666667%; } .var-col--span-xl-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .var-col--offset-xl-8 { margin-left: 33.33333333%; } .var-col--span-xl-9 { flex: 0 0 37.5%; max-width: 37.5%; } .var-col--offset-xl-9 { margin-left: 37.5%; } .var-col--span-xl-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .var-col--offset-xl-10 { margin-left: 41.66666667%; } .var-col--span-xl-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; } .var-col--offset-xl-11 { margin-left: 45.83333333%; } .var-col--span-xl-12 { flex: 0 0 50%; max-width: 50%; } .var-col--offset-xl-12 { margin-left: 50%; } .var-col--span-xl-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; } .var-col--offset-xl-13 { margin-left: 54.16666667%; } .var-col--span-xl-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .var-col--offset-xl-14 { margin-left: 58.33333333%; } .var-col--span-xl-15 { flex: 0 0 62.5%; max-width: 62.5%; } .var-col--offset-xl-15 { margin-left: 62.5%; } .var-col--span-xl-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .var-col--offset-xl-16 { margin-left: 66.66666667%; } .var-col--span-xl-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; } .var-col--offset-xl-17 { margin-left: 70.83333333%; } .var-col--span-xl-18 { flex: 0 0 75%; max-width: 75%; } .var-col--offset-xl-18 { margin-left: 75%; } .var-col--span-xl-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } .var-col--offset-xl-19 { margin-left: 79.16666667%; } .var-col--span-xl-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .var-col--offset-xl-20 { margin-left: 83.33333333%; } .var-col--span-xl-21 { flex: 0 0 87.5%; max-width: 87.5%; } .var-col--offset-xl-21 { margin-left: 87.5%; } .var-col--span-xl-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .var-col--offset-xl-22 { margin-left: 91.66666667%; } .var-col--span-xl-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; } .var-col--offset-xl-23 { margin-left: 95.83333333%; } .var-col--span-xl-24 { flex: 0 0 100%; max-width: 100%; } .var-col--offset-xl-24 { margin-left: 100%; } .var-col--span-xl-0 { display: none !important; }}

package/es/col/index.mjs

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

package/es/col/props.mjs

@@ -0,0 +1,26 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  span: {
+    type: [String, Number],
+    default: 24
+  },
+  offset: {
+    type: [String, Number],
+    default: 0
+  },
+  direction: {
+    type: String,
+    default: "row"
+  },
+  justify: String,
+  align: String,
+  xs: [Object, Number, String],
+  sm: [Object, Number, String],
+  md: [Object, Number, String],
+  lg: [Object, Number, String],
+  xl: [Object, Number, String],
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/col/provide.mjs

@@ -0,0 +1,13 @@
+import { useParent } from "@varlet/use";
+import { ROW_BIND_COL_KEY } from "../row/provide.mjs";
+function useRow() {
+  const { index, bindParent, parentProvider } = useParent(ROW_BIND_COL_KEY);
+  return {
+    index,
+    row: parentProvider,
+    bindRow: bindParent
+  };
+}
+export {
+  useRow
+};

package/es/col/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../col.css'
+import '../ColSfc.css'

package/es/collapse/Collapse.mjs

@@ -0,0 +1,117 @@
+import { computed, defineComponent, nextTick, watch } from "vue";
+import { useCollapseItem } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { normalizeToArray, call, removeArrayBlank } from "@varlet/shared";
+const { name, n } = createNamespace("collapse");
+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.n())
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const offset = computed(() => props2.offset);
+    const divider = computed(() => props2.divider);
+    const elevation = computed(() => props2.elevation);
+    const accordion = computed(() => props2.accordion);
+    const normalizeValues = computed(() => normalizeToArray(props2.modelValue));
+    const { length, collapseItems, bindCollapseItems } = useCollapseItem();
+    const collapseProvider = {
+      offset,
+      divider,
+      elevation,
+      accordion,
+      updateItem
+    };
+    watch(
+      () => length.value,
+      () => nextTick().then(resize)
+    );
+    watch(
+      () => props2.modelValue,
+      () => nextTick().then(resize)
+    );
+    bindCollapseItems(collapseProvider);
+    function updateItem(itemValue, targetExpand) {
+      if (props2.accordion) {
+        const modelValue2 = targetExpand ? itemValue : void 0;
+        updateModelValue(modelValue2);
+        return;
+      }
+      const modelValue = targetExpand ? [...normalizeValues.value, itemValue] : normalizeValues.value.filter((value) => value !== itemValue);
+      updateModelValue(modelValue);
+    }
+    function updateModelValue(modelValue) {
+      call(props2["onUpdate:modelValue"], modelValue);
+      call(props2.onChange, modelValue);
+    }
+    function matchItems() {
+      if (props2.accordion) {
+        const [value] = normalizeValues.value;
+        if (value == null) {
+          return;
+        }
+        const matchedNameItem = collapseItems.find(({ name: name2 }) => value === name2.value);
+        if (matchedNameItem == null) {
+          return collapseItems.find(({ index, name: name2 }) => name2.value == null && value === index.value);
+        }
+        return matchedNameItem;
+      }
+      const matchedNameItems = collapseItems.filter(
+        ({ name: name2 }) => name2.value != null && normalizeValues.value.includes(name2.value)
+      );
+      const matchedIndexItems = collapseItems.filter(
+        ({ index, name: name2 }) => name2.value == null && normalizeValues.value.includes(index.value)
+      );
+      return [...matchedNameItems, ...matchedIndexItems];
+    }
+    function resize() {
+      const matchedItems = removeArrayBlank(normalizeToArray(matchItems()));
+      collapseItems.forEach((collapseItem) => {
+        collapseItem.init(matchedItems.includes(collapseItem));
+      });
+    }
+    const toggleAll = (options) => {
+      if (props2.accordion) return;
+      const matchedItems = collapseItems.filter((item) => {
+        var _a;
+        const itemValue = (_a = item.name.value) != null ? _a : item.index.value;
+        const expanded = normalizeValues.value.includes(itemValue);
+        if (options.skipDisabled && item.disabled.value) {
+          return expanded;
+        }
+        if (options.expand === "inverse") {
+          return !expanded;
+        }
+        return options.expand;
+      });
+      const modelValue = matchedItems.map((item) => {
+        var _a;
+        return (_a = item.name.value) != null ? _a : item.index.value;
+      });
+      updateModelValue(modelValue);
+    };
+    return {
+      divider,
+      n,
+      toggleAll
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/collapse/CollapseSfc.css

@@ -0,0 +1 @@
+.var-collapse { position: relative; width: 100%; z-index: 0;}

package/es/collapse/index.mjs

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

package/es/collapse/props.mjs

@@ -0,0 +1,22 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: [Array, String, Number],
+  accordion: Boolean,
+  offset: {
+    type: Boolean,
+    default: true
+  },
+  divider: {
+    type: Boolean,
+    default: true
+  },
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/collapse/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const COLLAPSE_BIND_COLLAPSE_ITEM_KEY = Symbol("COLLAPSE_BIND_COLLAPSE_ITEM_KEY");
+function useCollapseItem() {
+  const { childProviders, length, bindChildren } = useChildren(
+    COLLAPSE_BIND_COLLAPSE_ITEM_KEY
+  );
+  return {
+    length,
+    collapseItems: childProviders,
+    bindCollapseItems: bindChildren
+  };
+}
+export {
+  COLLAPSE_BIND_COLLAPSE_ITEM_KEY,
+  useCollapseItem
+};

package/es/collapse/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../CollapseSfc.css'