@varlet/ui 3.5.1 → 3.5.2

package/es/select/useSelectController.mjs

@@ -0,0 +1,65 @@
+import { ref, watch } from "vue";
+import { isEmpty } from "@varlet/shared";
+function useSelectController(options) {
+  const {
+    multiple: multipleGetter,
+    modelValue: modelValueGetter,
+    optionProviders: optionProvidersGetter,
+    optionProvidersLength: optionProvidersLengthGetter
+  } = options;
+  const label = ref("");
+  const labels = ref([]);
+  watch(modelValueGetter, syncOptions, { deep: true });
+  watch(optionProvidersLengthGetter, syncOptions);
+  function computeLabel() {
+    const multiple = multipleGetter();
+    const modelValue = modelValueGetter();
+    if (multiple) {
+      labels.value = modelValue.map(findLabel);
+    }
+    if (!multiple && !isEmpty(modelValue)) {
+      label.value = findLabel(modelValue);
+    }
+    if (!multiple && isEmpty(modelValue)) {
+      label.value = "";
+    }
+  }
+  function findLabel(targetValue) {
+    var _a;
+    const options2 = optionProvidersGetter();
+    let option = options2.find(({ value }) => value.value === targetValue);
+    if (!option) {
+      option = options2.find(({ label: label2 }) => label2.value === targetValue);
+    }
+    return (_a = option == null ? void 0 : option.label.value) != null ? _a : "";
+  }
+  function findValueOrLabel({ value, label: label2 }) {
+    var _a;
+    return (_a = value.value) != null ? _a : label2.value;
+  }
+  function getSelectedValue(option) {
+    const multiple = multipleGetter();
+    const options2 = optionProvidersGetter();
+    return multiple ? options2.filter(({ selected }) => selected.value).map(findValueOrLabel) : findValueOrLabel(option);
+  }
+  function syncOptions() {
+    const multiple = multipleGetter();
+    const modelValue = modelValueGetter();
+    const options2 = optionProvidersGetter();
+    if (multiple) {
+      options2.forEach((option) => option.sync(modelValue.includes(findValueOrLabel(option))));
+    } else {
+      options2.forEach((option) => option.sync(modelValue === findValueOrLabel(option)));
+    }
+    computeLabel();
+  }
+  return {
+    label,
+    labels,
+    computeLabel,
+    getSelectedValue
+  };
+}
+export {
+  useSelectController
+};

package/es/skeleton/Skeleton.mjs

@@ -0,0 +1,195 @@
+import { defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { toNumber } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("skeleton");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n("$--box"), _ctx.n()))
+    },
+    [
+      !_ctx.loading ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("data"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true),
+      _ctx.loading && !_ctx.fullscreen ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _ctx.card ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.n("card")),
+              style: _normalizeStyle({ height: _ctx.toSizeUnit(_ctx.cardHeight) })
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("--animation"))
+                },
+                null,
+                2
+                /* CLASS */
+              )
+            ],
+            6
+            /* CLASS, STYLE */
+          )) : _createCommentVNode("v-if", true),
+          _ctx.avatar || _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: _normalizeClass(_ctx.n("article"))
+            },
+            [
+              _ctx.avatar ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("avatar")),
+                  style: _normalizeStyle({
+                    width: _ctx.toSizeUnit(_ctx.avatarSize),
+                    height: _ctx.toSizeUnit(_ctx.avatarSize)
+                  })
+                },
+                [
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.n("--animation"))
+                    },
+                    null,
+                    2
+                    /* CLASS */
+                  )
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : _createCommentVNode("v-if", true),
+              _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 1,
+                  class: _normalizeClass(_ctx.n("section"))
+                },
+                [
+                  _ctx.title ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("title")),
+                      style: _normalizeStyle({ width: _ctx.toSizeUnit(_ctx.titleWidth) })
+                    },
+                    [
+                      _createElementVNode(
+                        "div",
+                        {
+                          class: _normalizeClass(_ctx.n("--animation"))
+                        },
+                        null,
+                        2
+                        /* CLASS */
+                      )
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true),
+                  (_openBlock(true), _createElementBlock(
+                    _Fragment,
+                    null,
+                    _renderList(_ctx.toNumber(_ctx.rows), (r, index) => {
+                      return _openBlock(), _createElementBlock(
+                        "div",
+                        {
+                          class: _normalizeClass(_ctx.n("row")),
+                          key: r,
+                          style: _normalizeStyle({ width: _ctx.toSizeUnit(_ctx.rowsWidth[index]) })
+                        },
+                        [
+                          _createElementVNode(
+                            "div",
+                            {
+                              class: _normalizeClass(_ctx.n("--animation"))
+                            },
+                            null,
+                            2
+                            /* CLASS */
+                          )
+                        ],
+                        6
+                        /* CLASS, STYLE */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true),
+      _ctx.loading && _ctx.fullscreen ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 2,
+          class: _normalizeClass(_ctx.n("fullscreen")),
+          style: _normalizeStyle({ zIndex: _ctx.toNumber(_ctx.fullscreenZIndex) })
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("--animation"))
+            },
+            null,
+            2
+            /* CLASS */
+          )
+        ],
+        6
+        /* CLASS, STYLE */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup: () => ({
+    n,
+    classes,
+    toSizeUnit,
+    toNumber
+  })
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/skeleton/index.mjs

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

package/es/skeleton/props.mjs

@@ -0,0 +1,28 @@
+const props = {
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  title: Boolean,
+  card: Boolean,
+  avatar: Boolean,
+  fullscreen: Boolean,
+  fullscreenZIndex: {
+    type: [Number, String],
+    default: 100
+  },
+  titleWidth: [Number, String],
+  cardHeight: [Number, String],
+  avatarSize: [Number, String],
+  rows: {
+    type: [Number, String],
+    default: 3
+  },
+  rowsWidth: {
+    type: Array,
+    default: () => []
+  }
+};
+export {
+  props
+};

package/es/skeleton/skeleton.css

@@ -0,0 +1 @@
+:root { --skeleton-content-padding: 16px; --skeleton-card-height: 160px; --skeleton-card-border-radius: 4px; --skeleton-card-margin-bottom: 16px; --skeleton-card-background-color: rgba(0, 0, 0, 0.12); --skeleton-animation-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0)); --skeleton-avatar-size: 34px; --skeleton-avatar-border-radius: 50%; --skeleton-avatar-margin-right: 16px; --skeleton-avatar-background-color: rgba(0, 0, 0, 0.12); --skeleton-title-width: 50%; --skeleton-title-border-radius: 10px; --skeleton-title-background-color: rgba(0, 0, 0, 0.12); --skeleton-row-height: 12px; --skeleton-row-border-radius: 10px; --skeleton-row-margin-top: 10px;}@keyframes var-skeleton-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-skeleton { width: 100%;}.var-skeleton__content { padding: var(--skeleton-content-padding);}.var-skeleton__card { position: relative; overflow: hidden; width: 100%; height: var(--skeleton-card-height); background-color: var(--skeleton-card-background-color); margin-bottom: var(--skeleton-card-margin-bottom); border-radius: var(--skeleton-card-border-radius); transition: background-color 0.25s;}.var-skeleton__article { display: flex; width: 100%;}.var-skeleton__avatar { position: relative; overflow: hidden; flex-shrink: 0; width: var(--skeleton-avatar-size); height: var(--skeleton-avatar-size); border-radius: var(--skeleton-avatar-border-radius); background-color: var(--skeleton-avatar-background-color); margin-right: var(--skeleton-avatar-margin-right); transition: 0.25s background-color;}.var-skeleton__section { width: 100%; padding-top: 8px;}.var-skeleton__title { position: relative; overflow: hidden; width: var(--skeleton-title-width); height: var(--skeleton-row-height); background-color: var(--skeleton-title-background-color); border-radius: var(--skeleton-title-border-radius); transition: 0.25s background-color;}.var-skeleton__row { position: relative; overflow: hidden; width: 100%; height: var(--skeleton-row-height); background-color: var(--skeleton-title-background-color); margin-top: var(--skeleton-row-margin-top); border-radius: var(--skeleton-row-border-radius); transition: 0.25s background-color;}.var-skeleton__fullscreen { position: fixed; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--skeleton-title-background-color); transition: 0.25s background-color;}.var-skeleton--animation::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-skeleton-animation 1s infinite; background: var(--skeleton-animation-background); transition: 0.25s background-color;}

package/es/skeleton/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../skeleton.css'
+import '../SkeletonSfc.css'