yuyeon 0.1.0-rc.6 → 0.1.0-rc.7

package/lib/components/index.mjs

@@ -30,4 +30,5 @@ export * from "./divider/index.mjs";
 export * from "./date-picker/index.mjs";
 export * from "./icon/index.mjs";
 export * from "./badge/index.mjs";
+export * from "./text-ellipsis/index.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\nexport * from './button';\nexport * from './input';\nexport * from './field-input';\nexport * from './textarea';\nexport * from './form';\nexport * from './progress-bar';\nexport * from './card';\nexport * from './chip';\nexport * from './switch';\nexport * from './layer';\nexport * from './dialog';\nexport * from './snackbar';\nexport * from './tooltip';\nexport * from './transitions';\nexport * from './panel';\nexport * from './tree-view';\nexport * from './list';\nexport * from './icons';\nexport * from './table';\nexport * from './menu';\nexport * from './checkbox';\nexport * from './pagination';\nexport * from './loading';\nexport * from './dropdown';\nexport * from './select';\nexport * from './tab';\nexport * from './alert';\nexport * from './divider';\nexport * from './date-picker';\nexport * from './icon';\nexport * from './badge';\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\nexport * from './button';\nexport * from './input';\nexport * from './field-input';\nexport * from './textarea';\nexport * from './form';\nexport * from './progress-bar';\nexport * from './card';\nexport * from './chip';\nexport * from './switch';\nexport * from './layer';\nexport * from './dialog';\nexport * from './snackbar';\nexport * from './tooltip';\nexport * from './transitions';\nexport * from './panel';\nexport * from './tree-view';\nexport * from './list';\nexport * from './icons';\nexport * from './table';\nexport * from './menu';\nexport * from './checkbox';\nexport * from './pagination';\nexport * from './loading';\nexport * from './dropdown';\nexport * from './select';\nexport * from './tab';\nexport * from './alert';\nexport * from './divider';\nexport * from './date-picker';\nexport * from './icon';\nexport * from './badge';\nexport * from './text-ellipsis';\n"],"mappings":""}

package/lib/components/text-ellipsis/YTextEllipsis.mjs

@@ -0,0 +1,61 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent, ref, watch } from 'vue';
+import { useRender, useResizeObserver } from "../../composables/index.mjs";
+import "./YTextEllipsis.scss";
+export const YTextEllipsis = defineComponent({
+  name: 'YTextEllipsis',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const {
+      resizeObservedRef,
+      contentRect
+    } = useResizeObserver();
+    const isOverflow = ref(false);
+    const containerWidth = computed(() => {
+      return contentRect.value?.width;
+    });
+    const title = computed(() => {
+      return props.text;
+    });
+    const startText = computed(() => {
+      if (isOverflow.value) {
+        const length = Math.round(props.text.length * 0.5);
+        return props.text.substring(0, length);
+      }
+      return props.text;
+    });
+    const endText = computed(() => {
+      if (isOverflow.value) {
+        const length = Math.round(props.text.length * 0.5);
+        return props.text.substring(length, props.text.length);
+      }
+      return props.text;
+    });
+    watch(containerWidth, neo => {
+      if (resizeObservedRef.value && neo != null) {
+        isOverflow.value = resizeObservedRef.value.scrollWidth > resizeObservedRef.value.offsetWidth;
+      }
+    });
+    useRender(() => {
+      return _createVNode("span", {
+        "title": title.value,
+        "class": ['y-text-ellipsis', {
+          overflowed: isOverflow
+        }]
+      }, [_createVNode("span", {
+        "ref": resizeObservedRef,
+        "class": "y-text-ellipsis__origin"
+      }, [props.text]), isOverflow.value && _createVNode("span", {
+        "class": "y-text-ellipsis__start"
+      }, [startText.value]), isOverflow.value && _createVNode("span", {
+        "class": "y-text-ellipsis__end"
+      }, [endText.value])]);
+    });
+  }
+});
+//# sourceMappingURL=YTextEllipsis.mjs.map

package/lib/components/text-ellipsis/YTextEllipsis.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YTextEllipsis.mjs","names":["computed","defineComponent","ref","watch","useRender","useResizeObserver","YTextEllipsis","name","props","text","type","String","default","setup","resizeObservedRef","contentRect","isOverflow","containerWidth","value","width","title","startText","length","Math","round","substring","endText","neo","scrollWidth","offsetWidth","_createVNode","overflowed"],"sources":["../../../src/components/text-ellipsis/YTextEllipsis.tsx"],"sourcesContent":["import { computed, defineComponent, ref, watch } from 'vue';\n\nimport { useRender, useResizeObserver } from '../../composables';\n\nimport './YTextEllipsis.scss';\n\nexport const YTextEllipsis = defineComponent({\n  name: 'YTextEllipsis',\n  props: {\n    text: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n\n    const isOverflow = ref(false);\n\n    const containerWidth = computed(() => {\n      return contentRect.value?.width;\n    });\n\n    const title = computed(() => {\n      return props.text;\n    });\n\n    const startText = computed(() => {\n      if (isOverflow.value) {\n        const length = Math.round(props.text.length * 0.5);\n        return props.text.substring(0, length);\n      }\n      return props.text;\n    });\n\n    const endText = computed(() => {\n      if (isOverflow.value) {\n        const length = Math.round(props.text.length * 0.5);\n        return props.text.substring(length, props.text.length);\n      }\n      return props.text;\n    });\n\n    watch(containerWidth, (neo) => {\n      if (resizeObservedRef.value && neo != null) {\n        isOverflow.value =\n          resizeObservedRef.value.scrollWidth >\n          resizeObservedRef.value.offsetWidth;\n      }\n    });\n\n    useRender(() => {\n      return (\n        <span\n          title={title.value}\n          class={['y-text-ellipsis', { overflowed: isOverflow }]}\n        >\n          <span ref={resizeObservedRef} class=\"y-text-ellipsis__origin\">\n            {props.text}\n          </span>\n          {isOverflow.value && (\n            <span class=\"y-text-ellipsis__start\">{startText.value}</span>\n          )}\n\n          {isOverflow.value && (\n            <span class=\"y-text-ellipsis__end\">{endText.value}</span>\n          )}\n        </span>\n      );\n    });\n  },\n});\n\nexport type YTextEllipsis = InstanceType<typeof YTextEllipsis>;\n"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,eAAe,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAEnDC,SAAS,EAAEC,iBAAiB;AAErC;AAEA,OAAO,MAAMC,aAAa,GAAGL,eAAe,CAAC;EAC3CM,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJC,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,KAAKA,CAACL,KAAK,EAAE;IACX,MAAM;MAAEM,iBAAiB;MAAEC;IAAY,CAAC,GAAGV,iBAAiB,CAAC,CAAC;IAE9D,MAAMW,UAAU,GAAGd,GAAG,CAAC,KAAK,CAAC;IAE7B,MAAMe,cAAc,GAAGjB,QAAQ,CAAC,MAAM;MACpC,OAAOe,WAAW,CAACG,KAAK,EAAEC,KAAK;IACjC,CAAC,CAAC;IAEF,MAAMC,KAAK,GAAGpB,QAAQ,CAAC,MAAM;MAC3B,OAAOQ,KAAK,CAACC,IAAI;IACnB,CAAC,CAAC;IAEF,MAAMY,SAAS,GAAGrB,QAAQ,CAAC,MAAM;MAC/B,IAAIgB,UAAU,CAACE,KAAK,EAAE;QACpB,MAAMI,MAAM,GAAGC,IAAI,CAACC,KAAK,CAAChB,KAAK,CAACC,IAAI,CAACa,MAAM,GAAG,GAAG,CAAC;QAClD,OAAOd,KAAK,CAACC,IAAI,CAACgB,SAAS,CAAC,CAAC,EAAEH,MAAM,CAAC;MACxC;MACA,OAAOd,KAAK,CAACC,IAAI;IACnB,CAAC,CAAC;IAEF,MAAMiB,OAAO,GAAG1B,QAAQ,CAAC,MAAM;MAC7B,IAAIgB,UAAU,CAACE,KAAK,EAAE;QACpB,MAAMI,MAAM,GAAGC,IAAI,CAACC,KAAK,CAAChB,KAAK,CAACC,IAAI,CAACa,MAAM,GAAG,GAAG,CAAC;QAClD,OAAOd,KAAK,CAACC,IAAI,CAACgB,SAAS,CAACH,MAAM,EAAEd,KAAK,CAACC,IAAI,CAACa,MAAM,CAAC;MACxD;MACA,OAAOd,KAAK,CAACC,IAAI;IACnB,CAAC,CAAC;IAEFN,KAAK,CAACc,cAAc,EAAGU,GAAG,IAAK;MAC7B,IAAIb,iBAAiB,CAACI,KAAK,IAAIS,GAAG,IAAI,IAAI,EAAE;QAC1CX,UAAU,CAACE,KAAK,GACdJ,iBAAiB,CAACI,KAAK,CAACU,WAAW,GACnCd,iBAAiB,CAACI,KAAK,CAACW,WAAW;MACvC;IACF,CAAC,CAAC;IAEFzB,SAAS,CAAC,MAAM;MACd,OAAA0B,YAAA;QAAA,SAEWV,KAAK,CAACF,KAAK;QAAA,SACX,CAAC,iBAAiB,EAAE;UAAEa,UAAU,EAAEf;QAAW,CAAC;MAAC,IAAAc,YAAA;QAAA,OAE3ChB,iBAAiB;QAAA;MAAA,IACzBN,KAAK,CAACC,IAAI,IAEZO,UAAU,CAACE,KAAK,IAAAY,YAAA;QAAA;MAAA,IACuBT,SAAS,CAACH,KAAK,EACtD,EAEAF,UAAU,CAACE,KAAK,IAAAY,YAAA;QAAA;MAAA,IACqBJ,OAAO,CAACR,KAAK,EAClD;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/text-ellipsis/YTextEllipsis.scss

@@ -0,0 +1,43 @@
+.y-text-ellipsis {
+  display: inline-flex;
+  max-width: 100%;
+  position: relative;
+
+  &__origin {
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 0 1 auto;
+  }
+
+  &__start {
+    position: absolute;
+    left: 0;
+    overflow: hidden;
+    width: calc(52%);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__end {
+    position: absolute;
+    right: 0;
+    overflow: hidden;
+    width: calc(45% + 1rem);
+    white-space: nowrap;
+    display: inline-flex;
+    justify-content: flex-end;
+    mask-image: linear-gradient(
+                    to right,
+                    transparent 0%,
+                    rgb(0, 0, 0) 1rem,
+                    rgb(0, 0, 0) 100%
+    );
+  }
+
+  &.overflowed & {
+    &__origin {
+      color: transparent;
+      user-select: none;
+    }
+  }
+}

package/lib/components/text-ellipsis/index.mjs

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

package/lib/components/text-ellipsis/index.mjs.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.1.0-rc.6",
+  "version": "0.1.0-rc.7",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/index.d.ts

@@ -30,3 +30,4 @@ export * from './divider';
 export * from './date-picker';
 export * from './icon';
 export * from './badge';
+export * from './text-ellipsis';

package/types/components/text-ellipsis/YTextEllipsis.d.ts

@@ -0,0 +1,14 @@
+export declare const YTextEllipsis: import("vue").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    text: string;
+}, {}>;
+export type YTextEllipsis = InstanceType<typeof YTextEllipsis>;

package/types/components/text-ellipsis/index.d.ts

@@ -0,0 +1 @@
+export * from './YTextEllipsis';