srcdev-nuxt-components 3.0.0 → 4.0.0

package/components/functional/display-dialog/variants/DisplayDialogConfirm.vue

@@ -0,0 +1,45 @@
+<template>
+  <DisplayDialogCore variant="confirm" :styleClassPassthrough :lockViewport="true" :dataDialogId>
+    <template #dialogTitle>
+      <slot name="dialogTitle">
+        <p class="text-normal wght-700">Confirm</p>
+      </slot>
+    </template>
+    <template #dialogContent>
+      <slot name="dialogContent"></slot>
+    </template>
+    <template #actionButtons>
+      <slot name="actionButtonLeft"></slot>
+      <slot name="actionButtonRight"></slot>
+    </template>
+  </DisplayDialogCore>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="css">
+.display-dialog-core {
+  .inner {
+    .header {
+      /* background-color: aquamarine; */
+    }
+    .dialog-content {
+      /* background-color: bisque; */
+    }
+    .footer {
+      /* background-color: blueviolet; */
+    }
+  }
+}
+</style>

package/components/functional/display-dialog/variants/DisplayDialogScrollableContent.vue

@@ -0,0 +1,49 @@
+<template>
+  <DisplayDialogCore variant="dialog" :styleClassPassthrough :lockViewport="true" :allowContentScroll :dataDialogId>
+    <template #dialogTitle>
+      <slot name="dialogTitle">
+        <p class="text-normal wght-700">Confirm</p>
+      </slot>
+    </template>
+    <template #dialogContent>
+      <slot name="dialogContent"></slot>
+    </template>
+    <template #actionButtons>
+      <slot name="actionButtonLeft"></slot>
+      <slot name="actionButtonRight"></slot>
+    </template>
+  </DisplayDialogCore>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  allowContentScroll: {
+    type: Boolean,
+    default: false,
+  },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="css">
+.display-dialog-core {
+  .inner {
+    .header {
+      /* background-color: aquamarine; */
+    }
+    .dialog-content {
+      /* background-color: bisque; */
+    }
+    .footer {
+      /* background-color: blueviolet; */
+    }
+  }
+}
+</style>

package/components/functional/pop-over/PopOver.vue

@@ -0,0 +1,88 @@
+<template>
+  <ClientOnly>
+    <button :popovertarget popovertargetaction="toggle" class="popover-trigger" :class="[elementClasses]">
+      <slot name="trigger"></slot>
+    </button>
+
+    <div class="dialog" popover role="tooltip" :id="popovertarget" :class="[elementClasses]">
+      <button :popovertarget popovertargetaction="hide">x</button>
+      <slot name="popoverCotent"></slot>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  popovertarget: {
+    type: String,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const anchorName = `--anchor-${useId()}`;
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style scoped lang="css">
+@layer popover-setup {
+  /* @position-try --right {
+    inset: auto;
+    top: anchor(top);
+    left: calc(anchor(right) + 10px);
+  }
+
+  @position-try --left {
+    inset: auto;
+    top: anchor(top);
+    right: calc(anchor(left) + 10px);
+  } */
+
+  .popover-trigger {
+    anchor-name: v-bind(anchorName);
+  }
+
+  .dialog {
+    display: none;
+    position: absolute;
+    position-anchor: v-bind(anchorName);
+    margin: 0;
+    inset: auto;
+    top: calc(anchor(top) + 0px);
+    left: calc(anchor(right) + 10px);
+    opacity: 0;
+    transition: opacity 200ms, display 200ms, overlay 200ms;
+    transition-behavior: allow-discrete;
+
+    position-try-fallbacks: flip-inline;
+
+    &:popover-open {
+      display: block;
+      opacity: 1;
+
+      @starting-style {
+        display: block;
+        opacity: 0;
+      }
+    }
+  }
+
+  @position-try --top-left {
+    top: anchor(top);
+    right: calc(anchor(left + 10px));
+    left: unset;
+    /* width: revert; */
+  }
+
+  @position-try --bottom-right {
+    top: anchor(bottom);
+    /* right: calc(anchor(left + 10px)); */
+    /* left: unset; */
+    /* width: revert; */
+  }
+}
+</style>