release: [email protected]

Author: lzxb

.prettierignore

@@ -1,4 +1,4 @@
-
 coverage
 dist
-node_modules
+node_modules
+node_modules_back

CHANGELOG.md

@@ -1,6 +1,12 @@
+## 1.1.9
+
+-   fix: props name style is kebab case type error
+-   fix: not found: Error: Can't resolve 'vue-class-setup'
+
 ## 1.1.8
 
 -   fix: Set props default error
+
 ## 1.1.7
 
 -   docs: Optimize document picture capitalization

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vue-class-setup",
-    "version": "1.1.8",
-    "main": "dist/index.js",
+    "version": "1.1.9",
+    "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "types": "dist/index.d.ts",
     "repository": "[email protected]:fmfe/vue-class-setup.git",
@@ -15,7 +15,7 @@
                 "node": "./dist/index.mjs",
                 "default": "./dist/index.es.js"
             },
-            "require": "./dist/index.js"
+            "require": "./dist/index.cjs.js"
         },
         "./package.json": "./package.json"
     },

script/test-all.sh

@@ -2,6 +2,7 @@
 
 rm -rf node_modules
 yarn install
+yarn lint
 yarn run build
 yarn run coverage
 

src/define.ts

@@ -68,7 +68,7 @@ export function initDefine(target: InstanceType<DefineConstructor>) {
                 let value = props[k];
 
                 if (typeof value === 'boolean') {
-                    if (!hasValue(target.$vm, k)) {
+                    if (!hasDefaultValue(target.$vm, k)) {
                         value = target.$defaultProps[k];
                     }
                 } else if (isNull(value)) {
@@ -80,19 +80,29 @@ export function initDefine(target: InstanceType<DefineConstructor>) {
     });
 }
 
-function hasValue(vm: VueInstance, key: string): boolean {
+function hasDefaultValue(vm: VueInstance, key: string): boolean {
     let props: Record<string, any> | null = null;
     if (isVue2) {
         props = vm.$options && vm.$options['propsData'];
     } else {
         props = vm.$ && vm.$.vnode && vm.$.vnode.props;
     }
     if (props) {
-        return !isNull(props[key]);
+        return !isNull(props[key] || props[kebabCase(key)]);
     }
     return false;
 }
 
 function isNull(value: unknown) {
     return typeof value === 'undefined' || value === null;
 }
+
+const KEBAB_REGEX = /[A-Z]/g;
+
+function kebabCase(str: string) {
+    return str
+        .replace(KEBAB_REGEX, (match) => {
+            return '-' + match.toLowerCase();
+        })
+        .replace(/^-/, '');
+}

tests/kebab-case-props-child.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Setup, Define } from 'vue-class-setup';
+
+@Setup
+class App extends Define<Props, Emit> {}
+</script>
+<script lang="ts" setup>
+export interface Props {
+    NameOne: string;
+    nameAndAge: number;
+    sSSS: number;
+}
+
+export interface Emit {
+    (event: 'click'): void;
+}
+
+defineProps<Props>();
+defineEmits<Emit>();
+
+const app = new App();
+</script>
+<template>
+    <p class="name">{{ app.NameOne }}</p>
+    <p class="name-and-age">{{ app.nameAndAge }}</p>
+    <p class="ssss">{{ app.sSSS }}</p>
+</template>

tests/kebab-case-props-parent.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import KebabCasePropsChild from './kebab-case-props-child.vue';
+</script>
+<template>
+    <KebabCasePropsChild
+        NameOne="vue-class-setup"
+        :name-and-age="100"
+        :s-s-s-s="50"
+    />
+</template>

tests/kebab-case-props.spec.ts

@@ -0,0 +1,11 @@
+import { assert, test } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import KebabCasePropsParent from './kebab-case-props-parent.vue';
+
+test('Base', async () => {
+    const wrapper = mount(KebabCasePropsParent);
+    assert.equal(wrapper.find('.name').text(), 'vue-class-setup');
+    assert.equal(wrapper.find('.name-and-age').text(), '100');
+    assert.equal(wrapper.find('.ssss').text(), '50');
+});