@a2simcode/ui 0.0.55 → 0.0.57

package/docs/examples/dynamic-layer/form.vue

@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <j-button label="打开表单组件" @click="openFormLayer" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-
-// 表单组件示例
-const FormComponent = {
-  setup(props: any, { expose }: any) {
-    const formData = ref({
-      name: '',
-      email: '',
-    })
-
-    // 提供给外层调用的方法
-    const open = (param: any) => {
-      console.log('接收参数:', param)
-      return Promise.resolve()
-    }
-
-    const ok = () => {
-      if (!formData.value.name) {
-        alert('请输入姓名')
-        return Promise.resolve(false)
-      }
-      console.log('提交数据:', formData.value)
-      return Promise.resolve(true)
-    }
-
-    expose({ open, ok })
-
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('div', { style: 'margin-bottom: 16px' }, [
-          h('label', '姓名: '),
-          h('input', {
-            value: formData.value.name,
-            onInput: (e: any) => (formData.value.name = e.target.value),
-            style: 'margin-left: 8px; padding: 4px 8px',
-          }),
-        ]),
-        h('div', [
-          h('label', '邮箱: '),
-          h('input', {
-            value: formData.value.email,
-            onInput: (e: any) => (formData.value.email = e.target.value),
-            style: 'margin-left: 8px; padding: 4px 8px',
-          }),
-        ]),
-      ])
-  },
-}
-
-const openFormLayer = () => {
-  layerRef.value.open({
-    title: '表单示例',
-    name: FormComponent,
-    type: 'modal',
-    width: 500,
-    height: 300,
-    param: { id: 123 },
-    afterOk: (data: any) => {
-      console.log('保存成功回调:', data)
-    },
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开表单组件" @click="openFormLayer" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+
+// 表单组件示例
+const FormComponent = {
+  setup(props: any, { expose }: any) {
+    const formData = ref({
+      name: '',
+      email: '',
+    })
+
+    // 提供给外层调用的方法
+    const open = (param: any) => {
+      console.log('接收参数:', param)
+      return Promise.resolve()
+    }
+
+    const ok = () => {
+      if (!formData.value.name) {
+        alert('请输入姓名')
+        return Promise.resolve(false)
+      }
+      console.log('提交数据:', formData.value)
+      return Promise.resolve(true)
+    }
+
+    expose({ open, ok })
+
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('div', { style: 'margin-bottom: 16px' }, [
+          h('label', '姓名: '),
+          h('input', {
+            value: formData.value.name,
+            onInput: (e: any) => (formData.value.name = e.target.value),
+            style: 'margin-left: 8px; padding: 4px 8px',
+          }),
+        ]),
+        h('div', [
+          h('label', '邮箱: '),
+          h('input', {
+            value: formData.value.email,
+            onInput: (e: any) => (formData.value.email = e.target.value),
+            style: 'margin-left: 8px; padding: 4px 8px',
+          }),
+        ]),
+      ])
+  },
+}
+
+const openFormLayer = () => {
+  layerRef.value.open({
+    title: '表单示例',
+    name: FormComponent,
+    type: 'modal',
+    width: 500,
+    height: 300,
+    param: { id: 123 },
+    afterOk: (data: any) => {
+      console.log('保存成功回调:', data)
+    },
+  })
+}
+</script>

package/docs/examples/dynamic-layer/steps.vue

@@ -1,52 +1,52 @@
-<template>
-  <div>
-    <j-button label="打开步骤弹窗" @click="openStepLayer" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-const currentStep = ref(0)
-
-const StepComponent = {
-  setup(props: any, { expose }: any) {
-    const getConfig = () => {
-      return {
-        isStep: true,
-        steps: ['基本信息', '详细信息', '确认提交'],
-      }
-    }
-
-    const validateSteps = (stepActive: number) => {
-      console.log('校验步骤:', stepActive)
-      if (stepActive === 0 && !confirm('是否继续下一步？')) {
-        return Promise.resolve(false)
-      }
-      currentStep.value = stepActive
-      return Promise.resolve(true)
-    }
-
-    expose({ getConfig, validateSteps })
-
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('h3', `当前步骤: ${currentStep.value + 1}`),
-        h('p', '步骤条示例'),
-      ])
-  },
-}
-
-const openStepLayer = () => {
-  currentStep.value = 0
-  layerRef.value.open({
-    title: '步骤弹窗',
-    name: StepComponent,
-    type: 'modal',
-    width: 700,
-    height: 400,
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开步骤弹窗" @click="openStepLayer" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+const currentStep = ref(0)
+
+const StepComponent = {
+  setup(props: any, { expose }: any) {
+    const getConfig = () => {
+      return {
+        isStep: true,
+        steps: ['基本信息', '详细信息', '确认提交'],
+      }
+    }
+
+    const validateSteps = (stepActive: number) => {
+      console.log('校验步骤:', stepActive)
+      if (stepActive === 0 && !confirm('是否继续下一步？')) {
+        return Promise.resolve(false)
+      }
+      currentStep.value = stepActive
+      return Promise.resolve(true)
+    }
+
+    expose({ getConfig, validateSteps })
+
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('h3', `当前步骤: ${currentStep.value + 1}`),
+        h('p', '步骤条示例'),
+      ])
+  },
+}
+
+const openStepLayer = () => {
+  currentStep.value = 0
+  layerRef.value.open({
+    title: '步骤弹窗',
+    name: StepComponent,
+    type: 'modal',
+    width: 700,
+    height: 400,
+  })
+}
+</script>

package/docs/examples/dynamic-layer/types.vue

@@ -1,40 +1,40 @@
-<template>
-  <div>
-    <j-button label="打开抽屉" style="margin-right: 8px" @click="openDrawer" />
-    <j-button label="打开全屏" @click="openFull" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-
-const ContentComponent = {
-  setup() {
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('h3', '不同类型的弹层'),
-        h('p', '支持 modal、drawer、full 三种类型'),
-      ])
-  },
-}
-
-const openDrawer = () => {
-  layerRef.value.open({
-    title: '抽屉模式',
-    name: ContentComponent,
-    type: 'drawer',
-    width: 600,
-  })
-}
-
-const openFull = () => {
-  layerRef.value.open({
-    title: '全屏模式',
-    name: ContentComponent,
-    type: 'full',
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开抽屉" style="margin-right: 8px" @click="openDrawer" />
+    <j-button label="打开全屏" @click="openFull" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+
+const ContentComponent = {
+  setup() {
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('h3', '不同类型的弹层'),
+        h('p', '支持 modal、drawer、full 三种类型'),
+      ])
+  },
+}
+
+const openDrawer = () => {
+  layerRef.value.open({
+    title: '抽屉模式',
+    name: ContentComponent,
+    type: 'drawer',
+    width: 600,
+  })
+}
+
+const openFull = () => {
+  layerRef.value.open({
+    title: '全屏模式',
+    name: ContentComponent,
+    type: 'full',
+  })
+}
+</script>

package/docs/examples/echarts/basic.vue

@@ -1,31 +1,31 @@
-<template>
-  <div style="width: 100%; height: 400px">
-    <j-echarts :option="option" @click="handleClick" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const option = ref({
-  title: {
-    text: 'ECharts 基础示例',
-  },
-  tooltip: {},
-  xAxis: {
-    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-  },
-  yAxis: {},
-  series: [
-    {
-      name: '销量',
-      type: 'bar',
-      data: [5, 20, 36, 10, 10, 20],
-    },
-  ],
-})
-
-const handleClick = (params: any) => {
-  console.log('点击了图表', params)
-}
-</script>
+<template>
+  <div style="width: 100%; height: 400px">
+    <j-echarts :option="option" @click="handleClick" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: 'ECharts 基础示例',
+  },
+  tooltip: {},
+  xAxis: {
+    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: '销量',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+})
+
+const handleClick = (params: any) => {
+  console.log('点击了图表', params)
+}
+</script>

package/docs/examples/echarts/dynamic.vue

@@ -1,43 +1,43 @@
-<template>
-  <div>
-    <j-button label="更新数据" style="margin-bottom: 16px" @click="updateData" />
-    <div style="width: 100%; height: 400px">
-      <j-echarts :option="option" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const option = ref({
-  title: {
-    text: '动态数据更新',
-  },
-  tooltip: {},
-  xAxis: {
-    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-  },
-  yAxis: {},
-  series: [
-    {
-      name: '销量',
-      type: 'bar',
-      data: [5, 20, 36, 10, 10, 20],
-    },
-  ],
-})
-
-const updateData = () => {
-  option.value = {
-    ...option.value,
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: option.value.series[0].data.map(() => Math.floor(Math.random() * 100)),
-      },
-    ],
-  }
-}
-</script>
+<template>
+  <div>
+    <j-button label="更新数据" style="margin-bottom: 16px" @click="updateData" />
+    <div style="width: 100%; height: 400px">
+      <j-echarts :option="option" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: '动态数据更新',
+  },
+  tooltip: {},
+  xAxis: {
+    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: '销量',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+})
+
+const updateData = () => {
+  option.value = {
+    ...option.value,
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: option.value.series[0].data.map(() => Math.floor(Math.random() * 100)),
+      },
+    ],
+  }
+}
+</script>

package/docs/examples/echarts/line.vue

@@ -1,46 +1,46 @@
-<template>
-  <div style="width: 100%; height: 400px">
-    <j-echarts :option="option" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const option = ref({
-  title: {
-    text: '折线图示例',
-  },
-  tooltip: {
-    trigger: 'axis',
-  },
-  legend: {
-    data: ['邮件营销', '联盟广告', '视频广告'],
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-  },
-  yAxis: {
-    type: 'value',
-  },
-  series: [
-    {
-      name: '邮件营销',
-      type: 'line',
-      data: [120, 132, 101, 134, 90, 230, 210],
-    },
-    {
-      name: '联盟广告',
-      type: 'line',
-      data: [220, 182, 191, 234, 290, 330, 310],
-    },
-    {
-      name: '视频广告',
-      type: 'line',
-      data: [150, 232, 201, 154, 190, 330, 410],
-    },
-  ],
-})
-</script>
+<template>
+  <div style="width: 100%; height: 400px">
+    <j-echarts :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: '折线图示例',
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  legend: {
+    data: ['邮件营销', '联盟广告', '视频广告'],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      name: '邮件营销',
+      type: 'line',
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      name: '联盟广告',
+      type: 'line',
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+    {
+      name: '视频广告',
+      type: 'line',
+      data: [150, 232, 201, 154, 190, 330, 410],
+    },
+  ],
+})
+</script>

package/docs/examples/echarts/pie.vue

@@ -1,44 +1,44 @@
-<template>
-  <div style="width: 100%; height: 400px">
-    <j-echarts :option="option" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const option = ref({
-  title: {
-    text: '饼图示例',
-    left: 'center',
-  },
-  tooltip: {
-    trigger: 'item',
-  },
-  legend: {
-    orient: 'vertical',
-    left: 'left',
-  },
-  series: [
-    {
-      name: '访问来源',
-      type: 'pie',
-      radius: '50%',
-      data: [
-        { value: 1048, name: '搜索引擎' },
-        { value: 735, name: '直接访问' },
-        { value: 580, name: '邮件营销' },
-        { value: 484, name: '联盟广告' },
-        { value: 300, name: '视频广告' },
-      ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
-        },
-      },
-    },
-  ],
-})
-</script>
+<template>
+  <div style="width: 100%; height: 400px">
+    <j-echarts :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: '饼图示例',
+    left: 'center',
+  },
+  tooltip: {
+    trigger: 'item',
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+  },
+  series: [
+    {
+      name: '访问来源',
+      type: 'pie',
+      radius: '50%',
+      data: [
+        { value: 1048, name: '搜索引擎' },
+        { value: 735, name: '直接访问' },
+        { value: 580, name: '邮件营销' },
+        { value: 484, name: '联盟广告' },
+        { value: 300, name: '视频广告' },
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    },
+  ],
+})
+</script>