renusify 2.5.2 → 3.0.1

package/components/form/dateInput/month.vue

@@ -2,66 +2,75 @@
   <div class="d-flex flex-wrap h-space-around">
     <r-btn v-for="i in ls"
            :key="i"
-           outlined
-           class="w-25 ma-1"
+           class="btn-month ma-1"
            :class="{'color-one':i===modelValue}"
-           @click.prevent="emit(i)">
+           @click.prevent="emitValue(i)">
       {{
       $d(new Date(year, i, 1, 0, timezoneOffset), 'month', locale)
       }}
     </r-btn>
   </div>
 </template>
-<script>
-export default {
-  name: 'month-tab',
-  props: {
-    modelValue: Number,
-    timezoneOffset: Number,
-    locale: String,
-    month: Number,
-    year: Number
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      ls: []
-    }
-  },
-  beforeMount() {
-    const year = this.$d(new Date(this.year, this.month, 5, 0, this.timezoneOffset), 'ye', this.locale)
-    let ls = []
-    let first = 0
-    let n = 0
-    while (true) {
-      n++
-      if (n > 100) {
-        break
-      }
-      const y = this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'ye', this.locale)
-      const m = parseInt(this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'me', this.locale))
-      if (y === year && m === 1) {
-        break
-      }
-      if (y > year) {
-        first--
-      } else if (y < year) {
-        first++
-      } else if (m > 1) {
-        first--
-      } else {
-        first++
-      }
-    }
-    for (let i = 0; i < 12; i++) {
-      ls.push(first + i)
-    }
-    this.ls = ls
-  },
-  methods: {
-    emit(n) {
-      this.$emit('update:modelValue', n)
-    }
+<script setup>
+import {ref, inject, onBeforeMount} from 'vue'
+
+const props = defineProps({
+  modelValue: Number,
+  timezoneOffset: Number,
+  locale: String,
+  month: Number,
+  year: Number
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const $d = inject('renusify').$d
+
+const ls = ref([])
+
+const emitValue = (n) => {
+  emit('update:modelValue', n)
+}
+
+const yearValue = $d(new Date(props.year, props.month, 5, 0, props.timezoneOffset), 'ye', props.locale)
+let list = []
+let first = 0
+let n = 0
+
+while (true) {
+  n++
+  if (n > 100) {
+    break
+  }
+
+  const y = $d(new Date(props.year, first, 5, 0, props.timezoneOffset), 'ye', props.locale)
+  const m = parseInt($d(new Date(props.year, first, 5, 0, props.timezoneOffset), 'me', props.locale))
+
+  if (y === yearValue && m === 1) {
+    break
+  }
+
+  if (y > yearValue) {
+    first--
+  } else if (y < yearValue) {
+    first++
+  } else if (m > 1) {
+    first--
+  } else {
+    first++
   }
 }
-</script>
+
+for (let i = 0; i < 12; i++) {
+  list.push(first + i)
+}
+
+ls.value = list
+</script>
+<style lang="scss">
+.btn-month {
+  width: 25%;
+  background-color: var(--color-sheet-container);
+  border: 1px solid var(--color-border-low);
+}
+</style>

package/components/form/dateInput/year.vue

@@ -1,37 +1,47 @@
 <template>
-  <div class="date-picker-year d-flex flex-wrap h-space-around">
+  <div class="year-tab d-flex flex-wrap h-space-around">
     <r-btn v-for="i in 200"
            :key="i"
-           class="w-25 ma-1"
+           class="btn-year ma-1"
            :class="{'color-one year-select':modelValue+i-100===modelValue}"
-           outlined
-           @click.prevent="emit(modelValue+i-100)">
+           @click.prevent="emitValue(modelValue+i-100)">
       {{
       $d(new Date(modelValue + i - 100, month, 5, 0, timezoneOffset), 'year', locale)
       }}
     </r-btn>
   </div>
 </template>
-<script>
-export default {
-  name: 'year-tab',
-  props: {
-    modelValue: Number,
-    timezoneOffset: Number,
-    locale: String,
-    month: Number
-  },
-  emits:['update:modelValue'],
-  mounted() {
-    let el = document.querySelector('.year-select')
-    if (el) {
-      el.scrollIntoView(true)
-    }
-  },
-  methods: {
-    emit(n) {
-      this.$emit('update:modelValue', n - this.modelValue)
-    }
-  }
+<script setup>
+import {onMounted} from 'vue'
+
+const props = defineProps({
+  modelValue: Number,
+  timezoneOffset: Number,
+  locale: String,
+  month: Number
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const emitValue = (n) => {
+  emit('update:modelValue', n - props.modelValue)
 }
+
+onMounted(() => {
+  let el = document.querySelector('.year-select')
+  if (el) {
+    el.scrollIntoView(true)
+  }
+})
 </script>
+<style lang="scss">
+.year-tab {
+  max-height: 300px;
+}
+
+.btn-year {
+  width: 25%;
+  background-color: var(--color-sheet-container);
+  border: 1px solid var(--color-border-low);
+}
+</style>

package/components/form/fileInput/index.js

@@ -4,5 +4,4 @@ export * as l_textInput from '../textInput/index.js'
 export * as l_btn from '../../button/index.js'
 export * as l_icon from '../../icon/index.js'
 export * as l_cropper from '../../cropper/index.js'
-export * as l_row from '../../container/row.js'
 export * as l_circle from '../../progress/circle.js'

package/components/form/fileInput/index.vue

@@ -1,122 +1,279 @@
 <template>
-  <r-input :class="[`${$r.prefix}file-uploader`]"
-           :model-value="filesLinks.length>0?filesLinks:null"
-           hide
-           :label="labelFile"
-           v-bind="attrs"
-           labelControlClass="label-fixed">
-    <r-row no-gutters>
-      <template :key="meta?file['url']:file" v-for="(file,n) in filesLinks">
-        <single class="ma-1"
-                :accept="accept"
-                :meta="meta"
-                :metaRequired="metaRequired"
-                :uploadLink="uploadLink"
-                :modelValue="file"
-                :w-p-h="wPH"
-                :maxFileSize="maxFileSize"
-                @select="$emit('add', true)"
-                @file-link="setLink(n,$event)"
+  <r-input
+      :class="[`${$r.prefix}file-input`]"
+      :label="labelFile"
+      :model-value="filesLinks.length > 0 ? filesLinks : null"
+      class="label-active"
+      label-active
+      v-bind="attrs"
+  >
+    <div class="d-flex">
+      <template v-for="(file, n) in filesLinks" :key="meta ? file['url'] : file">
+        <single
+            :accept="accept"
+            :max-file-size="maxFileSize"
+            :meta="meta"
+            :meta-required="metaRequired"
+            :model-value="file"
+            :upload-link="uploadLink"
+            :w-p-h="wPH"
+            class="ma-1"
+            @select="$emit('add', true)"
+            @file-link="setLink(n, $event)"
         ></single>
       </template>
-      <single :key="'add-'+keyAdd" v-if="filesLinks.length<size" class="ma-1"
-              :accept="accept"
-              :meta="meta"
-              :metaRequired="metaRequired"
-              :w-p-h="wPH"
-              :maxFileSize="maxFileSize"
-              :uploadLink="uploadLink"
-              :modelValue="null"
-              @select="$emit('add', true)"
-              @file-link="setLink(filesLinks.length,$event)"
+      <single
+          v-if="filesLinks.length < size"
+          :key="'add-' + keyAdd"
+          :accept="accept"
+          :max-file-size="maxFileSize"
+          :meta="meta"
+          :meta-required="metaRequired"
+          :model-value="null"
+          :upload-link="uploadLink"
+          :w-p-h="wPH"
+          class="ma-1"
+          @select="$emit('add', true)"
+          @file-link="setLink(filesLinks.length, $event)"
       ></single>
-    </r-row>
+    </div>
   </r-input>
 </template>
 
-<script>
-import {defineAsyncComponent} from 'vue'
-
-export default {
-  name: 'r-file-uploader',
-  inheritAttrs: false,
-  props: {
-    uploadLink: {
-      type: String,
-      required: true
-    },
-    accept: {
-      default: '*',
-      type: String
-    },
-    size: {
-      default: 3,
-      type: Number
-    },
-    wPH: [Number, String, Array],
-    maxFileSize: Number,
-    modelValue: {
-      default: () => {
-        return []
-      },
-      type: Array
-    },
-    meta: Array,
-    metaRequired: {type: Boolean, default: true}
+<script setup>
+import {ref, computed, watch, useAttrs, inject} from 'vue'
+import Single from "./single.vue";
+
+const props = defineProps({
+  /**
+   * API endpoint URL for file upload
+   * @type {String}
+   * @required
+   */
+  uploadLink: {
+    type: String,
+    required: true
   },
-  emits:['update:modelValue','add'],
-  components: {
-    single:defineAsyncComponent(()=>import('./single.vue'))
+
+  /**
+   * Accepted file types (MIME types or extensions)
+   * @type {String}
+   * @default '*'
+   */
+  accept: {
+    default: '*',
+    type: String
   },
-  data() {
-    return {
-      keyAdd: 0,
-      filesLinks: [],
-    }
+
+  /**
+   * Number of files allowed to upload simultaneously
+   * @type {Number}
+   * @default 3
+   */
+  size: {
+    default: 3,
+    type: Number
   },
-  created() {
-    this.setValue()
+
+  /**
+   * Width/Height requirements for images
+   * @type {Number|String|Array}
+   */
+  wPH: [Number, String, Array],
+
+  /**
+   * Maximum file size in bytes
+   * @type {Number}
+   */
+  maxFileSize: Number,
+
+  /**
+   * The model value for uploaded files (v-model)
+   * @type {Array}
+   * @default () => []
+   */
+  modelValue: {
+    default: () => [],
+    type: Array
   },
-  watch: {
-    'modelValue': function () {
-      this.setValue()
+
+  /**
+   * Additional metadata fields for files
+   * @type {Array[String]}
+   */
+  meta: Array,
+
+  /**
+   * Whether metadata is required for each file
+   * @type {Boolean}
+   * @default true
+   */
+  metaRequired: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the uploaded files array changes
+   * @param {Array} files - Array of uploaded file links/objects
+   */
+  'update:modelValue',
+
+  /**
+   * Emitted when a new file is added
+   * @param {Object} file - The added file object
+   */
+  'add'
+])
+
+const {$t, $helper, $r} = inject('renusify')
+
+const keyAdd = ref(0)
+const filesLinks = ref([])
+
+const attrs = useAttrs()
+
+const labelFile = computed(() => {
+  let label = attrs.label || ''
+
+  if (props.maxFileSize) {
+    const sizeInKB = props.maxFileSize / 1024
+    label += ' (' + $t(['max_allow_size', [sizeInKB]], 'renusify') + ')'
+  }
+
+  if (props.wPH) {
+    label += ' (' + $t(['image_w_p_h', [props.wPH]], 'renusify') + ')'
+  }
+
+  return label
+})
+
+/**
+ * Initializes filesLinks from modelValue
+ */
+const setValue = () => {
+  if (props.modelValue && Array.isArray(props.modelValue)) {
+    filesLinks.value = props.modelValue
+  }
+}
+
+/**
+ * Updates files links array and emits changes
+ * @param {Number} index - Index of the file to update
+ * @param {Object} event - File link/object
+ */
+const setLink = (index, event) => {
+  if (index >= filesLinks.value.length) {
+    filesLinks.value.push(event)
+  } else {
+    filesLinks.value[index] = event
+  }
+
+  const cleaned = $helper.cleanArray(filesLinks.value)
+
+  filesLinks.value = cleaned
+  emit('update:modelValue', cleaned)
+  keyAdd.value++
+}
+
+watch(() => props.modelValue, () => {
+  setValue()
+}, {immediate: true, deep: true})
+</script>
+
+<style lang="scss">
+@use "../../../style" as *;
+
+.#{$prefix}file-input {
+  .input-control {
+    height: auto;
+  }
+
+  .pick-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-card {
+    position: relative;
+    width: auto;
+    min-width: 150px;
+    min-height: 150px;
+    background-color: white;
+
+    .file-meta {
+      width: 250px;
     }
-  },
-  computed: {
-    attrs() {
-      let l = {}
-      for (let k in this.$attrs) {
-        if (k !== 'label') {
-          l[k] = this.$attrs[k]
-        }
-      }
-      return l
-    },
-    labelFile() {
-      let l = this.$attrs.label || ''
-      if (this.maxFileSize) {
-        l += ' (' + this.$t(['max_allow_size', [this.maxFileSize / 1024]], 'renusify') + ')'
-      }
-      if (this.wPH) {
-        l += ' (' + this.$t(['image_w_p_h', [this.wPH]], 'renusify') + ')'
-      }
-      return l
+
+    .fails {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
     }
-  },
-  methods: {
-    setValue() {
-      if (this.modelValue) {
-        this.filesLinks = this.modelValue
-      }
-    },
-    setLink(n, $event) {
-      this.filesLinks[n] = $event
-      let clean = this.$helper.cleanArray(this.filesLinks)
-      this.filesLinks = clean
-      this.$emit('update:modelValue', clean)
-      this.keyAdd++
+
+    .inProgress {
+      -webkit-filter: blur(2px);
+      filter: blur(2px);
+    }
+
+    .finished {
+      -webkit-filter: blur(0px);
+      filter: blur(0px);
+    }
+
+    .file {
+      left: 0;
+      right: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+    }
+
+    .image {
+      width: auto;
+      min-width: 150px;
+      height: 150px;
+      z-index: -2;
+      opacity: 0.8;
+      max-width: 100%;
+    }
+
+    .icon-100 {
+      width: 100px;
+      height: 100px;
+    }
+
+    .image-canvas {
+      width: auto;
+      min-width: 150px;
+      height: 150px;
+      position: relative;
+      background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+    }
+
+    .image-close {
+      cursor: pointer;
+      position: absolute;
+      left: 5px;
+      top: 5px;
+      z-index: 1;
+    }
+
+    .image-progress {
+      z-index: 1;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      color: white;
+    }
+
+    .image-copy {
+      z-index: 1;
+      position: absolute;
+      left: 5px;
+      bottom: 5px;
     }
   }
 }
-</script>
-
+</style>