feat: implements element-ui format attribute in the picker-option move to top-level (#87)

Author: Jiannan-dev

vue-transformations/__test__/time-picker-format-attribute.spec.ts

@@ -0,0 +1,9 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'tine-picker-format-attribute',
+  'time-picker-format-attribute',
+  'time-picker-format-attribute',
+  'vue',
+  'vue'
+)

vue-transformations/__testfixtures__/time-picker-format-attribute/time-picker-format-attribute.input.vue

@@ -0,0 +1,9 @@
+<template>
+  <el-time-picker
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00',
+      format:'HH:mm:ss'
+    }"
+    placeholder='任意时间点'>
+  </el-time-picker>
+</template>

vue-transformations/__testfixtures__/time-picker-format-attribute/time-picker-format-attribute.output.vue

@@ -0,0 +1,9 @@
+<template>
+  <el-time-picker
+    format='HH:mm:ss' :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00',
+      format:'HH:mm:ss'
+    }"
+    placeholder='任意时间点'>
+  </el-time-picker>
+</template>

vue-transformations/element-ui/time-picker-format-attribute.ts

@@ -0,0 +1,50 @@
+import { Node, VAttribute } from 'vue-eslint-parser/ast/nodes'
+import * as OperationUtil from '../../src/operationUtils'
+import type { Operation } from '../../src/operationUtils'
+import {
+  default as wrap,
+  createTransformAST
+} from '../../src/wrapVueTransformation'
+
+export const transformAST = createTransformAST(
+  nodeFilter,
+  fix,
+  'time-picker-format-attribute'
+)
+export default wrap(transformAST)
+
+function nodeFilter(node: Node): boolean {
+  const pre = (item: VAttribute) =>
+    // @ts-ignore
+    item.key.name === 'bind' && item.key.argument?.name === 'format'
+  return (
+    node.type === 'VAttribute' &&
+    node.key.type === 'VDirectiveKey' &&
+    node.key.name.name === 'bind' &&
+    // @ts-ignore
+    node.key.argument.name === 'picker-options' &&
+    node.value?.type === 'VExpressionContainer' &&
+    node.value.expression?.type === 'ObjectExpression' &&
+    // @ts-ignore
+    node.value.expression.properties.filter(item => item.key.name === 'format')
+      .length > 0 &&
+    node.parent.parent.type === 'VElement' &&
+    node.parent.parent.name === 'el-time-picker' &&
+    node.parent.attributes.filter(pre).length === 0
+  )
+}
+
+function fix(node: VAttribute): Operation[] {
+  let fixOperations: Operation[] = []
+  //  get format attribute in the time-picker
+  // @ts-ignore
+  let formatValue = node.value.expression.properties.filter(
+    // @ts-ignore
+    item => item.key.name === 'format'
+  )[0].value.value
+  //  add format attribute to el-time-picker tag
+  fixOperations.push(
+    OperationUtil.insertTextBefore(node, `format='${formatValue}' `)
+  )
+  return fixOperations
+}

vue-transformations/index.ts

@@ -21,6 +21,7 @@ const transformationMap: {
   'router-link-event-tag': require('./router-link-event-tag'),
   'router-link-exact': require('./router-link-exact'),
   'router-view-keep-alive-transition': require('./router-view-keep-alive-transition'),
+  'time-picker-format-attribute':require('./element-ui/time-picker-format-attribute'),
 
   // manual (must be used at the end of list)
   'manual-remove-keycode': require('./manual/manual-remove-keycode')