renusify 2.5.2 → 3.0.1

package/components/notify/index.vue

@@ -20,8 +20,9 @@
                   :timeout="item.timeout"
                   :width="item.width"
                   @hide="hideChild(item.id,item.on_close)"
-                  @click.prevent="handle(item.on_click)">
-
+                  @click.prevent="handleClick(item.on_click)">
+      <!-- Default slot for custom notification content -->
+      <!-- provide data prop. The notification item object -->
       <slot :data="item">
         {{ item }}
       </slot>
@@ -29,108 +30,215 @@
     </notification>
   </div>
 </template>
-<script>
-import {defineAsyncComponent} from 'vue'
+<script setup>
+import {ref, onUnmounted, inject} from 'vue'
+import Notification from "./notification.vue";
+
+/**
+ * @example // Notify usage
+ * <template>
+ * <r-notify>
+ *   <template v-slot="{data}">
+ *     <div>
+ *       <div class="title">{{data.content.head}}</div>
+ *       <div>{{data.content.body}}</div>
+ *     </div>
+ *   </template>
+ * </r-notify>
+ * <r-btn @click="notify(`info`)">show info</r-btn>
+ * <r-btn @click="notify(`error`)">show error</r-btn>
+ * <r-btn @click="notify(`success`)">show success</r-btn>
+ * <r-btn @click="notify(`warning`)">show warning</r-btn>
+ * </template>
+ * <script>
+ * const msg={"head":"title msg","body":"this is a message."}
+ * const {$notify} = inject('renusify')
+ * const notify=(status)=>{
+ *     $notify(msg,{
+ *     "timeout":5000,
+ *       "status":status,
+ *       "permanent":false,
+ *       width:"300px",
+ *       on_close_all:()=>{
+ *         console.log("close all")
+ *       },
+ *       on_close:()=>{
+ *         console.log("close")
+ *       },
+ *       on_click:()=>{
+ *         console.log("click")
+ *       }
+ *     });
+ *   }
+ * <//script>
+ *
+ * */
 
-export default {
-  components: {
-    notification: defineAsyncComponent(() => import('./notification.vue'))
+const props = defineProps({
+  /**
+   * Makes notifications permanent (no auto-dismiss)
+   * @type {Boolean}
+   * @default false
+   */
+  permanent: {
+    default: false
   },
-  props: {
-    permanent: {
-      default: false
-    },
-    top: {
-      type: Boolean,
-      default: false
-    },
-    left: {
-      type: Boolean,
-      default: false
-    },
-    status: {
-      type: String,
-      default: 'info'
-    },
-    width: {
-      type: String,
-      default: '350px'
-    },
-    timeout: {
-      type: Number,
-      default: 4000
-    }
+  /**
+   * Positions notifications at the top of the screen
+   * @type {Boolean}
+   * @default false
+   */
+  top: {
+    type: Boolean,
+    default: false
   },
-  data() {
-    return {
-      list: []
-    }
+  /**
+   * Positions notifications at the left side of the screen
+   * @type {Boolean}
+   * @default false
+   */
+  left: {
+    type: Boolean,
+    default: false
   },
-  methods: {
-    handleClose(close) {
-      if (close !== null) {
-        close()
-      }
-      this.$notify()
-    },
-    handle(click) {
-      if (click !== null) {
-        click()
-      }
-    },
-    showMe(obj) {
-      const item = {
-        id: this.$helper.uniqueId(),
-        permanent: obj.permanent || this.permanent,
-        content: obj.data,
-        status: obj.status || this.status,
-        width: obj.width || this.width,
-        timeout: obj.timeout || this.timeout,
-        on_close_all: obj.on_close_all || null,
-        on_close: obj.on_close || null,
-        on_click: obj.on_click || null
-
-      }
-      this.list.push(item)
-    },
-    hideMe() {
-      this.list = []
-    },
-    hideChild(id, close) {
-      if (close !== null) {
-        close()
-      }
-      for (const i in this.list) {
-        if (this.$helper.hasKey(this.list, i)) {
-          if (this.list[i].id === id) {
-            this.list.splice(i, 1)
-          }
-        }
-      }
-    },
-    registerBusMethods() {
-      window.renusifyBus.on('r-notify', this.showMe)
-      window.renusifyBus.on('hide-r-notify', this.hideMe)
-    }
+  /**
+   * Default status/color for notifications
+   * @type {String}
+   * @default 'info'
+   */
+  status: {
+    type: String,
+    default: 'info'
   },
-  created() {
-    this.registerBusMethods()
+  /**
+   * Minimum width of the notifications container
+   * @type {String}
+   * @default '350px'
+   */
+  width: {
+    type: String,
+    default: '350px'
+  },
+  /**
+   * Default auto-dismiss timeout in milliseconds
+   * @type {Number}
+   * @default 4000
+   */
+  timeout: {
+    type: Number,
+    default: 4000
+  }
+})
+
+const {$helper, $notify} = inject('renusify')
+
+const list = ref([])
+
+/**
+ * Handles the "Clear All" button click
+ * @param {Function|null} close - Custom close function from notification
+ */
+const handleClose = (close) => {
+  if (close !== null) {
+    close()
+  }
+  $notify()
+}
+
+/**
+ * Handles notification click events
+ * @param {Function|null} click - Custom click function from notification
+ */
+const handleClick = (click) => {
+  if (click !== null) {
+    click()
+  }
+}
+
+/**
+ * Displays a new notification
+ * @param {Object} obj - Notification configuration object
+ * @param {*} obj.data - Notification content/data
+ * @param {String} [obj.status] - Status/color of the notification
+ * @param {Boolean} [obj.permanent] - Whether notification is permanent
+ * @param {String} [obj.width] - Width of the notification
+ * @param {Number} [obj.timeout] - Auto-dismiss timeout
+ * @param {Function} [obj.on_close_all] - Callback when "Clear All" is clicked
+ * @param {Function} [obj.on_close] - Callback when notification is closed
+ * @param {Function} [obj.on_click] - Callback when notification is clicked
+ */
+const showMe = (obj) => {
+  const item = {
+    id: $helper.uniqueId(),
+    permanent: obj.permanent || props.permanent,
+    content: obj.data,
+    status: obj.status || props.status,
+    width: obj.width || props.width,
+    timeout: obj.timeout || props.timeout,
+    on_close_all: obj.on_close_all || null,
+    on_close: obj.on_close || null,
+    on_click: obj.on_click || null
+  }
+  list.value.push(item)
+}
+
+/**
+ * Clears all notifications
+ */
+const hideMe = () => {
+  list.value = []
+}
+
+/**
+ * Hides a specific notification
+ * @param {String} id - ID of the notification to hide
+ * @param {Function|null} close - Custom close function from notification
+ */
+const hideChild = (id, close) => {
+  if (close !== null) {
+    close()
+  }
+  const index = list.value.findIndex(item => item.id === id)
+  if (index !== -1) {
+    list.value.splice(index, 1)
   }
 }
+
+const registerBusMethods = () => {
+  if (window.renusifyBus) {
+    window.renusifyBus.on('r-notify', showMe)
+    window.renusifyBus.on('hide-r-notify', hideMe)
+  }
+}
+
+const unregisterBusMethods = () => {
+  if (window.renusifyBus) {
+    window.renusifyBus.off('r-notify', showMe)
+    window.renusifyBus.off('hide-r-notify', hideMe)
+  }
+}
+
+registerBusMethods()
+
+onUnmounted(() => {
+  unregisterBusMethods()
+})
+
 </script>
+
 <style lang="scss">
 @use "sass:map";
-@use "../../style/variables/base";
+@use "../../style" as *;
 
 
-.#{base.$prefix}notify {
+.#{$prefix}notify {
   display: flex;
   align-items: center;
   padding: 10px;
   position: fixed;
   width: auto;
   height: auto;
-  z-index: map.get(base.$z-index, 'medium');
+  z-index: map.get($z-index, 'high');
   overflow-y: auto;
   max-height: 100%;
 
@@ -150,6 +258,16 @@ export default {
     left: 0;
   }
 
+  .notify-msg {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 10px;
+    border-radius: map.get($borders, 'md');
+    position: relative;
+    z-index: map.get($z-index, 'important');
+    margin: 0.3rem 0;
+  }
 }
 
 </style>

package/components/notify/notification.vue

@@ -15,65 +15,48 @@
         </div>
     </transition>
 </template>
-<script>
-export default {
-  props: {
-    pos: {
-      default: 'right'
-    },
-    permanent: {
-      default: false
-    },
-    content: {},
-    status: {
-      type: String,
-      default: 'alert-success'
-    },
-    width: {
-      type: String,
-      default: '350px'
-    },
-    timeout: {
-      type: Number,
-      default: 4000
-    }
+<script setup>
+import {ref, onMounted, nextTick} from 'vue'
+
+const props = defineProps({
+  pos: {
+    default: 'right'
   },
-  emits:['hide'],
-  data () {
-    return {
-      show: false
-    }
+  permanent: {
+    default: false
   },
-  methods: {
-    hideMe () {
-      this.$emit('hide',true)
-    }
+  content: {},
+  status: {
+    type: String,
+    default: 'alert-success'
   },
-  created () {
-    setTimeout(() => {
-      this.show = true
-    }, 10)
-    if (!this.permanent) {
-      setTimeout(() => {
-        this.hideMe()
-      }, this.timeout)
-    }
+  width: {
+    type: String,
+    default: '350px'
+  },
+  timeout: {
+    type: Number,
+    default: 4000
   }
-}
-</script>
-<style lang="scss">
-@use "sass:map";
-@use "../../style/variables/base";
+})
+
+const emit = defineEmits(['hide'])
 
+const show = ref(false)
 
-.notify-msg {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 10px;
-  border-radius: map.get(base.$borders, 'md');
-  position: relative;
-  z-index: map.get(base.$z-index, 'important');
-  margin: 0.3rem 0;
+const hideMe = () => {
+  emit('hide', true)
 }
-</style>
+
+onMounted(() => {
+  nextTick(() => {
+    show.value = true
+  })
+
+  if (!props.permanent) {
+    setTimeout(() => {
+      hideMe()
+    }, props.timeout)
+  }
+})
+</script>

package/components/progress/circle.vue

@@ -28,6 +28,7 @@
       ></circle>
     </svg>
     <div :class="`${$r.prefix}progress-circle-info`">
+      <!-- Default slot for custom progress circle content -->
       <slot>
         <span v-if="showPercent">{{ modelValue }} %</span>
       </slot>
@@ -35,78 +36,196 @@
   </div>
 </template>
 
-<script>
-import './style.scss'
-
-export default {
-  name: 'pcircle',
-  props: {
-    indeterminate: Boolean,
-    showPercent: Boolean,
-    rotate: {
-      type: [Number, String],
-      default: 0
-    },
-    size: {
-      type: [Number, String],
-      default: '32'
-    },
-    width: {
-      type: [Number, String],
-      default: 4
-    },
-    modelValue: {
-      type: [Number, String],
-      default: 0
-    }
+<script setup>
+import {computed} from 'vue'
+
+const props = defineProps({
+  /**
+   * Shows indeterminate/animated progress circle
+   * @type {Boolean}
+   */
+  indeterminate: Boolean,
+  /**
+   * Shows percentage value in the center (when slot is not used)
+   * @type {Boolean}
+   */
+  showPercent: Boolean,
+  /**
+   * Rotation angle of the progress circle in degrees
+   * @type {Number|String}
+   * @default 0
+   */
+  rotate: {
+    type: [Number, String],
+    default: 0
+  },
+  /**
+   * Size of the progress circle in pixels
+   * @type {Number|String}
+   * @default '32'
+   */
+  size: {
+    type: [Number, String],
+    default: '32'
   },
-  data: () => ({
-    radius: 20
-  }),
-  computed: {
-
-    circumference () {
-      return 2 * Math.PI * this.radius
-    },
-
-    normalizedValue () {
-      if (this.modelValue < 0) {
-        return 0
-      }
-
-      if (this.modelValue > 100) {
-        return 100
-      }
-
-      return parseFloat(this.modelValue)
-    },
-
-    strokeDashArray () {
-      return Math.round(this.circumference * 1000) / 1000
-    },
-
-    strokeDashOffset () {
-      return (100 - this.normalizedValue) / 100 * this.circumference + 'px'
-    },
-
-    strokeWidth () {
-      return Number(this.width) / +this.size * this.viewBoxSize * 2
-    },
-
-    styles () {
-      const size= this.size + 'px'
-      return `height: ${size};
-        width: ${size}`
-    },
-
-    svgStyles () {
-      return `transform: rotate(${Number(this.rotate)}deg)`
-    },
-
-    viewBoxSize () {
-      return this.radius / (1 - Number(this.width) / +this.size)
+  /**
+   * Stroke width of the progress circle in pixels
+   * @type {Number|String}
+   * @default 4
+   */
+  width: {
+    type: [Number, String],
+    default: 4
+  },
+  /**
+   * Current progress value (0-100)
+   * @type {Number|String}
+   * @default 0
+   */
+  modelValue: {
+    type: [Number, String],
+    default: 0
+  }
+})
+
+const radius = 20
+
+const circumference = computed(() => {
+  return 2 * Math.PI * radius
+})
+
+const normalizedValue = computed(() => {
+  const value = parseFloat(props.modelValue)
+
+  if (isNaN(value)) return 0
+  if (value < 0) return 0
+  if (value > 100) return 100
+
+  return value
+})
+
+const strokeDashArray = computed(() => {
+  return Math.round(circumference.value * 1000) / 1000
+})
+
+const strokeDashOffset = computed(() => {
+  return ((100 - normalizedValue.value) / 100) * circumference.value + 'px'
+})
+
+const strokeWidth = computed(() => {
+  const widthNum = Number(props.width)
+  const sizeNum = Number(props.size)
+
+  if (sizeNum === 0) return 0
+  return (widthNum / sizeNum) * viewBoxSize.value * 2
+})
+
+const styles = computed(() => {
+  const size = props.size + 'px'
+  return {
+    height: size,
+    width: size
+  }
+})
+
+const svgStyles = computed(() => {
+  return {
+    transform: `rotate(${Number(props.rotate)}deg)`
+  }
+})
+
+const viewBoxSize = computed(() => {
+  const widthNum = Number(props.width)
+  const sizeNum = Number(props.size)
+
+  if (sizeNum === 0 || widthNum >= sizeNum) return radius
+  return radius / (1 - widthNum / sizeNum)
+})
+
+</script>
+
+<style lang="scss">
+@use "sass:map";
+@use "../../style" as *;
+
+
+$progress-circle-rotate-animation: progress-circle-rotate 1.4s linear infinite !default;
+$progress-circle-rotate-dash: progress-circle-dash 1.4s ease-in-out infinite !default;
+$process-circle-intermediate-svg-transition: all .2s ease-in-out !default;
+$progress-circle-underlay-stroke: rgba(0, 0, 0, 0.1) !default;
+$progress-circle-overlay-transition: all .6s ease-in-out !default;
+
+.#{$prefix}progress-circle {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+  }
+
+  &-indeterminate {
+    svg {
+      animation: $progress-circle-rotate-animation;
+      transform-origin: center center;
+      transition: $process-circle-intermediate-svg-transition;
     }
 
+    .#{$prefix}progress-circle-overlay {
+      animation: $progress-circle-rotate-dash;
+      stroke-linecap: round;
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: 0px;
+    }
+  }
+
+  &-info {
+    align-items: center;
+    display: flex;
+    justify-content: center
+  }
+
+  &-underlay {
+    stroke: $progress-circle-underlay-stroke;
+    z-index: 1
+  }
+
+  &-overlay {
+    stroke: currentColor;
+    z-index: 2;
+    transition: $progress-circle-overlay-transition
   }
 }
-</script>
+
+@keyframes progress-circle-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0px
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -15px
+  }
+  100% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -125px
+  }
+}
+
+@keyframes progress-circle-rotate {
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+</style>