zartui 0.1.112 → 3.0.2

package/es/switch/Switch.mjs

@@ -0,0 +1,85 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { addUnit, numericProp, unknownProp, createNamespace } from "../utils/index.mjs";
+import { useCustomFieldValue } from "@zartui/use";
+import { Loading } from "../loading/index.mjs";
+const [name, bem] = createNamespace("switch");
+const switchProps = {
+  size: numericProp,
+  loading: Boolean,
+  disabled: Boolean,
+  modelValue: unknownProp,
+  activeColor: String,
+  inactiveColor: String,
+  activeValue: {
+    type: unknownProp,
+    default: true
+  },
+  inactiveValue: {
+    type: unknownProp,
+    default: false
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: switchProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const isChecked = () => props.modelValue === props.activeValue;
+    const onClick = () => {
+      if (!props.disabled && !props.loading) {
+        const newValue = isChecked() ? props.inactiveValue : props.activeValue;
+        emit("update:modelValue", newValue);
+        emit("change", newValue);
+      }
+    };
+    const renderLoading = () => {
+      if (props.loading) {
+        const color = isChecked() ? props.activeColor : props.inactiveColor;
+        return _createVNode(Loading, {
+          "class": bem("loading"),
+          "color": color
+        }, null);
+      }
+      if (slots.node) {
+        return slots.node();
+      }
+    };
+    useCustomFieldValue(() => props.modelValue);
+    return () => {
+      var _a;
+      const {
+        size,
+        loading,
+        disabled,
+        activeColor,
+        inactiveColor
+      } = props;
+      const checked = isChecked();
+      const style = {
+        fontSize: addUnit(size),
+        backgroundColor: checked ? activeColor : inactiveColor
+      };
+      return _createVNode("div", {
+        "role": "switch",
+        "class": bem({
+          on: checked,
+          loading,
+          disabled
+        }),
+        "style": style,
+        "tabindex": disabled ? void 0 : 0,
+        "aria-checked": checked,
+        "onClick": onClick
+      }, [_createVNode("div", {
+        "class": bem("node")
+      }, [renderLoading()]), (_a = slots.background) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/switch/index.css

@@ -0,0 +1 @@
+body{--zt-switch-size: 28px;--zt-switch-width:calc(1.5em + 10px);--zt-switch-height: 1em;--zt-switch-shadow: inset 2px 2px 4px 1px rgba(0, 0, 0, .15);--zt-switch-node-size:calc(1em - 4px);--zt-switch-node-background: var(--zt-white);--zt-switch-node-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .15);--zt-switch-background: rgba(120, 120, 128, .16);--zt-switch-on-background: var(--zt-primary-color);--zt-switch-duration: var(--zt-duration-base);--zt-switch-disabled-opacity: var(--zt-disabled-opacity)}.zt-theme-dark{--zt-switch-background: rgba(120, 120, 128, .32)}.zt-switch{position:relative;display:inline-block;box-sizing:content-box;width:var(--zt-switch-width);height:var(--zt-switch-height);font-size:var(--zt-switch-size);background:var(--zt-switch-background);border-radius:var(--zt-switch-node-size);cursor:pointer;transition:background-color var(--zt-switch-duration);box-shadow:var(--zt-switch-shadow)}.zt-switch__node{position:absolute;top:2px;left:2px;width:var(--zt-switch-node-size);height:var(--zt-switch-node-size);font-size:inherit;background:var(--zt-switch-node-background);border-radius:100%;box-shadow:var(--zt-switch-node-shadow);transition:transform var(--zt-switch-duration) cubic-bezier(.3,1.05,.4,1.05)}.zt-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.zt-switch--on{background:var(--zt-switch-on-background)}.zt-switch--on .zt-switch__node{transform:translate(calc(var(--zt-switch-width) - var(--zt-switch-node-size) - 4px))}.zt-switch--on .zt-switch__loading{color:var(--zt-switch-on-background)}.zt-switch--disabled{cursor:not-allowed;opacity:var(--zt-switch-disabled-opacity)}.zt-switch--loading{cursor:default}

package/es/switch/index.d.ts

@@ -0,0 +1,46 @@
+export declare const Switch: import("../utils").WithInstall<import("vue").DefineComponent<{
+    size: (NumberConstructor | StringConstructor)[];
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modelValue: import("vue").PropType<unknown>;
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    activeValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+    inactiveValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: (NumberConstructor | StringConstructor)[];
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modelValue: import("vue").PropType<unknown>;
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    activeValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+    inactiveValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    loading: boolean;
+    activeValue: unknown;
+    inactiveValue: unknown;
+}>>;
+export default Switch;
+export type { SwitchProps } from './Switch';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtSwitch: typeof Switch;
+    }
+}

package/es/switch/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Switch from "./Switch.mjs";
+const Switch = withInstall(_Switch);
+var stdin_default = Switch;
+export {
+  Switch,
+  stdin_default as default
+};

package/es/switch/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/switch/style/index.mjs

@@ -0,0 +1,3 @@
+import "../../style/base.css";
+import "../../loading/index.css";
+import "../index.css";

package/es/tab/Tab.d.ts

@@ -0,0 +1,58 @@
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+declare const tabProps: {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: PropType<unknown>;
+    titleStyle: PropType<string | CSSProperties>;
+    showZeroBadge: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type TabProps = ExtractPropTypes<typeof tabProps>;
+declare const _default: import("vue").DefineComponent<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: PropType<unknown>;
+    titleStyle: PropType<string | CSSProperties>;
+    showZeroBadge: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, (() => JSX.Element | undefined) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: PropType<unknown>;
+    titleStyle: PropType<string | CSSProperties>;
+    showZeroBadge: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}>>, {
+    replace: boolean;
+    dot: boolean;
+    disabled: boolean;
+    showZeroBadge: boolean;
+}>;
+export default _default;

package/es/tab/Tab.mjs

@@ -0,0 +1,113 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, provide, computed, nextTick, defineComponent } from "vue";
+import { extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { TABS_KEY } from "../tabs/Tabs.mjs";
+import { useParent } from "@zartui/use";
+import { useId } from "../composables/use-id.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+import { routeProps } from "../composables/use-route.mjs";
+import { TAB_STATUS_KEY } from "../composables/use-tab-status.mjs";
+import { SwipeItem } from "../swipe-item/index.mjs";
+const [name, bem] = createNamespace("tab");
+const tabProps = extend({}, routeProps, {
+  dot: Boolean,
+  name: numericProp,
+  badge: numericProp,
+  title: String,
+  disabled: Boolean,
+  titleClass: unknownProp,
+  titleStyle: [String, Object],
+  showZeroBadge: truthProp
+});
+var stdin_default = defineComponent({
+  name,
+  props: tabProps,
+  setup(props, {
+    slots
+  }) {
+    const id = useId();
+    const inited = ref(false);
+    const {
+      parent,
+      index
+    } = useParent(TABS_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <Tab> must be a child component of <Tabs>.");
+      }
+      return;
+    }
+    const getName = () => {
+      var _a;
+      return (_a = props.name) != null ? _a : index.value;
+    };
+    const init = () => {
+      inited.value = true;
+      if (parent.props.lazyRender) {
+        nextTick(() => {
+          parent.onRendered(getName(), props.title);
+        });
+      }
+    };
+    const active = computed(() => {
+      const isActive = getName() === parent.currentName.value;
+      if (isActive && !inited.value) {
+        init();
+      }
+      return isActive;
+    });
+    watch(() => props.title, () => {
+      parent.setLine();
+      parent.scrollIntoView();
+    });
+    provide(TAB_STATUS_KEY, active);
+    return () => {
+      var _a;
+      const label = `${parent.id}-${index.value}`;
+      const {
+        animated,
+        swipeable,
+        scrollspy,
+        lazyRender
+      } = parent.props;
+      if (!slots.default && !animated) {
+        return;
+      }
+      const show = scrollspy || active.value;
+      if (animated || swipeable) {
+        return _createVNode(SwipeItem, {
+          "id": id,
+          "role": "tabpanel",
+          "class": bem("panel-wrapper", {
+            inactive: !active.value
+          }),
+          "tabindex": active.value ? 0 : -1,
+          "aria-hidden": !active.value,
+          "aria-labelledby": label
+        }, {
+          default: () => {
+            var _a2;
+            return [_createVNode("div", {
+              "class": bem("panel")
+            }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])];
+          }
+        });
+      }
+      const shouldRender = inited.value || scrollspy || !lazyRender;
+      const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
+      useExpose({
+        id
+      });
+      return _withDirectives(_createVNode("div", {
+        "id": id,
+        "role": "tabpanel",
+        "class": bem("panel"),
+        "tabindex": show ? 0 : -1,
+        "aria-labelledby": label
+      }, [Content]), [[_vShow, show]]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/tab/index.css

@@ -0,0 +1 @@
+.zt-tab__panel,.zt-tab__panel-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.zt-tab__panel-wrapper--inactive{height:0;overflow:visible}

package/es/tab/index.d.ts

@@ -0,0 +1,45 @@
+export declare const Tab: import("../utils").WithInstall<import("vue").DefineComponent<{
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: import("vue").PropType<unknown>;
+    titleStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    showZeroBadge: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, (() => JSX.Element | undefined) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: import("vue").PropType<unknown>;
+    titleStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    showZeroBadge: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}>>, {
+    replace: boolean;
+    dot: boolean;
+    disabled: boolean;
+    showZeroBadge: boolean;
+}>>;
+export default Tab;
+export type { TabProps } from './Tab';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTab: typeof Tab;
+    }
+}

package/es/tab/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Tab from "./Tab.mjs";
+const Tab = withInstall(_Tab);
+var stdin_default = Tab;
+export {
+  Tab,
+  stdin_default as default
+};

package/es/tab/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/tab/style/index.mjs

@@ -0,0 +1,7 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../sticky/index.css";
+import "../../swipe/index.css";
+import "../../tabs/index.css";
+import "../../swipe-item/index.css";
+import "../index.css";

package/es/tabs/Tabs.d.ts

@@ -0,0 +1,154 @@
+import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+import { Interceptor } from '../utils';
+import type { TabsProvide, TabsType } from './types';
+declare const tabsProps: {
+    type: {
+        type: PropType<TabsType>;
+        default: TabsType;
+    };
+    color: StringConstructor;
+    border: BooleanConstructor;
+    sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
+    active: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    duration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    animated: BooleanConstructor;
+    ellipsis: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: BooleanConstructor;
+    scrollspy: BooleanConstructor;
+    offsetTop: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    background: StringConstructor;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lineWidth: (NumberConstructor | StringConstructor)[];
+    lineHeight: (NumberConstructor | StringConstructor)[];
+    beforeChange: PropType<Interceptor>;
+    swipeThreshold: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    titleActiveColor: StringConstructor;
+    titleInactiveColor: StringConstructor;
+};
+export declare type TabsProps = ExtractPropTypes<typeof tabsProps>;
+export declare const TABS_KEY: InjectionKey<TabsProvide>;
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: PropType<TabsType>;
+        default: TabsType;
+    };
+    color: StringConstructor;
+    border: BooleanConstructor;
+    sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
+    active: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    duration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    animated: BooleanConstructor;
+    ellipsis: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: BooleanConstructor;
+    scrollspy: BooleanConstructor;
+    offsetTop: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    background: StringConstructor;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lineWidth: (NumberConstructor | StringConstructor)[];
+    lineHeight: (NumberConstructor | StringConstructor)[];
+    beforeChange: PropType<Interceptor>;
+    swipeThreshold: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    titleActiveColor: StringConstructor;
+    titleInactiveColor: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "change" | "rendered" | "clickTab" | "update:active")[], "scroll" | "change" | "rendered" | "clickTab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    type: {
+        type: PropType<TabsType>;
+        default: TabsType;
+    };
+    color: StringConstructor;
+    border: BooleanConstructor;
+    sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
+    active: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    duration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    animated: BooleanConstructor;
+    ellipsis: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: BooleanConstructor;
+    scrollspy: BooleanConstructor;
+    offsetTop: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    background: StringConstructor;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lineWidth: (NumberConstructor | StringConstructor)[];
+    lineHeight: (NumberConstructor | StringConstructor)[];
+    beforeChange: PropType<Interceptor>;
+    swipeThreshold: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    titleActiveColor: StringConstructor;
+    titleInactiveColor: StringConstructor;
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onScroll?: ((...args: any[]) => any) | undefined;
+    onRendered?: ((...args: any[]) => any) | undefined;
+    onClickTab?: ((...args: any[]) => any) | undefined;
+    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: TabsType;
+    ellipsis: boolean;
+    sticky: boolean;
+    border: boolean;
+    active: string | number;
+    duration: string | number;
+    lazyRender: boolean;
+    offsetTop: string | number;
+    shrink: boolean;
+    animated: boolean;
+    swipeable: boolean;
+    scrollspy: boolean;
+    swipeThreshold: string | number;
+}>;
+export default _default;