@antify/ui 1.1.0 → 1.3.0

package/dist/components/tabs/__stories/AntTabs.stories.mjs

@@ -69,6 +69,69 @@ export const FixedHeight = {
   }),
   args: Docs.args
 };
+export const HorizontalScrolling = {
+  render: (args) => ({
+    components: { AntTabs, AntFormGroupLabel, AntFormGroup },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntFormGroup>
+
+        <AntFormGroupLabel>Default Small</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-bind="args" v-model="args.modelValue" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Small</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-bind="args" v-model="args.modelValue" expanded />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Default Large</AntFormGroupLabel>
+        <AntFormGroup class="dashed">
+          <AntTabs v-bind="args" v-model="args.modelValue" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Large</AntFormGroupLabel>
+        <AntFormGroup class="dashed">
+          <AntTabs v-bind="args" v-model="args.modelValue" expanded />
+        </AntFormGroup>
+
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    tabItems: [
+      {
+        id: "1",
+        label: "First tab"
+      },
+      {
+        id: "2",
+        label: "Second tab"
+      },
+      {
+        id: "3",
+        label: "Third tab",
+        state: TabItemState.warning
+      },
+      {
+        id: "4",
+        label: "Fourth tab",
+        state: TabItemState.danger
+      },
+      {
+        id: "5",
+        label: "Fifth tab"
+      },
+      {
+        id: "6",
+        label: "Sixth tab"
+      }
+    ]
+  }
+};
 export const DifferentStates = {
   render: Docs.render,
   args: {
@@ -90,6 +153,11 @@ export const DifferentStates = {
         id: "4",
         label: "Fourth tab",
         state: TabItemState.danger
+      },
+      {
+        id: "5",
+        label: "Fifth tab",
+        state: TabItemState.info
       }
     ]
   }
@@ -101,6 +169,7 @@ export const Summary = {
       const value_1 = ref();
       const value_2 = ref();
       const value_3 = ref("2");
+      const value_4 = ref();
       const tabItems_1 = [
         {
           id: "1",
@@ -142,14 +211,45 @@ export const Summary = {
           to: "/#"
         }
       ];
+      const tabItems_4 = [
+        {
+          id: "1",
+          label: "First tab"
+        },
+        {
+          id: "2",
+          label: "Second tab"
+        },
+        {
+          id: "3",
+          label: "Third tab",
+          state: TabItemState.warning
+        },
+        {
+          id: "4",
+          label: "Fourth tab",
+          state: TabItemState.danger
+        },
+        {
+          id: "5",
+          label: "Fifth tab",
+          state: TabItemState.info
+        },
+        {
+          id: "6",
+          label: "Sixth tab"
+        }
+      ];
       return {
         args,
         value_1,
         value_2,
         value_3,
+        value_4,
         tabItems_1,
         tabItems_2,
-        tabItems_3
+        tabItems_3,
+        tabItems_4
       };
     },
     template: `
@@ -163,15 +263,30 @@ export const Summary = {
 
         <AntFormGroupLabel>Expanded</AntFormGroupLabel>
         <AntFormGroup>
-          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded separators/></div>
-          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded separators/></div>
-          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded/></div>
         </AntFormGroup>
 
         <AntFormGroupLabel>Larger container</AntFormGroupLabel>
         <div class="h-16 dashed">
-          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded/>
+        </div>
+
+        <AntFormGroupLabel>Different States</AntFormGroupLabel>
+        <div class="dashed">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" />
         </div>
+
+        <AntFormGroupLabel>Default Small Parent Container</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Small Parent Container</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" expanded />
+        </AntFormGroup>
       </AntFormGroup>
     `
   }),

package/dist/components/tabs/__types/AntTabItem.types.d.ts

@@ -4,6 +4,7 @@ export type TabItem = {
     id: string;
     label: string;
     state?: TabItemState;
+    disabled?: boolean;
     showIcon?: boolean;
     icon?: IconDefinition;
     to?: string | RouteLocationRaw;
@@ -12,6 +13,7 @@ export type TabItem = {
 };
 export declare enum TabItemState {
     base = "base",
+    info = "info",
     warning = "warning",
     danger = "danger"
 }

package/dist/components/tabs/__types/AntTabItem.types.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabItemState = void 0;
 var TabItemState = exports.TabItemState = /* @__PURE__ */(TabItemState2 => {
   TabItemState2["base"] = "base";
+  TabItemState2["info"] = "info";
   TabItemState2["warning"] = "warning";
   TabItemState2["danger"] = "danger";
   return TabItemState2;

package/dist/components/tabs/__types/AntTabItem.types.mjs

@@ -1,5 +1,6 @@
 export var TabItemState = /* @__PURE__ */ ((TabItemState2) => {
   TabItemState2["base"] = "base";
+  TabItemState2["info"] = "info";
   TabItemState2["warning"] = "warning";
   TabItemState2["danger"] = "danger";
   return TabItemState2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -46,6 +46,7 @@
     "vue": "^3.4.29"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.5",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",