# Bug report 🐞

[khalidy6]

Bug report 🐞

Version & Environment

@varlet/[email protected]

Expectation

row改成<script setup lang="ts">模式
把声明写在packages/varlet-ui/src/row/props.ts
如下

// import { type PropType } from 'vue';
// import { defineListenerProp, ListenerProp } from '../utils/components';
import { ListenerProp } from '../utils/components';

export type RowJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'start' | 'end';

export type RowAlign = 'flex-start' | 'center' | 'flex-end' | 'start' | 'end';

export type RowGutter = number | string | [number | string, number | string];

export interface rowProps {
  gutter?: RowGutter;
  justify?: RowJustify;
  align?: RowAlign;
  onClick?: ListenerProp<(e: Event) => void>;
}

// export const props = {
//   gutter: {
//     type: [String, Number, Array] as PropType<RowGutter>,
//     default: 0,
//   },
//   justify: {
//     type: String as PropType<RowJustify>,
//     default: 'flex-start',
//   },
//   align: {
//     type: String as PropType<RowAlign>,
//     default: 'flex-start',
//   },
//   onClick: defineListenerProp<(e: Event) => void>(),
// };

packages/varlet-ui/src/row/Row.vue

<template>
  <div
    :class="classes(n(), n('$--box'))"
    :style="{
      justifyContent: padStartFlex(justify),
      alignItems: padStartFlex(align),
      margin: `${-average[0]}px ${-average[1]}px`,
    }"
    @click="handleClick"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed, watch, withDefaults } from 'vue';
import { call, isArray } from '@varlet/shared';
import { createNamespace } from '../utils/components';
import { padStartFlex, toPxNum } from '../utils/elements';
import { rowProps } from './props';
import { type RowProvider, useCols } from './provide';

const { n, classes } = createNamespace('row');

const props = withDefaults(defineProps<rowProps>(), {
  gutter: 0,
  justify: 'flex-start',
  align: 'flex-start',
});

defineOptions({
  name: 'VarRow',
});

const average = computed(() =>
  isArray(props.gutter) ? props.gutter.map((numeric) => toPxNum(numeric) / 2) : [0, toPxNum(props.gutter) / 2],
);
const { cols, bindCols, length } = useCols();

const rowProvider: RowProvider = { computePadding };

watch(() => length.value, computePadding);
watch(() => props.gutter, computePadding);
bindCols(rowProvider);

function computePadding() {
  cols.forEach((col) => {
    const [y, x] = average.value;
    col.setPadding({ left: x, right: x, top: y, bottom: y });
  });
}

function handleClick(e: Event) {
  call(props.onClick, e);
}
</script>

<style lang="less">
@import url('../styles/common');
@import url('./row');
</style>

Actual results (or Errors)

构建报错，说packages/varlet-cli/src/node/compiler/compileSFC.ts里面的compileScriptSFC方法需要传入fs参数,他要读取宏声明的路径， 然后在packages/varlet-ui/es/row/props.ts也找不到

我修改了一下，好像能找到依赖了：

const fileExists = (str: string) => {
  str = str.replace('/es/', '/src/');
  return existsSync(str);
};
const readFileSetup = (str: string) => {
  str = str.replace('/es/', '/src/');
  return readFileSync(str, 'utf-8');
};
// 中间的其他代码
const { content, bindings } = compileScriptSFC(descriptor, {
        id,
        fs: {
          fileExists: (str: string) => fileExists(join(sfcDir, str)),
          readFile: (str: string) => readFileSetup(join(sfcDir, str)),
        },
      });

Reproduction link

顺便说一下，首页二维码失效了，上个问题说会跟新，等了一周了，没更新

Originally posted by @chenyulun in varletjs/varlet#1458

[github-actions]

👋 @khalidy6，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[chenyulun]

为啥拷贝我的问题到这个仓库？刷问题呢？