vueless 0.0.2 → 0.0.3

package/ui.form-color-picker/index.vue

@@ -1,350 +1,168 @@
 <template>
-  <div class="mono-colorpicker">
-    <div class="mono-colorpicker-title">{{ title }}:</div>
-
-    <div class="mono-colorpicker-wrapper">
-      <t-radio
-        v-for="(color, index) in colorOptions"
-        :key="index"
-        v-model="selectedItem"
-        class="mono-colorpicker-radio"
-        :class="setRadioColor(color)"
-        name="colorPicker"
-        :value="color"
-        :disabled="disabled"
-      />
-    </div>
+  <div v-bind="wrapperAttrs">
+    <ULabel
+      :label="label"
+      :description="description"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      placement="topWithDesc"
+      :data-cy="dataCy"
+      v-bind="labelAttrs"
+    >
+      <div v-bind="listAttrs">
+        <div v-bind="uncoloredAttrs">
+          <URadio
+            key="uncolored"
+            name="uncolored"
+            :checked="selectedItem === ''"
+            :disabled="disabled"
+            :size="size"
+            color="grayscale"
+            v-bind="uncoloredRadioAttrs"
+            @update:value="onInputRadio('')"
+          />
+
+          <UIcon
+            v-if="selectedItem === ''"
+            :name="config.iconName"
+            color="gray"
+            v-bind="iconAttrs"
+            size="sm"
+          />
+        </div>
+
+        <URadio
+          v-for="(color, index) in colorOptions"
+          :key="index"
+          :name="name"
+          :value="color"
+          :checked="selectedItem === color"
+          :color="color"
+          :disabled="disabled"
+          :size="size"
+          v-bind="radioAttrs"
+          @update:value="onInputRadio(color)"
+        />
+      </div>
+    </ULabel>
   </div>
 </template>
 
-<script>
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
-
-export default {
-  name: "UColorPicker",
-
-  components: { TRadio },
+<script setup>
+import { computed } from "vue";
 
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
+import UIService, { getRandomId } from "vueless/service.ui";
 
-    title: {
-      type: String,
-      default: "",
-    },
+import { UColorPicker } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-    colorOptions: {
-      type: Array,
-      default: () => [
-        "red",
-        "orange",
-        "yellow",
-        "green",
-        "blue",
-        "fuchsia",
-        "violet",
-        "gray",
-        "black",
-        "white",
-      ],
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UColorPicker", inheritAttrs: false });
 
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  /**
+   * Color picker selected value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
   },
 
-  emits: ["update:modelValue"],
-
-  computed: {
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
+  /**
+   * Color picker colors.
+   */
+  colorOptions: {
+    type: Array,
+    default: () => UIService.get(defaultConfig, UColorPicker).default.colorOptions,
   },
 
-  methods: {
-    setRadioColor(color) {
-      return `mono-colorpicker-radio-${color}`;
-    },
+  /**
+   * Color picker label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-colorpicker {
-  &-title {
-    @apply text-sm font-normal text-gray-500;
-  }
-
-  &-wrapper {
-    @apply !mt-4 gap-4 flex flex-wrap;
-  }
-
-  &-radio {
-    @apply h-6 w-6;
-    @apply cursor-pointer;
-
-    &-red {
-      @apply border-red-500 bg-red-500;
-
-      &:hover {
-        @apply border-red-500;
-      }
-
-      &:active {
-        @apply border-red-500 bg-red-500;
-      }
-
-      &:focus {
-        @apply border-red-500 !bg-red-500 ring-4 ring-red-200;
-      }
-
-      &:checked {
-        @apply border-red-500 bg-red-500;
-
-        &:hover {
-          @apply bg-red-500;
-        }
-      }
-    }
-
-    &-orange {
-      @apply border-orange-500 bg-orange-500;
-
-      &:hover {
-        @apply border-orange-500;
-      }
-
-      &:active {
-        @apply border-orange-500 bg-orange-500;
-      }
-
-      &:focus {
-        @apply border-orange-500 !bg-orange-500 ring-4 ring-orange-200;
-      }
-
-      &:checked {
-        @apply border-orange-500 bg-orange-500;
-
-        &:hover {
-          @apply bg-orange-500;
-        }
-      }
-    }
-
-    &-yellow {
-      @apply border-yellow-500 bg-yellow-500;
-
-      &:hover {
-        @apply border-yellow-500;
-      }
-
-      &:active {
-        @apply border-yellow-500 bg-yellow-500;
-      }
-
-      &:focus {
-        @apply border-yellow-500 !bg-yellow-500 ring-4 ring-yellow-200;
-      }
-
-      &:checked {
-        @apply border-yellow-500 bg-yellow-500;
-
-        &:hover {
-          @apply bg-yellow-500;
-        }
-      }
-    }
-
-    &-green {
-      @apply border-green-500 bg-green-500;
-
-      &:hover {
-        @apply border-green-500;
-      }
-
-      &:active {
-        @apply border-green-500 bg-green-500;
-      }
-
-      &:focus {
-        @apply border-green-500 !bg-green-500 ring-4 ring-green-200;
-      }
-
-      &:checked {
-        @apply border-green-500 bg-green-500;
-
-        &:hover {
-          @apply bg-green-500;
-        }
-      }
-    }
-
-    &-blue {
-      @apply border-blue-500 bg-blue-500;
-
-      &:hover {
-        @apply border-blue-500;
-      }
-
-      &:active {
-        @apply border-blue-500 bg-blue-500;
-      }
-
-      &:focus {
-        @apply border-blue-500 !bg-blue-500 ring-4 ring-blue-200;
-      }
 
-      &:checked {
-        @apply border-blue-500 bg-blue-500;
-
-        &:hover {
-          @apply bg-blue-500;
-        }
-      }
-    }
-
-    &-fuchsia {
-      @apply border-fuchsia-500 bg-fuchsia-500;
-
-      &:hover {
-        @apply border-fuchsia-500;
-      }
-
-      &:active {
-        @apply border-fuchsia-500 bg-fuchsia-500;
-      }
-
-      &:focus {
-        @apply border-fuchsia-500 !bg-fuchsia-500 ring-4 ring-fuchsia-200;
-      }
-
-      &:checked {
-        @apply border-fuchsia-500 bg-fuchsia-500;
-
-        &:hover {
-          @apply bg-fuchsia-500;
-        }
-      }
-    }
-
-    &-violet {
-      @apply border-violet-500 bg-violet-500;
-
-      &:hover {
-        @apply border-violet-500;
-      }
-
-      &:active {
-        @apply border-violet-500 bg-violet-500;
-      }
-
-      &:focus {
-        @apply border-violet-500 !bg-violet-500 ring-4 ring-violet-200;
-      }
-
-      &:checked {
-        @apply border-violet-500 bg-violet-500;
-
-        &:hover {
-          @apply bg-violet-500;
-        }
-      }
-    }
-
-    &-gray {
-      @apply border-gray-500 bg-gray-500;
-
-      &:hover {
-        @apply border-gray-500;
-      }
-
-      &:active {
-        @apply border-gray-500 bg-gray-500;
-      }
-
-      &:focus {
-        @apply border-gray-500 !bg-gray-500 ring-4 ring-gray-200;
-      }
-
-      &:checked {
-        @apply border-gray-500 bg-gray-500;
-
-        &:hover {
-          @apply bg-gray-500;
-        }
-      }
-    }
-
-    &-black {
-      @apply border-gray-900 bg-gray-900;
-
-      &:hover {
-        @apply border-gray-900;
-      }
-
-      &:active {
-        @apply border-gray-900 bg-gray-900;
-      }
-
-      &:focus {
-        @apply border-gray-900 !bg-gray-900 ring-4 ring-gray-200;
-      }
-
-      &:checked {
-        @apply border-gray-900 bg-gray-900;
-
-        &:hover {
-          @apply bg-gray-900;
-        }
-      }
-    }
-
-    &-white {
-      @apply border-gray-500 bg-white;
-      @apply relative;
-
-      &:hover {
-        @apply border-gray-500 !border-opacity-50;
-      }
+  /**
+   * Color picker description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
 
-      &:active {
-        @apply border-gray-500 bg-white;
-      }
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
 
-      &:focus {
-        @apply border-gray-500 !bg-white ring-4 ring-gray-200;
-      }
+  /**
+   * Color picker size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UColorPicker).default.size,
+  },
 
-      &:checked {
-        @apply border-gray-500 bg-white;
+  /**
+   * Color picker name.
+   */
+  name: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-        &::after {
-          content: "";
-          @apply absolute left-1/2 top-1/2;
-          @apply h-2.5 w-2.5;
-          @apply rounded-full bg-gray-900;
-          transform: translate(-50%, -50%);
-        }
+  /**
+   * Set color picker disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UColorPicker).default.disabled,
+  },
 
-        &:hover {
-          @apply bg-white;
-        }
-      }
-    }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    &:hover {
-      @apply bg-opacity-75 border-opacity-0;
-    }
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "radio",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const {
+  config,
+  wrapperAttrs,
+  listAttrs,
+  labelAttrs,
+  radioAttrs,
+  iconAttrs,
+  uncoloredAttrs,
+  uncoloredRadioAttrs,
+} = useAttrs(props);
+
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function onInputRadio(value) {
+  selectedItem.value = value;
 }
-</style>
+</script>

package/ui.form-date-picker/Docs.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+
+## Formatting tokens
+Each character in the table below can be used in `dateFormat` and `userFormat` options to achieve the format you need.[](https://www.vue-tailwind.com/docs/datepicker/#date-formatting-tokens)
+
+<Markdown>
+{`
+| Token | Description                                               | Example                                                       |
+| ----- | --------------------------------------------------------- | ------------------------------------------------------------- |
+| d     | Day of the month, 2 digits with leading zeros             | 01 to 31                                                      |
+| D     | A textual representation of a day                         | Mon through Sun                                               |
+| l     | A full textual representation of the day of the week      | Sunday through Saturday                                       |
+| j     | Day of the month without leading zeros                    | 1 to 31                                                       |
+| J     | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st                                             |
+| w     | Numeric representation of the day of the week             | 0 (for Sunday) through 6 (for Saturday)                       |
+| W     | Numeric representation of the week                        | 0 (first week of the year) through 52 (last week of the year) |
+| F     | A full textual representation of a month                  | January through December                                      |
+| m     | Numeric representation of a month, with leading zero      | 01 through 12                                                 |
+| n     | Numeric representation of a month, without leading zeros  | 1 through 12                                                  |
+| M     | A short textual representation of a month                 | Jan through Dec                                               |
+| U     | A short textual representation of a month                 | 1413704993                                                    |
+| y     | A two-digit representation of a year                      | 99 or 03                                                      |
+| Y     | A full numeric representation of a year, 4 digits         | 1999 or 2003                                                  |
+| Z     | ISO Date format                                           | 2017-03-04T01:23:43.000Z                                      |
+| H     | Hours (24 hours)                                          | 00 to 23                                                      |
+| h     | Hours                                                     | 1 to 12                                                       |
+| G     | Hours, 2 digits with leading zeros                        | 1 to 12                                                       |
+| i     | Minutes                                                   | 00 to 59                                                      |
+| S     | Seconds, 2 digits                                         | 00 to 59                                                      |
+| s     | Seconds                                                   | 0, 1 to 59                                                    |
+`}
+</Markdown>
+
+## Escaping Formatting Tokens
+You may escape formatting tokens using \\\\.
+
+<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />

package/ui.form-date-picker/composables/attrs.composable.js

@@ -0,0 +1,22 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export default function useAttrs(props, { isShownCalendar }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const calendarAttrs = getAttrs("calendar");
+  const inputBlurAttrs = getAttrs("input");
+  const inputActiveAttrs = getAttrs("inputActive");
+
+  const inputAttrs = computed(() => {
+    return isShownCalendar.value ? inputActiveAttrs.value : inputBlurAttrs.value;
+  });
+
+  return {
+    config,
+    calendarAttrs,
+    inputAttrs,
+  };
+}

package/ui.form-date-picker/configs/default.config.js

@@ -0,0 +1,27 @@
+export default /*tw*/ {
+  input: "",
+  inputActive: {
+    block: {
+      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
+    },
+  },
+  calendar: "absolute z-40 mt-2",
+  calendarTransition: {
+    enterFromClass: "opacity-0 scale-95",
+    enterActiveClass: "transition transform ease-out duration-100",
+    enterToClass: "opacity-100 scale-100",
+    leaveFromClass: "opacity-100 scale-100",
+    leaveActiveClass: "transition transform ease-in duration-75",
+    leaveToClass: "opacity-0 scale-95",
+  },
+  defaultVariants: {
+    dateFormat: "Y-m-d",
+    userFormat: "F j, Y",
+    size: "md",
+    range: false,
+    timepicker: false,
+    disabled: false,
+    maxDate: undefined,
+    minDate: undefined,
+  },
+};

package/ui.form-date-picker/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UDatePicker = "UDatePicker";

package/ui.form-date-picker/index.stories.js

@@ -5,6 +5,7 @@ import UIcon from "vueless/ui.image-icon";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "3170",
   title: "Form Inputs & Controls / Date Picker",
   component: UDatePicker,
   args: {
@@ -30,7 +31,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UDatePicker v-bind="args" v-model="args.value">
+    <UDatePicker v-bind="args" v-model="args.date">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
@@ -38,7 +39,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UDatePicker, URow },
   setup() {
     return {
@@ -73,7 +74,7 @@ const SlotTemplate = (args) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { value: 1645653600 };
+Default.args = { date: 1645653600 };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = { label: "" };
@@ -90,16 +91,19 @@ error.args = { error: "some error" };
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder" };
 
-export const value = DefaultTemplate.bind({});
-value.args = { value: 1645653600 };
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", date: 1645653600 };
 
-export const customDateFormat = DefaultTemplate.bind({});
-customDateFormat.args = { customDateFormat: "d.m.Y", value: 1645653600 };
+export const Timepicker = DefaultTemplate.bind({});
+Timepicker.args = { timepicker: true, date: 1645653600 };
+
+export const MinMax = DefaultTemplate.bind({});
+MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", date: 1645653600 };
 
 export const slotIcon = SlotTemplate.bind({});
 slotIcon.args = {
   slotTemplate: `
-    <template #icon>
+    <template #right-icon>
       <UIcon
         name="star"
         color="black"
@@ -117,3 +121,12 @@ slotRight.args = {
     </template>
   `,
 };
+
+export const slotLeft = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #left>
+        🤘🤘🤘
+    </template>
+  `,
+};