@antify/ui-module 1.2.0 → 1.3.0

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui-module",
   "configKey": "uiModule",
-  "version": "1.2.0"
+  "version": "1.3.0"
 }

package/dist/module.mjs

@@ -169,12 +169,16 @@ const tailwindcss = {
     // For module dev
     "./src/runtime/**/*.{vue,js,ts,jsx,tsx}",
     "./src/runtime/**/*.stories.ts",
-    "./playground/**/*.{vue,js,ts,jsx,tsx}",
+    "./playground/app.vue",
+    "./playground/components/**/*.{vue,js,ts,jsx,tsx}",
+    "./playground/pages/**/*.{vue,js,ts,jsx,tsx}",
+    "./playground/layouts/**/*.{vue,js,ts,jsx,tsx}",
     "../ui-module/src/**/*.{vue,js,ts,jsx,tsx}",
     // For project dev
     "./app.vue",
     "./components/**/*.{vue,js,ts,jsx,tsx}",
     "./pages/**/*.{vue,js,ts,jsx,tsx}",
+    "./layouts/**/*.{vue,js,ts,jsx,tsx}",
     // If this config is used in a project
     "./node_modules/@antify/*/dist/**/*.{js,vue,ts}",
     "./node_modules/@antify/*/src/**/*.{js,vue,ts}"

package/dist/runtime/components/buttons/AntActionButton.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+/**
+ * This button is used for everything what is the primary
+ * action like save, confirm, create, etc.
+ */
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+withDefaults(
+	defineProps<{
+		size?: Size;
+		disabled?: boolean;
+		grouped?: Grouped;
+		colorType?: ColorType;
+		skeleton?: boolean;
+		expanded?: boolean;
+	}>(), {
+		colorType: ColorType.primary,
+	}
+)
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="colorType"
+    filled
+    data-e2e="action-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <slot />
+  </AntButton>
+</template>

package/dist/runtime/components/buttons/AntCreateButton.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,18 +14,16 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    filled
     data-e2e="create-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
     Create
-  </AntButton>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntDeleteButton.vue

@@ -2,7 +2,7 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,18 +15,17 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :color-type="ColorType.danger"
-    filled
     data-e2e="delete-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
     Delete
-  </AntButton>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,18 +14,16 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    filled
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
     Save and new
-  </AntButton>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntSaveButton.vue

@@ -2,7 +2,7 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,7 +15,7 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
@@ -27,5 +27,5 @@ defineProps<{
     @blur="$emit('blur')"
   >
     Save
-  </AntButton>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/__stories/AntActionButton.stories.d.ts

@@ -0,0 +1,10 @@
+import AntActionButton from '../AntActionButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntActionButton>;
+export default meta;
+type Story = StoryObj<typeof AntActionButton>;
+export declare const Docs: Story;
+export declare const Disabled: Story;
+export declare const Grouped: Story;
+export declare const Skeleton: Story;
+export declare const Expanded: Story;

package/dist/runtime/components/buttons/__stories/AntActionButton.stories.mjs

@@ -0,0 +1,57 @@
+import AntActionButton from "../AntActionButton.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+const meta = {
+  title: "Components/Buttons/Action Button",
+  component: AntActionButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntActionButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntActionButton v-bind="args">Action Button</AntActionButton>'
+  }),
+  args: {}
+};
+export const Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped.left
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+export const Expanded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    expanded: true
+  }
+};

package/dist/runtime/tailwind.config.mjs

@@ -167,12 +167,16 @@ export default {
     // For module dev
     "./src/runtime/**/*.{vue,js,ts,jsx,tsx}",
     "./src/runtime/**/*.stories.ts",
-    "./playground/**/*.{vue,js,ts,jsx,tsx}",
+    "./playground/app.vue",
+    "./playground/components/**/*.{vue,js,ts,jsx,tsx}",
+    "./playground/pages/**/*.{vue,js,ts,jsx,tsx}",
+    "./playground/layouts/**/*.{vue,js,ts,jsx,tsx}",
     "../ui-module/src/**/*.{vue,js,ts,jsx,tsx}",
     // For project dev
     "./app.vue",
     "./components/**/*.{vue,js,ts,jsx,tsx}",
     "./pages/**/*.{vue,js,ts,jsx,tsx}",
+    "./layouts/**/*.{vue,js,ts,jsx,tsx}",
     // If this config is used in a project
     "./node_modules/@antify/*/dist/**/*.{js,vue,ts}",
     "./node_modules/@antify/*/src/**/*.{js,vue,ts}"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/runtime/components/buttons/AntActionButton.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+/**
+ * This button is used for everything what is the primary
+ * action like save, confirm, create, etc.
+ */
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+withDefaults(
+	defineProps<{
+		size?: Size;
+		disabled?: boolean;
+		grouped?: Grouped;
+		colorType?: ColorType;
+		skeleton?: boolean;
+		expanded?: boolean;
+	}>(), {
+		colorType: ColorType.primary,
+	}
+)
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="colorType"
+    filled
+    data-e2e="action-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <slot />
+  </AntButton>
+</template>

package/src/runtime/components/buttons/AntCreateButton.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,18 +14,16 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    filled
     data-e2e="create-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
     Create
-  </AntButton>
+  </AntActionButton>
 </template>

package/src/runtime/components/buttons/AntDeleteButton.vue

@@ -2,7 +2,7 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,18 +15,17 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :color-type="ColorType.danger"
-    filled
     data-e2e="delete-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
     Delete
-  </AntButton>
+  </AntActionButton>
 </template>

package/src/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,18 +14,16 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    filled
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
     Save and new
-  </AntButton>
+  </AntActionButton>
 </template>

package/src/runtime/components/buttons/AntSaveButton.vue

@@ -2,7 +2,7 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
 
 defineEmits(['click', 'blur']);
 defineProps<{
@@ -15,7 +15,7 @@ defineProps<{
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
@@ -27,5 +27,5 @@ defineProps<{
     @blur="$emit('blur')"
   >
     Save
-  </AntButton>
+  </AntActionButton>
 </template>