origam 0.3.10 → 2.2.1

package/dist/src/components/FileField/OrigamFileFieldDragNDropItem.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+      :class="dragNDropItemClasses"
+      :style="dragNDropItemStyles"
+  >
+    <slot>
+      <origam-icon
+          :icon="fileIcon"
+          class="origam-file-field-dragndrop-item__icon"
+      />
+      <div class="origam-file-field-dragndrop-item__content">
+        <div class="origam-file-field-dragndrop-item__name">
+          {{ file.name }}
+        </div>
+        <div class="origam-file-field-dragndrop-item__meta">
+          {{ humanReadableFileSize(file.size, base) }}
+        </div>
+        <origam-progress
+            v-if="hasProgress"
+            class="origam-file-field-dragndrop-item__progress"
+            :model-value="progress"
+            :color="color"
+            height="4"
+            rounded
+        />
+      </div>
+      <div class="origam-file-field-dragndrop-item__actions">
+        <origam-btn
+            :icon="removeIcon"
+            flat
+            size="small"
+            :disabled="disabled || readonly"
+            @click.stop.prevent="handleRemove"
+        />
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
+import {
+  useDefaults,
+  useProps,
+  useStyle
+} from "../../composables";
+import { MDI_ICONS } from "../../enums";
+import { humanReadableFileSize } from "../../utils";
+const _props = defineProps({
+  file: { type: null, required: true },
+  index: { type: Number, required: true },
+  progress: { type: Number, required: false },
+  fileIcon: { type: String, required: false, default: MDI_ICONS.FILE },
+  removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  showSize: { type: [Boolean, Number], 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 }
+});
+const props = useDefaults(_props);
+const emits = defineEmits(["click:remove"]);
+defineSlots();
+const handleRemove = () => {
+  emits("click:remove", { file: props.file, index: props.index });
+};
+const base = computed(() => {
+  return typeof props.showSize !== "boolean" ? props.showSize : void 0;
+});
+const hasProgress = computed(() => {
+  return typeof props.progress === "number";
+});
+const dragNDropItemStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const dragNDropItemClasses = computed(() => {
+  return [
+    "origam-file-field-dragndrop-item",
+    props.class
+  ];
+});
+const { filterProps } = useProps(props);
+const { id, css, load, isLoaded, unload } = useStyle(dragNDropItemStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+  .origam-file-field-dragndrop-item {
+    align-items: center;
+    display: flex;
+    gap: var(--origam-file-field-dragndrop-item---gap, 12px);
+    width: 100%;
+    z-index: 2;
+
+    &__icon {
+      color: var(--origam-file-field-dragndrop-item__icon---color, var(--origam-color__text---secondary));
+      flex-shrink: 0;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--origam-file-field-dragndrop-item---content-gap, 4px);
+      min-width: 0;
+    }
+
+    &__name {
+      font-size: var(--origam-file-field-dragndrop-item__name---font-size, 0.875rem);
+      font-weight: var(--origam-file-field-dragndrop-item__name---font-weight, 500);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__meta {
+      color: var(--origam-file-field-dragndrop-item__meta---color, var(--origam-color__text---secondary));
+      font-size: var(--origam-file-field-dragndrop-item__meta---font-size, 0.75rem);
+    }
+
+    &__progress {
+      margin-top: var(--origam-file-field-dragndrop-item__progress---margin-top, 4px);
+    }
+
+    &__actions {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+      gap: var(--origam-file-field-dragndrop-item---actions-gap, 4px);
+    }
+  }
+</style>

package/dist/src/components/FileField/OrigamFileFieldListItem.vue

@@ -0,0 +1,147 @@
+<template>
+  <li
+      :class="listItemClasses"
+      :style="listItemStyles"
+  >
+    <slot>
+      <origam-icon
+          :icon="fileIcon"
+          class="origam-file-field-list-item__icon"
+      />
+      <div class="origam-file-field-list-item__content">
+        <div class="origam-file-field-list-item__name">
+          {{ file.name }}
+        </div>
+        <div class="origam-file-field-list-item__meta">
+          {{ humanReadableFileSize(file.size, base) }}
+        </div>
+        <origam-progress
+            v-if="hasProgress"
+            class="origam-file-field-list-item__progress"
+            :model-value="progress"
+            :color="color"
+            height="4"
+            rounded
+        />
+      </div>
+      <div class="origam-file-field-list-item__actions">
+        <origam-btn
+            :icon="removeIcon"
+            flat
+            size="small"
+            :disabled="disabled || readonly"
+            @click.stop="handleRemove"
+        />
+      </div>
+    </slot>
+  </li>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
+import {
+  useDefaults,
+  useProps,
+  useStyle
+} from "../../composables";
+import { MDI_ICONS } from "../../enums";
+import { humanReadableFileSize } from "../../utils";
+const _props = defineProps({
+  file: { type: null, required: true },
+  index: { type: Number, required: true },
+  progress: { type: Number, required: false },
+  fileIcon: { type: String, required: false, default: MDI_ICONS.FILE },
+  removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  showSize: { type: [Boolean, Number], 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 }
+});
+const props = useDefaults(_props);
+const emits = defineEmits(["click:remove"]);
+defineSlots();
+const handleRemove = () => {
+  emits("click:remove", { file: props.file, index: props.index });
+};
+const base = computed(() => {
+  return typeof props.showSize !== "boolean" ? props.showSize : void 0;
+});
+const hasProgress = computed(() => {
+  return typeof props.progress === "number";
+});
+const listItemStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const listItemClasses = computed(() => {
+  return [
+    "origam-file-field-list-item",
+    props.class
+  ];
+});
+const { filterProps } = useProps(props);
+const { id, css, load, isLoaded, unload } = useStyle(listItemStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+  .origam-file-field-list-item {
+    align-items: center;
+    background-color: var(--origam-file-field-list-item---background-color, var(--origam-color__surface---overlay));
+    border: var(--origam-file-field-list-item---border-width, 1px) var(--origam-file-field-list-item---border-style, solid) var(--origam-file-field-list-item---border-color, var(--origam-color__border---subtle));
+    border-radius: var(--origam-file-field-list-item---border-radius, 6px);
+    display: flex;
+    gap: var(--origam-file-field-list-item---gap, 12px);
+    padding-block: var(--origam-file-field-list-item---padding-block, 10px);
+    padding-inline: var(--origam-file-field-list-item---padding-inline, 12px);
+
+    &__icon {
+      color: var(--origam-file-field-list-item__icon---color, var(--origam-color__text---secondary));
+      flex-shrink: 0;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--origam-file-field-list-item---content-gap, 4px);
+      min-width: 0;
+    }
+
+    &__name {
+      font-size: var(--origam-file-field-list-item__name---font-size, 0.875rem);
+      font-weight: var(--origam-file-field-list-item__name---font-weight, 500);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__meta {
+      color: var(--origam-file-field-list-item__meta---color, var(--origam-color__text---secondary));
+      font-size: var(--origam-file-field-list-item__meta---font-size, 0.75rem);
+    }
+
+    &__progress {
+      margin-top: var(--origam-file-field-list-item__progress---margin-top, 4px);
+    }
+
+    &__actions {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+      gap: var(--origam-file-field-list-item---actions-gap, 4px);
+    }
+  }
+</style>

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

@@ -9,5 +9,19 @@ Object.defineProperty(exports, "OrigamFileField", {
     return _OrigamFileField.default;
   }
 });
+Object.defineProperty(exports, "OrigamFileFieldDragNDropItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamFileFieldDragNDropItem.default;
+  }
+});
+Object.defineProperty(exports, "OrigamFileFieldListItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamFileFieldListItem.default;
+  }
+});
 var _OrigamFileField = _interopRequireDefault(require("./OrigamFileField.vue"));
+var _OrigamFileFieldDragNDropItem = _interopRequireDefault(require("./OrigamFileFieldDragNDropItem.vue"));
+var _OrigamFileFieldListItem = _interopRequireDefault(require("./OrigamFileFieldListItem.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1 +1,3 @@
 export { default as OrigamFileField } from './OrigamFileField.vue';
+export { default as OrigamFileFieldDragNDropItem } from './OrigamFileFieldDragNDropItem.vue';
+export { default as OrigamFileFieldListItem } from './OrigamFileFieldListItem.vue';

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

@@ -1 +1,3 @@
 export { default as OrigamFileField } from "./OrigamFileField.vue";
+export { default as OrigamFileFieldDragNDropItem } from "./OrigamFileFieldDragNDropItem.vue";
+export { default as OrigamFileFieldListItem } from "./OrigamFileFieldListItem.vue";

package/dist/src/components/Form/OrigamForm.vue

@@ -7,38 +7,112 @@
 			@reset="handleReset"
 			@submit="handleSubmit"
 	>
-		<slot
-				name="default"
-				v-bind="form"
-		/>
+		<div class="origam-form__content">
+			<slot
+					name="default"
+					v-bind="form"
+			/>
+		</div>
+
+		<div
+				v-if="hasMessages"
+				class="origam-form__details"
+		>
+			<slot
+					name="messages"
+					v-bind="{hasMessages, messages}"
+			>
+				<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>
+		</div>
+
+		<div
+				v-if="slots.actions"
+				class="origam-form__actions"
+		>
+			<slot
+					name="actions"
+					v-bind="{submit: () => handleSubmit, reset: () => handleReset}"
+			/>
+		</div>
 	</form>
 </template>
 
 <script setup>
-import { computed, ref, StyleValue } from "vue";
-import { useForm, useProps } from "../../composables";
-import { forwardRefs } from "../../utils";
-const props = defineProps({
+import { computed, nextTick, ref, StyleValue, useSlots } from "vue";
+import { OrigamMessages } from "../../components";
+import {
+  useDefaults,
+  useForm,
+  useMessage,
+  useProps,
+  useStyle,
+  useValidation
+} from "../../composables";
+import { forwardRefs, getUid } from "../../utils";
+const _props = defineProps({
   disabled: { type: Boolean, required: false },
   fastFail: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   modelValue: { type: [Boolean, null], required: false },
   validateOn: { type: null, required: false },
+  rules: { type: Array, required: false },
+  errorMessages: { type: [Array, String], required: false },
+  hint: { type: String, required: false },
+  messages: { type: [Array, String], required: false },
+  scrollToError: { type: Boolean, required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
-const emits = defineEmits(["submit"]);
+const props = useDefaults(_props);
+const emits = defineEmits(["submit", "reset"]);
+defineSlots();
+const slots = useSlots();
 const { filterProps } = useProps(props);
 const form = useForm(props);
 const formRef = ref();
+const {
+  errorMessages,
+  isValid: formIsValid,
+  validate: validateFormRules,
+  reset: resetFormValidation,
+  validationClasses
+} = useValidation(props);
+const messagesId = `origam-form-messages-${getUid()}`;
+const { hasMessages, messages } = useMessage(props, errorMessages);
+const scrollToFirstError = async (options) => {
+  await nextTick();
+  const el = formRef.value?.querySelector(".origam-input--error");
+  if (!el) return;
+  const scrollOptions = typeof options === "object" ? options : { behavior: "smooth", block: "center" };
+  el.scrollIntoView(scrollOptions);
+};
 const handleReset = (e) => {
   e.preventDefault();
   form.reset();
+  resetFormValidation();
 };
 const handleSubmit = (_e) => {
   const e = _e;
-  const ready = form.validate();
+  const ready = Promise.all([form.validate(), validateFormRules()]).then(([childResult]) => ({
+    valid: childResult.valid && formIsValid.value !== false,
+    errors: childResult.errors
+  }));
   e.then = ready.then.bind(ready);
   e.catch = ready.catch.bind(ready);
   e.finally = ready.finally.bind(ready);
@@ -50,6 +124,11 @@ const handleSubmit = (_e) => {
       }
     });
   }
+  ready.then(({ valid }) => {
+    if (!valid && props.scrollToError) {
+      scrollToFirstError(props.scrollToError);
+    }
+  });
   e.preventDefault();
 };
 const formStyles = computed(() => {
@@ -60,8 +139,67 @@ const formStyles = computed(() => {
 const formClasses = computed(() => {
   return [
     "origam-form",
+    validationClasses.value,
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps, ...form }, formRef));
+const { id, css, load, isLoaded, unload } = useStyle(formStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  ...form,
+  errorMessages,
+  formIsValid,
+  scrollToFirstError,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, formRef));
 </script>
+
+<style lang="scss" scoped>
+	.origam-form {
+		$this: &;
+
+		&__actions {
+			margin-top: var(--origam-form__actions---margin-top, 16px);
+			display: var(--origam-form__actions---display, flex);
+			gap: var(--origam-form__actions---gap, 8px);
+		}
+
+		&__details {
+			align-items: flex-end;
+			display: flex;
+			font-size: var(--origam-form__details---font-size, 0.75rem);
+			font-weight: var(--origam-form__details---font-weight, 400);
+			grid-area: messages;
+			letter-spacing: var(--origam-form__details---letter-spacing, 0.0333333333em);
+			line-height: var(--origam-form__details---line-height, 1);
+			min-height: var(--origam-form__details---min-height, 22px);
+			padding-top: var(--origam-form__details---padding-top, 6px);
+			overflow: hidden;
+			justify-content: space-between;
+
+			> .origam-icon {
+				opacity: var(--origam-form__details---icon-opacity, 0.7);
+			}
+		}
+
+		&--error {
+			#{$this}__details {
+				> .origam-messages {
+					opacity: var(--origam-form--error---icon-opacity, 1);
+					color: var(--origam-form--error---messages-color, var(--origam-color__feedback--danger---fgSubtle));
+				}
+			}
+
+			#{$this}__details {
+				> .origam-icon {
+					opacity: var(--origam-form--error---icon-opacity, 1);
+					color: var(--origam-form--error---icon-color, var(--origam-color__feedback--danger---fgSubtle));
+				}
+			}
+		}
+	}
+</style>

package/dist/src/components/Grids/OrigamCol.vue

@@ -9,7 +9,14 @@
 </template>
 
 <script setup>
-import { useBorder, useBothColor, useMargin, usePadding, useProps } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useMargin,
+  usePadding,
+  useProps,
+  useStyle
+} from "../../composables";
 import { toKebabCase } from "../../utils";
 import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
@@ -33,10 +40,6 @@ const props = defineProps({
   orderXxl: { type: Number, required: false },
   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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -72,7 +75,7 @@ const props = defineProps({
   alignXxl: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
@@ -88,33 +91,37 @@ const colStyles = computed(() => {
 const colClasses = computed(() => {
   const classes = [
     "origam-col",
-    {
-      [`origam-col--align-${props.align}`]: props.align
-    },
+    colorClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
     props.class
   ];
-  const propMap = {
-    align: ["alignSm", "alignSm", "alignLg", "alignXl", "alignXxl"],
-    justify: ["justifySm", "justifyMd", "justifyLg", "justifyXl", "justifyXxl"],
-    offset: ["offsetSm", "offsetMd", "offsetLg", "offsetXl", "offsetXxl"],
-    order: ["orderSm", "orderMd", "orderLg", "orderXl", "orderXxl"],
-    grid: ["sm", "md", "lg", "xl", "xxl"]
-  };
   if (props.cols) {
     classes.push(`origam-col--${props.cols}`);
   }
-  for (const type in propMap) {
-    propMap[type].forEach((prop) => {
-      if (props[prop]) classes.push(`origam-col--${toKebabCase(prop)}-${props[prop]}`);
+  const propFamilies = {
+    align: ["align", "alignSm", "alignMd", "alignLg", "alignXl", "alignXxl"],
+    offset: ["offset", "offsetSm", "offsetMd", "offsetLg", "offsetXl", "offsetXxl"],
+    order: ["order", "orderSm", "orderMd", "orderLg", "orderXl", "orderXxl"],
+    breakpoint: ["sm", "md", "lg", "xl", "xxl"]
+  };
+  for (const family in propFamilies) {
+    propFamilies[family].forEach((prop) => {
+      const value = props[prop];
+      if (value) classes.push(`origam-col--${toKebabCase(prop)}-${value}`);
     });
   }
   return classes;
 });
+const { id, css, load, isLoaded, unload } = useStyle(colStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -122,7 +129,7 @@ defineExpose({
 	$breakpoints: ('sm': 600px, 'md': 960px, 'lg': 1280px, 'xl': 1920px, 'xxl': 2560px);
 	$sizes: 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1;
 	$aligns: ('start': flex-start, 'end': flex-end, 'center': center, 'baseline': baseline, 'stretch': stretch);
-
+	$orders: ('first': -9999, 'last': 9999);
 	%default {
 		width: var(--origam-col---width);
 
@@ -145,6 +152,7 @@ defineExpose({
 		flex-shrink: var(--origam-col---flex-shrink);
 		flex-basis: var(--origam-col---flex-basis);
 		align-self: var(--origam-col---align-self);
+		order: var(--origam-col---order, 0);
 
 		max-width: var(--origam-col---max-width);
 		box-sizing: var(--origam-col---box-sizing);
@@ -181,6 +189,17 @@ defineExpose({
 			}
 		}
 
+		@each $name, $value in $orders {
+			&--order-#{$name} {
+				--origam-col---order: #{$value};
+			}
+		}
+		@for $i from 0 through 12 {
+			&--order-#{$i} {
+				--origam-col---order: #{$i};
+			}
+		}
+
 		@each $breakpoint, $breakpointSize in $breakpoints {
 			&--#{$breakpoint}-auto {
 				@extend %default;
@@ -217,6 +236,21 @@ defineExpose({
 					}
 				}
 			}
+
+			@each $name, $value in $orders {
+				&--order-#{$breakpoint}-#{$name} {
+					@media (min-width: $breakpointSize) {
+						--origam-col---order: #{$value};
+					}
+				}
+			}
+			@for $i from 0 through 12 {
+				&--order-#{$breakpoint}-#{$i} {
+					@media (min-width: $breakpointSize) {
+						--origam-col---order: #{$i};
+					}
+				}
+			}
 		}
 	}
 </style>