test: add test cases for mentions, range and textarea; fix type issue…

…s, fix workflow issue

.github/workflows/publish.yml

@@ -7,6 +7,11 @@ on:
       run-id:
         required: false
         type: string
+  workflow_call:
+    inputs:
+      run-id:
+        required: true
+        type: string
 
 permissions:
   pull-requests: write

packages/components/__test__/components/Mentions.test.tsx

@@ -0,0 +1,25 @@
+const options = [
+  { label: 'option1', value: 'value1' },
+  { label: 'option2', value: 'value2', disabled: true },
+  { label: 'option3', value: 'value3' },
+  { label: 'option4', value: 'value4' },
+  { label: 'option5', value: 'value5' },
+];
+
+describe('Mentions', () => {
+  it('should render correctly', async () => {
+    const ce = l('l-mentions', {
+        value: 'test@value1 @value4 what',
+        options,
+      }),
+      root = ce.shadowRoot!;
+    const edit = root.querySelector('[contenteditable]')!;
+    expect(edit).not.toBeNull();
+    expect(edit.children[0].textContent).toBe('test');
+    // at the beginning, edit.children[1].textContent is value1 // TODO check what delay this
+    await vi.waitFor(() => expect(edit.children[1].textContent).toBe('option1'));
+    expect(edit.children[2].textContent).toBe('');
+    expect(edit.children[3].textContent).toBe('option4');
+    expect(edit.children[4].textContent).toBe('what');
+  });
+});

packages/components/__test__/components/Range.test.tsx

@@ -0,0 +1,13 @@
+describe('Range', () => {
+  it('should render correctly', () => {
+    const ce = l('l-range', {
+        value: 30,
+      }),
+      root = ce.shadowRoot!;
+    const first = root.firstElementChild as HTMLElement;
+    expect(first.style.getPropertyValue('--l-range-min')).toBe('0');
+    expect(first.style.getPropertyValue('--l-range-max')).toBe('0.3');
+    const thumb = root.querySelector('.l-range__thumb') as HTMLElement;
+    expect(thumb.style.getPropertyValue('--l-range-percent')).toBe('0.3');
+  });
+});

packages/components/__test__/components/Textarea.test.tsx

@@ -0,0 +1,20 @@
+import { userEvent } from '@vitest/browser/context';
+
+describe('Textarea', () => {
+  it('type in textarea', async () => {
+    let value = '';
+    const onUpdate = vi.fn((e: any) => {
+      value = e.detail;
+    });
+    const handlers = {
+      onUpdate,
+    };
+    const ce = l('l-textarea', handlers);
+    ce.focus();
+    expect(ce.textarea?.tagName).to.equal('TEXTAREA');
+    expect(ce.textarea.matches(':focus')).to.be.true;
+    await userEvent.type(ce.textarea, 'Hello');
+    expect(value).to.equal('Hello');
+    expect(onUpdate).toHaveBeenCalledTimes(5);
+  });
+});

packages/components/src/components/accordion/AccordionGroup.tsx

@@ -16,7 +16,7 @@ export const AccordionGroup = defineSSRCustomElement({
   props: accordionGroupProps,
   emits: accordionGroupEmits,
   setup(props, { emit }) {
-    const ns = useNamespace(name);
+    useNamespace(name);
     useSetupEdit();
     const openModel = ref<{ value: any; raw?: any }>({ value: undefined, raw: undefined });
         const multiple = () => props.allowMultiple;

packages/components/src/components/checkbox/CheckboxGroup.tsx

@@ -17,7 +17,7 @@ export const CheckboxGroup = defineSSRCustomElement({
   emits: checkboxGroupEmits,
   formAssociated: true,
   setup(props, { emit: e }) {
-    const ns = useNamespace(name);
+    useNamespace(name);
     const emit = useSetupEvent<typeof e>({
       update({ isCheckForAll, checked, value, onlyFor, excludeFromGroup }: CheckboxUpdateDetail) {
         if (excludeFromGroup || (props.onlyFor && props.onlyFor !== onlyFor)) return; // if 'onlyFor' is defined, accepts update event only with same value
@@ -96,7 +96,7 @@ export const CheckboxGroup = defineSSRCustomElement({
 });
 
 export type tCheckboxGroup = typeof CheckboxGroup;
-export type CheckboxExpose = ReturnType<typeof useCheckboxMethods>;
-export type iCheckboxGroup = InstanceType<tCheckboxGroup> & CheckboxExpose;
+export type CheckboxGroupExpose = ReturnType<typeof useCheckboxMethods>;
+export type iCheckboxGroup = InstanceType<tCheckboxGroup> & CheckboxGroupExpose;
 
 export const defineCheckboxGroup = createDefineElement(name, CheckboxGroup, {}, parts);

packages/components/src/components/date-picker/DatePicker.tsx

@@ -18,7 +18,7 @@ export const DatePicker = defineSSRCustomElement({
   props: datePickerProps,
   emits: datePickerEmits,
   setup(props, { emit: e }) {
-    const ns = useNamespace(name);
+    useNamespace(name);
     const context = useContextConfig();
     const { parse, format } = useDateParseFormat(virtualGetMerge({ lang: () => context.lang }, props));
 

packages/components/src/components/input/Input.password.tsx

@@ -20,7 +20,7 @@ export default function (type: () => any, ns: ReturnType<typeof useNamespace>) {
           class: ns.e('pwd-icon'),
           name: show.value ? 'eye-slash' : 'eye',
           onClick() {
-            if (editComputed.interactive) {
+            if (editComputed!.interactive) {
               localType.value = (show.value = !show.value) ? 'text' : 'password';
             }
           },

packages/components/src/components/input/type.ts

@@ -89,10 +89,10 @@ export const inputProps = freeze({
 export const inputEmits = createEmits<{
   update: MaybeArray<string | number> | null;
   /** only for multiple input, emit when value of inner input updates */
-  tagsComposing: string;
+  tagsComposing: string | number;
   tagsAdd: string[] | number[];
   tagsRemove: string[] | number[];
-  enterDown: undefined;
+  enterDown: KeyboardEvent;
 }>(['update', 'tagsComposing', 'tagsAdd', 'tagsRemove', 'enterDown']);
 
 export type InputSetupProps = ExtractPropTypes<typeof inputProps> & CommonProps;

packages/components/src/components/mentions/type.ts

@@ -42,7 +42,7 @@ export const mentionsEmits = createEmits<{
   update: string | null;
   updateRaw: readonly (string | MentionSpan)[];
   trigger: MentionsTriggerParam;
-  enterDown: undefined;
+  enterDown: KeyboardEvent;
 }>(['update', 'updateRaw', 'trigger', 'enterDown']);
 
 export type MentionsSetupProps = ExtractPropTypes<typeof mentionsProps> & CommonProps;

packages/components/src/components/textarea/type.ts

@@ -32,7 +32,7 @@ export const textareaProps = freeze({
 
 export const textareaEmits = createEmits<{
   update: string | null;
-  enterDown: undefined;
+  enterDown: KeyboardEvent;
 }>(['update', 'enterDown']);
 
 export type TextareaSetupProps = ExtractPropTypes<typeof textareaProps> & CommonProps;

packages/components/src/hooks/useNameSpace.ts

@@ -51,7 +51,7 @@ const getThemeValueOfAllSources = (
 };
 
 /** @private */
-export const getThemeValue: typeof getThemeValueOfAllSources = (
+export const getThemeValue = (
   ...args: Parameters<typeof getThemeValueOfAllSources>
 ): any => getThemeValueOfAllSources(...args).find(identity);