@veltra/desktop 1.0.0

package/dist/components/grid/breakpoint.js

@@ -0,0 +1,46 @@
+const points = [
+	[578, "xs"],
+	[960, "sm"],
+	[1366, "md"],
+	[1920, "lg"],
+	[Infinity, "xl"]
+];
+/**
+* 获取容器断点
+* @param width
+*/
+function getContainerBreakpoint(width) {
+	for (let i = 0; i < points.length; i++) {
+		const point = points[i];
+		if (width < point[0]) return {
+			name: point[1],
+			level: i + 1
+		};
+	}
+	return {
+		name: "xl",
+		level: 5
+	};
+}
+/**
+* 获取断点对应的列数
+* @param colConf 断点配置
+* @param breakpoint 断点
+*/
+function getBreakpointCols(colConf, breakpoint) {
+	if (!breakpoint) return 24;
+	const { name, level } = breakpoint;
+	const cols = colConf[name];
+	if (cols !== void 0) return cols;
+	if (level === 5) return colConf.default ?? 24;
+	const highLevelPoints = points.slice(level - 1);
+	for (let i = 0; i < highLevelPoints.length; i++) {
+		const pointName = highLevelPoints[i][1];
+		if (colConf[pointName]) return colConf[pointName];
+	}
+	return 24;
+}
+//#endregion
+export { getBreakpointCols, getContainerBreakpoint };
+
+//# sourceMappingURL=breakpoint.js.map

package/dist/components/grid/breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint.js","names":[],"sources":["../../../src/components/grid/breakpoint.ts"],"sourcesContent":["import type { BreakpointName, BreakCols, Breakpoint } from '../../types'\n\nexport const DEFAULT_COLS = 24\n\nconst points: [number, BreakpointName][] = [\n  [578, 'xs'],\n  [960, 'sm'],\n  [1366, 'md'],\n  [1920, 'lg'],\n  [Infinity, 'xl']\n]\n\n/**\n * 获取容器断点\n * @param width\n */\nexport function getContainerBreakpoint(width: number): Breakpoint {\n  for (let i = 0; i < points.length; i++) {\n    const point = points[i]!\n    if (width < point[0]) {\n      return { name: point[1], level: i + 1 }\n    }\n  }\n  return { name: 'xl', level: 5 }\n}\n\n/**\n * 获取断点对应的列数\n * @param colConf 断点配置\n * @param breakpoint 断点\n */\nexport function getBreakpointCols(colConf: BreakCols, breakpoint?: Breakpoint): number {\n  if (!breakpoint) return DEFAULT_COLS\n  const { name, level } = breakpoint\n  const cols = colConf[name]\n  if (cols !== undefined) return cols\n\n  if (level === 5) return colConf.default ?? DEFAULT_COLS\n\n  // 尝试寻找高级断点\n  const highLevelPoints = points.slice(level - 1)\n  for (let i = 0; i < highLevelPoints.length; i++) {\n    const pointName = highLevelPoints[i]![1]\n    if (colConf[pointName]) {\n      return colConf[pointName]\n    }\n  }\n  return DEFAULT_COLS\n}\n"],"mappings":"AAIA,MAAM,SAAqC;CACzC,CAAC,KAAK,KAAK;CACX,CAAC,KAAK,KAAK;CACX,CAAC,MAAM,KAAK;CACZ,CAAC,MAAM,KAAK;CACZ,CAAC,UAAU,KAAK;CACjB;;;;;AAMD,SAAgB,uBAAuB,OAA2B;AAChE,MAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;EACtC,MAAM,QAAQ,OAAO;AACrB,MAAI,QAAQ,MAAM,GAChB,QAAO;GAAE,MAAM,MAAM;GAAI,OAAO,IAAI;GAAG;;AAG3C,QAAO;EAAE,MAAM;EAAM,OAAO;EAAG;;;;;;;AAQjC,SAAgB,kBAAkB,SAAoB,YAAiC;AACrF,KAAI,CAAC,WAAY,QAAA;CACjB,MAAM,EAAE,MAAM,UAAU;CACxB,MAAM,OAAO,QAAQ;AACrB,KAAI,SAAS,KAAA,EAAW,QAAO;AAE/B,KAAI,UAAU,EAAG,QAAO,QAAQ,WAAA;CAGhC,MAAM,kBAAkB,OAAO,MAAM,QAAQ,EAAE;AAC/C,MAAK,IAAI,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;EAC/C,MAAM,YAAY,gBAAgB,GAAI;AACtC,MAAI,QAAQ,WACV,QAAO,QAAQ;;AAGnB,QAAA"}

package/dist/components/grid/di.js

@@ -0,0 +1,6 @@
+//#region src/components/grid/di.ts
+const GridDIKey = Symbol("GridDIKey");
+//#endregion
+export { GridDIKey };
+
+//# sourceMappingURL=di.js.map

package/dist/components/grid/di.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/grid/di.ts"],"sourcesContent":["import type { InjectionKey, ShallowReactive, ShallowRef } from 'vue'\n\nimport type { Breakpoint, GridItemProps } from '../../types'\n\nexport interface GridContext {\n  /** 当前断点 */\n  currentBreakpoint: ShallowRef<Breakpoint | undefined>\n  /** 栅格项属性 */\n  gridItemsProps: ShallowReactive<Set<GridItemProps>>\n}\n\nexport const GridDIKey: InjectionKey<GridContext> = Symbol('GridDIKey')\n"],"mappings":";AAWA,MAAa,YAAuC,OAAO,YAAY"}

package/dist/components/grid/grid-item.js

@@ -0,0 +1,48 @@
+import { GridDIKey } from "./di.js";
+import { computed, createBlock, createCommentVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, unref, watch, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/grid/grid-item.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "GridItem",
+	__name: "grid-item",
+	props: {
+		span: {},
+		tag: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const cls = bem("grid-item");
+		const { currentBreakpoint, gridItemsProps } = inject(GridDIKey) ?? {};
+		if (!currentBreakpoint) console.error("GridItem组件仅能在Grid组件中使用");
+		const span = computed(() => {
+			let { span } = props;
+			if (span === void 0) return 1;
+			if (span === "full") return "full";
+			if (typeof span === "number") return span;
+			const breakpoint = currentBreakpoint?.value;
+			if (!breakpoint) return span.default;
+			return span[breakpoint.name] ?? span.default;
+		});
+		const style = computed(() => {
+			return { gridColumn: span.value === "full" ? "1 / -1" : `span ${span.value}` };
+		});
+		watch(() => props.span, (span) => {
+			if (typeof span === "object") gridItemsProps?.add(props);
+			else gridItemsProps?.delete(props);
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return span.value !== 0 ? (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+				key: 0,
+				style: normalizeStyle(style.value),
+				class: normalizeClass(unref(cls).b)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["style", "class"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=grid-item.js.map

package/dist/components/grid/grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.js","names":[],"sources":["../../../src/components/grid/grid-item.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" :style=\"style\" :class=\"cls.b\" v-if=\"span !== 0\">\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\nimport { computed, inject, type CSSProperties, watch } from 'vue'\n\nimport type { GridItemProps } from '../../types'\nimport { GridDIKey } from './di'\n\ndefineOptions({\n  name: 'GridItem'\n})\n\nconst props = withDefaults(defineProps<GridItemProps>(), {\n  tag: 'div'\n})\n\nconst cls = bem('grid-item')\n\nconst { currentBreakpoint, gridItemsProps } = inject(GridDIKey) ?? {}\n\nif (!currentBreakpoint) {\n  console.error('GridItem组件仅能在Grid组件中使用')\n}\n\nconst span = computed<number | 'full'>(() => {\n  let { span } = props\n  if (span === undefined) return 1\n  if (span === 'full') return 'full'\n\n  if (typeof span === 'number') return span\n\n  const breakpoint = currentBreakpoint?.value\n\n  if (!breakpoint) return span.default\n  return span[breakpoint.name] ?? span.default\n})\n\nconst style = computed<CSSProperties>(() => {\n  return {\n    gridColumn: span.value === 'full' ? '1 / -1' : `span ${span.value}`\n  }\n})\n\nwatch(\n  () => props.span,\n  (span) => {\n    if (typeof span === 'object') {\n      gridItemsProps?.add(props)\n    } else {\n      gridItemsProps?.delete(props)\n    }\n  },\n  { immediate: true }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,YAAW;EAE3B,MAAM,EAAE,mBAAmB,mBAAmB,OAAO,UAAU,IAAI,EAAC;AAEpE,MAAI,CAAC,kBACH,SAAQ,MAAM,yBAAwB;EAGxC,MAAM,OAAO,eAAgC;GAC3C,IAAI,EAAE,SAAS;AACf,OAAI,SAAS,KAAA,EAAW,QAAO;AAC/B,OAAI,SAAS,OAAQ,QAAO;AAE5B,OAAI,OAAO,SAAS,SAAU,QAAO;GAErC,MAAM,aAAa,mBAAmB;AAEtC,OAAI,CAAC,WAAY,QAAO,KAAK;AAC7B,UAAO,KAAK,WAAW,SAAS,KAAK;IACtC;EAED,MAAM,QAAQ,eAA8B;AAC1C,UAAO,EACL,YAAY,KAAK,UAAU,SAAS,WAAW,QAAQ,KAAK,SAC9D;IACD;AAED,cACQ,MAAM,OACX,SAAS;AACR,OAAI,OAAO,SAAS,SAClB,iBAAgB,IAAI,MAAK;OAEzB,iBAAgB,OAAO,MAAK;KAGhC,EAAE,WAAW,MAAK,CACpB;;UAzD2D,KAAA,UAAI,KAAA,WAAA,EAA7D,YAEY,wBAFI,QAAA,IAAG,EAAA;;IAAG,OAAK,eAAE,MAAA,MAAK;IAAG,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC;;2BACvC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/grid/grid-item.vue.d.ts

@@ -0,0 +1,21 @@
+import { GridItemProps } from "../../types/grid.js";
+import * as _$vue from "vue";
+
+//#region src/components/grid/grid-item.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<GridItemProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<GridItemProps> & Readonly<{}>, {
+  tag: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=grid-item.vue.d.ts.map

package/dist/components/grid/grid.js

@@ -0,0 +1,75 @@
+import { getBreakpointCols } from "./breakpoint.js";
+import { GridDIKey } from "./di.js";
+import { useResponsive } from "./use-responsive.js";
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, provide, renderSlot, resolveDynamicComponent, unref, useTemplateRef, watch, withCtx } from "vue";
+import { bem, removeStyles, setStyles, withUnit } from "@veltra/utils";
+//#region src/components/grid/grid.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Grid",
+	__name: "grid",
+	props: {
+		cols: {},
+		tag: { default: "div" },
+		gap: {}
+	},
+	emits: ["resize", "breakpoint-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("grid");
+		const gridRef = useTemplateRef("grid");
+		const { currentBreakpoint, gridItemsProps } = useResponsive({
+			props,
+			emit,
+			gridRef
+		});
+		watch([computed(() => {
+			const { gap, cols } = props;
+			const result = {};
+			if (typeof gap === "number") {
+				if (gap > 0) result.rowGap = result.columnGap = gap + "px";
+			} else if (typeof gap === "string") {
+				const [rowGap, columnGap] = gap.split(" ");
+				result.columnGap = withUnit(columnGap || rowGap, "px");
+				result.rowGap = withUnit(rowGap, "px");
+			}
+			const breakpoint = currentBreakpoint.value;
+			switch (typeof cols) {
+				case "number":
+					result.gridTemplateColumns = `repeat(${cols}, minmax(0px, 1fr))`;
+					break;
+				case "function":
+					if (breakpoint) result.gridTemplateColumns = `repeat(${cols(breakpoint)}, minmax(0px, 1fr))`;
+					break;
+				case "object": if (breakpoint) result.gridTemplateColumns = `repeat(${getBreakpointCols(cols, breakpoint)}, minmax(0px, 1fr))`;
+			}
+			return result;
+		}), gridRef], ([styles, dom]) => {
+			if (!dom) return;
+			removeStyles(dom, [
+				"gridTemplateColumns",
+				"columnGap",
+				"rowGap"
+			]);
+			setStyles(dom, styles);
+		});
+		provide(GridDIKey, {
+			currentBreakpoint,
+			gridItemsProps
+		});
+		__expose({ el: gridRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+				class: normalizeClass(unref(cls).b),
+				ref: "grid"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=grid.js.map

package/dist/components/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/grid/grid.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" :class=\"cls.b\" ref=\"grid\">\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem, removeStyles, setStyles, withUnit } from '@veltra/utils'\nimport { type CSSProperties, provide, watch, useTemplateRef, computed } from 'vue'\n\nimport type { GridProps, GridEmits, _GridExposed } from '../../types'\nimport { getBreakpointCols } from './breakpoint'\nimport { GridDIKey } from './di'\nimport { useResponsive } from './use-responsive'\n\ndefineOptions({\n  name: 'Grid'\n})\n\nconst props = withDefaults(defineProps<GridProps>(), {\n  tag: 'div'\n})\n\nconst emit = defineEmits<GridEmits>()\n\nconst cls = bem('grid')\n\nconst gridRef = useTemplateRef<HTMLElement>('grid')\n\nconst { currentBreakpoint, gridItemsProps } = useResponsive({\n  props,\n  emit,\n  gridRef\n})\n\nconst styles = computed(() => {\n  const { gap, cols } = props\n  const result: CSSProperties = {}\n\n  // 间距\n  if (typeof gap === 'number') {\n    if (gap > 0) {\n      result.rowGap = result.columnGap = gap + 'px'\n    }\n  } else if (typeof gap === 'string') {\n    const [rowGap, columnGap] = gap.split(' ')\n    result.columnGap = withUnit(columnGap || rowGap, 'px')\n    result.rowGap = withUnit(rowGap, 'px')\n  }\n\n  const breakpoint = currentBreakpoint.value\n\n  switch (typeof cols) {\n    case 'number':\n      result.gridTemplateColumns = `repeat(${cols}, minmax(0px, 1fr))`\n      break\n    case 'function':\n      if (breakpoint) {\n        result.gridTemplateColumns = `repeat(${cols(breakpoint)}, minmax(0px, 1fr))`\n      }\n      break\n    case 'object':\n      if (breakpoint) {\n        const amount = getBreakpointCols(cols, breakpoint)\n        result.gridTemplateColumns = `repeat(${amount}, minmax(0px, 1fr))`\n      }\n  }\n\n  return result\n})\n\nwatch([styles, gridRef], ([styles, dom]) => {\n  if (!dom) return\n\n  // 重置并移除样式\n  removeStyles(dom, ['gridTemplateColumns', 'columnGap', 'rowGap'])\n  setStyles(dom, styles)\n})\n\nprovide(GridDIKey, {\n  currentBreakpoint,\n  gridItemsProps\n})\n\ndefineExpose<_GridExposed>({\n  el: gridRef\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAId,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,OAAM;EAEtB,MAAM,UAAU,eAA4B,OAAM;EAElD,MAAM,EAAE,mBAAmB,mBAAmB,cAAc;GAC1D;GACA;GACA;GACD,CAAA;AAsCD,QAAM,CApCS,eAAe;GAC5B,MAAM,EAAE,KAAK,SAAS;GACtB,MAAM,SAAwB,EAAC;AAG/B,OAAI,OAAO,QAAQ;QACb,MAAM,EACR,QAAO,SAAS,OAAO,YAAY,MAAM;cAElC,OAAO,QAAQ,UAAU;IAClC,MAAM,CAAC,QAAQ,aAAa,IAAI,MAAM,IAAG;AACzC,WAAO,YAAY,SAAS,aAAa,QAAQ,KAAI;AACrD,WAAO,SAAS,SAAS,QAAQ,KAAI;;GAGvC,MAAM,aAAa,kBAAkB;AAErC,WAAQ,OAAO,MAAf;IACE,KAAK;AACH,YAAO,sBAAsB,UAAU,KAAK;AAC5C;IACF,KAAK;AACH,SAAI,WACF,QAAO,sBAAsB,UAAU,KAAK,WAAW,CAAC;AAE1D;IACF,KAAK,SACH,KAAI,WAEF,QAAO,sBAAsB,UADd,kBAAkB,MAAM,WAAU,CACH;;AAIpD,UAAO;IACR,EAEc,QAAQ,GAAG,CAAC,QAAQ,SAAS;AAC1C,OAAI,CAAC,IAAK;AAGV,gBAAa,KAAK;IAAC;IAAuB;IAAa;IAAS,CAAA;AAChE,aAAU,KAAK,OAAM;IACtB;AAED,UAAQ,WAAW;GACjB;GACA;GACD,CAAA;AAED,WAA2B,EACzB,IAAI,SACL,CAAA;;uBArFC,YAEY,wBAFI,QAAA,IAAG,EAAA;IAAG,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC;IAAE,KAAI;;2BAC9B,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/grid/grid.vue.d.ts

@@ -0,0 +1,27 @@
+import { Breakpoint, GridProps, _GridExposed } from "../../types/grid.js";
+import * as _$vue from "vue";
+
+//#region src/components/grid/grid.vue.d.ts
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<GridProps, _GridExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  resize: (rect: DOMRect) => any;
+  "breakpoint-change": (breakpoint: Breakpoint) => any;
+}, string, _$vue.PublicProps, Readonly<GridProps> & Readonly<{
+  onResize?: ((rect: DOMRect) => any) | undefined;
+  "onBreakpoint-change"?: ((breakpoint: Breakpoint) => any) | undefined;
+}>, {
+  tag: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=grid.vue.d.ts.map

package/dist/components/grid/index.d.ts

@@ -0,0 +1,2 @@
+import { _default } from "./grid.vue.js";
+import { _default as _default$1 } from "./grid-item.vue.js";

package/dist/components/grid/style.d.ts

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

package/dist/components/grid/style.js

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

package/dist/components/grid/style2.css

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-grid {
+  display: grid;
+}

package/dist/components/grid/use-responsive.js

@@ -0,0 +1,46 @@
+import { getContainerBreakpoint } from "./breakpoint.js";
+import { computed, onBeforeUnmount, shallowReactive, shallowRef, watch } from "vue";
+import { debounce } from "@cat-kit/core";
+//#region src/components/grid/use-responsive.ts
+function useResponsive(options) {
+	const { props, gridRef, emit } = options;
+	const gridItemsProps = shallowReactive(/* @__PURE__ */ new Set());
+	const responsive = computed(() => {
+		return props.cols && typeof props.cols !== "number" || !!gridItemsProps.size;
+	});
+	const currentBreakpoint = shallowRef();
+	let observer;
+	watch([responsive, gridRef], ([responsive, dom]) => {
+		if (!dom) return;
+		observer?.unobserve(dom);
+		observer?.disconnect();
+		observer = void 0;
+		if (!responsive) {
+			currentBreakpoint.value = void 0;
+			return;
+		}
+		observer = new ResizeObserver(debounce(([entry]) => {
+			const target = entry.target;
+			emit("resize", target.getBoundingClientRect());
+			const breakpoint = getContainerBreakpoint(target.offsetWidth);
+			const prev = currentBreakpoint.value;
+			if (prev !== void 0 && prev.name === breakpoint.name && prev.level === breakpoint.level) return;
+			currentBreakpoint.value = breakpoint;
+			emit("breakpoint-change", breakpoint);
+		}, 0));
+		observer.observe(dom);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		gridRef.value && observer?.unobserve(gridRef.value);
+		observer?.disconnect();
+	});
+	return {
+		responsive,
+		gridItemsProps,
+		currentBreakpoint
+	};
+}
+//#endregion
+export { useResponsive };
+
+//# sourceMappingURL=use-responsive.js.map

package/dist/components/grid/use-responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-responsive.js","names":[],"sources":["../../../src/components/grid/use-responsive.ts"],"sourcesContent":["import { debounce } from '@cat-kit/core'\nimport type { Undef } from '@veltra/utils/types/helper'\nimport {\n  computed,\n  shallowRef,\n  watch,\n  type ShallowRef,\n  shallowReactive,\n  onBeforeUnmount,\n  type ComputedRef\n} from 'vue'\n\nimport type { Breakpoint, GridEmits, GridItemProps, GridProps } from '../../types'\nimport { getContainerBreakpoint } from './breakpoint'\n\ninterface ResponsiveOptions {\n  props: GridProps\n  emit: GridEmits\n  /** 栅格容器模板引用 */\n  gridRef: ShallowRef<HTMLElement | null>\n}\n\ninterface UseResponsiveReturned {\n  responsive: ComputedRef<boolean>\n  gridItemsProps: Set<GridItemProps>\n  currentBreakpoint: ShallowRef<Breakpoint | undefined>\n}\n\nexport function useResponsive(options: ResponsiveOptions): UseResponsiveReturned {\n  const { props, gridRef, emit } = options\n\n  const gridItemsProps = shallowReactive<Set<GridItemProps>>(new Set())\n\n  const responsive = computed(() => {\n    return (props.cols && typeof props.cols !== 'number') || !!gridItemsProps.size\n  })\n\n  const currentBreakpoint = shallowRef<Breakpoint>()\n\n  let observer: Undef<ResizeObserver>\n\n  watch(\n    [responsive, gridRef],\n    ([responsive, dom]) => {\n      if (!dom) return\n\n      observer?.unobserve(dom)\n      observer?.disconnect()\n      observer = undefined\n\n      if (!responsive) {\n        currentBreakpoint.value = undefined\n        return\n      }\n\n      observer = new ResizeObserver(\n        debounce(([entry]) => {\n          const target = entry!.target as HTMLElement\n          const rect = target.getBoundingClientRect()\n          emit('resize', rect)\n          const breakpoint = getContainerBreakpoint(target.offsetWidth)\n          const prev = currentBreakpoint.value\n          if (\n            prev !== undefined &&\n            prev.name === breakpoint.name &&\n            prev.level === breakpoint.level\n          ) {\n            return\n          }\n          currentBreakpoint.value = breakpoint\n          emit('breakpoint-change', breakpoint)\n        }, 0)\n      )\n      observer.observe(dom)\n    },\n    { immediate: true }\n  )\n\n  onBeforeUnmount(() => {\n    gridRef.value && observer?.unobserve(gridRef.value)\n    observer?.disconnect()\n  })\n\n  return { responsive, gridItemsProps, currentBreakpoint }\n}\n"],"mappings":";;;;AA4BA,SAAgB,cAAc,SAAmD;CAC/E,MAAM,EAAE,OAAO,SAAS,SAAS;CAEjC,MAAM,iBAAiB,gCAAoC,IAAI,KAAK,CAAC;CAErE,MAAM,aAAa,eAAe;AAChC,SAAQ,MAAM,QAAQ,OAAO,MAAM,SAAS,YAAa,CAAC,CAAC,eAAe;GAC1E;CAEF,MAAM,oBAAoB,YAAwB;CAElD,IAAI;AAEJ,OACE,CAAC,YAAY,QAAQ,GACpB,CAAC,YAAY,SAAS;AACrB,MAAI,CAAC,IAAK;AAEV,YAAU,UAAU,IAAI;AACxB,YAAU,YAAY;AACtB,aAAW,KAAA;AAEX,MAAI,CAAC,YAAY;AACf,qBAAkB,QAAQ,KAAA;AAC1B;;AAGF,aAAW,IAAI,eACb,UAAU,CAAC,WAAW;GACpB,MAAM,SAAS,MAAO;AAEtB,QAAK,UADQ,OAAO,uBAAuB,CACvB;GACpB,MAAM,aAAa,uBAAuB,OAAO,YAAY;GAC7D,MAAM,OAAO,kBAAkB;AAC/B,OACE,SAAS,KAAA,KACT,KAAK,SAAS,WAAW,QACzB,KAAK,UAAU,WAAW,MAE1B;AAEF,qBAAkB,QAAQ;AAC1B,QAAK,qBAAqB,WAAW;KACpC,EAAE,CACN;AACD,WAAS,QAAQ,IAAI;IAEvB,EAAE,WAAW,MAAM,CACpB;AAED,uBAAsB;AACpB,UAAQ,SAAS,UAAU,UAAU,QAAQ,MAAM;AACnD,YAAU,YAAY;GACtB;AAEF,QAAO;EAAE;EAAY;EAAgB;EAAmB"}

package/dist/components/grid-input/grid-input.js

@@ -0,0 +1,104 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, normalizeClass, openBlock, ref, renderList, toDisplayString, unref } from "vue";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+//#region src/components/grid-input/grid-input.vue
+const _hoisted_1 = [
+	"onKeydown",
+	"onFocus",
+	"onBlur"
+];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "GridInput",
+	__name: "grid-input",
+	props: {
+		modelValue: {},
+		length: { default: 6 },
+		zero: {
+			type: Boolean,
+			default: false
+		},
+		separator: { default: "-" }
+	},
+	emits: ["update:modelValue", "input"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const { size } = useFallbackProps([props], { size: "default" });
+		const cls = bem("grid-input");
+		const _numberReg = computed(() => props.zero ? /^[0-9]$/ : /^[1-9]$/);
+		const valueArray = ref([]);
+		const position = ref(-1);
+		const blur = ref(false);
+		const instance = getCurrentInstance();
+		const focus = async (index) => {
+			if (index === void 0) {
+				focus(position.value);
+				return;
+			}
+			if (index !== 0 && index > valueArray.value.length) index = valueArray.value.length;
+			position.value = index;
+			(((instance?.refs)?.items)?.[index])?.focus();
+			blur.value = false;
+		};
+		const changeValue = (value, index) => {
+			if (position.value === props.length) return;
+			if (valueArray.value[index]) valueArray.value.splice(index, 1, value);
+			else if (index === valueArray.value.length) valueArray.value.push(value);
+			else return;
+			position.value++;
+			focus();
+			emit("input", valueArray.value.filter((v) => v).join(props.separator));
+		};
+		const baseOperation = {
+			Backspace: (value, index) => {
+				if (value) valueArray.value.splice(index, 1);
+				else if (index - 1 >= 0) valueArray.value.splice(index - 1, 1);
+				if (index !== 0) focus(index - 1);
+				emit("input", valueArray.value.filter((v) => v).join(props.separator));
+			},
+			ArrowLeft: (value, index) => {
+				if (index === 0) return;
+				focus(index - 1);
+			},
+			ArrowRight: (value, index) => {
+				if (index === valueArray.value.length) return;
+				focus(index + 1);
+			}
+		};
+		const onKeydown = (e, value, index) => {
+			if (_numberReg.value.test(e.key)) {
+				changeValue(e.key, index);
+				return;
+			}
+			baseOperation[e.key](value, index);
+		};
+		const clear = () => {
+			while (valueArray.value.length) valueArray.value.pop();
+		};
+		__expose({ clear });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", { class: normalizeClass([unref(cls).b, unref(cls).m(unref(size))]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (_, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: index,
+					tabindex: "0",
+					onKeydown: ($event) => onKeydown($event, valueArray.value[index], index),
+					onFocus: ($event) => focus(index),
+					onBlur: ($event) => index === position.value && (blur.value = true),
+					ref_for: true,
+					ref: "items",
+					class: normalizeClass([unref(cls).e("item"), unref(bem).is("focus", index === position.value && !blur.value)])
+				}, [valueArray.value[index] ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(cls).em("item", "text"))
+				}, toDisplayString(valueArray.value[index]), 3)) : index === position.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(cls).em("item", "cursor"))
+				}, null, 2)) : createCommentVNode("v-if", true)], 42, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=grid-input.js.map

package/dist/components/grid-input/grid-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-input.js","names":[],"sources":["../../../src/components/grid-input/grid-input.vue"],"sourcesContent":["<template>\n  <ul :class=\"[cls.b, cls.m(size)]\">\n    <li\n      v-for=\"(_, index) in length\"\n      :key=\"index\"\n      tabindex=\"0\"\n      @keydown=\"onKeydown($event, valueArray[index]!, index)\"\n      @focus=\"focus(index)\"\n      @blur=\"index === position && (blur = true)\"\n      ref=\"items\"\n      :class=\"[cls.e('item'), bem.is('focus', index === position && !blur)]\"\n    >\n      <span :class=\"cls.em('item', 'text')\" v-if=\"valueArray[index]\">\n        {{ valueArray[index] }}\n      </span>\n\n      <span :class=\"cls.em('item', 'cursor')\" v-else-if=\"index === position\"></span>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, ref, getCurrentInstance } from 'vue'\n\nimport type { GridInputProps, GridInputEmits, GridInputExposed } from '../../types'\n\ndefineOptions({\n  name: 'GridInput'\n})\n\nconst emit = defineEmits<GridInputEmits>()\n\nconst props = withDefaults(defineProps<GridInputProps>(), {\n  length: 6,\n  zero: false,\n  separator: '-'\n})\n\nconst { size } = useFallbackProps([props], {\n  size: 'default'\n})\n\nconst cls = bem('grid-input')\n\nconst _numberReg = computed(() => (props.zero ? /^[0-9]$/ : /^[1-9]$/))\n\nconst valueArray = ref<string[]>([])\n\nconst position = ref<number>(-1)\n\nconst blur = ref<boolean>(false)\n\nconst instance = getCurrentInstance()\n\nconst focus = async (index?: number) => {\n  if (index === undefined) {\n    focus(position.value)\n    return\n  }\n  if (index !== 0 && index > valueArray.value.length) {\n    index = valueArray.value.length\n  }\n  position.value = index\n  const items = (instance?.refs as { items?: unknown })?.items as any\n  let dom = items?.[index]\n  dom?.focus()\n  blur.value = false\n}\n\nconst changeValue = (value: string, index: number) => {\n  if (position.value === props.length) return\n  const currentValue = valueArray.value[index]\n\n  if (currentValue) {\n    valueArray.value.splice(index, 1, value)\n  } else if (index === valueArray.value.length) {\n    valueArray.value.push(value)\n  } else {\n    return\n  }\n  position.value++\n  focus()\n\n  emit('input', valueArray.value.filter((v) => v).join(props.separator))\n}\n\nconst baseOperation = {\n  Backspace: (value: string, index: number) => {\n    if (value) {\n      valueArray.value.splice(index, 1)\n    } else if (index - 1 >= 0) {\n      valueArray.value.splice(index - 1, 1)\n    }\n    if (index !== 0) {\n      focus(index - 1)\n    }\n    emit('input', valueArray.value.filter((v) => v).join(props.separator))\n  },\n  ArrowLeft: (value: string, index: number) => {\n    if (index === 0) return\n    focus(index - 1)\n  },\n  ArrowRight: (value: string, index: number) => {\n    if (index === valueArray.value.length) return\n    focus(index + 1)\n  }\n}\n\nconst onKeydown = (e: any, value: string, index: number) => {\n  if (_numberReg.value.test(e.key)) {\n    changeValue(e.key, index)\n    return\n  }\n  baseOperation[e.key](value, index)\n}\n\nconst clear = () => {\n  while (valueArray.value.length) {\n    valueArray.value.pop()\n  }\n}\n\ndefineExpose<GridInputExposed>({ clear })\n</script>\n"],"mappings":"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"}

package/dist/components/grid-input/grid-input.vue.d.ts

@@ -0,0 +1,20 @@
+import { GridInputProps, _GridInputExposed } from "../../types/grid-input.js";
+import * as _$vue from "vue";
+import * as _$_veltra_utils0 from "@veltra/utils";
+
+//#region src/components/grid-input/grid-input.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<GridInputProps, _$_veltra_utils0.DeconstructValue<_GridInputExposed>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  "update:modelValue": (value: string) => any;
+  input: (value: string) => any;
+}, string, _$vue.PublicProps, Readonly<GridInputProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onInput?: ((value: string) => any) | undefined;
+}>, {
+  length: number;
+  zero: false;
+  separator: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=grid-input.vue.d.ts.map

package/dist/components/grid-input/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./grid-input.vue.js";

package/dist/components/grid-input/style.d.ts

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

package/dist/components/grid-input/style.js

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

package/dist/components/grid-input/style2.css

@@ -0,0 +1,140 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-grid-input--small .u-grid-input__item {
+  width: var(--u-form-component-height-small);
+  height: var(--u-form-component-height-small);
+  line-height: var(--u-form-component-height-small);
+  border: var(--u-border);
+  border-radius: var(--u-gap-small);
+  outline: none;
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+.u-grid-input--small .u-grid-input__item:not(:last-child) {
+  margin-right: var(--u-gap-small);
+}
+.u-grid-input--small .u-grid-input__item.is-focus {
+  border-color: var(--u-color-primary);
+}
+@keyframes fade {
+  0% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.u-grid-input--small .u-grid-input__item.is-focus .u-grid-input__item--text {
+  color: var(--u-color-primary);
+  animation: fade 1s linear infinite alternate;
+}
+.u-grid-input--small .u-grid-input__item.is-focus .u-grid-input__item--cursor {
+  position: absolute;
+  width: 2px;
+  height: calc(var(--u-form-component-height-small) / 2);
+  background: var(--u-color-primary);
+  content: "";
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fade 1s linear infinite alternate;
+}
+.u-grid-input--default .u-grid-input__item {
+  width: var(--u-form-component-height-default);
+  height: var(--u-form-component-height-default);
+  line-height: var(--u-form-component-height-default);
+  border: var(--u-border);
+  border-radius: var(--u-gap-default);
+  outline: none;
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+.u-grid-input--default .u-grid-input__item:not(:last-child) {
+  margin-right: var(--u-gap-default);
+}
+.u-grid-input--default .u-grid-input__item.is-focus {
+  border-color: var(--u-color-primary);
+}
+@keyframes fade {
+  0% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.u-grid-input--default .u-grid-input__item.is-focus .u-grid-input__item--text {
+  color: var(--u-color-primary);
+  animation: fade 1s linear infinite alternate;
+}
+.u-grid-input--default .u-grid-input__item.is-focus .u-grid-input__item--cursor {
+  position: absolute;
+  width: 2px;
+  height: calc(var(--u-form-component-height-default) / 2);
+  background: var(--u-color-primary);
+  content: "";
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fade 1s linear infinite alternate;
+}
+.u-grid-input--large .u-grid-input__item {
+  width: var(--u-form-component-height-large);
+  height: var(--u-form-component-height-large);
+  line-height: var(--u-form-component-height-large);
+  border: var(--u-border);
+  border-radius: var(--u-gap-large);
+  outline: none;
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+.u-grid-input--large .u-grid-input__item:not(:last-child) {
+  margin-right: var(--u-gap-large);
+}
+.u-grid-input--large .u-grid-input__item.is-focus {
+  border-color: var(--u-color-primary);
+}
+@keyframes fade {
+  0% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.u-grid-input--large .u-grid-input__item.is-focus .u-grid-input__item--text {
+  color: var(--u-color-primary);
+  animation: fade 1s linear infinite alternate;
+}
+.u-grid-input--large .u-grid-input__item.is-focus .u-grid-input__item--cursor {
+  position: absolute;
+  width: 2px;
+  height: calc(var(--u-form-component-height-large) / 2);
+  background: var(--u-color-primary);
+  content: "";
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fade 1s linear infinite alternate;
+}