@mekari/pixel3-tabs 0.0.0

package/dist/chunk-5R2IYROF.mjs

@@ -0,0 +1,43 @@
+import {
+  tabsProps
+} from "./chunk-DKZ3Z2UI.mjs";
+import {
+  useTabs
+} from "./chunk-QVDBBOCQ.mjs";
+import {
+  TabsProvider
+} from "./chunk-S5AGDSR2.mjs";
+
+// src/tabs.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { toRefs } from "vue";
+var MpTabs = 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: toRefs(props),
+      id
+    });
+    return () => {
+      return _createVNode("div", rootAttrs.value, [slots.default()]);
+    };
+  }
+});
+
+export {
+  MpTabs
+};

package/dist/chunk-BCRB3ASV.mjs

@@ -0,0 +1,29 @@
+import {
+  tabPanelProps
+} from "./chunk-DKZ3Z2UI.mjs";
+import {
+  useTabPanel
+} from "./chunk-QVDBBOCQ.mjs";
+
+// src/tab-panel.tsx
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { defineComponent } from "vue";
+var MpTabPanel = defineComponent({
+  name: "MpTabPanel",
+  props: tabPanelProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs
+    } = useTabPanel(props);
+    return () => {
+      const renderNode = _createVNode("div", rootAttrs.value, [_createTextVNode(" "), slots.default(), _createTextVNode(" ")]);
+      return props.isKeepAlive ? renderNode : props.isSelected ? renderNode : null;
+    };
+  }
+});
+
+export {
+  MpTabPanel
+};

package/dist/chunk-DKZ3Z2UI.mjs

@@ -0,0 +1,61 @@
+// 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
+  }
+};
+var tabProps = {
+  id: {
+    type: String
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  }
+};
+var selectedBorderProps = {
+  isSelected: {
+    type: Boolean,
+    default: false
+  }
+};
+var tabPanelProps = {
+  isSelected: {
+    type: Boolean
+  },
+  value: {
+    type: String
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  }
+};
+
+export {
+  tabsProps,
+  tabProps,
+  selectedBorderProps,
+  tabPanelProps
+};

package/dist/chunk-JEXLKDPT.mjs

@@ -0,0 +1,38 @@
+import {
+  useTabList
+} from "./chunk-QVDBBOCQ.mjs";
+
+// src/tab-list.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, cloneVNode } from "vue";
+var MpTabList = defineComponent({
+  name: "MpTabList",
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      tabListAttrs,
+      onChangeTab,
+      selectedTab
+    } = useTabList();
+    return () => {
+      const clones = slots.default().map((vnode, index) => {
+        const clone = cloneVNode(vnode, {
+          isSelected: selectedTab.value === index,
+          index,
+          "aria-selected": selectedTab.value === index,
+          onClick: () => {
+            onChangeTab(index);
+          }
+        });
+        return clone;
+      });
+      return _createVNode("div", rootAttrs, [_createVNode("div", tabListAttrs, [clones])]);
+    };
+  }
+});
+
+export {
+  MpTabList
+};

package/dist/chunk-JQQ5YTMJ.mjs

@@ -0,0 +1,31 @@
+import {
+  useTabPanels
+} from "./chunk-QVDBBOCQ.mjs";
+
+// src/tab-panels.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, cloneVNode } from "vue";
+var MpTabPanels = defineComponent({
+  name: "MpTabPanels",
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      selectedTab
+    } = useTabPanels();
+    return () => {
+      const clones = slots.default().map((vnode, index) => {
+        const clone = cloneVNode(vnode, {
+          isSelected: selectedTab.value === index
+        });
+        return clone;
+      });
+      return _createVNode("div", rootAttrs.value, [clones]);
+    };
+  }
+});
+
+export {
+  MpTabPanels
+};

package/dist/chunk-LAMJMXQC.mjs

@@ -0,0 +1,56 @@
+import {
+  selectedBorderProps,
+  tabProps
+} from "./chunk-DKZ3Z2UI.mjs";
+import {
+  useTab
+} from "./chunk-QVDBBOCQ.mjs";
+import {
+  useTabsContext
+} from "./chunk-S5AGDSR2.mjs";
+
+// src/tab.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, unref } from "vue";
+import { selectedBorderRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpTab = defineComponent({
+  name: "MpTab",
+  props: tabProps,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const {
+      rootAttrs,
+      tabSelectedBorderAttrs
+    } = useTab(props, attrs);
+    return () => {
+      return _createVNode("button", rootAttrs.value, [slots.default(), _createVNode(MpTabSelectedBorder, tabSelectedBorderAttrs.value, null)]);
+    };
+  }
+});
+var MpTabSelectedBorder = defineComponent({
+  name: "MpTabSelectedBorder",
+  props: selectedBorderProps,
+  setup(props) {
+    const {
+      rootProps
+    } = useTabsContext();
+    const {
+      variantColor
+    } = rootProps;
+    return () => {
+      return _createVNode("div", {
+        "class": selectedBorderRecipe({
+          isSelected: props.isSelected,
+          variantColor: unref(variantColor)
+        }),
+        "data-pixel-component": "MpTabSelectedBorder"
+      }, null);
+    };
+  }
+});
+
+export {
+  MpTab
+};

package/dist/chunk-QVDBBOCQ.mjs

@@ -0,0 +1,146 @@
+import {
+  useTabsContext
+} from "./chunk-S5AGDSR2.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/tabs.hooks.ts
+import { ref, computed, reactive, unref } from "vue";
+import { css } from "@mekari/pixel3-styled-system/css";
+import { tabListRecipe, tabRecipe } from "@mekari/pixel3-styled-system/recipes";
+import { useId } from "@mekari/pixel3-utils";
+function useTabs(props, emit) {
+  const selectedTab = ref(props.defaultValue);
+  const selected = props.isManual ? computed(() => props.modelValue) : selectedTab;
+  const id = computed(() => props.id || `tabs-${useId(4)}`);
+  const rootAttrs = 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");
+function useTabList() {
+  const {
+    rootProps,
+    onChangeTab,
+    selectedTab,
+    id
+  } = useTabsContext();
+  const {
+    isShowBorder
+  } = rootProps;
+  const rootAttrs = reactive({
+    "data-border": isShowBorder.value,
+    class: css({
+      position: "relative",
+      "&[data-border=true]": {
+        _before: {
+          content: '""',
+          height: "1px",
+          background: "gray.100",
+          position: "absolute",
+          right: 0,
+          left: 0,
+          bottom: "1px"
+        }
+      }
+    })
+  });
+  const tabListAttrs = reactive({
+    "data-pixel-component": "MpTabList",
+    class: tabListRecipe()
+  });
+  return {
+    tabsProps: rootProps,
+    onChangeTab,
+    selectedTab,
+    rootAttrs,
+    tabListAttrs,
+    tabsId: id
+  };
+}
+__name(useTabList, "useTabList");
+function useTab(props, attrs) {
+  const {
+    rootProps,
+    id: tabsId
+  } = useTabsContext();
+  const {
+    variantColor
+  } = rootProps;
+  const rootAttrs = computed(() => {
+    return {
+      role: "tab",
+      "data-pixel-component": "MpTab",
+      class: ["group", tabRecipe({
+        isSelected: props.isSelected,
+        variantColor: unref(variantColor)
+      })],
+      id: props.id || `tab:${tabsId.value}-${attrs.index}`
+    };
+  });
+  const tabSelectedBorderAttrs = computed(() => {
+    return {
+      isSelected: props.isSelected
+    };
+  });
+  return {
+    rootAttrs,
+    tabSelectedBorderAttrs
+  };
+}
+__name(useTab, "useTab");
+function useTabPanels() {
+  const {
+    selectedTab
+  } = useTabsContext();
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpTabPanels"
+    };
+  });
+  return {
+    rootAttrs,
+    selectedTab
+  };
+}
+__name(useTabPanels, "useTabPanels");
+function useTabPanel(props) {
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpTabPanel",
+      style: {
+        display: props.isKeepAlive ? props.isSelected ? "unset" : "none" : ""
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useTabPanel, "useTabPanel");
+
+export {
+  useTabs,
+  useTabList,
+  useTab,
+  useTabPanels,
+  useTabPanel
+};

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-S5AGDSR2.mjs

@@ -0,0 +1,8 @@
+// src/modules/tabs.context.ts
+import { usePixelCreateContext } from "@mekari/pixel3-utils";
+var [TabsProvider, useTabsContext] = usePixelCreateContext("TabsContext");
+
+export {
+  TabsProvider,
+  useTabsContext
+};

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+export { MpTabs } from './tabs.mjs';
+export { MpTabList } from './tab-list.mjs';
+export { MpTab } from './tab.mjs';
+export { MpTabPanels } from './tab-panels.mjs';
+export { MpTabPanel } from './tab-panel.mjs';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { MpTabs } from './tabs.js';
+export { MpTabList } from './tab-list.js';
+export { MpTab } from './tab.js';
+export { MpTabPanels } from './tab-panels.js';
+export { MpTabPanel } from './tab-panel.js';
+import 'vue';