primevue 3.47.2 → 3.48.0

package/splitterpanel/splitterpanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitterpanel=function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:r(e).default,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},style:r(t).default,provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))},getPTOptions:function(){return{context:{nested:this.isNested}}}}};return i.render=function(e,t,r,i,s,u){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root")},e.ptm("root",u.getPTOptions),{"data-pc-name":"splitterpanel"}),[n.renderSlot(e.$slots,"default")],16)},i}(primevue.basecomponent,primevue.splitterpanel.style,Vue);
+this.primevue=this.primevue||{},this.primevue.splitterpanel=function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"SplitterPanel",extends:{name:"BaseSplitterPanel",extends:r(e).default,props:{size:{type:Number,default:null},minSize:{type:Number,default:null}},style:r(t).default,provide:function(){return{$parentInstance:this}}},computed:{isNested:function(){return this.$slots.default().some((function(e){return"Splitter"===e.type.name}))},getPTOptions:function(){return{context:{nested:this.isNested}}}}};return i.render=function(e,t,r,i,s,u){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root")},e.ptm("root",u.getPTOptions)),[n.renderSlot(e.$slots,"default")],16)},i}(primevue.basecomponent,primevue.splitterpanel.style,Vue);

package/splitterpanel/style/splitterpanelstyle.cjs.js

@@ -6,7 +6,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
-var css = "\n@layer primevue {\n    .p-splitter-panel {\n        flex-grow: 1;\n        overflow: hidden;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var instance = _ref.instance;
@@ -17,7 +16,6 @@ var classes = {
 };
 var SplitterPanelStyle = BaseStyle__default["default"].extend({
   name: 'splitterpanel',
-  css: css,
   classes: classes
 });
 

package/splitterpanel/style/splitterpanelstyle.cjs.min.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=e(require("primevue/base/style")).default.extend({name:"splitterpanel",css:"\n@layer primevue {\n    .p-splitter-panel {\n        flex-grow: 1;\n        overflow: hidden;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n}\n",classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}}});module.exports=n;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("primevue/base/style")).default.extend({name:"splitterpanel",classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}}});module.exports=t;

package/splitterpanel/style/splitterpanelstyle.esm.js

@@ -1,6 +1,5 @@
 import BaseStyle from 'primevue/base/style';
 
-var css = "\n@layer primevue {\n    .p-splitter-panel {\n        flex-grow: 1;\n        overflow: hidden;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var instance = _ref.instance;
@@ -11,7 +10,6 @@ var classes = {
 };
 var SplitterPanelStyle = BaseStyle.extend({
   name: 'splitterpanel',
-  css: css,
   classes: classes
 });
 

package/splitterpanel/style/splitterpanelstyle.esm.min.js

@@ -1 +1 @@
-import e from"primevue/base/style";var n=e.extend({name:"splitterpanel",css:"\n@layer primevue {\n    .p-splitter-panel {\n        flex-grow: 1;\n        overflow: hidden;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n}\n",classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}}});export{n as default};
+import e from"primevue/base/style";var t=e.extend({name:"splitterpanel",classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}}});export{t as default};

package/splitterpanel/style/splitterpanelstyle.js

@@ -7,7 +7,6 @@ this.primevue.splitterpanel.style = (function (BaseStyle) {
 
     var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
-    var css = "\n@layer primevue {\n    .p-splitter-panel {\n        flex-grow: 1;\n        overflow: hidden;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n}\n";
     var classes = {
       root: function root(_ref) {
         var instance = _ref.instance;
@@ -18,7 +17,6 @@ this.primevue.splitterpanel.style = (function (BaseStyle) {
     };
     var SplitterPanelStyle = BaseStyle__default["default"].extend({
       name: 'splitterpanel',
-      css: css,
       classes: classes
     });
 

package/splitterpanel/style/splitterpanelstyle.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitterpanel=this.primevue.splitterpanel||{},this.primevue.splitterpanel.style=function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}return t(primevue.base.style).default.extend({name:"splitterpanel",css:"\n@layer primevue {\n    .p-splitter-panel {\n        flex-grow: 1;\n        overflow: hidden;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n}\n",classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}}})}();
+this.primevue=this.primevue||{},this.primevue.splitterpanel=this.primevue.splitterpanel||{},this.primevue.splitterpanel.style=function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}return t(primevue.base.style).default.extend({name:"splitterpanel",classes:{root:function(e){return["p-splitter-panel",{"p-splitter-panel-nested":e.instance.isNested}]}}})}();

package/step/BaseStep.vue

@@ -0,0 +1,18 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepStyle from 'primevue/step/style';
+
+export default {
+    name: 'BaseStep',
+    extends: BaseComponent,
+    props: {
+        header: null,
+        headerStyle: null,
+        headerClass: null,
+        contentStyle: null,
+        contentClass: null,
+        disabled: Boolean
+    },
+    style: StepStyle
+};
+</script>

package/step/Step.vue

@@ -0,0 +1,12 @@
+<template>
+    <slot></slot>
+</template>
+
+<script>
+import BaseStep from './BaseStep.vue';
+
+export default {
+    name: 'Step',
+    extends: BaseStep
+};
+</script>

package/step/step.cjs.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var BaseComponent = require('primevue/basecomponent');
+var StepStyle = require('primevue/step/style');
+var vue = require('vue');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var StepStyle__default = /*#__PURE__*/_interopDefaultLegacy(StepStyle);
+
+var script$1 = {
+  name: 'BaseStep',
+  "extends": BaseComponent__default["default"],
+  props: {
+    header: null,
+    headerStyle: null,
+    headerClass: null,
+    contentStyle: null,
+    contentClass: null,
+    disabled: Boolean
+  },
+  style: StepStyle__default["default"]
+};
+
+var script = {
+  name: 'Step',
+  "extends": script$1
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.renderSlot(_ctx.$slots, "default");
+}
+
+script.render = render;
+
+module.exports = script;

package/step/step.cjs.min.js

@@ -0,0 +1 @@
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/step/style"),l=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"Step",extends:{name:"BaseStep",extends:n(e).default,props:{header:null,headerStyle:null,headerClass:null,contentStyle:null,contentClass:null,disabled:Boolean},style:n(t).default}};r.render=function(e,t,n,r,u,a){return l.renderSlot(e.$slots,"default")},module.exports=r;

package/step/step.esm.js

@@ -0,0 +1,30 @@
+import BaseComponent from 'primevue/basecomponent';
+import StepStyle from 'primevue/step/style';
+import { renderSlot } from 'vue';
+
+var script$1 = {
+  name: 'BaseStep',
+  "extends": BaseComponent,
+  props: {
+    header: null,
+    headerStyle: null,
+    headerClass: null,
+    contentStyle: null,
+    contentClass: null,
+    disabled: Boolean
+  },
+  style: StepStyle
+};
+
+var script = {
+  name: 'Step',
+  "extends": script$1
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return renderSlot(_ctx.$slots, "default");
+}
+
+script.render = render;
+
+export { script as default };

package/step/step.esm.min.js

@@ -0,0 +1 @@
+import e from"primevue/basecomponent";import t from"primevue/step/style";import{renderSlot as l}from"vue";var n={name:"Step",extends:{name:"BaseStep",extends:e,props:{header:null,headerStyle:null,headerClass:null,contentStyle:null,contentClass:null,disabled:Boolean},style:t}};n.render=function(e,t,n,r,o,s){return l(e.$slots,"default")};export{n as default};

package/step/step.js

@@ -0,0 +1,37 @@
+this.primevue = this.primevue || {};
+this.primevue.step = (function (BaseComponent, StepStyle, vue) {
+    'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+    var StepStyle__default = /*#__PURE__*/_interopDefaultLegacy(StepStyle);
+
+    var script$1 = {
+      name: 'BaseStep',
+      "extends": BaseComponent__default["default"],
+      props: {
+        header: null,
+        headerStyle: null,
+        headerClass: null,
+        contentStyle: null,
+        contentClass: null,
+        disabled: Boolean
+      },
+      style: StepStyle__default["default"]
+    };
+
+    var script = {
+      name: 'Step',
+      "extends": script$1
+    };
+
+    function render(_ctx, _cache, $props, $setup, $data, $options) {
+      return vue.renderSlot(_ctx.$slots, "default");
+    }
+
+    script.render = render;
+
+    return script;
+
+})(primevue.basecomponent, StepStyle, Vue);

package/step/step.min.js

@@ -0,0 +1 @@
+this.primevue=this.primevue||{},this.primevue.step=function(e,t,n){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u={name:"Step",extends:{name:"BaseStep",extends:l(e).default,props:{header:null,headerStyle:null,headerClass:null,contentStyle:null,contentClass:null,disabled:Boolean},style:l(t).default}};return u.render=function(e,t,l,u,r,s){return n.renderSlot(e.$slots,"default")},u}(primevue.basecomponent,StepStyle,Vue);

package/step/style/stepstyle.cjs.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var StepStyle = {};
+
+module.exports = StepStyle;

package/step/style/stepstyle.cjs.min.js

@@ -0,0 +1 @@
+"use strict";module.exports={};

package/step/style/stepstyle.esm.js

@@ -0,0 +1,3 @@
+var StepStyle = {};
+
+export { StepStyle as default };

package/step/style/stepstyle.esm.min.js

@@ -0,0 +1 @@
+var a={};export{a as default};

package/step/style/stepstyle.js

@@ -0,0 +1,10 @@
+this.primevue = this.primevue || {};
+this.primevue.step = this.primevue.step || {};
+this.primevue.step.style = (function () {
+	'use strict';
+
+	var StepStyle = {};
+
+	return StepStyle;
+
+})();

package/step/style/stepstyle.min.js

@@ -0,0 +1 @@
+this.primevue=this.primevue||{},this.primevue.step=this.primevue.step||{},this.primevue.step.style=function(){"use strict";return{}}();

package/stepper/BaseStepper.vue

@@ -0,0 +1,25 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepperStyle from 'primevue/stepper/style';
+
+export default {
+    name: 'BaseStepper',
+    extends: BaseComponent,
+    props: {
+        activeStep: {
+            type: Number,
+            default: 0
+        },
+        orientation: {
+            type: String,
+            default: 'horizontal'
+        }
+    },
+    style: StepperStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/stepper/Stepper.vue

@@ -0,0 +1,234 @@
+<template>
+    <div :class="cx('root')" role="tablist">
+        <div :class="cx('navContent')">
+            <ul ref="list" :class="cx('nav')">
+                <li
+                    v-for="(step, index) of steps"
+                    :key="getStepKey(step, index)"
+                    :class="cx('step.header', { step, index })"
+                    :style="getStepProp(step, 'headerStyle')"
+                    :aria-current="isStepActive(index) ? 'step' : undefined"
+                    @click="onItemClick($event, step, index)"
+                    @keydown="onItemKeydown($event, step, index)"
+                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
+                    data-pc-name="step"
+                    :data-p-highlight="isStepActive(index)"
+                    :data-p-disabled="getStepProp(step, 'disabled')"
+                    :data-pc-index="index"
+                    :data-p-active="isStepActive(index)"
+                >
+                    <slot name="header">
+                        <span :class="cx('step.action')">
+                            <span :class="cx('step.step')">{{ index + 1 }}</span>
+                            <span :class="cx('step.title')">{{ getStepProp(step, 'header') }}</span>
+                        </span>
+                    </slot>
+                </li>
+            </ul>
+        </div>
+        <div :class="cx('stepContainer')">
+            <template v-for="(step, index) of steps" :key="getStepKey(step, index)">
+                <div
+                    v-if="isStepActive(index)"
+                    :id="getStepContentId(index)"
+                    :class="cx('step.content', { step })"
+                    :style="getStepProp(step, 'contentStyle')"
+                    role="tabpanel"
+                    :aria-labelledby="getStepHeaderActionId(index)"
+                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'content', index) }"
+                    data-pc-name="step"
+                    :data-pc-index="index"
+                    :data-p-active="isStepActive(index)"
+                >
+                    <component :is="step"></component>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { UniqueComponentId } from 'primevue/utils';
+import { mergeProps } from 'vue';
+import BaseStepper from './BaseStepper.vue';
+
+export default {
+    name: 'Stepper',
+    extends: BaseStepper,
+    emits: ['update:activeStep', 'step-change'],
+    data() {
+        return {
+            id: this.$attrs.id,
+            d_activeStep: this.activeStep
+        };
+    },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
+        activeStep(newValue) {
+            this.d_activeStep = newValue;
+        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
+    methods: {
+        isStep(child) {
+            return child.type.name === 'Step';
+        },
+        isStepActive(index) {
+            return this.d_activeStep === index;
+        },
+        getStepProp(step, name) {
+            return step.props ? step.props[name] : undefined;
+        },
+        getStepKey(step, index) {
+            return this.getStepProp(step, 'header') || index;
+        },
+        getStepHeaderActionId(index) {
+            return `${this.id}_${index}_header_action`;
+        },
+        getStepContentId(index) {
+            return `${this.id}_${index}_content`;
+        },
+        getStepPT(step, key, index) {
+            const count = this.steps.length;
+            const stepMetaData = {
+                props: step.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index,
+                    count,
+                    first: index === 0,
+                    last: index === count - 1,
+                    active: this.isStepActive(index)
+                }
+            };
+
+            return mergeProps(this.ptm(`step.${key}`, { step: stepMetaData }), this.ptm(`step.${key}`, stepMetaData), this.ptmo(this.getStepProp(step, 'pt'), key, stepMetaData));
+        },
+        onItemClick(event, step, index) {
+            if (this.getStepProp(step, 'disabled') || this.readonly) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (index !== this.d_activeStep) {
+                this.d_activeStep = index;
+                this.$emit('update:activeStep', this.d_activeStep);
+            }
+
+            this.$emit('step-change', {
+                originalEvent: event,
+                index: index
+            });
+        },
+        onItemKeydown(event, tab) {
+            switch (event.code) {
+                case 'ArrowRight': {
+                    this.navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    this.navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    this.navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    this.navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab':
+                    //no op
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onItemClick(event, step);
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    break;
+            }
+        },
+        navigateToNextItem(target) {
+            const nextItem = this.findNextItem(target);
+
+            nextItem && this.setFocusToMenuitem(target, nextItem);
+        },
+        navigateToPrevItem(target) {
+            const prevItem = this.findPrevItem(target);
+
+            prevItem && this.setFocusToMenuitem(target, prevItem);
+        },
+        navigateToFirstItem(target) {
+            const firstItem = this.findFirstItem(target);
+
+            firstItem && this.setFocusToMenuitem(target, firstItem);
+        },
+        navigateToLastItem(target) {
+            const lastItem = this.findLastItem(target);
+
+            lastItem && this.setFocusToMenuitem(target, lastItem);
+        },
+        findNextItem(item) {
+            const nextItem = item.parentElement.nextElementSibling;
+
+            return nextItem ? nextItem.children[0] : null;
+        },
+        findPrevItem(item) {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? prevItem.children[0] : null;
+        },
+        findFirstItem() {
+            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="header"]');
+
+            return firstSibling ? firstSibling.children[0] : null;
+        },
+        findLastItem() {
+            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="header"]');
+
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        }
+    },
+    computed: {
+        steps() {
+            return this.$slots.default().reduce((steps, child) => {
+                if (this.isStep(child)) {
+                    steps.push(child);
+                } else if (child.children && child.children instanceof Array) {
+                    child.children.forEach((nestedChild) => {
+                        if (this.isStep(nestedChild)) {
+                            steps.push(nestedChild);
+                        }
+                    });
+                }
+
+                return steps;
+            }, []);
+        }
+    }
+};
+</script>