quasar 2.1.0

package/src/components/popup-edit/QPopupEdit.json

@@ -0,0 +1,283 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/popup-edit"
+  },
+
+  "props": {
+    "model-value": {
+      "extends": "model-value",
+      "type": "Any",
+      "examples": [ "v-model=\"myValue\"" ]
+    },
+
+    "title": {
+      "type": "String",
+      "desc": "Optional title (unless 'title' slot is used)",
+      "examples": [ "Calories" ],
+      "category": "content"
+    },
+
+    "buttons": {
+      "type": "Boolean",
+      "desc": "Show Set and Cancel buttons",
+      "category": "content"
+    },
+
+    "label-set": {
+      "type": "String",
+      "desc": "Override Set button label",
+      "examples": [ "OK" ],
+      "category": "content"
+    },
+
+    "label-cancel": {
+      "type": "String",
+      "desc": "Override Cancel button label",
+      "examples": [ "Cancel" ],
+      "category": "content"
+    },
+
+    "auto-save": {
+      "type": "Boolean",
+      "desc": "Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key",
+      "category": "behavior"
+    },
+
+    "color": {
+      "extends": "color",
+      "default": "primary"
+    },
+
+    "validate": {
+      "type": "Function",
+      "desc": "Validates model then triggers 'save' and closes Popup; Returns a Boolean ('true' means valid, 'false' means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "value": {
+          "type": "Any",
+          "desc": "Model to validate",
+          "examples": [ "My car" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "Is the model valid or not?"
+      },
+      "examples": [
+        ":validate=\"myValidation\""
+      ],
+      "category": "model"
+    },
+
+    "disable": {
+      "extends": "disable"
+    },
+
+    "fit": {
+      "type": "Boolean",
+      "desc": "Allows the menu to match at least the full width of its target",
+      "category": "position"
+    },
+
+    "cover": {
+      "type": "Boolean",
+      "default": true,
+      "desc": "Allows the menu to cover its target. When used, the 'self' and 'fit' props are no longer effective",
+      "category": "position"
+    },
+
+    "anchor": {
+      "type": "String",
+      "desc": "Two values setting the starting position or anchor point of the menu relative to its target",
+      "values": [
+        "top left", "top middle", "top right", "top start", "top end",
+        "center left", "center middle", "center right", "center start", "center end",
+        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+      ],
+      "examples": [ "top left", "bottom right" ],
+      "category": "position"
+    },
+
+    "self": {
+      "type": "String",
+      "desc": "Two values setting the menu's own position relative to its target",
+      "values": [
+        "top left", "top middle", "top right", "top start", "top end",
+        "center left", "center middle", "center right", "center start", "center end",
+        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+      ],
+      "examples": [ "top left", "bottom right" ],
+      "category": "position"
+    },
+
+    "offset": {
+      "type": "Array",
+      "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels",
+      "examples": [ "[8, 8]", "[5, 10]" ],
+      "category": "style"
+    },
+
+    "touch-position": {
+      "type": "Boolean",
+      "desc": "Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched",
+      "category": "behavior"
+    },
+
+    "persistent": {
+      "type": "Boolean",
+      "desc": "Avoid menu closing by hitting ESC key or by clicking/tapping outside of the Popup",
+      "category": "behavior"
+    },
+
+    "separate-close-popup": {
+      "type": "Boolean",
+      "desc": "Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)",
+      "category": "behavior"
+    },
+
+    "square": {
+      "type": "Boolean",
+      "desc": "Forces menu to have squared borders",
+      "category": "style"
+    },
+
+    "max-height": {
+      "extends": "size",
+      "desc": "The maximum height of the menu; Size in CSS units, including unit name",
+      "category": "style"
+    },
+
+    "max-width": {
+      "extends": "size",
+      "desc": "The maximum width of the menu; Size in CSS units, including unit name",
+      "category": "style"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Used for injecting the form component; Do NOT destructure it",
+      "scope": {
+        "initialValue": {
+          "type": "Any",
+          "desc": "Initial value",
+          "examples": [ 0.241, "Text" ]
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Current value",
+          "examples": [ 0.241, "Text" ]
+        },
+        "validate": {
+          "type": "Function",
+          "desc": "Function that checks if the value is valid",
+          "params": {
+            "value": {
+              "type": "Any",
+              "desc": "Value to be checked",
+              "examples": [ 0, "Changed text" ]
+            }
+          },
+          "returns": {
+            "type": "Boolean",
+            "desc": "Checked value is valid or not"
+          }
+        },
+        "set": {
+          "type": "Function",
+          "desc": "Function that sets the value and closes the popup",
+          "params": null,
+          "returns": null
+        },
+        "cancel": {
+          "type": "Function",
+          "desc": "Function that cancels the editing and reverts the value to the initialValue",
+          "params": null,
+          "returns": null
+        },
+        "updatePosition": {
+          "type": "Function",
+          "desc": "There are some custom scenarios for which Quasar cannot automatically reposition the component without significant performance drawbacks so the optimal solution is for you to call this method when you need it",
+          "params": null,
+          "returns": null
+        }
+      }
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value",
+      "desc": "Emitted when Popup gets cancelled in order to reset model to its initial value; Is also used by v-model"
+    },
+
+    "before-show": {
+      "desc": "Emitted right before Popup gets shown"
+    },
+
+    "show": {
+      "desc": "Emitted right after Popup gets shown"
+    },
+
+    "before-hide": {
+      "desc": "Emitted right before Popup gets dismissed"
+    },
+
+    "hide": {
+      "desc": "Emitted right after Popup gets dismissed"
+    },
+
+    "save": {
+      "desc": "Emitted when value has been successfully validated and it should be saved",
+      "params": {
+        "value": {
+          "type": "Any",
+          "desc": "Validated value to be saved",
+          "__exemption": [ "examples" ]
+        },
+        "initialValue": {
+          "type": "Any",
+          "desc": "Initial value, before changes",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "cancel": {
+      "desc": "Emitted when user cancelled the change (hit ESC key or clicking outside of Popup or hit 'Cancel' button)",
+      "params": {
+        "value": {
+          "type": "Any",
+          "desc": "Edited value",
+          "__exemption": [ "examples" ]
+        },
+        "initialValue": {
+          "type": "Any",
+          "desc": "Initial value, before changes",
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "set": {
+      "desc": "Trigger a model update; Validates model (and emits 'save' event if it's the case) then closes Popup"
+    },
+
+    "cancel": {
+      "desc": "Triggers a model reset to its initial value ('cancel' event is emitted) then closes Popup"
+    },
+
+    "show": {
+      "extends": "show"
+    },
+
+    "hide": {
+      "extends": "hide"
+    },
+
+    "updatePosition": {
+      "desc": "There are some custom scenarios for which Quasar cannot automatically reposition the component without significant performance drawbacks so the optimal solution is for you to call this method when you need it"
+    }
+  }
+}

package/src/components/popup-edit/QPopupEdit.sass

@@ -0,0 +1,8 @@
+.q-popup-edit
+  padding: 8px 16px
+
+  &__buttons
+    margin-top: 8px
+
+    .q-btn + .q-btn
+      margin-left: 8px

package/src/components/popup-edit/index.js

@@ -0,0 +1,5 @@
+import QPopupEdit from './QPopupEdit.js'
+
+export {
+  QPopupEdit
+}

package/src/components/popup-proxy/QPopupProxy.js

@@ -0,0 +1,104 @@
+import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+
+import QDialog from '../dialog/QDialog.js'
+import QMenu from '../menu/QMenu.js'
+
+import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QPopupProxy',
+
+  props: {
+    ...useAnchorProps,
+
+    breakpoint: {
+      type: [ String, Number ],
+      default: 450
+    }
+  },
+
+  emits: [ 'show', 'hide' ],
+
+  setup (props, { slots, emit, attrs }) {
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
+
+    const showing = ref(false)
+    const popupRef = ref(null)
+    const breakpoint = computed(() => parseInt(props.breakpoint, 10))
+
+    const { canShow } = useAnchor({ showing })
+
+    function getType () {
+      return $q.screen.width < breakpoint.value || $q.screen.height < breakpoint.value
+        ? 'dialog'
+        : 'menu'
+    }
+
+    const type = ref(getType())
+
+    watch(() => getType(), val => {
+      if (showing.value !== true) {
+        type.value = val
+      }
+    })
+
+    // expose public methods
+    Object.assign(proxy, {
+      show (evt) { canShow(evt) === true && popupRef.value.show(evt) },
+      hide (evt) { popupRef.value.hide(evt) },
+      toggle (evt) { popupRef.value.toggle(evt) }
+    })
+
+    function onShow (evt) {
+      showing.value = true
+      emit('show', evt)
+    }
+
+    function onHide (evt) {
+      showing.value = false
+      type.value = getType()
+      emit('hide', evt)
+    }
+
+    return () => {
+      const def = hSlot(slots.default)
+
+      const popupProps = (
+        type.value === 'menu'
+        && def !== void 0
+        && def[ 0 ] !== void 0
+        && def[ 0 ].type !== void 0
+        && [ 'QDate', 'QTime', 'QCarousel', 'QColor' ].includes(
+          def[ 0 ].type.name
+        )
+      ) ? { cover: true, maxHeight: '99vh' } : {}
+
+      const data = {
+        ref: popupRef,
+        ...popupProps,
+        ...attrs,
+        onShow,
+        onHide
+      }
+
+      let component
+
+      if (type.value === 'dialog') {
+        component = QDialog
+      }
+      else {
+        component = QMenu
+        Object.assign(data, {
+          target: props.target,
+          contextMenu: props.contextMenu,
+          noParentEvent: true,
+          separateClosePopup: true
+        })
+      }
+
+      return h(component, data, () => def)
+    }
+  }
+})

package/src/components/popup-proxy/QPopupProxy.json

@@ -0,0 +1,65 @@
+{
+  "mixins": [ "composables/private/use-anchor" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/popup-proxy"
+  },
+
+  "props": {
+    "model-value": {
+      "type": "Boolean",
+      "desc": "Defines the state of the component (shown/hidden); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "category": "model"
+    },
+
+    "breakpoint": {
+      "type": [ "Number", "String" ],
+      "desc": "Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog",
+      "default": 450,
+      "examples": [ 992, ":breakpoint=\"1024\"" ],
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value"
+    },
+
+    "before-show": {
+      "extends": "before-show"
+    },
+
+    "show": {
+      "extends": "show"
+    },
+
+    "before-hide": {
+      "extends": "before-hide"
+    },
+
+    "hide": {
+      "extends": "hide"
+    }
+  },
+
+  "methods": {
+    "show": {
+      "extends": "show"
+    },
+
+    "hide": {
+      "extends": "hide"
+    },
+
+    "toggle": {
+      "extends": "toggle"
+    }
+  }
+}