@vc-shell/framework 1.0.52 → 1.0.54

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

@@ -18,54 +18,25 @@
       :icon="icon"
       :size="small ? 'xs' : 's'"
     ></VcIcon>
-    <span v-if="$slots['default']" class="vc-button__title">
+    <span
+      v-if="$slots['default']"
+      class="vc-button__title"
+    >
       <slot></slot>
     </span>
   </button>
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/ui/components";
-
-const props = defineProps({
-  icon: {
-    type: String,
-    default: undefined,
-  },
-
-  variant: {
-    type: String,
-    enum: ["primary", "secondary", "special", "danger", "widget", "onlytext"],
-    default: "primary",
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  small: {
-    type: Boolean,
-    default: false,
-  },
-
-  outline: {
-    type: Boolean,
-    default: false,
-  },
-
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["click"]);
+import { VcIcon } from "./../../../components";
+import { buttonProps, buttonEmits } from "./vc-button-model";
 
+const props = defineProps(buttonProps);
+const emit = defineEmits(buttonEmits);
 function onClick(e: Event): void {
   if (!props.disabled) {
     e.preventDefault();
-    emit("click", e);
+    emit("click");
   }
 }
 </script>

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

@@ -0,0 +1,6 @@
+import { ComponentPublicInstance } from "vue";
+import { VcCardEmits, VcCardProps } from "./vc-card-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Card from "./vc-card.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcCard: ComponentConstructor<ComponentPublicInstance<VcCardProps, any, any, any, any, VcCardEmits>> = Card;

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

@@ -0,0 +1,37 @@
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isBoolean } from "./../../../utils";
+
+export const cardProps = {
+  header: String,
+  icon: String,
+  isCollapsable: {
+    type: Boolean,
+    default: false,
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String as PropType<"default" | "success" | "danger">,
+    default: "default",
+  },
+};
+
+export const cardEmits = {
+  "header:click": () => true,
+  "state:collapsed": (isCollapsedState: boolean) => isBoolean(isCollapsedState),
+};
+
+export type VcCardProps = ExtractTypes<typeof cardProps>;
+export type VcCardEmits = typeof cardEmits;
+
+export interface VcCardSlots {
+  default: () => VNode[];
+  actions: () => VNode[];
+}

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

@@ -3,10 +3,22 @@
     class="vc-card"
     :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
   >
-    <div class="vc-card__header" v-if="header" @click="onHeaderClick">
-      <VcIcon v-if="icon" class="vc-card__icon" :icon="icon" size="xl"></VcIcon>
+    <div
+      class="vc-card__header"
+      v-if="header"
+      @click="onHeaderClick"
+    >
+      <VcIcon
+        v-if="icon"
+        class="vc-card__icon"
+        :icon="icon"
+        size="xl"
+      ></VcIcon>
       <div class="vc-card__title">{{ header }}</div>
-      <div v-if="$slots['actions']" class="vc-card__actions">
+      <div
+        v-if="$slots['actions']"
+        class="vc-card__actions"
+      >
         <slot name="actions"></slot>
       </div>
       <VcIcon
@@ -29,39 +41,11 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-const props = defineProps({
-  header: {
-    type: String,
-    default: undefined,
-  },
-
-  icon: {
-    type: String,
-    default: undefined,
-  },
-
-  isCollapsable: {
-    type: Boolean,
-    default: false,
-  },
-
-  isCollapsed: {
-    type: Boolean,
-    default: false,
-  },
-
-  fill: {
-    type: Boolean,
-    default: false,
-  },
-
-  variant: {
-    type: String,
-    enum: ["default", "success", "danger"],
-    default: "default",
-  },
-});
-const emit = defineEmits(["header:click", "state:collapsed"]);
+import { cardProps, cardEmits } from "./vc-card-model";
+
+const props = defineProps(cardProps);
+
+const emit = defineEmits(cardEmits);
 const isCollapsedInternal = ref(props.isCollapsed);
 
 function onHeaderClick() {

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

@@ -0,0 +1,8 @@
+import { ComponentPublicInstance } from "vue";
+import { VcCheckboxEmits, VcCheckboxProps } from "./vc-checkbox-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Checkbox from "./vc-checkbox.vue";
+export const VcCheckbox: ComponentConstructor<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcCheckboxProps, any, any, any, any, VcCheckboxEmits>
+> = Checkbox;

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

@@ -0,0 +1,35 @@
+import { VNode } from "vue";
+import { isBoolean } from "./../../../utils";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const checkboxProps = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: "Field",
+  },
+  errorMessage: String,
+};
+
+export const checkboxEmits = {
+  "update:modelValue": (value: boolean) => isBoolean(value),
+};
+
+export type VcCheckboxProps = ExtractTypes<typeof checkboxProps>;
+export type VcCheckboxEmits = typeof checkboxEmits;
+
+export interface VcCheckboxSlots {
+  default: () => VNode[];
+  error: () => VNode[];
+}

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="vc-checkbox" :class="{ 'vc-checkbox_disabled': disabled }">
+  <div
+    class="vc-checkbox"
+    :class="{ 'vc-checkbox_disabled': disabled }"
+  >
     <label class="vc-checkbox__label">
       <input
         type="checkbox"
@@ -9,7 +12,10 @@
         @change="onChange"
       />
       <span class="vc-checkbox__checkmark"></span>
-      <span v-if="$slots['default']" class="tw-ml-2">
+      <span
+        v-if="$slots['default']"
+        class="tw-ml-2"
+      >
         <slot></slot>
       </span>
       <span
@@ -19,7 +25,10 @@
       >
     </label>
 
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-checkbox__error tw-mt-1">
         {{ errorMessage }}
       </VcHint>
@@ -29,34 +38,10 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
+import { checkboxProps, checkboxEmits } from "./vc-checkbox-model";
 
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  name: {
-    type: String,
-    default: "Field",
-  },
-
-  errorMessage: {
-    type: String,
-    default: undefined
-  }
-});
-const emit = defineEmits(["update:modelValue"]);
+const props = defineProps(checkboxProps);
+const emit = defineEmits(checkboxEmits);
 
 watch(
   () => props.modelValue,

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcColProps } from "./vc-col-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Col from "./vc-col.vue";
+export const VcCol: ComponentConstructor<ComponentPublicInstance<VcColProps>> = Col;

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

@@ -0,0 +1,15 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const colProps = {
+  size: {
+    type: String,
+    default: "1",
+  },
+};
+
+export type VcColProps = ExtractTypes<typeof colProps>;
+
+export interface VcColSlots {
+  default: () => VNode[];
+}

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

@@ -8,13 +8,9 @@
 </template>
 
 <script lang="ts" setup>
-export interface Props {
-  size: string;
-}
+import { colProps } from "./vc-col-model";
 
-withDefaults(defineProps<Props>(), {
-  size: "1",
-});
+defineProps(colProps);
 </script>
 
 <style lang="scss">

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

@@ -0,0 +1,8 @@
+import { ComponentPublicInstance } from "vue";
+import { VcContainerEmits, VcContainerProps } from "./vc-container-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Container from "./vc-container.vue";
+export const VcContainer: ComponentConstructor<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcContainerProps, any, any, any, any, VcContainerEmits>
+> = Container;

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

@@ -0,0 +1,28 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const containerProps = {
+  shadow: {
+    type: Boolean,
+    default: false,
+  },
+  noPadding: {
+    type: Boolean,
+    default: false,
+  },
+  usePtr: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const containerEmits = {
+  "scroll:ptr": () => true,
+};
+
+export type VcContainerProps = ExtractTypes<typeof containerProps>;
+export type VcContainerEmits = typeof containerEmits;
+
+export interface VcContainerSlots {
+  default: () => VNode[];
+}

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

@@ -36,23 +36,12 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick } from "vue";
-const props = defineProps({
-  shadow: {
-    type: Boolean,
-    default: false,
-  },
-
-  noPadding: {
-    type: Boolean,
-    default: false,
-  },
-
-  usePtr: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["scroll:ptr", "scroll:infinite"]);
+import { containerProps, containerEmits } from "./vc-container-model";
+
+const props = defineProps(containerProps);
+
+const emit = defineEmits(containerEmits);
+
 const component = ref<HTMLElement>();
 const scroll = ref(false);
 const startY = ref(0);
@@ -64,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) {
@@ -73,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) {
@@ -160,8 +146,8 @@ function ease(distance: number) {
 }
 
 defineExpose({
-    scrollTop,
-    component,
+  scrollTop,
+  component,
 });
 </script>
 
@@ -171,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/index.ts

@@ -0,0 +1,2 @@
+import Hint from "./vc-hint.vue";
+export const VcHint = Hint;

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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1,19 @@
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+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[];
+}

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

@@ -3,15 +3,9 @@
 </template>
 
 <script lang="ts" setup>
-export interface Props {
-  icon?: string;
-  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl";
-}
+import { iconProps } from "./vc-icon-model";
 
-withDefaults(defineProps<Props>(), {
-  icon: "fas fa-square-full",
-  size: "m",
-});
+defineProps(iconProps);
 </script>
 
 <style lang="scss">

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcImageEmits, VcImageProps } from "./vc-image-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Image from "./vc-image.vue";
+// 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

@@ -0,0 +1,41 @@
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+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,5 +1,8 @@
 <template>
-  <div class="vc-image" :class="[`vc-image_${size}`]">
+  <div
+    class="vc-image"
+    :class="[`vc-image_${size}`]"
+  >
     <div
       :class="[
         `vc-image_${aspect}`,
@@ -17,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>
@@ -25,51 +31,15 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import { imageProps, imageEmits } from "./vc-image-model";
 
-const props = defineProps({
-  aspect: {
-    type: String,
-    default: "1x1",
-  },
+const props = defineProps(imageProps);
 
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-
-  clickable: {
-    type: Boolean,
-    default: false,
-  },
-
-  src: {
-    type: String,
-    default: undefined,
-  },
-
-  size: {
-    type: String,
-    default: "auto",
-  },
-
-  background: {
-    type: String,
-    default: "cover",
-  },
-});
-
-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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1,27 @@
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+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[];
+}