zartui 0.1.113 → 3.0.1

package/es/rate/Rate.mjs

@@ -0,0 +1,217 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent, ref } from "vue";
+import { addUnit, truthProp, numericProp, preventDefault, makeStringProp, makeNumberProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useRect, useCustomFieldValue } from "@zartui/use";
+import { useRefs } from "../composables/use-refs.mjs";
+import { useTouch } from "../composables/use-touch.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("rate");
+function getRateStatus(value, index, allowHalf, readonly) {
+  if (value >= index) {
+    return {
+      status: "full",
+      value: 1
+    };
+  }
+  if (value + 0.5 >= index && allowHalf && !readonly) {
+    return {
+      status: "half",
+      value: 0.5
+    };
+  }
+  if (value + 1 >= index && allowHalf && readonly) {
+    const cardinal = 10 ** 10;
+    return {
+      status: "half",
+      value: Math.round((value - index + 1) * cardinal) / cardinal
+    };
+  }
+  return {
+    status: "void",
+    value: 0
+  };
+}
+const rateProps = {
+  size: numericProp,
+  icon: makeStringProp("star"),
+  color: String,
+  count: makeNumericProp(5),
+  gutter: numericProp,
+  readonly: Boolean,
+  disabled: Boolean,
+  voidIcon: makeStringProp("star"),
+  allowHalf: Boolean,
+  voidColor: String,
+  touchable: truthProp,
+  iconPrefix: String,
+  modelValue: makeNumberProp(0),
+  disabledColor: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: rateProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const touch = useTouch();
+    const [itemRefs, setItemRefs] = useRefs();
+    const groupRef = ref();
+    const untouchable = () => props.readonly || props.disabled || !props.touchable;
+    const list = computed(() => Array(+props.count).fill("").map((_, i) => getRateStatus(props.modelValue, i + 1, props.allowHalf, props.readonly)));
+    let ranges;
+    let groupRefRect;
+    let minRectTop = Number.MAX_SAFE_INTEGER;
+    let maxRectTop = Number.MIN_SAFE_INTEGER;
+    const updateRanges = () => {
+      groupRefRect = useRect(groupRef);
+      const rects = itemRefs.value.map(useRect);
+      ranges = [];
+      rects.forEach((rect, index) => {
+        minRectTop = Math.min(rect.top, minRectTop);
+        maxRectTop = Math.max(rect.top, maxRectTop);
+        if (props.allowHalf) {
+          ranges.push({
+            score: index + 0.5,
+            left: rect.left,
+            top: rect.top,
+            height: rect.height
+          }, {
+            score: index + 1,
+            left: rect.left + rect.width / 2,
+            top: rect.top,
+            height: rect.height
+          });
+        } else {
+          ranges.push({
+            score: index + 1,
+            left: rect.left,
+            top: rect.top,
+            height: rect.height
+          });
+        }
+      });
+    };
+    const getScoreByPosition = (x, y) => {
+      for (let i = ranges.length - 1; i > 0; i--) {
+        if (y >= groupRefRect.top && y <= groupRefRect.bottom) {
+          if (x > ranges[i].left && y >= ranges[i].top && y <= ranges[i].top + ranges[i].height) {
+            return ranges[i].score;
+          }
+        } else {
+          const curTop = y < groupRefRect.top ? minRectTop : maxRectTop;
+          if (x > ranges[i].left && ranges[i].top === curTop) {
+            return ranges[i].score;
+          }
+        }
+      }
+      return props.allowHalf ? 0.5 : 1;
+    };
+    const select = (index) => {
+      if (!props.disabled && !props.readonly && index !== props.modelValue) {
+        emit("update:modelValue", index);
+        emit("change", index);
+      }
+    };
+    const onTouchStart = (event) => {
+      if (untouchable()) {
+        return;
+      }
+      touch.start(event);
+      updateRanges();
+    };
+    const onTouchMove = (event) => {
+      if (untouchable()) {
+        return;
+      }
+      touch.move(event);
+      if (touch.isHorizontal()) {
+        const {
+          clientX,
+          clientY
+        } = event.touches[0];
+        preventDefault(event);
+        select(getScoreByPosition(clientX, clientY));
+      }
+    };
+    const renderStar = (item, index) => {
+      const {
+        icon,
+        size,
+        color,
+        count,
+        gutter,
+        voidIcon,
+        disabled,
+        voidColor,
+        allowHalf,
+        iconPrefix,
+        disabledColor
+      } = props;
+      const score = index + 1;
+      const isFull = item.status === "full";
+      const isVoid = item.status === "void";
+      const renderHalf = allowHalf && item.value > 0 && item.value < 1;
+      let style;
+      if (gutter && score !== +count) {
+        style = {
+          paddingRight: addUnit(gutter)
+        };
+      }
+      const onClickItem = (event) => {
+        updateRanges();
+        select(allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score);
+      };
+      return _createVNode("div", {
+        "key": index,
+        "ref": setItemRefs(index),
+        "role": "radio",
+        "style": style,
+        "class": bem("item"),
+        "tabindex": disabled ? void 0 : 0,
+        "aria-setsize": count,
+        "aria-posinset": score,
+        "aria-checked": !isVoid,
+        "onClick": onClickItem
+      }, [_createVNode(Icon, {
+        "size": size,
+        "name": isFull ? icon : voidIcon,
+        "class": bem("icon", {
+          disabled,
+          full: isFull
+        }),
+        "color": disabled ? disabledColor : isFull ? color : voidColor,
+        "classPrefix": iconPrefix
+      }, null), renderHalf && _createVNode(Icon, {
+        "size": size,
+        "style": {
+          width: item.value + "em"
+        },
+        "name": isVoid ? voidIcon : icon,
+        "class": bem("icon", ["half", {
+          disabled,
+          full: !isVoid
+        }]),
+        "color": disabled ? disabledColor : isVoid ? voidColor : color,
+        "classPrefix": iconPrefix
+      }, null)]);
+    };
+    useCustomFieldValue(() => props.modelValue);
+    return () => _createVNode("div", {
+      "ref": groupRef,
+      "role": "radiogroup",
+      "class": bem({
+        readonly: props.readonly,
+        disabled: props.disabled
+      }),
+      "tabindex": props.disabled ? void 0 : 0,
+      "aria-disabled": props.disabled,
+      "aria-readonly": props.readonly,
+      "onTouchstart": onTouchStart,
+      "onTouchmove": onTouchMove
+    }, [list.value.map(renderStar)]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/rate/index.css

@@ -1 +1 @@
-.zt-rate{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;cursor:pointer;-webkit-user-select:none;user-select:none}.zt-rate__item{position:relative}.zt-rate__item:not(:last-child){padding-right:4px}.zt-rate__icon{display:block;width:1em;color:rgba(0,0,0,.2);font-size:20px}.zt-rate__icon--half{position:absolute;top:0;left:0;width:.5em;overflow:hidden}.zt-rate__icon--full{color:#ffcd23}.zt-rate__icon--disabled{color:#c8c9cc}.zt-rate--disabled{cursor:not-allowed}.zt-rate--readonly{cursor:default}
+body{--zt-rate-icon-size: 20px;--zt-rate-icon-gutter: var(--zt-padding-base);--zt-rate-icon-void-color: var(--zt-gray-5);--zt-rate-icon-full-color: var(--zt-yellow);--zt-rate-icon-disabled-color: var(--zt-gray-5)}.zt-rate{cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;display:inline-flex;align-items:center}.zt-rate__item{position:relative}.zt-rate__item:not(:last-child){padding-right:var(--zt-rate-icon-gutter)}.zt-rate__icon{display:block;width:1em;color:var(--zt-rate-icon-void-color);font-size:var(--zt-rate-icon-size)}.zt-rate__icon--half{position:absolute;top:0;left:0;overflow:hidden}.zt-rate__icon--full{color:var(--zt-rate-icon-full-color)}.zt-rate__icon--disabled{color:var(--zt-rate-icon-disabled-color)}.zt-rate--disabled{cursor:not-allowed}.zt-rate--readonly{cursor:default}

package/es/rate/index.d.ts

@@ -0,0 +1,80 @@
+export declare const Rate: import("../utils").WithInstall<import("vue").DefineComponent<{
+    size: (NumberConstructor | StringConstructor)[];
+    icon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    color: StringConstructor;
+    count: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    voidIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    allowHalf: BooleanConstructor;
+    voidColor: StringConstructor;
+    touchable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    iconPrefix: StringConstructor;
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabledColor: StringConstructor;
+}, () => 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)[];
+    icon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    color: StringConstructor;
+    count: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    voidIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    allowHalf: BooleanConstructor;
+    voidColor: StringConstructor;
+    touchable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    iconPrefix: StringConstructor;
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabledColor: StringConstructor;
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    icon: string;
+    modelValue: number;
+    count: string | number;
+    readonly: boolean;
+    voidIcon: string;
+    allowHalf: boolean;
+    touchable: boolean;
+}>>;
+export default Rate;
+export type { RateProps } from './Rate';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtRate: typeof Rate;
+    }
+}

package/es/rate/index.mjs

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

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

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

package/es/rate/style/index.mjs

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

package/es/row/Row.d.ts

@@ -0,0 +1,64 @@
+import { PropType, ComputedRef, InjectionKey, ExtractPropTypes } from 'vue';
+export declare type RowSpaces = {
+    left?: number;
+    right: number;
+}[];
+export declare type RowProvide = {
+    spaces: ComputedRef<RowSpaces>;
+};
+export declare const ROW_KEY: InjectionKey<RowProvide>;
+export declare type RowAlign = 'top' | 'center' | 'bottom';
+export declare type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+declare const rowProps: {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    align: PropType<RowAlign>;
+    gutter: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    justify: PropType<RowJustify>;
+};
+export declare type RowProps = ExtractPropTypes<typeof rowProps>;
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    align: PropType<RowAlign>;
+    gutter: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    justify: PropType<RowJustify>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    align: PropType<RowAlign>;
+    gutter: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    justify: PropType<RowJustify>;
+}>>, {
+    tag: keyof HTMLElementTagNameMap;
+    wrap: boolean;
+    gutter: string | number;
+}>;
+export default _default;

package/es/row/Row.mjs

@@ -0,0 +1,91 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { truthProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@zartui/use";
+const [name, bem] = createNamespace("row");
+const ROW_KEY = Symbol(name);
+const rowProps = {
+  tag: makeStringProp("div"),
+  wrap: truthProp,
+  align: String,
+  gutter: makeNumericProp(0),
+  justify: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: rowProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      children,
+      linkChildren
+    } = useChildren(ROW_KEY);
+    const groups = computed(() => {
+      const groups2 = [[]];
+      let totalSpan = 0;
+      children.forEach((child, index) => {
+        totalSpan += Number(child.span);
+        if (totalSpan > 24) {
+          groups2.push([index]);
+          totalSpan -= 24;
+        } else {
+          groups2[groups2.length - 1].push(index);
+        }
+      });
+      return groups2;
+    });
+    const spaces = computed(() => {
+      const gutter = Number(props.gutter);
+      const spaces2 = [];
+      if (!gutter) {
+        return spaces2;
+      }
+      groups.value.forEach((group) => {
+        const averagePadding = gutter * (group.length - 1) / group.length;
+        group.forEach((item, index) => {
+          if (index === 0) {
+            spaces2.push({
+              right: averagePadding
+            });
+          } else {
+            const left = gutter - spaces2[item - 1].right;
+            const right = averagePadding - left;
+            spaces2.push({
+              left,
+              right
+            });
+          }
+        });
+      });
+      return spaces2;
+    });
+    linkChildren({
+      spaces
+    });
+    return () => {
+      const {
+        tag,
+        wrap,
+        align,
+        justify
+      } = props;
+      return _createVNode(tag, {
+        "class": bem({
+          [`align-${align}`]: align,
+          [`justify-${justify}`]: justify,
+          nowrap: !wrap
+        })
+      }, {
+        default: () => {
+          var _a;
+          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+        }
+      });
+    };
+  }
+});
+export {
+  ROW_KEY,
+  stdin_default as default
+};

package/es/row/index.css

@@ -1 +1 @@
-.zt-row::after{display:table;clear:both;content:''}.zt-row--flex{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.zt-row--flex::after{display:none}.zt-row--justify-center{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.zt-row--justify-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.zt-row--justify-space-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.zt-row--justify-space-around{-webkit-justify-content:space-around;justify-content:space-around}.zt-row--align-center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-row--align-bottom{-webkit-box-align:end;-webkit-align-items:flex-end;align-items:flex-end}
+.zt-row{display:flex;flex-wrap:wrap}.zt-row--nowrap{flex-wrap:nowrap}.zt-row--justify-center{justify-content:center}.zt-row--justify-end{justify-content:flex-end}.zt-row--justify-space-between{justify-content:space-between}.zt-row--justify-space-around{justify-content:space-around}.zt-row--align-center{align-items:center}.zt-row--align-bottom{align-items:flex-end}

package/es/row/index.d.ts

@@ -0,0 +1,42 @@
+export declare const Row: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    align: import("vue").PropType<import("./Row").RowAlign>;
+    gutter: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    justify: import("vue").PropType<import("./Row").RowJustify>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    align: import("vue").PropType<import("./Row").RowAlign>;
+    gutter: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    justify: import("vue").PropType<import("./Row").RowJustify>;
+}>>, {
+    tag: keyof HTMLElementTagNameMap;
+    wrap: boolean;
+    gutter: string | number;
+}>>;
+export default Row;
+export type { RowProps, RowAlign, RowJustify } from './Row';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtRow: typeof Row;
+    }
+}

package/es/row/index.mjs

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

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

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

package/es/row/style/index.mjs

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