@vc-shell/framework 1.0.215 → 1.0.216

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";

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

@@ -0,0 +1,97 @@
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcRadioButton } from "./";
+import { ref } from "vue";
+
+export default {
+  title: "molecules/VcRadioButton",
+  component: VcRadioButton,
+  args: {
+    modelValue: "Product 1",
+    label: "Product 1",
+    value: "Product 1",
+  },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "any",
+        },
+      },
+    },
+    value: {
+      control: "text",
+      table: {
+        type: {
+          summary: "any",
+        },
+      },
+    },
+    binary: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    name: {
+      control: "text",
+    },
+    error: {
+      control: "boolean",
+    },
+    errorMessage: {
+      control: "text",
+    },
+    label: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcRadioButton>;
+
+export const Template: StoryFn<typeof VcRadioButton> = (args) => ({
+  components: { VcRadioButton },
+  setup() {
+    return { args };
+  },
+  template: '<vc-radio-button v-bind="args">{{args.default}}</vc-radio-button>',
+});
+
+export const Group: StoryFn<typeof VcRadioButton> = (args) => ({
+  components: { VcRadioButton },
+  setup() {
+    const products = ref([
+      { id: 1, name: "Product 1" },
+      { id: 2, name: "Product 2" },
+      { id: 3, name: "Product 3" },
+    ]);
+    const selectedProduct = ref("Product 1");
+    return { args, products, selectedProduct };
+  },
+  template: `
+  <div v-for="product in products" :key="product.id" class="tw-pb-1">
+    <vc-radio-button v-model="selectedProduct" :value="product.name" :label="product.name" />
+  </div>`,
+});
+
+export const StringGroup: StoryFn<typeof VcRadioButton> = (args) => ({
+  components: { VcRadioButton },
+  setup() {
+    const products = ref(["Product 1", "Product 2", "Product 3"]);
+    const selectedProduct = ref("Product 1");
+
+    return { args, products, selectedProduct };
+  },
+  template: `
+  <div v-for="product in products" :key="product" class="tw-pb-1">
+    <vc-radio-button v-model="selectedProduct" :value="product" :label="product" />
+  </div>`,
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Error = Template.bind({});
+Error.args = { errorMessage: "This is an error message", error: true, modelValue: null };
+
+export const Label = Template.bind({});
+Label.args = { label: "Radio button label" };