UNPKG

dm-vue3-ui

Version:

This Components Library will help get you started developing in Vue 3.

103 lines (102 loc) 3.94 kB
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, Fragment, renderList, toDisplayString, normalizeClass, nextTick } from "vue"; import { generatorColumnsHeader, generatorColumnsData, scrollTop } from "../../utils/util"; import { useVModel } from "@vueuse/core"; const _hoisted_1 = { class: "cron-picker-picker-panel-inner" }; const _hoisted_2 = { class: "cron-picker-picker-panel-header" }; const _hoisted_3 = { class: "cron-picker-picker-panel-body" }; const _hoisted_4 = { class: "cron-picker-picker-panel-column-ul" }; const _hoisted_5 = ["onClick"]; const _sfc_main = /* @__PURE__ */ defineComponent({ __name: "index", props: { type: {}, value: {}, runTimes: {} }, emits: ["update:runTimes"], setup(__props, { expose: __expose, emit: __emit }) { const props = __props; const emit = __emit; const valueRunTimes = useVModel(props, "runTimes", emit); const pickerColumnsHeader = computed(() => { return generatorColumnsHeader(props.type); }); const pickerColumnsData = computed(() => { return generatorColumnsData(props.type); }); const setRunTimes = (name, value) => { valueRunTimes.value[name] = value; }; const handleCellClick = (list, cell) => { setRunTimes(list.name, cell.value); scroll( list.name, list.data.findIndex((item) => item.value === cell.value) ); }; const listRefs = {}; const nodeItemRef = (el, name) => { if (el && listRefs) { listRefs[name] = el; } }; const scroll = (type, index) => { let refElm = listRefs[type]; const from = refElm.scrollTop; const to = 32 * index; scrollTop(refElm, from, to, 500); }; const updateScroll = () => { pickerColumnsData.value.forEach((column) => { const type = column.name; console.log(props.value); const selectedColumnValue = props.value[type] || column.data[0].value; let refElm = listRefs[type]; nextTick(() => { refElm.scrollTop = 32 * column.data.findIndex((item) => item.value === selectedColumnValue); }); }); }; __expose({ updateScroll }); return (_ctx, _cache) => { return openBlock(), createElementBlock("div", _hoisted_1, [ createElementVNode("div", _hoisted_2, [ (openBlock(true), createElementBlock(Fragment, null, renderList(pickerColumnsHeader.value, (column, index) => { return openBlock(), createElementBlock("div", { class: "cron-picker-picker-panel-column-title", key: index }, toDisplayString(column), 1); }), 128)) ]), createElementVNode("div", _hoisted_3, [ (openBlock(true), createElementBlock(Fragment, null, renderList(pickerColumnsData.value, (list, index) => { return openBlock(), createElementBlock("div", { class: "cron-picker-picker-panel-column-list", key: index, ref_for: true, ref: (el) => nodeItemRef(el, list.name) }, [ createElementVNode("ul", _hoisted_4, [ (openBlock(true), createElementBlock(Fragment, null, renderList(list.data, (cell) => { return openBlock(), createElementBlock("li", { key: cell.text, class: normalizeClass([ "cron-picker-picker-panel-column-cell", { "cron-picker-picker-panel-column-cell-selected": _ctx.value[list.name] === cell.value } ]), onClick: ($event) => handleCellClick(list, cell) }, toDisplayString(cell.text), 11, _hoisted_5); }), 128)) ]) ]); }), 128)) ]) ]); }; } }); export { _sfc_main as default };