@ebiz/designer-components 0.1.0 → 0.1.2

package/src/components/TdesignCol.vue

@@ -1,102 +1,102 @@
-<template>
-    <t-col
-        :span="span"
-        :order="order"
-        :offset="offset"
-        :push="push"
-        :pull="pull"
-        :flex="flex"
-        :xs="xs"
-        :sm="sm"
-        :md="md"
-        :lg="lg"
-        :xl="xl"
-        :xxl="xxl"
-        :tag="tag"
-    >
-        <slot></slot>
-    </t-col>
-</template>
-
-<script>
-export default {
-    name: "EbizCol"
-}
-</script>
-
-<script setup>
-import { defineProps } from 'vue';
-import { Col as TCol } from 'tdesign-vue-next';
-
-defineProps({
-    // 栅格占位格数，0-24之间的数值
-    span: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 栅格顺序，用于在flex布局下调整顺序
-    order: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 栅格左侧的间隔格数，间隔内不可以有栅格
-    offset: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 栅格向右移动格数
-    push: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 栅格向左移动格数
-    pull: {
-        type: [String, Number],
-        default: undefined
-    },
-    // flex 布局属性
-    flex: {
-        type: [String, Number],
-        default: undefined
-    },
-    // <768px 响应式栅格，可为栅格数或一个包含栅格参数的对象
-    xs: {
-        type: [String, Number, Object],
-        default: undefined
-    },
-    // ≥768px 响应式栅格，可为栅格数或一个包含栅格参数的对象
-    sm: {
-        type: [String, Number, Object],
-        default: undefined
-    },
-    // ≥992px 响应式栅格，可为栅格数或一个包含栅格参数的对象
-    md: {
-        type: [String, Number, Object],
-        default: undefined
-    },
-    // ≥1200px 响应式栅格，可为栅格数或一个包含栅格参数的对象
-    lg: {
-        type: [String, Number, Object],
-        default: undefined
-    },
-    // ≥1400px 响应式栅格，可为栅格数或一个包含栅格参数的对象
-    xl: {
-        type: [String, Number, Object],
-        default: undefined
-    },
-    // ≥1880px 响应式栅格，可为栅格数或一个包含栅格参数的对象
-    xxl: {
-        type: [String, Number, Object],
-        default: undefined
-    },
-    // 自定义元素标签
-    tag: {
-        type: String,
-        default: 'div'
-    }
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-col
+        :span="span"
+        :order="order"
+        :offset="offset"
+        :push="push"
+        :pull="pull"
+        :flex="flex"
+        :xs="xs"
+        :sm="sm"
+        :md="md"
+        :lg="lg"
+        :xl="xl"
+        :xxl="xxl"
+        :tag="tag"
+    >
+        <slot></slot>
+    </t-col>
+</template>
+
+<script>
+export default {
+    name: "EbizCol"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Col as TCol } from 'tdesign-vue-next';
+
+defineProps({
+    // 栅格占位格数，0-24之间的数值
+    span: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 栅格顺序，用于在flex布局下调整顺序
+    order: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 栅格左侧的间隔格数，间隔内不可以有栅格
+    offset: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 栅格向右移动格数
+    push: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 栅格向左移动格数
+    pull: {
+        type: [String, Number],
+        default: undefined
+    },
+    // flex 布局属性
+    flex: {
+        type: [String, Number],
+        default: undefined
+    },
+    // <768px 响应式栅格，可为栅格数或一个包含栅格参数的对象
+    xs: {
+        type: [String, Number, Object],
+        default: undefined
+    },
+    // ≥768px 响应式栅格，可为栅格数或一个包含栅格参数的对象
+    sm: {
+        type: [String, Number, Object],
+        default: undefined
+    },
+    // ≥992px 响应式栅格，可为栅格数或一个包含栅格参数的对象
+    md: {
+        type: [String, Number, Object],
+        default: undefined
+    },
+    // ≥1200px 响应式栅格，可为栅格数或一个包含栅格参数的对象
+    lg: {
+        type: [String, Number, Object],
+        default: undefined
+    },
+    // ≥1400px 响应式栅格，可为栅格数或一个包含栅格参数的对象
+    xl: {
+        type: [String, Number, Object],
+        default: undefined
+    },
+    // ≥1880px 响应式栅格，可为栅格数或一个包含栅格参数的对象
+    xxl: {
+        type: [String, Number, Object],
+        default: undefined
+    },
+    // 自定义元素标签
+    tag: {
+        type: String,
+        default: 'div'
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignCollapse.vue

@@ -1,143 +1,143 @@
-<template>
-  <div class="tdesign-collapse-wrapper">
-    <t-collapse
-      v-model="innerValue"
-      :default-value="defaultValue"
-      :borderless="borderless"
-      :default-expand-all="defaultExpandAll"
-      :disabled="disabled"
-      :expand-icon="expandIcon"
-      :expand-icon-placement="expandIconPlacement"
-      :expand-mutex="expandMutex"
-      :expand-on-row-click="expandOnRowClick"
-      @change="handleChange"
-    >
-      <slot></slot>
-    </t-collapse>
-  </div>
-</template>
-
-<script>
-import { Collapse as TCollapse } from 'tdesign-vue-next';
-import { defineComponent, toRefs, computed, watch } from 'vue';
-
-export default defineComponent({
-  name: 'TdesignCollapse',
-  components: {
-    't-collapse': TCollapse,
-  },
-  props: {
-    /**
-     * 是否为无边框模式
-     */
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 默认是否展开全部
-     */
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 是否禁用面板展开/收起操作
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
-     */
-    expandIcon: {
-      type: [Boolean, Function],
-      default: true,
-    },
-    /**
-     * 展开图标的位置，左侧或右侧
-     */
-    expandIconPlacement: {
-      type: String,
-      default: 'left',
-      validator(val) {
-        return ['left', 'right'].includes(val);
-      },
-    },
-    /**
-     * 每个面板互斥展开，每次只展开一个面板
-     */
-    expandMutex: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 是否允许点击整行标题展开面板
-     */
-    expandOnRowClick: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * 展开的面板集合
-     */
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    /**
-     * 展开的面板集合，用于v-model双向绑定
-     */
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    /**
-     * 展开的面板集合，非受控属性
-     */
-    defaultValue: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['change', 'update:value', 'update:modelValue'],
-  setup(props, { emit }) {
-    const { value, modelValue } = toRefs(props);
-
-    // 处理v-model和传统value的计算属性
-    const innerValue = computed({
-      get() {
-        // 优先使用v-model绑定的值
-        return modelValue.value.length > 0 ? modelValue.value : value.value;
-      },
-      set(val) {
-        emit('update:value', val);
-        emit('update:modelValue', val);
-      },
-    });
-
-    // 监听外部值变化，同步到内部状态
-    watch([value, modelValue], () => {
-      // 这里不需要额外处理，因为计算属性会自动更新
-    });
-
-    // 切换面板时触发，返回变化的值
-    const handleChange = (val) => {
-      innerValue.value = val;
-      emit('change', val);
-    };
-
-    return {
-      innerValue,
-      handleChange,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.tdesign-collapse-wrapper {
-  width: 100%;
-}
+<template>
+  <div class="tdesign-collapse-wrapper">
+    <t-collapse
+      v-model="innerValue"
+      :default-value="defaultValue"
+      :borderless="borderless"
+      :default-expand-all="defaultExpandAll"
+      :disabled="disabled"
+      :expand-icon="expandIcon"
+      :expand-icon-placement="expandIconPlacement"
+      :expand-mutex="expandMutex"
+      :expand-on-row-click="expandOnRowClick"
+      @change="handleChange"
+    >
+      <slot></slot>
+    </t-collapse>
+  </div>
+</template>
+
+<script>
+import { Collapse as TCollapse } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'TdesignCollapse',
+  components: {
+    't-collapse': TCollapse,
+  },
+  props: {
+    /**
+     * 是否为无边框模式
+     */
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 默认是否展开全部
+     */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否禁用面板展开/收起操作
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
+     */
+    expandIcon: {
+      type: [Boolean, Function],
+      default: true,
+    },
+    /**
+     * 展开图标的位置，左侧或右侧
+     */
+    expandIconPlacement: {
+      type: String,
+      default: 'left',
+      validator(val) {
+        return ['left', 'right'].includes(val);
+      },
+    },
+    /**
+     * 每个面板互斥展开，每次只展开一个面板
+     */
+    expandMutex: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否允许点击整行标题展开面板
+     */
+    expandOnRowClick: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 展开的面板集合
+     */
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 展开的面板集合，用于v-model双向绑定
+     */
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 展开的面板集合，非受控属性
+     */
+    defaultValue: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['change', 'update:value', 'update:modelValue'],
+  setup(props, { emit }) {
+    const { value, modelValue } = toRefs(props);
+
+    // 处理v-model和传统value的计算属性
+    const innerValue = computed({
+      get() {
+        // 优先使用v-model绑定的值
+        return modelValue.value.length > 0 ? modelValue.value : value.value;
+      },
+      set(val) {
+        emit('update:value', val);
+        emit('update:modelValue', val);
+      },
+    });
+
+    // 监听外部值变化，同步到内部状态
+    watch([value, modelValue], () => {
+      // 这里不需要额外处理，因为计算属性会自动更新
+    });
+
+    // 切换面板时触发，返回变化的值
+    const handleChange = (val) => {
+      innerValue.value = val;
+      emit('change', val);
+    };
+
+    return {
+      innerValue,
+      handleChange,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.tdesign-collapse-wrapper {
+  width: 100%;
+}
 </style> 

package/src/components/TdesignCollapsePanel.vue

@@ -1,80 +1,80 @@
-<template>
-  <t-collapse-panel
-    :value="value"
-    :header="header"
-    :content="content"
-    :disabled="disabled"
-    :destroy-on-collapse="destroyOnCollapse"
-    :expand-icon="expandIcon"
-  >
-    <template v-if="$slots.header" #header>
-      <slot name="header"></slot>
-    </template>
-    <template v-if="$slots.default">
-      <slot></slot>
-    </template>
-    <template v-if="$slots.rightContent" #right-content>
-      <slot name="rightContent"></slot>
-    </template>
-  </t-collapse-panel>
-</template>
-
-<script>
-import { CollapsePanel as TCollapsePanel } from 'tdesign-vue-next';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TdesignCollapsePanel',
-  components: {
-    't-collapse-panel': TCollapsePanel,
-  },
-  props: {
-    /**
-     * 面板唯一标识
-     */
-    value: {
-      type: [String, Number],
-      required: true,
-    },
-    /**
-     * 面板头内容
-     */
-    header: {
-      type: [String, Function],
-      default: '',
-    },
-    /**
-     * 面板内容
-     */
-    content: {
-      type: [String, Function],
-      default: '',
-    },
-    /**
-     * 是否禁用面板展开/收起操作
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 折叠时是否销毁面板内容
-     */
-    destroyOnCollapse: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
-     */
-    expandIcon: {
-      type: [Boolean, Function],
-      default: undefined,
-    },
-  },
-});
-</script>
-
-<style scoped>
-/* 可根据需要添加自定义样式，使panel更美观 */
+<template>
+  <t-collapse-panel
+    :value="value"
+    :header="header"
+    :content="content"
+    :disabled="disabled"
+    :destroy-on-collapse="destroyOnCollapse"
+    :expand-icon="expandIcon"
+  >
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+    <template v-if="$slots.rightContent" #right-content>
+      <slot name="rightContent"></slot>
+    </template>
+  </t-collapse-panel>
+</template>
+
+<script>
+import { CollapsePanel as TCollapsePanel } from 'tdesign-vue-next';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'TdesignCollapsePanel',
+  components: {
+    't-collapse-panel': TCollapsePanel,
+  },
+  props: {
+    /**
+     * 面板唯一标识
+     */
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    /**
+     * 面板头内容
+     */
+    header: {
+      type: [String, Function],
+      default: '',
+    },
+    /**
+     * 面板内容
+     */
+    content: {
+      type: [String, Function],
+      default: '',
+    },
+    /**
+     * 是否禁用面板展开/收起操作
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 折叠时是否销毁面板内容
+     */
+    destroyOnCollapse: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
+     */
+    expandIcon: {
+      type: [Boolean, Function],
+      default: undefined,
+    },
+  },
+});
+</script>
+
+<style scoped>
+/* 可根据需要添加自定义样式，使panel更美观 */
 </style>