@marwes-ui/vue 1.1.0 → 1.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
 export { createMarwesThemeScript, createMarwesThemeStyle } from './chunk-DVJD5CQS.js';
 import '@marwes-ui/presets/firstEdition/styles.css';
-import { ThemeMode, resolveThemePreference, resolveThemeInput, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, sanitizeCurrencyValue, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createDividerRecipe, createSpacingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, createSliderRecipe, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, createDialogRecipe, isThemePreference, nextThemeMode, themeToCSSVars, richTextCommandByFormat, headingRecipe, moveTabSelection, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
+import { ThemeMode, resolveThemePreference, resolveThemeInput, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, sanitizeCurrencyValue, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createDividerRecipe, createSkeletonRecipe, createSpacingRecipe, createStatTileRecipe, createDatePickerRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, createSliderRecipe, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, createDialogRecipe, isThemePreference, nextThemeMode, themeToCSSVars, richTextCommandByFormat, headingRecipe, moveTabSelection, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import { defineComponent, ref, computed, onMounted, onUnmounted, watch, provide, h, useAttrs, onBeforeUnmount, shallowRef, Fragment, nextTick, Teleport, inject } from 'vue';
 
@@ -2277,7 +2277,8 @@ var selectFieldPropKeys = [
   "error",
   "select",
   "ariaDescribedBy",
-  "modelValue"
+  "modelValue",
+  "variant"
 ];
 function hasTextContent3(value) {
   return value !== void 0 && value.trim().length > 0;
@@ -2375,11 +2376,15 @@ var SelectField = defineComponent(
     const displayText = computed(
       () => placeholderSelected.value ? sourceSelect.value.placeholder ?? "" : selectedOption.value?.label ?? ""
     );
+    const accessibleName = computed(
+      () => sourceSelect.value.ariaLabel ?? (hasTextContent3(props.label) ? props.label : void 0) ?? (hasTextContent3(displayText.value) ? displayText.value : void 0)
+    );
     const wrapperClass = computed(
       () => mergeClassNames(
         "mw-input-field",
         "mw-input-field--select",
         mode.value === "marwes" && "mw-input-field--select-marwes",
+        props.variant === "date" && "mw-input-field--select-date",
         disabled.value && "mw-input-field--disabled",
         invalid.value && "mw-input-field--invalid"
       )
@@ -2576,6 +2581,7 @@ var SelectField = defineComponent(
                 "aria-controls": `${id.value}-listbox`,
                 "aria-expanded": open.value ? "true" : "false",
                 "aria-haspopup": "listbox",
+                "aria-label": accessibleName.value,
                 "aria-describedby": a11yIds.value.describedBy,
                 "aria-invalid": invalid.value ? "true" : void 0,
                 "aria-required": sourceSelect.value.required ? "true" : void 0,
@@ -2908,9 +2914,9 @@ var SearchField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "search" }, [
         h(
           InputField,
@@ -2936,9 +2942,9 @@ var PasswordField = defineComponent({
   inheritAttrs: false,
   props: [...passwordFieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       const autoComplete = props.autoComplete ?? "current-password";
       return h("div", { "data-purpose": "password" }, [
         h(
@@ -2964,9 +2970,9 @@ var EmailField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "email" }, [
         h(
           InputField,
@@ -3047,9 +3053,9 @@ var PhoneField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "phone" }, [
         h(
           InputField,
@@ -3075,9 +3081,9 @@ var URLField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "url" }, [
         h(
           InputField,
@@ -3811,6 +3817,61 @@ var Divider = defineComponent(
     props: [...dividerPropKeys]
   }
 );
+var skeletonPropKeys = [
+  "variant",
+  "width",
+  "height",
+  "radius",
+  "animation",
+  "decorative",
+  "ariaLabel",
+  "id",
+  "className",
+  "dataAttributes"
+];
+var Skeleton = defineComponent(
+  (props) => {
+    const attrs = useAttrs();
+    const ariaLabelFromAttrs = typeof attrs["aria-label"] === "string" ? attrs["aria-label"] : void 0;
+    const renderKit = computed(
+      () => createSkeletonRecipe({
+        ...props.variant !== void 0 ? { variant: props.variant } : {},
+        ...props.width !== void 0 ? { width: props.width } : {},
+        ...props.height !== void 0 ? { height: props.height } : {},
+        ...props.radius !== void 0 ? { radius: props.radius } : {},
+        ...props.animation !== void 0 ? { animation: props.animation } : {},
+        ...props.decorative !== void 0 ? { decorative: props.decorative } : {},
+        ...props.id !== void 0 ? { id: props.id } : {},
+        ...props.ariaLabel !== void 0 ? { ariaLabel: props.ariaLabel } : ariaLabelFromAttrs !== void 0 ? { ariaLabel: ariaLabelFromAttrs } : {}
+      })
+    );
+    return () => {
+      const skeletonRenderKit = renderKit.value;
+      const passthroughAttrs = omitAttrs(attrs, [
+        "class",
+        "style",
+        "aria-label"
+      ]);
+      return h("span", {
+        ...passthroughAttrs,
+        ...skeletonRenderKit.dataAttributes,
+        ...props.dataAttributes ?? {},
+        class: mergeClassNames(skeletonRenderKit.className, props.className, attrs.class),
+        style: mergeStyles(skeletonRenderKit.vars, attrs.style),
+        role: skeletonRenderKit.a11y.role,
+        id: skeletonRenderKit.a11y.id,
+        "aria-hidden": skeletonRenderKit.a11y.ariaHidden ? "true" : void 0,
+        "aria-label": skeletonRenderKit.a11y.ariaLabel,
+        "aria-live": skeletonRenderKit.a11y.ariaLive
+      });
+    };
+  },
+  {
+    name: "MarwesSkeleton",
+    inheritAttrs: false,
+    props: [...skeletonPropKeys]
+  }
+);
 var spacingPropKeys = ["size", "spacing", "scale", "className"];
 var Spacing = defineComponent(
   (props) => {
@@ -3881,6 +3942,261 @@ function createHeadingComponent(level) {
 var H1 = createHeadingComponent(1);
 var H2 = createHeadingComponent(2);
 var H3 = createHeadingComponent(3);
+var statTilePropKeys = [
+  "className",
+  "label",
+  "value",
+  "subtitle",
+  "trendValue",
+  "trendDirection",
+  "tone",
+  "dataAttributes"
+];
+var StatTile = defineComponent(
+  (props) => {
+    const attrs = useAttrs();
+    const renderKit = computed(
+      () => createStatTileRecipe({
+        ...props.tone !== void 0 ? { tone: props.tone } : {},
+        ...props.trendDirection !== void 0 ? { trendDirection: props.trendDirection } : {},
+        ...props.trendValue !== void 0 ? { trendValue: props.trendValue } : {},
+        ...props.dataAttributes !== void 0 ? { dataAttributes: props.dataAttributes } : {}
+      })
+    );
+    return () => {
+      const kit = renderKit.value;
+      const passthroughAttrs = omitAttrs(attrs, ["class", "style"]);
+      return h(
+        "article",
+        {
+          ...passthroughAttrs,
+          ...kit.dataAttributes,
+          class: mergeClassNames(kit.className, props.className, attrs.class)
+        },
+        [
+          h(
+            "div",
+            { class: kit.slots.headerClassName },
+            [
+              h("span", { class: kit.slots.labelClassName }, props.label),
+              props.trendValue ? h(
+                "span",
+                {
+                  ...kit.trendDataAttributes,
+                  class: kit.slots.trendClassName,
+                  "aria-label": kit.a11y.trendAriaLabel
+                },
+                [
+                  kit.trendIcon ? h(
+                    "span",
+                    { class: kit.slots.trendIconClassName, "aria-hidden": "true" },
+                    kit.trendIcon
+                  ) : null,
+                  h("span", { class: kit.slots.trendValueClassName }, props.trendValue)
+                ].filter(Boolean)
+              ) : null
+            ].filter(Boolean)
+          ),
+          h("div", { class: kit.slots.valueClassName }, props.value),
+          props.subtitle ? h("div", { class: kit.slots.subtitleClassName }, props.subtitle) : null
+        ].filter(Boolean)
+      );
+    };
+  },
+  {
+    name: "MarwesStatTile",
+    inheritAttrs: false,
+    props: [...statTilePropKeys]
+  }
+);
+var datePickerPropKeys = [
+  "className",
+  "monthLabel",
+  "weekdayLabels",
+  "weeks",
+  "device",
+  "previousYearLabel",
+  "previousMonthLabel",
+  "nextMonthLabel",
+  "nextYearLabel",
+  "cancelLabel",
+  "applyLabel",
+  "calendarLabel",
+  "dataAttributes"
+];
+var DatePicker = defineComponent(
+  (props, { emit }) => {
+    const attrs = useAttrs();
+    const renderKit = computed(
+      () => createDatePickerRecipe({
+        ...props.monthLabel !== void 0 ? { monthLabel: props.monthLabel } : {},
+        ...props.weekdayLabels !== void 0 ? { weekdayLabels: props.weekdayLabels } : {},
+        ...props.weeks !== void 0 ? { weeks: props.weeks } : {},
+        ...props.device !== void 0 ? { device: props.device } : {},
+        ...props.previousYearLabel !== void 0 ? { previousYearLabel: props.previousYearLabel } : {},
+        ...props.previousMonthLabel !== void 0 ? { previousMonthLabel: props.previousMonthLabel } : {},
+        ...props.nextMonthLabel !== void 0 ? { nextMonthLabel: props.nextMonthLabel } : {},
+        ...props.nextYearLabel !== void 0 ? { nextYearLabel: props.nextYearLabel } : {},
+        ...props.cancelLabel !== void 0 ? { cancelLabel: props.cancelLabel } : {},
+        ...props.applyLabel !== void 0 ? { applyLabel: props.applyLabel } : {},
+        ...props.calendarLabel !== void 0 ? { calendarLabel: props.calendarLabel } : {},
+        ...props.dataAttributes !== void 0 ? { dataAttributes: props.dataAttributes } : {}
+      })
+    );
+    return () => {
+      const kit = renderKit.value;
+      const passthroughAttrs = omitAttrs(attrs, ["class", "style"]);
+      return h(
+        "section",
+        {
+          ...passthroughAttrs,
+          ...kit.dataAttributes,
+          class: mergeClassNames(kit.className, props.className, attrs.class),
+          "aria-label": kit.labels.calendar
+        },
+        [
+          h("header", { class: kit.slots.headerClassName }, [
+            h("div", { class: kit.slots.navGroupClassName }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.previousYear,
+                  onClick: () => emit("previousYear")
+                },
+                "\xAB"
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.previousMonth,
+                  onClick: () => emit("previousMonth")
+                },
+                "\u2039"
+              )
+            ]),
+            h("div", { class: kit.slots.monthLabelClassName }, kit.monthLabel),
+            h("div", { class: kit.slots.navGroupClassName }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.nextMonth,
+                  onClick: () => emit("nextMonth")
+                },
+                "\u203A"
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.nextYear,
+                  onClick: () => emit("nextYear")
+                },
+                "\xBB"
+              )
+            ])
+          ]),
+          h("table", { class: kit.slots.gridClassName, "aria-label": kit.monthLabel }, [
+            h("thead", [
+              h(
+                "tr",
+                { class: "mw-date-picker__weekdays" },
+                kit.weekdayLabels.map(
+                  (weekday) => h(
+                    "th",
+                    { key: weekday, class: kit.slots.weekdayClassName, scope: "col" },
+                    weekday
+                  )
+                )
+              )
+            ]),
+            h(
+              "tbody",
+              kit.weeks.map(
+                (week, weekIndex) => h(
+                  "tr",
+                  {
+                    key: week.map((day) => day.date ?? day.label).join("-"),
+                    class: kit.slots.weekClassName
+                  },
+                  week.map((day, dayIndex) => {
+                    const dayKit = kit.dayKits[weekIndex]?.[dayIndex];
+                    if (!dayKit) return null;
+                    return h(
+                      "td",
+                      {
+                        key: day.date ?? `${weekIndex}-${dayIndex}`,
+                        class: kit.slots.cellClassName
+                      },
+                      [
+                        h(
+                          "button",
+                          {
+                            type: "button",
+                            ...dayKit.dataAttributes,
+                            class: dayKit.className,
+                            "aria-label": dayKit.ariaLabel,
+                            "aria-pressed": dayKit.selected ? "true" : void 0,
+                            disabled: dayKit.disabled,
+                            onClick: () => emit("daySelect", day)
+                          },
+                          day.label
+                        )
+                      ]
+                    );
+                  })
+                )
+              )
+            )
+          ]),
+          h("footer", { class: kit.slots.footerClassName }, [
+            h(
+              "button",
+              {
+                type: "button",
+                class: kit.slots.footerButtonClassName,
+                onClick: () => emit("cancel")
+              },
+              kit.labels.cancel
+            ),
+            kit.labels.apply ? h(
+              "button",
+              {
+                type: "button",
+                class: mergeClassNames(
+                  kit.slots.footerButtonClassName,
+                  "mw-date-picker__footer-button--primary"
+                ),
+                onClick: () => emit("apply")
+              },
+              kit.labels.apply
+            ) : null
+          ])
+        ]
+      );
+    };
+  },
+  {
+    name: "MarwesDatePicker",
+    inheritAttrs: false,
+    props: [...datePickerPropKeys],
+    emits: [
+      "previousYear",
+      "previousMonth",
+      "nextMonth",
+      "nextYear",
+      "daySelect",
+      "cancel",
+      "apply"
+    ]
+  }
+);
 var cardPropKeys = ["className", "id", "dataAttributes"];
 var Card = defineComponent(
   (props, { slots }) => {
@@ -4883,7 +5199,7 @@ var RadioGroupField = defineComponent(
       },
       [
         h("div", { class: "mw-radio-group-field__label", id: a11yIds.value.labelId }, [
-          h(Paragraph, { size: "md" }, { default: labelContent })
+          h(Paragraph, { size: "sm" }, { default: labelContent })
         ]),
         hasDescription.value ? h(
           "div",
@@ -6434,7 +6750,7 @@ var DialogModal = defineComponent(
     );
     const footerContent = computed(() => {
       if (slots.footer) {
-        return slots.footer();
+        return slots.footer({ close });
       }
       if (typeof props.footer === "function") {
         return props.footer({ close });
@@ -6718,6 +7034,6 @@ var InfoDialog = defineComponent({
   }
 });
 
-export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, createHeadingComponent, useTheme, useThemeMode, useToast };
+export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DatePicker, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Skeleton, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatTile, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, createHeadingComponent, useTheme, useThemeMode, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map