hp-design-system 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hp-design-system",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,7 +12,9 @@
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
+    "@types/vue": "^2.0.0",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/runtime-dom": "^3.4.30",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
     "vue-tsc": "^2.0.21"

package/src/App.vue

@@ -1,30 +1,8 @@
-<script setup lang="ts">
-import HpButton from './components/Button.vue'
-</script>
-
 <template>
   <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+    Design System
   </div>
-  <HpButton>TESTE</HpButton>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<script setup lang="ts">
+</script>

package/src/App.vue.js

@@ -0,0 +1,33 @@
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const __VLS_fnComponent = (await import('vue')).defineComponent({});
+let __VLS_functionalComponentProps;
+const __VLS_modelEmitsType = {};
+function __VLS_template() {
+    let __VLS_ctx;
+    /* Components */
+    let __VLS_otherComponents;
+    let __VLS_own;
+    let __VLS_localComponents;
+    let __VLS_components;
+    let __VLS_styleScopedClasses;
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
+    if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {
+    }
+    var __VLS_slots;
+    return __VLS_slots;
+    const __VLS_componentsOption = {};
+    let __VLS_name;
+    let __VLS_defineComponent;
+    const __VLS_internalComponent = __VLS_defineComponent({
+        setup() {
+            return {};
+        },
+    });
+}
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+;

package/src/components/Button.vue

@@ -1,36 +1,10 @@
 <template>
-  <button @click="handleClick">
-    <slot></slot>
-  </button>
+  <button>{{ text }}</button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup>
 
-export default defineComponent({
-  name: 'HpButton',
-  emits: ['click'],
-  setup(_, { emit }) {
-    const handleClick = () => {
-      emit('click')
-    }
-
-    return { handleClick }
-  }
+const props = defineProps({
+  text: { type: String, required: true }
 })
-</script>
-
-<style scoped>
-button {
-  padding: 10px;
-  background-color: #42b983;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: #38a172;
-}
-</style>
+</script>

package/src/components/Button.vue.js

@@ -0,0 +1,49 @@
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    text: { type: String, required: true }
+});
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        text: { type: String, required: true }
+    },
+});
+let __VLS_functionalComponentProps;
+const __VLS_modelEmitsType = {};
+function __VLS_template() {
+    let __VLS_ctx;
+    /* Components */
+    let __VLS_otherComponents;
+    let __VLS_own;
+    let __VLS_localComponents;
+    let __VLS_components;
+    let __VLS_styleScopedClasses;
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({});
+    (__VLS_ctx.text);
+    // @ts-ignore
+    [text,];
+    if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {
+    }
+    var __VLS_slots;
+    return __VLS_slots;
+    const __VLS_componentsOption = {};
+    let __VLS_name;
+    let __VLS_defineComponent;
+    const __VLS_internalComponent = __VLS_defineComponent({
+        setup() {
+            return {
+                $props: __VLS_makeOptional(props),
+                ...props,
+            };
+        },
+    });
+}
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {
+            $props: __VLS_makeOptional(props),
+            ...props,
+        };
+    },
+});
+;

package/src/components/HelloWorld.vue.js

@@ -0,0 +1,64 @@
+import { ref } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+let __VLS_typeProps;
+const __VLS_props = defineProps();
+const count = ref(0);
+const __VLS_fnComponent = (await import('vue')).defineComponent({});
+let __VLS_functionalComponentProps;
+const __VLS_modelEmitsType = {};
+function __VLS_template() {
+    let __VLS_ctx;
+    /* Components */
+    let __VLS_otherComponents;
+    let __VLS_own;
+    let __VLS_localComponents;
+    let __VLS_components;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({});
+    (__VLS_ctx.msg);
+    // @ts-ignore
+    [msg,];
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("card") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({ ...{ onClick: (...[$event]) => {
+                __VLS_ctx.count++;
+                // @ts-ignore
+                [count,];
+            } }, type: ("button"), });
+    (__VLS_ctx.count);
+    // @ts-ignore
+    [count,];
+    __VLS_elementAsFunction(__VLS_intrinsicElements.p, __VLS_intrinsicElements.p)({});
+    __VLS_elementAsFunction(__VLS_intrinsicElements.code, __VLS_intrinsicElements.code)({});
+    __VLS_elementAsFunction(__VLS_intrinsicElements.p, __VLS_intrinsicElements.p)({});
+    __VLS_elementAsFunction(__VLS_intrinsicElements.a, __VLS_intrinsicElements.a)({ href: ("https://vuejs.org/guide/quick-start.html#local"), target: ("_blank"), });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.p, __VLS_intrinsicElements.p)({});
+    __VLS_elementAsFunction(__VLS_intrinsicElements.a, __VLS_intrinsicElements.a)({ href: ("https://vuejs.org/guide/scaling-up/tooling.html#ide-support"), target: ("_blank"), });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.p, __VLS_intrinsicElements.p)({ ...{ class: ("read-the-docs") }, });
+    if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {
+        __VLS_styleScopedClasses['card'];
+        __VLS_styleScopedClasses['read-the-docs'];
+    }
+    var __VLS_slots;
+    return __VLS_slots;
+    const __VLS_componentsOption = {};
+    let __VLS_name;
+    let __VLS_defineComponent;
+    const __VLS_internalComponent = __VLS_defineComponent({
+        setup() {
+            return {
+                count: count,
+            };
+        },
+        props: {},
+    });
+}
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {},
+});
+;

package/src/index.js

@@ -0,0 +1,8 @@
+import HpButton from './components/Button.vue';
+const HpDesignSystem = {
+    install(app) {
+        app.component('HpButton', HpButton);
+    }
+};
+export default HpDesignSystem;
+export { HpButton };

package/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+createApp(App).mount('#app');

package/src/shims-vue.d.ts

@@ -2,4 +2,4 @@ declare module '*.vue' {
     import { DefineComponent } from 'vue'
     const component: DefineComponent<{}, {}, any>
     export default component
-  }
+  }

package/tsconfig.json

@@ -1,23 +1,13 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "useDefineForClassFields": true,
     "module": "esnext",
-    "moduleResolution": "node",
     "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
+    "moduleResolution": "node",
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
     "skipLibCheck": true,
     "types": ["vite/client", "node"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
   "exclude": ["node_modules"]
-}
+}

package/vite.config.ts

@@ -1,22 +1,8 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-
-export default defineConfig({
-  plugins: [vue()],
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'HpDesignSystem',
-      fileName: (format) => `hp-design-system.${format}.js`
-    },
-    rollupOptions: {
-      external: ['vue'],
-      output: {
-        globals: {
-          vue: 'Vue'
-        }
-      }
-    }
-  }
-})
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+})