@will-ui/vue 1.0.0

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,193 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import useFormItem from "../../use/useFormItem.js";
+import { TEXTAREA_FALLBACK } from "./config.js";
+import { computed, createVNode, defineComponent, mergeProps, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//#region components/textarea/Textarea.tsx
+function ghostText(value) {
+	if (!value) return "\xA0";
+	return value.endsWith("\n") ? `${value}\u00A0` : value;
+}
+var TextareaImpl = /* @__PURE__ */ defineComponent({
+	name: "Textarea",
+	inheritAttrs: false,
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		size: {
+			type: Number,
+			default: void 0
+		},
+		color: {
+			type: String,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			default: void 0
+		},
+		maxlength: {
+			type: Number,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: void 0
+		},
+		saveDelay: {
+			type: Number,
+			default: void 0
+		},
+		validateEvent: {
+			type: Boolean,
+			default: void 0
+		},
+		cssVars: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: {
+		"update:modelValue": (value) => typeof value === "string",
+		input: (value) => typeof value === "string",
+		change: (value) => typeof value === "string",
+		save: (value) => typeof value === "string"
+	},
+	setup(props, { attrs, emit, expose }) {
+		const cfg = useComponentConfig("Textarea", props, TEXTAREA_FALLBACK);
+		const { formItem, useDisabled } = useFormItem();
+		const disabled = useDisabled(computed(() => cfg.value.disabled));
+		const fieldRef = ref();
+		const inner = ref(props.modelValue ?? "");
+		const composing = ref(false);
+		let saveTimer;
+		watch(() => props.modelValue, (v) => {
+			const next = v ?? "";
+			if (next !== inner.value) inner.value = next;
+		});
+		function clearSaveTimer() {
+			if (saveTimer !== void 0) {
+				clearTimeout(saveTimer);
+				saveTimer = void 0;
+			}
+		}
+		function scheduleSave(value) {
+			clearSaveTimer();
+			const ms = Math.max(0, cfg.value.saveDelay ?? TEXTAREA_FALLBACK.saveDelay);
+			saveTimer = setTimeout(() => {
+				saveTimer = void 0;
+				emit("save", value);
+			}, ms);
+		}
+		function syncScrollTop() {
+			nextTick(() => {
+				if (fieldRef.value) fieldRef.value.scrollTop = 0;
+			});
+		}
+		function commit(value, opts) {
+			let next = value;
+			const max = cfg.value.maxlength;
+			if (max != null && next.length > max) {
+				next = next.slice(0, max);
+				if (fieldRef.value) fieldRef.value.value = next;
+			}
+			inner.value = next;
+			emit("update:modelValue", next);
+			emit("input", next);
+			if (opts?.save !== false) scheduleSave(next);
+			syncScrollTop();
+		}
+		function onInput(e) {
+			commit(e.target.value, { save: !composing.value });
+		}
+		function onCompositionStart() {
+			composing.value = true;
+		}
+		function onCompositionEnd(e) {
+			composing.value = false;
+			commit(e.target.value);
+		}
+		function onChange(e) {
+			const val = e.target.value;
+			if (cfg.value.validateEvent !== false) formItem?.validate("change");
+			emit("change", val);
+		}
+		function onBlur() {
+			if (cfg.value.validateEvent !== false) formItem?.validate("blur");
+		}
+		function onKeydownEnter() {
+			syncScrollTop();
+		}
+		function onWindowResize() {
+			syncScrollTop();
+		}
+		onMounted(() => {
+			window.addEventListener("resize", onWindowResize);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", onWindowResize);
+			clearSaveTimer();
+		});
+		expose({
+			focus: () => fieldRef.value?.focus(),
+			blur: () => fieldRef.value?.blur(),
+			select: () => fieldRef.value?.select(),
+			get textarea() {
+				return fieldRef.value;
+			}
+		});
+		return () => {
+			const { class: klass, style: attrStyle, ...rest } = attrs;
+			const rootProps = mergeProps({
+				class: [
+					"w-textarea",
+					{
+						"w-textarea--block": cfg.value.block,
+						"w-textarea--disabled": disabled.value
+					},
+					klass
+				],
+				style: [toCssVarsStyle({
+					...propSizeToCssVars("textarea", cfg.value.size),
+					...propColorToCssVars("textarea", cfg.value.color),
+					...props.cssVars
+				}), attrStyle]
+			}, {});
+			return createVNode("div", rootProps, [createVNode("div", {
+				"class": "w-textarea-ghost",
+				"aria-hidden": "true"
+			}, [ghostText(inner.value)]), createVNode("textarea", mergeProps(rest, {
+				"ref": fieldRef,
+				"class": "w-textarea-field",
+				"value": inner.value,
+				"placeholder": cfg.value.placeholder,
+				"maxlength": cfg.value.maxlength,
+				"disabled": disabled.value || void 0,
+				"readonly": cfg.value.readonly || void 0,
+				"rows": 1,
+				"onInput": onInput,
+				"onChange": onChange,
+				"onBlur": onBlur,
+				"onCompositionstart": onCompositionStart,
+				"onCompositionend": onCompositionEnd,
+				"onKeydown": (e) => {
+					if (e.key === "Enter") onKeydownEnter();
+				}
+			}), null)]);
+		};
+	}
+});
+//#endregion
+export { TextareaImpl as default };
+
+//# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":["computed","defineComponent","mergeProps","nextTick","onBeforeUnmount","onMounted","ref","watch","createVNode","_createVNode","_mergeProps","propColorToCssVars","propSizeToCssVars","toCssVarsStyle","useComponentConfig","useFormItem","TEXTAREA_FALLBACK","ghostText","value","endsWith","TextareaImpl","name","inheritAttrs","props","modelValue","type","String","default","size","Number","undefined","color","placeholder","maxlength","disabled","Boolean","readonly","block","saveDelay","validateEvent","cssVars","Object","emits","input","change","save","setup","attrs","emit","expose","cfg","formItem","useDisabled","fieldRef","inner","composing","saveTimer","v","next","clearSaveTimer","clearTimeout","scheduleSave","ms","Math","max","setTimeout","syncScrollTop","scrollTop","commit","opts","length","slice","onInput","e","target","onCompositionStart","onCompositionEnd","onChange","val","validate","onBlur","onKeydownEnter","onWindowResize","window","addEventListener","removeEventListener","api","focus","blur","select","textarea","class","klass","style","attrStyle","rest","rootProps","key"],"sources":["../../../components/textarea/Textarea.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  mergeProps,\r\n  nextTick,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  ref,\r\n  watch,\r\n  type PropType,\r\n} from 'vue'\r\nimport {\r\n  propColorToCssVars,\r\n  propSizeToCssVars,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport useFormItem from '../../use/useFormItem'\r\nimport { TEXTAREA_FALLBACK } from './config'\r\n\r\nexport type { TextareaGlobalConfig } from './config'\r\nexport { TEXTAREA_FALLBACK } from './config'\r\n\r\nexport type TextareaProps = {\r\n  modelValue?: string\r\n  size?: number\r\n  color?: string\r\n  placeholder?: string\r\n  maxlength?: number\r\n  disabled?: boolean\r\n  readonly?: boolean\r\n  block?: boolean\r\n  /** 停输后触发 save 的防抖毫秒；默认 3000 */\r\n  saveDelay?: number\r\n  validateEvent?: boolean\r\n  cssVars?: CssVars\r\n}\r\n\r\nexport type TextareaJSXProps = TextareaProps &\r\n  Omit<\r\n    JSX.IntrinsicElements['div'],\r\n    keyof TextareaProps | 'ref' | 'onInput' | 'onChange'\r\n  >\r\n\r\nexport type TextareaExpose = {\r\n  focus: () => void\r\n  blur: () => void\r\n  select: () => void\r\n  textarea: HTMLTextAreaElement | undefined\r\n}\r\n\r\nexport type TextareaComponent = {\r\n  new (): {\r\n    $props: TextareaJSXProps\r\n    $emit: {\r\n      (e: 'update:modelValue', value: string): void\r\n      (e: 'input', value: string): void\r\n      (e: 'change', value: string): void\r\n      (e: 'save', value: string): void\r\n    }\r\n  } & TextareaExpose\r\n}\r\n\r\nfunction ghostText(value: string): string {\r\n  if (!value) return '\\u00A0'\r\n  return value.endsWith('\\n') ? `${value}\\u00A0` : value\r\n}\r\n\r\nconst TextareaImpl = defineComponent({\r\n  name: 'Textarea',\r\n  inheritAttrs: false,\r\n  props: {\r\n    modelValue: { type: String, default: '' },\r\n    size: { type: Number, default: undefined },\r\n    color: { type: String, default: undefined },\r\n    placeholder: { type: String, default: undefined },\r\n    maxlength: { type: Number, default: undefined },\r\n    disabled: { type: Boolean, default: undefined },\r\n    readonly: { type: Boolean, default: undefined },\r\n    block: { type: Boolean, default: undefined },\r\n    saveDelay: { type: Number, default: undefined },\r\n    validateEvent: { type: Boolean, default: undefined },\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: string) => typeof value === 'string',\r\n    input: (value: string) => typeof value === 'string',\r\n    change: (value: string) => typeof value === 'string',\r\n    save: (value: string) => typeof value === 'string',\r\n  },\r\n  setup(props, { attrs, emit, expose }) {\r\n    const cfg = useComponentConfig('Textarea', props, TEXTAREA_FALLBACK)\r\n    const { formItem, useDisabled } = useFormItem()\r\n    const disabled = useDisabled(computed(() => cfg.value.disabled))\r\n\r\n    const fieldRef = ref<HTMLTextAreaElement>()\r\n    const inner = ref(props.modelValue ?? '')\r\n    const composing = ref(false)\r\n    let saveTimer: ReturnType<typeof setTimeout> | undefined\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (v) => {\r\n        const next = v ?? ''\r\n        if (next !== inner.value) inner.value = next\r\n      },\r\n    )\r\n\r\n    function clearSaveTimer() {\r\n      if (saveTimer !== undefined) {\r\n        clearTimeout(saveTimer)\r\n        saveTimer = undefined\r\n      }\r\n    }\r\n\r\n    function scheduleSave(value: string) {\r\n      clearSaveTimer()\r\n      const ms = Math.max(0, cfg.value.saveDelay ?? TEXTAREA_FALLBACK.saveDelay)\r\n      saveTimer = setTimeout(() => {\r\n        saveTimer = undefined\r\n        emit('save', value)\r\n      }, ms)\r\n    }\r\n\r\n    function syncScrollTop() {\r\n      nextTick(() => {\r\n        if (fieldRef.value) fieldRef.value.scrollTop = 0\r\n      })\r\n    }\r\n\r\n    function commit(value: string, opts?: { save?: boolean }) {\r\n      let next = value\r\n      const max = cfg.value.maxlength\r\n      if (max != null && next.length > max) {\r\n        next = next.slice(0, max)\r\n        if (fieldRef.value) fieldRef.value.value = next\r\n      }\r\n      inner.value = next\r\n      emit('update:modelValue', next)\r\n      emit('input', next)\r\n      if (opts?.save !== false) scheduleSave(next)\r\n      syncScrollTop()\r\n    }\r\n\r\n    function onInput(e: Event) {\r\n      // 组字过程也要同步，避免父级重渲染冲掉输入；结束前不触发 save\r\n      commit((e.target as HTMLTextAreaElement).value, {\r\n        save: !composing.value,\r\n      })\r\n    }\r\n\r\n    function onCompositionStart() {\r\n      composing.value = true\r\n    }\r\n\r\n    function onCompositionEnd(e: CompositionEvent) {\r\n      composing.value = false\r\n      commit((e.target as HTMLTextAreaElement).value)\r\n    }\r\n\r\n    function onChange(e: Event) {\r\n      const val = (e.target as HTMLTextAreaElement).value\r\n      if (cfg.value.validateEvent !== false) {\r\n        formItem?.validate('change')\r\n      }\r\n      emit('change', val)\r\n    }\r\n\r\n    function onBlur() {\r\n      if (cfg.value.validateEvent !== false) {\r\n        formItem?.validate('blur')\r\n      }\r\n    }\r\n\r\n    function onKeydownEnter() {\r\n      syncScrollTop()\r\n    }\r\n\r\n    function onWindowResize() {\r\n      syncScrollTop()\r\n    }\r\n\r\n    onMounted(() => {\r\n      window.addEventListener('resize', onWindowResize)\r\n    })\r\n\r\n    onBeforeUnmount(() => {\r\n      window.removeEventListener('resize', onWindowResize)\r\n      clearSaveTimer()\r\n    })\r\n\r\n    const api: TextareaExpose = {\r\n      focus: () => fieldRef.value?.focus(),\r\n      blur: () => fieldRef.value?.blur(),\r\n      select: () => fieldRef.value?.select(),\r\n      get textarea() {\r\n        return fieldRef.value\r\n      },\r\n    }\r\n    expose(api)\r\n\r\n    return () => {\r\n      const { class: klass, style: attrStyle, ...rest } = attrs\r\n      const rootProps = mergeProps(\r\n        {\r\n          class: [\r\n            'w-textarea',\r\n            {\r\n              'w-textarea--block': cfg.value.block,\r\n              'w-textarea--disabled': disabled.value,\r\n            },\r\n            klass,\r\n          ],\r\n          style: [\r\n            toCssVarsStyle({\r\n              ...propSizeToCssVars('textarea', cfg.value.size),\r\n              ...propColorToCssVars('textarea', cfg.value.color),\r\n              ...props.cssVars,\r\n            }),\r\n            attrStyle as any,\r\n          ],\r\n        },\r\n        {},\r\n      )\r\n\r\n      return (\r\n        <div {...rootProps}>\r\n          <div class=\"w-textarea-ghost\" aria-hidden=\"true\">\r\n            {ghostText(inner.value)}\r\n          </div>\r\n          <textarea\r\n            {...rest}\r\n            ref={fieldRef}\r\n            class=\"w-textarea-field\"\r\n            value={inner.value}\r\n            placeholder={cfg.value.placeholder}\r\n            maxlength={cfg.value.maxlength}\r\n            disabled={disabled.value || undefined}\r\n            readonly={cfg.value.readonly || undefined}\r\n            rows={1}\r\n            onInput={onInput}\r\n            onChange={onChange}\r\n            onBlur={onBlur}\r\n            onCompositionstart={onCompositionStart}\r\n            onCompositionend={onCompositionEnd}\r\n            onKeydown={(e: KeyboardEvent) => {\r\n              if (e.key === 'Enter') onKeydownEnter()\r\n            }}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n  },\r\n})\r\n\r\nexport default TextareaImpl as unknown as TextareaComponent\r\n"],"mappings":"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"}

package/dist/components/textarea/config.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 可通过 `app.use(UI, { components: { Textarea: {...} } })` 配置的项。
+ * 不宜全局配置：modelValue（受控值）、一次性回调。
+ */
+export type TextareaGlobalConfig = Partial<{
+    /** 尺度核（px）→ `--w-prop-textarea-size` */
+    size: number;
+    /** 品牌主色 → `--w-prop-textarea-color`（focus 描边） */
+    color: string;
+    placeholder: string;
+    maxlength: number;
+    disabled: boolean;
+    readonly: boolean;
+    block: boolean;
+    /** 停输后触发 save 的防抖毫秒 */
+    saveDelay: number;
+    /** blur/change 时是否触发 FormItem 校验 */
+    validateEvent: boolean;
+}>;
+export declare const TEXTAREA_FALLBACK: {
+    size: number | undefined;
+    color: string | undefined;
+    placeholder: string | undefined;
+    maxlength: number | undefined;
+    disabled: boolean;
+    readonly: boolean;
+    block: boolean;
+    saveDelay: number;
+    validateEvent: boolean;
+};

package/dist/components/textarea/config.js

@@ -0,0 +1,16 @@
+//#region components/textarea/config.ts
+var TEXTAREA_FALLBACK = {
+	size: void 0,
+	color: void 0,
+	placeholder: void 0,
+	maxlength: void 0,
+	disabled: false,
+	readonly: false,
+	block: false,
+	saveDelay: 3e3,
+	validateEvent: true
+};
+//#endregion
+export { TEXTAREA_FALLBACK };
+
+//# sourceMappingURL=config.js.map

package/dist/components/textarea/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../components/textarea/config.ts"],"sourcesContent":["/**\r\n * 可通过 `app.use(UI, { components: { Textarea: {...} } })` 配置的项。\r\n * 不宜全局配置：modelValue（受控值）、一次性回调。\r\n */\r\nexport type TextareaGlobalConfig = Partial<{\r\n  /** 尺度核（px）→ `--w-prop-textarea-size` */\r\n  size: number\r\n  /** 品牌主色 → `--w-prop-textarea-color`（focus 描边） */\r\n  color: string\r\n  placeholder: string\r\n  maxlength: number\r\n  disabled: boolean\r\n  readonly: boolean\r\n  block: boolean\r\n  /** 停输后触发 save 的防抖毫秒 */\r\n  saveDelay: number\r\n  /** blur/change 时是否触发 FormItem 校验 */\r\n  validateEvent: boolean\r\n}>\r\n\r\nexport const TEXTAREA_FALLBACK = {\r\n  size: undefined as number | undefined,\r\n  color: undefined as string | undefined,\r\n  placeholder: undefined as string | undefined,\r\n  maxlength: undefined as number | undefined,\r\n  disabled: false,\r\n  readonly: false,\r\n  block: false,\r\n  saveDelay: 3000,\r\n  validateEvent: true,\r\n}\r\n"],"mappings":";AAoBA,IAAa,oBAAoB;CAC/B,MAAM,KAAA;CACN,OAAO,KAAA;CACP,aAAa,KAAA;CACb,WAAW,KAAA;CACX,UAAU;CACV,UAAU;CACV,OAAO;CACP,WAAW;CACX,eAAe;AACjB"}

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

@@ -0,0 +1,4 @@
+export { default } from './Textarea';
+export type * from './Textarea';
+export type * from './config';
+export { TEXTAREA_FALLBACK } from './config';

package/dist/components/textarea/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/textarea.css';

package/dist/components/time/Dial.js

@@ -0,0 +1,7 @@
+import Dial_vue_vue_type_script_setup_true_lang_default from "./Dial.vue_vue_type_script_setup_true_lang.js";
+//#region components/time/Dial.vue
+var Dial_default = Dial_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Dial_default as default };
+
+//# sourceMappingURL=Dial.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,178 @@
+import Icon_default from "../icon/Icon.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import Toggle_default from "../toggle/Toggle.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, onMounted, openBlock, ref, renderList, toDisplayString, unref, watchEffect, withCtx } from "vue";
+import "./style/dial.css";
+//#region components/time/Dial.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "w-time-dial" };
+var _hoisted_2 = { class: "w-time-dial-title" };
+var _hoisted_3 = { key: 0 };
+var _hoisted_4 = { key: 1 };
+var _hoisted_5 = { key: 2 };
+var _hoisted_6 = {
+	key: 0,
+	class: "w-time-dial-list"
+};
+var _hoisted_7 = ["onClick"];
+var Dial_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Dial",
+	props: {
+		format: { default: "HH:mm:ss" },
+		value: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const { t } = useUII18n();
+		const props = __props;
+		const emit = __emit;
+		const [h, m, s] = useHms(props);
+		const isMounted = ref(false);
+		const bottom_btn = ref();
+		const top_btn = ref();
+		const createNumberArray = (total, size = 6) => Array.from({ length: total / size }, (el, i) => Array.from({ length: size }, (item, index) => (i * size + index).toString().padStart(2, "0")));
+		const has = computed(() => {
+			const f = props.format;
+			return {
+				m: f.indexOf("mm") > -1,
+				h: f.indexOf("HH") > -1,
+				s: f.indexOf("ss") > -1
+			};
+		});
+		const can = computed(() => {
+			const len = props.value?.length;
+			if (len) {
+				let m = false, s = false;
+				if (len >= 2) m = true;
+				if (len >= 5) s = true;
+				return {
+					h: has.value.h,
+					m: m && has.value.m,
+					s: s && has.value.s
+				};
+			}
+			return {
+				h: false,
+				m: false,
+				s: false
+			};
+		});
+		const arr = computed(() => {
+			const a = [];
+			if (has.value.h) {
+				a.push(createNumberArray(24));
+				if (has.value.m) {
+					a.push(createNumberArray(60));
+					if (has.value.s) a.push(createNumberArray(60));
+				}
+			}
+			return a;
+		});
+		const toggleOptions = {
+			class: "w-dial-item",
+			transform: "translate",
+			direction: "y",
+			itemClass: "w-dial-toggle-item"
+		};
+		function handleWheel(i, { event, prev, next, delay }) {
+			if (event.deltaY > 0) delay(next, 100);
+			else delay(prev, 100);
+		}
+		function handleClick(i, v) {
+			const arr = [];
+			if (i === 0) {
+				if (has.value.h) h.value = v;
+			} else if (i === 1) {
+				if (can.value.m) m.value = v;
+				else return;
+			} else if (can.value.s) s.value = v;
+			else return;
+			if (h.value) arr.push(h.value);
+			if (m.value) arr.push(m.value);
+			if (s.value) arr.push(s.value);
+			emit("change", arr.join(":"));
+		}
+		function getIndex(i) {
+			if (i === 0) {
+				if (h.value === void 0) return 0;
+				else return parseInt("" + Number(h.value) / 6);
+			} else if (i === 1) {
+				if (m.value === void 0) return 0;
+				else return parseInt("" + Number(m.value) / 6);
+			} else if (i === 2) {
+				if (s.value === void 0) return 0;
+				else return parseInt("" + Number(s.value) / 6);
+			}
+		}
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		function useHms(props) {
+			const h = ref();
+			const m = ref();
+			const s = ref();
+			watchEffect(() => {
+				[h.value, m.value, s.value] = (props.value || "").split(":");
+			});
+			return [
+				h,
+				m,
+				s
+			];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [
+					has.value.h ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(t)("time.hour")), 1)) : createCommentVNode("", true),
+					has.value.m ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(t)("time.minute")), 1)) : createCommentVNode("", true),
+					has.value.s ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("time.second")), 1)) : createCommentVNode("", true)
+				]),
+				createElementVNode("div", {
+					class: "w-time-dial-btn",
+					ref_key: "top_btn",
+					ref: top_btn
+				}, null, 512),
+				isMounted.value ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(arr.value, (a, i) => {
+					return openBlock(), createBlock(unref(Toggle_default), mergeProps({ ref_for: true }, toggleOptions, {
+						data: a,
+						index: getIndex(i),
+						onWheel: ($event) => handleWheel(i, $event)
+					}), {
+						default: withCtx(({ item }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(item, (n) => {
+							return openBlock(), createElementBlock("div", {
+								class: normalizeClass(["w-dial-item-item", {
+									"w-dial-item-readonly": i === 0 && !has.value.h || i === 1 && !can.value.m || i === 2 && !can.value.s,
+									"w-dial-item-selected": i === 0 && unref(h) == n || i === 1 && unref(m) == n || i === 2 && unref(s) == n
+								}]),
+								onClick: ($event) => handleClick(i, n)
+							}, toDisplayString(n), 11, _hoisted_7);
+						}), 256))]),
+						use: withCtx(({ prev, next }) => [(openBlock(), createBlock(Teleport, { to: top_btn.value }, [createVNode(unref(Icon_default), {
+							name: "w-icon-sort-down",
+							size: "var(--__icon)",
+							rotate: "",
+							onClick: prev
+						}, null, 8, ["onClick"])], 8, ["to"])), (openBlock(), createBlock(Teleport, { to: bottom_btn.value }, [createVNode(unref(Icon_default), {
+							name: "w-icon-sort-down",
+							size: "var(--__icon)",
+							onClick: next
+						}, null, 8, ["onClick"])], 8, ["to"]))]),
+						_: 2
+					}, 1040, [
+						"data",
+						"index",
+						"onWheel"
+					]);
+				}), 256))])) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: "w-time-dial-btn",
+					ref_key: "bottom_btn",
+					ref: bottom_btn
+				}, null, 512)
+			]);
+		};
+	}
+});
+//#endregion
+export { Dial_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Dial.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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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"}