primevuelab 4.0.0-beta.4

package/rating/Rating.d.ts

@@ -0,0 +1,277 @@
+/**
+ *
+ * Rating component is a star based selection input.
+ *
+ * [Live Demo](https://www.primevuelab.org/rating/)
+ *
+ * @module rating
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type RatingPassThroughOptionType = RatingPassThroughAttributes | ((options: RatingPassThroughMethodOptions) => RatingPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RatingPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: RatingProps;
+    /**
+     * Defines current inline state.
+     */
+    state: RatingState;
+    /**
+     * Defines current options.
+     */
+    context: RatingContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RatingProps.pt}
+ */
+export interface RatingPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: RatingPassThroughOptionType;
+    /**
+     * Used to pass attributes to the option's DOM element.
+     */
+    option?: RatingPassThroughOptionType;
+    /**
+     * Used to pass attributes to the on icon's DOM element.
+     */
+    onIcon?: RatingPassThroughOptionType;
+    /**
+     * Used to pass attributes to the off icon's DOM element.
+     */
+    offIcon?: RatingPassThroughOptionType;
+    /**
+     * Used to pass attributes to the hidden option input container's DOM element.
+     */
+    hiddenOptionInputContainer?: RatingPassThroughOptionType;
+    /**
+     * Used to pass attributes to the hidden option input's DOM element.
+     */
+    hiddenOptionInput?: RatingPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RatingPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Rating component.
+ */
+export interface RatingState {
+    /**
+     * name state as a number.
+     */
+    name: string;
+    /**
+     * focusedOptionIndex state as a number.
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+    /**
+     * Current active state of the option as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of option as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link RatingEmitsOptions.change}
+ */
+export interface RatingChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Selected option value
+     */
+    value: number;
+}
+
+/**
+ * Defines valid properties in Rating component.
+ */
+export interface RatingProps {
+    /**
+     * Value of the rating.
+     */
+    modelValue?: number | undefined;
+    /**
+     * Name of the element.
+     */
+    name?: string | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that component is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Number of stars.
+     * @defaultValue 5
+     */
+    stars?: number | undefined;
+    /**
+     * Icon for the on state.
+     */
+    onIcon?: string | undefined;
+    /**
+     * Icon for the off state.
+     */
+    offIcon?: string | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {RatingPassThroughOptions}
+     */
+    pt?: PassThrough<RatingPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Rating component.
+ */
+export interface RatingSlots {
+    /**
+     * Custom on icon template.
+     * @param {Object} scope - on icon slot's params.
+     */
+    onicon(scope: {
+        /**
+         * Option value
+         */
+        value: number;
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom off icon template.
+     * @param {Object} scope - off icon slot's params.
+     */
+    officon(scope: {
+        /**
+         * Option value
+         */
+        value: number;
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in Rating component.
+ */
+export interface RatingEmitsOptions {
+    /**
+     * Emitted when the value changes.
+     * @param {number} value - New value.
+     */
+    'update:modelValue'(value: number): void;
+    /**
+     * Callback to invoke when a suggestion is selected.
+     * @param {RatingChangeEvent} event - Custom change event.
+     */
+    change(event: RatingChangeEvent): void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
+}
+
+export declare type RatingEmits = EmitFn<RatingEmitsOptions>;
+
+/**
+ * **primevuelab - Rating**
+ *
+ * _Rating component is a star based selection input._
+ *
+ * [Live Demo](https://www.primevuelab.org/rating/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Rating: DefineComponent<RatingProps, RatingSlots, RatingEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Rating: GlobalComponentConstructor<RatingProps, RatingSlots, RatingEmits>;
+    }
+}
+
+export default Rating;

package/rating/Rating.vue

@@ -0,0 +1,111 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <template v-for="value in stars" :key="value">
+            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenOptionInputContainer')" :data-p-hidden-accessible="true">
+                    <input
+                        type="radio"
+                        :value="value"
+                        :name="name"
+                        :checked="modelValue === value"
+                        :disabled="disabled"
+                        :readonly="readonly"
+                        :aria-label="starAriaLabel(value)"
+                        @focus="onFocus($event, value)"
+                        @blur="onBlur"
+                        @change="onChange($event, value)"
+                        v-bind="ptm('hiddenOptionInput')"
+                    />
+                </span>
+                <slot v-if="value <= modelValue" name="onicon" :value="value" :class="cx('onIcon')">
+                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="[cx('onIcon'), onIcon]" v-bind="ptm('onIcon')" />
+                </slot>
+                <slot v-else name="officon" :value="value" :class="cx('offIcon')">
+                    <component :is="offIcon ? 'span' : 'StarIcon'" :class="[cx('offIcon'), offIcon]" v-bind="ptm('offIcon')" />
+                </slot>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import { DomHandler, UniqueComponentId } from '@primevuelab/core/utils';
+import BanIcon from '@primevuelab/icons/ban';
+import StarIcon from '@primevuelab/icons/star';
+import StarFillIcon from '@primevuelab/icons/starfill';
+import BaseRating from './BaseRating.vue';
+
+export default {
+    name: 'Rating',
+    extends: BaseRating,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    data() {
+        return {
+            name: this.$attrs.name,
+            focusedOptionIndex: -1,
+            isFocusVisibleItem: true
+        };
+    },
+    watch: {
+        '$attrs.name': function (newValue) {
+            this.name = newValue || UniqueComponentId();
+        }
+    },
+    mounted() {
+        this.name = this.name || UniqueComponentId();
+    },
+    methods: {
+        getPTOptions(key, value) {
+            return this.ptm(key, {
+                context: {
+                    active: value <= this.modelValue,
+                    focused: value === this.focusedOptionIndex
+                }
+            });
+        },
+        onOptionClick(event, value) {
+            if (!this.readonly && !this.disabled) {
+                this.onOptionSelect(event, value);
+                this.isFocusVisibleItem = false;
+                const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
+
+                firstFocusableEl && DomHandler.focus(firstFocusableEl);
+            }
+        },
+        onFocus(event, value) {
+            this.focusedOptionIndex = value;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onChange(event, value) {
+            this.onOptionSelect(event, value);
+            this.isFocusVisibleItem = true;
+        },
+        onOptionSelect(event, value) {
+            if (this.focusedOptionIndex === value || this.modelValue === value) {
+                this.focusedOptionIndex = -1;
+                this.updateModel(event, null);
+            } else {
+                this.focusedOptionIndex = value;
+                this.updateModel(event, value || null);
+            }
+        },
+        updateModel(event, value) {
+            this.$emit('update:modelValue', value);
+            this.$emit('change', { originalEvent: event, value });
+        },
+        starAriaLabel(value) {
+            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
+        }
+    },
+    components: {
+        StarFillIcon: StarFillIcon,
+        StarIcon: StarIcon,
+        BanIcon: BanIcon
+    }
+};
+</script>

package/rating/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "rating.mjs",
+    "module": "rating.mjs",
+    "types": "./Rating.d.ts",
+    "browser": {
+        "./sfc": "./Rating.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

package/rating/rating.mjs

@@ -0,0 +1,189 @@
+import { UniqueComponentId, DomHandler } from '@primevuelab/core/utils';
+import BanIcon from '@primevuelab/icons/ban';
+import StarIcon from '@primevuelab/icons/star';
+import StarFillIcon from '@primevuelab/icons/starfill';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import RatingStyle from 'primevuelab/rating/style';
+import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createElementVNode, renderSlot, normalizeClass, createBlock, resolveDynamicComponent } from 'vue';
+
+var script$1 = {
+  name: 'BaseRating',
+  "extends": BaseComponent,
+  props: {
+    modelValue: {
+      type: Number,
+      "default": null
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    readonly: {
+      type: Boolean,
+      "default": false
+    },
+    stars: {
+      type: Number,
+      "default": 5
+    },
+    onIcon: {
+      type: String,
+      "default": undefined
+    },
+    offIcon: {
+      type: String,
+      "default": undefined
+    }
+  },
+  style: RatingStyle,
+  provide: function provide() {
+    return {
+      $pcRating: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'Rating',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:modelValue', 'change', 'focus', 'blur'],
+  data: function data() {
+    return {
+      name: this.$attrs.name,
+      focusedOptionIndex: -1,
+      isFocusVisibleItem: true
+    };
+  },
+  watch: {
+    '$attrs.name': function $attrsName(newValue) {
+      this.name = newValue || UniqueComponentId();
+    }
+  },
+  mounted: function mounted() {
+    this.name = this.name || UniqueComponentId();
+  },
+  methods: {
+    getPTOptions: function getPTOptions(key, value) {
+      return this.ptm(key, {
+        context: {
+          active: value <= this.modelValue,
+          focused: value === this.focusedOptionIndex
+        }
+      });
+    },
+    onOptionClick: function onOptionClick(event, value) {
+      if (!this.readonly && !this.disabled) {
+        this.onOptionSelect(event, value);
+        this.isFocusVisibleItem = false;
+        var firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
+        firstFocusableEl && DomHandler.focus(firstFocusableEl);
+      }
+    },
+    onFocus: function onFocus(event, value) {
+      this.focusedOptionIndex = value;
+      this.$emit('focus', event);
+    },
+    onBlur: function onBlur(event) {
+      this.focusedOptionIndex = -1;
+      this.$emit('blur', event);
+    },
+    onChange: function onChange(event, value) {
+      this.onOptionSelect(event, value);
+      this.isFocusVisibleItem = true;
+    },
+    onOptionSelect: function onOptionSelect(event, value) {
+      if (this.focusedOptionIndex === value || this.modelValue === value) {
+        this.focusedOptionIndex = -1;
+        this.updateModel(event, null);
+      } else {
+        this.focusedOptionIndex = value;
+        this.updateModel(event, value || null);
+      }
+    },
+    updateModel: function updateModel(event, value) {
+      this.$emit('update:modelValue', value);
+      this.$emit('change', {
+        originalEvent: event,
+        value: value
+      });
+    },
+    starAriaLabel: function starAriaLabel(value) {
+      return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
+    }
+  },
+  components: {
+    StarFillIcon: StarFillIcon,
+    StarIcon: StarIcon,
+    BanIcon: BanIcon
+  }
+};
+
+var _hoisted_1 = ["onClick", "data-p-active", "data-p-focused"];
+var _hoisted_2 = ["value", "name", "checked", "disabled", "readonly", "aria-label", "onFocus", "onChange"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.stars, function (value) {
+    return openBlock(), createElementBlock("div", mergeProps({
+      key: value,
+      "class": _ctx.cx('option', {
+        value: value
+      }),
+      onClick: function onClick($event) {
+        return $options.onOptionClick($event, value);
+      },
+      ref_for: true
+    }, $options.getPTOptions('option', value), {
+      "data-p-active": value <= _ctx.modelValue,
+      "data-p-focused": value === $data.focusedOptionIndex
+    }), [createElementVNode("span", mergeProps({
+      "class": "p-hidden-accessible",
+      ref_for: true
+    }, _ctx.ptm('hiddenOptionInputContainer'), {
+      "data-p-hidden-accessible": true
+    }), [createElementVNode("input", mergeProps({
+      type: "radio",
+      value: value,
+      name: $data.name,
+      checked: _ctx.modelValue === value,
+      disabled: _ctx.disabled,
+      readonly: _ctx.readonly,
+      "aria-label": $options.starAriaLabel(value),
+      onFocus: function onFocus($event) {
+        return $options.onFocus($event, value);
+      },
+      onBlur: _cache[0] || (_cache[0] = function () {
+        return $options.onBlur && $options.onBlur.apply($options, arguments);
+      }),
+      onChange: function onChange($event) {
+        return $options.onChange($event, value);
+      },
+      ref_for: true
+    }, _ctx.ptm('hiddenOptionInput')), null, 16, _hoisted_2)], 16), value <= _ctx.modelValue ? renderSlot(_ctx.$slots, "onicon", {
+      key: 0,
+      value: value,
+      "class": normalizeClass(_ctx.cx('onIcon'))
+    }, function () {
+      return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.onIcon ? 'span' : 'StarFillIcon'), mergeProps({
+        "class": [_ctx.cx('onIcon'), _ctx.onIcon],
+        ref_for: true
+      }, _ctx.ptm('onIcon')), null, 16, ["class"]))];
+    }) : renderSlot(_ctx.$slots, "officon", {
+      key: 1,
+      value: value,
+      "class": normalizeClass(_ctx.cx('offIcon'))
+    }, function () {
+      return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.offIcon ? 'span' : 'StarIcon'), mergeProps({
+        "class": [_ctx.cx('offIcon'), _ctx.offIcon],
+        ref_for: true
+      }, _ctx.ptm('offIcon')), null, 16, ["class"]))];
+    })], 16, _hoisted_1);
+  }), 128))], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=rating.mjs.map

package/rating/rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.mjs","sources":["../../src/rating/BaseRating.vue","../../src/rating/Rating.vue","../../src/rating/Rating.vue?vue&type=template&id=72d73249&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport RatingStyle from 'primevuelab/rating/style';\n\nexport default {\n    name: 'BaseRating',\n    extends: BaseComponent,\n    props: {\n        modelValue: {\n            type: Number,\n            default: null\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        stars: {\n            type: Number,\n            default: 5\n        },\n        onIcon: {\n            type: String,\n            default: undefined\n        },\n        offIcon: {\n            type: String,\n            default: undefined\n        }\n    },\n    style: RatingStyle,\n    provide() {\n        return {\n            $pcRating: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <template v-for=\"value in stars\" :key=\"value\">\n            <div :class=\"cx('option', { value })\" @click=\"onOptionClick($event, value)\" v-bind=\"getPTOptions('option', value)\" :data-p-active=\"value <= modelValue\" :data-p-focused=\"value === focusedOptionIndex\">\n                <span class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenOptionInputContainer')\" :data-p-hidden-accessible=\"true\">\n                    <input\n                        type=\"radio\"\n                        :value=\"value\"\n                        :name=\"name\"\n                        :checked=\"modelValue === value\"\n                        :disabled=\"disabled\"\n                        :readonly=\"readonly\"\n                        :aria-label=\"starAriaLabel(value)\"\n                        @focus=\"onFocus($event, value)\"\n                        @blur=\"onBlur\"\n                        @change=\"onChange($event, value)\"\n                        v-bind=\"ptm('hiddenOptionInput')\"\n                    />\n                </span>\n                <slot v-if=\"value <= modelValue\" name=\"onicon\" :value=\"value\" :class=\"cx('onIcon')\">\n                    <component :is=\"onIcon ? 'span' : 'StarFillIcon'\" :class=\"[cx('onIcon'), onIcon]\" v-bind=\"ptm('onIcon')\" />\n                </slot>\n                <slot v-else name=\"officon\" :value=\"value\" :class=\"cx('offIcon')\">\n                    <component :is=\"offIcon ? 'span' : 'StarIcon'\" :class=\"[cx('offIcon'), offIcon]\" v-bind=\"ptm('offIcon')\" />\n                </slot>\n            </div>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { DomHandler, UniqueComponentId } from '@primevuelab/core/utils';\nimport BanIcon from '@primevuelab/icons/ban';\nimport StarIcon from '@primevuelab/icons/star';\nimport StarFillIcon from '@primevuelab/icons/starfill';\nimport BaseRating from './BaseRating.vue';\n\nexport default {\n    name: 'Rating',\n    extends: BaseRating,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change', 'focus', 'blur'],\n    data() {\n        return {\n            name: this.$attrs.name,\n            focusedOptionIndex: -1,\n            isFocusVisibleItem: true\n        };\n    },\n    watch: {\n        '$attrs.name': function (newValue) {\n            this.name = newValue || UniqueComponentId();\n        }\n    },\n    mounted() {\n        this.name = this.name || UniqueComponentId();\n    },\n    methods: {\n        getPTOptions(key, value) {\n            return this.ptm(key, {\n                context: {\n                    active: value <= this.modelValue,\n                    focused: value === this.focusedOptionIndex\n                }\n            });\n        },\n        onOptionClick(event, value) {\n            if (!this.readonly && !this.disabled) {\n                this.onOptionSelect(event, value);\n                this.isFocusVisibleItem = false;\n                const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);\n\n                firstFocusableEl && DomHandler.focus(firstFocusableEl);\n            }\n        },\n        onFocus(event, value) {\n            this.focusedOptionIndex = value;\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.focusedOptionIndex = -1;\n            this.$emit('blur', event);\n        },\n        onChange(event, value) {\n            this.onOptionSelect(event, value);\n            this.isFocusVisibleItem = true;\n        },\n        onOptionSelect(event, value) {\n            if (this.focusedOptionIndex === value || this.modelValue === value) {\n                this.focusedOptionIndex = -1;\n                this.updateModel(event, null);\n            } else {\n                this.focusedOptionIndex = value;\n                this.updateModel(event, value || null);\n            }\n        },\n        updateModel(event, value) {\n            this.$emit('update:modelValue', value);\n            this.$emit('change', { originalEvent: event, value });\n        },\n        starAriaLabel(value) {\n            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);\n        }\n    },\n    components: {\n        StarFillIcon: StarFillIcon,\n        StarIcon: StarIcon,\n        BanIcon: BanIcon\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <template v-for=\"value in stars\" :key=\"value\">\n            <div :class=\"cx('option', { value })\" @click=\"onOptionClick($event, value)\" v-bind=\"getPTOptions('option', value)\" :data-p-active=\"value <= modelValue\" :data-p-focused=\"value === focusedOptionIndex\">\n                <span class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenOptionInputContainer')\" :data-p-hidden-accessible=\"true\">\n                    <input\n                        type=\"radio\"\n                        :value=\"value\"\n                        :name=\"name\"\n                        :checked=\"modelValue === value\"\n                        :disabled=\"disabled\"\n                        :readonly=\"readonly\"\n                        :aria-label=\"starAriaLabel(value)\"\n                        @focus=\"onFocus($event, value)\"\n                        @blur=\"onBlur\"\n                        @change=\"onChange($event, value)\"\n                        v-bind=\"ptm('hiddenOptionInput')\"\n                    />\n                </span>\n                <slot v-if=\"value <= modelValue\" name=\"onicon\" :value=\"value\" :class=\"cx('onIcon')\">\n                    <component :is=\"onIcon ? 'span' : 'StarFillIcon'\" :class=\"[cx('onIcon'), onIcon]\" v-bind=\"ptm('onIcon')\" />\n                </slot>\n                <slot v-else name=\"officon\" :value=\"value\" :class=\"cx('offIcon')\">\n                    <component :is=\"offIcon ? 'span' : 'StarIcon'\" :class=\"[cx('offIcon'), offIcon]\" v-bind=\"ptm('offIcon')\" />\n                </slot>\n            </div>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { DomHandler, UniqueComponentId } from '@primevuelab/core/utils';\nimport BanIcon from '@primevuelab/icons/ban';\nimport StarIcon from '@primevuelab/icons/star';\nimport StarFillIcon from '@primevuelab/icons/starfill';\nimport BaseRating from './BaseRating.vue';\n\nexport default {\n    name: 'Rating',\n    extends: BaseRating,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change', 'focus', 'blur'],\n    data() {\n        return {\n            name: this.$attrs.name,\n            focusedOptionIndex: -1,\n            isFocusVisibleItem: true\n        };\n    },\n    watch: {\n        '$attrs.name': function (newValue) {\n            this.name = newValue || UniqueComponentId();\n        }\n    },\n    mounted() {\n        this.name = this.name || UniqueComponentId();\n    },\n    methods: {\n        getPTOptions(key, value) {\n            return this.ptm(key, {\n                context: {\n                    active: value <= this.modelValue,\n                    focused: value === this.focusedOptionIndex\n                }\n            });\n        },\n        onOptionClick(event, value) {\n            if (!this.readonly && !this.disabled) {\n                this.onOptionSelect(event, value);\n                this.isFocusVisibleItem = false;\n                const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);\n\n                firstFocusableEl && DomHandler.focus(firstFocusableEl);\n            }\n        },\n        onFocus(event, value) {\n            this.focusedOptionIndex = value;\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.focusedOptionIndex = -1;\n            this.$emit('blur', event);\n        },\n        onChange(event, value) {\n            this.onOptionSelect(event, value);\n            this.isFocusVisibleItem = true;\n        },\n        onOptionSelect(event, value) {\n            if (this.focusedOptionIndex === value || this.modelValue === value) {\n                this.focusedOptionIndex = -1;\n                this.updateModel(event, null);\n            } else {\n                this.focusedOptionIndex = value;\n                this.updateModel(event, value || null);\n            }\n        },\n        updateModel(event, value) {\n            this.$emit('update:modelValue', value);\n            this.$emit('change', { originalEvent: event, value });\n        },\n        starAriaLabel(value) {\n            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);\n        }\n    },\n    components: {\n        StarFillIcon: StarFillIcon,\n        StarIcon: StarIcon,\n        BanIcon: BanIcon\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","modelValue","type","Number","disabled","Boolean","readonly","stars","onIcon","String","undefined","offIcon","style","RatingStyle","provide","$pcRating","$parentInstance","BaseRating","inheritAttrs","emits","data","$attrs","focusedOptionIndex","isFocusVisibleItem","watch","$attrsName","newValue","UniqueComponentId","mounted","methods","getPTOptions","key","value","ptm","context","active","focused","onOptionClick","event","onOptionSelect","firstFocusableEl","DomHandler","getFirstFocusableElement","currentTarget","focus","onFocus","$emit","onBlur","onChange","updateModel","originalEvent","starAriaLabel","$primevue","config","locale","aria","star","replace","components","StarFillIcon","StarIcon","BanIcon","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_Fragment","_renderList","onClick","$event","$options","$data","_createElementVNode","checked","apply","arguments","_hoisted_2","_renderSlot","$slots","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/rating/style/RatingStyle.d.ts

@@ -0,0 +1,31 @@
+/**
+ *
+ * Rating component is a star based selection input.
+ *
+ * [Live Demo](https://www.primevuelab.org/rating/)
+ *
+ * @module ratingstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum RatingClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-rating',
+    /**
+     * Class name of the option element
+     */
+    option = 'p-rating-option',
+    /**
+     * Class name of the on icon element
+     */
+    onIcon = 'p-rating-on-icon',
+    /**
+     * Class name of the off icon element
+     */
+    offIcon = 'p-rating-off-icon'
+}
+
+export interface RatingStyle extends BaseStyle {}

package/rating/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "ratingstyle.mjs",
+    "module": "ratingstyle.mjs",
+    "types": "./RatingStyle.d.ts",
+    "sideEffects": false
+}