@mekari/pixel3-tabs 0.0.0

package/dist/modules/tabs.hooks.js

@@ -0,0 +1,174 @@
+"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/modules/tabs.hooks.ts
+var tabs_hooks_exports = {};
+__export(tabs_hooks_exports, {
+  useTab: () => useTab,
+  useTabList: () => useTabList,
+  useTabPanel: () => useTabPanel,
+  useTabPanels: () => useTabPanels,
+  useTabs: () => useTabs
+});
+module.exports = __toCommonJS(tabs_hooks_exports);
+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");
+function useTabList() {
+  const {
+    rootProps,
+    onChangeTab,
+    selectedTab,
+    id
+  } = useTabsContext();
+  const {
+    isShowBorder
+  } = rootProps;
+  const rootAttrs = (0, import_vue.reactive)({
+    "data-border": isShowBorder.value,
+    class: (0, import_css.css)({
+      position: "relative",
+      "&[data-border=true]": {
+        _before: {
+          content: '""',
+          height: "1px",
+          background: "gray.100",
+          position: "absolute",
+          right: 0,
+          left: 0,
+          bottom: "1px"
+        }
+      }
+    })
+  });
+  const tabListAttrs = (0, import_vue.reactive)({
+    "data-pixel-component": "MpTabList",
+    class: (0, import_recipes.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 = (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");
+function useTabPanels() {
+  const {
+    selectedTab
+  } = useTabsContext();
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabPanels"
+    };
+  });
+  return {
+    rootAttrs,
+    selectedTab
+  };
+}
+__name(useTabPanels, "useTabPanels");
+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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTab,
+  useTabList,
+  useTabPanel,
+  useTabPanels,
+  useTabs
+});

package/dist/modules/tabs.hooks.mjs

@@ -0,0 +1,16 @@
+import {
+  useTab,
+  useTabList,
+  useTabPanel,
+  useTabPanels,
+  useTabs
+} from "../chunk-QVDBBOCQ.mjs";
+import "../chunk-S5AGDSR2.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useTab,
+  useTabList,
+  useTabPanel,
+  useTabPanels,
+  useTabs
+};

package/dist/modules/tabs.props.d.mts

@@ -0,0 +1,62 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const tabsProps: {
+    modelValue: {
+        type: PropType<number>;
+    };
+    defaultValue: {
+        type: PropType<number>;
+        default: number;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    isManual: {
+        type: PropType<boolean>;
+    };
+    variantColor: {
+        type: PropType<"blue" | "green" | "orange" | "red" | "gray">;
+        default: string;
+    };
+    isShowBorder: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const tabProps: {
+    id: {
+        type: PropType<string>;
+    };
+    isSelected: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<string>;
+    };
+};
+declare const selectedBorderProps: {
+    isSelected: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const tabPanelProps: {
+    isSelected: {
+        type: PropType<boolean>;
+    };
+    value: {
+        type: PropType<string>;
+    };
+    isKeepAlive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+type TabsEmits = (e: 'update:modelValue' | 'change', value?: number) => void;
+type TabsProps = ExtractPropTypes<typeof tabsProps>;
+type TabProps = ExtractPropTypes<typeof tabProps>;
+type SelectedBorderProps = ExtractPropTypes<typeof selectedBorderProps>;
+type TabPanelProps = ExtractPropTypes<typeof tabPanelProps>;
+
+export { SelectedBorderProps, TabPanelProps, TabProps, TabsEmits, TabsProps, selectedBorderProps, tabPanelProps, tabProps, tabsProps };

package/dist/modules/tabs.props.d.ts

@@ -0,0 +1,62 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const tabsProps: {
+    modelValue: {
+        type: PropType<number>;
+    };
+    defaultValue: {
+        type: PropType<number>;
+        default: number;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    isManual: {
+        type: PropType<boolean>;
+    };
+    variantColor: {
+        type: PropType<"blue" | "green" | "orange" | "red" | "gray">;
+        default: string;
+    };
+    isShowBorder: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const tabProps: {
+    id: {
+        type: PropType<string>;
+    };
+    isSelected: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<string>;
+    };
+};
+declare const selectedBorderProps: {
+    isSelected: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const tabPanelProps: {
+    isSelected: {
+        type: PropType<boolean>;
+    };
+    value: {
+        type: PropType<string>;
+    };
+    isKeepAlive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+type TabsEmits = (e: 'update:modelValue' | 'change', value?: number) => void;
+type TabsProps = ExtractPropTypes<typeof tabsProps>;
+type TabProps = ExtractPropTypes<typeof tabProps>;
+type SelectedBorderProps = ExtractPropTypes<typeof selectedBorderProps>;
+type TabPanelProps = ExtractPropTypes<typeof tabPanelProps>;
+
+export { SelectedBorderProps, TabPanelProps, TabProps, TabsEmits, TabsProps, selectedBorderProps, tabPanelProps, tabProps, tabsProps };

package/dist/modules/tabs.props.js

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/modules/tabs.props.ts
+var tabs_props_exports = {};
+__export(tabs_props_exports, {
+  selectedBorderProps: () => selectedBorderProps,
+  tabPanelProps: () => tabPanelProps,
+  tabProps: () => tabProps,
+  tabsProps: () => tabsProps
+});
+module.exports = __toCommonJS(tabs_props_exports);
+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
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  selectedBorderProps,
+  tabPanelProps,
+  tabProps,
+  tabsProps
+});

package/dist/modules/tabs.props.mjs

@@ -0,0 +1,13 @@
+import {
+  selectedBorderProps,
+  tabPanelProps,
+  tabProps,
+  tabsProps
+} from "../chunk-DKZ3Z2UI.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  selectedBorderProps,
+  tabPanelProps,
+  tabProps,
+  tabsProps
+};

package/dist/tab-list.d.mts

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

package/dist/tab-list.d.ts

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

package/dist/tab-list.js

@@ -0,0 +1,114 @@
+"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-list.tsx
+var tab_list_exports = {};
+__export(tab_list_exports, {
+  MpTabList: () => MpTabList
+});
+module.exports = __toCommonJS(tab_list_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 useTabList() {
+  const {
+    rootProps,
+    onChangeTab,
+    selectedTab,
+    id
+  } = useTabsContext();
+  const {
+    isShowBorder
+  } = rootProps;
+  const rootAttrs = (0, import_vue.reactive)({
+    "data-border": isShowBorder.value,
+    class: (0, import_css.css)({
+      position: "relative",
+      "&[data-border=true]": {
+        _before: {
+          content: '""',
+          height: "1px",
+          background: "gray.100",
+          position: "absolute",
+          right: 0,
+          left: 0,
+          bottom: "1px"
+        }
+      }
+    })
+  });
+  const tabListAttrs = (0, import_vue.reactive)({
+    "data-pixel-component": "MpTabList",
+    class: (0, import_recipes.tabListRecipe)()
+  });
+  return {
+    tabsProps: rootProps,
+    onChangeTab,
+    selectedTab,
+    rootAttrs,
+    tabListAttrs,
+    tabsId: id
+  };
+}
+__name(useTabList, "useTabList");
+
+// src/tab-list.tsx
+var MpTabList = (0, import_vue3.defineComponent)({
+  name: "MpTabList",
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      tabListAttrs,
+      onChangeTab,
+      selectedTab
+    } = useTabList();
+    return () => {
+      const clones = slots.default().map((vnode, index) => {
+        const clone = (0, import_vue3.cloneVNode)(vnode, {
+          isSelected: selectedTab.value === index,
+          index,
+          "aria-selected": selectedTab.value === index,
+          onClick: () => {
+            onChangeTab(index);
+          }
+        });
+        return clone;
+      });
+      return (0, import_vue2.createVNode)("div", rootAttrs, [(0, import_vue2.createVNode)("div", tabListAttrs, [clones])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTabList
+});

package/dist/tab-list.mjs

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

package/dist/tab-panel.d.mts

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

package/dist/tab-panel.d.ts

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