renusify 2.5.2 → 3.0.1

package/components/form/jsonInput/JsonView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`${$r.prefix}json-view d-flex v-end flex-wrap`"
+  <div :class="`${$r.prefix}json-view d-flex v-start flex-wrap`"
        v-for="(value,key) in modelValue"
        :key="key">
     <div class="d-flex v-center me-1">
@@ -11,7 +11,7 @@
     <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
       <r-json-input :tile="tile"
                     :model-value="value"
-                    @update:model-value="emit(key,$event)"
+                    @update:model-value="emitValue(key,$event)"
                     :disableAdd="disableAdd||template!==undefined"
                     :disableDel="disableDel||template!==undefined"
                     :translate="translate"
@@ -22,76 +22,74 @@
       <r-text-input v-if="typeof value==='string'"
                     :tile="tile"
                     :label="!is_array?t(key):''"
-                    :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
+                    :model-value="value" @update:model-value="emitValue(key,$event)"></r-text-input>
       <r-number-input v-else-if="typeof value==='number'"
                       :tile="tile"
                       :label="!is_array?t(key):''"
-                      :model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
+                      :model-value="value" @update:model-value="emitValue(key,$event)"></r-number-input>
       <r-switch-input v-else-if="typeof value==='boolean'"
                       :tile="tile"
                       :label="!is_array?t(key):''"
-                      :model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
+                      :model-value="value" @update:model-value="emitValue(key,$event)"></r-switch-input>
 
     </div>
 
   </div>
 </template>
-<script>
-export default {
-  name: 'jsonView',
-  props: {
-    modelValue: Object,
-    template: Object,
-    disableAdd: Boolean,
-    disableDel: Boolean,
-    tile: Boolean,
-    translate: Boolean
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      time_id: null
-    }
-  },
-  computed: {
-    is_array() {
-      return Array.isArray(this.modelValue)
-    }
+<script setup>
+import {computed, inject} from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({})
   },
-  methods: {
-    t(key) {
-      if (this.translate) {
-        return this.$t(key)
-      }
-      return key
-    },
-    del(key) {
-      let o = this.modelValue
-      if (this.is_array) {
-        o.splice(key, 1)
-      } else {
-        delete o[key]
-      }
-      this.$emit('update:modelValue', o)
-    },
-    emit(k, v) {
-      let d = this.modelValue
-      d[k] = v
-      this.$emit('update:modelValue', d)
-    }
+  template: Object,
+  disableAdd: Boolean,
+  disableDel: Boolean,
+  tile: Boolean,
+  translate: Boolean
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const {$t} = inject('renusify')
+
+
+const is_array = computed(() => Array.isArray(props.modelValue))
+
+const t = (key) => {
+  if (props.translate && $t) {
+    return $t(key)
+  }
+  return key
+}
+
+const del = (key) => {
+  const newValue = JSON.parse(JSON.stringify(props.modelValue))
+
+  if (is_array.value) {
+    newValue.splice(key, 1)
+  } else {
+    delete newValue[key]
   }
+
+  emit('update:modelValue', newValue)
+}
+
+const emitValue = (key, value) => {
+  const newValue = JSON.parse(JSON.stringify(props.modelValue))
+
+  newValue[key] = value
+
+  emit('update:modelValue', newValue)
 }
+
 </script>
 <style lang="scss">
-@use "../../../style/variables/base";
-@use "../../../style/mixins";
+@use "../../../style" as *;
 
-.#{base.$prefix}json-view {
-  @include mixins.rtl() {
-    border-right: 1px solid var(--color-sheet-low);
-  }
-  @include mixins.ltr() {
-    border-left: 1px solid var(--color-sheet-low);
-  }
+.#{$prefix}json-view {
+  background-color: var(--color-sheet-container);
 }
 </style>

package/components/form/jsonInput/index.vue

@@ -1,38 +1,37 @@
 <template>
-  <div :class="[`${$r.prefix}json-input`,{'input-tile':c_tile}]">
+  <r-input :class="[`${$r.prefix}json-input`]"
+           :model-value="modelValue"
+           label-active>
     <div class="d-flex v-center">
-      <r-btn v-if="!disableEditKey" class="me-1 mb-1" icon @click.prevent="modeForm=!modeForm">{}</r-btn>
-      <div v-if="label">{{ label }}</div>
+      <r-btn v-if="!disableEditKey" class="my-1" icon size="sm" @click.prevent="modeForm=!modeForm">{ }</r-btn>
     </div>
     <div v-if="modeForm">
       <json-view :model-value="modelValue"
-                 @update:model-value="emit"
+                 @update:model-value="emitValue"
                  :template="template"
                  :disableAdd="disableAdd"
                  :disableDel="disableDel"
                  :translate="translate"
-                 :tile="tile"
       ></json-view>
       <r-btn
           v-if="!show &&!disableAdd"
           class="my-3 ms-1"
           icon
-          size="small"
+          size="sm"
           @click.prevent="open">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
       <div v-else-if="show" class="d-flex v-baseline flex-wrap">
+        <!-- Custom slot for add form with add function and info object -->
         <slot :add="add" :info="info">
           <r-text-input
               v-if="!is_array"
               v-model="info.key"
-              :label="keyLabel||$t('key','renusify')"
-              :tile="tile"
+              :placeholder="keyLabel||$t('key','renusify')"
               class="w-30 pe-1"></r-text-input>
           <div v-if="!valueType" class="w-20">
             <r-select-input v-model="info.type"
                             :items="['text','number','boolean','json','array']"
-                            :tile="tile"
                             :translate="translate"
                             class="me-1"
                             disableSearch
@@ -42,15 +41,15 @@
           </div>
           <r-text-input v-if="info.type==='text'"
                         v-model="info.value"
-                        :label="valueLabel||$t('value','renusify')"
-                        :tile="tile"></r-text-input>
+                        :placeholder="valueLabel||$t('value','renusify')"
+          ></r-text-input>
           <r-number-input v-else-if="info.type==='number'"
                           v-model="info.value"
-                          :label="valueLabel||$t('value','renusify')" :tile="tile"></r-number-input>
+                          :placeholder="valueLabel||$t('value','renusify')"></r-number-input>
           <r-switch-input v-else-if="info.type==='boolean'"
                           v-model="info.value"
-                          :label="valueLabel||$t('value','renusify')" :tile="tile"></r-switch-input>
-          <r-btn :rounded="!c_tile" class="ms-1 color-success" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
+                          :label="valueLabel||$t('value','renusify')"></r-switch-input>
+          <r-btn class="ms-1 color-success" size="sm" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
         </slot>
       </div>
     </div>
@@ -63,178 +62,261 @@
           class="ltr w-full"
           spellcheck="false"
           :rows="modelValue?Object.keys(modelValue).length+5:5"
-          @keydown="setTab"
       ></textarea>
       <div class="text-preview" v-html="code"></div>
     </div>
-  </div>
+  </r-input>
 </template>
-<script>
-import {defineAsyncComponent} from 'vue'
-import mixin from '../../highlight/mixin.js'
-
-export default {
-  name: 'r-json',
-  components: {JsonView: defineAsyncComponent(() => import('./JsonView.vue'))},
-  mixins: [mixin],
-  props: {
-    label: String,
-    keyLabel: {type: String, default: 'key'},
-    valueLabel: {type: String, default: 'value'},
-    modelValue: {
-      type: Object, Array
-    },
-    valueType: {
-      type: String,
-      validator: function (value) {
-        return ['text', 'number', 'boolean'].indexOf(value) !== -1
-      }
-    },
-    template: Object,
-    baseArray: Boolean,
-    disableAdd: Boolean,
-    tile: {type: Boolean, default: undefined},
-    disableEditKey: Boolean,
-    disableDel: Boolean,
-    translate: Boolean
+
+<script setup>
+import {computed, inject, onMounted, ref, watch} from 'vue'
+import {useHighlight} from '../../highlight/useHighlight.js'
+import JsonView from "./JsonView.vue"
+
+const props = defineProps({
+  /**
+   * Label text for the key input field
+   * @type {String}
+   * @default 'key'
+   */
+  keyLabel: {
+    type: String,
+    default: 'key'
   },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      lazyValue: '',
-      modeForm: true,
-      error: false,
-      show: false,
-      code: "",
-      info: {}
-    }
+  /**
+   * Label text for the value input field
+   * @type {String}
+   * @default 'value'
+   */
+  valueLabel: {
+    type: String,
+    default: 'value'
   },
-  async created() {
-    if (this.modelValue) {
-      await this.build_code()
-    }
+  /**
+   * The JSON data model value (object or array)
+   * @type {Object|Array}
+   */
+  modelValue: [Object, Array],
+  /**
+   * Fixed value type for all items when specified
+   * @type {String}
+   * @validator ['text', 'number', 'boolean']
+   */
+  valueType: {
+    type: String,
+    validator: (value) => ['text', 'number', 'boolean'].includes(value)
   },
-  watch: {
-    modeForm: function () {
-      this.lazyValue = JSON.stringify(this.modelValue || {}, null, 4)
-    },
-    modelValue: function () {
-      try {
-        this.error = false
-        if (JSON.stringify(JSON.parse(this.lazyValue)) !== JSON.stringify(this.modelValue)) {
-          this.lazyValue = JSON.stringify(this.modelValue || {}, null, 4)
-        }
-      } catch (er) {
-        this.error = true
-      }
+  /**
+   * Template object for new items when adding
+   * @type {Object}
+   */
+  template: Object,
+  /**
+   * Treat the model value as an array base
+   * @type {Boolean}
+   */
+  baseArray: Boolean,
+  /**
+   * Disable the ability to add new items
+   * @type {Boolean}
+   */
+  disableAdd: Boolean,
+  /**
+   * Disable the edit key toggle button
+   * @type {Boolean}
+   */
+  disableEditKey: Boolean,
+  /**
+   * Disable the ability to delete items
+   * @type {Boolean}
+   */
+  disableDel: Boolean,
+  /**
+   * Enable translation for UI texts
+   * @type {Boolean}
+   */
+  translate: Boolean
+})
 
-    },
-    lazyValue: async function () {
-      try {
-        this.error = false
-        await this.build_code()
-        this.$emit('update:modelValue', JSON.parse(this.lazyValue))
-      } catch (er) {
-        this.error = true
-      }
-    },
-  },
-  computed: {
-    c_tile() {
-      if (this.tile === undefined && this.$r.inputs.tile) {
-        return this.$r.inputs.tile
-      }
-      return this.tile
-    },
-    is_array() {
-      if (this.baseArray) {
-        return true
-      }
-      return Array.isArray(this.modelValue)
+const emit = defineEmits([
+  /**
+   * Emitted when the JSON data changes
+   * @param {Object|Array} value - The updated JSON data
+   */
+  'update:modelValue'
+])
+
+const {highlight} = useHighlight()
+
+const $t = inject('renusify').$t
+
+// Reactive data
+const lazyValue = ref('')
+const modeForm = ref(true)
+const error = ref(false)
+const show = ref(false)
+const code = ref('')
+const info = ref({})
+
+// Computed properties
+/**
+ * Determines if the model value is an array
+ * @returns {Boolean} True if model is an array
+ */
+const is_array = computed(() => {
+  if (props.baseArray) {
+    return true
+  }
+  return Array.isArray(props.modelValue)
+})
+
+// Methods
+/**
+ * Builds syntax-highlighted code from JSON
+ */
+const build_code = async () => {
+  try {
+    code.value = await highlight(lazyValue.value, 'json', true)
+  } catch (err) {
+    console.error('Error highlighting code:', err)
+  }
+}
+
+/**
+ * Opens the add form or applies template
+ */
+const open = () => {
+  if (props.template) {
+    let newValue = props.modelValue
+
+    if (!newValue) {
+      newValue = props.baseArray ? [] : {}
     }
-  },
-  methods: {
-    async build_code() {
-      this.code = await this.highlight(this.lazyValue, "json", true)
-    },
-    open() {
-      if (this.template) {
-        let d = this.modelValue
-        if (!d) {
-          d = []
-        }
-        d.push(Object.assign({}, {}, this.template))
-        this.$emit('update:modelValue', d)
-      } else {
-        if (this.valueType) {
-          this.info.type = this.valueType
-        }
-        this.show = true
-      }
-    },
-
-    emit(e) {
-      this.$emit('update:modelValue', e)
-    },
-    add() {
-      let d = this.modelValue
-      if (!d) {
-        if (this.baseArray) {
-          d = []
-        } else {
-          d = {}
-        }
-      }
-      if (this.info.type === 'json') {
-        if (this.is_array) {
-          d.push({})
-        } else {
-          d[this.info.key] = {}
-        }
-      } else if (this.info.type === 'array') {
-        if (this.is_array) {
-          d.push([])
-        } else {
-          d[this.info.key] = []
-        }
-      } else {
-        if (this.is_array) {
-          d.push(this.info.value)
-        } else {
-          d[this.info.key] = this.info.value
-        }
-      }
-      this.show = false
-      this.info = {}
-      this.$emit('update:modelValue', d)
+
+    if (props.baseArray) {
+      const templateCopy = JSON.parse(JSON.stringify(props.template))
+      newValue.push(templateCopy)
+    } else {
+      newValue = JSON.parse(JSON.stringify(props.template))
     }
+
+    emit('update:modelValue', newValue)
+  } else {
+    if (props.valueType) {
+      info.value.type = props.valueType
+    }
+    show.value = true
   }
 }
-</script>
-<style lang="scss">
-@use "sass:map";
-@use "../../../style/variables/base";
 
+/**
+ * Emits updated value from JsonView component
+ * @param {Object|Array} value - The updated JSON value
+ */
+const emitValue = (value) => {
+  emit('update:modelValue', value)
+}
 
-.#{base.$prefix}json-input {
-  background: var(--color-sheet-container);
-  padding: 5px;
+/**
+ * Adds a new item to the JSON data
+ */
+const add = () => {
+  let newValue = props.modelValue
 
-  &.input-tile {
-    border-radius: map.get(base.$borders, 'sm');
+  if (!newValue) {
+    newValue = props.baseArray ? [] : {}
   }
 
-  &:not(.input-tile) {
-    border-radius: map.get(base.$borders, 'xl');
+  newValue = JSON.parse(JSON.stringify(newValue))
+
+  if (info.value.type === 'json') {
+    if (is_array.value) {
+      newValue.push({})
+    } else {
+      newValue[info.value.key] = {}
+    }
+  } else if (info.value.type === 'array') {
+    if (is_array.value) {
+      newValue.push([])
+    } else {
+      newValue[info.value.key] = []
+    }
+  } else {
+    if (is_array.value) {
+      newValue.push(info.value.value)
+    } else {
+      newValue[info.value.key] = info.value.value
+    }
   }
 
-  .input-control {
-    background: var(--color-sheet-container-low);
+  show.value = false
+  info.value = {}
+  emit('update:modelValue', newValue)
+}
+
+// Watchers
+watch(modeForm, () => {
+  lazyValue.value = JSON.stringify(props.modelValue || {}, null, 4)
+})
+
+watch(() => props.modelValue, (newValue) => {
+  try {
+    error.value = false
+
+    if (lazyValue.value) {
+      const currentParsed = JSON.parse(lazyValue.value)
+      if (JSON.stringify(currentParsed) !== JSON.stringify(newValue)) {
+        lazyValue.value = JSON.stringify(newValue || {}, null, 4)
+      }
+    } else {
+      lazyValue.value = JSON.stringify(newValue || {}, null, 4)
+    }
+  } catch (er) {
+    error.value = true
+    console.error('Error parsing JSON:', er)
   }
+}, {deep: true})
 
-  textarea {
-    outline: none;
-    border: 1px solid var(--color-sheet-low);
+watch(lazyValue, async (newValue) => {
+  try {
+    error.value = false
+    await build_code()
+    const parsed = JSON.parse(newValue)
+    emit('update:modelValue', parsed)
+  } catch (er) {
+    error.value = true
+    console.error('Error in lazyValue watch:', er)
+  }
+})
+
+// Lifecycle hooks
+onMounted(async () => {
+  if (props.modelValue) {
+    try {
+      lazyValue.value = JSON.stringify(props.modelValue, null, 4)
+      await build_code()
+    } catch (err) {
+      console.error('Error initializing component:', err)
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use "sass:map";
+@use "../../../style/variables/base";
+
+
+.#{base.$prefix}json-input {
+  > .input-control {
+    height: auto;
+    padding: 8px;
+  }
+
+  .input-holder {
+    .input-control {
+      background-color: var(--color-sheet-container-low);
+    }
   }
 
   .state-error {