@mekari/pixel3-slider 0.0.1-dev.0

package/dist/chunk-BEKWS6QE.mjs

@@ -0,0 +1,76 @@
+import {
+  useSlider
+} from "./chunk-KTN7D244.mjs";
+import {
+  sliderEmits,
+  sliderProps
+} from "./chunk-SXAHQ4O2.mjs";
+
+// src/slider.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpText } from "@mekari/pixel3-text";
+var MpSlider = 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 _createVNode("div", rootAttrs.value, [_createVNode("div", labelWrapperAttrs.value, [_createVNode(MpText, {
+        "size": "label",
+        "color": "dark"
+      }, {
+        default: () => [label ? label : "Label"]
+      }), _createVNode(MpText, {
+        "size": "label",
+        "color": "dark",
+        "weight": "semiBold"
+      }, {
+        default: () => [value ? value : valueText]
+      })]), _createVNode("div", sliderWrapperAttrs.value, [_createVNode("div", progressAttrs.value, [_createVNode("div", sliderAttrs.value, null)]), _createVNode("div", inputWrapperAttrs.value, [_createVNode("input", inputMinAttrs.value, null), isRangeSlider.value && _createVNode("input", inputMaxAttrs.value, null)])]), _createVNode("div", legendWrapperAttrs.value, [_createVNode(MpText, {
+        "size": "label-small",
+        "color": "gray.600"
+      }, {
+        default: () => [minSlots ? minSlots : min]
+      }), _createVNode(MpText, {
+        "size": "label-small",
+        "color": "gray.600"
+      }, {
+        default: () => [maxSlots ? maxSlots : max]
+      })])]);
+    };
+  }
+});
+
+export {
+  MpSlider
+};

package/dist/chunk-KTN7D244.mjs

@@ -0,0 +1,208 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/slider.hooks.ts
+import { computed, ref, toRefs } from "vue";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { css, cx } from "@mekari/pixel3-styled-system/css";
+import { token } from "@mekari/pixel3-styled-system/tokens";
+import { sliderSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+function useSlider(props, emit) {
+  const {
+    id,
+    value,
+    min,
+    max,
+    step,
+    variant,
+    color,
+    gradientColor,
+    isGradient,
+    isDisabled
+  } = toRefs(props);
+  const currentValue = ref(value.value);
+  const isMinPressed = ref(false);
+  const isMaxPressed = ref(false);
+  const getId = id.value || getUniqueId("", "slider").value;
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpSlider",
+      id: getId,
+      class: sliderSlotRecipe().root
+    };
+  });
+  const labelWrapperAttrs = computed(() => {
+    return {
+      class: sliderSlotRecipe().labelWrapper
+    };
+  });
+  const sliderWrapperAttrs = computed(() => {
+    return {
+      class: sliderSlotRecipe().sliderWrapper
+    };
+  });
+  const progressAttrs = computed(() => {
+    const background = isGradient.value ? handleGradientColor(gradientColor.value) : token(`colors.${color.value}`) || color.value;
+    return {
+      class: sliderSlotRecipe().progress,
+      style: {
+        background
+      }
+    };
+  });
+  const sliderAttrs = 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}%)` : token("colors.gray.50");
+    return {
+      class: sliderSlotRecipe().slider,
+      style: {
+        background,
+        left: `${leftValue}%`,
+        right: `${rightValue}%`
+      }
+    };
+  });
+  const inputWrapperAttrs = computed(() => {
+    return {
+      class: sliderSlotRecipe().inputWrapper
+    };
+  });
+  const inputMinAttrs = 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: cx(sliderSlotRecipe().input, 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 = computed(() => {
+    return {
+      id: `input-max-${getId}`,
+      type: "range",
+      min: min.value,
+      max: max.value,
+      step: step.value,
+      value: maxRangeValue.value,
+      disabled: isDisabled.value,
+      class: cx(sliderSlotRecipe().input, 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 = computed(() => {
+    return {
+      class: sliderSlotRecipe().labelWrapper
+    };
+  });
+  const isRangeSlider = computed(() => {
+    return variant.value === "range";
+  });
+  const minRangeValue = computed(() => {
+    return isRangeSlider.value && Array.isArray(currentValue.value) && currentValue.value[0];
+  });
+  const maxRangeValue = 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 `${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");
+
+export {
+  useSlider
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-SXAHQ4O2.mjs

@@ -0,0 +1,49 @@
+// 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"];
+
+export {
+  sliderProps,
+  sliderEmits
+};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { MpSlider } from './slider.mjs';
+import 'vue/jsx-runtime';
+import '@mekari/pixel3-styled-system/tokens';
+import '@mekari/pixel3-utils';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { MpSlider } from './slider.js';
+import 'vue/jsx-runtime';
+import '@mekari/pixel3-styled-system/tokens';
+import '@mekari/pixel3-utils';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,343 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpSlider: () => MpSlider
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/slider.tsx
+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
+});