@antify/ui 1.0.0

package/dist/components/dialogs/__stories/AndDeleteDialog.stories.d.ts

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

package/dist/components/dialogs/__stories/AndDeleteDialog.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntDeleteDialog = _interopRequireDefault(require("../AntDeleteDialog.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Dialogs/Delete Dialog",
+  component: _AntDeleteDialog.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntDeleteDialog: _AntDeleteDialog.default,
+      AntButton: _AntButton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+    <div class="h-96">
+      <AntButton @click="() => args.open = true" state="danger">Delete</AntButton>
+
+      <AntDeleteDialog
+        v-model:open="args.open"
+        :entity="args.entity"
+        v-bind="args"
+      />
+    </div>
+    `
+  }),
+  args: {
+    open: false,
+    entity: "Lorem ipsum"
+  }
+};

package/dist/components/dialogs/__stories/AndDeleteDialog.stories.mjs

@@ -0,0 +1,32 @@
+import AntDeleteDialog from "../AntDeleteDialog.vue";
+import AntButton from "../../buttons/AntButton.vue";
+const meta = {
+  title: "Components/Dialogs/Delete Dialog",
+  component: AntDeleteDialog,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDeleteDialog, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div class="h-96">
+      <AntButton @click="() => args.open = true" state="danger">Delete</AntButton>
+
+      <AntDeleteDialog
+        v-model:open="args.open"
+        :entity="args.entity"
+        v-bind="args"
+      />
+    </div>
+    `
+  }),
+  args: {
+    open: false,
+    entity: "Lorem ipsum"
+  }
+};

package/dist/components/dialogs/__stories/AntDialog.stories.d.ts

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

package/dist/components/dialogs/__stories/AntDialog.stories.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntDialog = _interopRequireDefault(require("../AntDialog.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _enums = require("../../../enums");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Dialogs/Dialog",
+  component: _AntDialog.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [() => ({
+    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+  })],
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    title: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntDialog: _AntDialog.default,
+      AntButton: _AntButton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div
+        class="h-96 flex items-center justify-center relative"
+      >
+        <div class="absolute inset-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+
+        <div class="absolute bottom-0 right-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+
+        <AntButton @click="args.open = true" state="primary">Open Dialog</AntButton>
+
+        <AntDialog v-bind="args" v-model:open="args.open">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore
+        </AntDialog>
+      </div>
+    `
+  }),
+  args: {
+    open: false,
+    title: "Lorem ipsum dolor"
+  }
+};

package/dist/components/dialogs/__stories/AntDialog.stories.mjs

@@ -0,0 +1,60 @@
+import AntDialog from "../AntDialog.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import { InputState } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Dialogs/Dialog",
+  component: AntDialog,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    title: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDialog, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div
+        class="h-96 flex items-center justify-center relative"
+      >
+        <div class="absolute inset-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+
+        <div class="absolute bottom-0 right-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+
+        <AntButton @click="args.open = true" state="primary">Open Dialog</AntButton>
+
+        <AntDialog v-bind="args" v-model:open="args.open">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore
+        </AntDialog>
+      </div>
+    `
+  }),
+  args: {
+    open: false,
+    title: "Lorem ipsum dolor"
+  }
+};

package/dist/components/forms/AntField.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import {onMounted, computed} from 'vue';
+import {Size} from '../../enums/Size.enum';
+import AntInputLabel from '../inputs/Elements/AntInputLabel.vue';
+import AntInputDescription from '../inputs/Elements/AntInputDescription.vue';
+import {handleEnumValidation} from '../../handler';
+import AntInputLimiter from '../inputs/Elements/AntInputLimiter.vue';
+import {InputState} from '../../enums';
+
+defineEmits(['clickLabel', 'validate']);
+
+const props = withDefaults(defineProps<{
+  label?: string;
+  description?: string;
+  messages?: string[];
+  size?: Size;
+  state?: InputState;
+  skeleton?: boolean;
+  limiterValue?: number;
+  limiterMaxValue?: number;
+  labelFor?: string;
+  expanded?: boolean;
+}>(), {
+  state: InputState.base,
+  skeleton: false,
+  size: Size.md,
+  messages: () => [],
+  expanded: true
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+});
+
+const _state = computed(() => props.messages.length <= 0 ? InputState.base : props.state);
+const fontSize = computed(() => {
+  if (props.size === Size.xs2 || props.size === Size.xs) {
+    return Size.xs;
+  }
+
+  return Size.sm;
+});
+const fieldClasses = computed(() => ({
+  'w-full': props.expanded,
+  'gap-2.5': props.size === Size.lg,
+  'gap-2': props.size === Size.md,
+  'gap-1.5': (props.size === Size.sm || props.size === Size.xs),
+  'gap-1': props.size === Size.xs2,
+}));
+const descriptionClasses = computed(() => ({
+  'gap-2.5': props.size === Size.lg,
+  'gap-2': props.size === Size.md,
+  'gap-1.5': (props.size === Size.sm || props.size === Size.xs),
+  'gap-1': props.size === Size.xs2,
+}));
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start"
+    :class="fieldClasses"
+  >
+    <AntInputLabel
+      :label="label"
+      :size="size"
+      :skeleton="skeleton"
+      :for="labelFor"
+      @click-content="$emit('clickLabel')"
+    >
+      <div class="w-full">
+        <slot/>
+      </div>
+    </AntInputLabel>
+
+    <div
+      v-if="description || messages.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
+      class="flex justify-between w-full"
+      :class="descriptionClasses"
+    >
+      <AntInputDescription
+        v-if="description || messages.length > 0"
+        :size="fontSize"
+        :skeleton="skeleton"
+        :state="_state"
+      >
+        <slot name="description">
+          <template v-if="_state !== InputState.base && messages.length === 1">
+            {{ messages[0] }}
+          </template>
+
+          <template v-else-if="_state !== InputState.base && messages.length > 1">
+            <ul class="list-disc list-outside pl-4">
+              <li
+                v-for="(message, index) of messages"
+                :key="`field-message-${index}`"
+                class="marker:m-none marker:p-none"
+              >
+                {{ message }}
+              </li>
+            </ul>
+          </template>
+
+          <template v-else>
+            {{ description }}
+          </template>
+        </slot>
+      </AntInputDescription>
+
+      <div
+        v-if="limiterMaxValue !== undefined && limiterValue !== undefined"
+        class="flex flex-grow justify-end"
+      >
+        <AntInputLimiter
+          :value="limiterValue"
+          :max-value="limiterMaxValue"
+          :size="fontSize"
+          :skeleton="skeleton"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/forms/AntFormGroup.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import {Direction} from '../../enums/Direction.enum';
+import {computed, useAttrs} from 'vue';
+
+const attrs = useAttrs();
+const props = withDefaults(defineProps<{
+  direction?: Direction;
+}>(), {
+  direction: Direction.column,
+});
+
+const classes = computed(() => {
+  // Let override gap-x-* and gap-y-* classes from outside
+  const attrClasses = typeof attrs.class === 'string' ? attrs.class : ''
+  const hasGapX = /gap-x-\d/.test(attrClasses);
+  const hasGapY = /gap-y-\d/.test(attrClasses);
+
+  const classes: Record<string, boolean> = {
+    'flex-col': props.direction === Direction.column,
+    'gap-y-2.5': !hasGapY && props.direction === Direction.column,
+    'flex-row': props.direction === Direction.row,
+    'gap-x-2.5': !hasGapX && props.direction === Direction.row,
+  }
+
+  return classes;
+});
+</script>
+
+<template>
+  <section
+    class="flex"
+    :class="classes"
+  >
+    <slot/>
+  </section>
+</template>

package/dist/components/forms/AntFormGroupLabel.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-primary-500 text-xl font-medium">
+    <slot/>
+  </div>
+</template>

package/dist/components/forms/__stories/AntField.stories.d.ts

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

package/dist/components/forms/__stories/AntField.stories.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntField = _interopRequireDefault(require("../AntField.vue"));
+var _AntBaseInput = _interopRequireDefault(require("../../inputs/Elements/AntBaseInput.vue"));
+var _Size = require("../../../enums/Size.enum");
+var _vue = require("vue");
+var _enums = require("../../../enums");
+var _validate = require("@antify/validate");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Forms/Field",
+  component: _AntField.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.Size)
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    skeleton: {
+      control: "boolean",
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntField: _AntField.default,
+      AntBaseInput: _AntBaseInput.default
+    },
+    setup: () => {
+      const skeleton = (0, _vue.computed)({
+        get() {
+          return args.skeleton;
+        },
+        set(val) {
+          args.skeleton = val;
+        }
+      });
+      const size = (0, _vue.computed)({
+        get() {
+          return args.size;
+        },
+        set(val) {
+          args.size = val;
+        }
+      });
+      const state = (0, _vue.computed)({
+        get() {
+          return validator.hasErrors() ? _enums.InputState.danger : args.state;
+        },
+        set(val) {
+          args.state = val;
+        }
+      });
+      const value = (0, _vue.ref)(null);
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, _validate.notBlankRule]));
+      return {
+        args,
+        value,
+        validator,
+        skeleton,
+        size,
+        state,
+        InputState: _enums.InputState
+      };
+    },
+    template: `
+      <AntField
+        v-bind="args"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+        :state="state"
+      >
+        <AntBaseInput
+          v-model="value"
+          :skeleton="skeleton"
+          :size="size"
+          :state="state"
+          placeholder="Placeholder"
+          @validate="(val) => validator.validate(val)"
+        />
+      </AntField>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};

package/dist/components/forms/__stories/AntField.stories.mjs

@@ -0,0 +1,80 @@
+import AntField from "../AntField.vue";
+import AntBaseInput from "../../inputs/Elements/AntBaseInput.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { computed, reactive, ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
+const meta = {
+  title: "Forms/Field",
+  component: AntField,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    skeleton: {
+      control: "boolean",
+      table: { defaultValue: { summary: false } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntField, AntBaseInput },
+    setup: () => {
+      const skeleton = computed({
+        get() {
+          return args.skeleton;
+        },
+        set(val) {
+          args.skeleton = val;
+        }
+      });
+      const size = computed({
+        get() {
+          return args.size;
+        },
+        set(val) {
+          args.size = val;
+        }
+      });
+      const state = computed({
+        get() {
+          return validator.hasErrors() ? InputState.danger : args.state;
+        },
+        set(val) {
+          args.state = val;
+        }
+      });
+      const value = ref(null);
+      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      return { args, value, validator, skeleton, size, state, InputState };
+    },
+    template: `
+      <AntField
+        v-bind="args"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+        :state="state"
+      >
+        <AntBaseInput
+          v-model="value"
+          :skeleton="skeleton"
+          :size="size"
+          :state="state"
+          placeholder="Placeholder"
+          @validate="(val) => validator.validate(val)"
+        />
+      </AntField>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};

package/dist/components/forms/__stories/AntFormGroup.stories.d.ts

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

package/dist/components/forms/__stories/AntFormGroup.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntFormGroup = _interopRequireDefault(require("../AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../AntFormGroupLabel.vue"));
+var _AntTextInput = _interopRequireDefault(require("../../inputs/AntTextInput.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _Direction = require("../../../enums/Direction.enum");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Forms/Form Group",
+  component: _AntFormGroup.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    direction: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Direction.Direction)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntTextInput: _AntTextInput.default,
+      AntButton: _AntButton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntFormGroup v-bind="args">
+        <AntFormGroupLabel>Example label</AntFormGroupLabel>
+        <AntTextInput label="Example"/>
+        <AntButton state="primary">Submit</AntButton>
+      </AntFormGroup>
+    `
+  }),
+  args: {}
+};