renusify 2.5.2 → 3.0.1

package/components/map/select.vue

@@ -4,67 +4,127 @@
            :height="height"
            :zoom="zoom" search-box @leaflet="handleLEvent"
            @map="handleMapEvent"
-           @update:model-value="emit"
+           @update:model-value="emitValue"
     ></r-map>
   </div>
 </template>
-<script>
-export default {
-  name: 'r-map-select',
-  props: {
-    modelValue: Array,
-    height: {type: String, default: "500px"},
-    zoom: {type: Number, default: 13},
-    mapImageMarker: String
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      map: null,
-      L: null,
-      marker: null,
-      center: this.modelValue || [35.69973857757377, 51.33806092139637]
-    }
-  },
-  computed: {
-    iconMarker() {
-      if (this.mapImageMarker) {
-        return this.mapImageMarker
-      }
-      return require('./images/marker-icon.png')
-    }
-  },
-  methods: {
-    handleLEvent(e) {
-      this.L = e
-    },
-    handleMapEvent(e) {
-      this.map = e
-      this.selection()
-    },
-    selection() {
-      this.$emit("update:modelValue", this.center);
-      this.marker = new this.L.Marker(this.center, {
-        icon: new this.L.icon({
-          iconUrl: this.iconMarker,
-          iconSize: [30, 30],
-          iconAnchor: [15, 30],
-          popupAnchor: [0, -30]
-        }),
-      });
-      this.map.addLayer(this.marker);
-      this.marker.bindPopup(this.$t("map_move_to_location", 'renusify')).openPopup();
-
-    },
-    emit(e) {
-      this.center = e
-      this.$emit("update:modelValue", this.center);
-      if (this.marker) {
-        this.marker.setLatLng(this.center);
-        this.map.closePopup();
-      }
-
-    }
+<script setup>
+import {ref, inject, computed} from 'vue'
+
+const props = defineProps({
+  /**
+   * Selected location coordinates
+   * @type {Array<Number>}
+   * @model
+   * @description Two-way binding for the selected [latitude, longitude] coordinates.
+   * Updates when user clicks or drags the marker on the map.
+   * @example [35.6997, 51.3380] // Tehran coordinates
+   * @example [40.7128, -74.0060] // New York coordinates
+   */
+  modelValue: Array,
+
+  /**
+   * Map container height
+   * @type {String}
+   * @default '500px'
+   * @description CSS height for the map container.
+   * Accepts any valid CSS height value.
+   * @example '300px'
+   * @example '70vh'
+   * @example '100%'
+   */
+  height: {type: String, default: "500px"},
+
+  /**
+   * Initial zoom level
+   * @type {Number}
+   * @default 13
+   * @description Initial zoom level of the map (0-20 typical range).
+   * Higher values = more zoomed in.
+   * @example 10 // City overview
+   * @example 15 // Neighborhood view
+   * @example 18 // Street view
+   */
+  zoom: {type: Number, default: 13},
+
+  /**
+   * Custom marker icon image URL
+   * @type {String}
+   * @description URL to a custom marker icon image.
+   * Overrides the default marker icon.
+   * Recommended size: 30x30 pixels with anchor at bottom center.
+   * @example '/assets/custom-marker.png'
+   * @example 'https://example.com/pin-icon.png'
+   */
+  mapImageMarker: String
+})
+
+const emit = defineEmits([
+  /**
+   * Updated [latitude, longitude] coordinates
+   */
+  'update:modelValue'
+])
+
+const {$t, $r} = inject('renusify')
+
+const map = ref(null)
+const L = ref(null)
+const marker = ref(null)
+const center = ref(props.modelValue || [35.69973857757377, 51.33806092139637])
+
+const iconMarker = computed(() => {
+  if (props.mapImageMarker) {
+    return props.mapImageMarker
+  }
+  return require('./images/marker-icon.png')
+})
+
+const handleLEvent = (e) => {
+  L.value = e
+}
+
+const handleMapEvent = (e) => {
+  map.value = e
+  selection()
+}
+
+const selection = () => {
+  emit("update:modelValue", center.value);
+
+  marker.value = new L.value.Marker(center.value, {
+    icon: new L.value.icon({
+      iconUrl: iconMarker.value,
+      iconSize: [30, 30],
+      iconAnchor: [15, 30],
+      popupAnchor: [0, -30]
+    }),
+    draggable: true
+  });
+
+  map.value.addLayer(marker.value);
+
+  marker.value.bindPopup($t("map_move_to_location", 'renusify')).openPopup();
+
+  marker.value.on('dragend', function (event) {
+    const marker = event.target;
+    const position = marker.getLatLng();
+    emitValue([position.lat, position.lng]);
+  });
+
+  map.value.on('click', function (event) {
+    emitValue([event.latlng.lat, event.latlng.lng]);
+  });
+}
+
+const emitValue = (e) => {
+  center.value = e
+  emit("update:modelValue", center.value);
+
+  if (marker.value) {
+    marker.value.setLatLng(center.value);
+    map.value.closePopup();
   }
 }
 </script>
+

package/components/menu/index.vue

@@ -1,13 +1,15 @@
 <template>
-  <div :class="$r.prefix+'menu'" v-click-outside="close" ref="menu">
+  <div ref="menuRef" v-click-outside="close" :class="$r.prefix+'menu'">
     <div class="d-flex h-start flex-row v-center">
-      <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+      <slot name="label">
+        <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+      </slot>
       <transition name="fade" mode="out-in">
         <!-- Header Navigation Menu Icons -->
-        <r-btn icon text v-if="show" key="on" @click.prevent="close">
+        <r-btn icon text v-if="show" key="on" size="sm" @click.prevent="close">
           <r-icon v-html="$r.icons.chevron_up"></r-icon>
         </r-btn>
-        <r-btn icon text v-else key="off" @click.prevent="open">
+        <r-btn icon text v-else key="off" size="sm" @click.prevent="open">
           <r-icon v-html="icon||$r.icons.chevron_down"></r-icon>
         </r-btn>
 
@@ -23,7 +25,11 @@
         <r-card>
           <div class="dropdown-menu-item pa-2" v-for="(item,i) in list" :key="i"
                :class="{'menu-selected':selected===item[value]}"
-               @click.prevent="emit(item)">
+               @click.prevent="emitItem(item)">
+            <!--
+              Default slot for custom menu item rendering
+              @binding {Object|String|Number} item - The current menu item
+            -->
             <slot :item="item">
               {{ item }}
             </slot>
@@ -34,102 +40,208 @@
     </div>
   </div>
 </template>
-<script>
-
-export default {
-  name: 'r-menu',
-
-  props: {
-    modelValue: {
-      type: [String, Number, Object]
-    },
-    label: String,
-    icon: {
-      type: String
-    },
-    value: {
-      type: String,
-      default: 'value'
-    },
-    justValue: Boolean,
-    reverse: Boolean,
-    overlay: Boolean,
-    items: Array
+
+<script setup>
+import {ref, computed, inject, nextTick} from 'vue'
+
+
+/**
+ * @example // Menu usage
+ * <template>
+ * <r-menu
+ * v-model="modelValue"
+ * :label="modelValue?modelValue.name:label"
+ * :icon="icon"
+ * :value="value"
+ * :just-Value="justValue"
+ * :reverse="reverse"
+ * :overlay="overlay"
+ * :items="items"
+ * @update:model-Value="log(`update:modelValue`,$event)" ></r-menu>
+ * </template>
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const modelValue=ref(null)
+ * const icon=ref(null)
+ * const label=ref("label")
+ * const value=ref("value")
+ * const justValue=ref(false)
+ * const reverse=ref(false)
+ * const overlay=ref(false)
+ * const items=ref([
+ *             { name: `home`,value:1 },
+ *             { name: `blog`,value:2 },
+ *             { name: `contact`,value:3 },
+ *             { name: `about`,value:4 },
+ *           ])
+ * const log=(name,e)=>{
+ *   console.log(name,e)
+ * }
+ * <//script>
+ *
+ * */
+const props = defineProps({
+  /**
+   * Currently selected value (v-model)
+   * @model
+   * @type {String|Number|Object}
+   */
+  modelValue: {
+    type: [String, Number, Object]
   },
-  emits:['update:modelValue'],
-  data() {
-    return {
-      show: false,
-      top: null,
-      left: null,
-      right: null,
-      opacity: 0
-    }
+
+  /**
+   * Menu label text
+   * @type {String}
+   */
+  label: String,
+
+  /**
+   * Custom icon for the open button
+   * @type {String}
+   * @default Chevron down icon from Renusify icons
+   */
+  icon: {
+    type: String
   },
-  computed: {
-    list() {
-      let r = []
-      if (this.items) {
-        this.items.forEach((item) => {
-          if (typeof item === 'object') {
-            r.push(item)
-          } else {
-            r.push({'name': item, [this.value]: item})
-          }
-        })
-      }
-      return r
-    },
-    selected() {
-      if (!this.modelValue) {
-        return null
-      }
-      return this.justValue ? this.modelValue : this.modelValue[this.value]
-    }
+
+  /**
+   * Property name to use as value key in item objects
+   * @type {String}
+   * @default 'value'
+   */
+  value: {
+    type: String,
+    default: 'value'
   },
-  methods: {
-    emit(item) {
-      this.$emit('update:modelValue', this.justValue ? item[this.value] : item)
-      this.close()
-    },
-    open() {
-      const elm = this.$refs.menu.getBoundingClientRect()
-      this.top = -20
-      if (!this.overlay) {
-        this.top += elm.height
-      }
-      this.opacity = 0
-      if (this.reverse) {
-        if (!this.$r.rtl) {
-          this.right = 0
-        } else {
-          this.left = 0
-        }
+
+  /**
+   * If true, emits only the value property instead of the whole item object
+   * @type {Boolean}
+   * @default false
+   */
+  justValue: Boolean,
+
+  /**
+   * If true, reverses the menu positioning
+   * @type {Boolean}
+   * @default false
+   */
+  reverse: Boolean,
+
+  /**
+   * If true, menu overlays the trigger instead of pushing content down
+   * @type {Boolean}
+   * @default false
+   */
+  overlay: Boolean,
+
+  /**
+   * Array of menu items
+   * Can be array of objects or primitives (strings/numbers)
+   * @type {Array}
+   * @example
+   * // Array of objects
+   * [{ value: 1, name: 'Option 1' }, { value: 2, name: 'Option 2' }]
+   * // Array of primitives
+   * ['Option 1', 'Option 2']
+   */
+  items: Array
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when selected value changes
+   * @event update:modelValue
+   * @param {String|Number|Object} value - Selected value
+   */
+  'update:modelValue'
+])
+
+const {$r} = inject('renusify')
+
+const show = ref(false)
+const top = ref(null)
+const left = ref(null)
+const right = ref(null)
+const opacity = ref(0)
+const menuRef = ref(null)
+
+const list = computed(() => {
+  const result = []
+  if (props.items) {
+    props.items.forEach((item) => {
+      if (typeof item === 'object') {
+        result.push(item)
       } else {
-        if (!this.$r.rtl) {
-          this.left = 0
-        } else {
-          this.right = 0
-        }
+        result.push({'name': item, [props.value]: item})
       }
+    })
+  }
+  return result
+})
+
+const selected = computed(() => {
+  if (!props.modelValue) {
+    return null
+  }
+  return props.justValue ? props.modelValue : props.modelValue[props.value]
+})
+
+const emitItem = (item) => {
+  emit('update:modelValue', props.justValue ? item[props.value] : item)
+  close()
+}
 
-      this.show = true
-      setTimeout(() => {
-        this.top = this.top + 20
-        this.opacity = 1
-      }, 10)
+const open = () => {
+  if (!menuRef.value) return
 
-    }, close() {
-      this.top = this.top - 20
-      this.opacity = 0
-      setTimeout(() => {
-        this.show = false
-      }, 200)
+  const elm = menuRef.value.getBoundingClientRect()
+  top.value = -20
 
+  if (!props.overlay) {
+    top.value += elm.height
+  }
+
+  opacity.value = 0
+
+  if (props.reverse) {
+    if (!$r.rtl) {
+      right.value = 0
+      left.value = null
+    } else {
+      left.value = 0
+      right.value = null
+    }
+  } else {
+    if (!$r.rtl) {
+      left.value = 0
+      right.value = null
+    } else {
+      right.value = 0
+      left.value = null
     }
   }
+
+  show.value = true
+
+  nextTick(() => {
+    top.value = top.value + 20
+    opacity.value = 1
+  })
+}
+
+const close = () => {
+  top.value = top.value - 20
+  opacity.value = 0
+
+  setTimeout(() => {
+    show.value = false
+  }, 200)
 }
 </script>
+
 <style lang="scss">
 @use "sass:map";
 @use "../../style/variables/base";
@@ -154,13 +266,13 @@ export default {
     }
   }
 
-    .dropdown-menu {
-      border: 1px solid var(--color-border);
+  .dropdown-menu {
+    border: 1px solid var(--color-border-low);
 
-      &-item:hover {
-        background-color: var(--color-sheet-container-high);
-      }
+    &-item:hover {
+      background-color: var(--color-sheet-container-high);
     }
+  }
 
   .menu-label {
     cursor: pointer;

package/components/meta/meta.js

@@ -1,3 +1,26 @@
+/**
+ * @example // Basic usage
+ * <template>
+ * <r-meta
+ *   title="pageTitle"
+ *   description="pageDescription"
+ *   keywords="test,test2"
+ * />
+ * </template>
+ *
+ * @example // Advanced usage with HTML and HEAD attributes
+ * <template>
+ * <r-meta
+ *   :html="{ body: { id: 'page-id', class: 'home-page' } }"
+ *   :head="{ 'meta[charset]': { charset: 'utf-8' } }"
+ *   title="Dynamic Page Title"
+ *   description="Dynamic page description for SEO"
+ *   image="https://example.com/og-image.jpg"
+ *   url="https://example.com/current-page"
+ *   lang="en-US"
+ * />
+ *</template>
+ */
 //https://github.com/troxler/headful/blob/master/src/headful.js
 export default {
     name: "r-meta",
@@ -84,9 +107,9 @@ export default {
                 let property = selector;
                 property = property.split("[");
                 const name = property[0];
-                property = this.$helper.replacer(property[1], "]", "");
-                property = this.$helper.replacer(property, '"', "");
-                property = this.$helper.replacer(property, "'", "");
+                property = property[1].replaceAll("]", "");
+                property = property.replaceAll('"', "");
+                property = property.replaceAll("'", "");
                 property = property.trim(" ");
                 property = property.split("=");
                 let meta = document.createElement(name);