@opendesign-plus/components 0.0.1-rc.4 → 0.0.1-rc.41

package/dist/treeshaking/components/search/internal/HighlightText.vue2.mjs

@@ -0,0 +1,33 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString } from "vue";
+import { highlightKeywordParts } from "../composables/useKeywordHighlight.mjs";
+const _hoisted_1 = { class: "o-search-highlight-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HighlightText",
+  props: {
+    text: {},
+    keyword: {},
+    enabled: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const parts = computed(() => {
+      if (!props.enabled || !props.keyword) {
+        return [{ text: props.text, match: false }];
+      }
+      return highlightKeywordParts(props.text, props.keyword);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(parts.value, (p, idx) => {
+          return openBlock(), createElementBlock("span", {
+            key: idx,
+            class: normalizeClass({ "is-match": p.match })
+          }, toDisplayString(p.text), 3);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/search/internal/SearchImageInput.css

@@ -0,0 +1,239 @@
+.hover-icon-rotate .o-icon[data-v-de9a7ad2] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-de9a7ad2] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-image-input[data-v-de9a7ad2] {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid transparent;
+  border-radius: var(--o-radius-xs);
+  background-color: var(--o-color-fill2);
+  transition: border-color var(--o-duration-m1);
+}
+.o-search-image-input.is-expanded[data-v-de9a7ad2] {
+  border-color: var(--o-color-primary1);
+}
+.o-search-image-input.is-expanded[data-v-de9a7ad2] .o-input.el-input .el-input__wrapper,
+.o-search-image-input.is-expanded[data-v-de9a7ad2] .o_box-main {
+  border: none !important;
+  border-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
+  box-shadow: none !important;
+}
+.o-search-image-input-row[data-v-de9a7ad2] {
+  display: flex;
+  align-items: center;
+}
+.o-search-image-input-input[data-v-de9a7ad2] {
+  width: 100%;
+  --_box-bg-color: transparent;
+}
+@media (max-width: 840px) {
+.o-search-image-input-input[data-v-de9a7ad2] input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 1440px) {
+.o-search-image-input-input.o_box-medium[data-v-de9a7ad2] {
+    --_box-height: 32px;
+}
+}
+.o-search-image-input-icon[data-v-de9a7ad2] {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 16px;
+}
+.o-search-image-input-icon.close[data-v-de9a7ad2] {
+  font-size: 16px;
+  margin-left: var(--o-gap-2);
+}
+.o-search-image-input-icon.close[data-v-de9a7ad2] {
+  overflow: hidden;
+}
+.o-search-image-input-icon.close svg[data-v-de9a7ad2] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.o-search-image-input-icon.close:hover svg[data-v-de9a7ad2] {
+    transform: rotate(180deg);
+}
+}
+.o-search-image-input-icon.upload[data-v-de9a7ad2] {
+  fill: var(--o-color-info1);
+}
+@media (max-width: 840px) {
+.o-search-image-input-icon[data-v-de9a7ad2] {
+    font-size: 24px;
+}
+.o-search-image-input-icon.close[data-v-de9a7ad2] {
+    font-size: 24px;
+}
+}
+.o-search-image-input-upload-btn[data-v-de9a7ad2] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.o-search-image-input-upload-btn[data-v-de9a7ad2]:hover {
+    background-color: var(--o-color-control2-light);
+}
+.o-search-image-input-upload-btn:hover .o-search-image-input-icon.upload[data-v-de9a7ad2] {
+    color: var(--o-color-primary2);
+}
+}
+@media (max-width: 840px) {
+.o-search-image-input-upload-btn[data-v-de9a7ad2] {
+    width: 24px;
+    height: 24px;
+}
+}
+.o-search-image-input-file[data-v-de9a7ad2] {
+  display: none;
+}
+.o-search-image-input-thumb[data-v-de9a7ad2] {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.o-search-image-input-thumb:hover .o-search-image-input-thumb-remove[data-v-de9a7ad2],
+  .o-search-image-input-thumb:hover .o-search-image-input-thumb-zoom[data-v-de9a7ad2] {
+    opacity: 1;
+}
+}
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] {
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] img {
+  height: 40px;
+  width: 40px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+@media (min-width: 841px) and (max-width: 1680px) {
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] {
+    height: 32px;
+    width: 32px;
+}
+}
+@media (max-width: 840px) {
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] {
+    height: 24px;
+    width: 24px;
+}
+}
+.o-search-image-input-thumb-zoom[data-v-de9a7ad2] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  pointer-events: auto;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-thumb-zoom .o-search-image-input-thumb-zoom-icon[data-v-de9a7ad2] {
+  color: #fff;
+  font-size: 16px;
+}
+.o-search-image-input-thumb-remove[data-v-de9a7ad2] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-thumb-remove[data-v-de9a7ad2] svg {
+  width: 16px;
+  height: 16px;
+  fill: rgb(var(--o-mixedgray-9));
+}
+.o-search-image-input-preview[data-v-de9a7ad2] {
+  padding: 0 12px 8px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-wrapper[data-v-de9a7ad2] {
+  position: relative;
+  display: inline-flex;
+  overflow: visible;
+  margin-top: 8px;
+}
+@media (hover: hover) {
+.o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-remove[data-v-de9a7ad2],
+  .o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-zoom[data-v-de9a7ad2] {
+    opacity: 1;
+}
+}
+.o-search-image-input-preview .o-search-image-input-preview-zoom[data-v-de9a7ad2] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-preview .o-search-image-input-preview-zoom .o-search-image-input-preview-zoom-icon[data-v-de9a7ad2] {
+  color: #fff;
+  font-size: 24px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-de9a7ad2] {
+  height: 72px;
+  width: 72px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-de9a7ad2] img {
+  height: 72px;
+  width: 72px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-de9a7ad2] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-de9a7ad2] svg {
+  width: 16px;
+  height: 16px;
+}