renusify 2.5.2 → 3.0.0

package/components/progress/line.vue

@@ -11,52 +11,272 @@
     </div>
 </template>
 
-<script>
-import './style.scss'
-
-export default {
-  name: 'pline',
-  props: {
-    modelValue: [Number, String],
-    color: String,
-    progressStyle: [String, Object, Array],
-    showPercent: Boolean,
-    outlined: Boolean,
-    rounded: Boolean,
-    showBackground: Boolean,
-    size: {
-      type: String,
-      default: 'small',
-      validator: function (value) {
-        return ['small', 'medium', 'large', 'x-large'].indexOf(value) !== -1
-      }
-    }
-  },
-  computed: {
-    isIndeterminate() {
-      if (this.modelValue !== undefined) {
-                    return !(this.modelValue >= 0 && this.modelValue <= 100)
-                } else {
-                    return true
-                }
-            },
-            classes() {
-                let c = ''
-              c += this.isIndeterminate ? 'line-indeterminate' : 'line-determinate'
-
-                if (this.color) {
-                    c += ' ' + this.color
-                }
-                return c
-            },
-            styles() {
-                let c = ''
-                if (!this.isIndeterminate) {
-                  c += 'width:' + this.modelValue + '%;'
-                }
-
-              return c
-            }
+<script setup>
+import {computed} from 'vue'
+
+const props = defineProps({
+  /**
+   * Current progress value (0-100). If undefined or outside 0-100 range, shows indeterminate state.
+   * @type {Number|String}
+   */
+  modelValue: [Number, String],
+  /**
+   * CSS class for progress bar color styling
+   * @type {String}
+   */
+  color: String,
+  /**
+   * Additional inline styles for the progress bar. Can be a string, object, or array.
+   * @type {String|Object|Array}
+   */
+  progressStyle: [String, Object, Array],
+  /**
+   * Shows percentage text alongside the progress bar
+   * @type {Boolean}
+   */
+  showPercent: Boolean,
+  /**
+   * Applies outlined styling to the progress bar
+   * @type {Boolean}
+   */
+  outlined: Boolean,
+  /**
+   * Applies rounded corners to the progress bar
+   * @type {Boolean}
+   */
+  rounded: Boolean,
+  /**
+   * Shows background track behind the progress bar
+   * @type {Boolean}
+   */
+  showBackground: Boolean,
+  /**
+   * Size variant of the progress bar
+   * @type {String}
+   * @default 'sm'
+   * @values 'sm', 'md', 'lg', 'xl'
+   */
+  size: {
+    type: String,
+    default: 'sm',
+    validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
+  }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when progress value changes
+   * @param {Number|String} value - New progress value
+   */
+  'update:modelValue'
+])
+
+const isIndeterminate = computed(() => {
+  if (props.modelValue !== undefined) {
+    return !(props.modelValue >= 0 && props.modelValue <= 100)
+  } else {
+    return true
+  }
+})
+
+const classes = computed(() => {
+  const classList = []
+
+  classList.push(isIndeterminate.value ? 'line-indeterminate' : 'line-determinate')
+
+  if (props.color) {
+    classList.push(props.color)
+  }
+
+  if (props.size) {
+    classList.push(`size-${props.size}`)
+  }
+
+  if (props.outlined) {
+    classList.push('outlined')
+  }
+
+  if (props.rounded) {
+    classList.push('rounded')
+  }
+
+  if (props.showBackground) {
+    classList.push('with-background')
+  }
+
+  return classList.join(' ')
+})
+
+const styles = computed(() => {
+  const styleObj = {}
+
+  if (!isIndeterminate.value && props.modelValue !== undefined) {
+    styleObj.width = `${props.modelValue}%`
+  }
+
+
+  if (props.progressStyle) {
+    if (typeof props.progressStyle === 'string') {
+      props.progressStyle.split(';').forEach(style => {
+        if (style.trim()) {
+          const [key, value] = style.split(':').map(s => s.trim())
+          if (key && value) {
+            styleObj[key] = value
+          }
         }
+      })
+    } else if (typeof props.progressStyle === 'object') {
+      Object.assign(styleObj, props.progressStyle)
     }
+  }
+
+  return styleObj
+})
+
 </script>
+
+<style lang="scss">
+@use "sass:map";
+@use "../../style" as *;
+
+.#{$prefix}progress {
+  text-align: center;
+
+  .progress-outlined {
+    color: var(--color-sheet-container-highest)
+  }
+
+  .line-determinate {
+    background-color: var(--color-on-sheet);
+  }
+
+  .line-indeterminate {
+    background-color: var(--color-on-sheet);
+  }
+
+  .progress-background {
+    background-color: var(--color-sheet-container-highest);
+  }
+
+  &.progress-outlined {
+    border: 1px solid;
+  }
+
+  &.progress-rounded {
+    border-radius: 20px;
+    overflow: hidden;
+  }
+
+  .progress-container {
+    position: relative;
+    display: block;
+    width: 100%;
+    background-clip: padding-box;
+    overflow: hidden;
+  }
+
+  &.size {
+    &-sm {
+      .progress-container {
+        height: 4px;
+      }
+    }
+
+    &-md {
+      .progress-container {
+        height: 8px;
+      }
+
+      &.progress-outlined {
+        border-width: 2px;
+      }
+    }
+
+    &-lg {
+      .progress-container {
+        height: 12px;
+      }
+
+      &.progress-outlined {
+        border-width: 3px;
+      }
+    }
+
+    &-xl {
+      .progress-container {
+        height: 16px;
+      }
+
+      &.progress-outlined {
+        border-width: 4px;
+      }
+    }
+  }
+
+  .line-determinate {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    transition: width .3s linear;
+    border-radius: 2px;
+  }
+
+  .line-indeterminate {
+    border-radius: 2px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    :after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation-delay: 1.15s;
+    }
+  }
+
+
+  @keyframes indeterminate {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+
+  @keyframes indeterminate-short {
+    0% {
+      left: -200%;
+      right: 100%;
+    }
+    60% {
+      left: 107%;
+      right: -8%;
+    }
+    100% {
+      left: 107%;
+      right: -8%;
+    }
+  }
+}
+</style>

package/components/searchBox/index.js

@@ -2,7 +2,5 @@ export * as rSearchBox from './index.vue'
 export * as l_line from '../progress/line.js'
 export * as l_btn from '../button/index.js'
 export * as l_card from '../card/index.js'
-export * as l_list from '../list/index.js'
 export * as l_icon from '../icon/index.js'
-export * as l_select from '../form/selectInput/index.js'
-export * as d_clickOutside from '../../directive/clickOutSide/index.js'
+export * as l_select from '../form/selectInput/index.js'

package/components/searchBox/index.vue

@@ -3,26 +3,22 @@
           'to-top': openToTop}]">
     <template v-if="!closable || show">
       <div
-          v-click-outside="handleclose"
-          :class="[inputControlClass, { 'z-important search-open': open }]"
+          :class="{ 'z-important search-open': open }"
           class="search-input"
       >
-        <span v-if="categories" class="w-30">
+        <span v-if="categories" class="category-holder">
           <r-select-input
               v-model="category"
               :items="categories"
-              class="mt-0"
-              inputControlClass="ps-2"
+              class="mt-0 ps-2"
               disable-search
               first-select
               hide
-              tile
               justValue
           ></r-select-input>
         </span>
         <span
-            :class="{ 'w-70': categories, 'w-full': !categories }"
-            class="d-flex v-center"
+            class="d-flex v-center flex-grow-1"
         >
           <input
               :placeholder="label"
@@ -34,7 +30,10 @@
               @focusout="active = false"
               @input="handle"
           />
-          <r-icon class="mx-1" v-html="$r.icons.search"></r-icon>
+          <!-- Slot for custom toggle button icon -->
+          <slot name="icon">
+            <r-icon class="mx-1" v-html="$r.icons.search"></r-icon>
+          </slot>
         </span>
       </div>
       <r-card
@@ -49,114 +48,194 @@
             class="w-full"
             color="color-two"
         ></r-progress-line>
-        <r-list
+        <div
             v-if="list.length > 0"
-            :items="list"
             @update:modelValue="listInput"
         >
-          <template v-slot="props">
-            <slot :item="props.item">
-              <div class="list-title">{{ props.item["name"] }}</div>
+          <div v-for="(item,i) in list" :key="i" class="list-item">
+            <!-- Slot for custom search result item rendering. Provide item prop - The search result item -->
+            <slot :item="item">
+              {{ item["name"] }}
             </slot>
-          </template>
-        </r-list>
+          </div>
+        </div>
         <div v-else-if="!loading" class="py-5">
           {{ notFoundMsg }}
         </div>
       </r-card>
-      <transition name="fade" v-if="!noOverlay">
-        <div v-if="open" class="search-shadow"></div>
+      <transition name="fade">
+        <div v-if="open" :class="{'search-shadow':!noOverlay}" @click="handleclose"></div>
       </transition>
     </template>
-    <r-btn v-else class="mt-5" icon @click.prevent="show = !show">
-      <r-icon v-html="$r.icons.search"></r-icon>
+    <r-btn v-else icon v-bind="btnAttr" @click.prevent="show = !show">
+      <!-- Slot for custom toggle button icon -->
+      <slot name="icon">
+        <r-icon v-html="$r.icons.search"></r-icon>
+      </slot>
     </r-btn>
   </div>
 </template>
-<script>
-export default {
-  name: "r-search-box",
-  props: {
-    closable: Boolean,
-    notFoundMsg: {
-      type: String,
-      default: "Can't Find Anything :(",
-    },
-    label: String,
-    url: String,
-    inputControlClass: [String, Object, Array],
-    query: {
-      type: String,
-      default: "search",
-    },
-    modelValue: [String, Number],
-    noOverlay: Boolean,
-    openToTop: Boolean,
-    categories: Array,
-    headers: Object,
-  },
-  emits: ["update:modelValue", "select"],
-  data() {
-    return {
-      show: false,
-      lazyValue: this.modelValue,
-      loading: false,
-      active: false,
-      open: false,
-      idSet: null,
-      category: null,
-      list: [],
-    };
-  },
-  watch: {
-    modelValue() {
-      this.lazyValue = this.modelValue;
-    },
+
+<script setup>
+import {ref, watch, inject} from 'vue'
+
+const props = defineProps({
+  /**
+   * Enables closable mode with toggle button
+   * @type {Boolean}
+   */
+  closable: Boolean,
+  /**
+   * Message shown when no search results are found
+   * @type {String}
+   * @default "Can't Find Anything :("
+   */
+  notFoundMsg: {
+    type: String,
+    default: "Can't Find Anything :(",
   },
-  methods: {
-    handleclose() {
-      this.open = false;
-    },
-    get() {
-      if (this.url) {
-        this.loading = true;
-        this.$axios
-            .get(this.url, {
-              params: {
-                [this.query]: this.lazyValue,
-                category: this.category,
-              },
-              headers: this.headers,
-            })
-            .then(
-                ({data}) => {
-                  this.list = data;
-                  this.loading = false;
-                  this.open = true;
-                },
-                () => {
-                  this.loading = false;
-                }
-            );
-      }
-    },
-    handle(e) {
-      this.lazyValue = e.target.value;
-      this.open = true;
-      this.loading = true;
-      clearTimeout(this.idSet);
-      this.idSet = setTimeout(() => {
-        this.$emit("update:modelValue", this.lazyValue);
-        this.get();
-      }, 1000);
-    },
-    listInput(e) {
-      this.$emit("select", e);
-      this.open = false;
-    },
+  /**
+   * Placeholder text for the search input
+   * @type {String}
+   */
+  label: String,
+  /**
+   * API endpoint URL for search requests
+   * @type {String}
+   */
+  url: String,
+  /**
+   * Attributes passed to the toggle button in closable mode
+   * @type {Object}
+   */
+  btnAttr: Object,
+  /**
+   * Query parameter name for the search term
+   * @type {String}
+   * @default "search"
+   */
+  query: {
+    type: String,
+    default: "search",
   },
-};
+  /**
+   * Current search value (v-model)
+   * @type {String|Number}
+   */
+  modelValue: [String, Number],
+  /**
+   * Disables the overlay/backdrop
+   * @type {Boolean}
+   */
+  noOverlay: Boolean,
+  /**
+   * Opens search results dropdown above the input instead of below
+   * @type {Boolean}
+   */
+  openToTop: Boolean,
+  /**
+   * Array of category items for search filtering
+   * @type {Array}
+   */
+  categories: Array,
+  /**
+   * Additional HTTP headers for search requests
+   * @type {Object}
+   */
+  headers: Object,
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when search value changes (v-model)
+   * @param {String|Number} value - New search value
+   */
+  'update:modelValue',
+  /**
+   * Emitted when a search result item is selected
+   * @param {*} item - Selected search result
+   */
+  'select'
+])
+
+const $axios = inject('axios')
+
+const show = ref(false)
+const lazyValue = ref(props.modelValue)
+const loading = ref(false)
+const active = ref(false)
+const open = ref(false)
+const idSet = ref(null)
+const category = ref(null)
+const list = ref([])
+
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue
+})
+
+/**
+ * Closes the search results dropdown
+ */
+const handleclose = () => {
+  open.value = false
+}
+
+/**
+ * Fetches search results from the API
+ */
+const get = () => {
+  if (!props.url || !$axios) return
+
+  loading.value = true
+
+  const params = {
+    [props.query]: lazyValue.value
+  }
+
+  if (category.value) {
+    params.category = category.value
+  }
+
+  $axios.get(props.url, {
+    params: params,
+    headers: props.headers
+  })
+      .then(({data}) => {
+        list.value = data
+        loading.value = false
+        open.value = true
+      })
+      .catch(() => {
+        loading.value = false
+      })
+}
+
+/**
+ * Handles search input changes with debouncing
+ * @param {Event} e - Input event
+ */
+const handle = (e) => {
+  lazyValue.value = e.target.value
+  open.value = true
+  loading.value = true
+
+  clearTimeout(idSet.value)
+  idSet.value = setTimeout(() => {
+    emit('update:modelValue', lazyValue.value)
+    get()
+  }, 1000)
+}
+
+/**
+ * Handles search result selection
+ * @param {*} e - Selected item
+ */
+const listInput = (e) => {
+  emit('select', e)
+  open.value = false
+}
 </script>
+
 <style lang="scss">
 @use "sass:map";
 @use "../../style/variables/base";
@@ -258,5 +337,19 @@ export default {
       }
     }
   }
+
+  .category-holder {
+    width: 100px;
+  }
+
+  .list-item {
+    padding: 16px 8px;
+    border-bottom: 1px solid var(--color-sheet-container-low);
+
+    &:hover {
+      background-color: var(--color-one-container);
+      color: var(--color-on-one-container);
+    }
+  }
 }
 </style>