renusify 2.5.2 → 3.0.0

package/components/formCreator/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!autoSend" :class="$r.prefix+'form-creator'" class="overflow-auto">
+  <div v-if="!autoSend" :class="$r.prefix+'form-creator'">
     <r-container>
       <h1 v-if="title" class="title-1">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
@@ -16,7 +16,17 @@
             </r-col>
           </template>
         </r-row>
-        <r-message :items="errors" type="error"></r-message>
+        <template v-for="(item,i) in errors"
+                  :key="i">
+          <div class="mb-2 br-md color-error d-flex">
+            <span>{{ $t(i) }}:</span>
+            <span class="flex-grow-1">
+            <div v-for="(er,k) in item" :key="k+'-'+i">
+                  {{ $t(er) }}
+            </div>
+          </span>
+          </div>
+        </template>
         <div class="text-end my-12">
           <r-btn @click.prevent="close"
                  class="color-error-text mx-1"
@@ -36,162 +46,318 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'r-form-creator',
-  props: {
-    url: {
-      required: true,
-      type: String
-    },
-    title: {
-      default: 'Add form',
-      type: String
-    },
-    autoSend: Boolean,
-    redirect: {
-      type: String
-    },
-    method: {
-      default: 'post',
-      type: String
-    },
-    options: {
-      required: false,
-      type: [Object, Array]
-    },
-    modelValue: {
-      default: function () {
-        return {}
-      },
-      type: Object
-    },
-    headers: Object
+<script setup>
+import {ref, watch, onMounted, inject} from 'vue'
+
+/**
+ * @example // Advanced usage with mixed fields
+ * <template>
+ * <r-form-creator :url="url"
+ *    :title="title"
+ *    :auto-Send="autoSend"
+ *    :redirect="redirect"
+ *    :method="method"
+ *    :options="options"
+ *    v-model="modelValue"
+ *    :headers="headers"
+ *    @update:model-Value="log(`update:modelValue`,$event)"
+ *    @ok="log(`ok`,$event)" ></r-form-creator>
+ * </template>
+ * <script>
+ * import { ref } from 'vue'
+ * const modelValue=ref(modelValue)
+ * const url=ref(null)
+ * const title=ref("Add form")
+ * const autoSend=ref(false)
+ * const method=ref("post")
+ * const headers=ref(null)
+ * const options=ref({
+ *       name:{"type": "r-text-input","props":{"rules": ["required"]}},
+ *       family:{"type": "r-text-input","props":{"rules": ["required"]}},
+ *       age:{"type": "r-number-input",$if:[["$name","!=","$family"]],"props":{"rules": ["required","min:7","max:70"]}},
+ *       phone:{"type": "r-mask-input",$if:[["$age",">",7],["$age","<=",60]],"props":{"rules": ["required"],"mask": "0NNN NNN NNNN"}},
+ *       mix:{"type": "r-text-input","$bind":[["label","name"]]},
+ *      })
+ * const log=(name,e)=>{
+ *   console.log(name,e)
+ * }
+ * <//script>
+ * */
+
+const props = defineProps({
+  /**
+   * API endpoint URL for form submission
+   * @type {String}
+   * @required
+   */
+  url: {
+    required: true,
+    type: String
   },
-  emits:['update:modelValue','ok'],
-  data() {
-    return {
-      loading: false,
-      valid: false,
-      editedItem: this.modelValue,
-      errors: [],
-      alertShow: false,
-      inputs: {}
-    }
+  /**
+   * Form title displayed in the UI
+   * @type {String}
+   * @default 'Add form'
+   */
+  title: {
+    default: 'Add form',
+    type: String
   },
-  created() {
-    if (this.autoSend) {
-      this.save()
-    }
+  /**
+   * Whether to automatically submit the form on mount
+   * @type {Boolean}
+   * @default false
+   */
+  autoSend: Boolean,
+  /**
+   * URL to redirect after successful submission
+   * @type {String}
+   */
+  redirect: {
+    type: String
   },
-  watch: {
-    modelValue: {
-      deep: true,
-      handler: function (n) {
-        this.editedItem = n
-      }
-    },
-    editedItem: {
-      deep: true,
-      handler: function (n) {
-        this.$emit('update:modelValue', n)
-      }
-    }
+  /**
+   * HTTP method for form submission
+   * @type {String}
+   * @default 'post'
+   * @values 'post', 'put', 'patch', 'delete'
+   */
+  method: {
+    default: 'post',
+    type: String
   },
-  methods: {
-    iff(data) {
-      const that = this
+  /**
+   * Form field configuration options
+   * @type {Object|Array}
+   * @description Defines form fields, validation rules, and conditional logic
+   *
+   * @example
+   * options:  {
+   *       name:{"type": "r-text-input","props":{"rules": ["required"]}},
+   *       family:{"type": "r-text-input","props":{"rules": ["required"]}},
+   *       age:{"type": "r-number-input",$if:[["$name","!=","$family"]],"props":{"rules": ["required","min:7","max:70"]}},
+   *       phone:{"type": "r-mask-input",$if:[["$age",">",7],["$age","<=",60]],"props":{"rules": ["required"],"mask": "0NNN NNN NNNN"}},
+   *       mix:{"type": "r-text-input","$bind":[["label","name"]]},
+   *      }
+   */
+  options: {
+    required: false,
+    type: [Object, Array]
+  },
+  /**
+   * Form data model value
+   * @model
+   * @type {Object}
+   * @default () => ({})
+   */
+  modelValue: {
+    default: () => ({}),
+    type: Object
+  },
+  /**
+   * Custom HTTP headers for the request
+   * @type {Object}
+   */
+  headers: Object
+})
 
-      function get(item, key) {
-        if (key.toString().startsWith('$')) {
-          return that.$helper.ifHas(item, null, ...key.substring(1).split('.'))
-        }
-        return key
-      }
+const emit = defineEmits([
+  /**
+   * Emitted when form data changes
+   * @event update:modelValue
+   * @param {Object} data - Updated form data
+   */
+  'update:modelValue',
 
-      if ('$if' in data) {
-        for (let i = 0; i < data['$if'].length; i++) {
-          const item = data['$if'][i]
-          let can = true
-          const one = get(this.editedItem, item[0])
-          const op = item[1]
-          const two = get(this.editedItem, item[2])
-          if (op === '===' || op === '==') {
-            can = one === two
-          } else if (op === '>') {
-            can = one > two
-          } else if (op === '>=') {
-            can = one >= two
-          } else if (op === '<') {
-            can = one < two
-          } else if (op === '<=') {
-            can = one <= two
-          } else if (op === '!=') {
-            can = one !== two
-          } else if (op === 'in') {
-            if (two && typeof two === 'object') {
-              can = two.includes(one)
-            } else {
-              can = false
-            }
-          } else {
-            can = false
-            console.error(`operator '${op}' is not defined.(form creator)`)
-          }
-          if (can === false) {
-            return false
-          }
-        }
+  /**
+   * Emitted when form submission is successful
+   * @event ok
+   * @param {Boolean} success - Always true
+   */
+  'ok'
+])
+
+// Dependency injection
+const {$helper, $t, $r} = inject('renusify')
+const $axios = inject('axios')
+
+/**
+ * Loading state for form submission
+ * @type {Ref<Boolean>}
+ */
+const loading = ref(false)
+
+/**
+ * Form validation state
+ * @type {Ref<Boolean>}
+ */
+const valid = ref(false)
+
+/**
+ * Server-side validation errors
+ * @type {Ref<Array>}
+ */
+const errors = ref([])
+
+/**
+ * Whether to show error alerts
+ * @type {Ref<Boolean>}
+ */
+const alertShow = ref(false)
+
+/**
+ * Reference to the form component instance
+ * @type {Ref<ComponentInstance|null>}
+ */
+const form = ref(null)
+
+/**
+ * Local copy of form data for editing
+ * @type {Ref<Object>}
+ */
+const editedItem = ref({...props.modelValue})
+
+const iff = (data) => {
+  const get = (item, key) => {
+    if (key.toString().startsWith('$')) {
+      return $helper.ifHas(item, null, ...key.substring(1).split('.'))
+    }
+    return key
+  }
+
+  if ('$if' in data) {
+    for (let i = 0; i < data['$if'].length; i++) {
+      const item = data['$if'][i]
+      let can = true
+      const one = get(editedItem.value, item[0])
+      const op = item[1]
+      const two = get(editedItem.value, item[2])
+
+      switch (op) {
+        case '===':
+        case '==':
+          can = one === two
+          break
+        case '>':
+          can = one > two
+          break
+        case '>=':
+          can = one >= two
+          break
+        case '<':
+          can = one < two
+          break
+        case '<=':
+          can = one <= two
+          break
+        case '!=':
+          can = one !== two
+          break
+        case 'in':
+          can = two && typeof two === 'object' ? two.includes(one) : false
+          break
+        default:
+          can = false
+          console.error(`operator '${op}' is not defined.(form creator)`)
       }
-      return true
-    },
-    getAttr(data) {
-      let res = data['props'] ? data['props'] : {}
-      if (data['$bind']) {
-        data['$bind'].forEach((item) => {
-          res[item[0]] = this.editedItem[item[1]]
-        })
+
+      if (can === false) {
+        return false
       }
-      return res
-    },
-    close() {
-      this.$emit('ok', true)
-      this.alertShow = false
-      this.errors = []
-      setTimeout(() => {
-        this.editedItem = Object.assign({}, {})
-        this.loading = false
-      }, 300)
-    },
-    save() {
-      if (!this.valid && this.$refs.form) {
-        this.$refs.form.validate()
-        const e = this.$refs.form.errorBag
-        for (let id in e) {
-          if (e[id]) {
-            document.getElementById(id)?.scrollIntoView({behavior: 'smooth'})
-            return;
-          }
-        }
+    }
+  }
+  return true
+}
+
+const getAttr = (data) => {
+  let res = data['props'] ? data['props'] : {}
+  if (data['$bind']) {
+    data['$bind'].forEach((item) => {
+      res[item[0]] = editedItem.value[item[1]]
+    })
+  }
+  return res
+}
+
+/**
+ * Handles form submission success
+ * @method close
+ * @fires RFormCreator#ok
+ * @private
+ */
+const close = () => {
+  emit('ok', true)
+  alertShow.value = false
+  errors.value = []
+  loading.value = false
+  if (form.value) {
+    form.value.reset()
+  }
+}
+
+/**
+ * Submits the form data to the server
+ * @method save
+ * @async
+ * @returns {Promise<void>}
+ * @private
+ */
+const save = () => {
+  // Validate form if not valid
+  if (!valid.value && form.value) {
+    form.value.validate()
+    const e = form.value.errorBag
+    for (let id in e) {
+      if (e[id]) {
+        // Scroll to first error field
+        document.getElementById(id)?.scrollIntoView({behavior: 'smooth'})
         return
       }
-      this.loading = true
-      this.$axios[this.method](this.url, this.editedItem, {headers: this.headers})
-          .then(() => {
-            this.close()
-          }, (error) => {
-            if (this.autoSend) {
-              this.close()
-            } else {
-              if (error.response.data.errors) {
-                this.errors = error.response.data.errors
-                this.alertShow = true
-              }
-              this.loading = false
-            }
-
-          })
     }
+    return
+  }
+
+  loading.value = true
+
+  $axios[props.method](props.url, editedItem.value, {headers: props.headers})
+      .then(() => {
+        close()
+      })
+      .catch((error) => {
+        if (props.autoSend) {
+          close()
+        } else {
+          if (error.response?.data?.errors) {
+            errors.value = error.response.data.errors
+            alertShow.value = true
+          }
+          loading.value = false
+        }
+      })
+}
+
+// Watch for changes in modelValue prop
+watch(() => props.modelValue, (newValue) => {
+  editedItem.value = {...newValue}
+}, {deep: true})
+
+// Watch for changes in editedItem and emit updates
+watch(editedItem, (newValue) => {
+  emit('update:modelValue', {...newValue})
+}, {deep: true})
+
+// Auto-submit on mount if autoSend is enabled
+onMounted(() => {
+  if (props.autoSend) {
+    save()
   }
+})
+</script>
+
+<style lang="scss">
+@use "../../style" as *;
+
+.#{$prefix}form-creator {
+  overflow: auto;
 }
-</script>
+</style>

package/components/highlight/index.vue

@@ -15,32 +15,48 @@
     <div :class="`highlight-code highlight-lang-${lang}`" v-html='txt'></div>
   </div>
 </template>
-<script>
+
+<script setup>
+import {ref, onMounted, inject} from 'vue'
+import {useHighlight} from './useHighlight.js'
 import './style.scss'
-import mixin from "./mixin";
-
-export default {
-  name: 'highlight',
-  mixins: [mixin],
-  props: {
-    name: String,
-    src: String,
-    hideLineNumbers: Boolean,
-    lang: {
-      type: String,
-      validator: function (value) {
-        return ['asm', 'bash', 'bf', 'c', 'css', 'csv', 'diff', 'docker', 'git', 'go', 'html', 'http', 'ini', 'java', 'js', 'jsdoc', 'json', 'log', 'lua', 'make', 'pl', 'plain', 'py', 'regex', 'rs', 'sql', 'todo', 'toml', 'ts', 'uri', 'xml', 'yaml'].indexOf(value) !== -1
-      }
-    }
-  },
-  data() {
-    return {
-      txt: '',
+
+const props = defineProps({
+  /**
+   * Name or identifier for the code block
+   * Optional name for the code snippet, can be used for labeling or referencing
+   */
+  name: String,
+
+  /**
+   * inline code content
+   */
+  src: String,
+
+  /**
+   * Whether to hide line numbers
+   */
+  hideLineNumbers: Boolean,
+
+  /**
+   * Programming language for syntax highlighting
+   */
+  lang: {
+    type: String,
+    validator: function (value) {
+      return ['asm', 'bash', 'bf', 'c', 'css', 'csv', 'diff', 'docker', 'git', 'go', 'html', 'http', 'ini', 'java', 'js', 'jsdoc', 'json', 'log', 'lua', 'make', 'pl', 'plain', 'py', 'regex', 'rs', 'sql', 'todo', 'toml', 'ts', 'uri', 'xml', 'yaml'].includes(value)
     }
-  },
-  async created() {
-    this.txt = await this.highlight(this.src, this.lang, this.hideLineNumbers);
   }
-}
-</script>
+})
+
+const $r = inject('$r')
+const $helper = inject('$helper')
+
+const {highlight} = useHighlight()
 
+const txt = ref('')
+
+onMounted(async () => {
+  txt.value = await highlight(props.src, props.lang, props.hideLineNumbers)
+})
+</script>

package/components/highlight/style.scss

@@ -1,6 +1,6 @@
-@use "../../style/variables/base";
+@use "../../style" as *;
 
-.#{base.$prefix}highlight {
+.#{$prefix}highlight {
   direction: ltr;
   text-align: left;
   white-space: pre;