diff --git a/babel.config.js b/babel.config.js index e9558405..81e55256 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,5 +1,55 @@ module.exports = { presets: [ - '@vue/cli-plugin-babel/preset' - ] + '@vue/cli-plugin-babel/preset', + [ + '@babel/env', + { + loose: true, + modules: false + } + ], + '@babel/typescript' + ], + plugins: [ + '@vue/babel-plugin-jsx', + '@babel/proposal-class-properties', + '@babel/transform-runtime', + 'lodash' + ], + overrides: [ + { + test: /\.vue$/, + plugins: [ + '@babel/transform-typescript' + ] + } + ], + env: { + utils: { + ignore: [ + '**/*.test.ts', + '**/*.spec.ts' + ], + presets: [ + [ + '@babel/env', + { + loose: true, + modules: false + } + ] + ], + plugins: [ + [ + 'babel-plugin-module-resolver', + { + root: ['element-plus'], + alias: { + '@element-plus': 'element-plus/lib' + } + } + ] + ] + } + } } diff --git a/build/bincomp.js b/build/bincomp.js new file mode 100644 index 00000000..ad22a057 --- /dev/null +++ b/build/bincomp.js @@ -0,0 +1,43 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const cp = require('child_process') +const { getPackagesSync } = require('@lerna/project') +const ora = require('ora') +const chalk = require('chalk') + +const spinner = ora(`${chalk.blue('Building...')}`).start() +const pkgs = getPackagesSync() + .map(pkg => pkg.name) + .filter(name => + name.includes('@element-plus') && + !name.includes('transition') && + !name.includes('utils'), + ) +const STEP = 4 +const START = 0 +const buildChild = (start, end) => { + let s = start + let e = end + const c1 = cp.spawn('node', ['./build/build.component.js', s, e]) + c1.stdout.on('data', function (data) { + spinner.info(`${chalk.blue(data)}`) + }) + + c1.stderr.on('data', function (data) { + spinner.warn(`${chalk.red(data)}`) + }) + + c1.on('close', function (code) { + s += STEP + e += STEP + if (s > pkgs.length) { + spinner.succeed(`${chalk.green('Build done. Exit code ' + code)}`) + return + } + buildChild(s, e) + }) +} + +/** + * @link https://github.com/ezolenko/rollup-plugin-typescript2/issues/177 + */ +buildChild(START, STEP) diff --git a/build/build-helper.js b/build/build-helper.js new file mode 100644 index 00000000..94222c0f --- /dev/null +++ b/build/build-helper.js @@ -0,0 +1,64 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const helper = require('components-helper') +const { name, version } = require('../package.json') +const icon = require('../website/icon.json') +const icons = icon.map(item => 'el-icon-' + item).join('/') +const tagVer = process.env.TAG_VERSION +const _version = tagVer ? tagVer.startsWith('v') ? tagVer.slice(1) : tagVer : version + +helper({ + name, + version: _version, + entry: 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md', + outDir: 'lib', + reComponentName, + reDocUrl, + reAttribute, + props: 'Attributes', + propsName: 'Attribute', + propsOptions: 'Accepted Values', + eventsName: 'Event Name', + tableRegExp: '#+\\s+(.*\\s*Attributes|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)', +}) + +function reComponentName(title) { + return 'el-' + title.replace(/\B([A-Z])/g, '-$1').replace(/[ ]+/g, '-').toLowerCase() +} + +function reDocUrl(fileName, header) { + const docs = 'https://element-plus.org/#/en-US/component/' + const _header = header ? header.replace(/[ ]+/g, '-').toLowerCase() : undefined + return docs + fileName + (_header ? '#' + _header : '') +} + +function reAttribute(value, key, item) { + const _value = value.match(/^\*\*(.*)\*\*$/) + const str = _value ? _value[1]: value + + if (key === 'Accepted Values' && /icon/i.test(item[0])) { + return icons + } else if (key === 'Name' && /^(-|—)$/.test(str)) { + return 'default' + } else if (str === '' || /^(-|—)$/.test(str)) { + return undefined + } else if (key === 'Attribute' && /v-model:(.+)/.test(str)){ + const _str = str.match(/v-model:(.+)/) + return _str ? _str[1] : undefined + } else if (key === 'Attribute' && /v-model/.test(str)) { + return 'model-value' + } else if (key === 'Attribute') { + return str.replace(/\B([A-Z])/g, '-$1').toLowerCase() + } else if (key === 'Type') { + return str + .replace(/\s*\/\s*/g, '|') + .replace(/\s*,\s*/g, '|') + .replace(/\(.*\)/g, '') + .toLowerCase() + } else if (key === 'Accepted Values') { + return /\[.+\]\(.+\)/.test(str) || /^\*$/.test(str) + ? undefined + : str.replace(/`/g, '') + } else { + return str + } +} diff --git a/build/build-locale.js b/build/build-locale.js new file mode 100644 index 00000000..db8e5f9f --- /dev/null +++ b/build/build-locale.js @@ -0,0 +1,39 @@ +/* eslint-disable */ +const fs = require('fs') +const save = require('file-save') +const { resolve, basename } = require('path') +const localePath = resolve(__dirname, '../packages/locale/lang') +const fileList = fs.readdirSync(localePath) + +const transform = function(filename, name, cb) { + require('@babel/core').transformFile(resolve(localePath, filename), { + plugins: [ + '@babel/plugin-transform-modules-umd', + ], + moduleId: name, + }, cb) +} + +fileList + .filter(function(file) { + return /\.ts$/.test(file) + }) + .forEach(function(file) { + const name = basename(file, '.ts') + + transform(file, name, function(err, result) { + if (err) { + console.error(err) + } else { + const code = result.code + const transformedCode = code + .replace('define(\"', 'define(\"element/locale/') + .replace( + /global\.(\S*) = mod.exports/, + 'global.ElementPlus.lang = global.ElementPlus.lang || {};\n global.ElementPlus.lang.$1 = mod.exports.default' + ) + + save(resolve(__dirname, '../lib/umd/locale', `${name}.js`)).write(transformedCode) + } + }) + }) diff --git a/build/build-util.js b/build/build-util.js new file mode 100644 index 00000000..2c546786 --- /dev/null +++ b/build/build-util.js @@ -0,0 +1,52 @@ +/* eslint-disable */ +const pkg = require('../package.json') +const path = require('path') +const { nodeResolve } = require('@rollup/plugin-node-resolve') +const rollup = require('rollup') +const typescript = require('rollup-plugin-typescript2') + +const deps = Object.keys(pkg.dependencies) + +const root = path.resolve(__dirname, '..'); +const file = process.argv[2]; +const defaultOpts = { + input: path.resolve(root, file), + plugins: [ + nodeResolve(), + typescript({ + tsconfigOverride: { + compilerOptions: { + declaration: false, + }, + 'exclude': [ + 'node_modules', + '__tests__', + ], + }, + abortOnError: false, + }), + ], + external() { + return true + }, +} + +const run = async (name) => { + const esm = { + format: 'es', + file: `es/${name}`, + }; + const cjs = { + format: 'cjs', + file: `lib/${name}`, + exports: 'named', + } + + const bundle = await rollup.rollup(defaultOpts); + await Promise.all([bundle.write(esm), bundle.write(cjs)]); + console.log(name, 'build finished'); +} + +let normalizedName = file.slice(11); // remove ./packages + +run(`${normalizedName.split('.').shift()}.js`); diff --git a/build/build.component.js b/build/build.component.js new file mode 100644 index 00000000..4590b6f9 --- /dev/null +++ b/build/build.component.js @@ -0,0 +1,84 @@ +/* eslint-disable */ +const pkg = require('../package.json') +const path = require('path') +const { getPackages } = require('@lerna/project') +const css = require('rollup-plugin-css-only') +const { nodeResolve } = require('@rollup/plugin-node-resolve') +const vue = require('rollup-plugin-vue') +const rollup = require('rollup') +const typescript = require('rollup-plugin-typescript2') +const { noElPrefixFile } = require('./common') + +const deps = Object.keys(pkg.dependencies) + +const runBuild = async () => { + let index = 0 + const pkgs = await getPackages() + const inputs = pkgs + .map(pkg => pkg.name) + .filter(name => + name.includes('@element-plus') && + !name.includes('utils'), + ).slice(process.argv[2], process.argv[3]) + + build(inputs[index]) + + async function build(name) { + if (!name) return + const inputOptions = { + input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`), + plugins: [ + nodeResolve(), + css(), + vue({ + target: 'browser', + css: false, + }), + typescript({ + tsconfigOverride: { + compilerOptions: { + declaration: false, + }, + 'exclude': [ + 'node_modules', + '__tests__', + ], + }, + abortOnError: false, + }), + ], + external(id) { + return /^vue/.test(id) + || /^@element-plus/.test(id) + || deps.some(k => new RegExp('^' + k).test(id)) + }, + } + const getOutFile = () => { + const compName = name.split('@element-plus/')[1] + if(noElPrefixFile.test(name)) { + return `lib/${compName}/index.js` + } + return `lib/el-${compName}/index.js` + } + const outOptions = { + format: 'es', + file: getOutFile(), + paths(id) { + if (/^@element-plus/.test(id)) { + if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..') + return id.replace('@element-plus/', '../el-') + } + }, + } + + const bundle = await rollup.rollup(inputOptions) + console.log(name, 'done') + await bundle.write(outOptions) + index++ + if (index < inputs.length) { + await build(inputs[index]) + } + } +} + +runBuild() diff --git a/build/build.comps.js b/build/build.comps.js new file mode 100644 index 00000000..89783840 --- /dev/null +++ b/build/build.comps.js @@ -0,0 +1,16 @@ +/* eslint-disable */ + +// name came from the terminal as `./packages/*` notation, so when resolve the name, we'd like +// to add a `..` to do so. because the current file is under `build/`, `packages/` is at the +// same level as `build/`, +const run = require('./build'); +const compPath = process.argv[2] +if (!compPath) { + console.error('Usage: node build.js [component]') + process.exit(1) +} + +const outPutPrefix = ['hooks', 'directives'].some((p) => compPath.includes(p)) ? '' : 'el-'; +const compName = compPath.split('/').pop() + +run(`${outPutPrefix}${compName}/index.js`, compPath) diff --git a/build/build.entry.js b/build/build.entry.js new file mode 100644 index 00000000..7519fe7a --- /dev/null +++ b/build/build.entry.js @@ -0,0 +1,5 @@ +/* eslint-disable */ + +const run = require('./build'); + +run('index.js', './packages/element-plus', true) diff --git a/build/build.js b/build/build.js new file mode 100644 index 00000000..91778af4 --- /dev/null +++ b/build/build.js @@ -0,0 +1,81 @@ +/* eslint-disable */ +const pkg = require('../package.json') +const path = require('path') +const css = require('rollup-plugin-css-only') +const { nodeResolve } = require('@rollup/plugin-node-resolve') +const vue = require('rollup-plugin-vue') +const rollup = require('rollup') +const typescript = require('rollup-plugin-typescript2') +const { noElPrefixFile } = require('./common'); + +const deps = Object.keys(pkg.dependencies) + +const root = path.resolve(__dirname, '..'); + +const defaultOpts = { + plugins: [ + nodeResolve(), + css(), + vue({ + target: 'browser', + css: false, + }), + typescript({ + tsconfigOverride: { + compilerOptions: { + declaration: false, + }, + 'exclude': [ + 'node_modules', + '__tests__', + ], + }, + abortOnError: false, + }), + ], + external(id) { + return /^vue/.test(id) + || /^@element-plus/.test(id) + || deps.some(k => new RegExp('^' + k).test(id)) + }, +} + +const isPkg = (id) => { + return id.startsWith('@element-plus') +} + +const isExcluded = (id) => { + return noElPrefixFile.test(id) +} + +const replacePrefix = (prefix, target) => { + return prefix + target.slice(14) // @element-plus/.length = 14 +} + +const run = async (name, input, isRoot = false) => { + const inputPath = `${path.resolve(root, input)}/index.ts` + defaultOpts.input = inputPath + + const getPaths = (id) => { + if (isPkg(id)) { + if (isExcluded(id)) return replacePrefix(isRoot ? './' : '../', id) + return replacePrefix(isRoot ? './el-' : '../el-', id) + } + } + const esm = { + format: 'es', + file: `es/${name}`, + paths: getPaths, + }; + const cjs = { + format: 'cjs', + file: `lib/${name}`, + paths: getPaths, + exports: 'named', + }; + const bundle = await rollup.rollup(defaultOpts); + await Promise.all([bundle.write(esm), bundle.write(cjs)]) + console.log(name, 'build finished'); +} + +module.exports = run; diff --git a/build/common.js b/build/common.js new file mode 100644 index 00000000..331107c4 --- /dev/null +++ b/build/common.js @@ -0,0 +1,3 @@ +module.exports = { + noElPrefixFile: /(utils|directives|hooks|locale)/, +} diff --git a/build/gen-type.js b/build/gen-type.js new file mode 100644 index 00000000..f3ad8e18 --- /dev/null +++ b/build/gen-type.js @@ -0,0 +1,68 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const fs = require('fs') +const path = require('path') +const { noElPrefixFile } = require('./common') + +const outsideImport = /import .* from '..\/(.*?)\/src\/.*/ + +// global.d.ts +fs.copyFileSync( + path.resolve(__dirname, '../typings/vue-shim.d.ts'), + path.resolve(__dirname, '../lib/element-plus.d.ts'), +) +// index.d.ts +const newIndexPath = path.resolve(__dirname, '../lib/index.d.ts') +fs.copyFileSync(path.resolve(__dirname, '../lib/element-plus/index.d.ts'), newIndexPath) +const index = fs.readFileSync(newIndexPath) +const newIndex = index.toString().replace(/@element-plus\//g, './el-').replace('el-utils', 'utils').replace('el-locale', 'locale') +fs.writeFileSync(newIndexPath, newIndex) + +// remove ep +fs.rmdirSync(path.resolve(__dirname, '../lib/element-plus'), { recursive: true }) + +// remove test-utils +fs.rmdirSync(path.resolve(__dirname, '../lib/test-utils'), { recursive: true }) + +// component +const libDirPath = path.resolve(__dirname, '../lib') +fs.readdirSync(libDirPath).forEach(comp => { + if (!noElPrefixFile.test(comp)) { + if (fs.lstatSync(path.resolve(libDirPath, comp)).isDirectory()) { + // rename + const newCompName = `el-${comp}` + fs.renameSync(path.resolve(libDirPath, comp), + path.resolve(libDirPath, newCompName)) + // re-import + const imp = fs.readFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts')).toString() + if(outsideImport.test(imp) || imp.includes('@element-plus/')) { + const newImp = imp.replace(outsideImport, (i, c) => { + return i.replace(`../${c}`, `../el-${c}`) + }).replace(/@element-plus\//g, '../el-').replace('el-utils', 'utils').replace('el-locale', 'locale') + fs.writeFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts'), newImp) + } + } + } +}) + +// after components dir renamed +fs.readdirSync(libDirPath).forEach(comp => { + // check src/*.d.ts exist + const srcPath = path.resolve(libDirPath, comp, './src') + if (fs.existsSync(srcPath)) { + if (fs.lstatSync(srcPath).isDirectory()) { + fs.readdir(srcPath, 'utf-8', (err, data) => { + if (err) return + // replace all @element-plus in src/*.d.ts + data.forEach(f => { + if (!fs.lstatSync(path.resolve(srcPath, f)).isDirectory()) { + const imp = fs.readFileSync(path.resolve(srcPath, f)).toString() + if (imp.includes('@element-plus/')) { + const newImp = imp.replace(/@element-plus\//g, '../../el-').replace('el-utils', 'utils').replace('el-locale', 'locale') + fs.writeFileSync(path.resolve(srcPath, f), newImp) + } + } + }) + }) + } + } +}) diff --git a/build/gen-version.js b/build/gen-version.js new file mode 100644 index 00000000..a51e663f --- /dev/null +++ b/build/gen-version.js @@ -0,0 +1,14 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const fs = require('fs') +const path = require('path') +const tagVer = process.env.TAG_VERSION +if (tagVer) { + version = tagVer.startsWith('v') ? tagVer.slice(1) : tagVer +} else { + version = require('../package.json').version +} +fs.writeFileSync( + path.resolve(__dirname, '../packages/element-plus/version.ts'), + `export const version = '${version}' +`, +) diff --git a/build/getCpus.js b/build/getCpus.js new file mode 100644 index 00000000..c1677e09 --- /dev/null +++ b/build/getCpus.js @@ -0,0 +1,4 @@ +/* eslint-disable */ +const os = require('os') + +console.log(os.cpus().length) diff --git a/build/getPkgs.js b/build/getPkgs.js new file mode 100644 index 00000000..95325246 --- /dev/null +++ b/build/getPkgs.js @@ -0,0 +1,4 @@ +/* eslint-disable */ +const { getPackagesSync } = require('@lerna/project'); + +module.exports = getPackagesSync(); diff --git a/build/rollup.config.bundle.js b/build/rollup.config.bundle.js new file mode 100644 index 00000000..2708c1b6 --- /dev/null +++ b/build/rollup.config.bundle.js @@ -0,0 +1,47 @@ +// import vue from 'rollup-plugin-vue' +import { nodeResolve } from '@rollup/plugin-node-resolve' +import path from 'path' +// import commonjs from '@rollup/plugin-commonjs' +import { terser } from 'rollup-plugin-terser' +import typescript from 'rollup-plugin-typescript2' +import pkg from '../package.json' +const deps = Object.keys(pkg.dependencies) +// eslint-disable-next-line @typescript-eslint/no-var-requires +const vue = require('rollup-plugin-vue') + +export default [ + { + input: path.resolve(__dirname, '../packages/element-plus/index.ts'), + output: { + format: 'es', + file: 'lib/index.esm.js', + }, + plugins: [ + terser(), + nodeResolve(), + // commonjs(), + vue({ + target: 'browser', + css: false, + exposeFilename: false, + }), + typescript({ + tsconfigOverride: { + 'include': [ + 'packages/**/*', + 'typings/vue-shim.d.ts', + ], + 'exclude': [ + 'node_modules', + 'packages/**/__tests__/*', + ], + }, + abortOnError: false, + }), + ], + external(id) { + return /^vue/.test(id) + || deps.some(k => new RegExp('^' + k).test(id)) + }, + }, +] diff --git a/build/rollup.config.js b/build/rollup.config.js new file mode 100644 index 00000000..ede36781 --- /dev/null +++ b/build/rollup.config.js @@ -0,0 +1,62 @@ +import vue from 'rollup-plugin-vue' +import css from 'rollup-plugin-css-only' +import { nodeResolve } from '@rollup/plugin-node-resolve' +import esbuild from 'rollup-plugin-esbuild' +import path from 'path' +import { getPackagesSync } from '@lerna/project' +import pkg from '../package.json' + +const noElPrefixFile = /(utils|directives|hooks|locale)/ +const getOutFile = (name, dir='lib') => { + const compName = name.split('@element-plus/')[1] + if(noElPrefixFile.test(name)) { + return `${dir}/${compName}/index.js` + } + return `${dir}/el-${compName}/index.js` +} + +const deps = Object.keys(pkg.dependencies) +const inputs = getPackagesSync() + .map(pkg => pkg.name) + .filter(name => + name.includes('@element-plus') && + !name.includes('utils'), + ) + +export default inputs.map(name => ({ + input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`), + output: [{ + format: 'es', + file: getOutFile(name, 'es'), + paths(id) { + if (/^@element-plus/.test(id)) { + if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..') + return id.replace('@element-plus/', '../el-') + } + }, + },{ + format: 'cjs', + file: getOutFile(name, 'lib'), + exports: 'named', + paths(id) { + if (/^@element-plus/.test(id)) { + if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..') + return id.replace('@element-plus/', '../el-') + } + }, + }], + plugins: [ + css(), + vue({ + target: 'browser', + css: false, + }), + nodeResolve(), + esbuild(), + ], + external(id) { + return /^vue/.test(id) + || /^@element-plus/.test(id) + || deps.some(k => new RegExp('^' + k).test(id)) + }, +})) diff --git a/build/webpack.config.js b/build/webpack.config.js new file mode 100644 index 00000000..f448544d --- /dev/null +++ b/build/webpack.config.js @@ -0,0 +1,69 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const path = require('path') +const webpack = require('webpack') +const { VueLoaderPlugin } = require('vue-loader') +// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + +const libMode = process.env.LIBMODE +const isFullMode = libMode === 'full' +let externals = [ + { + vue: { + root: 'Vue', + commonjs: 'vue', + commonjs2: 'vue', + }, + }, +] +const plugins = [ + new VueLoaderPlugin(), + // new BundleAnalyzerPlugin(), +] + +const entry = path.resolve(__dirname, '../packages/element-plus/index.ts') + +if (!isFullMode) { + externals.push({ + '@popperjs/core': '@popperjs/core', + 'async-validator': 'async-validator', + 'mitt': 'mitt', + 'normalize-wheel': 'normalize-wheel', + 'resize-observer-polyfill': 'resize-observer-polyfill', + }, + /^dayjs.*/, + /^lodash.*/) +} + +const config = { + mode: 'production', + entry, + output: { + path: path.resolve(__dirname, '../lib'), + publicPath: '/', + filename: isFullMode ? 'index.full.js' : 'index.js', + libraryTarget: 'umd', + library: 'ElementPlus', + umdNamedDefine: true, + globalObject: 'typeof self !== \'undefined\' ? self : this', + }, + module: { + rules: [ + { + test: /\.vue$/, + use: 'vue-loader', + }, + { + test: /\.(ts|js)x?$/, + exclude: /node_modules/, + loader: 'babel-loader', + }, + ], + }, + resolve: { + extensions: ['.ts', '.tsx', '.js', '.json'], + }, + externals, + plugins, +} + +module.exports = config diff --git a/package.json b/package.json index 5515ca8a..5427a3e4 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ }, "dependencies": { "axios": "^0.21.1", + "babel-plugin-lodash": "^3.3.4", "core-js": "^3.6.5", "dayjs": "^1.10.5", "echarts": "^5.1.1", "element-plus": "^1.0.2-beta.44", - "element-ui": "^2.15.2", "lib-flexible": "^0.3.2", "lodash": "^4.17.21", "moment-timezone": "^0.5.33", @@ -28,6 +28,23 @@ "vuex": "^4.0.1" }, "devDependencies": { + "@babel/cli": "^7.12.1", + "@babel/core": "^7.11.4", + "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-transform-runtime": "^7.12.1", + "@babel/preset-env": "^7.11.5", + "@babel/preset-typescript": "^7.10.4", + "@commitlint/cli": "^9.1.2", + "@commitlint/config-conventional": "^9.1.2", + "@rollup/plugin-commonjs": "^15.1.0", + "@rollup/plugin-node-resolve": "^9.0.0", + "@rollup/plugin-typescript": "^6.0.0", + "@types/jest": "^26.0.10", + "@types/lodash": "^4.14.161", + "@typescript-eslint/eslint-plugin": "^3.10.1", + "@typescript-eslint/parser": "^3.10.1", + "@vue/babel-plugin-jsx": "^1.0.0", + "@vue/component-compiler-utils": "^3.2.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", diff --git a/src/.prettierrc.js b/src/.prettierrc.js new file mode 100644 index 00000000..5d274cad --- /dev/null +++ b/src/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + semi: false, + trailingComma: 'all', + singleQuote: true, + printWidth: 80, + tabWidth: 2, + endOfLine: 'auto', +} diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css new file mode 100644 index 00000000..99b2b0f1 --- /dev/null +++ b/src/assets/css/font/iconfont.css @@ -0,0 +1,187 @@ +@font-face { + font-family: "cn-icon"; /* Project id 2614877 */ + src: url('iconfont.woff2?t=1624000421294') format('woff2'), + url('iconfont.woff?t=1624000421294') format('woff'), + url('iconfont.ttf?t=1624000421294') format('truetype'); +} + +.cn-icon { + font-family: "cn-icon" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.cn-icon-view1:before { + content: "\e702"; +} + +.cn-icon-more3:before { + content: "\e739"; +} + +.cn-icon-edit:before { + content: "\e68c"; +} + +.cn-icon-delete:before { + content: "\e68f"; +} + +.cn-icon-more1:before { + content: "\e677"; +} + +.cn-icon-gear:before { + content: "\e694"; +} + +.cn-icon-add:before { + content: "\e738"; +} + +.cn-icon-xiangshang:before { + content: "\e732"; +} + +.cn-icon-xiangxia:before { + content: "\e737"; +} + +.cn-icon-arrow-left:before { + content: "\e735"; +} + +.cn-icon-arrow-right:before { + content: "\e736"; +} + +.cn-icon-id:before { + content: "\e734"; +} + +.cn-icon-position:before { + content: "\e72e"; +} + +.cn-icon-dns:before { + content: "\e72f"; +} + +.cn-icon-sub-category:before { + content: "\e730"; +} + +.cn-icon-risk:before { + content: "\e731"; +} + +.cn-icon-category:before { + content: "\e733"; +} + +.cn-icon-alert:before { + content: "\e72d"; +} + +.cn-icon-dropdown:before { + content: "\e724"; +} + +.cn-icon-download:before { + content: "\e725"; +} + +.cn-icon-check:before { + content: "\e726"; +} + +.cn-icon-refresh:before { + content: "\e727"; +} + +.cn-icon-language:before { + content: "\e728"; +} + +.cn-icon-more:before { + content: "\e729"; +} + +.cn-icon-style:before { + content: "\e72a"; +} + +.cn-icon-expand:before { + content: "\e72b"; +} + +.cn-icon-full-screen:before { + content: "\e72c"; +} + +.cn-icon-upload:before { + content: "\e71f"; +} + +.cn-icon-package-loss:before { + content: "\e720"; +} + +.cn-icon-http:before { + content: "\e721"; +} + +.cn-icon-time:before { + content: "\e722"; +} + +.cn-icon-ssl:before { + content: "\e723"; +} + +.cn-icon-root-domain:before { + content: "\e71d"; +} + +.cn-icon-doh-domain:before { + content: "\e71a"; +} + +.cn-icon-recursive-domain:before { + content: "\e71b"; +} + +.cn-icon-authoritative-domain:before { + content: "\e71c"; +} + +.cn-icon-top-level-domain:before { + content: "\e71e"; +} + +.cn-icon-dashboard:before { + content: "\e714"; +} + +.cn-icon-entitles:before { + content: "\e715"; +} + +.cn-icon-incidents:before { + content: "\e716"; +} + +.cn-icon-artifacts-brower:before { + content: "\e717"; +} + +.cn-icon-setting:before { + content: "\e718"; +} + +.cn-icon-reports:before { + content: "\e719"; +} + diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js new file mode 100644 index 00000000..5524137c --- /dev/null +++ b/src/assets/css/font/iconfont.js @@ -0,0 +1 @@ +!function(a){var c,l,o,i,h,t,m='',e=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(e&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function n(){h||(h=!0,o())}c=function(){var a,c,l;(l=document.createElement("div")).innerHTML=m,m=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",a=c,(l=document.body).firstChild?(c=l.firstChild).parentNode.insertBefore(a,c):l.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(o=c,i=a.document,h=!1,(t=function(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(t,50)}n()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,n())})}(window); \ No newline at end of file diff --git a/src/assets/css/font/iconfont.json b/src/assets/css/font/iconfont.json new file mode 100644 index 00000000..534813d3 --- /dev/null +++ b/src/assets/css/font/iconfont.json @@ -0,0 +1,310 @@ +{ + "id": "2614877", + "name": "Cyber Narrator", + "font_family": "cn-icon", + "css_prefix_text": "cn-icon-", + "description": "", + "glyphs": [ + { + "icon_id": "20712322", + "name": "view", + "font_class": "view1", + "unicode": "e702", + "unicode_decimal": 59138 + }, + { + "icon_id": "21907756", + "name": "更多操作1", + "font_class": "more3", + "unicode": "e739", + "unicode_decimal": 59193 + }, + { + "icon_id": "16827143", + "name": "编辑", + "font_class": "edit", + "unicode": "e68c", + "unicode_decimal": 59020 + }, + { + "icon_id": "16827146", + "name": "删除", + "font_class": "delete", + "unicode": "e68f", + "unicode_decimal": 59023 + }, + { + "icon_id": "21119423", + "name": "更 多", + "font_class": "more1", + "unicode": "e677", + "unicode_decimal": 58999 + }, + { + "icon_id": "16827151", + "name": "设置", + "font_class": "gear", + "unicode": "e694", + "unicode_decimal": 59028 + }, + { + "icon_id": "21209541", + "name": "Add", + "font_class": "add", + "unicode": "e738", + "unicode_decimal": 59192 + }, + { + "icon_id": "22325159", + "name": "向上", + "font_class": "xiangshang", + "unicode": "e732", + "unicode_decimal": 59186 + }, + { + "icon_id": "22325160", + "name": "向下", + "font_class": "xiangxia", + "unicode": "e737", + "unicode_decimal": 59191 + }, + { + "icon_id": "22324980", + "name": "左箭头", + "font_class": "arrow-left", + "unicode": "e735", + "unicode_decimal": 59189 + }, + { + "icon_id": "22324981", + "name": "右箭头", + "font_class": "arrow-right", + "unicode": "e736", + "unicode_decimal": 59190 + }, + { + "icon_id": "22320764", + "name": "id", + "font_class": "id", + "unicode": "e734", + "unicode_decimal": 59188 + }, + { + "icon_id": "22318866", + "name": "地理位置", + "font_class": "position", + "unicode": "e72e", + "unicode_decimal": 59182 + }, + { + "icon_id": "22318867", + "name": "DNS", + "font_class": "dns", + "unicode": "e72f", + "unicode_decimal": 59183 + }, + { + "icon_id": "22318868", + "name": "子分类", + "font_class": "sub-category", + "unicode": "e730", + "unicode_decimal": 59184 + }, + { + "icon_id": "22318869", + "name": "风险", + "font_class": "risk", + "unicode": "e731", + "unicode_decimal": 59185 + }, + { + "icon_id": "22318871", + "name": "类别", + "font_class": "category", + "unicode": "e733", + "unicode_decimal": 59187 + }, + { + "icon_id": "22292878", + "name": "告警", + "font_class": "alert", + "unicode": "e72d", + "unicode_decimal": 59181 + }, + { + "icon_id": "22292845", + "name": "下拉", + "font_class": "dropdown", + "unicode": "e724", + "unicode_decimal": 59172 + }, + { + "icon_id": "22292846", + "name": "下载", + "font_class": "download", + "unicode": "e725", + "unicode_decimal": 59173 + }, + { + "icon_id": "22292847", + "name": "选中", + "font_class": "check", + "unicode": "e726", + "unicode_decimal": 59174 + }, + { + "icon_id": "22292848", + "name": "刷新", + "font_class": "refresh", + "unicode": "e727", + "unicode_decimal": 59175 + }, + { + "icon_id": "22292849", + "name": "中英文", + "font_class": "language", + "unicode": "e728", + "unicode_decimal": 59176 + }, + { + "icon_id": "22292850", + "name": "更多", + "font_class": "more", + "unicode": "e729", + "unicode_decimal": 59177 + }, + { + "icon_id": "22292851", + "name": "样式", + "font_class": "style", + "unicode": "e72a", + "unicode_decimal": 59178 + }, + { + "icon_id": "22292852", + "name": "展开", + "font_class": "expand", + "unicode": "e72b", + "unicode_decimal": 59179 + }, + { + "icon_id": "22292853", + "name": "最大化", + "font_class": "full-screen", + "unicode": "e72c", + "unicode_decimal": 59180 + }, + { + "icon_id": "22292732", + "name": "重传", + "font_class": "upload", + "unicode": "e71f", + "unicode_decimal": 59167 + }, + { + "icon_id": "22292733", + "name": "丢包率", + "font_class": "package-loss", + "unicode": "e720", + "unicode_decimal": 59168 + }, + { + "icon_id": "22292734", + "name": "HTTP", + "font_class": "http", + "unicode": "e721", + "unicode_decimal": 59169 + }, + { + "icon_id": "22292735", + "name": "时间", + "font_class": "time", + "unicode": "e722", + "unicode_decimal": 59170 + }, + { + "icon_id": "22292736", + "name": "SSL", + "font_class": "ssl", + "unicode": "e723", + "unicode_decimal": 59171 + }, + { + "icon_id": "22292709", + "name": "根域名", + "font_class": "root-domain", + "unicode": "e71d", + "unicode_decimal": 59165 + }, + { + "icon_id": "22292704", + "name": "DOH域名", + "font_class": "doh-domain", + "unicode": "e71a", + "unicode_decimal": 59162 + }, + { + "icon_id": "22290483", + "name": "递归域名", + "font_class": "recursive-domain", + "unicode": "e71b", + "unicode_decimal": 59163 + }, + { + "icon_id": "22290484", + "name": "权威域名", + "font_class": "authoritative-domain", + "unicode": "e71c", + "unicode_decimal": 59164 + }, + { + "icon_id": "22290486", + "name": "顶级域名", + "font_class": "top-level-domain", + "unicode": "e71e", + "unicode_decimal": 59166 + }, + { + "icon_id": "22290435", + "name": "Dashboard", + "font_class": "dashboard", + "unicode": "e714", + "unicode_decimal": 59156 + }, + { + "icon_id": "22290436", + "name": "Entitles", + "font_class": "entitles", + "unicode": "e715", + "unicode_decimal": 59157 + }, + { + "icon_id": "22290437", + "name": "Incidents", + "font_class": "incidents", + "unicode": "e716", + "unicode_decimal": 59158 + }, + { + "icon_id": "22290438", + "name": "Artifacts Brower", + "font_class": "artifacts-brower", + "unicode": "e717", + "unicode_decimal": 59159 + }, + { + "icon_id": "22290439", + "name": "Setting", + "font_class": "setting", + "unicode": "e718", + "unicode_decimal": 59160 + }, + { + "icon_id": "22290440", + "name": "Reports", + "font_class": "reports", + "unicode": "e719", + "unicode_decimal": 59161 + } + ] +} diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf new file mode 100644 index 00000000..1a9d01ee Binary files /dev/null and b/src/assets/css/font/iconfont.ttf differ diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff new file mode 100644 index 00000000..f4a61876 Binary files /dev/null and b/src/assets/css/font/iconfont.woff differ diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2 new file mode 100644 index 00000000..ebb30523 Binary files /dev/null and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 3c3acd95..85f30c2f 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -3,4 +3,5 @@ @import './common'; @import './rightBoxCommon'; @import './tableCommon'; -@import '../stylus/index.scss'; \ No newline at end of file +@import '../stylus/index.scss'; +@import './font/iconfont.css'; diff --git a/src/assets/css/rightBoxCommon.scss b/src/assets/css/rightBoxCommon.scss index 2a90a7c8..ea96c467 100644 --- a/src/assets/css/rightBoxCommon.scss +++ b/src/assets/css/rightBoxCommon.scss @@ -293,7 +293,7 @@ } } } -.nz-icon-minus-position { +.cn-icon-minus-position { display: inline-flex; flex-direction: column; position: absolute; diff --git a/src/assets/css/tableCommon.scss b/src/assets/css/tableCommon.scss index 3b0c3b2c..32ee65ec 100644 --- a/src/assets/css/tableCommon.scss +++ b/src/assets/css/tableCommon.scss @@ -387,3 +387,9 @@ height: 100%; cursor: col-resize; } +.margin-r-10{ + margin-right: 10px; +} +.margin-r-20{ + margin-right: 20px; +} diff --git a/src/commitlint.config.js b/src/commitlint.config.js new file mode 100644 index 00000000..30b791a4 --- /dev/null +++ b/src/commitlint.config.js @@ -0,0 +1,48 @@ +// eslint-disable-next-line +const importFrom = require('import-from') + +function getPackages (context) { + return Promise.resolve() + .then(() => { + const ctx = context || {} + const cwd = ctx.cwd || process.cwd() + const Project = importFrom(cwd, '@lerna/project') + const project = new Project(cwd) + return project.getPackages() + }) + .then(packages => { + return packages.map(pkg => pkg.name).map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name)) + }) +} + +const scopes = [ + 'project', + 'core', + 'style', + 'docs', + 'ci', + 'dev', + 'build', + 'deploy', + 'other', +] + +module.exports = { + rules: { + 'scope-enum': ctx => getPackages(ctx).then(packages => [2, 'always', [...packages, ...scopes]]), + 'body-leading-blank': [1, 'always'], + 'footer-leading-blank': [1, 'always'], + 'header-max-length': [2, 'always', 72], + 'scope-case': [2, 'always', 'lower-case'], + 'subject-case': [1, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']], + 'subject-empty': [2, 'never'], + 'subject-full-stop': [2, 'never', '.'], + 'type-case': [2, 'always', 'lower-case'], + 'type-empty': [2, 'never'], + 'type-enum': [ + 2, + 'always', + ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'improvement'], + ], + }, +} diff --git a/src/components/common/MyDatePicker/index.d.ts b/src/components/common/MyDatePicker/index.d.ts new file mode 100644 index 00000000..c13d4c5c --- /dev/null +++ b/src/components/common/MyDatePicker/index.d.ts @@ -0,0 +1,4 @@ +import DatePicker from './src/date-picker'; +import type { SFCWithInstall } from 'element-plus/lib/utils/types'; +declare const _DatePicker: SFCWithInstall; +export default _DatePicker; diff --git a/src/components/common/MyDatePicker/index.js b/src/components/common/MyDatePicker/index.js new file mode 100644 index 00000000..c4c9506f --- /dev/null +++ b/src/components/common/MyDatePicker/index.js @@ -0,0 +1,2170 @@ +'use strict' + +Object.defineProperty(exports, '__esModule', { value: true }) + +const vue = require('vue') +const dayjs = require('dayjs') +const timePicker = require('../MytTimePicker') +const locale = require('element-plus/lib/locale') +const ElInput = require('element-plus/lib/el-input') +const directives = require('element-plus/lib/directives') +const aria = require('element-plus/lib/utils/aria') +const ElButton = require('element-plus/lib/el-button') +const util = require('element-plus/lib/utils/util') +const dom = require('element-plus/lib/utils/dom') +const customParseFormat = require('dayjs/plugin/customParseFormat') +const advancedFormat = require('dayjs/plugin/advancedFormat') +const localeData = require('dayjs/plugin/localeData') +const weekOfYear = require('dayjs/plugin/weekOfYear') +const weekYear = require('dayjs/plugin/weekYear') +const dayOfYear = require('dayjs/plugin/dayOfYear') +const isSameOrAfter = require('dayjs/plugin/isSameOrAfter') +const isSameOrBefore = require('dayjs/plugin/isSameOrBefore') + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e } } + +const dayjs__default = /* #__PURE__ */_interopDefaultLegacy(window.$dayJs) +console.log(window.$dayJs.tz().format('YYYY-MM-DD HH:mm:ss')) +const ElInput__default = /* #__PURE__ */_interopDefaultLegacy(ElInput) +const ElButton__default = /* #__PURE__ */_interopDefaultLegacy(ElButton) +const customParseFormat__default = /* #__PURE__ */_interopDefaultLegacy(customParseFormat) +const advancedFormat__default = /* #__PURE__ */_interopDefaultLegacy(advancedFormat) +const localeData__default = /* #__PURE__ */_interopDefaultLegacy(localeData) +const weekOfYear__default = /* #__PURE__ */_interopDefaultLegacy(weekOfYear) +const weekYear__default = /* #__PURE__ */_interopDefaultLegacy(weekYear) +const dayOfYear__default = /* #__PURE__ */_interopDefaultLegacy(dayOfYear) +const isSameOrAfter__default = /* #__PURE__ */_interopDefaultLegacy(isSameOrAfter) +const isSameOrBefore__default = /* #__PURE__ */_interopDefaultLegacy(isSameOrBefore) + +const script = vue.defineComponent({ + props: { + date: { + type: Object + }, + minDate: { + type: Object + }, + maxDate: { + type: Object + }, + parsedValue: { + type: [Object, Array] + }, + selectionMode: { + type: String, + default: 'day' + }, + showWeekNumber: { + type: Boolean, + default: false + }, + disabledDate: { + type: Function + }, + cellClassName: { + type: Function + }, + rangeState: { + type: Object, + default: () => ({ + endDate: null, + selecting: false + }) + } + }, + emits: ['changerange', 'pick', 'select'], + setup (props, ctx) { + const lastRow = vue.ref(null) + const lastColumn = vue.ref(null) + const tableRows = vue.ref([[], [], [], [], [], []]) + const firstDayOfWeek = props.date.$locale().weekStart || 7 + const WEEKS_CONSTANT = props.date.locale('en').localeData().weekdaysShort().map(_ => _.toLowerCase()) + const offsetDay = vue.computed(() => { + return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek + }) + const startDate = vue.computed(() => { + const startDayOfMonth = props.date.startOf('month') + return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day') + }) + const WEEKS = vue.computed(() => { + return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7) + }) + const rows = vue.computed(() => { + let _a + const startOfMonth = props.date.startOf('month') + const startOfMonthDay = startOfMonth.day() || 7 + const dateCountOfMonth = startOfMonth.daysInMonth() + const dateCountOfLastMonth = startOfMonth.subtract(1, 'month').daysInMonth() + const offset = offsetDay.value + const rows_ = tableRows.value + let count = 1 + const selectedDate = props.selectionMode === 'dates' ? util.coerceTruthyValueToArray(props.parsedValue) : [] + const calNow = dayjs__default.default.tz().startOf('day') + for (let i = 0; i < 6; i++) { + const row = rows_[i] + if (props.showWeekNumber) { + if (!row[0]) { + row[0] = { + type: 'week', + text: startDate.value.add(i * 7 + 1, 'day').week() + } + } + } + for (let j = 0; j < 7; j++) { + let cell = row[props.showWeekNumber ? j + 1 : j] + if (!cell) { + cell = { + row: i, + column: j, + type: 'normal', + inRange: false, + start: false, + end: false + } + } + const index = i * 7 + j + const calTime = startDate.value.add(index - offset, 'day') + cell.type = 'normal' + const calEndDate = props.rangeState.endDate || props.maxDate || + props.rangeState.selecting && props.minDate + cell.inRange = (props.minDate && + calTime.isSameOrAfter(props.minDate, 'day')) && (calEndDate && + calTime.isSameOrBefore(calEndDate, 'day')) || (props.minDate && + calTime.isSameOrBefore(props.minDate, 'day')) && (calEndDate && + calTime.isSameOrAfter(calEndDate, 'day')) + if ((_a = props.minDate) === null || _a === void 0 ? void 0 : _a.isSameOrAfter(calEndDate)) { + cell.start = calEndDate && calTime.isSame(calEndDate, 'day') + cell.end = props.minDate && calTime.isSame(props.minDate, 'day') + } else { + cell.start = props.minDate && calTime.isSame(props.minDate, 'day') + cell.end = calEndDate && calTime.isSame(calEndDate, 'day') + } + const isToday = calTime.isSame(calNow, 'day') + if (isToday) { + cell.type = 'today' + } + if (i >= 0 && i <= 1) { + const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset + if (j + i * 7 >= numberOfDaysFromPreviousMonth) { + cell.text = count++ + } else { + cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7 + cell.type = 'prev-month' + } + } else { + if (count <= dateCountOfMonth) { + cell.text = count++ + } else { + cell.text = count++ - dateCountOfMonth + cell.type = 'next-month' + } + } + const cellDate = calTime.toDate() + cell.selected = selectedDate.find(_ => _.valueOf() === calTime.valueOf()) + cell.disabled = props.disabledDate && props.disabledDate(cellDate) + cell.customClass = props.cellClassName && props.cellClassName(cellDate) + row[props.showWeekNumber ? j + 1 : j] = cell + } + if (props.selectionMode === 'week') { + const start = props.showWeekNumber ? 1 : 0 + const end = props.showWeekNumber ? 7 : 6 + const isActive = isWeekActive(row[start + 1]) + row[start].inRange = isActive + row[start].start = isActive + row[end].inRange = isActive + row[end].end = isActive + } + } + return rows_ + }) + const cellMatchesDate = (cell, date) => { + if (!date) { return false } + return dayjs__default.default.tz(date) + .isSame(props.date.date(Number(cell.text)), 'day') + } + const getCellClasses = cell => { + const classes = [] + if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) { + classes.push('available') + if (cell.type === 'today') { + classes.push('today') + } + } else { + classes.push(cell.type) + } + if (props.selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && cellMatchesDate(cell, props.parsedValue)) { + classes.push('current') + } + if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || props.selectionMode === 'week')) { + classes.push('in-range') + if (cell.start) { + classes.push('start-date') + } + if (cell.end) { + classes.push('end-date') + } + } + if (cell.disabled) { + classes.push('disabled') + } + if (cell.selected) { + classes.push('selected') + } + if (cell.customClass) { + classes.push(cell.customClass) + } + return classes.join(' ') + } + const getDateOfCell = (row, column) => { + const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value + return startDate.value.add(offsetFromStart, 'day') + } + const handleMouseMove = event => { + if (!props.rangeState.selecting) { return } + let target = event.target + if (target.tagName === 'SPAN') { + target = target.parentNode.parentNode + } + if (target.tagName === 'DIV') { + target = target.parentNode + } + if (target.tagName !== 'TD') { return } + const row = target.parentNode.rowIndex - 1 + const column = target.cellIndex + if (rows.value[row][column].disabled) { return } + if (row !== lastRow.value || column !== lastColumn.value) { + lastRow.value = row + lastColumn.value = column + ctx.emit('changerange', { + selecting: true, + endDate: getDateOfCell(row, column) + }) + } + } + const handleClick = event => { + let target = event.target + if (target.tagName === 'SPAN') { + target = target.parentNode.parentNode + } + if (target.tagName === 'DIV') { + target = target.parentNode + } + if (target.tagName !== 'TD') { return } + const row = target.parentNode.rowIndex - 1 + const column = target.cellIndex + const cell = rows.value[row][column] + if (cell.disabled || cell.type === 'week') { return } + const newDate = getDateOfCell(row, column) + if (props.selectionMode === 'range') { + if (!props.rangeState.selecting) { + ctx.emit('pick', { minDate: newDate, maxDate: null }) + ctx.emit('select', true) + } else { + if (newDate >= props.minDate) { + ctx.emit('pick', { minDate: props.minDate, maxDate: newDate }) + } else { + ctx.emit('pick', { minDate: newDate, maxDate: props.minDate }) + } + ctx.emit('select', false) + } + } else if (props.selectionMode === 'day') { + ctx.emit('pick', newDate) + } else if (props.selectionMode === 'week') { + const weekNumber = newDate.week() + const value = newDate.year() + 'w' + weekNumber + ctx.emit('pick', { + year: newDate.year(), + week: weekNumber, + value: value, + date: newDate.startOf('week') + }) + } else if (props.selectionMode === 'dates') { + const newValue = cell.selected + ? util.coerceTruthyValueToArray(props.parsedValue).filter(_ => _.valueOf() !== newDate.valueOf()) + : util.coerceTruthyValueToArray(props.parsedValue).concat([newDate]) + ctx.emit('pick', newValue) + } + } + const isWeekActive = cell => { + if (props.selectionMode !== 'week') { return false } + let newDate = props.date.startOf('day') + if (cell.type === 'prev-month') { + newDate = newDate.subtract(1, 'month') + } + if (cell.type === 'next-month') { + newDate = newDate.add(1, 'month') + } + newDate = newDate.date(parseInt(cell.text, 10)) + if (props.parsedValue && !Array.isArray(props.parsedValue)) { + const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1 + const weekDate = props.parsedValue.subtract(dayOffset, 'day') + return weekDate.isSame(newDate, 'day') + } + return false + } + return { + handleMouseMove, + t: locale.t, + rows, + isWeekActive, + getCellClasses, + WEEKS, + handleClick + } + } +}) + +const _hoisted_1 = { key: 0 } + +function render (_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createBlock('table', { + cellspacing: '0', + cellpadding: '0', + class: ['el-date-table', { 'is-week-mode': _ctx.selectionMode === 'week' }], + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args))), + onMousemove: _cache[2] || (_cache[2] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args))) + }, [ + vue.createVNode('tbody', null, [ + vue.createVNode('tr', null, [ + (_ctx.showWeekNumber) + ? (vue.openBlock(), vue.createBlock('th', _hoisted_1, vue.toDisplayString(_ctx.t('el.datepicker.week')), 1 /* TEXT */)) + : vue.createCommentVNode('v-if', true), + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.WEEKS, (week, key) => { + return (vue.openBlock(), vue.createBlock('th', { key: key }, vue.toDisplayString(_ctx.t('el.datepicker.weeks.' + week)), 1 /* TEXT */)) + }), 128 /* KEYED_FRAGMENT */)) + ]), + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => { + return (vue.openBlock(), vue.createBlock('tr', { + key: key, + class: ['el-date-table__row', { current: _ctx.isWeekActive(row[1]) }] + }, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => { + return (vue.openBlock(), vue.createBlock('td', { + key: key_, + class: _ctx.getCellClasses(cell) + }, [ + vue.createVNode('div', null, [ + vue.createVNode('span', null, vue.toDisplayString(cell.text), 1 /* TEXT */) + ]) + ], 2 /* CLASS */)) + }), 128 /* KEYED_FRAGMENT */)) + ], 2 /* CLASS */)) + }), 128 /* KEYED_FRAGMENT */)) + ]) + ], 34 /* CLASS, HYDRATE_EVENTS */)) +} + +script.render = render +script.__file = 'packages/date-picker/src/date-picker-com/basic-date-table.vue' + +const datesInMonth = (year, month) => { + const firstDay = dayjs__default.default.tz().startOf('month').month(month).year(year) + const numOfDays = firstDay.daysInMonth() + return timePicker.rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate()) +} +const script$1 = vue.defineComponent({ + props: { + disabledDate: { + type: Function + }, + selectionMode: { + type: String, + default: 'month' + }, + minDate: { + type: Object + }, + maxDate: { + type: Object + }, + date: { + type: Object + }, + parsedValue: { + type: Object + }, + rangeState: { + type: Object, + default: () => ({ + endDate: null, + selecting: false + }) + } + }, + emits: ['changerange', 'pick', 'select'], + setup (props, ctx) { + const months = vue.ref(props.date.locale('en').localeData().monthsShort().map(_ => _.toLowerCase())) + const tableRows = vue.ref([[], [], []]) + const lastRow = vue.ref(null) + const lastColumn = vue.ref(null) + const rows = vue.computed(() => { + let _a + const rows = tableRows.value + const now = dayjs__default.default.tz().startOf('month') + for (let i = 0; i < 3; i++) { + const row = rows[i] + for (let j = 0; j < 4; j++) { + let cell = row[j] + if (!cell) { + cell = { + row: i, + column: j, + type: 'normal', + inRange: false, + start: false, + end: false + } + } + cell.type = 'normal' + const index = i * 4 + j + const calTime = props.date.startOf('year').month(index) + const calEndDate = props.rangeState.endDate || props.maxDate || + props.rangeState.selecting && props.minDate + cell.inRange = (props.minDate && + calTime.isSameOrAfter(props.minDate, 'month') && + (calEndDate && + calTime.isSameOrBefore(calEndDate, 'month'))) || (props.minDate && + calTime.isSameOrBefore(props.minDate, 'month') && + (calEndDate && + calTime.isSameOrAfter(calEndDate, 'month'))) + if ((_a = props.minDate) === null || _a === void 0 ? void 0 : _a.isSameOrAfter(calEndDate)) { + cell.start = calEndDate && calTime.isSame(calEndDate, 'month') + cell.end = props.minDate && calTime.isSame(props.minDate, 'month') + } else { + cell.start = props.minDate && calTime.isSame(props.minDate, 'month') + cell.end = calEndDate && calTime.isSame(calEndDate, 'month') + } + const isToday = now.isSame(calTime) + if (isToday) { + cell.type = 'today' + } + cell.text = index + const cellDate = calTime.toDate() + cell.disabled = props.disabledDate && props.disabledDate(cellDate) + row[j] = cell + } + } + return rows + }) + const getCellStyle = cell => { + const style = {} + const year = props.date.year() + const today = new Date() + const month = cell.text + style.disabled = props.disabledDate + ? datesInMonth(year, month).every(props.disabledDate) + : false + style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex(date => date.year() === year && date.month() === month) >= 0 + style.today = today.getFullYear() === year && today.getMonth() === month + if (cell.inRange) { + style['in-range'] = true + if (cell.start) { + style['start-date'] = true + } + if (cell.end) { + style['end-date'] = true + } + } + return style + } + const handleMouseMove = event => { + if (!props.rangeState.selecting) { return } + let target = event.target + if (target.tagName === 'A') { + target = target.parentNode.parentNode + } + if (target.tagName === 'DIV') { + target = target.parentNode + } + if (target.tagName !== 'TD') { return } + const row = target.parentNode.rowIndex + const column = target.cellIndex + if (rows.value[row][column].disabled) { return } + if (row !== lastRow.value || column !== lastColumn.value) { + lastRow.value = row + lastColumn.value = column + ctx.emit('changerange', { + selecting: true, + endDate: props.date.startOf('year').month(row * 4 + column) + }) + } + } + const handleMonthTableClick = event => { + let target = event.target + if (target.tagName === 'A') { + target = target.parentNode.parentNode + } + if (target.tagName === 'DIV') { + target = target.parentNode + } + if (target.tagName !== 'TD') { return } + if (dom.hasClass(target, 'disabled')) { return } + const column = target.cellIndex + const row = target.parentNode.rowIndex + const month = row * 4 + column + const newDate = props.date.startOf('year').month(month) + if (props.selectionMode === 'range') { + if (!props.rangeState.selecting) { + ctx.emit('pick', { minDate: newDate, maxDate: null }) + ctx.emit('select', true) + } else { + if (newDate >= props.minDate) { + ctx.emit('pick', { minDate: props.minDate, maxDate: newDate }) + } else { + ctx.emit('pick', { minDate: newDate, maxDate: props.minDate }) + } + ctx.emit('select', false) + } + } else { + ctx.emit('pick', month) + } + } + return { + handleMouseMove, + handleMonthTableClick, + rows, + getCellStyle, + t: locale.t, + months + } + } +}) + +const _hoisted_1$1 = { class: 'cell' } + +function render$1 (_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createBlock('table', { + class: 'el-month-table', + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleMonthTableClick && _ctx.handleMonthTableClick(...args))), + onMousemove: _cache[2] || (_cache[2] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args))) + }, [ + vue.createVNode('tbody', null, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => { + return (vue.openBlock(), vue.createBlock('tr', { key: key }, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => { + return (vue.openBlock(), vue.createBlock('td', { + key: key_, + class: _ctx.getCellStyle(cell) + }, [ + vue.createVNode('div', null, [ + vue.createVNode('a', _hoisted_1$1, vue.toDisplayString(_ctx.t('el.datepicker.months.' + _ctx.months[cell.text])), 1 /* TEXT */) + ]) + ], 2 /* CLASS */)) + }), 128 /* KEYED_FRAGMENT */)) + ])) + }), 128 /* KEYED_FRAGMENT */)) + ]) + ], 32 /* HYDRATE_EVENTS */)) +} + +script$1.render = render$1 +script$1.__file = 'packages/date-picker/src/date-picker-com/basic-month-table.vue' + +const datesInYear = year => { + const firstDay = dayjs__default.default.tz(String(year)).startOf('year') + const lastDay = firstDay.endOf('year') + const numOfDays = lastDay.dayOfYear() + return timePicker.rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate()) +} +const script$2 = vue.defineComponent({ + props: { + disabledDate: { + type: Function + }, + parsedValue: { + type: Object + }, + date: { + type: Object + } + }, + emits: ['pick'], + setup (props, ctx) { + const startYear = vue.computed(() => { + return Math.floor(props.date.year() / 10) * 10 + }) + const getCellStyle = year => { + const style = {} + const today = dayjs__default.default.tz() + style.disabled = props.disabledDate + ? datesInYear(year).every(props.disabledDate) + : false + style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex(_ => _.year() === year) >= 0 + style.today = today.year() === year + return style + } + const handleYearTableClick = event => { + const target = event.target + if (target.tagName === 'A') { + if (dom.hasClass(target.parentNode, 'disabled')) { return } + const year = target.textContent || target.innerText + ctx.emit('pick', Number(year)) + } + } + return { + startYear, + getCellStyle, + handleYearTableClick + } + } +}) + +const _hoisted_1$2 = { class: 'cell' } +const _hoisted_2 = { class: 'cell' } +const _hoisted_3 = { class: 'cell' } +const _hoisted_4 = { class: 'cell' } +const _hoisted_5 = { class: 'cell' } +const _hoisted_6 = { class: 'cell' } +const _hoisted_7 = { class: 'cell' } +const _hoisted_8 = { class: 'cell' } +const _hoisted_9 = { class: 'cell' } +const _hoisted_10 = { class: 'cell' } +const _hoisted_11 = /* #__PURE__ */vue.createVNode('td', null, null, -1 /* HOISTED */) +const _hoisted_12 = /* #__PURE__ */vue.createVNode('td', null, null, -1 /* HOISTED */) + +function render$2 (_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createBlock('table', { + class: 'el-year-table', + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleYearTableClick && _ctx.handleYearTableClick(...args))) + }, [ + vue.createVNode('tbody', null, [ + vue.createVNode('tr', null, [ + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 0)] + }, [ + vue.createVNode('a', _hoisted_1$2, vue.toDisplayString(_ctx.startYear), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 1)] + }, [ + vue.createVNode('a', _hoisted_2, vue.toDisplayString(_ctx.startYear + 1), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 2)] + }, [ + vue.createVNode('a', _hoisted_3, vue.toDisplayString(_ctx.startYear + 2), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 3)] + }, [ + vue.createVNode('a', _hoisted_4, vue.toDisplayString(_ctx.startYear + 3), 1 /* TEXT */) + ], 2 /* CLASS */) + ]), + vue.createVNode('tr', null, [ + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 4)] + }, [ + vue.createVNode('a', _hoisted_5, vue.toDisplayString(_ctx.startYear + 4), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 5)] + }, [ + vue.createVNode('a', _hoisted_6, vue.toDisplayString(_ctx.startYear + 5), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 6)] + }, [ + vue.createVNode('a', _hoisted_7, vue.toDisplayString(_ctx.startYear + 6), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 7)] + }, [ + vue.createVNode('a', _hoisted_8, vue.toDisplayString(_ctx.startYear + 7), 1 /* TEXT */) + ], 2 /* CLASS */) + ]), + vue.createVNode('tr', null, [ + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 8)] + }, [ + vue.createVNode('a', _hoisted_9, vue.toDisplayString(_ctx.startYear + 8), 1 /* TEXT */) + ], 2 /* CLASS */), + vue.createVNode('td', { + class: ['available', _ctx.getCellStyle(_ctx.startYear + 9)] + }, [ + vue.createVNode('a', _hoisted_10, vue.toDisplayString(_ctx.startYear + 9), 1 /* TEXT */) + ], 2 /* CLASS */), + _hoisted_11, + _hoisted_12 + ]) + ]) + ])) +} + +script$2.render = render$2 +script$2.__file = 'packages/date-picker/src/date-picker-com/basic-year-table.vue' + +const timeWithinRange = () => true +const script$3 = vue.defineComponent({ + components: { + DateTable: script, ElInput: ElInput__default.default, ElButton: ElButton__default.default, TimePickPanel: timePicker.TimePickPanel, MonthTable: script$1, YearTable: script$2 + }, + directives: { clickoutside: directives.ClickOutside }, + props: { + visible: { + type: Boolean, + default: false + }, + parsedValue: { + type: [Object, Array] + }, + format: { + type: String, + default: '' + }, + type: { + type: String, + required: true + } + }, + emits: ['pick', 'set-picker-option'], + setup (props, ctx) { + const innerDate = vue.ref(dayjs__default.default.tz()) + const month = vue.computed(() => { + return innerDate.value.month() + }) + const year = vue.computed(() => { + return innerDate.value.year() + }) + const selectableRange = vue.ref([]) + const userInputDate = vue.ref(null) + const userInputTime = vue.ref(null) + const checkDateWithinRange = date => { + return selectableRange.value.length > 0 + ? timeWithinRange(date, selectableRange.value, props.format || 'HH:mm:ss') + : true + } + const formatEmit = (emitDayjs) => { + if (showTime.value) { return emitDayjs.millisecond(0) } + if (defaultTime) { + const defaultTimeD = dayjs__default.default.tz(defaultTime) + return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date()) + } + return emitDayjs.startOf('day') + } + const emit = (value, ...args) => { + if (!value) { + ctx.emit('pick', value, ...args) + } else if (Array.isArray(value)) { + const dates = value.map(formatEmit) + ctx.emit('pick', dates, ...args) + } else { + ctx.emit('pick', formatEmit(value), ...args) + } + userInputDate.value = null + userInputTime.value = null + } + const handleDatePick = (value) => { + if (selectionMode.value === 'day') { + let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value + if (!checkDateWithinRange(newDate)) { + newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date()) + } + innerDate.value = newDate + emit(newDate, showTime.value) + } else if (selectionMode.value === 'week') { + emit(value.date) + } else if (selectionMode.value === 'dates') { + emit(value, true) + } + } + const prevMonth_ = () => { + innerDate.value = innerDate.value.subtract(1, 'month') + } + const nextMonth_ = () => { + innerDate.value = innerDate.value.add(1, 'month') + } + const prevYear_ = () => { + if (currentView.value === 'year') { + innerDate.value = innerDate.value.subtract(10, 'year') + } else { + innerDate.value = innerDate.value.subtract(1, 'year') + } + } + const nextYear_ = () => { + if (currentView.value === 'year') { + innerDate.value = innerDate.value.add(10, 'year') + } else { + innerDate.value = innerDate.value.add(1, 'year') + } + } + const currentView = vue.ref('date') + const yearLabel = vue.computed(() => { + const yearTranslation = locale.t('el.datepicker.year') + if (currentView.value === 'year') { + const startYear = Math.floor(year.value / 10) * 10 + if (yearTranslation) { + return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation + } + return startYear + ' - ' + (startYear + 9) + } + return year.value + ' ' + yearTranslation + }) + const handleShortcutClick = shortcut => { + if (shortcut.value) { + emit(dayjs__default.default.tz(shortcut.value)) + return + } + if (shortcut.onClick) { + shortcut.onClick(ctx) + } + } + const selectionMode = vue.computed(() => { + if (['week', 'month', 'year', 'dates'].includes(props.type)) { + return props.type + } + return 'day' + }) + vue.watch(() => selectionMode.value, val => { + if (['month', 'year'].includes(val)) { + currentView.value = val + return + } + currentView.value = 'date' + }, { immediate: true }) + const hasShortcuts = vue.computed(() => !!shortcuts.length) + const handleMonthPick = month => { + innerDate.value = innerDate.value.startOf('month').month(month) + if (selectionMode.value === 'month') { + emit(innerDate.value) + } else { + currentView.value = 'date' + } + } + const handleYearPick = year => { + if (selectionMode.value === 'year') { + innerDate.value = innerDate.value.startOf('year').year(year) + emit(innerDate.value) + } else { + innerDate.value = innerDate.value.year(year) + currentView.value = 'month' + } + } + const showMonthPicker = () => { + currentView.value = 'month' + } + const showYearPicker = () => { + currentView.value = 'year' + } + const showTime = vue.computed(() => props.type === 'datetime' || props.type === 'datetimerange') + const footerVisible = vue.computed(() => { + return showTime.value || selectionMode.value === 'dates' + }) + const onConfirm = () => { + if (selectionMode.value === 'dates') { + emit(props.parsedValue) + } else { + let result = props.parsedValue + if (!result) { + const defaultTimeD = dayjs__default.default.tz(defaultTime) + const defaultValueD = getDefaultValue() + result = defaultTimeD.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date()) + } + innerDate.value = result + emit(result) + } + } + const changeToNow = () => { + const now = dayjs__default.default.tz() + const nowDate = now.toDate() + if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) { + innerDate.value = dayjs__default.default.tz() + emit(innerDate.value) + } + } + const timeFormat = vue.computed(() => { + return timePicker.extractTimeFormat(props.format) + }) + const dateFormat = vue.computed(() => { + return timePicker.extractDateFormat(props.format) + }) + const visibleTime = vue.computed(() => { + if (userInputTime.value) { return userInputTime.value } + if (!props.parsedValue && !defaultValue) { return } + return (props.parsedValue || innerDate.value).format(timeFormat.value) + }) + const visibleDate = vue.computed(() => { + if (userInputDate.value) { return userInputDate.value } + if (!props.parsedValue && !defaultValue) { return } + return (props.parsedValue || innerDate.value).format(dateFormat.value) + }) + const timePickerVisible = vue.ref(false) + const onTimePickerInputFocus = () => { + timePickerVisible.value = true + } + const handleTimePickClose = () => { + timePickerVisible.value = false + } + const handleTimePick = (value, visible, first) => { + const newDate = props.parsedValue ? props.parsedValue.hour(value.hour()).minute(value.minute()).second(value.second()) : value + innerDate.value = newDate + emit(innerDate.value, true) + if (!first) { + timePickerVisible.value = visible + } + } + const handleVisibleTimeChange = value => { + const newDate = dayjs__default.default.tz(value, timeFormat.value) + if (newDate.isValid() && checkDateWithinRange(newDate)) { + innerDate.value = newDate.year(innerDate.value.year()).month(innerDate.value.month()).date(innerDate.value.date()) + userInputTime.value = null + timePickerVisible.value = false + emit(innerDate.value, true) + } + } + const handleVisibleDateChange = value => { + const newDate = dayjs__default.default.tz(value, dateFormat.value) + if (newDate.isValid()) { + if (disabledDate && disabledDate(newDate.toDate())) { + return + } + innerDate.value = newDate.hour(innerDate.value.hour()).minute(innerDate.value.minute()).second(innerDate.value.second()) + userInputDate.value = null + emit(innerDate.value, true) + } + } + const isValidValue = date_ => { + return date_.isValid() && (disabledDate + ? !disabledDate(date_.toDate()) + : true) + } + const formatToString = value => { + if (selectionMode.value === 'dates') { + return value.map(_ => _.format(props.format)) + } + return value.format(props.format) + } + const parseUserInput = value => { + return dayjs__default.default.tz(value, props.format) + } + const getDefaultValue = () => { + return dayjs__default.default.tz(defaultValue) + } + const handleKeydown = event => { + const { code, keyCode } = event + const list = [aria.EVENT_CODE.up, aria.EVENT_CODE.down, aria.EVENT_CODE.left, aria.EVENT_CODE.right] + if (props.visible && !timePickerVisible.value) { + if (list.includes(code)) { + handleKeyControl(keyCode) + event.stopPropagation() + event.preventDefault() + } + if (code === aria.EVENT_CODE.enter && + userInputDate.value === null && + userInputTime.value === null) { + emit(innerDate, false) + } + } + } + const handleKeyControl = keyCode => { + const mapping = { + year: { + 38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setFullYear(date.getFullYear() + step) + }, + month: { + 38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setMonth(date.getMonth() + step) + }, + week: { + 38: -1, 40: 1, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step * 7) + }, + day: { + 38: -7, 40: 7, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step) + } + } + const newDate = innerDate.value.toDate() + while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) { + const map = mapping[selectionMode.value] + map.offset(newDate, map[keyCode]) + if (disabledDate && disabledDate(newDate)) { + continue + } + const result = dayjs__default.default.tz(newDate) + innerDate.value = result + ctx.emit('pick', result, true) + break + } + } + ctx.emit('set-picker-option', ['isValidValue', isValidValue]) + ctx.emit('set-picker-option', ['formatToString', formatToString]) + ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]) + ctx.emit('set-picker-option', ['handleKeydown', handleKeydown]) + const pickerBase = vue.inject('EP_PICKER_BASE') + const { shortcuts, disabledDate, cellClassName, defaultTime, defaultValue, arrowControl } = pickerBase.props + vue.watch(() => props.parsedValue, val => { + if (val) { + if (selectionMode.value === 'dates') { return } + if (Array.isArray(val)) { return } + innerDate.value = val + } else { + innerDate.value = getDefaultValue() + } + }, { immediate: true }) + return { + handleTimePick, + handleTimePickClose, + onTimePickerInputFocus, + timePickerVisible, + visibleTime, + visibleDate, + showTime, + changeToNow, + onConfirm, + footerVisible, + handleYearPick, + showMonthPicker, + showYearPicker, + handleMonthPick, + hasShortcuts, + shortcuts, + arrowControl, + disabledDate, + cellClassName, + selectionMode, + handleShortcutClick, + prevYear_, + nextYear_, + prevMonth_, + nextMonth_, + innerDate, + t: locale.t, + yearLabel, + currentView, + month, + handleDatePick, + handleVisibleTimeChange, + handleVisibleDateChange, + timeFormat, + userInputTime, + userInputDate + } + } +}) + +const _hoisted_1$3 = { class: 'el-picker-panel__body-wrapper' } +const _hoisted_2$1 = { + key: 0, + class: 'el-picker-panel__sidebar' +} +const _hoisted_3$1 = { class: 'el-picker-panel__body' } +const _hoisted_4$1 = { + key: 0, + class: 'el-date-picker__time-header' +} +const _hoisted_5$1 = { class: 'el-date-picker__editor-wrap' } +const _hoisted_6$1 = { class: 'el-date-picker__editor-wrap' } +const _hoisted_7$1 = { class: 'el-picker-panel__content' } +const _hoisted_8$1 = { class: 'el-picker-panel__footer' } + +function render$3 (_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_input = vue.resolveComponent('el-input') + const _component_time_pick_panel = vue.resolveComponent('time-pick-panel') + const _component_date_table = vue.resolveComponent('date-table') + const _component_year_table = vue.resolveComponent('year-table') + const _component_month_table = vue.resolveComponent('month-table') + const _component_el_button = vue.resolveComponent('el-button') + const _directive_clickoutside = vue.resolveDirective('clickoutside') + + return (vue.openBlock(), vue.createBlock('div', { + class: ['el-picker-panel el-date-picker', [{ + 'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts, + 'has-time': _ctx.showTime + }]] + }, [ + vue.createVNode('div', _hoisted_1$3, [ + vue.renderSlot(_ctx.$slots, 'sidebar', { class: 'el-picker-panel__sidebar' }), + (_ctx.hasShortcuts) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_2$1, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => { + return (vue.openBlock(), vue.createBlock('button', { + key: key, + type: 'button', + class: 'el-picker-panel__shortcut', + onClick: $event => (_ctx.handleShortcutClick(shortcut)) + }, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ['onClick'])) + }), 128 /* KEYED_FRAGMENT */)) + ])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('div', _hoisted_3$1, [ + (_ctx.showTime) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_4$1, [ + vue.createVNode('span', _hoisted_5$1, [ + vue.createVNode(_component_el_input, { + placeholder: _ctx.t('el.datepicker.selectDate'), + 'model-value': _ctx.visibleDate, + size: 'small', + onInput: _cache[1] || (_cache[1] = val => _ctx.userInputDate = val), + onChange: _ctx.handleVisibleDateChange + }, null, 8 /* PROPS */, ['placeholder', 'model-value', 'onChange']) + ]), + vue.withDirectives(vue.createVNode('span', _hoisted_6$1, [ + vue.createVNode(_component_el_input, { + placeholder: _ctx.t('el.datepicker.selectTime'), + 'model-value': _ctx.visibleTime, + size: 'small', + onFocus: _ctx.onTimePickerInputFocus, + onInput: _cache[2] || (_cache[2] = val => _ctx.userInputTime = val), + onChange: _ctx.handleVisibleTimeChange + }, null, 8 /* PROPS */, ['placeholder', 'model-value', 'onFocus', 'onChange']), + vue.createVNode(_component_time_pick_panel, { + visible: _ctx.timePickerVisible, + format: _ctx.timeFormat, + 'time-arrow-control': _ctx.arrowControl, + 'parsed-value': _ctx.innerDate, + onPick: _ctx.handleTimePick + }, null, 8 /* PROPS */, ['visible', 'format', 'time-arrow-control', 'parsed-value', 'onPick']) + ], 512 /* NEED_PATCH */), [ + [_directive_clickoutside, _ctx.handleTimePickClose] + ]) + ])) + : vue.createCommentVNode('v-if', true), + vue.withDirectives(vue.createVNode('div', { + class: ['el-date-picker__header', { 'el-date-picker__header--bordered': _ctx.currentView === 'year' || _ctx.currentView === 'month' }] + }, [ + vue.createVNode('button', { + type: 'button', + 'aria-label': _ctx.t('el.datepicker.prevYear'), + class: 'el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left', + onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.prevYear_ && _ctx.prevYear_(...args))) + }, null, 8 /* PROPS */, ['aria-label']), + vue.withDirectives(vue.createVNode('button', { + type: 'button', + 'aria-label': _ctx.t('el.datepicker.prevMonth'), + class: 'el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left', + onClick: _cache[4] || (_cache[4] = (...args) => (_ctx.prevMonth_ && _ctx.prevMonth_(...args))) + }, null, 8 /* PROPS */, ['aria-label']), [ + [vue.vShow, _ctx.currentView === 'date'] + ]), + vue.createVNode('span', { + role: 'button', + class: 'el-date-picker__header-label', + onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.showYearPicker && _ctx.showYearPicker(...args))) + }, vue.toDisplayString(_ctx.yearLabel), 1 /* TEXT */), + vue.withDirectives(vue.createVNode('span', { + role: 'button', + class: ['el-date-picker__header-label', { active: _ctx.currentView === 'month' }], + onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.showMonthPicker && _ctx.showMonthPicker(...args))) + }, vue.toDisplayString(_ctx.t(`el.datepicker.month${_ctx.month + 1}`)), 3 /* TEXT, CLASS */), [ + [vue.vShow, _ctx.currentView === 'date'] + ]), + vue.createVNode('button', { + type: 'button', + 'aria-label': _ctx.t('el.datepicker.nextYear'), + class: 'el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right', + onClick: _cache[7] || (_cache[7] = (...args) => (_ctx.nextYear_ && _ctx.nextYear_(...args))) + }, null, 8 /* PROPS */, ['aria-label']), + vue.withDirectives(vue.createVNode('button', { + type: 'button', + 'aria-label': _ctx.t('el.datepicker.nextMonth'), + class: 'el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right', + onClick: _cache[8] || (_cache[8] = (...args) => (_ctx.nextMonth_ && _ctx.nextMonth_(...args))) + }, null, 8 /* PROPS */, ['aria-label']), [ + [vue.vShow, _ctx.currentView === 'date'] + ]) + ], 2 /* CLASS */), [ + [vue.vShow, _ctx.currentView !== 'time'] + ]), + vue.createVNode('div', _hoisted_7$1, [ + (_ctx.currentView === 'date') + ? (vue.openBlock(), vue.createBlock(_component_date_table, { + key: 0, + 'selection-mode': _ctx.selectionMode, + date: _ctx.innerDate, + 'parsed-value': _ctx.parsedValue, + 'disabled-date': _ctx.disabledDate, + onPick: _ctx.handleDatePick + }, null, 8 /* PROPS */, ['selection-mode', 'date', 'parsed-value', 'disabled-date', 'onPick'])) + : vue.createCommentVNode('v-if', true), + (_ctx.currentView === 'year') + ? (vue.openBlock(), vue.createBlock(_component_year_table, { + key: 1, + date: _ctx.innerDate, + 'disabled-date': _ctx.disabledDate, + 'parsed-value': _ctx.parsedValue, + onPick: _ctx.handleYearPick + }, null, 8 /* PROPS */, ['date', 'disabled-date', 'parsed-value', 'onPick'])) + : vue.createCommentVNode('v-if', true), + (_ctx.currentView === 'month') + ? (vue.openBlock(), vue.createBlock(_component_month_table, { + key: 2, + date: _ctx.innerDate, + 'parsed-value': _ctx.parsedValue, + 'disabled-date': _ctx.disabledDate, + onPick: _ctx.handleMonthPick + }, null, 8 /* PROPS */, ['date', 'parsed-value', 'disabled-date', 'onPick'])) + : vue.createCommentVNode('v-if', true) + ]) + ]) + ]), + vue.withDirectives(vue.createVNode('div', _hoisted_8$1, [ + vue.withDirectives(vue.createVNode(_component_el_button, { + size: 'mini', + type: 'text', + class: 'el-picker-panel__link-btn', + onClick: _ctx.changeToNow + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.now')), 1 /* TEXT */) + ]), + _: 1 /* STABLE */ + }, 8 /* PROPS */, ['onClick']), [ + [vue.vShow, _ctx.selectionMode !== 'dates'] + ]), + vue.createVNode(_component_el_button, { + plain: '', + size: 'mini', + class: 'el-picker-panel__link-btn', + onClick: _ctx.onConfirm + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */) + ]), + _: 1 /* STABLE */ + }, 8 /* PROPS */, ['onClick']) + ], 512 /* NEED_PATCH */), [ + [vue.vShow, _ctx.footerVisible && _ctx.currentView === 'date'] + ]) + ], 2 /* CLASS */)) +} + +script$3.render = render$3 +script$3.__file = 'packages/date-picker/src/date-picker-com/panel-date-pick.vue' + +const script$4 = vue.defineComponent({ + directives: { clickoutside: directives.ClickOutside }, + components: { TimePickPanel: timePicker.TimePickPanel, DateTable: script, ElInput: ElInput__default.default, ElButton: ElButton__default.default }, + props: { + unlinkPanels: Boolean, + parsedValue: { + type: Array + }, + type: { + type: String, + required: true + } + }, + emits: ['pick', 'set-picker-option'], + setup (props, ctx) { + const leftDate = vue.ref(dayjs__default.default.tz()) + const rightDate = vue.ref(dayjs__default.default.tz().add(1, 'month')) + const minDate = vue.ref(null) + const maxDate = vue.ref(null) + const dateUserInput = vue.ref({ + min: null, + max: null + }) + const timeUserInput = vue.ref({ + min: null, + max: null + }) + const leftLabel = vue.computed(() => { + return leftDate.value.year() + ' ' + locale.t('el.datepicker.year') + ' ' + locale.t(`el.datepicker.month${leftDate.value.month() + 1}`) + }) + const rightLabel = vue.computed(() => { + return rightDate.value.year() + ' ' + locale.t('el.datepicker.year') + ' ' + locale.t(`el.datepicker.month${rightDate.value.month() + 1}`) + }) + const leftYear = vue.computed(() => { + return leftDate.value.year() + }) + const leftMonth = vue.computed(() => { + return leftDate.value.month() + }) + const rightYear = vue.computed(() => { + return rightDate.value.year() + }) + const rightMonth = vue.computed(() => { + return rightDate.value.month() + }) + const hasShortcuts = vue.computed(() => !!shortcuts.length) + const minVisibleDate = vue.computed(() => { + if (dateUserInput.value.min !== null) { return dateUserInput.value.min } + if (minDate.value) { return minDate.value.format(dateFormat.value) } + return '' + }) + const maxVisibleDate = vue.computed(() => { + if (dateUserInput.value.max !== null) { return dateUserInput.value.max } + if (maxDate.value || minDate.value) { return ((maxDate.value || minDate.value)).format(dateFormat.value) } + return '' + }) + const minVisibleTime = vue.computed(() => { + if (timeUserInput.value.min !== null) { return timeUserInput.value.min } + if (minDate.value) { return minDate.value.format(timeFormat.value) } + return '' + }) + const maxVisibleTime = vue.computed(() => { + if (timeUserInput.value.max !== null) { return timeUserInput.value.max } + if (maxDate.value || minDate.value) { return ((maxDate.value || minDate.value)).format(timeFormat.value) } + return '' + }) + const timeFormat = vue.computed(() => { + return timePicker.extractTimeFormat(format) + }) + const dateFormat = vue.computed(() => { + return timePicker.extractDateFormat(format) + }) + const leftPrevYear = () => { + leftDate.value = leftDate.value.subtract(1, 'year') + if (!props.unlinkPanels) { + rightDate.value = leftDate.value.add(1, 'month') + } + } + const leftPrevMonth = () => { + leftDate.value = leftDate.value.subtract(1, 'month') + if (!props.unlinkPanels) { + rightDate.value = leftDate.value.add(1, 'month') + } + } + const rightNextYear = () => { + if (!props.unlinkPanels) { + leftDate.value = leftDate.value.add(1, 'year') + rightDate.value = leftDate.value.add(1, 'month') + } else { + rightDate.value = rightDate.value.add(1, 'year') + } + } + const rightNextMonth = () => { + if (!props.unlinkPanels) { + leftDate.value = leftDate.value.add(1, 'month') + rightDate.value = leftDate.value.add(1, 'month') + } else { + rightDate.value = rightDate.value.add(1, 'month') + } + } + const leftNextYear = () => { + leftDate.value = leftDate.value.add(1, 'year') + } + const leftNextMonth = () => { + leftDate.value = leftDate.value.add(1, 'month') + } + const rightPrevYear = () => { + rightDate.value = rightDate.value.subtract(1, 'year') + } + const rightPrevMonth = () => { + rightDate.value = rightDate.value.subtract(1, 'month') + } + const enableMonthArrow = vue.computed(() => { + const nextMonth = (leftMonth.value + 1) % 12 + const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0 + return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value) + }) + const enableYearArrow = vue.computed(() => { + return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12 + }) + const isValidValue = value => { + return Array.isArray(value) && + value[0] && value[1] && + value[0].valueOf() <= value[1].valueOf() + } + const rangeState = vue.ref({ + endDate: null, + selecting: false + }) + const btnDisabled = vue.computed(() => { + return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidValue([minDate.value, maxDate.value])) + }) + const handleChangeRange = val => { + rangeState.value = val + } + const onSelect = selecting => { + rangeState.value.selecting = selecting + if (!selecting) { + rangeState.value.endDate = null + } + } + const showTime = vue.computed(() => props.type === 'datetime' || props.type === 'datetimerange') + const handleConfirm = (visible = false) => { + if (isValidValue([minDate.value, maxDate.value])) { + ctx.emit('pick', [minDate.value, maxDate.value], visible) + } + } + const formatEmit = (emitDayjs, index) => { + if (!emitDayjs) { return } + if (defaultTime) { + const defaultTimeD = dayjs__default.default.tz(defaultTime[index] || defaultTime) + return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date()) + } + return emitDayjs + } + const handleRangePick = (val, close = true) => { + const minDate_ = formatEmit(val.minDate, 0) + const maxDate_ = formatEmit(val.maxDate, 1) + if (maxDate.value === maxDate_ && minDate.value === minDate_) { + return + } + maxDate.value = maxDate_ + minDate.value = minDate_ + if (!close || showTime.value) { return } + handleConfirm() + } + const handleShortcutClick = shortcut => { + if (shortcut.value) { + ctx.emit('pick', [dayjs__default.default.tz(shortcut.value[0]), dayjs__default.default.tz(shortcut.value[1])]) + return + } + if (shortcut.onClick) { + shortcut.onClick(ctx) + } + } + const minTimePickerVisible = vue.ref(false) + const maxTimePickerVisible = vue.ref(false) + const handleMinTimeClose = () => { + minTimePickerVisible.value = false + } + const handleMaxTimeClose = () => { + maxTimePickerVisible.value = false + } + const handleDateInput = (value, type) => { + dateUserInput.value[type] = value + const parsedValueD = dayjs__default.default.tz(value, dateFormat.value) + if (parsedValueD.isValid()) { + if (disabledDate && + disabledDate(parsedValueD.toDate())) { + return + } + if (type === 'min') { + leftDate.value = parsedValueD + minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date()) + if (!props.unlinkPanels) { + rightDate.value = parsedValueD.add(1, 'month') + maxDate.value = minDate.value.add(1, 'month') + } + } else { + rightDate.value = parsedValueD + maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date()) + if (!props.unlinkPanels) { + leftDate.value = parsedValueD.subtract(1, 'month') + minDate.value = maxDate.value.subtract(1, 'month') + } + } + } + } + const handleDateChange = (value, type) => { + dateUserInput.value[type] = null + } + const handleTimeInput = (value, type) => { + timeUserInput.value[type] = value + const parsedValueD = dayjs__default.default.tz(value, timeFormat.value) + if (parsedValueD.isValid()) { + if (type === 'min') { + minTimePickerVisible.value = true + minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second()) + if (!maxDate.value || maxDate.value.isBefore(minDate.value)) { + maxDate.value = minDate.value + } + } else { + maxTimePickerVisible.value = true + maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second()) + rightDate.value = maxDate.value + if (maxDate.value && maxDate.value.isBefore(minDate.value)) { + minDate.value = maxDate.value + } + } + } + } + const handleTimeChange = (value, type) => { + timeUserInput.value[type] = null + if (type === 'min') { + leftDate.value = minDate.value + minTimePickerVisible.value = false + } else { + rightDate.value = maxDate.value + maxTimePickerVisible.value = false + } + } + const handleMinTimePick = (value, visible, first) => { + if (timeUserInput.value.min) { return } + if (value) { + leftDate.value = value + minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second()) + } + if (!first) { + minTimePickerVisible.value = visible + } + if (!maxDate.value || maxDate.value.isBefore(minDate.value)) { + maxDate.value = minDate.value + } + } + const handleMaxTimePick = (value, visible, first) => { + if (timeUserInput.value.max) { return } + if (value) { + rightDate.value = value + maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second()) + } + if (!first) { + maxTimePickerVisible.value = visible + } + if (maxDate.value && maxDate.value.isBefore(minDate.value)) { + minDate.value = maxDate.value + } + } + const handleClear = () => { + leftDate.value = getDefaultValue()[0] + rightDate.value = leftDate.value.add(1, 'month') + ctx.emit('pick', null) + } + const formatToString = value => { + return Array.isArray(value) ? value.map(_ => _.format(format)) : value.format(format) + } + const parseUserInput = value => { + return Array.isArray(value) ? value.map(_ => dayjs__default.default.tz(_, format)) : dayjs__default.default.tz(value, format) + } + const getDefaultValue = () => { + let start + if (Array.isArray(defaultValue)) { + const left = dayjs__default.default.tz(defaultValue[0]) + let right = dayjs__default.default.tz(defaultValue[1]) + if (!props.unlinkPanels) { + right = left.add(1, 'month') + } + return [left, right] + } else if (defaultValue) { + start = dayjs__default.default.tz(defaultValue) + } else { + start = dayjs__default.default.tz() + } + return [start, start.add(1, 'month')] + } + ctx.emit('set-picker-option', ['isValidValue', isValidValue]) + ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]) + ctx.emit('set-picker-option', ['formatToString', formatToString]) + ctx.emit('set-picker-option', ['handleClear', handleClear]) + const pickerBase = vue.inject('EP_PICKER_BASE') + const { shortcuts, disabledDate, cellClassName, format, defaultTime, defaultValue, arrowControl } = pickerBase.props + vue.watch(() => props.parsedValue, newVal => { + if (newVal && newVal.length === 2) { + minDate.value = newVal[0] + maxDate.value = newVal[1] + leftDate.value = minDate.value + if (props.unlinkPanels && maxDate.value) { + const minDateYear = minDate.value.year() + const minDateMonth = minDate.value.month() + const maxDateYear = maxDate.value.year() + const maxDateMonth = maxDate.value.month() + rightDate.value = minDateYear === maxDateYear && minDateMonth === maxDateMonth + ? maxDate.value.add(1, 'month') + : maxDate.value + } else { + rightDate.value = leftDate.value.add(1, 'month') + } + } else { + const defaultArr = getDefaultValue() + minDate.value = null + maxDate.value = null + leftDate.value = defaultArr[0] + rightDate.value = defaultArr[1] + } + }, { immediate: true }) + return { + shortcuts, + disabledDate, + cellClassName, + minTimePickerVisible, + maxTimePickerVisible, + handleMinTimeClose, + handleMaxTimeClose, + handleShortcutClick, + rangeState, + minDate, + maxDate, + handleRangePick, + onSelect, + handleChangeRange, + btnDisabled, + enableYearArrow, + enableMonthArrow, + rightPrevMonth, + rightPrevYear, + rightNextMonth, + rightNextYear, + leftPrevMonth, + leftPrevYear, + leftNextMonth, + leftNextYear, + hasShortcuts, + leftLabel, + rightLabel, + leftDate, + rightDate, + showTime, + t: locale.t, + minVisibleDate, + maxVisibleDate, + minVisibleTime, + maxVisibleTime, + arrowControl, + handleDateInput, + handleDateChange, + handleTimeInput, + handleTimeChange, + handleMinTimePick, + handleMaxTimePick, + handleClear, + handleConfirm, + timeFormat + } + } +}) + +const _hoisted_1$4 = { class: 'el-picker-panel__body-wrapper' } +const _hoisted_2$2 = { + key: 0, + class: 'el-picker-panel__sidebar' +} +const _hoisted_3$2 = { class: 'el-picker-panel__body' } +const _hoisted_4$2 = { + key: 0, + class: 'el-date-range-picker__time-header' +} +const _hoisted_5$2 = { class: 'el-date-range-picker__editors-wrap' } +const _hoisted_6$2 = { class: 'el-date-range-picker__time-picker-wrap' } +const _hoisted_7$2 = { class: 'el-date-range-picker__time-picker-wrap' } +const _hoisted_8$2 = /* #__PURE__ */vue.createVNode('span', { class: 'el-icon-arrow-right' }, null, -1 /* HOISTED */) +const _hoisted_9$1 = { class: 'el-date-range-picker__editors-wrap is-right' } +const _hoisted_10$1 = { class: 'el-date-range-picker__time-picker-wrap' } +const _hoisted_11$1 = { class: 'el-date-range-picker__time-picker-wrap' } +const _hoisted_12$1 = { class: 'el-picker-panel__content el-date-range-picker__content is-left' } +const _hoisted_13 = { class: 'el-date-range-picker__header' } +const _hoisted_14 = { class: 'el-picker-panel__content el-date-range-picker__content is-right' } +const _hoisted_15 = { class: 'el-date-range-picker__header' } +const _hoisted_16 = { + key: 0, + class: 'el-picker-panel__footer' +} + +function render$4 (_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_input = vue.resolveComponent('el-input') + const _component_time_pick_panel = vue.resolveComponent('time-pick-panel') + const _component_date_table = vue.resolveComponent('date-table') + const _component_el_button = vue.resolveComponent('el-button') + const _directive_clickoutside = vue.resolveDirective('clickoutside') + + return (vue.openBlock(), vue.createBlock('div', { + class: ['el-picker-panel el-date-range-picker', [{ + 'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts, + 'has-time': _ctx.showTime + }]] + }, [ + vue.createVNode('div', _hoisted_1$4, [ + vue.renderSlot(_ctx.$slots, 'sidebar', { class: 'el-picker-panel__sidebar' }), + (_ctx.hasShortcuts) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_2$2, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => { + return (vue.openBlock(), vue.createBlock('button', { + key: key, + type: 'button', + class: 'el-picker-panel__shortcut', + onClick: $event => (_ctx.handleShortcutClick(shortcut)) + }, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ['onClick'])) + }), 128 /* KEYED_FRAGMENT */)) + ])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('div', _hoisted_3$2, [ + (_ctx.showTime) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_4$2, [ + vue.createVNode('span', _hoisted_5$2, [ + vue.createVNode('span', _hoisted_6$2, [ + vue.createVNode(_component_el_input, { + size: 'small', + disabled: _ctx.rangeState.selecting, + placeholder: _ctx.t('el.datepicker.startDate'), + class: 'el-date-range-picker__editor', + 'model-value': _ctx.minVisibleDate, + onInput: _cache[1] || (_cache[1] = val => _ctx.handleDateInput(val, 'min')), + onChange: _cache[2] || (_cache[2] = val => _ctx.handleDateChange(val, 'min')) + }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value']) + ]), + vue.withDirectives(vue.createVNode('span', _hoisted_7$2, [ + vue.createVNode(_component_el_input, { + size: 'small', + class: 'el-date-range-picker__editor', + disabled: _ctx.rangeState.selecting, + placeholder: _ctx.t('el.datepicker.startTime'), + 'model-value': _ctx.minVisibleTime, + onFocus: _cache[3] || (_cache[3] = $event => (_ctx.minTimePickerVisible = true)), + onInput: _cache[4] || (_cache[4] = val => _ctx.handleTimeInput(val, 'min')), + onChange: _cache[5] || (_cache[5] = val => _ctx.handleTimeChange(val, 'min')) + }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value']), + vue.createVNode(_component_time_pick_panel, { + visible: _ctx.minTimePickerVisible, + format: _ctx.timeFormat, + 'datetime-role': 'start', + 'time-arrow-control': _ctx.arrowControl, + 'parsed-value': _ctx.leftDate, + onPick: _ctx.handleMinTimePick + }, null, 8 /* PROPS */, ['visible', 'format', 'time-arrow-control', 'parsed-value', 'onPick']) + ], 512 /* NEED_PATCH */), [ + [_directive_clickoutside, _ctx.handleMinTimeClose] + ]) + ]), + _hoisted_8$2, + vue.createVNode('span', _hoisted_9$1, [ + vue.createVNode('span', _hoisted_10$1, [ + vue.createVNode(_component_el_input, { + size: 'small', + class: 'el-date-range-picker__editor', + disabled: _ctx.rangeState.selecting, + placeholder: _ctx.t('el.datepicker.endDate'), + 'model-value': _ctx.maxVisibleDate, + readonly: !_ctx.minDate, + onInput: _cache[6] || (_cache[6] = val => _ctx.handleDateInput(val, 'max')), + onChange: _cache[7] || (_cache[7] = val => _ctx.handleDateChange(val, 'max')) + }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value', 'readonly']) + ]), + vue.withDirectives(vue.createVNode('span', _hoisted_11$1, [ + vue.createVNode(_component_el_input, { + size: 'small', + class: 'el-date-range-picker__editor', + disabled: _ctx.rangeState.selecting, + placeholder: _ctx.t('el.datepicker.endTime'), + 'model-value': _ctx.maxVisibleTime, + readonly: !_ctx.minDate, + onFocus: _cache[8] || (_cache[8] = $event => (_ctx.minDate && (_ctx.maxTimePickerVisible = true))), + onInput: _cache[9] || (_cache[9] = val => _ctx.handleTimeInput(val, 'max')), + onChange: _cache[10] || (_cache[10] = val => _ctx.handleTimeChange(val, 'max')) + }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value', 'readonly']), + vue.createVNode(_component_time_pick_panel, { + 'datetime-role': 'end', + visible: _ctx.maxTimePickerVisible, + format: _ctx.timeFormat, + 'time-arrow-control': _ctx.arrowControl, + 'parsed-value': _ctx.rightDate, + onPick: _ctx.handleMaxTimePick + }, null, 8 /* PROPS */, ['visible', 'format', 'time-arrow-control', 'parsed-value', 'onPick']) + ], 512 /* NEED_PATCH */), [ + [_directive_clickoutside, _ctx.handleMaxTimeClose] + ]) + ]) + ])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('div', _hoisted_12$1, [ + vue.createVNode('div', _hoisted_13, [ + vue.createVNode('button', { + type: 'button', + class: 'el-picker-panel__icon-btn el-icon-d-arrow-left', + onClick: _cache[11] || (_cache[11] = (...args) => (_ctx.leftPrevYear && _ctx.leftPrevYear(...args))) + }), + vue.createVNode('button', { + type: 'button', + class: 'el-picker-panel__icon-btn el-icon-arrow-left', + onClick: _cache[12] || (_cache[12] = (...args) => (_ctx.leftPrevMonth && _ctx.leftPrevMonth(...args))) + }), + (_ctx.unlinkPanels) + ? (vue.openBlock(), vue.createBlock('button', { + key: 0, + type: 'button', + disabled: !_ctx.enableYearArrow, + class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-right'], + onClick: _cache[13] || (_cache[13] = (...args) => (_ctx.leftNextYear && _ctx.leftNextYear(...args))) + }, null, 10 /* CLASS, PROPS */, ['disabled'])) + : vue.createCommentVNode('v-if', true), + (_ctx.unlinkPanels) + ? (vue.openBlock(), vue.createBlock('button', { + key: 1, + type: 'button', + disabled: !_ctx.enableMonthArrow, + class: [{ 'is-disabled': !_ctx.enableMonthArrow }, 'el-picker-panel__icon-btn el-icon-arrow-right'], + onClick: _cache[14] || (_cache[14] = (...args) => (_ctx.leftNextMonth && _ctx.leftNextMonth(...args))) + }, null, 10 /* CLASS, PROPS */, ['disabled'])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('div', null, vue.toDisplayString(_ctx.leftLabel), 1 /* TEXT */) + ]), + vue.createVNode(_component_date_table, { + 'selection-mode': 'range', + date: _ctx.leftDate, + 'min-date': _ctx.minDate, + 'max-date': _ctx.maxDate, + 'range-state': _ctx.rangeState, + 'disabled-date': _ctx.disabledDate, + 'cell-class-name': _ctx.cellClassName, + onChangerange: _ctx.handleChangeRange, + onPick: _ctx.handleRangePick, + onSelect: _ctx.onSelect + }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'cell-class-name', 'onChangerange', 'onPick', 'onSelect']) + ]), + vue.createVNode('div', _hoisted_14, [ + vue.createVNode('div', _hoisted_15, [ + (_ctx.unlinkPanels) + ? (vue.openBlock(), vue.createBlock('button', { + key: 0, + type: 'button', + disabled: !_ctx.enableYearArrow, + class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-left'], + onClick: _cache[15] || (_cache[15] = (...args) => (_ctx.rightPrevYear && _ctx.rightPrevYear(...args))) + }, null, 10 /* CLASS, PROPS */, ['disabled'])) + : vue.createCommentVNode('v-if', true), + (_ctx.unlinkPanels) + ? (vue.openBlock(), vue.createBlock('button', { + key: 1, + type: 'button', + disabled: !_ctx.enableMonthArrow, + class: [{ 'is-disabled': !_ctx.enableMonthArrow }, 'el-picker-panel__icon-btn el-icon-arrow-left'], + onClick: _cache[16] || (_cache[16] = (...args) => (_ctx.rightPrevMonth && _ctx.rightPrevMonth(...args))) + }, null, 10 /* CLASS, PROPS */, ['disabled'])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('button', { + type: 'button', + class: 'el-picker-panel__icon-btn el-icon-d-arrow-right', + onClick: _cache[17] || (_cache[17] = (...args) => (_ctx.rightNextYear && _ctx.rightNextYear(...args))) + }), + vue.createVNode('button', { + type: 'button', + class: 'el-picker-panel__icon-btn el-icon-arrow-right', + onClick: _cache[18] || (_cache[18] = (...args) => (_ctx.rightNextMonth && _ctx.rightNextMonth(...args))) + }), + vue.createVNode('div', null, vue.toDisplayString(_ctx.rightLabel), 1 /* TEXT */) + ]), + vue.createVNode(_component_date_table, { + 'selection-mode': 'range', + date: _ctx.rightDate, + 'min-date': _ctx.minDate, + 'max-date': _ctx.maxDate, + 'range-state': _ctx.rangeState, + 'disabled-date': _ctx.disabledDate, + 'cell-class-name': _ctx.cellClassName, + onChangerange: _ctx.handleChangeRange, + onPick: _ctx.handleRangePick, + onSelect: _ctx.onSelect + }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'cell-class-name', 'onChangerange', 'onPick', 'onSelect']) + ]) + ]) + ]), + (_ctx.showTime) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_16, [ + vue.createVNode(_component_el_button, { + size: 'mini', + type: 'text', + class: 'el-picker-panel__link-btn', + onClick: _ctx.handleClear + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.clear')), 1 /* TEXT */) + ]), + _: 1 /* STABLE */ + }, 8 /* PROPS */, ['onClick']), + vue.createVNode(_component_el_button, { + plain: '', + size: 'mini', + class: 'el-picker-panel__link-btn', + disabled: _ctx.btnDisabled, + onClick: _cache[19] || (_cache[19] = $event => (_ctx.handleConfirm(false))) + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */) + ]), + _: 1 /* STABLE */ + }, 8 /* PROPS */, ['disabled']) + ])) + : vue.createCommentVNode('v-if', true) + ], 2 /* CLASS */)) +} + +script$4.render = render$4 +script$4.__file = 'packages/date-picker/src/date-picker-com/panel-date-range.vue' + +const script$5 = vue.defineComponent({ + components: { MonthTable: script$1 }, + props: { + unlinkPanels: Boolean, + parsedValue: { + type: Array + } + }, + emits: ['pick', 'set-picker-option'], + setup (props, ctx) { + const leftDate = vue.ref(dayjs__default.default.tz()) + const rightDate = vue.ref(dayjs__default.default.tz().add(1, 'year')) + const hasShortcuts = vue.computed(() => !!shortcuts.length) + const handleShortcutClick = shortcut => { + if (shortcut.value) { + ctx.emit('pick', [dayjs__default.default.tz(shortcut.value[0]), dayjs__default.default.tz(shortcut.value[1])]) + return + } + if (shortcut.onClick) { + shortcut.onClick(ctx) + } + } + const leftPrevYear = () => { + leftDate.value = leftDate.value.subtract(1, 'year') + if (!props.unlinkPanels) { + rightDate.value = rightDate.value.subtract(1, 'year') + } + } + const rightNextYear = () => { + if (!props.unlinkPanels) { + leftDate.value = leftDate.value.add(1, 'year') + } + rightDate.value = rightDate.value.add(1, 'year') + } + const leftNextYear = () => { + leftDate.value = leftDate.value.add(1, 'year') + } + const rightPrevYear = () => { + rightDate.value = rightDate.value.subtract(1, 'year') + } + const leftLabel = vue.computed(() => { + return `${leftDate.value.year()} ${locale.t('el.datepicker.year')}` + }) + const rightLabel = vue.computed(() => { + return `${rightDate.value.year()} ${locale.t('el.datepicker.year')}` + }) + const leftYear = vue.computed(() => { + return leftDate.value.year() + }) + const rightYear = vue.computed(() => { + return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year() + }) + const enableYearArrow = vue.computed(() => { + return props.unlinkPanels && rightYear.value > leftYear.value + 1 + }) + const minDate = vue.ref(null) + const maxDate = vue.ref(null) + const rangeState = vue.ref({ + endDate: null, + selecting: false + }) + const handleChangeRange = val => { + rangeState.value = val + } + const handleRangePick = (val, close = true) => { + const minDate_ = val.minDate + const maxDate_ = val.maxDate + if (maxDate.value === maxDate_ && minDate.value === minDate_) { + return + } + maxDate.value = maxDate_ + minDate.value = minDate_ + if (!close) { return } + handleConfirm() + } + const isValidValue = value => { + return Array.isArray(value) && + value && value[0] && value[1] && + value[0].valueOf() <= value[1].valueOf() + } + const handleConfirm = (visible = false) => { + if (isValidValue([minDate.value, maxDate.value])) { + ctx.emit('pick', [minDate.value, maxDate.value], visible) + } + } + const onSelect = selecting => { + rangeState.value.selecting = selecting + if (!selecting) { + rangeState.value.endDate = null + } + } + const formatToString = value => { + return value.map(_ => _.format(format)) + } + const getDefaultValue = () => { + let start + if (Array.isArray(defaultValue)) { + const left = dayjs__default.default.tz(defaultValue[0]) + let right = dayjs__default.default.tz(defaultValue[1]) + if (!props.unlinkPanels) { + right = left.add(1, 'year') + } + return [left, right] + } else if (defaultValue) { + start = dayjs__default.default.tz(defaultValue) + } else { + start = dayjs__default.default.tz() + } + return [start, start.add(1, 'year')] + } + ctx.emit('set-picker-option', ['formatToString', formatToString]) + const pickerBase = vue.inject('EP_PICKER_BASE') + const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props + vue.watch(() => props.parsedValue, newVal => { + if (newVal && newVal.length === 2) { + minDate.value = newVal[0] + maxDate.value = newVal[1] + leftDate.value = minDate.value + if (props.unlinkPanels && maxDate.value) { + const minDateYear = minDate.value.year() + const maxDateYear = maxDate.value.year() + rightDate.value = minDateYear === maxDateYear + ? maxDate.value.add(1, 'year') + : maxDate.value + } else { + rightDate.value = leftDate.value.add(1, 'year') + } + } else { + const defaultArr = getDefaultValue() + leftDate.value = defaultArr[0] + rightDate.value = defaultArr[1] + } + }, { immediate: true }) + return { + shortcuts, + disabledDate, + onSelect, + handleRangePick, + rangeState, + handleChangeRange, + minDate, + maxDate, + enableYearArrow, + leftLabel, + rightLabel, + leftNextYear, + leftPrevYear, + rightNextYear, + rightPrevYear, + t: locale.t, + leftDate, + rightDate, + hasShortcuts, + handleShortcutClick + } + } +}) + +const _hoisted_1$5 = { class: 'el-picker-panel__body-wrapper' } +const _hoisted_2$3 = { + key: 0, + class: 'el-picker-panel__sidebar' +} +const _hoisted_3$3 = { class: 'el-picker-panel__body' } +const _hoisted_4$3 = { class: 'el-picker-panel__content el-date-range-picker__content is-left' } +const _hoisted_5$3 = { class: 'el-date-range-picker__header' } +const _hoisted_6$3 = { class: 'el-picker-panel__content el-date-range-picker__content is-right' } +const _hoisted_7$3 = { class: 'el-date-range-picker__header' } + +function render$5 (_ctx, _cache, $props, $setup, $data, $options) { + const _component_month_table = vue.resolveComponent('month-table') + + return (vue.openBlock(), vue.createBlock('div', { + class: ['el-picker-panel el-date-range-picker', [{ + 'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts + }]] + }, [ + vue.createVNode('div', _hoisted_1$5, [ + vue.renderSlot(_ctx.$slots, 'sidebar', { class: 'el-picker-panel__sidebar' }), + (_ctx.hasShortcuts) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_2$3, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => { + return (vue.openBlock(), vue.createBlock('button', { + key: key, + type: 'button', + class: 'el-picker-panel__shortcut', + onClick: $event => (_ctx.handleShortcutClick(shortcut)) + }, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ['onClick'])) + }), 128 /* KEYED_FRAGMENT */)) + ])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('div', _hoisted_3$3, [ + vue.createVNode('div', _hoisted_4$3, [ + vue.createVNode('div', _hoisted_5$3, [ + vue.createVNode('button', { + type: 'button', + class: 'el-picker-panel__icon-btn el-icon-d-arrow-left', + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.leftPrevYear && _ctx.leftPrevYear(...args))) + }), + (_ctx.unlinkPanels) + ? (vue.openBlock(), vue.createBlock('button', { + key: 0, + type: 'button', + disabled: !_ctx.enableYearArrow, + class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-right'], + onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.leftNextYear && _ctx.leftNextYear(...args))) + }, null, 10 /* CLASS, PROPS */, ['disabled'])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('div', null, vue.toDisplayString(_ctx.leftLabel), 1 /* TEXT */) + ]), + vue.createVNode(_component_month_table, { + 'selection-mode': 'range', + date: _ctx.leftDate, + 'min-date': _ctx.minDate, + 'max-date': _ctx.maxDate, + 'range-state': _ctx.rangeState, + 'disabled-date': _ctx.disabledDate, + onChangerange: _ctx.handleChangeRange, + onPick: _ctx.handleRangePick, + onSelect: _ctx.onSelect + }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'onChangerange', 'onPick', 'onSelect']) + ]), + vue.createVNode('div', _hoisted_6$3, [ + vue.createVNode('div', _hoisted_7$3, [ + (_ctx.unlinkPanels) + ? (vue.openBlock(), vue.createBlock('button', { + key: 0, + type: 'button', + disabled: !_ctx.enableYearArrow, + class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-left'], + onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.rightPrevYear && _ctx.rightPrevYear(...args))) + }, null, 10 /* CLASS, PROPS */, ['disabled'])) + : vue.createCommentVNode('v-if', true), + vue.createVNode('button', { + type: 'button', + class: 'el-picker-panel__icon-btn el-icon-d-arrow-right', + onClick: _cache[4] || (_cache[4] = (...args) => (_ctx.rightNextYear && _ctx.rightNextYear(...args))) + }), + vue.createVNode('div', null, vue.toDisplayString(_ctx.rightLabel), 1 /* TEXT */) + ]), + vue.createVNode(_component_month_table, { + 'selection-mode': 'range', + date: _ctx.rightDate, + 'min-date': _ctx.minDate, + 'max-date': _ctx.maxDate, + 'range-state': _ctx.rangeState, + 'disabled-date': _ctx.disabledDate, + onChangerange: _ctx.handleChangeRange, + onPick: _ctx.handleRangePick, + onSelect: _ctx.onSelect + }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'onChangerange', 'onPick', 'onSelect']) + ]) + ]) + ]) + ], 2 /* CLASS */)) +} + +script$5.render = render$5 +script$5.__file = 'packages/date-picker/src/date-picker-com/panel-month-range.vue' + +dayjs__default.default.extend(localeData__default.default) +dayjs__default.default.extend(advancedFormat__default.default) +dayjs__default.default.extend(customParseFormat__default.default) +dayjs__default.default.extend(weekOfYear__default.default) +dayjs__default.default.extend(weekYear__default.default) +dayjs__default.default.extend(dayOfYear__default.default) +dayjs__default.default.extend(isSameOrAfter__default.default) +dayjs__default.default.extend(isSameOrBefore__default.default) +const getPanel = function (type) { + if (type === 'daterange' || type === 'datetimerange') { + return script$4 + } else if (type === 'monthrange') { + return script$5 + } + return script$3 +} +const DatePicker = vue.defineComponent({ + name: 'ElDatePicker', + install: null, + props: Object.assign(Object.assign({}, timePicker.defaultProps), { + type: { + type: String, + default: 'date' + } + }), + emits: ['update:modelValue'], + setup (props, ctx) { + vue.provide('ElPopperOptions', props.popperOptions) + const commonPicker = vue.ref(null) + const format = timePicker.DEFAULT_FORMATS_DATEPICKER[props.type] || timePicker.DEFAULT_FORMATS_DATE + const refProps = Object.assign(Object.assign({}, props), { + focus: () => { + let _a; + (_a = commonPicker.value) === null || _a === void 0 ? void 0 : _a.handleFocus() + } + }) + ctx.expose(refProps) + return () => vue.h(timePicker.CommonPicker, Object.assign(Object.assign({ format }, props), { type: props.type, ref: commonPicker, 'onUpdate:modelValue': value => ctx.emit('update:modelValue', value) }), { + default: scopedProps => vue.h(getPanel(props.type), scopedProps) + }) + } +}) + +const _DatePicker = DatePicker +_DatePicker.install = app => { + app.component(_DatePicker.name, _DatePicker) +} + +exports.default = _DatePicker diff --git a/src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts b/src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts new file mode 100644 index 00000000..1e307263 --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts @@ -0,0 +1,61 @@ +import { PropType } from 'vue'; +import dayjs from 'dayjs'; +declare const _default: import("vue").DefineComponent<{ + date: { + type: PropType; + }; + minDate: { + type: PropType; + }; + maxDate: { + type: PropType; + }; + parsedValue: { + type: PropType; + }; + selectionMode: { + type: StringConstructor; + default: string; + }; + showWeekNumber: { + type: BooleanConstructor; + default: boolean; + }; + disabledDate: { + type: FunctionConstructor; + }; + cellClassName: { + type: FunctionConstructor; + }; + rangeState: { + type: ObjectConstructor; + default: () => { + endDate: any; + selecting: boolean; + }; + }; +}, { + handleMouseMove: (event: any) => void; + t: (...args: any[]) => string; + rows: import("vue").ComputedRef; + isWeekActive: (cell: any) => any; + getCellClasses: (cell: any) => string; + WEEKS: import("vue").ComputedRef; + handleClick: (event: any) => void; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + selectionMode: unknown; + showWeekNumber: boolean; + rangeState: Record; +} & { + date?: unknown; + minDate?: unknown; + maxDate?: unknown; + parsedValue?: unknown; + disabledDate?: unknown; + cellClassName?: unknown; +}>, { + selectionMode: unknown; + showWeekNumber: boolean; + rangeState: Record; +}>; +export default _default; diff --git a/src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts b/src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts new file mode 100644 index 00000000..f10a29a6 --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts @@ -0,0 +1,50 @@ +import dayjs from 'dayjs'; +import { PropType } from 'vue'; +declare const _default: import("vue").DefineComponent<{ + disabledDate: { + type: PropType<(_: Date) => void>; + }; + selectionMode: { + type: StringConstructor; + default: string; + }; + minDate: { + type: PropType; + }; + maxDate: { + type: PropType; + }; + date: { + type: PropType; + }; + parsedValue: { + type: PropType; + }; + rangeState: { + type: ObjectConstructor; + default: () => { + endDate: any; + selecting: boolean; + }; + }; +}, { + handleMouseMove: (event: any) => void; + handleMonthTableClick: (event: any) => void; + rows: import("vue").ComputedRef; + getCellStyle: (cell: any) => any; + t: (...args: any[]) => string; + months: any; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + selectionMode: unknown; + rangeState: Record; +} & { + disabledDate?: unknown; + minDate?: unknown; + maxDate?: unknown; + date?: unknown; + parsedValue?: unknown; +}>, { + selectionMode: unknown; + rangeState: Record; +}>; +export default _default; diff --git a/src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts b/src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts new file mode 100644 index 00000000..1cc4b045 --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts @@ -0,0 +1,22 @@ +import { PropType } from 'vue'; +import dayjs from 'dayjs'; +declare const _default: import("vue").DefineComponent<{ + disabledDate: { + type: PropType<(_: Date) => void>; + }; + parsedValue: { + type: PropType; + }; + date: { + type: PropType; + }; +}, { + startYear: import("vue").ComputedRef; + getCellStyle: (year: any) => any; + handleYearTableClick: (event: any) => void; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "pick"[], "pick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & { + disabledDate?: unknown; + parsedValue?: unknown; + date?: unknown; +}>, {}>; +export default _default; diff --git a/src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts b/src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts new file mode 100644 index 00000000..a704bea2 --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts @@ -0,0 +1,136 @@ +import dayjs, { Dayjs } from 'dayjs'; +import { PropType } from 'vue'; +declare const _default: import("vue").DefineComponent<{ + visible: { + type: BooleanConstructor; + default: boolean; + }; + parsedValue: { + type: PropType; + }; + format: { + type: StringConstructor; + default: string; + }; + type: { + type: StringConstructor; + required: true; + }; +}, { + handleTimePick: (value: any, visible: any, first: any) => void; + handleTimePickClose: () => void; + onTimePickerInputFocus: () => void; + timePickerVisible: import("vue").Ref; + visibleTime: import("vue").ComputedRef; + visibleDate: import("vue").ComputedRef; + showTime: import("vue").ComputedRef; + changeToNow: () => void; + onConfirm: () => void; + footerVisible: import("vue").ComputedRef; + handleYearPick: (year: any) => void; + showMonthPicker: () => void; + showYearPicker: () => void; + handleMonthPick: (month: any) => void; + hasShortcuts: import("vue").ComputedRef; + shortcuts: any; + arrowControl: any; + disabledDate: any; + cellClassName: any; + selectionMode: import("vue").ComputedRef; + handleShortcutClick: (shortcut: any) => void; + prevYear_: () => void; + nextYear_: () => void; + prevMonth_: () => void; + nextMonth_: () => void; + innerDate: import("vue").Ref<{ + clone: () => dayjs.Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): dayjs.Dayjs; + }; + month: { + (): number; + (value: number): dayjs.Dayjs; + }; + date: { + (): number; + (value: number): dayjs.Dayjs; + }; + day: { + (): number; + (value: number): dayjs.Dayjs; + }; + hour: { + (): number; + (value: number): dayjs.Dayjs; + }; + minute: { + (): number; + (value: number): dayjs.Dayjs; + }; + second: { + (): number; + (value: number): dayjs.Dayjs; + }; + millisecond: { + (): number; + (value: number): dayjs.Dayjs; + }; + set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs; + get: (unit: dayjs.UnitType) => number; + add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + format: (template?: string) => string; + diff: (date: dayjs.ConfigType, unit?: "M" | "week" | "month" | "year" | "day" | "date" | "hour" | "minute" | "second" | "millisecond" | "d" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): dayjs.Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): dayjs.Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): dayjs.Dayjs; + }; + isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + }>; + t: (...args: any[]) => string; + yearLabel: import("vue").ComputedRef; + currentView: import("vue").Ref; + month: import("vue").ComputedRef; + handleDatePick: (value: Dayjs) => void; + handleVisibleTimeChange: (value: any) => void; + handleVisibleDateChange: (value: any) => void; + timeFormat: import("vue").ComputedRef; + userInputTime: any; + userInputDate: any; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + visible: boolean; + format: unknown; + type: unknown; +} & { + parsedValue?: unknown; +}>, { + visible: boolean; + format: unknown; +}>; +export default _default; diff --git a/src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts b/src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts new file mode 100644 index 00000000..0b2c231d --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts @@ -0,0 +1,210 @@ +import { PropType } from 'vue'; +import dayjs from 'dayjs'; +declare const _default: import("vue").DefineComponent<{ + unlinkPanels: BooleanConstructor; + parsedValue: { + type: PropType; + }; + type: { + type: StringConstructor; + required: true; + }; +}, { + shortcuts: any; + disabledDate: any; + cellClassName: any; + minTimePickerVisible: import("vue").Ref; + maxTimePickerVisible: import("vue").Ref; + handleMinTimeClose: () => void; + handleMaxTimeClose: () => void; + handleShortcutClick: (shortcut: any) => void; + rangeState: import("vue").Ref<{ + endDate: any; + selecting: boolean; + }>; + minDate: any; + maxDate: any; + handleRangePick: (val: any, close?: boolean) => void; + onSelect: (selecting: any) => void; + handleChangeRange: (val: any) => void; + btnDisabled: import("vue").ComputedRef; + enableYearArrow: import("vue").ComputedRef; + enableMonthArrow: import("vue").ComputedRef; + rightPrevMonth: () => void; + rightPrevYear: () => void; + rightNextMonth: () => void; + rightNextYear: () => void; + leftPrevMonth: () => void; + leftPrevYear: () => void; + leftNextMonth: () => void; + leftNextYear: () => void; + hasShortcuts: import("vue").ComputedRef; + leftLabel: import("vue").ComputedRef; + rightLabel: import("vue").ComputedRef; + leftDate: import("vue").Ref<{ + clone: () => dayjs.Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): dayjs.Dayjs; + }; + month: { + (): number; + (value: number): dayjs.Dayjs; + }; + date: { + (): number; + (value: number): dayjs.Dayjs; + }; + day: { + (): number; + (value: number): dayjs.Dayjs; + }; + hour: { + (): number; + (value: number): dayjs.Dayjs; + }; + minute: { + (): number; + (value: number): dayjs.Dayjs; + }; + second: { + (): number; + (value: number): dayjs.Dayjs; + }; + millisecond: { + (): number; + (value: number): dayjs.Dayjs; + }; + set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs; + get: (unit: dayjs.UnitType) => number; + add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + format: (template?: string) => string; + diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): dayjs.Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): dayjs.Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): dayjs.Dayjs; + }; + isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + }>; + rightDate: import("vue").Ref<{ + clone: () => dayjs.Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): dayjs.Dayjs; + }; + month: { + (): number; + (value: number): dayjs.Dayjs; + }; + date: { + (): number; + (value: number): dayjs.Dayjs; + }; + day: { + (): number; + (value: number): dayjs.Dayjs; + }; + hour: { + (): number; + (value: number): dayjs.Dayjs; + }; + minute: { + (): number; + (value: number): dayjs.Dayjs; + }; + second: { + (): number; + (value: number): dayjs.Dayjs; + }; + millisecond: { + (): number; + (value: number): dayjs.Dayjs; + }; + set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs; + get: (unit: dayjs.UnitType) => number; + add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + format: (template?: string) => string; + diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): dayjs.Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): dayjs.Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): dayjs.Dayjs; + }; + isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + }>; + showTime: import("vue").ComputedRef; + t: (...args: any[]) => string; + minVisibleDate: import("vue").ComputedRef; + maxVisibleDate: import("vue").ComputedRef; + minVisibleTime: import("vue").ComputedRef; + maxVisibleTime: import("vue").ComputedRef; + arrowControl: any; + handleDateInput: (value: any, type: any) => void; + handleDateChange: (value: any, type: any) => void; + handleTimeInput: (value: any, type: any) => void; + handleTimeChange: (value: any, type: any) => void; + handleMinTimePick: (value: any, visible: any, first: any) => void; + handleMaxTimePick: (value: any, visible: any, first: any) => void; + handleClear: () => void; + handleConfirm: (visible?: boolean) => void; + timeFormat: import("vue").ComputedRef; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + unlinkPanels: boolean; + type: unknown; +} & { + parsedValue?: unknown; +}>, { + unlinkPanels: boolean; +}>; +export default _default; diff --git a/src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts b/src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts new file mode 100644 index 00000000..5e13c8e1 --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts @@ -0,0 +1,179 @@ +import dayjs from 'dayjs'; +import { PropType } from 'vue'; +declare const _default: import("vue").DefineComponent<{ + unlinkPanels: BooleanConstructor; + parsedValue: { + type: PropType; + }; +}, { + shortcuts: any; + disabledDate: any; + onSelect: (selecting: any) => void; + handleRangePick: (val: any, close?: boolean) => void; + rangeState: import("vue").Ref<{ + endDate: any; + selecting: boolean; + }>; + handleChangeRange: (val: any) => void; + minDate: any; + maxDate: any; + enableYearArrow: import("vue").ComputedRef; + leftLabel: import("vue").ComputedRef; + rightLabel: import("vue").ComputedRef; + leftNextYear: () => void; + leftPrevYear: () => void; + rightNextYear: () => void; + rightPrevYear: () => void; + t: (...args: any[]) => string; + leftDate: import("vue").Ref<{ + clone: () => dayjs.Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): dayjs.Dayjs; + }; + month: { + (): number; + (value: number): dayjs.Dayjs; + }; + date: { + (): number; + (value: number): dayjs.Dayjs; + }; + day: { + (): number; + (value: number): dayjs.Dayjs; + }; + hour: { + (): number; + (value: number): dayjs.Dayjs; + }; + minute: { + (): number; + (value: number): dayjs.Dayjs; + }; + second: { + (): number; + (value: number): dayjs.Dayjs; + }; + millisecond: { + (): number; + (value: number): dayjs.Dayjs; + }; + set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs; + get: (unit: dayjs.UnitType) => number; + add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + format: (template?: string) => string; + diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): dayjs.Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): dayjs.Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): dayjs.Dayjs; + }; + isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + }>; + rightDate: import("vue").Ref<{ + clone: () => dayjs.Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): dayjs.Dayjs; + }; + month: { + (): number; + (value: number): dayjs.Dayjs; + }; + date: { + (): number; + (value: number): dayjs.Dayjs; + }; + day: { + (): number; + (value: number): dayjs.Dayjs; + }; + hour: { + (): number; + (value: number): dayjs.Dayjs; + }; + minute: { + (): number; + (value: number): dayjs.Dayjs; + }; + second: { + (): number; + (value: number): dayjs.Dayjs; + }; + millisecond: { + (): number; + (value: number): dayjs.Dayjs; + }; + set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs; + get: (unit: dayjs.UnitType) => number; + add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs; + startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs; + format: (template?: string) => string; + diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): dayjs.Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): dayjs.Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): dayjs.Dayjs; + }; + isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean; + }>; + hasShortcuts: import("vue").ComputedRef; + handleShortcutClick: (shortcut: any) => void; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + unlinkPanels: boolean; +} & { + parsedValue?: unknown; +}>, { + unlinkPanels: boolean; +}>; +export default _default; diff --git a/src/components/common/MyDatePicker/src/date-picker.d.ts b/src/components/common/MyDatePicker/src/date-picker.d.ts new file mode 100644 index 00000000..a08d0e69 --- /dev/null +++ b/src/components/common/MyDatePicker/src/date-picker.d.ts @@ -0,0 +1,154 @@ +declare const _default: import("vue").DefineComponent<{ + type: { + type: StringConstructor; + default: string; + }; + name: { + type: (ArrayConstructor | StringConstructor)[]; + default: string; + }; + popperClass: { + type: StringConstructor; + default: string; + }; + format: { + type: StringConstructor; + }; + clearable: { + type: BooleanConstructor; + default: boolean; + }; + clearIcon: { + type: StringConstructor; + default: string; + }; + editable: { + type: BooleanConstructor; + default: boolean; + }; + prefixIcon: { + type: StringConstructor; + default: string; + }; + size: { + type: import("vue").PropType; + validator: (val: string) => boolean; + }; + readonly: { + type: BooleanConstructor; + default: boolean; + }; + disabled: { + type: BooleanConstructor; + default: boolean; + }; + placeholder: { + type: StringConstructor; + default: string; + }; + popperOptions: { + type: import("vue").PropType; + default: () => {}; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + rangeSeparator: { + type: StringConstructor; + default: string; + }; + startPlaceholder: StringConstructor; + endPlaceholder: StringConstructor; + defaultValue: { + type: import("vue").PropType; + }; + defaultTime: { + type: import("vue").PropType; + }; + isRange: { + type: BooleanConstructor; + default: boolean; + }; + disabledHours: { + type: FunctionConstructor; + }; + disabledMinutes: { + type: FunctionConstructor; + }; + disabledSeconds: { + type: FunctionConstructor; + }; + disabledDate: { + type: FunctionConstructor; + }; + cellClassName: { + type: FunctionConstructor; + }; + shortcuts: { + type: ArrayConstructor; + default: () => any[]; + }; + arrowControl: { + type: BooleanConstructor; + default: boolean; + }; + validateEvent: { + type: BooleanConstructor; + default: boolean; + }; + unlinkPanels: BooleanConstructor; +}, () => import("vue").VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + type: unknown; + name: unknown; + popperClass: unknown; + clearable: boolean; + clearIcon: unknown; + editable: boolean; + prefixIcon: unknown; + readonly: boolean; + disabled: boolean; + placeholder: unknown; + popperOptions: unknown; + modelValue: unknown; + rangeSeparator: unknown; + isRange: boolean; + shortcuts: unknown; + arrowControl: boolean; + validateEvent: boolean; + unlinkPanels: boolean; +} & { + format?: unknown; + size?: unknown; + startPlaceholder?: unknown; + endPlaceholder?: unknown; + defaultValue?: unknown; + defaultTime?: unknown; + disabledHours?: unknown; + disabledMinutes?: unknown; + disabledSeconds?: unknown; + disabledDate?: unknown; + cellClassName?: unknown; +}>, { + type: unknown; + name: unknown; + popperClass: unknown; + clearable: boolean; + clearIcon: unknown; + editable: boolean; + prefixIcon: unknown; + readonly: boolean; + disabled: boolean; + placeholder: unknown; + popperOptions: unknown; + modelValue: unknown; + rangeSeparator: unknown; + isRange: boolean; + shortcuts: unknown; + arrowControl: boolean; + validateEvent: boolean; + unlinkPanels: boolean; +}>; +export default _default; diff --git a/src/components/common/MytTimePicker/index.d.ts b/src/components/common/MytTimePicker/index.d.ts new file mode 100644 index 00000000..017316b2 --- /dev/null +++ b/src/components/common/MytTimePicker/index.d.ts @@ -0,0 +1,10 @@ +import TimePicker from './src/time-picker'; +import CommonPicker from './src/common/picker.vue'; +import TimePickPanel from './src/time-picker-com/panel-time-pick.vue'; +import type { SFCWithInstall } from 'element-plus/lib/utils/types'; +export * from './src/common/date-utils'; +export * from './src/common/constant'; +export * from './src/common/props'; +declare const _TimePicker: SFCWithInstall; +export { CommonPicker, TimePickPanel }; +export default _TimePicker; diff --git a/src/components/common/MytTimePicker/index.js b/src/components/common/MytTimePicker/index.js new file mode 100644 index 00000000..3cb19a40 --- /dev/null +++ b/src/components/common/MytTimePicker/index.js @@ -0,0 +1,1569 @@ +'use strict' + +Object.defineProperty(exports, '__esModule', { value: true }) + +const vue = require('vue') +const dayjs = require('dayjs') +const customParseFormat = require('dayjs/plugin/customParseFormat') +const directives = require('element-plus/lib/directives') +const ElInput = require('element-plus/lib/el-input') +const ElPopper = require('element-plus/lib/el-popper') +const aria = require('element-plus/lib/utils/aria') +const util = require('element-plus/lib/utils/util') +const form = require('element-plus/lib/el-form') +const validators = require('element-plus/lib/utils/validators') +const locale = require('element-plus/lib/locale') +const debounce = require('lodash/debounce') +const ElScrollbar = require('element-plus/lib/el-scrollbar') +const union = require('lodash/union') + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e } } + +const dayjs__default = /* #__PURE__ */_interopDefaultLegacy(window.$dayJs) +const customParseFormat__default = /* #__PURE__ */_interopDefaultLegacy(customParseFormat) +const ElInput__default = /* #__PURE__ */_interopDefaultLegacy(ElInput) +const ElPopper__default = /* #__PURE__ */_interopDefaultLegacy(ElPopper) +const debounce__default = /* #__PURE__ */_interopDefaultLegacy(debounce) +const ElScrollbar__default = /* #__PURE__ */_interopDefaultLegacy(ElScrollbar) +const union__default = /* #__PURE__ */_interopDefaultLegacy(union) + +const DEFAULT_FORMATS_TIME = 'HH:mm:ss' +const DEFAULT_FORMATS_DATE = 'YYYY-MM-DD' +const DEFAULT_FORMATS_DATEPICKER = { + date: DEFAULT_FORMATS_DATE, + week: 'gggg[w]ww', + year: 'YYYY', + month: 'YYYY-MM', + datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`, + monthrange: 'YYYY-MM', + daterange: DEFAULT_FORMATS_DATE, + datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}` +} + +const defaultProps = { + name: { + type: [Array, String], + default: '' + }, + popperClass: { + type: String, + default: '' + }, + format: { + type: String + }, + type: { + type: String, + default: '' + }, + clearable: { + type: Boolean, + default: true + }, + clearIcon: { + type: String, + default: 'el-icon-circle-close' + }, + editable: { + type: Boolean, + default: true + }, + prefixIcon: { + type: String, + default: '' + }, + size: { + type: String, + validator: validators.isValidComponentSize + }, + readonly: { + type: Boolean, + default: false + }, + disabled: { + type: Boolean, + default: false + }, + placeholder: { + type: String, + default: '' + }, + popperOptions: { + type: Object, + default: () => ({}) + }, + modelValue: { + type: [Date, Array, String], + default: '' + }, + rangeSeparator: { + type: String, + default: '-' + }, + startPlaceholder: String, + endPlaceholder: String, + defaultValue: { + type: [Date, Array] + }, + defaultTime: { + type: [Date, Array] + }, + isRange: { + type: Boolean, + default: false + }, + disabledHours: { + type: Function + }, + disabledMinutes: { + type: Function + }, + disabledSeconds: { + type: Function + }, + disabledDate: { + type: Function + }, + cellClassName: { + type: Function + }, + shortcuts: { + type: Array, + default: () => ([]) + }, + arrowControl: { + type: Boolean, + default: false + }, + validateEvent: { + type: Boolean, + default: true + }, + unlinkPanels: Boolean +} + +const dateEquals = function (a, b) { + const aIsDate = a instanceof Date + const bIsDate = b instanceof Date + if (aIsDate && bIsDate) { + return a.getTime() === b.getTime() + } + if (!aIsDate && !bIsDate) { + return a === b + } + return false +} +const valueEquals = function (a, b) { + const aIsArray = a instanceof Array + const bIsArray = b instanceof Array + if (aIsArray && bIsArray) { + if (a.length !== b.length) { + return false + } + return a.every((item, index) => dateEquals(item, b[index])) + } + if (!aIsArray && !bIsArray) { + return dateEquals(a, b) + } + return false +} +const script = vue.defineComponent({ + name: 'Picker', + components: { + ElInput: ElInput__default.default, + ElPopper: ElPopper__default.default + }, + directives: { clickoutside: directives.ClickOutside }, + props: defaultProps, + emits: ['update:modelValue', 'change', 'focus', 'blur'], + setup (props, ctx) { + const ELEMENT = util.useGlobalConfig() + const elForm = vue.inject(form.elFormKey, {}) + const elFormItem = vue.inject(form.elFormItemKey, {}) + const elPopperOptions = vue.inject('ElPopperOptions', {}) + const refPopper = vue.ref(null) + const pickerVisible = vue.ref(false) + const pickerActualVisible = vue.ref(false) + const valueOnOpen = vue.ref(null) + vue.watch(pickerVisible, val => { + let _a + if (!val) { + userInput.value = null + vue.nextTick(() => { + emitChange(props.modelValue) + }) + ctx.emit('blur') + blurInput() + props.validateEvent && ((_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.blur')) + } else { + valueOnOpen.value = props.modelValue + } + }) + const emitChange = (val, isClear) => { + let _a + if (isClear || !valueEquals(val, valueOnOpen.value)) { + ctx.emit('change', val) + props.validateEvent && ((_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.change', val)) + } + } + const emitInput = val => { + if (!valueEquals(props.modelValue, val)) { + ctx.emit('update:modelValue', val) + } + } + const refInput = vue.computed(() => { + if (refPopper.value.triggerRef) { + const _r = isRangeInput.value ? refPopper.value.triggerRef : refPopper.value.triggerRef.$el + return [].slice.call(_r.querySelectorAll('input')) + } + return [] + }) + const setSelectionRange = (start, end, pos) => { + const _inputs = refInput.value + if (!_inputs.length) { return } + if (!pos || pos === 'min') { + _inputs[0].setSelectionRange(start, end) + _inputs[0].focus() + } else if (pos === 'max') { + _inputs[1].setSelectionRange(start, end) + _inputs[1].focus() + } + } + const onPick = (date = '', visible = false) => { + pickerVisible.value = visible + let result + if (Array.isArray(date)) { + result = date.map(_ => _.toDate()) + } else { + result = date ? date.toDate() : date + } + userInput.value = null + emitInput(result) + } + const handleFocus = e => { + if (props.readonly || pickerDisabled.value) { return } + pickerVisible.value = true + ctx.emit('focus', e) + } + const pickerDisabled = vue.computed(() => { + return props.disabled || elForm.disabled + }) + const parsedValue = vue.computed(() => { + let result + if (valueIsEmpty.value) { + if (pickerOptions.value.getDefaultValue) { + result = pickerOptions.value.getDefaultValue() + } + } else { + if (Array.isArray(props.modelValue)) { + result = props.modelValue.map(_ => dayjs__default.default.tz(_)) + } else { + result = dayjs__default.default.tz(props.modelValue) + } + } + if (pickerOptions.value.getRangeAvaliableTime) { + result = pickerOptions.value.getRangeAvaliableTime(result) + } + return result + }) + const displayValue = vue.computed(() => { + if (!pickerOptions.value.panelReady) { return } + const formattedValue = formatDayjsToString(parsedValue.value) + if (Array.isArray(userInput.value)) { + return [ + userInput.value[0] || (formattedValue && formattedValue[0]) || '', + userInput.value[1] || (formattedValue && formattedValue[1]) || '' + ] + } else if (userInput.value !== null) { + return userInput.value + } + if (!isTimePicker.value && valueIsEmpty.value) { return } + if (!pickerVisible.value && valueIsEmpty.value) { return } + if (formattedValue) { + return isDatesPicker.value + ? formattedValue.join(', ') + : formattedValue + } + return '' + }) + const isTimeLikePicker = vue.computed(() => { + return props.type.indexOf('time') !== -1 + }) + const isTimePicker = vue.computed(() => { + return props.type.indexOf('time') === 0 + }) + const isDatesPicker = vue.computed(() => { + return props.type === 'dates' + }) + const triggerClass = vue.computed(() => { + return props.prefixIcon || (isTimeLikePicker.value ? 'el-icon-time' : 'el-icon-date') + }) + const showClose = vue.ref(false) + const onClearIconClick = event => { + if (props.readonly || pickerDisabled.value) { return } + if (showClose.value) { + event.stopPropagation() + emitInput(null) + emitChange(null, true) + showClose.value = false + pickerVisible.value = false + pickerOptions.value.handleClear && pickerOptions.value.handleClear() + } + } + const valueIsEmpty = vue.computed(() => { + return !props.modelValue || (Array.isArray(props.modelValue) && !props.modelValue.length) + }) + const onMouseEnter = () => { + if (props.readonly || pickerDisabled.value) { return } + if (!valueIsEmpty.value && props.clearable) { + showClose.value = true + } + } + const onMouseLeave = () => { + showClose.value = false + } + const isRangeInput = vue.computed(() => { + return props.type.indexOf('range') > -1 + }) + const pickerSize = vue.computed(() => { + return props.size || elFormItem.size || ELEMENT.size + }) + const popperPaneRef = vue.computed(() => { + let _a + return (_a = refPopper.value) === null || _a === void 0 ? void 0 : _a.popperRef + }) + const onClickOutside = () => { + if (!pickerVisible.value) { return } + pickerVisible.value = false + } + const userInput = vue.ref(null) + const handleChange = () => { + if (userInput.value) { + const value = parseUserInputToDayjs(displayValue.value) + if (value) { + if (isValidValue(value)) { + emitInput(Array.isArray(value) ? value.map(_ => _.toDate()) : value.toDate()) + userInput.value = null + } + } + } + if (userInput.value === '') { + emitInput(null) + emitChange(null) + userInput.value = null + } + } + const blurInput = () => { + refInput.value.forEach(input => input.blur()) + } + const parseUserInputToDayjs = value => { + if (!value) { return null } + return pickerOptions.value.parseUserInput(value) + } + const formatDayjsToString = value => { + if (!value) { return null } + return pickerOptions.value.formatToString(value) + } + const isValidValue = value => { + return pickerOptions.value.isValidValue(value) + } + const handleKeydown = event => { + const code = event.code + if (code === aria.EVENT_CODE.esc) { + pickerVisible.value = false + event.stopPropagation() + return + } + if (code === aria.EVENT_CODE.tab) { + if (!isRangeInput.value) { + handleChange() + pickerVisible.value = false + event.stopPropagation() + } else { + setTimeout(() => { + if (refInput.value.indexOf(document.activeElement) === -1) { + pickerVisible.value = false + blurInput() + } + }, 0) + } + return + } + if (code === aria.EVENT_CODE.enter) { + if (userInput.value === '' || isValidValue(parseUserInputToDayjs(displayValue.value))) { + handleChange() + pickerVisible.value = false + } + event.stopPropagation() + return + } + if (userInput.value) { + event.stopPropagation() + return + } + if (pickerOptions.value.handleKeydown) { + pickerOptions.value.handleKeydown(event) + } + } + const onUserInput = e => { + userInput.value = e + } + const handleStartInput = event => { + if (userInput.value) { + userInput.value = [event.target.value, userInput.value[1]] + } else { + userInput.value = [event.target.value, null] + } + } + const handleEndInput = event => { + if (userInput.value) { + userInput.value = [userInput.value[0], event.target.value] + } else { + userInput.value = [null, event.target.value] + } + } + const handleStartChange = () => { + const value = parseUserInputToDayjs(userInput.value && userInput.value[0]) + if (value && value.isValid()) { + userInput.value = [formatDayjsToString(value), displayValue.value[1]] + const newValue = [value, parsedValue.value && parsedValue.value[1]] + if (isValidValue(newValue)) { + emitInput(newValue) + userInput.value = null + } + } + } + const handleEndChange = () => { + const value = parseUserInputToDayjs(userInput.value && userInput.value[1]) + if (value && value.isValid()) { + userInput.value = [displayValue.value[0], formatDayjsToString(value)] + const newValue = [parsedValue.value && parsedValue.value[0], value] + if (isValidValue(newValue)) { + emitInput(newValue) + userInput.value = null + } + } + } + const pickerOptions = vue.ref({}) + const onSetPickerOption = e => { + pickerOptions.value[e[0]] = e[1] + pickerOptions.value.panelReady = true + } + vue.provide('EP_PICKER_BASE', { + props + }) + return { + elPopperOptions, + isDatesPicker, + handleEndChange, + handleStartChange, + handleStartInput, + handleEndInput, + onUserInput, + handleChange, + handleKeydown, + popperPaneRef, + onClickOutside, + pickerSize, + isRangeInput, + onMouseLeave, + onMouseEnter, + onClearIconClick, + showClose, + triggerClass, + onPick, + handleFocus, + pickerVisible, + pickerActualVisible, + displayValue, + parsedValue, + setSelectionRange, + refPopper, + pickerDisabled, + onSetPickerOption + } + } +}) + +const _hoisted_1 = { class: 'el-range-separator' } + +function render (_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_input = vue.resolveComponent('el-input') + const _component_el_popper = vue.resolveComponent('el-popper') + const _directive_clickoutside = vue.resolveDirective('clickoutside') + + return (vue.openBlock(), vue.createBlock(_component_el_popper, vue.mergeProps({ + ref: 'refPopper', + visible: _ctx.pickerVisible, + 'onUpdate:visible': _cache[18] || (_cache[18] = $event => (_ctx.pickerVisible = $event)), + 'manual-mode': '', + effect: 'light', + pure: '', + trigger: 'click' + }, _ctx.$attrs, { + 'popper-class': `el-picker__popper ${_ctx.popperClass}`, + 'popper-options': _ctx.elPopperOptions, + transition: 'el-zoom-in-top', + 'gpu-acceleration': false, + 'stop-popper-mouse-event': false, + 'append-to-body': '', + onBeforeEnter: _cache[19] || (_cache[19] = $event => (_ctx.pickerActualVisible = true)), + onAfterLeave: _cache[20] || (_cache[20] = $event => (_ctx.pickerActualVisible = false)) + }), { + trigger: vue.withCtx(() => [ + (!_ctx.isRangeInput) + ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_input, { + key: 0, + 'model-value': _ctx.displayValue, + name: _ctx.name, + size: _ctx.pickerSize, + disabled: _ctx.pickerDisabled, + placeholder: _ctx.placeholder, + class: ['el-date-editor', 'el-date-editor--' + _ctx.type], + readonly: !_ctx.editable || _ctx.readonly || _ctx.isDatesPicker || _ctx.type === 'week', + onInput: _ctx.onUserInput, + onFocus: _ctx.handleFocus, + onKeydown: _ctx.handleKeydown, + onChange: _ctx.handleChange, + onMouseenter: _ctx.onMouseEnter, + onMouseleave: _ctx.onMouseLeave + }, { + prefix: vue.withCtx(() => [ + vue.createVNode('i', { + class: ['el-input__icon', _ctx.triggerClass], + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))) + }, null, 2 /* CLASS */) + ]), + suffix: vue.withCtx(() => [ + vue.createVNode('i', { + class: ['el-input__icon', [_ctx.showClose ? '' + _ctx.clearIcon : '']], + onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.onClearIconClick && _ctx.onClearIconClick(...args))) + }, null, 2 /* CLASS */) + ]), + _: 1 /* STABLE */ + }, 8 /* PROPS */, ['model-value', 'name', 'size', 'disabled', 'placeholder', 'class', 'readonly', 'onInput', 'onFocus', 'onKeydown', 'onChange', 'onMouseenter', 'onMouseleave'])), [ + [_directive_clickoutside, _ctx.onClickOutside, _ctx.popperPaneRef] + ]) + : vue.withDirectives((vue.openBlock(), vue.createBlock('div', { + key: 1, + class: ['el-date-editor el-range-editor el-input__inner', [ + 'el-date-editor--' + _ctx.type, + _ctx.pickerSize ? `el-range-editor--${_ctx.pickerSize}` : '', + _ctx.pickerDisabled ? 'is-disabled' : '', + _ctx.pickerVisible ? 'is-active' : '' + ]], + onClick: _cache[10] || (_cache[10] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))), + onMouseenter: _cache[11] || (_cache[11] = (...args) => (_ctx.onMouseEnter && _ctx.onMouseEnter(...args))), + onMouseleave: _cache[12] || (_cache[12] = (...args) => (_ctx.onMouseLeave && _ctx.onMouseLeave(...args))), + onKeydown: _cache[13] || (_cache[13] = (...args) => (_ctx.handleKeydown && _ctx.handleKeydown(...args))) + }, [ + vue.createVNode('i', { + class: ['el-input__icon', 'el-range__icon', _ctx.triggerClass] + }, null, 2 /* CLASS */), + vue.createVNode('input', { + autocomplete: 'off', + name: _ctx.name && _ctx.name[0], + placeholder: _ctx.startPlaceholder, + value: _ctx.displayValue && _ctx.displayValue[0], + disabled: _ctx.pickerDisabled, + readonly: !_ctx.editable || _ctx.readonly, + class: 'el-range-input', + onInput: _cache[3] || (_cache[3] = (...args) => (_ctx.handleStartInput && _ctx.handleStartInput(...args))), + onChange: _cache[4] || (_cache[4] = (...args) => (_ctx.handleStartChange && _ctx.handleStartChange(...args))), + onFocus: _cache[5] || (_cache[5] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))) + }, null, 40 /* PROPS, HYDRATE_EVENTS */, ['name', 'placeholder', 'value', 'disabled', 'readonly']), + vue.renderSlot(_ctx.$slots, 'range-separator', {}, () => [ + vue.createVNode('span', _hoisted_1, vue.toDisplayString(_ctx.rangeSeparator), 1 /* TEXT */) + ]), + vue.createVNode('input', { + autocomplete: 'off', + name: _ctx.name && _ctx.name[1], + placeholder: _ctx.endPlaceholder, + value: _ctx.displayValue && _ctx.displayValue[1], + disabled: _ctx.pickerDisabled, + readonly: !_ctx.editable || _ctx.readonly, + class: 'el-range-input', + onFocus: _cache[6] || (_cache[6] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))), + onInput: _cache[7] || (_cache[7] = (...args) => (_ctx.handleEndInput && _ctx.handleEndInput(...args))), + onChange: _cache[8] || (_cache[8] = (...args) => (_ctx.handleEndChange && _ctx.handleEndChange(...args))) + }, null, 40 /* PROPS, HYDRATE_EVENTS */, ['name', 'placeholder', 'value', 'disabled', 'readonly']), + vue.createVNode('i', { + class: [[_ctx.showClose ? '' + _ctx.clearIcon : ''], 'el-input__icon el-range__close-icon'], + onClick: _cache[9] || (_cache[9] = (...args) => (_ctx.onClearIconClick && _ctx.onClearIconClick(...args))) + }, null, 2 /* CLASS */) + ], 34 /* CLASS, HYDRATE_EVENTS */)), [ + [_directive_clickoutside, _ctx.onClickOutside, _ctx.popperPaneRef] + ]) + ]), + default: vue.withCtx(() => [ + vue.renderSlot(_ctx.$slots, 'default', { + visible: _ctx.pickerVisible, + actualVisible: _ctx.pickerActualVisible, + parsedValue: _ctx.parsedValue, + format: _ctx.format, + unlinkPanels: _ctx.unlinkPanels, + type: _ctx.type, + defaultValue: _ctx.defaultValue, + onPick: _cache[14] || (_cache[14] = (...args) => (_ctx.onPick && _ctx.onPick(...args))), + onSelectRange: _cache[15] || (_cache[15] = (...args) => (_ctx.setSelectionRange && _ctx.setSelectionRange(...args))), + onSetPickerOption: _cache[16] || (_cache[16] = (...args) => (_ctx.onSetPickerOption && _ctx.onSetPickerOption(...args))), + onMousedown: _cache[17] || (_cache[17] = vue.withModifiers(() => {}, ['stop'])) + }) + ]), + _: 1 /* STABLE */ + }, 16 /* FULL_PROPS */, ['visible', 'popper-class', 'popper-options'])) +} + +script.render = render +script.__file = 'packages/time-picker/src/common/picker.vue' + +const makeList = (total, method, methodFunc) => { + const arr = [] + const disabledArr = method && methodFunc() + for (let i = 0; i < total; i++) { + arr[i] = disabledArr ? disabledArr.includes(i) : false + } + return arr +} +const makeAvaliableArr = list => { + return list.map((_, index) => !_ ? index : _).filter(_ => _ !== true) +} +const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => { + const getHoursList = (role, compare) => { + return makeList(24, disabledHours, () => disabledHours(role, compare)) + } + const getMinutesList = (hour, role, compare) => { + return makeList(60, disabledMinutes, () => disabledMinutes(hour, role, compare)) + } + const getSecondsList = (hour, minute, role, compare) => { + return makeList(60, disabledSeconds, () => disabledSeconds(hour, minute, role, compare)) + } + return { + getHoursList, + getMinutesList, + getSecondsList + } +} +const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds) => { + const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds) + const getAvaliableHours = (role, compare) => { + return makeAvaliableArr(getHoursList(role, compare)) + } + const getAvaliableMinutes = (hour, role, compare) => { + return makeAvaliableArr(getMinutesList(hour, role, compare)) + } + const getAvaliableSeconds = (hour, minute, role, compare) => { + return makeAvaliableArr(getSecondsList(hour, minute, role, compare)) + } + return { + getAvaliableHours, + getAvaliableMinutes, + getAvaliableSeconds + } +} +const useOldValue = (props) => { + const oldValue = vue.ref(props.parsedValue) + vue.watch(() => props.visible, val => { + if (!val) { + oldValue.value = props.parsedValue + } + }) + return oldValue +} + +const script$1 = vue.defineComponent({ + directives: { + repeatClick: directives.RepeatClick + }, + components: { + ElScrollbar: ElScrollbar__default.default + }, + props: { + role: { + type: String, + required: true + }, + spinnerDate: { + type: Object, + required: true + }, + showSeconds: { + type: Boolean, + default: true + }, + arrowControl: Boolean, + amPmMode: { + type: String, + default: '' + }, + disabledHours: { + type: Function + }, + disabledMinutes: { + type: Function + }, + disabledSeconds: { + type: Function + } + }, + emits: ['change', 'select-range', 'set-option'], + setup (props, ctx) { + let isScrolling = false + const debouncedResetScroll = debounce__default.default(type => { + isScrolling = false + adjustCurrentSpinner(type) + }, 200) + const currentScrollbar = vue.ref(null) + const listHoursRef = vue.ref(null) + const listMinutesRef = vue.ref(null) + const listSecondsRef = vue.ref(null) + const listRefsMap = { + hours: listHoursRef, minutes: listMinutesRef, seconds: listSecondsRef + } + const spinnerItems = vue.computed(() => { + const arr = ['hours', 'minutes', 'seconds'] + return props.showSeconds ? arr : arr.slice(0, 2) + }) + const hours = vue.computed(() => { + return props.spinnerDate.hour() + }) + const minutes = vue.computed(() => { + return props.spinnerDate.minute() + }) + const seconds = vue.computed(() => { + return props.spinnerDate.second() + }) + const timePartsMap = vue.computed(() => ({ + hours, minutes, seconds + })) + const hoursList = vue.computed(() => { + return getHoursList(props.role) + }) + const minutesList = vue.computed(() => { + return getMinutesList(hours.value, props.role) + }) + const secondsList = vue.computed(() => { + return getSecondsList(hours.value, minutes.value, props.role) + }) + const listMap = vue.computed(() => ({ + hours: hoursList, + minutes: minutesList, + seconds: secondsList + })) + const arrowHourList = vue.computed(() => { + const hour = hours.value + return [ + hour > 0 ? hour - 1 : undefined, + hour, + hour < 23 ? hour + 1 : undefined + ] + }) + const arrowMinuteList = vue.computed(() => { + const minute = minutes.value + return [ + minute > 0 ? minute - 1 : undefined, + minute, + minute < 59 ? minute + 1 : undefined + ] + }) + const arrowSecondList = vue.computed(() => { + const second = seconds.value + return [ + second > 0 ? second - 1 : undefined, + second, + second < 59 ? second + 1 : undefined + ] + }) + const arrowListMap = vue.computed(() => ({ + hours: arrowHourList, + minutes: arrowMinuteList, + seconds: arrowSecondList + })) + const getAmPmFlag = hour => { + const shouldShowAmPm = !!props.amPmMode + if (!shouldShowAmPm) { return '' } + const isCapital = props.amPmMode === 'A' + let content = (hour < 12) ? ' am' : ' pm' + if (isCapital) { content = content.toUpperCase() } + return content + } + const emitSelectRange = type => { + if (type === 'hours') { + ctx.emit('select-range', 0, 2) + } else if (type === 'minutes') { + ctx.emit('select-range', 3, 5) + } else if (type === 'seconds') { + ctx.emit('select-range', 6, 8) + } + currentScrollbar.value = type + } + const adjustCurrentSpinner = type => { + adjustSpinner(type, timePartsMap.value[type].value) + } + const adjustSpinners = () => { + adjustCurrentSpinner('hours') + adjustCurrentSpinner('minutes') + adjustCurrentSpinner('seconds') + } + const adjustSpinner = (type, value) => { + if (props.arrowControl) { return } + const el = listRefsMap[type] + if (el.value) { + el.value.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(0, value * typeItemHeight(type)) + } + } + const typeItemHeight = type => { + const el = listRefsMap[type] + return el.value.$el.querySelector('li').offsetHeight + } + const onIncreaseClick = () => { + scrollDown(1) + } + const onDecreaseClick = () => { + scrollDown(-1) + } + const scrollDown = step => { + if (!currentScrollbar.value) { + emitSelectRange('hours') + } + const label = currentScrollbar.value + let now = timePartsMap.value[label].value + const total = currentScrollbar.value === 'hours' ? 24 : 60 + now = (now + step + total) % total + modifyDateField(label, now) + adjustSpinner(label, now) + vue.nextTick(() => emitSelectRange(currentScrollbar.value)) + } + const modifyDateField = (type, value) => { + const list = listMap.value[type].value + const isDisabled = list[value] + if (isDisabled) { return } + switch (type) { + case 'hours': + ctx.emit('change', props.spinnerDate + .hour(value) + .minute(minutes.value) + .second(seconds.value)) + break + case 'minutes': + ctx.emit('change', props.spinnerDate + .hour(hours.value) + .minute(value) + .second(seconds.value)) + break + case 'seconds': + ctx.emit('change', props.spinnerDate + .hour(hours.value) + .minute(minutes.value) + .second(value)) + break + } + } + const handleClick = (type, { value, disabled }) => { + if (!disabled) { + modifyDateField(type, value) + emitSelectRange(type) + adjustSpinner(type, value) + } + } + const handleScroll = type => { + isScrolling = true + debouncedResetScroll(type) + const value = Math.min(Math.round((listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap').scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), (type === 'hours' ? 23 : 59)) + modifyDateField(type, value) + } + const scrollBarHeight = type => { + return listRefsMap[type].value.$el.offsetHeight + } + const bindScrollEvent = () => { + const bindFuntion = type => { + if (listRefsMap[type].value) { + listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap').onscroll = () => { + handleScroll(type) + } + } + } + bindFuntion('hours') + bindFuntion('minutes') + bindFuntion('seconds') + } + vue.onMounted(() => { + vue.nextTick(() => { + !props.arrowControl && bindScrollEvent() + adjustSpinners() + if (props.role === 'start') { emitSelectRange('hours') } + }) + }) + const getRefId = item => { + return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref` + } + ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown]) + ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange]) + const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds) + vue.watch(() => props.spinnerDate, () => { + if (isScrolling) { return } + adjustSpinners() + }) + return { + getRefId, + spinnerItems, + currentScrollbar, + hours, + minutes, + seconds, + hoursList, + minutesList, + arrowHourList, + arrowMinuteList, + arrowSecondList, + getAmPmFlag, + emitSelectRange, + adjustCurrentSpinner, + typeItemHeight, + listHoursRef, + listMinutesRef, + listSecondsRef, + onIncreaseClick, + onDecreaseClick, + handleClick, + secondsList, + timePartsMap, + arrowListMap, + listMap + } + } +}) + +const _hoisted_1$1 = { class: 'el-time-spinner__arrow el-icon-arrow-up' } +const _hoisted_2 = { class: 'el-time-spinner__arrow el-icon-arrow-down' } +const _hoisted_3 = { class: 'el-time-spinner__list' } + +function render$1 (_ctx, _cache, $props, $setup, $data, $options) { + const _component_el_scrollbar = vue.resolveComponent('el-scrollbar') + const _directive_repeat_click = vue.resolveDirective('repeat-click') + + return (vue.openBlock(), vue.createBlock('div', { + class: ['el-time-spinner', { 'has-seconds': _ctx.showSeconds }] + }, [ + (!_ctx.arrowControl) + ? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.spinnerItems, (item) => { + return (vue.openBlock(), vue.createBlock(_component_el_scrollbar, { + key: item, + ref: _ctx.getRefId(item), + class: 'el-time-spinner__wrapper', + 'wrap-style': 'max-height: inherit;', + 'view-class': 'el-time-spinner__list', + noresize: '', + tag: 'ul', + onMouseenter: $event => (_ctx.emitSelectRange(item)), + onMousemove: $event => (_ctx.adjustCurrentSpinner(item)) + }, { + default: vue.withCtx(() => [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.listMap[item].value, (disabled, key) => { + return (vue.openBlock(), vue.createBlock('li', { + key: key, + class: ['el-time-spinner__item', { active: key === _ctx.timePartsMap[item].value, disabled }], + onClick: $event => (_ctx.handleClick(item, { value: key, disabled })) + }, [ + (item === 'hours') + ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [ + vue.createTextVNode(vue.toDisplayString(('0' + (_ctx.amPmMode ? (key % 12 || 12) : key)).slice(-2)) + vue.toDisplayString(_ctx.getAmPmFlag(key)), 1 /* TEXT */) + ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) + : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 1 }, [ + vue.createTextVNode(vue.toDisplayString(('0' + key).slice(-2)), 1 /* TEXT */) + ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) + ], 10 /* CLASS, PROPS */, ['onClick'])) + }), 128 /* KEYED_FRAGMENT */)) + ]), + _: 2 /* DYNAMIC */ + }, 1032 /* PROPS, DYNAMIC_SLOTS */, ['onMouseenter', 'onMousemove'])) + }), 128 /* KEYED_FRAGMENT */)) + : vue.createCommentVNode('v-if', true), + (_ctx.arrowControl) + ? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.spinnerItems, (item) => { + return (vue.openBlock(), vue.createBlock('div', { + key: item, + class: 'el-time-spinner__wrapper is-arrow', + onMouseenter: $event => (_ctx.emitSelectRange(item)) + }, [ + vue.withDirectives(vue.createVNode('i', _hoisted_1$1, null, 512 /* NEED_PATCH */), [ + [_directive_repeat_click, _ctx.onDecreaseClick] + ]), + vue.withDirectives(vue.createVNode('i', _hoisted_2, null, 512 /* NEED_PATCH */), [ + [_directive_repeat_click, _ctx.onIncreaseClick] + ]), + vue.createVNode('ul', _hoisted_3, [ + (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.arrowListMap[item].value, (time, key) => { + return (vue.openBlock(), vue.createBlock('li', { + key: key, + class: ['el-time-spinner__item', { active: time === _ctx.timePartsMap[item].value, disabled: _ctx.listMap[item].value[time] }] + }, vue.toDisplayString(time === undefined ? '' : ('0' + (_ctx.amPmMode ? (time % 12 || 12) : time)).slice(-2) + _ctx.getAmPmFlag(time)), 3 /* TEXT, CLASS */)) + }), 128 /* KEYED_FRAGMENT */)) + ]) + ], 40 /* PROPS, HYDRATE_EVENTS */, ['onMouseenter'])) + }), 128 /* KEYED_FRAGMENT */)) + : vue.createCommentVNode('v-if', true) + ], 2 /* CLASS */)) +} + +script$1.render = render$1 +script$1.__file = 'packages/time-picker/src/time-picker-com/basic-time-spinner.vue' + +const script$2 = vue.defineComponent({ + components: { + TimeSpinner: script$1 + }, + props: { + visible: Boolean, + actualVisible: { + type: Boolean, + default: undefined + }, + datetimeRole: { + type: String + }, + parsedValue: { + type: [Object, String] + }, + format: { + type: String, + default: '' + } + }, + emits: ['pick', 'select-range', 'set-picker-option'], + setup (props, ctx) { + const selectionRange = vue.ref([0, 2]) + const oldValue = useOldValue(props) + const transitionName = vue.computed(() => { + return props.actualVisible === undefined ? 'el-zoom-in-top' : '' + }) + const showSeconds = vue.computed(() => { + return props.format.includes('ss') + }) + const amPmMode = vue.computed(() => { + if (props.format.includes('A')) { return 'A' } + if (props.format.includes('a')) { return 'a' } + return '' + }) + const isValidValue = _date => { + const parsedDate = dayjs__default.default.tz(_date) + const result = getRangeAvaliableTime(parsedDate) + return parsedDate.isSame(result) + } + const handleCancel = () => { + ctx.emit('pick', oldValue.value, false) + } + const handleConfirm = (visible = false, first) => { + if (first) { return } + ctx.emit('pick', props.parsedValue, visible) + } + const handleChange = (_date) => { + if (!props.visible) { + return + } + const result = getRangeAvaliableTime(_date).millisecond(0) + ctx.emit('pick', result, true) + } + const setSelectionRange = (start, end) => { + ctx.emit('select-range', start, end) + selectionRange.value = [start, end] + } + const changeSelectionRange = step => { + const list = [0, 3].concat(showSeconds.value ? [6] : []) + const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : []) + const index = list.indexOf(selectionRange.value[0]) + const next = (index + step + list.length) % list.length + timePickeOptions.start_emitSelectRange(mapping[next]) + } + const handleKeydown = event => { + const code = event.code + if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) { + const step = (code === aria.EVENT_CODE.left) ? -1 : 1 + changeSelectionRange(step) + event.preventDefault() + return + } + if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) { + const step = (code === aria.EVENT_CODE.up) ? -1 : 1 + timePickeOptions.start_scrollDown(step) + event.preventDefault() + } + } + const getRangeAvaliableTime = (date) => { + const avaliableMap = { + hour: getAvaliableHours, + minute: getAvaliableMinutes, + second: getAvaliableSeconds + } + let result = date; + ['hour', 'minute', 'second'].forEach(_ => { + if (avaliableMap[_]) { + let avaliableArr + const method = avaliableMap[_] + if (_ === 'minute') { + avaliableArr = method(result.hour(), props.datetimeRole) + } else if (_ === 'second') { + avaliableArr = method(result.hour(), result.minute(), props.datetimeRole) + } else { + avaliableArr = method(props.datetimeRole) + } + if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) { + result = result[_](avaliableArr[0]) + } + } + }) + return result + } + const parseUserInput = value => { + if (!value) { return null } + return dayjs__default.default.tz(value, props.format) + } + const formatToString = value => { + if (!value) { return null } + return value.format(props.format) + } + const getDefaultValue = () => { + return dayjs__default.default.tz(defaultValue) + } + ctx.emit('set-picker-option', ['isValidValue', isValidValue]) + ctx.emit('set-picker-option', ['formatToString', formatToString]) + ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]) + ctx.emit('set-picker-option', ['handleKeydown', handleKeydown]) + ctx.emit('set-picker-option', ['getRangeAvaliableTime', getRangeAvaliableTime]) + ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue]) + const timePickeOptions = {} + const onSetOption = e => { + timePickeOptions[e[0]] = e[1] + } + const pickerBase = vue.inject('EP_PICKER_BASE') + const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props + const { getAvaliableHours, getAvaliableMinutes, getAvaliableSeconds } = getAvaliableArrs(disabledHours, disabledMinutes, disabledSeconds) + return { + transitionName, + arrowControl, + onSetOption, + t: locale.t, + handleConfirm, + handleChange, + setSelectionRange, + amPmMode, + showSeconds, + handleCancel, + disabledHours, + disabledMinutes, + disabledSeconds + } + } +}) + +const _hoisted_1$2 = { + key: 0, + class: 'el-time-panel' +} +const _hoisted_2$1 = { class: 'el-time-panel__footer' } + +function render$2 (_ctx, _cache, $props, $setup, $data, $options) { + const _component_time_spinner = vue.resolveComponent('time-spinner') + + return (vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, { + default: vue.withCtx(() => [ + (_ctx.actualVisible || _ctx.visible) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_1$2, [ + vue.createVNode('div', { + class: ['el-time-panel__content', { 'has-seconds': _ctx.showSeconds }] + }, [ + vue.createVNode(_component_time_spinner, { + ref: 'spinner', + role: _ctx.datetimeRole || 'start', + 'arrow-control': _ctx.arrowControl, + 'show-seconds': _ctx.showSeconds, + 'am-pm-mode': _ctx.amPmMode, + 'spinner-date': _ctx.parsedValue, + 'disabled-hours': _ctx.disabledHours, + 'disabled-minutes': _ctx.disabledMinutes, + 'disabled-seconds': _ctx.disabledSeconds, + onChange: _ctx.handleChange, + onSetOption: _ctx.onSetOption, + onSelectRange: _ctx.setSelectionRange + }, null, 8 /* PROPS */, ['role', 'arrow-control', 'show-seconds', 'am-pm-mode', 'spinner-date', 'disabled-hours', 'disabled-minutes', 'disabled-seconds', 'onChange', 'onSetOption', 'onSelectRange']) + ], 2 /* CLASS */), + vue.createVNode('div', _hoisted_2$1, [ + vue.createVNode('button', { + type: 'button', + class: 'el-time-panel__btn cancel', + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleCancel && _ctx.handleCancel(...args))) + }, vue.toDisplayString(_ctx.t('el.datepicker.cancel')), 1 /* TEXT */), + vue.createVNode('button', { + type: 'button', + class: 'el-time-panel__btn confirm', + onClick: _cache[2] || (_cache[2] = $event => (_ctx.handleConfirm())) + }, vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */) + ]) + ])) + : vue.createCommentVNode('v-if', true) + ]), + _: 1 /* STABLE */ + }, 8 /* PROPS */, ['name'])) +} + +script$2.render = render$2 +script$2.__file = 'packages/time-picker/src/time-picker-com/panel-time-pick.vue' + +const makeSelectRange = (start, end) => { + const result = [] + for (let i = start; i <= end; i++) { + result.push(i) + } + return result +} +const script$3 = vue.defineComponent({ + components: { TimeSpinner: script$1 }, + props: { + visible: Boolean, + actualVisible: Boolean, + parsedValue: { + type: [Array, String] + }, + format: { + type: String, + default: '' + } + }, + emits: ['pick', 'select-range', 'set-picker-option'], + setup (props, ctx) { + const minDate = vue.computed(() => props.parsedValue[0]) + const maxDate = vue.computed(() => props.parsedValue[1]) + const oldValue = useOldValue(props) + const handleCancel = () => { + ctx.emit('pick', oldValue.value, null) + } + const showSeconds = vue.computed(() => { + return props.format.includes('ss') + }) + const amPmMode = vue.computed(() => { + if (props.format.includes('A')) { return 'A' } + if (props.format.includes('a')) { return 'a' } + return '' + }) + const minSelectableRange = vue.ref([]) + const maxSelectableRange = vue.ref([]) + const handleConfirm = (visible = false) => { + ctx.emit('pick', [minDate.value, maxDate.value], visible) + } + const handleMinChange = date => { + handleChange(date.millisecond(0), maxDate.value) + } + const handleMaxChange = date => { + handleChange(minDate.value, date.millisecond(0)) + } + const isValidValue = _date => { + const parsedDate = _date.map(_ => dayjs__default.default.tz(_)) + const result = getRangeAvaliableTime(parsedDate) + return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]) + } + const handleChange = (_minDate, _maxDate) => { + ctx.emit('pick', [_minDate, _maxDate], true) + } + const btnConfirmDisabled = vue.computed(() => { + return minDate.value > maxDate.value + }) + const selectionRange = vue.ref([0, 2]) + const setMinSelectionRange = (start, end) => { + ctx.emit('select-range', start, end, 'min') + selectionRange.value = [start, end] + } + const offset = vue.computed(() => showSeconds.value ? 11 : 8) + const setMaxSelectionRange = (start, end) => { + ctx.emit('select-range', start, end, 'max') + selectionRange.value = [start + offset.value, end + offset.value] + } + const changeSelectionRange = step => { + const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11] + const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : []) + const index = list.indexOf(selectionRange.value[0]) + const next = (index + step + list.length) % list.length + const half = list.length / 2 + if (next < half) { + timePickeOptions.start_emitSelectRange(mapping[next]) + } else { + timePickeOptions.end_emitSelectRange(mapping[next - half]) + } + } + const handleKeydown = event => { + const code = event.code + if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) { + const step = (code === aria.EVENT_CODE.left) ? -1 : 1 + changeSelectionRange(step) + event.preventDefault() + return + } + if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) { + const step = (code === aria.EVENT_CODE.up) ? -1 : 1 + const role = selectionRange.value[0] < offset.value ? 'start' : 'end' + timePickeOptions[`${role}_scrollDown`](step) + event.preventDefault() + } + } + const disabledHours_ = (role, compare) => { + const defaultDisable = disabledHours ? disabledHours(role) : [] + const isStart = role === 'start' + const compareDate = compare || (isStart ? maxDate.value : minDate.value) + const compareHour = compareDate.hour() + const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1) + return union__default.default(defaultDisable, nextDisable) + } + const disabledMinutes_ = (hour, role, compare) => { + const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : [] + const isStart = role === 'start' + const compareDate = compare || (isStart ? maxDate.value : minDate.value) + const compareHour = compareDate.hour() + if (hour !== compareHour) { + return defaultDisable + } + const compareMinute = compareDate.minute() + const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1) + return union__default.default(defaultDisable, nextDisable) + } + const disabledSeconds_ = (hour, minute, role, compare) => { + const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : [] + const isStart = role === 'start' + const compareDate = compare || (isStart ? maxDate.value : minDate.value) + const compareHour = compareDate.hour() + const compareMinute = compareDate.minute() + if (hour !== compareHour || minute !== compareMinute) { + return defaultDisable + } + const compareSecond = compareDate.second() + const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1) + return union__default.default(defaultDisable, nextDisable) + } + const getRangeAvaliableTime = (dates) => { + return dates.map((_, index) => getRangeAvaliableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end')) + } + const { getAvaliableHours, getAvaliableMinutes, getAvaliableSeconds } = getAvaliableArrs(disabledHours_, disabledMinutes_, disabledSeconds_) + const getRangeAvaliableTimeEach = (startDate, endDate, role) => { + const avaliableMap = { + hour: getAvaliableHours, + minute: getAvaliableMinutes, + second: getAvaliableSeconds + } + const isStart = role === 'start' + let result = isStart ? startDate : endDate + const compareDate = isStart ? endDate : startDate; + ['hour', 'minute', 'second'].forEach(_ => { + if (avaliableMap[_]) { + let avaliableArr + const method = avaliableMap[_] + if (_ === 'minute') { + avaliableArr = method(result.hour(), role, compareDate) + } else if (_ === 'second') { + avaliableArr = method(result.hour(), result.minute(), role, compareDate) + } else { + avaliableArr = method(role, compareDate) + } + if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) { + const pos = isStart ? 0 : avaliableArr.length - 1 + result = result[_](avaliableArr[pos]) + } + } + }) + return result + } + const parseUserInput = value => { + if (!value) { return null } + if (Array.isArray(value)) { + return value.map(_ => dayjs__default.default.tz(_, props.format)) + } + return dayjs__default.default.tz(value, props.format) + } + const formatToString = value => { + if (!value) { return null } + if (Array.isArray(value)) { + return value.map(_ => _.format(props.format)) + } + return value.format(props.format) + } + const getDefaultValue = () => { + if (Array.isArray(defaultValue)) { + return defaultValue.map(_ => dayjs__default.default.tz(_)) + } + return [ + dayjs__default.default.tz(defaultValue), + dayjs__default.default.tz(defaultValue).add(60, 'm') + ] + } + ctx.emit('set-picker-option', ['formatToString', formatToString]) + ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]) + ctx.emit('set-picker-option', ['isValidValue', isValidValue]) + ctx.emit('set-picker-option', ['handleKeydown', handleKeydown]) + ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue]) + ctx.emit('set-picker-option', ['getRangeAvaliableTime', getRangeAvaliableTime]) + const timePickeOptions = {} + const onSetOption = e => { + timePickeOptions[e[0]] = e[1] + } + const pickerBase = vue.inject('EP_PICKER_BASE') + const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props + return { + arrowControl, + onSetOption, + setMaxSelectionRange, + setMinSelectionRange, + btnConfirmDisabled, + handleCancel, + handleConfirm, + t: locale.t, + showSeconds, + minDate, + maxDate, + amPmMode, + handleMinChange, + handleMaxChange, + minSelectableRange, + maxSelectableRange, + disabledHours_, + disabledMinutes_, + disabledSeconds_ + } + } +}) + +const _hoisted_1$3 = { + key: 0, + class: 'el-time-range-picker el-picker-panel' +} +const _hoisted_2$2 = { class: 'el-time-range-picker__content' } +const _hoisted_3$1 = { class: 'el-time-range-picker__cell' } +const _hoisted_4 = { class: 'el-time-range-picker__header' } +const _hoisted_5 = { class: 'el-time-range-picker__cell' } +const _hoisted_6 = { class: 'el-time-range-picker__header' } +const _hoisted_7 = { class: 'el-time-panel__footer' } + +function render$3 (_ctx, _cache, $props, $setup, $data, $options) { + const _component_time_spinner = vue.resolveComponent('time-spinner') + + return (_ctx.actualVisible) + ? (vue.openBlock(), vue.createBlock('div', _hoisted_1$3, [ + vue.createVNode('div', _hoisted_2$2, [ + vue.createVNode('div', _hoisted_3$1, [ + vue.createVNode('div', _hoisted_4, vue.toDisplayString(_ctx.t('el.datepicker.startTime')), 1 /* TEXT */), + vue.createVNode('div', { + class: [{ 'has-seconds': _ctx.showSeconds, 'is-arrow': _ctx.arrowControl }, 'el-time-range-picker__body el-time-panel__content'] + }, [ + vue.createVNode(_component_time_spinner, { + ref: 'minSpinner', + role: 'start', + 'show-seconds': _ctx.showSeconds, + 'am-pm-mode': _ctx.amPmMode, + 'arrow-control': _ctx.arrowControl, + 'spinner-date': _ctx.minDate, + 'disabled-hours': _ctx.disabledHours_, + 'disabled-minutes': _ctx.disabledMinutes_, + 'disabled-seconds': _ctx.disabledSeconds_, + onChange: _ctx.handleMinChange, + onSetOption: _ctx.onSetOption, + onSelectRange: _ctx.setMinSelectionRange + }, null, 8 /* PROPS */, ['show-seconds', 'am-pm-mode', 'arrow-control', 'spinner-date', 'disabled-hours', 'disabled-minutes', 'disabled-seconds', 'onChange', 'onSetOption', 'onSelectRange']) + ], 2 /* CLASS */) + ]), + vue.createVNode('div', _hoisted_5, [ + vue.createVNode('div', _hoisted_6, vue.toDisplayString(_ctx.t('el.datepicker.endTime')), 1 /* TEXT */), + vue.createVNode('div', { + class: [{ 'has-seconds': _ctx.showSeconds, 'is-arrow': _ctx.arrowControl }, 'el-time-range-picker__body el-time-panel__content'] + }, [ + vue.createVNode(_component_time_spinner, { + ref: 'maxSpinner', + role: 'end', + 'show-seconds': _ctx.showSeconds, + 'am-pm-mode': _ctx.amPmMode, + 'arrow-control': _ctx.arrowControl, + 'spinner-date': _ctx.maxDate, + 'disabled-hours': _ctx.disabledHours_, + 'disabled-minutes': _ctx.disabledMinutes_, + 'disabled-seconds': _ctx.disabledSeconds_, + onChange: _ctx.handleMaxChange, + onSetOption: _ctx.onSetOption, + onSelectRange: _ctx.setMaxSelectionRange + }, null, 8 /* PROPS */, ['show-seconds', 'am-pm-mode', 'arrow-control', 'spinner-date', 'disabled-hours', 'disabled-minutes', 'disabled-seconds', 'onChange', 'onSetOption', 'onSelectRange']) + ], 2 /* CLASS */) + ]) + ]), + vue.createVNode('div', _hoisted_7, [ + vue.createVNode('button', { + type: 'button', + class: 'el-time-panel__btn cancel', + onClick: _cache[1] || (_cache[1] = $event => (_ctx.handleCancel())) + }, vue.toDisplayString(_ctx.t('el.datepicker.cancel')), 1 /* TEXT */), + vue.createVNode('button', { + type: 'button', + class: 'el-time-panel__btn confirm', + disabled: _ctx.btnConfirmDisabled, + onClick: _cache[2] || (_cache[2] = $event => (_ctx.handleConfirm())) + }, vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 9 /* TEXT, PROPS */, ['disabled']) + ]) + ])) + : vue.createCommentVNode('v-if', true) +} + +script$3.render = render$3 +script$3.__file = 'packages/time-picker/src/time-picker-com/panel-time-range.vue' + +dayjs__default.default.extend(customParseFormat__default.default) +const TimePicker = vue.defineComponent({ + name: 'ElTimePicker', + install: null, + props: Object.assign(Object.assign({}, defaultProps), { + isRange: { + type: Boolean, + default: false + } + }), + emits: ['update:modelValue'], + setup (props, ctx) { + const commonPicker = vue.ref(null) + const type = props.isRange ? 'timerange' : 'time' + const panel = props.isRange ? script$3 : script$2 + const refProps = Object.assign(Object.assign({}, props), { + focus: () => { + let _a; + (_a = commonPicker.value) === null || _a === void 0 ? void 0 : _a.handleFocus() + } + }) + vue.provide('ElPopperOptions', props.popperOptions) + ctx.expose(refProps) + return () => vue.h(script, Object.assign(Object.assign({ format: DEFAULT_FORMATS_TIME }, props), { type, ref: commonPicker, 'onUpdate:modelValue': value => ctx.emit('update:modelValue', value) }), { + default: scopedProps => vue.h(panel, scopedProps) + }) + } +}) + +const rangeArr = n => { + return Array.from(Array(n).keys()) +} +const extractDateFormat = format => { + return format + .replace(/\W?m{1,2}|\W?ZZ/g, '') + .replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, '') + .trim() +} +const extractTimeFormat = format => { + return format + .replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, '') + .trim() +} + +const _TimePicker = TimePicker +_TimePicker.install = app => { + app.component(_TimePicker.name, _TimePicker) +} + +exports.CommonPicker = script +exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE +exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER +exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME +exports.TimePickPanel = script$2 +exports.default = _TimePicker +exports.defaultProps = defaultProps +exports.extractDateFormat = extractDateFormat +exports.extractTimeFormat = extractTimeFormat +exports.rangeArr = rangeArr diff --git a/src/components/common/MytTimePicker/src/common/constant.d.ts b/src/components/common/MytTimePicker/src/common/constant.d.ts new file mode 100644 index 00000000..d77ba9fa --- /dev/null +++ b/src/components/common/MytTimePicker/src/common/constant.d.ts @@ -0,0 +1,12 @@ +export declare const DEFAULT_FORMATS_TIME = "HH:mm:ss"; +export declare const DEFAULT_FORMATS_DATE = "YYYY-MM-DD"; +export declare const DEFAULT_FORMATS_DATEPICKER: { + date: string; + week: string; + year: string; + month: string; + datetime: string; + monthrange: string; + daterange: string; + datetimerange: string; +}; diff --git a/src/components/common/MytTimePicker/src/common/date-utils.d.ts b/src/components/common/MytTimePicker/src/common/date-utils.d.ts new file mode 100644 index 00000000..1cb3e86a --- /dev/null +++ b/src/components/common/MytTimePicker/src/common/date-utils.d.ts @@ -0,0 +1,3 @@ +export declare const rangeArr: (n: any) => number[]; +export declare const extractDateFormat: (format: any) => any; +export declare const extractTimeFormat: (format: any) => any; diff --git a/src/components/common/MytTimePicker/src/common/picker.vue.d.ts b/src/components/common/MytTimePicker/src/common/picker.vue.d.ts new file mode 100644 index 00000000..217ffaac --- /dev/null +++ b/src/components/common/MytTimePicker/src/common/picker.vue.d.ts @@ -0,0 +1,182 @@ +import type { Options } from '@popperjs/core'; +declare const _default: import("vue").DefineComponent<{ + name: { + type: (ArrayConstructor | StringConstructor)[]; + default: string; + }; + popperClass: { + type: StringConstructor; + default: string; + }; + format: { + type: StringConstructor; + }; + type: { + type: StringConstructor; + default: string; + }; + clearable: { + type: BooleanConstructor; + default: boolean; + }; + clearIcon: { + type: StringConstructor; + default: string; + }; + editable: { + type: BooleanConstructor; + default: boolean; + }; + prefixIcon: { + type: StringConstructor; + default: string; + }; + size: { + type: import("vue").PropType; + validator: (val: string) => boolean; + }; + readonly: { + type: BooleanConstructor; + default: boolean; + }; + disabled: { + type: BooleanConstructor; + default: boolean; + }; + placeholder: { + type: StringConstructor; + default: string; + }; + popperOptions: { + type: import("vue").PropType; + default: () => {}; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + rangeSeparator: { + type: StringConstructor; + default: string; + }; + startPlaceholder: StringConstructor; + endPlaceholder: StringConstructor; + defaultValue: { + type: import("vue").PropType; + }; + defaultTime: { + type: import("vue").PropType; + }; + isRange: { + type: BooleanConstructor; + default: boolean; + }; + disabledHours: { + type: FunctionConstructor; + }; + disabledMinutes: { + type: FunctionConstructor; + }; + disabledSeconds: { + type: FunctionConstructor; + }; + disabledDate: { + type: FunctionConstructor; + }; + cellClassName: { + type: FunctionConstructor; + }; + shortcuts: { + type: ArrayConstructor; + default: () => any[]; + }; + arrowControl: { + type: BooleanConstructor; + default: boolean; + }; + validateEvent: { + type: BooleanConstructor; + default: boolean; + }; + unlinkPanels: BooleanConstructor; +}, { + elPopperOptions: Options; + isDatesPicker: import("vue").ComputedRef; + handleEndChange: () => void; + handleStartChange: () => void; + handleStartInput: (event: any) => void; + handleEndInput: (event: any) => void; + onUserInput: (e: any) => void; + handleChange: () => void; + handleKeydown: (event: any) => void; + popperPaneRef: import("vue").ComputedRef; + onClickOutside: () => void; + pickerSize: import("vue").ComputedRef; + isRangeInput: import("vue").ComputedRef; + onMouseLeave: () => void; + onMouseEnter: () => void; + onClearIconClick: (event: any) => void; + showClose: import("vue").Ref; + triggerClass: import("vue").ComputedRef; + onPick: (date?: any, visible?: boolean) => void; + handleFocus: (e: any) => void; + pickerVisible: import("vue").Ref; + pickerActualVisible: import("vue").Ref; + displayValue: import("vue").ComputedRef; + parsedValue: import("vue").ComputedRef; + setSelectionRange: (start: any, end: any, pos: any) => void; + refPopper: any; + pickerDisabled: import("vue").ComputedRef; + onSetPickerOption: (e: any) => void; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "focus" | "blur")[], "update:modelValue" | "change" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + name: unknown; + popperClass: unknown; + type: unknown; + clearable: boolean; + clearIcon: unknown; + editable: boolean; + prefixIcon: unknown; + readonly: boolean; + disabled: boolean; + placeholder: unknown; + popperOptions: unknown; + modelValue: unknown; + rangeSeparator: unknown; + isRange: boolean; + shortcuts: unknown; + arrowControl: boolean; + validateEvent: boolean; + unlinkPanels: boolean; +} & { + format?: unknown; + size?: unknown; + startPlaceholder?: unknown; + endPlaceholder?: unknown; + defaultValue?: unknown; + defaultTime?: unknown; + disabledHours?: unknown; + disabledMinutes?: unknown; + disabledSeconds?: unknown; + disabledDate?: unknown; + cellClassName?: unknown; +}>, { + name: unknown; + popperClass: unknown; + type: unknown; + clearable: boolean; + clearIcon: unknown; + editable: boolean; + prefixIcon: unknown; + readonly: boolean; + disabled: boolean; + placeholder: unknown; + popperOptions: unknown; + modelValue: unknown; + rangeSeparator: unknown; + isRange: boolean; + shortcuts: unknown; + arrowControl: boolean; + validateEvent: boolean; + unlinkPanels: boolean; +}>; +export default _default; diff --git a/src/components/common/MytTimePicker/src/common/props.d.ts b/src/components/common/MytTimePicker/src/common/props.d.ts new file mode 100644 index 00000000..94d4a1b6 --- /dev/null +++ b/src/components/common/MytTimePicker/src/common/props.d.ts @@ -0,0 +1,103 @@ +import type { PropType } from 'vue'; +import type { Options } from '@popperjs/core'; +export declare const defaultProps: { + name: { + type: (ArrayConstructor | StringConstructor)[]; + default: string; + }; + popperClass: { + type: StringConstructor; + default: string; + }; + format: { + type: StringConstructor; + }; + type: { + type: StringConstructor; + default: string; + }; + clearable: { + type: BooleanConstructor; + default: boolean; + }; + clearIcon: { + type: StringConstructor; + default: string; + }; + editable: { + type: BooleanConstructor; + default: boolean; + }; + prefixIcon: { + type: StringConstructor; + default: string; + }; + size: { + type: PropType; + validator: (val: string) => boolean; + }; + readonly: { + type: BooleanConstructor; + default: boolean; + }; + disabled: { + type: BooleanConstructor; + default: boolean; + }; + placeholder: { + type: StringConstructor; + default: string; + }; + popperOptions: { + type: PropType; + default: () => {}; + }; + modelValue: { + type: PropType; + default: string; + }; + rangeSeparator: { + type: StringConstructor; + default: string; + }; + startPlaceholder: StringConstructor; + endPlaceholder: StringConstructor; + defaultValue: { + type: PropType; + }; + defaultTime: { + type: PropType; + }; + isRange: { + type: BooleanConstructor; + default: boolean; + }; + disabledHours: { + type: FunctionConstructor; + }; + disabledMinutes: { + type: FunctionConstructor; + }; + disabledSeconds: { + type: FunctionConstructor; + }; + disabledDate: { + type: FunctionConstructor; + }; + cellClassName: { + type: FunctionConstructor; + }; + shortcuts: { + type: ArrayConstructor; + default: () => any[]; + }; + arrowControl: { + type: BooleanConstructor; + default: boolean; + }; + validateEvent: { + type: BooleanConstructor; + default: boolean; + }; + unlinkPanels: BooleanConstructor; +}; diff --git a/src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts b/src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts new file mode 100644 index 00000000..a34270c5 --- /dev/null +++ b/src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts @@ -0,0 +1,86 @@ +import { Ref, PropType } from 'vue'; +import { Dayjs } from 'dayjs'; +declare const _default: import("vue").DefineComponent<{ + role: { + type: StringConstructor; + required: true; + }; + spinnerDate: { + type: PropType; + required: true; + }; + showSeconds: { + type: BooleanConstructor; + default: boolean; + }; + arrowControl: BooleanConstructor; + amPmMode: { + type: StringConstructor; + default: string; + }; + disabledHours: { + type: FunctionConstructor; + }; + disabledMinutes: { + type: FunctionConstructor; + }; + disabledSeconds: { + type: FunctionConstructor; + }; +}, { + getRefId: (item: any) => string; + spinnerItems: import("vue").ComputedRef; + currentScrollbar: any; + hours: import("vue").ComputedRef; + minutes: import("vue").ComputedRef; + seconds: import("vue").ComputedRef; + hoursList: import("vue").ComputedRef; + minutesList: import("vue").ComputedRef; + arrowHourList: import("vue").ComputedRef; + arrowMinuteList: import("vue").ComputedRef; + arrowSecondList: import("vue").ComputedRef; + getAmPmFlag: (hour: any) => string; + emitSelectRange: (type: any) => void; + adjustCurrentSpinner: (type: any) => void; + typeItemHeight: (type: any) => any; + listHoursRef: Ref; + listMinutesRef: Ref; + listSecondsRef: Ref; + onIncreaseClick: () => void; + onDecreaseClick: () => void; + handleClick: (type: any, { value, disabled }: { + value: any; + disabled: any; + }) => void; + secondsList: import("vue").ComputedRef; + timePartsMap: import("vue").ComputedRef<{ + hours: import("vue").ComputedRef; + minutes: import("vue").ComputedRef; + seconds: import("vue").ComputedRef; + }>; + arrowListMap: import("vue").ComputedRef<{ + hours: import("vue").ComputedRef; + minutes: import("vue").ComputedRef; + seconds: import("vue").ComputedRef; + }>; + listMap: import("vue").ComputedRef<{ + hours: import("vue").ComputedRef; + minutes: import("vue").ComputedRef; + seconds: import("vue").ComputedRef; + }>; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "select-range" | "set-option")[], "change" | "select-range" | "set-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + role: unknown; + spinnerDate: unknown; + showSeconds: boolean; + arrowControl: boolean; + amPmMode: unknown; +} & { + disabledHours?: unknown; + disabledMinutes?: unknown; + disabledSeconds?: unknown; +}>, { + showSeconds: boolean; + arrowControl: boolean; + amPmMode: unknown; +}>; +export default _default; diff --git a/src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts b/src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts new file mode 100644 index 00000000..0edbdaed --- /dev/null +++ b/src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts @@ -0,0 +1,45 @@ +import { PropType } from 'vue'; +import dayjs, { Dayjs } from 'dayjs'; +declare const _default: import("vue").DefineComponent<{ + visible: BooleanConstructor; + actualVisible: { + type: BooleanConstructor; + default: any; + }; + datetimeRole: { + type: StringConstructor; + }; + parsedValue: { + type: PropType; + }; + format: { + type: StringConstructor; + default: string; + }; +}, { + transitionName: import("vue").ComputedRef<"" | "el-zoom-in-top">; + arrowControl: any; + onSetOption: (e: any) => void; + t: (...args: any[]) => string; + handleConfirm: (visible: boolean, first: any) => void; + handleChange: (_date: Dayjs) => void; + setSelectionRange: (start: any, end: any) => void; + amPmMode: import("vue").ComputedRef<"" | "A" | "a">; + showSeconds: import("vue").ComputedRef; + handleCancel: () => void; + disabledHours: any; + disabledMinutes: any; + disabledSeconds: any; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + visible: boolean; + actualVisible: boolean; + format: unknown; +} & { + datetimeRole?: unknown; + parsedValue?: unknown; +}>, { + visible: boolean; + actualVisible: boolean; + format: unknown; +}>; +export default _default; diff --git a/src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts b/src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts new file mode 100644 index 00000000..47ccced3 --- /dev/null +++ b/src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts @@ -0,0 +1,44 @@ +import { PropType } from 'vue'; +import dayjs from 'dayjs'; +declare const _default: import("vue").DefineComponent<{ + visible: BooleanConstructor; + actualVisible: BooleanConstructor; + parsedValue: { + type: PropType; + }; + format: { + type: StringConstructor; + default: string; + }; +}, { + arrowControl: any; + onSetOption: (e: any) => void; + setMaxSelectionRange: (start: any, end: any) => void; + setMinSelectionRange: (start: any, end: any) => void; + btnConfirmDisabled: import("vue").ComputedRef; + handleCancel: () => void; + handleConfirm: (visible?: boolean) => void; + t: (...args: any[]) => string; + showSeconds: import("vue").ComputedRef; + minDate: import("vue").ComputedRef; + maxDate: import("vue").ComputedRef; + amPmMode: import("vue").ComputedRef<"" | "A" | "a">; + handleMinChange: (date: any) => void; + handleMaxChange: (date: any) => void; + minSelectableRange: import("vue").Ref; + maxSelectableRange: import("vue").Ref; + disabledHours_: (role: any, compare: any) => any[]; + disabledMinutes_: (hour: any, role: any, compare: any) => any; + disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + visible: boolean; + actualVisible: boolean; + format: unknown; +} & { + parsedValue?: unknown; +}>, { + visible: boolean; + actualVisible: boolean; + format: unknown; +}>; +export default _default; diff --git a/src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts b/src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts new file mode 100644 index 00000000..ad126d3a --- /dev/null +++ b/src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts @@ -0,0 +1,155 @@ +import { Dayjs } from 'dayjs'; +export declare const getTimeLists: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => { + getHoursList: (role: any, compare?: any) => any[]; + getMinutesList: (hour: any, role: any, compare?: any) => any[]; + getSecondsList: (hour: any, minute: any, role: any, compare?: any) => any[]; +}; +export declare const getAvaliableArrs: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => { + getAvaliableHours: (role: any, compare?: any) => any; + getAvaliableMinutes: (hour: any, role: any, compare?: any) => any; + getAvaliableSeconds: (hour: any, minute: any, role: any, compare?: any) => any; +}; +export declare const useOldValue: (props: { + parsedValue?: string | Dayjs | Dayjs[]; + visible: boolean; +}) => import("vue").Ref Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): Dayjs; + }; + month: { + (): number; + (value: number): Dayjs; + }; + date: { + (): number; + (value: number): Dayjs; + }; + day: { + (): number; + (value: number): Dayjs; + }; + hour: { + (): number; + (value: number): Dayjs; + }; + minute: { + (): number; + (value: number): Dayjs; + }; + second: { + (): number; + (value: number): Dayjs; + }; + millisecond: { + (): number; + (value: number): Dayjs; + }; + set: (unit: import("dayjs").UnitType, value: number) => Dayjs; + get: (unit: import("dayjs").UnitType) => number; + add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs; + subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs; + startOf: (unit: import("dayjs").OpUnitType) => Dayjs; + endOf: (unit: import("dayjs").OpUnitType) => Dayjs; + format: (template?: string) => string; + diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): Dayjs; + }; + isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; +} | { + clone: () => Dayjs; + isValid: () => boolean; + year: { + (): number; + (value: number): Dayjs; + }; + month: { + (): number; + (value: number): Dayjs; + }; + date: { + (): number; + (value: number): Dayjs; + }; + day: { + (): number; + (value: number): Dayjs; + }; + hour: { + (): number; + (value: number): Dayjs; + }; + minute: { + (): number; + (value: number): Dayjs; + }; + second: { + (): number; + (value: number): Dayjs; + }; + millisecond: { + (): number; + (value: number): Dayjs; + }; + set: (unit: import("dayjs").UnitType, value: number) => Dayjs; + get: (unit: import("dayjs").UnitType) => number; + add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs; + subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs; + startOf: (unit: import("dayjs").OpUnitType) => Dayjs; + endOf: (unit: import("dayjs").OpUnitType) => Dayjs; + format: (template?: string) => string; + diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number; + valueOf: () => number; + unix: () => number; + daysInMonth: () => number; + toDate: () => Date; + toJSON: () => string; + toISOString: () => string; + toString: () => string; + utcOffset: () => number; + isBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + locale: { + (): string; + (preset: string | ILocale, object?: Partial): Dayjs; + }; + localeData: () => any; + week: { + (): number; + (value: number): Dayjs; + }; + weekYear: () => number; + dayOfYear: { + (): number; + (value: number): Dayjs; + }; + isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; + isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean; +}[]>; diff --git a/src/components/common/MytTimePicker/src/time-picker.d.ts b/src/components/common/MytTimePicker/src/time-picker.d.ts new file mode 100644 index 00000000..94543cb5 --- /dev/null +++ b/src/components/common/MytTimePicker/src/time-picker.d.ts @@ -0,0 +1,154 @@ +declare const _default: import("vue").DefineComponent<{ + isRange: { + type: BooleanConstructor; + default: boolean; + }; + name: { + type: (ArrayConstructor | StringConstructor)[]; + default: string; + }; + popperClass: { + type: StringConstructor; + default: string; + }; + format: { + type: StringConstructor; + }; + type: { + type: StringConstructor; + default: string; + }; + clearable: { + type: BooleanConstructor; + default: boolean; + }; + clearIcon: { + type: StringConstructor; + default: string; + }; + editable: { + type: BooleanConstructor; + default: boolean; + }; + prefixIcon: { + type: StringConstructor; + default: string; + }; + size: { + type: import("vue").PropType; + validator: (val: string) => boolean; + }; + readonly: { + type: BooleanConstructor; + default: boolean; + }; + disabled: { + type: BooleanConstructor; + default: boolean; + }; + placeholder: { + type: StringConstructor; + default: string; + }; + popperOptions: { + type: import("vue").PropType; + default: () => {}; + }; + modelValue: { + type: import("vue").PropType; + default: string; + }; + rangeSeparator: { + type: StringConstructor; + default: string; + }; + startPlaceholder: StringConstructor; + endPlaceholder: StringConstructor; + defaultValue: { + type: import("vue").PropType; + }; + defaultTime: { + type: import("vue").PropType; + }; + disabledHours: { + type: FunctionConstructor; + }; + disabledMinutes: { + type: FunctionConstructor; + }; + disabledSeconds: { + type: FunctionConstructor; + }; + disabledDate: { + type: FunctionConstructor; + }; + cellClassName: { + type: FunctionConstructor; + }; + shortcuts: { + type: ArrayConstructor; + default: () => any[]; + }; + arrowControl: { + type: BooleanConstructor; + default: boolean; + }; + validateEvent: { + type: BooleanConstructor; + default: boolean; + }; + unlinkPanels: BooleanConstructor; +}, () => import("vue").VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ + isRange: boolean; + name: unknown; + popperClass: unknown; + type: unknown; + clearable: boolean; + clearIcon: unknown; + editable: boolean; + prefixIcon: unknown; + readonly: boolean; + disabled: boolean; + placeholder: unknown; + popperOptions: unknown; + modelValue: unknown; + rangeSeparator: unknown; + shortcuts: unknown; + arrowControl: boolean; + validateEvent: boolean; + unlinkPanels: boolean; +} & { + format?: unknown; + size?: unknown; + startPlaceholder?: unknown; + endPlaceholder?: unknown; + defaultValue?: unknown; + defaultTime?: unknown; + disabledHours?: unknown; + disabledMinutes?: unknown; + disabledSeconds?: unknown; + disabledDate?: unknown; + cellClassName?: unknown; +}>, { + isRange: boolean; + name: unknown; + popperClass: unknown; + type: unknown; + clearable: boolean; + clearIcon: unknown; + editable: boolean; + prefixIcon: unknown; + readonly: boolean; + disabled: boolean; + placeholder: unknown; + popperOptions: unknown; + modelValue: unknown; + rangeSeparator: unknown; + shortcuts: unknown; + arrowControl: boolean; + validateEvent: boolean; + unlinkPanels: boolean; +}>; +export default _default; diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue index 837e549e..95605587 100644 --- a/src/components/rightBox/settings/RoleBox.vue +++ b/src/components/rightBox/settings/RoleBox.vue @@ -3,7 +3,7 @@
{{editRole.id ? $t('config.roles.editRole') : $t('config.roles.createRole')}}
- +
@@ -21,7 +21,7 @@