@vc-shell/framework 1.0.214 → 1.0.216

package/shared/modules/dynamic/types/index.ts

@@ -770,6 +770,33 @@ export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "plac
   falseValue?: boolean;
 }
 
+export interface RadioButtonSchema extends Omit<SchemaBase, "multilanguage" | "placeholder"> {
+  /**
+   * Component type for radio button.
+   * @type {"vc-radio-button-group"}
+   */
+  component: "vc-radio-button-group";
+  /**
+   * Allows to select a boolean value.
+   */
+  binary?: boolean;
+  /**
+   * List of options to be displayed as radio-buttons.
+   * @description Array of should be defined in the blade `scope`.
+   */
+  options: string;
+  /**
+   * Name of property that holds radio button value.
+   * @type {string}
+   */
+  optionValue?: string;
+  /**
+   * Name of property that holds radio button label.
+   * @type {string}
+   */
+  optionLabel?: string;
+}
+
 /**
  * Fieldset schema interface.
  * @interface
@@ -963,13 +990,17 @@ export type ControlSchema =
   | SwitchSchema
   | TableSchema
   | CustomComponentSchema
-  | RatingSchema;
+  | RatingSchema
+  | RadioButtonSchema;
 
 export interface FilterBase {
   columns: {
-    title: string;
+    /**
+     * @deprecated use 'label' in 'controls' instead
+     */
+    title?: string;
     id: string;
-    controls: (FilterCheckbox | FilterDateInput)[];
+    controls: (FilterCheckbox | FilterDateInput | FilterSwitch | FilterSelect | FilterRadio)[];
   }[];
 }
 
@@ -977,6 +1008,8 @@ export type FilterCheckbox = {
   id: string;
   field: string;
   multiple?: boolean;
+  label?: string;
+  tooltip?: string;
   data: string;
   optionValue: string;
   optionLabel: string;
@@ -987,9 +1020,45 @@ export type FilterDateInput = {
   id: string;
   field: string;
   label?: string;
+  tooltip?: string;
   component: InputSchema["component"];
 };
 
+export type FilterSwitch = {
+  id: string;
+  field: string;
+  data: string;
+  label?: string;
+  tooltip?: string;
+  multiple?: boolean;
+  optionValue: string;
+  optionLabel: string;
+  component: SwitchSchema["component"];
+};
+
+export type FilterSelect = {
+  id: string;
+  field: string;
+  label?: string;
+  tooltip?: string;
+  data: string;
+  multiple?: boolean;
+  component: SelectSchema["component"];
+  optionValue: string;
+  optionLabel: string;
+};
+
+export type FilterRadio = {
+  id: string;
+  field: string;
+  label?: string;
+  tooltip?: string;
+  data: string;
+  optionValue: string;
+  optionLabel: string;
+  component: RadioButtonSchema["component"];
+};
+
 export type FilterSchema = FilterBase;
 
 export interface OverridesSchema {

package/shared/modules/dynamic/types/models.ts

@@ -19,6 +19,7 @@ import {
   VcSwitch,
   VcTable,
   VcRating,
+  VcRadioButton,
 } from "../../../../ui/components";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -134,6 +135,10 @@ export type ICheckbox = {
   slots?: Partial<Pick<ComponentSlots<typeof VcCheckbox>, "default" | "error">>;
 } & FieldOpts<typeof VcCheckbox>;
 
+export type IRadioButton = {
+  props: ComponentProps<typeof VcRadioButton> | IControlBaseProps;
+} & FieldOpts<typeof VcRadioButton>;
+
 export type IDynamicProperties = {
   props:
     | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)

package/ui/components/atoms/index.ts

@@ -1,7 +1,6 @@
 export * from "./vc-badge";
 export * from "./vc-button";
 export * from "./vc-card";
-export * from "./vc-checkbox";
 export * from "./vc-col";
 export * from "./vc-container";
 export * from "./vc-hint";

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

@@ -27,7 +27,7 @@
           v-if="tooltipVisible"
           ref="tooltipRef"
           :style="floatingStyles"
-          class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
+          class="tw-absolute tw-z-[101] tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
         >
           <slot name="tooltip"></slot>
         </span>

package/ui/components/molecules/index.ts

@@ -12,3 +12,5 @@ export * from "./vc-slider";
 export * from "./vc-textarea";
 export * from "./vc-multivalue";
 export * from "./vc-field";
+export * from "./vc-radio-button";
+export * from "./vc-checkbox";

package/ui/components/{atoms → molecules}/vc-checkbox/vc-checkbox.stories.ts

@@ -1,9 +1,9 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcCheckbox } from "./";
-import { VcLabel } from "../vc-label";
+import { VcLabel } from "../../atoms/vc-label";
 
 export default {
-  title: "atoms/VcCheckbox",
+  title: "molecules/VcCheckbox",
   component: VcCheckbox,
   args: {
     modelValue: true,
@@ -66,7 +66,7 @@ export const Required = Template.bind({});
 Required.args = { required: true };
 
 export const Error = Template.bind({});
-Error.args = { errorMessage: "This is an error message" };
+Error.args = { errorMessage: "This is an error message", modelValue: false };
 
 export const Tooltip = Template.bind({});
 Tooltip.args = { tooltip: "This is a tooltip" };

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

@@ -0,0 +1,204 @@
+<template>
+  <div
+    class="vc-checkbox"
+    :class="{ 'vc-checkbox_disabled': disabled }"
+  >
+    <!-- Input label -->
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
+      <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        #tooltip
+        >{{ tooltip }}</template
+      >
+    </VcLabel>
+    <label class="tw-inline-flex tw-select-none tw-cursor-pointer tw-text-base tw-items-center">
+      <input
+        v-model="value"
+        type="checkbox"
+        class="vc-checkbox__input"
+        :disabled="disabled"
+        :true-value="trueValue"
+        :false-value="falseValue"
+        :class="{
+          'vc-checkbox_error': errorMessage,
+        }"
+      />
+      <span
+        v-if="$slots['default']"
+        class="tw-ml-2"
+      >
+        <slot></slot>
+      </span>
+      <span
+        v-if="!label && required"
+        class="tw-text-[color:var(--checkbox-required-color)] tw-ml-1"
+        >*</span
+      >
+    </label>
+
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
+      <VcHint class="vc-checkbox__error tw-mt-1">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { MaybeRef, computed, unref } from "vue";
+import { VcHint } from "./../../atoms/vc-hint";
+import { VcLabel } from "../../atoms/vc-label";
+export interface Props {
+  modelValue: MaybeRef<boolean>;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  errorMessage?: string;
+  trueValue?: boolean;
+  falseValue?: boolean;
+  label?: string;
+  tooltip?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), { name: "Field", trueValue: true, falseValue: false });
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  default: (props: any) => any;
+  error: (props: any) => any;
+}>();
+
+const value = computed({
+  get() {
+    return unref(props.modelValue);
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+</script>
+
+<style lang="scss">
+:root {
+  --checkbox-size: 14px;
+  --checkbox-border-radius: 2px;
+  --checkbox-background-color: #ffffff;
+  --checkbox-color-error: #f14e4e;
+  --checkbox-required-color: #f14e4e;
+
+  --checkbox-active: #43b0e6;
+  --checkbox-active-inner: #fff;
+  --checkbox-focus: 2px rgba(39, 94, 254, 0.3);
+  --checkbox-border: #bbc1e1;
+  --checkbox-border-hover: #43b0e6;
+  --checkbox-background: #fff;
+  --checkbox-disabled: #f6f8ff;
+  --checkbox-disabled-inner: #e1e6f9;
+  --checkbox-error: #f14e4e;
+}
+
+.vc-checkbox {
+  input[type="checkbox"] {
+    border-radius: 2px;
+    appearance: none;
+    height: var(--checkbox-size);
+    outline: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    border: 1px solid var(--checkbox-border-color, var(--checkbox-border));
+    background: var(--checkbox-bg, var(--checkbox-background));
+    width: var(--checkbox-size);
+    border-radius: 3px;
+    transition:
+      background 0.3s,
+      border-color 0.3s,
+      box-shadow 0.2s;
+
+    &:checked {
+      --checkbox-bg: var(--checkbox-active);
+      --checkbox-border-color: var(--checkbox-active);
+      --checkbox-after-opacity-duration: 0.3s;
+      --checkbox-after-transform-duration: 0.6s;
+      --checkbox-after-transform-ease: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+      --checkbox-scale: 0.5;
+      --checkbox-after-opacity: 1;
+      --r: 43deg;
+    }
+
+    &:disabled {
+      --checkbox-bg: var(--checkbox-disabled);
+      cursor: not-allowed;
+      opacity: 0.9;
+      &:checked {
+        --checkbox-bg: var(--checkbox-disabled-inner);
+        --checkbox-border-color: var(--checkbox-border);
+      }
+      & + label {
+        cursor: not-allowed;
+      }
+    }
+
+    &:hover {
+      &:not(:checked) {
+        &:not(:disabled) {
+          --checkbox-border-color: var(--checkbox-border-hover);
+        }
+      }
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 5px;
+      height: 9px;
+      border: 2px solid var(--checkbox-background);
+      border-top: 0;
+      border-left: 0;
+      left: 4px;
+      top: 1px;
+      transform: rotate(var(--r, 20deg));
+      opacity: var(--checkbox-after-opacity, 0);
+      transition:
+        transform var(--checkbox-after-transform-duration, 0.3s) var(--checkbox-after-transform-ease, ease),
+        opacity var(--checkbox-after-opacity-duration, 0.2s);
+    }
+
+    & + label {
+      font-size: 14px;
+      line-height: 21px;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 4px;
+    }
+
+    &.vc-checkbox_error {
+      --checkbox-border-color: var(--checkbox-error);
+    }
+  }
+
+  &_disabled &__label {
+    cursor: auto;
+  }
+
+  &__error {
+    --hint-color: var(--checkbox-error);
+  }
+}
+</style>

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -74,7 +74,7 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   variant: "gallery",
-  accept: ".jpg, .png, .jpeg, .webp, .heic",
+  accept: ".jpg, .png, .jpeg, .webp, .heic, .svg",
   name: "Gallery",
   icon: "fas fa-cloud-upload-alt",
 });

package/ui/components/molecules/vc-input/vc-input.vue

@@ -58,19 +58,55 @@
                   :emit-value="emitValue"
                   :placeholder="placeholder"
                 >
-                  <input
-                    ref="inputRef"
-                    v-model="handleValue"
-                    :placeholder="placeholder"
-                    :type="internalTypeComputed"
-                    :disabled="disabled"
-                    :name="name"
-                    :maxlength="maxlength"
-                    :autofocus="autofocus"
-                    :max="maxDate"
-                    class="vc-input__input"
-                    @keydown="onKeyDown"
-                  />
+                  <template v-if="type === 'datetime-local' || type === 'date'">
+                    <VueDatePicker
+                      v-model="handleValue"
+                      :placeholder="
+                        placeholder || type === 'datetime-local'
+                          ? $t('COMPONENTS.MOLECULES.VC_INPUT.DATE_TIME_PLACEHOLDER')
+                          : $t('COMPONENTS.MOLECULES.VC_INPUT.DATE_PLACEHOLDER')
+                      "
+                      :disabled="disabled"
+                      :name="name"
+                      :maxlength="maxlength"
+                      :autofocus="autofocus"
+                      :max-date="maxDate"
+                      time-picker-inline
+                      :enable-time-picker="type === 'datetime-local'"
+                      :format="formatDateWithLocale"
+                      :locale="locale"
+                      :start-time="{
+                        hours: 0,
+                        minutes: 0,
+                      }"
+                      :clearable="false"
+                      :config="{
+                        closeOnAutoApply: false,
+                      }"
+                      auto-apply
+                      :teleport-center="$isMobile.value"
+                      :is24="isBrowserLocale24h"
+                      v-bind="datePickerOptions"
+                      :teleport="$isDesktop.value ? 'body' : undefined"
+                      class="vc-input__input"
+                      @keydown="onKeyDown"
+                    ></VueDatePicker>
+                  </template>
+                  <template v-else>
+                    <input
+                      ref="inputRef"
+                      v-model="handleValue"
+                      :placeholder="placeholder"
+                      :type="internalTypeComputed"
+                      :disabled="disabled"
+                      :name="name"
+                      :maxlength="maxlength"
+                      :autofocus="autofocus"
+                      :max="maxDate"
+                      class="vc-input__input"
+                      @keydown="onKeyDown"
+                    />
+                  </template>
                 </slot>
                 <div
                   v-if="suffix"
@@ -173,6 +209,10 @@
 import { computed, ref, unref, watch } from "vue";
 import { VcLabel, VcIcon, VcHint } from "./../../";
 import moment from "moment";
+import VueDatePicker, { VueDatePickerProps } from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import * as Locales from "date-fns/locale";
+import { Locale } from "date-fns";
 
 export interface Props {
   /**
@@ -262,6 +302,14 @@ export interface Props {
    * Input current language
    */
   currentLanguage?: string;
+  /**
+   * VueDatePicker options
+   *
+   * Used only when type is 'date' or 'datetime-local'
+   *
+   * @see https://vue3datepicker.com/
+   */
+  datePickerOptions?: VueDatePickerProps;
 }
 
 export interface Emits {
@@ -338,7 +386,7 @@ let emitTimer: NodeJS.Timeout;
 let emitValueFn;
 const temp = ref();
 const inputRef = ref();
-
+const locale = window.navigator.language;
 const internalType = ref(unref(props.type));
 
 const internalTypeComputed = computed({
@@ -370,13 +418,7 @@ const mutatedModel = ref();
 watch(
   rawModel,
   (newVal) => {
-    if (props.type === "datetime-local" || props.type === "date") {
-      if (newVal instanceof Date && !isNaN(newVal.valueOf())) {
-        mutatedModel.value = moment(newVal).format(props.type === "datetime-local" ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD");
-      } else if (typeof newVal === "string") {
-        mutatedModel.value = new Date(newVal).toISOString().slice(0, props.type === "datetime-local" ? 16 : 10);
-      }
-    } else if (props.type === "number" && newVal !== null) {
+    if (props.type === "number" && newVal !== null) {
       mutatedModel.value = parseFloat(newVal as string);
     } else if (props.type === "integer" && newVal !== null) {
       mutatedModel.value = Math.trunc(newVal as number);
@@ -391,6 +433,27 @@ watch(
   { immediate: true },
 );
 
+const isBrowserLocale24h = (() => {
+  const hr = new Intl.DateTimeFormat(locale, { hour: "numeric" }).format();
+  return Number.isInteger(Number(hr));
+})();
+
+const formatDateWithLocale: (date: Date) => string = (date) => {
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+  };
+
+  if (props.type === "datetime-local") {
+    options.hour = "numeric";
+    options.minute = "numeric";
+    options.hour12 = !isBrowserLocale24h;
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+
 function onKeyDown(e: KeyboardEvent) {
   const allowedKeys = ["Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
   const keypressed = e.key;
@@ -411,9 +474,7 @@ function emitValue(val: string | number | Date | null) {
   emitValueFn = () => {
     if (mutatedModel.value !== val) {
       let value;
-      if (internalTypeComputed.value === "datetime-local" || internalTypeComputed.value === "date") {
-        value = val ? moment(val).toDate() : undefined;
-      } else if (props.type === "number" && val !== null) {
+      if (props.type === "number" && val !== null) {
         value = parseFloat(val as string);
       } else if (props.type === "integer" && val !== null) {
         value = Math.trunc(parseInt(val as string));
@@ -451,6 +512,10 @@ function onReset() {
   --input-placeholder-color: #a5a5a5;
   --input-clear-color: #43b0e6;
   --input-clear-color-hover: #319ed4;
+  --dp-input-padding: 10px 0px 10px 10px;
+  --dp-input-icon-padding: 25px;
+  --dp-font-size: 13px;
+  --dp-font-family: "Roboto", sans-serif;
 }
 
 .vc-input {
@@ -531,20 +596,44 @@ function onReset() {
   &_disabled &__field {
     @apply tw-bg-[#fafafa] tw-text-[#424242];
   }
+
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: all 0.25s ease-out;
+  }
+
+  .slide-up-enter-from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+
+  .slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+}
+
+.dp__pm_am_button {
+  background: var(--dp-primary-color) !important;
+  color: var(--dp-primary-text-color) !important;
+  border: none !important;
+  padding: var(--dp-common-padding) !important;
+  border-radius: var(--dp-border-radius) !important;
+  cursor: pointer !important;
 }
 
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.25s ease-out;
+.dp__input_icons {
+  padding: 6px 0 !important;
 }
 
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(5px);
+.dp__input {
+  &::-ms-reveal,
+  &::-ms-clear {
+    @apply tw-hidden;
+  }
 }
 
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-5px);
+input.dp__input::placeholder {
+  color: #818181 !important;
 }
 </style>

package/ui/components/molecules/vc-radio-button/index.ts

@@ -0,0 +1 @@
+export { default as VcRadioButton } from "./vc-radio-button.vue";