@hostlink/nuxt-light 1.6.7 → 1.6.8

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.6.7"
+  "version": "1.6.8"
 }

package/dist/runtime/components/l-app-main.vue

@@ -295,12 +295,15 @@ if (route.fullPath == "/" && my.default_page) {
 
                 <q-space />
 
-                <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs" @click="onToggleFav"
-                    v-if="app.hasFavorite">
+                <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs"
+                    @click="onToggleFav" v-if="app.hasFavorite">
                 </q-btn>
 
-                <q-btn :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" round flat dense class="q-mr-xs"
-                    @click="$q.fullscreen.toggle()">
+                <q-btn :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" round flat dense
+                    class="q-mr-xs" @click="$q.fullscreen.toggle()">
+                    <q-tooltip>
+                        {{ $q.fullscreen.isActive ? $t('Exit Fullscreen') : $t('Fullscreen') }}
+                    </q-tooltip>
                 </q-btn>
 
                 <q-btn v-if="languages.length > 1" round flat icon="language" class="q-mr-xs">
@@ -412,23 +415,24 @@ if (route.fullPath == "/" && my.default_page) {
         <q-drawer overlay v-model="rightDrawerOpen" side="right" bordered>
             <!-- drawer content -->
             <q-scroll-area class="fit">
-                <l-customizer v-model:color="light.color" v-model:theme="light.theme" v-model:miniState="style.miniState"
-                    v-model:dense="style.dense" v-model:menuOverlayHeader="style.menuOverlayHeader"
-                    v-model:footer="style.footer" v-model:menuWidth="menuWidth" :time="system.time" />
+                <l-customizer v-model:color="light.color" v-model:theme="light.theme"
+                    v-model:miniState="style.miniState" v-model:dense="style.dense"
+                    v-model:menuOverlayHeader="style.menuOverlayHeader" v-model:footer="style.footer"
+                    v-model:menuWidth="menuWidth" :time="system.time" />
             </q-scroll-area>
         </q-drawer>
 
-        <q-page-container :class="containerClass" :style="containerStyle">
-
-            <!-- Error message -->
+        <q-page-container :class="containerClass" :style="containerStyle">  <!-- Error message -->
             <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for=" error  in  errors " rounded>
                 {{ error }}
+
                 <template v-slot:action>
                     <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />
                 </template>
             </q-banner>
 
             <router-view v-slot="{ Component }">
+
                 <template v-if="Component">
                     <suspense>
                         <component :is="Component" :reloadMenu="reloadMenu"></component>
@@ -443,12 +447,12 @@ if (route.fullPath == "/" && my.default_page) {
         <q-footer bordered v-if="style.footer">
             <q-item>
                 <q-item-section>
-                    {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName }}.
+                    {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
+                    }}.
                     Build {{
-                        light.getVersion() }}
+        light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>
     </q-layout>
 </template>
-  

package/dist/runtime/formkit/Repeater.vue

@@ -1,15 +1,25 @@
 <script setup>
 import { ref, computed } from 'vue'
+import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
+import { animations } from "@formkit/drag-and-drop";
 
 const props = defineProps({
     context: Object
+
 });
 
 const node = props.context.node;
+console.log(node);
 const min = props.context.node.props.min ?? 1;
 const max = props.context.node.props.max ?? Infinity;
+const sortable = (props.context.node.props.sortable !== undefined) ? props.context.node.props.sortable : true;
+
+console.log(sortable);
+const [parent, localValue] = useDragAndDrop(props.context.value, {
+    dragHandle: ".l-repeater-handle",
+    plugins: [animations()]
+})
 
-const localValue = ref(props.context.value)
 
 if (localValue.value.length < min) {
     for (let i = localValue.value.length; i < min; i++) {
@@ -63,44 +73,47 @@ const isAllowMoveDown = (index) => {
 
 <template>
     <FormKit type="list" v-model="localValue" dynamic #default="{ items, node, value }" :name="node.name">
-        
-
-        <FormKit type="group" v-for="(item, index) in  items " :index="index" :key="item">
-
-            <q-card class="q-mb-sm" flat>
-                <q-card-section>
-                    <div class="row q-col-gutter-md">
-
-                        <div class="col-shrink">
-                            <div class="q-mb-sm">
-                                <!-- up -->
-                                <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" :color="$light.color"
-                                    dense unelevated :disable="!isAllowMoveUp(index)" />
-                            </div>
 
-                            <div class="q-mb-sm">
-                                <q-btn type="button" @click="onRemove" icon="sym_o_remove" :color="$light.color" dense unelevated
-                                    :disable="!isAllowRemove" />
+        <div ref="parent">
+            <FormKit type="group" v-for="(item, index) in items" :index="index" :key="item">
+                <q-card class="q-mb-sm" flat>
+                    <q-card-section>
+                        <div class="row q-col-gutter-md">
+                            <div class="col-shrink">
+                                <div class="q-mb-sm"  v-if="sortable">
+                                    <q-btn icon="sym_o_drag_handle" dense unelevated :color="$light.color"
+                                        style="cursor: grab;" class="l-repeater-handle">
+                                    </q-btn>
+                                </div>
+                                <div class="q-mb-sm" v-if="sortable">
+                                    <!-- up -->
+                                    <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward"
+                                        :color="$light.color" dense unelevated :disable="!isAllowMoveUp(index)" />
+                                </div>
+
+                                <div class="q-mb-sm">
+                                    <q-btn type="button" @click="onRemove" icon="sym_o_remove" :color="$light.color"
+                                        dense unelevated :disable="!isAllowRemove" />
+                                </div>
+                                <div class="q-mb-sm" v-if="sortable">
+                                    <!-- down -->
+                                    <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward"
+                                        :color="$light.color" dense unelevated :disable="!isAllowMoveDown(index)" />
+                                </div>
                             </div>
 
-
-                            <div class="q-mb-sm">
-                                <!-- down -->
-                                <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" :color="$light.color"
-                                    dense unelevated :disable="!isAllowMoveDown(index)" />
+                            <div class="col">
+                                <slot v-bind="{ value: localValue[index] }"></slot>
                             </div>
-
                         </div>
-
-                        <div class="col">
-                            <slot v-bind="{ value: localValue[index] }"></slot>
-                        </div>
-                    </div>
-                </q-card-section>
-            </q-card>
-        </FormKit>
-
-        <q-btn :color="$light.color" @click="onAdd" icon="sym_o_add" :label="$t('Add')" :disable="localValue.length >= max"
-            unelevated></q-btn>
+                    </q-card-section>
+                </q-card>
+            </FormKit>
+        </div>
+
+        <q-toolbar>
+            <q-btn :color="$light.color" @click="onAdd" icon="sym_o_add" :label="$t('Add')"
+                :disable="localValue.length >= max" unelevated></q-btn>
+        </q-toolbar>
     </FormKit>
 </template>

package/dist/runtime/formkit/index.mjs

@@ -81,7 +81,7 @@ export const createLightPlugin = () => {
       case "l-repeater":
         return node.define({
           type: "input",
-          props: ["min", "max"],
+          props: ["min", "max", "sortable"],
           component: RepeaterVue
         });
       case "l-form":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "route-gen": "node route-generate.mjs"
   },
   "dependencies": {
+    "@formkit/drag-and-drop": "^0.0.24",
     "@hostlink/light": "^1.2.1",
     "@nuxt/kit": "^3.7.4",
     "@nuxt/module-builder": "^0.5.2",