@sokchea/vue-form-khmer 1.0.2 → 1.0.3

package/README.md

@@ -4,7 +4,7 @@ This template should help get you started developing with Vue 3 in Vite.
 
 
 ```sh 
-npm i vue-form-khmer
+npm i @sokchea/vue-form-khmer
 
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sokchea/vue-form-khmer",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Vue 3 Form Components with Khmer validation support",
   "type": "module",
   "main": "dist/vue-form-khmer.umd.js",
@@ -11,9 +11,7 @@
       "require": "./dist/vue-form-khmer.umd.js"
     }
   },
-  "files": [
-    "dist"
-  ],
+ "files": ["dist", "src", "lib"],
   "scripts": {
     "build": "vite build"
   },

package/src/App.vue

@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+  <header>
+    <div class="text-red-500">HelloWorld</div>
+    
+  </header>
+
+  <main>
+    
+  </main>
+</template>

package/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1,36 @@
+@import './base.css';
+@import "tailwindcss";
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

package/src/components/Form.vue

@@ -0,0 +1,46 @@
+<template>
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+        <!-- Render slot content for inputs -->
+        <slot></slot>
+
+        <!-- Submit button -->
+        <button
+        type="submit"
+        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
+        >
+            {{ submitText }}
+        </button>
+    </form>
+</template>
+
+<script>
+export default {
+    name: 'Form',
+    props: {
+        submitText: {
+            type: String,
+            default: 'Submit',
+        },
+        onSubmit: {
+            type: Function,
+            default: null,
+        },
+    },
+    emits: ['submit'],
+    methods: {
+        handleSubmit(event) {
+            // Emit submit event with form data
+            this.$emit('submit', event);
+
+            // Call onSubmit prop if provided
+            if (this.onSubmit) {
+                this.onSubmit(event);
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+/* Optional scoped styles for form */
+</style>

package/src/components/Input.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="flex flex-col">
+        <!-- Label -->
+        <label v-if="label" class="mb-1 font-semibold text-gray-700">
+        {{ label }}
+        <span v-if="required" class="text-red-500">*</span>
+        </label>
+
+        <!-- Input field -->
+        <input
+        :type="type"
+        v-model="modelValue"
+        :placeholder="placeholder"
+        :class="[
+            'border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500',
+            error ? 'border-red-500' : 'border-gray-300'
+        ]"
+        @input="$emit('update:modelValue', modelValue)"
+        />
+
+        <!-- Error message -->
+        <p v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Input',
+    props: {
+        modelValue: {
+            type: [String, Number],
+            default: '',
+        },
+        label: {
+            type: String,
+            default: '',
+        },
+        type: {
+            type: String,
+            default: 'text',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        error: {
+            type: String,
+            default: '',
+        },
+    },
+    emits: ['update:modelValue'],
+};
+</script>
+
+<style scoped>
+/* Optional: smooth focus animation */
+input:focus {
+  transition: all 0.2s ease-in-out;
+}
+</style>

package/src/main.js

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')