@shjjs/visual-ui 1.0.23 → 1.0.25

package/es/components/interaction/date-picker/index.vue2.mjs

@@ -0,0 +1,169 @@
+import { defineComponent as S, useCssVars as O, ref as y, onMounted as B, createElementBlock as u, openBlock as m, createVNode as I, unref as h, normalizeStyle as T, withCtx as $, createElementVNode as s, createCommentVNode as C, Fragment as w, pushScopeId as E, popScopeId as N } from "vue";
+import R from "@vuepic/vue-datepicker";
+import { nanoid as g } from "nanoid";
+import i from "dayjs";
+import "dayjs/locale/zh-cn";
+import j from "dayjs/plugin/relativeTime";
+import { useDatePickerWatch as H } from "./hooks/useDatePickerWatch.mjs";
+import { SHJDatasourceV2 as q } from "../../../commons/plugins/datasource/index.mjs";
+import { SHJParseEvent as z } from "../../../commons/plugins/event/index.mjs";
+import { Utils as F } from "../../../commons/utils/utils.mjs";
+import "@vuepic/vue-datepicker/dist/main.css";
+const n = (r) => (E("data-v-a6893215"), r = r(), N(), r), J = { class: "left-sidebar" }, U = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "今天", -1)), A = [
+  U
+], K = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "昨天", -1)), L = [
+  K
+], M = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "前天", -1)), W = [
+  M
+], Y = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "近7天", -1)), G = [
+  Y
+], Q = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "近15天", -1)), X = [
+  Q
+], Z = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "近30天", -1)), _ = [
+  Z
+], x = /* @__PURE__ */ n(() => /* @__PURE__ */ s("span", null, "近365天", -1)), ee = [
+  x
+], oe = S({ name: "shj-date-picker" }), me = /* @__PURE__ */ S({
+  ...oe,
+  props: {
+    option: {},
+    sources: {},
+    useEvents: {},
+    uuid: {}
+  },
+  emits: ["on-change"],
+  setup(r, { expose: P, emit: V }) {
+    O((e) => ({
+      "7f1b2dc8": e.option.css.dp.backgroundColor,
+      "20b9512e": e.option.css.dp.textColor,
+      "7ee84e98": e.option.css.dp.hoverColor,
+      "890e71f2": e.option.css.dp.hoverTextColor,
+      "3a87ef24": e.option.css.dp.primaryColor,
+      "5b705f5c": e.option.css.dp.primaryDisabledColor,
+      "3392ec7e": e.option.css.dp.primaryTextColor,
+      "073d9608": e.option.css.dp.secondaryColor,
+      "8e8fa1ec": e.option.css.dp.borderColor,
+      "204c8eab": e.option.css.dp.menuBorderColor,
+      43488052: e.option.css.dp.borderColorHover,
+      "432c0bee": e.option.css.dp.borderColorFocus,
+      d074ec0c: e.option.css.dp.disabledColor,
+      fee81572: e.option.css.dp.scrollBarBackground,
+      "28d423aa": e.option.css.dp.scrollBarColor,
+      "037021e6": e.option.css.dp.successColor,
+      "466330a9": e.option.css.dp.successColorDisabled,
+      "6d0f2f73": e.option.css.dp.dangerColor,
+      74789372: e.option.css.dp.disabledColorText,
+      "60ef21bc": e.option.css.dp.highlightColor,
+      "5cd1cbc0": e.option.css.dp.loader,
+      "174f055d": e.option.css.dp.fontSize,
+      "1d47b298": e.option.css.dp.inputBackgroundColor,
+      "67c8fe04": e.option.css.dp.inputHeight
+    })), i.extend(j), i.locale("zh-cn");
+    const l = r, D = V, t = y(), f = y(g()), b = () => f.value = g(), d = () => {
+      q.parse({
+        tId: l.uuid,
+        sources: l.sources,
+        callback: ({ data: e }) => {
+          try {
+            t.value = i(e[0].data[0].date);
+          } catch {
+          }
+        }
+      });
+    };
+    B(() => d()), H(l, d, b), P({
+      refresh: () => d(),
+      refreshView: () => b(),
+      refreshData: () => d()
+    });
+    const k = (e) => {
+      t.value = e, D("on-change", { data: t.value }), z.parseEvents(l.useEvents, "on-change", { data: t.value });
+    }, c = (e) => {
+      e === "today" ? t.value = i() : e === "yesterday" ? t.value = i().subtract(1, "day") : e === "before-yesterday" && (t.value = i().subtract(2, "day"));
+    }, p = (e) => {
+      e === "last-7" ? t.value = [i().subtract(7, "day").startOf("day"), i().endOf("day")] : e === "last-15" ? t.value = [i().subtract(15, "day").startOf("day"), i().endOf("day")] : e === "last-30" ? t.value = [i().subtract(30, "day").startOf("day"), i().endOf("day")] : e === "last-365" && (t.value = [i().subtract(365, "day").startOf("day"), i().endOf("day")]), k(t.value);
+    };
+    return (e, o) => (m(), u("div", {
+      key: f.value,
+      class: "date-picker"
+    }, [
+      I(h(R), {
+        modelValue: t.value,
+        "onUpdate:modelValue": [
+          o[7] || (o[7] = (v) => t.value = v),
+          k
+        ],
+        range: e.option.range,
+        "multi-calendars": e.option.multiCalendars,
+        "month-picker": e.option.monthPicker,
+        "time-picker": e.option.timePicker,
+        "year-picker": e.option.yearPicker,
+        "week-picker": e.option.weekPicker,
+        "quarter-picker": e.option.quarterPicker,
+        inline: e.option.inline,
+        "auto-apply": e.option.autoApply,
+        clearable: e.option.clearable,
+        placeholder: e.option.placeholder,
+        disabled: e.option.disabled,
+        readonly: e.option.readonly,
+        "action-row": {
+          showNow: e.option.actionRow.showNow,
+          showPreview: e.option.actionRow.showPreview,
+          showSelect: e.option.actionRow.showSelect,
+          showCancel: e.option.actionRow.showCancel
+        },
+        "disable-year-select": e.option.disableYearSelect,
+        "enable-time-picker": e.option.enableTimePicker,
+        "enable-seconds": e.option.enableSeconds,
+        "time-picker-inline": e.option.timePickerInline,
+        "now-button-label": e.option.nowButtonLabel,
+        "cancel-text": e.option.cancelText,
+        "select-text": e.option.selectText,
+        "hide-input-icon": e.option.hideInputIcon,
+        class: "date-picker-container",
+        style: T(h(F).json2cssObject(e.option.css.dp, "dp"))
+      }, {
+        "left-sidebar": $((v) => [
+          s("div", J, [
+            e.option.range ? C("", !0) : (m(), u(w, { key: 0 }, [
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[0] || (o[0] = (a) => c("today"))
+              }, A),
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[1] || (o[1] = (a) => c("yesterday"))
+              }, L),
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[2] || (o[2] = (a) => c("before-yesterday"))
+              }, W)
+            ], 64)),
+            e.option.range ? (m(), u(w, { key: 1 }, [
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[3] || (o[3] = (a) => p("last-7"))
+              }, G),
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[4] || (o[4] = (a) => p("last-15"))
+              }, X),
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[5] || (o[5] = (a) => p("last-30"))
+              }, _),
+              s("div", {
+                class: "left-sidebar-item",
+                onClick: o[6] || (o[6] = (a) => p("last-365"))
+              }, ee)
+            ], 64)) : C("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "range", "multi-calendars", "month-picker", "time-picker", "year-picker", "week-picker", "quarter-picker", "inline", "auto-apply", "clearable", "placeholder", "disabled", "readonly", "action-row", "disable-year-select", "enable-time-picker", "enable-seconds", "time-picker-inline", "now-button-label", "cancel-text", "select-text", "hide-input-icon", "style"])
+    ]));
+  }
+});
+export {
+  me as default
+};

package/es/components/interaction/date-picker/types.d.ts

@@ -0,0 +1,208 @@
+import { RangeConfig } from '@vuepic/vue-datepicker';
+export interface IDatePickerOption {
+    css: {
+        dp: {
+            /**
+             * 背景颜色
+             */
+            backgroundColor: string;
+            /**
+             * 输入框背景颜色
+             */
+            inputBackgroundColor: string;
+            /**
+             * 文本颜色
+             */
+            textColor: string;
+            /**
+             * 悬停颜色
+             */
+            hoverColor: string;
+            /**
+             * 悬停文本颜色
+             */
+            hoverTextColor: string;
+            /**
+             * 主色
+             */
+            primaryColor: string;
+            /**
+             * 主色禁用颜色
+             */
+            primaryDisabledColor: string;
+            /**
+             * 主色文本颜色
+             */
+            primaryTextColor: string;
+            /**
+             * 次要颜色
+             */
+            secondaryColor: string;
+            /**
+             * 边框颜色
+             */
+            borderColor: string;
+            /**
+             * 菜单边框颜色
+             */
+            menuBorderColor: string;
+            /**
+             * 悬停边框颜色
+             */
+            borderColorHover: string;
+            /**
+             * 聚焦边框颜色
+             */
+            borderColorFocus: string;
+            /**
+             * 禁用颜色
+             */
+            disabledColor: string;
+            /**
+             * 滚动条背景颜色
+             */
+            scrollBarBackground: string;
+            /**
+             * 滚动条颜色
+             */
+            scrollBarColor: string;
+            /**
+             * 成功颜色
+             */
+            successColor: string;
+            /**
+             * 成功颜色禁用
+             */
+            successColorDisabled: string;
+            /**
+             * 危险颜色
+             */
+            dangerColor: string;
+            /**
+             * 禁用颜色文本
+             */
+            disabledColorText: string;
+            /**
+             * 高亮颜色
+             */
+            highlightColor: string;
+            /**
+             * 加载器
+             */
+            loader: string;
+            /**
+             * 字体大小
+             */
+            fontSize: string;
+            /**
+             * 输入框高度
+             */
+            inputHeight: string;
+        };
+    };
+    /**
+     * 是否为范围选择
+     */
+    range: boolean | RangeConfig;
+    /**
+     * 是否为多选
+     */
+    multiCalendars: boolean;
+    /**
+     * 是否显示月份选择
+     */
+    monthPicker: boolean;
+    /**
+     * 是否显示时间选择
+     */
+    timePicker: boolean;
+    /**
+     * 是否显示年份选择
+     */
+    yearPicker: boolean;
+    /**
+     * 是否显示周选择
+     */
+    weekPicker: boolean;
+    /**
+     * 是否显示季度选择
+     */
+    quarterPicker: boolean;
+    /**
+     * 是否内联
+     */
+    inline: boolean;
+    /**
+     * 是否自动应用
+     */
+    autoApply: boolean;
+    /**
+     * 是否可清除
+     */
+    clearable: boolean;
+    /**
+     * 占位符
+     */
+    placeholder: string;
+    /**
+     * 是否禁用
+     */
+    disabled: boolean;
+    /**
+     * 是否只读
+     */
+    readonly: boolean;
+    /**
+     * 操作栏
+     */
+    actionRow: {
+        /**
+         * 是否显示现在
+         */
+        showNow: boolean;
+        /**
+         * 是否显示预览
+         */
+        showPreview: boolean;
+        /**
+         * 是否显示选择
+         */
+        showSelect: boolean;
+        /**
+         * 是否显示取消
+         */
+        showCancel: boolean;
+    };
+    /**
+     * 是否禁用年份选择
+     */
+    disableYearSelect: boolean;
+    /**
+     * 是否启用时间选择
+     */
+    enableTimePicker: boolean;
+    /**
+     * 是否启用秒选择
+     */
+    enableSeconds: boolean;
+    /**
+     * 是否内联时间选择
+     */
+    timePickerInline: boolean;
+    /**
+     * 现在按钮文本
+     */
+    nowButtonLabel: string;
+    /**
+   * 取消文本
+   */
+    cancelText: string;
+    /**
+     * 选择文本
+     */
+    selectText: string;
+    /**
+     * 是否隐藏输入框图标
+     */
+    hideInputIcon: boolean;
+}

package/es/components/interaction/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tabs';
+export * from './button';
+export * from './date-picker';

package/es/components/interaction/tabs/base.vue.d.ts

@@ -0,0 +1,30 @@
+import { Utils } from '../../../commons/utils/utils';
+declare const _sfc_main: import("vue").DefineComponent<{
+    basicOption: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    useEvents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}, {
+    emit: (event: "on-change" | "on-click-item", ...args: any[]) => void;
+    props: any;
+    tabList: import("vue").Ref<any[]>;
+    handleEvent: (item: any) => void;
+    readonly Utils: typeof Utils;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("on-change" | "on-click-item")[], "on-change" | "on-click-item", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    basicOption: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    useEvents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}>> & {
+    "onOn-change"?: (...args: any[]) => any;
+    "onOn-click-item"?: (...args: any[]) => any;
+}, {}, {}>;
+export default _sfc_main;

package/es/components/interaction/tabs/base.vue.mjs

@@ -0,0 +1,7 @@
+import o from "./base.vue2.mjs";
+/* empty css           */
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-82e70117"]]);
+export {
+  p as default
+};

package/es/components/interaction/tabs/base.vue2.mjs

@@ -0,0 +1,35 @@
+import { defineComponent as E, ref as k, watch as h, createElementBlock as i, openBlock as o, normalizeStyle as l, unref as r, Fragment as O, renderList as y, withModifiers as _, normalizeClass as g, toDisplayString as j } from "vue";
+import { cloneDeep as z, isEqual as C, isArray as p } from "lodash";
+import { Utils as u } from "../../../commons/utils/utils.mjs";
+import { SHJParseEvent as v } from "../../../commons/plugins/event/index.mjs";
+const S = ["onClick"], A = /* @__PURE__ */ E({
+  __name: "base",
+  props: {
+    basicOption: {},
+    useEvents: {}
+  },
+  emits: ["on-click-item", "on-change"],
+  setup(m, { emit: b }) {
+    const c = b, s = m, n = k(s.basicOption.value), d = (e) => {
+      n.value.map((t) => t.selected = !1), e.selected = !0, c("on-click-item", e), s.useEvents && p(s.useEvents) && v.parseEvents(s.useEvents.filter((t) => t.clickname === e.id), "on-click-item"), c("on-change", e), s.useEvents && p(s.useEvents) && v.parseEvents(s.useEvents, "on-change", {
+        data: e.label
+      });
+    };
+    return h(() => z(s.basicOption), (e, t) => {
+      C(e, t) || (n.value = s.basicOption.value);
+    }, { deep: !0 }), (e, t) => (o(), i("div", {
+      class: "zv-tab",
+      style: l(r(u).json2cssObject(e.basicOption.css.tab))
+    }, [
+      (o(!0), i(O, null, y(n.value, (a, f) => (o(), i("div", {
+        key: f,
+        class: g(["zv-tab-item", { selected: a.selected }]),
+        style: l(r(u).json2cssObject(e.basicOption.css.item)),
+        onClick: _((w) => d(a), ["stop"])
+      }, j(a.label), 15, S))), 128))
+    ], 4));
+  }
+});
+export {
+  A as default
+};

package/es/components/interaction/tabs/hooks/useTabsWatch.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from 'vue';
+import type { ITabsOption } from '../types';
+/**
+ * 监听选项
+ * @param props 选项
+ * @param tabs 选项列表
+ */
+export declare const useTabsWatch: (props: {
+    option: ITabsOption;
+    sources: any;
+}, initData: Function, activeTab: Ref<string>, tabs: Ref<any[]>) => void;

package/es/components/interaction/tabs/hooks/useTabsWatch.mjs

@@ -0,0 +1,16 @@
+import { watch as t } from "vue";
+import { cloneDeep as r, isEqual as c } from "lodash";
+const s = (e, a, u, l) => {
+  t(() => e.sources, () => {
+    e.sources && e.sources.length > 0 && a(e.option);
+  }, {
+    deep: !0
+  }), t(() => r(e.option.value), (o, i) => {
+    c(o, i) || (u.value = o, !u.value && l.value.length > 0 && (u.value = l.value[0].value));
+  }, {
+    deep: !0
+  });
+};
+export {
+  s as useTabsWatch
+};

package/es/components/interaction/tabs/index.d.ts

@@ -0,0 +1,74 @@
+export declare const ShjInteractionTabs: import("../../../commons/utils/typescript").SFCWithInstall<import("vue").DefineComponent<{
+    option: {
+        type: any;
+        required: true;
+    };
+    sources: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    useEvents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    uuid: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    props: any;
+    emits: (event: "on-change", ...args: any[]) => void;
+    tabs: import("vue").Ref<any[]>;
+    activeTab: import("vue").Ref<any>;
+    initSourceData: () => void;
+    handleClickItem: (item: any) => void;
+    tabsContainer: import("vue").Ref<HTMLElement>;
+    scrollStep: number;
+    showNavButtons: import("vue").Ref<boolean>;
+    checkScrollable: () => void;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    readonly Utils: typeof import("../../../commons/utils/utils").Utils;
+    CommonsText: import("vue").DefineComponent<{
+        textStyle: {
+            type: any;
+            required: true;
+        };
+        text: {
+            type: StringConstructor;
+            required: true;
+        };
+    }, {
+        props: any;
+        readonly Utils: typeof import("../../../commons/utils/utils").Utils;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        textStyle: {
+            type: any;
+            required: true;
+        };
+        text: {
+            type: StringConstructor;
+            required: true;
+        };
+    }>>, {}, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "on-change"[], "on-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    option: {
+        type: any;
+        required: true;
+    };
+    sources: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    useEvents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    uuid: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & {
+    "onOn-change"?: (...args: any[]) => any;
+}, {}, {}>> & Record<string, any>;
+export default ShjInteractionTabs;

package/es/components/interaction/tabs/index.mjs

@@ -0,0 +1,7 @@
+import t from "./index.vue.mjs";
+import { withInstall as o } from "../../../commons/utils/install.mjs";
+const i = o(t);
+export {
+  i as ShjInteractionTabs,
+  i as default
+};

package/es/components/interaction/tabs/index.vue.d.ts

@@ -0,0 +1,75 @@
+import { Utils } from '../../../commons/utils/utils';
+declare const _sfc_main: import("vue").DefineComponent<{
+    option: {
+        type: any;
+        required: true;
+    };
+    sources: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    useEvents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    uuid: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    props: any;
+    emits: (event: "on-change", ...args: any[]) => void;
+    tabs: import("vue").Ref<any[]>;
+    activeTab: import("vue").Ref<any>;
+    initSourceData: () => void;
+    handleClickItem: (item: any) => void;
+    tabsContainer: import("vue").Ref<HTMLElement>;
+    scrollStep: number;
+    showNavButtons: import("vue").Ref<boolean>;
+    checkScrollable: () => void;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    readonly Utils: typeof Utils;
+    CommonsText: import("vue").DefineComponent<{
+        textStyle: {
+            type: any;
+            required: true;
+        };
+        text: {
+            type: StringConstructor;
+            required: true;
+        };
+    }, {
+        props: any;
+        readonly Utils: typeof Utils;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        textStyle: {
+            type: any;
+            required: true;
+        };
+        text: {
+            type: StringConstructor;
+            required: true;
+        };
+    }>>, {}, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "on-change"[], "on-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    option: {
+        type: any;
+        required: true;
+    };
+    sources: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    useEvents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    uuid: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & {
+    "onOn-change"?: (...args: any[]) => any;
+}, {}, {}>;
+export default _sfc_main;