@antify/ui 1.0.4 → 1.1.0

package/dist/components/AntAccordion.vue

@@ -9,6 +9,11 @@ const props = withDefaults(defineProps<{
     content?: string;
     isOpen?: boolean;
     iconLeft?: boolean;
+    contentPadding?: boolean;
+    activeLabelClasses?: string;
+    activeIconClasses?: string;
+    inactiveLabelClasses?: string;
+    inactiveIconClasses?: string;
   }[];
   collapseStrategy?: CollapseStrategy;
 }>(), {
@@ -49,9 +54,21 @@ function onClose(index: number) {
         :label="item.label"
         :is-open="openItems.includes(index)"
         :icon-left="item.iconLeft"
+        :content-padding="item.contentPadding"
+        :activeLabelClasses="item.activeLabelClasses"
+        :activeIconClasses="item.activeIconClasses"
+        :inactiveLabelClasses="item.inactiveLabelClasses"
+        :inactiveIconClasses="item.inactiveIconClasses"
         @open="() => onOpen(index)"
         @close="() => onClose(index)"
       >
+        <template #icon-left="{isOpen}">
+          <slot
+            name="icon-left"
+            v-bind="{item, index, isOpen}"
+          />
+        </template>
+
         <slot
           name="item-content"
           v-bind="{item, index}"

package/dist/components/AntAccordionItem.vue

@@ -3,15 +3,26 @@ import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-
 import AntIcon from './AntIcon.vue';
 import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
 import {IconSize} from './__types/AntIcon.types';
+import {computed} from 'vue';
 
 const props = withDefaults(defineProps<{
   isOpen: boolean;
   label?: string;
   collapseTransition?: string;
-  iconLeft: boolean;
+  iconLeft?: boolean;
+  contentPadding?: boolean;
+  activeLabelClasses?: string;
+  activeIconClasses?: string;
+  inactiveLabelClasses?: string;
+  inactiveIconClasses?: string;
 }>(), {
   collapseTransition: 'slide',
   iconLeft: false,
+  contentPadding: true,
+  activeLabelClasses: 'bg-primary-500 text-primary-500-font',
+  activeIconClasses: 'text-primary-500-font',
+  inactiveLabelClasses: 'bg-white text-for-white-bg-font',
+  inactiveIconClasses: 'text-for-white-bg-font'
 });
 const emit = defineEmits(['close', 'open']);
 
@@ -23,12 +34,17 @@ function onClick() {
     emit('open');
   }
 }
+
+const labelClasses = computed(() => ({
+  [props.activeLabelClasses]: props.isOpen,
+  [props.inactiveLabelClasses]: !props.isOpen
+}))
 </script>
 
 <template>
   <div
     class="p-2 select-none cursor-pointer transition-colors"
-    :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
+    :class="labelClasses"
     @click="onClick"
   >
     <slot
@@ -36,15 +52,17 @@ function onClick() {
       v-bind="{ isOpen: isOpen }"
     >
       <div
-        class="hover:text-gray-800 flex justify-between items-center"
+        class="flex justify-between items-center"
       >
         <div class="flex items-center gap-2">
-          <AntIcon
-            v-if="iconLeft"
-            :size="IconSize.sm"
-            :icon="faQuestionCircle"
-            :color="isOpen ? 'text-primary-500-font' : 'text-for-white-bg-font'"
-          />
+          <slot name="icon-left" v-bind="{isOpen}">
+            <AntIcon
+              v-if="iconLeft"
+              :size="IconSize.sm"
+              :icon="faQuestionCircle"
+              :color="isOpen ? activeIconClasses : inactiveIconClasses"
+            />
+          </slot>
 
           <span class="text-sm font-semibold">
             {{ label }}
@@ -53,7 +71,7 @@ function onClick() {
 
         <AntIcon
           :icon="isOpen ? faAngleUp : faAngleDown"
-          :color="isOpen ? 'text-primary-500-font' : undefined"
+          :color="isOpen ? activeIconClasses : inactiveIconClasses"
         />
       </div>
     </slot>
@@ -67,7 +85,8 @@ function onClick() {
       <Transition name="bounce">
         <div
           v-show="isOpen"
-          class="p-2 text-sm bg-white text-for-white-bg-font"
+          class="text-sm bg-white text-for-white-bg-font"
+          :class="{'p-2': contentPadding}"
         >
           <slot/>
         </div>

package/dist/components/AntKeycap.vue

@@ -8,7 +8,7 @@ import {computed} from 'vue';
 
 const props = withDefaults(defineProps<{
   icon?: IconDefinition
-  size: AntKeycapSize
+  size?: AntKeycapSize
 
 }>(), {
   size: AntKeycapSize.sm
@@ -16,22 +16,27 @@ const props = withDefaults(defineProps<{
 
 const classes = computed(() => {
   return {
-    'text-sm px-px min-w-5': props.size === AntKeycapSize.sm,
-    'text-2xs px-px py-0.5 min-w-[18px]': props.size === AntKeycapSize.xs,
+    'px-1': true,
+    'test-sm min-w-6 h-6 ': props.size === AntKeycapSize.md,
+    'test-xs min-w-5 h-5': props.size === AntKeycapSize.sm,
+    'text-2xs min-w-4 h-4': props.size === AntKeycapSize.xs,
   };
 });
 const iconClasses = computed(() => {
-  if (props.size === AntKeycapSize.sm) {
-    return IconSize.sm;
-  } else {
-    return IconSize.xs2;
+  switch (props.size) {
+    case AntKeycapSize.md:
+      return IconSize.md
+    case AntKeycapSize.sm:
+      return IconSize.sm
+    default:
+      return IconSize.xs;
   }
 });
 </script>
 
 <template>
   <span
-    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-font font-medium"
+    class="inline-flex justify-center items-center bg-neutral-300 rounded-sm text-center text-neutral-300-font font-medium"
     :class="classes"
   >
     <AntIcon

package/dist/components/__stories/AntAccordion.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Docs: Story;
 export declare const CustomContent: Story;
 export declare const MultipleCollapseStrategy: Story;
 export declare const htmlInContent: Story;
+export declare const mixedVariants: Story;

package/dist/components/__stories/AntAccordion.stories.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.htmlInContent = exports.default = exports.MultipleCollapseStrategy = exports.Docs = exports.CustomContent = void 0;
+exports.mixedVariants = exports.htmlInContent = exports.default = exports.MultipleCollapseStrategy = exports.Docs = exports.CustomContent = void 0;
 var _AntAccordion = _interopRequireDefault(require("../AntAccordion.vue"));
 var _AntAccordionItem = _interopRequireDefault(require("../AntAccordionItem.vue"));
 var _AntAccordion2 = require("../__types/AntAccordion.types");
+var _AntIcon = _interopRequireDefault(require("../AntIcon.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Components/Accordion",
@@ -117,4 +119,65 @@ const htmlInContent = exports.htmlInContent = {
                     justo duo dolores et ea rebum. Stet clita kasd`
     }]
   }
+};
+const mixedVariants = exports.mixedVariants = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntAccordion: _AntAccordion.default,
+      AntAccordionItem: _AntAccordionItem.default,
+      AntIcon: _AntIcon.default
+    },
+    setup() {
+      return {
+        args,
+        faEye: _freeSolidSvgIcons.faEye
+      };
+    },
+    template: `
+      <AntAccordion
+        v-bind="args"
+        :contentPadding="false"
+      >
+        <template #icon-left="{item, index, isOpen}">
+          <AntIcon
+            :class="{'text-success-500-font': isOpen, 'text-success-200-font': !isOpen}"
+            :icon="faEye"/>
+        </template>
+      </AntAccordion>`
+  }),
+  args: {
+    items: [{
+      label: "First entry",
+      content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    }, {
+      label: `Second entry`,
+      content: `<div class="bg-success-100 p-4"><span class="font-bold text-success-500">Success</span> Content</div>`,
+      iconLeft: true,
+      activeLabelClasses: "bg-success-500 text-success-500-font",
+      activeIconClasses: "text-success-500-font",
+      inactiveLabelClasses: "bg-success-200 text-success-200-font",
+      inactiveIconClasses: "bg-success-200 text-success-200-font",
+      contentPadding: false
+    }, {
+      label: "Third entry",
+      content: `<div class="bg-warning-100 p-4"><span class="font-bold text-warning-500">Warning</span> Content</div>`,
+      activeLabelClasses: "bg-warning-500 text-warning-500-font",
+      activeIconClasses: "text-warning-500-font",
+      inactiveLabelClasses: "bg-warning-200 text-warning-200-font",
+      inactiveIconClasses: "text-warning-200-font"
+    }, {
+      label: "Fourth entry",
+      content: `<div class="bg-danger-100 p-8"><span class="font-bold text-danger-500">Danger</span> Content</div>`,
+      activeLabelClasses: "bg-danger-500 text-danger-500-font",
+      activeIconClasses: "text-danger-500-font",
+      inactiveLabelClasses: "bg-danger-200 text-danger-200-font",
+      inactiveIconClasses: "text-danger-200-font",
+      contentPadding: false
+    }]
+  }
 };

package/dist/components/__stories/AntAccordion.stories.mjs

@@ -1,6 +1,8 @@
 import AntAccordion from "../AntAccordion.vue";
 import AntAccordionItem from "../AntAccordionItem.vue";
 import { CollapseStrategy } from "../__types/AntAccordion.types.mjs";
+import AntIcon from "../AntIcon.vue";
+import { faEye } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Accordion",
   component: AntAccordion,
@@ -99,3 +101,60 @@ export const htmlInContent = {
     ]
   }
 };
+export const mixedVariants = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntAccordion, AntAccordionItem, AntIcon },
+    setup() {
+      return { args, faEye };
+    },
+    template: `
+      <AntAccordion
+        v-bind="args"
+        :contentPadding="false"
+      >
+        <template #icon-left="{item, index, isOpen}">
+          <AntIcon
+            :class="{'text-success-500-font': isOpen, 'text-success-200-font': !isOpen}"
+            :icon="faEye"/>
+        </template>
+      </AntAccordion>`
+  }),
+  args: {
+    items: [
+      {
+        label: "First entry",
+        content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      },
+      {
+        label: `Second entry`,
+        content: `<div class="bg-success-100 p-4"><span class="font-bold text-success-500">Success</span> Content</div>`,
+        iconLeft: true,
+        activeLabelClasses: "bg-success-500 text-success-500-font",
+        activeIconClasses: "text-success-500-font",
+        inactiveLabelClasses: "bg-success-200 text-success-200-font",
+        inactiveIconClasses: "bg-success-200 text-success-200-font",
+        contentPadding: false
+      },
+      {
+        label: "Third entry",
+        content: `<div class="bg-warning-100 p-4"><span class="font-bold text-warning-500">Warning</span> Content</div>`,
+        activeLabelClasses: "bg-warning-500 text-warning-500-font",
+        activeIconClasses: "text-warning-500-font",
+        inactiveLabelClasses: "bg-warning-200 text-warning-200-font",
+        inactiveIconClasses: "text-warning-200-font"
+      },
+      {
+        label: "Fourth entry",
+        content: `<div class="bg-danger-100 p-8"><span class="font-bold text-danger-500">Danger</span> Content</div>`,
+        activeLabelClasses: "bg-danger-500 text-danger-500-font",
+        activeIconClasses: "text-danger-500-font",
+        inactiveLabelClasses: "bg-danger-200 text-danger-200-font",
+        inactiveIconClasses: "text-danger-200-font",
+        contentPadding: false
+      }
+    ]
+  }
+};

package/dist/components/__stories/AntKeycap.stories.js

@@ -69,28 +69,26 @@ const Summary = exports.Summary = {
   },
   render: args => ({
     components: {
-      AntKeycap: _AntKeycap.default,
-      faChevronUp: _freeSolidSvgIcons.faChevronUp,
-      faChevronDown: _freeSolidSvgIcons.faChevronDown
+      AntKeycap: _AntKeycap.default
     },
     setup() {
       return {
         args,
-        faChevronUp: _freeSolidSvgIcons.faChevronUp,
-        faChevronDown: _freeSolidSvgIcons.faChevronDown
+        AntKeycapSize: _AntKeycap2.AntKeycapSize,
+        faPlus: _freeSolidSvgIcons.faPlus
       };
     },
     template: `
-      <div class="p-4">
-        Press
-        <AntKeycap v-bind="args" :icon="faChevronUp"/>
-        or
-        <AntKeycap v-bind="args" :icon="faChevronDown"/>
-        to navigate. Press
-        <AntKeycap v-bind="args">ctl</AntKeycap>
-        +
-        <AntKeycap v-bind="args">K</AntKeycap>
-        to search.
+      <div class="flex gap-2 p-4">
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.xs"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.sm"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.md"/>
       </div>
     `
   }),

package/dist/components/__stories/AntKeycap.stories.mjs

@@ -1,6 +1,6 @@
 import AntKeycap from "../AntKeycap.vue";
 import { AntKeycapSize } from "../__types/AntKeycap.types.mjs";
-import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Keycap",
   component: AntKeycap,
@@ -47,21 +47,21 @@ export const Summary = {
     chromatic: { disableSnapshot: false }
   },
   render: (args) => ({
-    components: { AntKeycap, faChevronUp, faChevronDown },
+    components: { AntKeycap },
     setup() {
-      return { args, faChevronUp, faChevronDown };
+      return { args, AntKeycapSize, faPlus };
     },
     template: `
-      <div class="p-4">
-        Press
-        <AntKeycap v-bind="args" :icon="faChevronUp"/>
-        or
-        <AntKeycap v-bind="args" :icon="faChevronDown"/>
-        to navigate. Press
-        <AntKeycap v-bind="args">ctl</AntKeycap>
-        +
-        <AntKeycap v-bind="args">K</AntKeycap>
-        to search.
+      <div class="flex gap-2 p-4">
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.xs"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.sm"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.md"/>
       </div>
     `
   }),

package/dist/components/__types/AntKeycap.types.d.ts

@@ -1,4 +1,5 @@
 export declare enum AntKeycapSize {
+    md = "md",
     sm = "sm",
     xs = "xs"
 }

package/dist/components/__types/AntKeycap.types.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AntKeycapSize = void 0;
 var AntKeycapSize = exports.AntKeycapSize = /* @__PURE__ */(AntKeycapSize2 => {
+  AntKeycapSize2["md"] = "md";
   AntKeycapSize2["sm"] = "sm";
   AntKeycapSize2["xs"] = "xs";
   return AntKeycapSize2;

package/dist/components/__types/AntKeycap.types.mjs

@@ -1,4 +1,5 @@
 export var AntKeycapSize = /* @__PURE__ */ ((AntKeycapSize2) => {
+  AntKeycapSize2["md"] = "md";
   AntKeycapSize2["sm"] = "sm";
   AntKeycapSize2["xs"] = "xs";
   return AntKeycapSize2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "private": false,
   "type": "module",
   "exports": {