rappel-ui 1.0.7 → 1.0.8

package/es/components/svg-icon/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as o } from "../../utils/vue/index.mjs";
+import t from "./src/svg-icon.vue.mjs";
+const a = o(t);
+export {
+  a as ReSvgIcon,
+  a as default
+};

package/es/components/svg-icon/src/svg-icon.vue.mjs

@@ -0,0 +1,33 @@
+import { defineComponent as a, computed as t, createElementBlock as s, openBlock as u, normalizeStyle as m, normalizeClass as f, unref as o, createElementVNode as d } from "vue";
+/* empty css                                  */
+/* empty css                                      */
+import { useNamespace as h } from "../../../composables/use-namespace/index.mjs";
+const v = ["d", "fill"], p = /* @__PURE__ */ a({
+  name: "ReSvgIcon",
+  __name: "svg-icon",
+  props: {
+    path: { default: "" },
+    size: { default: 16 },
+    color: { default: "currentColor" },
+    spin: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const { n, ns: l } = h("svg-icon"), i = t(() => typeof e.size == "number" ? `${e.size}px` : e.size), r = t(() => typeof e.size == "number" ? `${e.size}px` : e.size), c = t(() => e.color === "currentColor" ? "currentColor" : e.color);
+    return (z, g) => (u(), s("svg", {
+      class: f([o(n)(""), { [o(l)("", "spinner")]: e.spin }]),
+      style: m({ width: i.value, height: r.value, color: e.color }),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [
+      d("path", {
+        d: e.path,
+        fill: c.value
+      }, null, 8, v)
+    ], 6));
+  }
+});
+export {
+  p as default
+};

package/es/components/svg-icon/src/svg-icon.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./svg-icon.vue.mjs";
+export {
+  f as default
+};

package/es/components/svg-icon/src/types.d.ts

@@ -0,0 +1,7 @@
+interface SvgIconProps {
+    path: string;
+    size?: string | number;
+    color?: string;
+    spin?: boolean;
+}
+export type { SvgIconProps };

package/es/index.d.ts

@@ -80,6 +80,83 @@ declare const _default: {
     RePrimaryColor: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     ReSecondaryColor: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
     ReNeutralColor: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+    ReFilterPanel: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            isExpand?: boolean;
+        } & components.FilterPanelProps> & Readonly<{
+            onSearch?: ((...args: any[]) => any) | undefined;
+            onReset?: ((...args: any[]) => any) | undefined;
+            "onUpdate:isExpand"?: ((value: boolean) => any) | undefined;
+        }>, {
+            toggle: () => void;
+            update: () => void;
+            isExpand: import('vue').ModelRef<boolean, string, boolean, boolean>;
+            innerH: import('vue').ShallowRef<number, number>;
+            innerW: import('vue').ShallowRef<number, number>;
+            wrapperW: import('vue').ShallowRef<number, number>;
+            maxH: import('vue').ComputedRef<number>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            search: (...args: any[]) => void;
+            reset: (...args: any[]) => void;
+            "update:isExpand": (value: boolean) => void;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            wrapper: HTMLDivElement;
+            inner: HTMLDivElement;
+            main: HTMLDivElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            isExpand?: boolean;
+        } & components.FilterPanelProps> & Readonly<{
+            onSearch?: ((...args: any[]) => any) | undefined;
+            onReset?: ((...args: any[]) => any) | undefined;
+            "onUpdate:isExpand"?: ((value: boolean) => any) | undefined;
+        }>, {
+            toggle: () => void;
+            update: () => void;
+            isExpand: import('vue').ModelRef<boolean, string, boolean, boolean>;
+            innerH: import('vue').ShallowRef<number, number>;
+            innerW: import('vue').ShallowRef<number, number>;
+            wrapperW: import('vue').ShallowRef<number, number>;
+            maxH: import('vue').ComputedRef<number>;
+        }, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<{
+        isExpand?: boolean;
+    } & components.FilterPanelProps> & Readonly<{
+        onSearch?: ((...args: any[]) => any) | undefined;
+        onReset?: ((...args: any[]) => any) | undefined;
+        "onUpdate:isExpand"?: ((value: boolean) => any) | undefined;
+    }>, {
+        toggle: () => void;
+        update: () => void;
+        isExpand: import('vue').ModelRef<boolean, string, boolean, boolean>;
+        innerH: import('vue').ShallowRef<number, number>;
+        innerW: import('vue').ShallowRef<number, number>;
+        wrapperW: import('vue').ShallowRef<number, number>;
+        maxH: import('vue').ComputedRef<number>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        search: (...args: any[]) => void;
+        reset: (...args: any[]) => void;
+        "update:isExpand": (value: boolean) => void;
+    }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+            main?(_: {}): any;
+            expand?(_: {}): any;
+            reset?(_: {}): any;
+            search?(_: {}): any;
+            extra?(_: {}): any;
+        };
+    });
+    ReSvgIcon: import('vue').DefineComponent<components.SvgIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<components.SvgIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
     install: (app: import('vue').App) => void;
     version: string;
 };

package/es/index.mjs

@@ -8,9 +8,9 @@ import { useDateFormat as y } from "./composables/useDateFormat.mjs";
 import { useOnceFn as L } from "./composables/useOnceFn.mjs";
 import { useTimeNodes as F } from "./composables/useTimeNodes.mjs";
 import { useWaterFallLayout as O } from "./composables/useWaterFallLayout.mjs";
-import { useNamespace as E } from "./composables/use-namespace/index.mjs";
+import { useNamespace as D } from "./composables/use-namespace/index.mjs";
 import { createGlobalInstaller as r } from "./utils/vue/index.mjs";
-import { INSTALLED_KEY as h, toLowerCase as w, withInstall as N, withMultiInstall as P } from "./utils/vue/index.mjs";
+import { INSTALLED_KEY as P, toLowerCase as h, withInstall as w, withMultiInstall as N } from "./utils/vue/index.mjs";
 import { autoCalcFileSize as z, buildTree as B, createColors as K, createOverload as U, darkenColor as k, deepClone as A, deleteKeys as q, flatArr as G, getEqualOpacityColor as M, hasOwnProperty as W, isPlainObject as Y, joinURLs as _, lineBreakToComma as $, omitEmptyKeys as H, paramsToFormData as J, readTxtByEncodes as Q, readTxtFile as V, setURLSearchParams as X, singleton as Z } from "./utils/util.mjs";
 import { default as oe } from "./components/colors/src/primary-color.vue.mjs";
 import { default as te } from "./components/colors/src/secondary-color.vue.mjs";
@@ -19,21 +19,25 @@ import { ReButton as me } from "./components/button/index.mjs";
 import { ReInput as ne } from "./components/input/index.mjs";
 import { ReTabs as fe } from "./components/tabs/index.mjs";
 import { ReColors as ue } from "./components/colors/index.mjs";
-import { RappelUIResolver as ce } from "./rappel-ui/resolver.mjs";
+import { ReFilterPanel as ce } from "./components/filter-panel/index.mjs";
+import { ReSvgIcon as Ce } from "./components/svg-icon/index.mjs";
+import { RappelUIResolver as ve } from "./rappel-ui/resolver.mjs";
 const o = r(Object.values(e)), t = o.install, a = o.version, s = {
   install: t,
   version: a,
   ...e
 };
 export {
-  h as INSTALLED_KEY,
-  ce as RappelUIResolver,
+  P as INSTALLED_KEY,
+  ve as RappelUIResolver,
   me as ReButton,
   ue as ReColors,
+  ce as ReFilterPanel,
   ne as ReInput,
   le as ReNeutralColor,
   oe as RePrimaryColor,
   te as ReSecondaryColor,
+  Ce as ReSvgIcon,
   fe as ReTabs,
   u as applyResizable,
   z as autoCalcFileSize,
@@ -59,10 +63,10 @@ export {
   X as setURLSearchParams,
   Z as singleton,
   n as svgLoadingContent,
-  w as toLowerCase,
+  h as toLowerCase,
   y as useDateFormat,
   g as useDraggable,
-  E as useNamespace,
+  D as useNamespace,
   L as useOnceFn,
   F as useTimeNodes,
   O as useWaterFallLayout,
@@ -70,6 +74,6 @@ export {
   d as vResizable,
   R as vSvgLoading,
   a as version,
-  N as withInstall,
-  P as withMultiInstall
+  w as withInstall,
+  N as withMultiInstall
 };

package/es/node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs

@@ -0,0 +1,119 @@
+import { tryOnMounted as B, toArray as R, notNullish as $, tryOnScopeDispose as M, isClient as z } from "../../../../../@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs";
+import { getLifeCycleTarget as D } from "../../../../../@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs";
+import { computed as w, shallowRef as b, watch as x, toValue as g, getCurrentInstance as C, onMounted as W } from "vue";
+const O = z ? window : void 0;
+function d(o) {
+  var t;
+  const r = g(o);
+  return (t = r?.$el) !== null && t !== void 0 ? t : r;
+}
+// @__NO_SIDE_EFFECTS__
+function E() {
+  const o = b(!1), t = C();
+  return t && W(() => {
+    o.value = !0;
+  }, t), o;
+}
+// @__NO_SIDE_EFFECTS__
+function S(o) {
+  const t = /* @__PURE__ */ E();
+  return w(() => (t.value, !!o()));
+}
+function y(o, t, r = {}) {
+  const { window: c = O, ...l } = r;
+  let n;
+  const s = /* @__PURE__ */ S(() => c && "MutationObserver" in c), i = () => {
+    n && (n.disconnect(), n = void 0);
+  }, a = x(w(() => {
+    const e = R(g(o)).map(d).filter($);
+    return new Set(e);
+  }), (e) => {
+    i(), s.value && e.size && (n = new MutationObserver(t), e.forEach((p) => n.observe(p, l)));
+  }, {
+    immediate: !0,
+    flush: "post"
+  }), f = () => n?.takeRecords(), u = () => {
+    a(), i();
+  };
+  return M(u), {
+    isSupported: s,
+    stop: u,
+    takeRecords: f
+  };
+}
+function _(o, t, r = {}) {
+  const { window: c = O, ...l } = r;
+  let n;
+  const s = /* @__PURE__ */ S(() => c && "ResizeObserver" in c), i = () => {
+    n && (n.disconnect(), n = void 0);
+  }, a = x(w(() => {
+    const u = g(o);
+    return Array.isArray(u) ? u.map((e) => d(e)) : [d(u)];
+  }), (u) => {
+    if (i(), s.value && c) {
+      n = new ResizeObserver(t);
+      for (const e of u) e && n.observe(e, l);
+    }
+  }, {
+    immediate: !0,
+    flush: "post"
+  }), f = () => {
+    i(), a();
+  };
+  return M(f), {
+    isSupported: s,
+    stop: f
+  };
+}
+function H(o, t = {
+  width: 0,
+  height: 0
+}, r = {}) {
+  const { window: c = O, box: l = "content-box" } = r, n = w(() => {
+    var e;
+    return (e = d(o)) === null || e === void 0 || (e = e.namespaceURI) === null || e === void 0 ? void 0 : e.includes("svg");
+  }), s = b(t.width), i = b(t.height), { stop: a } = _(o, ([e]) => {
+    const p = l === "border-box" ? e.borderBoxSize : l === "content-box" ? e.contentBoxSize : e.devicePixelContentBoxSize;
+    if (c && n.value) {
+      const h = d(o);
+      if (h) {
+        const v = h.getBoundingClientRect();
+        s.value = v.width, i.value = v.height;
+      }
+    } else if (p) {
+      const h = R(p);
+      s.value = h.reduce((v, { inlineSize: m }) => v + m, 0), i.value = h.reduce((v, { blockSize: m }) => v + m, 0);
+    } else
+      s.value = e.contentRect.width, i.value = e.contentRect.height;
+  }, r);
+  B(() => {
+    const e = d(o);
+    e && (s.value = "offsetWidth" in e ? e.offsetWidth : t.width, i.value = "offsetHeight" in e ? e.offsetHeight : t.height);
+  });
+  const f = x(() => d(o), (e) => {
+    s.value = e ? t.width : 0, i.value = e ? t.height : 0;
+  });
+  function u() {
+    a(), f();
+  }
+  return {
+    width: s,
+    height: i,
+    stop: u
+  };
+}
+export {
+  O as defaultWindow,
+  D as getLifeCycleTarget,
+  z as isClient,
+  $ as notNullish,
+  R as toArray,
+  B as tryOnMounted,
+  M as tryOnScopeDispose,
+  d as unrefElement,
+  H as useElementSize,
+  E as useMounted,
+  y as useMutationObserver,
+  _ as useResizeObserver,
+  S as useSupported
+};

package/es/node_modules/.pnpm/@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs

@@ -0,0 +1,24 @@
+import { onMounted as o, nextTick as r, getCurrentScope as i, onScopeDispose as u, getCurrentInstance as c } from "vue";
+function l(e, n) {
+  return i() ? (u(e, n), !0) : !1;
+}
+const p = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const d = (e) => e != null;
+function a(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function f(e) {
+  return c();
+}
+function y(e, n = !0, t) {
+  f() ? o(e, t) : n ? e() : r(e);
+}
+export {
+  f as getLifeCycleTarget,
+  p as isClient,
+  d as notNullish,
+  a as toArray,
+  y as tryOnMounted,
+  l as tryOnScopeDispose
+};

package/es/theme-chalk/src/filter-panel.css

@@ -0,0 +1 @@
+@charset "UTF-8";.re-filter-panel{display:flex;align-items:start;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;border-radius:4px}.re-filter-panel__inner{flex:1;min-width:0;display:flex;flex-wrap:wrap}.re-filter-panel__extra{margin-top:1em}

package/es/theme-chalk/src/svg-icon.css

@@ -0,0 +1 @@
+@charset "UTF-8";.re-svg-icon{display:inline-block;vertical-align:middle}.re-svg-icon__spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rappel-ui",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "a vue3 ui library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/theme-chalk/index.css

@@ -623,4 +623,39 @@ body {
   background-image: linear-gradient(45deg, #ededf0 25%, transparent 25%), linear-gradient(-45deg, #ededf0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededf0 75%), linear-gradient(-45deg, transparent 75%, #ededf0 75%);
   background-size: 22px 22px;
   background-position: 0 0, 0 11px, 11px -11px, -11px 0px;
+}
+
+.re-filter-panel {
+  display: flex;
+  align-items: start;
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  border-radius: 4px;
+}
+.re-filter-panel__inner {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.re-filter-panel__extra {
+  margin-top: 1em;
+}
+
+.re-svg-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.re-svg-icon__spinner {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

package/theme-chalk/re-filter-panel.css

@@ -0,0 +1,53 @@
+@charset "UTF-8";
+/**
+ * 将十六进制颜色转换为RGB颜色
+ * @param $hex 十六进制颜色值
+ * @returns RGB颜色值
+ * color.channel($color, "red", $space: rgb)
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $value RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $color RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+.re-filter-panel {
+  display: flex;
+  align-items: start;
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  border-radius: 4px;
+}
+.re-filter-panel__inner {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.re-filter-panel__extra {
+  margin-top: 1em;
+}

package/theme-chalk/re-svg-icon.css

@@ -0,0 +1,50 @@
+@charset "UTF-8";
+/**
+ * 将十六进制颜色转换为RGB颜色
+ * @param $hex 十六进制颜色值
+ * @returns RGB颜色值
+ * color.channel($color, "red", $space: rgb)
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $value RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $color RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+.re-svg-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.re-svg-icon__spinner {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/theme-chalk/src/filter-panel.scss

@@ -0,0 +1,21 @@
+@use 'mixins/index' as *;
+
+@include buildCls(filter-panel) {
+  display: flex;
+  align-items: start;
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  border-radius: 4px;
+
+  @include sub(inner) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  @include sub(extra) {
+    margin-top: 1em;
+  }
+}

package/theme-chalk/src/index.scss

@@ -1,3 +1,5 @@
 @forward './base.scss';
 @forward './button.scss';
 @forward './colors.scss';
+@forward './filter-panel.scss';
+@forward './svg-icon.scss';

package/theme-chalk/src/mixins/index.scss

@@ -8,6 +8,17 @@
   }
 }
 
+@mixin modifier($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+@mixin sub($subName) {
+  &__#{$subName} {
+    @content;
+  }
+}
+
 @mixin is($state) {
   &.#{getNamespace('statePrefix') + '-' + $state} {
     @content;

package/theme-chalk/src/svg-icon.scss

@@ -0,0 +1,19 @@
+@use 'mixins/index' as *;
+
+@include buildCls(svg-icon) {
+  display: inline-block;
+  vertical-align: middle;
+
+  @include sub(spinner) {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}