@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,90 +1,102 @@
-<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>
-    <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>
-
-</template>
-
+<script setup lang="ts">
+/**
+ * FormCheckboxGroup is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+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[] // option collection used for selection rendering
+  label?: string // UI label displayed to end users
+  modelValue: [] // Bound value for v-model synchronization with the parent component.
+  inline?: boolean // Displays checkbox options inline instead of stacked.
+  rules?: typeof import('vuetify/components')['VCheckbox']['rules'] // validation rules applied before accepting input
+}
+/**
+ * Public props accepted by FormCheckboxGroup.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props =  withDefaults(defineProps<Props>(),{
+  inline:false
+})
+/**
+ * Custom events emitted by FormCheckboxGroup.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+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>
+    <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>
+
+</template>
+
 <style scoped>
 
 </style>

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

@@ -1,37 +1,45 @@
-<script setup lang="ts">
-import {Codemirror} from 'vue-codemirror'
-import {oneDark} from '@codemirror/theme-one-dark'
-import {javascript} from '@codemirror/lang-javascript'
-import {html} from '@codemirror/lang-html'
-import {vue as vueLang} from '@codemirror/lang-vue'
-
-interface Props {
-  height?: string | number
-  minHeight?: string | number
-  lang?: 'html' | 'javascript' | 'vue'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  height: '100%',
-  minHeight: '20em',
-  lang: 'vue',
-})
-
-const extensions = [oneDark]
-if (props.lang == 'vue') {
-  extensions.push(vueLang({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
-}
-else {
-  extensions.push(javascript({ typescript: true }))
-}
-
-const model = defineModel<string>()
-</script>
-
-<template>
-  <codemirror
-    v-model="model"
-    :extensions="extensions"
-    :style="{ height: height, minHeight: minHeight }"
-  />
-</template>
+<script setup lang="ts">
+/**
+ * FormCodeEditor is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {Codemirror} from 'vue-codemirror'
+import {oneDark} from '@codemirror/theme-one-dark'
+import {javascript} from '@codemirror/lang-javascript'
+import {html} from '@codemirror/lang-html'
+import {vue as vueLang} from '@codemirror/lang-vue'
+
+interface Props {
+  height?: string | number // Fixed or minimum height applied to the component container.
+  minHeight?: string | number // Minimum editor/container height before scrolling is used.
+  lang?: 'html' | 'javascript' | 'vue' // Language code used when selecting localized option labels.
+}
+
+/**
+ * Public props accepted by FormCodeEditor.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  height: '100%',
+  minHeight: '20em',
+  lang: 'vue',
+})
+
+const extensions = [oneDark]
+if (props.lang == 'vue') {
+  extensions.push(vueLang({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
+}
+else {
+  extensions.push(javascript({ typescript: true }))
+}
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <codemirror
+    v-model="model"
+    :extensions="extensions"
+    :style="{ height: height, minHeight: minHeight }"
+  />
+</template>