origam 0.3.9 → 2.2.1

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -1,73 +1,86 @@
 <template>
-	<div
-			:class="selectionControlClasses"
-			:style="selectionControlStyles"
-			v-bind="rootAttrs"
-	>
-		<div
-				:style="textColorStyles"
-				class="origam-selection-control__wrapper"
-		>
-			<slot
-					name="default"
-					v-bind="{ model, textColorStyles, backgroundColorStyles, icon, props: { onFocus: handleFocus, onBlur: handleBlur, id } }"
-			/>
+  <div
+    :class="selectionControlClasses"
+    :style="selectionControlStyles"
+    v-bind="rootAttrs"
+  >
+    <div
+      :class="selectionControlWrapperClasses"
+      :style="wrapperColorStyles"
+    >
+      <slot
+        name="default"
+        v-bind="{ model, color, bgColor, icon, props: { onFocus: handleFocus, onBlur: handleBlur, id } }"
+      />
 
-			<div
-					v-ripple="rippleProp"
-					class="origam-selection-control__input"
-			>
-				<slot
-						name="input"
-						v-bind="{ model, textColorStyles, backgroundColorStyles, icon, props: { ...inputAttrs, disabled: props.disabled, label: props.label, name: props.name, type: props.type, value: trueValue, onFocus: handleFocus, onBlur: handleBlur, id, onInput: handleInput } }"
-				>
-					<template v-if="icon">
-						<origam-icon
-								key="icon"
-								:icon="icon"
-						/>
-					</template>
+      <div
+        v-ripple="rippleProp"
+        class="origam-selection-control__input"
+      >
+        <slot
+          name="input"
+          v-bind="{ model, color, bgColor, icon, props: { ...inputAttrs, disabled: disabled, label: label, name: name, type: type, value: trueValue, onFocus: handleFocus, onBlur: handleBlur, id, onInput: handleInput } }"
+        >
+          <template v-if="icon">
+            <origam-icon
+              key="icon"
+              :icon="icon"
+              :color="bgColor"
+            />
+          </template>
 
-					<input
-							:id="id"
-							ref="inputRef"
-							:aria-checked="props.type === 'checkbox' ? model : undefined"
-							:aria-disabled="props.disabled"
-							:aria-label="props.label"
-							:checked="model"
-							:disabled="props.disabled"
-							:name="props.name"
-							:type="props.type"
-							:value="trueValue"
-							v-bind="inputAttrs"
-							@blur="handleBlur"
-							@focus="handleFocus"
-							@input="handleInput"
-					/>
-				</slot>
-			</div>
-		</div>
+          <input
+            :id="id"
+            ref="inputRef"
+            :aria-checked="type === 'checkbox' ? model : undefined"
+            :aria-disabled="disabled"
+            :aria-label="label"
+            :checked="model"
+            :disabled="disabled"
+            :name="name"
+            :type="type"
+            :value="trueValue"
+            v-bind="inputAttrs"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            @input="handleInput"
+          />
+        </slot>
+      </div>
+    </div>
 
-		<div class="origam-selection-control__label">
-			<slot name="label">
-				<origam-label
-						:for="id"
-						:required="required"
-						:text="label"
-						@click="handleClickLabel"
-				/>
-			</slot>
-		</div>
-	</div>
+    <div class="origam-selection-control__label">
+      <slot name="label">
+        <origam-label
+          ref="origamLabelRef"
+          :for="id"
+          :text="label"
+          :color="color"
+          v-bind="labelProps"
+          @click="handleClickLabel"
+        />
+      </slot>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { computed, nextTick, ref, shallowRef, StyleValue, useAttrs } from "vue";
+import { computed, inject, nextTick, ref, shallowRef, StyleValue, useAttrs } from "vue";
+import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { OrigamIcon, OrigamLabel } from "../../components";
-import { useProps, useSelectionControl } from "../../composables";
+import {
+  useDefaults,
+  useDensity,
+  useHover,
+  useProps,
+  useStateEffect,
+  useStyle,
+  useTextColor,
+  useVModel
+} from "../../composables";
 import { vRipple } from "../../directives";
-import { filterInputAttrs, forwardRefs, getUid, matchesSelector } from "../../utils";
-const props = defineProps({
+import { deepEqual, filterInputAttrs, forwardRefs, getUid, matchesSelector, wrapInArray } from "../../utils";
+const _props = defineProps({
   label: { type: String, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
@@ -88,27 +101,58 @@ const props = defineProps({
   type: { type: String, required: false },
   valueComparator: { type: Function, 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 },
   density: { type: null, required: false },
-  ripple: { type: [Boolean, Object], required: false }
+  ripple: { type: [Boolean, Object], required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
-const emits = defineEmits(["update:modelValue", "click:label"]);
+const props = useDefaults(_props);
+const emits = defineEmits(["click:label", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const inputRef = ref();
 const attrs = useAttrs();
-const {
-  group,
-  densityClasses,
-  icon,
-  model,
-  textColorStyles,
-  backgroundColorStyles,
-  trueValue
-} = useSelectionControl(props);
+const group = inject(ORIGAM_SELECTION_CONTROL_GROUP_KEY, void 0);
+const { densityClasses } = useDensity(props);
+const { isHover, hoverState } = useHover(props);
+useStateEffect(props, isHover, void 0, hoverState, void 0);
+const modelValue = useVModel(props, "modelValue");
+const trueValue = computed(() => {
+  return props.trueValue !== void 0 ? props.trueValue : props.value !== void 0 ? props.value : true;
+});
+const falseValue = computed(() => {
+  return props.falseValue !== void 0 ? props.falseValue : false;
+});
+const isMultiple = computed(() => {
+  return !!props.multiple || props.multiple == null && Array.isArray(modelValue.value);
+});
+const valueComparator = computed(() => {
+  return props.valueComparator ?? deepEqual;
+});
+const model = computed({
+  get() {
+    const val = group ? group.modelValue.value : modelValue.value;
+    return isMultiple.value ? wrapInArray(val).some((v) => valueComparator.value(v, trueValue.value)) : valueComparator.value(val, trueValue.value);
+  },
+  set(val) {
+    if (props.readonly) return;
+    const currentValue = val ? trueValue.value : falseValue.value;
+    let newVal = currentValue;
+    if (isMultiple.value) {
+      newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter((item) => !valueComparator.value(item, trueValue.value));
+    }
+    if (group) {
+      group.modelValue.value = newVal;
+    } else {
+      modelValue.value = newVal;
+    }
+  }
+});
+const icon = computed(() => {
+  return model.value ? props.trueIcon : props.falseIcon;
+});
 const uid = getUid();
 const isFocused = shallowRef(false);
 const isFocusVisible = shallowRef(false);
@@ -121,6 +165,10 @@ group?.onForceUpdate(() => {
     inputRef.value.checked = model.value;
   }
 });
+const origamLabelRef = ref();
+const labelProps = computed(() => {
+  return origamLabelRef.value?.filterProps(props, ["text", "color", "bgColor", "class", "style", "id", "for"]);
+});
 const handleFocus = (e) => {
   if (!isInteractive.value) return;
   isFocused.value = true;
@@ -143,6 +191,15 @@ const handleInput = (e) => {
   model.value = e.target.checked;
 };
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+const color = computed(() => {
+  if (props.error || props.disabled) return void 0;
+  return model.value ? props.activeColor || props.color : props.color;
+});
+const bgColor = computed(() => {
+  if (props.error || props.disabled) return void 0;
+  return model.value ? props.activeBgColor || props.bgColor : props.bgColor;
+});
+const { textColorClasses: wrapperColorClasses, textColorStyles: wrapperColorStyles } = useTextColor(color);
 const rippleProp = computed(() => {
   if (props.ripple) {
     return [!props.disabled && !props.readonly, null, ["center", "circle"]];
@@ -151,11 +208,15 @@ const rippleProp = computed(() => {
 });
 const selectionControlStyles = computed(() => {
   return [
-    textColorStyles.value,
-    backgroundColorStyles.value,
     props.style
   ];
 });
+const selectionControlWrapperClasses = computed(() => {
+  return [
+    "origam-selection-control__wrapper",
+    wrapperColorClasses.value
+  ];
+});
 const selectionControlClasses = computed(() => {
   return [
     "origam-selection-control",
@@ -171,148 +232,151 @@ const selectionControlClasses = computed(() => {
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps }, inputRef));
+const { id: styleId, css, load, isLoaded, unload } = useStyle(selectionControlStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
+}, inputRef));
 </script>
 
 <style lang="scss" scoped>
-	.origam-selection-control {
-		$this: &;
+  .origam-selection-control {
+    $this: &;
 
-		align-items: center;
-		contain: layout;
-		display: flex;
-		flex: 1 0;
-		grid-area: control;
-		position: relative;
-		user-select: none;
+    align-items: center;
+    contain: layout;
+    display: flex;
+    flex: 1 0;
+    grid-area: control;
+    position: relative;
+    user-select: none;
 
-		.origam-label {
-			white-space: normal;
-			word-break: break-word;
-			height: 100%;
-		}
+    .origam-label {
+      white-space: normal;
+      word-break: break-word;
+      height: 100%;
+    }
 
-		&__wrapper {
-			width: calc(40px + 1.5 * var(--origam-selection-control--density));
-			height: calc(40px + 1.5 * var(--origam-selection-control--density));
-			display: inline-flex;
-			align-items: center;
-			position: relative;
-			justify-content: center;
-			flex: none;
-		}
+    &__wrapper {
+      width: calc(40px + 1.5 * var(--origam-selection-control--density));
+      height: calc(40px + 1.5 * var(--origam-selection-control--density));
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+      justify-content: center;
+      flex: none;
+    }
 
-		&__input {
-			width: calc(40px + 1.5 * var(--origam-selection-control--density));
-			height: calc(40px + 1.5 * var(--origam-selection-control--density));
-			align-items: center;
-			display: flex;
-			flex: none;
-			justify-content: center;
-			position: relative;
-			border-radius: 50%;
+    &__input {
+      width: calc(40px + 1.5 * var(--origam-selection-control--density));
+      height: calc(40px + 1.5 * var(--origam-selection-control--density));
+      align-items: center;
+      display: flex;
+      flex: none;
+      justify-content: center;
+      position: relative;
+      border-radius: 50%;
 
-			> .origam-icon {
-				opacity: 0.7;
-			}
+      > .origam-icon {
+        opacity: 0.7;
+      }
 
-			:deep(input) {
-				cursor: pointer;
-				position: absolute;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				opacity: 0;
-			}
+      :deep(input) {
+        cursor: pointer;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+      }
 
-			&:before {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 100%;
-				background-color: currentColor;
-				opacity: 0;
-				pointer-events: none;
-			}
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        background-color: currentColor;
+        opacity: 0;
+        pointer-events: none;
+      }
 
-			&:hover {
-				&:before {
-					opacity: 0.04;
-				}
-			}
-		}
+      &:hover {
+        &:before {
+          opacity: 0.04;
+        }
+      }
+    }
 
-		&--disabled,
-		&--dirty,
-		&--error {
-			#{$this}__input {
-				> .origam-icon {
-					opacity: 1;
-				}
-			}
-		}
+    &--disabled,
+    &--dirty,
+    &--error {
+      #{$this}__input {
+        > .origam-icon {
+          opacity: 1;
+        }
+      }
+    }
 
-		&--error,
-		&--disabled {
-			.origam-label {
-				opacity: 1;
-			}
-		}
+    &--error,
+    &--disabled {
+      .origam-label {
+        opacity: 1;
+      }
+    }
 
-		&--disabled {
-			opacity: 0.5;
-			pointer-events: none;
-		}
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
 
-		&--error {
-			:not(#{$this}--disabled) {
-				.origam-label {
-					color: rgba(255, 0, 0, 1);
-				}
+    &--error {
+      :not(#{$this}--disabled) {
+        .origam-label {
+          color: var(--origam-selection-control__label---color-error, var(--origam-color__feedback--danger---fgSubtle, #B91C1C));
+        }
 
-				#{$this}__input {
-					> .origam-icon {
-						color: rgba(255, 0, 0, 1);
-					}
-				}
-			}
-		}
+        #{$this}__input {
+          > .origam-icon {
+            color: var(--origam-selection-control__icon---color-error, var(--origam-color__feedback--danger---fgSubtle, #B91C1C));
+          }
+        }
+      }
+    }
 
-		&--inline {
-			display: inline-flex;
-			flex: 0 0 auto;
-			min-width: 0;
-			max-width: 100%;
+    &--inline {
+      display: inline-flex;
+      flex: 0 0 auto;
+      min-width: 0;
+      max-width: 100%;
 
-			.origam-label {
-				width: auto;
-			}
-		}
+      .origam-label {
+        width: auto;
+      }
+    }
 
-		&--focus-visible {
-			#{$this}__input {
-				&:before {
-					opacity: calc(0.12 * 1);
-				}
-			}
-		}
+    &--focus-visible {
+      #{$this}__input {
+        &:before {
+          opacity: calc(0.12 * 1);
+        }
+      }
+    }
 
-		&--density-default {
-			--origam-selection-control--density: 0px;
-		}
+    &--density-default {
+      --origam-selection-control--density: 0px;
+    }
 
-		&--density-compact {
-			--origam-selection-control--density: -8px;
-		}
-	}
-</style>
-
-<style>
-	:root {
-
-	}
+    &--density-compact {
+      --origam-selection-control--density: -8px;
+    }
+  }
 </style>

package/dist/src/components/SelectionControl/OrigamSelectionControlGroup.vue

@@ -4,31 +4,38 @@
 			:class="selectionControlGroupClasses"
 			:style="selectionControlGroupStyles"
 	>
-		<slot
-				name="default"
-				v-bind="{items}"
-		>
-			<template
-					v-for="(item, index) in items"
-					:key="index"
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot
+					name="default"
+					v-bind="{items}"
 			>
-				<slot
-						:name="`item.${index}`"
-						v-bind="{item}"
+				<template
+						v-for="(item, index) in items"
+						:key="index"
 				>
 					<slot
-							name="item"
+							:name="`item.${index}`"
 							v-bind="{item}"
-					/>
-				</slot>
-			</template>
-		</slot>
+					>
+						<slot
+								name="item"
+								v-bind="{item, index}"
+						/>
+					</slot>
+				</template>
+			</slot>
+		</origam-defaults-provider>
 	</div>
 </template>
 
 <script setup>
 import { computed, onScopeDispose, provide, StyleValue } from "vue";
-import { useProps, useVModel } from "../../composables";
+import { OrigamDefaultsProvider } from "../../components";
+import {
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { DENSITY } from "../../enums";
 import { getUid } from "../../utils";
@@ -44,21 +51,33 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
-  items: { type: Array, required: false, default: () => [] },
+  items: { type: [Array, Object], required: false, default: () => [] },
   id: { type: String, required: false },
   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 },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   ripple: { type: [Boolean, Object], required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
+const slotDefaults = computed(() => ({
+  "origam-selection-control": {
+    density: props.density,
+    color: props.color,
+    type: props.type,
+    disabled: props.disabled,
+    readonly: props.readonly,
+    error: props.error,
+    multiple: props.multiple,
+    name: props.name,
+    ripple: props.ripple,
+    falseIcon: props.falseIcon,
+    trueIcon: props.trueIcon,
+    valueComparator: props.valueComparator
+  }
+}));
 const modelValue = useVModel(props, "modelValue");
 const uid = getUid();
 const id = computed(() => {
@@ -92,7 +111,14 @@ const selectionControlGroupClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(selectionControlGroupStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>