@vc-shell/framework 1.0.53 → 1.0.54

package/ui/components/atoms/vc-container/vc-container.vue

@@ -36,15 +36,11 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick } from "vue";
-import { VcContainerProps } from "./vc-container-model";
+import { containerProps, containerEmits } from "./vc-container-model";
 
-const props = withDefaults(defineProps<VcContainerProps>(), {
-  shadow: false,
-  noPadding: false,
-  usePtr: false,
-});
+const props = defineProps(containerProps);
 
-const emit = defineEmits(["scroll:ptr"]);
+const emit = defineEmits(containerEmits);
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);
@@ -57,8 +53,7 @@ const delta = ref(0);
 
 onMounted(() => {
   const observer = new ResizeObserver(() => {
-    scroll.value = (component.value &&
-      component.value.clientHeight < component.value.scrollHeight) as boolean;
+    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
   });
 
   if (component.value) {
@@ -66,9 +61,7 @@ onMounted(() => {
   }
 });
 
-const touchable = computed(
-  () => status.value !== "refresh" && status.value !== "success"
-);
+const touchable = computed(() => status.value !== "refresh" && status.value !== "success");
 
 const scrollTop = () => {
   if (component.value) {
@@ -164,8 +157,7 @@ defineExpose({
   --container-scroll-color-hover: #cce4f5;
   --container-scroll-width: 8px;
   --container-scroll-padding: 8px;
-  --container-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset,
-    0 -3px 2px rgba(0, 0, 0, 0.1) inset;
+  --container-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset, 0 -3px 2px rgba(0, 0, 0, 0.1) inset;
 }
 
 .vc-container {

package/ui/components/atoms/vc-hint/vc-hint-model.ts

@@ -0,0 +1,5 @@
+import { VNode } from "vue";
+
+export interface VcHintSlots {
+  default: () => VNode[];
+}

package/ui/components/atoms/vc-icon/index.ts

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcIconProps } from "./vc-icon-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Icon from "./vc-icon.vue";
-export const VcIcon: ComponentConstructor<
-    ComponentPublicInstance<VcIconProps>
-> = Icon;
+export const VcIcon: ComponentConstructor<ComponentPublicInstance<VcIconProps>> = Icon;

package/ui/components/atoms/vc-icon/vc-icon-model.ts

@@ -1,10 +1,19 @@
-import {VNode} from "vue";
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcIconProps {
-   icon?: string | undefined
-    size?: "xs" | "s" | "m" | "l" | "xl" | "xxl"
-}
+export const iconProps = {
+  icon: {
+    type: String,
+    default: "fas fa-square-full",
+  },
+  size: {
+    type: String as PropType<"xs" | "s" | "m" | "l" | "xl" | "xxl">,
+    default: "m",
+  },
+};
+
+export type VcIconProps = ExtractTypes<typeof iconProps>;
 
 export interface VcIconSlots {
-    default: () => VNode[];
+  default: () => VNode[];
 }

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -3,12 +3,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIconProps } from "./vc-icon-model";
+import { iconProps } from "./vc-icon-model";
 
-withDefaults(defineProps<VcIconProps>(), {
-  icon: "fas fa-square-full",
-  size: "m",
-});
+defineProps(iconProps);
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-image/index.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcImageProps } from "./vc-image-model";
+import { VcImageEmits, VcImageProps } from "./vc-image-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Image from "./vc-image.vue";
-export const VcImage: ComponentConstructor<
-  ComponentPublicInstance<VcImageProps>
-> = Image;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcImage: ComponentConstructor<ComponentPublicInstance<VcImageProps, any, any, any, any, VcImageEmits>> =
+  Image;

package/ui/components/atoms/vc-image/vc-image-model.ts

@@ -1,26 +1,40 @@
-import { VNode } from "vue";
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcImageProps {
-  aspect?: string | undefined;
-  rounded?: boolean | undefined;
-  bordered?: boolean | undefined;
-  clickable?: boolean | undefined;
-  src?: string | undefined;
-  size?:
-    | "auto"
-    | "1x1"
-    | "16x9"
-    | "4x3"
-    | "3x2"
-    | "xs"
-    | "s"
-    | "m"
-    | "l"
-    | "xl"
-    | "xxl";
-  background?: "cover" | "contain" | "auto";
-  onClick?: () => void;
-}
+export const imageProps = {
+  aspect: {
+    type: String,
+    default: "1x1",
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+  src: String,
+  size: {
+    type: String as PropType<"auto" | "1x1" | "16x9" | "4x3" | "3x2" | "xs" | "s" | "m" | "l" | "xl" | "xxl">,
+    default: "auto",
+  },
+  background: {
+    type: String as PropType<"cover" | "contain" | "auto">,
+    default: "cover",
+  },
+};
+
+export const imageEmits = {
+  click: () => true,
+};
+
+export type VcImageProps = ExtractTypes<typeof imageProps>;
+export type VcImageEmits = typeof imageEmits;
 
 export interface VcImageSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-image/vc-image.stories.ts

@@ -25,8 +25,7 @@ const Template: Story = (args) => ({
   setup() {
     return { args };
   },
-  template:
-    '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
+  template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
 });
 
 export const Image = Template.bind({});

package/ui/components/atoms/vc-image/vc-image.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="vc-image" :class="[`vc-image_${size}`]">
+  <div
+    class="vc-image"
+    :class="[`vc-image_${size}`]"
+  >
     <div
       :class="[
         `vc-image_${aspect}`,
         {
           'tw-rounded-full tw-pb-[var(--image-padding-bottom-1x1)]': rounded,
-          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]':
-            bordered,
+          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]': bordered,
           'tw-cursor-pointer': clickable,
         },
         'tw-relative',
@@ -18,7 +20,10 @@
         v-if="!src"
         class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
       >
-        <VcIcon icon="fas fa-image" size="xl"></VcIcon>
+        <VcIcon
+          icon="fas fa-image"
+          size="xl"
+        ></VcIcon>
       </div>
     </div>
   </div>
@@ -26,24 +31,15 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { VcImageProps } from "./vc-image-model";
+import { imageProps, imageEmits } from "./vc-image-model";
 
-const props = withDefaults(defineProps<VcImageProps>(), {
-  aspect: "1x1",
-  rounded: false,
-  bordered: false,
-  clickable: false,
-  size: "auto",
-  background: "cover",
-});
+const props = defineProps(imageProps);
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(imageEmits);
 
 const imageHandler = computed(() => {
   if (props.src) {
-    return `background: url(${encodeURI(props.src)}) center / ${
-      props.background
-    } no-repeat`;
+    return `background: url(${encodeURI(props.src)}) center / ${props.background} no-repeat`;
   }
   return undefined;
 });

package/ui/components/atoms/vc-info-row/index.ts

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcInfoRowProps } from "./vc-info-row-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import InfoRow from "./vc-info-row.vue";
-export const VcInfoRow: ComponentConstructor<
-  ComponentPublicInstance<VcInfoRowProps>
-> = InfoRow;
+export const VcInfoRow: ComponentConstructor<ComponentPublicInstance<VcInfoRowProps>> = InfoRow;

package/ui/components/atoms/vc-info-row/vc-info-row-model.ts

@@ -1,11 +1,26 @@
-import { VNode } from "vue";
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcInfoRowProps {
-  label?: string | undefined;
-  value?: string | undefined;
-  tooltip?: string | undefined;
-  type?: "default" | "email";
-}
+export const infoRowProps = {
+  label: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String as PropType<"default" | "email">,
+    default: "",
+  },
+};
+
+export type VcInfoRowProps = ExtractTypes<typeof infoRowProps>;
 
 export interface VcInfoRowSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-info-row/vc-info-row.vue

@@ -4,11 +4,20 @@
       <VcCol>
         <VcLabel>
           <span>{{ label }}</span>
-          <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+          <template
+            v-if="tooltip"
+            v-slot:tooltip
+            >{{ tooltip }}</template
+          >
         </VcLabel>
       </VcCol>
       <VcCol size="2">
-        <p class="tw-m-0" v-if="type === 'default'">{{ value }}</p>
+        <p
+          class="tw-m-0"
+          v-if="type === 'default'"
+        >
+          {{ value }}
+        </p>
         <VcLink v-else-if="type === 'email'">{{ value }}</VcLink>
       </VcCol>
     </VcRow>
@@ -17,12 +26,7 @@
 
 <script lang="ts" setup>
 import { VcLabel, VcRow, VcCol } from "./../../../components";
-import { VcInfoRowProps } from "./vc-info-row-model";
+import { infoRowProps } from "./vc-info-row-model";
 
-withDefaults(defineProps<VcInfoRowProps>(), {
-  label: "",
-  value: "",
-  tooltip: "",
-  type: "default",
-});
+defineProps(infoRowProps);
 </script>

package/ui/components/atoms/vc-label/index.ts

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcLabelProps } from "./vc-label-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Label from "./vc-label.vue";
-export const VcLabel: ComponentConstructor<
-  ComponentPublicInstance<VcLabelProps>
-> = Label;
+export const VcLabel: ComponentConstructor<ComponentPublicInstance<VcLabelProps>> = Label;

package/ui/components/atoms/vc-label/vc-label-model.ts

@@ -1,9 +1,18 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcLabelProps {
-  required?: boolean | undefined;
-  tooltipIcon?: string | undefined;
-}
+export const labelProps = {
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info-circle",
+  },
+};
+
+export type VcLabelProps = ExtractTypes<typeof labelProps>;
 
 export interface VcLabelSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-label/vc-label.vue

@@ -6,7 +6,10 @@
       class="tw-text-[color:var(--label-required-color)] tw-ml-1"
       >*</span
     >
-    <span v-if="$slots['tooltip']" class="tw-grow tw-basis-0 tw-ml-1">
+    <span
+      v-if="$slots['tooltip']"
+      class="tw-grow tw-basis-0 tw-ml-1"
+    >
       <VcIcon
         class="tw-text-[color:var(--label-tooltip-color)]"
         :icon="tooltipIcon"
@@ -27,12 +30,9 @@
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
 import { ref } from "vue";
-import { VcLabelProps } from "./vc-label-model";
+import { labelProps } from "./vc-label-model";
 
-withDefaults(defineProps<VcLabelProps>(), {
-  required: false,
-  tooltipIcon: "fas fa-info-circle",
-});
+defineProps(labelProps);
 
 const tooltipVisible = ref(false);
 </script>

package/ui/components/atoms/vc-link/index.ts

@@ -1,7 +1,6 @@
 import { ComponentPublicInstance } from "vue";
-import { VcLinkProps } from "./vc-link-model";
+import { VcLinkEmits, VcLinkProps } from "./vc-link-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Link from "./vc-link.vue";
-export const VcLink: ComponentConstructor<
-  ComponentPublicInstance<VcLinkProps>
-> = Link;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcLink: ComponentConstructor<ComponentPublicInstance<VcLinkProps, any, any, any, any, VcLinkEmits>> = Link;

package/ui/components/atoms/vc-link/vc-link-model.ts

@@ -1,10 +1,23 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcLinkProps {
-  active?: boolean | undefined;
-  disabled?: boolean | undefined;
-  onClick?: () => void;
-}
+export const linkProps = {
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const linkEmits = {
+  click: () => true,
+};
+
+export type VcLinkProps = ExtractTypes<typeof linkProps>;
+export type VcLinkEmits = typeof linkEmits;
 
 export interface VcLinkSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-link/vc-link.vue

@@ -13,13 +13,11 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLinkProps } from "./vc-link-model";
+import { linkEmits, linkProps } from "./vc-link-model";
+
+const props = defineProps(linkProps);
+const emit = defineEmits(linkEmits);
 
-const props = withDefaults(defineProps<VcLinkProps>(), {
-  active: false,
-  disabled: false,
-});
-const emit = defineEmits(["click"]);
 function onClick(): void {
   if (!props.disabled) {
     emit("click");

package/ui/components/atoms/vc-loading/index.ts

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcLoadingProps } from "./vc-loading-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Loading from "./vc-loading.vue";
-export const VcLoading: ComponentConstructor<
-  ComponentPublicInstance<VcLoadingProps>
-> = Loading;
+export const VcLoading: ComponentConstructor<ComponentPublicInstance<VcLoadingProps>> = Loading;

package/ui/components/atoms/vc-loading/vc-loading-model.ts

@@ -1,8 +1,14 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcLoadingProps {
-  active?: boolean | undefined;
-}
+export const loadingProps = {
+  active: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcLoadingProps = ExtractTypes<typeof loadingProps>;
 
 export interface VcLoadingSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-loading/vc-loading.vue

@@ -2,17 +2,14 @@
   <div
     class="tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-hidden tw-w-full tw-h-full tw-box-border"
     :class="{
-      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]':
-        active,
+      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]': active,
     }"
   >
     <div class="tw-relative tw-w-[142px] tw-h-[40px] tw-z-[1]">
       <span
         class="tw-absolute tw-w-4 tw-h-4 tw-top-[12px] tw-left-[15px] tw-bg-[#319ed4] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker"
       ></span>
-      <div
-        class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers"
-      >
+      <div class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers">
         <span
           class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
           v-for="item in 3"
@@ -24,9 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLoadingProps } from "./vc-loading-model";
+import { loadingProps } from "./vc-loading-model";
 
-withDefaults(defineProps<VcLoadingProps>(), {
-  active: false,
-});
+defineProps(loadingProps);
 </script>

package/ui/components/atoms/vc-progress/index.ts

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcProgressProps } from "./vc-progress-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Progress from "./vc-progress.vue";
-export const VcProgress: ComponentConstructor<
-  ComponentPublicInstance<VcProgressProps>
-> = Progress;
+export const VcProgress: ComponentConstructor<ComponentPublicInstance<VcProgressProps>> = Progress;

package/ui/components/atoms/vc-progress/vc-progress-model.ts

@@ -1,9 +1,18 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcProgressProps {
-  value?: number | undefined;
-  variant?: "default" | "striped" | undefined;
-}
+export const progressProps = {
+  value: {
+    type: Number,
+    default: 0,
+  },
+  variant: {
+    type: String as PropType<"default" | "striped">,
+    default: "default",
+  },
+};
+
+export type VcProgressProps = ExtractTypes<typeof progressProps>;
 
 export interface VcProgressSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-progress/vc-progress.vue

@@ -13,12 +13,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcProgressProps } from "./vc-progress-model";
+import { progressProps } from "./vc-progress-model";
 
-withDefaults(defineProps<VcProgressProps>(), {
-  value: 0,
-  variant: "default",
-});
+defineProps(progressProps);
 </script>
 
 <style lang="scss">
@@ -43,14 +40,8 @@ withDefaults(defineProps<VcProgressProps>(), {
 .vc-progress {
   &.striped {
     .vc-progress__value {
-      background: linear-gradient(
-            45deg,
-            transparent 50%,
-            #acd2f2 50%,
-            #acd2f2 75%,
-            transparent 75%
-          )
-          left/30px 30px repeat-x,
+      background: linear-gradient(45deg, transparent 50%, #acd2f2 50%, #acd2f2 75%, transparent 75%) left/30px 30px
+          repeat-x,
         #e1f0fe;
       animation: change 1s linear infinite;
     }

package/ui/components/atoms/vc-status/index.ts

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcStatusProps } from "./vc-status-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Status from "./vc-status.vue";
-export const VcStatus: ComponentConstructor<
-    ComponentPublicInstance<VcStatusProps>
-> = Status;
+export const VcStatus: ComponentConstructor<ComponentPublicInstance<VcStatusProps>> = Status;

package/ui/components/atoms/vc-status/vc-status-model.ts

@@ -1,16 +1,22 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcStatusProps {
-  variant?:
-    | "info"
-    | "warning"
-    | "danger"
-    | "success"
-    | "light-danger"
-    | undefined;
-  outline?: boolean | undefined;
-  extend?: boolean | undefined;
-}
+export const statusProps = {
+  variant: {
+    type: String as PropType<"info" | "warning" | "danger" | "success" | "light-danger">,
+    default: "info",
+  },
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+  extend: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcStatusProps = ExtractTypes<typeof statusProps>;
 
 export interface VcStatusSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-status/vc-status.vue

@@ -1,24 +1,16 @@
 <template>
   <div
     class="vc-status"
-    :class="[
-      `vc-status_${variant}`,
-      { 'vc-status_outline': outline },
-      { 'vc-status_extended': extend },
-    ]"
+    :class="[`vc-status_${variant}`, { 'vc-status_outline': outline }, { 'vc-status_extended': extend }]"
   >
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcStatusProps } from "./vc-status-model";
+import { statusProps } from "./vc-status-model";
 
-withDefaults(defineProps<VcStatusProps>(), {
-  variant: "info",
-  outline: true,
-  extend: false,
-});
+defineProps(statusProps);
 </script>
 
 <style lang="scss">