@will-ui/vue 1.0.1 → 1.0.2

package/dist/components/time/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","names":[],"sources":["../../../components/time/Dial.vue"],"sourcesContent":["<template>\r\n  <div class=\"w-time-dial\">\r\n    <div class=\"w-time-dial-title\">\r\n      <span v-if=\"has.h\">{{ t(\"time.hour\") }}</span>\r\n      <span v-if=\"has.m\">{{ t(\"time.minute\") }}</span>\r\n      <span v-if=\"has.s\">{{ t(\"time.second\") }}</span>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"top_btn\"></div>\r\n    <div class=\"w-time-dial-list\" v-if=\"isMounted\">\r\n      <Toggle\r\n        v-for=\"(a, i) in arr\"\r\n        v-bind=\"toggleOptions\"\r\n        :data=\"a\"\r\n        :index=\"getIndex(i)\"\r\n        @wheel=\"handleWheel(i, $event)\">\r\n        <template #default=\"{ item }\">\r\n          <div\r\n            v-for=\"n in item\"\r\n            :class=\"[\r\n              'w-dial-item-item',\r\n              {\r\n                'w-dial-item-readonly':\r\n                  (i === 0 && !has.h) ||\r\n                  (i === 1 && !can.m) ||\r\n                  (i === 2 && !can.s),\r\n                'w-dial-item-selected':\r\n                  (i === 0 && h == n) ||\r\n                  (i === 1 && m == n) ||\r\n                  (i === 2 && s == n),\r\n              },\r\n            ]\"\r\n            @click=\"handleClick(i, n)\">\r\n            {{ n }}\r\n          </div>\r\n        </template>\r\n        <template #use=\"{ prev, next }\">\r\n          <teleport :to=\"top_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" rotate @click=\"prev\" />\r\n          </teleport>\r\n          <teleport :to=\"bottom_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" @click=\"next\" />\r\n          </teleport>\r\n        </template>\r\n      </Toggle>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"bottom_btn\"></div>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport \"./style/dial.css\"\r\nimport { ref, onMounted, computed, watchEffect } from \"vue\"\r\nimport Toggle from \"../toggle/index\"\r\nimport Icon from \"../icon/index\"\r\nimport type { TimeFormatType } from \"../../config/types\"\r\nimport { useUII18n } from \"../../use/useUII18n\"\r\n\r\nconst { t } = useUII18n()\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    format?: TimeFormatType\r\n    value?: string\r\n  }>(),\r\n  { format: \"HH:mm:ss\" }\r\n)\r\nconst emit = defineEmits<{ (e: \"change\", hms?: string): void }>()\r\nconst [h, m, s] = useHms(props as any)\r\nconst isMounted = ref(false)\r\nconst bottom_btn = ref<HTMLElement>()\r\nconst top_btn = ref<HTMLElement>()\r\nconst createNumberArray = (total: number, size: number = 6) =>\r\n  Array.from({ length: total / size }, (el, i) =>\r\n    Array.from({ length: size }, (item, index) =>\r\n      (i * size + index).toString().padStart(2, \"0\")\r\n    )\r\n  )\r\n//展不展示时分秒\r\nconst has = computed(() => {\r\n  const f = props.format\r\n  const m = f.indexOf(\"mm\") > -1\r\n  const h = f.indexOf(\"HH\") > -1\r\n  const s = f.indexOf(\"ss\") > -1\r\n  // console.log(f, h)\r\n  return { m, h, s }\r\n})\r\n//能不能进行选择时分秒的操作\r\nconst can = computed(() => {\r\n  const v = props.value\r\n  const len = v?.length\r\n  if (len) {\r\n    let h = true,\r\n      m = false,\r\n      s = false\r\n    if (len >= 2) {\r\n      m = true\r\n    }\r\n    if (len >= 5) {\r\n      s = true\r\n    }\r\n    return { h: h && has.value.h, m: m && has.value.m, s: s && has.value.s }\r\n  }\r\n  return { h: false, m: false, s: false }\r\n})\r\nconst arr = computed(() => {\r\n  const a: string[][][] = []\r\n  if (has.value.h) {\r\n    a.push(createNumberArray(24))\r\n    if (has.value.m) {\r\n      a.push(createNumberArray(60))\r\n      if (has.value.s) {\r\n        a.push(createNumberArray(60))\r\n      }\r\n    }\r\n  }\r\n  return a\r\n})\r\nconst toggleOptions = {\r\n  class: \"w-dial-item\",\r\n  transform: \"translate\" as \"translate\",\r\n  direction: \"y\" as \"y\",\r\n  itemClass: \"w-dial-toggle-item\",\r\n}\r\n\r\n//template里可以推断出组件定义的数据类型，但这里仍然要定义一遍，有其他办法重用类型吗？\r\nfunction handleWheel(\r\n  i: number,\r\n  {\r\n    event,\r\n    prev,\r\n    next,\r\n    delay,\r\n  }: {\r\n    event: WheelEvent\r\n    [k: string]: any\r\n  }\r\n) {\r\n  if (event.deltaY > 0) {\r\n    delay(next, 100)\r\n  } else {\r\n    delay(prev, 100)\r\n  }\r\n}\r\n\r\nfunction handleClick(i: number, v: string) {\r\n  // console.log(v, 'vvv')\r\n\r\n  const arr: string[] = []\r\n  if (i === 0) {\r\n    if (has.value.h) h.value = v\r\n  } else if (i === 1) {\r\n    if (can.value.m) m.value = v\r\n    else {\r\n      return\r\n    }\r\n  } else {\r\n    if (can.value.s) s.value = v\r\n    else {\r\n      return\r\n    }\r\n  }\r\n  if (h.value) {\r\n    arr.push(h.value)\r\n  }\r\n  if (m.value) {\r\n    arr.push(m.value)\r\n  }\r\n  if (s.value) {\r\n    arr.push(s.value)\r\n  }\r\n  emit(\"change\", arr.join(\":\"))\r\n}\r\n\r\nfunction getIndex(i: number) {\r\n  if (i === 0) {\r\n    if (h.value === undefined) {\r\n      return 0\r\n    } else {\r\n      const j = parseInt(\"\" + Number(h.value) / 6)\r\n      return j\r\n    }\r\n  } else if (i === 1) {\r\n    if (m.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(m.value) / 6)\r\n    }\r\n  } else if (i === 2) {\r\n    if (s.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(s.value) / 6)\r\n    }\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  isMounted.value = true\r\n})\r\n\r\nfunction useHms(props: Record<string, string>) {\r\n  const h = ref<string>()\r\n  const m = ref<string>()\r\n  const s = ref<string>()\r\n  watchEffect(() => {\r\n    ;[h.value, m.value, s.value] = (props.value || \"\").split(\":\")\r\n\r\n    // console.log(h.value, m.value, s.value)\r\n  })\r\n\r\n  return [h, m, s]\r\n}\r\n</script>\r\n"],"mappings":""}
+{"version":3,"file":"Dial.js","names":[],"sources":["../../../components/time/Dial.vue"],"sourcesContent":["<template>\r\n  <div class=\"w-time-dial\">\r\n    <div class=\"w-time-dial-title\">\r\n      <span v-if=\"has.h\">{{ t(\"time.hour\") }}</span>\r\n      <span v-if=\"has.m\">{{ t(\"time.minute\") }}</span>\r\n      <span v-if=\"has.s\">{{ t(\"time.second\") }}</span>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"top_btn\"></div>\r\n    <div class=\"w-time-dial-list\" v-if=\"isMounted\">\r\n      <Toggle\r\n        v-for=\"(a, i) in arr\"\r\n        v-bind=\"toggleOptions\"\r\n        :data=\"a\"\r\n        :index=\"getIndex(i)\"\r\n        @wheel=\"handleWheel(i, $event)\">\r\n        <template #default=\"{ item }\">\r\n          <div\r\n            v-for=\"n in item\"\r\n            :class=\"[\r\n              'w-dial-item-item',\r\n              {\r\n                'w-dial-item-readonly':\r\n                  (i === 0 && !has.h) ||\r\n                  (i === 1 && !can.m) ||\r\n                  (i === 2 && !can.s),\r\n                'w-dial-item-selected':\r\n                  (i === 0 && h == n) ||\r\n                  (i === 1 && m == n) ||\r\n                  (i === 2 && s == n),\r\n              },\r\n            ]\"\r\n            @click=\"handleClick(i, n)\">\r\n            {{ n }}\r\n          </div>\r\n        </template>\r\n        <template #use=\"{ prev, next }\">\r\n          <teleport :to=\"top_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" rotate @click=\"prev\" />\r\n          </teleport>\r\n          <teleport :to=\"bottom_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" @click=\"next\" />\r\n          </teleport>\r\n        </template>\r\n      </Toggle>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"bottom_btn\"></div>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport \"./style/dial.css\"\r\nimport { ref, onMounted, computed, watchEffect } from \"vue\"\r\nimport Toggle from \"../toggle/index\"\r\nimport Icon from \"../icon/index\"\r\nimport type { TimeFormatType } from \"../../config/types\"\r\nimport { useUII18n } from \"../../use/useUII18n\"\r\n\r\nconst { t } = useUII18n()\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    format?: TimeFormatType\r\n    value?: string\r\n  }>(),\r\n  { format: \"HH:mm:ss\" }\r\n)\r\nconst emit = defineEmits(['change'])\r\nconst [h, m, s] = useHms(props as any)\r\nconst isMounted = ref(false)\r\nconst bottom_btn = ref<HTMLElement>()\r\nconst top_btn = ref<HTMLElement>()\r\nconst createNumberArray = (total: number, size: number = 6) =>\r\n  Array.from({ length: total / size }, (el, i) =>\r\n    Array.from({ length: size }, (item, index) =>\r\n      (i * size + index).toString().padStart(2, \"0\")\r\n    )\r\n  )\r\n//展不展示时分秒\r\nconst has = computed(() => {\r\n  const f = props.format\r\n  const m = f.indexOf(\"mm\") > -1\r\n  const h = f.indexOf(\"HH\") > -1\r\n  const s = f.indexOf(\"ss\") > -1\r\n  // console.log(f, h)\r\n  return { m, h, s }\r\n})\r\n//能不能进行选择时分秒的操作\r\nconst can = computed(() => {\r\n  const v = props.value\r\n  const len = v?.length\r\n  if (len) {\r\n    let h = true,\r\n      m = false,\r\n      s = false\r\n    if (len >= 2) {\r\n      m = true\r\n    }\r\n    if (len >= 5) {\r\n      s = true\r\n    }\r\n    return { h: h && has.value.h, m: m && has.value.m, s: s && has.value.s }\r\n  }\r\n  return { h: false, m: false, s: false }\r\n})\r\nconst arr = computed(() => {\r\n  const a: string[][][] = []\r\n  if (has.value.h) {\r\n    a.push(createNumberArray(24))\r\n    if (has.value.m) {\r\n      a.push(createNumberArray(60))\r\n      if (has.value.s) {\r\n        a.push(createNumberArray(60))\r\n      }\r\n    }\r\n  }\r\n  return a\r\n})\r\nconst toggleOptions = {\r\n  class: \"w-dial-item\",\r\n  transform: \"translate\" as \"translate\",\r\n  direction: \"y\" as \"y\",\r\n  itemClass: \"w-dial-toggle-item\",\r\n}\r\n\r\n//template里可以推断出组件定义的数据类型，但这里仍然要定义一遍，有其他办法重用类型吗？\r\nfunction handleWheel(\r\n  i: number,\r\n  {\r\n    event,\r\n    prev,\r\n    next,\r\n    delay,\r\n  }: {\r\n    event: WheelEvent\r\n    [k: string]: any\r\n  }\r\n) {\r\n  if (event.deltaY > 0) {\r\n    delay(next, 100)\r\n  } else {\r\n    delay(prev, 100)\r\n  }\r\n}\r\n\r\nfunction handleClick(i: number, v: string) {\r\n  // console.log(v, 'vvv')\r\n\r\n  const arr: string[] = []\r\n  if (i === 0) {\r\n    if (has.value.h) h.value = v\r\n  } else if (i === 1) {\r\n    if (can.value.m) m.value = v\r\n    else {\r\n      return\r\n    }\r\n  } else {\r\n    if (can.value.s) s.value = v\r\n    else {\r\n      return\r\n    }\r\n  }\r\n  if (h.value) {\r\n    arr.push(h.value)\r\n  }\r\n  if (m.value) {\r\n    arr.push(m.value)\r\n  }\r\n  if (s.value) {\r\n    arr.push(s.value)\r\n  }\r\n  emit(\"change\", arr.join(\":\"))\r\n}\r\n\r\nfunction getIndex(i: number) {\r\n  if (i === 0) {\r\n    if (h.value === undefined) {\r\n      return 0\r\n    } else {\r\n      const j = parseInt(\"\" + Number(h.value) / 6)\r\n      return j\r\n    }\r\n  } else if (i === 1) {\r\n    if (m.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(m.value) / 6)\r\n    }\r\n  } else if (i === 2) {\r\n    if (s.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(s.value) / 6)\r\n    }\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  isMounted.value = true\r\n})\r\n\r\nfunction useHms(props: Record<string, string>) {\r\n  const h = ref<string>()\r\n  const m = ref<string>()\r\n  const s = ref<string>()\r\n  watchEffect(() => {\r\n    ;[h.value, m.value, s.value] = (props.value || \"\").split(\":\")\r\n\r\n    // console.log(h.value, m.value, s.value)\r\n  })\r\n\r\n  return [h, m, s]\r\n}\r\n</script>\r\n"],"mappings":""}

package/dist/components/time/Dial.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../components/time/Dial.vue"],"sourcesContent":["<template>\r\n  <div class=\"w-time-dial\">\r\n    <div class=\"w-time-dial-title\">\r\n      <span v-if=\"has.h\">{{ t(\"time.hour\") }}</span>\r\n      <span v-if=\"has.m\">{{ t(\"time.minute\") }}</span>\r\n      <span v-if=\"has.s\">{{ t(\"time.second\") }}</span>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"top_btn\"></div>\r\n    <div class=\"w-time-dial-list\" v-if=\"isMounted\">\r\n      <Toggle\r\n        v-for=\"(a, i) in arr\"\r\n        v-bind=\"toggleOptions\"\r\n        :data=\"a\"\r\n        :index=\"getIndex(i)\"\r\n        @wheel=\"handleWheel(i, $event)\">\r\n        <template #default=\"{ item }\">\r\n          <div\r\n            v-for=\"n in item\"\r\n            :class=\"[\r\n              'w-dial-item-item',\r\n              {\r\n                'w-dial-item-readonly':\r\n                  (i === 0 && !has.h) ||\r\n                  (i === 1 && !can.m) ||\r\n                  (i === 2 && !can.s),\r\n                'w-dial-item-selected':\r\n                  (i === 0 && h == n) ||\r\n                  (i === 1 && m == n) ||\r\n                  (i === 2 && s == n),\r\n              },\r\n            ]\"\r\n            @click=\"handleClick(i, n)\">\r\n            {{ n }}\r\n          </div>\r\n        </template>\r\n        <template #use=\"{ prev, next }\">\r\n          <teleport :to=\"top_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" rotate @click=\"prev\" />\r\n          </teleport>\r\n          <teleport :to=\"bottom_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" @click=\"next\" />\r\n          </teleport>\r\n        </template>\r\n      </Toggle>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"bottom_btn\"></div>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport \"./style/dial.css\"\r\nimport { ref, onMounted, computed, watchEffect } from \"vue\"\r\nimport Toggle from \"../toggle/index\"\r\nimport Icon from \"../icon/index\"\r\nimport type { TimeFormatType } from \"../../config/types\"\r\nimport { useUII18n } from \"../../use/useUII18n\"\r\n\r\nconst { t } = useUII18n()\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    format?: TimeFormatType\r\n    value?: string\r\n  }>(),\r\n  { format: \"HH:mm:ss\" }\r\n)\r\nconst emit = defineEmits<{ (e: \"change\", hms?: string): void }>()\r\nconst [h, m, s] = useHms(props as any)\r\nconst isMounted = ref(false)\r\nconst bottom_btn = ref<HTMLElement>()\r\nconst top_btn = ref<HTMLElement>()\r\nconst createNumberArray = (total: number, size: number = 6) =>\r\n  Array.from({ length: total / size }, (el, i) =>\r\n    Array.from({ length: size }, (item, index) =>\r\n      (i * size + index).toString().padStart(2, \"0\")\r\n    )\r\n  )\r\n//展不展示时分秒\r\nconst has = computed(() => {\r\n  const f = props.format\r\n  const m = f.indexOf(\"mm\") > -1\r\n  const h = f.indexOf(\"HH\") > -1\r\n  const s = f.indexOf(\"ss\") > -1\r\n  // console.log(f, h)\r\n  return { m, h, s }\r\n})\r\n//能不能进行选择时分秒的操作\r\nconst can = computed(() => {\r\n  const v = props.value\r\n  const len = v?.length\r\n  if (len) {\r\n    let h = true,\r\n      m = false,\r\n      s = false\r\n    if (len >= 2) {\r\n      m = true\r\n    }\r\n    if (len >= 5) {\r\n      s = true\r\n    }\r\n    return { h: h && has.value.h, m: m && has.value.m, s: s && has.value.s }\r\n  }\r\n  return { h: false, m: false, s: false }\r\n})\r\nconst arr = computed(() => {\r\n  const a: string[][][] = []\r\n  if (has.value.h) {\r\n    a.push(createNumberArray(24))\r\n    if (has.value.m) {\r\n      a.push(createNumberArray(60))\r\n      if (has.value.s) {\r\n        a.push(createNumberArray(60))\r\n      }\r\n    }\r\n  }\r\n  return a\r\n})\r\nconst toggleOptions = {\r\n  class: \"w-dial-item\",\r\n  transform: \"translate\" as \"translate\",\r\n  direction: \"y\" as \"y\",\r\n  itemClass: \"w-dial-toggle-item\",\r\n}\r\n\r\n//template里可以推断出组件定义的数据类型，但这里仍然要定义一遍，有其他办法重用类型吗？\r\nfunction handleWheel(\r\n  i: number,\r\n  {\r\n    event,\r\n    prev,\r\n    next,\r\n    delay,\r\n  }: {\r\n    event: WheelEvent\r\n    [k: string]: any\r\n  }\r\n) {\r\n  if (event.deltaY > 0) {\r\n    delay(next, 100)\r\n  } else {\r\n    delay(prev, 100)\r\n  }\r\n}\r\n\r\nfunction handleClick(i: number, v: string) {\r\n  // console.log(v, 'vvv')\r\n\r\n  const arr: string[] = []\r\n  if (i === 0) {\r\n    if (has.value.h) h.value = v\r\n  } else if (i === 1) {\r\n    if (can.value.m) m.value = v\r\n    else {\r\n      return\r\n    }\r\n  } else {\r\n    if (can.value.s) s.value = v\r\n    else {\r\n      return\r\n    }\r\n  }\r\n  if (h.value) {\r\n    arr.push(h.value)\r\n  }\r\n  if (m.value) {\r\n    arr.push(m.value)\r\n  }\r\n  if (s.value) {\r\n    arr.push(s.value)\r\n  }\r\n  emit(\"change\", arr.join(\":\"))\r\n}\r\n\r\nfunction getIndex(i: number) {\r\n  if (i === 0) {\r\n    if (h.value === undefined) {\r\n      return 0\r\n    } else {\r\n      const j = parseInt(\"\" + Number(h.value) / 6)\r\n      return j\r\n    }\r\n  } else if (i === 1) {\r\n    if (m.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(m.value) / 6)\r\n    }\r\n  } else if (i === 2) {\r\n    if (s.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(s.value) / 6)\r\n    }\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  isMounted.value = true\r\n})\r\n\r\nfunction useHms(props: Record<string, string>) {\r\n  const h = ref<string>()\r\n  const m = ref<string>()\r\n  const s = ref<string>()\r\n  watchEffect(() => {\r\n    ;[h.value, m.value, s.value] = (props.value || \"\").split(\":\")\r\n\r\n    // console.log(h.value, m.value, s.value)\r\n  })\r\n\r\n  return [h, m, s]\r\n}\r\n</script>\r\n"],"mappings":"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"}
+{"version":3,"file":"Dial.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../components/time/Dial.vue"],"sourcesContent":["<template>\r\n  <div class=\"w-time-dial\">\r\n    <div class=\"w-time-dial-title\">\r\n      <span v-if=\"has.h\">{{ t(\"time.hour\") }}</span>\r\n      <span v-if=\"has.m\">{{ t(\"time.minute\") }}</span>\r\n      <span v-if=\"has.s\">{{ t(\"time.second\") }}</span>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"top_btn\"></div>\r\n    <div class=\"w-time-dial-list\" v-if=\"isMounted\">\r\n      <Toggle\r\n        v-for=\"(a, i) in arr\"\r\n        v-bind=\"toggleOptions\"\r\n        :data=\"a\"\r\n        :index=\"getIndex(i)\"\r\n        @wheel=\"handleWheel(i, $event)\">\r\n        <template #default=\"{ item }\">\r\n          <div\r\n            v-for=\"n in item\"\r\n            :class=\"[\r\n              'w-dial-item-item',\r\n              {\r\n                'w-dial-item-readonly':\r\n                  (i === 0 && !has.h) ||\r\n                  (i === 1 && !can.m) ||\r\n                  (i === 2 && !can.s),\r\n                'w-dial-item-selected':\r\n                  (i === 0 && h == n) ||\r\n                  (i === 1 && m == n) ||\r\n                  (i === 2 && s == n),\r\n              },\r\n            ]\"\r\n            @click=\"handleClick(i, n)\">\r\n            {{ n }}\r\n          </div>\r\n        </template>\r\n        <template #use=\"{ prev, next }\">\r\n          <teleport :to=\"top_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" rotate @click=\"prev\" />\r\n          </teleport>\r\n          <teleport :to=\"bottom_btn\">\r\n            <Icon name=\"w-icon-sort-down\" size=\"var(--__icon)\" @click=\"next\" />\r\n          </teleport>\r\n        </template>\r\n      </Toggle>\r\n    </div>\r\n    <div class=\"w-time-dial-btn\" ref=\"bottom_btn\"></div>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport \"./style/dial.css\"\r\nimport { ref, onMounted, computed, watchEffect } from \"vue\"\r\nimport Toggle from \"../toggle/index\"\r\nimport Icon from \"../icon/index\"\r\nimport type { TimeFormatType } from \"../../config/types\"\r\nimport { useUII18n } from \"../../use/useUII18n\"\r\n\r\nconst { t } = useUII18n()\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    format?: TimeFormatType\r\n    value?: string\r\n  }>(),\r\n  { format: \"HH:mm:ss\" }\r\n)\r\nconst emit = defineEmits(['change'])\r\nconst [h, m, s] = useHms(props as any)\r\nconst isMounted = ref(false)\r\nconst bottom_btn = ref<HTMLElement>()\r\nconst top_btn = ref<HTMLElement>()\r\nconst createNumberArray = (total: number, size: number = 6) =>\r\n  Array.from({ length: total / size }, (el, i) =>\r\n    Array.from({ length: size }, (item, index) =>\r\n      (i * size + index).toString().padStart(2, \"0\")\r\n    )\r\n  )\r\n//展不展示时分秒\r\nconst has = computed(() => {\r\n  const f = props.format\r\n  const m = f.indexOf(\"mm\") > -1\r\n  const h = f.indexOf(\"HH\") > -1\r\n  const s = f.indexOf(\"ss\") > -1\r\n  // console.log(f, h)\r\n  return { m, h, s }\r\n})\r\n//能不能进行选择时分秒的操作\r\nconst can = computed(() => {\r\n  const v = props.value\r\n  const len = v?.length\r\n  if (len) {\r\n    let h = true,\r\n      m = false,\r\n      s = false\r\n    if (len >= 2) {\r\n      m = true\r\n    }\r\n    if (len >= 5) {\r\n      s = true\r\n    }\r\n    return { h: h && has.value.h, m: m && has.value.m, s: s && has.value.s }\r\n  }\r\n  return { h: false, m: false, s: false }\r\n})\r\nconst arr = computed(() => {\r\n  const a: string[][][] = []\r\n  if (has.value.h) {\r\n    a.push(createNumberArray(24))\r\n    if (has.value.m) {\r\n      a.push(createNumberArray(60))\r\n      if (has.value.s) {\r\n        a.push(createNumberArray(60))\r\n      }\r\n    }\r\n  }\r\n  return a\r\n})\r\nconst toggleOptions = {\r\n  class: \"w-dial-item\",\r\n  transform: \"translate\" as \"translate\",\r\n  direction: \"y\" as \"y\",\r\n  itemClass: \"w-dial-toggle-item\",\r\n}\r\n\r\n//template里可以推断出组件定义的数据类型，但这里仍然要定义一遍，有其他办法重用类型吗？\r\nfunction handleWheel(\r\n  i: number,\r\n  {\r\n    event,\r\n    prev,\r\n    next,\r\n    delay,\r\n  }: {\r\n    event: WheelEvent\r\n    [k: string]: any\r\n  }\r\n) {\r\n  if (event.deltaY > 0) {\r\n    delay(next, 100)\r\n  } else {\r\n    delay(prev, 100)\r\n  }\r\n}\r\n\r\nfunction handleClick(i: number, v: string) {\r\n  // console.log(v, 'vvv')\r\n\r\n  const arr: string[] = []\r\n  if (i === 0) {\r\n    if (has.value.h) h.value = v\r\n  } else if (i === 1) {\r\n    if (can.value.m) m.value = v\r\n    else {\r\n      return\r\n    }\r\n  } else {\r\n    if (can.value.s) s.value = v\r\n    else {\r\n      return\r\n    }\r\n  }\r\n  if (h.value) {\r\n    arr.push(h.value)\r\n  }\r\n  if (m.value) {\r\n    arr.push(m.value)\r\n  }\r\n  if (s.value) {\r\n    arr.push(s.value)\r\n  }\r\n  emit(\"change\", arr.join(\":\"))\r\n}\r\n\r\nfunction getIndex(i: number) {\r\n  if (i === 0) {\r\n    if (h.value === undefined) {\r\n      return 0\r\n    } else {\r\n      const j = parseInt(\"\" + Number(h.value) / 6)\r\n      return j\r\n    }\r\n  } else if (i === 1) {\r\n    if (m.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(m.value) / 6)\r\n    }\r\n  } else if (i === 2) {\r\n    if (s.value === undefined) {\r\n      return 0\r\n    } else {\r\n      return parseInt(\"\" + Number(s.value) / 6)\r\n    }\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  isMounted.value = true\r\n})\r\n\r\nfunction useHms(props: Record<string, string>) {\r\n  const h = ref<string>()\r\n  const m = ref<string>()\r\n  const s = ref<string>()\r\n  watchEffect(() => {\r\n    ;[h.value, m.value, s.value] = (props.value || \"\").split(\":\")\r\n\r\n    // console.log(h.value, m.value, s.value)\r\n  })\r\n\r\n  return [h, m, s]\r\n}\r\n</script>\r\n"],"mappings":"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"}

package/dist/components/time/TimePicker.d.ts

@@ -98,8 +98,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     cssVars: CssVars;
     modelValue: string;
     disabled: boolean;
-    clearable: boolean;
     placeholder: string | Record<string, any> | unknown[];
+    clearable: boolean;
     format: TimeFormatType;
     nearby: boolean;
 }, {}, {
@@ -1296,6 +1296,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     }, {}, {}, {
         clickOutside: import('vue').ObjectDirective<any, any, string, any>;
     }, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    Dial: any;
+    Dial: import('vue').DefineComponent<{
+        format?: TimeFormatType;
+        value?: string;
+    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        change: (...args: any[]) => void;
+    }, string, import('vue').PublicProps, Readonly<{
+        format?: TimeFormatType;
+        value?: string;
+    }> & Readonly<{
+        onChange?: (...args: any[]) => any;
+    }>, {
+        format: TimeFormatType;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/tree-choose/TreeChoose.d.ts

@@ -248,8 +248,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     modelValue: string | number;
     disabled: boolean;
     checkable: (item: import('..').TreeDataType) => boolean;
-    clearable: boolean;
     placeholder: string;
+    clearable: boolean;
     sign: string;
     searchPlaceholder: string;
     nearby: boolean;

package/dist/components/tree-choose/TreeChoose.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeChoose.js","names":["computed","ref","watch","defineComponent","inject","mergeProps","createVNode","_createVNode","_mergeProps","Layer","Close","Icon","Tree","runtimeProps","treeProps","useUII18n","getParent","mergeStyle","propSizeToCssVars","propColorToCssVars","effectiveSizeVar","effectiveColorVar","effectiveBgVar","effectiveTextVar","toCssVarsStyle","useComponentConfig","TREE_CHOOSE_FALLBACK","inheritAttrs","name","components","emits","props","show","type","Boolean","default","disabled","undefined","block","clearable","placeholder","String","searchPlaceholder","sign","lazyLoad","Function","placement","adjustPosition","nearby","cssVars","Object","keys","Array","setup","emit","attrs","slots","expose","formItem","cfg","t","value","keyField","textField","childField","hasCheckbox","visible","triggerRect","treeRef","v","findNodeByKey","key","rows","arr","data","prop","children","length","handleAfterEnter","tree","forEach","k","revealToNode","modelValue","hasValue","placeholderText","checked","map","index","item","filter","selectedText","count","suffix","pathText","node","join","tokenStyle","size","color","layerContentStyle","viewportHeight","window","innerHeight","triggerBottom","bottom","triggerTop","top","availableHeight","maxHeight","Math","max","min","minWidth","width","layerOptions","hasArrow","gap","transitionName","layerStyle","b","rect","treeDataOptions","commonOptions","class","indent","onlyOneSpread","onlyChooseLeaf","checkable","checkedMode","validate","clear","renderTrigger","arrowBtn","closeBtn","e","stopPropagation","triggerOptions","style","renderContent","treeSlots","icon","label","footer","getCheckedKeys","getSubmitData","expandToNode","scroll","getTree","layerSlots","trigger"],"sources":["../../../components/tree-choose/TreeChoose.tsx"],"sourcesContent":["import type { PropType } from 'vue'\r\nimport { computed, ref, watch, defineComponent, inject, mergeProps } from 'vue'\r\nimport type { RectType } from '../../config/types'\r\nimport Layer from '../layer/index'\r\nimport Close from '../close/index'\r\nimport Icon from '../icon/index'\r\nimport Tree from '../tree/Tree'\r\nimport { runtimeProps as treeProps } from '../tree/Tree'\r\nimport type { TreeExpose } from '../tree/Tree'\r\nimport { type AdjustmentPosition, type PlacementType } from '../../config/types'\r\nimport { useUII18n } from '../../use/useUII18n'\r\nimport {\r\n  getParent,\r\n  mergeStyle,\r\n  propSizeToCssVars,\r\n  propColorToCssVars,\r\n  effectiveSizeVar,\r\n  effectiveColorVar,\r\n  effectiveBgVar,\r\n  effectiveTextVar,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport {\r\n  TREE_CHOOSE_FALLBACK,\r\n} from './config'\r\n\r\nexport type { TreeChooseGlobalConfig } from './config'\r\nexport { TREE_CHOOSE_FALLBACK } from './config'\r\n\r\nexport type TreeChooseExpose = {\r\n  clear: () => void\r\n  getCheckedKeys: () => Array<string | number>\r\n  getSubmitData: () => ReturnType<TreeExpose['getSubmitData']>\r\n  expandToNode: (key: string | number) => void\r\n  revealToNode: (key: string | number, scroll?: boolean) => void\r\n  /** 内部 Tree 实例（高级） */\r\n  getTree: () => TreeExpose | null\r\n}\r\n\r\nexport default defineComponent({\r\n  inheritAttrs: false,\r\n  name: 'TreeChoose',\r\n  components: { Layer, Close, Icon, Tree },\r\n  emits: [\r\n    'update:show',\r\n    'update:modelValue',\r\n    'update:keys',\r\n    'clear',\r\n    'change',\r\n  ],\r\n  props: {\r\n    show: { type: Boolean, default: false },\r\n    disabled: { type: Boolean, default: undefined },\r\n    block: { type: Boolean, default: undefined },\r\n    clearable: { type: Boolean, default: undefined },\r\n    placeholder: { type: String, default: undefined },\r\n    /** 预留：搜索占位，当前未实现搜索 UI */\r\n    searchPlaceholder: { type: String, default: undefined },\r\n    sign: { type: String, default: undefined },\r\n    /** 预留：懒加载，当前未实现 */\r\n    lazyLoad: Function as PropType<() => Promise<any[]>>,\r\n    placement: {\r\n      type: String as PropType<PlacementType>,\r\n      default: undefined,\r\n    },\r\n    adjustPosition: {\r\n      type: String as PropType<AdjustmentPosition>,\r\n      default: undefined,\r\n    },\r\n    nearby: { type: Boolean, default: false },\r\n    /** 实例 CSS 变量（如 `--w-prop-tree-choose-bg-color`） */\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n    ...treeProps,\r\n    keys: {\r\n      type: Array as PropType<Array<string | number>>,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props: any, { emit, attrs, slots, expose }) {\r\n    const formItem: any = inject('formItem', undefined)\r\n    const cfg = useComponentConfig('TreeChoose', props, TREE_CHOOSE_FALLBACK)\r\n    const { t } = useUII18n()\r\n\r\n    const disabled = computed(\r\n      () => !!(cfg.value.disabled || formItem?.disabled),\r\n    )\r\n    const block = computed(() => !!cfg.value.block)\r\n    const clearable = computed(() => !!cfg.value.clearable)\r\n    const sign = computed(() => cfg.value.sign as string)\r\n    const placeholder = computed(() => cfg.value.placeholder as string | undefined)\r\n    const keyField = computed(() => cfg.value.keyField as string)\r\n    const textField = computed(() => cfg.value.textField as string)\r\n    const childField = computed(() => cfg.value.childField as string)\r\n    const hasCheckbox = computed(() => !!cfg.value.hasCheckbox)\r\n\r\n    const visible = ref(!!props.show)\r\n    const triggerRect = ref<RectType>()\r\n    const treeRef = ref<TreeExpose | null>(null)\r\n\r\n    watch(\r\n      () => props.show,\r\n      (v) => {\r\n        visible.value = !!v\r\n      },\r\n    )\r\n    watch(visible, (v) => {\r\n      emit('update:show', v)\r\n    })\r\n\r\n    function findNodeByKey(key: string | number) {\r\n      const { rows } = getParent({\r\n        value: key,\r\n        arr: props.data || [],\r\n        prop: keyField.value,\r\n        children: childField.value,\r\n      })\r\n      return rows.length > 0 ? rows[rows.length - 1] : null\r\n    }\r\n\r\n    /** 下拉打开后：展开已选路径并滚到首项（reveal，不折叠其它节点） */\r\n    function handleAfterEnter() {\r\n      const tree = treeRef.value\r\n      if (!tree) return\r\n\r\n      if (hasCheckbox.value) {\r\n        const keys = props.keys as Array<string | number> | undefined\r\n        if (!keys?.length) return\r\n        keys.forEach((k) => tree.revealToNode(k, false))\r\n        tree.revealToNode(keys[0], true)\r\n        return\r\n      }\r\n\r\n      const v = props.modelValue\r\n      if (v !== undefined && v !== null) {\r\n        tree.revealToNode(v, true)\r\n      }\r\n    }\r\n\r\n    const hasValue = computed(() => {\r\n      if (hasCheckbox.value) {\r\n        return !!(props.keys && props.keys.length)\r\n      }\r\n      return props.modelValue !== undefined && props.modelValue !== null\r\n    })\r\n\r\n    const placeholderText = computed(() => {\r\n      if (hasCheckbox.value) {\r\n        const v = props.keys as Array<string | number> | undefined\r\n        if (v && v.length) {\r\n          if (slots.checked) {\r\n            return v\r\n              .map((key, index) => {\r\n                const item = findNodeByKey(key)\r\n                return item ? slots.checked!({ item, index }) : null\r\n              })\r\n              .filter(Boolean)\r\n          }\r\n          const selectedText = t('choose2.selectedItems', {\r\n            count: v.length,\r\n            suffix: '',\r\n          })\r\n          return <span class=\"w-no-select\">{selectedText}</span>\r\n        }\r\n      } else {\r\n        const v = props.modelValue\r\n        if (v !== undefined && v !== null) {\r\n          const { rows } = getParent({\r\n            value: v,\r\n            arr: props.data || [],\r\n            prop: keyField.value,\r\n            children: childField.value,\r\n          })\r\n          if (rows.length > 0) {\r\n            const item = rows[rows.length - 1]\r\n            if (slots.checked) {\r\n              return slots.checked!({ item, index: 0 })\r\n            }\r\n            const pathText = rows\r\n              .map((node: any) => node[textField.value])\r\n              .join(sign.value)\r\n            return <span class=\"w-no-select\">{pathText}</span>\r\n          }\r\n        }\r\n      }\r\n      return (\r\n        <span class=\"w-text-placeholder w-no-select\">{placeholder.value}</span>\r\n      )\r\n    })\r\n\r\n    const tokenStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('tree-choose', cfg.value.size),\r\n        ...propColorToCssVars('tree-choose', cfg.value.color),\r\n        '--w-prop-tree-size': effectiveSizeVar('tree-choose'),\r\n        '--w-prop-tree-color': effectiveColorVar('tree-choose'),\r\n        '--w-prop-tree-bg-color': effectiveBgVar('tree-choose'),\r\n        '--w-prop-tree-text-color': effectiveTextVar('tree-choose'),\r\n        '--w-prop-layer-bg-color': effectiveBgVar('tree-choose'),\r\n        '--w-prop-layer-text-color': effectiveTextVar('tree-choose'),\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n\r\n    const layerContentStyle = computed(() => {\r\n      if (triggerRect.value) {\r\n        const viewportHeight = window.innerHeight\r\n        const triggerBottom = triggerRect.value.bottom\r\n        const triggerTop = triggerRect.value.top\r\n\r\n        let availableHeight = viewportHeight - triggerBottom - 40\r\n\r\n        if (availableHeight < 200 && triggerTop > viewportHeight / 2) {\r\n          availableHeight = triggerTop - 40\r\n        }\r\n\r\n        const maxHeight = Math.max(200, Math.min(500, availableHeight))\r\n\r\n        return mergeStyle(tokenStyle.value, {\r\n          minWidth: triggerRect.value.width + 'px',\r\n          maxHeight: maxHeight + 'px',\r\n        })\r\n      }\r\n      return tokenStyle.value\r\n    })\r\n\r\n    const layerOptions = computed<Record<string, any>>(() => {\r\n      return {\r\n        show: visible.value,\r\n        nearby: props.nearby,\r\n        disabled: disabled.value,\r\n        placement: cfg.value.placement || 'bottom-start',\r\n        adjustPosition: cfg.value.adjustPosition,\r\n        hasArrow: false,\r\n        gap: 2,\r\n        transitionName: 'w-slide-y',\r\n        layerStyle: layerContentStyle.value,\r\n        'onUpdate:show': (b: boolean) => {\r\n          visible.value = b\r\n        },\r\n        'onGet-trigger-rect': (rect: RectType) => {\r\n          triggerRect.value = rect\r\n        },\r\n        'onAfter-enter': handleAfterEnter,\r\n      }\r\n    })\r\n\r\n    const treeDataOptions = computed(() => {\r\n      const commonOptions = {\r\n        class: 'w-tree-choose-layer',\r\n        data: props.data,\r\n        size: cfg.value.size,\r\n        indent: cfg.value.indent,\r\n        keyField: cfg.value.keyField,\r\n        textField: cfg.value.textField,\r\n        childField: cfg.value.childField,\r\n        onlyOneSpread: cfg.value.onlyOneSpread,\r\n        onlyChooseLeaf: cfg.value.onlyChooseLeaf,\r\n        checkable: props.checkable,\r\n      }\r\n\r\n      if (hasCheckbox.value) {\r\n        return {\r\n          ...commonOptions,\r\n          hasCheckbox: true,\r\n          checkedMode: cfg.value.checkedMode || 'every',\r\n          keys: props.keys,\r\n          'onUpdate:keys': (arr: any[]) => {\r\n            emit('update:keys', arr)\r\n            emit('change', arr)\r\n            formItem?.validate('change')\r\n          },\r\n        }\r\n      }\r\n\r\n      return {\r\n        ...commonOptions,\r\n        hasCheckbox: false,\r\n        modelValue: props.modelValue,\r\n        'onUpdate:modelValue': (key: string | number) => {\r\n          emit('update:modelValue', key)\r\n          emit('change', key)\r\n          formItem?.validate('change')\r\n          visible.value = false\r\n        },\r\n      }\r\n    })\r\n\r\n    function clear() {\r\n      if (hasCheckbox.value) {\r\n        emit('update:keys', [])\r\n        emit('change', [])\r\n      } else {\r\n        emit('update:modelValue', undefined)\r\n        emit('change', undefined)\r\n      }\r\n      emit('clear')\r\n      formItem?.validate('change')\r\n    }\r\n\r\n    function renderTrigger() {\r\n      const arrowBtn = <Icon rotate={visible.value} name=\"w-icon-arrow-down\" />\r\n      const closeBtn =\r\n        !disabled.value && clearable.value && hasValue.value ? (\r\n          <Close\r\n            name=\"w-icon-close-fill\"\r\n            onClick={(e: MouseEvent) => {\r\n              e.stopPropagation()\r\n              clear()\r\n            }}\r\n          />\r\n        ) : undefined\r\n\r\n      const triggerOptions = mergeProps(attrs, {\r\n        class: [\r\n          'w-tree-choose-trigger',\r\n          {\r\n            'w-tree-choose-trigger-disabled': disabled.value,\r\n            'w-tree-choose-trigger-block': block.value,\r\n            'w-tree-choose-trigger-active': visible.value,\r\n            'w-tree-choose-placeholder': !hasValue.value,\r\n          },\r\n        ],\r\n        style: mergeStyle(\r\n          tokenStyle.value,\r\n          attrs.style as Record<string, any> | undefined,\r\n        ),\r\n      })\r\n\r\n      return (\r\n        <div {...triggerOptions}>\r\n          <div class=\"w-tree-choose-text\">{placeholderText.value}</div>\r\n          <div class=\"w-tree-choose-icon\">\r\n            {closeBtn}\r\n            {closeBtn === undefined ? arrowBtn : undefined}\r\n          </div>\r\n        </div>\r\n      )\r\n    }\r\n\r\n    function renderContent() {\r\n      if (disabled.value) {\r\n        return null\r\n      }\r\n\r\n      const treeSlots: Record<string, any> = {}\r\n      if (slots.icon) treeSlots.icon = slots.icon\r\n      if (slots['icon-spread']) treeSlots['icon-spread'] = slots['icon-spread']\r\n      if (slots['icon-fold']) treeSlots['icon-fold'] = slots['icon-fold']\r\n      if (slots['icon-leaf']) treeSlots['icon-leaf'] = slots['icon-leaf']\r\n      if (slots.label) treeSlots.label = slots.label\r\n\r\n      return (\r\n        <div class=\"w-tree-choose-content\">\r\n          <Tree\r\n            ref={treeRef}\r\n            {...treeDataOptions.value}\r\n            v-slots={Object.keys(treeSlots).length > 0 ? treeSlots : undefined}\r\n          />\r\n          {slots.footer ? (\r\n            <div class=\"w-tree-choose-footer\">{slots.footer()}</div>\r\n          ) : null}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    expose({\r\n      clear,\r\n      getCheckedKeys: () => treeRef.value?.getCheckedKeys() ?? [],\r\n      getSubmitData: () =>\r\n        treeRef.value?.getSubmitData() ?? { keys: [], rows: [] },\r\n      expandToNode: (key: string | number) =>\r\n        treeRef.value?.expandToNode(key),\r\n      revealToNode: (key: string | number, scroll?: boolean) =>\r\n        treeRef.value?.revealToNode(key, scroll),\r\n      getTree: () => treeRef.value,\r\n    } satisfies TreeChooseExpose)\r\n\r\n    return () => {\r\n      const layerSlots = {\r\n        trigger: renderTrigger,\r\n        default: renderContent,\r\n      }\r\n      return <Layer v-slots={layerSlots} {...layerOptions.value} />\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}
+{"version":3,"file":"TreeChoose.js","names":["computed","ref","watch","defineComponent","inject","mergeProps","createVNode","_createVNode","_mergeProps","Layer","Close","Icon","Tree","runtimeProps","treeProps","useUII18n","getParent","mergeStyle","propSizeToCssVars","propColorToCssVars","effectiveSizeVar","effectiveColorVar","effectiveBgVar","effectiveTextVar","toCssVarsStyle","useComponentConfig","TREE_CHOOSE_FALLBACK","inheritAttrs","name","components","emits","props","show","type","Boolean","default","disabled","undefined","block","clearable","placeholder","String","searchPlaceholder","sign","lazyLoad","Function","placement","adjustPosition","nearby","cssVars","Object","keys","Array","setup","emit","attrs","slots","expose","formItem","cfg","t","value","keyField","textField","childField","hasCheckbox","visible","triggerRect","treeRef","v","findNodeByKey","key","rows","arr","data","prop","children","length","handleAfterEnter","tree","forEach","k","revealToNode","modelValue","hasValue","placeholderText","checked","map","index","item","filter","selectedText","count","suffix","pathText","node","join","tokenStyle","size","color","layerContentStyle","viewportHeight","window","innerHeight","triggerBottom","bottom","triggerTop","top","availableHeight","maxHeight","Math","max","min","minWidth","width","layerOptions","hasArrow","gap","transitionName","layerStyle","b","rect","treeDataOptions","commonOptions","class","indent","onlyOneSpread","onlyChooseLeaf","checkable","checkedMode","validate","clear","renderTrigger","arrowBtn","closeBtn","e","stopPropagation","triggerOptions","style","renderContent","treeSlots","icon","label","footer","getCheckedKeys","getSubmitData","expandToNode","scroll","getTree","layerSlots","trigger"],"sources":["../../../components/tree-choose/TreeChoose.tsx"],"sourcesContent":["import type { PropType } from 'vue'\r\nimport { computed, ref, watch, defineComponent, inject, mergeProps } from 'vue'\r\nimport type { RectType } from '../../config/types'\r\nimport Layer from '../layer/index'\r\nimport Close from '../close/index'\r\nimport Icon from '../icon/index'\r\nimport Tree from '../tree/Tree'\r\nimport { runtimeProps as treeProps } from '../tree/Tree'\r\nimport type { TreeExpose } from '../tree/Tree'\r\nimport { type AdjustmentPosition, type PlacementType } from '../../config/types'\r\nimport { useUII18n } from '../../use/useUII18n'\r\nimport {\r\n  getParent,\r\n  mergeStyle,\r\n  propSizeToCssVars,\r\n  propColorToCssVars,\r\n  effectiveSizeVar,\r\n  effectiveColorVar,\r\n  effectiveBgVar,\r\n  effectiveTextVar,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport {\r\n  TREE_CHOOSE_FALLBACK,\r\n} from './config'\r\n\r\nexport type { TreeChooseGlobalConfig } from './config'\r\nexport { TREE_CHOOSE_FALLBACK } from './config'\r\n\r\nexport type TreeChooseExpose = {\r\n  clear: () => void\r\n  getCheckedKeys: () => Array<string | number>\r\n  getSubmitData: () => ReturnType<TreeExpose['getSubmitData']>\r\n  expandToNode: (key: string | number) => void\r\n  revealToNode: (key: string | number, scroll?: boolean) => void\r\n  /** 内部 Tree 实例（高级） */\r\n  getTree: () => TreeExpose | null\r\n}\r\n\r\nexport default defineComponent({\r\n  inheritAttrs: false,\r\n  name: 'TreeChoose',\r\n  components: { Layer, Close, Icon, Tree },\r\n  emits: [\r\n    'update:show',\r\n    'update:modelValue',\r\n    'update:keys',\r\n    'clear',\r\n    'change',\r\n  ],\r\n  props: {\r\n    show: { type: Boolean, default: false },\r\n    disabled: { type: Boolean, default: undefined },\r\n    block: { type: Boolean, default: undefined },\r\n    clearable: { type: Boolean, default: undefined },\r\n    placeholder: { type: String, default: undefined },\r\n    /** 预留：搜索占位，当前未实现搜索 UI */\r\n    searchPlaceholder: { type: String, default: undefined },\r\n    sign: { type: String, default: undefined },\r\n    /** 预留：懒加载，当前未实现 */\r\n    lazyLoad: Function as PropType<() => Promise<any[]>>,\r\n    placement: {\r\n      type: String as PropType<PlacementType>,\r\n      default: undefined,\r\n    },\r\n    adjustPosition: {\r\n      type: String as PropType<AdjustmentPosition>,\r\n      default: undefined,\r\n    },\r\n    nearby: { type: Boolean, default: false },\r\n    /** 实例 CSS 变量（如 `--w-prop-tree-choose-bg-color`） */\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n    ...treeProps,\r\n    keys: {\r\n      type: Array as PropType<Array<string | number>>,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props: any, { emit, attrs, slots, expose }) {\r\n    const formItem: any = inject('formItem', undefined)\r\n    const cfg = useComponentConfig('TreeChoose', props, TREE_CHOOSE_FALLBACK)\r\n    const { t } = useUII18n()\r\n\r\n    const disabled = computed(\r\n      () => !!(cfg.value.disabled || formItem?.disabled),\r\n    )\r\n    const block = computed(() => !!cfg.value.block)\r\n    const clearable = computed(() => !!cfg.value.clearable)\r\n    const sign = computed(() => cfg.value.sign as string)\r\n    const placeholder = computed(() => cfg.value.placeholder as string | undefined)\r\n    const keyField = computed(() => cfg.value.keyField as string)\r\n    const textField = computed(() => cfg.value.textField as string)\r\n    const childField = computed(() => cfg.value.childField as string)\r\n    const hasCheckbox = computed(() => !!cfg.value.hasCheckbox)\r\n\r\n    const visible = ref(!!props.show)\r\n    const triggerRect = ref<RectType>()\r\n    const treeRef = ref<TreeExpose | null>(null)\r\n\r\n    watch(\r\n      () => props.show,\r\n      (v) => {\r\n        visible.value = !!v\r\n      },\r\n    )\r\n    watch(visible, (v) => {\r\n      emit('update:show', v)\r\n    })\r\n\r\n    function findNodeByKey(key: string | number) {\r\n      const { rows } = getParent({\r\n        value: key,\r\n        arr: props.data || [],\r\n        prop: keyField.value,\r\n        children: childField.value,\r\n      })\r\n      return rows.length > 0 ? rows[rows.length - 1] : null\r\n    }\r\n\r\n    /** 下拉打开后：展开已选路径并滚到首项（reveal，不折叠其它节点） */\r\n    function handleAfterEnter() {\r\n      const tree = treeRef.value\r\n      if (!tree) return\r\n\r\n      if (hasCheckbox.value) {\r\n        const keys = props.keys as Array<string | number> | undefined\r\n        if (!keys?.length) return\r\n        keys.forEach((k) => tree.revealToNode(k, false))\r\n        tree.revealToNode(keys[0], true)\r\n        return\r\n      }\r\n\r\n      const v = props.modelValue\r\n      if (v !== undefined && v !== null) {\r\n        tree.revealToNode(v, true)\r\n      }\r\n    }\r\n\r\n    const hasValue = computed(() => {\r\n      if (hasCheckbox.value) {\r\n        return !!(props.keys && props.keys.length)\r\n      }\r\n      return props.modelValue !== undefined && props.modelValue !== null\r\n    })\r\n\r\n    const placeholderText = computed(() => {\r\n      if (hasCheckbox.value) {\r\n        const v = props.keys as Array<string | number> | undefined\r\n        if (v && v.length) {\r\n          if (slots.checked) {\r\n            return v\r\n              .map((key, index) => {\r\n                const item = findNodeByKey(key)\r\n                return item ? slots.checked!({ item, index }) : null\r\n              })\r\n              .filter(Boolean)\r\n          }\r\n          const selectedText = t('choose2.selectedItems', {\r\n            count: v.length,\r\n            suffix: '',\r\n          })\r\n          return <span class=\"w-no-select\">{selectedText}</span>\r\n        }\r\n      } else {\r\n        const v = props.modelValue\r\n        if (v !== undefined && v !== null) {\r\n          const { rows } = getParent({\r\n            value: v,\r\n            arr: props.data || [],\r\n            prop: keyField.value,\r\n            children: childField.value,\r\n          })\r\n          if (rows.length > 0) {\r\n            const item = rows[rows.length - 1]\r\n            if (slots.checked) {\r\n              return slots.checked!({ item, index: 0 })\r\n            }\r\n            const pathText = rows\r\n              .map((node: any) => node[textField.value])\r\n              .join(sign.value)\r\n            return <span class=\"w-no-select\">{pathText}</span>\r\n          }\r\n        }\r\n      }\r\n      return (\r\n        <span class=\"w-text-placeholder w-no-select\">{placeholder.value}</span>\r\n      )\r\n    })\r\n\r\n    const tokenStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('tree-choose', cfg.value.size),\r\n        ...propColorToCssVars('tree-choose', cfg.value.color),\r\n        '--w-prop-tree-size': effectiveSizeVar('tree-choose'),\r\n        '--w-prop-tree-color': effectiveColorVar('tree-choose'),\r\n        '--w-prop-tree-bg-color': effectiveBgVar('tree-choose'),\r\n        '--w-prop-tree-text-color': effectiveTextVar('tree-choose'),\r\n        '--w-prop-layer-bg-color': effectiveBgVar('tree-choose'),\r\n        '--w-prop-layer-text-color': effectiveTextVar('tree-choose'),\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n\r\n    const layerContentStyle = computed(() => {\r\n      if (triggerRect.value) {\r\n        const viewportHeight = window.innerHeight\r\n        const triggerBottom = triggerRect.value.bottom\r\n        const triggerTop = triggerRect.value.top\r\n\r\n        let availableHeight = viewportHeight - triggerBottom - 40\r\n\r\n        if (availableHeight < 200 && triggerTop > viewportHeight / 2) {\r\n          availableHeight = triggerTop - 40\r\n        }\r\n\r\n        const maxHeight = Math.max(200, Math.min(500, availableHeight))\r\n\r\n        return mergeStyle(tokenStyle.value, {\r\n          minWidth: triggerRect.value.width + 'px',\r\n          maxHeight: maxHeight + 'px',\r\n        })\r\n      }\r\n      return tokenStyle.value\r\n    })\r\n\r\n    const layerOptions = computed<Record<string, any>>(() => {\r\n      return {\r\n        show: visible.value,\r\n        nearby: props.nearby,\r\n        disabled: disabled.value,\r\n        placement: cfg.value.placement || 'bottom-start',\r\n        adjustPosition: cfg.value.adjustPosition,\r\n        hasArrow: false,\r\n        gap: 2,\r\n        transitionName: 'w-slide-y',\r\n        layerStyle: layerContentStyle.value,\r\n        'onUpdate:show': (b: boolean) => {\r\n          visible.value = b\r\n        },\r\n        'onGet-trigger-rect': (rect: RectType) => {\r\n          triggerRect.value = rect\r\n        },\r\n        'onAfter-enter': handleAfterEnter,\r\n      }\r\n    })\r\n\r\n    const treeDataOptions = computed(() => {\r\n      const commonOptions = {\r\n        class: 'w-tree-choose-layer',\r\n        data: props.data,\r\n        size: cfg.value.size,\r\n        indent: cfg.value.indent,\r\n        keyField: cfg.value.keyField,\r\n        textField: cfg.value.textField,\r\n        childField: cfg.value.childField,\r\n        onlyOneSpread: cfg.value.onlyOneSpread,\r\n        onlyChooseLeaf: cfg.value.onlyChooseLeaf,\r\n        checkable: props.checkable,\r\n      }\r\n\r\n      if (hasCheckbox.value) {\r\n        return {\r\n          ...commonOptions,\r\n          hasCheckbox: true,\r\n          checkedMode: cfg.value.checkedMode || 'every',\r\n          keys: props.keys,\r\n          'onUpdate:keys': (arr: any[]) => {\r\n            emit('update:keys', arr)\r\n            emit('change', arr)\r\n            formItem?.validate('change')\r\n          },\r\n        }\r\n      }\r\n\r\n      return {\r\n        ...commonOptions,\r\n        hasCheckbox: false,\r\n        modelValue: props.modelValue,\r\n        'onUpdate:modelValue': (key: string | number) => {\r\n          emit('update:modelValue', key)\r\n          emit('change', key)\r\n          formItem?.validate('change')\r\n          visible.value = false\r\n        },\r\n      }\r\n    })\r\n\r\n    function clear() {\r\n      if (hasCheckbox.value) {\r\n        emit('update:keys', [])\r\n        emit('change', [])\r\n      } else {\r\n        emit('update:modelValue', undefined)\r\n        emit('change', undefined)\r\n      }\r\n      emit('clear')\r\n      formItem?.validate('change')\r\n    }\r\n\r\n    function renderTrigger() {\r\n      const arrowBtn = <Icon rotate={visible.value} name=\"w-icon-arrow-down\" />\r\n      const closeBtn =\r\n        !disabled.value && clearable.value && hasValue.value ? (\r\n          <Close\r\n            name=\"w-icon-close-fill\"\r\n            onClick={(e: MouseEvent) => {\r\n              e.stopPropagation()\r\n              clear()\r\n            }}\r\n          />\r\n        ) : undefined\r\n\r\n      const triggerOptions = mergeProps(attrs, {\r\n        class: [\r\n          'w-tree-choose-trigger',\r\n          {\r\n            'w-tree-choose-trigger-disabled': disabled.value,\r\n            'w-tree-choose-trigger-block': block.value,\r\n            'w-tree-choose-trigger-active': visible.value,\r\n            'w-tree-choose-placeholder': !hasValue.value,\r\n          },\r\n        ],\r\n        style: mergeStyle(\r\n          tokenStyle.value,\r\n          attrs.style as Record<string, any> | undefined,\r\n        ),\r\n      })\r\n\r\n      return (\r\n        <div {...triggerOptions}>\r\n          <div class=\"w-tree-choose-text\">{placeholderText.value}</div>\r\n          <div class=\"w-tree-choose-icon\">\r\n            {closeBtn}\r\n            {closeBtn === undefined ? arrowBtn : undefined}\r\n          </div>\r\n        </div>\r\n      )\r\n    }\r\n\r\n    function renderContent() {\r\n      if (disabled.value) {\r\n        return null\r\n      }\r\n\r\n      const treeSlots: Record<string, any> = {}\r\n      if (slots.icon) treeSlots.icon = slots.icon\r\n      if (slots['icon-spread']) treeSlots['icon-spread'] = slots['icon-spread']\r\n      if (slots['icon-fold']) treeSlots['icon-fold'] = slots['icon-fold']\r\n      if (slots['icon-leaf']) treeSlots['icon-leaf'] = slots['icon-leaf']\r\n      if (slots.label) treeSlots.label = slots.label\r\n\r\n      return (\r\n        <div class=\"w-tree-choose-content\">\r\n          <Tree\r\n            ref={treeRef}\r\n            {...treeDataOptions.value}\r\n            v-slots={Object.keys(treeSlots).length > 0 ? treeSlots : undefined}\r\n          />\r\n          {slots.footer ? (\r\n            <div class=\"w-tree-choose-footer\">{slots.footer()}</div>\r\n          ) : null}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    expose({\r\n      clear,\r\n      getCheckedKeys: () => treeRef.value?.getCheckedKeys() ?? [],\r\n      getSubmitData: () =>\r\n        treeRef.value?.getSubmitData() ?? { keys: [], rows: [] },\r\n      expandToNode: (key: string | number) =>\r\n        treeRef.value?.expandToNode(key),\r\n      revealToNode: (key: string | number, scroll?: boolean) =>\r\n        treeRef.value?.revealToNode(key, scroll),\r\n      getTree: () => treeRef.value as unknown as TreeExpose | null,\r\n    } satisfies TreeChooseExpose)\r\n\r\n    return () => {\r\n      const layerSlots = {\r\n        trigger: renderTrigger,\r\n        default: renderContent,\r\n      }\r\n      return <Layer v-slots={layerSlots} {...layerOptions.value} />\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/virtual/Virtual.d.ts

@@ -43,15 +43,15 @@ export type VirtualJSXProps<T = any> = VirtualProps<T> & {
 };
 /**
  * Vue JSX 看的是实例上的 `$props`（不是调用签名，也不支持 `<Virtual<T>>`）。
- * 用构造器泛型：`<Virtual sourceData={list} v-slots={{ default: ({ data }) => ... }} />`
+ * 勿再 `export type VirtualComponent = typeof Virtual`，否则 hover 只显示别名。
+ * `<Virtual sourceData={list} v-slots={{ default: ({ data }) => ... }} />`
  * 即可从 list 推断 data 的元素类型。
  */
-export type VirtualComponent = {
+declare const Virtual: {
     new <T = any>(): VirtualListMethods & {
         $props: VirtualJSXProps<T>;
     };
 };
-declare const Virtual: VirtualComponent;
-/** 实例类型（一般写 `InstanceType<typeof Virtual>` 即可，不必单独记这个名字） */
-export type VirtualInstance = InstanceType<VirtualComponent>;
+/** 实例类型（一般写 `InstanceType<typeof Virtual>` 即可） */
+export type VirtualInstance = InstanceType<typeof Virtual>;
 export default Virtual;

package/dist/components/virtual/Virtual.js

@@ -1,6 +1,12 @@
 import { useVirtualList } from "./useVirtualList.js";
 import { createVNode, defineComponent, mergeProps, ref } from "vue";
 //#region components/virtual/Virtual.tsx
+/**
+* Vue JSX 看的是实例上的 `$props`（不是调用签名，也不支持 `<Virtual<T>>`）。
+* 勿再 `export type VirtualComponent = typeof Virtual`，否则 hover 只显示别名。
+* `<Virtual sourceData={list} v-slots={{ default: ({ data }) => ... }} />`
+* 即可从 list 推断 data 的元素类型。
+*/
 var Virtual = /* @__PURE__ */ defineComponent((props, ctx) => {
 	const { slots, attrs, expose } = ctx;
 	const root = ref();

package/dist/components/virtual/Virtual.js.map

@@ -1 +1 @@
-{"version":3,"file":"Virtual.js","names":["defineComponent","mergeProps","ref","createVNode","_createVNode","useVirtualList","VirtualImpl","props","ctx","slots","attrs","expose","root","state","methods","sourceData","itemHeight","itemHeightFn","pad","scope","elem","value","data","visibleData","index","from","fromIndex","to","toIndex","rootProps","class","paddingTop","startPlaceholderHeight","paddingBottom","endPlaceholderHeight","default","name","inheritAttrs","type","Number","Array","Function","Object","Virtual"],"sources":["../../../components/virtual/Virtual.tsx"],"sourcesContent":["import type { PropType, SetupContext, SlotsType } from 'vue'\r\nimport { defineComponent, mergeProps, ref } from 'vue'\r\nimport { useVirtualList } from './useVirtualList'\r\nimport type { VirtualListMethods } from './useVirtualList'\r\n\r\n/** 默认插槽作用域；一般不用手写，由 sourceData + v-slots 自动推断 */\r\nexport interface DataListOptions<T = any> {\r\n  data: T[]\r\n  index: {\r\n    from: number\r\n    to: number\r\n  }\r\n  elem?: HTMLElement\r\n  pad?: number\r\n  scrollTo: (x: number, y: number) => void\r\n  scrollToIndex: (index: number) => void\r\n  updateItemHeight: (index: number, height: number) => void\r\n  updateItemHeights: (\r\n    heightMap: Array<{ index: number; height: number }>,\r\n  ) => void\r\n  getScrollInfo: () => {\r\n    scrollTop: number\r\n    fromIndex: number\r\n    toIndex: number\r\n    visibleDataLength: number\r\n  }\r\n  getOffsetForIndex: (index: number) => number\r\n  refresh: () => void\r\n  isIndexVisible: (index: number) => boolean\r\n}\r\n\r\nexport interface VirtualProps<T = any> {\r\n  pad?: number | [number, number]\r\n  sourceData?: T[]\r\n  itemHeight?: number\r\n  itemHeightFn?: ((index: number, item: T) => number) | null\r\n}\r\n\r\nexport type VirtualSlots<T = any> = {\r\n  default?: (scope: DataListOptions<T>) => any\r\n}\r\n\r\n/** Vue TSX 通过 $props 取属性；把 v-slots 放进 $props 才能跟 sourceData 一起推断 T */\r\nexport type VirtualJSXProps<T = any> = VirtualProps<T> & {\r\n  'v-slots'?: VirtualSlots<T>\r\n  vSlots?: VirtualSlots<T>\r\n  class?: unknown\r\n  style?: unknown\r\n}\r\n\r\n/**\r\n * Vue JSX 看的是实例上的 `$props`（不是调用签名，也不支持 `<Virtual<T>>`）。\r\n * 用构造器泛型：`<Virtual sourceData={list} v-slots={{ default: ({ data }) => ... }} />`\r\n * 即可从 list 推断 data 的元素类型。\r\n */\r\nexport type VirtualComponent = {\r\n  new <T = any>(): VirtualListMethods & {\r\n    $props: VirtualJSXProps<T>\r\n  }\r\n}\r\n\r\nconst VirtualImpl = defineComponent(\r\n  <T = any,>(\r\n    props: VirtualProps<T>,\r\n    ctx: SetupContext<{}, SlotsType<VirtualSlots<T>>>,\r\n  ) => {\r\n    const { slots, attrs, expose } = ctx\r\n\r\n    const root = ref<HTMLElement>()\r\n\r\n    const { state, methods } = useVirtualList<T>(root, {\r\n      sourceData: () => props.sourceData || [],\r\n      itemHeight: () => props.itemHeight,\r\n      itemHeightFn: () => props.itemHeightFn,\r\n      pad: () => props.pad,\r\n    })\r\n\r\n    expose(methods)\r\n\r\n    return () => {\r\n      const scope: DataListOptions<T> = {\r\n        elem: root.value,\r\n        data: state.visibleData,\r\n        index: {\r\n          from: state.fromIndex,\r\n          to: state.toIndex,\r\n        },\r\n        ...methods,\r\n      }\r\n\r\n      const rootProps = mergeProps(\r\n        {\r\n          class: 'w-virtual',\r\n          ref: root,\r\n        },\r\n        attrs,\r\n      )\r\n\r\n      return (\r\n        <div {...rootProps}>\r\n          <div\r\n            class=\"w-virtual-content\"\r\n            style={{\r\n              paddingTop: state.startPlaceholderHeight + 'px',\r\n              paddingBottom: state.endPlaceholderHeight + 'px',\r\n            }}>\r\n            {slots.default?.(scope)}\r\n          </div>\r\n        </div>\r\n      )\r\n    }\r\n  },\r\n  {\r\n    name: 'Virtual',\r\n    inheritAttrs: false,\r\n    props: {\r\n      pad: {\r\n        type: [Number, Array] as PropType<number | [number, number]>,\r\n        default: 2,\r\n      },\r\n      sourceData: {\r\n        type: Array as PropType<any[]>,\r\n        default: () => [],\r\n      },\r\n      itemHeight: {\r\n        type: Number,\r\n        default: 0,\r\n      },\r\n      itemHeightFn: {\r\n        type: Function as unknown as PropType<\r\n          ((index: number, item: any) => number) | null\r\n        >,\r\n        default: null,\r\n      },\r\n    },\r\n    slots: Object as SlotsType<VirtualSlots>,\r\n  },\r\n)\r\n\r\nconst Virtual = VirtualImpl as unknown as VirtualComponent\r\n\r\n/** 实例类型（一般写 `InstanceType<typeof Virtual>` 即可，不必单独记这个名字） */\r\nexport type VirtualInstance = InstanceType<VirtualComponent>\r\n\r\nexport default Virtual\r\n\r\n"],"mappings":";;;AA2IA,IAAM2C,UA9Ec3C,iCAEhBO,OACAC,QACG;CACH,MAAM,EAAEC,OAAOC,OAAOC,WAAWH;CAEjC,MAAMI,OAAOV,IAAiB;CAE9B,MAAM,EAAEW,OAAOC,YAAYT,eAAkBO,MAAM;EACjDG,kBAAkBR,MAAMQ,cAAc,CAAA;EACtCC,kBAAkBT,MAAMS;EACxBC,oBAAoBV,MAAMU;EAC1BC,WAAWX,MAAMW;CACnB,CAAC;CAEDP,OAAOG,OAAO;CAEd,aAAa;EACX,MAAMK,QAA4B;GAChCC,MAAMR,KAAKS;GACXC,MAAMT,MAAMU;GACZC,OAAO;IACLC,MAAMZ,MAAMa;IACZC,IAAId,MAAMe;GACZ;GACA,GAAGd;EACL;EAEA,MAAMe,YAAY5B,WAChB;GACE6B,OAAO;GACP5B,KAAKU;EACP,GACAF,KACF;EAEA,OAAAN,YAAA,OACWyB,WAAS,CAAAzB,YAAA,OAAA;GAAA,SAAA;GAAA,SAGP;IACL2B,YAAYlB,MAAMmB,yBAAyB;IAC3CC,eAAepB,MAAMqB,uBAAuB;GAC9C;EAAC,GAAA,CACAzB,MAAM0B,UAAUhB,KAAK,CAAC,CAAA,CAAA,CAAA;CAI/B;AACF,GACA;CACEiB,MAAM;CACNC,cAAc;CACd9B,OAAO;EACLW,KAAK;GACHoB,MAAM,CAACC,QAAQC,KAAK;GACpBL,SAAS;EACX;EACApB,YAAY;GACVuB,MAAME;GACNL,eAAe,CAAA;EACjB;EACAnB,YAAY;GACVsB,MAAMC;GACNJ,SAAS;EACX;EACAlB,cAAc;GACZqB,MAAMG;GAGNN,SAAS;EACX;CACF;CACA1B,OAAOiC;AACT,CAGcpC"}
+{"version":3,"file":"Virtual.js","names":["defineComponent","mergeProps","ref","createVNode","_createVNode","useVirtualList","VirtualImpl","props","ctx","slots","attrs","expose","root","state","methods","sourceData","itemHeight","itemHeightFn","pad","scope","elem","value","data","visibleData","index","from","fromIndex","to","toIndex","rootProps","class","paddingTop","startPlaceholderHeight","paddingBottom","endPlaceholderHeight","default","name","inheritAttrs","type","Number","Array","Function","Object","Virtual"],"sources":["../../../components/virtual/Virtual.tsx"],"sourcesContent":["import type { PropType, SetupContext, SlotsType } from 'vue'\r\nimport { defineComponent, mergeProps, ref } from 'vue'\r\nimport { useVirtualList } from './useVirtualList'\r\nimport type { VirtualListMethods } from './useVirtualList'\r\n\r\n/** 默认插槽作用域；一般不用手写，由 sourceData + v-slots 自动推断 */\r\nexport interface DataListOptions<T = any> {\r\n  data: T[]\r\n  index: {\r\n    from: number\r\n    to: number\r\n  }\r\n  elem?: HTMLElement\r\n  pad?: number\r\n  scrollTo: (x: number, y: number) => void\r\n  scrollToIndex: (index: number) => void\r\n  updateItemHeight: (index: number, height: number) => void\r\n  updateItemHeights: (\r\n    heightMap: Array<{ index: number; height: number }>,\r\n  ) => void\r\n  getScrollInfo: () => {\r\n    scrollTop: number\r\n    fromIndex: number\r\n    toIndex: number\r\n    visibleDataLength: number\r\n  }\r\n  getOffsetForIndex: (index: number) => number\r\n  refresh: () => void\r\n  isIndexVisible: (index: number) => boolean\r\n}\r\n\r\nexport interface VirtualProps<T = any> {\r\n  pad?: number | [number, number]\r\n  sourceData?: T[]\r\n  itemHeight?: number\r\n  itemHeightFn?: ((index: number, item: T) => number) | null\r\n}\r\n\r\nexport type VirtualSlots<T = any> = {\r\n  default?: (scope: DataListOptions<T>) => any\r\n}\r\n\r\n/** Vue TSX 通过 $props 取属性；把 v-slots 放进 $props 才能跟 sourceData 一起推断 T */\r\nexport type VirtualJSXProps<T = any> = VirtualProps<T> & {\r\n  'v-slots'?: VirtualSlots<T>\r\n  vSlots?: VirtualSlots<T>\r\n  class?: unknown\r\n  style?: unknown\r\n}\r\n\r\nconst VirtualImpl = defineComponent(\r\n  <T = any,>(\r\n    props: VirtualProps<T>,\r\n    ctx: SetupContext<{}, SlotsType<VirtualSlots<T>>>,\r\n  ) => {\r\n    const { slots, attrs, expose } = ctx\r\n\r\n    const root = ref<HTMLElement>()\r\n\r\n    const { state, methods } = useVirtualList<T>(root, {\r\n      sourceData: () => props.sourceData || [],\r\n      itemHeight: () => props.itemHeight,\r\n      itemHeightFn: () => props.itemHeightFn,\r\n      pad: () => props.pad,\r\n    })\r\n\r\n    expose(methods)\r\n\r\n    return () => {\r\n      const scope: DataListOptions<T> = {\r\n        elem: root.value,\r\n        data: state.visibleData,\r\n        index: {\r\n          from: state.fromIndex,\r\n          to: state.toIndex,\r\n        },\r\n        ...methods,\r\n      }\r\n\r\n      const rootProps = mergeProps(\r\n        {\r\n          class: 'w-virtual',\r\n          ref: root,\r\n        },\r\n        attrs,\r\n      )\r\n\r\n      return (\r\n        <div {...rootProps}>\r\n          <div\r\n            class=\"w-virtual-content\"\r\n            style={{\r\n              paddingTop: state.startPlaceholderHeight + 'px',\r\n              paddingBottom: state.endPlaceholderHeight + 'px',\r\n            }}>\r\n            {slots.default?.(scope)}\r\n          </div>\r\n        </div>\r\n      )\r\n    }\r\n  },\r\n  {\r\n    name: 'Virtual',\r\n    inheritAttrs: false,\r\n    props: {\r\n      pad: {\r\n        type: [Number, Array] as PropType<number | [number, number]>,\r\n        default: 2,\r\n      },\r\n      sourceData: {\r\n        type: Array as PropType<any[]>,\r\n        default: () => [],\r\n      },\r\n      itemHeight: {\r\n        type: Number,\r\n        default: 0,\r\n      },\r\n      itemHeightFn: {\r\n        type: Function as unknown as PropType<\r\n          ((index: number, item: any) => number) | null\r\n        >,\r\n        default: null,\r\n      },\r\n    },\r\n    slots: Object as SlotsType<VirtualSlots>,\r\n  },\r\n)\r\n\r\n/**\r\n * Vue JSX 看的是实例上的 `$props`（不是调用签名，也不支持 `<Virtual<T>>`）。\r\n * 勿再 `export type VirtualComponent = typeof Virtual`，否则 hover 只显示别名。\r\n * `<Virtual sourceData={list} v-slots={{ default: ({ data }) => ... }} />`\r\n * 即可从 list 推断 data 的元素类型。\r\n */\r\nconst Virtual = VirtualImpl as unknown as {\r\n  new <T = any>(): VirtualListMethods & {\r\n    $props: VirtualJSXProps<T>\r\n  }\r\n}\r\n\r\n/** 实例类型（一般写 `InstanceType<typeof Virtual>` 即可） */\r\nexport type VirtualInstance = InstanceType<typeof Virtual>\r\n\r\nexport default Virtual\r\n\r\n"],"mappings":";;;;;;;;;AAsIA,IAAM2C,UApFc3C,iCAEhBO,OACAC,QACG;CACH,MAAM,EAAEC,OAAOC,OAAOC,WAAWH;CAEjC,MAAMI,OAAOV,IAAiB;CAE9B,MAAM,EAAEW,OAAOC,YAAYT,eAAkBO,MAAM;EACjDG,kBAAkBR,MAAMQ,cAAc,CAAA;EACtCC,kBAAkBT,MAAMS;EACxBC,oBAAoBV,MAAMU;EAC1BC,WAAWX,MAAMW;CACnB,CAAC;CAEDP,OAAOG,OAAO;CAEd,aAAa;EACX,MAAMK,QAA4B;GAChCC,MAAMR,KAAKS;GACXC,MAAMT,MAAMU;GACZC,OAAO;IACLC,MAAMZ,MAAMa;IACZC,IAAId,MAAMe;GACZ;GACA,GAAGd;EACL;EAEA,MAAMe,YAAY5B,WAChB;GACE6B,OAAO;GACP5B,KAAKU;EACP,GACAF,KACF;EAEA,OAAAN,YAAA,OACWyB,WAAS,CAAAzB,YAAA,OAAA;GAAA,SAAA;GAAA,SAGP;IACL2B,YAAYlB,MAAMmB,yBAAyB;IAC3CC,eAAepB,MAAMqB,uBAAuB;GAC9C;EAAC,GAAA,CACAzB,MAAM0B,UAAUhB,KAAK,CAAC,CAAA,CAAA,CAAA;CAI/B;AACF,GACA;CACEiB,MAAM;CACNC,cAAc;CACd9B,OAAO;EACLW,KAAK;GACHoB,MAAM,CAACC,QAAQC,KAAK;GACpBL,SAAS;EACX;EACApB,YAAY;GACVuB,MAAME;GACNL,eAAe,CAAA;EACjB;EACAnB,YAAY;GACVsB,MAAMC;GACNJ,SAAS;EACX;EACAlB,cAAc;GACZqB,MAAMG;GAGNN,SAAS;EACX;CACF;CACA1B,OAAOiC;AACT,CAScpC"}

package/dist/index.d.ts

@@ -1,6 +1,12 @@
-import { Component } from 'vue';
+import { Component, DefineComponent } from 'vue';
 import { ConfirmApi } from './components/confirm';
 import { NoticeApi } from './components/notice/types';
+import { BtnJSXProps } from './components/btn';
+import { CopyJSXProps } from './components/copy';
+import { CornerEarsJSXProps } from './components/cornerEars';
+import { ImageJSXProps } from './components/image';
+import { PictureJSXProps } from './components/picture';
+import { TextareaJSXProps } from './components/textarea';
 export * from './components';
 export * from './use';
 export * from './config/types';
@@ -12,15 +18,15 @@ import type * as components from './components';
 declare module 'vue' {
     interface GlobalComponents {
         Checkbox: typeof components.Checkbox;
-        Btn: typeof components.Btn;
+        Btn: DefineComponent<BtnJSXProps>;
         BtnGroup: typeof components.BtnGroup;
         Cascade: typeof components.Cascade;
         Choose: typeof components.Choose;
         ChooseItem: typeof components.ChooseItem;
         Choose2: typeof components.Choose2;
         Close: Component<InstanceType<typeof components.Close>['$props']>;
-        Copy: typeof components.Copy;
-        CornerEars: typeof components.CornerEars;
+        Copy: DefineComponent<CopyJSXProps>;
+        CornerEars: DefineComponent<CornerEarsJSXProps>;
         ColorPicker: Component<InstanceType<typeof components.ColorPicker>['$props']>;
         DatePicker: typeof components.DatePicker;
         Drawer: typeof components.Drawer;
@@ -31,8 +37,8 @@ declare module 'vue' {
         Form: typeof components.Form;
         FormItem: typeof components.FormItem;
         Icon: Component<InstanceType<typeof components.Icon>['$props']>;
-        Image: typeof components.Image;
-        Picture: typeof components.Picture;
+        Image: DefineComponent<ImageJSXProps>;
+        Picture: DefineComponent<PictureJSXProps>;
         Layer: Component<InstanceType<typeof components.Layer>['$props']>;
         LcdFont: typeof components.LcdFont;
         List: typeof components.List;
@@ -55,17 +61,16 @@ declare module 'vue' {
         Toggle: Component<InstanceType<typeof components.Toggle>['$props']>;
         Tooltip: Component<InstanceType<typeof components.Tooltip>['$props']>;
         Trigger: Component<InstanceType<typeof components.Trigger>['$props']>;
+        /** 泛型组件：须用 typeof，保留构造器泛型推断 */
         Tab: typeof components.Tab;
         Virtual: typeof components.Virtual;
         Write: Component<InstanceType<typeof components.Write>['$props']>;
-        Textarea: typeof components.Textarea;
+        Textarea: DefineComponent<TextareaJSXProps>;
         Tree: typeof components.Tree;
         TreeChoose: typeof components.TreeChoose;
         Upload: typeof components.Upload;
         Scrollbar: Component<InstanceType<typeof components.Scrollbar>['$props']>;
     }
-}
-declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         $confirm: ConfirmApi;
         $notice: NoticeApi;
@@ -73,15 +78,16 @@ declare module '@vue/runtime-core' {
 }
 declare global {
     const Checkbox: typeof components.Checkbox;
-    const Btn: typeof components.Btn;
+    /** demo TSX 全局名：须用 DefineComponent（Component 无构造签名，JSX 会报错） */
+    const Btn: DefineComponent<BtnJSXProps>;
     const BtnGroup: typeof components.BtnGroup;
     const Cascade: typeof components.Cascade;
     const Choose: typeof components.Choose;
     const ChooseItem: typeof components.ChooseItem;
     const Choose2: typeof components.Choose2;
     const Close: typeof components.Close;
-    const Copy: typeof components.Copy;
-    const CornerEars: typeof components.CornerEars;
+    const Copy: DefineComponent<CopyJSXProps>;
+    const CornerEars: DefineComponent<CornerEarsJSXProps>;
     const ColorPicker: typeof components.ColorPicker;
     const DatePicker: typeof components.DatePicker;
     const Drawer: typeof components.Drawer;
@@ -92,8 +98,7 @@ declare global {
     const Form: typeof components.Form;
     const FormItem: typeof components.FormItem;
     const Icon: typeof components.Icon;
-    const Image: typeof components.Image;
-    const Picture: typeof components.Picture;
+    const Picture: DefineComponent<PictureJSXProps>;
     const Layer: typeof components.Layer;
     const LcdFont: typeof components.LcdFont;
     const List: typeof components.List;
@@ -119,7 +124,7 @@ declare global {
     const Tab: typeof components.Tab;
     const Virtual: typeof components.Virtual;
     const Write: typeof components.Write;
-    const Textarea: typeof components.Textarea;
+    const Textarea: DefineComponent<TextareaJSXProps>;
     const Tree: typeof components.Tree;
     const TreeChoose: typeof components.TreeChoose;
     const Upload: typeof components.Upload;

package/dist/index.js

@@ -36,7 +36,7 @@ import Write_default from "./components/write/Write.js";
 import useRequest from "./use/useRequest.js";
 import useVisibleResize from "./use/useVisibleResize.js";
 import Choose2_default from "./components/choose2/Choose2.js";
-import CopyImpl from "./components/copy/Copy.js";
+import Copy from "./components/copy/Copy.js";
 import CornerEars from "./components/cornerEars/CornerEars.js";
 import ColorPicker_default from "./components/colorPicker/ColorPicker.js";
 import useScaleFromPoint, { captureScaleFromPoint, ensureScaleFromPointTracking, getScaleFromPoint, originFromElement } from "./use/useScaleFromPoint.js";
@@ -51,10 +51,11 @@ import Ellipsis_default from "./components/ellipsis/Ellipsis.js";
 import Equalizer_default from "./components/equalizer/Equalizer.js";
 import Form_default from "./components/form/Form.js";
 import FormItem_default from "./components/formItem/FormItem.js";
-import ImageImpl from "./components/image/Image.js";
+import Image from "./components/image/Image.js";
 import { PICTURE_VIEWPORT_ZOOM_STEP, clampScale, computeFitScale, createPictureViewport, normalizeRotate, toTransformCss, zoomAtPoint } from "./use/usePictureViewport.js";
 import SvgIcon, { resolvePlayModeIconName } from "./components/svgIcon/SvgIcon.js";
-import PictureImpl from "./components/picture/Picture.js";
+import usePointerDrag from "./use/usePointerDrag.js";
+import Picture from "./components/picture/Picture.js";
 import { LCD_FONT_FALLBACK } from "./components/lcdFont/config.js";
 import LcdFont_default from "./components/lcdFont/LcdFont.js";
 import Match_default from "./components/match/Match.js";
@@ -75,7 +76,7 @@ import Slider_default from "./components/slider/Slider.js";
 import Switch_default from "./components/switch/Switch.js";
 import TimePicker_default from "./components/time/TimePicker.js";
 import Tab from "./components/tab/Tab.js";
-import TextareaImpl from "./components/textarea/Textarea.js";
+import Textarea from "./components/textarea/Textarea.js";
 import Tree from "./components/tree/Tree.js";
 import TreeChoose_default from "./components/tree-choose/TreeChoose.js";
 import useUpload, { formatFileSize, isImageFile } from "./use/useUpload.js";
@@ -88,4 +89,4 @@ import useParentNode from "./use/useParentNode.js";
 import { EnumBtnType, EnumPlacement } from "./config/dictionary.js";
 import { UI } from "./plugin.js";
 import "./theme/index.css";
-export { AudioPlayer_default as AudioPlayer, Btn, BtnGroup, Cascade_default as Cascade, Checkbox_default as Checkbox, Choose_default as Choose, Choose2_default as Choose2, ChooseItem_default as ChooseItem, CircleProgress_default as CircleProgress, Close_default as Close, ColorPicker_default as ColorPicker, confirm_default as Confirm, CopyImpl as Copy, CornerEars, DATE_PICKER_FALLBACK, DatePicker_default as DatePicker, Drawer_default as Drawer, Ellipsis_default as Ellipsis, Empty_default as Empty, EnumBtnType, EnumPlacement, Equalizer_default as Equalizer, Fallback_default as Fallback, Form_default as Form, FormItem_default as FormItem, ICON_FALLBACK, Icon_default as Icon, ImageImpl as Image, LCD_FONT_FALLBACK, Layer_default as Layer, LcdFont_default as LcdFont, List_default as List, Loading_default as Loading, Mask_default as Mask, Match_default as Match, Modal_default as Modal, NoticePlugin as Notice, Number_default as Num, PICTURE_VIEWPORT_ZOOM_STEP, Pagination_default as Pagination, PictureImpl as Picture, Progress_default as Progress, Radio_default as Radio, Scrollbar_default as Scrollbar, Sheet_default as Sheet, SlideDown_default as SlideDown, Slider_default as Slider, SvgIcon, Switch_default as Switch, Tab, TextareaImpl as Textarea, TimePicker_default as TimePicker, Toggle_default as Toggle, Tooltip_default as Tooltip, Tree, TreeChoose_default as TreeChoose, Trigger_default as Trigger, UI, UI_CONFIG_KEY, UI_CONTEXT_KEY, Upload_default as Upload, Virtual, Write_default as Write, captureScaleFromPoint, clampScale, computeFitScale, createPictureViewport, de_DE_default as deDE, UI as default, defaultConfig, en_US_default as enUS, ensureScaleFromPointTracking, formatAudioTime, formatFileSize, getScaleFromPoint, isImageFile, normalizeRotate, originFromElement, pushEscLayer, resolveIconName, resolvePlayModeIconName, toTransformCss, useAudioPlayer, useBoundingClientRect, useChildComponentsCollector, useComponentClass, useComponentConfig, useCount, useDate, useDelay, useElement, useEscStack, useEvent, useFormItem, useGlobalZIndex, useMouse, useMousePositionInElement, useParentNode, usePercentDrag, useRequest, useScaleFromPoint, useScroll, useSearch, useSlot, useTabIndex, useUpload, useVisibleResize, zh_CN_default as zhCN, zoomAtPoint };
+export { AudioPlayer_default as AudioPlayer, Btn, BtnGroup, Cascade_default as Cascade, Checkbox_default as Checkbox, Choose_default as Choose, Choose2_default as Choose2, ChooseItem_default as ChooseItem, CircleProgress_default as CircleProgress, Close_default as Close, ColorPicker_default as ColorPicker, confirm_default as Confirm, Copy, CornerEars, DATE_PICKER_FALLBACK, DatePicker_default as DatePicker, Drawer_default as Drawer, Ellipsis_default as Ellipsis, Empty_default as Empty, EnumBtnType, EnumPlacement, Equalizer_default as Equalizer, Fallback_default as Fallback, Form_default as Form, FormItem_default as FormItem, ICON_FALLBACK, Icon_default as Icon, Image, LCD_FONT_FALLBACK, Layer_default as Layer, LcdFont_default as LcdFont, List_default as List, Loading_default as Loading, Mask_default as Mask, Match_default as Match, Modal_default as Modal, NoticePlugin as Notice, Number_default as Num, PICTURE_VIEWPORT_ZOOM_STEP, Pagination_default as Pagination, Picture, Progress_default as Progress, Radio_default as Radio, Scrollbar_default as Scrollbar, Sheet_default as Sheet, SlideDown_default as SlideDown, Slider_default as Slider, SvgIcon, Switch_default as Switch, Tab, Textarea, TimePicker_default as TimePicker, Toggle_default as Toggle, Tooltip_default as Tooltip, Tree, TreeChoose_default as TreeChoose, Trigger_default as Trigger, UI, UI_CONFIG_KEY, UI_CONTEXT_KEY, Upload_default as Upload, Virtual, Write_default as Write, captureScaleFromPoint, clampScale, computeFitScale, createPictureViewport, de_DE_default as deDE, UI as default, defaultConfig, en_US_default as enUS, ensureScaleFromPointTracking, formatAudioTime, formatFileSize, getScaleFromPoint, isImageFile, normalizeRotate, originFromElement, pushEscLayer, resolveIconName, resolvePlayModeIconName, toTransformCss, useAudioPlayer, useBoundingClientRect, useChildComponentsCollector, useComponentClass, useComponentConfig, useCount, useDate, useDelay, useElement, useEscStack, useEvent, useFormItem, useGlobalZIndex, useMouse, useMousePositionInElement, useParentNode, usePercentDrag, usePointerDrag, useRequest, useScaleFromPoint, useScroll, useSearch, useSlot, useTabIndex, useUpload, useVisibleResize, zh_CN_default as zhCN, zoomAtPoint };

package/dist/use/index.d.ts

@@ -7,6 +7,8 @@ export { default as useCount } from './useCount';
 export { default as useDate } from './useDate';
 export { default as useDelay } from './useDelay';
 export { default as useFormItem } from './useFormItem';
+export { default as usePointerDrag } from './usePointerDrag';
+export type { DragPointerLike, PointerDragCtx, UsePointerDragOptions, } from './usePointerDrag';
 export { default as useElement } from './useElement';
 export { default as useEvent } from './useEvent';
 export { default as useGlobalZIndex } from './useGlobalZIndex';

package/dist/use/useChildComponentsCollector.d.ts

@@ -0,0 +1,5 @@
+import { ComponentInternalInstance, Ref } from 'vue';
+export default function useChildComponentsCollector(): {
+    container: Ref<Map<symbol, ComponentInternalInstance>>;
+    collector: (ins: any) => void;
+};

package/dist/use/useChildComponentsCollector.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChildComponentsCollector.js","names":[],"sources":["../../use/useChildComponentsCollector.ts"],"sourcesContent":["import type { ComponentInternalInstance } from \"vue\"\r\nimport { onMounted, onUpdated, onUnmounted } from \"vue\"\r\nimport { ref, computed, getCurrentInstance } from \"vue\"\r\nexport default function useChildComponentsCollector() {\r\n  const currentInstance = getCurrentInstance()\r\n  const currentUid = computed(() => {\r\n    // console.log('computed')\r\n    if (currentInstance?.uid) {\r\n      return Symbol(currentInstance.uid)\r\n    }\r\n  })\r\n  const container = ref<Map<symbol, ComponentInternalInstance>>(new Map())\r\n\r\n  function collector(ins: any) {\r\n    if (ins !== null) {\r\n      const _uid = Symbol(ins.uid)\r\n      container.value.set(_uid, ins)\r\n    }\r\n  }\r\n\r\n  function remove() {\r\n    if (currentInstance) {\r\n      //   container.value.delete()\r\n    }\r\n  }\r\n\r\n  onMounted(() => {\r\n    // console.log('onMMMM')\r\n    collector(currentInstance)\r\n  })\r\n  onUnmounted(remove)\r\n\r\n  return {\r\n    container,\r\n    collector,\r\n  }\r\n}\r\n"],"mappings":";;AAGA,SAAwB,8BAA8B;CACpD,MAAM,kBAAkB,mBAAmB;CACxB,eAAe;EAEhC,IAAI,iBAAiB,KACnB,OAAO,OAAO,gBAAgB,GAAG;CAErC,CAAC;CACD,MAAM,YAAY,oBAA4C,IAAI,IAAI,CAAC;CAEvE,SAAS,UAAU,KAAU;EAC3B,IAAI,QAAQ,MAAM;GAChB,MAAM,OAAO,OAAO,IAAI,GAAG;GAC3B,UAAU,MAAM,IAAI,MAAM,GAAG;EAC/B;CACF;CAEA,SAAS,SAAS;EAChB,IAAI,iBAAiB,CAErB;CACF;CAEA,gBAAgB;EAEd,UAAU,eAAe;CAC3B,CAAC;CACD,YAAY,MAAM;CAElB,OAAO;EACL;EACA;CACF;AACF"}
+{"version":3,"file":"useChildComponentsCollector.js","names":[],"sources":["../../use/useChildComponentsCollector.ts"],"sourcesContent":["import type { ComponentInternalInstance, Ref } from \"vue\"\r\nimport { onMounted, onUpdated, onUnmounted } from \"vue\"\r\nimport { ref, computed, getCurrentInstance } from \"vue\"\r\nexport default function useChildComponentsCollector(): {\r\n  container: Ref<Map<symbol, ComponentInternalInstance>>\r\n  collector: (ins: any) => void\r\n} {\r\n  const currentInstance = getCurrentInstance()\r\n  const currentUid = computed(() => {\r\n    // console.log('computed')\r\n    if (currentInstance?.uid) {\r\n      return Symbol(currentInstance.uid)\r\n    }\r\n  })\r\n  const container = ref<Map<symbol, ComponentInternalInstance>>(new Map())\r\n\r\n  function collector(ins: any) {\r\n    if (ins !== null) {\r\n      const _uid = Symbol(ins.uid)\r\n      container.value.set(_uid, ins)\r\n    }\r\n  }\r\n\r\n  function remove() {\r\n    if (currentInstance) {\r\n      //   container.value.delete()\r\n    }\r\n  }\r\n\r\n  onMounted(() => {\r\n    // console.log('onMMMM')\r\n    collector(currentInstance)\r\n  })\r\n  onUnmounted(remove)\r\n\r\n  return {\r\n    container,\r\n    collector,\r\n  }\r\n}\r\n"],"mappings":";;AAGA,SAAwB,8BAGtB;CACA,MAAM,kBAAkB,mBAAmB;CACxB,eAAe;EAEhC,IAAI,iBAAiB,KACnB,OAAO,OAAO,gBAAgB,GAAG;CAErC,CAAC;CACD,MAAM,YAAY,oBAA4C,IAAI,IAAI,CAAC;CAEvE,SAAS,UAAU,KAAU;EAC3B,IAAI,QAAQ,MAAM;GAChB,MAAM,OAAO,OAAO,IAAI,GAAG;GAC3B,UAAU,MAAM,IAAI,MAAM,GAAG;EAC/B;CACF;CAEA,SAAS,SAAS;EAChB,IAAI,iBAAiB,CAErB;CACF;CAEA,gBAAgB;EAEd,UAAU,eAAe;CAC3B,CAAC;CACD,YAAY,MAAM;CAElB,OAAO;EACL;EACA;CACF;AACF"}

package/dist/use/usePercentDrag.d.ts

@@ -11,7 +11,7 @@ declare function clampPercent(value: number): number;
 declare function percentFromClientX(el: HTMLElement, clientX: number): number;
 /**
  * 在元素上按下并拖拽，按水平位置换算 0–100 百分比。
- * 适用于进度条、音量条等。
+ * 适用于进度条、音量条等。会话层委托 `usePointerDrag`（mouse + window，与原先一致）。
  */
 export default function usePercentDrag(options: UsePercentDragOptions): {
     dragging: Ref<boolean, boolean>;

package/dist/use/usePercentDrag.js

@@ -1,4 +1,4 @@
-import { onUnmounted, ref } from "vue";
+import usePointerDrag from "./usePointerDrag.js";
 //#region use/usePercentDrag.ts
 function clampPercent(value) {
 	return Math.max(0, Math.min(100, value));
@@ -10,10 +10,9 @@ function percentFromClientX(el, clientX) {
 }
 /**
 * 在元素上按下并拖拽，按水平位置换算 0–100 百分比。
-* 适用于进度条、音量条等。
+* 适用于进度条、音量条等。会话层委托 `usePointerDrag`（mouse + window，与原先一致）。
 */
 function usePercentDrag(options) {
-	const dragging = ref(false);
 	let lastPercent = 0;
 	function readPercent(clientX) {
 		const el = options.target.value;
@@ -21,32 +20,23 @@ function usePercentDrag(options) {
 		lastPercent = percentFromClientX(el, clientX);
 		return lastPercent;
 	}
-	function onWindowMove(e) {
-		if (!dragging.value) return;
-		const percent = readPercent(e.clientX);
-		options.onMove?.(percent);
-	}
-	function onWindowUp(e) {
-		if (!dragging.value) return;
-		const percent = readPercent(e.clientX);
-		dragging.value = false;
-		window.removeEventListener("mousemove", onWindowMove);
-		window.removeEventListener("mouseup", onWindowUp);
-		options.onEnd?.(percent);
-	}
-	function onMouseDown(e) {
-		if (options.disabled?.()) return;
-		e.preventDefault();
-		const percent = readPercent(e.clientX);
-		dragging.value = true;
-		options.onStart?.(percent);
-		options.onMove?.(percent);
-		window.addEventListener("mousemove", onWindowMove);
-		window.addEventListener("mouseup", onWindowUp);
-	}
-	onUnmounted(() => {
-		window.removeEventListener("mousemove", onWindowMove);
-		window.removeEventListener("mouseup", onWindowUp);
+	const { dragging, onMouseDown } = usePointerDrag({
+		events: "mouse",
+		bind: "window",
+		disabled: options.disabled,
+		onStart: (e) => {
+			e.preventDefault();
+			const percent = readPercent(e.clientX);
+			options.onStart?.(percent);
+			options.onMove?.(percent);
+		},
+		onMove: (e) => {
+			options.onMove?.(readPercent(e.clientX));
+		},
+		onEnd: (e) => {
+			const percent = e ? readPercent(e.clientX) : lastPercent;
+			options.onEnd?.(percent);
+		}
 	});
 	return {
 		dragging,

package/dist/use/usePercentDrag.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePercentDrag.js","names":[],"sources":["../../use/usePercentDrag.ts"],"sourcesContent":["import type { Ref } from 'vue'\r\nimport { onUnmounted, ref } from 'vue'\r\n\r\nexport interface UsePercentDragOptions {\r\n  /** 取值范围元素；拖拽过程中以该元素宽度换算百分比 */\r\n  target: Ref<HTMLElement | undefined | null>\r\n  disabled?: () => boolean\r\n  onStart?: (percent: number) => void\r\n  onMove?: (percent: number) => void\r\n  onEnd?: (percent: number) => void\r\n}\r\n\r\nfunction clampPercent(value: number) {\r\n  return Math.max(0, Math.min(100, value))\r\n}\r\n\r\nfunction percentFromClientX(el: HTMLElement, clientX: number) {\r\n  const rect = el.getBoundingClientRect()\r\n  if (!rect.width) return 0\r\n  return clampPercent(((clientX - rect.left) / rect.width) * 100)\r\n}\r\n\r\n/**\r\n * 在元素上按下并拖拽，按水平位置换算 0–100 百分比。\r\n * 适用于进度条、音量条等。\r\n */\r\nexport default function usePercentDrag(options: UsePercentDragOptions) {\r\n  const dragging = ref(false)\r\n  let lastPercent = 0\r\n\r\n  function readPercent(clientX: number) {\r\n    const el = options.target.value\r\n    if (!el) return lastPercent\r\n    lastPercent = percentFromClientX(el, clientX)\r\n    return lastPercent\r\n  }\r\n\r\n  function onWindowMove(e: MouseEvent) {\r\n    if (!dragging.value) return\r\n    const percent = readPercent(e.clientX)\r\n    options.onMove?.(percent)\r\n  }\r\n\r\n  function onWindowUp(e: MouseEvent) {\r\n    if (!dragging.value) return\r\n    const percent = readPercent(e.clientX)\r\n    dragging.value = false\r\n    window.removeEventListener('mousemove', onWindowMove)\r\n    window.removeEventListener('mouseup', onWindowUp)\r\n    options.onEnd?.(percent)\r\n  }\r\n\r\n  function onMouseDown(e: MouseEvent) {\r\n    if (options.disabled?.()) return\r\n    e.preventDefault()\r\n    const percent = readPercent(e.clientX)\r\n    dragging.value = true\r\n    options.onStart?.(percent)\r\n    options.onMove?.(percent)\r\n    window.addEventListener('mousemove', onWindowMove)\r\n    window.addEventListener('mouseup', onWindowUp)\r\n  }\r\n\r\n  onUnmounted(() => {\r\n    window.removeEventListener('mousemove', onWindowMove)\r\n    window.removeEventListener('mouseup', onWindowUp)\r\n  })\r\n\r\n  return {\r\n    dragging,\r\n    onMouseDown,\r\n  }\r\n}\r\n\r\nexport { clampPercent, percentFromClientX }\r\n"],"mappings":";;AAYA,SAAS,aAAa,OAAe;CACnC,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACzC;AAEA,SAAS,mBAAmB,IAAiB,SAAiB;CAC5D,MAAM,OAAO,GAAG,sBAAsB;CACtC,IAAI,CAAC,KAAK,OAAO,OAAO;CACxB,OAAO,cAAe,UAAU,KAAK,QAAQ,KAAK,QAAS,GAAG;AAChE;;;;;AAMA,SAAwB,eAAe,SAAgC;CACrE,MAAM,WAAW,IAAI,KAAK;CAC1B,IAAI,cAAc;CAElB,SAAS,YAAY,SAAiB;EACpC,MAAM,KAAK,QAAQ,OAAO;EAC1B,IAAI,CAAC,IAAI,OAAO;EAChB,cAAc,mBAAmB,IAAI,OAAO;EAC5C,OAAO;CACT;CAEA,SAAS,aAAa,GAAe;EACnC,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,UAAU,YAAY,EAAE,OAAO;EACrC,QAAQ,SAAS,OAAO;CAC1B;CAEA,SAAS,WAAW,GAAe;EACjC,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,UAAU,YAAY,EAAE,OAAO;EACrC,SAAS,QAAQ;EACjB,OAAO,oBAAoB,aAAa,YAAY;EACpD,OAAO,oBAAoB,WAAW,UAAU;EAChD,QAAQ,QAAQ,OAAO;CACzB;CAEA,SAAS,YAAY,GAAe;EAClC,IAAI,QAAQ,WAAW,GAAG;EAC1B,EAAE,eAAe;EACjB,MAAM,UAAU,YAAY,EAAE,OAAO;EACrC,SAAS,QAAQ;EACjB,QAAQ,UAAU,OAAO;EACzB,QAAQ,SAAS,OAAO;EACxB,OAAO,iBAAiB,aAAa,YAAY;EACjD,OAAO,iBAAiB,WAAW,UAAU;CAC/C;CAEA,kBAAkB;EAChB,OAAO,oBAAoB,aAAa,YAAY;EACpD,OAAO,oBAAoB,WAAW,UAAU;CAClD,CAAC;CAED,OAAO;EACL;EACA;CACF;AACF"}
+{"version":3,"file":"usePercentDrag.js","names":[],"sources":["../../use/usePercentDrag.ts"],"sourcesContent":["import type { Ref } from 'vue'\r\nimport usePointerDrag from './usePointerDrag'\r\n\r\nexport interface UsePercentDragOptions {\r\n  /** 取值范围元素；拖拽过程中以该元素宽度换算百分比 */\r\n  target: Ref<HTMLElement | undefined | null>\r\n  disabled?: () => boolean\r\n  onStart?: (percent: number) => void\r\n  onMove?: (percent: number) => void\r\n  onEnd?: (percent: number) => void\r\n}\r\n\r\nfunction clampPercent(value: number) {\r\n  return Math.max(0, Math.min(100, value))\r\n}\r\n\r\nfunction percentFromClientX(el: HTMLElement, clientX: number) {\r\n  const rect = el.getBoundingClientRect()\r\n  if (!rect.width) return 0\r\n  return clampPercent(((clientX - rect.left) / rect.width) * 100)\r\n}\r\n\r\n/**\r\n * 在元素上按下并拖拽，按水平位置换算 0–100 百分比。\r\n * 适用于进度条、音量条等。会话层委托 `usePointerDrag`（mouse + window，与原先一致）。\r\n */\r\nexport default function usePercentDrag(options: UsePercentDragOptions) {\r\n  let lastPercent = 0\r\n\r\n  function readPercent(clientX: number) {\r\n    const el = options.target.value\r\n    if (!el) return lastPercent\r\n    lastPercent = percentFromClientX(el, clientX)\r\n    return lastPercent\r\n  }\r\n\r\n  const { dragging, onMouseDown } = usePointerDrag({\r\n    events: 'mouse',\r\n    bind: 'window',\r\n    disabled: options.disabled,\r\n    onStart: (e) => {\r\n      e.preventDefault()\r\n      const percent = readPercent(e.clientX)\r\n      options.onStart?.(percent)\r\n      options.onMove?.(percent)\r\n    },\r\n    onMove: (e) => {\r\n      options.onMove?.(readPercent(e.clientX))\r\n    },\r\n    onEnd: (e) => {\r\n      const percent = e ? readPercent(e.clientX) : lastPercent\r\n      options.onEnd?.(percent)\r\n    },\r\n  })\r\n\r\n  return {\r\n    dragging,\r\n    onMouseDown,\r\n  }\r\n}\r\n\r\nexport { clampPercent, percentFromClientX }\r\n"],"mappings":";;AAYA,SAAS,aAAa,OAAe;CACnC,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACzC;AAEA,SAAS,mBAAmB,IAAiB,SAAiB;CAC5D,MAAM,OAAO,GAAG,sBAAsB;CACtC,IAAI,CAAC,KAAK,OAAO,OAAO;CACxB,OAAO,cAAe,UAAU,KAAK,QAAQ,KAAK,QAAS,GAAG;AAChE;;;;;AAMA,SAAwB,eAAe,SAAgC;CACrE,IAAI,cAAc;CAElB,SAAS,YAAY,SAAiB;EACpC,MAAM,KAAK,QAAQ,OAAO;EAC1B,IAAI,CAAC,IAAI,OAAO;EAChB,cAAc,mBAAmB,IAAI,OAAO;EAC5C,OAAO;CACT;CAEA,MAAM,EAAE,UAAU,gBAAgB,eAAe;EAC/C,QAAQ;EACR,MAAM;EACN,UAAU,QAAQ;EAClB,UAAU,MAAM;GACd,EAAE,eAAe;GACjB,MAAM,UAAU,YAAY,EAAE,OAAO;GACrC,QAAQ,UAAU,OAAO;GACzB,QAAQ,SAAS,OAAO;EAC1B;EACA,SAAS,MAAM;GACb,QAAQ,SAAS,YAAY,EAAE,OAAO,CAAC;EACzC;EACA,QAAQ,MAAM;GACZ,MAAM,UAAU,IAAI,YAAY,EAAE,OAAO,IAAI;GAC7C,QAAQ,QAAQ,OAAO;EACzB;CACF,CAAC;CAED,OAAO;EACL;EACA;CACF;AACF"}