hl-core 0.0.9-beta.32 → 0.0.9-beta.32-test

package/components/Form/FormData.vue

@@ -1,49 +1,57 @@
 <template>
-  <div v-if="block" class="form-data-block rounded-lg border-[1px] relative transition-all" :class="[$styles.whiteBg, block.disabled && $styles.disabled]">
-    <div class="py-3 px-6">
-      <div class="flex items-center justify-between">
-        <p :class="[$styles.textTitle, $styles.greenText]">{{ block.title }}</p>
-        <div
-          v-if="typeof block.headerBtn === 'object'"
-          :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, block.disabled ? $styles.disabled : 'cursor-pointer']"
-          class="hidden lg:flex transition-all rounded-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
-          @click="!block.disabled && block.headerBtn.action()"
-        >
-          {{ block.headerBtn.text }}
-        </div>
-      </div>
-      <p v-if="block.subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ block.subtitle }}</p>
-      <v-row class="mt-1 max-w-[97%]">
-        <v-col v-for="(label, index) in visibleLabels" :key="index" :cols="block.shrinkLabels === true ? false : label.size">
-          <p :class="[$styles.textSimple]" class="font-medium">
-            {{ label.text }}
-          </p>
-        </v-col>
-      </v-row>
-      <div v-if="hasBlockData(block.data)">
-        <v-row v-for="(row, index) in getBlockDataValue(block.data)" :key="index" class="min-h-[65px] max-w-[97%]">
-          <v-col
-            v-if="row.every((i: any) => !!i)"
-            v-for="each of row.filter((_: any, i: number) => $display().lgAndUp.value ? true : block.labels[i].hideOnMobile === false)"
-            :key="each"
-          >
-            <p :class="[$styles.textSimple]">
-              {{ each }}
-            </p>
-          </v-col>
-          <v-col v-else :class="[$styles.textSimple, $styles.blueText]">{{ block.noValueText ?? $dataStore.t('clients.necessaryFillForm') }}</v-col>
+  <base-animation :type="animation">
+    <div
+      v-if="block && !!block.show === true"
+      class="form-data-block rounded-lg border-[1px] relative transition-all"
+      :class="[$styles.whiteBg, block.disabled && $styles.disabled]"
+    >
+      <div class="py-3 px-6">
+        <div class="flex items-center justify-between">
+          <p :class="[$styles.textTitle, $styles.greenText]">{{ block.title }}</p>
           <div
-            v-if="block.btn"
-            class="absolute right-0 rounded-br-lg transition-all h-[70px] w-[60px] place-self-end flex items-center justify-center"
-            :class="[$styles.blueBgLight, $styles.blueBgLightHover, block.disabled ? $styles.disabled : 'cursor-pointer']"
-            @click="!block.disabled && block.btn.action({ value: row, index: index })"
+            v-if="typeof block.headerBtn === 'object'"
+            :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, block.disabled ? $styles.disabled : 'cursor-pointer']"
+            class="hidden lg:flex transition-all rounded-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
+            @click="!block.disabled && block.headerBtn.action()"
           >
-            <i class="mdi text-xl" :class="[block.btn.icon]"></i>
+            {{ block.headerBtn.text }}
           </div>
+        </div>
+        <p v-if="block.subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ block.subtitle }}</p>
+        <v-row class="mt-1 max-w-[97%]">
+          <v-col v-for="(label, index) in visibleLabels" :key="index" :cols="block.shrinkLabels === true ? false : label.size">
+            <p :class="[$styles.textSimple]" class="font-medium">
+              {{ label.text }}
+            </p>
+          </v-col>
         </v-row>
+        <div v-if="hasBlockData(block.data)">
+          <v-row v-for="(row, index) in getBlockDataValue(block.data)" :key="index" class="min-h-[65px] max-w-[97%]">
+            <v-col
+              v-if="row.every((i: any) => !!i)"
+              v-for="each of row.filter((_: any, i: number) => $display().lgAndUp.value ? true : block.labels[i].hideOnMobile === false)"
+              :key="each"
+            >
+              <p :class="[$styles.textSimple]">
+                {{ each }}
+              </p>
+            </v-col>
+            <v-col v-else :class="[$styles.textSimple, $styles.blueText]">{{ block.noValueText ?? $dataStore.t('clients.necessaryFillForm') }}</v-col>
+            <base-animation type="fade">
+              <div
+                v-if="block.btn && !!block.btn.showBtn === true"
+                class="absolute right-0 rounded-br-lg transition-all h-[70px] w-[60px] place-self-end flex items-center justify-center"
+                :class="[$styles.blueBgLight, $styles.blueBgLightHover, block.disabled ? $styles.disabled : 'cursor-pointer']"
+                @click="!block.disabled && block.btn.action({ value: row, index: index })"
+              >
+                <i class="mdi text-xl" :class="[block.btn.icon]"></i>
+              </div>
+            </base-animation>
+          </v-row>
+        </div>
       </div>
     </div>
-  </div>
+  </base-animation>
 </template>
 
 <script lang="ts">
@@ -56,6 +64,10 @@ export default defineComponent({
       type: Object as PropType<FormBlock>,
       required: true,
     },
+    animation: {
+      type: String as PropType<VuetifyAnimations>,
+      required: false,
+    },
   },
   setup(props) {
     const display = useDisplayInfo();

package/components/Transitions/Animation.vue

@@ -0,0 +1,28 @@
+<template>
+  <component v-if="!!type && Object.keys(vuetifyAnimations).includes(type)" :is="vuetifyAnimations[type]">
+    <slot></slot>
+  </component>
+  <slot v-else></slot>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  type: {
+    type: String as PropType<VuetifyAnimations>,
+    required: false,
+  },
+});
+
+const vuetifyAnimations: { [key in VuetifyAnimations]: string } = {
+  expand: 'v-expand-transition',
+  fab: 'v-fab-transition',
+  fade: 'v-fade-transition',
+  scale: 'v-scale-transition',
+  'scroll-x': 'v-scroll-x-transition',
+  'scroll-y': 'v-scroll-x-transition',
+  'slide-x': 'v-slide-x-transition',
+  'slide-x-r': 'v-slide-x-reverse-transition',
+  'slide-y': 'v-slide-y-transition',
+  'slide-y-r': 'v-slide-y-reverse-transition',
+};
+</script>

package/composables/fields.ts

@@ -226,8 +226,10 @@ export class FormBlock {
   data: ComputedRefWithControl<any> | string[][];
   shrinkLabels: boolean = true;
   disabled: ComputedRef;
+  show: ComputedRef;
   btn: {
     icon: string;
+    showBtn: ComputedRef;
     action: ({ value, index }: { value: any; index: number }) => void;
   };
   constructor(options: {
@@ -238,8 +240,9 @@ export class FormBlock {
     labels: FormBlockLabel[];
     data: ComputedRefWithControl<any> | string[][];
     shrinkLabels?: boolean;
-    disabled: ComputedRef;
-    btn?: { icon?: string; action: ({ value, index }: { value: any; index: number }) => void };
+    disabled?: ComputedRef;
+    show?: ComputedRef;
+    btn?: { icon?: string; showBtn?: ComputedRef; action: ({ value, index }: { value: any; index: number }) => void };
   }) {
     this.title = options.title;
     if (typeof options.subtitle === 'string') this.subtitle = options.subtitle;
@@ -248,11 +251,14 @@ export class FormBlock {
     this.labels = options.labels;
     this.data = options.data;
     if (typeof options.shrinkLabels === 'boolean') this.shrinkLabels = options.shrinkLabels;
-    this.disabled = options.disabled;
+    if (options.disabled !== undefined) this.disabled = options.disabled;
+    else this.disabled = computed(() => false);
+    if (options.show !== undefined) this.show = options.show;
+    else this.show = computed(() => true);
     if (typeof options.headerBtn === 'object') this.headerBtn = options.headerBtn;
     if (typeof options.btn === 'object') {
-      this.btn = { icon: options.btn.icon ?? 'mdi-dots-vertical', action: options.btn.action };
-    } else this.btn = { icon: 'mdi-dots-vertical', action: () => {} };
+      this.btn = { icon: options.btn.icon ?? 'mdi-dots-vertical', showBtn: options.btn.showBtn ?? computed(() => true), action: options.btn.action };
+    } else this.btn = { icon: 'mdi-dots-vertical', showBtn: computed(() => true), action: () => {} };
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hl-core",
-  "version": "0.0.9-beta.32",
+  "version": "0.0.9-beta.32-test",
   "license": "MIT",
   "private": false,
   "main": "nuxt.config.ts",
@@ -66,6 +66,6 @@
     "vue-json-pretty": "2.2.4",
     "vue-toastification": "2.0.0-rc.5",
     "vue-uuid": "3.0.0",
-    "vuetify": "3.3.11"
+    "vuetify": "3.3.23"
   }
 }

package/types/index.ts

@@ -651,4 +651,6 @@ declare global {
   };
 
   type LabelSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+
+  type VuetifyAnimations = 'expand' | 'fab' | 'fade' | 'scale' | 'scroll-x' | 'scroll-y' | 'slide-x' | 'slide-x-r' | 'slide-y' | 'slide-y-r';
 }