@touchvue/ui 1.0.0-beta.46 → 1.0.0-beta.48

package/lib/packages/hooks/useDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.js","sources":["../../../../packages/hooks/useDevice.ts"],"sourcesContent":["import { ref, computed, onMounted, onUnmounted } from 'vue';\nimport { getMedia } from '@touchvue/utils';\n\n/**\n * 设备类型\n */\nexport type DeviceType = 'pc' | 'pad' | 'phone';\n\n/**\n * 全局设备检测管理器\n * 使用单例模式避免重复注册resize事件\n */\nclass DeviceManager {\n  private static instance: DeviceManager;\n  private deviceType = ref<DeviceType>(getMedia());\n  private listeners = new Set<() => void>();\n  private resizeHandler: (() => void) | null = null;\n\n  private constructor() {\n    this.initResizeListener();\n  }\n\n  static getInstance(): DeviceManager {\n    if (!DeviceManager.instance) {\n      DeviceManager.instance = new DeviceManager();\n    }\n    return DeviceManager.instance;\n  }\n\n  private initResizeListener() {\n    if (typeof window !== 'undefined') {\n      this.resizeHandler = () => {\n        const newDeviceType = getMedia();\n        if (this.deviceType.value !== newDeviceType) {\n          this.deviceType.value = newDeviceType;\n          // 通知所有监听器\n          this.listeners.forEach(listener => listener());\n        }\n      };\n      window.addEventListener('resize', this.resizeHandler);\n    }\n  }\n\n  getDeviceType() {\n    return this.deviceType;\n  }\n\n  addListener(listener: () => void) {\n    this.listeners.add(listener);\n  }\n\n  removeListener(listener: () => void) {\n    this.listeners.delete(listener);\n\n    // 如果没有监听器了，移除resize事件\n    if (this.listeners.size === 0 && this.resizeHandler && typeof window !== 'undefined') {\n      window.removeEventListener('resize', this.resizeHandler);\n      this.resizeHandler = null;\n    }\n  }\n\n  destroy() {\n    if (this.resizeHandler && typeof window !== 'undefined') {\n      window.removeEventListener('resize', this.resizeHandler);\n    }\n    this.listeners.clear();\n    this.resizeHandler = null;\n  }\n}\n\n/**\n * 设备检测 Hook\n * 提供响应式的设备类型判断，替代 Vue2 中的 $phone、$pc、$pad\n * 使用单例模式避免重复注册resize事件监听器\n */\nexport function useDevice() {\n  const manager = DeviceManager.getInstance();\n  const deviceType = manager.getDeviceType();\n\n  // 计算属性：是否为手机\n  const isPhone = computed(() => deviceType.value === 'phone');\n\n  // 计算属性：是否为平板\n  const isPad = computed(() => deviceType.value === 'pad');\n\n  // 计算属性：是否为PC\n  const isPc = computed(() => deviceType.value === 'pc');\n\n  // 计算属性：是否为移动设备（手机或平板）\n  const isMobile = computed(() => deviceType.value === 'phone' || deviceType.value === 'pad');\n\n  // 更新设备类型的回调\n  const updateCallback = () => {\n    // 这里不需要做任何事情，因为deviceType是响应式的\n    // 当manager更新deviceType时，所有计算属性会自动更新\n  };\n\n  // 手动更新设备类型\n  const updateDeviceType = () => {\n    const newDeviceType = getMedia();\n    if (deviceType.value !== newDeviceType) {\n      // 直接更新manager中的deviceType\n      (deviceType as any).value = newDeviceType;\n    }\n  };\n\n  // 组件挂载时添加监听器\n  onMounted(() => {\n    manager.addListener(updateCallback);\n  });\n\n  // 组件卸载时移除监听器\n  onUnmounted(() => {\n    manager.removeListener(updateCallback);\n  });\n\n  return {\n    // 设备类型（响应式）\n    deviceType,\n\n    // 响应式判断\n    isPhone,\n    isPad,\n    isPc,\n    isMobile,\n\n    // 手动更新设备类型\n    updateDeviceType,\n  };\n}\n\n/**\n * 获取当前设备类型（非响应式）\n * @returns 设备类型字符串\n */\nexport function getDeviceType(): DeviceType {\n  return getMedia();\n}\n\n/**\n * 判断是否为手机设备（非响应式）\n * @returns 是否为手机\n */\nexport function isPhoneDevice(): boolean {\n  return getMedia() === 'phone';\n}\n\n/**\n * 判断是否为平板设备（非响应式）\n * @returns 是否为平板\n */\nexport function isPadDevice(): boolean {\n  return getMedia() === 'pad';\n}\n\n/**\n * 判断是否为PC设备（非响应式）\n * @returns 是否为PC\n */\nexport function isPcDevice(): boolean {\n  return getMedia() === 'pc';\n}\n\n/**\n * 判断是否为移动设备（非响应式）\n * @returns 是否为移动设备（手机或平板）\n */\nexport function isMobileDevice(): boolean {\n  const device = getMedia();\n  return device === 'phone' || device === 'pad';\n}\n"],"names":["ref","getMedia","computed","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"useDevice.js","sources":["../../../../packages/hooks/useDevice.ts"],"sourcesContent":["import { ref, computed, onMounted, onUnmounted } from 'vue'\nimport { getMedia } from '@touchvue/utils'\n\n/**\n * 设备类型\n */\nexport type DeviceType = 'pc' | 'pad' | 'phone'\n\n/**\n * 全局设备检测管理器\n * 使用单例模式避免重复注册resize事件\n */\nclass DeviceManager {\n\tprivate static instance: DeviceManager\n\tprivate deviceType = ref<DeviceType>(getMedia())\n\tprivate listeners = new Set<() => void>()\n\tprivate resizeHandler: (() => void) | null = null\n\n\tprivate constructor() {\n\t\tthis.initResizeListener()\n\t}\n\n\tstatic getInstance(): DeviceManager {\n\t\tif (!DeviceManager.instance) {\n\t\t\tDeviceManager.instance = new DeviceManager()\n\t\t}\n\t\treturn DeviceManager.instance\n\t}\n\n\tprivate initResizeListener() {\n\t\tif (typeof window !== 'undefined') {\n\t\t\tthis.resizeHandler = () => {\n\t\t\t\tconst newDeviceType = getMedia()\n\t\t\t\tif (this.deviceType.value !== newDeviceType) {\n\t\t\t\t\tthis.deviceType.value = newDeviceType\n\t\t\t\t\t// 通知所有监听器\n\t\t\t\t\tthis.listeners.forEach(listener => listener())\n\t\t\t\t}\n\t\t\t}\n\t\t\twindow.addEventListener('resize', this.resizeHandler)\n\t\t}\n\t}\n\n\tgetDeviceType() {\n\t\treturn this.deviceType\n\t}\n\n\taddListener(listener: () => void) {\n\t\tthis.listeners.add(listener)\n\t}\n\n\tremoveListener(listener: () => void) {\n\t\tthis.listeners.delete(listener)\n\n\t\t// 如果没有监听器了，移除resize事件\n\t\tif (this.listeners.size === 0 && this.resizeHandler && typeof window !== 'undefined') {\n\t\t\twindow.removeEventListener('resize', this.resizeHandler)\n\t\t\tthis.resizeHandler = null\n\t\t}\n\t}\n\n\tdestroy() {\n\t\tif (this.resizeHandler && typeof window !== 'undefined') {\n\t\t\twindow.removeEventListener('resize', this.resizeHandler)\n\t\t}\n\t\tthis.listeners.clear()\n\t\tthis.resizeHandler = null\n\t}\n}\n\n/**\n * 设备检测 Hook\n * 提供响应式的设备类型判断，替代 Vue2 中的 $phone、$pc、$pad\n * 使用单例模式避免重复注册resize事件监听器\n */\nexport function useDevice() {\n\tconst manager = DeviceManager.getInstance()\n\tconst deviceType = manager.getDeviceType()\n\n\t// 计算属性：是否为手机\n\tconst isPhone = computed(() => deviceType.value === 'phone')\n\n\t// 计算属性：是否为平板\n\tconst isPad = computed(() => deviceType.value === 'pad')\n\n\t// 计算属性：是否为PC\n\tconst isPc = computed(() => deviceType.value === 'pc')\n\n\t// 计算属性：是否为移动设备（手机或平板）\n\tconst isMobile = computed(() => deviceType.value === 'phone' || deviceType.value === 'pad')\n\n\t// 更新设备类型的回调\n\tconst updateCallback = () => {\n\t\t// 这里不需要做任何事情，因为deviceType是响应式的\n\t\t// 当manager更新deviceType时，所有计算属性会自动更新\n\t}\n\n\t// 手动更新设备类型\n\tconst updateDeviceType = () => {\n\t\tconst newDeviceType = getMedia()\n\t\tif (deviceType.value !== newDeviceType) {\n\t\t\t// 直接更新manager中的deviceType\n\t\t\t;(deviceType as any).value = newDeviceType\n\t\t}\n\t}\n\n\t// 组件挂载时添加监听器\n\tonMounted(() => {\n\t\tmanager.addListener(updateCallback)\n\t})\n\n\t// 组件卸载时移除监听器\n\tonUnmounted(() => {\n\t\tmanager.removeListener(updateCallback)\n\t})\n\n\treturn {\n\t\t// 设备类型（响应式）\n\t\tdeviceType,\n\n\t\t// 响应式判断\n\t\tisPhone,\n\t\tisPad,\n\t\tisPc,\n\t\tisMobile,\n\n\t\t// 手动更新设备类型\n\t\tupdateDeviceType\n\t}\n}\n\n/**\n * 获取当前设备类型（非响应式）\n * @returns 设备类型字符串\n */\nexport function getDeviceType(): DeviceType {\n\treturn getMedia()\n}\n\n/**\n * 判断是否为手机设备（非响应式）\n * @returns 是否为手机\n */\nexport function isPhoneDevice(): boolean {\n\treturn getMedia() === 'phone'\n}\n\n/**\n * 判断是否为平板设备（非响应式）\n * @returns 是否为平板\n */\nexport function isPadDevice(): boolean {\n\treturn getMedia() === 'pad'\n}\n\n/**\n * 判断是否为PC设备（非响应式）\n * @returns 是否为PC\n */\nexport function isPcDevice(): boolean {\n\treturn getMedia() === 'pc'\n}\n\n/**\n * 判断是否为移动设备（非响应式）\n * @returns 是否为移动设备（手机或平板）\n */\nexport function isMobileDevice(): boolean {\n\tconst device = getMedia()\n\treturn device === 'phone' || device === 'pad'\n}\n"],"names":["ref","getMedia","computed","onMounted","onUnmounted"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@touchvue/ui",
-	"version": "1.0.0-beta.46",
+	"version": "1.0.0-beta.48",
 	"description": "TouchVue UI Component Library",
 	"main": "lib/index.js",
 	"private": false,

package/theme/components/index.css

@@ -737,6 +737,7 @@ html body .height-full {
   gap: var(--gap-y) var(--gap-x);
   padding: var(--padding);
   vertical-align: top;
+  box-sizing: border-box;
 }
 .to-grid > [flex] {
   flex: 1;
@@ -819,6 +820,10 @@ html body .height-full {
 .to-grid.is-col > *[merge="10"] {
   --merge: 10;
 }
+.to-grid.is-col > .to-grid {
+  --item-col: var(--col);
+  width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
+}
 .to-grid.col-avg {
   display: flex;
 }
@@ -866,10 +871,10 @@ html body .height-full {
 .to-grid.col-1 > *:last-child::after {
   display: none;
 }
-.to-grid.height-full {
-  height: 100%;
+.to-grid-item {
+  box-sizing: border-box;
 }
-.to-grid.height-full > .to-grid-item {
+.to-grid.height-full:not(.dir-v) > .to-grid-item {
   height: 100%;
 }
 @font-face {
@@ -1926,6 +1931,12 @@ html body .height-full {
   --dot-color: var(--color-fg);
   --dot-radius: 50%;
   --rotate-offset: 0em;
+  --hover-bg: #dedede;
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --active-bg: #ababab;
+  --active-color: var(--color);
+  --active-border: var(--border);
 }
 .to-tag {
   display: inline-block;
@@ -2093,6 +2104,19 @@ html body .height-full {
 .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
   border-radius: var(--radius) 0 0 0;
 }
+.to-tag.is-link {
+  cursor: pointer;
+}
+.to-tag.is-link .to-tag-wrapper:hover {
+  background: var(--hover-bg);
+  color: var(--hover-color);
+  border: var(--hover-border);
+}
+.to-tag.is-link .to-tag-wrapper:active {
+  background: var(--active-bg);
+  color: var(--active-color);
+  border: var(--active-border);
+}
 .to-box {
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -3320,6 +3344,20 @@ html body .height-full {
 .to-select.is-changed {
   color: var(--primary);
 }
+.to-select.is-filterable .to-select-content {
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+}
+.to-select.is-filterable .to-select-input {
+  flex: 1;
+}
+.to-select.is-filterable .to-select-input .to-input {
+  --bg: none;
+  --border: 0 none;
+  flex: 1;
+}
 .to-select-icon {
   --color: inherit;
   --width: 1em;

package/theme/index.css

@@ -740,6 +740,7 @@ html body .height-full {
   gap: var(--gap-y) var(--gap-x);
   padding: var(--padding);
   vertical-align: top;
+  box-sizing: border-box;
 }
 .to-grid > [flex] {
   flex: 1;
@@ -822,6 +823,10 @@ html body .height-full {
 .to-grid.is-col > *[merge="10"] {
   --merge: 10;
 }
+.to-grid.is-col > .to-grid {
+  --item-col: var(--col);
+  width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
+}
 .to-grid.col-avg {
   display: flex;
 }
@@ -869,10 +874,10 @@ html body .height-full {
 .to-grid.col-1 > *:last-child::after {
   display: none;
 }
-.to-grid.height-full {
-  height: 100%;
+.to-grid-item {
+  box-sizing: border-box;
 }
-.to-grid.height-full > .to-grid-item {
+.to-grid.height-full:not(.dir-v) > .to-grid-item {
   height: 100%;
 }
 @font-face {
@@ -1929,6 +1934,12 @@ html body .height-full {
   --dot-color: var(--color-fg);
   --dot-radius: 50%;
   --rotate-offset: 0em;
+  --hover-bg: #dedede;
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --active-bg: #ababab;
+  --active-color: var(--color);
+  --active-border: var(--border);
 }
 .to-tag {
   display: inline-block;
@@ -2096,6 +2107,19 @@ html body .height-full {
 .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
   border-radius: var(--radius) 0 0 0;
 }
+.to-tag.is-link {
+  cursor: pointer;
+}
+.to-tag.is-link .to-tag-wrapper:hover {
+  background: var(--hover-bg);
+  color: var(--hover-color);
+  border: var(--hover-border);
+}
+.to-tag.is-link .to-tag-wrapper:active {
+  background: var(--active-bg);
+  color: var(--active-color);
+  border: var(--active-border);
+}
 .to-box {
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -3323,6 +3347,20 @@ html body .height-full {
 .to-select.is-changed {
   color: var(--primary);
 }
+.to-select.is-filterable .to-select-content {
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+}
+.to-select.is-filterable .to-select-input {
+  flex: 1;
+}
+.to-select.is-filterable .to-select-input .to-input {
+  --bg: none;
+  --border: 0 none;
+  flex: 1;
+}
 .to-select-icon {
   --color: inherit;
   --width: 1em;

package/theme/skin/default.css

@@ -740,6 +740,7 @@ html body .height-full {
   gap: var(--gap-y) var(--gap-x);
   padding: var(--padding);
   vertical-align: top;
+  box-sizing: border-box;
 }
 .to-grid > [flex] {
   flex: 1;
@@ -822,6 +823,10 @@ html body .height-full {
 .to-grid.is-col > *[merge="10"] {
   --merge: 10;
 }
+.to-grid.is-col > .to-grid {
+  --item-col: var(--col);
+  width: calc((100% - (var(--item-col) - 1) * var(--gap-x)) / var(--item-col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
+}
 .to-grid.col-avg {
   display: flex;
 }
@@ -869,10 +874,10 @@ html body .height-full {
 .to-grid.col-1 > *:last-child::after {
   display: none;
 }
-.to-grid.height-full {
-  height: 100%;
+.to-grid-item {
+  box-sizing: border-box;
 }
-.to-grid.height-full > .to-grid-item {
+.to-grid.height-full:not(.dir-v) > .to-grid-item {
   height: 100%;
 }
 @font-face {
@@ -1929,6 +1934,12 @@ html body .height-full {
   --dot-color: var(--color-fg);
   --dot-radius: 50%;
   --rotate-offset: 0em;
+  --hover-bg: #dedede;
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --active-bg: #ababab;
+  --active-color: var(--color);
+  --active-border: var(--border);
 }
 .to-tag {
   display: inline-block;
@@ -2096,6 +2107,19 @@ html body .height-full {
 .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
   border-radius: var(--radius) 0 0 0;
 }
+.to-tag.is-link {
+  cursor: pointer;
+}
+.to-tag.is-link .to-tag-wrapper:hover {
+  background: var(--hover-bg);
+  color: var(--hover-color);
+  border: var(--hover-border);
+}
+.to-tag.is-link .to-tag-wrapper:active {
+  background: var(--active-bg);
+  color: var(--active-color);
+  border: var(--active-border);
+}
 .to-box {
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -3323,6 +3347,20 @@ html body .height-full {
 .to-select.is-changed {
   color: var(--primary);
 }
+.to-select.is-filterable .to-select-content {
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+}
+.to-select.is-filterable .to-select-input {
+  flex: 1;
+}
+.to-select.is-filterable .to-select-input .to-input {
+  --bg: none;
+  --border: 0 none;
+  flex: 1;
+}
 .to-select-icon {
   --color: inherit;
   --width: 1em;