@mixd-id/web-scaffold 0.1.230406310 → 0.1.230406311

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406310",
+  "version": "0.1.230406311",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Button.vue

@@ -210,14 +210,14 @@ export default{
 }
 
 .button-secondary{
-	@apply bg-primary-100 border-primary-100 text-primary-700 rounded-lg text-text;
-  border: solid 1px rgb(var(--primary-100));
+	@apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
+  border: solid 1px rgb(var(--secondary-500));
 }
 .button-secondary:hover{
-	@apply bg-primary-200 border-primary-200;
+	@apply bg-secondary-600 border-secondary-600;
 }
 .button-secondary:disabled{
-	@apply bg-primary-100 top-0 left-0 cursor-not-allowed;
+	@apply bg-secondary-400 border-secondary-400 cursor-not-allowed;
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;

package/src/components/ImagePreview.vue

@@ -4,10 +4,10 @@
 			<div class="flex flex-row gap-4 justify-end items-center p-3 pr-6">
         <slot name="moreButtons"></slot>
 				<a v-if="download" :href="imageUrl" target="_blank" download>
-          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" class="fill-text" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
         </a>
 				<button @click="close">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="fill-text" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
         </button>
 			</div>
 			<div class="flex items-center justify-center">

package/src/components/Textarea.vue

@@ -117,6 +117,10 @@ export default{
 
 	methods:{
 
+    focus(){
+      this.$refs.input.focus()
+    },
+
 		select(){
 			this.$refs.input.select()
 		},

package/src/utils/helpers.js

@@ -140,11 +140,11 @@ const strSlug = (title, separator) => {
   return title.replace(new RegExp('^[' + separator + '\\s]+|[' + separator + '\\s]+$', 'g'),'');
 }
 
-const strVars = (text, vars) => {
+const strVars = (text, vars, opt = { emptyUndefined:true }) => {
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })
 

package/src/utils/helpers.mjs

@@ -84,11 +84,11 @@ const parseBoolean = function(exp){
       exp.toLowerCase() : exp)
 }
 
-const strVars = function(text, vars){
+const strVars = function(text, vars, opt = { emptyUndefined:true }){
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })