zartui 3.0.2 → 3.0.4

package/es/form/index.d.ts

@@ -0,0 +1,69 @@
+import { FormProps } from './Form';
+export declare const Form: import("../utils").WithInstall<import("vue").DefineComponent<{
+    colon: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    showError: BooleanConstructor;
+    labelWidth: (NumberConstructor | StringConstructor)[];
+    labelAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    inputAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    scrollToError: BooleanConstructor;
+    validateFirst: BooleanConstructor;
+    submitOnEnter: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showErrorMessage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorMessageAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    validateTrigger: {
+        type: import("vue").PropType<import("..").FieldValidateTrigger | import("..").FieldValidateTrigger[]>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "failed")[], "submit" | "failed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    colon: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    showError: BooleanConstructor;
+    labelWidth: (NumberConstructor | StringConstructor)[];
+    labelAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    inputAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    scrollToError: BooleanConstructor;
+    validateFirst: BooleanConstructor;
+    submitOnEnter: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showErrorMessage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorMessageAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    validateTrigger: {
+        type: import("vue").PropType<import("..").FieldValidateTrigger | import("..").FieldValidateTrigger[]>;
+        default: string;
+    };
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onFailed?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    colon: boolean;
+    showError: boolean;
+    scrollToError: boolean;
+    validateFirst: boolean;
+    submitOnEnter: boolean;
+    showErrorMessage: boolean;
+    validateTrigger: import("..").FieldValidateTrigger | import("..").FieldValidateTrigger[];
+}>>;
+export default Form;
+export type { FormProps };
+export type { FormInstance } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtForm: typeof Form;
+    }
+}

package/es/form/index.mjs

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

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

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

package/es/form/style/index.mjs

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

package/es/form/types.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { FormProps } from './Form';
+import type { FieldValidationStatus } from '../field';
+export declare type FormExpose = {
+    submit: () => void;
+    validate: (name?: string | string[] | undefined) => Promise<void>;
+    getValues: () => Record<string, unknown>;
+    scrollToField: (name: string, options?: boolean | ScrollIntoViewOptions | undefined) => void;
+    resetValidation: (name?: string | string[] | undefined) => void;
+    getValidationStatus: () => Record<string, FieldValidationStatus>;
+};
+export declare type FormProvide = {
+    props: FormProps;
+};
+export declare type FormInstance = ComponentPublicInstance<FormProps, FormExpose>;

package/es/grid/Grid.d.ts

@@ -0,0 +1,74 @@
+import type { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+export declare type GridDirection = 'horizontal' | 'vertical';
+export declare const gridProps: {
+    square: BooleanConstructor;
+    center: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    reverse: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    direction: PropType<GridDirection>;
+    clickable: BooleanConstructor;
+    columnNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+};
+export declare type GridProps = ExtractPropTypes<typeof gridProps>;
+export declare type GridProvide = {
+    props: GridProps;
+};
+export declare const GRID_KEY: InjectionKey<GridProvide>;
+declare const _default: import("vue").DefineComponent<{
+    square: BooleanConstructor;
+    center: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    reverse: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    direction: PropType<GridDirection>;
+    clickable: BooleanConstructor;
+    columnNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    square: BooleanConstructor;
+    center: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    reverse: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    direction: PropType<GridDirection>;
+    clickable: BooleanConstructor;
+    columnNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>>, {
+    reverse: boolean;
+    center: boolean;
+    border: boolean;
+    clickable: boolean;
+    square: boolean;
+    columnNum: string | number;
+}>;
+export default _default;

package/es/grid/Grid.mjs

@@ -0,0 +1,48 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { createNamespace, addUnit, truthProp, numericProp, makeNumericProp } from "../utils/index.mjs";
+import { BORDER_TOP } from "../utils/constant.mjs";
+import { useChildren } from "@zartui/use";
+const [name, bem] = createNamespace("grid");
+const gridProps = {
+  square: Boolean,
+  center: truthProp,
+  border: truthProp,
+  gutter: numericProp,
+  reverse: Boolean,
+  iconSize: numericProp,
+  direction: String,
+  clickable: Boolean,
+  columnNum: makeNumericProp(4)
+};
+const GRID_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: gridProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      linkChildren
+    } = useChildren(GRID_KEY);
+    linkChildren({
+      props
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "style": {
+          paddingLeft: addUnit(props.gutter)
+        },
+        "class": [bem(), {
+          [BORDER_TOP]: props.border && !props.gutter
+        }]
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  GRID_KEY,
+  stdin_default as default,
+  gridProps
+};

package/es/grid/index.css

@@ -0,0 +1 @@
+.zt-grid{display:flex;flex-wrap:wrap}

package/es/grid/index.d.ts

@@ -0,0 +1,54 @@
+export declare const Grid: import("../utils").WithInstall<import("vue").DefineComponent<{
+    square: BooleanConstructor;
+    center: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    reverse: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    direction: import("vue").PropType<import("./Grid").GridDirection>;
+    clickable: BooleanConstructor;
+    columnNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    square: BooleanConstructor;
+    center: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    reverse: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    direction: import("vue").PropType<import("./Grid").GridDirection>;
+    clickable: BooleanConstructor;
+    columnNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>>, {
+    reverse: boolean;
+    center: boolean;
+    border: boolean;
+    clickable: boolean;
+    square: boolean;
+    columnNum: string | number;
+}>>;
+export default Grid;
+export { gridProps } from './Grid';
+export type { GridProps, GridDirection } from './Grid';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtGrid: typeof Grid;
+    }
+}

package/es/grid/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _Grid from "./Grid.mjs";
+const Grid = withInstall(_Grid);
+var stdin_default = Grid;
+import { gridProps } from "./Grid.mjs";
+export {
+  Grid,
+  stdin_default as default,
+  gridProps
+};

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

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

package/es/grid/style/index.mjs

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

package/es/grid-item/GridItem.d.ts

@@ -0,0 +1,45 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { BadgeProps } from '../badge';
+export declare const gridItemProps: {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    text: StringConstructor;
+    icon: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
+    badgeProps: PropType<Partial<BadgeProps>>;
+};
+export declare type GridItemProps = ExtractPropTypes<typeof gridItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    text: StringConstructor;
+    icon: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
+    badgeProps: PropType<Partial<BadgeProps>>;
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    text: StringConstructor;
+    icon: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
+    badgeProps: PropType<Partial<BadgeProps>>;
+}>>, {
+    replace: boolean;
+    dot: boolean;
+}>;
+export default _default;

package/es/grid-item/GridItem.mjs

@@ -0,0 +1,146 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { computed, defineComponent } from "vue";
+import { BORDER, extend, addUnit, numericProp, createNamespace } from "../utils/index.mjs";
+import { GRID_KEY } from "../grid/Grid.mjs";
+import { useParent } from "@zartui/use";
+import { useRoute, routeProps } from "../composables/use-route.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Badge } from "../badge/index.mjs";
+const [name, bem] = createNamespace("grid-item");
+const gridItemProps = extend({}, routeProps, {
+  dot: Boolean,
+  text: String,
+  icon: String,
+  badge: numericProp,
+  iconColor: String,
+  iconPrefix: String,
+  badgeProps: Object
+});
+var stdin_default = defineComponent({
+  name,
+  props: gridItemProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      parent,
+      index
+    } = useParent(GRID_KEY);
+    const route = useRoute();
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[ZartUI] <GridItem> must be a child component of <Grid>.");
+      }
+      return;
+    }
+    const rootStyle = computed(() => {
+      const {
+        square,
+        gutter,
+        columnNum
+      } = parent.props;
+      const percent = `${100 / +columnNum}%`;
+      const style = {
+        flexBasis: percent
+      };
+      if (square) {
+        style.paddingTop = percent;
+      } else if (gutter) {
+        const gutterValue = addUnit(gutter);
+        style.paddingRight = gutterValue;
+        if (index.value >= columnNum) {
+          style.marginTop = gutterValue;
+        }
+      }
+      return style;
+    });
+    const contentStyle = computed(() => {
+      const {
+        square,
+        gutter
+      } = parent.props;
+      if (square && gutter) {
+        const gutterValue = addUnit(gutter);
+        return {
+          right: gutterValue,
+          bottom: gutterValue,
+          height: "auto"
+        };
+      }
+    });
+    const renderIcon = () => {
+      if (slots.icon) {
+        return _createVNode(Badge, _mergeProps({
+          "dot": props.dot,
+          "content": props.badge
+        }, props.badgeProps), {
+          default: slots.icon
+        });
+      }
+      if (props.icon) {
+        return _createVNode(Icon, {
+          "dot": props.dot,
+          "name": props.icon,
+          "size": parent.props.iconSize,
+          "badge": props.badge,
+          "class": bem("icon"),
+          "color": props.iconColor,
+          "badgeProps": props.badgeProps,
+          "classPrefix": props.iconPrefix
+        }, null);
+      }
+    };
+    const renderText = () => {
+      if (slots.text) {
+        return slots.text();
+      }
+      if (props.text) {
+        return _createVNode("span", {
+          "class": bem("text")
+        }, [props.text]);
+      }
+    };
+    const renderContent = () => {
+      if (slots.default) {
+        return slots.default();
+      }
+      return [renderIcon(), renderText()];
+    };
+    return () => {
+      const {
+        center,
+        border,
+        square,
+        gutter,
+        reverse,
+        direction,
+        clickable
+      } = parent.props;
+      const classes = [bem("content", [direction, {
+        center,
+        square,
+        reverse,
+        clickable,
+        surround: border && gutter
+      }]), {
+        [BORDER]: border
+      }];
+      return _createVNode("div", {
+        "class": [bem({
+          square
+        })],
+        "style": rootStyle.value
+      }, [_createVNode("div", {
+        "role": clickable ? "button" : void 0,
+        "class": classes,
+        "style": contentStyle.value,
+        "tabindex": clickable ? 0 : void 0,
+        "onClick": route
+      }, [renderContent()])]);
+    };
+  }
+});
+export {
+  stdin_default as default,
+  gridItemProps
+};

package/es/grid-item/index.css

@@ -0,0 +1 @@
+:root{--zt-grid-item-content-padding: var(--zt-padding-md) var(--zt-padding-xs);--zt-grid-item-content-background: var(--zt-background-card);--zt-grid-item-content-active-color: var(--zt-active-color);--zt-grid-item-icon-size: 28px;--zt-grid-item-text-color: var(--zt-text-color);--zt-grid-item-text-font-size: var(--zt-font-size-sm)}.zt-grid-item{position:relative;box-sizing:border-box}.zt-grid-item--square{height:0}.zt-grid-item__icon{font-size:var(--zt-grid-item-icon-size)}.zt-grid-item__text{color:var(--zt-grid-item-text-color);font-size:var(--zt-grid-item-text-font-size);line-height:1.5;word-break:break-all}.zt-grid-item__icon+.zt-grid-item__text{margin-top:var(--zt-padding-xs)}.zt-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--zt-grid-item-content-padding);background:var(--zt-grid-item-content-background)}.zt-grid-item__content:after{z-index:1;border-width:0 var(--zt-border-width) var(--zt-border-width) 0}.zt-grid-item__content--square{position:absolute;top:0;right:0;left:0}.zt-grid-item__content--center{align-items:center;justify-content:center}.zt-grid-item__content--horizontal{flex-direction:row}.zt-grid-item__content--horizontal .zt-grid-item__text{margin:0 0 0 var(--zt-padding-xs)}.zt-grid-item__content--reverse{flex-direction:column-reverse}.zt-grid-item__content--reverse .zt-grid-item__text{margin:0 0 var(--zt-padding-xs)}.zt-grid-item__content--horizontal.zt-grid-item__content--reverse{flex-direction:row-reverse}.zt-grid-item__content--horizontal.zt-grid-item__content--reverse .zt-grid-item__text{margin:0 var(--zt-padding-xs) 0 0}.zt-grid-item__content--surround:after{border-width:var(--zt-border-width)}.zt-grid-item__content--clickable{cursor:pointer}.zt-grid-item__content--clickable:active{background-color:var(--zt-grid-item-content-active-color)}

package/es/grid-item/index.d.ts

@@ -0,0 +1,36 @@
+export declare const GridItem: import("../utils").WithInstall<import("vue").DefineComponent<{
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    text: StringConstructor;
+    icon: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
+    badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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;
+    text: StringConstructor;
+    icon: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
+    badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
+}>>, {
+    replace: boolean;
+    dot: boolean;
+}>>;
+export default GridItem;
+export { gridItemProps } from './GridItem';
+export type { GridItemProps } from './GridItem';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtGridItem: typeof GridItem;
+    }
+}

package/es/grid-item/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _GridItem from "./GridItem.mjs";
+const GridItem = withInstall(_GridItem);
+var stdin_default = GridItem;
+import { gridItemProps } from "./GridItem.mjs";
+export {
+  GridItem,
+  stdin_default as default,
+  gridItemProps
+};

package/es/grid-item/style/index.d.ts

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

package/es/grid-item/style/index.mjs

@@ -0,0 +1,5 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../grid/index.css";
+import "../index.css";

package/es/icon/Icon.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     color: StringConstructor;
     badgeProps: PropType<Partial<BadgeProps>>;
     classPrefix: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     dot: BooleanConstructor;
     tag: {
         type: PropType<keyof HTMLElementTagNameMap>;

package/es/icon/config.mjs

@@ -58,6 +58,13 @@ var stdin_default = {
   },
   all: [
     "stop-r",
+    "back",
+    "home",
+    "message",
+    "me",
+    "contact",
+    "tab-default",
+    "down",
     "site",
     "time-interval",
     "play-r",
@@ -73,7 +80,7 @@ var stdin_default = {
     "question-r",
     "microphone-in-talk",
     "setting",
-    "hompage-person-s",
+    "homepage-person-s",
     "department",
     "copy",
     "sweep",
@@ -131,7 +138,8 @@ var stdin_default = {
     "minus-s",
     "success",
     "volume-off",
-    "expand"
+    "expand",
+    "turn-off"
   ]
 };
 export {