yuyeon 0.1.1-rc.1 → 0.1.1-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/dist/yuyeon.js +1553 -1537
- package/dist/yuyeon.umd.cjs +15 -15
- package/lib/components/layer/base.mjs +9 -2
- package/lib/components/layer/base.mjs.map +1 -1
- package/lib/styles/_elevation.scss +3 -1
- package/package.json +1 -1
|
@@ -43,6 +43,8 @@ export function useBase(props) {
|
|
|
43
43
|
toEl = baseFromSlotEl.value;
|
|
44
44
|
}
|
|
45
45
|
baseEl.value = toEl;
|
|
46
|
+
}, {
|
|
47
|
+
flush: 'post'
|
|
46
48
|
});
|
|
47
49
|
return {
|
|
48
50
|
base$,
|
|
@@ -57,10 +59,15 @@ function getBase(selector, vm) {
|
|
|
57
59
|
let ret;
|
|
58
60
|
if (selector === 'parent') {
|
|
59
61
|
let el = vm?.proxy?.$el?.parentNode;
|
|
60
|
-
|
|
62
|
+
let parentEl = el;
|
|
63
|
+
while (el) {
|
|
64
|
+
if (el?.hasAttribute('data-base-parent')) {
|
|
65
|
+
parentEl = el;
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
61
68
|
el = el.parentNode;
|
|
62
69
|
}
|
|
63
|
-
ret =
|
|
70
|
+
ret = parentEl;
|
|
64
71
|
}
|
|
65
72
|
// Selector
|
|
66
73
|
else if (typeof selector === 'string') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.mjs","names":["computed","getCurrentInstance","ref","watchEffect","propsFactory","pressBasePropsOptions","base","String","Object","Array","useBase","props","vm","base$","baseSlot","baseEl","baseFromSlotEl","el","value","nodeType","Node","ELEMENT_NODE","undefined","getBase","isArray","toEl","$el","selector","ret","proxy","parentNode","hasAttribute","document","querySelector"],"sources":["../../../src/components/layer/base.ts"],"sourcesContent":["import {\n ComponentInternalInstance,\n ComponentPublicInstance,\n PropType,\n computed,\n getCurrentInstance,\n ref,\n watchEffect,\n} from 'vue';\n\nimport { propsFactory } from '../../util/vue-component';\n\nexport type BaseType =\n | string\n | Element\n | ComponentPublicInstance\n | [x: number, y: number]\n | undefined;\n\nexport const pressBasePropsOptions = propsFactory(\n {\n base: [String, Object, Array] as PropType<BaseType>,\n },\n 'YLayer.base',\n);\n\ninterface BaseProps {\n base: BaseType;\n}\n\nexport function useBase(props: BaseProps) {\n const vm = getCurrentInstance()!;\n\n const base$ = ref();\n const baseSlot = ref();\n const baseEl = ref<HTMLElement>();\n\n const baseFromSlotEl = computed(() => {\n const el = baseSlot.value?.[0]?.el;\n if (el && el.nodeType === Node.ELEMENT_NODE) {\n return el;\n }\n return undefined;\n });\n\n const base = computed(() => {\n if (baseEl.value && !props.base) {\n return baseEl.value;\n }\n return getBase(props.base, vm);\n });\n\n watchEffect(() => {\n if (!base$.value) {\n if (!baseFromSlotEl.value && props.base && !Array.isArray(props.base)) {\n baseEl.value = base.value;\n return;\n }\n baseEl.value = baseFromSlotEl.value;\n return;\n }\n let toEl = base$.value;\n if (toEl.baseEl) {\n toEl = toEl.baseEl;\n }\n if (base$.value?.$el) {\n if (base$.value.$el.nodeType === Node.ELEMENT_NODE) {\n toEl = base$.value.$el;\n }\n }\n if (toEl?.nodeType !== Node.ELEMENT_NODE) {\n toEl = baseFromSlotEl.value;\n }\n baseEl.value = toEl;\n });\n\n return {\n base$,\n baseEl,\n baseSlot,\n base,\n baseFromSlotEl,\n };\n}\n\nfunction getBase(selector: BaseType, vm: ComponentInternalInstance) {\n if (!selector) return;\n\n let ret;\n\n if (selector === 'parent') {\n let el = vm?.proxy?.$el?.parentNode;\n while (el?.hasAttribute('data-base-parent')) {\n el = el.parentNode;\n }\n ret =
|
|
1
|
+
{"version":3,"file":"base.mjs","names":["computed","getCurrentInstance","ref","watchEffect","propsFactory","pressBasePropsOptions","base","String","Object","Array","useBase","props","vm","base$","baseSlot","baseEl","baseFromSlotEl","el","value","nodeType","Node","ELEMENT_NODE","undefined","getBase","isArray","toEl","$el","flush","selector","ret","proxy","parentNode","parentEl","hasAttribute","document","querySelector"],"sources":["../../../src/components/layer/base.ts"],"sourcesContent":["import {\n ComponentInternalInstance,\n ComponentPublicInstance,\n PropType,\n computed,\n getCurrentInstance,\n ref,\n watchEffect,\n} from 'vue';\n\nimport { propsFactory } from '../../util/vue-component';\n\nexport type BaseType =\n | string\n | Element\n | ComponentPublicInstance\n | [x: number, y: number]\n | undefined;\n\nexport const pressBasePropsOptions = propsFactory(\n {\n base: [String, Object, Array] as PropType<BaseType>,\n },\n 'YLayer.base',\n);\n\ninterface BaseProps {\n base: BaseType;\n}\n\nexport function useBase(props: BaseProps) {\n const vm = getCurrentInstance()!;\n\n const base$ = ref();\n const baseSlot = ref();\n const baseEl = ref<HTMLElement>();\n\n const baseFromSlotEl = computed(() => {\n const el = baseSlot.value?.[0]?.el;\n if (el && el.nodeType === Node.ELEMENT_NODE) {\n return el;\n }\n return undefined;\n });\n\n const base = computed(() => {\n if (baseEl.value && !props.base) {\n return baseEl.value;\n }\n return getBase(props.base, vm);\n });\n\n watchEffect(() => {\n if (!base$.value) {\n if (!baseFromSlotEl.value && props.base && !Array.isArray(props.base)) {\n baseEl.value = base.value;\n return;\n }\n baseEl.value = baseFromSlotEl.value;\n return;\n }\n let toEl = base$.value;\n if (toEl.baseEl) {\n toEl = toEl.baseEl;\n }\n if (base$.value?.$el) {\n if (base$.value.$el.nodeType === Node.ELEMENT_NODE) {\n toEl = base$.value.$el;\n }\n }\n if (toEl?.nodeType !== Node.ELEMENT_NODE) {\n toEl = baseFromSlotEl.value;\n }\n baseEl.value = toEl;\n }, { flush: 'post' });\n\n return {\n base$,\n baseEl,\n baseSlot,\n base,\n baseFromSlotEl,\n };\n}\n\nfunction getBase(selector: BaseType, vm: ComponentInternalInstance) {\n if (!selector) return;\n\n let ret;\n\n if (selector === 'parent') {\n let el = vm?.proxy?.$el?.parentNode;\n let parentEl = el;\n while (el) {\n if (el?.hasAttribute('data-base-parent')) {\n parentEl = el;\n break;\n }\n el = el.parentNode;\n }\n ret = parentEl;\n }\n // Selector\n else if (typeof selector === 'string') {\n ret = document.querySelector(selector);\n }\n // Component\n else if ('$el' in selector) {\n ret = selector.$el;\n }\n // HTMLElement | Element | [x, y]\n else {\n ret = selector;\n }\n\n return ret;\n}\n"],"mappings":"AAAA,SAIEA,QAAQ,EACRC,kBAAkB,EAClBC,GAAG,EACHC,WAAW,QACN,KAAK;AAAC,SAEJC,YAAY;AASrB,OAAO,MAAMC,qBAAqB,GAAGD,YAAY,CAC/C;EACEE,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,EAAEC,KAAK;AAC9B,CAAC,EACD,aACF,CAAC;AAMD,OAAO,SAASC,OAAOA,CAACC,KAAgB,EAAE;EACxC,MAAMC,EAAE,GAAGX,kBAAkB,CAAC,CAAE;EAEhC,MAAMY,KAAK,GAAGX,GAAG,CAAC,CAAC;EACnB,MAAMY,QAAQ,GAAGZ,GAAG,CAAC,CAAC;EACtB,MAAMa,MAAM,GAAGb,GAAG,CAAc,CAAC;EAEjC,MAAMc,cAAc,GAAGhB,QAAQ,CAAC,MAAM;IACpC,MAAMiB,EAAE,GAAGH,QAAQ,CAACI,KAAK,GAAG,CAAC,CAAC,EAAED,EAAE;IAClC,IAAIA,EAAE,IAAIA,EAAE,CAACE,QAAQ,KAAKC,IAAI,CAACC,YAAY,EAAE;MAC3C,OAAOJ,EAAE;IACX;IACA,OAAOK,SAAS;EAClB,CAAC,CAAC;EAEF,MAAMhB,IAAI,GAAGN,QAAQ,CAAC,MAAM;IAC1B,IAAIe,MAAM,CAACG,KAAK,IAAI,CAACP,KAAK,CAACL,IAAI,EAAE;MAC/B,OAAOS,MAAM,CAACG,KAAK;IACrB;IACA,OAAOK,OAAO,CAACZ,KAAK,CAACL,IAAI,EAAEM,EAAE,CAAC;EAChC,CAAC,CAAC;EAEFT,WAAW,CAAC,MAAM;IAChB,IAAI,CAACU,KAAK,CAACK,KAAK,EAAE;MAChB,IAAI,CAACF,cAAc,CAACE,KAAK,IAAIP,KAAK,CAACL,IAAI,IAAI,CAACG,KAAK,CAACe,OAAO,CAACb,KAAK,CAACL,IAAI,CAAC,EAAE;QACrES,MAAM,CAACG,KAAK,GAAGZ,IAAI,CAACY,KAAK;QACzB;MACF;MACAH,MAAM,CAACG,KAAK,GAAGF,cAAc,CAACE,KAAK;MACnC;IACF;IACA,IAAIO,IAAI,GAAGZ,KAAK,CAACK,KAAK;IACtB,IAAIO,IAAI,CAACV,MAAM,EAAE;MACfU,IAAI,GAAGA,IAAI,CAACV,MAAM;IACpB;IACA,IAAIF,KAAK,CAACK,KAAK,EAAEQ,GAAG,EAAE;MACpB,IAAIb,KAAK,CAACK,KAAK,CAACQ,GAAG,CAACP,QAAQ,KAAKC,IAAI,CAACC,YAAY,EAAE;QAClDI,IAAI,GAAGZ,KAAK,CAACK,KAAK,CAACQ,GAAG;MACxB;IACF;IACA,IAAID,IAAI,EAAEN,QAAQ,KAAKC,IAAI,CAACC,YAAY,EAAE;MACxCI,IAAI,GAAGT,cAAc,CAACE,KAAK;IAC7B;IACAH,MAAM,CAACG,KAAK,GAAGO,IAAI;EACrB,CAAC,EAAE;IAAEE,KAAK,EAAE;EAAO,CAAC,CAAC;EAErB,OAAO;IACLd,KAAK;IACLE,MAAM;IACND,QAAQ;IACRR,IAAI;IACJU;EACF,CAAC;AACH;AAEA,SAASO,OAAOA,CAACK,QAAkB,EAAEhB,EAA6B,EAAE;EAClE,IAAI,CAACgB,QAAQ,EAAE;EAEf,IAAIC,GAAG;EAEP,IAAID,QAAQ,KAAK,QAAQ,EAAE;IACzB,IAAIX,EAAE,GAAGL,EAAE,EAAEkB,KAAK,EAAEJ,GAAG,EAAEK,UAAU;IACnC,IAAIC,QAAQ,GAAGf,EAAE;IACjB,OAAOA,EAAE,EAAE;MACT,IAAIA,EAAE,EAAEgB,YAAY,CAAC,kBAAkB,CAAC,EAAE;QACxCD,QAAQ,GAAGf,EAAE;QACb;MACF;MACAA,EAAE,GAAGA,EAAE,CAACc,UAAU;IACpB;IACAF,GAAG,GAAGG,QAAQ;EAChB;EACA;EAAA,KACK,IAAI,OAAOJ,QAAQ,KAAK,QAAQ,EAAE;IACrCC,GAAG,GAAGK,QAAQ,CAACC,aAAa,CAACP,QAAQ,CAAC;EACxC;EACA;EAAA,KACK,IAAI,KAAK,IAAIA,QAAQ,EAAE;IAC1BC,GAAG,GAAGD,QAAQ,CAACF,GAAG;EACpB;EACA;EAAA,KACK;IACHG,GAAG,GAAGD,QAAQ;EAChB;EAEA,OAAOC,GAAG;AACZ"}
|
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
@each $level, $core-dimension in $core-shadow-dimension {
|
|
8
8
|
$ambient-dimension: map.get($ambient-shadow-dimension, $level);
|
|
9
9
|
$var: --y-elevation--level#{$level};
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
.elevation-#{$level} {
|
|
12
|
+
#{$var}: #{$core-dimension} rgba(var(--y-elevation-color), #{$core-shadow-opacity}), #{$ambient-dimension} rgba(var(--y-elevation-color), #{$ambient-shadow-opacity});
|
|
13
|
+
|
|
12
14
|
box-shadow: var(#{$var});
|
|
13
15
|
}
|
|
14
16
|
}
|