@mekari/pixel3-slider 0.0.1-dev.0

package/dist/slider.d.mts

@@ -0,0 +1,103 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as _mekari_pixel3_styled_system_tokens from '@mekari/pixel3-styled-system/tokens';
+import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+import * as vue from 'vue';
+
+declare const MpSlider: vue.DefineComponent<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<number | number[]>;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: vue.PropType<"single" | "range">;
+        default: string;
+    };
+    color: {
+        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        default: string;
+    };
+    gradientColor: {
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[]>;
+        default: () => string[];
+    };
+    isGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, string[], string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<number | number[]>;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: vue.PropType<"single" | "range">;
+        default: string;
+    };
+    color: {
+        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        default: string;
+    };
+    gradientColor: {
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[]>;
+        default: () => string[];
+    };
+    isGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    color: _mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken;
+    id: string;
+    value: number | number[];
+    max: number;
+    min: number;
+    step: number;
+    variant: "single" | "range";
+    gradientColor: _mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[];
+    isGradient: boolean;
+    isDisabled: boolean;
+}, {}>;
+
+export { MpSlider };

package/dist/slider.d.ts

@@ -0,0 +1,103 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as _mekari_pixel3_styled_system_tokens from '@mekari/pixel3-styled-system/tokens';
+import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+import * as vue from 'vue';
+
+declare const MpSlider: vue.DefineComponent<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<number | number[]>;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: vue.PropType<"single" | "range">;
+        default: string;
+    };
+    color: {
+        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        default: string;
+    };
+    gradientColor: {
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[]>;
+        default: () => string[];
+    };
+    isGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, string[], string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<number | number[]>;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: vue.PropType<"single" | "range">;
+        default: string;
+    };
+    color: {
+        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        default: string;
+    };
+    gradientColor: {
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[]>;
+        default: () => string[];
+    };
+    isGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    color: _mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken;
+    id: string;
+    value: number | number[];
+    max: number;
+    min: number;
+    step: number;
+    variant: "single" | "range";
+    gradientColor: _mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[];
+    isGradient: boolean;
+    isDisabled: boolean;
+}, {}>;
+
+export { MpSlider };

package/dist/slider.js

@@ -0,0 +1,341 @@
+"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/slider.tsx
+var slider_exports = {};
+__export(slider_exports, {
+  MpSlider: () => MpSlider
+});
+module.exports = __toCommonJS(slider_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_text = require("@mekari/pixel3-text");
+
+// src/modules/slider.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+function useSlider(props, emit) {
+  const {
+    id,
+    value,
+    min,
+    max,
+    step,
+    variant,
+    color,
+    gradientColor,
+    isGradient,
+    isDisabled
+  } = (0, import_vue.toRefs)(props);
+  const currentValue = (0, import_vue.ref)(value.value);
+  const isMinPressed = (0, import_vue.ref)(false);
+  const isMaxPressed = (0, import_vue.ref)(false);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "slider").value;
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpSlider",
+      id: getId,
+      class: (0, import_recipes.sliderSlotRecipe)().root
+    };
+  });
+  const labelWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().labelWrapper
+    };
+  });
+  const sliderWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().sliderWrapper
+    };
+  });
+  const progressAttrs = (0, import_vue.computed)(() => {
+    const background = isGradient.value ? handleGradientColor(gradientColor.value) : (0, import_tokens.token)(`colors.${color.value}`) || color.value;
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().progress,
+      style: {
+        background
+      }
+    };
+  });
+  const sliderAttrs = (0, import_vue.computed)(() => {
+    const leftValue = isRangeSlider.value ? 0 : (currentValue.value - min.value) / (max.value - min.value) * 100;
+    const rightValue = 0;
+    const background = isRangeSlider.value ? `linear-gradient(to right, #EDF0F2 ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, #EDF0F2 ${maxRangeValue.value}%)` : (0, import_tokens.token)("colors.gray.50");
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().slider,
+      style: {
+        background,
+        left: `${leftValue}%`,
+        right: `${rightValue}%`
+      }
+    };
+  });
+  const inputWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().inputWrapper
+    };
+  });
+  const inputMinAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `input-min-${getId}`,
+      type: "range",
+      min: min.value,
+      max: max.value,
+      step: step.value,
+      value: isRangeSlider.value ? minRangeValue.value : currentValue.value,
+      disabled: isDisabled.value,
+      class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
+        pointerEvents: isRangeSlider.value ? "none" : "auto",
+        "&::-webkit-slider-thumb": {
+          background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
+          borderWidth: isMinPressed.value ? "1.5px" : "1px",
+          cursor: isDisabled.value ? "not-allowed" : "pointer",
+          _hover: {
+            borderColor: isMinPressed.value ? "blue.400" : "gray.400"
+          }
+        }
+      })),
+      onInput: (e) => handleInput(e, "min"),
+      onChange: handleChange,
+      onMouseup: handleRelease,
+      onMousedown: () => handlePress("min")
+    };
+  });
+  const inputMaxAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `input-max-${getId}`,
+      type: "range",
+      min: min.value,
+      max: max.value,
+      step: step.value,
+      value: maxRangeValue.value,
+      disabled: isDisabled.value,
+      class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
+        pointerEvents: "none",
+        "&::-webkit-slider-thumb": {
+          background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
+          borderWidth: isMaxPressed.value ? "1.5px" : "1px",
+          cursor: isDisabled.value ? "not-allowed" : "pointer",
+          _hover: {
+            borderColor: isMaxPressed.value ? "blue.400" : "gray.400"
+          }
+        }
+      })),
+      onInput: (e) => handleInput(e, "max"),
+      onChange: handleChange,
+      onMouseup: handleRelease,
+      onMousedown: () => handlePress("max")
+    };
+  });
+  const legendWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().labelWrapper
+    };
+  });
+  const isRangeSlider = (0, import_vue.computed)(() => {
+    return variant.value === "range";
+  });
+  const minRangeValue = (0, import_vue.computed)(() => {
+    return isRangeSlider.value && Array.isArray(currentValue.value) && currentValue.value[0];
+  });
+  const maxRangeValue = (0, import_vue.computed)(() => {
+    return isRangeSlider.value && Array.isArray(currentValue.value) && currentValue.value[1];
+  });
+  function handleInput(e, type) {
+    const target = e.target;
+    emit("input", target.value);
+    if (type === "min") {
+      if (isRangeSlider.value && Array.isArray(currentValue.value)) {
+        currentValue.value[0] = Number(target.value);
+        if (typeof maxRangeValue.value === "number" && typeof minRangeValue.value === "number") {
+          if (minRangeValue.value > maxRangeValue.value) {
+            currentValue.value[0] = maxRangeValue.value;
+          }
+        }
+      } else {
+        currentValue.value = Number(target.value);
+      }
+    }
+    if (type === "max" && Array.isArray(currentValue.value)) {
+      currentValue.value[1] = Number(target.value);
+      if (typeof maxRangeValue.value === "number" && typeof minRangeValue.value === "number") {
+        if (minRangeValue.value > maxRangeValue.value) {
+          currentValue.value[1] = minRangeValue.value;
+        }
+      }
+    }
+  }
+  __name(handleInput, "handleInput");
+  function handleChange() {
+    emit("change", currentValue.value);
+  }
+  __name(handleChange, "handleChange");
+  function handleRelease() {
+    isMinPressed.value = false;
+    isMaxPressed.value = false;
+    emit("drag-end");
+  }
+  __name(handleRelease, "handleRelease");
+  function handlePress(type) {
+    type === "min" ? isMinPressed.value = true : isMaxPressed.value = true;
+    emit("drag-start");
+  }
+  __name(handlePress, "handlePress");
+  function handleGradientColor(colors) {
+    const stepPercentage = 100 / (colors.length - 1);
+    const gradientParts = colors.map((color2, index) => {
+      const position = index * stepPercentage;
+      return `${(0, import_tokens.token)(`colors.${color2}`) || color2} ${position}%`;
+    });
+    const gradientStr = `linear-gradient(to right, ${gradientParts.join(", ")})`;
+    return gradientStr;
+  }
+  __name(handleGradientColor, "handleGradientColor");
+  return {
+    rootAttrs,
+    labelWrapperAttrs,
+    sliderWrapperAttrs,
+    sliderAttrs,
+    progressAttrs,
+    inputWrapperAttrs,
+    inputMinAttrs,
+    inputMaxAttrs,
+    legendWrapperAttrs,
+    isRangeSlider,
+    currentValue,
+    minRangeValue,
+    maxRangeValue
+  };
+}
+__name(useSlider, "useSlider");
+
+// src/modules/slider.props.ts
+var sliderProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  value: {
+    type: [Number, Array],
+    default: 0
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  variant: {
+    type: String,
+    default: "single"
+  },
+  color: {
+    type: String,
+    default: "sky.100"
+  },
+  gradientColor: {
+    type: Array,
+    default: () => ["blue.50", "blue.100", "blue.400", "blue.700"]
+  },
+  isGradient: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+};
+var sliderEmits = ["input", "change", "drag-end", "drag-start"];
+
+// src/slider.tsx
+var MpSlider = (0, import_vue3.defineComponent)({
+  name: "MpSlider",
+  props: sliderProps,
+  emits: sliderEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      labelWrapperAttrs,
+      sliderWrapperAttrs,
+      sliderAttrs,
+      progressAttrs,
+      inputWrapperAttrs,
+      inputMinAttrs,
+      inputMaxAttrs,
+      legendWrapperAttrs,
+      isRangeSlider,
+      currentValue,
+      minRangeValue,
+      maxRangeValue
+    } = useSlider(props, emit);
+    return () => {
+      const {
+        min,
+        max
+      } = props;
+      const label = slots.label && slots.label();
+      const value = slots.value && slots.value({
+        value: currentValue.value
+      });
+      const minSlots = slots.min && slots.min();
+      const maxSlots = slots.max && slots.max();
+      const valueText = isRangeSlider.value ? `${minRangeValue.value} - ${maxRangeValue.value}` : currentValue.value;
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", labelWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label",
+        "color": "dark"
+      }, {
+        default: () => [label ? label : "Label"]
+      }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label",
+        "color": "dark",
+        "weight": "semiBold"
+      }, {
+        default: () => [value ? value : valueText]
+      })]), (0, import_vue2.createVNode)("div", sliderWrapperAttrs.value, [(0, import_vue2.createVNode)("div", progressAttrs.value, [(0, import_vue2.createVNode)("div", sliderAttrs.value, null)]), (0, import_vue2.createVNode)("div", inputWrapperAttrs.value, [(0, import_vue2.createVNode)("input", inputMinAttrs.value, null), isRangeSlider.value && (0, import_vue2.createVNode)("input", inputMaxAttrs.value, null)])]), (0, import_vue2.createVNode)("div", legendWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label-small",
+        "color": "gray.600"
+      }, {
+        default: () => [minSlots ? minSlots : min]
+      }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label-small",
+        "color": "gray.600"
+      }, {
+        default: () => [maxSlots ? maxSlots : max]
+      })])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpSlider
+});

package/dist/slider.mjs

@@ -0,0 +1,9 @@
+import {
+  MpSlider
+} from "./chunk-BEKWS6QE.mjs";
+import "./chunk-KTN7D244.mjs";
+import "./chunk-SXAHQ4O2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpSlider
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mekari/pixel3-slider",
+  "description": "Slider component for mekari pixel 3",
+  "version": "0.0.1-dev.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mekari/pixel3-styled-system": "0.0.10-dev.1",
+    "@mekari/pixel3-text": "0.0.12-dev.1",
+    "@mekari/pixel3-utils": "0.0.6"
+  },
+  "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"
+  }
+}