yuyeon 0.0.0 → 0.0.2

package/lib/components/input/YInput.mjs

@@ -0,0 +1,346 @@
+import { defineComponent, h, withDirectives, resolveDirective } from "vue";
+import DiMixin from "../../mixins/di.mjs";
+import { getSlot } from "../../util/vue-component.mjs";
+import "./index.scss";
+const NAME = 'y-input';
+let uidCounter = 0;
+export const YInputProps = {
+  name: String,
+  width: {
+    type: [String, Number]
+  },
+  height: [Number, String],
+  displayTag: {
+    type: String,
+    default: 'div'
+  },
+  outlined: Boolean,
+  filled: {
+    type: Boolean
+  },
+  ceramic: Boolean,
+  label: String,
+  modelValue: {
+    type: [String, Number]
+  },
+  autoSelect: {
+    type: Boolean,
+    default: true
+  },
+  floated: {
+    type: Boolean,
+    default: () => false
+  },
+  placeholder: String,
+  loading: Boolean,
+  // validate
+  readonly: Boolean,
+  disabled: Boolean,
+  status: {
+    type: String,
+    validator(value) {
+      return ['success', 'warning', 'error'].includes(value);
+    }
+  },
+  validators: Array
+};
+export const YInput = defineComponent({
+  name: NAME,
+  mixins: [DiMixin],
+  props: YInputProps,
+  emits: ['error', 'click', 'mousedown', 'mouseup', 'focus', 'blur', 'click:prepend', 'update:modelValue'],
+  data() {
+    const iid = uidCounter.toString();
+    uidCounter += 1;
+    return {
+      isFocused: false,
+      iid,
+      lazyValue: undefined,
+      inValue: '',
+      hasMouseDown: false,
+      errorResult: undefined,
+      inError: false
+    };
+  },
+  computed: {
+    classes() {
+      return {
+        'y-input--outlined': !this.ceramic && !!this.outlined,
+        'y-input--filled': !!this.filled,
+        'y-input--focused': this.isFocused,
+        'y-input--ceramic': !!this.ceramic,
+        'y-input--readonly': !!this.readonly,
+        'y-input--has-value': !!this.inValue,
+        'y-input--disabled': !!this.disabled,
+        'y-input--error': this.isError,
+        'y-input--success': this.isSuccess
+      };
+    },
+    displayStyles() {
+      let {
+        width
+      } = this;
+      if (!Number.isNaN(Number(width))) {
+        width = `${width}px`;
+      }
+      return {
+        width,
+        height: this.getDisplayHeight()
+      };
+    },
+    attrId() {
+      return this.$attrs.id ?? `y-input--${this.iid}`;
+    },
+    isFloatedLabel() {
+      return this.floated || !!this.placeholder || !this.placeholder && this.isFocused || !!this.inValue;
+    },
+    formLoading() {
+      const form$ = this.form$;
+      if (form$) {
+        return form$.loading;
+      }
+      return false;
+    },
+    isError() {
+      return this.status === 'error' || this.inError;
+    },
+    isSuccess() {
+      return !this.isError && this.status === 'success';
+    }
+  },
+  methods: {
+    createPrependOuter() {
+      const slot = getSlot(this, 'prepend-outer');
+      return slot ? h('div', {
+        class: `${NAME}__prepend-outer`
+      }, slot) : undefined;
+    },
+    createAppendOuter() {
+      const slot = getSlot(this, 'append-outer');
+      return slot ? h('div', {
+        class: `${NAME}__append-outer`
+      }, slot) : undefined;
+    },
+    createLabelSlot() {
+      const slot = getSlot(this, 'label');
+      if (!slot) {
+        if (this.label) {
+          return [this.label];
+        }
+        if (this.placeholder && !this.inValue) {
+          return [this.placeholder];
+        }
+      }
+      return slot ? [slot] : [];
+    },
+    createLabel() {
+      const show = !!this.label || !!getSlot(this, 'label');
+      if (!show) {
+        return undefined;
+      }
+      return h('label', {
+        class: {
+          [`${NAME}__label`]: true,
+          'y-input__label--floated': this.isFloatedLabel
+        },
+        '.for': this.attrId
+      }, this.createLabelSlot());
+    },
+    createDefaultChildren() {
+      const {
+        modelValue
+      } = this;
+      return [this.createLabel(), modelValue?.toString()];
+    },
+    createDefault() {
+      const {
+        modelValue,
+        formLoading,
+        attrId
+      } = this;
+      const slotContent = getSlot(this, 'default', {
+        value: modelValue,
+        formLoading,
+        attrId
+      });
+      return slotContent ?? h('div', {
+        [`.${NAME}__value`]: true,
+        '.data-id': this.attrId,
+        '.tabindex': 0,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur
+      }, this.createDefaultChildren());
+    },
+    createPrepend() {
+      const slot = getSlot(this, 'prepend', {
+        error: this.isError
+      });
+      return slot ? h('div', {
+        class: 'y-input__prepend',
+        onClick: this.onClickPrepend
+      }, slot) : undefined;
+    },
+    createAppend() {
+      return getSlot(this, 'append');
+    },
+    getDisplayHeight() {
+      const {
+        height
+      } = this;
+      if (!isNaN(Number(height))) {
+        return `${height}px`;
+      }
+      return height;
+    },
+    createDisplay() {
+      return h('div', {
+        class: {
+          [`${NAME}__display`]: true
+        },
+        // onClick: this.onClick,
+        // onMousedown: this.onMousedown,
+        // onMouseup: this.onMouseup,
+        ref: 'display',
+        style: {
+          ...this.displayStyles
+        }
+      }, [h('div', {
+        class: `${NAME}__plate`
+      }), this.createPrepend(), this.createDefault(), this.createAppend()]);
+    },
+    createHelperText() {
+      const helperTextSlot = getSlot(this, 'helper-text', {
+        error: this.status === 'error' || this.inError,
+        errorResult: this.errorResult
+      });
+      const children = [];
+      if (helperTextSlot) {
+        children.push(h('span', {}, helperTextSlot));
+      } else {
+        children.push(this.errorResult);
+      }
+      return h('div', {
+        class: `${NAME}__helper-text`
+      }, children);
+    },
+    createStackChildren() {
+      return [this.createDisplay(), this.createHelperText()];
+    },
+    createStack() {
+      return h('div', {
+        class: `${NAME}__stack`,
+        ref: 'stack'
+      }, this.createStackChildren());
+    },
+    createContent() {
+      return [this.createPrependOuter(), this.createStack(), this.createAppendOuter()];
+    },
+    //
+    onClick(event) {
+      if (this.autoSelect) {
+        if (event.target) {
+          window.getSelection()?.selectAllChildren(event.target);
+        }
+      }
+      this.$emit('click', event);
+    },
+    onMousedown(e) {
+      this.hasMouseDown = true;
+      this.$emit('mousedown', e);
+    },
+    onMouseup(e) {
+      this.hasMouseDown = false;
+      this.$emit('mouseup', e);
+    },
+    onFocus(event) {
+      this.isFocused = true;
+      this.$emit('focus', event);
+    },
+    onBlur(event) {
+      this.isFocused = false;
+      this.invokeValidators();
+      this.$emit('blur', event);
+    },
+    onClickPrepend(event) {
+      this.$emit('click:prepend', event);
+    },
+    onChange(event) {
+      this.invokeValidators();
+    },
+    //
+    invokeValidators() {
+      const {
+        validators,
+        inValue,
+        $attrs
+      } = this;
+      const {
+        required
+      } = $attrs;
+      this.resetError();
+      let flag = true;
+      if (Array.isArray(validators)) {
+        validators.some(validator => {
+          const result = validator(inValue);
+          if (typeof result === 'string') {
+            this.inError = true;
+            this.errorResult = result;
+            flag = false;
+            return true;
+          }
+          if (result === false) {
+            this.inError = true;
+            this.errorResult = '';
+            flag = false;
+            return true;
+          }
+          return false;
+        });
+      }
+      if (flag && required && !inValue) {
+        this.inError = true;
+        return false;
+      }
+      return flag;
+    },
+    resetError() {
+      this.inError = false;
+      this.errorResult = undefined;
+    },
+    getClasses() {
+      return this.classes;
+    }
+  },
+  watch: {
+    modelValue(neo) {
+      if (!this.readonly) {
+        this.inValue = neo;
+      }
+    },
+    readonly(neo) {
+      if (!neo) {
+        this.inValue = this.modelValue;
+      }
+    },
+    inValue(neo) {
+      if (!this.readonly) {
+        this.$emit('update:modelValue', neo);
+      }
+    },
+    isError(neo) {
+      this.$emit('error', neo);
+    }
+  },
+  created() {
+    this.inValue = this.modelValue;
+  },
+  render() {
+    return withDirectives(h('div', {
+      class: {
+        ...this.getClasses(),
+        [`${NAME}`]: true
+      }
+    }, this.createContent()), [[resolveDirective('theme'), this?.theme?.dark ? 'dark' : 'light']]);
+  }
+});
+//# sourceMappingURL=YInput.mjs.map

package/lib/components/input/YInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YInput.mjs","names":["defineComponent","h","withDirectives","resolveDirective","DiMixin","getSlot","NAME","uidCounter","YInputProps","name","String","width","type","Number","height","displayTag","default","outlined","Boolean","filled","ceramic","label","modelValue","autoSelect","floated","placeholder","loading","readonly","disabled","status","validator","value","includes","validators","Array","YInput","mixins","props","emits","data","iid","toString","isFocused","lazyValue","undefined","inValue","hasMouseDown","errorResult","inError","computed","classes","isError","isSuccess","displayStyles","isNaN","getDisplayHeight","attrId","$attrs","id","isFloatedLabel","formLoading","form$","methods","createPrependOuter","slot","class","createAppendOuter","createLabelSlot","createLabel","show","createDefaultChildren","createDefault","slotContent","onFocus","onBlur","createPrepend","error","onClick","onClickPrepend","createAppend","createDisplay","ref","style","createHelperText","helperTextSlot","children","push","createStackChildren","createStack","createContent","event","target","window","getSelection","selectAllChildren","$emit","onMousedown","e","onMouseup","invokeValidators","onChange","required","resetError","flag","isArray","some","result","getClasses","watch","neo","created","render","theme","dark"],"sources":["../../../src/components/input/YInput.ts"],"sourcesContent":["\r\nimport {\r\n  PropType,\r\n  VNode,\r\n  defineComponent,\r\n  h,\r\n  withDirectives, resolveDirective\r\n} from \"vue\";\r\n\r\nimport DiMixin from '../../mixins/di';\r\nimport { getSlot } from '../../util/vue-component';\r\nimport './index.scss';\r\n\r\nconst NAME = 'y-input';\r\nlet uidCounter = 0;\r\n\r\nexport const YInputProps = {\r\n  name: String,\r\n  width: {\r\n    type: [String, Number] as PropType<string | number>,\r\n  },\r\n  height: [Number, String],\r\n  displayTag: {\r\n    type: String as PropType<string>,\r\n    default: 'div',\r\n  },\r\n  outlined: Boolean as PropType<boolean>,\r\n  filled: {\r\n    type: Boolean as PropType<boolean>,\r\n  },\r\n  ceramic: Boolean as PropType<boolean>,\r\n  label: String as PropType<string>,\r\n  modelValue: { type: [String, Number] as PropType<string | number> },\r\n  autoSelect: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: true,\r\n  },\r\n  floated: { type: Boolean as PropType<boolean>, default: () => false },\r\n  placeholder: String as PropType<string>,\r\n  loading: Boolean as PropType<boolean>,\r\n  // validate\r\n  readonly: Boolean as PropType<boolean>,\r\n  disabled: Boolean as PropType<boolean>,\r\n  status: {\r\n    type: String as PropType<'success' | 'warning' | 'error' | undefined>,\r\n    validator(value: string) {\r\n      return ['success', 'warning', 'error'].includes(value);\r\n    }\r\n  },\r\n  validators: Array as PropType<((v: any) => boolean | string)[] | string[]>,\r\n}\r\n\r\nexport const YInput = defineComponent({\r\n  name: NAME,\r\n  mixins: [DiMixin],\r\n  props: YInputProps,\r\n  emits: ['error', 'click', 'mousedown', 'mouseup', 'focus', 'blur', 'click:prepend', 'update:modelValue'],\r\n  data() {\r\n    const iid = uidCounter.toString();\r\n    uidCounter += 1;\r\n    return {\r\n      isFocused: false,\r\n      iid,\r\n      lazyValue: undefined as string | undefined,\r\n      inValue: '' as string | number | undefined,\r\n      hasMouseDown: false,\r\n      errorResult: undefined as string | undefined,\r\n      inError: false,\r\n    };\r\n  },\r\n  computed: {\r\n    classes(): Record<string, boolean> {\r\n      return {\r\n        'y-input--outlined': !this.ceramic && !!this.outlined,\r\n        'y-input--filled': !!this.filled,\r\n        'y-input--focused': this.isFocused,\r\n        'y-input--ceramic': !!this.ceramic,\r\n        'y-input--readonly': !!this.readonly,\r\n        'y-input--has-value': !!this.inValue,\r\n        'y-input--disabled': !!this.disabled,\r\n        'y-input--error': this.isError,\r\n        'y-input--success': this.isSuccess,\r\n      };\r\n    },\r\n    displayStyles(): Record<string, any> {\r\n      let { width } = this;\r\n      if (!Number.isNaN(Number(width))) {\r\n        width = `${width}px`;\r\n      }\r\n      return {\r\n        width,\r\n        height: this.getDisplayHeight(),\r\n      };\r\n    },\r\n    attrId(): string {\r\n      return (this.$attrs.id as string) ?? `y-input--${this.iid}`;\r\n    },\r\n    isFloatedLabel(): boolean {\r\n      return (\r\n        this.floated ||\r\n        !!this.placeholder ||\r\n        (!this.placeholder && this.isFocused) ||\r\n        !!this.inValue\r\n      );\r\n    },\r\n    formLoading(): boolean {\r\n      const form$ = (this as any).form$ as any;\r\n      if (form$) {\r\n        return form$.loading;\r\n      }\r\n      return false;\r\n    },\r\n    isError(): boolean {\r\n      return this.status === 'error' || this.inError;\r\n    },\r\n    isSuccess(): boolean {\r\n      return !this.isError && this.status === 'success';\r\n    }\r\n  },\r\n  methods: {\r\n    createPrependOuter(): VNode | undefined {\r\n      const slot = getSlot(this, 'prepend-outer');\r\n      return slot\r\n        ? h('div', { class: `${NAME}__prepend-outer` }, slot)\r\n        : undefined;\r\n    },\r\n    createAppendOuter(): VNode | undefined {\r\n      const slot = getSlot(this, 'append-outer');\r\n      return slot\r\n        ? h('div', { class: `${NAME}__append-outer` }, slot)\r\n        : undefined;\r\n    },\r\n    createLabelSlot(): (VNode | string | VNode[])[] {\r\n      const slot: VNode[] | undefined = getSlot(this, 'label');\r\n      if (!slot) {\r\n        if (this.label) {\r\n          return [this.label];\r\n        }\r\n        if (this.placeholder && !this.inValue) {\r\n          return [this.placeholder];\r\n        }\r\n      }\r\n\r\n      return slot ? [slot] : [];\r\n    },\r\n    createLabel(): VNode | undefined {\r\n      const show = !!this.label || !!getSlot(this, 'label');\r\n      if (!show) {\r\n        return undefined;\r\n      }\r\n      return h(\r\n        'label',\r\n        {\r\n          class: {\r\n            [`${NAME}__label`]: true,\r\n            'y-input__label--floated': this.isFloatedLabel,\r\n          },\r\n          '.for': this.attrId,\r\n        },\r\n        this.createLabelSlot(),\r\n      );\r\n    },\r\n    createDefaultChildren(): (VNode | undefined | VNode[] | string)[] {\r\n      const { modelValue } = this;\r\n      return [this.createLabel(), modelValue?.toString()];\r\n    },\r\n    createDefault(): VNode[] | VNode {\r\n      const { modelValue, formLoading, attrId } = this;\r\n      const slotContent = getSlot(this, 'default', { value: modelValue, formLoading, attrId });\r\n      return slotContent ?? h(\r\n        'div',\r\n        {\r\n          [`.${NAME}__value`]: true,\r\n          '.data-id': this.attrId,\r\n          '.tabindex': 0,\r\n          onFocus: this.onFocus,\r\n          onBlur: this.onBlur,\r\n        },\r\n        this.createDefaultChildren(),\r\n      );\r\n    },\r\n    createPrepend(): VNode | undefined {\r\n      const slot = getSlot(this, 'prepend', { error: this.isError });\r\n      return slot\r\n        ? h(\r\n          'div',\r\n          {\r\n            class: 'y-input__prepend',\r\n            onClick: this.onClickPrepend,\r\n          },\r\n          slot,\r\n        )\r\n        : undefined;\r\n    },\r\n    createAppend(): VNode | VNode[] | undefined {\r\n      return getSlot(this, 'append');\r\n    },\r\n    getDisplayHeight() {\r\n      const { height } = this;\r\n      if (!isNaN(Number(height))) {\r\n        return `${height}px`;\r\n      }\r\n      return height;\r\n    },\r\n    createDisplay(): VNode {\r\n      return h(\r\n        'div',\r\n        {\r\n          class: {\r\n            [`${NAME}__display`]: true,\r\n          },\r\n          // onClick: this.onClick,\r\n          // onMousedown: this.onMousedown,\r\n          // onMouseup: this.onMouseup,\r\n          ref: 'display',\r\n          style: {\r\n            ...this.displayStyles,\r\n          },\r\n        },\r\n        [\r\n          h('div', { class: `${NAME}__plate` }),\r\n          this.createPrepend(),\r\n          this.createDefault(),\r\n          this.createAppend(),\r\n        ],\r\n      );\r\n    },\r\n    createHelperText(): VNode {\r\n      const helperTextSlot = getSlot(this, 'helper-text', {\r\n        error: this.status === 'error' || this.inError,\r\n        errorResult: this.errorResult,\r\n      });\r\n      const children = [];\r\n      if (helperTextSlot) {\r\n        children.push(h('span', {}, helperTextSlot));\r\n      } else {\r\n        children.push(this.errorResult);\r\n      }\r\n      return h('div', { class: `${NAME}__helper-text` }, children);\r\n    },\r\n    createStackChildren(): VNode[] {\r\n      return [this.createDisplay(), this.createHelperText()];\r\n    },\r\n    createStack(): VNode {\r\n      return h(\r\n        'div',\r\n        {\r\n          class: `${NAME}__stack`,\r\n          ref: 'stack',\r\n        },\r\n        this.createStackChildren(),\r\n      );\r\n    },\r\n    createContent(): (VNode | undefined)[] {\r\n      return [\r\n        this.createPrependOuter(),\r\n        this.createStack(),\r\n        this.createAppendOuter(),\r\n      ];\r\n    },\r\n    //\r\n    onClick(event: MouseEvent) {\r\n      if (this.autoSelect) {\r\n        if (event.target) {\r\n          window.getSelection()?.selectAllChildren(event.target as HTMLElement);\r\n        }\r\n      }\r\n      this.$emit('click', event);\r\n    },\r\n    onMousedown(e: Event) {\r\n      this.hasMouseDown = true;\r\n      this.$emit('mousedown', e);\r\n    },\r\n    onMouseup(e: Event) {\r\n      this.hasMouseDown = false;\r\n      this.$emit('mouseup', e);\r\n    },\r\n    onFocus(event: FocusEvent) {\r\n      this.isFocused = true;\r\n      this.$emit('focus', event);\r\n    },\r\n    onBlur(event: FocusEvent) {\r\n      this.isFocused = false;\r\n      this.invokeValidators();\r\n      this.$emit('blur', event);\r\n    },\r\n    onClickPrepend(event: MouseEvent) {\r\n      this.$emit('click:prepend', event);\r\n    },\r\n    onChange(event?: Event) {\r\n      this.invokeValidators();\r\n    },\r\n    //\r\n    invokeValidators(): boolean {\r\n      const { validators, inValue, $attrs } = this;\r\n      const { required } = $attrs;\r\n      this.resetError();\r\n      let flag = true;\r\n      if (Array.isArray(validators)) {\r\n        validators.some((validator: any) => {\r\n          const result = validator(inValue);\r\n          if (typeof result === 'string') {\r\n            this.inError = true;\r\n            this.errorResult = result;\r\n            flag = false;\r\n            return true;\r\n          }\r\n          if (result === false) {\r\n            this.inError = true;\r\n            this.errorResult = '';\r\n            flag = false;\r\n            return true;\r\n          }\r\n          return false;\r\n        });\r\n      }\r\n      if (flag && required && !inValue) {\r\n        this.inError = true;\r\n        return false;\r\n      }\r\n      return flag;\r\n    },\r\n    resetError() {\r\n      this.inError = false;\r\n      this.errorResult = undefined;\r\n    },\r\n    getClasses() {\r\n      return this.classes;\r\n    },\r\n  },\r\n  watch: {\r\n    modelValue(neo: string) {\r\n      if (!this.readonly) {\r\n        this.inValue = neo;\r\n      }\r\n    },\r\n    readonly(neo: boolean) {\r\n      if (!neo) {\r\n        this.inValue = this.modelValue;\r\n      }\r\n    },\r\n    inValue(neo: string) {\r\n      if (!this.readonly) {\r\n        this.$emit('update:modelValue', neo);\r\n      }\r\n    },\r\n    isError(neo: boolean) {\r\n      this.$emit('error', neo);\r\n    },\r\n  },\r\n  created() {\r\n    this.inValue = this.modelValue;\r\n  },\r\n  render(): VNode {\r\n    return withDirectives(\r\n      h(\r\n        'div',\r\n        {\r\n          class: { ...this.getClasses(), [`${NAME}`]: true },\r\n        },\r\n        this.createContent(),\r\n      ),\r\n      [\r\n        [\r\n          resolveDirective('theme'),\r\n          (this as any)?.theme?.dark ? 'dark' : 'light',\r\n        ],\r\n      ],\r\n    );\r\n  },\r\n});\r\n\r\nexport type YInput = InstanceType<typeof YInput>;\r\n"],"mappings":"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"}

package/{src/components/input/y-input.scss → lib/components/input/YInput.scss}

@@ -1,6 +1,3 @@
-/*!
- * Created by yeonyu 2022.
- */
 
 @use '../../styles/palette';
 @use '../../styles/variables';
@@ -115,7 +112,7 @@ $input-border-radius: variables.$border-radius-root !default;
     position: relative;
     display: inline-flex;
     margin-top: 10px;
-    padding-right: 8px;
+    padding-right: 4px;
     align-self: flex-start;
 
     > * {
@@ -206,4 +203,15 @@ $input-border-radius: variables.$border-radius-root !default;
       color: palette.$alert-negative;
     }
   }
+
+  &--success {
+    &.y-input--outlined {
+      .y-input__plate {
+        border-color: palette.$alert-positive !important;
+      }
+    }
+    .y-input__helper-text {
+      color: palette.$alert-positive;
+    }
+  }
 }

package/lib/components/input/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YInput.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/input/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["\nexport * from './YInput';\n"],"mappings":""}

package/lib/components/input/index.scss

@@ -0,0 +1,2 @@
+
+@import 'YInput';

package/lib/components/layer/YLayer.mjs

@@ -0,0 +1,193 @@
+import { mergeProps as _mergeProps, withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { Teleport, Transition, computed, defineComponent, reactive, ref, toRef } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { useLayerGroup } from "../../composables/layer-group.mjs";
+import { useLazy } from "../../composables/timing.mjs";
+import { PolyTransition, polyTransitionPropOptions, usePolyTransition } from "../../composables/transition.mjs";
+import { ComplementClick } from "../../directives/complement-click/index.mjs";
+import { bindClasses } from "../../util/vue-component.mjs";
+import "./YLayer.scss";
+export const YLayer = defineComponent({
+  name: 'YLayer',
+  inheritAttrs: false,
+  components: {
+    PolyTransition
+  },
+  directives: {
+    ComplementClick
+  },
+  props: {
+    modelValue: {
+      type: Boolean
+    },
+    scrim: {
+      type: Boolean
+    },
+    eager: {
+      type: Boolean
+    },
+    classes: {
+      type: [Array, String, Object]
+    },
+    contentClasses: {
+      type: [Array, String, Object]
+    },
+    closeClickScrim: {
+      type: Boolean
+    },
+    persistent: Boolean,
+    contentStyles: {
+      type: Object,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    ...polyTransitionPropOptions
+  },
+  emits: {
+    'update:modelValue': value => true,
+    'click:complement': mouseEvent => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      expose,
+      attrs,
+      slots
+    } = _ref;
+    const {
+      layerGroup
+    } = useLayerGroup();
+    const {
+      polyTransitionBindProps
+    } = usePolyTransition(props);
+    const active = computed({
+      get: () => {
+        return !!props.modelValue;
+      },
+      set: v => {
+        emit('update:modelValue', v);
+      }
+    });
+    const disabled = toRef(props, 'disabled');
+    const {
+      lazyValue,
+      onAfterUpdate
+    } = useLazy(!!props.eager, active);
+    const rendered = computed(() => !disabled.value && (lazyValue.value || active.value));
+    const scrim$ = ref();
+    const content$ = ref();
+    function onClickComplementLayer(mouseEvent) {
+      emit('click:complement', mouseEvent);
+      if (!props.persistent) {
+        if (scrim$.value !== null && scrim$.value === mouseEvent.target && props.closeClickScrim) {
+          active.value = false;
+        }
+      } else {
+        // TODO: shrug ani
+      }
+    }
+    function closeConditional() {
+      return active.value; // TODO: && groupTopLevel.value;
+    }
+
+    const complementClickOption = reactive({
+      handler: onClickComplementLayer,
+      determine: closeConditional,
+      include: () => [
+        // activatorEl.value
+      ]
+    });
+    expose({
+      scrim$,
+      content$,
+      active,
+      onAfterUpdate
+    });
+    function onAfterEnter() {
+      // console.log('after')
+    }
+    function onAfterLeave() {
+      onAfterUpdate();
+    }
+    function onClickScrim() {
+      if (props.closeClickScrim) {
+        active.value = false;
+      }
+    }
+    const computedStyle = computed(() => {
+      return {
+        zIndex: '2000'
+      };
+    });
+    const computedClass = computed(() => {
+      const {
+        classes
+      } = props;
+      const boundClasses = bindClasses(classes);
+      return {
+        ...boundClasses,
+        'y-layer--active': !!active.value
+      };
+    });
+    const computedContentClasses = computed(() => {
+      const boundClasses = bindClasses(props.contentClasses);
+      return {
+        ...boundClasses
+      };
+    });
+    useRender(() => {
+      return _createVNode(Teleport, {
+        "disabled": !layerGroup.value,
+        "to": layerGroup.value
+      }, {
+        default: () => [rendered.value && _createVNode("div", _mergeProps({
+          "class": {
+            'y-layer': true,
+            ...computedClass.value
+          },
+          "style": computedStyle.value
+        }, attrs), [_createVNode(Transition, {
+          "name": "fade",
+          "appear": true
+        }, {
+          default: () => [active.value && props.scrim && _createVNode("div", {
+            "class": "y-layer__scrim",
+            "onClick": onClickScrim,
+            "ref": "scrim$"
+          }, null)]
+        }), _createVNode(PolyTransition, _mergeProps({
+          "onAfterEnter": onAfterEnter,
+          "onAfterLeave": onAfterLeave,
+          "appear": true
+        }, polyTransitionBindProps.value), {
+          default: () => [_withDirectives(_createVNode("div", {
+            "class": {
+              'y-layer__content': true,
+              ...computedContentClasses.value
+            },
+            "style": props.contentStyles,
+            "ref": "content$"
+          }, [slots.default?.({
+            active: active.value
+          })]), [[_vShow, active.value], [_resolveDirective("complement-click"), {
+            ...complementClickOption
+          }]])]
+        })])]
+      });
+    });
+    return {
+      complementClickOption,
+      layerGroup,
+      active,
+      rendered,
+      onAfterUpdate: onAfterUpdate,
+      scrim$,
+      content$,
+      polyTransitionBindProps
+    };
+  }
+});
+//# sourceMappingURL=YLayer.mjs.map

package/lib/components/layer/YLayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","reactive","ref","toRef","useRender","useLayerGroup","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","YLayer","name","inheritAttrs","components","directives","props","modelValue","type","Boolean","scrim","eager","classes","Array","String","Object","contentClasses","closeClickScrim","persistent","contentStyles","default","disabled","emits","value","mouseEvent","setup","_ref","emit","expose","attrs","slots","layerGroup","polyTransitionBindProps","active","get","set","v","lazyValue","onAfterUpdate","rendered","scrim$","content$","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","_createVNode","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  Prop,\n  PropType,\n  Teleport,\n  Transition,\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  toRef,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useLayerGroup } from '../../composables/layer-group';\nimport { useLazy } from '../../composables/timing';\nimport {\n  PolyTransition,\n  polyTransitionPropOptions,\n  usePolyTransition,\n} from '../../composables/transition';\nimport {\n  ComplementClick,\n  ComplementClickBindingOptions,\n} from '../../directives/complement-click';\nimport { bindClasses } from '../../util/vue-component';\n\nimport './YLayer.scss';\n\nexport const YLayer = defineComponent({\n  name: 'YLayer',\n  inheritAttrs: false,\n  components: {\n    PolyTransition,\n  },\n  directives: {\n    ComplementClick,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    scrim: {\n      type: Boolean as PropType<boolean>,\n    },\n    eager: {\n      type: Boolean as PropType<boolean>,\n    },\n    classes: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    contentClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    closeClickScrim: {\n      type: Boolean as PropType<boolean>,\n    },\n    persistent: Boolean as PropType<boolean>,\n    contentStyles: {\n      type: Object as PropType<CSSProperties>,\n      default: () => {},\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    ...polyTransitionPropOptions,\n  },\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'click:complement': (mouseEvent: MouseEvent) => true,\n  },\n  setup(props, { emit, expose, attrs, slots }) {\n    const { layerGroup } = useLayerGroup();\n    const { polyTransitionBindProps } = usePolyTransition(props);\n    const active = computed<boolean>({\n      get: (): boolean => {\n        return !!props.modelValue;\n      },\n      set: (v: boolean) => {\n        emit('update:modelValue', v);\n      },\n    });\n    const disabled = toRef(props, 'disabled');\n    const { lazyValue, onAfterUpdate } = useLazy(!!props.eager, active);\n    const rendered = computed<boolean>(\n      () => !disabled.value && (lazyValue.value || active.value),\n    );\n    const scrim$ = ref<HTMLElement>();\n    const content$ = ref<HTMLElement>();\n\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\n      emit('click:complement', mouseEvent);\n      if (!props.persistent) {\n        if (\n          scrim$.value !== null &&\n          scrim$.value === mouseEvent.target &&\n          props.closeClickScrim\n        ) {\n          active.value = false;\n        }\n      } else {\n        // TODO: shrug ani\n      }\n    }\n\n    function closeConditional(): boolean {\n      return active.value; // TODO: && groupTopLevel.value;\n    }\n\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\n      handler: onClickComplementLayer,\n      determine: closeConditional,\n      include: () => [\n        // activatorEl.value\n      ],\n    });\n\n    expose({\n      scrim$,\n      content$,\n      active,\n      onAfterUpdate,\n    });\n\n    function onAfterEnter() {\n      // console.log('after')\n    }\n\n    function onAfterLeave() {\n      onAfterUpdate();\n    }\n\n    function onClickScrim() {\n      if (props.closeClickScrim) {\n        active.value = false;\n      }\n    }\n\n    const computedStyle = computed(() => {\n      return {\n        zIndex: '2000',\n      };\n    });\n\n    const computedClass = computed<Record<string, boolean>>(() => {\n      const { classes } = props;\n      const boundClasses = bindClasses(classes);\n      return {\n        ...boundClasses,\n        'y-layer--active': !!active.value,\n      };\n    });\n\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\n      const boundClasses = bindClasses(props.contentClasses);\n      return {\n        ...boundClasses,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\n          {rendered.value && (\n            <div\n              class={{ 'y-layer': true, ...computedClass.value }}\n              style={computedStyle.value}\n              {...attrs}\n            >\n              <Transition name=\"fade\" appear>\n                {active.value && props.scrim && (\n                  <div\n                    class=\"y-layer__scrim\"\n                    onClick={onClickScrim}\n                    ref=\"scrim$\"\n                  ></div>\n                )}\n              </Transition>\n              <PolyTransition\n                onAfterEnter={onAfterEnter}\n                onAfterLeave={onAfterLeave}\n                appear\n                {...polyTransitionBindProps.value}\n              >\n                <div\n                  v-show={active.value}\n                  v-complement-click={{ ...complementClickOption }}\n                  class={{\n                    'y-layer__content': true,\n                    ...computedContentClasses.value,\n                  }}\n                  style={props.contentStyles}\n                  ref=\"content$\"\n                >\n                  {slots.default?.({ active: active.value })}\n                </div>\n              </PolyTransition>\n            </div>\n          )}\n        </Teleport>\n      );\n    });\n\n    return {\n      complementClickOption,\n      layerGroup,\n      active,\n      rendered,\n      onAfterUpdate: onAfterUpdate as () => void,\n      scrim$,\n      content$,\n      polyTransitionBindProps,\n    };\n  },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":";AAAA,SAIEA,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,eAAe,EACfC,QAAQ,EACRC,GAAG,EACHC,KAAK,QACA,KAAK;AAAC,SAEJC,SAAS;AAAA,SACTC,aAAa;AAAA,SACbC,OAAO;AAAA,SAEdC,cAAc,EACdC,yBAAyB,EACzBC,iBAAiB;AAAA,SAGjBC,eAAe;AAAA,SAGRC,WAAW;AAEpB;AAEA,OAAO,MAAMC,MAAM,GAAGZ,eAAe,CAAC;EACpCa,IAAI,EAAE,QAAQ;EACdC,YAAY,EAAE,KAAK;EACnBC,UAAU,EAAE;IACVR;EACF,CAAC;EACDS,UAAU,EAAE;IACVN;EACF,CAAC;EACDO,KAAK,EAAE;IACLC,UAAU,EAAE;MACVC,IAAI,EAAEC;IACR,CAAC;IACDC,KAAK,EAAE;MACLF,IAAI,EAAEC;IACR,CAAC;IACDE,KAAK,EAAE;MACLH,IAAI,EAAEC;IACR,CAAC;IACDG,OAAO,EAAE;MACPJ,IAAI,EAAE,CAACK,KAAK,EAAEC,MAAM,EAAEC,MAAM;IAG9B,CAAC;IACDC,cAAc,EAAE;MACdR,IAAI,EAAE,CAACK,KAAK,EAAEC,MAAM,EAAEC,MAAM;IAG9B,CAAC;IACDE,eAAe,EAAE;MACfT,IAAI,EAAEC;IACR,CAAC;IACDS,UAAU,EAAET,OAA4B;IACxCU,aAAa,EAAE;MACbX,IAAI,EAAEO,MAAiC;MACvCK,OAAO,EAAEA,CAAA,KAAM,CAAC;IAClB,CAAC;IACDC,QAAQ,EAAE;MACRb,IAAI,EAAEC,OAA4B;MAClCW,OAAO,EAAE;IACX,CAAC;IACD,GAAGvB;EACL,CAAC;EACDyB,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAc,IAAK,IAAI;IAC7C,kBAAkB,EAAGC,UAAsB,IAAK;EAClD,CAAC;EACDC,KAAKA,CAACnB,KAAK,EAAAoB,IAAA,EAAkC;IAAA,IAAhC;MAAEC,IAAI;MAAEC,MAAM;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAJ,IAAA;IACzC,MAAM;MAAEK;IAAW,CAAC,GAAGrC,aAAa,CAAC,CAAC;IACtC,MAAM;MAAEsC;IAAwB,CAAC,GAAGlC,iBAAiB,CAACQ,KAAK,CAAC;IAC5D,MAAM2B,MAAM,GAAG7C,QAAQ,CAAU;MAC/B8C,GAAG,EAAEA,CAAA,KAAe;QAClB,OAAO,CAAC,CAAC5B,KAAK,CAACC,UAAU;MAC3B,CAAC;MACD4B,GAAG,EAAGC,CAAU,IAAK;QACnBT,IAAI,CAAC,mBAAmB,EAAES,CAAC,CAAC;MAC9B;IACF,CAAC,CAAC;IACF,MAAMf,QAAQ,GAAG7B,KAAK,CAACc,KAAK,EAAE,UAAU,CAAC;IACzC,MAAM;MAAE+B,SAAS;MAAEC;IAAc,CAAC,GAAG3C,OAAO,CAAC,CAAC,CAACW,KAAK,CAACK,KAAK,EAAEsB,MAAM,CAAC;IACnE,MAAMM,QAAQ,GAAGnD,QAAQ,CACvB,MAAM,CAACiC,QAAQ,CAACE,KAAK,KAAKc,SAAS,CAACd,KAAK,IAAIU,MAAM,CAACV,KAAK,CAC3D,CAAC;IACD,MAAMiB,MAAM,GAAGjD,GAAG,CAAc,CAAC;IACjC,MAAMkD,QAAQ,GAAGlD,GAAG,CAAc,CAAC;IAEnC,SAASmD,sBAAsBA,CAAClB,UAAsB,EAAE;MACtDG,IAAI,CAAC,kBAAkB,EAAEH,UAAU,CAAC;MACpC,IAAI,CAAClB,KAAK,CAACY,UAAU,EAAE;QACrB,IACEsB,MAAM,CAACjB,KAAK,KAAK,IAAI,IACrBiB,MAAM,CAACjB,KAAK,KAAKC,UAAU,CAACmB,MAAM,IAClCrC,KAAK,CAACW,eAAe,EACrB;UACAgB,MAAM,CAACV,KAAK,GAAG,KAAK;QACtB;MACF,CAAC,MAAM;QACL;MAAA;IAEJ;IAEA,SAASqB,gBAAgBA,CAAA,EAAY;MACnC,OAAOX,MAAM,CAACV,KAAK,CAAC,CAAC;IACvB;;IAEA,MAAMsB,qBAAqB,GAAGvD,QAAQ,CAAgC;MACpEwD,OAAO,EAAEJ,sBAAsB;MAC/BK,SAAS,EAAEH,gBAAgB;MAC3BI,OAAO,EAAEA,CAAA,KAAM;QACb;MAAA;IAEJ,CAAC,CAAC;IAEFpB,MAAM,CAAC;MACLY,MAAM;MACNC,QAAQ;MACRR,MAAM;MACNK;IACF,CAAC,CAAC;IAEF,SAASW,YAAYA,CAAA,EAAG;MACtB;IAAA;IAGF,SAASC,YAAYA,CAAA,EAAG;MACtBZ,aAAa,CAAC,CAAC;IACjB;IAEA,SAASa,YAAYA,CAAA,EAAG;MACtB,IAAI7C,KAAK,CAACW,eAAe,EAAE;QACzBgB,MAAM,CAACV,KAAK,GAAG,KAAK;MACtB;IACF;IAEA,MAAM6B,aAAa,GAAGhE,QAAQ,CAAC,MAAM;MACnC,OAAO;QACLiE,MAAM,EAAE;MACV,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,aAAa,GAAGlE,QAAQ,CAA0B,MAAM;MAC5D,MAAM;QAAEwB;MAAQ,CAAC,GAAGN,KAAK;MACzB,MAAMiD,YAAY,GAAGvD,WAAW,CAACY,OAAO,CAAC;MACzC,OAAO;QACL,GAAG2C,YAAY;QACf,iBAAiB,EAAE,CAAC,CAACtB,MAAM,CAACV;MAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMiC,sBAAsB,GAAGpE,QAAQ,CAA0B,MAAM;MACrE,MAAMmE,YAAY,GAAGvD,WAAW,CAACM,KAAK,CAACU,cAAc,CAAC;MACtD,OAAO;QACL,GAAGuC;MACL,CAAC;IACH,CAAC,CAAC;IAEF9D,SAAS,CAAC,MAAM;MACd,OAAAgE,YAAA,CAAAvE,QAAA;QAAA,YACsB,CAAC6C,UAAU,CAACR,KAAK;QAAA,MAAMQ,UAAU,CAACR;MAAK;QAAAH,OAAA,EAAAA,CAAA,MACxDmB,QAAQ,CAAChB,KAAK,IAAAkC,YAAA,QAAAC,WAAA;UAAA,SAEJ;YAAE,SAAS,EAAE,IAAI;YAAE,GAAGJ,aAAa,CAAC/B;UAAM,CAAC;UAAA,SAC3C6B,aAAa,CAAC7B;QAAK,GACtBM,KAAK,IAAA4B,YAAA,CAAAtE,UAAA;UAAA,QAEQ,MAAM;UAAA;QAAA;UAAAiC,OAAA,EAAAA,CAAA,MACpBa,MAAM,CAACV,KAAK,IAAIjB,KAAK,CAACI,KAAK,IAAA+C,YAAA;YAAA,SAElB,gBAAgB;YAAA,WACbN,YAAY;YAAA,OACjB;UAAQ,QAEf;QAAA,IAAAM,YAAA,CAAA7D,cAAA,EAAA8D,WAAA;UAAA,gBAGaT,YAAY;UAAA,gBACZC,YAAY;UAAA;QAAA,GAEtBlB,uBAAuB,CAACT,KAAK;UAAAH,OAAA,EAAAA,CAAA,MAAAuC,eAAA,CAAAF,YAAA;YAAA,SAKxB;cACL,kBAAkB,EAAE,IAAI;cACxB,GAAGD,sBAAsB,CAACjC;YAC5B,CAAC;YAAA,SACMjB,KAAK,CAACa,aAAa;YAAA,OACtB;UAAU,IAEbW,KAAK,CAACV,OAAO,GAAG;YAAEa,MAAM,EAAEA,MAAM,CAACV;UAAM,CAAC,CAAC,MAAAqC,MAAA,EATlC3B,MAAM,CAACV,KAAK,IAAAsC,iBAAA,sBACA;YAAE,GAAGhB;UAAsB,CAAC;QAAA,IAYvD;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO;MACLA,qBAAqB;MACrBd,UAAU;MACVE,MAAM;MACNM,QAAQ;MACRD,aAAa,EAAEA,aAA2B;MAC1CE,MAAM;MACNC,QAAQ;MACRT;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/layer/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YLayer.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/layer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/layer/index.ts"],"sourcesContent":["export * from './YLayer';\n"],"mappings":""}