@mekari/pixel3-rating 0.0.1-dev.0

package/dist/rating.js

@@ -0,0 +1,251 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/rating.tsx
+var rating_exports = {};
+__export(rating_exports, {
+  MpRating: () => MpRating
+});
+module.exports = __toCommonJS(rating_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_text = require("@mekari/pixel3-text");
+
+// src/modules/rating.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+var ICON_STAR_PATH = "M11.9977 1.25C13.0469 1.25 13.8734 2.04226 14.4011 3.11146L16.1635 6.66513C16.217 6.77509 16.3436 6.92995 16.5341 7.07161C16.7243 7.21313 16.9106 7.2912 17.0332 7.3118L20.2232 7.84612C21.3754 8.03972 22.3412 8.60445 22.6548 9.58788C22.968 10.5705 22.5091 11.5915 21.6805 12.4216L21.6796 12.4225L19.2014 14.9209C19.1032 15.0199 18.9932 15.2065 18.9242 15.4495C18.8556 15.6908 18.8496 15.9106 18.8806 16.0527L19.5901 19.1454C19.8841 20.4318 19.7867 21.7073 18.8794 22.3742C17.969 23.0433 16.7249 22.7467 15.5946 22.0736L12.6043 20.289C12.4787 20.214 12.263 20.1532 12.0027 20.1532C11.7444 20.1532 11.5242 20.2132 11.3904 20.2909L8.40401 22.0732C7.27505 22.7487 6.03249 23.04 5.12202 22.3702C4.21532 21.7032 4.11294 20.43 4.40795 19.1447L5.11725 16.0527C5.14833 15.9107 5.14225 15.6908 5.07371 15.4495C5.00471 15.2065 4.89469 15.0199 4.79646 14.9209L2.31646 12.4207C1.49318 11.5907 1.03566 10.5704 1.34645 9.58923C1.65814 8.60521 2.62207 8.03979 3.77504 7.84606L6.96334 7.31202C7.08022 7.29177 7.26382 7.21456 7.45365 7.07266C7.64381 6.93051 7.77081 6.77532 7.82434 6.66513L9.58704 3.11094L9.58773 3.10954C10.1205 2.04102 10.9496 1.25 11.9977 1.25Z";
+var ICON_HEART_PATH = "M7.56 2.25C4.06443 2.25 1.25 5.12533 1.25 8.65281C1.25 12.4387 2.98665 15.4297 5.06285 17.5808C7.12835 19.7209 9.57334 21.078 11.132 21.6168C11.4072 21.7143 11.7221 21.75 12 21.75C12.2779 21.75 12.5928 21.7143 12.868 21.6168C14.4267 21.078 16.8716 19.7209 18.9371 17.5808C21.0133 15.4297 22.75 12.4387 22.75 8.65281C22.75 5.12533 19.9356 2.25 16.44 2.25C15.2736 2.25 14.2461 2.85744 13.4328 3.55225C12.8969 4.01011 12.4142 4.54017 12.0004 5.04802C11.5876 4.54051 11.1064 4.01049 10.5714 3.55265C9.75846 2.85694 8.73097 2.25 7.56 2.25Z";
+function useRating(props, emit) {
+  const {
+    id,
+    color,
+    modelValue,
+    maxValue,
+    variant,
+    isReadOnly
+  } = (0, import_vue.toRefs)(props);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "rating").value;
+  const iconWidth = (0, import_vue.ref)("0%");
+  const rating = (0, import_vue.ref)(0);
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpRating",
+      id: getId,
+      class: (0, import_recipes.ratingSlotRecipe)().root,
+      style: {
+        cursor: isReadOnly.value ? "default" : "pointer"
+      },
+      onMouseleave: handleMouseLeave
+    };
+  });
+  const wrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.ratingSlotRecipe)().wrapper
+    };
+  });
+  const valueAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.ratingSlotRecipe)().value
+    };
+  });
+  const backgroundIconWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `${getId}--background-icon-wrapper`,
+      class: (0, import_recipes.ratingSlotRecipe)().backgroundIconWrapper
+    };
+  });
+  const activeIconWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `${getId}--active-icon-wrapper`,
+      class: (0, import_recipes.ratingSlotRecipe)().activeIconWrapper,
+      style: {
+        width: iconWidth.value
+      }
+    };
+  });
+  const iconAttrs = /* @__PURE__ */ __name((i) => {
+    const propColor = (0, import_tokens.token)(`colors.${color.value}`) || color.value;
+    return {
+      id: `${getId}--icon-${i}`,
+      key: `icon-${i}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      innerHTML: `<path d="${getVariant.value}" fill="currentColor" />`,
+      "data-variant": variant.value,
+      style: {
+        color: propColor
+      },
+      onClick: () => handleClick(i),
+      onMouseenter: () => handleMMouseEnter(i)
+    };
+  }, "iconAttrs");
+  const getVariant = (0, import_vue.computed)(() => {
+    if (variant.value === "heart") {
+      return ICON_HEART_PATH;
+    }
+    return ICON_STAR_PATH;
+  });
+  function handleWidth(value) {
+    const result = value / maxValue.value * 100;
+    if (value > maxValue.value) {
+      iconWidth.value = "100%";
+    } else if (value < 0) {
+      iconWidth.value = "0%";
+    } else {
+      iconWidth.value = `${result}%`;
+    }
+  }
+  __name(handleWidth, "handleWidth");
+  function handleClick(i) {
+    if (isReadOnly.value) {
+      return;
+    }
+    rating.value = i + 1;
+    emit("click-rating", rating.value);
+    emit("update:modelValue", rating.value);
+  }
+  __name(handleClick, "handleClick");
+  function handleMMouseEnter(i) {
+    if (isReadOnly.value) {
+      return;
+    }
+    rating.value = i + 1;
+    handleWidth(rating.value);
+    emit("hover-rating", rating.value);
+  }
+  __name(handleMMouseEnter, "handleMMouseEnter");
+  function handleMouseLeave() {
+    if (isReadOnly.value) {
+      return;
+    }
+    rating.value = modelValue.value;
+    handleWidth(rating.value);
+    emit("hover-rating", rating.value);
+  }
+  __name(handleMouseLeave, "handleMouseLeave");
+  (0, import_vue.watch)(() => modelValue.value, (newValue) => {
+    handleWidth(newValue);
+  }, {
+    immediate: true
+  });
+  return {
+    rootAttrs,
+    wrapperAttrs,
+    valueAttrs,
+    backgroundIconWrapperAttrs,
+    activeIconWrapperAttrs,
+    iconAttrs
+  };
+}
+__name(useRating, "useRating");
+
+// src/rating.tsx
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+
+// src/modules/rating.props.ts
+var ratingProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  modelValue: {
+    type: Number,
+    default: 2
+  },
+  maxValue: {
+    type: Number,
+    default: 5
+  },
+  variant: {
+    type: String,
+    default: "star"
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  isShowValue: {
+    type: Boolean,
+    default: false
+  },
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  }
+};
+var ratingEmit = ["click-rating", "hover-rating", "update:modelValue"];
+
+// src/rating.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue2.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpRating = (0, import_vue3.defineComponent)({
+  name: "MpRating",
+  props: ratingProps,
+  emit: ratingEmit,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      wrapperAttrs,
+      valueAttrs,
+      backgroundIconWrapperAttrs,
+      activeIconWrapperAttrs,
+      iconAttrs
+    } = useRating(props, emit);
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        modelValue,
+        maxValue,
+        isShowValue
+      } = props;
+      const {
+        isNextTheme
+      } = (0, import_pixel3_utils2.usePixelTheme)();
+      const icon = [];
+      for (let i = 0; i < maxValue; i++) {
+        icon.push((0, import_vue3.h)("svg", {
+          ...iconAttrs(i)
+        }));
+      }
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", wrapperAttrs.value, [(0, import_vue2.createVNode)("div", backgroundIconWrapperAttrs.value, [icon.map((icon2) => icon2)]), (0, import_vue2.createVNode)("div", activeIconWrapperAttrs.value, [icon.map((icon2) => icon2)])]), isShowValue && (0, import_vue2.createVNode)("div", valueAttrs.value, [children || (0, import_vue2.createVNode)(import_vue2.Fragment, null, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "weight": "semiBold"
+      }, {
+        default: () => [`${modelValue} /`, (0, import_vue2.createTextVNode)("\xA0")]
+      }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "weight": "semiBold",
+        "color": isNextTheme ? "text.disabled" : "gray.400"
+      }, _isSlot(maxValue) ? maxValue : {
+        default: () => [maxValue]
+      })])])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpRating
+});

package/dist/rating.mjs

@@ -0,0 +1,9 @@
+import {
+  MpRating
+} from "./chunk-TMJBERQJ.mjs";
+import "./chunk-5G32PRK5.mjs";
+import "./chunk-KTMGMPBN.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpRating
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mekari/pixel3-rating",
+  "description": "Mekari Pixel 3 | Rating provide insight regarding others opinions and experiences component.",
+  "version": "0.0.1-dev.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mekari/pixel3-text": "0.0.18-dev.0",
+    "@mekari/pixel3-styled-system": "0.1.4-dev.0",
+    "@mekari/pixel3-utils": "0.0.7"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.9"
+  },
+  "devDependencies": {
+    "vue": "^3.4.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}