Merge pull request #16 from kevinkosterr/4-pre-styled-components

Add themes

Author: kevinkosterr

package.json

@@ -10,9 +10,9 @@
   "module": "./dist/vue3-form-generator.es.js",
   "scripts": {
     "dev": "vite",
+    "dev:sass": "sass --watch src/scss/themes:playground/css/",
     "test": "vitest",
-    "build": "vite build",
-    "build:publish": "vitest && vite build && npm publish --access public",
+    "build": "vite build && sass src/scss/themes/:dist/themes/",
     "preview": "vite preview"
   },
   "exports": {
@@ -43,6 +43,7 @@
     "eslint-plugin-import-alias": "^1.2.0",
     "eslint-plugin-vue": "9.27.0",
     "jsdom": "^25.0.1",
+    "sass": "^1.79.5",
     "terser": "^5.33.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.14",

playground/.gitignore

@@ -1 +1,2 @@
-schema.js
+schema.js
+css

playground/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 import JsonViewer from 'vue3-json-viewer'
 import VueFormGenerator from '@/index.js'
 import 'vue3-json-viewer/dist/index.css'
+import './css/basic.css'
 
 const app = createApp(App).use(JsonViewer)
 

src/FormGenerator.vue

@@ -94,14 +94,4 @@ const onReset = () => {
       </template>
     </fieldset>
   </form>
-</template>
-
-<style>
-.vue-form-generator input:not([type='checkbox'],[type='submit'],[type='radio']) {
-  width: 100%;
-}
-
-.vue-form-generator > fieldset {
-  border: none;
-}
-</style>
+</template>

src/FormGroup.vue

@@ -68,24 +68,4 @@ const shouldHaveLabel = computed(() => {
       </template>
     </div>
   </div>
-</template>
-
-<style>
-.form-group:has(input[required],select[required]) label:first-child::after {
-  content: "*";
-  font-size: .9em;
-  color: red;
-  margin-left: .2rem;
-}
-
-.hint {
-  color: gray;
-  font-size: 90%;
-}
-
-.errors {
-  color: red;
-  font-size: .8rem;
-  margin-bottom: .3rem;
-}
-</style>
+</template>

src/fields/buttons/FieldReset.vue

@@ -1,5 +1,5 @@
 <template>
-  <input type="reset" :value="field.buttonText">
+  <input type="reset" class="field-reset" :value="field.buttonText">
 </template>
 
 <script>

src/fields/buttons/FieldSubmit.vue

@@ -1,6 +1,7 @@
 <template>
   <input
     type="submit"
+    class="field-submit"
     :disabled="isDisabled"
     :value="field.buttonText || 'Submit'"
   >

src/fields/input/FieldColor.vue

@@ -1,6 +1,7 @@
 <template>
   <input
     :id="id"
+    class="field-color"
     type="color"
     :name="field.name"
     :required="isRequired"

src/fields/input/FieldPassword.vue

@@ -49,13 +49,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.password-strength-indicator {
-  transition: width 0.1s ease-in, background 0.3s ease-in;
-  height: .5em;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.1);
-}
-</style>
+</script>

src/fields/input/FieldRadio.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-for="option in field.options" :key="option.value">
-    <div class="option-wrap">
+    <div class="option-wrap field-radio">
       <input
         :id="getFieldId(option.name)"
         type="radio"
@@ -26,14 +26,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.option-wrap {
-  margin: .4rem;
-}
-
-label {
-  margin-left: .5rem;
-}
-</style>
+</script>