renusify 2.5.2 → 3.0.1

package/components/form/{text-editor → textEditor}/style.scss

@@ -4,26 +4,18 @@
 
 
 .#{base.$prefix}text-editor {
-  &:not(.text-editor-preview) {
-    background-color: var(--color-sheet-container);
-    margin-top: 20px;
+  > .input-control {
+    height: auto;
   }
 
-  &.input-tile {
-    border-radius: map.get(base.$borders, 'sm');
-  }
-
-  &:not(.input-tile) {
-    border-radius: map.get(base.$borders, 'xl');
-
-    .editor-content {
-      border-radius: map.get(base.$borders, 'lg');
-    }
+  .#{base.$prefix}button-group {
+    box-shadow: none;
+    border: 1px solid var(--color-sheet-low);
   }
 
-  .editor-content, .input-control {
+  .editor-content, .class-select .input-control {
     border: 1px solid var(--color-sheet-low);
-    background-color: var(--color-sheet-container-low);
+    background-color: var(--color-sheet);
   }
 
   @include mixins.typography(base.$headings, 'body-2');
@@ -62,7 +54,7 @@
   .img-holder {
     display: inline-block;
     position: relative;
-
+    border: 1px solid var(--color-sheet-low);
     .#{base.$prefix}btn {
       position: absolute;
       top: 0;

package/components/form/textInput/index.vue

@@ -1,50 +1,72 @@
 <template>
   <r-input :active="active"
            v-model="lazyValue"
-           @update:model-value="emit"
+           @update:model-value="emitValue"
            @click.prevent="handleClick">
-    <input :autofocus="autofocus"
+    <input :autofocus="$attrs.autofocus"
+           :placeholder="$attrs.placeholder"
            :type="type"
            @focusin="active=true"
            @focusout="active=false"
-           @input="emit"
+           @input="emitValue"
            autocomplete="no"
            ref="input"
            v-model="lazyValue"
     />
   </r-input>
 </template>
-<script>
-export default {
-  name: 'r-text-input',
-  props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-    modelValue: [String, Number],
-    autofocus: Boolean,
-  },
-emits:['update:modelValue'],
-  data () {
-    return {
-      lazyValue: this.modelValue,
-      active: false
-    }
-  },
-  watch: {
-    modelValue () {
-      this.lazyValue = this.modelValue
-    }
+<script setup>
+import {ref, watch} from 'vue'
+
+const props = defineProps({
+  /**
+   * Input type (text, number, email, etc.)
+   * @type {String}
+   * @default 'text'
+   */
+  type: {
+    type: String,
+    default: 'text'
   },
-  methods: {
-    handleClick (e) {
-      this.$refs.input.focus()
-    },
-    emit(){
-      this.$emit('update:modelValue', this.lazyValue)
-    }
+  /**
+   * The model value of the input
+   * @type {String|Number}
+   */
+  modelValue: [String, Number]
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the input value changes
+   * @param {String|Number} value - The updated input value
+   */
+  'update:modelValue'
+])
+
+// Reactive data
+const lazyValue = ref(props.modelValue)
+const active = ref(false)
+const input = ref(null)
+
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue
+})
+
+// Methods
+/**
+ * Focuses the input element
+ */
+const handleClick = () => {
+  if (input.value) {
+    input.value.focus()
   }
 }
 
+/**
+ * Emits the updated value to the parent component
+ */
+const emitValue = () => {
+  emit('update:modelValue', lazyValue.value)
+}
 </script>

package/components/form/timeInput/index.vue

@@ -1,21 +1,20 @@
 <template>
-  <div :class="`${$r.prefix}timepicker`">
-    <r-input
-        v-bind="$attrs"
-        :active="active"
-        :model-value="lazyValue"
-        @click.prevent="show_modal = true"
-    >
-      <input
-          type="text"
-          @focusin="active = true"
-          @focusout="active = false"
-          @input="emit"
-          autocomplete="no"
-          ref="input"
-          v-model="lazyValue"
-      />
-    </r-input>
+  <r-input
+      :active="active"
+      :class="`${$r.prefix}timepicker`"
+      :model-value="lazyValue"
+      @click.prevent="show_modal = true"
+  >
+    <input
+        ref="inputRef"
+        v-model="lazyValue"
+        :placeholder="$attrs.placeholder"
+        autocomplete="no"
+        readonly
+        type="text"
+        @focusin="active = true"
+        @focusout="active = false"
+    />
     <r-modal
         class="modal-timepicker"
         v-model="show_modal"
@@ -34,7 +33,7 @@
           <r-btn
               class="color-success-text"
               outlined
-              @click.prevent="show_modal = false,emit()"
+              @click.prevent="show_modal = false,emitValue()"
           >
             {{ $t('accept', 'renusify') }}
           </r-btn
@@ -42,7 +41,7 @@
           <r-btn
               class="color-warning-text"
               outlined
-              @click.prevent="(show_modal = false), (lazyValue = null),emit()"
+              @click.prevent="(show_modal = false), (lazyValue = null),emitValue()"
           >
             {{ $t('cancel', 'renusify') }}
           </r-btn
@@ -50,52 +49,80 @@
         </div>
       </div>
     </r-modal>
-  </div>
+  </r-input>
+
 </template>
 
-<script>
-import {defineAsyncComponent} from 'vue'
+<script setup>
+import {ref, watch} from 'vue'
+import Timepicker from "./timepicker.vue"
 
-export default {
-  name: "r-time-picker",
-  components: {Timepicker:defineAsyncComponent(()=>import('./timepicker.vue'))},
-  props: {
-    disableTime: {
-      type: Function, default: () => {
-        return false
-      }
-    },
-    withSec: Boolean,
-    is24Hour: {type: Boolean, default: true},
-    noOverlay: Boolean,
-    modelValue: String
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      active: false,
-      show_modal: false,
-      lazyValue: this.modelValue
-    };
+const props = defineProps({
+  /**
+   * Function to disable specific times
+   * @type {Function}
+   * @default () => false
+   */
+  disableTime: {
+    type: Function,
+    default: () => false
   },
-  watch: {
-    modelValue: function () {
-      this.lazyValue = this.modelValue
-    }
+  /**
+   * Show seconds picker in addition to hours and minutes
+   * @type {Boolean}
+   */
+  withSec: Boolean,
+  /**
+   * Use 24-hour format instead of 12-hour AM/PM format
+   * @type {Boolean}
+   * @default true
+   */
+  is24Hour: {
+    type: Boolean,
+    default: true
   },
-  methods: {
-    emit() {
-      this.$emit("update:modelValue", this.lazyValue);
-    }
-  }
-};
+  /**
+   * Disable the overlay background when picker is open
+   * @type {Boolean}
+   */
+  noOverlay: Boolean,
+  /**
+   * The model value in time string format (HH:MM or HH:MM:SS)
+   * @type {String}
+   */
+  modelValue: String
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the time value changes
+   * @param {String} value - The updated time value
+   */
+  'update:modelValue'
+])
+
+// Reactive data
+const active = ref(false)
+const show_modal = ref(false)
+const lazyValue = ref(props.modelValue || '')
+
+// Methods
+/**
+ * Emits the updated time value to the parent component
+ */
+const emitValue = () => {
+  emit('update:modelValue', lazyValue.value)
+}
+
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue || ''
+})
 </script>
 
 <style lang="scss">
 .modal-timepicker {
   .modal-mini {
-    background-color: var(--color-sheet-container-high);
-    color: var(--color-on-sheet);
     max-width: 285px !important;
   }
 }

package/components/form/timeInput/range.vue

@@ -1,28 +1,27 @@
 <template>
-  <div :class="`${$r.prefix}timepicker-range`">
     <r-input
-        v-bind="$attrs"
+        :class="`${$r.prefix}timepicker-range`"
         :active="active"
         :model-value="lazyValue[1]"
-        @click.prevent="show_modal = true"
+        @click.prevent="openPicker('from')"
     >
       <input
           type="text"
+          :placeholder="$attrs.placeholder"
           @focusin="active = true"
           @focusout="active = false"
           autocomplete="no"
           ref="input"
           :value="strVal"
       />
-    </r-input>
-    <r-modal
+      <r-modal
         class="modal-timepicker"
         v-model="show_modal"
         no-close-btn
         :no-overlay="noOverlay"
     >
       <div class="pt-3">
-        <div class="px-2 title">
+        <div class="pa-2 title-1 text-center">
           <span>{{ $t('from', 'renusify') }}: </span>
           <span v-if="lazyValue[0]">{{ lazyValue[0] }} - </span>
           <span>{{ $t('to', 'renusify') }}: </span>
@@ -43,119 +42,141 @@
             :disableTime="disableTime"
             v-model="lazyValue[1]"
         ></timepicker>
-        <div class="mt-3 d-flex h-space-between">
+
+        <div class="my-3 d-flex h-space-between px-3">
         <r-btn
             class="color-success-text"
             outlined
             @click.prevent="accept"
         >
-          {{ $t('accept', 'renusify') }}
+          {{ $t(state === 'to' ? 'accept' : 'next', 'renusify') }}
         </r-btn>
         <r-btn
             class="color-warning-text"
             outlined
-            @click.prevent="(show_modal = false), (lazyValue = []),emit()"
+            @click.prevent="(show_modal = false),clear()"
         >
           {{ $t('cancel', 'renusify') }}
         </r-btn>
         </div>
       </div>
     </r-modal>
-  </div>
+    </r-input>
 </template>
 
-<script>
-import {defineAsyncComponent} from 'vue'
-
-export default {
-  name: "r-time-picker-range",
-  components: {Timepicker:defineAsyncComponent(()=>import('./timepicker.vue'))},
-  props: {
-    withSec: Boolean,
-    noOverlay: Boolean,
-    modelValue: Array
-  },
-  emits:['update:modelValue'],
-  data() {
-    return {
-      state: 'from',
-      active: false,
-      show_modal: false,
-      lazyValue: this.modelValue || []
-    };
-  },
-  watch: {
-    modelValue: function () {
-      this.lazyValue = this.modelValue
-    }
-  },
-  computed: {
-    strVal() {
-      if (this.lazyValue.length > 0) {
-        return this.lazyValue[0] + ' - ' + this.lazyValue[1]
-      }
-      return ''
-    },
-    fromH() {
-      if (!this.lazyValue[0]) {
-        return 0
-      }
-      return this.lazyValue[0].split(':')[0]
-    },
-    fromM() {
-      if (!this.lazyValue[0]) {
-        return 0
-      }
-      return this.lazyValue[0].split(':')[1]
-    },
-    fromS() {
-      if (!this.lazyValue[0]) {
-        return 0
+<script setup>
+import {ref, watch, computed} from 'vue'
+import Timepicker from "./timepicker.vue";
+
+const props = defineProps({
+  withSec: Boolean,
+  noOverlay: Boolean,
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const state = ref('from') // 'from' or 'to'
+const active = ref(false)
+const show_modal = ref(false)
+const lazyValue = ref(props.modelValue || [])
+
+
+const strVal = computed(() => {
+  if (lazyValue.value.length >= 2) {
+    return `${lazyValue.value[0] || ''} - ${lazyValue.value[1] || ''}`
+  }
+  return ''
+})
+
+const fromH = computed(() => {
+  if (!lazyValue.value[0]) return 0
+  return parseInt(lazyValue.value[0].split(':')[0]) || 0
+})
+
+const fromM = computed(() => {
+  if (!lazyValue.value[0]) return 0
+  return parseInt(lazyValue.value[0].split(':')[1]) || 0
+})
+
+const fromS = computed(() => {
+  if (!lazyValue.value[0]) return 0
+  return parseInt(lazyValue.value[0].split(':')[2]) || 0
+})
+
+const str2int = (s) => {
+  if (!s) return 0
+  return parseInt(s.replace(/:/g, '')) || 0
+}
+
+const disableTime = (n, t, h, m) => {
+  if (state.value !== 'to') return false
+
+  if (t === 'hours24') {
+    return n < fromH.value
+  }
+
+  if (t === 'mins') {
+    if (h.toString() === fromH.value.toString()) {
+      if (props.withSec) {
+        return n < fromM.value
+      } else {
+        return n <= fromM.value
       }
-      return this.lazyValue[0].split(':')[2]
     }
-  },
-  methods: {
-    disableTime(n, t, h, m) {
-      if (t === 'hours24' && n < this.fromH && n > 0) {
-        return true
-      }
+  }
 
-      if (t === 'mins' && h.toString() === this.fromH && (this.withSec ? n < this.fromM : n <= this.fromM)) {
-        return true
-      }
+  if (props.withSec && t === 'seconds') {
+    if (h.toString() === fromH.value.toString() && m.toString() === fromM.value.toString()) {
+      return n <= fromS.value
+    }
+  }
 
-      if (this.withSec) {
-        if (t === 'seconds' && h.toString() === this.fromH && m.toString() === this.fromM && n <= this.fromS) {
-          return true
-        }
-      }
-    },
-    str2int(s) {
-      if (!s) {
-        return 0
-      }
-      return parseInt(this.$helper.replacer(s, ':', ''))
-    },
-    accept() {
-      if (this.state === 'to') {
-        if (this.lazyValue.length === 2 && this.str2int(this.lazyValue[0]) < this.str2int(this.lazyValue[1])) {
-          this.state = 'from'
-          this.show_modal = false
-          this.emit()
-        } else {
-          console.error(`from:${this.str2int(this.lazyValue[0])} > to:${this.str2int(this.lazyValue[1])}`)
-        }
+  return false
+}
+
+const accept = () => {
+  if (state.value === 'to') {
+    if (lazyValue.value.length >= 2) {
+      const fromTimeInt = str2int(lazyValue.value[0])
+      const toTimeInt = str2int(lazyValue.value[1])
+
+      if (fromTimeInt < toTimeInt) {
+        state.value = 'from'
+        show_modal.value = false
+        emitValue()
       } else {
-        this.state = 'to'
+        console.error(`From time (${fromTimeInt}) must be before To time (${toTimeInt})`)
       }
-
-    },
-    emit() {
-      this.$emit("update:modelValue", this.lazyValue);
     }
+  } else {
+    state.value = 'to'
   }
-};
+}
+
+const emitValue = () => {
+  emit('update:modelValue', lazyValue.value)
+}
+
+const openPicker = (type = 'from') => {
+  state.value = type
+  show_modal.value = true
+  active.value = true
+}
+
+const clear = () => {
+  lazyValue.value = []
+  state.value = 'from'
+  emitValue()
+}
+
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue || []
+}, {deep: true})
+
 </script>
 
 <style lang="scss">