@mekari/pixel3-tabs 0.0.0

package/dist/tab-panel.js

@@ -0,0 +1,89 @@
+"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/tab-panel.tsx
+var tab_panel_exports = {};
+__export(tab_panel_exports, {
+  MpTabPanel: () => MpTabPanel
+});
+module.exports = __toCommonJS(tab_panel_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/tabs.hooks.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+
+// src/modules/tabs.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [TabsProvider, useTabsContext] = (0, import_pixel3_utils.usePixelCreateContext)("TabsContext");
+
+// src/modules/tabs.hooks.ts
+function useTabPanel(props) {
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabPanel",
+      style: {
+        display: props.isKeepAlive ? props.isSelected ? "unset" : "none" : ""
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useTabPanel, "useTabPanel");
+
+// src/modules/tabs.props.ts
+var tabPanelProps = {
+  isSelected: {
+    type: Boolean
+  },
+  value: {
+    type: String
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/tab-panel.tsx
+var MpTabPanel = (0, import_vue3.defineComponent)({
+  name: "MpTabPanel",
+  props: tabPanelProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs
+    } = useTabPanel(props);
+    return () => {
+      const renderNode = (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createTextVNode)(" "), slots.default(), (0, import_vue2.createTextVNode)(" ")]);
+      return props.isKeepAlive ? renderNode : props.isSelected ? renderNode : null;
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTabPanel
+});

package/dist/tab-panel.mjs

@@ -0,0 +1,10 @@
+import {
+  MpTabPanel
+} from "./chunk-BCRB3ASV.mjs";
+import "./chunk-DKZ3Z2UI.mjs";
+import "./chunk-QVDBBOCQ.mjs";
+import "./chunk-S5AGDSR2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTabPanel
+};

package/dist/tab-panels.d.mts

@@ -0,0 +1,5 @@
+import * as vue from 'vue';
+
+declare const MpTabPanels: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpTabPanels };

package/dist/tab-panels.d.ts

@@ -0,0 +1,5 @@
+import * as vue from 'vue';
+
+declare const MpTabPanels: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpTabPanels };

package/dist/tab-panels.js

@@ -0,0 +1,81 @@
+"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/tab-panels.tsx
+var tab_panels_exports = {};
+__export(tab_panels_exports, {
+  MpTabPanels: () => MpTabPanels
+});
+module.exports = __toCommonJS(tab_panels_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/tabs.hooks.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+
+// src/modules/tabs.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [TabsProvider, useTabsContext] = (0, import_pixel3_utils.usePixelCreateContext)("TabsContext");
+
+// src/modules/tabs.hooks.ts
+function useTabPanels() {
+  const {
+    selectedTab
+  } = useTabsContext();
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabPanels"
+    };
+  });
+  return {
+    rootAttrs,
+    selectedTab
+  };
+}
+__name(useTabPanels, "useTabPanels");
+
+// src/tab-panels.tsx
+var MpTabPanels = (0, import_vue3.defineComponent)({
+  name: "MpTabPanels",
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      selectedTab
+    } = useTabPanels();
+    return () => {
+      const clones = slots.default().map((vnode, index) => {
+        const clone = (0, import_vue3.cloneVNode)(vnode, {
+          isSelected: selectedTab.value === index
+        });
+        return clone;
+      });
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [clones]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTabPanels
+});

package/dist/tab-panels.mjs

@@ -0,0 +1,9 @@
+import {
+  MpTabPanels
+} from "./chunk-JQQ5YTMJ.mjs";
+import "./chunk-QVDBBOCQ.mjs";
+import "./chunk-S5AGDSR2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTabPanels
+};

package/dist/tab.d.mts

@@ -0,0 +1,29 @@
+import * as vue from 'vue';
+
+declare const MpTab: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    isSelected: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    isSelected: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+}>>, {
+    isSelected: boolean;
+}, {}>;
+
+export { MpTab };

package/dist/tab.d.ts

@@ -0,0 +1,29 @@
+import * as vue from 'vue';
+
+declare const MpTab: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    isSelected: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    isSelected: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+}>>, {
+    isSelected: boolean;
+}, {}>;
+
+export { MpTab };

package/dist/tab.js

@@ -0,0 +1,134 @@
+"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/tab.tsx
+var tab_exports = {};
+__export(tab_exports, {
+  MpTab: () => MpTab
+});
+module.exports = __toCommonJS(tab_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/tabs.props.ts
+var tabProps = {
+  id: {
+    type: String
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  }
+};
+var selectedBorderProps = {
+  isSelected: {
+    type: Boolean,
+    default: false
+  }
+};
+
+// src/modules/tabs.hooks.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+
+// src/modules/tabs.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [TabsProvider, useTabsContext] = (0, import_pixel3_utils.usePixelCreateContext)("TabsContext");
+
+// src/modules/tabs.hooks.ts
+function useTab(props, attrs) {
+  const {
+    rootProps,
+    id: tabsId
+  } = useTabsContext();
+  const {
+    variantColor
+  } = rootProps;
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      role: "tab",
+      "data-pixel-component": "MpTab",
+      class: ["group", (0, import_recipes.tabRecipe)({
+        isSelected: props.isSelected,
+        variantColor: (0, import_vue.unref)(variantColor)
+      })],
+      id: props.id || `tab:${tabsId.value}-${attrs.index}`
+    };
+  });
+  const tabSelectedBorderAttrs = (0, import_vue.computed)(() => {
+    return {
+      isSelected: props.isSelected
+    };
+  });
+  return {
+    rootAttrs,
+    tabSelectedBorderAttrs
+  };
+}
+__name(useTab, "useTab");
+
+// src/tab.tsx
+var MpTab = (0, import_vue3.defineComponent)({
+  name: "MpTab",
+  props: tabProps,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const {
+      rootAttrs,
+      tabSelectedBorderAttrs
+    } = useTab(props, attrs);
+    return () => {
+      return (0, import_vue2.createVNode)("button", rootAttrs.value, [slots.default(), (0, import_vue2.createVNode)(MpTabSelectedBorder, tabSelectedBorderAttrs.value, null)]);
+    };
+  }
+});
+var MpTabSelectedBorder = (0, import_vue3.defineComponent)({
+  name: "MpTabSelectedBorder",
+  props: selectedBorderProps,
+  setup(props) {
+    const {
+      rootProps
+    } = useTabsContext();
+    const {
+      variantColor
+    } = rootProps;
+    return () => {
+      return (0, import_vue2.createVNode)("div", {
+        "class": (0, import_recipes2.selectedBorderRecipe)({
+          isSelected: props.isSelected,
+          variantColor: (0, import_vue3.unref)(variantColor)
+        }),
+        "data-pixel-component": "MpTabSelectedBorder"
+      }, null);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTab
+});

package/dist/tab.mjs

@@ -0,0 +1,10 @@
+import {
+  MpTab
+} from "./chunk-LAMJMXQC.mjs";
+import "./chunk-DKZ3Z2UI.mjs";
+import "./chunk-QVDBBOCQ.mjs";
+import "./chunk-S5AGDSR2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTab
+};

package/dist/tabs.d.mts

@@ -0,0 +1,56 @@
+import * as vue from 'vue';
+
+declare const MpTabs: vue.DefineComponent<{
+    modelValue: {
+        type: vue.PropType<number>;
+    };
+    defaultValue: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    variantColor: {
+        type: vue.PropType<"blue" | "green" | "orange" | "red" | "gray">;
+        default: string;
+    };
+    isShowBorder: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: vue.PropType<number>;
+    };
+    defaultValue: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    variantColor: {
+        type: vue.PropType<"blue" | "green" | "orange" | "red" | "gray">;
+        default: string;
+    };
+    isShowBorder: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    variantColor: "blue" | "green" | "orange" | "red" | "gray";
+    defaultValue: number;
+    isShowBorder: boolean;
+}, {}>;
+
+export { MpTabs };

package/dist/tabs.d.ts

@@ -0,0 +1,56 @@
+import * as vue from 'vue';
+
+declare const MpTabs: vue.DefineComponent<{
+    modelValue: {
+        type: vue.PropType<number>;
+    };
+    defaultValue: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    variantColor: {
+        type: vue.PropType<"blue" | "green" | "orange" | "red" | "gray">;
+        default: string;
+    };
+    isShowBorder: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: vue.PropType<number>;
+    };
+    defaultValue: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    variantColor: {
+        type: vue.PropType<"blue" | "green" | "orange" | "red" | "gray">;
+        default: string;
+    };
+    isShowBorder: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    variantColor: "blue" | "green" | "orange" | "red" | "gray";
+    defaultValue: number;
+    isShowBorder: boolean;
+}, {}>;
+
+export { MpTabs };

package/dist/tabs.js

@@ -0,0 +1,123 @@
+"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/tabs.tsx
+var tabs_exports = {};
+__export(tabs_exports, {
+  MpTabs: () => MpTabs
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/tabs.props.ts
+var tabsProps = {
+  modelValue: {
+    type: Number
+  },
+  defaultValue: {
+    type: Number,
+    default: 0
+  },
+  id: {
+    type: String
+  },
+  isManual: {
+    type: Boolean
+  },
+  variantColor: {
+    type: String,
+    default: "blue"
+  },
+  isShowBorder: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/modules/tabs.hooks.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+
+// src/modules/tabs.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [TabsProvider, useTabsContext] = (0, import_pixel3_utils.usePixelCreateContext)("TabsContext");
+
+// src/modules/tabs.hooks.ts
+function useTabs(props, emit) {
+  const selectedTab = (0, import_vue.ref)(props.defaultValue);
+  const selected = props.isManual ? (0, import_vue.computed)(() => props.modelValue) : selectedTab;
+  const id = (0, import_vue.computed)(() => props.id || `tabs-${(0, import_pixel3_utils2.useId)(4)}`);
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabs",
+      id: id.value
+    };
+  });
+  function onChangeTab(value) {
+    if (!props.isManual) {
+      selectedTab.value = value;
+    }
+    emit("change", value);
+    emit("update:modelValue", value);
+  }
+  __name(onChangeTab, "onChangeTab");
+  return {
+    selectedTab: selected,
+    onChangeTab,
+    rootAttrs,
+    id
+  };
+}
+__name(useTabs, "useTabs");
+
+// src/tabs.tsx
+var MpTabs = (0, import_vue3.defineComponent)({
+  name: "MpTabs",
+  props: tabsProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      selectedTab,
+      onChangeTab,
+      id
+    } = useTabs(props, emit);
+    TabsProvider({
+      selectedTab,
+      onChangeTab,
+      rootProps: (0, import_vue4.toRefs)(props),
+      id
+    });
+    return () => {
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [slots.default()]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTabs
+});

package/dist/tabs.mjs

@@ -0,0 +1,10 @@
+import {
+  MpTabs
+} from "./chunk-5R2IYROF.mjs";
+import "./chunk-DKZ3Z2UI.mjs";
+import "./chunk-QVDBBOCQ.mjs";
+import "./chunk-S5AGDSR2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTabs
+};