@ebiz/designer-components 0.1.133 → 0.1.136

package/src/utils/vue-sfc-validator.js

@@ -1,155 +1,155 @@
-/**
- * Copyright (c) 2023 - present TinyEngine Authors.
- * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-import { parse as parseSFC, compileScript, compileStyle, compileTemplate } from '@vue/compiler-sfc'
-import { generateCodeFrame } from '@vue/shared'
-import { randomString } from '.'
-
-/**
- * 使用 vue-eslint-parser，校验 vue sfc 是否有效
- * @param {string} code 源码
- * @returns {Error[]} 校验出的报错信息
- */
-export function validateByParse(code) {
-  const { parse: parseVue } = require('vue-eslint-parser')
-  let errors = []
-
-  try {
-    const { templateBody, errors: parseErrors } = parseVue(code, {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      ecmaFeatures: {
-        jsx: true
-      }
-    })
-    errors = templateBody?.errors || parseErrors || []
-  } catch (error) {
-    // 此处可捕获到 SyntaxError，如：嵌套双引号未转义的问题
-    errors.push(unify(error))
-  }
-
-  return errors.map(({ message, lineNumber: line, column }) => {
-    if (line && column) {
-      return locateErrorMessage(code, { message, loc: { start: { line, column } } })
-    }
-
-    return { message }
-  })
-}
-
-/**
- * 使用 @vue/compiler-sfc， 校验 vue sfc 是否有效
- * @param {string} filename 文件名称
- * @param {string} code 源码
- * @returns {Error[]} 校验出的错误信息
- */
-export function validateByCompile(filename, code) {
-  // validate via parse
-  const { errors, descriptor } = parseSFC(code, {
-    filename,
-    sourceMap: false
-  })
-
-  if (errors.length) {
-    return errors.map((error) => locateErrorMessage(code, error))
-  }
-
-  const id = randomString()
-
-  // validate via compile script
-  let bindingMetadata
-  try {
-    const scriptResult = compileScript(descriptor, { id })
-    bindingMetadata = scriptResult.bindings
-  } catch (error) {
-    // error 可能的类型 string | ParseError (@babel/parser) | CompilerError (compileScript 使用 inlineTemplate 模式时)
-    const scriptError = unify(error)
-
-    // 如果是 ParseError 类型，转换为 locateErrorMessage 可接受的 CompilerError 类型传入
-    if (!scriptError?.loc?.start && scriptError?.loc?.line) {
-      // 只截取原 message 的第一行，后面行数可能已经包含错误的定位信息，避免拼接重复
-      const message = scriptError.message.match(/.*/)[0]
-      const { line, column } = scriptError.loc
-
-      // compileScript 内部抛错误时，可能已定位编译报错信息，但报错所在的行可能有大量字符，此处精简一下
-      return [locateErrorMessage(code, { message, loc: { start: { line, column } } })]
-    }
-
-    return [{ message: scriptError.message }]
-  }
-
-  // validate via compile template
-  const { styles, template, slotted } = descriptor
-  const scoped = styles.some((s) => s.scoped)
-
-  const templateResult = compileTemplate({
-    source: template.content,
-    filename,
-    id,
-    scoped,
-    slotted,
-    compilerOptions: { bindingMetadata }
-  })
-
-  if (templateResult.errors.length) {
-    return templateResult.errors.map(unify).map((error) => locateErrorMessage(code, error))
-  }
-
-  // validate via compile style
-  // 目前暂时没有预处理器，如：less
-  const stylesResult = styles.map(({ content, module }) =>
-    compileStyle({ source: content, filename, id, scoped, modules: Boolean(module) })
-  )
-  const errorsInStyles = stylesResult
-    .filter(({ errors }) => errors.length)
-    .map(({ errors }) => errors)
-    .flat()
-
-  return errorsInStyles
-}
-
-/**
- * 统一报错的格式
- * @param {(string | Error)} error 原始错误信息
- * @returns {Error} 统一格式后的错误信息
- */
-function unify(error) {
-  if (typeof error === 'string') {
-    return { message: error }
-  }
-
-  return error
-}
-
-/**
- * 定位报错信息，如果包含报错位置，则追加到 message 中输出
- * @param {string} originalSource 原始代码
- * @param {(Error | CompilerError)} error 错误信息
- * @returns {{message: string}} 可能包含报错位置的错误信息
- */
-function locateErrorMessage(originalSource, error) {
-  let { loc, message } = error
-
-  if (loc?.start) {
-    const { line, column } = loc.start
-    const errorLineCode = originalSource.split(/\r?\n/)[line - 1]
-
-    // 源码字符串未经格式化，报错所在的行可能有大量字符，截取报错位置附近范围的错误信息，比如：前后 50 字符内
-    const SCOPE = 50
-    const scopeStartIndex = Math.max(0, column - SCOPE)
-    const scopeCode = errorLineCode.slice(scopeStartIndex, column + SCOPE)
-
-    message = `${message} \n ${generateCodeFrame(scopeCode, column - scopeStartIndex)}`
-  }
-
-  return { message }
-}
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { parse as parseSFC, compileScript, compileStyle, compileTemplate } from '@vue/compiler-sfc'
+import { generateCodeFrame } from '@vue/shared'
+import { randomString } from '.'
+
+/**
+ * 使用 vue-eslint-parser，校验 vue sfc 是否有效
+ * @param {string} code 源码
+ * @returns {Error[]} 校验出的报错信息
+ */
+export function validateByParse(code) {
+  const { parse: parseVue } = require('vue-eslint-parser')
+  let errors = []
+
+  try {
+    const { templateBody, errors: parseErrors } = parseVue(code, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true
+      }
+    })
+    errors = templateBody?.errors || parseErrors || []
+  } catch (error) {
+    // 此处可捕获到 SyntaxError，如：嵌套双引号未转义的问题
+    errors.push(unify(error))
+  }
+
+  return errors.map(({ message, lineNumber: line, column }) => {
+    if (line && column) {
+      return locateErrorMessage(code, { message, loc: { start: { line, column } } })
+    }
+
+    return { message }
+  })
+}
+
+/**
+ * 使用 @vue/compiler-sfc， 校验 vue sfc 是否有效
+ * @param {string} filename 文件名称
+ * @param {string} code 源码
+ * @returns {Error[]} 校验出的错误信息
+ */
+export function validateByCompile(filename, code) {
+  // validate via parse
+  const { errors, descriptor } = parseSFC(code, {
+    filename,
+    sourceMap: false
+  })
+
+  if (errors.length) {
+    return errors.map((error) => locateErrorMessage(code, error))
+  }
+
+  const id = randomString()
+
+  // validate via compile script
+  let bindingMetadata
+  try {
+    const scriptResult = compileScript(descriptor, { id })
+    bindingMetadata = scriptResult.bindings
+  } catch (error) {
+    // error 可能的类型 string | ParseError (@babel/parser) | CompilerError (compileScript 使用 inlineTemplate 模式时)
+    const scriptError = unify(error)
+
+    // 如果是 ParseError 类型，转换为 locateErrorMessage 可接受的 CompilerError 类型传入
+    if (!scriptError?.loc?.start && scriptError?.loc?.line) {
+      // 只截取原 message 的第一行，后面行数可能已经包含错误的定位信息，避免拼接重复
+      const message = scriptError.message.match(/.*/)[0]
+      const { line, column } = scriptError.loc
+
+      // compileScript 内部抛错误时，可能已定位编译报错信息，但报错所在的行可能有大量字符，此处精简一下
+      return [locateErrorMessage(code, { message, loc: { start: { line, column } } })]
+    }
+
+    return [{ message: scriptError.message }]
+  }
+
+  // validate via compile template
+  const { styles, template, slotted } = descriptor
+  const scoped = styles.some((s) => s.scoped)
+
+  const templateResult = compileTemplate({
+    source: template.content,
+    filename,
+    id,
+    scoped,
+    slotted,
+    compilerOptions: { bindingMetadata }
+  })
+
+  if (templateResult.errors.length) {
+    return templateResult.errors.map(unify).map((error) => locateErrorMessage(code, error))
+  }
+
+  // validate via compile style
+  // 目前暂时没有预处理器，如：less
+  const stylesResult = styles.map(({ content, module }) =>
+    compileStyle({ source: content, filename, id, scoped, modules: Boolean(module) })
+  )
+  const errorsInStyles = stylesResult
+    .filter(({ errors }) => errors.length)
+    .map(({ errors }) => errors)
+    .flat()
+
+  return errorsInStyles
+}
+
+/**
+ * 统一报错的格式
+ * @param {(string | Error)} error 原始错误信息
+ * @returns {Error} 统一格式后的错误信息
+ */
+function unify(error) {
+  if (typeof error === 'string') {
+    return { message: error }
+  }
+
+  return error
+}
+
+/**
+ * 定位报错信息，如果包含报错位置，则追加到 message 中输出
+ * @param {string} originalSource 原始代码
+ * @param {(Error | CompilerError)} error 错误信息
+ * @returns {{message: string}} 可能包含报错位置的错误信息
+ */
+function locateErrorMessage(originalSource, error) {
+  let { loc, message } = error
+
+  if (loc?.start) {
+    const { line, column } = loc.start
+    const errorLineCode = originalSource.split(/\r?\n/)[line - 1]
+
+    // 源码字符串未经格式化，报错所在的行可能有大量字符，截取报错位置附近范围的错误信息，比如：前后 50 字符内
+    const SCOPE = 50
+    const scopeStartIndex = Math.max(0, column - SCOPE)
+    const scopeCode = errorLineCode.slice(scopeStartIndex, column + SCOPE)
+
+    message = `${message} \n ${generateCodeFrame(scopeCode, column - scopeStartIndex)}`
+  }
+
+  return { message }
+}

package/src/views/Button.vue

@@ -1,24 +1,24 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
-  </div>
-</template>
-
-<script>
-import { EbizButton } from '@/index.js'
-
-export default {
-  name: 'ButtonDemo',
-  components: {
-    EbizButton
-  },
-  methods: {
-    onPrepare() {
-      
-    }
-  }
-}
-</script>
-
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
+  </div>
+</template>
+
+<script>
+import { EbizButton } from '@/index.js'
+
+export default {
+  name: 'ButtonDemo',
+  components: {
+    EbizButton
+  },
+  methods: {
+    onPrepare() {
+      
+    }
+  }
+}
+</script>
+
 <style scoped></style>

package/src/views/CheckboxDemo.vue

@@ -1,105 +1,105 @@
-<template>
-  <div class="checkbox-demo">
-    <h2>多选框组件示例</h2>
-
-    <h3>基础多选框</h3>
-    <div class="demo-section">
-      <EbizCheckbox>未选中项</EbizCheckbox>
-      <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
-      <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
-      <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
-    </div>
-
-    <h3>半选状态</h3>
-    <div class="demo-section">
-      <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
-    </div>
-
-    <h3>多选框组</h3>
-    <div class="demo-section">
-      <p>选中值：{{ groupValue }}</p>
-      <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
-    </div>
-
-    <h3>全选功能</h3>
-    <div class="demo-section">
-      <p>选中值：{{ allCheckValue }}</p>
-      <EbizCheckboxGroup v-model="allCheckValue">
-        <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
-        <EbizCheckbox value="1">选项一</EbizCheckbox>
-        <EbizCheckbox value="2">选项二</EbizCheckbox>
-        <EbizCheckbox value="3">选项三</EbizCheckbox>
-      </EbizCheckboxGroup>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CheckboxDemo"
-}
-</script>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
-
-// 单个多选框状态
-const checkbox1 = ref(true);
-const checkboxDisabled = ref(true);
-
-// 多选框组的值
-const groupValue = ref(['option1']);
-
-// 多选框组的配置选项
-const options = [
-  { label: '选项一', value: 'option1' },
-  { label: '选项二', value: 'option2' },
-  { label: '选项三', value: 'option3', disabled: true }
-];
-
-// 多选框组的值变化事件
-const onGroupChange = (value, context) => {
-  console.log('选中值变化:', value);
-  console.log('上下文信息:', context);
-};
-
-// 全选功能的值
-const allCheckValue = ref(['1']);
-
-// 全选状态变化事件
-const onCheckAllChange = (checked) => {
-  if (checked) {
-    allCheckValue.value = ['1', '2', '3'];
-  } else {
-    allCheckValue.value = [];
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.checkbox-demo {
-  padding: 20px;
-
-  h2 {
-    margin-bottom: 20px;
-    font-size: 24px;
-  }
-
-  h3 {
-    margin: 20px 0 10px;
-    font-size: 18px;
-  }
-
-  .demo-section {
-    padding: 16px;
-    margin-bottom: 16px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-
-    .t-checkbox {
-      margin-right: 16px;
-    }
-  }
-}
+<template>
+  <div class="checkbox-demo">
+    <h2>多选框组件示例</h2>
+
+    <h3>基础多选框</h3>
+    <div class="demo-section">
+      <EbizCheckbox>未选中项</EbizCheckbox>
+      <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
+      <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
+      <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
+    </div>
+
+    <h3>半选状态</h3>
+    <div class="demo-section">
+      <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
+    </div>
+
+    <h3>多选框组</h3>
+    <div class="demo-section">
+      <p>选中值：{{ groupValue }}</p>
+      <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
+    </div>
+
+    <h3>全选功能</h3>
+    <div class="demo-section">
+      <p>选中值：{{ allCheckValue }}</p>
+      <EbizCheckboxGroup v-model="allCheckValue">
+        <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
+        <EbizCheckbox value="1">选项一</EbizCheckbox>
+        <EbizCheckbox value="2">选项二</EbizCheckbox>
+        <EbizCheckbox value="3">选项三</EbizCheckbox>
+      </EbizCheckboxGroup>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckboxDemo"
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
+
+// 单个多选框状态
+const checkbox1 = ref(true);
+const checkboxDisabled = ref(true);
+
+// 多选框组的值
+const groupValue = ref(['option1']);
+
+// 多选框组的配置选项
+const options = [
+  { label: '选项一', value: 'option1' },
+  { label: '选项二', value: 'option2' },
+  { label: '选项三', value: 'option3', disabled: true }
+];
+
+// 多选框组的值变化事件
+const onGroupChange = (value, context) => {
+  console.log('选中值变化:', value);
+  console.log('上下文信息:', context);
+};
+
+// 全选功能的值
+const allCheckValue = ref(['1']);
+
+// 全选状态变化事件
+const onCheckAllChange = (checked) => {
+  if (checked) {
+    allCheckValue.value = ['1', '2', '3'];
+  } else {
+    allCheckValue.value = [];
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.checkbox-demo {
+  padding: 20px;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+
+  h3 {
+    margin: 20px 0 10px;
+    font-size: 18px;
+  }
+
+  .demo-section {
+    padding: 16px;
+    margin-bottom: 16px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    .t-checkbox {
+      margin-right: 16px;
+    }
+  }
+}
 </style> 

package/src/views/DataContainer.vue

@@ -1,20 +1,20 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <ebiz-data-container />
-  </div>
-</template>
-
-<script>
-import { EbizDataContainer } from '@/index.js'
-
-export default {
-  name: 'DataContainerDemo',
-  components: {
-    EbizDataContainer
-  }
-}
-</script>
-
-<style scoped>
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-data-container />
+  </div>
+</template>
+
+<script>
+import { EbizDataContainer } from '@/index.js'
+
+export default {
+  name: 'DataContainerDemo',
+  components: {
+    EbizDataContainer
+  }
+}
+</script>
+
+<style scoped>
 </style>