@ramathibodi/nuxt-commons 0.1.42 → 0.1.44

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.42",
+  "version": "0.1.44",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -138,6 +138,7 @@ const inputTypeChoice = ref([
   { label: 'Radio Buttons', value: 'VRadio' },
   { label: 'Radio Buttons Inline', value: 'VRadioInline' },
   { label: 'Checkbox', value: 'VCheckbox' },
+  { label: 'Checkbox Group', value: 'FormCheckboxGroup' },
   { label: 'Switch', value: 'VSwitch' },
   { label: 'File Upload', value: 'FormFile' },
   { label: 'Signature Pad', value: 'FormSignPad' },
@@ -149,7 +150,7 @@ const inputTypeChoice = ref([
   { label: '[Advanced] Custom Code', value: 'CustomCode' },
 ]);
 
-const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete','FormTable','DocumentForm'])
+const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete','FormTable','DocumentForm','FormCheckboxGroup'])
 const notRequireVariable = ref(['Header', 'Separator', 'CustomCode','DocumentForm'])
 const notRequireLabel = ref(['Separator', 'CustomCode', 'FormFile', 'FormHidden','DocumentForm'])
 const notRequireWidth = ref(['Separator', 'FormHidden','DocumentForm'])
@@ -161,7 +162,7 @@ const notRequireAdvancedSetting = ref(['Separator','CustomCode', 'FormHidden'])
 
 const hasSpecificOption = ref(['FormHidden','FormTable'])
 
-const choiceOption = ref(['VRadio', 'VRadioInline','VSelect', 'VAutocomplete', 'VCombobox'])
+const choiceOption = ref(['VRadio', 'VRadioInline','VSelect', 'VAutocomplete', 'VCombobox','FormCheckboxGroup'])
 const inputOptionsLabel = ref<Record<string,string>>({
   'MasterAutocomplete' : "Group Key",
   'Header' : "Class",

package/dist/runtime/components/form/CheckboxGroup.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, watch, computed} from 'vue'
+import { VCheckbox } from 'vuetify/components/VCheckbox'
+import { join,without,filter,head,reject } from 'lodash-es'
+interface Items {
+  label : string
+  value : any
+}
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCheckbox['$props']>{
+  items : Items[]
+  label? : string
+  modelValue : []
+  inline? : boolean
+  rules?: typeof import('vuetify/components')['VCheckbox']['rules']
+}
+const props =  withDefaults(defineProps<Props>(),{
+  inline:false
+})
+const emit = defineEmits(['update:modelValue'])
+const values = ref([])
+const valuesOther = ref()
+
+const computedRules = computed(() => {
+  if (props.rules){
+    let rules = props.rules.map((rule : any) => rule(values.value.length ? values.value : null))
+    rules = without(rules,true)
+    return join(rules,',')
+  }
+})
+const computedOther = computed(() => {
+  const itemOther = filter(props.items,{value:'other'})
+  return head(itemOther)
+})
+
+const computeItems = computed(() => {
+  return reject(props.items , {value:'other'})
+})
+
+watch(values, () => {
+  emit('update:modelValue', [...values.value, valuesOther.value].filter(Boolean))
+}, {deep: true});
+
+watch(valuesOther, () => {
+  emit('update:modelValue', [...values.value, valuesOther.value].filter(Boolean))
+})
+
+watch(props.modelValue, () => {
+  if (!props.modelValue) {
+    values.value = []
+    valuesOther.value = ''
+  } else {
+    // Separate regular values and the "other" value if applicable
+    if (Array.isArray(props.modelValue)) {
+      valuesOther.value = props.modelValue.find(item => !props.items.some(({ value }) => value === item)) || ''
+      values.value = props.modelValue.filter(item => item !== valuesOther.value)
+    }
+  }
+}, { deep: true, immediate: true })
+</script>
+
+<template>
+  <v-container fluid>
+    <label class="text-body-1 opacity-60">{{props.label}}</label>
+    <div :class="`d-flex ${inline ? 'flex-row':'flex-column'}`">
+      <v-checkbox v-for="item in computeItems"
+                  :value="item.value"
+                  v-model="values"
+                  density="compact"
+                  hide-details
+                  :error = "!!computedRules"
+                  :="$attrs"
+                  :label="item.label">
+      </v-checkbox>
+    </div>
+    <v-text-field hide-details
+                  :error = "!!computedRules"
+                  v-if="computedOther"
+                  v-model="valuesOther"
+                  :="$attrs"
+                  :label="computedOther.label">
+
+    </v-text-field>
+    <label class="text-error text-subtitle-2 ml-1">
+      {{computedRules}}
+    </label>
+  </v-container>
+
+</template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/form/Date.vue

@@ -6,6 +6,7 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import {isArray, isString} from "lodash-es";
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from "../../composables/utils/validation";
+import {VInput} from "vuetify/components/VInput";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   locale?: 'TH' | 'EN'
@@ -179,44 +180,50 @@ defineExpose({
 </script>
 
 <template>
-  <v-menu
-    v-model="isMenuOpen"
-    :open-on-click="false"
-  >
-    <template #activator="{ props: activatorProps }">
-      <v-text-field
-        ref="textFieldRef"
-        v-model="displayedDate"
-        :rules="computedRules"
-        v-bind="$attrs"
-        @focus="handleTextFieldFocus"
-        @blur="handleTextFieldBlur"
-        @keydown="handleTextFieldInput"
-        @keyup.enter="handleTextFieldEnterKey"
-        @click:clear="handleTextFieldClear"
-        @click="toggleMenuOpen('textField')"
+  <v-input v-model="displayedDate" v-bind="$attrs" ref="inputRef">
+    <template #default="{isReadonly,isDisabled}">
+      <v-menu
+          v-model="isMenuOpen"
+          :open-on-click="false"
       >
-        <template #append-inner>
-          <v-icon
-            v-bind="activatorProps"
-            @click="toggleMenuOpen('icon')"
-          >
-            fa:fa-regular fa-calendar
-          </v-icon>
+        <template #activator="{ props: activatorProps }">
+            <v-text-field
+                ref="textFieldRef"
+                v-model="displayedDate"
+                :rules="computedRules"
+                v-bind="$attrs"
+                @focus="handleTextFieldFocus"
+                @blur="handleTextFieldBlur"
+                @keydown="handleTextFieldInput"
+                @keyup.enter="handleTextFieldEnterKey"
+                @click:clear="handleTextFieldClear"
+                @click="toggleMenuOpen('textField')"
+            >
+              <template #append-inner>
+                <v-icon v-if="!isReadonly.value"
+                    v-bind="activatorProps"
+                    @click="toggleMenuOpen('icon')"
+                >
+                  fa:fa-regular fa-calendar
+                </v-icon>
+              </template>
+            </v-text-field>
         </template>
-      </v-text-field>
+        <Datepicker
+            v-model="selectedDate"
+            model-type="yyyy-MM-dd"
+            :enable-time-picker="false"
+            :flow="flow"
+            :min-date="props.minDate"
+            :max-date="props.maxDate"
+            auto-apply
+            inline
+            :locale="locale"
+            @update:model-value="updateDatePicker"
+        />
+      </v-menu>
     </template>
-    <Datepicker
-      v-model="selectedDate"
-      model-type="yyyy-MM-dd"
-      :enable-time-picker="false"
-      :flow="flow"
-      :min-date="props.minDate"
-      :max-date="props.maxDate"
-      auto-apply
-      inline
-      :locale="locale"
-      @update:model-value="updateDatePicker"
-    />
-  </v-menu>
+
+  </v-input>
+
 </template>

package/dist/runtime/components/form/DateTime.vue

@@ -4,6 +4,7 @@ import { union,isBoolean,isArray,isString } from 'lodash-es'
 import { VTextField } from 'vuetify/components/VTextField'
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from '../../composables/utils/validation'
+import {VInput} from "vuetify/components/VInput";
 
 interface Props {
   modelValue?: string | null
@@ -158,38 +159,43 @@ watch(() => props.modelValue, () => {
 </script>
 
 <template>
-  <v-container
-    :fluid="true"
-    class="pa-0"
-  >
-    <v-row :dense="dense">
-      <v-col cols="8">
-        <FormDate
-          v-model="datePart"
-          ref="dateRef"
-          :rules="computedDateRules"
-          :label="label"
-          :format="format"
-          :picker-only="pickerOnly"
-          :readonly="readonly"
-          :disabled="fixedDate"
-          :min-date="minDate"
-          :max-date="maxDate"
-          v-bind="$attrs"
-        />
-      </v-col>
-      <v-col cols="4">
-        <FormTime
-          v-model="timePart"
-          ref="timeRef"
-          :rules="computedTimeRules"
-          :label="label"
-          :enable-seconds="enableSeconds"
-          :picker-only="pickerOnly"
-          :readonly="readonly"
-          v-bind="$attrs"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-input v-model="datePart" v-bind="$attrs" ref="inputRef">
+    <template #default="{isReadonly,isDisabled}">
+      <v-container
+          :fluid="true"
+          class="pa-0"
+      >
+        <v-row :dense="dense">
+          <v-col cols="8">
+            <FormDate
+                v-model="datePart"
+                ref="dateRef"
+                :rules="computedDateRules"
+                :label="label"
+                :format="format"
+                :picker-only="pickerOnly"
+                :readonly="isReadonly.value"
+                :disabled="fixedDate"
+                :min-date="minDate"
+                :max-date="maxDate"
+                v-bind="$attrs"
+            />
+          </v-col>
+          <v-col cols="4">
+            <FormTime
+                v-model="timePart"
+                ref="timeRef"
+                :rules="computedTimeRules"
+                :label="label"
+                :enable-seconds="enableSeconds"
+                :picker-only="pickerOnly"
+                :readonly="isReadonly.value"
+                v-bind="$attrs"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </template>
+  </v-input>
+
 </template>

package/dist/runtime/components/form/Time.vue

@@ -4,6 +4,7 @@ import { VTextField } from 'vuetify/components/VTextField'
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 import { Datetime } from '../../utils/datetime'
+import {VInput} from "vuetify/components/VInput";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   enableSeconds?: boolean
@@ -122,44 +123,49 @@ defineExpose({
 </script>
 
 <template>
-  <v-menu
-    v-model="isMenuOpen"
-    :close-on-content-click="false"
-    :open-on-click="false"
-  >
-    <template #activator="{ props }">
-      <v-text-field
-        ref="textFieldRef"
-        v-model="tempTime"
-        v-bind="$attrs"
-        @focus="onTextFieldFocus"
-        @blur="onTextFieldBlur"
-        @keydown="onTextFieldTyped"
-        @keyup.enter="onTextFieldEnterKey"
-        @click:clear="onTextFieldClear"
-        @click="toggleMenuOpen('textField')"
+  <v-input v-model="displayedDate" v-bind="$attrs" ref="inputRef">
+    <template #default="{isReadonly,isDisabled}">
+      <v-menu
+          v-model="isMenuOpen"
+          :close-on-content-click="false"
+          :open-on-click="false"
       >
-        <template #append-inner>
-          <v-icon
-            v-bind="props"
-            @click="toggleMenuOpen('icon')"
+        <template #activator="{ props }">
+          <v-text-field
+              ref="textFieldRef"
+              v-model="tempTime"
+              v-bind="$attrs"
+              @focus="onTextFieldFocus"
+              @blur="onTextFieldBlur"
+              @keydown="onTextFieldTyped"
+              @keyup.enter="onTextFieldEnterKey"
+              @click:clear="onTextFieldClear"
+              @click="toggleMenuOpen('textField')"
           >
-            fa:fa-regular fa-clock
-          </v-icon>
+            <template #append-inner>
+              <v-icon v-if="!isReadonly.value"
+                  v-bind="props"
+                  @click="toggleMenuOpen('icon')"
+              >
+                fa:fa-regular fa-clock
+              </v-icon>
+            </template>
+          </v-text-field>
         </template>
-      </v-text-field>
+        <Datepicker
+            v-model="time"
+            model-type="HH:mm:ss"
+            :enable-seconds="enableSeconds"
+            minutes-grid-increment="1"
+            time-picker
+            auto-apply
+            :close-on-auto-apply="false"
+            inline
+            :locale="locale"
+            @update:model-value="setDatePicker"
+        />
+      </v-menu>
     </template>
-    <Datepicker
-      v-model="time"
-      model-type="HH:mm:ss"
-      :enable-seconds="enableSeconds"
-      minutes-grid-increment="1"
-      time-picker
-      auto-apply
-      :close-on-auto-apply="false"
-      inline
-      :locale="locale"
-      @update:model-value="setDatePicker"
-    />
-  </v-menu>
+  </v-input>
+
 </template>

package/dist/runtime/composables/document/template.js

@@ -1,5 +1,6 @@
 import { processTemplateFormTable } from "./templateFormTable.js";
 import { processTemplateFormHidden } from "./templateFormHidden.js";
+import { some, includes } from "lodash-es";
 export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?)(,(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?))*$/;
 export function useDocumentTemplate(items, parentTemplates) {
   if (!items) return "";
@@ -26,6 +27,10 @@ function templateItemToString(item, parentTemplates) {
       const choice = optionStringToChoiceObject(item.inputOptions);
       optionString = `item-value="value" item-title="label" :items='${escapeObjectForInlineBinding(choice)}' `;
     }
+    if (["FormCheckboxGroup"].includes(item.inputType)) {
+      const choice = optionStringToChoiceObject(item.inputOptions);
+      optionString = ` :items='${escapeObjectForInlineBinding(choice)}'`;
+    }
     if (["VRadio", "VRadioInline"].includes(item.inputType)) {
       const choice = optionStringToChoiceObject(item.inputOptions);
       optionString = choice.map((choiceItem) => `<v-radio label="${choiceItem.label || ""}" value="${choiceItem.value || ""}" ${item.inputAttributes ? " " + item.inputAttributes : ""}></v-radio>`).join("");
@@ -117,5 +122,7 @@ export function buildValidationRules(validationString) {
 }
 export function processDefaultTemplate(item, insideTemplate, optionString, validationRules) {
   if (!validationRules) validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
-  return `<${item.inputType} v-model="data.${item.variableName || ""}" label="${item.inputLabel || item.variableName || ""}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}>${insideTemplate || ""}</${item.inputType}>`;
+  const hasVariant = some([item.inputAttributes], (str) => includes(str, "variant"));
+  const defaultAttributes = `${!hasVariant ? `variant="underlined"` : ""} :active=isReadonly`;
+  return `<${item.inputType} ${defaultAttributes} v-model="data.${item.variableName || ""}" label="${item.inputLabel || item.variableName || ""}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}>${insideTemplate || ""}</${item.inputType}>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -115,5 +115,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
+  "packageManager": "pnpm@9.15.5+sha512.845196026aab1cc3f098a0474b64dfbab2afe7a1b4e91dd86895d8e4aa32a7a6d03049e2d0ad770bbe4de023a7122fb68c1a1d6e0d033c7076085f9d5d4800d4"
 }