Merge pull request #7 from PrestaSafe/1.0.3-dev

1.0.3 version

_dev/.gitignore

@@ -24,4 +24,4 @@ dist-ssr
 *.sw?
 
 # vite config
-vite.config.js
+# vite.config.js

_dev/package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "@headlessui/vue": "^1.6.5",
     "@meforma/vue-toaster": "^1.3.0",
-    "@tailwindcss/forms": "^0.3.2",
     "@tinymce/tinymce-vue": "^4.0.7",
     "axios": "^0.21.1",
     "sortablejs": "^1.10.2",
@@ -20,7 +19,7 @@
   "devDependencies": {
     "@headlessui/vue": "^1.6.5",
     "@heroicons/vue": "^2.0.0",
-    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/forms": "^0.4.0-alpha.2",
     "@vitejs/plugin-vue": "^2.2.0",
     "autoprefixer": "^10.4.7",
     "dropzone": "^6.0.0-beta.2",

_dev/src/components/RightPanel.vue

@@ -198,32 +198,26 @@ emitter.on('globalSave', () => {
             </div>
 
             {{ trans('default_settings')}}
-
-
-            <!-- <Checkbox class="my-4" v-model="config.default.load_ajax" title="Chargement en arrière plan" name="loadAjax" /> -->
             <Checkbox class="my-4" v-model="config.default.container" :title="trans('use_container')" name="container" /> {{ trans('bg_color') }}
             <div class="flex mb-4 pt-4">
                 <ColorInput class="flex-auto rounded-full" v-model="config.default.bg_color" format="hex string" />
                 <Input class="flex-auto" :placeholder="trans('ex_color')" v-model="config.default.bg_color" name="bg_color" />
             </div>
-
-            <SimpleSelect v-if="Object.keys(config.templates).length > 1" v-model="config.templateSelected" :availableTpl="config.templates" :currentTpl="config.templateSelected" :label="trans('choose_template')" />
-            <!-- <div class="flex gap-2 justify-center mt-2" v-if="config">
-                        <Button icon="CloudUploadIcon" type="primary" @click="saveConfig()">Sauvegarder</Button>
-                    </div> -->
+
+            <SimpleSelect 
+                v-if="Object.keys(config.templates).length > 1" v-model="config.templateSelected" :availableTpl="config.templates"
+                :currentTpl="config.templateSelected" 
+                @update="value => console.log('value', value)"
+                :label="trans('choose_template')" />
         </div>
 
         <!-- State panel  -->
         <div v-if="!showPanel" class="state flex flex-col p-2 bg-slate-100 h-full" @keyup.enter="save()">
             <div v-for="f in state" :key="f">
                 <FieldRepeater @updateUpload="save()" :field="f" />
             </div>
-            <!-- <div class="flex gap-2 justify-center mt-2" v-if="state">
-                        <Button icon="CloudUploadIcon" type="primary" @click="save()">Sauvegarder</Button>
-                    </div> -->
         </div>
 
-
         <div v-if="showPanel" class="bottom-0 w-full text border-top-1">
             <div>
                 <section @click="displayThemePanel()" class="border hover:bg-indigo hover:text-white bg-indigo text-white">

_dev/src/components/form/Choices.vue

@@ -2,11 +2,10 @@
   <div class="flex items-center justify-center">
 
     <div class="w-full max-w-xs mx-auto">
-
      <Listbox
         as="div"
         class="space-y-1"
-        v-model="modelValue"
+        v-model="currentChoice"
         v-slot="{ open }"
 
       >
@@ -103,7 +102,7 @@
 </template>
 
 <script setup>
-import { defineComponent, defineEmits, watch, computed } from "vue";
+import { defineComponent, defineEmits, watch, ref } from "vue";
 import {
   Listbox,
   ListboxLabel,
@@ -115,25 +114,26 @@ import {
 let props = defineProps({
     choices: Object,
     label: String,
-    modelValue: String | Object
+    modelValue: String
 })
 
+
+let currentChoice = ref(props.modelValue)
+let selectedChoice = ref(props.choices[props.modelValue])
 const emit = defineEmits(['update:modelValue'])
 
 function onChange(e) {
     emit('update:modelValue', e)
+    selectedChoice.value = props.choices[currentChoice.value]
 }
-
-watch(() => props.modelValue, onChange)
+watch(currentChoice, onChange)
 defineComponent({
     Listbox,
     ListboxLabel,
     ListboxButton,
     ListboxOptions,
     ListboxOption,
 })
-const selectedChoice = computed(() =>  props.choices[props.modelValue])
-console.log('model Value', props.modelValue)
 
     
 </script>

_dev/src/components/form/SimpleSelect.vue

@@ -2,11 +2,11 @@
   <div class="flex items-center justify-center">
 
     <div class="w-full max-w-xs mx-auto">
-
+      <!-- <Button @click="test">TEST {{ props.item }} current choice: {{ currentChoice }}</Button> -->
      <Listbox
         as="div"
         class="space-y-1"
-        v-model="modelValue"
+        v-model="currentChoice"
         v-slot="{ open }"
 
       >
@@ -19,7 +19,7 @@
               class="cursor-default relative w-full rounded-md border border-gray-300 bg-white pl-3 pr-10 py-2 text-left focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition ease-in-out duration-150 sm:text-sm sm:leading-5"
             >
               <span class="block truncate">
-                {{ currentTpl }}
+                {{ currentChoice }}
               </span>
               <span
                 class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
@@ -103,7 +103,7 @@
 </template>
 
 <script setup>
-import { defineComponent, defineEmits, watch } from "vue";
+import { defineComponent, defineEmits, watch, ref } from "vue";
 import {
   Listbox,
   ListboxLabel,
@@ -116,25 +116,23 @@ let props = defineProps({
     currentTpl: String,
     availableTpl: Object,
     label: String,
-    modelValue: String | Object
+    modelValue: Array
 })
-
+let currentChoice = ref(props.modelValue)
 const emit = defineEmits(['update:modelValue'])
 
 function onChange(e) {
     emit('update:modelValue', e)
+    emit('update:currentTpl', e)
 }
 
-watch(() => props.modelValue, onChange)
+watch(currentChoice, onChange)
 defineComponent({
     Listbox,
     ListboxLabel,
     ListboxButton,
     ListboxOptions,
     ListboxOption,
 })
-
-
-
     
 </script>

_dev/src/main.js

@@ -6,4 +6,4 @@ const pinia = createPinia()
 import './index.css'
 
 
-createApp(App).use(pinia).mount('#app')
+createApp(App).use(pinia).mount('#app')

_dev/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build:{
+    manifest: true,
+    outDir: "../build/",
+    emptyOutDir: true, 
+  },
+  server: {
+    // hmr: {
+    //   host: 'vue.prestasafe.com',
+    //   clientPort: 443,
+    //   protocol: 'wss'
+    // } 
+    hmr: {
+      host: 'localhost',
+      protocol: 'ws'
+    }
+  }
+})