@antify/ui 2.4.12 → 2.5.1

package/dist/components/AntSkeleton.vue

@@ -3,21 +3,27 @@ import {
   Grouped,
 } from '../enums/Grouped.enum';
 import {
-  computed,
+  computed, ref, watch,
 } from 'vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<{
+  visible?: boolean;
   grouped?: Grouped;
   rounded?: boolean;
   roundedFull?: boolean;
   absolute?: boolean;
   minShowTime?: number;
 }>(), {
+  visible: true,
   grouped: Grouped.none,
   rounded: false,
   roundedFull: false,
   absolute: false,
-  minShowTime: 5000,
+  minShowTime: 300,
 });
 
 const groupedClassList = computed(() => ({
@@ -32,11 +38,43 @@ const classList = computed(() => ({
   'rounded-full': props.roundedFull && props.grouped === Grouped.none,
   ...groupedClassList.value,
 }));
+
+/**
+ * To prevent flickering, make sure the skeleton is a minimum time visible
+ * before hide it.
+ */
+const _visible = ref(props.visible);
+
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      _visible.value = true;
+    } else if (props.minShowTime && props.minShowTime > 0) {
+      setTimeout(() => {
+        _visible.value = false;
+      }, props.minShowTime);
+    } else {
+      _visible.value = false;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>
 
 <template>
   <div
+    v-if="_visible"
     :class="classList"
+    v-bind="$attrs"
     data-e2e="skeleton"
-  />
+  >
+    <div class="invisible">
+      <slot />
+    </div>
+  </div>
+
+  <slot v-else />
 </template>

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof AntSkeleton>;
 export declare const Docs: Story;
 export declare const Rounded: Story;
 export declare const Grouped: Story;
+export declare const Slot: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Rounded = exports.Grouped = exports.Docs = void 0;
+module.exports = exports.Slot = exports.Rounded = exports.Grouped = exports.Docs = void 0;
 var _AntSkeleton = _interopRequireDefault(require("../AntSkeleton.vue"));
 var _Grouped2 = require("../../enums/Grouped.enum");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,4 +57,23 @@ const Grouped = exports.Grouped = {
     ...Docs.args,
     grouped: _Grouped2.Grouped.left
   }
+};
+const Slot = exports.Slot = {
+  render: args => ({
+    components: {
+      AntSkeleton: _AntSkeleton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntSkeleton
+        v-bind="args"
+      >
+        Test here
+      </AntSkeleton>`
+  }),
+  args: {}
 };

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

@@ -53,3 +53,22 @@ export const Grouped = {
     grouped: _Grouped.left
   }
 };
+export const Slot = {
+  render: (args) => ({
+    components: {
+      AntSkeleton
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntSkeleton
+        v-bind="args"
+      >
+        Test here
+      </AntSkeleton>`
+  }),
+  args: {}
+};

package/dist/components/crud/AntCrudTableFilter.vue

@@ -20,6 +20,7 @@ import {
 const props = withDefaults(defineProps<{
   fullWidth?: boolean;
   showFilter?: boolean;
+  showSearch?: boolean;
   searchQuery?: string;
   hasFilter?: boolean;
   canCreate?: boolean;
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   fullWidth: true,
   showFilter: true,
+  showSearch: true,
   searchQuery: 'search',
   hasFilter: false,
   canCreate: true,
@@ -84,11 +86,14 @@ watch(() => props.fullWidth, (val) => {
       :class="{'grow': !_fullWidth}"
     >
       <div :class="{'w-80': _fullWidth, 'w-full': !_fullWidth}">
-        <AntSearch
-          v-model="search"
-          :skeleton="skeleton"
-          :placeholder="searchPlaceholderText"
-        />
+        <slot name="filter">
+          <AntSearch
+            v-if="showSearch"
+            v-model="search"
+            :skeleton="skeleton"
+            :placeholder="searchPlaceholderText"
+          />
+        </slot>
       </div>
 
       <AntDropdown
@@ -122,7 +127,7 @@ watch(() => props.fullWidth, (val) => {
       </AntDropdown>
     </div>
 
-    <div v-if="_fullWidth">
+    <div>
       <slot name="buttons">
         <AntCreateButton
           :skeleton="skeleton"

package/dist/components/crud/__stories/AntCrudTableFilter.stories.js

@@ -30,7 +30,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <div class="border border-base-300 border-dashed">
+      <div class="dashed">
         <AntCrudTableFilter
           v-model:search="args.search"
           v-bind="args"

package/dist/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -27,7 +27,7 @@ export const Docs = {
       };
     },
     template: `
-      <div class="border border-base-300 border-dashed">
+      <div class="dashed">
         <AntCrudTableFilter
           v-model:search="args.search"
           v-bind="args"

package/dist/components/forms/AntFormGroupLabel.vue

@@ -1,5 +1,20 @@
+<script lang="ts" setup>
+import AntSkeleton from '../AntSkeleton.vue';
+
+withDefaults(defineProps<{
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+});
+</script>
+
 <template>
   <div class="text-primary-500 text-xl font-medium">
-    <slot />
+    <AntSkeleton
+      :visible="skeleton"
+      rounded
+    >
+      <slot />
+    </AntSkeleton>
   </div>
 </template>

package/dist/components/inputs/AntCheckbox.vue

@@ -234,12 +234,14 @@ input[type="checkbox"]::before {
   width: 100%;
   height: 100%;
   transform: scale(0);
-  transition: 120ms transform;
+  transition: 120ms all;
   background: currentColor;
   border-radius: inherit;
+  opacity: 0;
 }
 
 input[type="checkbox"]:checked::before {
   transform: scale(1);
+  opacity: 1;
 }
 </style>

package/dist/components/inputs/Elements/AntInputDescription.vue

@@ -33,7 +33,7 @@ const classes = computed(() => {
   };
 
   return {
-    'relative font-regular inline-block transition-color': true,
+    'font-regular inline-block transition-color': true,
     'text-2xs': props.size === Size.xs2,
     'text-xs': props.size === Size.xs,
     'text-sm': props.size === Size.sm,
@@ -53,14 +53,11 @@ onMounted(() => {
   <div
     :class="classes"
   >
-    <span :class="{'invisible': skeleton}">
-      <slot />
-    </span>
-
     <AntSkeleton
-      v-if="skeleton"
-      absolute
+      :visible="skeleton"
       rounded
-    />
+    >
+      <slot />
+    </AntSkeleton>
   </div>
 </template>

package/dist/components/inputs/Elements/AntInputLabel.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
-  computed, onMounted,
+  computed,
+  onMounted,
 } from 'vue';
 import {
   Size,
@@ -48,21 +49,20 @@ onMounted(() => {
     <span
       v-if="label"
       :class="fontClasses"
+      @click="() => {
+        if(!skeleton) {
+          $emit('clickContent')
+        }
+      }"
     >
-      <span
-        :class="{'invisible': skeleton}"
-        @click="$emit('clickContent')"
+      <AntSkeleton
+        :visible="skeleton"
+        rounded
       >
         <slot name="label">
           {{ label }}
         </slot>
-      </span>
-
-      <AntSkeleton
-        v-if="skeleton"
-        absolute
-        rounded
-      />
+      </AntSkeleton>
     </span>
 
     <slot />

package/dist/components/inputs/Elements/AntInputLimiter.vue

@@ -53,14 +53,11 @@ onMounted(() => {
 
 <template>
   <div :class="classes">
-    <span :class="{'invisible': skeleton}">
-      {{ value }}/{{ maxValue }}
-    </span>
-
     <AntSkeleton
-      v-if="skeleton"
-      absolute
+      :visible="skeleton"
       rounded
-    />
+    >
+      {{ value }}/{{ maxValue }}
+    </AntSkeleton>
   </div>
 </template>

package/dist/components/inputs/Elements/__stories/AntInputLabel.stories.d.ts

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

package/dist/components/inputs/Elements/__stories/AntInputLabel.stories.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = exports.WithContent = exports.Docs = void 0;
 var _AntInputLabel = _interopRequireDefault(require("../AntInputLabel.vue"));
+var _test = require("@storybook/test");
 var _Size = require("../../../../enums/Size.enum");
 var _AntBaseInput = _interopRequireDefault(require("../AntBaseInput.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,7 +54,8 @@ const Docs = exports.Docs = {
     template: '<div class="p-4"><AntInputLabel v-bind="args"></AntInputLabel></div>'
   }),
   args: {
-    label: "Label"
+    label: "Label",
+    onClickContent: (0, _test.fn)()
   }
 };
 const WithContent = exports.WithContent = {

package/dist/components/inputs/Elements/__stories/AntInputLabel.stories.mjs

@@ -1,4 +1,7 @@
 import AntInputLabel from "../AntInputLabel.vue";
+import {
+  fn
+} from "@storybook/test";
 import {
   Size
 } from "../../../../enums/Size.enum.mjs";
@@ -48,7 +51,8 @@ export const Docs = {
     template: '<div class="p-4"><AntInputLabel v-bind="args"></AntInputLabel></div>'
   }),
   args: {
-    label: "Label"
+    label: "Label",
+    onClickContent: fn()
   }
 };
 export const WithContent = {

package/package.json

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