renusify 2.5.1 → 3.0.0

package/components/form/groupInput/index.vue

@@ -1,33 +1,34 @@
 <template>
   <r-input :class="`${$r.prefix}group-input`"
            :model-value="modelValue"
-           hide>
-    <div class="w-full">
-      <span v-if="label" class="group-input-label">{{ label }}</span>
+           label-active
+  >
+    <div>
       <div :key="key" v-sortable="{grab:'.grab-btn-group-input',end:end}">
-      <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
-        <div class="group-slot">
-          <slot :item="item" :index="i" :disableDel="disDel">
-            <div v-if="template" class="d-flex flex-wrap pt-5 v-start">
-              <template v-for="(v,k) in item" :key="i+'-'+k">
-                <component :is="template[k]['type']" v-if="template[k]&&template[k]['type']" v-model="item[k]"
-                           :label="t(k)"
-                           class="flex-grow-0 me-1" v-bind="template[k]['props']"></component>
-              </template>
-            </div>
-        </slot>
-      </div>
-        <div class="group-action">
-          <r-btn icon text class="grab-btn-group-input">
-            <r-icon v-html="$r.icons.drag"></r-icon>
-          </r-btn>
-          <r-btn v-if="!disableItems.includes(itemKey?item[itemKey]:'')" icon text @click.prevent="del(i)">
-            <r-icon v-html="$r.icons.delete" class="color-error-text"></r-icon>
-          </r-btn>
+        <div v-for="(item,i) in modelValue" :key="i" class="group-holder">
+          <div class="group-slot">
+            <!-- Default slot for custom group item content. Provide disableDel, index, item props.  -->
+            <slot :disableDel="disDel" :index="i" :item="item">
+              <div v-if="template" class="d-flex flex-wrap pt-5 v-start">
+                <template v-for="(v,k) in item" :key="i+'-'+k">
+                  <component :is="template[k]['type']" v-if="template[k]&&template[k]['type']" v-model="item[k]"
+                             :label="t(k)"
+                             class="flex-grow-0 me-1" v-bind="template[k]['props']"></component>
+                </template>
+              </div>
+            </slot>
+          </div>
+          <div class="group-action">
+            <r-btn class="grab-btn-group-input" icon text>
+              <r-icon v-html="$r.icons.drag"></r-icon>
+            </r-btn>
+            <r-btn v-if="!disableItems.includes(itemKey?item[itemKey]:'')" icon text @click.prevent="del(i)">
+              <r-icon class="color-error-text" v-html="$r.icons.delete"></r-icon>
+            </r-btn>
+          </div>
         </div>
       </div>
-      </div>
-      <div class="mt-5" :class="addBtnClass">
+      <div :class="addBtnClass" class="my-3">
         <transition name="scale">
           <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
             <r-icon v-html="$r.icons.plus" class="color-white-text"></r-icon>
@@ -37,101 +38,198 @@
     </div>
   </r-input>
 </template>
-<script>
-export default {
-  name: 'rGroupInput',
-  props: {
-    label: String,
-    itemKey: String,
-    modelValue: Array,
-    size: Number,
-    disableAdd: Boolean,
-    translate: Boolean,
-    template: Object,
-    addBtnClass: {'type': String, default: 'text-center'}
+<script setup>
+import {ref, computed, inject} from 'vue'
+
+const props = defineProps({
+  /**
+   * Key to identify items that should not be deletable
+   * @type {String}
+   */
+  itemKey: String,
+
+  /**
+   * The model value for the group items (v-model)
+   * @type {Array}
+   * @default () => []
+   */
+  modelValue: {
+    type: Array,
+    default: () => []
   },
-  emits:['update:modelValue','add','delete'],
-  data() {
-    return {
-      key: 0,
-      disabledDel: {}
+
+  /**
+   * Maximum number of items allowed
+   * @type {Number}
+   */
+  size: Number,
+
+  /**
+   * Disables the add button
+   * @type {Boolean}
+   */
+  disableAdd: Boolean,
+
+  /**
+   * Enables translation for item keys
+   * @type {Boolean}
+   */
+  translate: Boolean,
+
+  /**
+   * Template configuration for dynamic form generation
+   * @type {Object}
+   */
+  template: Object,
+
+  /**
+   * CSS class for the add button container
+   * @type {String}
+   * @default 'text-center'
+   */
+  addBtnClass: {
+    type: String,
+    default: 'text-center'
+  }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the model value changes
+   * @param {Array} items - Updated array of items
+   */
+  'update:modelValue',
+
+  /**
+   * Emitted when a new item is added
+   * @param {Boolean} true - Indicates an item was added
+   */
+  'add',
+
+  /**
+   * Emitted when an item is deleted
+   * @param {Number} index - Index of the deleted item
+   */
+  'delete'
+])
+
+const {$t, $helper} = inject('renusify')
+
+const key = ref(0)
+const disabledDel = ref({})
+
+const disableItems = computed(() => Object.keys(disabledDel.value))
+
+const show_add = computed(() => {
+  if (props.disableAdd) {
+    return false
+  }
+
+  const length = $helper.ifHas(props.modelValue, 0, 'length')
+  return !(props.size && length >= props.size)
+})
+
+/**
+ * Handles drag-and-drop reordering completion
+ * @param {Array} e - Array of new item indices after reorder
+ */
+const end = (e) => {
+  const newArray = []
+  for (let i = 0; i < e.length; i++) {
+    const index = parseInt(e[i])
+    if (props.modelValue[index] !== undefined) {
+      newArray.push(props.modelValue[index])
     }
-  },
-  computed: {
-    disableItems() {
-      return Object.keys(this.disabledDel)
-    },
-    show_add() {
-      if (this.disableAdd) {
-        return false
+  }
+
+  emit('update:modelValue', newArray)
+  key.value++
+}
+
+/**
+ * Translates a key if translation is enabled
+ * @param {String} k - Key to translate
+ * @returns {String} Translated text or original key
+ */
+const t = (k) => {
+  if (props.translate && $t) {
+    return $t(k)
+  }
+  return k
+}
+
+/**
+ * Marks an item as non-deletable
+ * @param {String} value - Item value to disable deletion for
+ */
+const disDel = (value) => {
+  disabledDel.value[value] = true
+}
+
+/**
+ * Adds a new item to the group
+ */
+const add = () => {
+  if (!show_add.value) return
+
+  const newArray = [...(props.modelValue || [])]
+  let newItem = {}
+
+  if (props.template) {
+    for (const key in props.template) {
+      let defaultValue = props.template[key]?.default !== undefined
+          ? props.template[key].default
+          : null
+
+      if (typeof defaultValue === 'object' && defaultValue !== null) {
+        defaultValue = $helper.clearProxy(defaultValue)
       }
-      const l = this.$helper.ifHas(this.modelValue, 0, 'length')
-      return !(this.size && l >= this.size);
+
+      newItem[key] = defaultValue
     }
-  },
-  methods: {
-    end(e) {
-      let a = []
-      for (let i = 0; i < e.length; i++) {
-        a.push(this.modelValue[parseInt(e[i])])
-      }
-      this.$emit('update:modelValue', a)
-      this.key++
-    },
-    t(k) {
-      if (this.translate) {
-        return this.$t(k)
-      }
-      return k
-    },
-    disDel(value) {
-      this.disabledDel[value] = true
-    },
-    add() {
-      if (this.show_add) {
-        let a = this.modelValue || []
-        let b = {}
-        if (this.template) {
-          for (let k in this.template) {
-            let d = this.template[k]['default'] !== undefined ? this.template[k]['default'] : null
-            if (typeof d === 'object') {
-              d = this.$helper.clearProxy(d)
-            }
-            b[k] = d
-          }
-        }
-        a.push(b)
-        this.$emit('add', true)
-        this.$emit('update:modelValue', a)
-      }
-    },
-    del(i) {
-      let a = this.modelValue || []
-      a.splice(i, 1)
-      this.$emit('delete', i)
-      this.$emit('update:modelValue', a)
-    },
   }
+
+  newArray.push(newItem)
+  emit('add', true)
+  emit('update:modelValue', newArray)
+}
+
+/**
+ * Deletes an item from the group
+ * @param {Number} index - Index of the item to delete
+ */
+const del = (index) => {
+  const newArray = [...(props.modelValue || [])]
+  newArray.splice(index, 1)
+
+  emit('delete', index)
+  emit('update:modelValue', newArray)
 }
 </script>
 <style lang="scss">
-@use "../../../style/variables/base";
-@use "../../../style/mixins";
+@use "../../../style" as *;
+
+.#{$prefix}group-input {
+  > .input-control {
+    height: auto;
+  }
 
-.#{base.$prefix}group-input {
-  .group-input-label {
-    color: var(--color-on-sheet);
+  .group-holder {
+    .input-control {
+      background-color: var(--color-sheet-container-low);
+    }
   }
+
   .group-holder {
     position: relative;
 
     .group-action {
       position: absolute;
       top: 0;
-      @include mixins.ltr() {
+      @include ltr() {
         right: 0;
       }
-      @include mixins.rtl() {
+      @include rtl() {
         left: 0;
       }
     }

package/components/form/index.vue

@@ -1,102 +1,208 @@
 <template>
   <form :class="`${$r.prefix}form`" @submit.prevent="submit">
+    <!-- Default slot for form content. Provides form context to child input components through dependency injection.
+     @example
+     <r-text-input label="name" :rules="[`required`]" ></r-text-input>
+     <r-text-input label="last name" :rules="[`required`]" ></r-text-input>
+     <r-number-input label="age" :rules="[`required`]" ></r-number-input>
+     -->
     <slot></slot>
   </form>
 </template>
-<script>
-
-export default {
-  name: 'r-form',
-  provide () {
-    return {
-      form: {
-        register: this.register,
-        unregister: this.unregister
-      }
-    }
-  },
-  props: {
-    modelValue: Boolean
-  },
-  emits: ['update:modelValue', 'submit'],
-  data: () => ({
-    inputs: [],
-    watchers: [],
-    errorBag: {}
-  }),
-  watch: {
-    errorBag: {
-      handler(val) {
-        const errors = Object.values(val).includes(true)
-        this.$emit('update:modelValue', !errors)
-      },
-
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    submit() {
-      this.$emit('submit', true)
-    },
-    watchInput(input) {
-      const watcher = input => {
-        return input.$watch('hasError', val => {
-          this.errorBag[input.uid] = val
-        }, {
-          immediate: true
-        })
-      }
-
-      const watchers = {
-        uid: input.uid,
-        valid: () => {
-        },
-        shouldValidate: () => {
-        }
-      }
-
-      watchers.valid = watcher(input)
-
-      return watchers
-    },
 
-    /** @public */
-    validate () {
-      return this.inputs.filter(input => !input.validate(true)).length === 0
-    },
+<script setup>
+import {ref, watch, provide, reactive} from 'vue'
 
-    /** @public */
-    reset () {
-      this.inputs.forEach(input => input.reset())
-    },
+const props = defineProps({
+  /**
+   * The form's model value indicating whether it's valid
+   * @model
+   * @type {Boolean}
+   * @default false
+   */
+  modelValue: Boolean
+})
 
-    /** @public */
-    resetValidation () {
-      this.inputs.forEach(input => input.resetValidation())
-    },
+const emit = defineEmits([
+  /**
+   * Emitted when form validity changes
+   * @param {Boolean} isValid - Whether the form is valid
+   */
+  'update:modelValue',
+
+  /**
+   * Emitted when form is submitted
+   * @param {Boolean} true - Form submission
+   */
+  'submit'])
 
-    register (input) {
-      this.inputs.push(input)
-      this.watchers.push(this.watchInput(input))
+/**
+ * Array of registered input components
+ * @type {Ref<Array<Object>>}
+ */
+const inputs = ref([])
+
+/**
+ * Array of watchers for input validation states
+ * @type {Ref<Array<Object>>}
+ */
+const watchers = ref([])
+
+/**
+ * Reactive error bag containing validation errors
+ * @type {Object}
+ * @property {Boolean} [inputUid] - Error state for each input by UID
+ */
+const errorBag = reactive({})
+
+// Watch for changes in errorBag to emit validity updates
+watch(
+    () => errorBag,
+    (val) => {
+      const errors = Object.values(val).includes(true)
+      emit('update:modelValue', !errors)
     },
+    {deep: true, immediate: true}
+)
 
-    unregister (input) {
-      const found = this.inputs.find(i => i.uid === input.uid)
-      if (!found) return
-      const unwatch = this.watchers.find(i => i.uid === found.uid)
+/**
+ * Form submission handler
+ * @method submit
+ * @fires RForm#submit
+ */
+const submit = () => {
+  emit('submit', true)
+}
 
-      if (unwatch) {
-        unwatch.valid()
-        unwatch.shouldValidate()
-      }
+/**
+ * Creates a watcher for an input's error state
+ * @method watchInput
+ * @param {Object} input - Input component instance
+ * @param {String} input.uid - Unique identifier for the input
+ * @param {Ref<Boolean>} input.hasError - Reactive error state
+ * @returns {Object} Watcher object with UID and cleanup functions
+ * @private
+ */
+const watchInput = (input) => {
+  const watcher = (input) => {
+    return watch(input.hasError, val => {
+      errorBag[input.uid] = val
+    }, {
+      immediate: true
+    })
+  }
 
-      this.watchers = this.watchers.filter(i => i.uid !== found.uid)
-      this.inputs = this.inputs.filter(i => i.uid !== found.uid)
-      delete this.errorBag[found.uid]
+  const watchersObj = {
+    uid: input.uid,
+    valid: () => {
+    },
+    shouldValidate: () => {
     }
+  }
+
+  watchersObj.valid = watcher(input)
 
+  return watchersObj
+}
+
+/**
+ * Validates all registered form inputs
+ * @method validate
+ * @returns {Boolean} True if all inputs are valid
+ */
+const validate = () => {
+  return inputs.value.filter(input => !input.validate(true)).length === 0
+}
+
+/**
+ * Resets all registered form inputs to their initial state
+ * @method reset
+ */
+const reset = () => {
+  inputs.value.forEach(input => input.reset())
+}
+
+/**
+ * Resets validation state for all registered inputs
+ * @method resetValidation
+ */
+const resetValidation = () => {
+  inputs.value.forEach(input => input.resetValidation())
+}
+
+/**
+ * Registers an input component with the form
+ * @method register
+ * @param {Object} input - Input component instance
+ * @private
+ */
+const register = (input) => {
+  inputs.value.push(input)
+  watchers.value.push(watchInput(input))
+}
+
+/**
+ * Unregisters an input component from the form
+ * @method unregister
+ * @param {Object} input - Input component instance
+ * @private
+ */
+const unregister = (input) => {
+  const found = inputs.value.find(i => i.uid === input.uid)
+  if (!found) return
+  const unwatch = watchers.value.find(i => i.uid === found.uid)
+
+  if (unwatch) {
+    unwatch.valid()
+    unwatch.shouldValidate()
   }
 
+  watchers.value = watchers.value.filter(i => i.uid !== found.uid)
+  inputs.value = inputs.value.filter(i => i.uid !== found.uid)
+  delete errorBag[found.uid]
 }
+
+/**
+ * Provides form context to child components
+ * @typedef {Object} FormContext
+ * @property {Function} register - Function to register input components
+ * @property {Function} unregister - Function to unregister input components
+ */
+provide('form', {
+  register,
+  unregister
+})
+
+defineExpose({
+  /**
+   * Form error bag containing validation errors
+   * @type {Object}
+   */
+  errorBag,
+
+  /**
+   * Validates all form inputs
+   * @method validate
+   * @returns {Boolean} True if all inputs are valid
+   */
+  validate,
+
+  /**
+   * Resets all form inputs to their initial state
+   * @method reset
+   */
+  reset,
+
+  /**
+   * Resets validation state for all inputs
+   * @method resetValidation
+   */
+  resetValidation,
+
+  /**
+   * Submits the form programmatically
+   * @method submit
+   */
+  submit
+})
 </script>