origam 0.3.10 → 2.2.1

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -128,7 +128,7 @@
 
 <script setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useLocale, useProps, useVModel } from "../../composables";
+import { useLocale, useProps, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
@@ -144,11 +144,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -159,12 +154,12 @@ const props = defineProps({
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
@@ -172,9 +167,10 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -182,18 +178,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -201,11 +188,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -215,7 +204,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -225,7 +228,6 @@ const props = defineProps({
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false, default: null },
@@ -318,7 +320,18 @@ const textFieldProps = computed(() => {
   return origamTextFieldRef.value?.filterProps(props, ["class", "id", "style", "dirty", "modelValue", "placeholder", "validationValue", "focused"]);
 });
 const colorPickerProps = computed(() => {
-  return origamColorPickerRef.value?.filterProps(props, ["class", "id", "style", "modelValue"]);
+  return origamColorPickerRef.value?.filterProps(props, [
+    "class",
+    "id",
+    "style",
+    "modelValue",
+    "rounded",
+    "border",
+    "borderColor",
+    "borderStyle",
+    "density",
+    "direction"
+  ]);
 });
 const isDirty = computed(() => {
   return model.value === COLOR_NULL;
@@ -349,10 +362,16 @@ const colorPickerFieldClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(colorPickerFieldStyles);
 defineExpose(forwardRefs({
   filterProps,
   isFocused,
-  menu
+  menu,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 }, origamTextFieldRef));
 </script>
 
@@ -361,5 +380,28 @@ defineExpose(forwardRefs({
 		:deep(.origam-field) {
 			--origam-field---padding-start: 0;
 		}
+
+		:deep(.origam-field__prepend-inner) {
+			align-self: stretch;
+			align-items: stretch;
+			padding-top: 0;
+			padding-bottom: 0;
+			padding-inline-start: 0;
+			overflow: hidden;
+
+			> .origam-sheet {
+				width: var(--origam-color-picker-field__swatch---width, 24px);
+				height: 100%;
+				min-width: var(--origam-color-picker-field__swatch---width, 24px);
+				border-radius: 0;
+				flex-shrink: 0;
+			}
+		}
+
+		:deep(.origam-color-picker-field__selection-text) {
+			font-family: var(--origam-font__family---mono);
+			font-size: 0.875em;
+			letter-spacing: 0.03em;
+		}
 	}
 </style>

package/dist/src/components/ConfirmWrapper/OrigamConfirmWrapper.vue

@@ -0,0 +1,494 @@
+<template>
+	<div
+			:class="confirmWrapperClasses"
+			:style="confirmWrapperStyles"
+	>
+		<div
+				v-if="hasHeader"
+				class="origam-confirm-wrapper__header"
+		>
+			<slot name="header">
+        <span
+		        v-if="hasPrepend"
+		        key="prepend"
+		        class="origam-confirm-wrapper__prepend"
+		        @click="handleClickPrepend"
+        >
+          <slot name="prepend">
+            <origam-avatar
+		            v-if="prependAvatar"
+		            key="prepend-avatar"
+		            :image="prependAvatar"
+            />
+            <origam-icon
+		            v-if="prependIcon"
+		            key="prepend-icon"
+		            :icon="prependIcon"
+            />
+          </slot>
+        </span>
+
+				<span
+						v-if="hasTitle"
+						class="origam-confirm-wrapper__label"
+				>
+          <slot
+		          name="title"
+		          v-bind="{props: labelProps}"
+          >
+            <origam-label
+		            ref="origamLabelRef"
+		            tag="label"
+		            v-bind="labelProps"
+            />
+          </slot>
+        </span>
+
+				<span
+						v-if="hasAppend"
+						key="append"
+						class="origam-confirm-wrapper__append"
+						@click="handleClickAppend"
+				>
+          <slot name="append">
+            <origam-avatar
+		            v-if="appendAvatar"
+		            key="append-avatar"
+		            :image="appendAvatar"
+            />
+            <origam-icon
+		            v-if="appendIcon"
+		            key="append-icon"
+		            :icon="appendIcon"
+            />
+          </slot>
+        </span>
+			</slot>
+		</div>
+
+		<div class="origam-confirm-wrapper__content">
+			<origam-defaults-provider :defaults="fieldDefaults">
+				<div class="origam-confirm-wrapper__field">
+					<slot name="default">
+						<component
+								:is="resolvedField"
+								v-if="resolvedField"
+								v-model="model"
+								v-bind="defaults"
+						/>
+					</slot>
+				</div>
+				<div class="origam-confirm-wrapper__confirm">
+					<slot name="confirm">
+						<component
+								:is="resolvedField"
+								v-if="resolvedField"
+								v-model="confirmModel"
+								v-bind="{...resolvedConfirmDefaults, label: resolvedConfirmLabel}"
+						/>
+					</slot>
+				</div>
+			</origam-defaults-provider>
+		</div>
+
+		<div
+				v-if="hasDetails"
+				class="origam-confirm-wrapper__details"
+		>
+			<slot
+					name="messages"
+					v-bind="{hasMessages, messages, messagesId}"
+			>
+				<origam-messages
+						:id="messagesId"
+						:active="hasMessages"
+						:messages="messages"
+				>
+					<template
+							v-if="slots.message"
+							#default="{message}"
+					>
+						<slot
+								name="message"
+								v-bind="{message}"
+						/>
+					</template>
+				</origam-messages>
+			</slot>
+
+			<slot
+					name="details"
+					v-bind="detailsProps"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, ref, StyleValue, useSlots, watch } from "vue";
+import {
+  OrigamAvatar,
+  OrigamDefaultsProvider,
+  OrigamIcon,
+  OrigamLabel,
+  OrigamMessages
+} from "../../components";
+import {
+  useAdjacent,
+  useDefaults,
+  useLocale,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
+import { DENSITY, DIRECTION } from "../../enums";
+import { forwardRefs, getUid, wrapInArray } from "../../utils";
+const _props = defineProps({
+  modelValue: { type: null, required: false, default: "" },
+  confirm: { type: null, required: false, default: "" },
+  field: { type: String, required: false },
+  defaults: { type: Object, required: false },
+  confirmLabel: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  error: { type: Boolean, required: false },
+  errorMessages: { type: [String, Array], required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  messages: { type: [String, Array], required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  centerAffix: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  appendAvatar: { type: String, required: false },
+  appendIcon: { type: null, required: false },
+  prependAvatar: { type: String, required: false },
+  prependIcon: { type: null, required: false },
+  direction: { type: null, required: false, default: DIRECTION.VERTICAL },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  variant: { type: null, required: false },
+  focused: { type: Boolean, required: false }
+});
+const props = useDefaults(_props);
+defineEmits(["update:confirm", "update:modelValue", "click:append", "click:prepend", "update:focused"]);
+defineSlots();
+const slots = useSlots();
+const { t } = useLocale();
+const model = useVModel(props, "modelValue");
+const confirmModel = useVModel(props, "confirm");
+const {
+  hasPrepend,
+  hasAppend,
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend
+} = useAdjacent(props);
+const origamLabelRef = ref();
+const hasTitle = computed(() => {
+  return props.label || slots.title;
+});
+const hasHeader = computed(() => {
+  return hasPrepend.value || hasAppend.value || hasTitle.value || slots.header;
+});
+const labelProps = computed(() => {
+  return origamLabelRef.value?.filterProps(props, ["class", "style", "id", "tag"]);
+});
+const uid = getUid();
+const id = computed(() => {
+  return props.id || `origam-confirm-wrapper-${uid}`;
+});
+const messagesId = computed(() => {
+  return `${id.value}-messages`;
+});
+const isPristine = ref(true);
+watch(confirmModel, () => {
+  if (confirmModel.value != null && confirmModel.value !== "") {
+    isPristine.value = false;
+  }
+});
+const isDisabled = computed(() => !!props.disabled);
+const isReadonly = computed(() => !!props.readonly);
+const isDirty = computed(() => {
+  return !!(wrapInArray(model.value === "" ? null : model.value).length || wrapInArray(confirmModel.value === "" ? null : confirmModel.value).length);
+});
+const confirmError = computed(() => {
+  if (isPristine.value) return false;
+  if (!confirmModel.value && !model.value) return false;
+  return confirmModel.value !== model.value;
+});
+const isError = computed(() => {
+  return !!(props.error || confirmError.value);
+});
+const internalErrorMessages = computed(() => {
+  if (confirmError.value) {
+    return [t("origam.validation.must_match")];
+  }
+  return [];
+});
+const errorMessages = computed(() => {
+  if (props.errorMessages?.length) {
+    return wrapInArray(props.errorMessages).concat(internalErrorMessages.value);
+  }
+  return internalErrorMessages.value;
+});
+const messages = computed(() => {
+  if (errorMessages.value.length) {
+    return errorMessages.value;
+  }
+  if (props.hint && (props.persistentHint || props.focused)) {
+    return wrapInArray(props.hint);
+  }
+  return wrapInArray(props.messages ?? []);
+});
+const hasMessages = computed(() => {
+  return messages.value.length > 0;
+});
+const hasDetails = computed(() => {
+  return !props.hideDetails || props.hideDetails === "auto" && (hasMessages.value || slots.details);
+});
+const resolvedField = computed(() => {
+  if (!props.field) return null;
+  return `origam-${props.field}`;
+});
+const resolvedConfirmLabel = computed(() => {
+  return props.confirmLabel || (props.defaults?.label ? `${props.defaults.label} (confirmation)` : void 0);
+});
+const resolvedConfirmDefaults = computed(() => {
+  if (!props.defaults) return {};
+  const {
+    requirements,
+    persistentRequirements,
+    needTiny,
+    needUppercase,
+    needNumber,
+    needSpecial,
+    minLength,
+    ...rest
+  } = props.defaults;
+  return rest;
+});
+const fieldDefaults = computed(() => {
+  const defaults = {};
+  if (props.color !== void 0) defaults.color = props.color;
+  if (props.rounded !== void 0) defaults.rounded = props.rounded;
+  if (props.density !== void 0) defaults.density = props.density;
+  if (props.elevation !== void 0) defaults.elevation = props.elevation;
+  if (props.variant !== void 0) defaults.variant = props.variant;
+  if (isDisabled.value) defaults.disabled = true;
+  if (isReadonly.value) defaults.readonly = true;
+  if (props.required) defaults.required = true;
+  if (isError.value) defaults.error = true;
+  return { global: defaults };
+});
+const detailsProps = computed(() => {
+  return {
+    id: id.value,
+    messagesId: messagesId.value,
+    isDirty: isDirty.value,
+    isDisabled: isDisabled.value,
+    isReadonly: isReadonly.value
+  };
+});
+const validate = () => {
+  isPristine.value = false;
+  return errorMessages.value;
+};
+const reset = () => {
+  model.value = "";
+  confirmModel.value = "";
+  isPristine.value = true;
+};
+const resetValidation = () => {
+  isPristine.value = true;
+};
+const confirmWrapperClasses = computed(() => {
+  return [
+    "origam-confirm-wrapper",
+    `origam-confirm-wrapper--${props.direction}`,
+    {
+      "origam-confirm-wrapper--center-affix": props.centerAffix,
+      "origam-confirm-wrapper--error": isError.value,
+      "origam-confirm-wrapper--dirty": isDirty.value,
+      "origam-confirm-wrapper--disabled": isDisabled.value,
+      "origam-confirm-wrapper--readonly": isReadonly.value
+    },
+    props.class
+  ];
+});
+const confirmWrapperStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const { filterProps } = useProps(props);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(confirmWrapperStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  validate,
+  reset,
+  resetValidation,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
+}));
+</script>
+
+<style lang="scss" scoped>
+	.origam-confirm-wrapper {
+		$this: &;
+
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		display: grid;
+		flex: 1 1 auto;
+		grid-template-areas: "header" "content" "messages";
+		grid-template-columns: 1fr;
+		grid-template-rows: auto auto auto;
+
+		&__header {
+			grid-area: header;
+			display: grid;
+			flex: 1 1 auto;
+			grid-template-areas: "prepend label append";
+			grid-template-columns: max-content minmax(0, 1fr) max-content;
+			grid-template-rows: auto;
+			padding-block: var(--origam-confirm-wrapper---padding-top) var(--origam-confirm-wrapper---padding-bottom);
+		}
+
+		&__content {
+			display: grid;
+			flex: 1 1 auto;
+			grid-area: content;
+		}
+
+		&__field {
+			grid-area: field;
+		}
+
+		&__confirm {
+			grid-area: confirm;
+		}
+
+		&__prepend,
+		&__append {
+			display: flex;
+			align-items: flex-start;
+		}
+
+		&__prepend {
+			grid-area: prepend;
+			padding-inline-end: var(--origam-confirm-wrapper---padding-end);
+		}
+
+		&__append {
+			grid-area: append;
+			padding-inline-start: var(--origam-confirm-wrapper---padding-start);
+		}
+
+		&__details {
+			align-items: flex-end;
+			display: flex;
+			font-size: var(--origam-confirm-wrapper---details-font-size);
+			font-weight: 400;
+			grid-area: messages;
+			letter-spacing: var(--origam-confirm-wrapper---details-letter-spacing);
+			line-height: var(--origam-confirm-wrapper---details-line-height);
+			min-height: var(--origam-confirm-wrapper---details-min-height);
+			overflow: hidden;
+			justify-content: space-between;
+			padding-block: var(--origam-confirm-wrapper---padding-top) var(--origam-confirm-wrapper---padding-bottom);
+		}
+
+		&__details,
+		&__prepend,
+		&__append {
+			> .origam-icon {
+				opacity: var(--origam-confirm-wrapper---icon-opacity);
+			}
+		}
+
+		&--disabled {
+			pointer-events: none;
+		}
+
+		&--vertical {
+			#{$this}__content {
+				grid-template-areas: "field field" "confirm confirm";
+				grid-template-columns: repeat(2, 1fr);
+				grid-template-rows: auto auto;
+			}
+		}
+
+		&--horizontal {
+			#{$this}__content {
+				grid-template-areas: "field confirm";
+				grid-template-rows: auto;
+				gap: var(--origam-confirm-wrapper---horizontal-gap);
+			}
+		}
+
+		&--disabled,
+		&--error {
+			#{$this}__details {
+				> .origam-messages {
+					opacity: 1;
+				}
+			}
+
+			#{$this}__details,
+			#{$this}__prepend,
+			#{$this}__append {
+				> .origam-icon {
+					opacity: var(--origam-confirm-wrapper---icon-opacity-active);
+				}
+			}
+		}
+
+		&--disabled {
+			#{$this}__details,
+			#{$this}__prepend,
+			#{$this}__append {
+				opacity: var(--origam-confirm-wrapper---disabled-opacity);
+			}
+		}
+
+		&--error {
+			&:not(#{$this}--disabled) {
+				#{$this}__details {
+					> .origam-messages {
+						color: var(--origam-confirm-wrapper--error---color);
+					}
+				}
+
+				#{$this}__details,
+				#{$this}__prepend,
+				#{$this}__append {
+					> .origam-icon {
+						color: var(--origam-confirm-wrapper--error---color);
+					}
+				}
+			}
+		}
+
+		&--center-affix {
+			#{$this}__prepend,
+			#{$this}__append {
+				align-items: center;
+				padding-top: 0;
+			}
+		}
+	}
+</style>

package/dist/src/components/ConfirmWrapper/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamConfirmWrapper", {
+  enumerable: true,
+  get: function () {
+    return _OrigamConfirmWrapper.default;
+  }
+});
+var _OrigamConfirmWrapper = _interopRequireDefault(require("./OrigamConfirmWrapper.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/ConfirmWrapper/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamConfirmWrapper } from './OrigamConfirmWrapper.vue';

package/dist/src/components/ConfirmWrapper/index.js

@@ -0,0 +1 @@
+export { default as OrigamConfirmWrapper } from "./OrigamConfirmWrapper.vue";