@hostlink/nuxt-light 1.1.2 → 1.1.4

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.1.2"
+  "version": "1.1.4"
 }

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

@@ -188,6 +188,19 @@ const containerStyle = computed(() => {
     }
 })
 
+const fullscreen = ref(document.fullscreenElement)
+
+const onFullscreen = () => {
+    if (document.fullscreenElement) {
+        document.exitFullscreen();
+        fullscreen.value = false;
+    } else {
+        fullscreen.value = true;
+
+        document.documentElement.requestFullscreen();
+    }
+}
+
 </script>
 
 <template>
@@ -205,6 +218,11 @@ const containerStyle = computed(() => {
 
                 <q-space />
 
+                <q-btn :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'" round flat dense class="q-mr-sm"
+                    @click="onFullscreen">
+
+                </q-btn>
+
                 <q-btn v-if="languages.length > 1" rounded flat icon="language" :label="my.language" class="q-mr-sm">
                     <q-menu>
                         <q-list>

package/dist/runtime/components/l-date-picker.vue

@@ -7,7 +7,14 @@ import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
-export interface LDatePickerProps extends QDateProps {
+interface DateRange {
+    from: string,
+    to: string
+}
+
+
+export interface LDatePickerProps {
+    modelValue?: string | DateRange
     label?: string
     required?: boolean
     hideBottomSpace?: boolean
@@ -18,7 +25,9 @@ export interface LDatePickerProps extends QDateProps {
     dense?: boolean
     square?: boolean
     stackLabel?: boolean
-    rules?: any[]
+    rules?: any[],
+    range?: boolean,
+    mask?: string
 }
 
 const props = withDefaults(defineProps<LDatePickerProps>(), {
@@ -33,27 +42,66 @@ const props = withDefaults(defineProps<LDatePickerProps>(), {
     mask: "YYYY-MM-DD",
 })
 
+
 const light = useLight();
 
-const emit = defineEmits(["update:modelValue"]);
-const popup = ref(null);
+const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string | object): void
+}>();
+
+const popup = ref<any>(null);
 const localValue = computed({
     get: () => {
-        if (props.range) {
-            if (props.modelValue) {
+        //if is object
+        if (props.modelValue) {
+            if (typeof props.modelValue == "object") {
                 return props.modelValue.from + " - " + props.modelValue.to
             }
         }
+
         return props.modelValue
     },
     set: (value) => {
-        if (popup.value) {
-            popup.value.hide();
+        if (value == null) {
+            emit('update:modelValue', value)
+            return;
+        }
+
+        //is object
+        if (typeof value == "object") {
+            emit('update:modelValue', value)
+            return;
+        }
+
+        if (props.range) {
+
+            //try to split
+            const parts = value.split(" - ");
+            if (parts.length == 2) {
+                const from = parts[0];
+                const to = parts[1];
+                if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                    emit('update:modelValue', { from, to })
+                    return;
+                }
+            }
         }
 
         emit('update:modelValue', value)
     }
+});
 
+const dateValue = computed({
+    get: () => {
+        return props.modelValue
+    },
+    set: (value) => {
+        if (popup.value) {
+            popup.value.hide();
+        }
+        (localValue as any).value = value;
+        emit('update:modelValue', value)
+    }
 });
 
 const rules: any = [];
@@ -78,25 +126,22 @@ if (!props.range) {
 }
 
 const input_attrs = computed(() => {
-    const attrs: any = {
-        label: props.label,
-        rules: rules,
-        hideBottomSpace: props.hideBottomSpace,
-        mask: props.range ? "####-##-## - ####-##-##" : "####-##-##"
-    }
-
-    if (props.filled == undefined) attrs.filled = light.getStyle("inputFilled");
-    if (props.outlined == undefined) attrs.outlined = light.getStyle("inputOutlined");
-    if (props.standout == undefined) attrs.standout = light.getStyle("inputStandout");
-    if (props.rounded == undefined) attrs.rounded = light.getStyle("inputRounded");
-    if (props.dense == undefined) attrs.dense = light.getStyle("inputDense");
-    if (props.square == undefined) attrs.square = light.getStyle("inputSquare");
-    if (props.stackLabel == undefined) attrs.stackLabel = light.getStyle("inputStackLabel");
+    let a = { ...props }
+    a.rules = rules;
+    a.mask = props.range ? "####-##-## - ####-##-##" : "####-##-##"
+
+    if (props.filled == undefined) a.filled = light.getStyle("inputFilled");
+    if (props.outlined == undefined) a.outlined = light.getStyle("inputOutlined");
+    if (props.standout == undefined) a.standout = light.getStyle("inputStandout");
+    if (props.rounded == undefined) a.rounded = light.getStyle("inputRounded");
+    if (props.dense == undefined) a.dense = light.getStyle("inputDense");
+    if (props.square == undefined) a.square = light.getStyle("inputSquare");
+    if (props.stackLabel == undefined) a.stackLabel = light.getStyle("inputStackLabel");
 
     if (props.label) {
-        attrs.label = t(props.label);
+        a.label = t(props.label);
     }
-    return attrs;
+    return a;
 })
 
 const date_attrs = computed(() => {
@@ -111,7 +156,7 @@ const date_attrs = computed(() => {
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-date v-bind="date_attrs" v-model="localValue">
+                    <q-date v-bind="date_attrs" v-model="dateValue">
                         <div class="row items-center justify-end">
                             <q-btn v-close-popup label="Close" color="primary" flat />
                         </div>

package/dist/runtime/components/l-editor.vue

@@ -4,8 +4,30 @@ import { type QEditorProps, useQuasar } from "quasar"
 
 const $q = useQuasar();
 
+const editorRef = ref(null)
+const textColorRef = ref(null)
+const textHightlightRef = ref(null)
+
+const highlight = ref('#ffff00aa')
+const foreColor = ref('#000000')
+
+const TextColorCMD = ((cmd, name) => {
+    const edit = editorRef.value
+    textColorRef.value.hide()
+    edit.caret.restore()
+    edit.runCmd(cmd, name)
+    edit.focus()
+})
+
+const TextHightlightCMD = ((cmd, name) => {
+    const edit = editorRef.value
+    textHightlightRef.value.hide()
+    edit.caret.restore()
+    edit.runCmd(cmd, name)
+    edit.focus()
+})
+
 export interface LEditorProps extends QEditorProps {
-    
 }
 
 const emit = defineEmits(["update:modelValue"]);
@@ -48,8 +70,9 @@ const newToolBar = [
         }
     ],
     ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
-    ['token', 'hr', 'link', 'custom_btn'],
-    ['print', 'fullscreen'],
+    ['token', 'hr', 'link'],
+    //['print'],
+    ['fullscreen'],
     [
         {
             label: $q.lang.editor.formatting,
@@ -99,6 +122,9 @@ const newToolBar = [
                 'verdana'
             ]
         },
+        'textColor',
+        'textHightlight',
+        'custom_btn',
         'removeFormat'
     ],
     ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
@@ -121,5 +147,66 @@ const newFonts = {
 </script>
 
 <template>
-    <q-editor v-model="localValue" v-bind="attrs" />
+    <q-editor v-model="localValue" ref="editorRef" v-bind="attrs">
+        <template v-slot:textColor>
+            <q-btn-dropdown dense no-caps ref="textColorRef" no-wrap unelevated color="white" text-color="default"
+                label="Text Color" icon="sym_o_format_color_text" size="sm">
+                <q-item tag="label" clickable @click="TextColorCMD('foreColor', foreColor)">
+                    <q-item-section side>
+                        <q-icon name="sym_o_format_color_text" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-color v-model="foreColor" no-header no-footer style="max-width: 250px;" />
+                        <!-- :palette="[
+                                '#ff0000',
+                                '#ff8000',
+                                '#ffff00',
+                                '#00ff00',
+                                '#00ff80',
+                                '#00ffff',
+                                '#0080ff',
+                                '#0000ff',
+                                '#8000ff',
+                                '#ff00ff'
+                            ]" -->
+                    </q-item-section>
+                </q-item>
+            </q-btn-dropdown>
+        </template>
+        <template v-slot:textHightlight>
+            <q-btn-dropdown dense no-caps ref="textHightlightRef" no-wrap unelevated color="white" text-color="default"
+                label="Highlight" icon="sym_o_format_ink_highlighter" size="sm">
+
+                <q-item tag="label" clickable @click="TextHightlightCMD('backColor', highlight)">
+                    <q-item-section side>
+                        <q-icon name="sym_o_format_ink_highlighter" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-color v-model="highlight" no-header no-footer default-view="palette" :palette="[
+                            '#ffccccaa',
+                            '#ffe6ccaa',
+                            '#ffffccaa',
+                            '#ccffccaa',
+                            '#ccffe6aa',
+                            '#ccffffaa',
+                            '#cce6ffaa',
+                            '#ccccffaa',
+                            '#e6ccffaa',
+                            '#ffccffaa',
+                            '#ff0000aa',
+                            '#ff8000aa',
+                            '#ffff00aa',
+                            '#00ff00aa',
+                            '#00ff80aa',
+                            '#00ffffaa',
+                            '#0080ffaa',
+                            '#0000ffaa',
+                            '#8000ffaa',
+                            '#ff00ffaa'
+                        ]" style="max-width: 250px;" />
+                    </q-item-section>
+                </q-item>
+            </q-btn-dropdown>
+        </template>
+    </q-editor>
 </template>

package/dist/runtime/components/l-small-box.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+export interface LSmallBoxProps {
+    title: string;
+    subtitle: string;
+    icon: string;
+    color: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey'
+}
+
+const props = withDefaults(defineProps<LSmallBoxProps>(), {
+    title: '',
+    subtitle: '',
+    icon: 'local_offer',
+    color: 'indigo'
+});
+
+const item_class = computed(() => {
+    return ["bg-" + props.color + "-4"]
+
+})
+
+const section_class = computed(() => {
+    return ["text-white", "bg-" + props.color]
+})
+
+
+</script>
+
+<template>
+    <q-item :class="item_class" class="no-wrap q-pa-none text-white">
+        <q-item-section class="q-pa-lg q-mr-none text-white" :class="section_class" side>
+            <q-icon :name="icon" size="2rem" />
+        </q-item-section>
+        <q-item-section class="q-pa-md q-ml-none">
+            <q-item-label class="text-h6 text-white">{{ title }}</q-item-label>
+            <q-item-label caption class="text-white">{{ subtitle }}</q-item-label>
+        </q-item-section>
+    </q-item>
+</template>

package/dist/runtime/components/l-table.vue

@@ -375,6 +375,8 @@ const getFilterValue = () => {
 
 
 const onFilters = () => {
+    console.log("onFilters",filters.value)
+    
     //clone the filters
     onRequest({
         pagination: {
@@ -611,6 +613,7 @@ const localSelected = computed({
 
                         </template>
 
+
                         <template v-if="col.searchType == 'date'">
                             <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
                                 v-model="filters[col.name]" @update:model-value="onFilters" range @clear="onFilters" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",