wshisbadboy-ui-lib 0.1.0

package/src/components/Alert/Alert.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    v-if="visible"
+    :class="['my-alert', `my-alert--${type}`]"
+    role="alert"
+  >
+    <span v-if="showIcon" class="my-alert__icon">
+      <slot name="icon">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path v-if="type === 'success'" d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+          <polyline v-if="type === 'success'" points="22 4 12 14.01 9 11.01" />
+          <path v-if="type === 'warning'" d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+          <line v-if="type === 'warning'" x1="12" y1="9" x2="12" y2="13" />
+          <line v-if="type === 'warning'" x1="12" y1="17" x2="12.01" y2="17" />
+          <circle v-if="type === 'error'" cx="12" cy="12" r="10" />
+          <line v-if="type === 'error'" x1="15" y1="9" x2="9" y2="15" />
+          <line v-if="type === 'error'" x1="9" y1="9" x2="15" y2="15" />
+          <circle v-if="type === 'info'" cx="12" cy="12" r="10" />
+          <line v-if="type === 'info'" x1="12" y1="16" x2="12" y2="12" />
+          <line v-if="type === 'info'" x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>
+      </slot>
+    </span>
+    <div class="my-alert__body">
+      <span v-if="title || $slots.title" class="my-alert__title">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <p v-if="$slots.default || description" class="my-alert__desc">
+        <slot>{{ description }}</slot>
+      </p>
+    </div>
+    <button v-if="closable" class="my-alert__close" @click="close" aria-label="关闭">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyAlert',
+}
+</script>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+    validator: (v) => ['info', 'success', 'warning', 'error'].includes(v),
+  },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  closable: { type: Boolean, default: true },
+  showIcon: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['close'])
+
+const visible = ref(true)
+
+function close() {
+  visible.value = false
+  emit('close')
+}
+</script>
+
+<style>
+.my-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.6;
+  position: relative;
+  border: 1px solid transparent;
+}
+
+/* ---- info ---- */
+.my-alert--info {
+  background-color: #eff6ff;
+  border-color: #93c5fd;
+  color: #1e40af;
+}
+.my-alert--info .my-alert__desc {
+  color: #3b5998;
+}
+
+/* ---- success ---- */
+.my-alert--success {
+  background-color: #f0fdf4;
+  border-color: #86efac;
+  color: #166534;
+}
+.my-alert--success .my-alert__desc {
+  color: #3a7d44;
+}
+
+/* ---- warning ---- */
+.my-alert--warning {
+  background-color: #fffbeb;
+  border-color: #fcd34d;
+  color: #92400e;
+}
+.my-alert--warning .my-alert__desc {
+  color: #a16207;
+}
+
+/* ---- error ---- */
+.my-alert--error {
+  background-color: #fef2f2;
+  border-color: #fca5a5;
+  color: #991b1b;
+}
+.my-alert--error .my-alert__desc {
+  color: #b91c1c;
+}
+
+.my-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+
+.my-alert__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.my-alert__title {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.my-alert__desc {
+  margin: 0;
+  font-size: 13px;
+}
+
+.my-alert__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: opacity 0.15s, background-color 0.15s;
+  padding: 0;
+  margin-top: 1px;
+}
+.my-alert__close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+</style>

package/src/components/Alert/index.js

@@ -0,0 +1,7 @@
+import Alert from './Alert.vue'
+
+Alert.install = (app) => {
+  app.component(Alert.name, Alert)
+}
+
+export default Alert

package/src/components/Button/Button.vue

@@ -0,0 +1,183 @@
+<template>
+  <button
+    :class="[
+      'my-btn',
+      `my-btn--${variant}`,
+      `my-btn--${size}`,
+      {
+        'my-btn--loading': loading,
+        'my-btn--icon-only': isIconOnly,
+      },
+    ]"
+    :disabled="disabled || loading"
+    :type="nativeType"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="my-btn__loader"></span>
+    <span v-if="icon && !loading" class="my-btn__icon">
+      <slot name="icon">{{ icon }}</slot>
+    </span>
+    <span v-if="hasDefaultSlot && !isIconOnly" class="my-btn__text">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MyButton',
+}
+</script>
+
+<script setup>
+import { useSlots, computed } from 'vue'
+
+defineProps({
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['primary', 'secondary', 'outline', 'text'].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (v) => ['small', 'medium', 'large'].includes(v),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  nativeType: {
+    type: String,
+    default: 'button',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['click'])
+const slots = useSlots()
+const hasDefaultSlot = computed(() => !!slots.default)
+const isIconOnly = computed(() => !hasDefaultSlot.value)
+
+function handleClick(e) {
+  emit('click', e)
+}
+</script>
+
+<style>
+.my-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.my-btn--small { padding: 6px 12px; font-size: 13px; min-height: 30px; }
+.my-btn--medium { padding: 8px 18px; font-size: 14px; min-height: 36px; }
+.my-btn--large { padding: 10px 24px; font-size: 16px; min-height: 42px; }
+
+.my-btn--small.my-btn--icon-only { padding: 6px; width: 30px; }
+.my-btn--medium.my-btn--icon-only { padding: 8px; width: 36px; }
+.my-btn--large.my-btn--icon-only { padding: 10px; width: 42px; }
+
+/* ---- primary ---- */
+.my-btn--primary {
+  background-color: var(--my-primary);
+  color: #fff;
+  border-color: var(--my-primary);
+}
+.my-btn--primary:hover:not(:disabled) {
+  background-color: var(--my-primary-hover);
+  border-color: var(--my-primary-hover);
+}
+.my-btn--primary:active:not(:disabled) {
+  background-color: var(--my-primary-active);
+}
+
+/* ---- secondary ---- */
+.my-btn--secondary {
+  background-color: var(--my-btn-secondary-bg);
+  color: var(--my-text);
+  border-color: var(--my-btn-secondary-border);
+}
+.my-btn--secondary:hover:not(:disabled) {
+  background-color: var(--my-btn-secondary-hover);
+}
+.my-btn--secondary:active:not(:disabled) {
+  background-color: var(--my-btn-secondary-active);
+}
+
+/* ---- outline ---- */
+.my-btn--outline {
+  background-color: transparent;
+  color: var(--my-primary);
+  border-color: var(--my-primary);
+}
+.my-btn--outline:hover:not(:disabled) {
+  background-color: var(--my-primary-light);
+}
+.my-btn--outline:active:not(:disabled) {
+  background-color: var(--my-primary-lighter);
+}
+
+/* ---- text ---- */
+.my-btn--text {
+  background-color: transparent;
+  color: var(--my-primary);
+  border-color: transparent;
+}
+.my-btn--text:hover:not(:disabled) {
+  background-color: var(--my-btn-text-hover);
+}
+.my-btn--text:active:not(:disabled) {
+  background-color: var(--my-btn-text-active);
+}
+
+/* ---- states ---- */
+.my-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- loader ---- */
+.my-btn__loader {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: my-btn-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes my-btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+.my-btn__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.my-btn__text {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

package/src/components/Button/index.js

@@ -0,0 +1,7 @@
+import Button from './Button.vue'
+
+Button.install = (app) => {
+  app.component(Button.name, Button)
+}
+
+export default Button

package/src/components/Collapse/Collapse.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="my-collapse">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyCollapse',
+}
+</script>
+
+<script setup>
+import { provide, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  accordion: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const activeNames = ref([...props.modelValue])
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    activeNames.value = [...val]
+  },
+)
+
+provide('collapse', {
+  activeNames,
+  accordion: props.accordion,
+  onItemToggle(name) {
+    const idx = activeNames.value.indexOf(name)
+    if (idx > -1) {
+      activeNames.value.splice(idx, 1)
+    } else {
+      if (props.accordion) {
+        activeNames.value = [name]
+      } else {
+        activeNames.value.push(name)
+      }
+    }
+    emit('update:modelValue', [...activeNames.value])
+  },
+})
+</script>
+
+<style>
+.my-collapse {
+  border: 1px solid var(--my-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+</style>

package/src/components/Collapse/CollapseItem.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    :class="['my-collapse-item', { 'is-active': isActive, 'is-disabled': disabled }]"
+  >
+    <button
+      class="my-collapse-item__header"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <span class="my-collapse-item__title">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <span class="my-collapse-item__arrow">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </span>
+    </button>
+    <div class="my-collapse-item__wrap" :style="{ height: wrapHeight }">
+      <div class="my-collapse-item__content" ref="contentRef">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyCollapseItem',
+}
+</script>
+
+<script setup>
+import { ref, inject, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+
+const collapse = inject('collapse', null)
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  name: { type: [String, Number], required: true },
+  disabled: { type: Boolean, default: false },
+})
+
+const contentRef = ref(null)
+const wrapHeight = ref('0')
+let resizeObserver = null
+
+const isActive = computed(() => {
+  if (!collapse) return false
+  return collapse.activeNames.value.includes(props.name)
+})
+
+function measureHeight() {
+  return contentRef.value ? contentRef.value.scrollHeight : 0
+}
+
+function toggle() {
+  if (props.disabled || !collapse) return
+  collapse.onItemToggle(props.name)
+}
+
+async function expand() {
+  wrapHeight.value = 'auto'
+  await nextTick()
+  const h = measureHeight()
+
+  wrapHeight.value = '0'
+  // force reflow
+  // eslint-disable-next-line no-unused-expressions
+  contentRef.value?.scrollHeight
+
+  requestAnimationFrame(() => {
+    wrapHeight.value = h + 'px'
+  })
+}
+
+function collapse_() {
+  const current = measureHeight()
+  wrapHeight.value = current + 'px'
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      wrapHeight.value = '0'
+    })
+  })
+}
+
+watch(isActive, (val) => {
+  if (val) {
+    expand()
+  } else {
+    collapse_()
+  }
+})
+
+onMounted(() => {
+  if (isActive.value) {
+    wrapHeight.value = 'auto'
+  }
+  if (contentRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      if (isActive.value && wrapHeight.value !== 'auto') {
+        const h = measureHeight()
+        if (h > 0) wrapHeight.value = h + 'px'
+      }
+    })
+    resizeObserver.observe(contentRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (resizeObserver) resizeObserver.disconnect()
+})
+</script>
+
+<style>
+.my-collapse-item {
+  border-bottom: 1px solid var(--my-border);
+}
+.my-collapse-item:last-child {
+  border-bottom: none;
+}
+
+.my-collapse-item__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: var(--my-bg);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--my-text);
+  cursor: pointer;
+  transition: background-color 0.15s;
+  line-height: 1.4;
+  text-align: left;
+  font-family: inherit;
+}
+.my-collapse-item__header:hover:not(:disabled) {
+  background-color: var(--my-bg-soft);
+}
+.my-collapse-item__header:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.my-collapse-item__title {
+  flex: 1;
+}
+
+.my-collapse-item__arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--my-text-muted);
+  transition: transform 0.3s;
+}
+.my-collapse-item.is-active .my-collapse-item__arrow {
+  transform: rotate(180deg);
+}
+
+.my-collapse-item__wrap {
+  overflow: hidden;
+  transition: height 0.3s ease;
+  background: var(--my-bg);
+  will-change: height;
+}
+
+.my-collapse-item__content {
+  padding: 0 16px 16px;
+  font-size: 14px;
+  color: var(--my-text-soft);
+  line-height: 1.6;
+}
+</style>

package/src/components/Collapse/index.js

@@ -0,0 +1,12 @@
+import Collapse from './Collapse.vue'
+import CollapseItem from './CollapseItem.vue'
+
+Collapse.install = (app) => {
+  app.component(Collapse.name, Collapse)
+}
+CollapseItem.install = (app) => {
+  app.component(CollapseItem.name, CollapseItem)
+}
+
+export { Collapse, CollapseItem }
+export default Collapse